VisionRoad-Frontend

2026-01-28 16:36:10 +05:30
commit 78487430fe
84 changed files with 15265 additions and 0 deletions
--- a/components/summary-section.tsx
+++ b/components/summary-section.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Target, AlertTriangle, Film, Activity, Gauge, Monitor } from "lucide-react"
+import type { DetectionData } from "@/app/page"
+
+type SummarySectionProps = {
+  data: DetectionData
+}
+
+export function SummarySection({ data }: SummarySectionProps) {
+  const stats = [
+    {
+      label: "Unique Potholes",
+      value: data.summary.unique_potholes || 0,
+      icon: AlertTriangle,
+      color: "text-red-500",
+      bgColor: "bg-red-50 dark:bg-red-950/30",
+    },
+    {
+      label: "Total Detections",
+      value: data.summary.total_detections || 0,
+      icon: Target,
+      color: "text-blue-500",
+      bgColor: "bg-blue-50 dark:bg-blue-950/30",
+    },
+    {
+      label: "Total Frames",
+      value: data.summary.total_frames || data.video_info.total_frames,
+      icon: Film,
+      color: "text-purple-500",
+      bgColor: "bg-purple-50 dark:bg-purple-950/30",
+    },
+    {
+      label: "Detection Rate",
+      value: `${(data.summary.detection_rate || 0).toFixed(1)}%`,
+      icon: Activity,
+      color: "text-green-500",
+      bgColor: "bg-green-50 dark:bg-green-950/30",
+    },
+    {
+      label: "Video FPS",
+      value: (data.video_info.fps || 0).toFixed(1),
+      icon: Gauge,
+      color: "text-orange-500",
+      bgColor: "bg-orange-50 dark:bg-orange-950/30",
+    },
+    {
+      label: "Resolution",
+      value: `${data.video_info.width}×${data.video_info.height}`,
+      icon: Monitor,
+      color: "text-cyan-500",
+      bgColor: "bg-cyan-50 dark:bg-cyan-950/30",
+    },
+  ]
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Detection Summary</CardTitle>
+        <CardDescription>Overview of pothole detection results</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+          {stats.map((stat, index) => {
+            const Icon = stat.icon
+            return (
+              <div
+                key={stat.label}
+                className="flex flex-col items-center justify-center p-4 rounded-lg transition-all hover:scale-105 animate-in fade-in slide-in-from-bottom duration-500"
+                style={{ animationDelay: `${index * 100}ms` }}
+              >
+                <div className={`${stat.bgColor} p-3 rounded-full mb-3 transition-all`}>
+                  <Icon className={`h-5 w-5 ${stat.color}`} />
+                </div>
+                <div className={`text-3xl font-bold ${stat.color} mb-1`}>{stat.value}</div>
+                <div className="text-xs text-muted-foreground text-center">{stat.label}</div>
+              </div>
+            )
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}