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:{' '}

21
src/components/video/detection-logs.tsx
View File

@@ -39,29 +39,36 @@ const DetectionLogs = ({ logs, onSeek }: DetectionLogsProps) => {
>
<div className="flex items-center justify-between mb-3">
<span className="text-sm font-bold">Frame: {log.frame}</span>
<span className="text-xs text-muted-foreground/80">{log.videoTime}</span>
<span className="text-xs text-muted-foreground/80">
{log.videoTime}
</span>
</div>
<div className="space-y-4">
{log.detections.map((d, j) => {
const typeId = (d.type || '').toLowerCase();
const typeConfig = DETECTION_TYPES[typeId];
const label = typeConfig ? typeConfig.label : typeId.replace(/_/g, ' ');
const label = typeConfig
? typeConfig.label
: typeId.replace(/_/g, ' ');
return (
<div key={`${d.id}-${j}`} className="space-y-1">
<div className="text-[13px] font-bold">
{label} ID: {d.id} | Confidence: {(d.confidence * 100).toFixed(1)}%
{label} ID: {d.id} | Confidence:{' '}
{(d.confidence * 100).toFixed(1)}%
</div>
{d.bbox && (
<div className="text-[12px] text-muted-foreground/80 font-medium">
Coordinates: ({Math.round(d.bbox.x1)}, {Math.round(d.bbox.y1)}){' '}
<span className="text-muted-foreground/40">→</span> (
{Math.round(d.bbox.x2)}, {Math.round(d.bbox.y2)})
Coordinates: ({Math.round(d.bbox.x1)},{' '}
{Math.round(d.bbox.y1)}){' '}
<span className="text-muted-foreground/40">→</span>{' '}
({Math.round(d.bbox.x2)}, {Math.round(d.bbox.y2)})
</div>
)}
{d.latitude && (
<div className="text-[12px] text-muted-foreground/80 font-medium">
GPS: {d.latitude.toFixed(8)}, {d.longitude?.toFixed(8)}
GPS: {d.latitude.toFixed(8)},{' '}
{d.longitude?.toFixed(8)}
</div>
)}
</div>

5
src/components/video/detection-stats-bar.tsx
View File

@@ -26,7 +26,10 @@ const DetectionStatsBar = memo(
<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">
{enabledTypes.map((type) => (
<div key={type.id} className="flex items-center gap-1.5 whitespace-nowrap">
<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 }}

39
src/components/video/summary-section.tsx
View File

@@ -1,10 +1,27 @@
'use client';
import { Target, SignpostBig, AlertTriangle, Activity, Gauge, Monitor, Film } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import {
Target,
SignpostBig,
AlertTriangle,
Activity,
Gauge,
Monitor,
Film,
} from 'lucide-react';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { DetectionData } from '@/types';
import { cn } from '@/lib/utils';
import { getDetectionModeConfig, getEnabledDetectionTypes } from '@/constants/detectionModeConfig';
import {
getDetectionModeConfig,
getEnabledDetectionTypes,
} from '@/constants/detectionModeConfig';
interface SummarySectionProps {
data: DetectionData;
@@ -74,7 +91,9 @@ const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
</div>
<div>
<CardTitle className="text-base font-bold">Quick Stats</CardTitle>
<CardDescription className="text-xs">Detection analysis overview</CardDescription>
<CardDescription className="text-xs">
Detection analysis overview
</CardDescription>
</div>
</div>
</CardHeader>
@@ -90,12 +109,20 @@ const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
<div className={cn('p-2 rounded-md mb-2', stat.bgColor)}>
<Icon
className={cn('h-5 w-5', stat.color)}
style={(stat as any).customColor ? { color: (stat as any).customColor } : {}}
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 } : {}}
style={
(stat as any).customColor
? { color: (stat as any).customColor }
: {}
}
>
{stat.value}
</div>

13
src/components/video/video-canvas-player.tsx
View File

@@ -1,6 +1,12 @@
'use client';
import { useRef, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react';
import {
useRef,
useEffect,
forwardRef,
useImperativeHandle,
useCallback,
} from 'react';
import { Badge } from '@/components/ui/badge';
import { drawBoundingBoxes } from '@/utils/canvas-drawing';
@@ -22,7 +28,10 @@ export interface VideoCanvasPlayerRef {
drawDetections: (detections: any[]) => void;
}
const VideoCanvasPlayer = forwardRef<VideoCanvasPlayerRef, VideoCanvasPlayerProps>(
const VideoCanvasPlayer = forwardRef<
VideoCanvasPlayerRef,
VideoCanvasPlayerProps
>(
(
{
videoRef,