# TCH-01 through TCH-27: Figma Teacher Workspace Production Specs

---

## TCH-01: TEACHER DASHBOARD

### Frame: `RP/Teacher/TCH-01-Dashboard`

**Canvas sizes:** Desktop (1440), Tablet (768), Mobile (375) × Light + Dark

---

### Desktop Light (1440px)

```
Frame: TCH-01-Dashboard-Desktop-Light
Width: 1440px, Height: auto
BG: color/background

├── RP/Sidebar (role: teacher, state: expanded, active: dashboard)
│   Width: 260px
│
├── RP/Topbar (role: teacher)
│   Height: 64px, Page title: "Teacher Workspace"
│
├── Content Area
│   Left margin: 260px, Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── KPI CARDS ROW
│   │   Layout: Horizontal, gap 16px (4 cards across)
│   │
│   │   ├── KPI Card 1: "Students at Risk"
│   │   │   RP/KPICard (color: danger, format: number)
│   │   │   Value: "7", Trend: "+3 vs last week" ↑ danger
│   │   │   Icon: alert-triangle (20px, danger)
│   │   │
│   │   ├── KPI Card 2: "Pending Submissions"
│   │   │   RP/KPICard (color: warning, format: number)
│   │   │   Value: "12", Trend: "—"
│   │   │   Icon: clock (20px, warning)
│   │   │
│   │   ├── KPI Card 3: "This Week's Sessions"
│   │   │   RP/KPICard (color: primary, format: number)
│   │   │   Value: "4/6", Trend: "2 completed"
│   │   │   Icon: calendar (20px, secondary)
│   │   │
│   │   └── KPI Card 4: "My KPI Score"
│   │       RP/KPICard (color: success, format: number)
│   │       Value: "8.2", Trend: "+0.5 vs last period" ↑ success
│   │       Icon: star (20px, success)
│   │
│   ├── MAIN WIDGETS ROW
│   │   Layout: Horizontal, gap 16px
│   │
│   │   ├── LEFT (width: 66%)
│   │   │   Layout: Vertical, gap 16px
│   │   │
│   │   │   ├── UPCOMING TIMETABLE
│   │   │   │   RP/Card (shadow/sm, padding/md)
│   │   │   │   Height: 320px
│   │   │   │
│   │   │   │   ├── Header (Horizontal, justify: space-between)
│   │   │   │   │   ├── H5: "Upcoming Timetable"
│   │   │   │   │   └── RP/Button (ghost, sm): "View All" → TCH-02
│   │   │   │   │
│   │   │   │   └── Session List (Vertical, gap 8px)
│   │   │   │       Each session (max 4):
│   │   │   │       RP/SessionCard (mode: online, status: scheduled)
│   │   │   │       ├── Subject + Class: "Mathematics - JSS 2"
│   │   │   │       ├── Day + Time: "Today, 10:00 AM"
│   │   │   │       ├── Mode badge: "🟢 Online"
│   │   │   │       └── RP/Button (primary, sm): "Start" → TCH-05
│   │   │   │
│   │   │   ├── PENDING SUBMISSIONS
│   │   │   │   RP/Card (shadow/sm, padding/md)
│   │   │   │   Height: 280px
│   │   │   │
│   │   │   │   ├── Header
│   │   │   │   │   ├── H5: "Needs Grading"
│   │   │   │   │   └── RP/Button (ghost, sm): "View All" → TCH-10
│   │   │   │   │
│   │   │   │   └── Submissions List (Vertical, gap 8px)
│   │   │   │       Each (max 4):
│   │   │   │       ├── Title: "Math Quiz Ch.5" (Body/SM, Medium)
│   │   │   │       ├── Meta: "12 submissions • 3 new" (Body/XS, muted)
│   │   │   │       ├── RP/Badge (warning, sm): "3 new"
│   │   │   │       └── RP/Button (outline, sm): "Grade" → TCH-11
│   │   │
│   │   └── RIGHT (width: 33%)
│   │       Layout: Vertical, gap 16px
│   │
│   │       ├── AT-RISK STUDENTS
│   │       │   RP/Card (shadow/sm, padding/md)
│   │       │   Height: 320px
│   │       │
│   │       │   ├── Header
│   │       │   │   ├── H5: "At-Risk Students"
│   │       │   │   └── RP/Badge (danger, sm): "7"
│   │       │   │
│   │       │   └── Student List (Vertical, gap 0)
│   │       │       Each (max 5):
│   │       │       Height: 48px, Border-bottom: 1px divider
│   │       │       Layout: Horizontal, gap 8px, alignment: center
│   │       │       ├── RP/Avatar (xs, initials)
│   │       │       ├── Name: "Kofi M." (Body/SM, flex: 1)
│   │       │       ├── OPS: "42%" (Body/SM, Bold, danger color)
│   │       │       └── Risk badge: "High" (RP/Badge, danger, xs)
│   │       │
│   │       │       Click row → TCH-08 (Student Detail)
│   │       │
│   │       ├── EARNINGS SUMMARY (Phase 11)
│   │       │   RP/Card (shadow/sm, padding/md)
│   │       │   Height: 200px
│   │       │
│   │       │   ├── H5: "Earnings This Period"
│   │       │   ├── Waterfall mini (ApexCharts): Gross → Fee → Net
│   │       │   └── RP/Button (ghost, sm): "View Full Payroll" → TCH-22
│   │       │
│   │       └── QUICK ACTIONS
│   │           RP/Card (padding/md)
│   │           Layout: Vertical, gap 8px
│   │           ├── RP/Button (outline, full-width, justify: start): "📝 Create Assignment" → TCH-09
│   │           ├── RP/Button (outline, full-width, justify: start): "📝 Create Exam" → TCH-12
│   │           ├── RP/Button (outline, full-width, justify: start): "📋 Log Attendance" → TCH-06
│   │           └── RP/Button (outline, full-width, justify: start): "🎥 Start Session" → TCH-05
│
└── Bottom padding: 48px
```

---

## TCH-02: MY TIMETABLE

### Frame: `RP/Teacher/TCH-02-Timetable`

```
Frame: TCH-02-Timetable-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher, active: timetable)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header
│   │   ├── H1: "My Timetable"
│   │   └── Breadcrumb: "Dashboard > Timetable"
│   │
│   ├── WEEK SELECTOR (same as STU-03)
│   │   ← Previous  |  June 9 – 13, 2026  |  Next →  |  [Today]
│   │
│   ├── TIMETABLE GRID
│   │   RP/Card (padding/md, shadow/sm)
│   │   Grid: 6 cols (Time + Mon-Fri) × 9 rows (8AM-4PM)
│   │
│   │   Session blocks:
│   │   ├── Subject + Class
│   │   ├── Teacher: "You"
│   │   ├── Room: "Room 12" / "💻 Zoom"
│   │   ├── Students enrolled: count
│   │   └── Click → TCH-04 (Session Detail)
│   │
│   │   Today column: Highlighted BG
│   │
│   └── LEGEND
│       Colored dots + subject names
│
└── Bottom padding: 48px
```

---

## TCH-03: SESSION LIST

### Frame: `RP/Teacher/TCH-03-Sessions`

```
Frame: TCH-03-Sessions-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher, active: sessions)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header
│   │   ├── H1: "Sessions"
│   │   ├── Breadcrumb: "Dashboard > Sessions"
│   │   └── RP/Button (primary): "Start Live Session" → TCH-05
│   │
│   ├── FILTER BAR
│   │   Search + Subject filter + Status filter (upcoming/completed)
│   │
│   ├── TABS
│   │   [Upcoming (4)] [In Progress (1)] [Completed (15)]
│   │
│   ├── SESSION CARDS
│   │   Layout: Vertical, gap 12px
│   │   Each: RP/SessionCard
│   │   ├── Subject + Class
│   │   ├── Date + Time
│   │   ├── Mode: Online/Physical/Hybrid
│   │   ├── Status badge
│   │   ├── Attendance: "18/20 present" (if completed)
│   │   └── Actions: [Start] [View] [Edit]
│   │
│   └── Pagination: RP/Pagination
│
└── Bottom padding: 48px
```

---

## TCH-04: SESSION DETAIL

### Frame: `RP/Teacher/TCH-04-SessionDetail`

```
Frame: TCH-04-SessionDetail-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher)
├── RP/Topbar (teacher)
│
├── Content Area
│   Max-width: 800px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Sessions > Mathematics JSS 2"
│   │
│   ├── SESSION CARD
│   │   RP/Card (shadow/md, padding/lg)
│   │   Layout: Vertical, gap 16px
│   │
│   │   ├── Header (H2 + Status badge + Mode badge)
│   │   ├── Info Grid (date, time, students, room)
│   │   ├── Description
│   │   │
│   │   ├── ACTION BUTTONS
│   │   │   Scheduled state:
│   │   │   ├── [Start Session] (primary, lg) → TCH-05
│   │   │   └── [Edit Session] (outline)
│   │   │
│   │   │   In Progress state:
│   │   │   ├── [Enter Classroom] (primary, lg) → TCH-05
│   │   │   ├── [Start Recording] (outline)
│   │   │   └── [End Session] (danger) → confirmation modal
│   │   │
│   │   │   Completed state:
│   │   │   ├── [Log Attendance] (primary) → TCH-06
│   │   │   ├── [View Recording] (outline)
│   │   │   └── [View Attendance] (ghost)
│   │   │
│   │   └── Live indicator (if in progress)
│   │       "🟢 Session live — 18 students connected"
│   │
│   ├── ATTENDANCE SUMMARY (if completed)
│   │   RP/Card (padding/md)
│   │   Stats: Present (16) | Late (1) | Absent (3)
│   │   RP/ProgressBar (showing attendance rate)
│   │
│   ├── STUDENT LIST
│   │   RP/Card (padding/md)
│   │   Table: Name | Status | Joined At | Duration
│   │   Max 20 rows, pagination
│   │
│   └── SESSION MATERIALS
│       RP/Card (padding/md)
│       Attachments list with download links
│
└── Bottom padding: 48px
```

---

## TCH-05: LIVE CLASSROOM (Teacher View)

### Frame: `RP/Teacher/TCH-05-Classroom`

```
Frame: TCH-05-Classroom-Teacher-Desktop-Light
Width: 1440px, Height: 100vh (fullscreen)
BG: #000

├── TOP BAR (overlay, 48px)
│   BG: rgba(0,0,0,0.7)
│   Layout: Horizontal, justify: space-between
│
│   ├── LEFT: "Mathematics - JSS 2 • Dr. Mensah"
│   ├── CENTER: "00:45:12" timer (Mono/Base, White)
│   └── RIGHT: "18 students" + Recording indicator (🔴 if recording)
│
├── VIDEO AREA (fill)
│   Zoom Video SDK grid
│   Teacher controls visible
│
├── CONTROLS BAR (72px)
│   BG: rgba(0,0,0,0.8)
│   Layout: Horizontal, gap 16px, justify: center
│
│   ├── [Mute/Unmute] (circle, 48px)
│   ├── [Start/Stop Video] (circle, 48px)
│   ├── [Share Screen] (circle, 48px)
│   ├── [Start/Stop Recording] (circle, 48px, accent when recording)
│   ├── [Chat] (circle, 48px, badge: unread)
│   │   → Opens chat panel (320px, slide-in from right)
│   ├── [Participants] (circle, 48px)
│   │   → Opens participant list
│   └── [End Session] (danger button)
│       → Confirmation modal: "End Session for all?"
│       → POST /classroom/{session}/end
│
├── SIDEBAR PANELS (toggleable, 280px, right side)
│
│   ├── Participants Panel
│   │   Header: "Participants (18)"
│   │   List: Avatar + Name + Join time + Mic/Video status
│   │   Each: "Mute" action button
│   │
│   └── Chat Panel
│       Messages (chat-style)
│       Input: "Type a message..."
│
└── Teacher-specific controls (not in student view):
    ├── [Mute All Students] (danger, sm)
    ├── [Stop All Video] (danger, sm)
    └── Attendance sidebar (who joined/when)
```

---

## TCH-06: ATTENDANCE LOGGER

### Frame: `RP/Teacher/TCH-06-Attendance`

```
Frame: TCH-06-Attendance-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher)
├── RP/Topbar (teacher)
│
├── Content Area
│   Max-width: 800px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Sessions > Log Attendance"
│   │
│   ├── SESSION INFO
│   │   RP/Card (padding/md)
│   │   "Mathematics - JSS 2 • June 12, 2026 • 10:00 AM"
│   │
│   ├── BULK ACTIONS
│   │   Layout: Horizontal, gap 8px
│   │   ├── RP/Button (outline, sm): "Mark All Present"
│   │   └── RP/Button (outline, sm): "Mark All Absent"
│   │
│   ├── ATTENDANCE TABLE
│   │   RP/Card (padding/md)
│   │   Width: 100%
│   │
│   │   Each student row:
│   │   ├── Height: 52px
│   │   ├── Layout: Horizontal, gap 12px, alignment: center
│   │   │
│   │   ├── RP/Avatar (xs)
│   │   ├── Name: "Amara Asante" (Body/SM, flex: 1)
│   │   ├── Auto-populated status (for online sessions):
│   │   │   Joined on time → "Present" (pre-selected)
│   │   │   Joined late → "Late" (pre-selected)
│   │   │   Didn't join → "Absent" (default)
│   │   │
│   │   ├── Status dropdown (RP/Select, sm):
│   │   │   [Present] [Late] [Absent] [Excused]
│   │   │   Colors: Present=green, Late=amber, Absent=red, Excused=blue
│   │   │
│   │   └── Notes (RP/Input, text, sm, optional)
│   │       "Arrived 5 min late"
│   │
│   │   Total: 20 students
│   │
│   ├── SUMMARY
│   │   Present: 16 | Late: 2 | Absent: 2
│   │   Attendance rate: 90%
│   │
│   └── ACTIONS
│       ├── RP/Button (primary, lg): "Save Attendance"
│       │   → Toast: "Attendance saved ✓"
│       │   → Redirect to TCH-04
│       └── RP/Button (ghost): "Cancel"
│
└── Bottom padding: 48px
```

---

## TCH-07: MY STUDENTS

### Frame: `RP/Teacher/TCH-07-Students`

```
Frame: TCH-07-Students-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher, active: students)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header
│   │   ├── H1: "My Students"
│   │   └── RP/Button (outline, sm): "📥 Export Excel"
│   │
│   ├── FILTER BAR
│   │   Search + Class filter + Performance filter + Attendance risk
│   │
│   ├── KPI ROW
│   │   "Total: 85" | "At Risk: 7" | "Avg OPS: 72%" | "Avg Attendance: 88%"
│   │
│   ├── STUDENT TABLE
│   │   RP/DataTable (state: data)
│   │
│   │   Columns:
│   │   ├── Student (Avatar + Name + Student ID)
│   │   ├── Class
│   │   ├── OPS Score (colored: green/amber/red)
│   │   ├── Attendance %
│   │   ├── Risk Level (badge: low/medium/high)
│   │   └── Actions: [View Detail]
│   │
│   │   Row click → TCH-08
│   │   Sortable columns
│   │   Pagination: 10 per page
│
└── Bottom padding: 48px
```

---

## TCH-08: STUDENT DETAIL (Teacher View)

### Frame: `RP/Teacher/TCH-08-StudentDetail`

```
Frame: TCH-08-StudentDetail-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Students > Amara Asante"
│   │
│   ├── STUDENT HEADER
│   │   RP/Card (shadow/sm, padding/lg)
│   │   Layout: Horizontal, gap 24px, alignment: center
│   │
│   │   ├── RP/Avatar (lg, has-image)
│   │   ├── Info
│   │   │   ├── Name: "Amara Asante" (Display/H4)
│   │   │   ├── ID: "RP-2026-00001" (Mono/Base)
│   │   │   ├── Class: "JSS 2" + Status badge
│   │   │   └── Guardian: "Kofi Asante (Primary)"
│   │   │
│   │   └── Quick stats (right-aligned)
│   │       ├── RP/OPSRing (sm, 78%)
│   │       ├── Attendance: 92%
│   │       └── Risk: Low (green badge)
│   │
│   ├── TABS
│   │   [Overview] [OPS] [Attendance] [Submissions] [Goals]
│   │
│   ├── OVERVIEW TAB
│   │   Layout: 2 columns
│   │   ├── Left: Profile info, enrollment details
│   │   └── Right: Recent activity timeline (RP/Timeline)
│   │
│   ├── OPS TAB
│   │   ├── RP/OPSRing (lg)
│   │   ├── Component breakdown table (same as STU-02)
│   │   └── Trend chart (CH-01)
│   │
│   ├── ATTENDANCE TAB
│   │   ├── Heatmap calendar (same as STU-12)
│   │   ├── By-subject breakdown
│   │   └── Trend chart
│   │
│   ├── SUBMISSIONS TAB
│   │   Table: Assignment/Exam | Score | Status | Date
│   │   Click → TCH-11 (Grade Submission)
│   │
│   ├── GOALS TAB
│   │   Active goals with progress (same as STU-13)
│   │   [Create New Goal] → modal
│   │
│   └── ACTIONS
│       ├── [Create Goal] (primary)
│       ├── [Create Intervention] (outline)
│       └── [Send Message] (ghost)
│
└── Bottom padding: 48px
```

---

## TCH-09: CREATE ASSIGNMENT

### Frame: `RP/Teacher/TCH-09-CreateAssignment`

```
Frame: TCH-09-CreateAssignment-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher)
├── RP/Topbar (teacher)
│
├── Content Area
│   Max-width: 800px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header
│   │   ├── H1: "Create Assignment"
│   │   └── Breadcrumb: "Dashboard > Assignments > Create"
│   │
│   ├── BASIC INFO CARD
│   │   RP/Card (padding/md)
│   │   Layout: Vertical, gap 16px
│   │
│   │   ├── RP/Input (text): "Title *" (required)
│   │   ├── RP/Input (textarea, rows:3): "Description"
│   │   ├── RP/Input (textarea, rows:2): "Instructions (shown to students)"
│   │   │
│   │   ├── Two-column row
│   │   │   ├── RP/Select: "Subject *" (required)
│   │   │   └── RP/Select: "Class *" (required)
│   │   │
│   │   ├── Two-column row
│   │   │   ├── RP/Input (datetime): "Due Date & Time *"
│   │   │   └── RP/Input (number): "Max Score *"
│   │   │
│   │   └── RP/Select: "Grading Type"
│   │       Options: Percentage / Letter Grade / Numeric / Custom Scale
│   │
│   ├── GRADING RULES CARD
│   │   RP/Card (padding/md)
│   │   Layout: Vertical, gap 16px
│   │
│   │   ├── H5: "Grading & Feedback"
│   │   ├── RP/Toggle: "Allow Late Submissions"
│   │   │   If on: RP/Select: "Late penalty: None / 10% per day / Deduct X points"
│   │   │
│   │   ├── RP/Select: "Show Correct Answers After"
│   │   │   Options: Immediately / After Due Date / After Grading / Never
│   │   │
│   │   ├── RP/Select: "Feedback Visible To"
│   │   │   Options: Student Only / Parent Only / Both
│   │   │
│   │   └── RP/Select: "Show Feedback After"
│   │       Options: Immediately / After Due / After Graded / Never
│   │
│   ├── QUESTIONS CARD
│   │   RP/Card (padding/md)
│   │   Layout: Vertical, gap 16px
│   │
│   │   ├── H5: "Questions"
│   │   ├── "Add questions to auto-grade this assignment."
│   │   │
│   │   ├── QUESTION LIST (reorderable)
│   │   │   Each question:
│   │   │   ├── Drag handle (⠿)
│   │   │   ├── "Q1" (number)
│   │   │   ├── Question type badge (MC/Multi/T/F/etc.)
│   │   │   ├── Preview text (truncated to 60 chars)
│   │   │   ├── Points: "10 pts"
│   │   │   └── Actions: [Edit] [Delete]
│   │   │
│   │   ├── RP/Button (outline): "+ Add Question" → TCH-16 (inline or modal)
│   │   │
│   │   └── Total: "Total: 100 points (auto-calculated)"
│   │
│   ├── ATTACHMENTS CARD (optional)
│   │   RP/FileUpload (multiple files)
│   │   "Attach reference materials, worksheets, etc."
│   │
│   └── ACTIONS BAR
│       Layout: Horizontal, gap 12px, justify: end
│       ├── RP/Button (ghost): "Cancel"
│       ├── RP/Button (outline): "Save as Draft"
│       └── RP/Button (primary, lg): "Publish Assignment"
│           → Confirmation modal
│           → Students notified
│
└── Bottom padding: 48px
```

---

## TCH-10: ASSIGNMENT DETAIL (Grading View)

### Frame: `RP/Teacher/TCH-10-AssignmentDetail`

```
Frame: TCH-10-AssignmentDetail-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb
│   │
│   ├── ASSIGNMENT HEADER
│   │   Title + Status + Due date + Subject
│   │   Meta: "12 submissions • 3 ungraded • 15 enrolled"
│   │
│   ├── TABS
│   │   [Submissions (12)] [Grading Queue (3)] [Analytics]
│   │
│   ├── SUBMISSIONS TAB
│   │   RP/DataTable
│   │   Columns: Student | Submitted | Score | Status | Actions
│   │   Status: "Graded" (green) / "Pending" (amber) / "Late" (red)
│   │   Actions: [Grade] → TCH-11
│   │
│   ├── GRADING QUEUE TAB
│   │   List of ungraded submissions
│   │   Each: Student name + submission time + [Start Grading]
│   │
│   └── ANALYTICS TAB
│       ├── Average score KPI
│       ├── Score distribution histogram (CH-08 variant)
│       ├── Submission timeline
│       └── Class comparison
│
└── Bottom padding: 48px
```

---

## TCH-11: GRADE SUBMISSION

### Frame: `RP/Teacher/TCH-11-Grade`

```
Frame: TCH-11-Grade-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher)
├── RP/Topbar (teacher)
│
├── Content Area
│   Layout: Horizontal
│   Height: calc(100vh - 64px)
│
│   ├── LEFT: SUBMISSION VIEWER (flex: 1)
│   │   Padding: 24px
│   │   Layout: Vertical, gap 16px
│   │
│   │   ├── Student info: "Amara Asante • Submitted Jun 14, 3:45 PM"
│   │   │
│   │   ├── ANSWER DISPLAY (per question)
│   │   │   Each question:
│   │   │   ├── "Q1: [question text]" (Body/Base)
│   │   │   ├── "Student answer: [answer]" (Body/SM)
│   │   │   ├── "Correct answer: [answer]" (if auto-gradable, green)
│   │   │   ├── Auto-grade result: ✓ Correct / ✗ Wrong
│   │   │   └── Points: "10/10" or pending manual
│   │   │
│   │   ├── FILE SUBMISSIONS
│   │   │   File preview (PDF inline, images inline, others download)
│   │   │
│   │   └── Previous/Next navigation
│   │
│   └── RIGHT: GRADING PANEL (360px, fixed)
│       BG: color/surface
│       Border-left: 1px color/border
│       Padding: 24px
│       Layout: Vertical, gap 16px
│
│       ├── H5: "Grade Submission"
│       │
│       ├── Score input
│       │   RP/Input (number): "Score *"
│       │   Max: 100
│       │   Helper: "out of 100"
│       │
│       ├── Percentage display
│       │   "78%" (auto-calculated)
│       │
│       ├── Grade letter (if applicable)
│       │   "B+" (RP/Badge, success)
│       │
│       ├── Is Passing indicator
│       │   "✓ Passing" (green) or "✗ Below passing" (red)
│       │
│       ├── Feedback textarea
│       │   RP/Input (textarea, rows: 4)
│       │   "Add feedback for the student..."
│       │
│       ├── rubric scoring (if rubric attached)
│       │   Criteria list with score sliders
│       │
│       └── ACTIONS
│           ├── RP/Button (ghost): "Skip"
│           ├── RP/Button (outline): "Save Draft"
│           └── RP/Button (primary, lg): "Submit Grade"
│               → Updates score
│               → Student + Parent notified
│               → Move to next ungraded
│
└── Mobile: Full-screen viewer → swipe to grading panel
```

---

## TCH-12: CREATE EXAM

### Frame: `RP/Teacher/TCH-12-CreateExam`

```
Frame: TCH-12-CreateExam-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher)
├── RP/Topbar (teacher)
│
├── Content Area
│   Max-width: 800px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header: "Create Exam"
│   │
│   ├── BASIC INFO CARD
│   │   Same structure as TCH-09 plus:
│   │   ├── RP/Input (number): "Duration (minutes) *"
│   │   └── RP/Input (datetime): "Scheduled At *"
│   │       (Exam becomes available at this time)
│   │
│   ├── ATTEMPT RULES CARD
│   │   RP/Card (padding/md)
│   │   Layout: Vertical, gap 16px
│   │
│   │   ├── H5: "Attempt Rules"
│   │   │
│   │   ├── RP/Input (radio group): "Attempt Limit Type"
│   │   │   ├── ○ Single Attempt (default)
│   │   │   │   Helper: "Student gets exactly one try"
│   │   │   │
│   │   │   ├── ○ Unlimited Attempts
│   │   │   │   Helper: "Student can retake infinitely"
│   │   │   │
│   │   │   ├── ○ Fixed Number
│   │   │   │   Shows: RP/Input (number): "Max Attempts" (min: 1, default: 3)
│   │   │   │
│   │   │   └── ○ Teacher Override
│   │   │       Helper: "Teacher can reset per student"
│   │   │
│   │   └── RP/Toggle: "Allow Teacher Override"
│   │       "Teacher can manually reset attempts for individual students"
│   │
│   ├── GRADING RULES CARD
│   │   Same as TCH-09 Grading Rules card
│   │   Plus:
│   │   ├── RP/Select: "Grading Type"
│   │   │   Options: Percentage / Letter Grade / Numeric / Custom Scale
│   │   │
│   │   └── Custom Scale Builder (if custom selected)
│   │       Table: Label | Min % | Max % | Color picker
│   │       [+ Add Tier]
│   │
│   ├── FEEDBACK CONFIGURATION CARD
│   │   ├── RP/Toggle: "Show Correct Answers After Grading"
│   │   ├── RP/Select: "Show Feedback After"
│   │   │   Immediately / After Due / After Graded / Never
│   │   └── RP/Select: "Feedback Visible To"
│   │       Student / Parent / Both
│   │
│   ├── QUESTIONS CARD
│   │   Same structure as TCH-09 Questions card
│   │   Plus: Total points auto-calculated
│   │
│   └── ACTIONS
│       [Cancel] [Save Draft] [Publish Exam]
│
└── Bottom padding: 48px
```

---

## TCH-13: EXAM DETAIL

### Frame: `RP/Teacher/TCH-13-ExamDetail`

```
Frame: TCH-13-ExamDetail-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── EXAM HEADER
│   │   Title + Status + Schedule + Duration
│   │   "20 students enrolled • 15 attempted • 12 graded"
│   │
│   ├── TABS
│   │   [Results (12)] [Attempts (15)] [Questions] [Analytics]
│   │
│   ├── RESULTS TAB
│   │   RP/DataTable
│   │   Columns: Student | Score | Grade | Status | Actions
│   │   Actions: [View Result] [Override Score]
│   │
│   ├── ATTEMPTS TAB
│   │   All attempts (multiple per student if retakes allowed)
│   │   Columns: Student | Attempt # | Score | Started | Submitted | Status
│   │
│   ├── QUESTIONS TAB
│   │   Question list with stats
│   │   "Q1: 85% correct • Q2: 60% correct • ..."
│   │
│   └── ANALYTICS TAB
│       ├── Average score, pass rate, score distribution
│       ├── Per-question analysis
│       └── Comparison with class average
│
└── Bottom padding: 48px
```

---

## TCH-14: GRADE EXAM RESULT

### Frame: `RP/Teacher/TCH-14-GradeExam`

```
Same layout as TCH-11 (Grade Submission)
With additions:
├── Exam-level grading panel
│   ├── Overall score override option
│   ├── Grade letter override
│   ├── Is passing override
│   └── Bulk actions: [Finalize All] [Release All Grades]
│
└── Release workflow
    "Release Grades" button → confirmation
    → Students + Parents notified
    → Feedback becomes visible per configuration
```

---

## TCH-15: QUESTION REVIEW QUEUE

### Frame: `RP/Teacher/TCH-15-ReviewQueue`

```
Frame: TCH-15-ReviewQueue-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header
│   │   ├── H1: "Review Queue"
│   │   └── RP/Badge (warning): "8 pending"
│   │
│   ├── FILTER
│   │   [Pending Review] [Reviewed] [Overridden]
│   │
│   ├── REVIEW CARDS
│   │   Each flagged answer:
│   │   RP/Card (padding/md)
│   │   Layout: Horizontal, gap 16px
│   │
│   │   ├── LEFT: Question + Answer
│   │   │   ├── "Q3: [question text]" (Body/Base)
│   │   │   ├── "Student answer: [essay text or file]"
│   │   │   ├── "Marking criteria: [if essay]" (Body/XS, muted)
│   │   │   └── "Points possible: 20"
│   │   │
│   │   └── RIGHT: Grading panel
│   │       ├── RP/Input (number): Score
│   │       ├── RP/Input (textarea): Feedback
│   │       ├── RP/Button (primary, sm): "Submit Grade"
│   │       └── RP/Button (ghost, sm): "Skip"
│   │
│   │   Question types requiring manual review:
│   │   ├── Short Answer
│   │   ├── Essay
│   │   └── File Upload
│
└── Bottom padding: 48px
```

---

## TCH-16: QUESTION BUILDER (Flagship Screen)

See `assessment-builder.md` for complete specifications.

---

## TCH-17: RESOURCE LIBRARY

### Frame: `RP/Teacher/TCH-17-Resources`

```
Frame: TCH-17-Resources-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher, active: resources)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header
│   │   ├── H1: "Resource Library"
│   │   └── RP/Button (primary): "📤 Upload Resource"
│   │
│   ├── FILTER BAR
│   │   Search + Subject filter + Type filter
│   │
│   ├── RESOURCE GRID
│   │   3 columns (desktop), gap 16px
│   │   Each card:
│   │   ├── File preview/icon (120px)
│   │   ├── Title + Subject + Date
│   │   ├── File size + type
│   │   └── Actions: [Edit] [Delete] [Download]
│   │
│   │   Empty state: "No resources uploaded yet"
│   │   CTA: [Upload Resource]
│
└── Bottom padding: 48px
```

---

## TCH-18: STUDENT GOALS

### Frame: `RP/Teacher/TCH-18-Goals`

```
Frame: TCH-18-Goals-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher, active: goals)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header
│   │   ├── H1: "Student Goals"
│   │   └── RP/Button (primary): "+ Create Goal"
│   │
│   ├── FILTER
│   │   Student selector + Status filter + Subject filter
│   │
│   ├── GOALS LIST
│   │   Each goal:
│   │   RP/Card (padding/md)
│   │   ├── Student name + Avatar
│   │   ├── Goal title
│   │   ├── RP/ProgressBar (current/target)
│   │   ├── Target date
│   │   ├── Status badge
│   │   └── Actions: [Edit Progress] [Mark Complete]
│   │
│   └── CREATE GOAL MODAL
│       ├── Student selector (RP/Select)
│       ├── Goal title (RP/Input)
│       ├── Description (RP/Input, textarea)
│       ├── Target metric (RP/Select: OPS Score / Attendance / etc.)
│       ├── Target value (RP/Input, number)
│       ├── Target date (RP/Input, date)
│       └── [Create Goal]
│
└── Bottom padding: 48px
```

---

## TCH-19: INTERVENTION PLANS

### Frame: `RP/Teacher/TCH-19-Interventions`

See `teacher-workflows.md` for complete specifications.

---

## TCH-20: PARENT ACTION ITEMS

### Frame: `RP/Teacher/TCH-20-ActionItems`

```
Frame: TCH-20-ActionItems-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher, active: action-items)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header
│   │   ├── H1: "Parent Action Items"
│   │   └── RP/Button (primary): "+ Create Action Item"
│   │
│   ├── FILTER
│   │   Status (Pending/In Progress/Completed/Overdue)
│   │
│   ├── ACTION ITEMS LIST
│   │   Each:
│   │   RP/Card (padding/md)
│   │   ├── Title + Description
│   │   ├── Assigned to: Parent name + Student name
│   │   ├── Due date + countdown badge
│   │   ├── Status badge
│   │   ├── Teacher who created
│   │   └── Actions: [View Log] [Edit] [Remind]
│   │
│   └── CREATE ACTION ITEM MODAL
│       ├── Title (RP/Input)
│       ├── Description (RP/Input, textarea)
│       ├── Assign to parent (RP/Select: linked parents)
│       ├── Related student (RP/Select)
│       ├── Due date (RP/Input, date)
│       ├── Priority (RP/Select: Normal / High / Urgent)
│       └── [Create]
│
└── Bottom padding: 48px
```

---

## TCH-21: MY AVAILABILITY

### Frame: `RP/Teacher/TCH-21-Availability`

```
Frame: TCH-21-Availability-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher, active: availability)
├── RP/Topbar (teacher)
│
├── Content Area
│   Max-width: 800px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header: "My Availability"
│   │
│   ├── AVAILABILITY GRID
│   │   RP/Card (padding/md)
│   │   Grid: 7 columns (Mon-Sun) × rows (8AM-6PM, 1-hour slots)
│   │
│   │   Each cell: Click to toggle availability
│   │   ├── Available: BG color/success at 10%, border color/success
│   │   ├── Unavailable: BG color/danger at 10%, border color/danger
│   │   └── Default: BG color/background
│   │
│   │   Drag to select multiple slots
│   │   "Click + drag to set available hours"
│   │
│   ├── LEGEND
│   │   ● Available (green)  ● Unavailable (red)  ○ Default (grey)
│   │
│   └── ACTIONS
│       ├── [Reset to Default]
│       └── [Save Availability]
│           → Toast: "Availability saved ✓"
│
└── Bottom padding: 48px
```

---

## TCH-22: MY PAYROLL (Phase 11 Preview)

### Frame: `RP/Teacher/TCH-22-Payroll`

```
Frame: TCH-22-Payroll-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher, active: payroll)
├── RP/Topbar (teacher)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header: "My Payroll"
│   │
│   ├── CURRENT PERIOD SUMMARY
│   │   RP/Card (padding/lg)
│   │   Layout: Horizontal, gap 24px
│   │
│   │   ├── Waterfall Chart (CH-06)
│   │   │   Gross: GHS 2,400
│   │   │   - Admin Fee (15%): GHS 360
│   │   │   + Adjustments: GHS 100
│   │   │   = Net: GHS 2,140
│   │   │
│   │   └── Summary stats
│   │       Sessions conducted: 24
│   │       Private sessions: 4
│   │       Period: June 2026
│   │
│   ├── PAYROLL HISTORY
│   │   RP/DataTable
│   │   Columns: Period | Gross | Admin Fee | Adjustments | Net | Status
│   │   Actions: [Download Payslip]
│   │   Status: Draft / Approved / Paid
│   │
└── Bottom padding: 48px
```

---

## TCH-23: MY KPI SCORE

### Frame: `RP/Teacher/TCH-23-KPI`

```
Frame: TCH-23-KPI-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher, active: kpi)
├── RP/Topbar (teacher)
│
├── Content Area
│   Max-width: 800px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header: "My KPI Score"
│   │
│   ├── KPI HERO
│   │   RP/Card (padding/lg)
│   │   Layout: Vertical, gap 16px, alignment: center
│   │
│   │   ├── RP/OPSRing (xl, 82%)  — using same ring for teacher KPI
│   │   ├── "8.2 / 10" (Display/H2)
│   │   └── "Excellent Performance" (RP/Badge, success)
│   │
│   ├── KPI BREAKDOWN
│   │   RP/Card (padding/md)
│   │   Table: Metric | Score | Weight | Contribution
│   │   ├── Sessions Conducted: 90% (30%) = 27
│   │   ├── Assignments Graded: 85% (25%) = 21.25
│   │   ├── Attendance Logged: 95% (20%) = 19
│   │   ├── Student OPS Growth: 75% (15%) = 11.25
│   │   └── Resources Uploaded: 70% (10%) = 7
│   │
│   ├── TREND CHART
│   │   CH-01 variant: Teacher KPI trend over periods
│   │
│   └── COMPARISON
│       "School average: 7.5 | Your rank: #3 of 12 teachers"
│
└── Bottom padding: 48px
```

---

## TCH-24: MESSAGES

Same layout as STU-16 (Messages) with teacher-specific participants:
- Students (per class)
- Parents (of students)
- Admin
- Other teachers

### Desktop Light

```
├── Conversation list (320px)
│   Filter: [All] [Students] [Parents] [Staff]
│
├── Message area (fill)
│   Same chat UI as STU-16
│   Plus: [Send Announcement] button
│
└── Mobile: Full-screen list → tap to open chat
```

---

## TCH-25: INVITE TEACHER (Admin Function)

### Frame: `RP/Teacher/TCH-25-InviteTeacher`

Note: This screen is accessed via Admin portal (ADM-07), not teacher portal.
The teacher portal does NOT have TCH-25 as a standalone screen.
The invitation functionality lives in ADM-07 (Teachers List → Invite button).

See Sprint 5 (Admin) for TCH-25 equivalent.

---

## TCH-26: MY PROFILE

### Frame: `RP/Teacher/TCH-26-Profile`

```
Frame: TCH-26-Profile-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (teacher, active: profile)
├── RP/Topbar (teacher)
│
├── Content Area
│   Max-width: 720px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header: "My Profile"
│   │
│   ├── PROFILE HEADER
│   │   RP/Card (padding/lg)
│   │   Layout: Horizontal, gap 24px, alignment: center
│   │   ├── RP/Avatar (lg, has-image) + [Change Photo]
│   │   ├── Name, Email, Status badge
│   │   └── KPI score badge
│   │
│   ├── PERSONAL INFORMATION
│   │   RP/Card (padding/md)
│   │   Fields: Name, DOB, Phone, Email
│   │   [Edit Profile] → modal
│   │
│   ├── PROFESSIONAL DETAILS
│   │   RP/Card (padding/md)
│   │   Fields: Qualifications, Bio
│   │   CV (Spatie Media Library):
│   │   ├── Current CV preview/download
│   │   └── [Upload New CV]
│   │
│   ├── TEACHING INFO
│   │   RP/Card (padding/md)
│   │   ├── Subjects assigned
│   │   ├── Classes assigned
│   │   ├── Joined date
│   │   └── Status
│   │
│   └── SETTINGS LINKS
│       ├── Notification Preferences → TCH-27
│       ├── Appearance Settings
│       └── Logout
│
└── Bottom padding: 48px
```

---

## TCH-27: NOTIFICATION PREFERENCES

Same layout as STU-18 with teacher-specific categories:

```
Categories:
├── Academic Updates (assignments, exams, grades)
├── Student Alerts (at-risk, attendance warnings)
├── Session Reminders (upcoming classes)
├── Payroll / Earnings
├── Parent Communications
├── System Announcements
└── Achievements / Gamification

Same toggle grid:
"In-App" | "Email" | "SMS"
In-App: Always ON
Email: Toggle per category
SMS: Toggle per category (except achievements)

Plus digest settings (same as STU-18)
```

---

## PROTOTYPE INTERACTIONS — Teacher Portal

| Step | Screen | Trigger | Action |
|------|--------|---------|--------|
| 1 | TCH-01 | Click "Start" on session | → TCH-05 |
| 2 | TCH-01 | Click "Grade" on submission | → TCH-11 |
| 3 | TCH-01 | Click student in at-risk list | → TCH-08 |
| 4 | TCH-04 | Click "Start Session" | → TCH-05 |
| 5 | TCH-04 | Click "Log Attendance" | → TCH-06 |
| 6 | TCH-05 | Click "End Session" | → TCH-04 (completed state) |
| 7 | TCH-06 | Click "Save Attendance" | → TCH-04 |
| 8 | TCH-07 | Click student row | → TCH-08 |
| 9 | TCH-09 | Click "Publish" | → TCH-10 |
| 10 | TCH-10 | Click "Grade" | → TCH-11 |
| 11 | TCH-11 | Click "Submit Grade" | → Next ungraded |
| 12 | TCH-12 | Click "Publish Exam" | → TCH-13 |
| 13 | TCH-08 | Click "Create Goal" | → Modal |
| 14 | TCH-08 | Click "Create Intervention" | → TCH-19 |