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

Changes in UI

Browse Source
This commit is contained in:
sumona-banerjeee
2026-02-11 16:07:07 +05:30
parent 3c3aef7d82
commit 09cd20e838
23 changed files with 485 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,16 +28,14 @@ export function CompactProjectSelector({
return (
<div className="flex flex-wrap items-center gap-3 p-3 rounded-xl bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50">
{/* Project Dropdown */}
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-indigo-100 dark:bg-indigo-900/50">
<FolderOpen className="h-4 w-4 text-indigo-500" />
</div>
<div className="flex flex-col min-w-[120px]">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">Project</span>
<Select
value={selectedProjectId || ""}
onValueChange={onProjectChange}
disabled={isLoading || projects.length === 0}
>
<SelectTrigger className="w-[220px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
<SelectTrigger className="h-auto p-0 border-0 shadow-none focus:ring-0 text-sm font-bold text-gray-900 dark:text-white bg-transparent text-left">
<SelectValue placeholder="Select project" />
</SelectTrigger>
<SelectContent>
@@ -53,12 +51,10 @@ export function CompactProjectSelector({
{/* Corridor Badge */}
{selectedProject?.corridor_name && (
<>
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-emerald-100 dark:bg-emerald-900/50">
<MapPin className="h-3.5 w-3.5 text-emerald-500" />
</div>
<span className="text-sm text-gray-600 dark:text-gray-300">
<div className="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-2" />
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">Corridor</span>
<span className="text-xs font-bold text-gray-600 dark:text-gray-400">
{selectedProject.corridor_name}
</span>
</div>
@@ -68,12 +64,10 @@ export function CompactProjectSelector({
{/* State Badge */}
{selectedProject?.state && (
<>
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-purple-100 dark:bg-purple-900/50">
<Building2 className="h-3.5 w-3.5 text-purple-500" />
</div>
<span className="text-sm text-gray-600 dark:text-gray-300">
<div className="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-2" />
<div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">State</span>
<span className="text-xs font-bold text-gray-600 dark:text-gray-400">
{selectedProject.state}
</span>
</div>

2
components/dashboard/dashboard-map-content.tsx
View File

@@ -54,7 +54,7 @@ export default function DashboardMapContent({ detections }: DashboardMapContentP
// Get marker color based on detection type
const getMarkerColor = (type: string) => {
if (type.toLowerCase().includes("pothole")) {
return { fill: "#ef4444", stroke: "#dc2626" } // Red for potholes
return { fill: "#10b981", stroke: "#065f46" } // Green for potholes
}
return { fill: "#3b82f6", stroke: "#2563eb" } // Blue for signboards
}

2
components/dashboard/dashboard-map.tsx
View File

@@ -106,7 +106,7 @@ export function DashboardMap({
{/* Compact Color Legend */}
<div className="flex items-center gap-4 text-xs">
<div className="flex items-center gap-1.5">
<div className="w-3 h-3 rounded-full bg-red-500 shadow-sm shadow-red-500/50" />
<div className="w-3 h-3 rounded-full bg-emerald-500 shadow-sm shadow-emerald-500/50" />
<span className="text-gray-600 dark:text-gray-400 font-medium">Potholes ({potholeCount})</span>
</div>
<div className="flex items-center gap-1.5">

2
components/dashboard/detection-donut-chart.tsx
View File

@@ -10,7 +10,7 @@ interface DetectionDonutChartProps {
}
const COLORS = {
pothole: "#ef4444",
pothole: "#10b981",
signboard: "#3b82f6"
}

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

@@ -16,30 +16,26 @@ const gradientStyles = {
green: {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]",
iconShadow: "shadow-lg shadow-[#60a5fa]/20",
valueGradient: "text-gray-900 dark:text-white"
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
coral: {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]",
iconShadow: "shadow-lg shadow-[#60a5fa]/20",
valueGradient: "text-gray-900 dark:text-white"
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
blue: {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]",
iconShadow: "shadow-lg shadow-[#60a5fa]/20",
valueGradient: "text-gray-900 dark:text-white"
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
purple: {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-[#60a5fa]",
iconShadow: "shadow-lg shadow-[#60a5fa]/20",
valueGradient: "text-gray-900 dark:text-white"
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
}
}
@@ -54,7 +50,7 @@ export function GradientStatsCard({
const styles = gradientStyles[gradient]
return (
<Card className="bg-white dark:bg-gray-900 border-none shadow-xl shadow-blue-500/5 overflow-hidden py-8 px-6 transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10 group">
<Card className="bg-white dark:bg-gray-900 border-none shadow-xl shadow-blue-500/5 overflow-hidden py-8 px-6">
<CardContent className="p-0 flex items-center justify-between gap-6">
<div className="flex flex-col gap-1 min-w-0">
<h3 className="text-sm font-bold text-blue-600/70 dark:text-blue-400/70 uppercase tracking-widest">
@@ -65,7 +61,7 @@ export function GradientStatsCard({
<div className="h-14 w-24 bg-gray-100 dark:bg-gray-800 rounded-xl animate-pulse mt-2" />
) : (
<>
<p className="text-5xl md:text-6xl font-black tracking-tighter text-gray-900 dark:text-white leading-tight">
<p className="text-3xl md:text-4xl font-black tracking-tighter leading-tight text-[#1e3a8a]">
{value}
</p>
{subtitle && (
@@ -81,7 +77,6 @@ export function GradientStatsCard({
<div className={`
w-20 h-20 rounded-3xl flex items-center justify-center flex-shrink-0
${styles.iconBg} shadow-[0_10px_30px_rgba(37,99,235,0.2)]
transition-all duration-500 group-hover:scale-110 group-hover:rotate-6
`}>
<Icon className="h-10 w-10 text-white" />
</div>

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

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