feat(results): replace video playback with detection image preview and map

src/constants/defectVisualConfig.ts

@@ -12,6 +12,7 @@ import {
 
 type DefectVisualConfig = {
   icon: LucideIcon;
+  boundingBoxColor: string;
   colorClassName: string;
   iconClassName: string;
   cardClassName: string;
@@ -20,30 +21,35 @@ type DefectVisualConfig = {
 const DEFECT_VISUALS: Record<string, DefectVisualConfig> = {
   manhole_cover: {
     icon: CircleDot,
+    boundingBoxColor: '#71717a',
     colorClassName: 'text-zinc-500',
     iconClassName: 'bg-zinc-500/10 text-zinc-500',
     cardClassName: 'bg-zinc-500/5',
   },
   pothole: {
     icon: Construction,
+    boundingBoxColor: '#f97316',
     colorClassName: 'text-orange-500',
     iconClassName: 'bg-orange-500/10 text-orange-500',
     cardClassName: 'bg-orange-500/5',
   },
   road_crack: {
     icon: Spline,
+    boundingBoxColor: '#f43f5e',
     colorClassName: 'text-rose-500',
     iconClassName: 'bg-rose-500/10 text-rose-500',
     cardClassName: 'bg-rose-500/5',
   },
   sign_board: {
     icon: SignpostBig,
+    boundingBoxColor: '#3b82f6',
     colorClassName: 'text-blue-500',
     iconClassName: 'bg-blue-500/10 text-blue-500',
     cardClassName: 'bg-blue-500/5',
   },
   water_puddle: {
     icon: Droplets,
+    boundingBoxColor: '#06b6d4',
     colorClassName: 'text-cyan-500',
     iconClassName: 'bg-cyan-500/10 text-cyan-500',
     cardClassName: 'bg-cyan-500/5',
@@ -52,6 +58,7 @@ const DEFECT_VISUALS: Record<string, DefectVisualConfig> = {
 
 const DEFAULT_VISUAL: DefectVisualConfig = {
   icon: Activity,
+  boundingBoxColor: '#22c55e',
   colorClassName: 'text-green-500',
   iconClassName: 'bg-green-500/10 text-green-500',
   cardClassName: 'bg-green-500/5',