Staff — End-user view

Two roles: staff view their own schedule; admin schedules shifts and approves leave.

A. Staff

1. Staff Home — "My Calendar"

Page /staff/home. Title "My Calendar" at top-left.

Top-right action area, left→right: Timezone Selector (optional) → Calendar (optional) → Timetable (optional) → My Profile (always present).

2. Timetable

Page /staff/timetable. Uses one date/view control set, owned by the Syncfusion ScheduleComponent header.

• Prev / Next / Today changes date range; view switch changes day/week/etc.
• Date-range label always matches the rendered event grid.

UX note: the page does not render two duplicate date-control sets — only one, to avoid confusion.

3. Availability

In profile, Availability tab: time slots in each weekday column are sorted by ascending start time (regardless of API order). Sort inside each weekday; do not move slots to another day.

4. Request leave

Leave section in Staff Profile Availability. Create button: +New Leave.

Create/edit leave drawer:

• Has Tracking Code selector (only shows Leave codes, not Shift codes).
• Compact-wide layout: Start/End Date in one row, Start/End Time in one row (when viewport is wide enough).
• Keeps existing behavior: Future Only/All filter, All Day, edit/delete, status lifecycle.

B. Admin

1. Roster Weekly Planner

• Each staff member is one row, sorted by ascending name.
• One person has one row even with multi-BU records (dedupe by enterpriseUserId, or employeeId if missing).
• Only shows approved absence (approved-only).

2. See leave overlapping a shift

Create/Edit Shift popup: below Time Range is read-only field Leave.

• Shows when staff has leave that overlaps the shift interval (evaluate by time interval, not only same date).
• Includes leave date/time + tracking code. Hidden when no leave overlaps.

→ Admin avoids scheduling staff while they are on leave.

3. Approve Leave

Approve drawer in Staff Roster Leave.

• Also shows only Leave tracking codes; compact layout like create/edit drawer.
• Keeps the existing approval status lifecycle; attaches selected tracking code according to current approve behavior.

Summary

Role	Does
Staff	View My Calendar / Timetable, declare availability, request leave (+New Leave).
Admin	Build weekly roster (1 person/1 row), see leave overlapping shifts, approve leave.

Next: Concepts & architecture.