refactor(results): support class-based detection summaries

src/components/video/resultStatsGrid.tsx

@@ -1,81 +1,80 @@
 'use client';
 
-import {
-  Activity,
-  AlertTriangle,
-  Clock,
-  Gauge,
-  SignpostBig,
-} from 'lucide-react';
+import { Activity, Clock, Gauge } from 'lucide-react';
 import { CompletedVideoResult } from '@/types';
 
-const formatDuration = (seconds: number) => {
-  const safeSeconds = Number.isFinite(seconds) ? seconds : 0;
-  const minutes = Math.floor(safeSeconds / 60);
-  const secs = Math.floor(safeSeconds % 60);
+import { getDefectVisual } from './defectVisualConfig';
+
+const formatDuration = (seconds?: number) => {
+  if (typeof seconds !== 'number' || !Number.isFinite(seconds)) return '-';
+
+  const minutes = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
   return `${minutes}:${secs.toString().padStart(2, '0')}`;
 };
 
+const formatFps = (fps?: number) =>
+  typeof fps === 'number' && Number.isFinite(fps) ? fps.toFixed(1) : '-';
+
 interface ResultStatsGridProps {
   data: CompletedVideoResult;
 }
 
 export default function ResultStatsGrid({ data }: ResultStatsGridProps) {
+  const defectStats = data.defect_counts.map((item) => {
+    const visual = getDefectVisual(item.class_name);
+
+    return {
+      label: item.display_name,
+      value: item.count,
+      icon: visual.icon,
+      color: visual.colorClassName,
+      bgColor: visual.iconClassName,
+    };
+  });
+
   const stats = [
     {
       label: 'Total Detections',
-      value: data.summary.total_detections || 0,
+      value: data.summary.total_detections,
       icon: Activity,
       color: 'text-green-500',
-      bgColor: 'bg-green-500/10',
-    },
-    {
-      label: 'Potholes',
-      value: data.summary.unique_potholes || 0,
-      icon: AlertTriangle,
-      color: 'text-orange-500',
-      bgColor: 'bg-orange-500/10',
-    },
-    {
-      label: 'Signboards',
-      value: data.summary.unique_signboards || 0,
-      icon: SignpostBig,
-      color: 'text-blue-500',
-      bgColor: 'bg-blue-500/10',
+      bgColor: 'bg-green-500/10 text-green-500',
     },
+    ...defectStats,
     {
       label: 'FPS',
-      value: data.fps.toFixed(1),
+      value: formatFps(data.summary.fps),
       icon: Gauge,
       color: 'text-purple-500',
-      bgColor: 'bg-purple-500/10',
+      bgColor: 'bg-purple-500/10 text-purple-500',
     },
     {
       label: 'Duration',
-      value: formatDuration(data.duration_seconds),
+      value: formatDuration(data.summary.duration_seconds),
       icon: Clock,
       color: 'text-cyan-500',
-      bgColor: 'bg-cyan-500/10',
+      bgColor: 'bg-cyan-500/10 text-cyan-500',
     },
   ];
 
   return (
-    <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
+    <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5">
       {stats.map((stat) => {
         const Icon = stat.icon;
 
         return (
           <div
             key={stat.label}
-            className="p-4 rounded-lg bg-muted/30 border border-muted flex flex-col items-center text-center"
+            className="flex flex-col items-center rounded-lg border border-muted bg-muted/30 p-4 text-center"
           >
-            <div className={`p-2 rounded-md mb-2 ${stat.bgColor}`}>
-              <Icon className={`h-5 w-5 ${stat.color}`} />
+            <div className={`mb-2 rounded-md p-2 ${stat.bgColor}`}>
+              <Icon className="h-5 w-5" />
             </div>
             <div className={`text-xl font-bold ${stat.color}`}>
               {stat.value}
             </div>
-            <div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mt-1">
+            <div className="mt-1 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
               {stat.label}
             </div>
           </div>