Implemented all css in single
This commit is contained in:
sumona-banerjeee
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -363,3 +363,14 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -43,6 +43,9 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
|
||||
if (type === "pothole-detection") {
|
||||
return <Badge className="bg-orange-500/20 text-orange-600 border-orange-500/30">Pothole</Badge>
|
||||
}
|
||||
if (type === "pot-sign-detection") {
|
||||
return <Badge className="bg-purple-500/20 text-purple-600 border-purple-500/30">Pothole & Sign</Badge>
|
||||
}
|
||||
return <Badge className="bg-blue-500/20 text-blue-600 border-blue-500/30">Signboard</Badge>
|
||||
}
|
||||
|
||||
@@ -88,7 +91,9 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
|
||||
<p className="text-sm font-bold text-foreground">
|
||||
{video.detection_type === "pothole-detection"
|
||||
? video.unique_potholes ?? 0
|
||||
: video.unique_signboards ?? 0}
|
||||
: video.detection_type === "pot-sign-detection"
|
||||
? (video.unique_potholes ?? 0) + (video.unique_signboards ?? 0)
|
||||
: video.unique_signboards ?? 0}
|
||||
</p>
|
||||
<p className="text-[10px] text-muted-foreground uppercase">Detections</p>
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@ type MapModalProps = {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
detections: Detection[]
|
||||
detectionType: "pothole-detection" | "sign-board-detection"
|
||||
detectionType: "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
|
||||
}
|
||||
|
||||
// Component to auto-fit map bounds to show all markers
|
||||
@@ -81,6 +81,7 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
|
||||
(bounds.getEast() + bounds.getWest()) / 2
|
||||
]
|
||||
|
||||
const isCombined = detectionType === "pot-sign-detection"
|
||||
const isPothole = detectionType === "pothole-detection"
|
||||
|
||||
return (
|
||||
@@ -88,7 +89,7 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
|
||||
<DialogContent className="max-w-6xl h-[80vh] p-0 flex flex-col overflow-hidden border-none shadow-2xl">
|
||||
<DialogHeader className="px-6 pt-6 pb-4 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
|
||||
<DialogTitle className="text-xl font-bold">
|
||||
{isPothole ? "Pothole" : "Signboard"} Detection Map
|
||||
{isCombined ? "Pothole & Signboard" : isPothole ? "Pothole" : "Signboard"} Detection Map
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{validDetections.length} detection{validDetections.length !== 1 ? "s" : ""} with GPS coordinates
|
||||
@@ -116,31 +117,37 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
|
||||
/>
|
||||
|
||||
{/* Detection markers */}
|
||||
{validDetections.map((detection, idx) => (
|
||||
<CircleMarker
|
||||
key={`${detection.id}-${idx}`}
|
||||
center={[detection.latitude, detection.longitude]}
|
||||
radius={8}
|
||||
fillColor="#10b981"
|
||||
color="#065f46"
|
||||
weight={2}
|
||||
opacity={1}
|
||||
fillOpacity={0.8}
|
||||
>
|
||||
<Popup>
|
||||
<div className="text-xs space-y-1">
|
||||
<div className="font-semibold">
|
||||
{isPothole ? "Pothole" : detection.class.replace(/_/g, " ")} #{detection.id}
|
||||
{validDetections.map((detection, idx) => {
|
||||
const isDetPothole = detection.type === "pothole"
|
||||
const markerColor = isDetPothole ? "#ef4444" : "#3b82f6"
|
||||
const strokeColor = isDetPothole ? "#991b1b" : "#1e40af"
|
||||
|
||||
return (
|
||||
<CircleMarker
|
||||
key={`${detection.id}-${idx}`}
|
||||
center={[detection.latitude, detection.longitude]}
|
||||
radius={8}
|
||||
fillColor={markerColor}
|
||||
color={strokeColor}
|
||||
weight={2}
|
||||
opacity={1}
|
||||
fillOpacity={0.8}
|
||||
>
|
||||
<Popup>
|
||||
<div className="text-xs space-y-1">
|
||||
<div className="font-semibold">
|
||||
{isDetPothole ? "Pothole" : (detection.class || detection.type || "").replace(/_/g, " ")} #{detection.id}
|
||||
</div>
|
||||
<div>Frame: {detection.frame_number}</div>
|
||||
<div>Confidence: {(detection.confidence * 100).toFixed(1)}%</div>
|
||||
<div className="font-mono text-[10px]">
|
||||
{detection.latitude.toFixed(6)}, {detection.longitude.toFixed(6)}
|
||||
</div>
|
||||
</div>
|
||||
<div>Frame: {detection.frame_number}</div>
|
||||
<div>Confidence: {(detection.confidence * 100).toFixed(1)}%</div>
|
||||
<div className="font-mono text-[10px]">
|
||||
{detection.latitude.toFixed(6)}, {detection.longitude.toFixed(6)}
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</CircleMarker>
|
||||
))}
|
||||
</Popup>
|
||||
</CircleMarker>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Auto-fit bounds */}
|
||||
<FitBounds bounds={bounds} />
|
||||
|
||||
@@ -37,7 +37,7 @@ function SelectTrigger({
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm overflow-hidden shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -63,7 +63,7 @@ function SelectContent({
|
||||
className={cn(
|
||||
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
|
||||
position === 'popper' &&
|
||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||
className,
|
||||
)}
|
||||
position={position}
|
||||
@@ -74,7 +74,7 @@ function SelectContent({
|
||||
className={cn(
|
||||
'p-1',
|
||||
position === 'popper' &&
|
||||
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
|
||||
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -277,6 +277,11 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
|
||||
<span>Signboard Detection</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="pot-sign-detection">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Pothole & Signboard Detection</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
@@ -11,69 +11,11 @@ import { Target, AlertTriangle, Film, Activity, Gauge, Monitor, SignpostBig, Map
|
||||
// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
|
||||
const MapModal = dynamic(() => import("@/components/map-modal"), { ssr: false })
|
||||
|
||||
import { DetectionData, DetectionType } from "@/lib/types"
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
|
||||
|
||||
type DetectionType = "pothole-detection" | "sign-board-detection"
|
||||
|
||||
type DetectionData = {
|
||||
video_id: string
|
||||
detection_type?: string
|
||||
output_video_path?: string
|
||||
video_info: {
|
||||
fps: number
|
||||
width: number
|
||||
height: number
|
||||
total_frames: number
|
||||
}
|
||||
summary: {
|
||||
unique_potholes?: number
|
||||
unique_signboards?: number
|
||||
total_detections: number
|
||||
total_frames: number
|
||||
detection_rate: number
|
||||
}
|
||||
pothole_list?: Array<{
|
||||
pothole_id: number
|
||||
first_detected_frame: number
|
||||
first_detected_time: number
|
||||
confidence: number
|
||||
lat?: number
|
||||
lng?: number
|
||||
}>
|
||||
signboard_list?: Array<{
|
||||
signboard_id: number
|
||||
type: string
|
||||
first_detected_frame: number
|
||||
first_detected_time: number
|
||||
confidence: number
|
||||
lat?: number
|
||||
lng?: number
|
||||
}>
|
||||
frames: Array<{
|
||||
frame_id: number
|
||||
potholes?: Array<{
|
||||
pothole_id: number
|
||||
bbox: {
|
||||
x1: number
|
||||
y1: number
|
||||
x2: number
|
||||
y2: number
|
||||
}
|
||||
confidence: number
|
||||
}>
|
||||
signboards?: Array<{
|
||||
signboard_id: number
|
||||
type: string
|
||||
bbox: {
|
||||
x1: number
|
||||
y1: number
|
||||
x2: number
|
||||
y2: number
|
||||
}
|
||||
confidence: number
|
||||
}>
|
||||
}>
|
||||
}
|
||||
|
||||
type VideoPlayerSectionProps = {
|
||||
data: DetectionData
|
||||
@@ -177,7 +119,8 @@ function DetailedSummarySection({
|
||||
|
||||
if (!show || loading || !summaryData) return null
|
||||
|
||||
const isPothole = detectionType === "pothole-detection"
|
||||
const isCombined = detectionType === "pot-sign-detection"
|
||||
const isPothole = detectionType === "pothole-detection" || isCombined
|
||||
|
||||
// Flatten all detections for the scrollable list
|
||||
const allDetections: Array<{
|
||||
@@ -213,7 +156,7 @@ function DetailedSummarySection({
|
||||
Detection Locations
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
{isPothole ? "Potholes" : "Signboards"} detected across project locations
|
||||
{isCombined ? "Potholes & Signboards" : isPothole ? "Potholes" : "Signboards"} detected across project locations
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
@@ -258,7 +201,7 @@ function DetailedSummarySection({
|
||||
<div key={locationData.location_id} className="text-xs p-2 rounded bg-muted/30 flex items-center justify-between gap-4">
|
||||
<div className="font-medium truncate">{locationName}</div>
|
||||
<div className="text-[10px] text-muted-foreground whitespace-nowrap">
|
||||
{locationData.detection_count} {isPothole ? "pothole" : "signboard"}{locationData.detection_count !== 1 ? "s" : ""} detected
|
||||
{locationData.detection_count} detection{locationData.detection_count !== 1 ? "s" : ""} found
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -285,7 +228,7 @@ function DetailedSummarySection({
|
||||
All Detections
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
Complete list of {isPothole ? "potholes" : "signboards"} with GPS coordinates
|
||||
Complete list of {isCombined ? "potholes & signboards" : isPothole ? "potholes" : "signboards"} with GPS coordinates
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
@@ -301,7 +244,7 @@ function DetailedSummarySection({
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="font-semibold">
|
||||
{isPothole ? "Pothole" : detection.class.replace(/_/g, " ")} #{detection.id}
|
||||
{detection.type === "pothole" ? "Pothole" : (detection.class || detection.type || "").replace(/_/g, " ")} #{detection.id}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
Frame {detection.frame_number}
|
||||
@@ -335,17 +278,25 @@ function DetailedSummarySection({
|
||||
function SummarySection({ data, show, detectionType }: { data: DetectionData; show: boolean; detectionType: DetectionType }) {
|
||||
if (!show) return null
|
||||
|
||||
const isPothole = detectionType === "pothole-detection"
|
||||
const isSignboard = detectionType === "sign-board-detection"
|
||||
const isCombined = detectionType === "pot-sign-detection"
|
||||
const isPothole = detectionType === "pothole-detection" || isCombined
|
||||
const isSignboard = detectionType === "sign-board-detection" || isCombined
|
||||
|
||||
const stats = [
|
||||
{
|
||||
label: isPothole ? "Unique Potholes" : "Unique Signboards",
|
||||
value: (isPothole ? data.summary.unique_potholes : data.summary.unique_signboards) || 0,
|
||||
icon: isPothole ? AlertTriangle : SignpostBig,
|
||||
color: isPothole ? "text-red-500" : "text-blue-500",
|
||||
bgColor: isPothole ? "bg-red-50 dark:bg-red-950/30" : "bg-blue-50 dark:bg-blue-950/30",
|
||||
},
|
||||
...(isPothole ? [{
|
||||
label: "Unique Potholes",
|
||||
value: data.summary.unique_potholes || 0,
|
||||
icon: AlertTriangle,
|
||||
color: "text-red-500",
|
||||
bgColor: "bg-red-50 dark:bg-red-950/30",
|
||||
}] : []),
|
||||
...(isSignboard ? [{
|
||||
label: "Unique Signboards",
|
||||
value: data.summary.unique_signboards || 0,
|
||||
icon: SignpostBig,
|
||||
color: "text-blue-500",
|
||||
bgColor: "bg-blue-50 dark:bg-blue-950/30",
|
||||
}] : []),
|
||||
{
|
||||
label: "Total Detections",
|
||||
value: data.summary.total_detections || 0,
|
||||
@@ -399,13 +350,13 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
|
||||
Quick Stats
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
Overview of {isPothole ? "pothole" : "signboard"} detection results
|
||||
Overview of {isCombined ? "pothole & signboard" : isPothole ? "pothole" : "signboard"} detection results
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-3">
|
||||
<div className={`grid gap-3 ${isCombined ? 'grid-cols-3 md:grid-cols-7' : 'grid-cols-3 md:grid-cols-6'}`}>
|
||||
{stats.map((stat, index) => {
|
||||
const Icon = stat.icon
|
||||
return (
|
||||
@@ -445,8 +396,9 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
const loggedFrames = useRef<Set<number>>(new Set())
|
||||
const MAX_LOGS = 50
|
||||
|
||||
const isPothole = detectionType === "pothole-detection"
|
||||
const isSignboard = detectionType === "sign-board-detection"
|
||||
const isCombined = detectionType === "pot-sign-detection"
|
||||
const isPothole = detectionType === "pothole-detection" || isCombined
|
||||
const isSignboard = detectionType === "sign-board-detection" || isCombined
|
||||
|
||||
// Create GPS coordinate map from signboard_list or pothole_list
|
||||
const gpsMap = useRef<Map<number, { lat: number; lng: number }>>(new Map())
|
||||
@@ -457,14 +409,17 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
|
||||
if (isPothole && data.pothole_list) {
|
||||
data.pothole_list.forEach(item => {
|
||||
if (item.lat !== undefined && item.lng !== undefined) {
|
||||
map.set(item.pothole_id, { lat: item.lat, lng: item.lng })
|
||||
const id = (item as any).pothole_id ?? (item as any).detection_id
|
||||
if (item.lat !== undefined && item.lng !== undefined && id !== undefined) {
|
||||
map.set(id, { lat: item.lat, lng: item.lng })
|
||||
}
|
||||
})
|
||||
} else if (isSignboard && data.signboard_list) {
|
||||
}
|
||||
if (isSignboard && data.signboard_list) {
|
||||
data.signboard_list.forEach(item => {
|
||||
if (item.lat !== undefined && item.lng !== undefined) {
|
||||
map.set(item.signboard_id, { lat: item.lat, lng: item.lng })
|
||||
const id = (item as any).signboard_id ?? (item as any).detection_id
|
||||
if (item.lat !== undefined && item.lng !== undefined && id !== undefined) {
|
||||
map.set(id, { lat: item.lat, lng: item.lng })
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -509,18 +464,37 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
data.frames.forEach((frameData) => {
|
||||
const frameId = frameData.frame_id
|
||||
|
||||
// Handle both pothole and signboard detections
|
||||
const detections = isPothole ? (frameData.potholes || []) : (frameData.signboards || [])
|
||||
|
||||
if (detections.length > 0) {
|
||||
map.set(frameId, detections)
|
||||
// Handle flat detections array format (used by pot-sign-detection API)
|
||||
const flatDetections = (frameData as any).detections
|
||||
if (flatDetections && Array.isArray(flatDetections)) {
|
||||
const tagged = flatDetections.map((d: any) => ({
|
||||
...d,
|
||||
_detType: d.type === 'pothole' ? 'pothole' : 'signboard',
|
||||
pothole_id: d.type === 'pothole' ? d.detection_id : undefined,
|
||||
signboard_id: d.type !== 'pothole' ? d.detection_id : undefined,
|
||||
}))
|
||||
if (tagged.length > 0) {
|
||||
map.set(frameId, tagged)
|
||||
}
|
||||
} else {
|
||||
// Handle separate potholes/signboards arrays format
|
||||
let detections: any[] = []
|
||||
if (isPothole && frameData.potholes) {
|
||||
detections = [...detections, ...frameData.potholes.map((p: any) => ({ ...p, _detType: 'pothole' }))]
|
||||
}
|
||||
if (isSignboard && frameData.signboards) {
|
||||
detections = [...detections, ...frameData.signboards.map((s: any) => ({ ...s, _detType: 'signboard' }))]
|
||||
}
|
||||
if (detections.length > 0) {
|
||||
map.set(frameId, detections)
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(`[VideoPlayer] Frame map built: ${map.size} frames with detections`)
|
||||
}
|
||||
|
||||
frameDetectionMap.current = map
|
||||
}, [data, isPothole])
|
||||
}, [data, isPothole, isSignboard])
|
||||
|
||||
// Function to draw bounding boxes on canvas
|
||||
const drawBoundingBoxes = useCallback((detections: any[]) => {
|
||||
@@ -553,9 +527,12 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
const width = x2 - x1
|
||||
const height = y2 - y1
|
||||
|
||||
// Set colors based on detection type
|
||||
const boxColor = isPothole ? '#ef4444' : '#3b82f6' // red for potholes, blue for signboards
|
||||
const textBgColor = isPothole ? 'rgba(239, 68, 68, 0.9)' : 'rgba(59, 130, 246, 0.9)'
|
||||
// Determine if this specific detection is a pothole or signboard
|
||||
const isDetPothole = detection._detType === 'pothole' || detection.type === 'pothole' || (detection.pothole_id !== undefined && !detection.signboard_id)
|
||||
|
||||
// Set colors based on individual detection type
|
||||
const boxColor = isDetPothole ? '#ef4444' : '#3b82f6' // red for potholes, blue for signboards
|
||||
const textBgColor = isDetPothole ? 'rgba(239, 68, 68, 0.9)' : 'rgba(59, 130, 246, 0.9)'
|
||||
|
||||
// Draw bounding box
|
||||
ctx.strokeStyle = boxColor
|
||||
@@ -563,15 +540,15 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
ctx.strokeRect(x1, y1, width, height)
|
||||
|
||||
// Draw semi-transparent fill
|
||||
ctx.fillStyle = isPothole ? 'rgba(239, 68, 68, 0.15)' : 'rgba(59, 130, 246, 0.15)'
|
||||
ctx.fillStyle = isDetPothole ? 'rgba(239, 68, 68, 0.15)' : 'rgba(59, 130, 246, 0.15)'
|
||||
ctx.fillRect(x1, y1, width, height)
|
||||
|
||||
// Prepare label text
|
||||
const id = isPothole ? detection.pothole_id : detection.signboard_id
|
||||
const id = detection.pothole_id ?? detection.signboard_id ?? detection.detection_id
|
||||
const confidence = (detection.confidence * 100).toFixed(1)
|
||||
let labelText = isPothole
|
||||
let labelText = isDetPothole
|
||||
? `Pothole #${id}`
|
||||
: `${detection.type || 'Sign'} #${id}`
|
||||
: `${(detection.type || 'Sign').replace(/_/g, ' ')} #${id}`
|
||||
labelText += ` ${confidence}%`
|
||||
|
||||
// Draw label background
|
||||
@@ -587,7 +564,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
ctx.fillStyle = '#ffffff'
|
||||
ctx.fillText(labelText, x1 + 8, y1 - 8)
|
||||
})
|
||||
}, [data.video_info.width, data.video_info.height, isPothole])
|
||||
}, [data.video_info.width, data.video_info.height])
|
||||
|
||||
// Resize canvas to match video display size
|
||||
const resizeCanvas = useCallback(() => {
|
||||
@@ -683,7 +660,9 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
|
||||
// Update last detected GPS coordinates if available
|
||||
if (detections.length > 0) {
|
||||
const detectionId = isPothole ? detections[0].pothole_id : detections[0].signboard_id
|
||||
const det0 = detections[0]
|
||||
const isDetPothole = det0._detType === 'pothole' || det0.type === 'pothole' || (det0.pothole_id !== undefined && !det0.signboard_id)
|
||||
const detectionId = det0.pothole_id ?? det0.signboard_id ?? det0.detection_id
|
||||
const gpsCoords = gpsMap.current.get(detectionId)
|
||||
|
||||
if (gpsCoords) {
|
||||
@@ -696,12 +675,13 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
const newLog: DetectionLog = {
|
||||
frame,
|
||||
detections: detections.map((det) => {
|
||||
const detectionId = isPothole ? det.pothole_id : det.signboard_id
|
||||
const isDetPothole = det._detType === 'pothole' || det.type === 'pothole' || (det.pothole_id !== undefined && !det.signboard_id)
|
||||
const detectionId = det.pothole_id ?? det.signboard_id ?? det.detection_id
|
||||
const gpsCoords = gpsMap.current.get(detectionId)
|
||||
|
||||
return {
|
||||
id: detectionId,
|
||||
type: isSignboard ? det.type : undefined,
|
||||
type: isDetPothole ? 'pothole' : (det.type || 'signboard'),
|
||||
bbox: det.bbox,
|
||||
confidence: det.confidence,
|
||||
latitude: gpsCoords?.lat,
|
||||
@@ -806,7 +786,9 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
|
||||
// Update GPS coordinates immediately on seek
|
||||
if (detections && detections.length > 0) {
|
||||
const detectionId = isPothole ? detections[0].pothole_id : detections[0].signboard_id
|
||||
const det0 = detections[0]
|
||||
const isDetPothole = det0._detType === 'pothole' || det0.type === 'pothole' || (det0.pothole_id !== undefined && !det0.signboard_id)
|
||||
const detectionId = det0.pothole_id ?? det0.signboard_id ?? det0.detection_id
|
||||
const gpsCoords = gpsMap.current.get(detectionId)
|
||||
|
||||
if (gpsCoords) {
|
||||
@@ -855,7 +837,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
Video Playback with Detection
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Watch the video with real-time {isPothole ? "pothole" : "signboard"} detection overlays
|
||||
Watch the video with real-time {isCombined ? "pothole & signboard" : isPothole ? "pothole" : "signboard"} detection overlays
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
@@ -927,7 +909,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold mb-2">Detection Logs</h4>
|
||||
<p className="text-xs text-muted-foreground mb-3">
|
||||
Real-time frame-by-frame {isPothole ? "pothole" : "signboard"} tracking (last {MAX_LOGS})
|
||||
Real-time frame-by-frame {isCombined ? "pothole & signboard" : isPothole ? "pothole" : "signboard"} tracking (last {MAX_LOGS})
|
||||
</p>
|
||||
</div>
|
||||
<ScrollArea className="h-[400px] rounded-md border bg-muted/30 p-4">
|
||||
@@ -956,7 +938,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
{log.detections.map((det, idx) => (
|
||||
<div key={idx} className="space-y-1">
|
||||
<div className="font-medium text-foreground">
|
||||
{isPothole ? (
|
||||
{det.type === 'pothole' ? (
|
||||
<>Pothole ID: {det.id}</>
|
||||
) : (
|
||||
<>{det.type || 'Signboard'} ID: {det.id}</>
|
||||
|
||||
@@ -167,7 +167,7 @@ export async function fetchAllLocations(): Promise<Location[]> {
|
||||
export interface Video {
|
||||
id: string
|
||||
filename: string
|
||||
detection_type: "pothole-detection" | "sign-board-detection"
|
||||
detection_type: "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
|
||||
status: "pending" | "processing" | "completed" | "failed"
|
||||
unique_potholes?: number
|
||||
unique_signboards?: number
|
||||
@@ -186,7 +186,7 @@ export async function fetchVideos(): Promise<Video[]> {
|
||||
return response.videos.map(v => ({
|
||||
id: v.video_id,
|
||||
filename: v.video_id, // Using video_id as filename since backend doesn't provide it
|
||||
detection_type: v.summary?.unique_potholes !== undefined ? "pothole-detection" : "sign-board-detection" as const,
|
||||
detection_type: (v.summary?.unique_potholes !== undefined && v.summary?.unique_signboards !== undefined) ? "pot-sign-detection" as const : v.summary?.unique_potholes !== undefined ? "pothole-detection" as const : "sign-board-detection" as const,
|
||||
status: v.status as Video["status"],
|
||||
unique_potholes: v.summary?.unique_potholes,
|
||||
unique_signboards: v.summary?.unique_signboards,
|
||||
|
||||
36
lib/types.ts
36
lib/types.ts
@@ -1,4 +1,4 @@
|
||||
export type DetectionType = "pothole-detection" | "sign-board-detection"
|
||||
export type DetectionType = "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
|
||||
|
||||
export type DetectionData = {
|
||||
video_id: string
|
||||
@@ -18,44 +18,50 @@ export type DetectionData = {
|
||||
detection_rate: number
|
||||
}
|
||||
pothole_list?: Array<{
|
||||
pothole_id: number
|
||||
pothole_id?: number
|
||||
detection_id?: number
|
||||
type?: string
|
||||
first_detected_frame: number
|
||||
first_detected_time: number
|
||||
confidence: number
|
||||
bbox?: { x1: number; y1: number; x2: number; y2: number }
|
||||
lat?: number
|
||||
lng?: number
|
||||
}>
|
||||
signboard_list?: Array<{
|
||||
signboard_id: number
|
||||
signboard_id?: number
|
||||
detection_id?: number
|
||||
type: string
|
||||
first_detected_frame: number
|
||||
first_detected_time: number
|
||||
confidence: number
|
||||
bbox?: { x1: number; y1: number; x2: number; y2: number }
|
||||
lat?: number
|
||||
lng?: number
|
||||
}>
|
||||
frames: Array<{
|
||||
frame_id: number
|
||||
// Legacy format: separate arrays
|
||||
potholes?: Array<{
|
||||
pothole_id: number
|
||||
bbox: {
|
||||
x1: number
|
||||
y1: number
|
||||
x2: number
|
||||
y2: number
|
||||
}
|
||||
bbox: { x1: number; y1: number; x2: number; y2: number }
|
||||
confidence: number
|
||||
}>
|
||||
signboards?: Array<{
|
||||
signboard_id: number
|
||||
type: string
|
||||
bbox: {
|
||||
x1: number
|
||||
y1: number
|
||||
x2: number
|
||||
y2: number
|
||||
}
|
||||
bbox: { x1: number; y1: number; x2: number; y2: number }
|
||||
confidence: number
|
||||
}>
|
||||
// Flat format (pot-sign-detection): unified detections array
|
||||
detections?: Array<{
|
||||
frame_id: number
|
||||
detection_id: number
|
||||
type: string
|
||||
confidence: number
|
||||
bbox: { x1: number; y1: number; x2: number; y2: number }
|
||||
center?: { x: number; y: number }
|
||||
area?: number
|
||||
}>
|
||||
}>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user