@littlebearapps/platform-admin-sdk 2.0.0 → 2.1.0

package/templates/shared/dashboard/src/components/usage/unified/HeroCardsRow.tsx

@@ -0,0 +1,757 @@
+/**
+ * HeroCardsRow Component
+ *
+ * Row of hero cards showing key metrics:
+ * - MTD Spend with burn rate
+ * - Plan Utilisation (highest service)
+ * - Top Spender (by resource type)
+ *
+ * React adaptation of Astro hero cards for the unified dashboard.
+ */
+
+import { useMemo } from 'react';
+import {
+  TrendingUp,
+  TrendingDown,
+  Minus,
+  Activity,
+  BarChart3,
+  Zap,
+  Shield,
+  Gauge,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import type {
+  BurnRateData,
+  ServiceUtilisation,
+  ProjectTableRow,
+  BillingContextResponse,
+  ToolType,
+} from './types';
+
+interface HeroCardsRowProps {
+  burnRate: BurnRateData | null;
+  services: ServiceUtilisation[];
+  projects?: ProjectTableRow[];
+  billingContext?: BillingContextResponse | null;
+  usageTotals?: Record<ToolType, number>; // Current usage totals by tool
+  onMTDSpendClick?: () => void;
+  onPlanUtilisationClick?: (serviceId: string) => void;
+  onPlanHealthClick?: () => void;
+  onTopSpenderClick?: () => void;
+  onSystemHealthClick?: (filter: 'critical' | 'warning' | 'all') => void;
+}
+
+const SERVICE_LABELS: Record<string, string> = {
+  workers: 'Workers',
+  d1: 'D1 Database',
+  kv: 'KV Storage',
+  r2: 'R2 Storage',
+  durableObjects: 'Durable Objects',
+  vectorize: 'Vectorize',
+  aiGateway: 'AI Gateway',
+  workersAI: 'Workers AI',
+  queues: 'Queues',
+};
+
+const SERVICE_COLORS: Record<string, string> = {
+  workers: 'bg-blue-500',
+  d1: 'bg-emerald-500',
+  kv: 'bg-amber-500',
+  r2: 'bg-violet-500',
+  durableObjects: 'bg-pink-500',
+  vectorize: 'bg-cyan-500',
+  aiGateway: 'bg-indigo-500',
+  workersAI: 'bg-red-500',
+  queues: 'bg-teal-500',
+  'cf-workers': 'bg-blue-500',
+  'cf-d1': 'bg-emerald-500',
+  'cf-kv': 'bg-amber-500',
+  'cf-r2': 'bg-violet-500',
+  'cf-do': 'bg-pink-500',
+  'cf-vectorize': 'bg-cyan-500',
+  'cf-ai-gateway': 'bg-indigo-500',
+  'cf-workers-ai': 'bg-red-500',
+  'cf-queues': 'bg-teal-500',
+};
+
+function formatCost(cost: number): string {
+  if (cost >= 1000) return `$${(cost / 1000).toFixed(1)}K`;
+  if (cost >= 1) return `$${cost.toFixed(2)}`;
+  if (cost >= 0.01) return `$${cost.toFixed(3)}`;
+  return `$${cost.toFixed(4)}`;
+}
+
+function formatNumber(num: number): string {
+  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)}B`;
+  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`;
+  if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+  return num.toFixed(0);
+}
+
+/**
+ * Status thresholds for BulletChart
+ */
+function getStatusFromPercentage(pct: number): 'green' | 'yellow' | 'red' {
+  if (pct >= 90) return 'red';
+  if (pct >= 75) return 'yellow';
+  return 'green';
+}
+
+const STATUS_BAR_COLORS: Record<'green' | 'yellow' | 'red', string> = {
+  green: 'bg-emerald-500',
+  yellow: 'bg-amber-500',
+  red: 'bg-rose-500',
+};
+
+/**
+ * BulletChart Component - Compact horizontal progress bar with status colours
+ */
+function BulletChart({ label, value, max }: { label: string; value: number; max: number }) {
+  const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
+  const status = getStatusFromPercentage(pct);
+  const displayPct = pct > 999 ? '>999' : pct.toFixed(0);
+
+  return (
+    <div className="flex items-center gap-2 text-xs">
+      <span className="w-16 truncate text-gray-600 dark:text-slate-400" title={label}>
+        {label}
+      </span>
+      <div className="flex-1 h-1.5 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden">
+        <div
+          className={clsx('h-full rounded-full transition-all', STATUS_BAR_COLORS[status])}
+          style={{ width: `${Math.min(pct, 100)}%` }}
+        />
+      </div>
+      <span
+        className={clsx(
+          'w-10 text-right font-mono font-semibold',
+          status === 'red' && 'text-rose-400',
+          status === 'yellow' && 'text-amber-400',
+          status === 'green' && 'text-emerald-400'
+        )}
+      >
+        {displayPct}%
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Plan Health Card - Shows consumption vs Cloudflare Paid Plan allowances
+ */
+function PlanHealthCard({
+  billingContext,
+  usageTotals,
+  onClick,
+}: {
+  billingContext: BillingContextResponse | null;
+  usageTotals?: Record<ToolType, number>;
+  onClick?: () => void;
+}) {
+  // Key services to display (Workers, D1, KV, Durable Objects)
+  const services = useMemo(() => {
+    if (!billingContext || !usageTotals) return [];
+
+    const allowances = billingContext.allowances;
+    const items: Array<{
+      key: string;
+      label: string;
+      value: number;
+      max: number;
+      unit: string;
+      pct: number;
+    }> = [];
+
+    // Workers requests
+    if (allowances.workers) {
+      const value = usageTotals.workers ?? 0;
+      const max = allowances.workers.prorated;
+      items.push({
+        key: 'workers',
+        label: 'Workers',
+        value,
+        max,
+        unit: allowances.workers.unit,
+        pct: max > 0 ? (value / max) * 100 : 0,
+      });
+    }
+
+    // D1 (tracks writes as primary metric)
+    if (allowances.d1) {
+      const value = usageTotals.d1 ?? 0;
+      const max = allowances.d1.prorated;
+      items.push({
+        key: 'd1',
+        label: 'D1',
+        value,
+        max,
+        unit: allowances.d1.unit,
+        pct: max > 0 ? (value / max) * 100 : 0,
+      });
+    }
+
+    // KV (tracks writes as primary metric)
+    if (allowances.kv) {
+      const value = usageTotals.kv ?? 0;
+      const max = allowances.kv.prorated;
+      items.push({
+        key: 'kv',
+        label: 'KV',
+        value,
+        max,
+        unit: allowances.kv.unit,
+        pct: max > 0 ? (value / max) * 100 : 0,
+      });
+    }
+
+    // Durable Objects
+    if (allowances.durableObjects) {
+      const value = usageTotals.durableObjects ?? 0;
+      const max = allowances.durableObjects.prorated;
+      items.push({
+        key: 'durableObjects',
+        label: 'DO',
+        value,
+        max,
+        unit: allowances.durableObjects.unit,
+        pct: max > 0 ? (value / max) * 100 : 0,
+      });
+    }
+
+    return items;
+  }, [billingContext, usageTotals]);
+
+  // Calculate overall health
+  const { overallPct, overallStatus } = useMemo(() => {
+    if (services.length === 0) return { overallPct: 0, overallStatus: 'green' as const };
+    const maxPct = Math.max(...services.map((s) => s.pct));
+    return {
+      overallPct: maxPct,
+      overallStatus: getStatusFromPercentage(maxPct),
+    };
+  }, [services]);
+
+  // Loading state
+  if (!billingContext || !usageTotals) {
+    return (
+      <div className="bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-lg p-4 animate-pulse">
+        <div className="h-4 bg-gray-100 dark:bg-slate-800 rounded w-24 mb-3" />
+        <div className="h-8 bg-gray-100 dark:bg-slate-800 rounded w-32 mb-2" />
+        <div className="h-3 bg-gray-100 dark:bg-slate-800 rounded w-20" />
+      </div>
+    );
+  }
+
+  const statusDotColor = {
+    green: 'bg-emerald-500',
+    yellow: 'bg-amber-500',
+    red: 'bg-rose-500',
+  };
+
+  return (
+    <div
+      className={clsx(
+        'bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-lg p-4 transition-all duration-200',
+        onClick &&
+          'cursor-pointer hover:border-cyan-500/50 hover:bg-gray-100 dark:hover:bg-slate-900/70'
+      )}
+      onClick={onClick}
+      onKeyDown={(e) => e.key === 'Enter' && onClick?.()}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
+            <Gauge className="w-4 h-4 text-cyan-400" />
+          </div>
+          <span className="text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+            Plan Health
+          </span>
+        </div>
+        <div className={clsx('w-2.5 h-2.5 rounded-full', statusDotColor[overallStatus])} />
+      </div>
+
+      {/* Main Value - Overall percentage (highest service) */}
+      <div className="flex items-baseline gap-2 mb-3">
+        <span className="text-2xl font-bold font-mono text-gray-900 dark:text-slate-100">
+          {overallPct.toFixed(0)}%
+        </span>
+        <span className="text-xs text-gray-500 dark:text-slate-500">peak usage</span>
+      </div>
+
+      {/* Service Breakdown */}
+      <div className="space-y-2">
+        {services.map((service) => (
+          <BulletChart
+            key={service.key}
+            label={service.label}
+            value={service.value}
+            max={service.max}
+          />
+        ))}
+      </div>
+
+      {/* Billing period countdown */}
+      {billingContext.countdownText && (
+        <p className="text-xs text-gray-500 dark:text-slate-500 mt-3 pt-2 border-t border-gray-200 dark:border-slate-700">
+          {billingContext.countdownText}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * MTD Spend Card - Shows current month-to-date spend and burn rate
+ */
+function MTDSpendCard({
+  burnRate,
+  onClick,
+}: {
+  burnRate: BurnRateData | null;
+  onClick?: () => void;
+}) {
+  if (!burnRate) {
+    return (
+      <div className="bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-lg p-4 animate-pulse">
+        <div className="h-4 bg-gray-100 dark:bg-slate-800 rounded w-24 mb-3" />
+        <div className="h-8 bg-gray-100 dark:bg-slate-800 rounded w-32 mb-2" />
+        <div className="h-3 bg-gray-100 dark:bg-slate-800 rounded w-20" />
+      </div>
+    );
+  }
+
+  const trendDirection =
+    burnRate.vsLastMonthPct === null ? 'neutral' : burnRate.vsLastMonthPct > 0 ? 'up' : 'down';
+
+  const statusColors: Record<string, string> = {
+    green: 'bg-emerald-500',
+    yellow: 'bg-amber-500',
+    red: 'bg-rose-500',
+  };
+
+  return (
+    <div
+      className={clsx(
+        'bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-lg p-4 transition-all duration-200',
+        onClick &&
+          'cursor-pointer hover:border-blue-500/50 hover:bg-gray-100 dark:hover:bg-slate-900/70'
+      )}
+      onClick={onClick}
+      onKeyDown={(e) => e.key === 'Enter' && onClick?.()}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center">
+            <Activity className="w-4 h-4 text-blue-400" />
+          </div>
+          <span className="text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+            MTD Spend
+          </span>
+        </div>
+        <div className={clsx('w-2.5 h-2.5 rounded-full', statusColors[burnRate.status])} />
+      </div>
+
+      {/* Main Value */}
+      <div className="flex items-baseline gap-2 mb-2">
+        <span className="text-2xl font-bold font-mono text-gray-900 dark:text-slate-100">
+          {formatCost(burnRate.mtdCost)}
+        </span>
+        {burnRate.vsLastMonthPct !== null && (
+          <div
+            className={clsx(
+              'flex items-center gap-0.5 px-1.5 py-0.5 rounded text-xs font-semibold',
+              trendDirection === 'up' && 'bg-rose-500/20 text-rose-400',
+              trendDirection === 'down' && 'bg-emerald-500/20 text-emerald-400',
+              trendDirection === 'neutral' &&
+                'bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-slate-400'
+            )}
+          >
+            {trendDirection === 'up' && <TrendingUp className="w-3 h-3" />}
+            {trendDirection === 'down' && <TrendingDown className="w-3 h-3" />}
+            {trendDirection === 'neutral' && <Minus className="w-3 h-3" />}
+            <span>{Math.abs(burnRate.vsLastMonthPct).toFixed(1)}%</span>
+          </div>
+        )}
+      </div>
+
+      {/* Secondary Info */}
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-gray-500 dark:text-slate-500">
+          Projected:{' '}
+          <span className="text-gray-600 dark:text-slate-400">
+            {formatCost(burnRate.projectedMonthlyCost)}
+          </span>
+        </span>
+        <span className="text-gray-500 dark:text-slate-500">
+          {formatCost(burnRate.dailyBurnRate)}/day
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Plan Utilisation Card - Shows highest service utilisation
+ */
+function PlanUtilisationCard({
+  services,
+  onClick,
+}: {
+  services: ServiceUtilisation[];
+  onClick?: (serviceId: string) => void;
+}) {
+  const highest = useMemo(() => {
+    if (services.length === 0) return null;
+    return services.reduce(
+      (max, service) => (service.percentage > max.percentage ? service : max),
+      services[0]
+    );
+  }, [services]);
+
+  if (!highest) {
+    return (
+      <div className="bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-lg p-4 animate-pulse">
+        <div className="h-4 bg-gray-100 dark:bg-slate-800 rounded w-24 mb-3" />
+        <div className="h-8 bg-gray-100 dark:bg-slate-800 rounded w-32 mb-2" />
+        <div className="h-3 bg-gray-100 dark:bg-slate-800 rounded w-20" />
+      </div>
+    );
+  }
+
+  const pct = Math.min(highest.percentage, 100);
+  const displayPct = highest.percentage > 999 ? '>999' : highest.percentage.toFixed(0);
+
+  const statusColor =
+    highest.percentage >= 90
+      ? 'bg-rose-500'
+      : highest.percentage >= 75
+        ? 'bg-orange-500'
+        : highest.percentage >= 50
+          ? 'bg-amber-500'
+          : 'bg-emerald-500';
+
+  const statusLabel =
+    highest.percentage >= 90
+      ? 'Critical'
+      : highest.percentage >= 75
+        ? 'High'
+        : highest.percentage >= 50
+          ? 'Warning'
+          : 'Normal';
+
+  const handleClick = () => onClick?.(highest.id);
+
+  return (
+    <div
+      className={clsx(
+        'bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-lg p-4 transition-all duration-200',
+        onClick &&
+          'cursor-pointer hover:border-purple-500/50 hover:bg-gray-100 dark:hover:bg-slate-900/70'
+      )}
+      onClick={handleClick}
+      onKeyDown={(e) => e.key === 'Enter' && handleClick()}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-3">
+        <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center">
+          <BarChart3 className="w-4 h-4 text-purple-400" />
+        </div>
+        <span className="text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+          Plan Utilisation
+        </span>
+      </div>
+
+      {/* Main Value */}
+      <div className="flex items-baseline gap-2 mb-2">
+        <span className="text-2xl font-bold font-mono text-gray-900 dark:text-slate-100">
+          {displayPct}%
+        </span>
+        <span className="text-xs text-gray-500 dark:text-slate-500">{highest.label}</span>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="w-full h-1.5 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden mb-2">
+        <div
+          className={clsx('h-full rounded-full transition-all', statusColor)}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+
+      {/* Secondary Info */}
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-slate-500">
+          {formatNumber(highest.current)} / {formatNumber(highest.limit)} {highest.unit}
+        </span>
+        <span
+          className={clsx(
+            'font-semibold',
+            highest.percentage >= 90 && 'text-rose-400',
+            highest.percentage >= 75 && highest.percentage < 90 && 'text-orange-400',
+            highest.percentage >= 50 && highest.percentage < 75 && 'text-amber-400',
+            highest.percentage < 50 && 'text-emerald-400'
+          )}
+        >
+          {statusLabel}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Top Spender Card - Shows resource type with highest cost
+ */
+function TopSpenderCard({
+  services,
+  onClick,
+}: {
+  services: ServiceUtilisation[];
+  onClick?: () => void;
+}) {
+  const { topService, breakdown, totalCost } = useMemo(() => {
+    const withCost = services
+      .filter((s) => s.costEstimate > 0)
+      .sort((a, b) => b.costEstimate - a.costEstimate);
+
+    if (withCost.length === 0) {
+      return { topService: null, breakdown: [], totalCost: 0 };
+    }
+
+    const total = withCost.reduce((sum, s) => sum + s.costEstimate, 0);
+    return {
+      topService: withCost[0],
+      breakdown: withCost.slice(0, 4),
+      totalCost: total,
+    };
+  }, [services]);
+
+  if (!topService) {
+    return (
+      <div
+        className={clsx(
+          'bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-lg p-4 transition-all duration-200',
+          onClick &&
+            'cursor-pointer hover:border-amber-500/50 hover:bg-gray-100 dark:hover:bg-slate-900/70'
+        )}
+        onClick={onClick}
+        onKeyDown={(e) => e.key === 'Enter' && onClick?.()}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+      >
+        <div className="flex items-center gap-2 mb-3">
+          <div className="w-8 h-8 rounded-lg bg-amber-500/20 flex items-center justify-center">
+            <Zap className="w-4 h-4 text-amber-400" />
+          </div>
+          <span className="text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+            Top Spender
+          </span>
+        </div>
+        <span className="text-xl font-bold font-mono text-gray-900 dark:text-slate-100">$0.00</span>
+        <p className="text-xs text-gray-500 dark:text-slate-500 mt-2">No costs recorded</p>
+      </div>
+    );
+  }
+
+  const pctOfTotal = totalCost > 0 ? (topService.costEstimate / totalCost) * 100 : 0;
+
+  return (
+    <div
+      className={clsx(
+        'bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-lg p-4 transition-all duration-200',
+        onClick &&
+          'cursor-pointer hover:border-amber-500/50 hover:bg-gray-100 dark:hover:bg-slate-900/70'
+      )}
+      onClick={onClick}
+      onKeyDown={(e) => e.key === 'Enter' && onClick?.()}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-3">
+        <div className="w-8 h-8 rounded-lg bg-amber-500/20 flex items-center justify-center">
+          <Zap className="w-4 h-4 text-amber-400" />
+        </div>
+        <span className="text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+          Top Spender
+        </span>
+      </div>
+
+      {/* Main Value */}
+      <div className="flex items-baseline gap-2 mb-1">
+        <span className="text-2xl font-bold font-mono text-gray-900 dark:text-slate-100">
+          {formatCost(topService.costEstimate)}
+        </span>
+        <span className="text-xs text-gray-500 dark:text-slate-500">
+          {pctOfTotal.toFixed(0)}% of total
+        </span>
+      </div>
+      <p className="text-sm font-medium text-amber-400 mb-3">
+        {SERVICE_LABELS[topService.id] || topService.label}
+      </p>
+
+      {/* Breakdown Mini-Bars */}
+      <div className="space-y-1.5">
+        {breakdown.map((service) => {
+          const widthPct = (service.costEstimate / topService.costEstimate) * 100;
+          const color = SERVICE_COLORS[service.id] || 'bg-slate-500';
+
+          return (
+            <div key={service.id} className="flex items-center gap-2 text-xs">
+              <span
+                className="w-20 truncate text-gray-500 dark:text-slate-500"
+                title={service.label}
+              >
+                {SERVICE_LABELS[service.id] || service.label}
+              </span>
+              <div className="flex-1 h-1 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden">
+                <div
+                  className={clsx('h-full rounded-full', color)}
+                  style={{ width: `${widthPct}%` }}
+                />
+              </div>
+              <span className="w-12 text-right text-gray-500 dark:text-slate-500">
+                {formatCost(service.costEstimate)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * System Health Card - Shows operational status summary
+ */
+function SystemHealthCard({
+  projects,
+  onClick,
+}: {
+  projects: ProjectTableRow[];
+  onClick?: (filter: 'critical' | 'warning' | 'all') => void;
+}) {
+  const health = useMemo(() => {
+    return projects.reduce(
+      (acc, p) => {
+        if (p.status === 'STOP') acc.critical++;
+        else if (p.status === 'WARN') acc.warning++;
+        else acc.healthy++;
+        return acc;
+      },
+      { critical: 0, warning: 0, healthy: 0 }
+    );
+  }, [projects]);
+
+  const totalProjects = projects.length;
+  const healthyPct = totalProjects > 0 ? (health.healthy / totalProjects) * 100 : 100;
+
+  // Determine overall status
+  const overallStatus =
+    health.critical > 0 ? 'critical' : health.warning > 0 ? 'warning' : 'healthy';
+
+  const statusColors: Record<string, string> = {
+    critical: 'bg-rose-500',
+    warning: 'bg-amber-500',
+    healthy: 'bg-emerald-500',
+  };
+
+  // Click filters to the most relevant status
+  const handleClick = () => {
+    if (health.critical > 0) onClick?.('critical');
+    else if (health.warning > 0) onClick?.('warning');
+    else onClick?.('all');
+  };
+
+  return (
+    <div
+      className={clsx(
+        'bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-lg p-4 transition-all duration-200',
+        onClick &&
+          'cursor-pointer hover:border-emerald-500/50 hover:bg-gray-100 dark:hover:bg-slate-900/70'
+      )}
+      onClick={handleClick}
+      onKeyDown={(e) => e.key === 'Enter' && handleClick()}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center">
+            <Shield className="w-4 h-4 text-emerald-400" />
+          </div>
+          <span className="text-xs font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider">
+            System Health
+          </span>
+        </div>
+        <div className={clsx('w-2.5 h-2.5 rounded-full', statusColors[overallStatus])} />
+      </div>
+
+      {/* Main Value */}
+      <div className="flex items-baseline gap-2 mb-2">
+        <span className="text-2xl font-bold font-mono text-gray-900 dark:text-slate-100">
+          {healthyPct.toFixed(0)}%
+        </span>
+        <span className="text-xs text-gray-500 dark:text-slate-500">healthy</span>
+      </div>
+
+      {/* Status Breakdown */}
+      <div className="flex items-center gap-4 text-xs">
+        {health.critical > 0 && (
+          <div className="flex items-center gap-1.5">
+            <div className="w-2 h-2 rounded-full bg-rose-500" />
+            <span className="text-rose-400 font-semibold">{health.critical} Critical</span>
+          </div>
+        )}
+        {health.warning > 0 && (
+          <div className="flex items-center gap-1.5">
+            <div className="w-2 h-2 rounded-full bg-amber-500" />
+            <span className="text-amber-400 font-semibold">{health.warning} Warning</span>
+          </div>
+        )}
+        <div className="flex items-center gap-1.5">
+          <div className="w-2 h-2 rounded-full bg-emerald-500" />
+          <span className="text-emerald-400 font-semibold">{health.healthy} Healthy</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function HeroCardsRow({
+  burnRate,
+  services,
+  projects = [],
+  billingContext,
+  usageTotals,
+  onMTDSpendClick,
+  onPlanUtilisationClick,
+  onPlanHealthClick,
+  onTopSpenderClick,
+  onSystemHealthClick,
+}: HeroCardsRowProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+      <MTDSpendCard burnRate={burnRate} onClick={onMTDSpendClick} />
+      <PlanHealthCard
+        billingContext={billingContext ?? null}
+        usageTotals={usageTotals}
+        onClick={onPlanHealthClick}
+      />
+      <PlanUtilisationCard services={services} onClick={onPlanUtilisationClick} />
+      <TopSpenderCard services={services} onClick={onTopSpenderClick} />
+      <SystemHealthCard projects={projects} onClick={onSystemHealthClick} />
+    </div>
+  );
+}
+
+export default HeroCardsRow;