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

Changes in UI

Browse Source
This commit is contained in:
sumona-banerjeee
2026-02-11 16:07:07 +05:30
parent 3c3aef7d82
commit 09cd20e838
23 changed files with 485 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/dashboard/compact-project-selector.tsx
View File

@@ -28,16 +28,14 @@ export function CompactProjectSelector({
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>
<div className="flex flex-col min-w-[120px]">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">Project</span>
<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">
<SelectTrigger className="h-auto p-0 border-0 shadow-none focus:ring-0 text-sm font-bold text-gray-900 dark:text-white bg-transparent text-left">
<SelectValue placeholder="Select project" />
</SelectTrigger>
<SelectContent>
@@ -53,12 +51,10 @@ export function CompactProjectSelector({
{/* 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">
<div className="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-2" />
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">Corridor</span>
<span className="text-xs font-bold text-gray-600 dark:text-gray-400">
{selectedProject.corridor_name}
</span>
</div>
@@ -68,12 +64,10 @@ export function CompactProjectSelector({
{/* 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">
<div className="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-2" />
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">State</span>
<span className="text-xs font-bold text-gray-600 dark:text-gray-400">
{selectedProject.state}
</span>
</div>

2
components/dashboard/dashboard-map-content.tsx
View File

@@ -54,7 +54,7 @@ export default function DashboardMapContent({ detections }: DashboardMapContentP
// 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: "#10b981", stroke: "#065f46" } // Green for potholes
}
return { fill: "#3b82f6", stroke: "#2563eb" } // Blue for signboards
}

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

@@ -106,7 +106,7 @@ export function DashboardMap({
{/* 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" />
<div className="w-3 h-3 rounded-full bg-emerald-500 shadow-sm shadow-emerald-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">

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

@@ -10,7 +10,7 @@ interface DetectionDonutChartProps {
}
const COLORS = {
pothole: "#ef4444",
pothole: "#10b981",
signboard: "#3b82f6"
}

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

@@ -16,30 +16,26 @@ const gradientStyles = {
green: {
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"
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
coral: {
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"
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
blue: {
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"
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
purple: {
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"
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
}
}
@@ -54,7 +50,7 @@ export function GradientStatsCard({
const styles = gradientStyles[gradient]
return (
<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">
<Card className="bg-white dark:bg-gray-900 border-none shadow-xl shadow-blue-500/5 overflow-hidden py-8 px-6">
<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">
@@ -65,7 +61,7 @@ export function GradientStatsCard({
<div className="h-14 w-24 bg-gray-100 dark:bg-gray-800 rounded-xl animate-pulse mt-2" />
) : (
<>
<p className="text-5xl md:text-6xl font-black tracking-tighter text-gray-900 dark:text-white leading-tight">
<p className="text-3xl md:text-4xl font-black tracking-tighter leading-tight text-[#1e3a8a]">
{value}
</p>
{subtitle && (
@@ -81,7 +77,6 @@ export function GradientStatsCard({
<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>

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

@@ -16,7 +16,7 @@ interface LocationBarChartProps {
}
const COLORS = {
pothole: "#ef4444",
pothole: "#10b981",
signboard: "#3b82f6"
}
@@ -48,8 +48,8 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
>
<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} />
<stop offset="0%" stopColor="#10b981" stopOpacity={0.8} />
<stop offset="100%" stopColor="#10b981" stopOpacity={0.4} />
</linearGradient>
<linearGradient id="barGradientSignboard" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#3b82f6" stopOpacity={0.8} />

100
components/data-table.tsx
View File

@@ -36,7 +36,7 @@ export function DataTable<T extends Record<string, any>>({
</div>
<Button
onClick={onAddNew}
className="bg-blue-600 hover:bg-blue-800 text-white shadow-md transition-all duration-300 hover:scale-105 active:scale-95 border-none h-8 px-4 text-xs font-semibold rounded-lg"
className="bg-blue-600 hover:bg-blue-800 text-white shadow-md transition-all duration-300 hover:scale-105 active:scale-95 border-none h-8 px-4 text-xs font-semibold"
>
<Plus className="h-3.5 w-3.5 mr-1.5 stroke-[3px]" />
{addButtonText}
@@ -44,58 +44,60 @@ export function DataTable<T extends Record<string, any>>({
</div>
{/* Table */}
<div className="overflow-hidden rounded-2xl border border-[var(--border)] bg-card shadow-2xl shadow-black/5">
<table className="min-w-full divide-y divide-gray-200/50 dark:divide-gray-700/50 border-collapse">
<thead className="bg-[#f8fafc] dark:bg-gray-900/50">
<tr>
{columns.map((col) => (
<th
key={col.key}
className="px-6 py-4 text-left text-[11px] font-black text-gray-500 dark:text-gray-400 uppercase tracking-[0.1em] border-b border-[var(--border)]"
>
{col.header}
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-100/30 dark:divide-gray-800/30">
{isLoading ? (
<div className="rounded-2xl border border-[var(--border)] bg-card shadow-2xl shadow-black/5 overflow-hidden">
<div className="overflow-auto max-h-[400px]">
<table className="min-w-full divide-y divide-gray-200/50 dark:divide-gray-700/50 border-collapse">
<thead className="bg-[#f8fafc] dark:bg-gray-900/50 sticky top-0 z-10">
<tr>
<td colSpan={columns.length} className="px-6 py-16 text-center">
<div className="flex flex-col items-center justify-center gap-3">
<div className="h-8 w-8 border-3 border-gray-200 border-t-blue-500 rounded-full animate-spin" />
<span className="text-sm font-medium text-gray-500 dark:text-gray-400">Loading records...</span>
</div>
</td>
{columns.map((col) => (
<th
key={col.key}
className="px-4 py-3 text-left text-[10px] font-black text-gray-500 dark:text-gray-400 uppercase tracking-[0.1em] border-b border-[var(--border)] bg-[#f8fafc] dark:bg-gray-900 shadow-[0_1px_0_0_rgba(0,0,0,0.05)]"
>
{col.header}
</th>
))}
</tr>
) : data.length === 0 ? (
<tr>
<td colSpan={columns.length} className="px-6 py-16 text-center">
<div className="flex flex-col items-center justify-center gap-2">
<div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-2">
<Plus className="w-6 h-6 text-gray-400" />
</thead>
<tbody className="divide-y divide-gray-100/30 dark:divide-gray-800/30">
{isLoading ? (
<tr>
<td colSpan={columns.length} className="px-4 py-12 text-center">
<div className="flex flex-col items-center justify-center gap-3">
<div className="h-8 w-8 border-3 border-gray-200 border-t-blue-500 rounded-full animate-spin" />
<span className="text-sm font-medium text-gray-500 dark:text-gray-400">Loading records...</span>
</div>
<p className="text-gray-500 dark:text-gray-400 font-medium">No data available</p>
<p className="text-xs text-gray-400 dark:text-gray-500">Click "{addButtonText}" to get started</p>
</div>
</td>
</tr>
) : (
data.map((item, idx) => (
<tr
key={idx}
className="hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors duration-200"
>
{columns.map((col) => (
<td key={col.key} className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 font-medium">
{col.render ? col.render(item) : item[col.key] || "—"}
</td>
))}
</td>
</tr>
))
)}
</tbody>
</table>
) : data.length === 0 ? (
<tr>
<td colSpan={columns.length} className="px-4 py-12 text-center">
<div className="flex flex-col items-center justify-center gap-2">
<div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-2">
<Plus className="w-6 h-6 text-gray-400" />
</div>
<p className="text-gray-500 dark:text-gray-400 font-medium">No data available</p>
<p className="text-xs text-gray-400 dark:text-gray-500">Click "{addButtonText}" to get started</p>
</div>
</td>
</tr>
) : (
data.map((item, idx) => (
<tr
key={idx}
className="hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors duration-200"
>
{columns.map((col) => (
<td key={col.key} className="px-4 py-3 text-[13px] text-gray-700 dark:text-gray-300 font-medium">
{col.render ? col.render(item) : (item[col.key as keyof T] !== null && item[col.key as keyof T] !== undefined ? String(item[col.key as keyof T]) : "—")}
</td>
))}
</tr>
))
)}
</tbody>
</table>
</div>
</div>
</div>
)

28
components/map-modal.tsx
View File

@@ -28,9 +28,19 @@ function FitBounds({ bounds }: { bounds: LatLngBounds }) {
const map = useMap()
useEffect(() => {
if (bounds.isValid()) {
map.fitBounds(bounds, { padding: [50, 50] })
}
if (!map || !bounds.isValid()) return
// Small delay to ensure the container dimensions are fully calculated (prevents _leaflet_pos error)
const timer = setTimeout(() => {
map.invalidateSize()
map.fitBounds(bounds, {
padding: [50, 50],
maxZoom: 16,
animate: true
})
}, 200)
return () => clearTimeout(timer)
}, [bounds, map])
return null
@@ -75,9 +85,9 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
return (
<Dialog open={open} onOpenChange={onClose}>
<DialogContent className="max-w-4xl h-[600px] p-0">
<DialogHeader className="px-6 pt-6 pb-2">
<DialogTitle>
<DialogContent className="max-w-6xl h-[80vh] p-0 flex flex-col overflow-hidden border-none shadow-2xl">
<DialogHeader className="px-6 pt-6 pb-4 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
<DialogTitle className="text-xl font-bold">
{isPothole ? "Pothole" : "Signboard"} Detection Map
</DialogTitle>
<p className="text-sm text-muted-foreground">
@@ -85,7 +95,7 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
</p>
</DialogHeader>
<div className="h-[calc(100%-80px)] w-full">
<div className="flex-1 w-full bg-gray-50 dark:bg-gray-950 relative">
<MapContainer
center={center}
zoom={13}
@@ -111,8 +121,8 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
key={`${detection.id}-${idx}`}
center={[detection.latitude, detection.longitude]}
radius={8}
fillColor="#ef4444"
color="#dc2626"
fillColor="#10b981"
color="#065f46"
weight={2}
opacity={1}
fillOpacity={0.8}

32
components/navigation-menu.tsx
View File

@@ -89,12 +89,12 @@ export function NavigationMenu() {
<Menu className="h-5 w-5 text-foreground" />
</Button>
</SheetTrigger>
<SheetContent side="left" className="w-[320px] sm:w-[380px] bg-background/95 backdrop-blur-xl border-r border-white/10">
<SheetHeader className="pb-6 border-b border-white/10">
<SheetTitle className="text-2xl font-bold text-gradient">
<SheetContent side="left" className="w-[320px] sm:w-[380px] bg-white backdrop-blur-xl border-r border-slate-200">
<SheetHeader className="pb-6 border-b border-slate-100">
<SheetTitle className="text-2xl font-bold text-[#3b82f6]">
VisionRoad
</SheetTitle>
<p className="text-sm text-muted-foreground">
<p className="text-sm text-gray-500">
AI-Powered Road Detection System
</p>
</SheetHeader>
@@ -110,28 +110,30 @@ export function NavigationMenu() {
key={item.href}
onClick={() => handleNavigation(item.href)}
className={`w-full flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-300 group ${isActive
? "bg-primary/15 border border-primary/30"
: "hover:bg-white/5 border border-transparent hover:border-white/10"
? "bg-slate-50 border border-slate-200"
: "hover:bg-slate-50 border border-transparent hover:border-slate-100"
}`}
>
<div className={`p-2.5 rounded-lg transition-all duration-300 ${isActive
? "bg-[#60a5fa] text-white"
: "bg-white/5 text-muted-foreground group-hover:bg-[#60a5fa]/10 group-hover:text-[#60a5fa]"
<div className={`p-2.5 rounded-lg transition-all duration-300 border shadow-sm ${isActive
? "bg-[#2563eb] text-white border-[#2563eb]"
: "bg-[#f0fafd] text-slate-900 group-hover:bg-[#2563eb] group-hover:text-white group-hover:border-[#2563eb] border-slate-100"
}`}>
<Icon className="h-5 w-5" />
<Icon
className={`h-5 w-5 ${isActive ? 'stroke-[2.5]' : 'stroke-[2]'}`}
/>
</div>
<div className="flex-1 min-w-0">
<h3 className={`font-semibold text-sm ${isActive ? "text-primary" : "text-foreground"
<h3 className={`font-semibold text-sm ${isActive ? "text-[#1e40af]" : "text-gray-700"
}`}>
{item.title}
</h3>
<p className="text-xs text-muted-foreground truncate mt-0.5">
<p className="text-xs text-gray-400 truncate mt-0.5">
{item.description}
</p>
</div>
<ChevronRight className={`h-4 w-4 transition-all duration-300 ${isActive
? "text-primary opacity-100"
: "text-muted-foreground opacity-0 group-hover:opacity-100"
? "text-[#1e40af] opacity-100"
: "text-gray-300 opacity-0 group-hover:opacity-100"
}`} />
</button>
)
@@ -140,7 +142,7 @@ export function NavigationMenu() {
{/* Footer */}
<div className="absolute bottom-4 left-4 right-4 text-center">
<p className="text-xs text-muted-foreground">
<p className="text-xs text-gray-400">
Sentient Geeks Pvt. Ltd.
</p>
</div>

4
components/project-selection-section.tsx
View File

@@ -148,8 +148,8 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
}
return (
<Card className="glass-card card-glow border-0 overflow-hidden">
<CardHeader className="pb-6 border-b border-border/50">
<Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 overflow-hidden">
<CardHeader className="pb-6 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
<div className="flex flex-col gap-4">
<div>
<CardTitle className="text-2xl font-semibold">Select Project Location</CardTitle>

48
components/sidebar-navigation.tsx
View File

@@ -57,14 +57,7 @@ export function SidebarNavigation() {
const isNewAnalysisActive = pathname === "/new-analysis"
return (
<aside className="fixed left-0 top-0 h-screen w-20 bg-[#2563eb] border-r border-[#2563eb]/20 z-50 flex flex-col items-center py-8 shadow-2xl">
{/* Logo */}
<div className="mb-6">
<div className="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-lg border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110">
<span className="text-[#2563eb] font-black text-xl">V</span>
</div>
</div>
<aside className="fixed left-0 top-0 h-screen w-20 bg-white border-r border-slate-200 z-50 flex flex-col items-center py-8 shadow-sm">
{/* Navigation Items */}
<nav className="flex-1 flex flex-col items-center gap-4">
{/* Dashboard - first item */}
@@ -77,14 +70,15 @@ export function SidebarNavigation() {
onClick={() => handleNavigation(item)}
className={`
relative w-12 h-12 rounded-xl flex items-center justify-center
bg-white text-[#2563eb] shadow-lg border-2
${isActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
transition-all duration-300 ease-out
hover:scale-110 hover:shadow-xl
active:scale-95
hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
active:scale-95 border
`}
>
<Icon className={`h-6 w-6 ${isActive ? 'stroke-[2.5]' : 'stroke-[2]'}`} />
<Icon
className={`h-6 w-6 transition-all duration-300 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
/>
</button>
<div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2
@@ -107,14 +101,15 @@ export function SidebarNavigation() {
onClick={() => router.push("/new-analysis")}
className={`
relative w-12 h-12 rounded-xl flex items-center justify-center
bg-white text-[#2563eb] shadow-lg border-2
${isNewAnalysisActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
${isNewAnalysisActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
transition-all duration-300 ease-out
hover:scale-110 hover:shadow-xl
active:scale-95
hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
active:scale-95 border
`}
>
<Plus className={`h-6 w-6 ${isNewAnalysisActive ? 'stroke-[2.5]' : 'stroke-[2]'}`} />
<Plus
className={`h-6 w-6 transition-all duration-300 ${isNewAnalysisActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
/>
</button>
<div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2
@@ -130,7 +125,7 @@ export function SidebarNavigation() {
</div>
{/* Divider */}
<div className="w-8 h-px bg-white/20 my-1" />
<div className="w-8 h-px bg-slate-200 my-1" />
{/* Create items */}
{navItems.slice(1, 4).map((item) => {
@@ -142,14 +137,15 @@ export function SidebarNavigation() {
onClick={() => handleNavigation(item)}
className={`
relative w-12 h-12 rounded-xl flex items-center justify-center
bg-white text-[#2563eb] shadow-lg border-2
${isActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
transition-all duration-300 ease-out
hover:scale-110 hover:shadow-xl
active:scale-95
hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
active:scale-95 border
`}
>
<Icon className={`h-6 w-6 ${isActive ? 'stroke-[2.5]' : 'stroke-[2]'}`} />
<Icon
className={`h-6 w-6 transition-all duration-300 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
/>
</button>
<div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2
@@ -172,10 +168,10 @@ export function SidebarNavigation() {
<div className="relative group">
<button
onClick={() => { }}
className="w-12 h-12 rounded-full bg-white flex items-center justify-center cursor-not-allowed opacity-80 border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110"
className="w-12 h-12 rounded-full bg-[#f0fafd] flex items-center justify-center cursor-not-allowed opacity-80 border border-slate-100 transition-all duration-300 hover:scale-110 hover:bg-[#2563eb] hover:border-[#2563eb]"
disabled
>
<User className="h-6 w-6 text-[#2563eb]" />
<User className="h-6 w-6 text-slate-900 transition-colors duration-300 group-hover:text-white" />
</button>
<div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2

6
components/ui/button.tsx
View File

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
@@ -22,8 +22,8 @@ const buttonVariants = cva(
},
size: {
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
sm: 'h-8 rounded-full gap-1.5 px-3 has-[>svg]:px-2.5',
lg: 'h-10 rounded-full px-6 has-[>svg]:px-4',
icon: 'size-9',
'icon-sm': 'size-8',
'icon-lg': 'size-10',

149
components/video-player-section.tsx
View File

@@ -195,20 +195,22 @@ function DetailedSummarySection({
})
return (
<div className="space-y-4">
{/* Location-based Summary */}
<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">
<CardHeader className="pb-3 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30">
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
<Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden flex flex-col lg:col-span-2">
<CardHeader className="pb-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
<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-blue-400 to-indigo-500 shadow-md shadow-blue-500/30">
<MapIcon className="h-4 w-4 text-white" />
<div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group">
<div className="absolute inset-0 bg-white/20 animate-logo-spin-slow opacity-50"></div>
<div className="absolute inset-0 border-2 border-white/30 rounded-xl animate-logo-spin-reverse-slow opacity-30"></div>
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white relative z-10 animate-logo-float">
<path d="M50 20L85 80H15L50 20Z" stroke="currentColor" strokeWidth="6" strokeLinejoin="round" />
<path d="M40 80L50 55L60 80" stroke="currentColor" strokeWidth="6" />
</svg>
</div>
<div>
<CardTitle className="text-base font-bold">
<span className="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 bg-clip-text text-transparent">
Detection Locations
</span>
<CardTitle className="text-base font-bold text-gray-900 dark:text-white">
Detection Locations
</CardTitle>
<CardDescription className="text-xs">
{isPothole ? "Potholes" : "Signboards"} detected across project locations
@@ -226,48 +228,61 @@ function DetailedSummarySection({
</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-3">
{/* Project Info */}
<div className="text-xs space-y-1 pb-2 border-b">
<div><span className="text-muted-foreground">Project:</span> <span className="font-medium">{summaryData.project.name}</span></div>
{summaryData.project.corridor_name && (
<div><span className="text-muted-foreground">Corridor:</span> {summaryData.project.corridor_name}</div>
)}
</div>
{/* Packages and Locations */}
{Object.entries(summaryData.packages).map(([packageName, packageData]) => (
<div key={packageData.package_id} className="space-y-2">
<div className="text-xs font-medium">{packageName}</div>
<div className="pl-3 space-y-2">
{Object.entries(packageData.locations).map(([locationName, locationData]) => (
<div key={locationData.location_id} className="text-xs p-2 rounded bg-muted/30">
<div className="font-medium mb-1">{locationName}</div>
<div className="text-[10px] text-muted-foreground">
{locationData.detection_count} {isPothole ? "pothole" : "signboard"}{locationData.detection_count !== 1 ? "s" : ""} detected
</div>
</div>
))}
<CardContent className="flex-1 p-0 overflow-hidden">
<ScrollArea className="h-[300px] p-6 pt-3">
<div className="space-y-3">
{/* Project Info */}
<div className="pb-3 border-b mb-3">
<div className="flex flex-col mb-3">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-0.5">Project</span>
<span className="text-base font-bold text-gray-900 dark:text-white">
{summaryData.project.name}
</span>
</div>
{summaryData.project.corridor_name && (
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-0.5">Corridor</span>
<span className="text-sm font-bold text-gray-700 dark:text-gray-300">
{summaryData.project.corridor_name}
</span>
</div>
)}
</div>
))}
</div>
{/* Packages and Locations */}
{Object.entries(summaryData.packages).map(([packageName, packageData]) => (
<div key={packageData.package_id} className="space-y-2">
<div className="text-xs font-medium">{packageName}</div>
<div className="pl-3 space-y-2">
{Object.entries(packageData.locations).map(([locationName, locationData]) => (
<div key={locationData.location_id} className="text-xs p-2 rounded bg-muted/30 flex items-center justify-between gap-4">
<div className="font-medium truncate">{locationName}</div>
<div className="text-[10px] text-muted-foreground whitespace-nowrap">
{locationData.detection_count} {isPothole ? "pothole" : "signboard"}{locationData.detection_count !== 1 ? "s" : ""} detected
</div>
</div>
))}
</div>
</div>
))}
</div>
</ScrollArea>
</CardContent>
</Card>
{/* All Detections List */}
<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">
<CardHeader className="pb-3 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 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">
<Target className="h-4 w-4 text-white" />
<Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden flex flex-col lg:col-span-3">
<CardHeader className="pb-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
<div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group">
<div className="absolute inset-0 bg-white/10 animate-logo-spin-slow opacity-40"></div>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white relative z-10 animate-logo-float">
<path d="M3 17L9 11L13 15L21 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15 7H21V13" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</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">
All Detections
</span>
<CardTitle className="text-base font-bold text-gray-900 dark:text-white">
All Detections
</CardTitle>
<CardDescription className="text-xs">
Complete list of {isPothole ? "potholes" : "signboards"} with GPS coordinates
@@ -275,8 +290,8 @@ function DetailedSummarySection({
</div>
</div>
</CardHeader>
<CardContent>
<ScrollArea className="h-[300px] rounded-md border bg-muted/30 p-3">
<CardContent className="flex-1 p-0 overflow-hidden">
<ScrollArea className="h-[300px] p-4">
<div className="space-y-2">
{allDetections.map(({ detection, locationName, packageName }, idx) => (
<div
@@ -368,17 +383,19 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
]
return (
<Card className="animate-in fade-in slide-in-from-bottom duration-500 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">
<CardHeader className="pb-3 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30">
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/30">
<Activity className="h-4 w-4 text-white" />
<Card className="animate-in fade-in slide-in-from-bottom duration-500 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden">
<CardHeader className="pb-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
<div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group">
<div className="absolute inset-0 bg-white/10 animate-logo-spin-slow opacity-40"></div>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white relative z-10 animate-logo-float">
<path d="M3 17L9 11L13 15L21 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15 7H21V13" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div>
<CardTitle className="text-base font-bold">
<span className="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 bg-clip-text text-transparent">
Quick Stats
</span>
<CardTitle className="text-base font-bold text-gray-900 dark:text-white">
Quick Stats
</CardTitle>
<CardDescription className="text-xs">
Overview of {isPothole ? "pothole" : "signboard"} detection results
@@ -396,8 +413,8 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
className="flex flex-col items-center justify-center p-3 rounded-xl transition-all hover:scale-105 animate-in fade-in slide-in-from-bottom duration-500 border border-gray-100 dark:border-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 shadow-sm hover:shadow-md"
style={{ animationDelay: `${index * 100}ms` }}
>
<div className={`${stat.bgColor} p-2 rounded-lg mb-2 transition-all shadow-inner`}>
<Icon className={`h-4 w-4 ${stat.color}`} />
<div className={`${stat.bgColor} p-2.5 rounded-lg mb-2 transition-all shadow-inner`}>
<Icon className={`h-5 w-5 ${stat.color}`} />
</div>
<div className={`text-xl font-bold ${stat.color} mb-1`}>{stat.value}</div>
<div className="text-[10px] text-muted-foreground text-center leading-tight font-medium uppercase tracking-wide">{stat.label}</div>
@@ -826,17 +843,15 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
return (
<div className="space-y-6">
<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">
<CardHeader className="bg-gradient-to-r from-gray-50 to-slate-100 dark:from-gray-900/50 dark:to-slate-900/50 border-b border-gray-100 dark:border-gray-800">
<Card className="bg-white dark:bg-gray-950 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden">
<CardHeader className="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
<div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-gradient-to-br from-gray-900 to-slate-700 dark:from-white dark:to-gray-300 shadow-lg shadow-gray-500/20">
<Film className="h-5 w-5 text-white dark:text-gray-900" />
<div className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-lg shadow-[#60a5fa]/20">
<Film className="h-5 w-5 text-white" />
</div>
<div>
<CardTitle className="text-lg font-bold">
<span className="bg-gradient-to-r from-gray-900 via-slate-700 to-gray-900 dark:from-white dark:via-gray-300 dark:to-white bg-clip-text text-transparent">
Video Playback with Detection
</span>
<CardTitle className="text-lg font-bold text-gray-900 dark:text-white">
Video Playback with Detection
</CardTitle>
<CardDescription>
Watch the video with real-time {isPothole ? "pothole" : "signboard"} detection overlays