kitos
2624585e05
New MetricTooltip component — a small ⓘ icon showing an executive- friendly explanation panel on hover (CSS, no JS, instant). DashboardPage: tooltips on all 6 coverage summary cards (Total Techniques, Validated, Partial, In Progress, Not Covered, Not Evaluated), Coverage Evolution chart, Test Pipeline funnel, Team Activity and Validation Rate section headers. ExecutiveDashboardPage: tooltips on all 4 sub-scores (Coverage, Detection, Critical, Response), Score Trend, Top Threat Actors, 4 KPIs (MTTD, MTTR, Detection Efficacy, Validation Throughput), Coverage by Tactic, Critical Gaps table, and all 6 team metrics (Red/Blue Tests Done, Avg Time, Rejection). Each tooltip explains what the metric measures, what a good/bad value looks like, and what action to take — written for non- technical executives.
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import MetricTooltip from "./MetricTooltip";
|
|
|
|
interface CoverageSummaryCardProps {
|
|
title: string;
|
|
value: number;
|
|
total?: number;
|
|
icon: ReactNode;
|
|
colorClass: string;
|
|
bgClass: string;
|
|
/** Optional tooltip explaining this metric to non-technical users */
|
|
tooltip?: { description: string; context?: string };
|
|
}
|
|
|
|
export default function CoverageSummaryCard({
|
|
title,
|
|
value,
|
|
total,
|
|
icon,
|
|
colorClass,
|
|
bgClass,
|
|
tooltip,
|
|
}: CoverageSummaryCardProps) {
|
|
const percentage = total && total > 0 ? ((value / total) * 100).toFixed(1) : null;
|
|
|
|
return (
|
|
<div className={`rounded-xl border border-gray-800 ${bgClass} p-5`}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-400 flex items-center">
|
|
{title}
|
|
{tooltip && (
|
|
<MetricTooltip
|
|
title={title}
|
|
description={tooltip.description}
|
|
context={tooltip.context}
|
|
/>
|
|
)}
|
|
</p>
|
|
<p className={`mt-1 text-3xl font-bold ${colorClass}`}>{value}</p>
|
|
{percentage !== null && (
|
|
<p className="mt-1 text-xs text-gray-500">{percentage}% of total</p>
|
|
)}
|
|
</div>
|
|
<div className={`rounded-lg p-3 ${bgClass} border border-gray-700`}>
|
|
{icon}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|