chore: culvert addition

2026-03-19 10:22:49 +05:30
parent 7eb3d60932
commit 1065487046
14 changed files with 313 additions and 182 deletions
--- a/src/components/map-modal.tsx
+++ b/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
--- a/src/components/video-player-section.tsx
+++ b/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>({
-    defected_sign_board: 0,
-    pothole: 0,
-    road_crack: 0,
-    damaged_road_marking: 0,
-    good_sign_board: 0,
-  });
+  const detectionMode = data.detection_mode || detectionType;
+  const modeConfig = getDetectionModeConfig(detectionMode);
+  const enabledTypes = getEnabledDetectionTypes(detectionMode);
+
+  const initialCounts = useMemo(() => {
+    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>

--- a/src/components/video/detailed-summary-section.tsx
+++ b/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}
--- a/src/components/video/detection-stats-bar.tsx
+++ b/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">
--- a/src/components/video/summary-section.tsx
+++ b/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>