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

src/components/video/currentDetectionBar.tsx

@@ -4,7 +4,7 @@ import { Activity, MapPin } from 'lucide-react';
 
 import type { CompletedVideoResult, DetectionResultLog } from '@/types';
 
-import { getDefectVisual } from './defectVisualConfig';
+import { getDefectVisual } from '@/constants/defectVisualConfig';
 
 interface CurrentDetectionBarProps {
   activeLog?: DetectionResultLog;

src/components/video/defectVisualConfig.ts

@@ -1,54 +0,0 @@
-'use client';
-
-import {
-  Activity,
-  AlertTriangle,
-  CircleAlert,
-  CircleDot,
-  Droplets,
-  LucideIcon,
-  SignpostBig,
-} from 'lucide-react';
-
-type DefectVisualConfig = {
-  icon: LucideIcon;
-  colorClassName: string;
-  iconClassName: string;
-};
-
-const DEFECT_VISUALS: Record<string, DefectVisualConfig> = {
-  manhole_cover: {
-    icon: CircleDot,
-    colorClassName: 'text-zinc-500',
-    iconClassName: 'bg-zinc-500/10 text-zinc-500',
-  },
-  pothole: {
-    icon: AlertTriangle,
-    colorClassName: 'text-orange-500',
-    iconClassName: 'bg-orange-500/10 text-orange-500',
-  },
-  road_crack: {
-    icon: CircleAlert,
-    colorClassName: 'text-rose-500',
-    iconClassName: 'bg-rose-500/10 text-rose-500',
-  },
-  sign_board: {
-    icon: SignpostBig,
-    colorClassName: 'text-blue-500',
-    iconClassName: 'bg-blue-500/10 text-blue-500',
-  },
-  water_puddle: {
-    icon: Droplets,
-    colorClassName: 'text-cyan-500',
-    iconClassName: 'bg-cyan-500/10 text-cyan-500',
-  },
-};
-
-const DEFAULT_VISUAL: DefectVisualConfig = {
-  icon: Activity,
-  colorClassName: 'text-green-500',
-  iconClassName: 'bg-green-500/10 text-green-500',
-};
-
-export const getDefectVisual = (className: string) =>
-  DEFECT_VISUALS[className] || DEFAULT_VISUAL;

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>
         );
       })}