changed full frontend,added new features, and components.
This commit is contained in:
sumona-banerjeee
@@ -21,30 +21,59 @@ const DashboardMapContent = dynamic(
|
||||
|
||||
interface DashboardMapProps {
|
||||
className?: string
|
||||
selectedProjectId?: string | null
|
||||
selectedPackageId?: string | null
|
||||
selectedLocationId?: string | null
|
||||
projectSummary?: any
|
||||
}
|
||||
|
||||
export function DashboardMap({ className }: DashboardMapProps) {
|
||||
export function DashboardMap({
|
||||
className,
|
||||
selectedProjectId,
|
||||
selectedPackageId,
|
||||
selectedLocationId,
|
||||
projectSummary
|
||||
}: DashboardMapProps) {
|
||||
const [detections, setDetections] = useState<Detection[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const loadDetections = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
const data = await fetchAllDetections()
|
||||
setDetections(data)
|
||||
} catch (err) {
|
||||
console.error("Failed to load detections:", err)
|
||||
setError("Failed to load detection data")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
if (!projectSummary) {
|
||||
setDetections([])
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
loadDetections()
|
||||
}, [])
|
||||
try {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
const filteredDetections: Detection[] = []
|
||||
|
||||
const packagesToProcess = selectedPackageId && selectedPackageId !== "all"
|
||||
? { [selectedPackageId]: projectSummary.packages[selectedPackageId] }
|
||||
: projectSummary.packages || {}
|
||||
|
||||
for (const [pkgName, pkg] of Object.entries(packagesToProcess)) {
|
||||
const locationsToProcess = selectedLocationId && selectedLocationId !== "all"
|
||||
? { [selectedLocationId]: (pkg as any).locations[selectedLocationId] }
|
||||
: (pkg as any).locations || {}
|
||||
|
||||
for (const [locName, loc] of Object.entries(locationsToProcess)) {
|
||||
const locationDetections = (loc as any).detections || []
|
||||
filteredDetections.push(...locationDetections)
|
||||
}
|
||||
}
|
||||
|
||||
setDetections(filteredDetections)
|
||||
} catch (err) {
|
||||
console.error("Failed to extract detections:", err)
|
||||
setError("Failed to load detection data")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [projectSummary, selectedPackageId, selectedLocationId])
|
||||
|
||||
// Filter detections with valid GPS coordinates
|
||||
const validDetections = detections.filter(d => d.latitude && d.longitude)
|
||||
@@ -57,18 +86,16 @@ export function DashboardMap({ className }: DashboardMapProps) {
|
||||
const signboardCount = validDetections.length - potholeCount
|
||||
|
||||
return (
|
||||
<Card className={`bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden ${className}`}>
|
||||
<CardHeader className="pb-2 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30">
|
||||
<Card className={`overflow-hidden ${className}`}>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 shadow-md shadow-indigo-500/30">
|
||||
<MapPin className="h-4 w-4 text-white" />
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-white flex items-center justify-center shadow-lg border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110">
|
||||
<MapPin className="h-5 w-5 text-[#2563eb]" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base font-bold">
|
||||
<span className="bg-gradient-to-r from-indigo-600 via-purple-500 to-indigo-600 dark:from-indigo-400 dark:via-purple-400 dark:to-indigo-400 bg-clip-text text-transparent">
|
||||
Detection Map
|
||||
</span>
|
||||
<CardTitle className="text-base font-bold text-[#2563eb]">
|
||||
Detection Map
|
||||
</CardTitle>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{isLoading ? "Loading..." : `${validDetections.length} detections with GPS coordinates`}
|
||||
|
||||
@@ -14,9 +14,9 @@ export function DetectionChart({ potholes, signboards, isLoading }: DetectionCha
|
||||
const signboardPercent = total > 0 ? (signboards / total) * 100 : 50
|
||||
|
||||
return (
|
||||
<Card className="glass-card card-glow border-0 overflow-hidden">
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg font-semibold">Detection Distribution</CardTitle>
|
||||
<CardTitle className="text-lg font-bold text-blue-600">Detection Distribution</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
{isLoading ? (
|
||||
@@ -73,8 +73,8 @@ export function DetectionChart({ potholes, signboards, isLoading }: DetectionCha
|
||||
<stop offset="100%" stopColor="#ea580c" />
|
||||
</linearGradient>
|
||||
<linearGradient id="signboardGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#06b6d4" />
|
||||
<stop offset="100%" stopColor="#0891b2" />
|
||||
<stop offset="0%" stopColor="#3b82f6" />
|
||||
<stop offset="100%" stopColor="#2563eb" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
@@ -98,9 +98,9 @@ export function DetectionChart({ potholes, signboards, isLoading }: DetectionCha
|
||||
<p className="text-xs text-muted-foreground">{potholePercent.toFixed(0)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/20">
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-gradient-to-r from-cyan-500 to-cyan-600" />
|
||||
<div className="w-3 h-3 rounded-full bg-gradient-to-r from-blue-500 to-blue-600" />
|
||||
<span className="text-sm font-medium">Signboards</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
|
||||
@@ -40,16 +40,16 @@ export function DetectionDonutChart({ potholes, signboards, isLoading }: Detecti
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="h-[250px]">
|
||||
<div className="h-[200px] relative">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={55}
|
||||
outerRadius={80}
|
||||
paddingAngle={3}
|
||||
innerRadius={50}
|
||||
outerRadius={70}
|
||||
paddingAngle={5}
|
||||
dataKey="value"
|
||||
strokeWidth={0}
|
||||
>
|
||||
@@ -57,7 +57,8 @@ export function DetectionDonutChart({ potholes, signboards, isLoading }: Detecti
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={entry.color}
|
||||
className="transition-opacity hover:opacity-80"
|
||||
fillOpacity={0.8}
|
||||
className="transition-all duration-300 hover:fill-opacity-100"
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
@@ -91,7 +92,7 @@ export function DetectionDonutChart({ potholes, signboards, isLoading }: Detecti
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{entry.value}: {data[index].value}
|
||||
</span>
|
||||
</div>
|
||||
@@ -104,8 +105,8 @@ export function DetectionDonutChart({ potholes, signboards, isLoading }: Detecti
|
||||
{/* Center label */}
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none" style={{ marginTop: '-40px' }}>
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold">{total}</p>
|
||||
<p className="text-xs text-muted-foreground">Total</p>
|
||||
<p className="text-xl font-extrabold text-[#2563eb]">{total}</p>
|
||||
<p className="text-[9px] uppercase tracking-wider text-muted-foreground">Total</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
126
components/dashboard/filter-selector.tsx
Normal file
126
components/dashboard/filter-selector.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { FolderOpen, Package, MapPin } from "lucide-react"
|
||||
import { type Project } from "@/lib/api"
|
||||
|
||||
interface FilterSelectorProps {
|
||||
projects: Project[]
|
||||
selectedProjectId: string | null
|
||||
selectedPackageId: string | null
|
||||
selectedLocationId: string | null
|
||||
onProjectChange: (projectId: string) => void
|
||||
onPackageChange: (packageId: string) => void
|
||||
onLocationChange: (locationId: string) => void
|
||||
packages: Array<{ id: string; name: string }>
|
||||
locations: Array<{ id: string; name: string }>
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function FilterSelector({
|
||||
projects,
|
||||
selectedProjectId,
|
||||
selectedPackageId,
|
||||
selectedLocationId,
|
||||
onProjectChange,
|
||||
onPackageChange,
|
||||
onLocationChange,
|
||||
packages,
|
||||
locations,
|
||||
isLoading = false
|
||||
}: FilterSelectorProps) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-3 p-3 rounded-xl bg-card border border-[var(--border)] shadow-sm">
|
||||
{/* 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>
|
||||
<Select
|
||||
value={selectedProjectId || ""}
|
||||
onValueChange={onProjectChange}
|
||||
disabled={isLoading || projects.length === 0}
|
||||
>
|
||||
<SelectTrigger className="w-[200px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
|
||||
<SelectValue placeholder="Select project" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
{selectedProjectId && packages.length > 0 && (
|
||||
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
|
||||
)}
|
||||
|
||||
{/* Package Dropdown */}
|
||||
{selectedProjectId && packages.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-emerald-100 dark:bg-emerald-900/50">
|
||||
<Package className="h-4 w-4 text-emerald-500" />
|
||||
</div>
|
||||
<Select
|
||||
value={selectedPackageId || "all"}
|
||||
onValueChange={onPackageChange}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SelectTrigger className="w-[200px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
|
||||
<SelectValue placeholder="All packages" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Packages</SelectItem>
|
||||
{packages.map((pkg) => (
|
||||
<SelectItem key={pkg.id} value={pkg.id}>
|
||||
{pkg.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Divider */}
|
||||
{selectedPackageId && selectedPackageId !== "all" && locations.length > 0 && (
|
||||
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
|
||||
)}
|
||||
|
||||
{/* Location Dropdown */}
|
||||
{selectedPackageId && selectedPackageId !== "all" && locations.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-purple-100 dark:bg-purple-900/50">
|
||||
<MapPin className="h-4 w-4 text-purple-500" />
|
||||
</div>
|
||||
<Select
|
||||
value={selectedLocationId || "all"}
|
||||
onValueChange={onLocationChange}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SelectTrigger className="w-[200px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
|
||||
<SelectValue placeholder="All locations" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Locations</SelectItem>
|
||||
{locations.map((loc) => (
|
||||
<SelectItem key={loc.id} value={loc.id}>
|
||||
{loc.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -14,38 +14,38 @@ interface GradientStatsCardProps {
|
||||
|
||||
const gradientStyles = {
|
||||
green: {
|
||||
background: "bg-gradient-to-br from-emerald-50 via-emerald-50 to-teal-100 dark:from-emerald-950/40 dark:via-emerald-950/30 dark:to-teal-950/40",
|
||||
border: "border-l-4 border-l-emerald-500",
|
||||
iconBg: "bg-gradient-to-br from-emerald-400 to-teal-500",
|
||||
iconShadow: "shadow-lg shadow-emerald-500/30",
|
||||
valueGradient: "bg-gradient-to-r from-emerald-600 via-teal-500 to-emerald-600 dark:from-emerald-400 dark:via-teal-400 dark:to-emerald-400"
|
||||
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"
|
||||
},
|
||||
coral: {
|
||||
background: "bg-gradient-to-br from-red-50 via-red-50 to-orange-100 dark:from-red-950/40 dark:via-red-950/30 dark:to-orange-950/40",
|
||||
border: "border-l-4 border-l-red-500",
|
||||
iconBg: "bg-gradient-to-br from-red-400 to-orange-500",
|
||||
iconShadow: "shadow-lg shadow-red-500/30",
|
||||
valueGradient: "bg-gradient-to-r from-red-600 via-orange-500 to-red-600 dark:from-red-400 dark:via-orange-400 dark:to-red-400"
|
||||
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"
|
||||
},
|
||||
blue: {
|
||||
background: "bg-gradient-to-br from-blue-50 via-blue-50 to-indigo-100 dark:from-blue-950/40 dark:via-blue-950/30 dark:to-indigo-950/40",
|
||||
border: "border-l-4 border-l-blue-500",
|
||||
iconBg: "bg-gradient-to-br from-blue-400 to-indigo-500",
|
||||
iconShadow: "shadow-lg shadow-blue-500/30",
|
||||
valueGradient: "bg-gradient-to-r from-blue-600 via-indigo-500 to-blue-600 dark:from-blue-400 dark:via-indigo-400 dark:to-blue-400"
|
||||
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"
|
||||
},
|
||||
purple: {
|
||||
background: "bg-gradient-to-br from-purple-50 via-purple-50 to-pink-100 dark:from-purple-950/40 dark:via-purple-950/30 dark:to-pink-950/40",
|
||||
border: "border-l-4 border-l-purple-500",
|
||||
iconBg: "bg-gradient-to-br from-purple-400 to-pink-500",
|
||||
iconShadow: "shadow-lg shadow-purple-500/30",
|
||||
valueGradient: "bg-gradient-to-r from-purple-600 via-pink-500 to-purple-600 dark:from-purple-400 dark:via-pink-400 dark:to-purple-400"
|
||||
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"
|
||||
}
|
||||
}
|
||||
|
||||
export function GradientStatsCard({
|
||||
title,
|
||||
subtitle = "Work level distribution",
|
||||
subtitle,
|
||||
value,
|
||||
icon: Icon,
|
||||
gradient,
|
||||
@@ -54,41 +54,37 @@ export function GradientStatsCard({
|
||||
const styles = gradientStyles[gradient]
|
||||
|
||||
return (
|
||||
<Card className={`
|
||||
${styles.background} ${styles.border}
|
||||
border-0 rounded-xl overflow-hidden
|
||||
shadow-md hover:shadow-lg
|
||||
transition-all duration-300 ease-out
|
||||
hover:-translate-y-1 hover:scale-[1.02]
|
||||
`}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Large gradient icon */}
|
||||
<div className={`
|
||||
w-14 h-14 rounded-xl flex items-center justify-center
|
||||
${styles.iconBg} ${styles.iconShadow}
|
||||
`}>
|
||||
<Icon className="h-7 w-7 text-white" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 truncate">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">
|
||||
{subtitle}
|
||||
</p>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
{title}
|
||||
</h3>
|
||||
<div className="flex flex-col">
|
||||
{isLoading ? (
|
||||
<div className="h-9 w-20 bg-gray-200 dark:bg-gray-700 rounded mt-1 animate-pulse" />
|
||||
<div className="h-14 w-24 bg-gray-100 dark:bg-gray-800 rounded-xl animate-pulse mt-2" />
|
||||
) : (
|
||||
<p className={`text-3xl font-extrabold mt-1 ${styles.valueGradient} bg-clip-text text-transparent`}>
|
||||
{value}
|
||||
</p>
|
||||
<>
|
||||
<p className="text-5xl md:text-6xl font-black tracking-tighter text-gray-900 dark:text-white leading-tight">
|
||||
{value}
|
||||
</p>
|
||||
{subtitle && (
|
||||
<p className="text-xs font-medium text-gray-500 dark:text-gray-400 mt-1 opacity-80 italic">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
@@ -39,13 +39,23 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-[300px]">
|
||||
<div className="h-[200px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={data}
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 40 }}
|
||||
barCategoryGap="20%"
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 20 }}
|
||||
barCategoryGap="25%"
|
||||
>
|
||||
<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} />
|
||||
</linearGradient>
|
||||
<linearGradient id="barGradientSignboard" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#3b82f6" stopOpacity={0.8} />
|
||||
<stop offset="100%" stopColor="#3b82f6" stopOpacity={0.4} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
@@ -53,28 +63,28 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
|
||||
tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={60}
|
||||
height={50}
|
||||
interval={0}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
|
||||
tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
width={35}
|
||||
width={25}
|
||||
/>
|
||||
<Tooltip
|
||||
content={({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-background/95 backdrop-blur-sm border border-border rounded-lg px-3 py-2 shadow-lg">
|
||||
<p className="font-medium text-sm mb-1">{label}</p>
|
||||
<p className="font-medium text-xs mb-1">{label}</p>
|
||||
{payload.map((entry, index) => (
|
||||
<div key={index} className="flex items-center gap-2 text-sm">
|
||||
<div key={index} className="flex items-center gap-2 text-xs">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
@@ -91,16 +101,16 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
|
||||
/>
|
||||
<Legend
|
||||
verticalAlign="top"
|
||||
height={36}
|
||||
height={30}
|
||||
content={({ payload }) => (
|
||||
<div className="flex items-center justify-center gap-6 mb-2">
|
||||
{payload?.map((entry, index) => (
|
||||
<div key={`legend-${index}`} className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-3 h-3 rounded"
|
||||
className="w-3 h-3 rounded-sm"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{entry.value}
|
||||
</span>
|
||||
</div>
|
||||
@@ -111,13 +121,13 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
|
||||
<Bar
|
||||
dataKey="potholes"
|
||||
name="Potholes"
|
||||
fill={COLORS.pothole}
|
||||
fill="url(#barGradientPothole)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="signboards"
|
||||
name="Signboards"
|
||||
fill={COLORS.signboard}
|
||||
fill="url(#barGradientSignboard)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
|
||||
@@ -43,13 +43,13 @@ 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>
|
||||
}
|
||||
return <Badge className="bg-cyan-500/20 text-cyan-600 border-cyan-500/30">Signboard</Badge>
|
||||
return <Badge className="bg-blue-500/20 text-blue-600 border-blue-500/30">Signboard</Badge>
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="glass-card card-glow border-0 overflow-hidden">
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader className="pb-3 border-b border-border/50">
|
||||
<CardTitle className="text-lg font-semibold">Recent Analyses</CardTitle>
|
||||
<CardTitle className="text-lg font-bold text-blue-600">Recent Analyses</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{isLoading ? (
|
||||
|
||||
102
components/data-table.tsx
Normal file
102
components/data-table.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
"use client"
|
||||
|
||||
import { Plus } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
interface Column<T> {
|
||||
key: string
|
||||
header: string
|
||||
render?: (item: T) => React.ReactNode
|
||||
}
|
||||
|
||||
interface DataTableProps<T> {
|
||||
title: string
|
||||
data: T[]
|
||||
columns: Column<T>[]
|
||||
onAddNew: () => void
|
||||
addButtonText: string
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function DataTable<T extends Record<string, any>>({
|
||||
title,
|
||||
data,
|
||||
columns,
|
||||
onAddNew,
|
||||
addButtonText,
|
||||
isLoading = false
|
||||
}: DataTableProps<T>) {
|
||||
return (
|
||||
<div>
|
||||
{/* Header with Title and Add Button */}
|
||||
<div className="mb-4 flex justify-between items-center bg-card p-3 rounded-xl border border-[var(--border)] shadow-sm">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold tracking-tight text-blue-600">{title}</h2>
|
||||
<p className="text-[10px] text-gray-500 dark:text-gray-400 uppercase font-medium">Total items: {data.length}</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={onAddNew}
|
||||
className="bg-blue-600 hover:bg-blue-800 text-white shadow-md transition-all duration-300 hover:scale-105 active:scale-95 border-none h-8 px-4 text-xs font-semibold rounded-lg"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5 mr-1.5 stroke-[3px]" />
|
||||
{addButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-hidden rounded-2xl border border-[var(--border)] bg-card shadow-2xl shadow-black/5">
|
||||
<table className="min-w-full divide-y divide-gray-200/50 dark:divide-gray-700/50 border-collapse">
|
||||
<thead className="bg-[#f8fafc] dark:bg-gray-900/50">
|
||||
<tr>
|
||||
{columns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
className="px-6 py-4 text-left text-[11px] font-black text-gray-500 dark:text-gray-400 uppercase tracking-[0.1em] border-b border-[var(--border)]"
|
||||
>
|
||||
{col.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100/30 dark:divide-gray-800/30">
|
||||
{isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-16 text-center">
|
||||
<div className="flex flex-col items-center justify-center gap-3">
|
||||
<div className="h-8 w-8 border-3 border-gray-200 border-t-blue-500 rounded-full animate-spin" />
|
||||
<span className="text-sm font-medium text-gray-500 dark:text-gray-400">Loading records...</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : data.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-16 text-center">
|
||||
<div className="flex flex-col items-center justify-center gap-2">
|
||||
<div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-2">
|
||||
<Plus className="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500 dark:text-gray-400 font-medium">No data available</p>
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">Click "{addButtonText}" to get started</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
data.map((item, idx) => (
|
||||
<tr
|
||||
key={idx}
|
||||
className="hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors duration-200"
|
||||
>
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 font-medium">
|
||||
{col.render ? col.render(item) : item[col.key] || "—"}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -14,7 +14,10 @@ import {
|
||||
Menu,
|
||||
LayoutDashboard,
|
||||
ChevronRight,
|
||||
Home,
|
||||
PlusCircle,
|
||||
FolderPlus,
|
||||
Package,
|
||||
MapPin,
|
||||
Map
|
||||
} from "lucide-react"
|
||||
|
||||
@@ -26,18 +29,36 @@ interface NavItem {
|
||||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
title: "Home",
|
||||
description: "Project selection and analysis setup",
|
||||
href: "/",
|
||||
icon: Home
|
||||
},
|
||||
{
|
||||
title: "Dashboard",
|
||||
description: "View analytics, statistics, and recent analyses",
|
||||
href: "/dashboard",
|
||||
icon: LayoutDashboard
|
||||
},
|
||||
{
|
||||
title: "New Analysis",
|
||||
description: "Start a new road analysis project",
|
||||
href: "/new-analysis",
|
||||
icon: PlusCircle
|
||||
},
|
||||
{
|
||||
title: "Create Project",
|
||||
description: "Create a new infrastructure project",
|
||||
href: "/create-project",
|
||||
icon: FolderPlus
|
||||
},
|
||||
{
|
||||
title: "Create Package",
|
||||
description: "Add a package under an existing project",
|
||||
href: "/create-package",
|
||||
icon: Package
|
||||
},
|
||||
{
|
||||
title: "Create Location",
|
||||
description: "Add a location under a project & package",
|
||||
href: "/create-location",
|
||||
icon: MapPin
|
||||
},
|
||||
{
|
||||
title: "Show Map",
|
||||
description: "View all detections on an interactive map",
|
||||
@@ -94,8 +115,8 @@ export function NavigationMenu() {
|
||||
}`}
|
||||
>
|
||||
<div className={`p-2.5 rounded-lg transition-all duration-300 ${isActive
|
||||
? "bg-gradient-to-br from-primary to-accent text-white"
|
||||
: "bg-white/5 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
|
||||
? "bg-[#60a5fa] text-white"
|
||||
: "bg-white/5 text-muted-foreground group-hover:bg-[#60a5fa]/10 group-hover:text-[#60a5fa]"
|
||||
}`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import { useRouter, usePathname } from "next/navigation"
|
||||
import { Home, LayoutDashboard, User } from "lucide-react"
|
||||
import { LayoutDashboard, Plus, User, FolderPlus, Package, MapPin } from "lucide-react"
|
||||
|
||||
interface NavItem {
|
||||
title: string
|
||||
@@ -12,18 +12,30 @@ interface NavItem {
|
||||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
title: "Home",
|
||||
href: "/",
|
||||
icon: Home,
|
||||
gradient: "from-emerald-400 to-teal-500"
|
||||
},
|
||||
{
|
||||
title: "Dashboard",
|
||||
href: "/dashboard",
|
||||
icon: LayoutDashboard,
|
||||
gradient: "from-blue-400 to-indigo-500"
|
||||
},
|
||||
{
|
||||
title: "Create Project",
|
||||
href: "/create-project",
|
||||
icon: FolderPlus,
|
||||
gradient: "from-blue-400 to-blue-600"
|
||||
},
|
||||
{
|
||||
title: "Create Package",
|
||||
href: "/create-package",
|
||||
icon: Package,
|
||||
gradient: "from-violet-400 to-purple-500"
|
||||
},
|
||||
{
|
||||
title: "Create Location",
|
||||
href: "/create-location",
|
||||
icon: MapPin,
|
||||
gradient: "from-amber-400 to-orange-500"
|
||||
},
|
||||
{
|
||||
title: "Account",
|
||||
href: "/account",
|
||||
@@ -42,54 +54,112 @@ export function SidebarNavigation() {
|
||||
router.push(item.href)
|
||||
}
|
||||
|
||||
const isNewAnalysisActive = pathname === "/new-analysis"
|
||||
|
||||
return (
|
||||
<aside className="fixed left-0 top-0 h-screen w-16 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border-r border-gray-200/50 dark:border-gray-700/50 z-50 flex flex-col items-center py-6 shadow-lg">
|
||||
<aside className="fixed left-0 top-0 h-screen w-20 bg-[#2563eb] border-r border-[#2563eb]/20 z-50 flex flex-col items-center py-8 shadow-2xl">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30">
|
||||
<span className="text-white font-bold text-lg">V</span>
|
||||
<div className="mb-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-lg border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110">
|
||||
<span className="text-[#2563eb] font-black text-xl">V</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Items */}
|
||||
<nav className="flex-1 flex flex-col items-center gap-3">
|
||||
{navItems.map((item) => {
|
||||
<nav className="flex-1 flex flex-col items-center gap-4">
|
||||
{/* Dashboard - first item */}
|
||||
{navItems.slice(0, 1).map((item) => {
|
||||
const isActive = pathname === item.href
|
||||
const Icon = item.icon
|
||||
|
||||
return (
|
||||
<div key={item.href} className="relative group">
|
||||
<button
|
||||
onClick={() => handleNavigation(item)}
|
||||
disabled={item.disabled}
|
||||
className={`
|
||||
relative w-11 h-11 rounded-xl flex items-center justify-center
|
||||
relative w-12 h-12 rounded-xl flex items-center justify-center
|
||||
bg-white text-[#2563eb] shadow-lg border-2
|
||||
${isActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
|
||||
transition-all duration-300 ease-out
|
||||
${item.disabled
|
||||
? "text-gray-300 dark:text-gray-600 cursor-not-allowed opacity-50"
|
||||
: isActive
|
||||
? `bg-gradient-to-br ${item.gradient} text-white shadow-lg`
|
||||
: "text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
}
|
||||
hover:scale-110 hover:shadow-xl
|
||||
active:scale-95
|
||||
`}
|
||||
style={isActive && !item.disabled ? { boxShadow: `0 8px 20px -4px rgba(99, 102, 241, 0.4)` } : {}}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
<Icon className={`h-6 w-6 ${isActive ? 'stroke-[2.5]' : 'stroke-[2]'}`} />
|
||||
</button>
|
||||
|
||||
{/* Tooltip */}
|
||||
<div className="
|
||||
absolute left-full ml-3 top-1/2 -translate-y-1/2
|
||||
px-3 py-1.5 rounded-lg
|
||||
bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
|
||||
opacity-0 invisible group-hover:opacity-100 group-hover:visible
|
||||
transition-all duration-200 ease-out
|
||||
whitespace-nowrap
|
||||
shadow-lg
|
||||
pointer-events-none
|
||||
whitespace-nowrap shadow-lg pointer-events-none
|
||||
">
|
||||
{item.title}{item.disabled && " (Coming Soon)"}
|
||||
{/* Arrow */}
|
||||
{item.title}
|
||||
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* New Analysis - Special eye-catchy button */}
|
||||
<div className="relative group">
|
||||
<button
|
||||
onClick={() => router.push("/new-analysis")}
|
||||
className={`
|
||||
relative w-12 h-12 rounded-xl flex items-center justify-center
|
||||
bg-white text-[#2563eb] shadow-lg border-2
|
||||
${isNewAnalysisActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
|
||||
transition-all duration-300 ease-out
|
||||
hover:scale-110 hover:shadow-xl
|
||||
active:scale-95
|
||||
`}
|
||||
>
|
||||
<Plus className={`h-6 w-6 ${isNewAnalysisActive ? 'stroke-[2.5]' : 'stroke-[2]'}`} />
|
||||
</button>
|
||||
<div className="
|
||||
absolute left-full ml-3 top-1/2 -translate-y-1/2
|
||||
px-3 py-1.5 rounded-lg
|
||||
bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
|
||||
opacity-0 invisible group-hover:opacity-100 group-hover:visible
|
||||
transition-all duration-200 ease-out
|
||||
whitespace-nowrap shadow-lg pointer-events-none
|
||||
">
|
||||
Start New Analysis
|
||||
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-8 h-px bg-white/20 my-1" />
|
||||
|
||||
{/* Create items */}
|
||||
{navItems.slice(1, 4).map((item) => {
|
||||
const isActive = pathname === item.href
|
||||
const Icon = item.icon
|
||||
return (
|
||||
<div key={item.href} className="relative group">
|
||||
<button
|
||||
onClick={() => handleNavigation(item)}
|
||||
className={`
|
||||
relative w-12 h-12 rounded-xl flex items-center justify-center
|
||||
bg-white text-[#2563eb] shadow-lg border-2
|
||||
${isActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
|
||||
transition-all duration-300 ease-out
|
||||
hover:scale-110 hover:shadow-xl
|
||||
active:scale-95
|
||||
`}
|
||||
>
|
||||
<Icon className={`h-6 w-6 ${isActive ? 'stroke-[2.5]' : 'stroke-[2]'}`} />
|
||||
</button>
|
||||
<div className="
|
||||
absolute left-full ml-3 top-1/2 -translate-y-1/2
|
||||
px-3 py-1.5 rounded-lg
|
||||
bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
|
||||
opacity-0 invisible group-hover:opacity-100 group-hover:visible
|
||||
transition-all duration-200 ease-out
|
||||
whitespace-nowrap shadow-lg pointer-events-none
|
||||
">
|
||||
{item.title}
|
||||
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,8 +169,25 @@ export function SidebarNavigation() {
|
||||
|
||||
{/* Bottom section */}
|
||||
<div className="mt-auto">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center">
|
||||
<User className="h-5 w-5 text-gray-500 dark:text-gray-400" />
|
||||
<div className="relative group">
|
||||
<button
|
||||
onClick={() => { }}
|
||||
className="w-12 h-12 rounded-full bg-white flex items-center justify-center cursor-not-allowed opacity-80 border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110"
|
||||
disabled
|
||||
>
|
||||
<User className="h-6 w-6 text-[#2563eb]" />
|
||||
</button>
|
||||
<div className="
|
||||
absolute left-full ml-3 top-1/2 -translate-y-1/2
|
||||
px-3 py-1.5 rounded-lg
|
||||
bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
|
||||
opacity-0 invisible group-hover:opacity-100 group-hover:visible
|
||||
transition-all duration-200 ease-out
|
||||
whitespace-nowrap shadow-lg pointer-events-none
|
||||
">
|
||||
Account (Coming Soon)
|
||||
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -49,8 +49,8 @@ export function SummarySection({ data }: SummarySectionProps) {
|
||||
label: "Resolution",
|
||||
value: `${data.video_info.width}×${data.video_info.height}`,
|
||||
icon: Monitor,
|
||||
color: "text-cyan-500",
|
||||
bgColor: "bg-cyan-50 dark:bg-cyan-950/30",
|
||||
color: "text-blue-500",
|
||||
bgColor: "bg-blue-50 dark:bg-blue-950/30",
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
|
||||
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-all duration-300 hover:shadow-md hover:border-[var(--card-hover-border)] hover:shadow-[var(--card-glow)] hover:-translate-y-0.5',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -198,15 +198,15 @@ function DetailedSummarySection({
|
||||
<div className="space-y-4">
|
||||
{/* Location-based Summary */}
|
||||
<Card className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden">
|
||||
<CardHeader className="pb-3 bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-cyan-950/30 dark:to-blue-950/30">
|
||||
<CardHeader className="pb-3 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-gradient-to-br from-cyan-400 to-blue-500 shadow-md shadow-cyan-500/30">
|
||||
<div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/30">
|
||||
<MapIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base font-bold">
|
||||
<span className="bg-gradient-to-r from-cyan-600 via-blue-500 to-cyan-600 dark:from-cyan-400 dark:via-blue-400 dark:to-cyan-400 bg-clip-text text-transparent">
|
||||
<span className="bg-gradient-to-r from-blue-600 via-indigo-500 to-blue-600 dark:from-blue-400 dark:via-indigo-400 dark:to-blue-400 bg-clip-text text-transparent">
|
||||
Detection Locations
|
||||
</span>
|
||||
</CardTitle>
|
||||
@@ -219,9 +219,9 @@ function DetailedSummarySection({
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowMap(true)}
|
||||
className="gap-2 border-cyan-200 dark:border-cyan-800 hover:bg-cyan-50 dark:hover:bg-cyan-900/50"
|
||||
className="gap-2 border-blue-200 dark:border-blue-800 hover:bg-blue-50 dark:hover:bg-blue-900/50"
|
||||
>
|
||||
<MapIcon className="h-4 w-4 text-cyan-500" />
|
||||
<MapIcon className="h-4 w-4 text-blue-500" />
|
||||
Show Map
|
||||
</Button>
|
||||
</div>
|
||||
@@ -362,8 +362,8 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
|
||||
label: "Resolution",
|
||||
value: `${data.video_info.width}×${data.video_info.height}`,
|
||||
icon: Monitor,
|
||||
color: "text-cyan-500",
|
||||
bgColor: "bg-cyan-50 dark:bg-cyan-950/30",
|
||||
color: "text-blue-500",
|
||||
bgColor: "bg-blue-50 dark:bg-blue-950/30",
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user