UI changed, added dashboard

2026-02-06 17:07:43 +05:30
parent 86c23e01ad
commit ae16cec5ff
20 changed files with 2478 additions and 460 deletions
--- a/components/dashboard/detection-donut-chart.tsx
+++ b/components/dashboard/detection-donut-chart.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"
+import { Loader2 } from "lucide-react"
+
+interface DetectionDonutChartProps {
+    potholes: number
+    signboards: number
+    isLoading: boolean
+}
+
+const COLORS = {
+    pothole: "#ef4444",
+    signboard: "#3b82f6"
+}
+
+export function DetectionDonutChart({ potholes, signboards, isLoading }: DetectionDonutChartProps) {
+    if (isLoading) {
+        return (
+            <div className="h-[250px] flex items-center justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-primary/50" />
+            </div>
+        )
+    }
+
+    const total = potholes + signboards
+
+    if (total === 0) {
+        return (
+            <div className="h-[250px] flex flex-col items-center justify-center text-muted-foreground">
+                <p className="text-sm">No detections found</p>
+                <p className="text-xs mt-1">Process videos to see data</p>
+            </div>
+        )
+    }
+
+    const data = [
+        { name: "Potholes", value: potholes, color: COLORS.pothole },
+        { name: "Signboards", value: signboards, color: COLORS.signboard }
+    ]
+
+    return (
+        <div className="h-[250px]">
+            <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                    <Pie
+                        data={data}
+                        cx="50%"
+                        cy="50%"
+                        innerRadius={55}
+                        outerRadius={80}
+                        paddingAngle={3}
+                        dataKey="value"
+                        strokeWidth={0}
+                    >
+                        {data.map((entry, index) => (
+                            <Cell
+                                key={`cell-${index}`}
+                                fill={entry.color}
+                                className="transition-opacity hover:opacity-80"
+                            />
+                        ))}
+                    </Pie>
+                    <Tooltip
+                        content={({ active, payload }) => {
+                            if (active && payload && payload.length) {
+                                const data = payload[0]
+                                return (
+                                    <div className="bg-background/95 backdrop-blur-sm border border-border rounded-lg px-3 py-2 shadow-lg">
+                                        <p className="font-medium text-sm">{data.name}</p>
+                                        <p className="text-sm text-muted-foreground">
+                                            Count: <span className="font-semibold text-foreground">{data.value}</span>
+                                        </p>
+                                        <p className="text-xs text-muted-foreground">
+                                            {((Number(data.value) / total) * 100).toFixed(1)}% of total
+                                        </p>
+                                    </div>
+                                )
+                            }
+                            return null
+                        }}
+                    />
+                    <Legend
+                        verticalAlign="bottom"
+                        height={36}
+                        content={({ payload }) => (
+                            <div className="flex items-center justify-center gap-6 mt-2">
+                                {payload?.map((entry, index) => (
+                                    <div key={`legend-${index}`} className="flex items-center gap-2">
+                                        <div
+                                            className="w-3 h-3 rounded-full"
+                                            style={{ backgroundColor: entry.color }}
+                                        />
+                                        <span className="text-xs text-muted-foreground">
+                                            {entry.value}: {data[index].value}
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    />
+                </PieChart>
+            </ResponsiveContainer>
+            {/* Center label */}
+            <div className="absolute inset-0 flex items-center justify-center pointer-events-none" style={{ marginTop: '-40px' }}>
+                <div className="text-center">
+                    <p className="text-2xl font-bold">{total}</p>
+                    <p className="text-xs text-muted-foreground">Total</p>
+                </div>
+            </div>
+        </div>
+    )
+}