Shiftleaf – Staff Shift Rota (React Source Code)

Description

Shiftleaf is a single-shop staff rota. It has a week board, a staff list, a coverage check, and settings. Shifts, people, and the shop name are stored in the browser with localStorage. There is no account, sync, or payroll.

Features

• Week board, shift editor, staff list, coverage, and settings
• Coverage count against saved open hours in half-hour steps
• Shop name, week start, open hours, minimum people on the floor, and accent on the Settings screen
• Sample staff and shifts you can replace

Tech stack

• React and Vite
• TypeScript
• localStorage

Requirements

• Node.js 22 or newer
• npm 10 or newer
• A current Chrome, Firefox, Safari, or Edge

How to install and run

1. Unzip the archive and open the folder
2. Run npm install, then npm run dev
3. Checks: npm test, npm run lint, npm run typecheck, npm run build, and npm run preview
4. npm run build writes a static site to dist/

How to rebrand

• Shop name, week start, open hours, minimum people on the floor, and accent: Settings screen
• Default sample and accent colors: src/seed.ts and the :root tokens in src/index.css
• Product title: index.html
• Storage key: STORAGE_KEY in src/storage.ts

What’s included

• Full React / Vite source
• Unit tests, lint, and typecheck setup
• README with install, rebrand, and project layout
• LICENSE (one end product)

Limitations

• Data stays on one browser. Clearing site data deletes the rota.
• Shifts must start and end on the same day. Overnight shifts are rejected.
• Coverage is a half-hour count against the saved open hours. It does not know labor law, breaks, or wages.
• There is no login, multi-site support, or server.

License

Commercial license: use the source in one end product (one app, site, or service) for yourself or one client, free or paid. Reselling or publishing the source as a template is not allowed. Full text is in the LICENSE file.