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

refactor: refactor the color schema

Browse Source
This commit is contained in:
santasri.pachhal
2026-03-17 18:26:53 +05:30
parent 8ddd2df981
commit caf527f584
59 changed files with 3617 additions and 2642 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/dashboard/dashboard-map.tsx
View File

@@ -3,8 +3,8 @@
import { useEffect, useState } from "react"
import dynamic from "next/dynamic"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Loader2, MapPin, AlertTriangle, RectangleHorizontal } from "lucide-react"
import { fetchAllDetections, type Detection } from "@/lib/api"
import { Loader2, MapPin } from "lucide-react"
import { type Detection } from "@/lib/api"
// Dynamically import the map to avoid SSR issues with Leaflet
const DashboardMapContent = dynamic(
@@ -89,18 +89,18 @@ export function DashboardMap({
}
return (
<Card className={`overflow-hidden pb-0 bg-white/60 rounded-b-none shadow-none border-none ${className}`}>
<Card className={`overflow-hidden ${className}`}>
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-md bg-linear-to-b from-[#225999] to-[#56A5FF] flex items-center justify-center ">
<MapPin className="h-5 w-5 text-white" />
<div className="p-2 rounded-md bg-secondary text-secondary-foreground flex items-center justify-center">
<MapPin className="h-5 w-5" />
</div>
<div>
<CardTitle className="text-base font-bold text-[#2563eb]">
<CardTitle className="text-base font-bold">
Detection Map
</CardTitle>
<p className="text-xs text-gray-500 dark:text-gray-400">
<p className="text-xs text-muted-foreground">
{isLoading ? "Loading..." : `${validDetections.length} detections with GPS coordinates`}
</p>
</div>
@@ -109,43 +109,43 @@ export function DashboardMap({
{/* Compact Color Legend */}
<div className="flex flex-wrap items-center justify-end gap-x-4 gap-y-1 text-[10px] max-w-[60%]">
<div className="flex items-center gap-1">
<div className="w-2.5 h-2.5 rounded-full bg-[#ef4444] shadow-sm shadow-[#ef4444]/30" />
<span className="text-gray-600 dark:text-gray-400 font-medium">Potholes ({counts.pothole})</span>
<div className="w-2.5 h-2.5 rounded-full bg-red-500" />
<span className="text-muted-foreground font-medium">Potholes ({counts.pothole})</span>
</div>
<div className="flex items-center gap-1">
<div className="w-2.5 h-2.5 rounded-full bg-[#3b82f6] shadow-sm shadow-[#3b82f6]/30" />
<span className="text-gray-600 dark:text-gray-400 font-medium">Defected Signs ({counts.defected_sign_board})</span>
<div className="w-2.5 h-2.5 rounded-full bg-blue-500" />
<span className="text-muted-foreground font-medium">Defected Signs ({counts.defected_sign_board})</span>
</div>
<div className="flex items-center gap-1">
<div className="w-2.5 h-2.5 rounded-full bg-[#f59e0b] shadow-sm shadow-[#f59e0b]/30" />
<span className="text-gray-600 dark:text-gray-400 font-medium">Cracks ({counts.road_crack})</span>
<div className="w-2.5 h-2.5 rounded-full bg-amber-500" />
<span className="text-muted-foreground font-medium">Cracks ({counts.road_crack})</span>
</div>
<div className="flex items-center gap-1">
<div className="w-2.5 h-2.5 rounded-full bg-[#6366f1] shadow-sm shadow-[#6366f1]/30" />
<span className="text-gray-600 dark:text-gray-400 font-medium">Markings ({counts.damaged_road_marking})</span>
<div className="w-2.5 h-2.5 rounded-full bg-indigo-500" />
<span className="text-muted-foreground font-medium">Markings ({counts.damaged_road_marking})</span>
</div>
<div className="flex items-center gap-1">
<div className="w-2.5 h-2.5 rounded-full bg-[#10b981] shadow-sm shadow-[#10b981]/30" />
<span className="text-gray-600 dark:text-gray-400 font-medium">Good Signs ({counts.good_sign_board})</span>
<div className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
<span className="text-muted-foreground font-medium">Good Signs ({counts.good_sign_board})</span>
</div>
</div>
</div>
</CardHeader>
<CardContent className="p-0">
<div className="h-[500px] p-2 w-full relative">
<div className="h-[500px] p-2 w-full relative">
{isLoading ? (
<div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
<Loader2 className="h-8 w-8 text-indigo-500" />
<div className="h-full w-full flex items-center justify-center bg-muted/50">
<Loader2 className="h-8 w-8 text-primary animate-spin" />
</div>
) : error ? (
<div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
<p className="text-gray-500">{error}</p>
<div className="h-full w-full flex items-center justify-center bg-muted/50">
<p className="text-muted-foreground">{error}</p>
</div>
) : validDetections.length === 0 ? (
<div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
<div className="h-full w-full flex items-center justify-center bg-muted/50">
<div className="text-center">
<p className="text-gray-500">No detections with GPS coordinates found</p>
<p className="text-sm text-gray-400 mt-1">Process some videos to see detections on the map</p>
<p className="text-muted-foreground">No detections with GPS coordinates found</p>
<p className="text-sm text-muted-foreground mt-1 opacity-70">Process some videos to see detections on the map</p>
</div>
</div>
) : (