Skip to content

Rota and Staff Planning

2026

Live Demo

StaffWise

A staff scheduling demo for a small cafe. The manager builds the week, fixes clashes, decides time off and keeps wages near budget, in a light or dark theme.

Open live demo(opens in a new tab)All projects
Role
Full-stack developer
Views
6 manager views
Stack
Next.js · TypeScript
Data
Seeded, saved in the browser
staffwise.cjv.app
StaffWise interface

Recorded from the browser-local demoFictional data only

03 — Story

The problem.

Rota planning breaks down when shifts, availability, open cover, time off, labour targets, and manager approvals are tracked in separate places. Managers need to spot gaps before the week starts and understand the labour impact of schedule changes.

Built for
Managers and team leads in rota-heavy businesses such as hospitality, retail, care, field services, and shift-based local operations.

What I built.

I built a rota tool around one fictional cafe team. Every number comes from the demo data and every control does something, so it works like a product rather than a mockup.

  • 01

    Rota Overview

    The week as a grid: one column per day, one row per person, coloured shift cards by role, open shifts first, and a side column of what needs fixing. A new week can start from last week's rota.

  • 02

    Staff Availability

    AM, lunch and PM squares for every person and day, built from real availability records and approved leave.

  • 03

    Time Off Decisions

    Each request says in plain words what approving does to the rota and who else is off. Approving opens those shifts for cover.

  • 04

    Responsive Screens

    Bottom tabs and card layouts on phones, and a dark theme that follows the device or the manager's choice.

  • 05

    Live Demo Hosting

    Live on self-hosted Coolify with a public HTTPS demo URL.

  • 06

    Share the Rota

    Publish leads somewhere: the week as plain text with a Copy button, for WhatsApp or a printed sheet on the noticeboard.

04 — Screens

Screens that matter.

The main view, the deeper work screens, and the handoff or customer-facing state. Select any screen to see it full size.

01 / 04

Rota Planner

The week as a grid with coloured shift cards by role, open shifts in the top row, day totals, and a side column of clashes, open shifts and time off to review. Share puts the week on the clipboard as text.

02 / 04

Time Off

Requests that need a decision, each with the dates in words, the reason, a plain sentence about the rota impact, and who else is off then.

03 / 04

Availability Grid

AM, lunch and PM for every person and day, built from real availability records and approved leave, with this week's notes underneath.

04 / 04

Labour Visibility

Wages by day against budget, wages by role, a plain summary of the week, and wages by person with rates the manager can change.

01 / 04Rota Planner

StaffWise: Rota Planner

The week as a grid with coloured shift cards by role, open shifts in the top row, day totals, and a side column of clashes, open shifts and time off to review. Share puts the week on the clipboard as text.

05 — Under the hood

How it fits together.

  1. 01

    Browser

    Manager rota, staff and labour views

  2. 02

    Next.js App Router

    React · TypeScript · Motion

  3. 03

    Scheduling utilities

    Paid hours · wages · clashes · leave impact

  4. 04

    Demo state

    Demo data rebased to the current week · browser localStorage

Docker container on self-hosted CoolifyA Prisma schema and seed script are ready for a future persisted backend.

Approach

  1. 01

    Built the demo around a fictional cafe team so the rota, staff records, availability, time off, labour, and settings screens all tell one coherent operations story.

  2. 02

    Made the rota interactive rather than static: week navigation, open shifts, drafts that need publishing, clash fixes with suggested cover, and a shift editor that asks before losing work.

  3. 03

    Made the shift editor honest: every person in the list says whether they are free, on leave, unavailable or already working, one sentence explains the chosen person, and a button picks someone free.

  4. 04

    Added availability, time off and labour views so the demo proves more than a calendar: who can work, what approving leave does to the rota, and wages against budget.

  5. 05

    Refined the design in rounds, removing anything decorative or fake, and added a dark theme checked for contrast on every screen.

  6. 06

    Kept StaffWise safe to share with source-controlled demo data and browser persistence only; no payroll, HR, or production staff records are connected.

Build notes

Project Type
Rota planning demo
Primary Workflow
Weekly rota planning to coverage and labour review
Data Mode
Demo data plus browser localStorage
Deployment
Docker and self-hosted Coolify

Stack

Frontend

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS

App Logic

  • Next.js App Router
  • Scheduling Utilities

Data

  • Source-Controlled Demo Data
  • Browser localStorage
  • Future Prisma Schema

Infra

  • Docker
  • Coolify

06 — Next project

Lead Intake and Follow-Up

LeadFlowAI

Read the case study

Interested?

Want something like StaffWise for your team?

Get in touch