✦ StealThis .dev
Pages Hard

Airline — Crew Schedule

A crew operations roster board pairing pilots and cabin crew against a week of long-haul flights. Each row shows a duty-time bar with rest and weekly-limit indicators, while each cell is an assignable slot. Click an open slot to pick from eligible crew ranked by legality, swap or unassign rostered members from a detail drawer, and watch rest warnings, open-slot counts and duty loads recompute live as you build the schedule.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Crew Schedule

A crew-ops roster board for fictional carrier Skyward Atlantic, laid out as a sticky grid: crew members down the left (captains, first officers, pursers and cabin crew) and a week of long-haul departures across the top, each header showing flight number, airport pair, 24h block times and duration. Every crew row carries a duty-time bar that fills toward the weekly limit and turns amber or red as rest buffers shrink or duty caps approach, with live percentage and rest readouts beneath the name.

Each grid cell is interactive. Empty cells for the relevant role appear as dashed assign slots — click one to open a side drawer listing eligible crew, ranked OK, TIGHT or BLOCKED by a legality check that weighs weekly duty limits, minimum rest and double-booking. Blocked candidates can’t be selected; tight ones assign with a flagged toast. Click a rostered chip instead to open its duty detail, where you can swap the crew member or unassign them. The KPI strip and the per-row duty bars recompute on every change, the role chips filter the grid, and the publish button reports any open slots or rest flags before sign-off.

Illustrative UI only — fictional airline, not a real booking or flight system.