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

Implemented all css in single

Browse Source
This commit is contained in:
sumona-banerjeee
2026-02-12 10:43:21 +05:30
parent 12b6a99531
commit 53cc7f6a4f
13 changed files with 343 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -290,7 +290,10 @@ export default function CreateLocationPage() {
{/* Modal Dialog */}
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent
className="max-w-2xl"
onOpenAutoFocus={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<MapPin className="h-5 w-5 text-blue-500" />
@@ -321,12 +324,12 @@ 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-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-blue-500 to-indigo-600 flex items-center justify-center">
<span className="text-white text-xs font-bold">1</span>
<div className="p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
<div className="flex items-center gap-2 mb-2">
<div className="w-5 h-5 rounded-full bg-blue-600 flex items-center justify-center">
<span className="text-white text-[10px] font-bold">1</span>
</div>
<p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
<p className="text-xs 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-blue-200 dark:border-blue-800 focus:border-blue-400">
@@ -343,25 +346,19 @@ export default function CreateLocationPage() {
{projects.map(project => (
<SelectItem key={project.id} value={project.id}>
<span className="font-medium">{project.name}</span>
{project.state && <span className="text-gray-400 ml-2">({project.state})</span>}
</SelectItem>
))}
</SelectContent>
</Select>
{selectedProject && (
<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-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-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<span className="text-white text-xs font-bold">2</span>
<div className={`p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
<div className="flex items-center gap-2 mb-2">
<div className={`w-5 h-5 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<span className="text-white text-[10px] font-bold">2</span>
</div>
<p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Package</p>
<p className="text-xs 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-blue-200 dark:border-blue-800 focus:border-blue-400">
@@ -378,116 +375,101 @@ export default function CreateLocationPage() {
{packages.map(pkg => (
<SelectItem key={pkg.id} value={pkg.id}>
<span className="font-medium">{pkg.name}</span>
{pkg.region && <span className="text-gray-400 ml-2">({pkg.region})</span>}
</SelectItem>
))}
</SelectContent>
</Select>
{selectedPackage && (
<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>
)}
</div>
{/* 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-4 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-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<span className="text-white text-xs font-bold">3</span>
<div className={`w-5 h-5 rounded-full flex items-center justify-center ${selectedPackageId ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<span className="text-white text-[10px] font-bold">3</span>
</div>
<p className="text-sm font-bold text-gray-700 dark:text-gray-300">Location Information</p>
<p className="text-xs font-bold text-gray-700 dark:text-gray-300">Location Information</p>
</div>
{/* Segment Name */}
<div className="space-y-2">
<Label htmlFor="segment" className="text-sm font-semibold flex items-center gap-1">
Segment Name <span className="text-red-500">*</span>
</Label>
<Input
id="segment"
value={segmentName}
onChange={(e) => setSegmentName(e.target.value)}
placeholder="e.g., KM 120 to KM 135"
className="h-11"
required
/>
</div>
{/* Chainage */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="ch-start" className="text-sm font-semibold flex items-center gap-1">
<Milestone className="h-3.5 w-3.5 text-gray-400" />
Chainage Start (km) <span className="text-gray-400 font-normal text-xs">(Opt)</span>
{/* Segment Name & Chainage Row */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-1.5">
<Label htmlFor="segment" className="text-xs font-semibold flex items-center gap-1">
Segment Name <span className="text-red-500">*</span>
</Label>
<Input
id="ch-start"
type="number"
step="any"
min="0"
value={chainageStartKm}
onChange={(e) => setChainageStartKm(e.target.value)}
placeholder="0"
className="h-10 text-sm"
id="segment"
value={segmentName}
onChange={(e) => setSegmentName(e.target.value)}
placeholder="Location to Location"
className="h-9 text-sm"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="ch-end" className="text-sm font-semibold flex items-center gap-1">
<Milestone className="h-3.5 w-3.5 text-gray-400" />
Chainage End (km) <span className="text-gray-400 font-normal text-xs">(Opt)</span>
</Label>
<Input
id="ch-end"
type="number"
step="any"
min="0"
value={chainageEndKm}
onChange={(e) => setChainageEndKm(e.target.value)}
placeholder="0"
className="h-10 text-sm"
/>
</div>
</div>
{/* 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-blue-400 to-indigo-500 shadow-md shadow-blue-500/20">
<MapPin className="h-4 w-4 text-white" />
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1.5">
<Label htmlFor="ch-start" className="text-[10px] font-semibold flex items-center gap-1">
Start (km)
</Label>
<Input
id="ch-start"
type="number"
step="any"
min="0"
value={chainageStartKm}
onChange={(e) => setChainageStartKm(e.target.value)}
placeholder="0"
className="h-9 text-sm"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="ch-end" className="text-[10px] font-semibold flex items-center gap-1">
End (km)
</Label>
<Input
id="ch-end"
type="number"
step="any"
min="0"
value={chainageEndKm}
onChange={(e) => setChainageEndKm(e.target.value)}
placeholder="0"
className="h-9 text-sm"
/>
</div>
<h3 className="text-sm font-bold text-gray-700 dark:text-gray-300">GPS Coordinates</h3>
<span className="text-xs text-red-500 font-medium">Required</span>
</div>
</div>
{/* GPS Coordinates Grid */}
<div className="grid grid-cols-2 gap-3">
{/* Start Point */}
<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>
<div className="p-3 rounded-xl bg-blue-50/50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-900/50">
<p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
<MapPin className="h-3 w-3" /> Start Point
</p>
<div className="grid grid-cols-1 gap-2">
<div className="flex items-center gap-2">
<Label htmlFor="s-lat" className="text-[10px] text-gray-500 w-8">Lat</Label>
<Input
id="s-lat"
type="number"
step="any"
value={startLat}
onChange={(e) => setStartLat(e.target.value)}
placeholder="-90 to 90"
className="h-10 text-sm"
placeholder="Lat"
className="h-8 text-[11px]"
required
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="s-lng" className="text-xs text-gray-500">Longitude *</Label>
<div className="flex items-center gap-2">
<Label htmlFor="s-lng" className="text-[10px] text-gray-500 w-8">Lng</Label>
<Input
id="s-lng"
type="number"
step="any"
value={startLng}
onChange={(e) => setStartLng(e.target.value)}
placeholder="-180 to 180"
className="h-10 text-sm"
placeholder="Lng"
className="h-8 text-[11px]"
required
/>
</div>
@@ -495,32 +477,34 @@ export default function CreateLocationPage() {
</div>
{/* End Point */}
<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>
<div className="p-3 rounded-xl bg-blue-50/50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-900/50">
<p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
<MapPin className="h-3 w-3" /> End Point
</p>
<div className="grid grid-cols-1 gap-2">
<div className="flex items-center gap-2">
<Label htmlFor="e-lat" className="text-[10px] text-gray-500 w-8">Lat</Label>
<Input
id="e-lat"
type="number"
step="any"
value={endLat}
onChange={(e) => setEndLat(e.target.value)}
placeholder="-90 to 90"
className="h-10 text-sm"
placeholder="Lat"
className="h-8 text-[11px]"
required
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="e-lng" className="text-xs text-gray-500">Longitude *</Label>
<div className="flex items-center gap-2">
<Label htmlFor="e-lng" className="text-[10px] text-gray-500 w-8">Lng</Label>
<Input
id="e-lng"
type="number"
step="any"
value={endLng}
onChange={(e) => setEndLng(e.target.value)}
placeholder="-180 to 180"
className="h-10 text-sm"
placeholder="Lng"
className="h-8 text-[11px]"
required
/>
</div>

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

@@ -211,7 +211,10 @@ export default function CreatePackagePage() {
{/* Modal Dialog */}
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
<DialogContent className="max-w-2xl">
<DialogContent
className="max-w-2xl"
onOpenAutoFocus={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Package className="h-5 w-5 text-blue-500" />
@@ -240,11 +243,11 @@ export default function CreatePackagePage() {
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<form onSubmit={handleSubmit} className="space-y-8">
{/* Step 1: Select Project */}
<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="p-4 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
<div className="flex items-center gap-2 mb-3">
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
<div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
<span className="text-white text-xs font-bold">1</span>
</div>
<p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
@@ -264,54 +267,49 @@ export default function CreatePackagePage() {
{projects.map(project => (
<SelectItem key={project.id} value={project.id}>
<span className="font-medium">{project.name}</span>
{project.state && <span className="text-gray-400 ml-2">({project.state})</span>}
</SelectItem>
))}
</SelectContent>
</Select>
{selectedProject && (
<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>
)}
</div>
{/* 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-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-blue-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>
</div>
<div className="space-y-2">
<Label htmlFor="pkg-name" className="text-sm font-semibold flex items-center gap-1">
Package Name <span className="text-red-500">*</span>
</Label>
<Input
id="pkg-name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g., Package A - Section 1"
className="h-11"
required
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="pkg-name" className="text-sm font-semibold flex items-center gap-1">
Package Name <span className="text-red-500">*</span>
</Label>
<Input
id="pkg-name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Package Name"
className="h-10 text-sm"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="region" className="text-sm font-semibold flex items-center gap-1">
<Globe className="h-3.5 w-3.5 text-gray-400" />
Region <span className="text-gray-400 font-normal text-xs">(Optional)</span>
</Label>
<Input
id="region"
value={region}
onChange={(e) => setRegion(e.target.value)}
placeholder="e.g., Delhi, Haryana, Punjab"
className="h-11"
/>
<div className="space-y-2">
<Label htmlFor="region" className="text-sm font-semibold flex items-center gap-1">
<Globe className="h-3.5 w-3.5 text-gray-400" />
Region <span className="text-gray-400 font-normal text-xs">(Optional)</span>
</Label>
<Input
id="region"
value={region}
onChange={(e) => setRegion(e.target.value)}
placeholder="Region"
className="h-10 text-sm"
/>
</div>
</div>
</div>

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

@@ -183,8 +183,11 @@ export default function CreateProjectPage() {
</main>
{/* Modal Dialog */}
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<Dialog open={isModalOpen} onOpenChange={(open) => { if (!open) { setIsModalOpen(false); resetForm(); } else { setIsModalOpen(true); } }}>
<DialogContent
className="max-w-2xl"
onOpenAutoFocus={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<FolderPlus className="h-5 w-5 text-blue-500" />
@@ -215,7 +218,7 @@ export default function CreateProjectPage() {
<form onSubmit={handleSubmit} className="space-y-6">
{/* Project Name */}
<div className="space-y-2">
<div className="space-y-1.5">
<Label htmlFor="name" className="text-sm font-semibold flex items-center gap-1">
Project Name <span className="text-red-500">*</span>
</Label>
@@ -223,15 +226,15 @@ export default function CreateProjectPage() {
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g., Delhi-Chandigarh Highway"
className="h-11"
placeholder="Project Name"
className="h-10 text-sm"
required
/>
</div>
{/* State & Corridor Row */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<div className="space-y-1.5">
<Label htmlFor="state" className="text-sm font-semibold">
State <span className="text-gray-400 font-normal text-xs">(Optional)</span>
</Label>
@@ -239,11 +242,11 @@ export default function CreateProjectPage() {
id="state"
value={state}
onChange={(e) => setState(e.target.value)}
placeholder="e.g., Haryana"
className="h-11"
placeholder="State"
className="h-10 text-sm"
/>
</div>
<div className="space-y-2">
<div className="space-y-1.5">
<Label htmlFor="corridor" className="text-sm font-semibold flex items-center gap-1">
<Route className="h-3.5 w-3.5 text-gray-400" />
Corridor Name <span className="text-gray-400 font-normal text-xs">(Optional)</span>
@@ -252,79 +255,75 @@ export default function CreateProjectPage() {
id="corridor"
value={corridorName}
onChange={(e) => setCorridorName(e.target.value)}
placeholder="e.g., National Highway 44"
className="h-11"
placeholder="Corridor Name"
className="h-10 text-sm"
/>
</div>
</div>
{/* GPS Coordinates Section */}
<div className="space-y-4">
<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/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>
<span className="text-xs text-gray-400">(Optional)</span>
</div>
{/* GPS Coordinates Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{/* Start Point */}
<div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/50 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="start-lat" className="text-xs text-gray-500">Latitude</Label>
<div className="p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
<p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
<MapPin className="h-3 w-3" /> Start Point
</p>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label htmlFor="start-lat" className="text-[10px] text-gray-500">Lat</Label>
<Input
id="start-lat"
type="number"
step="any"
value={startLat}
onChange={(e) => setStartLat(e.target.value)}
placeholder="-90 to 90"
className="h-10 text-sm"
placeholder="Lat"
className="h-8 text-[11px]"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="start-lng" className="text-xs text-gray-500">Longitude</Label>
<div className="space-y-1">
<Label htmlFor="start-lng" className="text-[10px] text-gray-500">Lng</Label>
<Input
id="start-lng"
type="number"
step="any"
value={startLng}
onChange={(e) => setStartLng(e.target.value)}
placeholder="-180 to 180"
className="h-10 text-sm"
placeholder="Lng"
className="h-8 text-[11px]"
/>
</div>
</div>
</div>
{/* End Point */}
<div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/50 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="end-lat" className="text-xs text-gray-500">Latitude</Label>
<div className="p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
<p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
<MapPin className="h-3 w-3" /> End Point
</p>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label htmlFor="end-lat" className="text-[10px] text-gray-500">Lat</Label>
<Input
id="end-lat"
type="number"
step="any"
value={endLat}
onChange={(e) => setEndLat(e.target.value)}
placeholder="-90 to 90"
className="h-10 text-sm"
placeholder="Lat"
className="h-8 text-[11px]"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="end-lng" className="text-xs text-gray-500">Longitude</Label>
<div className="space-y-1">
<Label htmlFor="end-lng" className="text-[10px] text-gray-500">Lng</Label>
<Input
id="end-lng"
type="number"
step="any"
value={endLng}
onChange={(e) => setEndLng(e.target.value)}
placeholder="-180 to 180"
className="h-10 text-sm"
placeholder="Lng"
className="h-8 text-[11px]"
/>
</div>
</div>

11
app/globals.css
View File

@@ -362,4 +362,15 @@
animation: logo-spin-reverse-slow 8s linear infinite;
}
}
/* Prevent layout shift when Dialog locks body scroll */
html {
overflow-y: scroll;
/* always show scrollbar to prevent width jump */
}
body[data-scroll-locked] {
overflow: hidden;
padding-right: var(--removed-body-scroll-bar-size, 0px) !important;
}

8
app/results/page.tsx
View File

@@ -55,7 +55,7 @@ export default function ResultsPage() {
}
const data = await response.json()
setDetectionData(data)
setDetectionData(data as any)
// Retrieve video file from IndexedDB
const storedVideoFile = await getVideoFile(videoData.videoId)
@@ -90,9 +90,9 @@ export default function ResultsPage() {
}
const getTitle = () => {
return detectionType === "pothole-detection"
? "Pothole Detection Results"
: "Signboard Detection Results"
if (detectionType === "pothole-detection") return "Pothole Detection Results"
if (detectionType === "sign-board-detection") return "Signboard Detection Results"
return "Pothole & Signboard Detection Results"
}
if (isLoading) {

11
app/upload/page.tsx
View File

@@ -21,7 +21,7 @@ import { storeVideoFile } from "@/lib/video-storage"
const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
const WS_URL = process.env.NEXT_PUBLIC_WS_URL || "ws://127.0.0.1:8000/api/v1"
type DetectionType = "pothole-detection" | "sign-board-detection"
type DetectionType = "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
export default function UploadPage() {
const router = useRouter()
@@ -151,9 +151,9 @@ export default function UploadPage() {
}
const getTitle = () => {
return detectionType === "pothole-detection"
? "Pothole Detection"
: "Signboard Detection"
if (detectionType === "pothole-detection") return "Pothole Detection"
if (detectionType === "sign-board-detection") return "Signboard Detection"
return "Pothole & Signboard Detection"
}
if (isLoading) {
@@ -295,6 +295,9 @@ export default function UploadPage() {
<SelectItem value="sign-board-detection">
<span className="font-medium">Signboard Detection</span>
</SelectItem>
<SelectItem value="pot-sign-detection">
<span className="font-medium">Pothole & Signboard Detection</span>
</SelectItem>
</SelectContent>
</Select>
</div>