santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update eslint and prettier configuration

Browse Source
This commit is contained in:
santasri.pachhal
2026-06-17 16:23:28 +05:30
parent b54242cf7e
commit 4c2241ff72
140 changed files with 2270 additions and 1287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/video/detailed-summary-section.tsx
View File

@@ -3,7 +3,13 @@
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 {
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';
@@ -12,7 +18,9 @@ import { projectSummaryService } 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 });
const MapModal = dynamic(() => import('@/components/map-modal'), {
ssr: false,
});
interface DetailedSummarySectionProps {
projectId: string;
@@ -27,7 +35,9 @@ const DetailedSummarySection = ({
show,
detectionType,
}: DetailedSummarySectionProps) => {
const [summaryData, setSummaryData] = useState<ChainageSummaryData | null>(null);
const [summaryData, setSummaryData] = useState<ChainageSummaryData | null>(
null,
);
const [loading, setLoading] = useState(false);
const [showMap, setShowMap] = useState(false);
@@ -37,10 +47,11 @@ const DetailedSummarySection = ({
const fetchSummary = async () => {
setLoading(true);
try {
const data = await projectSummaryService.getProjectSummaryByVideo<ChainageSummaryData>(
projectId,
videoId,
);
const data =
await projectSummaryService.getProjectSummaryByVideo<ChainageSummaryData>(
projectId,
videoId,
);
setSummaryData(data);
} catch (err) {
console.error('Failed to fetch summary:', err);
@@ -63,13 +74,17 @@ const DetailedSummarySection = ({
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 });
});
});
});
Object.entries(summaryData.packages || {}).forEach(
([packageName, packageData]) => {
Object.entries(packageData?.chainages || {}).forEach(
([chainageName, chainageData]) => {
chainageData?.detections?.forEach((detection) => {
allDetections.push({ detection, chainageName, packageName });
});
},
);
},
);
return (
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
@@ -82,10 +97,17 @@ const DetailedSummarySection = ({
</div>
<div>
<CardTitle className="text-base font-bold">Segments</CardTitle>
<CardDescription className="text-xs">{modeConfig.label} detected</CardDescription>
<CardDescription className="text-xs">
{modeConfig.label} detected
</CardDescription>
</div>
</div>
<Button variant="outline" size="sm" onClick={() => setShowMap(true)} className="gap-2">
<Button
variant="outline"
size="sm"
onClick={() => setShowMap(true)}
className="gap-2"
>
<MapIcon className="h-4 w-4" />
Map
</Button>
@@ -100,7 +122,9 @@ const DetailedSummarySection = ({
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
Project
</span>
<span className="text-sm font-bold">{summaryData.project.name}</span>
<span className="text-sm font-bold">
{summaryData.project.name}
</span>
</div>
{summaryData.project.corridor_name && (
<div className="flex flex-col">
@@ -115,26 +139,32 @@ const DetailedSummarySection = ({
</div>
{/* Packages and Chainages */}
{Object.entries(summaryData.packages).map(([packageName, packageData]) => (
<div key={packageData.package_id} className="space-y-2">
<div className="text-xs font-bold text-muted-foreground truncate">
{packageName}
{Object.entries(summaryData.packages).map(
([packageName, packageData]) => (
<div key={packageData.package_id} className="space-y-2">
<div className="text-xs font-bold text-muted-foreground truncate">
{packageName}
</div>
<div className="pl-2 space-y-2 border-l-2 border-muted">
{Object.entries(packageData.chainages).map(
([chainageName, chainageData]) => (
<div
key={chainageData.chainage_id}
className="text-xs p-3 rounded-md bg-muted/50 flex items-center justify-between gap-4"
>
<div className="font-semibold truncate">
{chainageName}
</div>
<div className="text-[10px] bg-background px-2 py-0.5 rounded border font-bold">
{chainageData.detection_count}
</div>
</div>
),
)}
</div>
</div>
<div className="pl-2 space-y-2 border-l-2 border-muted">
{Object.entries(packageData.chainages).map(([chainageName, chainageData]) => (
<div
key={chainageData.chainage_id}
className="text-xs p-3 rounded-md bg-muted/50 flex items-center justify-between gap-4"
>
<div className="font-semibold truncate">{chainageName}</div>
<div className="text-[10px] bg-background px-2 py-0.5 rounded border font-bold">
{chainageData.detection_count}
</div>
</div>
))}
</div>
</div>
))}
),
)}
</div>
</ScrollArea>
</CardContent>
@@ -147,7 +177,9 @@ const DetailedSummarySection = ({
<Activity className="h-5 w-5 text-primary" />
</div>
<div>
<CardTitle className="text-base font-bold">All Detections</CardTitle>
<CardTitle className="text-base font-bold">
All Detections
</CardTitle>
<CardDescription className="text-xs">
Complete list with GPS coordinates
</CardDescription>
@@ -164,7 +196,11 @@ const DetailedSummarySection = ({
>
<div className="flex items-center justify-between mb-2">
<span className="font-bold">
{(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}
@@ -172,7 +208,10 @@ const DetailedSummarySection = ({
</div>
<div className="grid grid-cols-2 gap-2 text-[10px] text-muted-foreground">
<div className="truncate">
Segment: <span className="text-foreground font-medium">{chainageName}</span>
Segment:{' '}
<span className="text-foreground font-medium">
{chainageName}
</span>
</div>
<div>
Confidence:{' '}