refactor video results playback and management form UX

2026-06-18 13:22:30 +05:30
parent defb956751
commit af4d7fae97
11 changed files with 734 additions and 614 deletions
--- a/src/components/video/resultStatsGrid.tsx
+++ b/src/components/video/resultStatsGrid.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import {
+  Activity,
+  AlertTriangle,
+  Clock,
+  Gauge,
+  SignpostBig,
+} from 'lucide-react';
+import { CompletedVideoResult } from '@/types';
+
+const formatDuration = (seconds: number) => {
+  const safeSeconds = Number.isFinite(seconds) ? seconds : 0;
+  const minutes = Math.floor(safeSeconds / 60);
+  const secs = Math.floor(safeSeconds % 60);
+  return `${minutes}:${secs.toString().padStart(2, '0')}`;
+};
+
+interface ResultStatsGridProps {
+  data: CompletedVideoResult;
+}
+
+export default function ResultStatsGrid({ data }: ResultStatsGridProps) {
+  const stats = [
+    {
+      label: 'Total Detections',
+      value: data.summary.total_detections || 0,
+      icon: Activity,
+      color: 'text-green-500',
+      bgColor: 'bg-green-500/10',
+    },
+    {
+      label: 'Potholes',
+      value: data.summary.unique_potholes || 0,
+      icon: AlertTriangle,
+      color: 'text-orange-500',
+      bgColor: 'bg-orange-500/10',
+    },
+    {
+      label: 'Signboards',
+      value: data.summary.unique_signboards || 0,
+      icon: SignpostBig,
+      color: 'text-blue-500',
+      bgColor: 'bg-blue-500/10',
+    },
+    {
+      label: 'FPS',
+      value: data.fps.toFixed(1),
+      icon: Gauge,
+      color: 'text-purple-500',
+      bgColor: 'bg-purple-500/10',
+    },
+    {
+      label: 'Duration',
+      value: formatDuration(data.duration_seconds),
+      icon: Clock,
+      color: 'text-cyan-500',
+      bgColor: 'bg-cyan-500/10',
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
+      {stats.map((stat) => {
+        const Icon = stat.icon;
+
+        return (
+          <div
+            key={stat.label}
+            className="p-4 rounded-lg bg-muted/30 border border-muted flex flex-col items-center text-center"
+          >
+            <div className={`p-2 rounded-md mb-2 ${stat.bgColor}`}>
+              <Icon className={`h-5 w-5 ${stat.color}`} />
+            </div>
+            <div className={`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>
+          </div>
+        );
+      })}
+    </div>
+  );
+}