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

ui changes

Browse Source
This commit is contained in:
santasri.pachhal
2026-03-10 15:03:50 +05:30
parent 01c1117a0b
commit dd13fa139e
28 changed files with 1022 additions and 849 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
import { Loader2, CheckCircle2, MapPin, Navigation, Milestone } from "lucide-react"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import { DataTable } from "@/components/data-table"
import { PageHeader } from "@/components/page-header"
import {
fetchProjects,
fetchPackagesByProject,
@@ -261,7 +262,7 @@ export default function CreateLocationPage() {
render: (location: Location) => {
if (location.chainage_start_km !== null && location.chainage_end_km !== null) {
return (
<span className="px-2 py-0.5 rounded-full bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-[10px] font-semibold border border-amber-100 dark:border-amber-800 whitespace-nowrap">
<span className="px-2 py-0.5 rounded-full bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 font-semibold border border-amber-100 dark:border-amber-800 whitespace-nowrap">
{location.chainage_start_km} - {location.chainage_end_km}
</span>
)
@@ -273,7 +274,7 @@ export default function CreateLocationPage() {
key: "start_gps",
header: "Start GPS",
render: (location: Location) => (
<span className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[10px] font-mono border border-blue-100 dark:border-blue-800 whitespace-nowrap">
<span className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800 whitespace-nowrap">
{location.start_lat.toFixed(4)}, {location.start_lng.toFixed(4)}
</span>
)
@@ -282,7 +283,7 @@ export default function CreateLocationPage() {
key: "end_gps",
header: "End GPS",
render: (location: Location) => (
<span className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[10px] font-mono border border-blue-100 dark:border-blue-800 whitespace-nowrap">
<span className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800 whitespace-nowrap">
{location.end_lat.toFixed(4)}, {location.end_lng.toFixed(4)}
</span>
)
@@ -290,25 +291,17 @@ export default function CreateLocationPage() {
]
return (
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<div className="min-h-screen text-gray-900 dark:text-gray-100">
<SidebarNavigation />
<main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
<main className="ml-20 min-h-screen relative overflow-hidden">
<div className="mx-auto px-6 py-8 max-w-340 relative z-10">
{/* Refined Header */}
<div className="mb-8">
<div className="flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<MapPin className="h-8 w-8 text-white" />
</div>
<div className="flex flex-col">
<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">
Location Management
</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
Manage road segment locations
</p>
</div>
</div>
<PageHeader
title="Location Management"
description="Manage road segment locations"
icon={MapPin}
/>
</div>
{/* Error Message */}

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

@@ -10,6 +10,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
import { Loader2, CheckCircle2, Package, FolderKanban, Globe } from "lucide-react"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import { DataTable } from "@/components/data-table"
import { PageHeader } from "@/components/page-header"
import {
fetchProjects,
fetchAllPackages,
@@ -178,7 +179,7 @@ export default function CreatePackagePage() {
{project.state.split(',').map((item, idx) => (
<span
key={idx}
className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[10px] font-semibold border border-blue-100 dark:border-blue-800 shadow-sm"
className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-semibold border border-blue-100 dark:border-blue-800"
>
{item.trim()}
</span>
@@ -194,25 +195,17 @@ export default function CreatePackagePage() {
]
return (
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<div className="min-h-screen text-gray-900 dark:text-gray-100">
<SidebarNavigation />
<main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
<main className="ml-20 min-h-screen relative overflow-hidden">
<div className="mx-auto px-6 py-8 max-w-340 relative z-10">
{/* Refined Header */}
<div className="mb-8">
<div className="flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<Package className="h-8 w-8 text-white" />
</div>
<div className="flex flex-col">
<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">
Package Management
</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
Manage project packages
</p>
</div>
</div>
<PageHeader
title="Package Management"
description="Manage project packages"
icon={Package}
/>
</div>
{/* Error Message */}

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

@@ -9,6 +9,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
import { Loader2, CheckCircle2, FolderPlus, MapPin, Building2, Route, X } from "lucide-react"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import { DataTable } from "@/components/data-table"
import { PageHeader } from "@/components/page-header"
import { createProject, fetchProjects, updateProject, deleteProject, type ProjectCreate, type Project, type ProjectUpdate } from "@/lib/api"
import { toast } from "sonner"
@@ -159,7 +160,7 @@ export default function CreateProjectPage() {
{project.state.split(',').map((item, idx) => (
<span
key={idx}
className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[11px] font-semibold border border-blue-100 dark:border-blue-800 shadow-sm"
className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-semibold border border-blue-100 dark:border-blue-800"
>
{item.trim()}
</span>
@@ -175,25 +176,17 @@ export default function CreateProjectPage() {
]
return (
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<div className="min-h-screen text-gray-900 dark:text-gray-100">
<SidebarNavigation />
<main className="ml-16 min-h-screen relative overflow-hidden">
<div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
<main className="ml-20 min-h-screen relative overflow-hidden">
<div className="mx-auto px-6 py-8 max-w-340 relative z-10">
{/* Refined Header */}
<div className="mb-8">
<div className="flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<FolderPlus className="h-8 w-8 text-white" />
</div>
<div className="flex flex-col">
<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">
Project Management
</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
Manage road infrastructure projects
</p>
</div>
</div>
<PageHeader
title="Project Management"
description="Manage road infrastructure projects"
icon={FolderPlus}
/>
</div>
{/* Error Message */}

1083
app/dashboard/page.tsx
View File

File diff suppressed because it is too large Load Diff

87
app/globals.css
View File

@@ -1,5 +1,5 @@
@import 'tailwindcss';
@import 'tw-animate-css';
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@@ -9,11 +9,12 @@
--primary-foreground: oklch(0.98 0.01 264);
/* Background & Surfaces */
--background: #f8fafc;
--background: hsla(210, 40%, 98%, 0.2);
--foreground: oklch(0.15 0.02 280);
--card: oklch(1 0 0);
--dialog: white;
--card: white;
--card-foreground: oklch(0.15 0.02 280);
--popover: oklch(1 0 0);
--popover: white;
--popover-foreground: oklch(0.15 0.02 280);
/* Secondary */
@@ -43,10 +44,10 @@
/* 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);
--chart-2: oklch(0.65 0.2 200);
--chart-3: oklch(0.6 0.18 160);
--chart-4: oklch(0.7 0.2 85);
--chart-5: oklch(0.6 0.22 320);
--radius: 0.75rem;
@@ -63,23 +64,23 @@
.dark {
/* Primary - Light Indigo */
--primary: oklch(0.70 0.20 264);
--primary: oklch(0.7 0.2 264);
--primary-foreground: oklch(0.15 0.02 264);
--dialog: white;
/* Background & Surfaces */
--background: oklch(0.12 0.02 280);
--background: hsla(280, 20%, 12%, 0.3);
--foreground: oklch(0.95 0.01 280);
--card: oklch(0.16 0.02 280);
--card: hsla(280, 20%, 16%, 0.4);
--card-foreground: oklch(0.95 0.01 280);
--popover: oklch(0.16 0.02 280);
--popover: hsla(280, 20%, 16%, 0.7);
--popover-foreground: oklch(0.95 0.01 280);
/* Secondary */
--secondary: oklch(0.22 0.03 264);
--secondary-foreground: oklch(0.90 0.02 264);
--secondary-foreground: oklch(0.9 0.02 264);
/* Muted */
--muted: oklch(0.20 0.02 280);
--muted: oklch(0.2 0.02 280);
--muted-foreground: oklch(0.65 0.02 280);
/* Accent */
@@ -88,19 +89,19 @@
/* Destructive */
--destructive: oklch(0.45 0.18 25);
--destructive-foreground: oklch(0.90 0.08 25);
--destructive-foreground: oklch(0.9 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);
--ring: oklch(0.7 0.2 264);
/* Chart Colors */
--chart-1: oklch(0.65 0.22 264);
--chart-2: oklch(0.70 0.18 200);
--chart-2: oklch(0.7 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);
--chart-5: oklch(0.65 0.2 320);
/* Sidebar */
--sidebar: oklch(0.14 0.02 280);
@@ -108,17 +109,18 @@
--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-accent-foreground: oklch(0.9 0.02 264);
--sidebar-border: oklch(0.25 0.02 280);
--sidebar-ring: oklch(0.70 0.20 264);
--sidebar-ring: oklch(0.7 0.2 264);
}
@theme inline {
--font-sans: 'Geist', 'Geist Fallback', system-ui, sans-serif;
--font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
--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);
--color-dialog: var(--dialog);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
@@ -161,7 +163,23 @@
}
body {
@apply bg-background text-foreground;
@apply text-foreground;
background-image: url("/background.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100vh;
background-color: transparent !important;
}
.bg-mesh-gradient {
background: transparent !important;
}
[data-slot="card"] {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
}
@@ -174,7 +192,7 @@
}
html {
scrollbar-gutter: stable;
/* scrollbar-gutter: stable; */
scroll-behavior: smooth;
}
@@ -190,7 +208,18 @@ body[data-scroll-locked] {
-ms-overflow-style: none;
}
.static-immediate {
transition: none !important;
animation: none !important;
.heading-blue-gradient {
@apply bg-linear-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent;
}
.btn-blue-gradient {
@apply text-white bg-linear-to-r from-blue-400 to-blue-600 hover:bg-linear-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium transition-all duration-200;
}
.bg-blue-gradient {
background: linear-gradient(271.19deg, #86B8F1 1.02%, #3895FF 191.34%);
}
.badge-blue {
@apply flex items-center justify-center bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400 text-sm font-bold rounded-full border border-blue-200/50;
}

6
app/map/page.tsx
View File

@@ -5,16 +5,16 @@ import { DashboardMap } from "@/components/dashboard/dashboard-map"
export default function MapPage() {
return (
<div className="min-h-screen bg-mesh-gradient relative overflow-hidden">
<div className="min-h-screen relative overflow-hidden ml-20">
{/* Navigation Menu */}
<NavigationMenu />
<div className="container mx-auto px-4 py-8 max-w-7xl relative z-10">
<div className="container mx-auto px-4 py-8 max-w-340 relative z-10">
{/* Header */}
<div className="mb-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl md:text-4xl font-bold text-gradient leading-tight">
<h1 className="text-3xl md:text-4xl font-bold heading-blue-gradient leading-tight">
Detection Map
</h1>
<p className="text-muted-foreground mt-1">

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

@@ -5,6 +5,7 @@ import { ProjectSelectionSection } from "@/components/project-selection-section"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import { type SessionContext, saveSession } from "@/lib/api"
import { TrendingUp } from "lucide-react"
import { PageHeader } from "@/components/page-header"
export default function NewAnalysisPage() {
const router = useRouter()
@@ -16,24 +17,21 @@ export default function NewAnalysisPage() {
}
return (
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<div className="min-h-screen text-gray-900 dark:text-gray-100">
{/* Sidebar Navigation */}
<SidebarNavigation />
{/* Main Content */}
<main className="ml-16 min-h-screen relative overflow-hidden">
<main className="ml-20 min-h-screen relative overflow-hidden">
<div className="container mx-auto px-6 py-10 max-w-7xl relative z-10">
<div className="container mx-auto px-6 py-10 max-w-340 relative z-10">
{/* Refined Left-Aligned Header */}
<div className="mb-8 flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
<div>
<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">
VisionRoad Detection System
</h1>
</div>
<div className="mb-8">
<PageHeader
title="VisionRoad Detection System"
description="Select project details to begin your AI-powered road infrastructure analysis"
icon={TrendingUp}
/>
</div>
{/* Project Selection Section */}

27
app/results/[videoId]/page.tsx
View File

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button"
import { Loader2, TrendingUp } from "lucide-react"
import VideoPlayerSection from "@/components/video-player-section"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import { PageHeader } from "@/components/page-header"
import {
type SessionContext,
loadSession,
@@ -91,7 +92,7 @@ export default function VideoResultsPage() {
if (isLoading) {
return (
<div className="min-h-screen bg-mesh-gradient flex items-center justify-center">
<div className="min-h-screen 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>
@@ -102,7 +103,7 @@ export default function VideoResultsPage() {
if (error) {
return (
<div className="min-h-screen bg-mesh-gradient flex items-center justify-center">
<div className="min-h-screen 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 text-center">
<p className="text-red-500 font-medium">{error}</p>
<div className="flex gap-4 mt-4">
@@ -115,22 +116,16 @@ export default function VideoResultsPage() {
}
return (
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<div className="min-h-screen text-gray-900 dark:text-gray-100">
<SidebarNavigation />
<main className="ml-16 min-h-screen">
<main className="ml-20 min-h-screen">
<div className="container mx-auto px-6 py-8 max-w-full">
<div className="mb-8 flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
<div>
<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>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium">
Video ID: {videoId}
</p>
</div>
<div className="mb-8">
<PageHeader
title={getTitle()}
description={`Video ID: ${videoId}`}
icon={TrendingUp}
/>
</div>
{session && (

27
app/results/page.tsx
View File

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button"
import { Loader2, ArrowLeft, MapPin, Package, FolderKanban, RotateCcw, TrendingUp } from "lucide-react"
import VideoPlayerSection from "@/components/video-player-section"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import { PageHeader } from "@/components/page-header"
import {
type SessionContext,
loadSession,
@@ -73,7 +74,7 @@ export default function ResultsPage() {
if (isLoading) {
return (
<div className="min-h-screen bg-mesh-gradient flex items-center justify-center">
<div className="min-h-screen 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>
@@ -84,7 +85,7 @@ export default function ResultsPage() {
if (error) {
return (
<div className="min-h-screen bg-mesh-gradient flex items-center justify-center">
<div className="min-h-screen 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>
@@ -94,26 +95,20 @@ export default function ResultsPage() {
}
return (
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<div className="min-h-screen text-gray-900 dark:text-gray-100">
{/* Sidebar Navigation */}
<SidebarNavigation />
{/* Main Content */}
<main className="ml-16 min-h-screen">
<main className="ml-20 min-h-screen">
<div className="container mx-auto px-6 py-8 max-w-full">
{/* Refined Header */}
<div className="mb-8 flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
<div>
<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>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium">
View your AI-powered road analysis results
</p>
</div>
<div className="mb-8">
<PageHeader
title={getTitle()}
description="View your AI-powered road analysis results"
icon={TrendingUp}
/>
</div>
{/* Session Info Bar */}

24
app/upload/[videoId]/page.tsx
View File

@@ -5,6 +5,7 @@ import { useRouter, useParams } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Loader2, TrendingUp } from "lucide-react"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import { PageHeader } from "@/components/page-header"
import {
type SessionContext,
loadSession,
@@ -119,7 +120,7 @@ export default function VideoProcessingPage() {
if (isLoading) {
return (
<div className="min-h-screen bg-mesh-gradient flex items-center justify-center">
<div className="min-h-screen 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>
@@ -128,19 +129,16 @@ export default function VideoProcessingPage() {
}
return (
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<div className="min-h-screen text-gray-900 dark:text-gray-100">
<SidebarNavigation />
<main className="ml-16 min-h-screen relative overflow-hidden flex flex-col">
<div className="flex-1 container mx-auto px-6 py-6 max-w-7xl relative z-10 flex flex-col">
<div className="mb-6 flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
<div>
<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">
Processing Analysis
</h1>
</div>
<main className="ml-20 min-h-screen relative overflow-hidden flex flex-col">
<div className="flex-1 container mx-auto px-6 py-6 max-w-340 relative z-10 flex flex-col">
<div className="mb-6">
<PageHeader
title="Processing Analysis"
description={`Real-time analysis progress for video ID: ${videoId}`}
icon={TrendingUp}
/>
</div>
{session && (

24
app/upload/page.tsx
View File

@@ -9,6 +9,7 @@ import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Loader2, TrendingUp } from "lucide-react"
import { SidebarNavigation } from "@/components/sidebar-navigation"
import { PageHeader } from "@/components/page-header"
import {
type SessionContext,
loadSession,
@@ -131,7 +132,7 @@ export default function UploadPage() {
if (isLoading) {
return (
<div className="min-h-screen bg-mesh-gradient flex items-center justify-center">
<div className="min-h-screen 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>
@@ -140,24 +141,21 @@ export default function UploadPage() {
}
return (
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
<div className="min-h-screen text-gray-900 dark:text-gray-100">
{/* Sidebar Navigation */}
<SidebarNavigation />
{/* Main Content */}
<main className="ml-16 min-h-screen relative overflow-hidden flex flex-col">
<main className="ml-20 min-h-screen relative overflow-hidden flex flex-col">
<div className="flex-1 container mx-auto px-6 py-6 max-w-7xl relative z-10 flex flex-col">
<div className="flex-1 container mx-auto px-6 py-6 max-w-340 relative z-10 flex flex-col">
{/* Refined Header */}
<div className="mb-6 flex items-center gap-5">
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
<TrendingUp className="h-8 w-8 text-white" />
</div>
<div>
<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 className="mb-6">
<PageHeader
title={getTitle()}
description="Upload video file and fill in required details to start the road analysis"
icon={TrendingUp}
/>
</div>
{/* Compact Session Info Bar */}

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

@@ -89,12 +89,12 @@ export function DashboardMap({
}
return (
<Card className={`overflow-hidden ${className}`}>
<Card className={`overflow-hidden pb-0 bg-white/60 rounded-b-none shadow-none border-none ${className}`}>
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-white flex items-center justify-center shadow-lg border-2 border-[#1e40af]">
<MapPin className="h-5 w-5 text-[#2563eb]" />
<div className="w-10 h-10 rounded-md bg-linear-to-b from-[#225999] to-[#56A5FF] flex items-center justify-center ">
<MapPin className="h-5 w-5 text-white" />
</div>
<div>
<CardTitle className="text-base font-bold text-[#2563eb]">
@@ -132,7 +132,7 @@ export function DashboardMap({
</div>
</CardHeader>
<CardContent className="p-0">
<div className="h-[400px] w-full relative">
<div className="h-[500px] p-2 w-full relative">
{isLoading ? (
<div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
<Loader2 className="h-8 w-8 text-indigo-500" />

59
components/dashboard/dashboard-skeleton.tsx Normal file
View File

@@ -0,0 +1,59 @@
"use client"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
export function DashboardSkeleton() {
return (
<div className="space-y-6">
{/* Stats Cards Skeleton */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
{[...Array(6)].map((_, i) => (
<Card key={i} className="bg-white/60 backdrop-blur-lg border-none shadow-none overflow-hidden py-8 px-6">
<CardContent className="p-0 flex items-center justify-between gap-6">
<div className="flex flex-col gap-2 flex-1">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-10 w-20" />
<Skeleton className="h-3 w-40" />
</div>
<Skeleton className="w-16 h-16 rounded-lg shrink-0" />
</CardContent>
</Card>
))}
</div>
{/* Charts Row Skeleton */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
{[...Array(2)].map((_, i) => (
<Card key={i} className="rounded-md bg-white/60 backdrop-blur-lg overflow-hidden border-none shadow-none">
<CardHeader className="pb-2 border-none">
<div className="flex items-center gap-2">
<Skeleton className="w-10 h-10 rounded-md" />
<Skeleton className="h-6 w-48" />
</div>
</CardHeader>
<CardContent className="pt-4 h-[350px] flex items-center justify-center">
<Skeleton className="h-[300px] w-full max-w-[300px] rounded-full" />
</CardContent>
</Card>
))}
</div>
{/* Map Skeleton */}
<Card className="rounded-md bg-white/60 backdrop-blur-lg overflow-hidden border-none shadow-none">
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Skeleton className="w-10 h-10 rounded-md" />
<Skeleton className="h-6 w-48" />
</div>
<Skeleton className="h-8 w-32 rounded-full" />
</div>
</CardHeader>
<CardContent className="p-2">
<Skeleton className="h-[500px] w-full rounded-md" />
</CardContent>
</Card>
</div>
)
}

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

@@ -9,7 +9,7 @@ interface DetectionDonutChartProps {
roadCrack: number
damagedRoadMarking: number
goodSignboard: number
isLoading: boolean
isLoading?: boolean
}
const COLORS = {
@@ -26,7 +26,7 @@ export function DetectionDonutChart({
roadCrack,
damagedRoadMarking,
goodSignboard,
isLoading
isLoading = false
}: DetectionDonutChartProps) {
if (isLoading) {
return (

67
components/dashboard/filter-selector.tsx
View File

@@ -36,23 +36,26 @@ export function FilterSelector({
isLoading = false
}: FilterSelectorProps) {
return (
<div className="flex flex-wrap items-center gap-3 p-3 rounded-xl bg-card border border-[var(--border)] shadow-sm">
<div className="flex flex-col gap-4 p-4">
{/* Project Dropdown */}
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-blue-100 dark:bg-blue-900/50">
<FolderOpen className="h-4 w-4 text-indigo-500" />
<div className="space-y-2">
<div className="flex items-center gap-2 mb-1">
<div className="p-1 rounded-md bg-blue-100 dark:bg-blue-900/50">
<FolderOpen className="h-3.5 w-3.5 text-blue-600" />
</div>
<span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Project</span>
</div>
<Select
value={selectedProjectId || ""}
onValueChange={onProjectChange}
disabled={isLoading || projects.length === 0}
>
<SelectTrigger className="w-[200px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
<SelectTrigger className="h-9 text-sm bg-slate-50 border border-slate-200 shadow-none ring-0! focus:ring-0 px-3 w-full rounded-lg">
<SelectValue placeholder="Select project" />
</SelectTrigger>
<SelectContent>
<SelectContent className="rounded-xl border-slate-200">
{projects.map((project) => (
<SelectItem key={project.id} value={project.id}>
<SelectItem key={project.id} value={project.id} className="rounded-lg">
{project.name}
</SelectItem>
))}
@@ -60,29 +63,27 @@ export function FilterSelector({
</Select>
</div>
{/* Divider */}
{selectedProjectId && packages.length > 0 && (
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
)}
{/* Package Dropdown */}
{selectedProjectId && packages.length > 0 && (
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-emerald-100 dark:bg-emerald-900/50">
<Package className="h-4 w-4 text-emerald-500" />
{selectedProjectId && (
<div className="space-y-2">
<div className="flex items-center gap-2 mb-1">
<div className="p-1 rounded-md bg-emerald-100 dark:bg-emerald-900/50">
<Package className="h-3.5 w-3.5 text-emerald-600" />
</div>
<span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Package</span>
</div>
<Select
value={selectedPackageId || "all"}
onValueChange={onPackageChange}
disabled={isLoading}
>
<SelectTrigger className="w-[200px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
<SelectTrigger className="h-9 text-sm bg-slate-50 border border-slate-200 shadow-none ring-0! focus:ring-0 px-3 w-full rounded-lg">
<SelectValue placeholder="All packages" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Packages</SelectItem>
<SelectContent className="rounded-xl border-slate-200">
<SelectItem value="all" className="rounded-lg">All Packages</SelectItem>
{packages.map((pkg) => (
<SelectItem key={pkg.id} value={pkg.id}>
<SelectItem key={pkg.id} value={pkg.id} className="rounded-lg">
{pkg.name}
</SelectItem>
))}
@@ -91,29 +92,27 @@ export function FilterSelector({
</div>
)}
{/* Divider */}
{selectedPackageId && selectedPackageId !== "all" && locations.length > 0 && (
<div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
)}
{/* Location Dropdown */}
{selectedPackageId && selectedPackageId !== "all" && locations.length > 0 && (
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-lg bg-purple-100 dark:bg-purple-900/50">
<MapPin className="h-4 w-4 text-purple-500" />
{selectedPackageId && selectedPackageId !== "all" && (
<div className="space-y-2">
<div className="flex items-center gap-2 mb-1">
<div className="p-1 rounded-md bg-purple-100 dark:bg-purple-900/50">
<MapPin className="h-3.5 w-3.5 text-purple-600" />
</div>
<span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Location</span>
</div>
<Select
value={selectedLocationId || "all"}
onValueChange={onLocationChange}
disabled={isLoading}
>
<SelectTrigger className="w-[200px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
<SelectTrigger className="h-9 text-sm bg-slate-50 border border-slate-200 shadow-none ring-0! focus:ring-0 px-3 w-full rounded-lg">
<SelectValue placeholder="All locations" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Locations</SelectItem>
<SelectContent className="rounded-xl border-slate-200">
<SelectItem value="all" className="rounded-lg">All Locations</SelectItem>
{locations.map((loc) => (
<SelectItem key={loc.id} value={loc.id}>
<SelectItem key={loc.id} value={loc.id} className="rounded-lg">
{loc.name}
</SelectItem>
))}
@@ -122,5 +121,5 @@ export function FilterSelector({
</div>
)}
</div>
)
);
}

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

@@ -17,43 +17,43 @@ const gradientStyles = {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
coral: {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
blue: {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
purple: {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
orange: {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
indigo: {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
},
emerald: {
background: "bg-card",
border: "border-l-4 border-l-[var(--border)]",
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
iconShadow: "shadow-lg shadow-blue-500/20"
}
}
@@ -68,7 +68,7 @@ export function GradientStatsCard({
const styles = gradientStyles[gradient]
return (
<Card className="bg-white dark:bg-gray-900 border-none shadow-xl shadow-blue-500/5 overflow-hidden py-8 px-6">
<Card className="bg-white/60 backdrop-blur-lg border-none shadow-none hover:shadow-none overflow-hidden py-8 px-6">
<CardContent className="p-0 flex items-center justify-between gap-6">
<div className="flex flex-col gap-1 min-w-0">
<h3 className="text-sm font-bold text-blue-600/70 dark:text-blue-400/70 uppercase tracking-widest">
@@ -79,11 +79,11 @@ export function GradientStatsCard({
<div className="h-14 w-24 bg-gray-100 dark:bg-gray-800 rounded-xl mt-2" />
) : (
<>
<p className="text-3xl md:text-4xl font-black tracking-tighter leading-tight text-[#1e3a8a]">
<p className="text-4xl font-bold heading-blue-gradient">
{value}
</p>
{subtitle && (
<p className="text-xs font-medium text-gray-500 dark:text-gray-400 mt-1 opacity-80 italic">
<p className="text-xs font-medium text-gray-500 mt-1">
{subtitle}
</p>
)}
@@ -92,9 +92,12 @@ export function GradientStatsCard({
</div>
</div>
<div className={`
w-20 h-20 rounded-3xl flex items-center justify-center flex-shrink-0
${styles.iconBg} shadow-[0_10px_30px_rgba(37,99,235,0.2)]
<div
style={{
background: "linear-gradient(180deg, #225999 0%, #56A5FF 100%)",
}}
className={`
w-16 h-16 self-start rounded-lg flex items-center justify-center
`}>
<Icon className="h-10 w-10 text-white" />
</div>

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

@@ -15,7 +15,7 @@ interface LocationData {
interface LocationBarChartProps {
data: LocationData[]
isLoading: boolean
isLoading?: boolean
}
const COLORS = {
@@ -26,7 +26,7 @@ const COLORS = {
good_sign_board: "#34d399" // Lighter Emerald
}
export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
export function LocationBarChart({ data, isLoading = false }: LocationBarChartProps) {
if (isLoading) {
return (
<div className="h-[300px] flex items-center justify-center">

23
components/dashboard/recent-analyses-table.tsx
View File

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Eye, AlertCircle } from "lucide-react"
import { type Video } from "@/lib/api"
import { Skeleton } from "@/components/ui/skeleton"
interface RecentAnalysesTableProps {
videos: Video[]
@@ -56,9 +57,19 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
</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" />
<div className="p-6 space-y-4">
{[1, 2, 3, 4, 5].map((i) => (
<div key={i} className="flex items-center justify-between gap-4">
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-[60%]" />
<Skeleton className="h-3 w-[40%]" />
</div>
<div className="flex gap-2">
<Skeleton className="h-6 w-16 rounded-full" />
<Skeleton className="h-6 w-16 rounded-full" />
</div>
<Skeleton className="h-8 w-16" />
</div>
))}
</div>
) : videos.length === 0 ? (
@@ -83,11 +94,11 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
{formatDate(video.created_at)}
</p>
</div>
<div className="flex items-center gap-2 flex-shrink-0">
<div className="flex items-center gap-2 shrink-0">
{getDetectionTypeBadge(video.detection_type)}
{getStatusBadge(video.status)}
</div>
<div className="text-right flex-shrink-0 w-20">
<div className="text-right shrink-0 w-20">
<p className="text-sm font-bold text-foreground">
{video.detection_type === "pothole-detection"
? video.unique_pothole ?? 0
@@ -103,7 +114,7 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
variant="ghost"
size="sm"
onClick={() => onViewResults(video.id, video.detection_type)}
className="ml-4 flex-shrink-0"
className="ml-4 shrink-0"
>
<Eye className="h-4 w-4 mr-1" />
View

58
components/data-table.tsx
View File

@@ -8,6 +8,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
import { Skeleton } from "@/components/ui/skeleton"
interface Column<T> {
key: string
@@ -42,51 +43,62 @@ export function DataTable<T extends Record<string, any>>({
return (
<div>
{/* Header with Title and Add Button */}
<div className="mb-4 flex justify-between items-center bg-card p-3 rounded-xl border border-[var(--border)] shadow-sm">
<div>
<h2 className="text-lg font-bold tracking-tight text-blue-600">{title}</h2>
<p className="text-[10px] text-gray-500 dark:text-gray-400 uppercase font-medium">Total items: {data.length}</p>
<div className="flex justify-between items-center p-3 ">
<div className="flex items-center gap-3">
<h2 className="text-2xl font-bold tracking-tight heading-blue-gradient">{title}</h2>
<span className="badge-blue min-w-[28px] h-[28px] px-2">
{data.length}
</span>
</div>
<Button
onClick={onAddNew}
className="bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-500/25 transition-all duration-300 hover:scale-105 active:scale-95 border-none h-8 px-4 text-xs font-semibold"
className="btn-blue-gradient rounded-full text-sm px-4 py-2.5 h-auto flex items-center gap-2"
>
<Plus className="h-3.5 w-3.5 mr-1.5 stroke-[3px]" />
<Plus className="h-4 w-4" />
{addButtonText}
</Button>
</div>
{/* Table */}
<div className="rounded-2xl border border-[var(--border)] bg-card shadow-2xl shadow-black/5 overflow-hidden">
<div className="overflow-auto max-h-[400px]">
<table className="min-w-full divide-y divide-gray-200/50 dark:divide-gray-700/50 border-collapse">
<thead className="bg-[#f8fafc] dark:bg-gray-900/50 sticky top-0 z-10">
<div className="rounded-lg overflow-hidden">
<div className="overflow-auto max-h-[450px]">
<table className="min-w-full rounded-lg!">
<thead className="bg-white/40 backdrop-blur-md rounded-lg! sticky top-0 z-10">
<tr>
{columns.map((col) => (
<th
key={col.key}
className="px-4 py-3 text-left text-[10px] font-black text-gray-500 dark:text-gray-400 uppercase tracking-[0.1em] border-b border-[var(--border)] bg-[#f8fafc] dark:bg-gray-900 shadow-[0_1px_0_0_rgba(0,0,0,0.05)]"
className="px-4 py-3 text-slate-500 text-left font-bold"
>
{col.header}
</th>
))}
{showActions && (
<th className="px-4 py-3 text-right text-[10px] font-black text-gray-500 dark:text-gray-400 uppercase tracking-[0.1em] border-b border-[var(--border)] bg-[#f8fafc] dark:bg-gray-900 shadow-[0_1px_0_0_rgba(0,0,0,0.05)]">
<th className="px-4 py-3 text-slate-500 text-left font-bold">
Actions
</th>
)}
</tr>
</thead>
<tbody className="divide-y divide-gray-100/30 dark:divide-gray-800/30">
<tbody className="divide-y divide-gray-300 backdrop-blur-lg bg-white/70">
{isLoading ? (
<tr>
<td colSpan={totalCols} className="px-4 py-12 text-center">
<div className="flex flex-col items-center justify-center gap-3">
<div className="h-8 w-8 border-3 border-gray-200 border-t-blue-500 rounded-full animate-spin" />
<span className="text-sm font-medium text-gray-500 dark:text-gray-400">Loading records...</span>
</div>
</td>
</tr>
Array.from({ length: 5 }).map((_, idx) => (
<tr key={idx} className="border-b border-gray-100 dark:border-gray-800">
{columns.map((col) => (
<td key={col.key} className="px-4 py-4">
<Skeleton className="h-4 w-full max-w-[120px]" />
</td>
))}
{showActions && (
<td className="px-4 py-4 text-right">
<div className="flex justify-end gap-2">
<Skeleton className="h-8 w-8 rounded-sm" />
<Skeleton className="h-8 w-8 rounded-sm" />
</div>
</td>
)}
</tr>
))
) : data.length === 0 ? (
<tr>
<td colSpan={totalCols} className="px-4 py-12 text-center">
@@ -121,7 +133,7 @@ export function DataTable<T extends Record<string, any>>({
variant="ghost"
size="icon"
onClick={() => onEdit(item)}
className="h-8 w-8 rounded-full bg-amber-100 text-amber-600 hover:bg-amber-600 hover:text-white dark:bg-amber-900/40 dark:text-amber-400 dark:hover:bg-amber-700"
className="h-8 w-8 rounded-sm bg-white text-blue-500 border-slate-200! border hover:bg-blue-500 hover:text-white"
>
<Edit2 className="h-4 w-4" />
</Button>
@@ -138,7 +150,7 @@ export function DataTable<T extends Record<string, any>>({
variant="ghost"
size="icon"
onClick={() => onDelete(item)}
className="h-8 w-8 rounded-full bg-rose-100 text-rose-600 hover:bg-rose-600 hover:text-white dark:bg-rose-900/40 dark:text-rose-400 dark:hover:bg-rose-700"
className="h-8 w-8 rounded-sm border border-slate-200! bg-white text-red-400 hover:bg-red-400 hover:text-white"
>
<Trash2 className="h-4 w-4" />
</Button>

8
components/navigation-menu.tsx
View File

@@ -114,12 +114,12 @@ export function NavigationMenu() {
: "hover:bg-slate-50 border border-transparent hover:border-slate-100"
}`}
>
<div className={`p-2.5 rounded-lg transition-all duration-300 border shadow-sm ${isActive
? "bg-[#2563eb] text-white border-[#2563eb]"
: "bg-[#f0fafd] text-slate-900 group-hover:bg-[#2563eb] group-hover:text-white group-hover:border-[#2563eb] border-slate-100"
<div className={`p-2.5 rounded-lg transition-all duration-300 ${isActive
? "bg-linear-to-b from-[#3895FF] to-[#86B8F1] text-white"
: "bg-[#f0fafd] text-slate-900 group-hover:bg-linear-to-b group-hover:from-[#3895FF] group-hover:to-[#86B8F1] group-hover:text-white border border-slate-100 shadow-sm"
}`}>
<Icon
className={`h-5 w-5 ${isActive ? 'stroke-[2.5]' : 'stroke-[2]'}`}
className={`h-5 w-5 ${isActive ? 'stroke-[2.5]' : 'stroke-2'}`}
/>
</div>
<div className="flex-1 min-w-0">

30
components/page-header.tsx Normal file
View File

@@ -0,0 +1,30 @@
"use client"
import { LucideIcon } from "lucide-react"
interface PageHeaderProps {
title: string
description: string
icon?: LucideIcon
children?: React.ReactNode
}
export function PageHeader({ title, description, icon: Icon, children }: PageHeaderProps) {
return (
<div className="flex items-center gap-5">
<div className="p-3 rounded-lg bg-blue-gradient flex items-center justify-center relative overflow-hidden">
{Icon && <Icon className="h-8 w-8 text-white relative z-10" />}
{children}
</div>
<div className="flex flex-col">
<h1 className="text-3xl font-bold heading-blue-gradient">
{title}
</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium">
{description}
</p>
</div>
</div>
)
}

169
components/sidebar-navigation.tsx
View File

@@ -2,6 +2,7 @@
import { useRouter, usePathname } from "next/navigation"
import { LayoutDashboard, Plus, User, FolderPlus, Package, MapPin } from "lucide-react"
import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip"
interface NavItem {
title: string
@@ -19,19 +20,19 @@ const navItems: NavItem[] = [
gradient: "from-blue-400 to-indigo-500"
},
{
title: "Create Project",
title: "Project",
href: "/create-project",
icon: FolderPlus,
gradient: "from-blue-400 to-blue-600"
},
{
title: "Create Package",
title: "Package",
href: "/create-package",
icon: Package,
gradient: "from-violet-400 to-purple-500"
},
{
title: "Create Location",
title: "Location",
href: "/create-location",
icon: MapPin,
gradient: "from-amber-400 to-orange-500"
@@ -57,7 +58,7 @@ export function SidebarNavigation() {
const isNewAnalysisActive = pathname === "/new-analysis"
return (
<aside className="fixed left-0 top-0 h-screen w-20 bg-white border-r border-slate-200 z-50 flex flex-col items-center py-8 shadow-sm">
<aside className="fixed left-0 top-0 h-screen w-20 bg-white/40 backdrop-blur-xl border-r border-slate-200/50 z-50 flex flex-col items-center py-8">
{/* Navigation Items */}
<nav className="flex-1 flex flex-col items-center gap-4">
{/* Dashboard - first item */}
@@ -66,58 +67,52 @@ export function SidebarNavigation() {
const Icon = item.icon
return (
<div key={item.href} className="relative group">
<button
onClick={() => handleNavigation(item)}
className={`
relative w-12 h-12 rounded-xl flex items-center justify-center
${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
hover:bg-[#2563eb] hover:border-[#2563eb]
border
`}
>
<Icon
className={`h-6 w-6 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
/>
</button>
<div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2
px-3 py-1.5 rounded-lg
bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
opacity-0 invisible group-hover:opacity-100 group-hover:visible
whitespace-nowrap shadow-lg pointer-events-none
">
{item.title}
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700" />
</div>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => handleNavigation(item)}
className={`
relative w-12 h-12 rounded-md flex items-center justify-center
${isActive ? 'bg-linear-to-b from-[#3895FF] to-[#86B8F1]' : 'bg-[#f0fafd]/60 border border-slate-100/50'}
hover:bg-linear-to-b hover:from-[#3895FF] hover:to-[#86B8F1] hover:border-none
transition-all ease-in-out duration-200
`}
>
<Icon
className={`h-6 w-6 ${isActive ? 'text-white' : 'text-slate-500 group-hover:text-white'} stroke-[2.5]`}
/>
</button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={12}>
<p>{item.title}</p>
</TooltipContent>
</Tooltip>
</div>
)
})}
{/* New Analysis - Special eye-catchy button */}
<div className="relative group">
<button
onClick={() => router.push("/new-analysis")}
className={`
relative w-12 h-12 rounded-xl flex items-center justify-center
${isNewAnalysisActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
hover:bg-[#2563eb] hover:border-[#2563eb]
border
`}
>
<Plus
className={`h-6 w-6 ${isNewAnalysisActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
/>
</button>
<div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2
px-3 py-1.5 rounded-lg
bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
opacity-0 invisible group-hover:opacity-100 group-hover:visible
whitespace-nowrap shadow-lg pointer-events-none
">
Start New Analysis
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700" />
</div>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => router.push("/new-analysis")}
className={`
relative w-12 h-12 rounded-md flex items-center justify-center
${isNewAnalysisActive ? 'bg-linear-to-b from-[#3895FF] to-[#86B8F1]' : 'bg-[#f0fafd]/60 border border-slate-100/50'}
hover:bg-linear-to-b hover:from-[#3895FF] hover:to-[#86B8F1] hover:border-none
transition-all ease-in-out duration-200
`}
>
<Plus
className={`h-6 w-6 ${isNewAnalysisActive ? 'text-white' : 'text-slate-500 group-hover:text-white'} stroke-[2.5]`}
/>
</button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={12}>
<p>New Analysis</p>
</TooltipContent>
</Tooltip>
</div>
{/* Divider */}
@@ -129,29 +124,26 @@ export function SidebarNavigation() {
const Icon = item.icon
return (
<div key={item.href} className="relative group">
<button
onClick={() => handleNavigation(item)}
className={`
relative w-12 h-12 rounded-xl flex items-center justify-center
${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
hover:bg-[#2563eb] hover:border-[#2563eb]
border
`}
>
<Icon
className={`h-6 w-6 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
/>
</button>
<div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2
px-3 py-1.5 rounded-lg
bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
opacity-0 invisible group-hover:opacity-100 group-hover:visible
whitespace-nowrap shadow-lg pointer-events-none
">
{item.title}
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700" />
</div>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => handleNavigation(item)}
className={`
relative w-12 h-12 rounded-md flex items-center justify-center
${isActive ? 'bg-linear-to-b from-[#3895FF] to-[#86B8F1]' : 'bg-[#f0fafd]/60 border border-slate-100/50'}
hover:bg-linear-to-b hover:from-[#3895FF] hover:to-[#86B8F1] hover:border-none
transition-all duration-200
`}
>
<Icon
className={`h-6 w-6 ${isActive ? 'text-white' : 'text-slate-500 group-hover:text-white'} stroke-[2.5]`}
/>
</button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={12}>
<p>{item.title}</p>
</TooltipContent>
</Tooltip>
</div>
)
})}
@@ -160,23 +152,20 @@ export function SidebarNavigation() {
{/* Bottom section */}
<div className="mt-auto">
<div className="relative group">
<button
onClick={() => { }}
className="w-12 h-12 rounded-full bg-[#f0fafd] flex items-center justify-center cursor-not-allowed opacity-80 border border-slate-100 hover:bg-[#2563eb] hover:border-[#2563eb]"
disabled
>
<User className="h-6 w-6 text-slate-900 group-hover:text-white" />
</button>
<div className="
absolute left-full ml-3 top-1/2 -translate-y-1/2
px-3 py-1.5 rounded-lg
bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
opacity-0 invisible group-hover:opacity-100 group-hover:visible
whitespace-nowrap shadow-lg pointer-events-none
">
Account (Coming Soon)
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700" />
</div>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => { }}
className="w-12 h-12 rounded-full flex items-center justify-center bg-linear-to-b from-[#225999] to-[#56A5FF] transition-all duration-200"
disabled
>
<User className="h-6 w-6 text-white" />
</button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={12}>
<p>Account</p>
</TooltipContent>
</Tooltip>
</div>
</div>
</aside>

2
components/ui/card.tsx
View File

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
<div
data-slot="card"
className={cn(
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm hover:shadow-md hover:border-[var(--card-hover-border)] hover:shadow-[var(--card-glow)]',
'bg-card text-card-foreground flex flex-col gap-6 rounded-md border-none py-6 shadow-none hover:shadow-none',
className,
)}
{...props}

2
components/ui/dialog.tsx
View File

@@ -60,7 +60,7 @@ function DialogContent({
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',
'bg-dialog fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',
className,
)}
{...props}

2
components/ui/skeleton.tsx
View File

@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="skeleton"
className={cn('bg-accent animate-pulse rounded-md', className)}
className={cn('bg-muted animate-pulse rounded-md', className)}
{...props}
/>
)

2
components/ui/tooltip.tsx
View File

@@ -46,7 +46,7 @@ function TooltipContent({
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
'bg-foreground text-background z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
'bg-foreground text-white z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
className,
)}
{...props}

17
package-lock.json generated
View File

@@ -2511,7 +2511,6 @@
"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
"devOptional": true,
"license": "MIT",
"peer": true,
"dependencies": {
"csstype": "^3.2.2"
}
@@ -2522,7 +2521,6 @@
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
"devOptional": true,
"license": "MIT",
"peer": true,
"peerDependencies": {
"@types/react": "^19.2.0"
}
@@ -2624,7 +2622,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.9.0",
"caniuse-lite": "^1.0.30001759",
@@ -2887,8 +2884,7 @@
"version": "8.5.1",
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.5.1.tgz",
"integrity": "sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/embla-carousel-react": {
"version": "8.5.1",
@@ -3018,8 +3014,7 @@
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
"license": "BSD-2-Clause",
"peer": true
"license": "BSD-2-Clause"
},
"node_modules/lightningcss": {
"version": "1.30.2",
@@ -3342,7 +3337,6 @@
"resolved": "https://registry.npmjs.org/next/-/next-16.0.10.tgz",
"integrity": "sha512-RtWh5PUgI+vxlV3HdR+IfWA1UUHu0+Ram/JBO4vWB54cVPentCD0e+lxyAYEsDTqGGMg7qpjhKh6dc6aW7W/sA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@next/env": "16.0.10",
"@swc/helpers": "0.5.15",
@@ -3468,7 +3462,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -3506,7 +3499,6 @@
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
@@ -3537,7 +3529,6 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"scheduler": "^0.27.0"
},
@@ -3550,7 +3541,6 @@
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.68.0.tgz",
"integrity": "sha512-oNN3fjrZ/Xo40SWlHf1yCjlMK417JxoSJVUXQjGdvdRCU07NTFei1i1f8ApUAts+IVh14e4EdakeLEA+BEAs/Q==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=18.0.0"
},
@@ -3850,8 +3840,7 @@
"version": "4.1.18",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
"integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/tailwindcss-animate": {
"version": "1.0.7",

BIN
public/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB