Claude
4012f32f7f
Adds the day timeline, team list, employee record and leave calendar. The design export shipped data for these but no markup, so their layout is designed here from the data shapes and the established style; only Aperçu and the week grid are ports. The day view carries a per-hour headcount band. Where the week view answers "who works how much", this one answers "who is on the floor at 14:00", and the band makes coverage gaps visible without reading every lane. Two fixes the tests and linter caught: - The poste derivation variables were missing from globals.css. Hues and tiers were ported but not the --post-*-bg/fg/edge that consume them, so every shift chip would have rendered colourless. The palette test now asserts all 36 exist. - ThemeToggle synced state in an effect. The document's data-theme attribute is the real store — it is set by the inline script before React exists — so it now subscribes with useSyncExternalStore instead of keeping a copy that is wrong on first render. Counter tests cover the DST cases in both directions: a 22:00–06:00 shift lasts 7 or 9 hours on the changeover nights, never 8. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cr9dkEHwbDgkWPnyGj1Rjv
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { DayTimeline, type DayLane } from '@/components/planning/DayTimeline';
|
||
import { PageBody, PageHeader } from '@/components/shell/PageHeader';
|
||
import { Badge } from '@/components/ui/Badge';
|
||
import { Button } from '@/components/ui/Button';
|
||
import { UNASSIGNED_ROW, WEEK_ROWS } from '@/lib/demo/semaine';
|
||
|
||
export const metadata = { title: 'Planning · mercredi 12 août · PlanFlow' };
|
||
|
||
/** Mercredi = index 2 dans la semaine de démonstration. */
|
||
const DAY_INDEX = 2;
|
||
|
||
export default function JourPage() {
|
||
const lanes: DayLane[] = WEEK_ROWS.map((row) => ({
|
||
employee: row.employee,
|
||
shifts: row.days[DAY_INDEX] ?? [],
|
||
})).filter((lane) => lane.shifts.length > 0);
|
||
|
||
const unassigned = UNASSIGNED_ROW.days[DAY_INDEX] ?? [];
|
||
if (unassigned.length > 0) {
|
||
lanes.push({
|
||
employee: UNASSIGNED_ROW.employee,
|
||
shifts: unassigned,
|
||
unassigned: true,
|
||
});
|
||
}
|
||
|
||
return (
|
||
<PageBody>
|
||
<PageHeader
|
||
title="Planning · mercredi 12 août"
|
||
subtitle="Nantes Atlantis · amplitude 06:00 – 21:00"
|
||
actions={
|
||
<>
|
||
<Button>Imprimer la journée</Button>
|
||
<Button variant="primary">Ajouter un créneau</Button>
|
||
</>
|
||
}
|
||
/>
|
||
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Badge tone="accent">{lanes.length} salariés présents</Badge>
|
||
<Badge tone="warn">Creux de couverture à 13 h</Badge>
|
||
</div>
|
||
|
||
<DayTimeline lanes={lanes} fromHour={6} toHour={21} />
|
||
</PageBody>
|
||
);
|
||
}
|