chore: culvert addition

src/app/(modules)/results/[videoId]/page.tsx

@@ -12,6 +12,7 @@ import { SessionContext, DetectionData, DetectionType } from '@/types';
 import { getVideoFile, clearVideoFile } from '@/lib/video-storage';
 import { ROUTES } from '@/utils/routes';
 import { Card } from '@/components/ui/card';
+import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
@@ -36,7 +37,12 @@ export default function VideoResultsPage() {
         setDetectionData(data as any);
 
         // Try to infer detection type from results if possible
-        if (data.summary?.unique_signboards !== undefined && data.summary?.unique_signboards > 0) {
+        if (data.detection_mode) {
+          setDetectionType(data.detection_mode);
+        } else if (
+          data.summary?.unique_signboards !== undefined &&
+          data.summary?.unique_signboards > 0
+        ) {
           setDetectionType('sign-board-detection');
         } else if (
           data.summary?.unique_potholes !== undefined &&
@@ -75,9 +81,8 @@ export default function VideoResultsPage() {
   };
 
   const getTitle = () => {
-    if (detectionType === 'pothole-detection') return 'Pothole Detection Results';
+    const config = getDetectionModeConfig(detectionType);
-    if (detectionType === 'sign-board-detection') return 'Signboard Detection Results';
+    return `${config.label} Results`;
-    return 'Pothole & Signboard Detection Results';
   };
 
   if (isLoading) {

src/app/(modules)/upload/[videoId]/page.tsx

@@ -35,10 +35,10 @@ export default function VideoProcessingPage() {
         if (data.type === 'progress' || data.progress !== undefined) {
           setProgress(data.progress || 0);
           let message = data.message || 'Processing...';
-          if (data.unique_potholes !== undefined) {
+          const uniqueCount =
-            message += ` | Unique: ${data.unique_potholes} | Total: ${data.total_detections || 0}`;
+            data.unique_potholes ?? data.unique_signboards ?? data.unique_culverts;
-          } else if (data.unique_signboards !== undefined) {
+          if (uniqueCount !== undefined) {
-            message += ` | Unique: ${data.unique_signboards} | Total: ${data.total_detections || 0}`;
+            message += ` | Unique: ${uniqueCount} | Total: ${data.total_detections || 0}`;
           }
           setStatusMessage(message);
         }

src/components/map-modal.tsx

@@ -5,6 +5,8 @@ import { MapContainer, TileLayer, Polyline, CircleMarker, Popup, useMap } from '
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { LatLngBounds, LatLng } from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+import { getDetectionModeConfig, DETECTION_TYPES } from '@/constants/detectionModeConfig';
+import { DetectionType } from '@/types';
 
 type Detection = {
   id: number;
@@ -20,7 +22,7 @@ type MapModalProps = {
   open: boolean;
   onClose: () => void;
   detections: Detection[];
-  detectionType: 'pothole-detection' | 'sign-board-detection' | 'pot-sign-detection';
+  detectionType: DetectionType | string;
 };
 
 // Component to auto-fit map bounds to show all markers
@@ -77,16 +79,13 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
     (bounds.getEast() + bounds.getWest()) / 2,
   ];
 
-  const isCombined = detectionType === 'pot-sign-detection';
+  const modeConfig = getDetectionModeConfig(detectionType);
-  const isPothole = detectionType === 'pothole-detection';
 
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent className="max-w-6xl h-[85vh] p-0 flex flex-col overflow-hidden border-none shadow-2xl">
         <DialogHeader className="px-6 py-4 border-b shrink-0">
-          <DialogTitle className="text-xl font-bold">
+          <DialogTitle className="text-xl font-bold">{modeConfig.label} Map</DialogTitle>
-            {isCombined ? 'Combined' : isPothole ? 'Pothole' : 'Signboard'} Detection Map
-          </DialogTitle>
           <p className="text-xs text-muted-foreground font-medium">
             {validDetections.length} points of interest identified with GPS data
           </p>
@@ -103,14 +102,10 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
 
             {validDetections.map((detection, idx) => {
               const type = (detection.type || '').toLowerCase();
-              const colors: Record<string, { fill: string; stroke: string }> = {
+              const typeConfig = DETECTION_TYPES[type];
-                pothole: { fill: '#ef4444', stroke: '#b91c1c' },
+              const color = typeConfig
-                defected_sign_board: { fill: '#3b82f6', stroke: '#1d4ed8' },
+                ? { fill: typeConfig.color, stroke: typeConfig.color }
-                road_crack: { fill: '#f59e0b', stroke: '#b45309' },
+                : { fill: '#64748b', stroke: '#475569' };
-                damaged_road_marking: { fill: '#6366f1', stroke: '#4338ca' },
-                good_sign_board: { fill: '#10b981', stroke: '#047857' },
-              };
-              const color = colors[type] || { fill: '#64748b', stroke: '#475569' };
 
               return (
                 <CircleMarker

src/components/video-player-section.tsx

@@ -15,12 +15,13 @@ import DetectionStatsBar from './video/detection-stats-bar';
 import DetectionLogs from './video/detection-logs';
 import SummarySection from './video/summary-section';
 import DetailedSummarySection from './video/detailed-summary-section';
+import { getDetectionModeConfig, getEnabledDetectionTypes } from '@/constants/detectionModeConfig';
 
 type VideoPlayerSectionProps = {
   data: DetectionData;
   videoId: string;
   videoFile: File | null;
-  detectionType: DetectionType;
+  detectionType: string;
   projectId?: string;
 };
 
@@ -67,13 +68,19 @@ export default function VideoPlayerSection({
   const [videoError, setVideoError] = useState<string | null>(null);
   const [lastDetectedLat, setLastDetectedLat] = useState<number | null>(null);
   const [lastDetectedLng, setLastDetectedLng] = useState<number | null>(null);
-  const [currentFrameCounts, setCurrentFrameCounts] = useState<DetectionCounts>({
+  const detectionMode = data.detection_mode || detectionType;
-    defected_sign_board: 0,
+  const modeConfig = getDetectionModeConfig(detectionMode);
-    pothole: 0,
+  const enabledTypes = getEnabledDetectionTypes(detectionMode);
-    road_crack: 0,
+
-    damaged_road_marking: 0,
+  const initialCounts = useMemo(() => {
-    good_sign_board: 0,
+    const counts: any = {};
-  });
+    enabledTypes.forEach((type) => {
+      counts[type.frameCountKey] = 0;
+    });
+    return counts as DetectionCounts;
+  }, [enabledTypes]);
+
+  const [currentFrameCounts, setCurrentFrameCounts] = useState<DetectionCounts>(initialCounts);
 
   // Logs Reducer
   const [logs, dispatchLogs] = useReducer(logsReducer, []);
@@ -217,6 +224,7 @@ export default function VideoPlayerSection({
                 currentFrame={currentFrame}
                 lastDetectedLat={lastDetectedLat}
                 lastDetectedLng={lastDetectedLng}
+                detectionMode={detectionMode}
               />
             </div>
 

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 modeConfig = getDetectionModeConfig(detectionType);
-  const isPothole = detectionType === 'pothole-detection' || isCombined;
 
   // 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">
+                <CardDescription className="text-xs">{modeConfig.label} detected</CardDescription>
-                  {isCombined ? 'Potholes & Signboards' : isPothole ? 'Potholes' : 'Signboards'}{' '}
-                  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'
+                      {(detection.class || detection.type || '').replace(/_/g, ' ')} #{detection.id}
-                        ? 'Pothole'
-                        : (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">
+          {enabledTypes.map((type) => (
-            <span className="text-[11px] font-bold text-red-500 uppercase tracking-tight">
+            <div key={type.id} className="flex items-center gap-1.5 whitespace-nowrap">
-              POTHOLE:
+              <span
-            </span>
+                className="text-[11px] font-bold uppercase tracking-tight"
-            <span className="text-sm font-bold text-red-600">{currentFrameCounts.pothole}</span>
+                style={{ color: type.color }}
-          </div>
+              >
-          <div className="flex items-center gap-1.5 whitespace-nowrap">
+                {type.label}:
-            <span className="text-[11px] font-bold text-blue-500 uppercase tracking-tight">
+              </span>
-              DEFECT SIGN BOARD:
+              <span className="text-sm font-bold" style={{ color: type.color }}>
-            </span>
+                {(currentFrameCounts as any)[type.frameCountKey] || 0}
-            <span className="text-sm font-bold text-blue-600">
+              </span>
-              {currentFrameCounts.defected_sign_board}
+            </div>
-            </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>
         </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 = [
+  const detectionMode = data.detection_mode || detectionType;
-    {
+  const modeConfig = getDetectionModeConfig(detectionMode);
-      label: 'Total Damage',
+  const enabledTypes = getEnabledDetectionTypes(detectionMode);
-      value: data.summary.total_road_damage || 0,
+
-      icon: Target,
+  const detectionStats = enabledTypes.map((type) => ({
-      color: 'text-purple-500',
+    label: type.label,
-      bgColor: 'bg-purple-500/10',
+    value: (data.summary as any)[type.countKey] || 0,
-    },
+    icon: type.id.includes('sign')
-    {
+      ? SignpostBig
-      label: 'Defected Signs',
+      : type.id.includes('culvert')
-      value: data.summary.unique_defected_sign_board || 0,
+        ? Target
-      icon: SignpostBig,
+        : AlertTriangle,
-      color: 'text-blue-500',
+    color: `text-[${type.color}]`,
-      bgColor: 'bg-blue-500/10',
+    customColor: type.color,
-    },
+    bgColor: 'bg-muted/30',
-    {
+  }));
-      label: 'Unique Potholes',
+
-      value: data.summary.unique_pothole || 0,
+  const globalStats = [
-      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',
-    },
     {
       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>

src/constants/detectionModeConfig.ts

@@ -0,0 +1,119 @@
+/**
+ * Detection mode configurations to support dynamic UI behavior
+ */
+
+export interface DetectionTypeConfig {
+  id: string;
+  label: string;
+  color: string;
+  countKey: string; // The key in summary object from API (e.g., unique_pothole)
+  listKey: string; // The key for the list of detections in DetectionData (e.g., pothole_list)
+  frameCountKey: string; // The key in per-frame count object (e.g., pothole)
+}
+
+export interface DetectionModeConfig {
+  id: string;
+  label: string;
+  enabledTypes: string[]; // IDs of detection types to show in this mode
+}
+
+export const DETECTION_TYPES: Record<string, DetectionTypeConfig> = {
+  pothole: {
+    id: 'pothole',
+    label: 'Pothole',
+    color: '#ef4444',
+    countKey: 'unique_pothole',
+    listKey: 'pothole_list',
+    frameCountKey: 'pothole',
+  },
+  defected_sign_board: {
+    id: 'defected_sign_board',
+    label: 'Defect Sign Board',
+    color: '#3b82f6',
+    countKey: 'unique_defected_sign_board',
+    listKey: 'defected_sign_board_list',
+    frameCountKey: 'defected_sign_board',
+  },
+  road_crack: {
+    id: 'road_crack',
+    label: 'Road Crack',
+    color: '#f59e0b',
+    countKey: 'unique_road_crack',
+    listKey: 'road_crack_list',
+    frameCountKey: 'road_crack',
+  },
+  damaged_road_marking: {
+    id: 'damaged_road_marking',
+    label: 'Damage Road Mark',
+    color: '#6366f1',
+    countKey: 'unique_damaged_road_marking',
+    listKey: 'damaged_road_marking_list',
+    frameCountKey: 'damaged_road_marking',
+  },
+  good_sign_board: {
+    id: 'good_sign_board',
+    label: 'Good Sign Board',
+    color: '#10b981',
+    countKey: 'unique_good_sign_board',
+    listKey: 'good_sign_board_list',
+    frameCountKey: 'good_sign_board',
+  },
+  good_culvert: {
+    id: 'good_culvert',
+    label: 'Good Culvert',
+    color: '#10b981',
+    countKey: 'unique_good_culvert',
+    listKey: 'good_culvert_list',
+    frameCountKey: 'good_culvert',
+  },
+  defective_culvert: {
+    id: 'defective_culvert',
+    label: 'Defective Culvert',
+    color: '#ef4444',
+    countKey: 'unique_defective_culvert',
+    listKey: 'defective_culvert_list',
+    frameCountKey: 'defective_culvert',
+  },
+};
+
+export const DETECTION_MODES: Record<string, DetectionModeConfig> = {
+  'pothole-detection': {
+    id: 'pothole-detection',
+    label: 'Pothole Detection',
+    enabledTypes: ['pothole', 'road_crack', 'damaged_road_marking'],
+  },
+  'sign-board-detection': {
+    id: 'sign-board-detection',
+    label: 'Signboard Detection',
+    enabledTypes: ['defected_sign_board', 'good_sign_board'],
+  },
+  'pot-sign-detection': {
+    id: 'pot-sign-detection',
+    label: 'Pothole & Signboard Detection',
+    enabledTypes: [
+      'pothole',
+      'defected_sign_board',
+      'road_crack',
+      'damaged_road_marking',
+      'good_sign_board',
+    ],
+  },
+  culvert_detection: {
+    id: 'culvert_detection',
+    label: 'Culvert Detection',
+    enabledTypes: ['good_culvert', 'defective_culvert'],
+  },
+};
+
+// Fallback config for unknown modes
+export const DEFAULT_DETECTION_MODE: DetectionModeConfig = DETECTION_MODES['pot-sign-detection'];
+
+export const getDetectionModeConfig = (mode?: string): DetectionModeConfig => {
+  if (!mode) return DEFAULT_DETECTION_MODE;
+  return DETECTION_MODES[mode] || DEFAULT_DETECTION_MODE;
+};
+
+export const getEnabledDetectionTypes = (mode?: string): DetectionTypeConfig[] => {
+  const config = getDetectionModeConfig(mode);
+  return config.enabledTypes.map((typeId) => DETECTION_TYPES[typeId]).filter(Boolean);
+};

src/hooks/use-cumulative-counts.ts

@@ -1,18 +1,10 @@
 import { useMemo, useCallback } from 'react';
 import { DetectionCounts } from '@/types';
 
-const DEFAULT_COUNTS: DetectionCounts = {
-  defected_sign_board: 0,
-  pothole: 0,
-  road_crack: 0,
-  damaged_road_marking: 0,
-  good_sign_board: 0,
-};
-
 export const useCumulativeCounts = (frames: any[]) => {
   const result = useMemo(() => {
     const map = new Map<number, DetectionCounts>();
-    let lastCounts: DetectionCounts = { ...DEFAULT_COUNTS };
+    let lastCounts = {} as DetectionCounts;
     let indices: number[] = [];
 
     if (frames && Array.isArray(frames)) {
@@ -22,20 +14,16 @@ export const useCumulativeCounts = (frames: any[]) => {
         indices.push(frameId);
         const detections = (frameData as any).detections;
         if (detections && detections.length > 0) {
-          const frameCounts = detections[0].count || { ...DEFAULT_COUNTS };
+          const frameCounts = detections[0].count || {};
-          lastCounts = {
+
-            defected_sign_board: Math.max(
+          // Dynamically compute cumulative max for all keys present in counts
-              lastCounts.defected_sign_board,
+          const nextCounts = { ...lastCounts };
-              frameCounts.defected_sign_board || 0,
+          Object.keys(frameCounts).forEach((key) => {
-            ),
+            const currentVal = (nextCounts as any)[key] || 0;
-            pothole: Math.max(lastCounts.pothole, frameCounts.pothole || 0),
+            const newVal = (frameCounts as any)[key] || 0;
-            road_crack: Math.max(lastCounts.road_crack, frameCounts.road_crack || 0),
+            (nextCounts as any)[key] = Math.max(currentVal, newVal);
-            damaged_road_marking: Math.max(
+          });
-              lastCounts.damaged_road_marking,
+          lastCounts = nextCounts;
-              frameCounts.damaged_road_marking || 0,
-            ),
-            good_sign_board: Math.max(lastCounts.good_sign_board, frameCounts.good_sign_board || 0),
-          };
         }
         map.set(frameId, { ...lastCounts });
       });
@@ -46,7 +34,7 @@ export const useCumulativeCounts = (frames: any[]) => {
   const getStickyCounts = useCallback(
     (frameNumber: number) => {
       const { map, indices } = result;
-      if (indices.length === 0) return DEFAULT_COUNTS;
+      if (indices.length === 0) return {} as DetectionCounts;
 
       let targetFrameId = -1;
       let low = 0,
@@ -62,7 +50,9 @@ export const useCumulativeCounts = (frames: any[]) => {
         }
       }
 
-      return targetFrameId !== -1 ? map.get(targetFrameId) || DEFAULT_COUNTS : DEFAULT_COUNTS;
+      return targetFrameId !== -1
+        ? map.get(targetFrameId) || ({} as DetectionCounts)
+        : ({} as DetectionCounts);
     },
     [result],
   );

src/hooks/use-frame-detection-map.ts

@@ -1,41 +1,65 @@
 import { useMemo } from 'react';
-import { DetectionData, DetectionType } from '@/types';
+import { DetectionData } from '@/types';
+import { getEnabledDetectionTypes, DETECTION_TYPES } from '@/constants/detectionModeConfig';
 
-export const useFrameDetectionMap = (data: DetectionData, detectionType: DetectionType) => {
+export const useFrameDetectionMap = (data: DetectionData, detectionType: string) => {
   const frameDetectionMap = useMemo(() => {
     const map = new Map<number, any[]>();
-    const isCombined = detectionType === 'pot-sign-detection';
+    const detectionMode = data.detection_mode || detectionType;
-    const isPothole = detectionType === 'pothole-detection' || isCombined;
+    const enabledTypes = getEnabledDetectionTypes(detectionMode);
-    const isSignboard = detectionType === 'sign-board-detection' || isCombined;
+    const enabledKeys = new Set(enabledTypes.map((t) => t.id));
 
     if (data.frames && Array.isArray(data.frames)) {
       data.frames.forEach((frameData) => {
         const frameId = frameData.frame_id;
         const flatDetections = (frameData as any).detections;
+
         if (flatDetections && Array.isArray(flatDetections)) {
-          map.set(
+          const filteredDetections = flatDetections
-            frameId,
+            .filter((d: any) => {
-            flatDetections.map((d: any) => ({
+              const type = (d.type || '').toLowerCase();
+              return enabledKeys.has(type);
+            })
+            .map((d: any) => ({
               ...d,
-              _detType: d.type === 'pothole' ? 'pothole' : 'signboard',
+              _detType: (d.type || '').toLowerCase(),
+              // Map old ID fields for backward compatibility in UI components
               pothole_id: d.type === 'pothole' ? d.detection_id : undefined,
-              signboard_id: d.type !== 'pothole' ? d.detection_id : undefined,
+              signboard_id: d.type.includes('sign') ? d.detection_id : undefined,
-            })),
+              culvert_id: d.type.includes('culvert') ? d.detection_id : undefined,
-          );
+            }));
+
+          if (filteredDetections.length > 0) {
+            map.set(frameId, filteredDetections);
+          }
         } else {
+          // Legacy format: separate arrays (potholes, signboards, etc.)
           let detections: any[] = [];
-          if (isPothole && (frameData as any).potholes) {
+
-            detections = [
+          enabledTypes.forEach((type) => {
-              ...detections,
+            const listKey =
-              ...(frameData as any).potholes.map((p: any) => ({ ...p, _detType: 'pothole' })),
+              type.id === 'pothole'
-            ];
+                ? 'potholes'
-          }
+                : type.id.includes('sign')
-          if (isSignboard && (frameData as any).signboards) {
+                  ? 'signboards'
-            detections = [
+                  : type.id === 'good_culvert'
-              ...detections,
+                    ? 'good_culverts'
-              ...(frameData as any).signboards.map((s: any) => ({ ...s, _detType: 'signboard' })),
+                    : type.id === 'defective_culvert'
-            ];
+                      ? 'defective_culverts'
-          }
+                      : null;
+
+            if (listKey && (frameData as any)[listKey]) {
+              detections = [
+                ...detections,
+                ...(frameData as any)[listKey].map((item: any) => ({
+                  ...item,
+                  _detType: type.id,
+                  type: type.id,
+                })),
+              ];
+            }
+          });
+
           if (detections.length > 0) map.set(frameId, detections);
         }
       });

src/hooks/use-gps-map.ts

@@ -1,9 +1,11 @@
 import { useMemo } from 'react';
 import { DetectionData } from '@/types';
+import { DETECTION_TYPES } from '@/constants/detectionModeConfig';
 
 export const useGpsMap = (data: DetectionData) => {
   const gpsMap = useMemo(() => {
     const map = new Map<number, { lat: number; lng: number }>();
+
     const addItemsToMap = (list?: any[]) => {
       if (!list || !Array.isArray(list)) return;
       list.forEach((item) => {
@@ -14,12 +16,19 @@ export const useGpsMap = (data: DetectionData) => {
         }
       });
     };
-    addItemsToMap(data.pothole_list);
+
-    addItemsToMap(data.signboard_list);
+    // Dynamically add items from all configured detection lists
-    addItemsToMap(data.defected_sign_board_list);
+    Object.values(DETECTION_TYPES).forEach((type) => {
-    addItemsToMap(data.road_crack_list);
+      if (type.listKey) {
-    addItemsToMap(data.damaged_road_marking_list);
+        addItemsToMap((data as any)[type.listKey]);
-    addItemsToMap(data.good_sign_board_list);
+      }
+    });
+
+    // Backward compatibility for generic signboard_list
+    if ((data as any).signboard_list) {
+      addItemsToMap((data as any).signboard_list);
+    }
+
     return map;
   }, [data]);
 

src/types/analysis.ts

@@ -19,6 +19,8 @@ export type DetectionData = {
     unique_road_crack?: number;
     unique_damaged_road_marking?: number;
     unique_good_sign_board?: number;
+    unique_good_culvert?: number;
+    unique_defective_culvert?: number;
     total_road_damage?: number;
     total_detections: number;
     total_frames: number;
@@ -29,7 +31,10 @@ export type DetectionData = {
   road_crack_list?: Array<DetectionListItem>;
   damaged_road_marking_list?: Array<DetectionListItem>;
   good_sign_board_list?: Array<DetectionListItem>;
+  good_culvert_list?: Array<DetectionListItem>;
+  defective_culvert_list?: Array<DetectionListItem>;
   signboard_list?: Array<DetectionListItem>; // Keeping for backward compatibility
+  detection_mode?: string;
   frames: Array<{
     frame_id: number;
     // Legacy format: separate arrays

src/types/detection.ts

@@ -13,7 +13,11 @@ export interface Detection {
   timestamp_ms: number;
 }
 
-export type DetectionType = 'pothole-detection' | 'sign-board-detection' | 'pot-sign-detection';
+export type DetectionType =
+  | 'pothole-detection'
+  | 'sign-board-detection'
+  | 'pot-sign-detection'
+  | 'culvert_detection';
 
 export interface DetectionListItem {
   detection_id?: number;
@@ -34,6 +38,8 @@ export interface DetectionCounts {
   road_crack: number;
   damaged_road_marking: number;
   good_sign_board: number;
+  good_culvert?: number;
+  defective_culvert?: number;
 }
 
 export type DetectionLogEntry = {

src/utils/canvas-drawing.ts

@@ -1,10 +1,12 @@
-export const DETECTION_COLORS: Record<string, string> = {
+import { DETECTION_TYPES } from '@/constants/detectionModeConfig';
-  pothole: '#ef4444',
+
-  defected_sign_board: '#3b82f6',
+export const DETECTION_COLORS: Record<string, string> = Object.keys(DETECTION_TYPES).reduce(
-  road_crack: '#f59e0b',
+  (acc, key) => {
-  damaged_road_marking: '#6366f1',
+    acc[key] = DETECTION_TYPES[key].color;
-  good_sign_board: '#10b981',
+    return acc;
-};
+  },
+  {} as Record<string, string>,
+);
 
 export const drawBoundingBoxes = (
   ctx: CanvasRenderingContext2D,