@@ -786,148 +198,29 @@ export default function VideoPlayerSection({
- {videoError && (
-
- {videoError}
-
- )}
-
-
-
-
+
-
-
-
-
- POTHOLE:
-
-
- {currentFrameCounts.pothole}
-
-
-
-
- DEFECT SIGN BOARD:
-
-
- {currentFrameCounts.defected_sign_board}
-
-
-
-
- DAMAGE ROAD MARK:
-
-
- {currentFrameCounts.damaged_road_marking}
-
-
-
-
- ROADCRACK:
-
-
- {currentFrameCounts.road_crack}
-
-
-
-
-
-
-
- FRAME:
-
-
- {currentFrame}
-
-
- {lastDetectedLat && (
- <>
-
-
- LAT:
-
-
- {lastDetectedLat.toFixed(7)}
-
-
-
-
- LNG:
-
-
- {lastDetectedLng?.toFixed(7)}
-
-
-
- )}
-
-
+
-
-
-
-
- Detection Logs
-
-
- Live Logs
-
-
-
-
- {logs.length === 0 ? (
-
-
-
Playback to see logs
-
- ) : (
- logs.map((log, i) => (
-
seekToFrame(log.frame)}
- className="p-4 rounded border bg-card hover:border-primary transition-all cursor-pointer group"
- >
-
- Frame: {log.frame}
- {log.videoTime}
-
-
- {log.detections.map((d, j) => (
-
-
- {(d.type || '').replace(/ /g, '_')} ID: {d.id} | Confidence:{' '}
- {(d.confidence * 100).toFixed(1)}%
-
- {d.bbox && (
-
- Coordinates: ({Math.round(d.bbox.x1)}, {Math.round(d.bbox.y1)}){' '}
- → (
- {Math.round(d.bbox.x2)}, {Math.round(d.bbox.y2)})
-
- )}
- {d.latitude && (
-
- GPS: {d.latitude.toFixed(8)}, {d.longitude?.toFixed(8)}
-
- )}
-
- ))}
-
-
- ))
- )}
-
-
+
diff --git a/src/components/video/detailed-summary-section.tsx b/src/components/video/detailed-summary-section.tsx
new file mode 100644
index 0000000..79f825d
--- /dev/null
+++ b/src/components/video/detailed-summary-section.tsx
@@ -0,0 +1,208 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { Map as MapIcon, Activity } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+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 { projectService } from '@/services/api';
+
+// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
+const MapModal = dynamic(() => import('@/components/map-modal'), { ssr: false });
+
+interface DetailedSummarySectionProps {
+ projectId: string;
+ videoId: string;
+ show: boolean;
+ detectionType: DetectionType;
+}
+
+const DetailedSummarySection = ({
+ projectId,
+ videoId,
+ show,
+ detectionType,
+}: DetailedSummarySectionProps) => {
+ const [summaryData, setSummaryData] = useState
(null);
+ const [loading, setLoading] = useState(false);
+ const [showMap, setShowMap] = useState(false);
+
+ useEffect(() => {
+ if (!show || !videoId || !projectId) return;
+
+ const fetchSummary = async () => {
+ setLoading(true);
+ try {
+ const data = await projectService.getProjectSummaryByVideo(projectId, videoId);
+ setSummaryData(data);
+ } catch (err) {
+ console.error('Failed to fetch summary:', err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchSummary();
+ }, [show, videoId, projectId]);
+
+ if (!show || loading || !summaryData) return null;
+
+ const isCombined = detectionType === 'pot-sign-detection';
+ const isPothole = detectionType === 'pothole-detection' || isCombined;
+
+ // Flatten all detections for the scrollable list
+ const allDetections: Array<{
+ detection: any;
+ chainageName: string;
+ packageName: string;
+ }> = [];
+
+ Object.entries(summaryData.packages || {}).forEach(([packageName, packageData]) => {
+ Object.entries(packageData?.chainages || {}).forEach(([chainageName, chainageData]) => {
+ chainageData?.detections?.forEach((detection) => {
+ allDetections.push({ detection, chainageName, packageName });
+ });
+ });
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+ Chainages
+
+ {isCombined ? 'Potholes & Signboards' : isPothole ? 'Potholes' : 'Signboards'}{' '}
+ detected
+
+
+
+
+
+ {/* Project Info */}
+
+
+
+ Project
+
+ {summaryData.project.name}
+
+ {summaryData.project.corridor_name && (
+
+
+ Corridor
+
+
+ {summaryData.project.corridor_name}
+
+
+ )}
+
+
+ {/* Packages and Chainages */}
+ {Object.entries(summaryData.packages).map(([packageName, packageData]) => (
+
+
+ {packageName}
+
+
+ {Object.entries(packageData.chainages).map(([chainageName, chainageData]) => (
+
+
{chainageName}
+
+ {chainageData.detection_count}
+
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+
+
+ All Detections
+
+ Complete list with GPS coordinates
+
+
+
+ {allDetections.map(({ detection, chainageName }, idx) => (
+
+
+
+ {detection.type === 'pothole'
+ ? 'Pothole'
+ : (detection.class || detection.type || '').replace(/_/g, ' ')}{' '}
+ #{detection.id}
+
+
+ Frame {detection.frame_number}
+
+
+
+
+ Chainage: {chainageName}
+
+
+ Confidence:{' '}
+
+ {(detection.confidence * 100).toFixed(1)}%
+
+
+
+ GPS: {detection.latitude}, {detection.longitude}
+
+
+
+ ))}
+
+
+ {/* Map Modal */}
+
setShowMap(false)}
+ detections={allDetections.map(({ detection }) => detection)}
+ detectionType={detectionType}
+ />
+
+
+
+
+ Detection Logs
+
+
+ Live Logs
+
+
+
+
+ {logs.length === 0 ? (
+
+
+
Playback to see logs
+
+ ) : (
+ logs.map((log, i) => (
+
onSeek(log.frame)}
+ className="p-4 rounded border bg-card hover:border-primary transition-all cursor-pointer group"
+ >
+
+ Frame: {log.frame}
+ {log.videoTime}
+
+
+ {log.detections.map((d, j) => (
+
+
+ {(d.type || '').replace(/ /g, '_')} ID: {d.id} | Confidence:{' '}
+ {(d.confidence * 100).toFixed(1)}%
+
+ {d.bbox && (
+
+ Coordinates: ({Math.round(d.bbox.x1)}, {Math.round(d.bbox.y1)}){' '}
+ → (
+ {Math.round(d.bbox.x2)}, {Math.round(d.bbox.y2)})
+
+ )}
+ {d.latitude && (
+
+ GPS: {d.latitude.toFixed(8)}, {d.longitude?.toFixed(8)}
+
+ )}
+
+ ))}
+
+
+ ))
+ )}
+
+
+
+
+
+ POTHOLE:
+
+ {currentFrameCounts.pothole}
+
+
+
+ DEFECT SIGN BOARD:
+
+
+ {currentFrameCounts.defected_sign_board}
+
+
+
+
+ DAMAGE ROAD MARK:
+
+
+ {currentFrameCounts.damaged_road_marking}
+
+
+
+
+ ROADCRACK:
+
+
+ {currentFrameCounts.road_crack}
+
+
+
+
+
+
+
+ FRAME:
+
+
+ {currentFrame}
+
+
+ {lastDetectedLat && (
+ <>
+
+
+ LAT:
+
+
+ {lastDetectedLat.toFixed(7)}
+
+
+
+
+ LNG:
+
+
+ {lastDetectedLng?.toFixed(7)}
+
+
+
+ )}
+
+
+
+
+ Quick Stats
+ Detection analysis overview
+
+
+ {stats.map((stat) => {
+ const Icon = stat.icon;
+ return (
+
+
+
+
+
{stat.value}
+
+ {stat.label}
+
+
+ );
+ })}
+
+ {videoError && (
+
+ {videoError}
+
+ )}
+
+
+
+
+