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

96
app/create-location/page.tsx
View File

@@ -192,20 +192,46 @@ export default function CreateLocationPage() {
header: "Package",
render: (location: Location) => getPackageName(location.package_id)
},
{
key: "project",
header: "Project",
render: (location: Location) => {
const pkg = allPackages.find(p => p.id === location.package_id)
const project = projects.find(p => p.id === pkg?.project_id)
return project?.name || "—"
}
},
{
key: "chainage",
header: "Chainage (km)",
render: (location: Location) => {
if (location.chainage_start_km && location.chainage_end_km) {
return `${location.chainage_start_km} - ${location.chainage_end_km}`
if (location.chainage_start_km !== null && location.chainage_end_km !== null) {
return (
<span className="px-2 py-0.5 rounded-full bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-[10px] font-semibold border border-amber-100 dark:border-amber-800 whitespace-nowrap">
{location.chainage_start_km} - {location.chainage_end_km}
</span>
)
}
return "—"
}
},
{
key: "created_at",
header: "Created",
render: (location: Location) => new Date(location.created_at).toLocaleDateString()
key: "start_gps",
header: "Start GPS",
render: (location: Location) => (
<span className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[10px] font-mono border border-blue-100 dark:border-blue-800 whitespace-nowrap">
{location.start_lat.toFixed(4)}, {location.start_lng.toFixed(4)}
</span>
)
},
{
key: "end_gps",
header: "End GPS",
render: (location: Location) => (
<span className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[10px] font-mono border border-blue-100 dark:border-blue-800 whitespace-nowrap">
{location.end_lat.toFixed(4)}, {location.end_lng.toFixed(4)}
</span>
)
},
]
@@ -213,16 +239,16 @@ export default function CreateLocationPage() {
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<SidebarNavigation />
<main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-4 py-8 max-w-6xl relative z-10">
{/* Header */}
<div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
{/* Refined Header */}
<div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
<div className="flex items-center gap-6">
<div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-white shadow-xl border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110 flex items-center justify-center">
<MapPin className="h-8 w-8 text-[#2563eb]" />
<div className="flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<MapPin className="h-8 w-8 text-white" />
</div>
<div className="flex flex-col">
<h1 className="text-3xl md:text-4xl font-extrabold text-[#2563eb] tracking-tight">
Locations
<h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
Location Management
</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
Manage road segment locations
@@ -267,7 +293,7 @@ export default function CreateLocationPage() {
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<MapPin className="h-5 w-5 text-amber-500" />
<MapPin className="h-5 w-5 text-blue-500" />
Create New Location
</DialogTitle>
<DialogDescription>
@@ -277,9 +303,9 @@ export default function CreateLocationPage() {
{/* Success Message in Modal */}
{success && (
<div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/30 border border-amber-200 dark:border-amber-800 animate-in fade-in slide-in-from-top duration-300">
<CheckCircle2 className="h-5 w-5 text-amber-500 flex-shrink-0" />
<p className="text-sm font-medium text-amber-700 dark:text-amber-400">Location created successfully!</p>
<div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800 animate-in fade-in slide-in-from-top duration-300">
<CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
<p className="text-sm font-medium text-blue-700 dark:text-blue-400">Location created successfully!</p>
</div>
)}
@@ -295,18 +321,18 @@ export default function CreateLocationPage() {
<form onSubmit={handleSubmit} className="space-y-6">
{/* Step 1: Select Project */}
<div className="p-4 rounded-xl bg-gradient-to-r from-amber-50/50 to-orange-50/50 dark:from-amber-950/20 dark:to-orange-950/20 border border-amber-100 dark:border-amber-900/50">
<div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
<div className="flex items-center gap-2 mb-3">
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center">
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
<span className="text-white text-xs font-bold">1</span>
</div>
<p className="text-sm font-bold text-amber-700 dark:text-amber-400">Select Project</p>
<p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
</div>
<Select value={selectedProjectId} onValueChange={setSelectedProjectId}>
<SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-amber-200 dark:border-amber-800 focus:border-amber-400">
<SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-800 focus:border-blue-400">
{loadingProjects ? (
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-amber-500" />
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<span className="text-gray-400">Loading projects...</span>
</div>
) : (
@@ -323,25 +349,25 @@ export default function CreateLocationPage() {
</SelectContent>
</Select>
{selectedProject && (
<div className="mt-2 px-3 py-1.5 rounded-lg bg-amber-100/50 dark:bg-amber-900/20 text-xs text-amber-600 dark:text-amber-400">
<div className="mt-2 px-3 py-1.5 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 text-xs text-blue-600 dark:text-blue-400">
Selected: <span className="font-semibold">{selectedProject.name}</span>
</div>
)}
</div>
{/* Step 2: Select Package */}
<div className={`p-4 rounded-xl bg-gradient-to-r from-orange-50/50 to-rose-50/50 dark:from-orange-950/20 dark:to-rose-950/20 border border-orange-100 dark:border-orange-900/50 transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
<div className={`p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50 transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
<div className="flex items-center gap-2 mb-3">
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-orange-500 to-rose-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<span className="text-white text-xs font-bold">2</span>
</div>
<p className="text-sm font-bold text-orange-700 dark:text-orange-400">Select Package</p>
<p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Package</p>
</div>
<Select value={selectedPackageId} onValueChange={setSelectedPackageId} disabled={!selectedProjectId}>
<SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-orange-200 dark:border-orange-800 focus:border-orange-400">
<SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-800 focus:border-blue-400">
{loadingPackages ? (
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-orange-500" />
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<span className="text-gray-400">Loading packages...</span>
</div>
) : (
@@ -358,7 +384,7 @@ export default function CreateLocationPage() {
</SelectContent>
</Select>
{selectedPackage && (
<div className="mt-2 px-3 py-1.5 rounded-lg bg-orange-100/50 dark:bg-orange-900/20 text-xs text-orange-600 dark:text-orange-400">
<div className="mt-2 px-3 py-1.5 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 text-xs text-blue-600 dark:text-blue-400">
Selected: <span className="font-semibold">{selectedPackage.name}</span>
{selectedPackage.region && ` • ${selectedPackage.region}`}
</div>
@@ -368,7 +394,7 @@ export default function CreateLocationPage() {
{/* Step 3: Location Details */}
<div className={`space-y-5 transition-opacity duration-300 ${selectedPackageId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
<div className="flex items-center gap-2">
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedPackageId ? 'bg-gradient-to-br from-rose-500 to-red-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedPackageId ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<span className="text-white text-xs font-bold">3</span>
</div>
<p className="text-sm font-bold text-gray-700 dark:text-gray-300">Location Information</p>
@@ -428,7 +454,7 @@ export default function CreateLocationPage() {
{/* GPS Coordinates */}
<div className="space-y-4">
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 shadow-md shadow-amber-500/20">
<div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/20">
<MapPin className="h-4 w-4 text-white" />
</div>
<h3 className="text-sm font-bold text-gray-700 dark:text-gray-300">GPS Coordinates</h3>
@@ -436,8 +462,8 @@ export default function CreateLocationPage() {
</div>
{/* Start Point */}
<div className="p-4 rounded-xl bg-gradient-to-r from-amber-50/50 to-yellow-50/50 dark:from-amber-950/20 dark:to-yellow-950/20 border border-amber-100 dark:border-amber-900/50">
<p className="text-xs font-semibold text-amber-600 dark:text-amber-400 mb-3 uppercase tracking-wide">Start Point</p>
<div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
<p className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-3 uppercase tracking-wide">Start Point</p>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5">
<Label htmlFor="s-lat" className="text-xs text-gray-500">Latitude *</Label>
@@ -469,8 +495,8 @@ export default function CreateLocationPage() {
</div>
{/* End Point */}
<div className="p-4 rounded-xl bg-gradient-to-r from-orange-50/50 to-red-50/50 dark:from-orange-950/20 dark:to-red-950/20 border border-orange-100 dark:border-orange-900/50">
<p className="text-xs font-semibold text-orange-600 dark:text-orange-400 mb-3 uppercase tracking-wide">End Point</p>
<div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
<p className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-3 uppercase tracking-wide">End Point</p>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5">
<Label htmlFor="e-lat" className="text-xs text-gray-500">Latitude *</Label>
@@ -520,7 +546,7 @@ export default function CreateLocationPage() {
<Button
type="submit"
disabled={isSubmitting || !isFormComplete}
className="flex-1 bg-gradient-to-r from-amber-500 via-orange-500 to-red-600 hover:from-amber-600 hover:via-orange-600 hover:to-red-700 text-white"
className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-600 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-700 text-white"
>
{isSubmitting ? (
<span className="flex items-center gap-2">

63
app/create-package/page.tsx
View File

@@ -131,13 +131,28 @@ export default function CreatePackagePage() {
render: (pkg: PackageType) => getProjectName(pkg.project_id)
},
{
key: "region",
header: "Region",
key: "project_state",
header: "Project State",
render: (pkg: PackageType) => {
const project = projects.find(p => p.id === pkg.project_id)
if (!project?.state) return <span className="text-gray-400">—</span>
return (
<div className="flex flex-wrap gap-1">
{project.state.split(',').map((item, idx) => (
<span
key={idx}
className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[10px] font-semibold border border-blue-100 dark:border-blue-800 shadow-sm"
>
{item.trim()}
</span>
))}
</div>
)
}
},
{
key: "created_at",
header: "Created",
render: (pkg: PackageType) => new Date(pkg.created_at).toLocaleDateString()
key: "region",
header: "Region",
},
]
@@ -145,16 +160,16 @@ export default function CreatePackagePage() {
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<SidebarNavigation />
<main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-4 py-8 max-w-6xl relative z-10">
{/* Header */}
<div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
{/* Refined Header */}
<div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
<div className="flex items-center gap-6">
<div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-white shadow-xl border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110 flex items-center justify-center">
<Package className="h-8 w-8 text-[#2563eb]" />
<div className="flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<Package className="h-8 w-8 text-white" />
</div>
<div className="flex flex-col">
<h1 className="text-3xl md:text-4xl font-extrabold text-[#2563eb] tracking-tight">
Packages
<h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
Package Management
</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
Manage project packages
@@ -199,7 +214,7 @@ export default function CreatePackagePage() {
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Package className="h-5 w-5 text-violet-500" />
<Package className="h-5 w-5 text-blue-500" />
Create New Package
</DialogTitle>
<DialogDescription>
@@ -209,9 +224,9 @@ export default function CreatePackagePage() {
{/* Success Message in Modal */}
{success && (
<div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950/30 dark:to-purple-950/30 border border-violet-200 dark:border-violet-800 animate-in fade-in slide-in-from-top duration-300">
<CheckCircle2 className="h-5 w-5 text-violet-500 flex-shrink-0" />
<p className="text-sm font-medium text-violet-700 dark:text-violet-400">Package created successfully!</p>
<div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800 animate-in fade-in slide-in-from-top duration-300">
<CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
<p className="text-sm font-medium text-blue-700 dark:text-blue-400">Package created successfully!</p>
</div>
)}
@@ -227,18 +242,18 @@ export default function CreatePackagePage() {
<form onSubmit={handleSubmit} className="space-y-6">
{/* Step 1: Select Project */}
<div className="p-4 rounded-xl bg-gradient-to-r from-violet-50/50 to-purple-50/50 dark:from-violet-950/20 dark:to-purple-950/20 border border-violet-100 dark:border-violet-900/50">
<div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
<div className="flex items-center gap-2 mb-3">
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
<span className="text-white text-xs font-bold">1</span>
</div>
<p className="text-sm font-bold text-violet-700 dark:text-violet-400">Select Project</p>
<p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
</div>
<Select value={selectedProjectId} onValueChange={setSelectedProjectId}>
<SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-violet-200 dark:border-violet-800 focus:border-violet-400">
<SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-800 focus:border-blue-400">
{loadingProjects ? (
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-violet-500" />
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<span className="text-gray-400">Loading projects...</span>
</div>
) : (
@@ -255,7 +270,7 @@ export default function CreatePackagePage() {
</SelectContent>
</Select>
{selectedProject && (
<div className="mt-2 px-3 py-1.5 rounded-lg bg-violet-100/50 dark:bg-violet-900/20 text-xs text-violet-600 dark:text-violet-400">
<div className="mt-2 px-3 py-1.5 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 text-xs text-blue-600 dark:text-blue-400">
Selected: <span className="font-semibold">{selectedProject.name}</span>
{selectedProject.corridor_name && ` • ${selectedProject.corridor_name}`}
</div>
@@ -265,7 +280,7 @@ export default function CreatePackagePage() {
{/* Step 2: Package Info */}
<div className={`space-y-4 transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
<div className="flex items-center gap-2">
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-violet-500 to-purple-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<span className="text-white text-xs font-bold">2</span>
</div>
<p className="text-sm font-bold text-gray-700 dark:text-gray-300">Package Information</p>
@@ -317,7 +332,7 @@ export default function CreatePackagePage() {
<Button
type="submit"
disabled={isSubmitting || !name.trim() || !selectedProjectId}
className="flex-1 bg-gradient-to-r from-violet-500 via-purple-500 to-fuchsia-600 hover:from-violet-600 hover:via-purple-600 hover:to-fuchsia-700 text-white"
className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-600 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-700 text-white"
>
{isSubmitting ? (
<span className="flex items-center gap-2">

19
app/create-project/page.tsx
View File

@@ -127,27 +127,22 @@ export default function CreateProjectPage() {
key: "corridor_name",
header: "Corridor",
},
{
key: "created_at",
header: "Created",
render: (project: Project) => new Date(project.created_at).toLocaleDateString()
},
]
return (
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<SidebarNavigation />
<main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-4 py-8 max-w-6xl relative z-10">
{/* Header */}
<div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
{/* Refined Header */}
<div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
<div className="flex items-center gap-6">
<div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-white shadow-xl border-2 border-blue-800 transition-transform duration-300 hover:scale-110 flex items-center justify-center">
<FolderPlus className="h-8 w-8 text-blue-600" />
<div className="flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<FolderPlus className="h-8 w-8 text-white" />
</div>
<div className="flex flex-col">
<h1 className="text-3xl md:text-4xl font-extrabold text-blue-600 tracking-tight">
Projects
<h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
Project Management
</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
Manage road infrastructure projects

19
app/dashboard/page.tsx
View File

@@ -276,11 +276,20 @@ export default function DashboardPage() {
{/* Main Content - offset by sidebar width */}
<main className="ml-16 min-h-screen">
<div className="p-6 max-w-[1600px] mx-auto">
<div className="p-4 px-8 max-w-full mx-auto">
{/* Header */}
<div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
<div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-500">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group">
{/* Constant orbit animations */}
<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-2xl 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-8 w-8 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>
<h1 className="text-2xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
<h1 className="text-3xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
VisionRoad Analytics Dashboard
</h1>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
@@ -304,7 +313,7 @@ export default function DashboardPage() {
subtitle="All detected objects"
value={stats.totalDetections}
icon={TrendingUp}
gradient="green"
gradient="purple"
isLoading={isLoading}
/>
<GradientStatsCard
@@ -312,7 +321,7 @@ export default function DashboardPage() {
subtitle="Road surface damage"
value={stats.totalPotholes}
icon={AlertTriangle}
gradient="coral"
gradient="green"
isLoading={isLoading}
/>
<GradientStatsCard

21
app/globals.css
View File

@@ -9,7 +9,7 @@
--primary-foreground: oklch(0.98 0.01 264);
/* Background & Surfaces */
--background: hsla(210, 100%, 98%, 1);
--background: #f8fafc;
--foreground: oklch(0.15 0.02 280);
--card: oklch(1 0 0);
--card-foreground: oklch(0.15 0.02 280);
@@ -51,14 +51,14 @@
--radius: 0.75rem;
/* Sidebar */
--sidebar: oklch(0.98 0.01 280);
--sidebar-foreground: oklch(0.15 0.02 280);
--sidebar-primary: oklch(0.55 0.24 264);
--sidebar-primary-foreground: oklch(0.98 0.01 264);
--sidebar-accent: oklch(0.94 0.03 264);
--sidebar-accent-foreground: oklch(0.25 0.05 264);
--sidebar-border: oklch(0.90 0.02 280);
--sidebar-ring: oklch(0.55 0.24 264);
--sidebar: #ffffff;
--sidebar-foreground: #64748b;
--sidebar-primary: #2563eb;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #f1f5f9;
--sidebar-accent-foreground: #0f172a;
--sidebar-border: #e2e8f0;
--sidebar-ring: #3b82f6;
}
.dark {
@@ -167,8 +167,7 @@
/* Premium Background with Animated Mesh Gradient */
@layer utilities {
.bg-mesh-gradient {
background: hsla(210, 100%, 98%, 1);
background: linear-gradient(135deg, hsla(210, 100%, 98%, 1) 0%, hsla(220, 100%, 95%, 1) 100%);
background: #f8fafc;
}
.dark .bg-mesh-gradient {

14
app/new-analysis/page.tsx
View File

@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation"
import { ProjectSelectionSection } from "@/components/project-selection-section"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import { type SessionContext, saveSession } from "@/lib/api"
import { TrendingUp } from "lucide-react"
export default function NewAnalysisPage() {
const router = useRouter()
@@ -22,11 +23,14 @@ export default function NewAnalysisPage() {
{/* Main Content */}
<main className="ml-16 min-h-screen relative overflow-hidden">
<div className="container mx-auto px-4 py-12 max-w-5xl relative z-10">
{/* Premium Header */}
<div className="mb-10 animate-in fade-in slide-in-from-top duration-700">
<div className="text-center max-w-2xl mx-auto">
<h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent leading-tight">
<div className="container mx-auto px-6 py-10 max-w-7xl relative z-10">
{/* Refined Left-Aligned Header */}
<div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
<div>
<h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent leading-tight">
VisionRoad Detection System
</h1>
</div>

70
app/results/page.tsx
View File

@@ -3,7 +3,7 @@
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Loader2, ArrowLeft, MapPin, Package, FolderKanban, RotateCcw } from "lucide-react"
import { Loader2, ArrowLeft, MapPin, Package, FolderKanban, RotateCcw, TrendingUp } from "lucide-react"
import VideoPlayerSection from "@/components/video-player-section"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import {
@@ -185,54 +185,46 @@ export default function ResultsPage() {
{/* Main Content */}
<main className="ml-16 min-h-screen">
<div className="container mx-auto px-4 py-8 max-w-7xl">
{/* Header */}
<div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
<h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
{getTitle()}
</h1>
<p className="text-gray-500 dark:text-gray-400">
View your AI-powered road analysis results
</p>
<div className="container mx-auto px-6 py-8 max-w-full">
{/* Refined Header */}
<div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
<div>
<h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent leading-tight">
{getTitle()}
</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium">
View your AI-powered road analysis results
</p>
</div>
</div>
{/* Session Info Bar */}
{session && (
<div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
<div className="flex items-center justify-between p-4 rounded-xl bg-card border border-[var(--border)] shadow-sm">
<div className="flex items-center gap-6 text-sm">
<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">
<FolderKanban className="h-4 w-4 text-white" />
</div>
<span className="text-gray-500 dark:text-gray-400 text-xs uppercase font-semibold tracking-wide">Project:</span>
<span className="font-bold text-gray-900 dark:text-white bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 bg-clip-text text-transparent">{session.projectName}</span>
<div className="flex items-center gap-12">
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>
<span className="text-base font-bold text-gray-900 dark:text-white leading-tight">
{session.projectName}
</span>
</div>
<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">
<Package className="h-4 w-4 text-white" />
</div>
<span className="text-gray-500 dark:text-gray-400 text-xs uppercase font-semibold tracking-wide">Package:</span>
<span className="font-bold text-gray-900 dark:text-white bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">{session.packageName}</span>
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Package</span>
<span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
{session.packageName}
</span>
</div>
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-gradient-to-br from-purple-400 to-pink-500 shadow-md shadow-purple-500/30">
<MapPin className="h-4 w-4 text-white" />
</div>
<span className="text-gray-500 dark:text-gray-400 text-xs uppercase font-semibold tracking-wide">Location:</span>
<span className="font-bold text-gray-900 dark:text-white bg-gradient-to-r from-purple-600 to-pink-600 dark:from-purple-400 dark:to-pink-400 bg-clip-text text-transparent">{session.locationName}</span>
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Location</span>
<span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
{session.locationName}
</span>
</div>
</div>
<div className="flex gap-2">
<Button variant="ghost" size="sm" onClick={handleBackToUpload} className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
<ArrowLeft className="h-4 w-4 mr-2" />
Back to Upload
</Button>
<Button variant="outline" size="sm" onClick={handleNewAnalysis} className="border-indigo-200 dark:border-indigo-800 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/50">
<RotateCcw className="h-4 w-4 mr-2" />
New Analysis
</Button>
</div>
</div>
</div>
)}

59
app/upload/page.tsx
View File

@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Loader2 } from "lucide-react"
import { Loader2, TrendingUp } from "lucide-react"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import {
type SessionContext,
@@ -174,10 +174,13 @@ export default function UploadPage() {
{/* Main Content */}
<main className="ml-16 min-h-screen relative overflow-hidden flex flex-col">
<div className="flex-1 container mx-auto px-4 py-6 max-w-6xl relative z-10 flex flex-col">
{/* Compact Header */}
<div className="mb-4 animate-in fade-in slide-in-from-top duration-700">
<div className="text-center">
<div className="flex-1 container mx-auto px-6 py-6 max-w-7xl relative z-10 flex flex-col">
{/* Refined Header */}
<div className="mb-6 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
<div>
<h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent leading-tight">
{getTitle()}
</h1>
@@ -189,20 +192,24 @@ export default function UploadPage() {
<div className="mb-4 animate-in fade-in slide-in-from-top duration-500 delay-100">
<div className="rounded-xl px-4 py-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-6 text-sm">
<div>
<p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Project</p>
<p className="font-medium text-gray-900 dark:text-white text-sm">{session.projectName}</p>
<div className="flex items-center gap-12">
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>
<span className="text-base font-bold text-gray-900 dark:text-white leading-tight">
{session.projectName}
</span>
</div>
<div className="w-px h-8 bg-gray-300 dark:bg-gray-600" />
<div>
<p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Package</p>
<p className="font-medium text-gray-900 dark:text-white text-sm">{session.packageName}</p>
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Package</span>
<span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
{session.packageName}
</span>
</div>
<div className="w-px h-8 bg-gray-300 dark:bg-gray-600" />
<div>
<p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Location</p>
<p className="font-medium text-gray-900 dark:text-white text-sm">{session.locationName}</p>
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Location</span>
<span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
{session.locationName}
</span>
</div>
</div>
<Button
@@ -220,7 +227,7 @@ export default function UploadPage() {
{/* Upload Card */}
<Card className="rounded-xl overflow-hidden animate-in fade-in slide-in-from-bottom duration-700 delay-150 flex-1">
<CardHeader className="pb-4 border-b border-gray-100 dark:border-gray-700 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30">
<CardHeader className="pb-4 border-b border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-900">
<CardTitle className="text-xl 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">
Upload Video
@@ -248,14 +255,6 @@ export default function UploadPage() {
disabled={uploading}
className="h-10 bg-gray-50 dark:bg-gray-800 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-indigo-100 dark:file:bg-indigo-900/50 file:text-indigo-600 dark:file:text-indigo-400 file:font-medium file:text-xs hover:file:bg-indigo-200"
/>
{file && (
<div className="p-2 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800">
<p className="text-xs font-medium text-gray-900 dark:text-white">{file.name}</p>
<p className="text-[10px] text-gray-500">
{(file.size / 1024 / 1024).toFixed(2)} MB
</p>
</div>
)}
</div>
{/* JSON File Input */}
@@ -274,14 +273,6 @@ export default function UploadPage() {
disabled={uploading}
className="h-10 bg-gray-50 dark:bg-gray-800 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-indigo-100 dark:file:bg-indigo-900/50 file:text-indigo-600 dark:file:text-indigo-400 file:font-medium file:text-xs hover:file:bg-indigo-200"
/>
{jsonFile && (
<div className="p-2 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800">
<p className="text-xs font-medium text-gray-900 dark:text-white">{jsonFile.name}</p>
<p className="text-[10px] text-gray-500">
{(jsonFile.size / 1024).toFixed(2)} KB
</p>
</div>
)}
</div>
{/* Detection Type */}

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

6
package-lock.json generated
View File

@@ -3283,9 +3283,9 @@
}
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"version": "4.17.23",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
"license": "MIT"
},
"node_modules/loose-envify": {

73
styles/globals.css
View File

@@ -4,7 +4,7 @@
@custom-variant dark (&:is(.dark *));
:root {
--background: oklch(1 0 0);
--background: #f8fafc;
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
@@ -29,14 +29,14 @@
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--sidebar: #ffffff;
--sidebar-foreground: #64748b;
--sidebar-primary: #2563eb;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #f1f5f9;
--sidebar-accent-foreground: #0f172a;
--sidebar-border: #e2e8f0;
--sidebar-ring: #3b82f6;
}
.dark {
@@ -115,11 +115,64 @@
--color-sidebar-ring: var(--sidebar-ring);
}
@layer utilities {
@keyframes logo-float {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-3px) scale(1.02);
}
}
@keyframes logo-spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes logo-spin-reverse-slow {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
.animate-logo-float {
animation: logo-float 3s ease-in-out infinite;
}
.animate-logo-spin-slow {
animation: logo-spin-slow 12s linear infinite;
}
.animate-logo-spin-reverse-slow {
animation: logo-spin-reverse-slow 8s linear infinite;
}
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
button:not([role="tab"]),
[role="button"] {
border-radius: 9999px !important;
}
}