components KpiStrip.tsx

100% Statements 1/1

100% Branches 0/0

100% Functions 1/1

100% Lines 1/1

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38  
 
 
 
 
 
 
 
66x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import type { PortfolioSummary } from "../data";
import { formatCurrency, formatPercent } from "../data";
 
interface KpiStripProps {
  summary: PortfolioSummary;
}
 
export function KpiStrip({ summary }: KpiStripProps) {
  return (
    <section className="kpi-strip" aria-label="Portfolio summary">
      <article>
        <span>Visible accounts</span>
        <strong>{summary.visibleAccounts.toLocaleString()}</strong>
      </article>
      <article>
        <span>ARR</span>
        <strong>{formatCurrency(summary.annualRecurringRevenue)}</strong>
      </article>
      <article>
        <span>Conversion</span>
        <strong>{formatPercent(summary.averageConversionRate)}</strong>
      </article>
      <article>
        <span>Avg latency</span>
        <strong>{summary.averageLatencyMs.toLocaleString()} ms</strong>
      </article>
      <article>
        <span>Critical</span>
        <strong>{summary.criticalAccounts.toLocaleString()}</strong>
      </article>
      <article>
        <span>Weighted risk</span>
        <strong>{summary.weightedRiskScore}</strong>
      </article>
    </section>
  );
}