santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed full frontend,added new features, and components.

Browse Source
This commit is contained in:
sumona-banerjeee
2026-02-11 11:17:22 +05:30
parent ae16cec5ff
commit 3c3aef7d82
24 changed files with 2144 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
components/dashboard/dashboard-map.tsx
View File

@@ -21,30 +21,59 @@ const DashboardMapContent = dynamic(
interface DashboardMapProps {
className?: string
selectedProjectId?: string | null
selectedPackageId?: string | null
selectedLocationId?: string | null
projectSummary?: any
}
export function DashboardMap({ className }: DashboardMapProps) {
export function DashboardMap({
className,
selectedProjectId,
selectedPackageId,
selectedLocationId,
projectSummary
}: 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)
}
if (!projectSummary) {
setDetections([])
setIsLoading(false)
return
}
loadDetections()
}, [])
try {
setIsLoading(true)
setError(null)
const filteredDetections: Detection[] = []
const packagesToProcess = selectedPackageId && selectedPackageId !== "all"
? { [selectedPackageId]: projectSummary.packages[selectedPackageId] }
: projectSummary.packages || {}
for (const [pkgName, pkg] of Object.entries(packagesToProcess)) {
const locationsToProcess = selectedLocationId && selectedLocationId !== "all"
? { [selectedLocationId]: (pkg as any).locations[selectedLocationId] }
: (pkg as any).locations || {}
for (const [locName, loc] of Object.entries(locationsToProcess)) {
const locationDetections = (loc as any).detections || []
filteredDetections.push(...locationDetections)
}
}
setDetections(filteredDetections)
} catch (err) {
console.error("Failed to extract detections:", err)
setError("Failed to load detection data")
} finally {
setIsLoading(false)
}
}, [projectSummary, selectedPackageId, selectedLocationId])
// Filter detections with valid GPS coordinates
const validDetections = detections.filter(d => d.latitude && d.longitude)
@@ -57,18 +86,16 @@ export function DashboardMap({ className }: DashboardMapProps) {
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">
<Card className={`overflow-hidden ${className}`}>
<CardHeader className="pb-2">
<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 className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-white flex items-center justify-center shadow-lg border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110">
<MapPin className="h-5 w-5 text-[#2563eb]" />
</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 className="text-base font-bold text-[#2563eb]">
Detection Map
</CardTitle>
<p className="text-xs text-gray-500 dark:text-gray-400">
{isLoading ? "Loading..." : `${validDetections.length} detections with GPS coordinates`}

12
components/dashboard/detection-chart.tsx
View File

@@ -14,9 +14,9 @@ export function DetectionChart({ potholes, signboards, isLoading }: DetectionCha
const signboardPercent = total > 0 ? (signboards / total) * 100 : 50
return (
<Card className="glass-card card-glow border-0 overflow-hidden">
<Card className="overflow-hidden">
<CardHeader className="pb-2">
<CardTitle className="text-lg font-semibold">Detection Distribution</CardTitle>
<CardTitle className="text-lg font-bold text-blue-600">Detection Distribution</CardTitle>
</CardHeader>
<CardContent className="pt-0">
{isLoading ? (
@@ -73,8 +73,8 @@ export function DetectionChart({ potholes, signboards, isLoading }: DetectionCha
<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" />
<stop offset="0%" stopColor="#3b82f6" />
<stop offset="100%" stopColor="#2563eb" />
</linearGradient>
</defs>
</svg>
@@ -98,9 +98,9 @@ export function DetectionChart({ potholes, signboards, isLoading }: DetectionCha
<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 justify-between p-3 rounded-lg bg-blue-500/10 border border-blue-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" />
<div className="w-3 h-3 rounded-full bg-gradient-to-r from-blue-500 to-blue-600" />
<span className="text-sm font-medium">Signboards</span>
</div>
<div className="text-right">

17
components/dashboard/detection-donut-chart.tsx
View File

@@ -40,16 +40,16 @@ export function DetectionDonutChart({ potholes, signboards, isLoading }: Detecti
]
return (
<div className="h-[250px]">
<div className="h-[200px] relative">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={data}
cx="50%"
cy="50%"
innerRadius={55}
outerRadius={80}
paddingAngle={3}
innerRadius={50}
outerRadius={70}
paddingAngle={5}
dataKey="value"
strokeWidth={0}
>
@@ -57,7 +57,8 @@ export function DetectionDonutChart({ potholes, signboards, isLoading }: Detecti
<Cell
key={`cell-${index}`}
fill={entry.color}
className="transition-opacity hover:opacity-80"
fillOpacity={0.8}
className="transition-all duration-300 hover:fill-opacity-100"
/>
))}
</Pie>
@@ -91,7 +92,7 @@ export function DetectionDonutChart({ potholes, signboards, isLoading }: Detecti
className="w-3 h-3 rounded-full"
style={{ backgroundColor: entry.color }}
/>
<span className="text-xs text-muted-foreground">
<span className="text-[10px] text-muted-foreground">
{entry.value}: {data[index].value}
</span>
</div>
@@ -104,8 +105,8 @@ export function DetectionDonutChart({ potholes, signboards, isLoading }: Detecti
{/* 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>
<p className="text-xl font-extrabold text-[#2563eb]">{total}</p>
<p className="text-[9px] uppercase tracking-wider text-muted-foreground">Total</p>
</div>
</div>
</div>

126
components/dashboard/filter-selector.tsx Normal file
View File

@@ -0,0 +1,126 @@
"use client"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { FolderOpen, Package, MapPin } from "lucide-react"
import { type Project } from "@/lib/api"
interface FilterSelectorProps {
projects: Project[]
selectedProjectId: string | null
selectedPackageId: string | null
selectedLocationId: string | null
onProjectChange: (projectId: string) => void
onPackageChange: (packageId: string) => void
onLocationChange: (locationId: string) => void
packages: Array<{ id: string; name: string }>
locations: Array<{ id: string; name: string }>
isLoading?: boolean
}
export function FilterSelector({
projects,
selectedProjectId,
selectedPackageId,
selectedLocationId,
onProjectChange,
onPackageChange,
onLocationChange,
packages,
locations,
isLoading = false
}: FilterSelectorProps) {
return (
<div className="flex flex-wrap items-center gap-3 p-3 rounded-xl bg-card border border-[var(--border)] shadow-sm">
{/* 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-[200px] 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>
{/* Divider */}
{selectedProjectId && packages.length > 0 && (
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
)}
{/* Package Dropdown */}
{selectedProjectId && packages.length > 0 && (
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-emerald-100 dark:bg-emerald-900/50">
<Package className="h-4 w-4 text-emerald-500" />
</div>
<Select
value={selectedPackageId || "all"}
onValueChange={onPackageChange}
disabled={isLoading}
>
<SelectTrigger className="w-[200px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
<SelectValue placeholder="All packages" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Packages</SelectItem>
{packages.map((pkg) => (
<SelectItem key={pkg.id} value={pkg.id}>
{pkg.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
{/* Divider */}
{selectedPackageId && selectedPackageId !== "all" && locations.length > 0 && (
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
)}
{/* Location Dropdown */}
{selectedPackageId && selectedPackageId !== "all" && locations.length > 0 && (
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-purple-100 dark:bg-purple-900/50">
<MapPin className="h-4 w-4 text-purple-500" />
</div>
<Select
value={selectedLocationId || "all"}
onValueChange={onLocationChange}
disabled={isLoading}
>
<SelectTrigger className="w-[200px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
<SelectValue placeholder="All locations" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Locations</SelectItem>
{locations.map((loc) => (
<SelectItem key={loc.id} value={loc.id}>
{loc.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
</div>
)
}

98
components/dashboard/gradient-stats-card.tsx
View File

@@ -14,38 +14,38 @@ interface GradientStatsCardProps {
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"
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]",
iconShadow: "shadow-lg shadow-[#60a5fa]/20",
valueGradient: "text-gray-900 dark:text-white"
},
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"
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]",
iconShadow: "shadow-lg shadow-[#60a5fa]/20",
valueGradient: "text-gray-900 dark:text-white"
},
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"
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]",
iconShadow: "shadow-lg shadow-[#60a5fa]/20",
valueGradient: "text-gray-900 dark:text-white"
},
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"
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]",
iconShadow: "shadow-lg shadow-[#60a5fa]/20",
valueGradient: "text-gray-900 dark:text-white"
}
}
export function GradientStatsCard({
title,
subtitle = "Work level distribution",
subtitle,
value,
icon: Icon,
gradient,
@@ -54,41 +54,37 @@ export function GradientStatsCard({
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>
<Card className="bg-white dark:bg-gray-900 border-none shadow-xl shadow-blue-500/5 overflow-hidden py-8 px-6 transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10 group">
<CardContent className="p-0 flex items-center justify-between gap-6">
<div className="flex flex-col gap-1 min-w-0">
<h3 className="text-sm font-bold text-blue-600/70 dark:text-blue-400/70 uppercase tracking-widest">
{title}
</h3>
<div className="flex flex-col">
{isLoading ? (
<div className="h-9 w-20 bg-gray-200 dark:bg-gray-700 rounded mt-1 animate-pulse" />
<div className="h-14 w-24 bg-gray-100 dark:bg-gray-800 rounded-xl animate-pulse mt-2" />
) : (
<p className={`text-3xl font-extrabold mt-1 ${styles.valueGradient} bg-clip-text text-transparent`}>
{value}
</p>
<>
<p className="text-5xl md:text-6xl font-black tracking-tighter text-gray-900 dark:text-white leading-tight">
{value}
</p>
{subtitle && (
<p className="text-xs font-medium text-gray-500 dark:text-gray-400 mt-1 opacity-80 italic">
{subtitle}
</p>
)}
</>
)}
</div>
</div>
<div className={`
w-20 h-20 rounded-3xl flex items-center justify-center flex-shrink-0
${styles.iconBg} shadow-[0_10px_30px_rgba(37,99,235,0.2)]
transition-all duration-500 group-hover:scale-110 group-hover:rotate-6
`}>
<Icon className="h-10 w-10 text-white" />
</div>
</CardContent>
</Card>
)

38
components/dashboard/location-bar-chart.tsx
View File

@@ -39,13 +39,23 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
}
return (
<div className="h-[300px]">
<div className="h-[200px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={data}
margin={{ top: 10, right: 10, left: 0, bottom: 40 }}
barCategoryGap="20%"
margin={{ top: 10, right: 10, left: 0, bottom: 20 }}
barCategoryGap="25%"
>
<defs>
<linearGradient id="barGradientPothole" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#ef4444" stopOpacity={0.8} />
<stop offset="100%" stopColor="#ef4444" stopOpacity={0.4} />
</linearGradient>
<linearGradient id="barGradientSignboard" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#3b82f6" stopOpacity={0.8} />
<stop offset="100%" stopColor="#3b82f6" stopOpacity={0.4} />
</linearGradient>
</defs>
<CartesianGrid
strokeDasharray="3 3"
vertical={false}
@@ -53,28 +63,28 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
/>
<XAxis
dataKey="name"
tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }}
tickLine={false}
axisLine={false}
angle={-45}
textAnchor="end"
height={60}
height={50}
interval={0}
/>
<YAxis
tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }}
tickLine={false}
axisLine={false}
width={35}
width={25}
/>
<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>
<p className="font-medium text-xs mb-1">{label}</p>
{payload.map((entry, index) => (
<div key={index} className="flex items-center gap-2 text-sm">
<div key={index} className="flex items-center gap-2 text-xs">
<div
className="w-2 h-2 rounded-full"
style={{ backgroundColor: entry.color }}
@@ -91,16 +101,16 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
/>
<Legend
verticalAlign="top"
height={36}
height={30}
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"
className="w-3 h-3 rounded-sm"
style={{ backgroundColor: entry.color }}
/>
<span className="text-xs text-muted-foreground">
<span className="text-[10px] text-muted-foreground">
{entry.value}
</span>
</div>
@@ -111,13 +121,13 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
<Bar
dataKey="potholes"
name="Potholes"
fill={COLORS.pothole}
fill="url(#barGradientPothole)"
radius={[4, 4, 0, 0]}
/>
<Bar
dataKey="signboards"
name="Signboards"
fill={COLORS.signboard}
fill="url(#barGradientSignboard)"
radius={[4, 4, 0, 0]}
/>
</BarChart>

6
components/dashboard/recent-analyses-table.tsx
View File

@@ -43,13 +43,13 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
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 <Badge className="bg-blue-500/20 text-blue-600 border-blue-500/30">Signboard</Badge>
}
return (
<Card className="glass-card card-glow border-0 overflow-hidden">
<Card className="overflow-hidden">
<CardHeader className="pb-3 border-b border-border/50">
<CardTitle className="text-lg font-semibold">Recent Analyses</CardTitle>
<CardTitle className="text-lg font-bold text-blue-600">Recent Analyses</CardTitle>
</CardHeader>
<CardContent className="p-0">
{isLoading ? (