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", header: "Package",
render: (location: Location) => getPackageName(location.package_id) 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", key: "chainage",
header: "Chainage (km)", header: "Chainage (km)",
render: (location: Location) => { render: (location: Location) => {
if (location.chainage_start_km && location.chainage_end_km) { if (location.chainage_start_km !== null && location.chainage_end_km !== null) {
return `${location.chainage_start_km} - ${location.chainage_end_km}` 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 "—" return "—"
} }
}, },
{ {
key: "created_at", key: "start_gps",
header: "Created", header: "Start GPS",
render: (location: Location) => new Date(location.created_at).toLocaleDateString() 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"> <div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<SidebarNavigation /> <SidebarNavigation />
<main className="ml-16 min-h-screen relative overflow-hidden"> <main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-4 py-8 max-w-6xl relative z-10"> <div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
{/* Header */} {/* Refined Header */}
<div className="mb-8 animate-in fade-in slide-in-from-left duration-700"> <div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
<div className="flex items-center gap-6"> <div className="flex items-center gap-5">
<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"> <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-[#2563eb]" /> <MapPin className="h-8 w-8 text-white" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<h1 className="text-3xl md:text-4xl font-extrabold text-[#2563eb] tracking-tight"> <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">
Locations Location Management
</h1> </h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic"> <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
Manage road segment locations Manage road segment locations
@@ -267,7 +293,7 @@ export default function CreateLocationPage() {
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto"> <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <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 Create New Location
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
@@ -277,9 +303,9 @@ export default function CreateLocationPage() {
{/* Success Message in Modal */} {/* Success Message in Modal */}
{success && ( {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"> <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-amber-500 flex-shrink-0" /> <CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
<p className="text-sm font-medium text-amber-700 dark:text-amber-400">Location created successfully!</p> <p className="text-sm font-medium text-blue-700 dark:text-blue-400">Location created successfully!</p>
</div> </div>
)} )}
@@ -295,18 +321,18 @@ export default function CreateLocationPage() {
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
{/* Step 1: Select Project */} {/* 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="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> <span className="text-white text-xs font-bold">1</span>
</div> </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> </div>
<Select value={selectedProjectId} onValueChange={setSelectedProjectId}> <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 ? ( {loadingProjects ? (
<div className="flex items-center gap-2"> <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> <span className="text-gray-400">Loading projects...</span>
</div> </div>
) : ( ) : (
@@ -323,25 +349,25 @@ export default function CreateLocationPage() {
</SelectContent> </SelectContent>
</Select> </Select>
{selectedProject && ( {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> Selected: <span className="font-semibold">{selectedProject.name}</span>
</div> </div>
)} )}
</div> </div>
{/* Step 2: Select Package */} {/* 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="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> <span className="text-white text-xs font-bold">2</span>
</div> </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> </div>
<Select value={selectedPackageId} onValueChange={setSelectedPackageId} disabled={!selectedProjectId}> <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 ? ( {loadingPackages ? (
<div className="flex items-center gap-2"> <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> <span className="text-gray-400">Loading packages...</span>
</div> </div>
) : ( ) : (
@@ -358,7 +384,7 @@ export default function CreateLocationPage() {
</SelectContent> </SelectContent>
</Select> </Select>
{selectedPackage && ( {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> Selected: <span className="font-semibold">{selectedPackage.name}</span>
{selectedPackage.region && ` • ${selectedPackage.region}`} {selectedPackage.region && ` • ${selectedPackage.region}`}
</div> </div>
@@ -368,7 +394,7 @@ export default function CreateLocationPage() {
{/* Step 3: Location Details */} {/* Step 3: Location Details */}
<div className={`space-y-5 transition-opacity duration-300 ${selectedPackageId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}> <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="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> <span className="text-white text-xs font-bold">3</span>
</div> </div>
<p className="text-sm font-bold text-gray-700 dark:text-gray-300">Location Information</p> <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 */} {/* GPS Coordinates */}
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center gap-2"> <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" /> <MapPin className="h-4 w-4 text-white" />
</div> </div>
<h3 className="text-sm font-bold text-gray-700 dark:text-gray-300">GPS Coordinates</h3> <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> </div>
{/* Start Point */} {/* 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"> <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-amber-600 dark:text-amber-400 mb-3 uppercase tracking-wide">Start Point</p> <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="grid grid-cols-2 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label htmlFor="s-lat" className="text-xs text-gray-500">Latitude *</Label> <Label htmlFor="s-lat" className="text-xs text-gray-500">Latitude *</Label>
@@ -469,8 +495,8 @@ export default function CreateLocationPage() {
</div> </div>
{/* End Point */} {/* 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"> <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-orange-600 dark:text-orange-400 mb-3 uppercase tracking-wide">End Point</p> <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="grid grid-cols-2 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label htmlFor="e-lat" className="text-xs text-gray-500">Latitude *</Label> <Label htmlFor="e-lat" className="text-xs text-gray-500">Latitude *</Label>
@@ -520,7 +546,7 @@ export default function CreateLocationPage() {
<Button <Button
type="submit" type="submit"
disabled={isSubmitting || !isFormComplete} 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 ? ( {isSubmitting ? (
<span className="flex items-center gap-2"> <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) render: (pkg: PackageType) => getProjectName(pkg.project_id)
}, },
{ {
key: "region", key: "project_state",
header: "Region", 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", key: "region",
header: "Created", header: "Region",
render: (pkg: PackageType) => new Date(pkg.created_at).toLocaleDateString()
}, },
] ]
@@ -145,16 +160,16 @@ export default function CreatePackagePage() {
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100"> <div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<SidebarNavigation /> <SidebarNavigation />
<main className="ml-16 min-h-screen relative overflow-hidden"> <main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-4 py-8 max-w-6xl relative z-10"> <div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
{/* Header */} {/* Refined Header */}
<div className="mb-8 animate-in fade-in slide-in-from-left duration-700"> <div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
<div className="flex items-center gap-6"> <div className="flex items-center gap-5">
<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"> <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-[#2563eb]" /> <Package className="h-8 w-8 text-white" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<h1 className="text-3xl md:text-4xl font-extrabold text-[#2563eb] tracking-tight"> <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">
Packages Package Management
</h1> </h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic"> <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
Manage project packages Manage project packages
@@ -199,7 +214,7 @@ export default function CreatePackagePage() {
<DialogContent className="max-w-2xl"> <DialogContent className="max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <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 Create New Package
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
@@ -209,9 +224,9 @@ export default function CreatePackagePage() {
{/* Success Message in Modal */} {/* Success Message in Modal */}
{success && ( {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"> <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-violet-500 flex-shrink-0" /> <CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
<p className="text-sm font-medium text-violet-700 dark:text-violet-400">Package created successfully!</p> <p className="text-sm font-medium text-blue-700 dark:text-blue-400">Package created successfully!</p>
</div> </div>
)} )}
@@ -227,18 +242,18 @@ export default function CreatePackagePage() {
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
{/* Step 1: Select Project */} {/* 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="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> <span className="text-white text-xs font-bold">1</span>
</div> </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> </div>
<Select value={selectedProjectId} onValueChange={setSelectedProjectId}> <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 ? ( {loadingProjects ? (
<div className="flex items-center gap-2"> <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> <span className="text-gray-400">Loading projects...</span>
</div> </div>
) : ( ) : (
@@ -255,7 +270,7 @@ export default function CreatePackagePage() {
</SelectContent> </SelectContent>
</Select> </Select>
{selectedProject && ( {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> Selected: <span className="font-semibold">{selectedProject.name}</span>
{selectedProject.corridor_name && ` • ${selectedProject.corridor_name}`} {selectedProject.corridor_name && ` • ${selectedProject.corridor_name}`}
</div> </div>
@@ -265,7 +280,7 @@ export default function CreatePackagePage() {
{/* Step 2: Package Info */} {/* Step 2: Package Info */}
<div className={`space-y-4 transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}> <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="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> <span className="text-white text-xs font-bold">2</span>
</div> </div>
<p className="text-sm font-bold text-gray-700 dark:text-gray-300">Package Information</p> <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 <Button
type="submit" type="submit"
disabled={isSubmitting || !name.trim() || !selectedProjectId} 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 ? ( {isSubmitting ? (
<span className="flex items-center gap-2"> <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", key: "corridor_name",
header: "Corridor", header: "Corridor",
}, },
{
key: "created_at",
header: "Created",
render: (project: Project) => new Date(project.created_at).toLocaleDateString()
},
] ]
return ( return (
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100"> <div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<SidebarNavigation /> <SidebarNavigation />
<main className="ml-16 min-h-screen relative overflow-hidden"> <main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-4 py-8 max-w-6xl relative z-10"> <div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
{/* Header */} {/* Refined Header */}
<div className="mb-8 animate-in fade-in slide-in-from-left duration-700"> <div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
<div className="flex items-center gap-6"> <div className="flex items-center gap-5">
<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"> <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-blue-600" /> <FolderPlus className="h-8 w-8 text-white" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<h1 className="text-3xl md:text-4xl font-extrabold text-blue-600 tracking-tight"> <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">
Projects Project Management
</h1> </h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic"> <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
Manage road infrastructure projects 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 Content - offset by sidebar width */}
<main className="ml-16 min-h-screen"> <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 */} {/* 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> <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 VisionRoad Analytics Dashboard
</h1> </h1>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1"> <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" subtitle="All detected objects"
value={stats.totalDetections} value={stats.totalDetections}
icon={TrendingUp} icon={TrendingUp}
gradient="green" gradient="purple"
isLoading={isLoading} isLoading={isLoading}
/> />
<GradientStatsCard <GradientStatsCard
@@ -312,7 +321,7 @@ export default function DashboardPage() {
subtitle="Road surface damage" subtitle="Road surface damage"
value={stats.totalPotholes} value={stats.totalPotholes}
icon={AlertTriangle} icon={AlertTriangle}
gradient="coral" gradient="green"
isLoading={isLoading} isLoading={isLoading}
/> />
<GradientStatsCard <GradientStatsCard

21
app/globals.css
View File

@@ -9,7 +9,7 @@
--primary-foreground: oklch(0.98 0.01 264); --primary-foreground: oklch(0.98 0.01 264);
/* Background & Surfaces */ /* Background & Surfaces */
--background: hsla(210, 100%, 98%, 1); --background: #f8fafc;
--foreground: oklch(0.15 0.02 280); --foreground: oklch(0.15 0.02 280);
--card: oklch(1 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.15 0.02 280); --card-foreground: oklch(0.15 0.02 280);
@@ -51,14 +51,14 @@
--radius: 0.75rem; --radius: 0.75rem;
/* Sidebar */ /* Sidebar */
--sidebar: oklch(0.98 0.01 280); --sidebar: #ffffff;
--sidebar-foreground: oklch(0.15 0.02 280); --sidebar-foreground: #64748b;
--sidebar-primary: oklch(0.55 0.24 264); --sidebar-primary: #2563eb;
--sidebar-primary-foreground: oklch(0.98 0.01 264); --sidebar-primary-foreground: #ffffff;
--sidebar-accent: oklch(0.94 0.03 264); --sidebar-accent: #f1f5f9;
--sidebar-accent-foreground: oklch(0.25 0.05 264); --sidebar-accent-foreground: #0f172a;
--sidebar-border: oklch(0.90 0.02 280); --sidebar-border: #e2e8f0;
--sidebar-ring: oklch(0.55 0.24 264); --sidebar-ring: #3b82f6;
} }
.dark { .dark {
@@ -167,8 +167,7 @@
/* Premium Background with Animated Mesh Gradient */ /* Premium Background with Animated Mesh Gradient */
@layer utilities { @layer utilities {
.bg-mesh-gradient { .bg-mesh-gradient {
background: hsla(210, 100%, 98%, 1); background: #f8fafc;
background: linear-gradient(135deg, hsla(210, 100%, 98%, 1) 0%, hsla(220, 100%, 95%, 1) 100%);
} }
.dark .bg-mesh-gradient { .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 { ProjectSelectionSection } from "@/components/project-selection-section"
import { SidebarNavigation } from "@/components/sidebar-navigation" import { SidebarNavigation } from "@/components/sidebar-navigation"
import { type SessionContext, saveSession } from "@/lib/api" import { type SessionContext, saveSession } from "@/lib/api"
import { TrendingUp } from "lucide-react"
export default function NewAnalysisPage() { export default function NewAnalysisPage() {
const router = useRouter() const router = useRouter()
@@ -22,11 +23,14 @@ export default function NewAnalysisPage() {
{/* Main Content */} {/* Main Content */}
<main className="ml-16 min-h-screen relative overflow-hidden"> <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"> <div className="container mx-auto px-6 py-10 max-w-7xl relative z-10">
{/* Premium Header */} {/* Refined Left-Aligned Header */}
<div className="mb-10 animate-in fade-in slide-in-from-top duration-700"> <div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
<div className="text-center max-w-2xl mx-auto"> <div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<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"> <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 VisionRoad Detection System
</h1> </h1>
</div> </div>

62
app/results/page.tsx
View File

@@ -3,7 +3,7 @@
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button" 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 VideoPlayerSection from "@/components/video-player-section"
import { SidebarNavigation } from "@/components/sidebar-navigation" import { SidebarNavigation } from "@/components/sidebar-navigation"
import { import {
@@ -185,53 +185,45 @@ export default function ResultsPage() {
{/* Main Content */} {/* Main Content */}
<main className="ml-16 min-h-screen"> <main className="ml-16 min-h-screen">
<div className="container mx-auto px-4 py-8 max-w-7xl"> <div className="container mx-auto px-6 py-8 max-w-full">
{/* Header */} {/* Refined Header */}
<div className="mb-8 animate-in fade-in slide-in-from-top duration-700"> <div className="mb-8 flex items-center gap-5 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"> <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()} {getTitle()}
</h1> </h1>
<p className="text-gray-500 dark:text-gray-400"> <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium">
View your AI-powered road analysis results View your AI-powered road analysis results
</p> </p>
</div> </div>
</div>
{/* Session Info Bar */} {/* Session Info Bar */}
{session && ( {session && (
<div className="mb-6 animate-in fade-in slide-in-from-top duration-500"> <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 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-12">
<div className="flex items-center gap-2"> <div className="flex flex-col">
<div className="p-1.5 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 shadow-md shadow-indigo-500/30"> <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>
<FolderKanban className="h-4 w-4 text-white" /> <span className="text-base font-bold text-gray-900 dark:text-white leading-tight">
{session.projectName}
</span>
</div> </div>
<span className="text-gray-500 dark:text-gray-400 text-xs uppercase font-semibold tracking-wide">Project:</span> <div className="flex flex-col">
<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> <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>
<div className="flex items-center gap-2"> <div className="flex flex-col">
<div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/30"> <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Location</span>
<Package className="h-4 w-4 text-white" /> <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
{session.locationName}
</span>
</div> </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>
<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>
</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> </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 { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" 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 { SidebarNavigation } from "@/components/sidebar-navigation"
import { import {
type SessionContext, type SessionContext,
@@ -174,10 +174,13 @@ export default function UploadPage() {
{/* Main Content */} {/* Main Content */}
<main className="ml-16 min-h-screen relative overflow-hidden flex flex-col"> <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"> <div className="flex-1 container mx-auto px-6 py-6 max-w-7xl relative z-10 flex flex-col">
{/* Compact Header */} {/* Refined Header */}
<div className="mb-4 animate-in fade-in slide-in-from-top duration-700"> <div className="mb-6 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
<div className="text-center"> <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"> <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()} {getTitle()}
</h1> </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="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="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 justify-between gap-4">
<div className="flex items-center gap-6 text-sm"> <div className="flex items-center gap-12">
<div> <div className="flex flex-col">
<p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Project</p> <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>
<p className="font-medium text-gray-900 dark:text-white text-sm">{session.projectName}</p> <span className="text-base font-bold text-gray-900 dark:text-white leading-tight">
{session.projectName}
</span>
</div> </div>
<div className="w-px h-8 bg-gray-300 dark:bg-gray-600" /> <div className="flex flex-col">
<div> <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Package</span>
<p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Package</p> <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
<p className="font-medium text-gray-900 dark:text-white text-sm">{session.packageName}</p> {session.packageName}
</span>
</div> </div>
<div className="w-px h-8 bg-gray-300 dark:bg-gray-600" /> <div className="flex flex-col">
<div> <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Location</span>
<p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Location</p> <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
<p className="font-medium text-gray-900 dark:text-white text-sm">{session.locationName}</p> {session.locationName}
</span>
</div> </div>
</div> </div>
<Button <Button
@@ -220,7 +227,7 @@ export default function UploadPage() {
{/* Upload Card */} {/* Upload Card */}
<Card className="rounded-xl overflow-hidden animate-in fade-in slide-in-from-bottom duration-700 delay-150 flex-1"> <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"> <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"> <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 Upload Video
@@ -248,14 +255,6 @@ export default function UploadPage() {
disabled={uploading} 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" 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> </div>
{/* JSON File Input */} {/* JSON File Input */}
@@ -274,14 +273,6 @@ export default function UploadPage() {
disabled={uploading} 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" 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> </div>
{/* Detection Type */} {/* Detection Type */}

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

@@ -28,16 +28,14 @@ export function CompactProjectSelector({
return ( 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"> <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 */} {/* Project Dropdown */}
<div className="flex items-center gap-2"> <div className="flex flex-col min-w-[120px]">
<div className="p-1.5 rounded-lg bg-indigo-100 dark:bg-indigo-900/50"> <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">Project</span>
<FolderOpen className="h-4 w-4 text-indigo-500" />
</div>
<Select <Select
value={selectedProjectId || ""} value={selectedProjectId || ""}
onValueChange={onProjectChange} onValueChange={onProjectChange}
disabled={isLoading || projects.length === 0} 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" /> <SelectValue placeholder="Select project" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -53,12 +51,10 @@ export function CompactProjectSelector({
{/* Corridor Badge */} {/* Corridor Badge */}
{selectedProject?.corridor_name && ( {selectedProject?.corridor_name && (
<> <>
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" /> <div className="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-2" />
<div className="flex items-center gap-2"> <div className="flex flex-col">
<div className="p-1.5 rounded-lg bg-emerald-100 dark:bg-emerald-900/50"> <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">Corridor</span>
<MapPin className="h-3.5 w-3.5 text-emerald-500" /> <span className="text-xs font-bold text-gray-600 dark:text-gray-400">
</div>
<span className="text-sm text-gray-600 dark:text-gray-300">
{selectedProject.corridor_name} {selectedProject.corridor_name}
</span> </span>
</div> </div>
@@ -68,12 +64,10 @@ export function CompactProjectSelector({
{/* State Badge */} {/* State Badge */}
{selectedProject?.state && ( {selectedProject?.state && (
<> <>
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" /> <div className="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-2" />
<div className="flex items-center gap-2"> <div className="flex flex-col">
<div className="p-1.5 rounded-lg bg-purple-100 dark:bg-purple-900/50"> <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">State</span>
<Building2 className="h-3.5 w-3.5 text-purple-500" /> <span className="text-xs font-bold text-gray-600 dark:text-gray-400">
</div>
<span className="text-sm text-gray-600 dark:text-gray-300">
{selectedProject.state} {selectedProject.state}
</span> </span>
</div> </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 // Get marker color based on detection type
const getMarkerColor = (type: string) => { const getMarkerColor = (type: string) => {
if (type.toLowerCase().includes("pothole")) { 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 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 */} {/* Compact Color Legend */}
<div className="flex items-center gap-4 text-xs"> <div className="flex items-center gap-4 text-xs">
<div className="flex items-center gap-1.5"> <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> <span className="text-gray-600 dark:text-gray-400 font-medium">Potholes ({potholeCount})</span>
</div> </div>
<div className="flex items-center gap-1.5"> <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 = { const COLORS = {
pothole: "#ef4444", pothole: "#10b981",
signboard: "#3b82f6" signboard: "#3b82f6"
} }

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

@@ -16,30 +16,26 @@ const gradientStyles = {
green: { green: {
background: "bg-card", background: "bg-card",
border: "border-l-4 border-l-[var(--border)]", border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]", iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-[#60a5fa]/20", iconShadow: "shadow-lg shadow-blue-500/20"
valueGradient: "text-gray-900 dark:text-white"
}, },
coral: { coral: {
background: "bg-card", background: "bg-card",
border: "border-l-4 border-l-[var(--border)]", border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]", iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-[#60a5fa]/20", iconShadow: "shadow-lg shadow-blue-500/20"
valueGradient: "text-gray-900 dark:text-white"
}, },
blue: { blue: {
background: "bg-card", background: "bg-card",
border: "border-l-4 border-l-[var(--border)]", border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]", iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-[#60a5fa]/20", iconShadow: "shadow-lg shadow-blue-500/20"
valueGradient: "text-gray-900 dark:text-white"
}, },
purple: { purple: {
background: "bg-card", background: "bg-card",
border: "border-l-4 border-l-[var(--border)]", border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]", iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-[#60a5fa]/20", iconShadow: "shadow-lg shadow-blue-500/20"
valueGradient: "text-gray-900 dark:text-white"
} }
} }
@@ -54,7 +50,7 @@ export function GradientStatsCard({
const styles = gradientStyles[gradient] const styles = gradientStyles[gradient]
return ( 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"> <CardContent className="p-0 flex items-center justify-between gap-6">
<div className="flex flex-col gap-1 min-w-0"> <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"> <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" /> <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} {value}
</p> </p>
{subtitle && ( {subtitle && (
@@ -81,7 +77,6 @@ export function GradientStatsCard({
<div className={` <div className={`
w-20 h-20 rounded-3xl flex items-center justify-center flex-shrink-0 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)] ${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" /> <Icon className="h-10 w-10 text-white" />
</div> </div>

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

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

18
components/data-table.tsx
View File

@@ -36,7 +36,7 @@ export function DataTable<T extends Record<string, any>>({
</div> </div>
<Button <Button
onClick={onAddNew} 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]" /> <Plus className="h-3.5 w-3.5 mr-1.5 stroke-[3px]" />
{addButtonText} {addButtonText}
@@ -44,14 +44,15 @@ export function DataTable<T extends Record<string, any>>({
</div> </div>
{/* Table */} {/* Table */}
<div className="overflow-hidden rounded-2xl border border-[var(--border)] bg-card shadow-2xl shadow-black/5"> <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"> <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"> <thead className="bg-[#f8fafc] dark:bg-gray-900/50 sticky top-0 z-10">
<tr> <tr>
{columns.map((col) => ( {columns.map((col) => (
<th <th
key={col.key} 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)]" 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} {col.header}
</th> </th>
@@ -61,7 +62,7 @@ export function DataTable<T extends Record<string, any>>({
<tbody className="divide-y divide-gray-100/30 dark:divide-gray-800/30"> <tbody className="divide-y divide-gray-100/30 dark:divide-gray-800/30">
{isLoading ? ( {isLoading ? (
<tr> <tr>
<td colSpan={columns.length} className="px-6 py-16 text-center"> <td colSpan={columns.length} className="px-4 py-12 text-center">
<div className="flex flex-col items-center justify-center gap-3"> <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" /> <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> <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Loading records...</span>
@@ -70,7 +71,7 @@ export function DataTable<T extends Record<string, any>>({
</tr> </tr>
) : data.length === 0 ? ( ) : data.length === 0 ? (
<tr> <tr>
<td colSpan={columns.length} className="px-6 py-16 text-center"> <td colSpan={columns.length} className="px-4 py-12 text-center">
<div className="flex flex-col items-center justify-center gap-2"> <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"> <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" /> <Plus className="w-6 h-6 text-gray-400" />
@@ -87,8 +88,8 @@ export function DataTable<T extends Record<string, any>>({
className="hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors duration-200" className="hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors duration-200"
> >
{columns.map((col) => ( {columns.map((col) => (
<td key={col.key} className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 font-medium"> <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] || "—"} {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> </td>
))} ))}
</tr> </tr>
@@ -98,5 +99,6 @@ export function DataTable<T extends Record<string, any>>({
</table> </table>
</div> </div>
</div> </div>
</div>
) )
} }

28
components/map-modal.tsx
View File

@@ -28,9 +28,19 @@ function FitBounds({ bounds }: { bounds: LatLngBounds }) {
const map = useMap() const map = useMap()
useEffect(() => { useEffect(() => {
if (bounds.isValid()) { if (!map || !bounds.isValid()) return
map.fitBounds(bounds, { padding: [50, 50] })
} // 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]) }, [bounds, map])
return null return null
@@ -75,9 +85,9 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
return ( return (
<Dialog open={open} onOpenChange={onClose}> <Dialog open={open} onOpenChange={onClose}>
<DialogContent className="max-w-4xl h-[600px] p-0"> <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-2"> <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> <DialogTitle className="text-xl font-bold">
{isPothole ? "Pothole" : "Signboard"} Detection Map {isPothole ? "Pothole" : "Signboard"} Detection Map
</DialogTitle> </DialogTitle>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
@@ -85,7 +95,7 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
</p> </p>
</DialogHeader> </DialogHeader>
<div className="h-[calc(100%-80px)] w-full"> <div className="flex-1 w-full bg-gray-50 dark:bg-gray-950 relative">
<MapContainer <MapContainer
center={center} center={center}
zoom={13} zoom={13}
@@ -111,8 +121,8 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
key={`${detection.id}-${idx}`} key={`${detection.id}-${idx}`}
center={[detection.latitude, detection.longitude]} center={[detection.latitude, detection.longitude]}
radius={8} radius={8}
fillColor="#ef4444" fillColor="#10b981"
color="#dc2626" color="#065f46"
weight={2} weight={2}
opacity={1} opacity={1}
fillOpacity={0.8} 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" /> <Menu className="h-5 w-5 text-foreground" />
</Button> </Button>
</SheetTrigger> </SheetTrigger>
<SheetContent side="left" className="w-[320px] sm:w-[380px] bg-background/95 backdrop-blur-xl border-r border-white/10"> <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-white/10"> <SheetHeader className="pb-6 border-b border-slate-100">
<SheetTitle className="text-2xl font-bold text-gradient"> <SheetTitle className="text-2xl font-bold text-[#3b82f6]">
VisionRoad VisionRoad
</SheetTitle> </SheetTitle>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-gray-500">
AI-Powered Road Detection System AI-Powered Road Detection System
</p> </p>
</SheetHeader> </SheetHeader>
@@ -110,28 +110,30 @@ export function NavigationMenu() {
key={item.href} key={item.href}
onClick={() => handleNavigation(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 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" ? "bg-slate-50 border border-slate-200"
: "hover:bg-white/5 border border-transparent hover:border-white/10" : "hover:bg-slate-50 border border-transparent hover:border-slate-100"
}`} }`}
> >
<div className={`p-2.5 rounded-lg transition-all duration-300 ${isActive <div className={`p-2.5 rounded-lg transition-all duration-300 border shadow-sm ${isActive
? "bg-[#60a5fa] text-white" ? "bg-[#2563eb] text-white border-[#2563eb]"
: "bg-white/5 text-muted-foreground group-hover:bg-[#60a5fa]/10 group-hover:text-[#60a5fa]" : "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>
<div className="flex-1 min-w-0"> <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} {item.title}
</h3> </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} {item.description}
</p> </p>
</div> </div>
<ChevronRight className={`h-4 w-4 transition-all duration-300 ${isActive <ChevronRight className={`h-4 w-4 transition-all duration-300 ${isActive
? "text-primary opacity-100" ? "text-[#1e40af] opacity-100"
: "text-muted-foreground opacity-0 group-hover:opacity-100" : "text-gray-300 opacity-0 group-hover:opacity-100"
}`} /> }`} />
</button> </button>
) )
@@ -140,7 +142,7 @@ export function NavigationMenu() {
{/* Footer */} {/* Footer */}
<div className="absolute bottom-4 left-4 right-4 text-center"> <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. Sentient Geeks Pvt. Ltd.
</p> </p>
</div> </div>

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

@@ -148,8 +148,8 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
} }
return ( return (
<Card className="glass-card card-glow border-0 overflow-hidden"> <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-border/50"> <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 className="flex flex-col gap-4">
<div> <div>
<CardTitle className="text-2xl font-semibold">Select Project Location</CardTitle> <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" const isNewAnalysisActive = pathname === "/new-analysis"
return ( 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"> <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">
{/* 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>
{/* Navigation Items */} {/* Navigation Items */}
<nav className="flex-1 flex flex-col items-center gap-4"> <nav className="flex-1 flex flex-col items-center gap-4">
{/* Dashboard - first item */} {/* Dashboard - first item */}
@@ -77,14 +70,15 @@ export function SidebarNavigation() {
onClick={() => handleNavigation(item)} onClick={() => handleNavigation(item)}
className={` className={`
relative w-12 h-12 rounded-xl flex items-center justify-center relative w-12 h-12 rounded-xl flex items-center justify-center
bg-white text-[#2563eb] shadow-lg border-2 ${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
${isActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
transition-all duration-300 ease-out transition-all duration-300 ease-out
hover:scale-110 hover:shadow-xl hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
active:scale-95 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> </button>
<div className=" <div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2 absolute left-full ml-3 top-1/2 -translate-y-1/2
@@ -107,14 +101,15 @@ export function SidebarNavigation() {
onClick={() => router.push("/new-analysis")} onClick={() => router.push("/new-analysis")}
className={` className={`
relative w-12 h-12 rounded-xl flex items-center justify-center relative w-12 h-12 rounded-xl flex items-center justify-center
bg-white text-[#2563eb] shadow-lg border-2 ${isNewAnalysisActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
${isNewAnalysisActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
transition-all duration-300 ease-out transition-all duration-300 ease-out
hover:scale-110 hover:shadow-xl hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
active:scale-95 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> </button>
<div className=" <div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2 absolute left-full ml-3 top-1/2 -translate-y-1/2
@@ -130,7 +125,7 @@ export function SidebarNavigation() {
</div> </div>
{/* Divider */} {/* 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 */} {/* Create items */}
{navItems.slice(1, 4).map((item) => { {navItems.slice(1, 4).map((item) => {
@@ -142,14 +137,15 @@ export function SidebarNavigation() {
onClick={() => handleNavigation(item)} onClick={() => handleNavigation(item)}
className={` className={`
relative w-12 h-12 rounded-xl flex items-center justify-center relative w-12 h-12 rounded-xl flex items-center justify-center
bg-white text-[#2563eb] shadow-lg border-2 ${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
${isActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
transition-all duration-300 ease-out transition-all duration-300 ease-out
hover:scale-110 hover:shadow-xl hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
active:scale-95 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> </button>
<div className=" <div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2 absolute left-full ml-3 top-1/2 -translate-y-1/2
@@ -172,10 +168,10 @@ export function SidebarNavigation() {
<div className="relative group"> <div className="relative group">
<button <button
onClick={() => { }} 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 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> </button>
<div className=" <div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2 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' import { cn } from '@/lib/utils'
const buttonVariants = cva( 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: { variants: {
variant: { variant: {
@@ -22,8 +22,8 @@ const buttonVariants = cva(
}, },
size: { size: {
default: 'h-9 px-4 py-2 has-[>svg]:px-3', 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', sm: 'h-8 rounded-full gap-1.5 px-3 has-[>svg]:px-2.5',
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', lg: 'h-10 rounded-full px-6 has-[>svg]:px-4',
icon: 'size-9', icon: 'size-9',
'icon-sm': 'size-8', 'icon-sm': 'size-8',
'icon-lg': 'size-10', 'icon-lg': 'size-10',

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

@@ -195,20 +195,22 @@ function DetailedSummarySection({
}) })
return ( return (
<div className="space-y-4"> <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
{/* Location-based Summary */} <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">
<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-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
<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 justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
<div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/30"> <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">
<MapIcon className="h-4 w-4 text-white" /> <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>
<div> <div>
<CardTitle className="text-base font-bold"> <CardTitle className="text-base font-bold text-gray-900 dark:text-white">
<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 Detection Locations
</span>
</CardTitle> </CardTitle>
<CardDescription className="text-xs"> <CardDescription className="text-xs">
{isPothole ? "Potholes" : "Signboards"} detected across project locations {isPothole ? "Potholes" : "Signboards"} detected across project locations
@@ -226,13 +228,24 @@ function DetailedSummarySection({
</Button> </Button>
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="flex-1 p-0 overflow-hidden">
<ScrollArea className="h-[300px] p-6 pt-3">
<div className="space-y-3"> <div className="space-y-3">
{/* Project Info */} {/* Project Info */}
<div className="text-xs space-y-1 pb-2 border-b"> <div className="pb-3 border-b mb-3">
<div><span className="text-muted-foreground">Project:</span> <span className="font-medium">{summaryData.project.name}</span></div> <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 && ( {summaryData.project.corridor_name && (
<div><span className="text-muted-foreground">Corridor:</span> {summaryData.project.corridor_name}</div> <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>
@@ -242,9 +255,9 @@ function DetailedSummarySection({
<div className="text-xs font-medium">{packageName}</div> <div className="text-xs font-medium">{packageName}</div>
<div className="pl-3 space-y-2"> <div className="pl-3 space-y-2">
{Object.entries(packageData.locations).map(([locationName, locationData]) => ( {Object.entries(packageData.locations).map(([locationName, locationData]) => (
<div key={locationData.location_id} className="text-xs p-2 rounded bg-muted/30"> <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 mb-1">{locationName}</div> <div className="font-medium truncate">{locationName}</div>
<div className="text-[10px] text-muted-foreground"> <div className="text-[10px] text-muted-foreground whitespace-nowrap">
{locationData.detection_count} {isPothole ? "pothole" : "signboard"}{locationData.detection_count !== 1 ? "s" : ""} detected {locationData.detection_count} {isPothole ? "pothole" : "signboard"}{locationData.detection_count !== 1 ? "s" : ""} detected
</div> </div>
</div> </div>
@@ -253,21 +266,23 @@ function DetailedSummarySection({
</div> </div>
))} ))}
</div> </div>
</ScrollArea>
</CardContent> </CardContent>
</Card> </Card>
{/* All Detections List */} <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">
<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-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
<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-3">
<div className="flex items-center gap-2"> <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="p-1.5 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 shadow-md shadow-indigo-500/30"> <div className="absolute inset-0 bg-white/10 animate-logo-spin-slow opacity-40"></div>
<Target className="h-4 w-4 text-white" /> <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>
<div> <div>
<CardTitle className="text-base font-bold"> <CardTitle className="text-base font-bold text-gray-900 dark:text-white">
<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 All Detections
</span>
</CardTitle> </CardTitle>
<CardDescription className="text-xs"> <CardDescription className="text-xs">
Complete list of {isPothole ? "potholes" : "signboards"} with GPS coordinates Complete list of {isPothole ? "potholes" : "signboards"} with GPS coordinates
@@ -275,8 +290,8 @@ function DetailedSummarySection({
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="flex-1 p-0 overflow-hidden">
<ScrollArea className="h-[300px] rounded-md border bg-muted/30 p-3"> <ScrollArea className="h-[300px] p-4">
<div className="space-y-2"> <div className="space-y-2">
{allDetections.map(({ detection, locationName, packageName }, idx) => ( {allDetections.map(({ detection, locationName, packageName }, idx) => (
<div <div
@@ -368,17 +383,19 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
] ]
return ( 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"> <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-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30"> <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-2"> <div className="flex items-center gap-3">
<div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/30"> <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">
<Activity className="h-4 w-4 text-white" /> <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>
<div> <div>
<CardTitle className="text-base font-bold"> <CardTitle className="text-base font-bold text-gray-900 dark:text-white">
<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 Quick Stats
</span>
</CardTitle> </CardTitle>
<CardDescription className="text-xs"> <CardDescription className="text-xs">
Overview of {isPothole ? "pothole" : "signboard"} detection results 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" 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` }} style={{ animationDelay: `${index * 100}ms` }}
> >
<div className={`${stat.bgColor} p-2 rounded-lg mb-2 transition-all shadow-inner`}> <div className={`${stat.bgColor} p-2.5 rounded-lg mb-2 transition-all shadow-inner`}>
<Icon className={`h-4 w-4 ${stat.color}`} /> <Icon className={`h-5 w-5 ${stat.color}`} />
</div> </div>
<div className={`text-xl font-bold ${stat.color} mb-1`}>{stat.value}</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> <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 ( return (
<div className="space-y-6"> <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"> <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-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"> <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="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"> <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 dark:text-gray-900" /> <Film className="h-5 w-5 text-white" />
</div> </div>
<div> <div>
<CardTitle className="text-lg font-bold"> <CardTitle className="text-lg font-bold text-gray-900 dark:text-white">
<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 Video Playback with Detection
</span>
</CardTitle> </CardTitle>
<CardDescription> <CardDescription>
Watch the video with real-time {isPothole ? "pothole" : "signboard"} detection overlays 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": { "node_modules/lodash": {
"version": "4.17.21", "version": "4.17.23",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/loose-envify": { "node_modules/loose-envify": {

71
styles/globals.css
View File

@@ -4,7 +4,7 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
:root { :root {
--background: oklch(1 0 0); --background: #f8fafc;
--foreground: oklch(0.145 0 0); --foreground: oklch(0.145 0 0);
--card: oklch(1 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0); --card-foreground: oklch(0.145 0 0);
@@ -29,14 +29,14 @@
--chart-4: oklch(0.828 0.189 84.429); --chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08); --chart-5: oklch(0.769 0.188 70.08);
--radius: 0.625rem; --radius: 0.625rem;
--sidebar: oklch(0.985 0 0); --sidebar: #ffffff;
--sidebar-foreground: oklch(0.145 0 0); --sidebar-foreground: #64748b;
--sidebar-primary: oklch(0.205 0 0); --sidebar-primary: #2563eb;
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: #ffffff;
--sidebar-accent: oklch(0.97 0 0); --sidebar-accent: #f1f5f9;
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-accent-foreground: #0f172a;
--sidebar-border: oklch(0.922 0 0); --sidebar-border: #e2e8f0;
--sidebar-ring: oklch(0.708 0 0); --sidebar-ring: #3b82f6;
} }
.dark { .dark {
@@ -115,11 +115,64 @@
--color-sidebar-ring: var(--sidebar-ring); --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 { @layer base {
* { * {
@apply border-border outline-ring/50; @apply border-border outline-ring/50;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
button:not([role="tab"]),
[role="button"] {
border-radius: 9999px !important;
}
} }