Drag-and-Drop Shift Rostering for Multi-Shift Teams
1 min read
The challenge
Teams operating kitchens, clinics and retail outlets built weekly and monthly rosters in spreadsheets. Coverage gaps, excessive consecutive workdays and overtime risks were often discovered only after a roster had been shared.
What we delivered
- Weekly and monthly roster views.
- Drag-and-drop shift assignment.
- Support for 24/7, two-shift, three-shift and custom cycles.
- Live warnings for unfilled slots, consecutive days and hour caps.
- Reusable team directory with role permissions.
- Share links for owners, editors and view-only users.
Delivery focus
The system focused on making operational constraints visible while managers were editing the roster. It converted rules that were previously checked manually into immediate feedback.
Technology
React, TypeScript, Vite, Zustand, dnd-kit, date-fns and Tailwind CSS.
All names and phone numbers in the demonstration are fictional.