refactor: upload section design fix

This commit is contained in:
2026-03-19 12:29:50 +05:30
parent 1065487046
commit 37d7a664e0
5 changed files with 65 additions and 13 deletions

View File

@@ -11,7 +11,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Loader2, Check } from 'lucide-react';
import { Loader2, Check, ArrowUp, ArrowDown } from 'lucide-react';
import { projectService, packageService, chainageService } from '@/services/api';
import { Project, Package as PackageType, Chainage, SessionContext } from '@/types';
import { cn } from '@/lib/utils';
@@ -133,6 +133,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
packageName: selectedPackage.name,
chainageId: selectedChainage.id,
chainageName: selectedChainage.segment_name,
chainageDirection: selectedChainage.direction,
});
}
};
@@ -298,11 +299,20 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
<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 className="flex flex-col gap-0.5 py-0.5">
<span className="font-semibold text-sm">{chn.segment_name}</span>
<div className="flex items-center gap-2 text-[10px] text-muted-foreground font-medium">
<span>{chn.chainage_start_km}-{chn.chainage_end_km} km</span>
<span className="h-2.5 w-px bg-border" />
<span className="flex items-center gap-1 uppercase">
{chn.direction === 'UP' ? (
<ArrowUp className="h-2.5 w-2.5" />
) : (
<ArrowDown className="h-2.5 w-2.5" />
)}
{chn.direction}
</span>
</div>
</div>
</SelectItem>
))}
@@ -320,7 +330,17 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
<span>/</span>
<span className="text-foreground">{selectedPackage?.name}</span>
<span>/</span>
<span className="text-foreground">{selectedChainage?.segment_name}</span>
<span className="text-foreground flex items-center gap-1.5">
{selectedChainage?.segment_name}
<span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-[10px] font-bold uppercase border">
{selectedChainage?.direction === 'UP' ? (
<ArrowUp className="h-2.5 w-2.5" />
) : (
<ArrowDown className="h-2.5 w-2.5" />
)}
{selectedChainage?.direction}
</span>
</span>
</div>
</div>
)}