chore: culvert addition

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 isPothole = detectionType === 'pothole-detection';
+  const modeConfig = getDetectionModeConfig(detectionType);
 
   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">
-            {isCombined ? 'Combined' : isPothole ? 'Pothole' : 'Signboard'} Detection Map
-          </DialogTitle>
+          <DialogTitle className="text-xl font-bold">{modeConfig.label} 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 }> = {
-                pothole: { fill: '#ef4444', stroke: '#b91c1c' },
-                defected_sign_board: { fill: '#3b82f6', stroke: '#1d4ed8' },
-                road_crack: { fill: '#f59e0b', stroke: '#b45309' },
-                damaged_road_marking: { fill: '#6366f1', stroke: '#4338ca' },
-                good_sign_board: { fill: '#10b981', stroke: '#047857' },
-              };
-              const color = colors[type] || { fill: '#64748b', stroke: '#475569' };
+              const typeConfig = DETECTION_TYPES[type];
+              const color = typeConfig
+                ? { fill: typeConfig.color, stroke: typeConfig.color }
+                : { fill: '#64748b', stroke: '#475569' };
 
               return (
                 <CircleMarker