📅 Admin

Staff Roster

Staff Roster is a weekly grid — staff members down the side, the 7 days of the week across the top — where you click any cell to assign one or more shifts to a person on a given day.

📍 Menu path: Admin → Staff Roster

👤 Who uses it: Managers and Admins build the schedule; requires the Advanced plan tier or above

🏷️ Plan tier: advanced+

Overview

This is the same scheduling screen used across the restaurant, bakery, and general POS variants; it lets you plan who is working which shift on which day for the current calendar week.

Each day supports four shift types — Morning (7:00–12:00), Afternoon (12:00–17:00), Evening (17:00–22:00) and Night (22:00–3:00) — each worth 5 hours by default. A person can be assigned more than one shift on the same day.

Weekly hours per staff member are totalled automatically and shown in the rightmost column; the number turns red once someone exceeds 40 hours in the displayed week, as a quick overtime flag.

Before You Start

Requires the billing feature at the Advanced plan tier or above.
Staff members must exist in the system before shifts can be assigned to them — use Add Staff on this page if the list is empty.

Step-by-Step Guide

1 Add a staff member to the roster

Click Add Staff in the top-right of the page.
Enter the person's Name (required).
Choose a Role from Waiter, Senior Waiter, Captain, Hostess, Kitchen, Delivery, Manager, or Support.
Click Add Staff to save — they immediately appear as a new row in the grid.

2 Assign a shift to a person on a day

Click the empty cell where a staff member's row meets the day column you want to schedule.
In the Assign Shifts dialog, tick one or more of Morning, Afternoon, Evening, Night — the shift's time range and 5-hour duration is shown next to each option.
Optionally add a note, e.g. "covering for Amit".
Click Save. The cell now shows a colour-coded chip for each assigned shift (M / A / E / N).
To clear a day, open the same cell and untick every shift, then save — this removes that person's schedule for that day.

💡 Ticking multiple shifts on the same day (e.g. Morning + Evening, a "split shift") is fully supported and both chips will show in the cell.

3 Navigate weeks and filter by role

Use the ◀ / ▶ arrows to move to the previous or next week; click This Week to jump straight back to the current week.
Use the role pill buttons (All, plus one per distinct role in your staff list) to narrow the grid to a single role, e.g. just Kitchen staff.

4 Print the roster

Click Print Roster — this opens a new browser tab with a clean, printable table for the currently filtered staff and the visible week, including a shift-code legend at the bottom.
Use your browser's print dialog (or the Print button on the page) to print or save it as a PDF.

Every Field & Button, Explained

Field / Button	What it does
`Staff Scheduled`	KPI chip counting distinct staff who have at least one shift assigned in the currently loaded week.
`Total Shifts`	KPI chip counting every individual shift assignment (a person with two shifts in one day counts as two) across the visible week.
`Today's Shifts`	KPI chip counting shift assignments specifically for today's date, if today falls within the visible week.
`Role filter pills`	Filters the grid rows to a single role, or "All" to show everyone.
`Shift chip (M/A/E/N)`	Colour-coded badge shown in a day cell for each assigned shift: amber Morning, blue Afternoon, purple Evening, teal Night.
`Hrs column`	Sum of hours (5 hrs per shift) scheduled for that staff member in the visible week; turns red once it exceeds 40 hours.
`On Today panel`	Sidebar list of every staff member with at least one shift scheduled for today, shown only when today is inside the visible week.
`Add Staff — Name / Role`	Required name and a role picked from Waiter, Senior Waiter, Captain, Hostess, Kitchen, Delivery, Manager, Support.
`Assign Shifts checkboxes`	Multi-select of Morning / Afternoon / Evening / Night for the selected person and day; each shows its time range and hours.
`Note (optional)`	Free-text note attached to that person's shift entry for the day, e.g. reason for a swap.

Tips & Best Practices

Use the note field on swapped or covered shifts (e.g. "covering for Amit") so managers reviewing the printed roster understand exceptions at a glance.
Check the Hrs column before finalising the week — a name turning red means that person is scheduled over 40 hours and may need a shift removed or reassigned.
Print the roster and post it physically as well — front-line staff without app access still need to know their schedule.

Troubleshooting & FAQ

The grid says "No staff added yet".

No staff members exist for this roster yet. Click Add Staff to create your first entry before you can assign shifts.

I assigned a shift but the cell still looks empty.

Make sure you clicked Save in the Assign Shifts dialog after ticking a shift checkbox — closing the dialog without saving discards the change.

Why is someone's hours showing in red?

Weekly hours over 40 are highlighted red as an overtime flag — review whether one of their shifts should be moved to another person.

Can I schedule a person for more than one shift in a day?

Yes — tick more than one shift checkbox for that day/person in the Assign Shifts dialog; both shift chips will display in that cell.

🧑‍💻 Developer Notes

Source component(s):

frontend-app/packages/pos-react-lib/src/pages/shared/StaffRosterPage.jsx

Backend endpoints used:

GET {apiPrefix}/staff
GET {apiPrefix}/roster?from=&to=
POST {apiPrefix}/roster
PUT {apiPrefix}/roster/:id
DELETE {apiPrefix}/roster/:id

Related tables (db-core repositories):

RosterEntry (best-effort — staffId, rosterDate, shifts JSON array, note)
Staff / employee record (best-effort)

Feature flag key: billing (requires advanced plan tier or above)

This is a shared component (<StaffRosterPage apiPrefix="/restaurant" />, "/bakery", or "" for the main POS) reused across app variants with only the API path prefix changing. The backend returns roster rows keyed by staffId/staffName with a JSON shifts array per date, which the page flattens client-side into one row per assigned shift for the grid.