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}