UI changed, added dashboard
This commit is contained in:
sumona-banerjeee
84
components/dashboard/compact-project-selector.tsx
Normal file
84
components/dashboard/compact-project-selector.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { FolderOpen, MapPin, Building2 } from "lucide-react"
|
||||
import { type Project } from "@/lib/api"
|
||||
|
||||
interface CompactProjectSelectorProps {
|
||||
projects: Project[]
|
||||
selectedProjectId: string | null
|
||||
onProjectChange: (projectId: string) => void
|
||||
selectedProject: Project | undefined
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function CompactProjectSelector({
|
||||
projects,
|
||||
selectedProjectId,
|
||||
onProjectChange,
|
||||
selectedProject,
|
||||
isLoading = false
|
||||
}: CompactProjectSelectorProps) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-3 p-3 rounded-xl bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50">
|
||||
{/* Project Dropdown */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-indigo-100 dark:bg-indigo-900/50">
|
||||
<FolderOpen className="h-4 w-4 text-indigo-500" />
|
||||
</div>
|
||||
<Select
|
||||
value={selectedProjectId || ""}
|
||||
onValueChange={onProjectChange}
|
||||
disabled={isLoading || projects.length === 0}
|
||||
>
|
||||
<SelectTrigger className="w-[220px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
|
||||
<SelectValue placeholder="Select project" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Corridor Badge */}
|
||||
{selectedProject?.corridor_name && (
|
||||
<>
|
||||
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-emerald-100 dark:bg-emerald-900/50">
|
||||
<MapPin className="h-3.5 w-3.5 text-emerald-500" />
|
||||
</div>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{selectedProject.corridor_name}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* State Badge */}
|
||||
{selectedProject?.state && (
|
||||
<>
|
||||
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-purple-100 dark:bg-purple-900/50">
|
||||
<Building2 className="h-3.5 w-3.5 text-purple-500" />
|
||||
</div>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{selectedProject.state}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
130
components/dashboard/dashboard-map-content.tsx
Normal file
130
components/dashboard/dashboard-map-content.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { MapContainer, TileLayer, CircleMarker, Popup, useMap } from "react-leaflet"
|
||||
import { LatLngBounds, LatLng } from "leaflet"
|
||||
import "leaflet/dist/leaflet.css"
|
||||
import { type Detection } from "@/lib/api"
|
||||
|
||||
interface DashboardMapContentProps {
|
||||
detections: Detection[]
|
||||
}
|
||||
|
||||
// Component to auto-fit map bounds to show all markers
|
||||
function FitBounds({ bounds }: { bounds: LatLngBounds }) {
|
||||
const map = useMap()
|
||||
|
||||
useEffect(() => {
|
||||
if (bounds.isValid()) {
|
||||
map.fitBounds(bounds, { padding: [50, 50] })
|
||||
}
|
||||
}, [bounds, map])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default function DashboardMapContent({ detections }: DashboardMapContentProps) {
|
||||
if (detections.length === 0) {
|
||||
return (
|
||||
<div className="h-full w-full flex items-center justify-center bg-muted/20">
|
||||
<p className="text-muted-foreground">No detections to display</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Calculate bounds to fit all markers
|
||||
const firstDetection = detections[0]
|
||||
const bounds = new LatLngBounds(
|
||||
new LatLng(firstDetection.latitude!, firstDetection.longitude!),
|
||||
new LatLng(firstDetection.latitude!, firstDetection.longitude!)
|
||||
)
|
||||
|
||||
detections.forEach(d => {
|
||||
if (d.latitude && d.longitude) {
|
||||
bounds.extend(new LatLng(d.latitude, d.longitude))
|
||||
}
|
||||
})
|
||||
|
||||
// Center point
|
||||
const center: [number, number] = [
|
||||
(bounds.getNorth() + bounds.getSouth()) / 2,
|
||||
(bounds.getEast() + bounds.getWest()) / 2
|
||||
]
|
||||
|
||||
// Get marker color based on detection type
|
||||
const getMarkerColor = (type: string) => {
|
||||
if (type.toLowerCase().includes("pothole")) {
|
||||
return { fill: "#ef4444", stroke: "#dc2626" } // Red for potholes
|
||||
}
|
||||
return { fill: "#3b82f6", stroke: "#2563eb" } // Blue for signboards
|
||||
}
|
||||
|
||||
// Get display name for detection type
|
||||
const getTypeName = (type: string) => {
|
||||
if (type.toLowerCase().includes("pothole")) {
|
||||
return "Pothole"
|
||||
}
|
||||
return "Signboard"
|
||||
}
|
||||
|
||||
return (
|
||||
<MapContainer
|
||||
center={center}
|
||||
zoom={13}
|
||||
className="h-full w-full"
|
||||
scrollWheelZoom={true}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
|
||||
{/* Detection markers */}
|
||||
{detections.map((detection, idx) => {
|
||||
const colors = getMarkerColor(detection.type)
|
||||
const typeName = getTypeName(detection.type)
|
||||
|
||||
return (
|
||||
<CircleMarker
|
||||
key={`${detection.id}-${idx}`}
|
||||
center={[detection.latitude!, detection.longitude!]}
|
||||
radius={10}
|
||||
fillColor={colors.fill}
|
||||
color={colors.stroke}
|
||||
weight={2}
|
||||
opacity={1}
|
||||
fillOpacity={0.8}
|
||||
>
|
||||
<Popup>
|
||||
<div className="text-sm space-y-2 min-w-[180px]">
|
||||
<div className="font-bold text-base border-b pb-1">
|
||||
{typeName}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Class:</span>
|
||||
<span className="font-medium">{detection.class.replace(/_/g, " ")}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Confidence:</span>
|
||||
<span className="font-medium">{(detection.confidence * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-2 border-t">
|
||||
<div className="text-xs text-muted-foreground mb-1">Coordinates</div>
|
||||
<div className="font-mono text-xs bg-muted/30 p-2 rounded">
|
||||
<div>Lat: {detection.latitude!.toFixed(6)}</div>
|
||||
<div>Lng: {detection.longitude!.toFixed(6)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</CircleMarker>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Auto-fit bounds */}
|
||||
<FitBounds bounds={bounds} />
|
||||
</MapContainer>
|
||||
)
|
||||
}
|
||||
116
components/dashboard/dashboard-map.tsx
Normal file
116
components/dashboard/dashboard-map.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import dynamic from "next/dynamic"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Loader2, MapPin, AlertTriangle, RectangleHorizontal } from "lucide-react"
|
||||
import { fetchAllDetections, type Detection } from "@/lib/api"
|
||||
|
||||
// Dynamically import the map to avoid SSR issues with Leaflet
|
||||
const DashboardMapContent = dynamic(
|
||||
() => import("./dashboard-map-content"),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="h-full w-full flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
interface DashboardMapProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function DashboardMap({ className }: DashboardMapProps) {
|
||||
const [detections, setDetections] = useState<Detection[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const loadDetections = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
const data = await fetchAllDetections()
|
||||
setDetections(data)
|
||||
} catch (err) {
|
||||
console.error("Failed to load detections:", err)
|
||||
setError("Failed to load detection data")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
loadDetections()
|
||||
}, [])
|
||||
|
||||
// Filter detections with valid GPS coordinates
|
||||
const validDetections = detections.filter(d => d.latitude && d.longitude)
|
||||
|
||||
// Count potholes and signboards
|
||||
const potholeCount = validDetections.filter(d =>
|
||||
d.type?.toLowerCase().includes("pothole") ||
|
||||
d.class?.toLowerCase().includes("pothole")
|
||||
).length
|
||||
const signboardCount = validDetections.length - potholeCount
|
||||
|
||||
return (
|
||||
<Card className={`bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden ${className}`}>
|
||||
<CardHeader className="pb-2 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 shadow-md shadow-indigo-500/30">
|
||||
<MapPin className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base font-bold">
|
||||
<span className="bg-gradient-to-r from-indigo-600 via-purple-500 to-indigo-600 dark:from-indigo-400 dark:via-purple-400 dark:to-indigo-400 bg-clip-text text-transparent">
|
||||
Detection Map
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{isLoading ? "Loading..." : `${validDetections.length} detections with GPS coordinates`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Compact Color Legend */}
|
||||
<div className="flex items-center gap-4 text-xs">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500 shadow-sm shadow-red-500/50" />
|
||||
<span className="text-gray-600 dark:text-gray-400 font-medium">Potholes ({potholeCount})</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-blue-500 shadow-sm shadow-blue-500/50" />
|
||||
<span className="text-gray-600 dark:text-gray-400 font-medium">Signboards ({signboardCount})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="h-[400px] w-full relative">
|
||||
{isLoading ? (
|
||||
<div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-indigo-500" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
|
||||
<p className="text-gray-500">{error}</p>
|
||||
</div>
|
||||
) : validDetections.length === 0 ? (
|
||||
<div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
|
||||
<div className="text-center">
|
||||
<p className="text-gray-500">No detections with GPS coordinates found</p>
|
||||
<p className="text-sm text-gray-400 mt-1">Process some videos to see detections on the map</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<DashboardMapContent detections={validDetections} />
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
117
components/dashboard/detection-chart.tsx
Normal file
117
components/dashboard/detection-chart.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
|
||||
interface DetectionChartProps {
|
||||
potholes: number
|
||||
signboards: number
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function DetectionChart({ potholes, signboards, isLoading }: DetectionChartProps) {
|
||||
const total = potholes + signboards
|
||||
const potholePercent = total > 0 ? (potholes / total) * 100 : 50
|
||||
const signboardPercent = total > 0 ? (signboards / total) * 100 : 50
|
||||
|
||||
return (
|
||||
<Card className="glass-card card-glow border-0 overflow-hidden">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg font-semibold">Detection Distribution</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-48">
|
||||
<div className="w-32 h-32 rounded-full bg-primary/10 animate-pulse" />
|
||||
</div>
|
||||
) : total === 0 ? (
|
||||
<div className="flex items-center justify-center h-48 text-muted-foreground">
|
||||
No detections yet
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Donut Chart */}
|
||||
<div className="relative w-36 h-36 flex-shrink-0">
|
||||
<svg viewBox="0 0 100 100" className="w-full h-full transform -rotate-90">
|
||||
{/* Background circle */}
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
fill="none"
|
||||
stroke="hsl(var(--muted))"
|
||||
strokeWidth="16"
|
||||
opacity="0.2"
|
||||
/>
|
||||
{/* Potholes arc */}
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
fill="none"
|
||||
stroke="url(#potholeGradient)"
|
||||
strokeWidth="16"
|
||||
strokeDasharray={`${potholePercent * 2.51} 251`}
|
||||
strokeLinecap="round"
|
||||
className="transition-all duration-700"
|
||||
/>
|
||||
{/* Signboards arc */}
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
fill="none"
|
||||
stroke="url(#signboardGradient)"
|
||||
strokeWidth="16"
|
||||
strokeDasharray={`${signboardPercent * 2.51} 251`}
|
||||
strokeDashoffset={`-${potholePercent * 2.51}`}
|
||||
strokeLinecap="round"
|
||||
className="transition-all duration-700"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="potholeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#f97316" />
|
||||
<stop offset="100%" stopColor="#ea580c" />
|
||||
</linearGradient>
|
||||
<linearGradient id="signboardGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#06b6d4" />
|
||||
<stop offset="100%" stopColor="#0891b2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-foreground">{total}</p>
|
||||
<p className="text-[10px] text-muted-foreground uppercase">Total</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex flex-col gap-3 flex-1">
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-orange-500/10 border border-orange-500/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-gradient-to-r from-orange-500 to-orange-600" />
|
||||
<span className="text-sm font-medium">Potholes</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-foreground">{potholes}</p>
|
||||
<p className="text-xs text-muted-foreground">{potholePercent.toFixed(0)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-gradient-to-r from-cyan-500 to-cyan-600" />
|
||||
<span className="text-sm font-medium">Signboards</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-foreground">{signboards}</p>
|
||||
<p className="text-xs text-muted-foreground">{signboardPercent.toFixed(0)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
113
components/dashboard/detection-donut-chart.tsx
Normal file
113
components/dashboard/detection-donut-chart.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
95
components/dashboard/gradient-stats-card.tsx
Normal file
95
components/dashboard/gradient-stats-card.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { LucideIcon } from "lucide-react"
|
||||
|
||||
interface GradientStatsCardProps {
|
||||
title: string
|
||||
subtitle?: string
|
||||
value: number | string
|
||||
icon: LucideIcon
|
||||
gradient: "green" | "coral" | "blue" | "purple"
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
const gradientStyles = {
|
||||
green: {
|
||||
background: "bg-gradient-to-br from-emerald-50 via-emerald-50 to-teal-100 dark:from-emerald-950/40 dark:via-emerald-950/30 dark:to-teal-950/40",
|
||||
border: "border-l-4 border-l-emerald-500",
|
||||
iconBg: "bg-gradient-to-br from-emerald-400 to-teal-500",
|
||||
iconShadow: "shadow-lg shadow-emerald-500/30",
|
||||
valueGradient: "bg-gradient-to-r from-emerald-600 via-teal-500 to-emerald-600 dark:from-emerald-400 dark:via-teal-400 dark:to-emerald-400"
|
||||
},
|
||||
coral: {
|
||||
background: "bg-gradient-to-br from-red-50 via-red-50 to-orange-100 dark:from-red-950/40 dark:via-red-950/30 dark:to-orange-950/40",
|
||||
border: "border-l-4 border-l-red-500",
|
||||
iconBg: "bg-gradient-to-br from-red-400 to-orange-500",
|
||||
iconShadow: "shadow-lg shadow-red-500/30",
|
||||
valueGradient: "bg-gradient-to-r from-red-600 via-orange-500 to-red-600 dark:from-red-400 dark:via-orange-400 dark:to-red-400"
|
||||
},
|
||||
blue: {
|
||||
background: "bg-gradient-to-br from-blue-50 via-blue-50 to-indigo-100 dark:from-blue-950/40 dark:via-blue-950/30 dark:to-indigo-950/40",
|
||||
border: "border-l-4 border-l-blue-500",
|
||||
iconBg: "bg-gradient-to-br from-blue-400 to-indigo-500",
|
||||
iconShadow: "shadow-lg shadow-blue-500/30",
|
||||
valueGradient: "bg-gradient-to-r from-blue-600 via-indigo-500 to-blue-600 dark:from-blue-400 dark:via-indigo-400 dark:to-blue-400"
|
||||
},
|
||||
purple: {
|
||||
background: "bg-gradient-to-br from-purple-50 via-purple-50 to-pink-100 dark:from-purple-950/40 dark:via-purple-950/30 dark:to-pink-950/40",
|
||||
border: "border-l-4 border-l-purple-500",
|
||||
iconBg: "bg-gradient-to-br from-purple-400 to-pink-500",
|
||||
iconShadow: "shadow-lg shadow-purple-500/30",
|
||||
valueGradient: "bg-gradient-to-r from-purple-600 via-pink-500 to-purple-600 dark:from-purple-400 dark:via-pink-400 dark:to-purple-400"
|
||||
}
|
||||
}
|
||||
|
||||
export function GradientStatsCard({
|
||||
title,
|
||||
subtitle = "Work level distribution",
|
||||
value,
|
||||
icon: Icon,
|
||||
gradient,
|
||||
isLoading = false
|
||||
}: GradientStatsCardProps) {
|
||||
const styles = gradientStyles[gradient]
|
||||
|
||||
return (
|
||||
<Card className={`
|
||||
${styles.background} ${styles.border}
|
||||
border-0 rounded-xl overflow-hidden
|
||||
shadow-md hover:shadow-lg
|
||||
transition-all duration-300 ease-out
|
||||
hover:-translate-y-1 hover:scale-[1.02]
|
||||
`}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Large gradient icon */}
|
||||
<div className={`
|
||||
w-14 h-14 rounded-xl flex items-center justify-center
|
||||
${styles.iconBg} ${styles.iconShadow}
|
||||
`}>
|
||||
<Icon className="h-7 w-7 text-white" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 truncate">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">
|
||||
{subtitle}
|
||||
</p>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="h-9 w-20 bg-gray-200 dark:bg-gray-700 rounded mt-1 animate-pulse" />
|
||||
) : (
|
||||
<p className={`text-3xl font-extrabold mt-1 ${styles.valueGradient} bg-clip-text text-transparent`}>
|
||||
{value}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
127
components/dashboard/location-bar-chart.tsx
Normal file
127
components/dashboard/location-bar-chart.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
"use client"
|
||||
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
|
||||
import { Loader2 } from "lucide-react"
|
||||
|
||||
interface LocationData {
|
||||
name: string
|
||||
potholes: number
|
||||
signboards: number
|
||||
total: number
|
||||
}
|
||||
|
||||
interface LocationBarChartProps {
|
||||
data: LocationData[]
|
||||
isLoading: boolean
|
||||
}
|
||||
|
||||
const COLORS = {
|
||||
pothole: "#ef4444",
|
||||
signboard: "#3b82f6"
|
||||
}
|
||||
|
||||
export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-[300px] flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary/50" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<div className="h-[300px] flex flex-col items-center justify-center text-muted-foreground">
|
||||
<p className="text-sm">No location data available</p>
|
||||
<p className="text-xs mt-1">Process videos to see detections by location</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={data}
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 40 }}
|
||||
barCategoryGap="20%"
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke="hsl(var(--muted-foreground) / 0.1)"
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={60}
|
||||
interval={0}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
width={35}
|
||||
/>
|
||||
<Tooltip
|
||||
content={({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
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 mb-1">{label}</p>
|
||||
{payload.map((entry, index) => (
|
||||
<div key={index} className="flex items-center gap-2 text-sm">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="text-muted-foreground">{entry.name}:</span>
|
||||
<span className="font-semibold">{entry.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
verticalAlign="top"
|
||||
height={36}
|
||||
content={({ payload }) => (
|
||||
<div className="flex items-center justify-center gap-6 mb-2">
|
||||
{payload?.map((entry, index) => (
|
||||
<div key={`legend-${index}`} className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-3 h-3 rounded"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{entry.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="potholes"
|
||||
name="Potholes"
|
||||
fill={COLORS.pothole}
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="signboards"
|
||||
name="Signboards"
|
||||
fill={COLORS.signboard}
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
114
components/dashboard/recent-analyses-table.tsx
Normal file
114
components/dashboard/recent-analyses-table.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Eye, AlertCircle } from "lucide-react"
|
||||
import { type Video } from "@/lib/api"
|
||||
|
||||
interface RecentAnalysesTableProps {
|
||||
videos: Video[]
|
||||
isLoading?: boolean
|
||||
onViewResults?: (videoId: string, detectionType: string) => void
|
||||
}
|
||||
|
||||
export function RecentAnalysesTable({ videos, isLoading, onViewResults }: RecentAnalysesTableProps) {
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString("en-IN", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
})
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "completed":
|
||||
return <Badge className="bg-emerald-500/20 text-emerald-600 border-emerald-500/30 hover:bg-emerald-500/30">Completed</Badge>
|
||||
case "processing":
|
||||
return <Badge className="bg-blue-500/20 text-blue-600 border-blue-500/30 hover:bg-blue-500/30">Processing</Badge>
|
||||
case "pending":
|
||||
return <Badge className="bg-yellow-500/20 text-yellow-600 border-yellow-500/30 hover:bg-yellow-500/30">Pending</Badge>
|
||||
case "failed":
|
||||
return <Badge className="bg-red-500/20 text-red-600 border-red-500/30 hover:bg-red-500/30">Failed</Badge>
|
||||
default:
|
||||
return <Badge variant="secondary">{status}</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
const getDetectionTypeBadge = (type: string) => {
|
||||
if (type === "pothole-detection") {
|
||||
return <Badge className="bg-orange-500/20 text-orange-600 border-orange-500/30">Pothole</Badge>
|
||||
}
|
||||
return <Badge className="bg-cyan-500/20 text-cyan-600 border-cyan-500/30">Signboard</Badge>
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="glass-card card-glow border-0 overflow-hidden">
|
||||
<CardHeader className="pb-3 border-b border-border/50">
|
||||
<CardTitle className="text-lg font-semibold">Recent Analyses</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{isLoading ? (
|
||||
<div className="p-6 space-y-3">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="h-14 bg-primary/5 rounded-lg animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : videos.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<AlertCircle className="h-10 w-10 mb-3 opacity-50" />
|
||||
<p className="text-sm">No analyses found</p>
|
||||
<p className="text-xs mt-1">Start a new analysis to see results here</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-border/50">
|
||||
{videos.slice(0, 8).map((video) => (
|
||||
<div
|
||||
key={video.id}
|
||||
className="flex items-center justify-between p-4 hover:bg-primary/5 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">
|
||||
{video.filename || `Video ${video.id.slice(0, 8)}...`}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatDate(video.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{getDetectionTypeBadge(video.detection_type)}
|
||||
{getStatusBadge(video.status)}
|
||||
</div>
|
||||
<div className="text-right flex-shrink-0 w-20">
|
||||
<p className="text-sm font-bold text-foreground">
|
||||
{video.detection_type === "pothole-detection"
|
||||
? video.unique_potholes ?? 0
|
||||
: video.unique_signboards ?? 0}
|
||||
</p>
|
||||
<p className="text-[10px] text-muted-foreground uppercase">Detections</p>
|
||||
</div>
|
||||
</div>
|
||||
{video.status === "completed" && onViewResults && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onViewResults(video.id, video.detection_type)}
|
||||
className="ml-4 flex-shrink-0"
|
||||
>
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
View
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
38
components/dashboard/stats-card.tsx
Normal file
38
components/dashboard/stats-card.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { LucideIcon } from "lucide-react"
|
||||
|
||||
interface StatsCardProps {
|
||||
title: string
|
||||
value: string | number
|
||||
icon: LucideIcon
|
||||
gradient: string
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function StatsCard({ title, value, icon: Icon, gradient, isLoading }: StatsCardProps) {
|
||||
return (
|
||||
<Card className="glass-card card-glow border-0 overflow-hidden group hover:scale-[1.02] transition-transform duration-300">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{title}
|
||||
</p>
|
||||
{isLoading ? (
|
||||
<div className="h-8 w-16 bg-primary/10 rounded animate-pulse" />
|
||||
) : (
|
||||
<p className="text-3xl font-bold text-foreground">
|
||||
{value}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`p-3 rounded-xl ${gradient} group-hover:scale-110 transition-transform duration-300`}>
|
||||
<Icon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user