The staff portal gives your team members a self-service page to view their schedule, set availability preferences, request shift swaps, and manage their timesheet -- all without needing admin dashboard access. The portal is accessible at /staff-portal.
Login
Staff log in using a one-time password (OTP) sent to their email. No password required:
- Enter the email address associated with the staff account.
- Receive a one-time code via email.
- Enter the code to authenticate.
The portal wraps all content in the StaffPortalLayout component, which provides the navigation header, logout button, and authenticated session management.
Tabs
Schedule
View assigned shifts for the current and upcoming weeks:
- Week navigation -- arrow buttons to move forward and backward through weeks, with the current week range displayed (e.g., "Mar 3 - Mar 9, 2026")
- Daily schedule -- shows each day of the week with assigned shifts, including start time, end time, location, and role
- Shift details -- each shift displays relevant details such as assigned area, duties, and notes
The schedule tab uses the usePortalSchedule hook to fetch shifts for the selected date range.
Availability
Set weekly availability preferences and date-specific overrides:
- Weekly rules -- define recurring availability by day of the week (e.g., "Available Monday 8am-5pm, Unavailable Wednesday")
- Date overrides -- set availability for specific dates that override the weekly rules (e.g., "Unavailable Dec 25")
- Add/remove rules -- add new availability rules with day, start time, and end time. Delete rules that are no longer needed.
- Save changes -- persist availability preferences for the scheduling algorithm to use
The availability tab uses usePortalAvailabilityRules for weekly rules and usePortalAvailabilityOverrides for date-specific overrides.
Swaps
Request shift swaps with other staff and respond to incoming requests:
- Outgoing requests -- shifts you have requested to swap. Shows the status (pending, approved, rejected) and the target staff member.
- Incoming requests -- swap requests from other staff members for your shifts. You can accept or decline each request.
- Request a swap -- select a shift to swap and choose which staff member you want to swap with.
Shift swaps require manager approval. The usePortalIncomingSwaps and usePortalOutgoingSwaps hooks manage swap data.
Timesheet
View time entries, clock in and out, and track hours:
- Time entries table -- lists all time entries for the selected period with date, clock-in time, clock-out time, and total hours
- Clock in/out -- start and stop time tracking for the current shift
- Weekly totals -- sum of hours worked for the week
The timesheet tab uses the usePortalTimesheet hook.
Schedule display
The schedule view organizes shifts by day of the week:
| Day | Shifts |
|---|---|
| Sunday - Saturday | Each day shows assigned shifts with times, locations, and roles. Days without shifts are shown as empty. |
Staff can navigate between weeks to view upcoming schedules and plan accordingly.
Share the staff portal URL with your team so they can check their schedule anytime without needing full admin access. Availability preferences feed into the scheduling algorithm when managers build the weekly schedule. Timesheet data can be exported for payroll processing. Encourage staff to keep their availability up to date to reduce scheduling conflicts.
No schedule visible -- The schedule may not have been published yet. Check with your manager. Only published schedules appear in the portal.
Swap request rejected -- The manager may have denied the request due to a scheduling conflict, skill/certification mismatch, or staffing requirements.
OTP not arriving -- Verify the email address on file in the admin Staff page. Check the spam folder. Ensure the email provider is properly configured.
Cannot clock in -- Verify that you have an assigned shift for the current time. Clock-in may be restricted to within a window of the shift start time.
Availability changes not reflected -- After saving availability changes, the scheduling manager must regenerate the schedule for the changes to take effect. Availability preferences are used during schedule creation, not retroactively.