UI changed, added dashboard
This commit is contained in:
sumona-banerjeee
337
app/dashboard/page.tsx
Normal file
337
app/dashboard/page.tsx
Normal file
@@ -0,0 +1,337 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import {
|
||||
Plus,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
TrendingUp,
|
||||
MapPin as MapPinIcon,
|
||||
BarChart3,
|
||||
AlertTriangle,
|
||||
RectangleHorizontal
|
||||
} from "lucide-react"
|
||||
import { SidebarNavigation } from "@/components/sidebar-navigation"
|
||||
import { GradientStatsCard } from "@/components/dashboard/gradient-stats-card"
|
||||
import { CompactProjectSelector } from "@/components/dashboard/compact-project-selector"
|
||||
import { DetectionDonutChart } from "@/components/dashboard/detection-donut-chart"
|
||||
import { LocationBarChart } from "@/components/dashboard/location-bar-chart"
|
||||
import { DashboardMap } from "@/components/dashboard/dashboard-map"
|
||||
import {
|
||||
fetchProjects,
|
||||
type Project
|
||||
} from "@/lib/api"
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
|
||||
|
||||
interface ProjectSummary {
|
||||
project: {
|
||||
id: string
|
||||
name: string
|
||||
corridor_name: string | null
|
||||
state: string | null
|
||||
}
|
||||
packages: {
|
||||
[key: string]: {
|
||||
package_id: string
|
||||
region: string | null
|
||||
locations: {
|
||||
[key: string]: {
|
||||
location_id: string
|
||||
chainage: string | null
|
||||
detection_count: number
|
||||
detections: Array<{
|
||||
id: number
|
||||
type: string
|
||||
class: string
|
||||
confidence: number
|
||||
latitude: number
|
||||
longitude: number
|
||||
}>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface DetectionStats {
|
||||
totalPotholes: number
|
||||
totalSignboards: number
|
||||
totalDetections: number
|
||||
locationData: Array<{
|
||||
name: string
|
||||
potholes: number
|
||||
signboards: number
|
||||
total: number
|
||||
}>
|
||||
}
|
||||
|
||||
function calculateStats(summary: ProjectSummary | null): DetectionStats {
|
||||
if (!summary) {
|
||||
return { totalPotholes: 0, totalSignboards: 0, totalDetections: 0, locationData: [] }
|
||||
}
|
||||
|
||||
let totalPotholes = 0
|
||||
let totalSignboards = 0
|
||||
const locationData: DetectionStats["locationData"] = []
|
||||
|
||||
for (const pkg of Object.values(summary.packages || {})) {
|
||||
for (const [locName, loc] of Object.entries(pkg.locations || {})) {
|
||||
let locPotholes = 0
|
||||
let locSignboards = 0
|
||||
|
||||
for (const detection of loc.detections || []) {
|
||||
if (detection.type.toLowerCase().includes("pothole")) {
|
||||
locPotholes++
|
||||
totalPotholes++
|
||||
} else {
|
||||
locSignboards++
|
||||
totalSignboards++
|
||||
}
|
||||
}
|
||||
|
||||
if (locPotholes > 0 || locSignboards > 0) {
|
||||
const shortName = locName.length > 20 ? locName.substring(0, 20) + "..." : locName
|
||||
locationData.push({
|
||||
name: shortName,
|
||||
potholes: locPotholes,
|
||||
signboards: locSignboards,
|
||||
total: locPotholes + locSignboards
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
totalPotholes,
|
||||
totalSignboards,
|
||||
totalDetections: totalPotholes + totalSignboards,
|
||||
locationData
|
||||
}
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter()
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [projects, setProjects] = useState<Project[]>([])
|
||||
const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null)
|
||||
const [projectSummary, setProjectSummary] = useState<ProjectSummary | null>(null)
|
||||
const [stats, setStats] = useState<DetectionStats>({
|
||||
totalPotholes: 0,
|
||||
totalSignboards: 0,
|
||||
totalDetections: 0,
|
||||
locationData: []
|
||||
})
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Load projects on mount
|
||||
useEffect(() => {
|
||||
const loadProjects = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
const projectsData = await fetchProjects()
|
||||
setProjects(projectsData)
|
||||
|
||||
if (projectsData.length > 0) {
|
||||
setSelectedProjectId(projectsData[0].id)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load projects:", err)
|
||||
setError("Failed to load projects. Please check if the backend is running.")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
loadProjects()
|
||||
}, [])
|
||||
|
||||
// Load project summary when project changes
|
||||
useEffect(() => {
|
||||
if (!selectedProjectId) {
|
||||
setProjectSummary(null)
|
||||
setStats({ totalPotholes: 0, totalSignboards: 0, totalDetections: 0, locationData: [] })
|
||||
return
|
||||
}
|
||||
|
||||
const loadProjectSummary = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
const response = await fetch(`${API_URL}/summary/projects/${selectedProjectId}`, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"ngrok-skip-browser-warning": "true"
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API Error: ${response.status}`)
|
||||
}
|
||||
|
||||
const summary: ProjectSummary = await response.json()
|
||||
setProjectSummary(summary)
|
||||
setStats(calculateStats(summary))
|
||||
} catch (err) {
|
||||
console.error("Failed to load project summary:", err)
|
||||
setError("Failed to load project summary.")
|
||||
setProjectSummary(null)
|
||||
setStats({ totalPotholes: 0, totalSignboards: 0, totalDetections: 0, locationData: [] })
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
loadProjectSummary()
|
||||
}, [selectedProjectId])
|
||||
|
||||
const handleNewAnalysis = () => {
|
||||
router.push("/")
|
||||
}
|
||||
|
||||
const selectedProject = projects.find(p => p.id === selectedProjectId)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950">
|
||||
{/* Sidebar Navigation */}
|
||||
<SidebarNavigation />
|
||||
|
||||
{/* Main Content - offset by sidebar width */}
|
||||
<main className="ml-16 min-h-screen">
|
||||
<div className="p-6 max-w-[1600px] mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
|
||||
VisionRoad Analytics Dashboard
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
A Comprehensive Overview Of Your Road Infrastructure Analysis
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleNewAnalysis}
|
||||
className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 transition-all duration-300"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
New Analysis
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<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">
|
||||
<GradientStatsCard
|
||||
title="Total Detections"
|
||||
subtitle="All detected objects"
|
||||
value={stats.totalDetections}
|
||||
icon={TrendingUp}
|
||||
gradient="green"
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<GradientStatsCard
|
||||
title="Potholes"
|
||||
subtitle="Road surface damage"
|
||||
value={stats.totalPotholes}
|
||||
icon={AlertTriangle}
|
||||
gradient="coral"
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<GradientStatsCard
|
||||
title="Signboards"
|
||||
subtitle="Traffic signs detected"
|
||||
value={stats.totalSignboards}
|
||||
icon={RectangleHorizontal}
|
||||
gradient="blue"
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Project Selector - Above main content */}
|
||||
<div className="mb-6 animate-in fade-in slide-in-from-bottom duration-500 delay-100">
|
||||
<CompactProjectSelector
|
||||
projects={projects}
|
||||
selectedProjectId={selectedProjectId}
|
||||
onProjectChange={setSelectedProjectId}
|
||||
selectedProject={selectedProject}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid - Map Left, Charts Right */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 animate-in fade-in slide-in-from-bottom duration-500 delay-200">
|
||||
{/* Left Side - Map */}
|
||||
<div>
|
||||
<DashboardMap className="h-auto" />
|
||||
</div>
|
||||
|
||||
{/* Right Side - Stacked Charts */}
|
||||
<div className="space-y-4">
|
||||
{/* Detection Distribution */}
|
||||
<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-2 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/30 dark:to-emerald-950/30">
|
||||
<CardTitle className="text-base font-bold flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-500 shadow-md shadow-emerald-500/30">
|
||||
<BarChart3 className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<span className="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 bg-clip-text text-transparent">
|
||||
Detection Distribution
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-4">
|
||||
<DetectionDonutChart
|
||||
potholes={stats.totalPotholes}
|
||||
signboards={stats.totalSignboards}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Location Bar Chart */}
|
||||
<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-2 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30">
|
||||
<CardTitle className="text-base font-bold flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/30">
|
||||
<MapPinIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<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">
|
||||
Detections by Location
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-4">
|
||||
<LocationBarChart
|
||||
data={stats.locationData}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">
|
||||
Sentient Geeks Pvt. Ltd.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
318
app/globals.css
318
app/globals.css
@@ -4,79 +4,114 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
/* Primary - Indigo */
|
||||
--primary: oklch(0.55 0.24 264);
|
||||
--primary-foreground: oklch(0.98 0.01 264);
|
||||
|
||||
/* Background & Surfaces */
|
||||
--background: oklch(0.98 0.01 280);
|
||||
--foreground: oklch(0.15 0.02 280);
|
||||
--card: oklch(0.99 0.005 280);
|
||||
--card-foreground: oklch(0.15 0.02 280);
|
||||
--popover: oklch(0.99 0.005 280);
|
||||
--popover-foreground: oklch(0.15 0.02 280);
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(0.95 0.02 264);
|
||||
--secondary-foreground: oklch(0.25 0.05 264);
|
||||
|
||||
/* Muted */
|
||||
--muted: oklch(0.94 0.02 280);
|
||||
--muted-foreground: oklch(0.45 0.03 280);
|
||||
|
||||
/* Accent - Cyan */
|
||||
--accent: oklch(0.92 0.04 200);
|
||||
--accent-foreground: oklch(0.25 0.08 200);
|
||||
|
||||
/* Destructive */
|
||||
--destructive: oklch(0.55 0.22 25);
|
||||
--destructive-foreground: oklch(0.98 0.01 25);
|
||||
|
||||
/* Borders & Inputs */
|
||||
--border: oklch(0.90 0.02 280);
|
||||
--input: oklch(0.92 0.02 280);
|
||||
--ring: oklch(0.55 0.24 264);
|
||||
|
||||
/* Chart Colors - Vibrant Palette */
|
||||
--chart-1: oklch(0.55 0.24 264);
|
||||
--chart-2: oklch(0.65 0.20 200);
|
||||
--chart-3: oklch(0.60 0.18 160);
|
||||
--chart-4: oklch(0.70 0.20 85);
|
||||
--chart-5: oklch(0.60 0.22 320);
|
||||
|
||||
--radius: 0.75rem;
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar: oklch(0.98 0.01 280);
|
||||
--sidebar-foreground: oklch(0.15 0.02 280);
|
||||
--sidebar-primary: oklch(0.55 0.24 264);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.01 264);
|
||||
--sidebar-accent: oklch(0.94 0.03 264);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.05 264);
|
||||
--sidebar-border: oklch(0.90 0.02 280);
|
||||
--sidebar-ring: oklch(0.55 0.24 264);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.145 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.145 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.269 0 0);
|
||||
--input: oklch(0.269 0 0);
|
||||
--ring: oklch(0.439 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.269 0 0);
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
/* Primary - Light Indigo */
|
||||
--primary: oklch(0.70 0.20 264);
|
||||
--primary-foreground: oklch(0.15 0.02 264);
|
||||
|
||||
/* Background & Surfaces */
|
||||
--background: oklch(0.12 0.02 280);
|
||||
--foreground: oklch(0.95 0.01 280);
|
||||
--card: oklch(0.16 0.02 280);
|
||||
--card-foreground: oklch(0.95 0.01 280);
|
||||
--popover: oklch(0.16 0.02 280);
|
||||
--popover-foreground: oklch(0.95 0.01 280);
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(0.22 0.03 264);
|
||||
--secondary-foreground: oklch(0.90 0.02 264);
|
||||
|
||||
/* Muted */
|
||||
--muted: oklch(0.20 0.02 280);
|
||||
--muted-foreground: oklch(0.65 0.02 280);
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(0.22 0.04 200);
|
||||
--accent-foreground: oklch(0.85 0.08 200);
|
||||
|
||||
/* Destructive */
|
||||
--destructive: oklch(0.45 0.18 25);
|
||||
--destructive-foreground: oklch(0.90 0.08 25);
|
||||
|
||||
/* Borders & Inputs */
|
||||
--border: oklch(0.25 0.02 280);
|
||||
--input: oklch(0.22 0.02 280);
|
||||
--ring: oklch(0.70 0.20 264);
|
||||
|
||||
/* Chart Colors */
|
||||
--chart-1: oklch(0.65 0.22 264);
|
||||
--chart-2: oklch(0.70 0.18 200);
|
||||
--chart-3: oklch(0.65 0.16 160);
|
||||
--chart-4: oklch(0.75 0.18 85);
|
||||
--chart-5: oklch(0.65 0.20 320);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar: oklch(0.14 0.02 280);
|
||||
--sidebar-foreground: oklch(0.95 0.01 280);
|
||||
--sidebar-primary: oklch(0.65 0.22 264);
|
||||
--sidebar-primary-foreground: oklch(0.95 0.01 264);
|
||||
--sidebar-accent: oklch(0.22 0.03 264);
|
||||
--sidebar-accent-foreground: oklch(0.90 0.02 264);
|
||||
--sidebar-border: oklch(0.25 0.02 280);
|
||||
--sidebar-ring: oklch(0.70 0.20 264);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: 'Geist', 'Geist Fallback';
|
||||
--font-mono: 'Geist Mono', 'Geist Mono Fallback';
|
||||
--font-sans: 'Geist', 'Geist Fallback', system-ui, sans-serif;
|
||||
--font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
@@ -123,3 +158,152 @@
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Premium Background with Animated Mesh Gradient */
|
||||
@layer utilities {
|
||||
.bg-mesh-gradient {
|
||||
background:
|
||||
radial-gradient(ellipse 80% 50% at 20% 20%, oklch(0.75 0.15 264 / 0.15), transparent),
|
||||
radial-gradient(ellipse 60% 40% at 80% 80%, oklch(0.70 0.12 200 / 0.12), transparent),
|
||||
radial-gradient(ellipse 50% 30% at 50% 50%, oklch(0.65 0.10 320 / 0.08), transparent),
|
||||
var(--background);
|
||||
}
|
||||
|
||||
.dark .bg-mesh-gradient {
|
||||
background:
|
||||
radial-gradient(ellipse 80% 50% at 20% 20%, oklch(0.40 0.18 264 / 0.20), transparent),
|
||||
radial-gradient(ellipse 60% 40% at 80% 80%, oklch(0.35 0.15 200 / 0.15), transparent),
|
||||
radial-gradient(ellipse 50% 30% at 50% 50%, oklch(0.30 0.12 320 / 0.10), transparent),
|
||||
var(--background);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
60
app/map/page.tsx
Normal file
60
app/map/page.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
"use client"
|
||||
|
||||
import { NavigationMenu } from "@/components/navigation-menu"
|
||||
import { DashboardMap } from "@/components/dashboard/dashboard-map"
|
||||
|
||||
export default function MapPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-mesh-gradient relative overflow-hidden">
|
||||
{/* Navigation Menu */}
|
||||
<NavigationMenu />
|
||||
|
||||
{/* Decorative background elements */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute -top-40 -left-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl float-subtle" />
|
||||
<div className="absolute -bottom-40 -right-40 w-96 h-96 bg-accent/10 rounded-full blur-3xl float-subtle" style={{ animationDelay: '-3s' }} />
|
||||
<div className="absolute top-1/2 left-1/4 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<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="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gradient leading-tight">
|
||||
Detection Map
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
View all detected potholes and signboards on the map
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Map */}
|
||||
<div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
|
||||
<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="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>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded-full bg-blue-500 border-2 border-blue-600" />
|
||||
<span className="text-sm text-muted-foreground">Signboard</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sentient Geeks Pvt. Ltd.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
38
app/page.tsx
38
app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useRouter } from "next/navigation"
|
||||
import { ProjectSelectionSection } from "@/components/project-selection-section"
|
||||
import { SidebarNavigation } from "@/components/sidebar-navigation"
|
||||
import { type SessionContext, saveSession } from "@/lib/api"
|
||||
|
||||
export default function SelectionPage() {
|
||||
@@ -14,23 +15,42 @@ export default function SelectionPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
|
||||
<div className="container mx-auto px-4 py-8 max-w-7xl">
|
||||
{/* Header */}
|
||||
<div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
|
||||
<h1 className="text-4xl font-bold mb-2 text-balance bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950">
|
||||
{/* Sidebar Navigation */}
|
||||
<SidebarNavigation />
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="ml-16 min-h-screen relative overflow-hidden">
|
||||
{/* Decorative background elements */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute -top-40 -left-40 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl" />
|
||||
<div className="absolute -bottom-40 -right-40 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-blue-500/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-12 max-w-5xl relative z-10">
|
||||
{/* Premium Header */}
|
||||
<div className="mb-10 animate-in fade-in slide-in-from-top duration-700">
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent leading-tight">
|
||||
VisionRoad Detection System
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Select your project location to begin AI-powered road analysis
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Selection Section */}
|
||||
<div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
|
||||
<div className="animate-in fade-in slide-in-from-bottom duration-700 delay-150">
|
||||
<ProjectSelectionSection onSelectionComplete={handleSelectionComplete} />
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-12 text-center animate-in fade-in duration-700 delay-300">
|
||||
<p className="text-sm text-gray-400 dark:text-gray-500">
|
||||
Sentient Geeks Pvt. Ltd.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Loader2, ArrowLeft, MapPin, Package, FolderKanban, RotateCcw } from "lucide-react"
|
||||
import VideoPlayerSection from "@/components/video-player-section"
|
||||
import { SidebarNavigation } from "@/components/sidebar-navigation"
|
||||
import {
|
||||
type SessionContext,
|
||||
loadSession,
|
||||
@@ -157,31 +158,40 @@ export default function ResultsPage() {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col items-center justify-center gap-4">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<p className="text-muted-foreground">Loading detection results...</p>
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl shadow-lg">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-indigo-500" />
|
||||
<p className="text-gray-500">Loading detection results...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col items-center justify-center gap-4">
|
||||
<p className="text-destructive">{error}</p>
|
||||
<Button onClick={handleNewAnalysis}>Start New Analysis</Button>
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl shadow-lg">
|
||||
<p className="text-red-500">{error}</p>
|
||||
<Button onClick={handleNewAnalysis} className="bg-gradient-to-r from-indigo-500 to-purple-600 text-white">Start New Analysis</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950">
|
||||
{/* Sidebar Navigation */}
|
||||
<SidebarNavigation />
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="ml-16 min-h-screen">
|
||||
<div className="container mx-auto px-4 py-8 max-w-7xl">
|
||||
{/* Header */}
|
||||
<div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
|
||||
<h1 className="text-4xl font-bold mb-2 text-balance bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
|
||||
<h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
|
||||
{getTitle()}
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
View your AI-powered road analysis results
|
||||
</p>
|
||||
</div>
|
||||
@@ -189,30 +199,36 @@ export default function ResultsPage() {
|
||||
{/* Session Info Bar */}
|
||||
{session && (
|
||||
<div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
|
||||
<div className="flex items-center justify-between p-4 rounded-lg bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border border-primary/20">
|
||||
<div className="flex items-center justify-between p-4 rounded-xl 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 gap-6 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderKanban className="h-4 w-4 text-primary" />
|
||||
<span className="text-muted-foreground">Project:</span>
|
||||
<span className="font-medium">{session.projectName}</span>
|
||||
<div className="p-1.5 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 shadow-md shadow-indigo-500/30">
|
||||
<FolderKanban className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<span className="text-gray-500 dark:text-gray-400 text-xs uppercase font-semibold tracking-wide">Project:</span>
|
||||
<span className="font-bold text-gray-900 dark:text-white bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 bg-clip-text text-transparent">{session.projectName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="h-4 w-4 text-primary" />
|
||||
<span className="text-muted-foreground">Package:</span>
|
||||
<span className="font-medium">{session.packageName}</span>
|
||||
<div className="p-1.5 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-500 shadow-md shadow-emerald-500/30">
|
||||
<Package className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<span className="text-gray-500 dark:text-gray-400 text-xs uppercase font-semibold tracking-wide">Package:</span>
|
||||
<span className="font-bold text-gray-900 dark:text-white bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400 bg-clip-text text-transparent">{session.packageName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="h-4 w-4 text-primary" />
|
||||
<span className="text-muted-foreground">Location:</span>
|
||||
<span className="font-medium">{session.locationName}</span>
|
||||
<div className="p-1.5 rounded-lg bg-gradient-to-br from-purple-400 to-pink-500 shadow-md shadow-purple-500/30">
|
||||
<MapPin className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<span className="text-gray-500 dark:text-gray-400 text-xs uppercase font-semibold tracking-wide">Location:</span>
|
||||
<span className="font-bold text-gray-900 dark:text-white bg-gradient-to-r from-purple-600 to-pink-600 dark:from-purple-400 dark:to-pink-400 bg-clip-text text-transparent">{session.locationName}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={handleBackToUpload}>
|
||||
<Button variant="ghost" size="sm" onClick={handleBackToUpload} className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Upload
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleNewAnalysis}>
|
||||
<Button variant="outline" size="sm" onClick={handleNewAnalysis} className="border-indigo-200 dark:border-indigo-800 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/50">
|
||||
<RotateCcw className="h-4 w-4 mr-2" />
|
||||
New Analysis
|
||||
</Button>
|
||||
@@ -234,6 +250,7 @@ export default function ResultsPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -6,9 +6,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Upload, Loader2, AlertCircle, ArrowLeft, MapPin, Package, FolderKanban } from "lucide-react"
|
||||
import { Loader2 } from "lucide-react"
|
||||
import { SidebarNavigation } from "@/components/sidebar-navigation"
|
||||
import {
|
||||
type SessionContext,
|
||||
loadSession,
|
||||
@@ -71,7 +71,6 @@ export default function UploadPage() {
|
||||
if (data.type === "complete" || data.status === "completed") {
|
||||
setStatusMessage("Processing completed! Saving video...")
|
||||
ws.close()
|
||||
// Store video file in IndexedDB for results page
|
||||
if (file) {
|
||||
try {
|
||||
await storeVideoFile(videoId, file)
|
||||
@@ -79,7 +78,6 @@ export default function UploadPage() {
|
||||
console.error("Failed to store video file:", err)
|
||||
}
|
||||
}
|
||||
// Save video data and navigate to results
|
||||
saveVideoData({ videoId, detectionType })
|
||||
setStatusMessage("Redirecting to results...")
|
||||
setTimeout(() => router.push("/results"), 500)
|
||||
@@ -154,73 +152,96 @@ export default function UploadPage() {
|
||||
|
||||
const getTitle = () => {
|
||||
return detectionType === "pothole-detection"
|
||||
? "Pothole Detection System"
|
||||
: "Signboard Detection System"
|
||||
? "Pothole Detection"
|
||||
: "Signboard Detection"
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 flex items-center justify-center">
|
||||
<div className="p-8 rounded-2xl bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl shadow-lg">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-indigo-500" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
|
||||
<div className="container mx-auto px-4 py-8 max-w-7xl">
|
||||
{/* Header */}
|
||||
<div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
|
||||
<h1 className="text-4xl font-bold mb-2 text-balance bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
|
||||
{getTitle()}
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Upload a video to detect and analyze with AI-powered processing
|
||||
</p>
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950">
|
||||
{/* Sidebar Navigation */}
|
||||
<SidebarNavigation />
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="ml-16 min-h-screen relative overflow-hidden flex flex-col">
|
||||
{/* Decorative background elements */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute -top-40 -left-40 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl" />
|
||||
<div className="absolute -bottom-40 -right-40 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
{/* Session Info Bar */}
|
||||
<div className="flex-1 container mx-auto px-4 py-6 max-w-6xl relative z-10 flex flex-col">
|
||||
{/* Compact Header */}
|
||||
<div className="mb-4 animate-in fade-in slide-in-from-top duration-700">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent leading-tight">
|
||||
{getTitle()}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Compact Session Info Bar */}
|
||||
{session && (
|
||||
<div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
|
||||
<div className="flex items-center justify-between p-4 rounded-lg bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border border-primary/20">
|
||||
<div className="mb-4 animate-in fade-in slide-in-from-top duration-500 delay-100">
|
||||
<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-6 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderKanban className="h-4 w-4 text-primary" />
|
||||
<span className="text-muted-foreground">Project:</span>
|
||||
<span className="font-medium">{session.projectName}</span>
|
||||
<div>
|
||||
<p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Project</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white text-sm">{session.projectName}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="h-4 w-4 text-primary" />
|
||||
<span className="text-muted-foreground">Package:</span>
|
||||
<span className="font-medium">{session.packageName}</span>
|
||||
<div className="w-px h-8 bg-gray-300 dark:bg-gray-600" />
|
||||
<div>
|
||||
<p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Package</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white text-sm">{session.packageName}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="h-4 w-4 text-primary" />
|
||||
<span className="text-muted-foreground">Location:</span>
|
||||
<span className="font-medium">{session.locationName}</span>
|
||||
<div className="w-px h-8 bg-gray-300 dark:bg-gray-600" />
|
||||
<div>
|
||||
<p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Location</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white text-sm">{session.locationName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={handleBackToSelection}>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleBackToSelection}
|
||||
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 text-xs"
|
||||
>
|
||||
Change Selection
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upload Card */}
|
||||
<Card className="transition-all hover:shadow-lg animate-in fade-in slide-in-from-bottom duration-700">
|
||||
<CardHeader>
|
||||
<CardTitle>Upload Video</CardTitle>
|
||||
<CardDescription>
|
||||
Select a video file, detection type, and vehicle speed to start AI-powered analysis
|
||||
<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 animate-in fade-in slide-in-from-bottom duration-700 delay-150 flex-1">
|
||||
<CardHeader className="pb-4 border-b border-gray-100 dark:border-gray-700 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30">
|
||||
<CardTitle className="text-xl 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">
|
||||
Upload Video
|
||||
</span>
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm">
|
||||
Select video file, detection type, and vehicle speed for analysis
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardContent className="pt-4 space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Video File Input */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="video-file">Video File</Label>
|
||||
<Label htmlFor="video-file" className="text-sm font-semibold">
|
||||
Video File
|
||||
</Label>
|
||||
<Input
|
||||
id="video-file"
|
||||
type="file"
|
||||
@@ -230,17 +251,23 @@ export default function UploadPage() {
|
||||
setError(null)
|
||||
}}
|
||||
disabled={uploading}
|
||||
className="h-10 bg-gray-50 dark:bg-gray-800 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-indigo-100 dark:file:bg-indigo-900/50 file:text-indigo-600 dark:file:text-indigo-400 file:font-medium file:text-xs hover:file:bg-indigo-200"
|
||||
/>
|
||||
{file && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Selected: {file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)
|
||||
<div className="p-2 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800">
|
||||
<p className="text-xs font-medium text-gray-900 dark:text-white">{file.name}</p>
|
||||
<p className="text-[10px] text-gray-500">
|
||||
{(file.size / 1024 / 1024).toFixed(2)} MB
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* JSON File Input */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="json-file">GPS JSON File</Label>
|
||||
<Label htmlFor="json-file" className="text-sm font-semibold">
|
||||
GPS JSON File <span className="text-gray-400 font-normal text-xs">(Optional)</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="json-file"
|
||||
type="file"
|
||||
@@ -250,35 +277,47 @@ export default function UploadPage() {
|
||||
setError(null)
|
||||
}}
|
||||
disabled={uploading}
|
||||
className="h-10 bg-gray-50 dark:bg-gray-800 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-indigo-100 dark:file:bg-indigo-900/50 file:text-indigo-600 dark:file:text-indigo-400 file:font-medium file:text-xs hover:file:bg-indigo-200"
|
||||
/>
|
||||
{jsonFile && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Selected: {jsonFile.name} ({(jsonFile.size / 1024).toFixed(2)} KB)
|
||||
<div className="p-2 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800">
|
||||
<p className="text-xs font-medium text-gray-900 dark:text-white">{jsonFile.name}</p>
|
||||
<p className="text-[10px] text-gray-500">
|
||||
{(jsonFile.size / 1024).toFixed(2)} KB
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Detection Type */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="detection-type">Detection Type</Label>
|
||||
<Label htmlFor="detection-type" className="text-sm font-semibold">
|
||||
Detection Type
|
||||
</Label>
|
||||
<Select
|
||||
value={detectionType}
|
||||
onValueChange={(v) => setDetectionType(v as DetectionType)}
|
||||
disabled={uploading}
|
||||
>
|
||||
<SelectTrigger id="detection-type">
|
||||
<SelectTrigger id="detection-type" className="h-10 bg-gray-50 dark:bg-gray-800">
|
||||
<SelectValue placeholder="Select detection type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="pothole-detection">Pothole Detection</SelectItem>
|
||||
<SelectItem value="sign-board-detection">Signboard Detection</SelectItem>
|
||||
<SelectItem value="pothole-detection">
|
||||
<span className="font-medium">Pothole Detection</span>
|
||||
</SelectItem>
|
||||
<SelectItem value="sign-board-detection">
|
||||
<span className="font-medium">Signboard Detection</span>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Speed Input */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="speed">Speed (km/h)</Label>
|
||||
<Label htmlFor="speed" className="text-sm font-semibold">
|
||||
Vehicle Speed (km/h)
|
||||
</Label>
|
||||
<Input
|
||||
id="speed"
|
||||
type="number"
|
||||
@@ -287,15 +326,18 @@ export default function UploadPage() {
|
||||
value={speed}
|
||||
onChange={(e) => setSpeed(Number(e.target.value))}
|
||||
disabled={uploading}
|
||||
className="h-10 bg-gray-50 dark:bg-gray-800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 text-destructive">
|
||||
<AlertCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-sm whitespace-pre-line">{error}</p>
|
||||
<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="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>
|
||||
<p className="text-xs text-red-600 dark:text-red-400 leading-relaxed whitespace-pre-line">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -303,35 +345,51 @@ export default function UploadPage() {
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={!file || uploading}
|
||||
className="w-full"
|
||||
className={`w-full h-12 text-sm font-semibold transition-all rounded-xl ${file && !uploading ? 'bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white shadow-lg shadow-indigo-500/25' : ''
|
||||
}`}
|
||||
size="lg"
|
||||
>
|
||||
{uploading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
<span className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Processing...
|
||||
</>
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
Upload & Process
|
||||
</>
|
||||
"Upload and Process"
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Progress Section */}
|
||||
{uploading && (
|
||||
<div className="space-y-3 animate-in fade-in slide-in-from-top duration-500">
|
||||
<Progress value={progress} className="h-3" />
|
||||
<div className="space-y-3 p-4 rounded-xl bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800 animate-in fade-in slide-in-from-top duration-500">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">{statusMessage}</span>
|
||||
<span className="font-semibold">{progress}%</span>
|
||||
<span className="font-medium text-gray-700 dark:text-gray-300 text-xs">Processing Progress</span>
|
||||
<span className="font-bold text-indigo-600 dark:text-indigo-400 text-xs">{progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 rounded-full bg-indigo-100 dark:bg-indigo-900/50 overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{statusMessage && (
|
||||
<p className="text-xs text-gray-500">{statusMessage}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-4 text-center animate-in fade-in duration-700 delay-300">
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">
|
||||
Sentient Geeks Pvt. Ltd.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
84
components/dashboard/compact-project-selector.tsx
Normal file
84
components/dashboard/compact-project-selector.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { FolderOpen, MapPin, Building2 } from "lucide-react"
|
||||
import { type Project } from "@/lib/api"
|
||||
|
||||
interface CompactProjectSelectorProps {
|
||||
projects: Project[]
|
||||
selectedProjectId: string | null
|
||||
onProjectChange: (projectId: string) => void
|
||||
selectedProject: Project | undefined
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function CompactProjectSelector({
|
||||
projects,
|
||||
selectedProjectId,
|
||||
onProjectChange,
|
||||
selectedProject,
|
||||
isLoading = false
|
||||
}: CompactProjectSelectorProps) {
|
||||
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>
|
||||
<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">
|
||||
<SelectValue placeholder="Select project" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
{selectedProject.corridor_name}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 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">
|
||||
{selectedProject.state}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
130
components/dashboard/dashboard-map-content.tsx
Normal file
130
components/dashboard/dashboard-map-content.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { MapContainer, TileLayer, CircleMarker, Popup, useMap } from "react-leaflet"
|
||||
import { LatLngBounds, LatLng } from "leaflet"
|
||||
import "leaflet/dist/leaflet.css"
|
||||
import { type Detection } from "@/lib/api"
|
||||
|
||||
interface DashboardMapContentProps {
|
||||
detections: Detection[]
|
||||
}
|
||||
|
||||
// Component to auto-fit map bounds to show all markers
|
||||
function FitBounds({ bounds }: { bounds: LatLngBounds }) {
|
||||
const map = useMap()
|
||||
|
||||
useEffect(() => {
|
||||
if (bounds.isValid()) {
|
||||
map.fitBounds(bounds, { padding: [50, 50] })
|
||||
}
|
||||
}, [bounds, map])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default function DashboardMapContent({ detections }: DashboardMapContentProps) {
|
||||
if (detections.length === 0) {
|
||||
return (
|
||||
<div className="h-full w-full flex items-center justify-center bg-muted/20">
|
||||
<p className="text-muted-foreground">No detections to display</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Calculate bounds to fit all markers
|
||||
const firstDetection = detections[0]
|
||||
const bounds = new LatLngBounds(
|
||||
new LatLng(firstDetection.latitude!, firstDetection.longitude!),
|
||||
new LatLng(firstDetection.latitude!, firstDetection.longitude!)
|
||||
)
|
||||
|
||||
detections.forEach(d => {
|
||||
if (d.latitude && d.longitude) {
|
||||
bounds.extend(new LatLng(d.latitude, d.longitude))
|
||||
}
|
||||
})
|
||||
|
||||
// Center point
|
||||
const center: [number, number] = [
|
||||
(bounds.getNorth() + bounds.getSouth()) / 2,
|
||||
(bounds.getEast() + bounds.getWest()) / 2
|
||||
]
|
||||
|
||||
// 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: "#3b82f6", stroke: "#2563eb" } // Blue for signboards
|
||||
}
|
||||
|
||||
// Get display name for detection type
|
||||
const getTypeName = (type: string) => {
|
||||
if (type.toLowerCase().includes("pothole")) {
|
||||
return "Pothole"
|
||||
}
|
||||
return "Signboard"
|
||||
}
|
||||
|
||||
return (
|
||||
<MapContainer
|
||||
center={center}
|
||||
zoom={13}
|
||||
className="h-full w-full"
|
||||
scrollWheelZoom={true}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
|
||||
{/* Detection markers */}
|
||||
{detections.map((detection, idx) => {
|
||||
const colors = getMarkerColor(detection.type)
|
||||
const typeName = getTypeName(detection.type)
|
||||
|
||||
return (
|
||||
<CircleMarker
|
||||
key={`${detection.id}-${idx}`}
|
||||
center={[detection.latitude!, detection.longitude!]}
|
||||
radius={10}
|
||||
fillColor={colors.fill}
|
||||
color={colors.stroke}
|
||||
weight={2}
|
||||
opacity={1}
|
||||
fillOpacity={0.8}
|
||||
>
|
||||
<Popup>
|
||||
<div className="text-sm space-y-2 min-w-[180px]">
|
||||
<div className="font-bold text-base border-b pb-1">
|
||||
{typeName}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Class:</span>
|
||||
<span className="font-medium">{detection.class.replace(/_/g, " ")}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Confidence:</span>
|
||||
<span className="font-medium">{(detection.confidence * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-2 border-t">
|
||||
<div className="text-xs text-muted-foreground mb-1">Coordinates</div>
|
||||
<div className="font-mono text-xs bg-muted/30 p-2 rounded">
|
||||
<div>Lat: {detection.latitude!.toFixed(6)}</div>
|
||||
<div>Lng: {detection.longitude!.toFixed(6)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</CircleMarker>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Auto-fit bounds */}
|
||||
<FitBounds bounds={bounds} />
|
||||
</MapContainer>
|
||||
)
|
||||
}
|
||||
116
components/dashboard/dashboard-map.tsx
Normal file
116
components/dashboard/dashboard-map.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client"
|
||||
|
||||
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"
|
||||
|
||||
// Dynamically import the map to avoid SSR issues with Leaflet
|
||||
const DashboardMapContent = dynamic(
|
||||
() => import("./dashboard-map-content"),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="h-full w-full flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
interface DashboardMapProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function DashboardMap({ className }: 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)
|
||||
}
|
||||
}
|
||||
|
||||
loadDetections()
|
||||
}, [])
|
||||
|
||||
// Filter detections with valid GPS coordinates
|
||||
const validDetections = detections.filter(d => d.latitude && d.longitude)
|
||||
|
||||
// Count potholes and signboards
|
||||
const potholeCount = validDetections.filter(d =>
|
||||
d.type?.toLowerCase().includes("pothole") ||
|
||||
d.class?.toLowerCase().includes("pothole")
|
||||
).length
|
||||
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">
|
||||
<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>
|
||||
<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>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{isLoading ? "Loading..." : `${validDetections.length} detections with GPS coordinates`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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" />
|
||||
<span className="text-gray-600 dark:text-gray-400 font-medium">Potholes ({potholeCount})</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-blue-500 shadow-sm shadow-blue-500/50" />
|
||||
<span className="text-gray-600 dark:text-gray-400 font-medium">Signboards ({signboardCount})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="h-[400px] 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 animate-spin text-indigo-500" />
|
||||
</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>
|
||||
) : validDetections.length === 0 ? (
|
||||
<div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/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>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<DashboardMapContent detections={validDetections} />
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
117
components/dashboard/detection-chart.tsx
Normal file
117
components/dashboard/detection-chart.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
|
||||
interface DetectionChartProps {
|
||||
potholes: number
|
||||
signboards: number
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function DetectionChart({ potholes, signboards, isLoading }: DetectionChartProps) {
|
||||
const total = potholes + signboards
|
||||
const potholePercent = total > 0 ? (potholes / total) * 100 : 50
|
||||
const signboardPercent = total > 0 ? (signboards / total) * 100 : 50
|
||||
|
||||
return (
|
||||
<Card className="glass-card card-glow border-0 overflow-hidden">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg font-semibold">Detection Distribution</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-48">
|
||||
<div className="w-32 h-32 rounded-full bg-primary/10 animate-pulse" />
|
||||
</div>
|
||||
) : total === 0 ? (
|
||||
<div className="flex items-center justify-center h-48 text-muted-foreground">
|
||||
No detections yet
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Donut Chart */}
|
||||
<div className="relative w-36 h-36 flex-shrink-0">
|
||||
<svg viewBox="0 0 100 100" className="w-full h-full transform -rotate-90">
|
||||
{/* Background circle */}
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
fill="none"
|
||||
stroke="hsl(var(--muted))"
|
||||
strokeWidth="16"
|
||||
opacity="0.2"
|
||||
/>
|
||||
{/* Potholes arc */}
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
fill="none"
|
||||
stroke="url(#potholeGradient)"
|
||||
strokeWidth="16"
|
||||
strokeDasharray={`${potholePercent * 2.51} 251`}
|
||||
strokeLinecap="round"
|
||||
className="transition-all duration-700"
|
||||
/>
|
||||
{/* Signboards arc */}
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
fill="none"
|
||||
stroke="url(#signboardGradient)"
|
||||
strokeWidth="16"
|
||||
strokeDasharray={`${signboardPercent * 2.51} 251`}
|
||||
strokeDashoffset={`-${potholePercent * 2.51}`}
|
||||
strokeLinecap="round"
|
||||
className="transition-all duration-700"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="potholeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#f97316" />
|
||||
<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" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-foreground">{total}</p>
|
||||
<p className="text-[10px] text-muted-foreground uppercase">Total</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex flex-col gap-3 flex-1">
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-orange-500/10 border border-orange-500/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-gradient-to-r from-orange-500 to-orange-600" />
|
||||
<span className="text-sm font-medium">Potholes</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-foreground">{potholes}</p>
|
||||
<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 gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-gradient-to-r from-cyan-500 to-cyan-600" />
|
||||
<span className="text-sm font-medium">Signboards</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-foreground">{signboards}</p>
|
||||
<p className="text-xs text-muted-foreground">{signboardPercent.toFixed(0)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
113
components/dashboard/detection-donut-chart.tsx
Normal file
113
components/dashboard/detection-donut-chart.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
"use client"
|
||||
|
||||
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"
|
||||
import { Loader2 } from "lucide-react"
|
||||
|
||||
interface DetectionDonutChartProps {
|
||||
potholes: number
|
||||
signboards: number
|
||||
isLoading: boolean
|
||||
}
|
||||
|
||||
const COLORS = {
|
||||
pothole: "#ef4444",
|
||||
signboard: "#3b82f6"
|
||||
}
|
||||
|
||||
export function DetectionDonutChart({ potholes, signboards, isLoading }: DetectionDonutChartProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-[250px] flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary/50" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const total = potholes + signboards
|
||||
|
||||
if (total === 0) {
|
||||
return (
|
||||
<div className="h-[250px] flex flex-col items-center justify-center text-muted-foreground">
|
||||
<p className="text-sm">No detections found</p>
|
||||
<p className="text-xs mt-1">Process videos to see data</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const data = [
|
||||
{ name: "Potholes", value: potholes, color: COLORS.pothole },
|
||||
{ name: "Signboards", value: signboards, color: COLORS.signboard }
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="h-[250px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={55}
|
||||
outerRadius={80}
|
||||
paddingAngle={3}
|
||||
dataKey="value"
|
||||
strokeWidth={0}
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={entry.color}
|
||||
className="transition-opacity hover:opacity-80"
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
content={({ active, payload }) => {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload[0]
|
||||
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">{data.name}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Count: <span className="font-semibold text-foreground">{data.value}</span>
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{((Number(data.value) / total) * 100).toFixed(1)}% of total
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
verticalAlign="bottom"
|
||||
height={36}
|
||||
content={({ payload }) => (
|
||||
<div className="flex items-center justify-center gap-6 mt-2">
|
||||
{payload?.map((entry, index) => (
|
||||
<div key={`legend-${index}`} className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{entry.value}: {data[index].value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
{/* 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
95
components/dashboard/gradient-stats-card.tsx
Normal file
95
components/dashboard/gradient-stats-card.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { LucideIcon } from "lucide-react"
|
||||
|
||||
interface GradientStatsCardProps {
|
||||
title: string
|
||||
subtitle?: string
|
||||
value: number | string
|
||||
icon: LucideIcon
|
||||
gradient: "green" | "coral" | "blue" | "purple"
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
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"
|
||||
},
|
||||
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"
|
||||
},
|
||||
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"
|
||||
},
|
||||
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"
|
||||
}
|
||||
}
|
||||
|
||||
export function GradientStatsCard({
|
||||
title,
|
||||
subtitle = "Work level distribution",
|
||||
value,
|
||||
icon: Icon,
|
||||
gradient,
|
||||
isLoading = false
|
||||
}: GradientStatsCardProps) {
|
||||
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>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="h-9 w-20 bg-gray-200 dark:bg-gray-700 rounded mt-1 animate-pulse" />
|
||||
) : (
|
||||
<p className={`text-3xl font-extrabold mt-1 ${styles.valueGradient} bg-clip-text text-transparent`}>
|
||||
{value}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
127
components/dashboard/location-bar-chart.tsx
Normal file
127
components/dashboard/location-bar-chart.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
"use client"
|
||||
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
|
||||
import { Loader2 } from "lucide-react"
|
||||
|
||||
interface LocationData {
|
||||
name: string
|
||||
potholes: number
|
||||
signboards: number
|
||||
total: number
|
||||
}
|
||||
|
||||
interface LocationBarChartProps {
|
||||
data: LocationData[]
|
||||
isLoading: boolean
|
||||
}
|
||||
|
||||
const COLORS = {
|
||||
pothole: "#ef4444",
|
||||
signboard: "#3b82f6"
|
||||
}
|
||||
|
||||
export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-[300px] flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary/50" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<div className="h-[300px] flex flex-col items-center justify-center text-muted-foreground">
|
||||
<p className="text-sm">No location data available</p>
|
||||
<p className="text-xs mt-1">Process videos to see detections by location</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={data}
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 40 }}
|
||||
barCategoryGap="20%"
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke="hsl(var(--muted-foreground) / 0.1)"
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={60}
|
||||
interval={0}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
width={35}
|
||||
/>
|
||||
<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>
|
||||
{payload.map((entry, index) => (
|
||||
<div key={index} className="flex items-center gap-2 text-sm">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="text-muted-foreground">{entry.name}:</span>
|
||||
<span className="font-semibold">{entry.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
verticalAlign="top"
|
||||
height={36}
|
||||
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"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{entry.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="potholes"
|
||||
name="Potholes"
|
||||
fill={COLORS.pothole}
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="signboards"
|
||||
name="Signboards"
|
||||
fill={COLORS.signboard}
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
114
components/dashboard/recent-analyses-table.tsx
Normal file
114
components/dashboard/recent-analyses-table.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Eye, AlertCircle } from "lucide-react"
|
||||
import { type Video } from "@/lib/api"
|
||||
|
||||
interface RecentAnalysesTableProps {
|
||||
videos: Video[]
|
||||
isLoading?: boolean
|
||||
onViewResults?: (videoId: string, detectionType: string) => void
|
||||
}
|
||||
|
||||
export function RecentAnalysesTable({ videos, isLoading, onViewResults }: RecentAnalysesTableProps) {
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString("en-IN", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
})
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "completed":
|
||||
return <Badge className="bg-emerald-500/20 text-emerald-600 border-emerald-500/30 hover:bg-emerald-500/30">Completed</Badge>
|
||||
case "processing":
|
||||
return <Badge className="bg-blue-500/20 text-blue-600 border-blue-500/30 hover:bg-blue-500/30">Processing</Badge>
|
||||
case "pending":
|
||||
return <Badge className="bg-yellow-500/20 text-yellow-600 border-yellow-500/30 hover:bg-yellow-500/30">Pending</Badge>
|
||||
case "failed":
|
||||
return <Badge className="bg-red-500/20 text-red-600 border-red-500/30 hover:bg-red-500/30">Failed</Badge>
|
||||
default:
|
||||
return <Badge variant="secondary">{status}</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
const getDetectionTypeBadge = (type: string) => {
|
||||
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 (
|
||||
<Card className="glass-card card-glow border-0 overflow-hidden">
|
||||
<CardHeader className="pb-3 border-b border-border/50">
|
||||
<CardTitle className="text-lg font-semibold">Recent Analyses</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{isLoading ? (
|
||||
<div className="p-6 space-y-3">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="h-14 bg-primary/5 rounded-lg animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : videos.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<AlertCircle className="h-10 w-10 mb-3 opacity-50" />
|
||||
<p className="text-sm">No analyses found</p>
|
||||
<p className="text-xs mt-1">Start a new analysis to see results here</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-border/50">
|
||||
{videos.slice(0, 8).map((video) => (
|
||||
<div
|
||||
key={video.id}
|
||||
className="flex items-center justify-between p-4 hover:bg-primary/5 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">
|
||||
{video.filename || `Video ${video.id.slice(0, 8)}...`}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatDate(video.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{getDetectionTypeBadge(video.detection_type)}
|
||||
{getStatusBadge(video.status)}
|
||||
</div>
|
||||
<div className="text-right flex-shrink-0 w-20">
|
||||
<p className="text-sm font-bold text-foreground">
|
||||
{video.detection_type === "pothole-detection"
|
||||
? video.unique_potholes ?? 0
|
||||
: video.unique_signboards ?? 0}
|
||||
</p>
|
||||
<p className="text-[10px] text-muted-foreground uppercase">Detections</p>
|
||||
</div>
|
||||
</div>
|
||||
{video.status === "completed" && onViewResults && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onViewResults(video.id, video.detection_type)}
|
||||
className="ml-4 flex-shrink-0"
|
||||
>
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
View
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
38
components/dashboard/stats-card.tsx
Normal file
38
components/dashboard/stats-card.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { LucideIcon } from "lucide-react"
|
||||
|
||||
interface StatsCardProps {
|
||||
title: string
|
||||
value: string | number
|
||||
icon: LucideIcon
|
||||
gradient: string
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function StatsCard({ title, value, icon: Icon, gradient, isLoading }: StatsCardProps) {
|
||||
return (
|
||||
<Card className="glass-card card-glow border-0 overflow-hidden group hover:scale-[1.02] transition-transform duration-300">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{title}
|
||||
</p>
|
||||
{isLoading ? (
|
||||
<div className="h-8 w-16 bg-primary/10 rounded animate-pulse" />
|
||||
) : (
|
||||
<p className="text-3xl font-bold text-foreground">
|
||||
{value}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`p-3 rounded-xl ${gradient} group-hover:scale-110 transition-transform duration-300`}>
|
||||
<Icon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
129
components/navigation-menu.tsx
Normal file
129
components/navigation-menu.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter, usePathname } from "next/navigation"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@/components/ui/sheet"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Menu,
|
||||
LayoutDashboard,
|
||||
ChevronRight,
|
||||
Home,
|
||||
Map
|
||||
} from "lucide-react"
|
||||
|
||||
interface NavItem {
|
||||
title: string
|
||||
description: string
|
||||
href: string
|
||||
icon: React.ElementType
|
||||
}
|
||||
|
||||
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: "Show Map",
|
||||
description: "View all detections on an interactive map",
|
||||
href: "/map",
|
||||
icon: Map
|
||||
}
|
||||
]
|
||||
|
||||
export function NavigationMenu() {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
|
||||
const handleNavigation = (href: string) => {
|
||||
setIsOpen(false)
|
||||
router.push(href)
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="fixed top-4 left-4 z-50 h-11 w-11 rounded-xl glass-card border border-white/20 shadow-lg hover:bg-white/20 hover:scale-105 transition-all duration-300"
|
||||
aria-label="Open navigation menu"
|
||||
>
|
||||
<Menu className="h-5 w-5 text-foreground" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="w-[320px] sm:w-[380px] bg-background/95 backdrop-blur-xl border-r border-white/10">
|
||||
<SheetHeader className="pb-6 border-b border-white/10">
|
||||
<SheetTitle className="text-2xl font-bold text-gradient">
|
||||
VisionRoad
|
||||
</SheetTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
AI-Powered Road Detection System
|
||||
</p>
|
||||
</SheetHeader>
|
||||
|
||||
{/* Navigation Items */}
|
||||
<nav className="mt-6 space-y-2">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href
|
||||
const Icon = item.icon
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.href}
|
||||
onClick={() => handleNavigation(item.href)}
|
||||
className={`w-full flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-300 group ${isActive
|
||||
? "bg-primary/15 border border-primary/30"
|
||||
: "hover:bg-white/5 border border-transparent hover:border-white/10"
|
||||
}`}
|
||||
>
|
||||
<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"
|
||||
}`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className={`font-semibold text-sm ${isActive ? "text-primary" : "text-foreground"
|
||||
}`}>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronRight className={`h-4 w-4 transition-all duration-300 ${isActive
|
||||
? "text-primary opacity-100"
|
||||
: "text-muted-foreground opacity-0 group-hover:opacity-100"
|
||||
}`} />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="absolute bottom-4 left-4 right-4 text-center">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Sentient Geeks Pvt. Ltd.
|
||||
</p>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Loader2, MapPin, Package, FolderKanban, ArrowRight, AlertCircle } from "lucide-react"
|
||||
import { Loader2 } from "lucide-react"
|
||||
import {
|
||||
fetchProjects,
|
||||
fetchPackagesByProject,
|
||||
@@ -139,47 +139,85 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
|
||||
|
||||
const isComplete = selectedProject && selectedPackage && selectedLocation
|
||||
|
||||
// Step status helpers
|
||||
const getStepStatus = (step: number) => {
|
||||
if (step === 1) return selectedProject ? 'completed' : 'active'
|
||||
if (step === 2) return selectedPackage ? 'completed' : selectedProject ? 'active' : 'pending'
|
||||
if (step === 3) return selectedLocation ? 'completed' : selectedPackage ? 'active' : 'pending'
|
||||
return 'pending'
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="transition-all hover:shadow-lg border-0 bg-gradient-to-br from-card via-card to-muted/30">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-gradient-to-br from-primary/20 to-primary/5">
|
||||
<FolderKanban className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<Card className="glass-card card-glow border-0 overflow-hidden">
|
||||
<CardHeader className="pb-6 border-b border-border/50">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<CardTitle className="text-xl">Select Project Location</CardTitle>
|
||||
<CardDescription className="mt-1">
|
||||
Choose your project, package, and location to begin video analysis
|
||||
<CardTitle className="text-2xl font-semibold">Select Project Location</CardTitle>
|
||||
<CardDescription className="mt-2 text-base">
|
||||
Select Project, Package & Location to begin intelligent road analysis with advanced computer vision.
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
{/* Step Progress Indicator */}
|
||||
<div className="flex items-center justify-center gap-2 pt-2">
|
||||
{[1, 2, 3].map((step, index) => {
|
||||
const status = getStepStatus(step)
|
||||
const labels = ['Project', 'Package', 'Location']
|
||||
return (
|
||||
<div key={step} className="flex items-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300 ${status === 'completed' ? 'step-completed' :
|
||||
status === 'active' ? 'step-active' :
|
||||
'step-pending'
|
||||
}`}
|
||||
>
|
||||
{step}
|
||||
</div>
|
||||
<span className={`text-xs mt-1.5 font-medium transition-colors ${status === 'pending' ? 'text-muted-foreground/60' : 'text-foreground'
|
||||
}`}>
|
||||
{labels[index]}
|
||||
</span>
|
||||
</div>
|
||||
{index < 2 && (
|
||||
<div className={`w-12 h-0.5 mx-2 mt-[-16px] rounded-full transition-colors duration-300 ${getStepStatus(step + 1) !== 'pending' ? 'bg-primary' : 'bg-border'
|
||||
}`} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
|
||||
<CardContent className="pt-6 space-y-6">
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 text-destructive animate-in fade-in slide-in-from-top duration-300">
|
||||
<AlertCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-sm">{error}</p>
|
||||
<div className="flex items-start gap-3 p-4 rounded-xl bg-destructive/10 border border-destructive/20 text-destructive animate-in fade-in slide-in-from-top duration-300">
|
||||
<div className="w-5 h-5 rounded-full bg-destructive/20 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<span className="text-xs font-bold">!</span>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Project Dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="project" className="flex items-center gap-2 text-sm font-medium">
|
||||
<FolderKanban className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="project" className="text-sm font-semibold text-foreground">
|
||||
Project
|
||||
</Label>
|
||||
<div className="input-glow rounded-lg">
|
||||
<Select
|
||||
value={selectedProject?.id || ""}
|
||||
onValueChange={handleProjectChange}
|
||||
disabled={loadingProjects}
|
||||
>
|
||||
<SelectTrigger id="project" className="h-11">
|
||||
<SelectTrigger id="project" className="h-12 bg-background/50 border-border/50 hover:border-primary/50 transition-colors">
|
||||
{loadingProjects ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="h-4 w-4 animate-spin text-primary" />
|
||||
<span className="text-muted-foreground">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder="Select a project" />
|
||||
@@ -188,39 +226,30 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
|
||||
<SelectContent>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.id}>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{project.name}</span>
|
||||
{project.corridor_name && (
|
||||
<span className="text-xs text-muted-foreground">{project.corridor_name}</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{selectedProject?.state && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
State: {selectedProject.state}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Package Dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="package" className="flex items-center gap-2 text-sm font-medium">
|
||||
<Package className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="package" className="text-sm font-semibold text-foreground">
|
||||
Package
|
||||
</Label>
|
||||
<div className="input-glow rounded-lg">
|
||||
<Select
|
||||
value={selectedPackage?.id || ""}
|
||||
onValueChange={handlePackageChange}
|
||||
disabled={!selectedProject || loadingPackages}
|
||||
>
|
||||
<SelectTrigger id="package" className="h-11">
|
||||
<SelectTrigger id="package" className="h-12 bg-background/50 border-border/50 hover:border-primary/50 transition-colors">
|
||||
{loadingPackages ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="h-4 w-4 animate-spin text-primary" />
|
||||
<span className="text-muted-foreground">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={selectedProject ? "Select a package" : "Select project first"} />
|
||||
@@ -229,34 +258,30 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
|
||||
<SelectContent>
|
||||
{packages.map((pkg) => (
|
||||
<SelectItem key={pkg.id} value={pkg.id}>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{pkg.name}</span>
|
||||
{pkg.region && (
|
||||
<span className="text-xs text-muted-foreground">{pkg.region}</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Location Dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location" className="flex items-center gap-2 text-sm font-medium">
|
||||
<MapPin className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="location" className="text-sm font-semibold text-foreground">
|
||||
Location
|
||||
</Label>
|
||||
<div className="input-glow rounded-lg">
|
||||
<Select
|
||||
value={selectedLocation?.id || ""}
|
||||
onValueChange={handleLocationChange}
|
||||
disabled={!selectedPackage || loadingLocations}
|
||||
>
|
||||
<SelectTrigger id="location" className="h-11">
|
||||
<SelectTrigger id="location" className="h-12 bg-background/50 border-border/50 hover:border-primary/50 transition-colors">
|
||||
{loadingLocations ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="h-4 w-4 animate-spin text-primary" />
|
||||
<span className="text-muted-foreground">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={selectedPackage ? "Select a location" : "Select package first"} />
|
||||
@@ -265,27 +290,25 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
|
||||
<SelectContent>
|
||||
{locations.map((location) => (
|
||||
<SelectItem key={location.id} value={location.id}>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{location.segment_name}</span>
|
||||
{location.chainage_start_km !== null && location.chainage_end_km !== null && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
KM {location.chainage_start_km} - {location.chainage_end_km}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Summary */}
|
||||
{isComplete && (
|
||||
<div className="p-4 rounded-lg bg-primary/5 border border-primary/20 animate-in fade-in slide-in-from-bottom duration-300">
|
||||
<p className="text-sm text-muted-foreground mb-1">Selected:</p>
|
||||
<p className="font-medium">
|
||||
{selectedProject?.name} → {selectedPackage?.name} → {selectedLocation?.segment_name}
|
||||
<div className="px-4 py-3 rounded-lg bg-primary/5 border border-primary/15 animate-in fade-in slide-in-from-bottom duration-300">
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium">Path:</span>
|
||||
<span className="text-foreground">{selectedProject?.name}</span>
|
||||
<span>/</span>
|
||||
<span className="text-foreground">{selectedPackage?.name}</span>
|
||||
<span>/</span>
|
||||
<span className="text-foreground">{selectedLocation?.segment_name}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -294,14 +317,12 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
|
||||
<Button
|
||||
onClick={handleProceed}
|
||||
disabled={!isComplete}
|
||||
className="w-full h-12 text-base font-semibold transition-all"
|
||||
className={`w-full h-14 text-base font-semibold transition-all rounded-xl ${isComplete ? 'btn-gradient text-white' : ''
|
||||
}`}
|
||||
size="lg"
|
||||
>
|
||||
{isComplete ? (
|
||||
<>
|
||||
Proceed to Upload
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</>
|
||||
"Proceed to Upload"
|
||||
) : (
|
||||
"Complete all selections to proceed"
|
||||
)}
|
||||
|
||||
108
components/sidebar-navigation.tsx
Normal file
108
components/sidebar-navigation.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
"use client"
|
||||
|
||||
import { useRouter, usePathname } from "next/navigation"
|
||||
import { Home, LayoutDashboard, User } from "lucide-react"
|
||||
|
||||
interface NavItem {
|
||||
title: string
|
||||
href: string
|
||||
icon: React.ElementType
|
||||
gradient: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
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: "Account",
|
||||
href: "/account",
|
||||
icon: User,
|
||||
gradient: "from-purple-400 to-pink-500",
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
|
||||
export function SidebarNavigation() {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
|
||||
const handleNavigation = (item: NavItem) => {
|
||||
if (item.disabled) return
|
||||
router.push(item.href)
|
||||
}
|
||||
|
||||
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">
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
{/* Navigation Items */}
|
||||
<nav className="flex-1 flex flex-col items-center gap-3">
|
||||
{navItems.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
|
||||
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"
|
||||
}
|
||||
`}
|
||||
style={isActive && !item.disabled ? { boxShadow: `0 8px 20px -4px rgba(99, 102, 241, 0.4)` } : {}}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
</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
|
||||
">
|
||||
{item.title}{item.disabled && " (Coming Soon)"}
|
||||
{/* Arrow */}
|
||||
<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>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
@@ -1,12 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from "react"
|
||||
import dynamic from "next/dynamic"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Target, AlertTriangle, Film, Activity, Gauge, Monitor, SignpostBig, Map as MapIcon } from "lucide-react"
|
||||
import MapModal from "@/components/map-modal"
|
||||
|
||||
// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
|
||||
const MapModal = dynamic(() => import("@/components/map-modal"), { ssr: false })
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
|
||||
|
||||
@@ -194,22 +197,31 @@ function DetailedSummarySection({
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Location-based Summary */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<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">
|
||||
<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">
|
||||
<MapIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base">Detection Locations</CardTitle>
|
||||
<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">
|
||||
Detection Locations
|
||||
</span>
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
{isPothole ? "Potholes" : "Signboards"} detected across project locations
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowMap(true)}
|
||||
className="gap-2"
|
||||
className="gap-2 border-cyan-200 dark:border-cyan-800 hover:bg-cyan-50 dark:hover:bg-cyan-900/50"
|
||||
>
|
||||
<MapIcon className="h-4 w-4" />
|
||||
<MapIcon className="h-4 w-4 text-cyan-500" />
|
||||
Show Map
|
||||
</Button>
|
||||
</div>
|
||||
@@ -245,12 +257,23 @@ function DetailedSummarySection({
|
||||
</Card>
|
||||
|
||||
{/* All Detections List */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">All Detections</CardTitle>
|
||||
<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-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30">
|
||||
<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">
|
||||
<Target className="h-4 w-4 text-white" />
|
||||
</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">
|
||||
All Detections
|
||||
</span>
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
Complete list of {isPothole ? "potholes" : "signboards"} with GPS coordinates
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[300px] rounded-md border bg-muted/30 p-3">
|
||||
@@ -345,12 +368,23 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
|
||||
]
|
||||
|
||||
return (
|
||||
<Card className="animate-in fade-in slide-in-from-bottom duration-500">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">Quick Stats</CardTitle>
|
||||
<Card className="animate-in fade-in slide-in-from-bottom duration-500 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-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/30">
|
||||
<Activity className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base font-bold">
|
||||
<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">
|
||||
Quick Stats
|
||||
</span>
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
Overview of {isPothole ? "pothole" : "signboard"} detection results
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-3">
|
||||
@@ -359,14 +393,14 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
|
||||
return (
|
||||
<div
|
||||
key={stat.label}
|
||||
className="flex flex-col items-center justify-center p-2 rounded-lg transition-all hover:scale-105 animate-in fade-in slide-in-from-bottom duration-500"
|
||||
className="flex flex-col items-center justify-center p-3 rounded-xl transition-all hover:scale-105 animate-in fade-in slide-in-from-bottom duration-500 border border-gray-100 dark:border-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 shadow-sm hover:shadow-md"
|
||||
style={{ animationDelay: `${index * 100}ms` }}
|
||||
>
|
||||
<div className={`${stat.bgColor} p-1.5 rounded-full mb-1.5 transition-all`}>
|
||||
<Icon className={`h-3 w-3 ${stat.color}`} />
|
||||
<div className={`${stat.bgColor} p-2 rounded-lg mb-2 transition-all shadow-inner`}>
|
||||
<Icon className={`h-4 w-4 ${stat.color}`} />
|
||||
</div>
|
||||
<div className={`text-lg font-bold ${stat.color} mb-0.5`}>{stat.value}</div>
|
||||
<div className="text-[10px] text-muted-foreground text-center leading-tight">{stat.label}</div>
|
||||
<div className={`text-xl font-bold ${stat.color} mb-1`}>{stat.value}</div>
|
||||
<div className="text-[10px] text-muted-foreground text-center leading-tight font-medium uppercase tracking-wide">{stat.label}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
@@ -792,12 +826,23 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Video Playback with Detection</CardTitle>
|
||||
<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="bg-gradient-to-r from-gray-50 to-slate-100 dark:from-gray-900/50 dark:to-slate-900/50 border-b border-gray-100 dark:border-gray-800">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-xl bg-gradient-to-br from-gray-900 to-slate-700 dark:from-white dark:to-gray-300 shadow-lg shadow-gray-500/20">
|
||||
<Film className="h-5 w-5 text-white dark:text-gray-900" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg font-bold">
|
||||
<span className="bg-gradient-to-r from-gray-900 via-slate-700 to-gray-900 dark:from-white dark:via-gray-300 dark:to-white bg-clip-text text-transparent">
|
||||
Video Playback with Detection
|
||||
</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Watch the video with real-time {isPothole ? "pothole" : "signboard"} detection overlays
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
105
lib/api.ts
105
lib/api.ts
@@ -81,6 +81,111 @@ export async function fetchLocationsByPackage(packageId: string): Promise<Locati
|
||||
return apiRequest<Location[]>(`/locations/?package_id=${packageId}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all packages (for dashboard)
|
||||
*/
|
||||
export async function fetchAllPackages(): Promise<Package[]> {
|
||||
return apiRequest<Package[]>("/packages/")
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all locations (for dashboard)
|
||||
*/
|
||||
export async function fetchAllLocations(): Promise<Location[]> {
|
||||
return apiRequest<Location[]>("/locations/")
|
||||
}
|
||||
|
||||
// Video type for dashboard
|
||||
export interface Video {
|
||||
id: string
|
||||
filename: string
|
||||
detection_type: "pothole-detection" | "sign-board-detection"
|
||||
status: "pending" | "processing" | "completed" | "failed"
|
||||
unique_potholes?: number
|
||||
unique_signboards?: number
|
||||
total_detections?: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all videos (for dashboard)
|
||||
*/
|
||||
export async function fetchVideos(): Promise<Video[]> {
|
||||
const response = await apiRequest<{ videos: Array<{ video_id: string; status: string; progress: number; summary?: { unique_potholes?: number; unique_signboards?: number; total_detections?: number } }> }>("/videos")
|
||||
|
||||
// Transform the response to match our Video interface
|
||||
return response.videos.map(v => ({
|
||||
id: v.video_id,
|
||||
filename: v.video_id, // Using video_id as filename since backend doesn't provide it
|
||||
detection_type: v.summary?.unique_potholes !== undefined ? "pothole-detection" : "sign-board-detection" as const,
|
||||
status: v.status as Video["status"],
|
||||
unique_potholes: v.summary?.unique_potholes,
|
||||
unique_signboards: v.summary?.unique_signboards,
|
||||
total_detections: v.summary?.total_detections,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString()
|
||||
}))
|
||||
}
|
||||
|
||||
// Detection type for map display
|
||||
export interface Detection {
|
||||
id: number
|
||||
video_id: string
|
||||
type: string
|
||||
class: string
|
||||
confidence: number
|
||||
latitude: number | null
|
||||
longitude: number | null
|
||||
frame_number: number
|
||||
timestamp_ms: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all detections from completed videos (for dashboard map)
|
||||
* Uses the summary endpoint to get detections for each project
|
||||
*/
|
||||
export async function fetchAllDetections(): Promise<Detection[]> {
|
||||
try {
|
||||
// First get all projects
|
||||
const projects = await fetchProjects()
|
||||
|
||||
// Then fetch detections for each project
|
||||
const allDetections: Detection[] = []
|
||||
|
||||
for (const project of projects) {
|
||||
try {
|
||||
const summary = await apiRequest<{
|
||||
packages: {
|
||||
[key: string]: {
|
||||
locations: {
|
||||
[key: string]: {
|
||||
detections: Detection[]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}>(`/summary/projects/${project.id}`)
|
||||
|
||||
// Extract detections from the nested structure
|
||||
for (const pkg of Object.values(summary.packages || {})) {
|
||||
for (const loc of Object.values(pkg.locations || {})) {
|
||||
allDetections.push(...(loc.detections || []))
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// Skip projects that fail to load
|
||||
console.warn(`Failed to load detections for project ${project.id}:`, e)
|
||||
}
|
||||
}
|
||||
|
||||
return allDetections
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch all detections:", e)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Session context type for storing user selections
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user