feat(dashboard): show teacher timetable context when assigning relief

[guangshinhaha]

Context

From user interviews (Apr 23-24, 2026), all interviewees wanted to see teacher timetable information before assigning relief:

• DXD/Secondary (Darren): "If this could show their timetable... whether they're so packed in the day, you still want to force them? It must also consider their workload for the day."
• Zhenghua Secondary (Danny): "I need to see the full data. The full data. Because even if they are free one period before and one period after, the teacher will die with the relief... and also the total count of the periods."

Currently, the manual assign modal (screenshot below) shows only teacher name, avatar, and role — no timetable context at all. KPs have no way to assess workload impact before assigning. This is the #1 confidence gap.

What to build

1. Manual assign modal — inline mini timetable strip

When the assign modal opens, show a horizontal period strip below each teacher's name showing their full day schedule:

SELECT AVAILABLE TEACHER

○  Ahmad bin Hassan
   [Math 3A][ FREE ][██ P3 ██][ FREE ][Eng 2B][Math 4C]
     P1        P2       P3       P4       P5       P6

○  Fatimah Ali · Permanent Relief
   [ FREE  ][ FREE ][██ P3 ██][ FREE ][ FREE ][ FREE ]
     P1        P2       P3       P4       P5       P6

○  Kumar Rajan · Permanent Relief  
   [ FREE  ][Sci 2A][██ P3 ██][Sci 3B][ FREE ][ FREE ]
     P1        P2       P3       P4       P5       P6

Visual encoding:

• Target period (the one being assigned) is highlighted/bordered distinctly so KP can see what's adjacent
• Teaching periods show class + subject in a filled block
• Free periods are visually empty/light
• Already-assigned relief shown differently from regular teaching (e.g., dashed border or different colour)
• Relief count badge (from feat(dashboard): show relief count per teacher for fairness transparency #62) shown alongside

UX priority: don't overwhelm. The strip must be:

• Compact — one row of small blocks per teacher, not a full timetable grid
• Colour-coded but not noisy — use 2-3 colours max (teaching, free, target period)
• Scannable in <2 seconds — the KP should be able to glance and see "Ahmad is packed, Fatimah is wide open"
• Responsive — on mobile/tablet, consider collapsing to traffic light indicators (🟢🟡🔴) instead of the full strip

If the teacher list is long (10+ teachers), the strips might make the modal feel overwhelming. Consider:

• Only showing strips for the top 5-6 recommended teachers by default
• A "Show all" toggle to reveal the rest
• Or making the strip expandable per teacher (collapsed = just name + traffic light, expanded = full strip)

2. Auto-assign preview — explainability

The existing auto-assign preview modal should show why each teacher was picked:

AUTO-ASSIGN PREVIEW

P2 · 4A English (cover for Lim Siew Hua)
  → Ahmad bin Hassan
    Same subject · 2 relief this week · No back-to-back
    [View timetable ▾]  [Swap ▾]

P4 · 3B Math (cover for Lim Siew Hua)
  → Kumar Rajan
    Permanent Relief · 1 relief this week · Back-to-back with P3
    [View timetable ▾]  [Swap ▾]

• "Why" summary — one line showing which auto-assign rules matched (same subject, workload balance, role priority, etc.)
• "View timetable" — expands to show the same mini timetable strip inline
• "Swap" — opens the manual assign teacher list (with strips) so KP can override

This gives KPs confidence to hit "Confirm all" quickly, or drill into assignments they're unsure about.

Design considerations

• The mini strip is the preferred approach (Approach A) — inline, visual, no extra clicks
• But must not overwhelm: keep it compact, use colour sparingly, consider collapsing for long lists
• Mobile: the strip may not fit on small screens. Fall back to compact indicators (e.g., "Free before & after" / "Back-to-back" / "Only free period") on narrow viewports
• The timetable data is already available from the imported timetable — no new data fetching needed, just UI rendering

Entry points to modify

File	Change
Manual assign modal component	Add mini timetable strip per teacher
Auto-assign preview modal	Add "why" explanation + timetable expand + swap option
Dashboard API / data loading	Ensure full-day timetable for available teachers is included in the response

Depends on

• feat(dashboard): show relief count per teacher for fairness transparency #62 (relief count visibility) — relief count badge should appear alongside the timetable strip
• feat(auto-assign): add 'avoid back-to-back' rule with configurable threshold #63 (avoid back-to-back rule) — the strip visually validates what the rule does algorithmically

Acceptance criteria

• Manual assign modal shows inline mini timetable strip per available teacher
• Target period is visually highlighted in the strip
• Teaching, free, and already-assigned-relief periods are visually distinct
• Strip is compact and scannable — doesn't overwhelm with 10+ teachers
• Auto-assign preview shows a "why" explanation per proposed assignment
• Auto-assign preview has "View timetable" expand and "Swap" override options
• Mobile-responsive: degrades gracefully on small screens

References

• Current assign modal: src/app/[slug]/dashboard/
• Timetable data: TimetableEntry model
• Auto-assign preview: src/lib/autoAssign.ts
• Interview docs: docs/research/user-interviews/