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

Final frontend added edit, delete

Browse Source
This commit is contained in:
sumona-banerjeee
2026-02-12 13:18:58 +05:30
parent 9fb8c56f5d
commit 265df337cd
49 changed files with 701 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,11 +16,15 @@ import {
fetchAllLocations,
fetchAllPackages,
createLocation,
updateLocation,
deleteLocation,
type Project,
type Package as PackageType,
type Location,
type LocationCreate
type LocationCreate,
type LocationUpdate
} from "@/lib/api"
import { toast } from "sonner"
export default function CreateLocationPage() {
const [locations, setLocations] = useState<Location[]>([])
@@ -30,11 +34,14 @@ export default function CreateLocationPage() {
const [isLoading, setIsLoading] = useState(true)
const [isModalOpen, setIsModalOpen] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const [success, setSuccess] = useState(false)
const [error, setError] = useState<string | null>(null)
const [loadingProjects, setLoadingProjects] = useState(false)
const [loadingPackages, setLoadingPackages] = useState(false)
// Editing state
const [isEditing, setIsEditing] = useState(false)
const [currentLocation, setCurrentLocation] = useState<Location | null>(null)
// Form fields
const [selectedProjectId, setSelectedProjectId] = useState("")
const [selectedPackageId, setSelectedPackageId] = useState("")
@@ -91,14 +98,14 @@ export default function CreateLocationPage() {
useEffect(() => {
if (!selectedProjectId) {
setPackages([])
setSelectedPackageId("")
if (!isEditing) setSelectedPackageId("")
return
}
const loadPackages = async () => {
const loadPackagesForProject = async () => {
try {
setLoadingPackages(true)
setSelectedPackageId("")
if (!isEditing) setSelectedPackageId("")
const data = await fetchPackagesByProject(selectedProjectId)
setPackages(data)
} catch (err) {
@@ -107,8 +114,8 @@ export default function CreateLocationPage() {
setLoadingPackages(false)
}
}
loadPackages()
}, [selectedProjectId])
loadPackagesForProject()
}, [selectedProjectId, isEditing])
const resetForm = () => {
setSelectedProjectId("")
@@ -121,11 +128,13 @@ export default function CreateLocationPage() {
setEndLat("")
setEndLng("")
setError(null)
setIsEditing(false)
setCurrentLocation(null)
}
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!selectedPackageId) {
if (!selectedPackageId && !isEditing) {
setError("Please select a project and package first")
return
}
@@ -142,41 +151,86 @@ export default function CreateLocationPage() {
setError(null)
try {
const data: LocationCreate = {
package_id: selectedPackageId,
segment_name: segmentName.trim(),
chainage_start_km: chainageStartKm ? parseFloat(chainageStartKm) : null,
chainage_end_km: chainageEndKm ? parseFloat(chainageEndKm) : null,
start_lat: parseFloat(startLat),
start_lng: parseFloat(startLng),
end_lat: parseFloat(endLat),
end_lng: parseFloat(endLng),
if (isEditing && currentLocation) {
const data: LocationUpdate = {
segment_name: segmentName.trim(),
chainage_start_km: chainageStartKm ? parseFloat(chainageStartKm) : null,
chainage_end_km: chainageEndKm ? parseFloat(chainageEndKm) : null,
start_lat: parseFloat(startLat),
start_lng: parseFloat(startLng),
end_lat: parseFloat(endLat),
end_lng: parseFloat(endLng),
}
await updateLocation(currentLocation.id, data)
toast.success("Location updated successfully!")
} else {
const data: LocationCreate = {
package_id: selectedPackageId,
segment_name: segmentName.trim(),
chainage_start_km: chainageStartKm ? parseFloat(chainageStartKm) : null,
chainage_end_km: chainageEndKm ? parseFloat(chainageEndKm) : null,
start_lat: parseFloat(startLat),
start_lng: parseFloat(startLng),
end_lat: parseFloat(endLat),
end_lng: parseFloat(endLng),
}
await createLocation(data)
toast.success("Location created successfully!")
}
await createLocation(data)
setSuccess(true)
// Refresh locations list
await loadLocations()
setTimeout(() => {
resetForm()
setSuccess(false)
setIsModalOpen(false)
}, 2000)
// Close modal and reset form immediately
setIsModalOpen(false)
resetForm()
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to create location")
setError(err instanceof Error ? err.message : `Failed to ${isEditing ? 'update' : 'create'} location`)
} finally {
setIsSubmitting(false)
}
}
const handleEdit = (location: Location) => {
setIsEditing(true)
setCurrentLocation(location)
// Find project for this package
const pkg = allPackages.find(p => p.id === location.package_id)
if (pkg) {
setSelectedProjectId(pkg.project_id)
setSelectedPackageId(location.package_id)
}
setSegmentName(location.segment_name || "")
setChainageStartKm(location.chainage_start_km?.toString() || "")
setChainageEndKm(location.chainage_end_km?.toString() || "")
setStartLat(location.start_lat.toString())
setStartLng(location.start_lng.toString())
setEndLat(location.end_lat.toString())
setEndLng(location.end_lng.toString())
setIsModalOpen(true)
}
const handleDelete = async (location: Location) => {
if (!confirm(`Are you sure you want to delete location "${location.segment_name}"?`)) return
try {
setIsLoading(true)
await deleteLocation(location.id)
toast.success("Location deleted successfully!")
await loadLocations()
} catch (err) {
setError("Failed to delete location")
} finally {
setIsLoading(false)
}
}
const getPackageName = (packageId: string) => {
return allPackages.find(p => p.id === packageId)?.name || packageId
}
const selectedProject = projects.find(p => p.id === selectedProjectId)
const selectedPackage = packages.find(p => p.id === selectedPackageId)
const isFormComplete = selectedPackageId && segmentName.trim() && startLat && startLng && endLat && endLng
const columns = [
@@ -241,7 +295,7 @@ export default function CreateLocationPage() {
<main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
{/* Refined Header */}
<div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
<div className="mb-8">
<div className="flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<MapPin className="h-8 w-8 text-white" />
@@ -259,28 +313,30 @@ export default function CreateLocationPage() {
{/* Error Message */}
{error && !isModalOpen && (
<div className="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 animate-in fade-in slide-in-from-top duration-300">
<div className="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
<span className="text-xs font-bold text-red-500">!</span>
</div>
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
<p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
</div>
)}
{/* Data Table */}
<div className="animate-in fade-in slide-in-from-bottom duration-700 delay-150">
<div>
<DataTable
title="All Locations"
data={locations}
columns={columns}
onAddNew={() => setIsModalOpen(true)}
onAddNew={() => { setIsEditing(false); setIsModalOpen(true); }}
onEdit={handleEdit}
onDelete={handleDelete}
addButtonText="Add New Location"
isLoading={isLoading}
/>
</div>
{/* Footer */}
<div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
<div className="mt-8 text-center">
<p className="text-xs text-gray-400 dark:text-gray-500">
Sentient Geeks Pvt. Ltd.
</p>
@@ -289,7 +345,7 @@ export default function CreateLocationPage() {
</main>
{/* Modal Dialog */}
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
<Dialog open={isModalOpen} onOpenChange={(open) => { if (!open) { setIsModalOpen(false); resetForm(); } else { setIsModalOpen(true); } }}>
<DialogContent
className="max-w-2xl"
onOpenAutoFocus={(e) => e.preventDefault()}
@@ -297,98 +353,97 @@ export default function CreateLocationPage() {
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<MapPin className="h-5 w-5 text-blue-500" />
Create New Location
{isEditing ? 'Edit Location' : 'Create New Location'}
</DialogTitle>
<DialogDescription>
Select project & package, then fill in the location details
{isEditing ? 'Update disclosure details for your road infrastructure segment' : 'Select project & package, then fill in the location details'}
</DialogDescription>
</DialogHeader>
{/* Success Message in Modal */}
{success && (
<div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800 animate-in fade-in slide-in-from-top duration-300">
<CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
<p className="text-sm font-medium text-blue-700 dark:text-blue-400">Location created successfully!</p>
</div>
)}
{/* Error Message in Modal */}
{error && (
<div className="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 animate-in fade-in slide-in-from-top duration-300">
<div className="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
<span className="text-xs font-bold text-red-500">!</span>
</div>
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
<p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
{/* Step 1: Select Project */}
<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>
{!isEditing && (
<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-xs font-bold text-blue-700 dark:text-blue-400">Select Project</p>
</div>
<p className="text-xs font-bold text-blue-700 dark:text-blue-400">Select Project</p>
<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">
{loadingProjects ? (
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<span className="text-gray-400">Loading projects...</span>
</div>
) : (
<SelectValue placeholder="Choose a project" />
)}
</SelectTrigger>
<SelectContent>
{projects.map(project => (
<SelectItem key={project.id} value={project.id}>
<span className="font-medium">{project.name}</span>
</SelectItem>
))}
</SelectContent>
</Select>
</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">
{loadingProjects ? (
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<span className="text-gray-400">Loading projects...</span>
</div>
) : (
<SelectValue placeholder="Choose a project" />
)}
</SelectTrigger>
<SelectContent>
{projects.map(project => (
<SelectItem key={project.id} value={project.id}>
<span className="font-medium">{project.name}</span>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
{/* Step 2: Select Package */}
<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>
{!isEditing && (
<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 ${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-xs font-bold text-blue-700 dark:text-blue-400">Select Package</p>
</div>
<p className="text-xs font-bold text-blue-700 dark:text-blue-400">Select Package</p>
<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">
{loadingPackages ? (
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<span className="text-gray-400">Loading packages...</span>
</div>
) : (
<SelectValue placeholder={selectedProjectId ? "Choose a package" : "Select project first"} />
)}
</SelectTrigger>
<SelectContent>
{packages.map(pkg => (
<SelectItem key={pkg.id} value={pkg.id}>
<span className="font-medium">{pkg.name}</span>
</SelectItem>
))}
</SelectContent>
</Select>
</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">
{loadingPackages ? (
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<span className="text-gray-400">Loading packages...</span>
</div>
) : (
<SelectValue placeholder={selectedProjectId ? "Choose a package" : "Select project first"} />
)}
</SelectTrigger>
<SelectContent>
{packages.map(pkg => (
<SelectItem key={pkg.id} value={pkg.id}>
<span className="font-medium">{pkg.name}</span>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
{/* Step 3: Location Details */}
<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-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 className={`space-y-4 ${selectedPackageId || isEditing ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
{!isEditing && (
<div className="flex items-center gap-2">
<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-xs font-bold text-gray-700 dark:text-gray-300">Location Information</p>
</div>
<p className="text-xs font-bold text-gray-700 dark:text-gray-300">Location Information</p>
</div>
)}
{/* Segment Name & Chainage Row */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -535,12 +590,12 @@ export default function CreateLocationPage() {
{isSubmitting ? (
<span className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
Creating...
{isEditing ? 'Updating...' : 'Creating...'}
</span>
) : (
<span className="flex items-center gap-2">
<MapPin className="h-4 w-4" />
Create Location
{isEditing ? <CheckCircle2 className="h-4 w-4" /> : <MapPin className="h-4 w-4" />}
{isEditing ? 'Update Location' : 'Create Location'}
</span>
)}
</Button>

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

@@ -14,10 +14,14 @@ import {
fetchProjects,
fetchAllPackages,
createPackage,
updatePackage,
deletePackage,
type Project,
type Package as PackageType,
type PackageCreate
type PackageCreate,
type PackageUpdate
} from "@/lib/api"
import { toast } from "sonner"
export default function CreatePackagePage() {
const [packages, setPackages] = useState<PackageType[]>([])
@@ -25,10 +29,13 @@ export default function CreatePackagePage() {
const [isLoading, setIsLoading] = useState(true)
const [isModalOpen, setIsModalOpen] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const [success, setSuccess] = useState(false)
const [error, setError] = useState<string | null>(null)
const [loadingProjects, setLoadingProjects] = useState(false)
// Editing state
const [isEditing, setIsEditing] = useState(false)
const [currentPackage, setCurrentPackage] = useState<PackageType | null>(null)
// Form fields
const [selectedProjectId, setSelectedProjectId] = useState("")
const [name, setName] = useState("")
@@ -70,6 +77,8 @@ export default function CreatePackagePage() {
setName("")
setRegion("")
setError(null)
setIsEditing(false)
setCurrentPackage(null)
}
const handleSubmit = async (e: React.FormEvent) => {
@@ -87,36 +96,64 @@ export default function CreatePackagePage() {
setError(null)
try {
const data: PackageCreate = {
project_id: selectedProjectId,
name: name.trim(),
region: region.trim() || null,
if (isEditing && currentPackage) {
const data: PackageUpdate = {
name: name.trim(),
region: region.trim() || null,
}
await updatePackage(currentPackage.id, data)
toast.success("Package updated successfully!")
} else {
const data: PackageCreate = {
project_id: selectedProjectId,
name: name.trim(),
region: region.trim() || null,
}
await createPackage(data)
toast.success("Package created successfully!")
}
await createPackage(data)
setSuccess(true)
// Refresh packages list
await loadPackages()
setTimeout(() => {
resetForm()
setSuccess(false)
setIsModalOpen(false)
}, 2000)
// Close modal and reset form immediately
setIsModalOpen(false)
resetForm()
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to create package")
setError(err instanceof Error ? err.message : `Failed to ${isEditing ? 'update' : 'create'} package`)
} finally {
setIsSubmitting(false)
}
}
const handleEdit = (pkg: PackageType) => {
setIsEditing(true)
setCurrentPackage(pkg)
setSelectedProjectId(pkg.project_id)
setName(pkg.name || "")
setRegion(pkg.region || "")
setIsModalOpen(true)
}
const handleDelete = async (pkg: PackageType) => {
if (!confirm(`Are you sure you want to delete package "${pkg.name}"?`)) return
try {
setIsLoading(true)
await deletePackage(pkg.id)
toast.success("Package deleted successfully!")
await loadPackages()
} catch (err) {
setError("Failed to delete package")
} finally {
setIsLoading(false)
}
}
const getProjectName = (projectId: string) => {
return projects.find(p => p.id === projectId)?.name || projectId
}
const selectedProject = projects.find(p => p.id === selectedProjectId)
const columns = [
{
key: "name",
@@ -162,7 +199,7 @@ export default function CreatePackagePage() {
<main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
{/* Refined Header */}
<div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
<div className="mb-8">
<div className="flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<Package className="h-8 w-8 text-white" />
@@ -180,28 +217,30 @@ export default function CreatePackagePage() {
{/* Error Message */}
{error && !isModalOpen && (
<div className="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 animate-in fade-in slide-in-from-top duration-300">
<div className="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
<span className="text-xs font-bold text-red-500">!</span>
</div>
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
<p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
</div>
)}
{/* Data Table */}
<div className="animate-in fade-in slide-in-from-bottom duration-700 delay-150">
<div>
<DataTable
title="All Packages"
data={packages}
columns={columns}
onAddNew={() => setIsModalOpen(true)}
onAddNew={() => { setIsEditing(false); setIsModalOpen(true); }}
onEdit={handleEdit}
onDelete={handleDelete}
addButtonText="Add New Package"
isLoading={isLoading}
/>
</div>
{/* Footer */}
<div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
<div className="mt-8 text-center">
<p className="text-xs text-gray-400 dark:text-gray-500">
Sentient Geeks Pvt. Ltd.
</p>
@@ -210,7 +249,7 @@ export default function CreatePackagePage() {
</main>
{/* Modal Dialog */}
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
<Dialog open={isModalOpen} onOpenChange={(open) => { if (!open) { setIsModalOpen(false); resetForm(); } else { setIsModalOpen(true); } }}>
<DialogContent
className="max-w-2xl"
onOpenAutoFocus={(e) => e.preventDefault()}
@@ -218,69 +257,67 @@ export default function CreatePackagePage() {
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Package className="h-5 w-5 text-blue-500" />
Create New Package
{isEditing ? 'Edit Package' : 'Create New Package'}
</DialogTitle>
<DialogDescription>
Select a project and fill in the package details
{isEditing ? 'Update disclosure details for your road infrastructure package' : 'Select a project and fill in the package details'}
</DialogDescription>
</DialogHeader>
{/* Success Message in Modal */}
{success && (
<div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800 animate-in fade-in slide-in-from-top duration-300">
<CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
<p className="text-sm font-medium text-blue-700 dark:text-blue-400">Package created successfully!</p>
</div>
)}
{/* Error Message in Modal */}
{error && (
<div className="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 animate-in fade-in slide-in-from-top duration-300">
<div className="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
<span className="text-xs font-bold text-red-500">!</span>
</div>
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
<p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
</div>
)}
<form onSubmit={handleSubmit} className="space-y-8">
{/* Step 1: Select Project */}
<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-blue-600 flex items-center justify-center">
<span className="text-white text-xs font-bold">1</span>
{!isEditing && (
<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-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>
</div>
<p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
<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">
{loadingProjects ? (
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<span className="text-gray-400">Loading projects...</span>
</div>
) : (
<SelectValue placeholder="Choose a project" />
)}
</SelectTrigger>
<SelectContent>
{projects.map(project => (
<SelectItem key={project.id} value={project.id}>
<span className="font-medium">{project.name}</span>
</SelectItem>
))}
</SelectContent>
</Select>
</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">
{loadingProjects ? (
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<span className="text-gray-400">Loading projects...</span>
</div>
) : (
<SelectValue placeholder="Choose a project" />
)}
</SelectTrigger>
<SelectContent>
{projects.map(project => (
<SelectItem key={project.id} value={project.id}>
<span className="font-medium">{project.name}</span>
</SelectItem>
))}
</SelectContent>
</Select>
</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-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
<span className="text-white text-xs font-bold">2</span>
<div className={`space-y-4 ${selectedProjectId || isEditing ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
{!isEditing && (
<div className="flex items-center gap-2">
<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>
<p className="text-sm font-bold text-gray-700 dark:text-gray-300">Package Information</p>
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
@@ -307,7 +344,7 @@ export default function CreatePackagePage() {
value={region}
onChange={(e) => setRegion(e.target.value)}
placeholder="Region"
className="h-10 text-sm"
className="h-10 text-sm focus-visible:ring-blue-500"
/>
</div>
</div>
@@ -335,12 +372,12 @@ export default function CreatePackagePage() {
{isSubmitting ? (
<span className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
Creating...
{isEditing ? 'Updating...' : 'Creating...'}
</span>
) : (
<span className="flex items-center gap-2">
<Package className="h-4 w-4" />
Create Package
{isEditing ? <CheckCircle2 className="h-4 w-4" /> : <Package className="h-4 w-4" />}
{isEditing ? 'Update Package' : 'Create Package'}
</span>
)}
</Button>

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

@@ -9,16 +9,20 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
import { Loader2, CheckCircle2, FolderPlus, MapPin, Building2, Route, X } from "lucide-react"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import { DataTable } from "@/components/data-table"
import { createProject, fetchProjects, type ProjectCreate, type Project } from "@/lib/api"
import { createProject, fetchProjects, updateProject, deleteProject, type ProjectCreate, type Project, type ProjectUpdate } from "@/lib/api"
import { toast } from "sonner"
export default function CreateProjectPage() {
const [projects, setProjects] = useState<Project[]>([])
const [isLoading, setIsLoading] = useState(true)
const [isModalOpen, setIsModalOpen] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const [success, setSuccess] = useState(false)
const [error, setError] = useState<string | null>(null)
// Editing state
const [isEditing, setIsEditing] = useState(false)
const [currentProject, setCurrentProject] = useState<Project | null>(null)
// Form fields
const [name, setName] = useState("")
const [state, setState] = useState("")
@@ -55,6 +59,8 @@ export default function CreateProjectPage() {
setEndLat("")
setEndLng("")
setError(null)
setIsEditing(false)
setCurrentProject(null)
}
const handleSubmit = async (e: React.FormEvent) => {
@@ -68,34 +74,73 @@ export default function CreateProjectPage() {
setError(null)
try {
const data: ProjectCreate = {
name: name.trim(),
state: state.trim() || null,
corridor_name: corridorName.trim() || null,
start_lat: startLat ? parseFloat(startLat) : null,
start_lng: startLng ? parseFloat(startLng) : null,
end_lat: endLat ? parseFloat(endLat) : null,
end_lng: endLng ? parseFloat(endLng) : null,
if (isEditing && currentProject) {
const data: ProjectUpdate = {
name: name.trim(),
state: state.trim() || null,
corridor_name: corridorName.trim() || null,
start_lat: startLat ? parseFloat(startLat) : null,
start_lng: startLng ? parseFloat(startLng) : null,
end_lat: endLat ? parseFloat(endLat) : null,
end_lng: endLng ? parseFloat(endLng) : null,
}
await updateProject(currentProject.id, data)
toast.success("Project updated successfully!")
} else {
const data: ProjectCreate = {
name: name.trim(),
state: state.trim() || null,
corridor_name: corridorName.trim() || null,
start_lat: startLat ? parseFloat(startLat) : null,
start_lng: startLng ? parseFloat(startLng) : null,
end_lat: endLat ? parseFloat(endLat) : null,
end_lng: endLng ? parseFloat(endLng) : null,
}
await createProject(data)
toast.success("Project created successfully!")
}
await createProject(data)
setSuccess(true)
// Refresh projects list
await loadProjects()
setTimeout(() => {
resetForm()
setSuccess(false)
setIsModalOpen(false)
}, 2000)
// Close modal and reset form immediately
setIsModalOpen(false)
resetForm()
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to create project")
setError(err instanceof Error ? err.message : `Failed to ${isEditing ? 'update' : 'create'} project`)
} finally {
setIsSubmitting(false)
}
}
const handleEdit = (project: Project) => {
setIsEditing(true)
setCurrentProject(project)
setName(project.name || "")
setState(project.state || "")
setCorridorName(project.corridor_name || "")
setStartLat(project.start_lat?.toString() || "")
setStartLng(project.start_lng?.toString() || "")
setEndLat(project.end_lat?.toString() || "")
setEndLng(project.end_lng?.toString() || "")
setIsModalOpen(true)
}
const handleDelete = async (project: Project) => {
if (!confirm(`Are you sure you want to delete project "${project.name}"?`)) return
try {
setIsLoading(true)
await deleteProject(project.id)
toast.success("Project deleted successfully!")
await loadProjects()
} catch (err) {
setError("Failed to delete project")
} finally {
setIsLoading(false)
}
}
const columns = [
{
key: "name",
@@ -135,7 +180,7 @@ export default function CreateProjectPage() {
<main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
{/* Refined Header */}
<div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
<div className="mb-8">
<div className="flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<FolderPlus className="h-8 w-8 text-white" />
@@ -153,28 +198,30 @@ export default function CreateProjectPage() {
{/* Error Message */}
{error && !isModalOpen && (
<div className="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 animate-in fade-in slide-in-from-top duration-300">
<div className="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
<span className="text-xs font-bold text-red-500">!</span>
</div>
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
<p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
</div>
)}
{/* Data Table */}
<div className="animate-in fade-in slide-in-from-bottom duration-700 delay-150">
<div>
<DataTable
title="All Projects"
data={projects}
columns={columns}
onAddNew={() => setIsModalOpen(true)}
onAddNew={() => { setIsEditing(false); setIsModalOpen(true); }}
onEdit={handleEdit}
onDelete={handleDelete}
addButtonText="Add New Project"
isLoading={isLoading}
/>
</div>
{/* Footer */}
<div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
<div className="mt-8 text-center">
<p className="text-xs text-gray-400 dark:text-gray-500">
Sentient Geeks Pvt. Ltd.
</p>
@@ -191,28 +238,21 @@ export default function CreateProjectPage() {
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<FolderPlus className="h-5 w-5 text-blue-500" />
Create New Project
{isEditing ? 'Edit Project' : 'Create New Project'}
</DialogTitle>
<DialogDescription>
Fill in the details for your new road infrastructure project
{isEditing ? 'Update disclosure details for your road infrastructure project' : 'Fill in the details for your new road infrastructure project'}
</DialogDescription>
</DialogHeader>
{/* Success Message in Modal */}
{success && (
<div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800 animate-in fade-in slide-in-from-top duration-300">
<CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
<p className="text-sm font-medium text-blue-700 dark:text-blue-400">Project created successfully!</p>
</div>
)}
{/* Error Message in Modal */}
{error && (
<div className="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 animate-in fade-in slide-in-from-top duration-300">
<div className="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
<span className="text-xs font-bold text-red-500">!</span>
</div>
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
<p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
</div>
)}
@@ -347,17 +387,17 @@ export default function CreateProjectPage() {
<Button
type="submit"
disabled={isSubmitting || !name.trim()}
className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-700 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-800 text-white"
className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-700 hover:bg-blue-600 text-white"
>
{isSubmitting ? (
<span className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
Creating...
{isEditing ? 'Updating...' : 'Creating...'}
</span>
) : (
<span className="flex items-center gap-2">
<FolderPlus className="h-4 w-4" />
Create Project
{isEditing ? <CheckCircle2 className="h-4 w-4" /> : <FolderPlus className="h-4 w-4" />}
{isEditing ? 'Update Project' : 'Create Project'}
</span>
)}
</Button>

26
app/dashboard/page.tsx
View File

@@ -22,7 +22,7 @@ import {
type Project
} from "@/lib/api"
const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
const API_URL = "http://127.0.0.1:8000/api/v1"
interface ProjectSummary {
project: {
@@ -236,6 +236,8 @@ export default function DashboardPage() {
: pkg.locations || {}
for (const [locName, loc] of Object.entries(locationsToProcess)) {
if (!loc) continue
let locPotholes = 0
let locSignboards = 0
@@ -278,12 +280,12 @@ export default function DashboardPage() {
<main className="ml-16 min-h-screen">
<div className="p-4 px-8 max-w-full mx-auto">
{/* Header */}
<div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-500">
<div className="mb-8 flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center 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">
{/* Constant orbit animations removed */}
<div className="absolute inset-0 bg-white/20 opacity-50"></div>
<div className="absolute inset-0 border-2 border-white/30 rounded-2xl 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">
<path d="M50 20L85 80H15L50 20Z" stroke="currentColor" strokeWidth="6" strokeLinejoin="round" />
<path d="M40 80L50 55L60 80" stroke="currentColor" strokeWidth="6" />
</svg>
@@ -300,14 +302,14 @@ export default function DashboardPage() {
{/* Error Display */}
{error && (
<div className="mb-4 flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 text-sm animate-in fade-in duration-300">
<div className="mb-4 flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 text-sm">
<AlertCircle className="h-4 w-4 flex-shrink-0" />
<p>{error}</p>
</div>
)}
{/* Stats Cards - Top Row */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 animate-in fade-in slide-in-from-bottom duration-500">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<GradientStatsCard
title="Total Detections"
subtitle="All detected objects"
@@ -335,7 +337,7 @@ export default function DashboardPage() {
</div>
{/* Filter Selector - Above main content */}
<div className="mb-6 animate-in fade-in slide-in-from-bottom duration-500 delay-100">
<div className="mb-6">
<FilterSelector
projects={projects}
selectedProjectId={selectedProjectId}
@@ -351,7 +353,7 @@ export default function DashboardPage() {
</div>
{/* Charts Row - Side by Side */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4 animate-in fade-in slide-in-from-bottom duration-500 delay-200">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
{/* Left Chart - Detection Distribution */}
<Card className="rounded-xl overflow-hidden">
<CardHeader className="pb-2 border-b border-[var(--border)]">
@@ -395,7 +397,7 @@ export default function DashboardPage() {
</div>
{/* Map - Full Width Below Charts */}
<div className="animate-in fade-in slide-in-from-bottom duration-500 delay-300">
<div>
<DashboardMap
selectedProjectId={selectedProjectId}
selectedPackageId={selectedPackageId}
@@ -405,7 +407,7 @@ export default function DashboardPage() {
</div>
{/* Footer */}
<div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
<div className="mt-8 text-center">
<p className="text-xs text-gray-400 dark:text-gray-500">
Sentient Geeks Pvt. Ltd.
</p>

225
app/globals.css
View File

@@ -154,6 +154,7 @@
--color-sidebar-ring: var(--sidebar-ring);
}
/* Base styles */
@layer base {
* {
@apply border-border outline-ring/50;
@@ -164,213 +165,31 @@
}
}
/* Premium Background with Animated Mesh Gradient */
@layer utilities {
.bg-mesh-gradient {
background: #f8fafc;
}
.dark .bg-mesh-gradient {
background: hsla(210, 30%, 15%, 1);
}
/* Glassmorphism Card */
.glass-card {
background: oklch(1 0 0 / 0.7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid oklch(1 0 0 / 0.2);
box-shadow:
0 4px 6px -1px oklch(0 0 0 / 0.05),
0 10px 15px -3px oklch(0 0 0 / 0.08),
0 20px 25px -5px oklch(0 0 0 / 0.05),
inset 0 1px 0 oklch(1 0 0 / 0.5);
}
.dark .glass-card {
background: oklch(0.18 0.02 280 / 0.7);
border: 1px solid oklch(1 0 0 / 0.08);
box-shadow:
0 4px 6px -1px oklch(0 0 0 / 0.15),
0 10px 15px -3px oklch(0 0 0 / 0.20),
0 20px 25px -5px oklch(0 0 0 / 0.15),
inset 0 1px 0 oklch(1 0 0 / 0.05);
}
/* Gradient Text */
.text-gradient {
background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.60 0.20 200));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.dark .text-gradient {
background: linear-gradient(135deg, oklch(0.75 0.20 264), oklch(0.70 0.18 200));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Gradient Button */
.btn-gradient {
background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.50 0.22 280));
box-shadow:
0 4px 14px 0 oklch(0.55 0.24 264 / 0.35),
inset 0 1px 0 oklch(1 0 0 / 0.15);
transition: all 0.3s ease;
}
.btn-gradient:hover {
box-shadow:
0 6px 20px 0 oklch(0.55 0.24 264 / 0.45),
inset 0 1px 0 oklch(1 0 0 / 0.2);
transform: translateY(-1px);
}
.btn-gradient:active {
transform: translateY(0);
box-shadow:
0 2px 8px 0 oklch(0.55 0.24 264 / 0.30),
inset 0 1px 0 oklch(1 0 0 / 0.15);
}
/* Card Glow Border */
.card-glow {
position: relative;
}
.card-glow::before {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(135deg, oklch(0.55 0.24 264 / 0.3), oklch(0.60 0.20 200 / 0.3));
border-radius: inherit;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.card-glow:hover::before {
opacity: 1;
}
/* Progress Bar Gradient */
.progress-gradient {
background: linear-gradient(90deg, oklch(0.55 0.24 264), oklch(0.60 0.20 200), oklch(0.65 0.18 160));
background-size: 200% 100%;
animation: progress-shimmer 2s ease infinite;
}
@keyframes progress-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Subtle Float Animation */
.float-subtle {
animation: float-subtle 6s ease-in-out infinite;
}
@keyframes float-subtle {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
/* Input Focus Glow */
.input-glow:focus-within {
box-shadow: 0 0 0 3px oklch(0.55 0.24 264 / 0.15);
}
/* Step Indicator */
.step-active {
background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.50 0.22 280));
color: white;
box-shadow: 0 2px 8px oklch(0.55 0.24 264 / 0.3);
}
.step-completed {
background: oklch(0.65 0.18 160);
color: white;
}
.step-pending {
background: oklch(0.90 0.02 280);
color: oklch(0.50 0.02 280);
}
.dark .step-pending {
background: oklch(0.25 0.02 280);
color: oklch(0.60 0.02 280);
}
/*
Definitive Layout Stability Reset
Prevents Radix UI / Shadcn from "sliding" content when scroll-locking occurs
*/
:root {
--removed-body-scroll-bar-size: 0px;
}
@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;
}
}
/* Prevent layout shift when Dialog locks body scroll */
html {
overflow-y: scroll;
/* always show scrollbar to prevent width jump */
scrollbar-gutter: stable;
}
body[data-scroll-locked] {
overflow: hidden;
padding-right: var(--removed-body-scroll-bar-size, 0px) !important;
padding-right: 0 !important;
margin-right: 0 !important;
overflow: hidden !important;
}
/* Fix for fixed position elements like sidebars/headers */
[data-radix-scroll-area-viewport] {
scrollbar-width: none;
-ms-overflow-style: none;
}
.static-immediate {
transition: none !important;
animation: none !important;
}

8
app/layout.tsx
View File

@@ -31,6 +31,9 @@ export const metadata: Metadata = {
},
}
import { Toaster } from "@/components/ui/sonner"
import { TooltipProvider } from "@/components/ui/tooltip"
export default function RootLayout({
children,
}: Readonly<{
@@ -39,7 +42,10 @@ export default function RootLayout({
return (
<html lang="en">
<body className={`font-sans antialiased`} suppressHydrationWarning>
{children}
<TooltipProvider>
{children}
<Toaster />
</TooltipProvider>
<Analytics />
</body>
</html>

8
app/map/page.tsx
View File

@@ -11,7 +11,7 @@ export default function MapPage() {
<div className="container mx-auto px-4 py-8 max-w-7xl relative z-10">
{/* Header */}
<div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
<div className="mb-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl md:text-4xl font-bold text-gradient leading-tight">
@@ -25,12 +25,12 @@ export default function MapPage() {
</div>
{/* Map */}
<div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
<div className="">
<DashboardMap className="h-[calc(100vh-200px)] min-h-[500px]" />
</div>
{/* Legend */}
<div className="mt-6 flex flex-wrap gap-6 animate-in fade-in duration-700 delay-200">
<div className="mt-6 flex flex-wrap gap-6">
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded-full bg-red-500 border-2 border-red-600" />
<span className="text-sm text-muted-foreground">Pothole</span>
@@ -42,7 +42,7 @@ export default function MapPage() {
</div>
{/* Footer */}
<div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
<div className="mt-8 text-center">
<p className="text-sm text-muted-foreground">
Sentient Geeks Pvt. Ltd.
</p>

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

@@ -25,7 +25,7 @@ export default function NewAnalysisPage() {
<div className="container mx-auto px-6 py-10 max-w-7xl relative z-10">
{/* Refined Left-Aligned Header */}
<div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
<div className="mb-8 flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
@@ -37,12 +37,12 @@ export default function NewAnalysisPage() {
</div>
{/* Project Selection Section */}
<div className="animate-in fade-in slide-in-from-bottom duration-700 delay-150">
<div>
<ProjectSelectionSection onSelectionComplete={handleSelectionComplete} />
</div>
{/* Footer */}
<div className="mt-12 text-center animate-in fade-in duration-700 delay-300">
<div className="mt-12 text-center">
<p className="text-sm text-gray-400 dark:text-gray-500">
Sentient Geeks Pvt. Ltd.
</p>

8
app/results/page.tsx
View File

@@ -16,7 +16,7 @@ import {
import { getVideoFile, clearVideoFile } from "@/lib/video-storage"
import { DetectionData, DetectionType } from "@/lib/types"
const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
const API_URL = "http://127.0.0.1:8000/api/v1"
export default function ResultsPage() {
const router = useRouter()
@@ -126,7 +126,7 @@ export default function ResultsPage() {
<main className="ml-16 min-h-screen">
<div className="container mx-auto px-6 py-8 max-w-full">
{/* Refined Header */}
<div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
<div className="mb-8 flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
@@ -142,7 +142,7 @@ export default function ResultsPage() {
{/* Session Info Bar */}
{session && (
<div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
<div className="mb-6">
<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-12">
<div className="flex flex-col">
@@ -170,7 +170,7 @@ export default function ResultsPage() {
{/* Video Player Section */}
{detectionData && videoId && (
<div className="animate-in fade-in slide-in-from-bottom duration-700">
<div>
<VideoPlayerSection
data={detectionData}
videoId={videoId}

16
app/upload/page.tsx
View File

@@ -18,8 +18,8 @@ import {
} from "@/lib/api"
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"
const API_URL = "http://127.0.0.1:8000/api/v1"
const WS_URL = "ws://127.0.0.1:8000/api/v1"
type DetectionType = "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
@@ -176,7 +176,7 @@ export default function UploadPage() {
<div className="flex-1 container mx-auto px-6 py-6 max-w-7xl relative z-10 flex flex-col">
{/* Refined Header */}
<div className="mb-6 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
<div className="mb-6 flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
@@ -189,7 +189,7 @@ export default function UploadPage() {
{/* Compact Session Info Bar */}
{session && (
<div className="mb-4 animate-in fade-in slide-in-from-top duration-500 delay-100">
<div className="mb-4">
<div className="rounded-xl px-4 py-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-12">
@@ -226,7 +226,7 @@ export default function UploadPage() {
)}
{/* Upload Card */}
<Card className="rounded-xl overflow-hidden animate-in fade-in slide-in-from-bottom duration-700 delay-150 flex-1">
<Card className="rounded-xl overflow-hidden flex-1">
<CardHeader className="pb-4 border-b border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-900">
<CardTitle className="text-xl font-bold">
<span className="bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 dark:from-blue-400 dark:via-blue-300 dark:to-blue-400 bg-clip-text text-transparent">
@@ -322,7 +322,7 @@ export default function UploadPage() {
{/* Error Display */}
{error && (
<div className="flex items-start gap-2 p-3 rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 animate-in fade-in slide-in-from-top duration-300">
<div className="flex items-start gap-2 p-3 rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-4 h-4 rounded-full bg-red-100 dark:bg-red-900/50 flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-[10px] font-bold text-red-500">!</span>
</div>
@@ -352,7 +352,7 @@ export default function UploadPage() {
{/* Progress Section */}
{uploading && (
<div className="space-y-3 p-4 rounded-xl bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 animate-in fade-in slide-in-from-top duration-500">
<div className="space-y-3 p-4 rounded-xl bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800">
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span className="font-medium text-gray-700 dark:text-gray-300 text-xs">Processing Progress</span>
@@ -374,7 +374,7 @@ export default function UploadPage() {
</Card>
{/* Footer */}
<div className="mt-4 text-center animate-in fade-in duration-700 delay-300">
<div className="mt-4 text-center">
<p className="text-xs text-gray-400 dark:text-gray-500">
Sentient Geeks Pvt. Ltd.
</p>