setup husky prettier eslint
This commit is contained in:
@@ -1,329 +1,340 @@
|
||||
"use client"
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Loader2, Check } from "lucide-react"
|
||||
import { projectService, packageService, chainageService } from "@/services/api"
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Project,
|
||||
Package as PackageType,
|
||||
Chainage,
|
||||
SessionContext
|
||||
} from "@/types"
|
||||
import { cn } from "@/lib/utils"
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Loader2, Check } from 'lucide-react';
|
||||
import { projectService, packageService, chainageService } from '@/services/api';
|
||||
import { Project, Package as PackageType, Chainage, SessionContext } from '@/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
type ProjectSelectionSectionProps = {
|
||||
onSelectionComplete: (session: SessionContext) => void
|
||||
}
|
||||
onSelectionComplete: (session: SessionContext) => void;
|
||||
};
|
||||
|
||||
export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectionSectionProps) {
|
||||
// Data states
|
||||
const [projects, setProjects] = useState<Project[]>([])
|
||||
const [packages, setPackages] = useState<PackageType[]>([])
|
||||
const [chainages, setChainages] = useState<Chainage[]>([])
|
||||
// Data states
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [packages, setPackages] = useState<PackageType[]>([]);
|
||||
const [chainages, setChainages] = useState<Chainage[]>([]);
|
||||
|
||||
// Selection states
|
||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null)
|
||||
const [selectedPackage, setSelectedPackage] = useState<PackageType | null>(null)
|
||||
const [selectedChainage, setSelectedChainage] = useState<Chainage | null>(null)
|
||||
// Selection states
|
||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||
const [selectedPackage, setSelectedPackage] = useState<PackageType | null>(null);
|
||||
const [selectedChainage, setSelectedChainage] = useState<Chainage | null>(null);
|
||||
|
||||
// Loading states
|
||||
const [loadingProjects, setLoadingProjects] = useState(true)
|
||||
const [loadingPackages, setLoadingPackages] = useState(false)
|
||||
const [loadingChainages, setLoadingChainages] = useState(false)
|
||||
// Loading states
|
||||
const [loadingProjects, setLoadingProjects] = useState(true);
|
||||
const [loadingPackages, setLoadingPackages] = useState(false);
|
||||
const [loadingChainages, setLoadingChainages] = useState(false);
|
||||
|
||||
// Error state
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
// Error state
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Load projects on mount
|
||||
useEffect(() => {
|
||||
const loadProjects = async () => {
|
||||
try {
|
||||
setLoadingProjects(true)
|
||||
setError(null)
|
||||
const data = await projectService.getProjects()
|
||||
setProjects(data.items)
|
||||
} catch (err) {
|
||||
console.error("Failed to load projects:", err)
|
||||
setError("Failed to load projects. Please check if the backend is running.")
|
||||
} finally {
|
||||
setLoadingProjects(false)
|
||||
}
|
||||
}
|
||||
loadProjects()
|
||||
}, [])
|
||||
// Load projects on mount
|
||||
useEffect(() => {
|
||||
const loadProjects = async () => {
|
||||
try {
|
||||
setLoadingProjects(true);
|
||||
setError(null);
|
||||
const data = await projectService.getProjects();
|
||||
setProjects(data.items);
|
||||
} catch (err) {
|
||||
console.error('Failed to load projects:', err);
|
||||
setError('Failed to load projects. Please check if the backend is running.');
|
||||
} finally {
|
||||
setLoadingProjects(false);
|
||||
}
|
||||
};
|
||||
loadProjects();
|
||||
}, []);
|
||||
|
||||
// Load packages when project changes
|
||||
useEffect(() => {
|
||||
if (!selectedProject) {
|
||||
setPackages([])
|
||||
setSelectedPackage(null)
|
||||
return
|
||||
}
|
||||
|
||||
const loadPackages = async () => {
|
||||
try {
|
||||
setLoadingPackages(true)
|
||||
setError(null)
|
||||
setSelectedPackage(null)
|
||||
setSelectedChainage(null)
|
||||
setChainages([])
|
||||
const data = await packageService.getPackagesByProject(selectedProject.id)
|
||||
setPackages(data.items)
|
||||
} catch (err) {
|
||||
console.error("Failed to load packages:", err)
|
||||
setError("Failed to load packages for the selected project.")
|
||||
} finally {
|
||||
setLoadingPackages(false)
|
||||
}
|
||||
}
|
||||
loadPackages()
|
||||
}, [selectedProject])
|
||||
|
||||
// Load chainages when package changes
|
||||
useEffect(() => {
|
||||
if (!selectedPackage) {
|
||||
setChainages([])
|
||||
setSelectedChainage(null)
|
||||
return
|
||||
}
|
||||
|
||||
const loadChainages = async () => {
|
||||
try {
|
||||
setLoadingChainages(true)
|
||||
setError(null)
|
||||
setSelectedChainage(null)
|
||||
const data = await chainageService.getChainagesByPackage(selectedPackage.id)
|
||||
setChainages(data.items)
|
||||
} catch (err) {
|
||||
console.error("Failed to load chainages:", err)
|
||||
setError("Failed to load chainages for the selected package.")
|
||||
} finally {
|
||||
setLoadingChainages(false)
|
||||
}
|
||||
}
|
||||
loadChainages()
|
||||
}, [selectedPackage])
|
||||
|
||||
const handleProjectChange = (projectId: string) => {
|
||||
const project = projects.find(p => p.id === projectId) || null
|
||||
setSelectedProject(project)
|
||||
// Load packages when project changes
|
||||
useEffect(() => {
|
||||
if (!selectedProject) {
|
||||
setPackages([]);
|
||||
setSelectedPackage(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const handlePackageChange = (packageId: string) => {
|
||||
const pkg = packages.find(p => p.id === packageId) || null
|
||||
setSelectedPackage(pkg)
|
||||
const loadPackages = async () => {
|
||||
try {
|
||||
setLoadingPackages(true);
|
||||
setError(null);
|
||||
setSelectedPackage(null);
|
||||
setSelectedChainage(null);
|
||||
setChainages([]);
|
||||
const data = await packageService.getPackagesByProject(selectedProject.id);
|
||||
setPackages(data.items);
|
||||
} catch (err) {
|
||||
console.error('Failed to load packages:', err);
|
||||
setError('Failed to load packages for the selected project.');
|
||||
} finally {
|
||||
setLoadingPackages(false);
|
||||
}
|
||||
};
|
||||
loadPackages();
|
||||
}, [selectedProject]);
|
||||
|
||||
// Load chainages when package changes
|
||||
useEffect(() => {
|
||||
if (!selectedPackage) {
|
||||
setChainages([]);
|
||||
setSelectedChainage(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const handleChainageChange = (chainageId: string) => {
|
||||
const chainage = chainages.find(chn => chn.id === chainageId) || null
|
||||
setSelectedChainage(chainage)
|
||||
const loadChainages = async () => {
|
||||
try {
|
||||
setLoadingChainages(true);
|
||||
setError(null);
|
||||
setSelectedChainage(null);
|
||||
const data = await chainageService.getChainagesByPackage(selectedPackage.id);
|
||||
setChainages(data.items);
|
||||
} catch (err) {
|
||||
console.error('Failed to load chainages:', err);
|
||||
setError('Failed to load chainages for the selected package.');
|
||||
} finally {
|
||||
setLoadingChainages(false);
|
||||
}
|
||||
};
|
||||
loadChainages();
|
||||
}, [selectedPackage]);
|
||||
|
||||
const handleProjectChange = (projectId: string) => {
|
||||
const project = projects.find((p) => p.id === projectId) || null;
|
||||
setSelectedProject(project);
|
||||
};
|
||||
|
||||
const handlePackageChange = (packageId: string) => {
|
||||
const pkg = packages.find((p) => p.id === packageId) || null;
|
||||
setSelectedPackage(pkg);
|
||||
};
|
||||
|
||||
const handleChainageChange = (chainageId: string) => {
|
||||
const chainage = chainages.find((chn) => chn.id === chainageId) || null;
|
||||
setSelectedChainage(chainage);
|
||||
};
|
||||
|
||||
const handleProceed = () => {
|
||||
if (selectedProject && selectedPackage && selectedChainage) {
|
||||
onSelectionComplete({
|
||||
projectId: selectedProject.id,
|
||||
projectName: selectedProject.name,
|
||||
packageId: selectedPackage.id,
|
||||
packageName: selectedPackage.name,
|
||||
chainageId: selectedChainage.id,
|
||||
chainageName: selectedChainage.segment_name,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleProceed = () => {
|
||||
if (selectedProject && selectedPackage && selectedChainage) {
|
||||
onSelectionComplete({
|
||||
projectId: selectedProject.id,
|
||||
projectName: selectedProject.name,
|
||||
packageId: selectedPackage.id,
|
||||
packageName: selectedPackage.name,
|
||||
chainageId: selectedChainage.id,
|
||||
chainageName: selectedChainage.segment_name
|
||||
})
|
||||
}
|
||||
}
|
||||
const isComplete = selectedProject && selectedPackage && selectedChainage;
|
||||
|
||||
const isComplete = selectedProject && selectedPackage && selectedChainage
|
||||
// Step status helpers
|
||||
const getStepStatus = (step: number) => {
|
||||
if (step === 1) return selectedProject ? 'completed' : 'active';
|
||||
if (step === 2) return selectedPackage ? 'completed' : selectedProject ? 'active' : 'pending';
|
||||
if (step === 3) return selectedChainage ? 'completed' : selectedPackage ? 'active' : 'pending';
|
||||
return 'pending';
|
||||
};
|
||||
|
||||
// Step status helpers
|
||||
const getStepStatus = (step: number) => {
|
||||
if (step === 1) return selectedProject ? 'completed' : 'active'
|
||||
if (step === 2) return selectedPackage ? 'completed' : selectedProject ? 'active' : 'pending'
|
||||
if (step === 3) return selectedChainage ? 'completed' : selectedPackage ? 'active' : 'pending'
|
||||
return 'pending'
|
||||
}
|
||||
return (
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader className="pb-6">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<CardTitle className="text-2xl font-bold">Select Project Chainage</CardTitle>
|
||||
<CardDescription className="mt-2 text-base">
|
||||
Select Project, Package & Chainage to begin intelligent road analysis.
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader className="pb-6">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<CardTitle className="text-2xl font-bold">Select Project Chainage</CardTitle>
|
||||
<CardDescription className="mt-2 text-base">
|
||||
Select Project, Package & Chainage to begin intelligent road analysis.
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
{/* Step Progress Indicator */}
|
||||
<div className="flex items-center justify-center pt-2">
|
||||
{[1, 2, 3].map((step, index) => {
|
||||
const status = getStepStatus(step)
|
||||
const labels = ['Project', 'Package', 'Chainage']
|
||||
return (
|
||||
<div key={step} className="flex items-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
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"
|
||||
)}
|
||||
>
|
||||
{status === 'completed' ? <Check className="h-5 w-5" /> : step}
|
||||
</div>
|
||||
<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={cn(
|
||||
"w-16 h-0.5 mx-2 mb-6 rounded-full",
|
||||
getStepStatus(step + 1) !== 'pending' ? "bg-primary" : "bg-border"
|
||||
)} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{/* Step Progress Indicator */}
|
||||
<div className="flex items-center justify-center pt-2">
|
||||
{[1, 2, 3].map((step, index) => {
|
||||
const status = getStepStatus(step);
|
||||
const labels = ['Project', 'Package', 'Chainage'];
|
||||
return (
|
||||
<div key={step} className="flex items-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
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',
|
||||
)}
|
||||
>
|
||||
{status === 'completed' ? <Check className="h-5 w-5" /> : step}
|
||||
</div>
|
||||
<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={cn(
|
||||
'w-16 h-0.5 mx-2 mb-6 rounded-full',
|
||||
getStepStatus(step + 1) !== 'pending' ? 'bg-primary' : 'bg-border',
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-8">
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="p-4 rounded-md bg-destructive/10 border border-destructive/20 text-destructive text-sm">
|
||||
{error}
|
||||
</div>
|
||||
<CardContent className="space-y-8">
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<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-2">
|
||||
<Label htmlFor="project" className="text-sm font-semibold">
|
||||
Project
|
||||
</Label>
|
||||
<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>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Project Dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="project" className="text-sm font-semibold">
|
||||
Project
|
||||
</Label>
|
||||
<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-2">
|
||||
<Label htmlFor="package" className="text-sm font-semibold">
|
||||
Package
|
||||
</Label>
|
||||
<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>
|
||||
|
||||
{/* Chainage Dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="chainage" className="text-sm font-semibold">
|
||||
Chainage
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedChainage?.id || ""}
|
||||
onValueChange={handleChainageChange}
|
||||
disabled={!selectedPackage || loadingChainages}
|
||||
>
|
||||
<SelectTrigger id="chainage" className="h-11">
|
||||
{loadingChainages ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={selectedPackage ? "Select chainage" : "Select package first"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{chainages.map((chn) => (
|
||||
<SelectItem key={chn.id} value={chn.id}>
|
||||
<div className="flex flex-col">
|
||||
<span>{chn.segment_name}</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{chn.chainage_start_km}-{chn.chainage_end_km} km | {chn.direction}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Summary */}
|
||||
{isComplete && (
|
||||
<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">{selectedChainage?.segment_name}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Package Dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="package" className="text-sm font-semibold">
|
||||
Package
|
||||
</Label>
|
||||
<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>
|
||||
|
||||
{/* Proceed Button */}
|
||||
<Button
|
||||
onClick={handleProceed}
|
||||
disabled={!isComplete}
|
||||
className="w-full h-12 text-base font-bold uppercase tracking-wide"
|
||||
size="lg"
|
||||
>
|
||||
{isComplete ? "Proceed to Upload" : "Select all fields to proceed"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
{/* Chainage Dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="chainage" className="text-sm font-semibold">
|
||||
Chainage
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedChainage?.id || ''}
|
||||
onValueChange={handleChainageChange}
|
||||
disabled={!selectedPackage || loadingChainages}
|
||||
>
|
||||
<SelectTrigger id="chainage" className="h-11">
|
||||
{loadingChainages ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue
|
||||
placeholder={selectedPackage ? 'Select chainage' : 'Select package first'}
|
||||
/>
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{chainages.map((chn) => (
|
||||
<SelectItem key={chn.id} value={chn.id}>
|
||||
<div className="flex flex-col">
|
||||
<span>{chn.segment_name}</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{chn.chainage_start_km}-{chn.chainage_end_km} km | {chn.direction}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Summary */}
|
||||
{isComplete && (
|
||||
<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">{selectedChainage?.segment_name}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Proceed Button */}
|
||||
<Button
|
||||
onClick={handleProceed}
|
||||
disabled={!isComplete}
|
||||
className="w-full h-12 text-base font-bold uppercase tracking-wide"
|
||||
size="lg"
|
||||
>
|
||||
{isComplete ? 'Proceed to Upload' : 'Select all fields to proceed'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user