ui changes
This commit is contained in:
@@ -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 */}
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user