refactor: refactor the color schema
This commit is contained in:
@@ -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 } from "lucide-react"
|
||||
import { Loader2, Check } from "lucide-react"
|
||||
import {
|
||||
fetchProjects,
|
||||
fetchPackagesByProject,
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
type Location,
|
||||
type SessionContext
|
||||
} from "@/lib/api"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type ProjectSelectionSectionProps = {
|
||||
onSelectionComplete: (session: SessionContext) => void
|
||||
@@ -148,18 +149,18 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-white/40 backdrop-blur-sm overflow-hidden">
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader className="pb-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<CardTitle className="text-2xl font-semibold">Select Project Location</CardTitle>
|
||||
<CardTitle className="text-2xl font-bold">Select Project Location</CardTitle>
|
||||
<CardDescription className="mt-2 text-base">
|
||||
Select Project, Package & Location to begin intelligent road analysis with advanced computer vision.
|
||||
Select Project, Package & Location to begin intelligent road analysis.
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
{/* Step Progress Indicator */}
|
||||
<div className="flex items-center justify-center gap-2 pt-2">
|
||||
<div className="flex items-center justify-center pt-2">
|
||||
{[1, 2, 3].map((step, index) => {
|
||||
const status = getStepStatus(step)
|
||||
const labels = ['Project', 'Package', 'Location']
|
||||
@@ -167,21 +168,27 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
|
||||
<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-colors ${status === 'completed' ? 'bg-linear-to-b from-[#225999] to-[#56A5FF] text-primary-foreground' :
|
||||
status === 'active' ? 'bg-linear-to-b from-[#225999] to-[#56A5FF] text-primary-foreground ring-4 ring-primary/20' :
|
||||
'bg-muted text-muted-foreground'
|
||||
}`}
|
||||
className={cn(
|
||||
"w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold transition-all",
|
||||
status === 'completed' ? "bg-primary text-primary-foreground" :
|
||||
status === 'active' ? "bg-primary text-primary-foreground ring-4 ring-primary/10" :
|
||||
"bg-muted text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{step}
|
||||
{status === 'completed' ? <Check className="h-5 w-5" /> : step}
|
||||
</div>
|
||||
<span className={`text-xs mt-1.5 font-medium ${status === 'pending' ? 'text-muted-foreground/60' : 'text-foreground'
|
||||
}`}>
|
||||
<span className={cn(
|
||||
"text-xs mt-2 font-medium",
|
||||
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 ${getStepStatus(step + 1) !== 'pending' ? 'bg-linear-to-b from-[#225999] to-[#56A5FF]' : 'bg-border'
|
||||
}`} />
|
||||
<div className={cn(
|
||||
"w-16 h-0.5 mx-2 mb-6 rounded-full",
|
||||
getStepStatus(step + 1) !== 'pending' ? "bg-primary" : "bg-border"
|
||||
)} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
@@ -190,126 +197,117 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="pt-6 space-y-6">
|
||||
<CardContent className="space-y-8">
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="flex items-start gap-3 p-4 rounded-xl bg-destructive/10 border border-destructive/20 text-destructive">
|
||||
<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 className="p-4 rounded-md bg-destructive/10 border border-destructive/20 text-destructive text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Project Dropdown */}
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="project" className="text-sm font-semibold text-foreground">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="project" className="text-sm font-semibold">
|
||||
Project
|
||||
</Label>
|
||||
<div className="input-glow rounded-lg">
|
||||
<Select
|
||||
value={selectedProject?.id || ""}
|
||||
onValueChange={handleProjectChange}
|
||||
disabled={loadingProjects}
|
||||
>
|
||||
<SelectTrigger id="project" className="h-12 bg-background/50 border-border/50 hover:border-primary/50">
|
||||
{loadingProjects ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-primary" />
|
||||
<span className="text-muted-foreground">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder="Select a project" />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.id}>
|
||||
<span className="font-medium">{project.name}</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Select
|
||||
value={selectedProject?.id || ""}
|
||||
onValueChange={handleProjectChange}
|
||||
disabled={loadingProjects}
|
||||
>
|
||||
<SelectTrigger id="project" className="h-11">
|
||||
{loadingProjects ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder="Select project" />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Package Dropdown */}
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="package" className="text-sm font-semibold text-foreground">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="package" className="text-sm font-semibold">
|
||||
Package
|
||||
</Label>
|
||||
<div className="input-glow rounded-lg">
|
||||
<Select
|
||||
value={selectedPackage?.id || ""}
|
||||
onValueChange={handlePackageChange}
|
||||
disabled={!selectedProject || loadingPackages}
|
||||
>
|
||||
<SelectTrigger id="package" className="h-12 bg-background/50 border-border/50 hover:border-primary/50">
|
||||
{loadingPackages ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<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"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{packages.map((pkg) => (
|
||||
<SelectItem key={pkg.id} value={pkg.id}>
|
||||
<span className="font-medium">{pkg.name}</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Select
|
||||
value={selectedPackage?.id || ""}
|
||||
onValueChange={handlePackageChange}
|
||||
disabled={!selectedProject || loadingPackages}
|
||||
>
|
||||
<SelectTrigger id="package" className="h-11">
|
||||
{loadingPackages ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={selectedProject ? "Select package" : "Select project first"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{packages.map((pkg) => (
|
||||
<SelectItem key={pkg.id} value={pkg.id}>
|
||||
{pkg.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Location Dropdown */}
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="location" className="text-sm font-semibold text-foreground">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location" className="text-sm font-semibold">
|
||||
Location
|
||||
</Label>
|
||||
<div className="input-glow rounded-lg">
|
||||
<Select
|
||||
value={selectedLocation?.id || ""}
|
||||
onValueChange={handleLocationChange}
|
||||
disabled={!selectedPackage || loadingLocations}
|
||||
>
|
||||
<SelectTrigger id="location" className="h-12 bg-background/50 border-border/50 hover:border-primary/50">
|
||||
{loadingLocations ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<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"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{locations.map((location) => (
|
||||
<SelectItem key={location.id} value={location.id}>
|
||||
<span className="font-medium">{location.segment_name}</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Select
|
||||
value={selectedLocation?.id || ""}
|
||||
onValueChange={handleLocationChange}
|
||||
disabled={!selectedPackage || loadingLocations}
|
||||
>
|
||||
<SelectTrigger id="location" className="h-11">
|
||||
{loadingLocations ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={selectedPackage ? "Select location" : "Select package first"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{locations.map((location) => (
|
||||
<SelectItem key={location.id} value={location.id}>
|
||||
{location.segment_name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Summary */}
|
||||
{isComplete && (
|
||||
<div className="px-4 py-3 rounded-lg bg-primary/5 border border-primary/15">
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium">Path:</span>
|
||||
<div className="px-4 py-3 rounded-md bg-secondary/50 border text-sm">
|
||||
<div className="flex items-center gap-2 flex-wrap text-muted-foreground">
|
||||
<span className="font-semibold text-foreground">Selection:</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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -317,15 +315,10 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
|
||||
<Button
|
||||
onClick={handleProceed}
|
||||
disabled={!isComplete}
|
||||
className={`w-full h-14 text-base font-semibold ${isComplete ? 'btn-blue-gradient text-white' : ''
|
||||
}`}
|
||||
className="w-full h-12 text-base font-bold uppercase tracking-wide"
|
||||
size="lg"
|
||||
>
|
||||
{isComplete ? (
|
||||
"Proceed to Upload"
|
||||
) : (
|
||||
"Complete all selections to proceed"
|
||||
)}
|
||||
{isComplete ? "Proceed to Upload" : "Select all fields to proceed"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user