chore: culvert addition

src/components/video/detailed-summary-section.tsx

@@ -7,8 +7,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { DetectionType, ChainageSummaryData } from '@/types';
+import { ChainageSummaryData } from '@/types';
 import { projectService } from '@/services/api';
+import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
 
 // Dynamically import MapModal with SSR disabled (Leaflet requires window object)
 const MapModal = dynamic(() => import('@/components/map-modal'), { ssr: false });
@@ -17,7 +18,7 @@ interface DetailedSummarySectionProps {
   projectId: string;
   videoId: string;
   show: boolean;
-  detectionType: DetectionType;
+  detectionType: string;
 }
 
 const DetailedSummarySection = ({
@@ -50,8 +51,7 @@ const DetailedSummarySection = ({
 
   if (!show || loading || !summaryData) return null;
 
-  const isCombined = detectionType === 'pot-sign-detection';
-  const isPothole = detectionType === 'pothole-detection' || isCombined;
+  const modeConfig = getDetectionModeConfig(detectionType);
 
   // Flatten all detections for the scrollable list
   const allDetections: Array<{
@@ -79,10 +79,7 @@ const DetailedSummarySection = ({
               </div>
               <div>
                 <CardTitle className="text-base font-bold">Chainages</CardTitle>
-                <CardDescription className="text-xs">
-                  {isCombined ? 'Potholes & Signboards' : isPothole ? 'Potholes' : 'Signboards'}{' '}
-                  detected
-                </CardDescription>
+                <CardDescription className="text-xs">{modeConfig.label} detected</CardDescription>
               </div>
             </div>
             <Button variant="outline" size="sm" onClick={() => setShowMap(true)} className="gap-2">
@@ -164,10 +161,7 @@ const DetailedSummarySection = ({
                 >
                   <div className="flex items-center justify-between mb-2">
                     <span className="font-bold">
-                      {detection.type === 'pothole'
-                        ? 'Pothole'
-                        : (detection.class || detection.type || '').replace(/_/g, ' ')}{' '}
-                      #{detection.id}
+                      {(detection.class || detection.type || '').replace(/_/g, ' ')} #{detection.id}
                     </span>
                     <Badge variant="outline" className="text-[10px] font-mono">
                       Frame {detection.frame_number}

src/components/video/detection-stats-bar.tsx

@@ -2,12 +2,14 @@
 
 import { memo } from 'react';
 import { DetectionCounts } from '@/types';
+import { getEnabledDetectionTypes } from '@/constants/detectionModeConfig';
 
 interface DetectionStatsBarProps {
   currentFrameCounts: DetectionCounts;
   currentFrame: number;
   lastDetectedLat: number | null;
   lastDetectedLng: number | null;
+  detectionMode?: string;
 }
 
 const DetectionStatsBar = memo(
@@ -16,40 +18,26 @@ const DetectionStatsBar = memo(
     currentFrame,
     lastDetectedLat,
     lastDetectedLng,
+    detectionMode,
   }: DetectionStatsBarProps) => {
+    const enabledTypes = getEnabledDetectionTypes(detectionMode);
+
     return (
       <div className="flex flex-wrap items-center gap-x-8 gap-y-3 py-3 px-6 bg-card border rounded-lg">
         <div className="flex flex-wrap items-center gap-x-6 gap-y-2">
-          <div className="flex items-center gap-1.5 whitespace-nowrap">
-            <span className="text-[11px] font-bold text-red-500 uppercase tracking-tight">
-              POTHOLE:
-            </span>
-            <span className="text-sm font-bold text-red-600">{currentFrameCounts.pothole}</span>
-          </div>
-          <div className="flex items-center gap-1.5 whitespace-nowrap">
-            <span className="text-[11px] font-bold text-blue-500 uppercase tracking-tight">
-              DEFECT SIGN BOARD:
-            </span>
-            <span className="text-sm font-bold text-blue-600">
-              {currentFrameCounts.defected_sign_board}
-            </span>
-          </div>
-          <div className="flex items-center gap-1.5 whitespace-nowrap">
-            <span className="text-[11px] font-bold text-indigo-500 uppercase tracking-tight">
-              DAMAGE ROAD MARK:
-            </span>
-            <span className="text-sm font-bold text-indigo-600">
-              {currentFrameCounts.damaged_road_marking}
-            </span>
-          </div>
-          <div className="flex items-center gap-1.5 whitespace-nowrap">
-            <span className="text-[11px] font-bold text-orange-500 uppercase tracking-tight">
-              ROADCRACK:
-            </span>
-            <span className="text-sm font-bold text-orange-600">
-              {currentFrameCounts.road_crack}
-            </span>
-          </div>
+          {enabledTypes.map((type) => (
+            <div key={type.id} className="flex items-center gap-1.5 whitespace-nowrap">
+              <span
+                className="text-[11px] font-bold uppercase tracking-tight"
+                style={{ color: type.color }}
+              >
+                {type.label}:
+              </span>
+              <span className="text-sm font-bold" style={{ color: type.color }}>
+                {(currentFrameCounts as any)[type.frameCountKey] || 0}
+              </span>
+            </div>
+          ))}
         </div>
 
         <div className="flex flex-wrap items-center gap-6 border-l pl-6 border-border/80 ml-auto">

src/components/video/summary-section.tsx

@@ -2,61 +2,37 @@
 
 import { Target, SignpostBig, AlertTriangle, Activity, Gauge, Monitor, Film } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { DetectionData, DetectionType } from '@/types';
+import { DetectionData } from '@/types';
 import { cn } from '@/lib/utils';
+import { getDetectionModeConfig, getEnabledDetectionTypes } from '@/constants/detectionModeConfig';
 
 interface SummarySectionProps {
   data: DetectionData;
   show: boolean;
-  detectionType: DetectionType;
+  detectionType: string;
 }
 
 const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
   if (!show) return null;
 
-  const stats = [
-    {
-      label: 'Total Damage',
-      value: data.summary.total_road_damage || 0,
-      icon: Target,
-      color: 'text-purple-500',
-      bgColor: 'bg-purple-500/10',
-    },
-    {
-      label: 'Defected Signs',
-      value: data.summary.unique_defected_sign_board || 0,
-      icon: SignpostBig,
-      color: 'text-blue-500',
-      bgColor: 'bg-blue-500/10',
-    },
-    {
-      label: 'Unique Potholes',
-      value: data.summary.unique_pothole || 0,
-      icon: AlertTriangle,
-      color: 'text-red-500',
-      bgColor: 'bg-red-500/10',
-    },
-    {
-      label: 'Road Cracks',
-      value: data.summary.unique_road_crack || 0,
-      icon: AlertTriangle,
-      color: 'text-orange-500',
-      bgColor: 'bg-orange-500/10',
-    },
-    {
-      label: 'Markings',
-      value: data.summary.unique_damaged_road_marking || 0,
-      icon: Activity,
-      color: 'text-indigo-500',
-      bgColor: 'bg-indigo-500/10',
-    },
-    {
-      label: 'Good Signs',
-      value: data.summary.unique_good_sign_board || 0,
-      icon: SignpostBig,
-      color: 'text-emerald-500',
-      bgColor: 'bg-emerald-500/10',
-    },
+  const detectionMode = data.detection_mode || detectionType;
+  const modeConfig = getDetectionModeConfig(detectionMode);
+  const enabledTypes = getEnabledDetectionTypes(detectionMode);
+
+  const detectionStats = enabledTypes.map((type) => ({
+    label: type.label,
+    value: (data.summary as any)[type.countKey] || 0,
+    icon: type.id.includes('sign')
+      ? SignpostBig
+      : type.id.includes('culvert')
+        ? Target
+        : AlertTriangle,
+    color: `text-[${type.color}]`,
+    customColor: type.color,
+    bgColor: 'bg-muted/30',
+  }));
+
+  const globalStats = [
     {
       label: 'Rate',
       value: `${(data.summary.detection_rate || 0).toFixed(1)}%`,
@@ -87,6 +63,8 @@ const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
     },
   ];
 
+  const stats = [...detectionStats, ...globalStats];
+
   return (
     <Card className="overflow-hidden">
       <CardHeader className="pb-4">
@@ -110,9 +88,17 @@ const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
                 className="p-4 rounded-lg bg-muted/30 border border-muted flex flex-col items-center text-center"
               >
                 <div className={cn('p-2 rounded-md mb-2', stat.bgColor)}>
-                  <Icon className={cn('h-5 w-5', stat.color)} />
+                  <Icon
+                    className={cn('h-5 w-5', stat.color)}
+                    style={(stat as any).customColor ? { color: (stat as any).customColor } : {}}
+                  />
+                </div>
+                <div
+                  className={cn('text-xl font-bold', stat.color)}
+                  style={(stat as any).customColor ? { color: (stat as any).customColor } : {}}
+                >
+                  {stat.value}
                 </div>
-                <div className={cn('text-xl font-bold', stat.color)}>{stat.value}</div>
                 <div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mt-1">
                   {stat.label}
                 </div>