feat(boss-dashboard): add drivers section
This commit is contained in:
parent
eb3f801167
commit
44f93feb13
1 changed files with 57 additions and 4 deletions
|
|
@ -184,10 +184,63 @@ export default function BossDashboardView() {
|
|||
)}
|
||||
</section>
|
||||
|
||||
{/* Placeholder for drivers (Task 13) */}
|
||||
<div className="rounded-xl bg-muted/30 p-3 text-xs text-muted-foreground">
|
||||
Driver stops land here in Task 13.
|
||||
</div>
|
||||
{/* Drivers section */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h2 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
|
||||
Driver stops today
|
||||
</h2>
|
||||
{data && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{data.drivers.reduce((s, d) => s + d.stopsToday, 0)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{data && data.drivers.length === 0 ? (
|
||||
<div className="rounded-xl border border-border/60 bg-card/50 p-6 text-center text-sm text-muted-foreground">
|
||||
No driver stops scheduled today.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{data?.drivers.map((drv) => {
|
||||
const allDone = drv.stopsLeft === 0;
|
||||
const noneStarted = drv.stopsDone === 0 && drv.stopsLeft > 0;
|
||||
const badgeColor = allDone
|
||||
? "bg-emerald-500/15 text-emerald-400"
|
||||
: noneStarted
|
||||
? "bg-rose-500/15 text-rose-400"
|
||||
: "bg-amber-500/15 text-amber-400";
|
||||
const badgeLabel = allDone
|
||||
? "All done"
|
||||
: noneStarted
|
||||
? `${drv.stopsLeft} left`
|
||||
: `${drv.stopsLeft} left`;
|
||||
return (
|
||||
<li
|
||||
key={drv.id}
|
||||
className="flex items-center justify-between gap-3 rounded-xl border border-border/60 bg-card p-3"
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<div className="grid h-8 w-8 place-items-center rounded-full bg-cyan-500/15 text-cyan-300 text-xs font-semibold shrink-0">
|
||||
{(drv.name[0] ?? "?").toUpperCase()}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium truncate">{drv.name}</div>
|
||||
<div className="text-[11px] text-muted-foreground">
|
||||
{drv.stopsToday} stops · {drv.stopsDone} done
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className={`rounded-full px-2.5 py-1 text-[11px] font-medium ${badgeColor}`}>
|
||||
{badgeLabel}
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue