feat(ticket): redesign overview with AI summary, location, and shared defect visuals

src/components/video/resultStatsGrid.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { Activity, Clock, Gauge } from 'lucide-react';
-import { CompletedVideoResult } from '@/types';
 
-import { getDefectVisual } from './defectVisualConfig';
+import { getDefectVisual } from '@/constants/defectVisualConfig';
+import { cn } from '@/lib/utils';
+import type { CompletedVideoResult } from '@/types';
 
 const formatDuration = (seconds?: number) => {
   if (typeof seconds !== 'number' || !Number.isFinite(seconds)) return '-';
@@ -28,8 +29,8 @@ export default function ResultStatsGrid({ data }: ResultStatsGridProps) {
       label: item.display_name,
       value: item.count,
       icon: visual.icon,
-      color: visual.colorClassName,
-      bgColor: visual.iconClassName,
+      colorClassName: visual.colorClassName,
+      iconClassName: visual.iconClassName,
     };
   });
 
@@ -38,23 +39,23 @@ export default function ResultStatsGrid({ data }: ResultStatsGridProps) {
       label: 'Total Detections',
       value: data.summary.total_detections,
       icon: Activity,
-      color: 'text-green-500',
-      bgColor: 'bg-green-500/10 text-green-500',
+      colorClassName: 'text-green-500',
+      iconClassName: 'bg-green-500/10 text-green-500',
     },
     ...defectStats,
     {
       label: 'FPS',
       value: formatFps(data.summary.fps),
       icon: Gauge,
-      color: 'text-purple-500',
-      bgColor: 'bg-purple-500/10 text-purple-500',
+      colorClassName: 'text-purple-500',
+      iconClassName: 'bg-purple-500/10 text-purple-500',
     },
     {
       label: 'Duration',
       value: formatDuration(data.summary.duration_seconds),
       icon: Clock,
-      color: 'text-cyan-500',
-      bgColor: 'bg-cyan-500/10 text-cyan-500',
+      colorClassName: 'text-cyan-500',
+      iconClassName: 'bg-cyan-500/10 text-cyan-500',
     },
   ];
 
@@ -66,17 +67,29 @@ export default function ResultStatsGrid({ data }: ResultStatsGridProps) {
         return (
           <div
             key={stat.label}
-            className="flex flex-col items-center rounded-lg border border-muted bg-muted/30 p-4 text-center"
+            className="rounded-xl bg-muted/40 p-4 transition-colors hover:bg-muted/60"
           >
-            <div className={`mb-2 rounded-md p-2 ${stat.bgColor}`}>
-              <Icon className="h-5 w-5" />
+            <div className="flex items-center justify-between gap-3">
+              <p
+                className={cn(
+                  'text-2xl font-bold tracking-tight',
+                  stat.colorClassName,
+                )}
+              >
+                {stat.value}
+              </p>
+              <span
+                className={cn(
+                  'flex size-8 shrink-0 items-center justify-center rounded-lg',
+                  stat.iconClassName,
+                )}
+              >
+                <Icon className="size-3.5" />
+              </span>
             </div>
-            <div className={`text-xl font-bold ${stat.color}`}>
-              {stat.value}
-            </div>
-            <div className="mt-1 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+            <p className="mt-2 truncate text-xs font-semibold text-foreground">
               {stat.label}
-            </div>
+            </p>
           </div>
         );
       })}