First 15
The first short break for an eligible shift.
BreakFlow
A break management tool that turns an existing employee schedule into a ready to use digital or printable break sheet.
RoleProduct strategy, workflow design, development
The operational problem
A schedule shows who is working. It does not show which breaks are complete.
Managers need a simple way to track required breaks throughout a busy day without rebuilding the employee schedule in another system.
Paper works well for visibility, while a shared digital view works well for live progress. BreakFlow supports both approaches from the same imported schedule.
The product idea
Load the schedule once.
Run the break process from there.
BreakFlow reads the employees and shifts already planned for the day. It determines which breaks each shift qualifies for, then creates a clear tracking view for managers.
45 minute meal
The meal period for an eligible shift.
Second 15
The second short break when the shift qualifies.
The daily view
Every employee, shift, and eligible break stays visible.
Pending breaks appear in red. A completed break turns green with a checkmark, giving the manager a fast picture of the day without opening another screen.
Two useful workflows
Digital when the team needs shared progress. Printed when the operation needs a physical sheet.
Digital
Managers mark breaks complete as the day moves forward. Supabase Realtime keeps the shared state current across devices.
Printed
Print the current day or prepare one sheet for every day of the week. Each page includes employee names, shifts, and spaces to mark each break.
Live progress
See what remains without scanning every row.
The mobile view keeps the full break sheet easy to use. Remaining Breaks groups unfinished items by First 15, Lunch, and Second 15 so the next action is clear.
Weekly preparation
Select any day, change days without another upload, or print the whole week.
A weekly schedule file can contain a schedule for each day. The manager chooses the day to load, then can move between days or prepare the full set of printed sheets for the binder.
How it works
The workflow begins with the schedule the manager already has.
BreakFlow adds break eligibility and progress tracking without changing how the employee schedule is created.
Load
Import a CSV, Excel, or Dayforce HCM schedule file.
Select
Choose the day from the weekly schedule.
Track
Mark eligible breaks complete as the day progresses.
Continue
Share live progress or print sheets for the operation.
Manager questions
The screen answers the questions that matter during the shift.
- 01
Who still needs a break?
- 02
Which break is still pending?
- 03
Can another manager see the same progress?
- 04
Is a printed sheet ready for the binder?
Current capabilities
A focused tool with the details needed for daily use.
Schedule import
Reads CSV, Excel, and Dayforce HCM schedule files.
Eligibility rules
Determines breaks from shift length and supports split shifts.
State persistence
Keeps progress available when the page is refreshed or reopened.
Shared updates
Uses Supabase Realtime to keep participating devices current.
Installable access
Includes a PWA manifest for convenient phone and desktop access.
Display options
Supports light and dark modes for different working environments.
Outcome
One schedule becomes a practical break process for the entire week.
BreakFlow reduces setup work, keeps remaining breaks visible, and gives managers a choice between shared digital tracking and familiar printed sheets.
1 uploadto prepare the weekly schedule
3 break typestracked for eligible shifts
2 workflowsdigital and printed
Liveshared progress across devices
Product judgment
The best workflow fits the operation instead of forcing the operation to change.
Some managers want a live shared view. Others need printed pages in a binder. Supporting both makes the tool useful without asking the team to abandon a process that already works.
BreakFlow stays focused on one responsibility. It does not create the schedule. It turns that schedule into an easier way to prepare, track, and complete employee breaks.
Technical implementation
Built for responsive use and reliable shared state.
Next.js and TypeScript provide the application structure. Tailwind CSS supports the responsive interface. SheetJS reads schedule files. Supabase Postgres stores the data, while Supabase Realtime synchronizes progress. Framer Motion adds focused interface movement, and the PWA manifest supports installable access.
Next case study