# ADM-02 through ADM-19: Admin Academics — Figma Production Specs --- ## 1. ACADEMIC MANAGEMENT (ADM-02 to ADM-06) ### ADM-02: Academic Years — Create/Edit Modal ``` RP/Modal (lg) ├── Header: "Create Academic Year" ├── Content: │ ├── Year Name: RP/Input "2026–2027" │ ├── Start Date: RP/Input (date) │ ├── End Date: RP/Input (date) │ ├── Terms (repeatable): │ │ Each term: │ │ ├── Name: RP/Input "Term 1" │ │ ├── Start Date: RP/Input (date) │ │ └── End Date: RP/Input (date) │ ├── [+ Add Term] │ └── Status: [Upcoming] (auto-set) ├── Footer: │ [Cancel] [Create Year] ``` ### ADM-03: Terms — Add/Edit Modal ``` RP/Modal (md) ├── Header: "Add Term" ├── Content: │ ├── Term Name: RP/Input "Term 3" │ ├── Start Date: RP/Input (date) │ ├── End Date: RP/Input (date) │ └── Status: [Draft] / [Active] / [Completed] ├── Footer: │ [Cancel] [Save Term] ``` ### ADM-04: Subjects — Create/Edit Modal ``` RP/Modal (md) ├── Header: "Add Subject" ├── Content: │ ├── Name: RP/Input "Mathematics" │ ├── Code: RP/Input "MATH" │ ├── Description: RP/Input (textarea) │ ├── Color: RP/ColorPicker (#1E5FA8) │ └── Status: [Active] ├── Footer: │ [Cancel] [Save Subject] ``` ### ADM-05: Classes — Create/Edit Modal ``` RP/Modal (lg) ├── Header: "Create Class" ├── Content: │ ├── Class Name: RP/Input "JSS 2" │ ├── Level: RP/Select [Junior Secondary] [Senior Secondary] │ ├── Class Teacher: RP/Select (teachers list) │ ├── Max Students: RP/Input (number) [40] │ └── Academic Year: RP/Select ├── Footer: │ [Cancel] [Create Class] ``` ### ADM-06: Enrollment — Batch Operations ``` BULK ENROLLMENT: RP/Modal (xl) ├── Header: "Batch Enroll Students" ├── Content: │ ├── Class: RP/Select │ ├── Academic Year: RP/Select │ ├── Students: Multi-select (searchable) │ │ ☑ Amara Asante — RP-2026-00001 │ │ ☑ Kofi Mensah — RP-2026-00002 │ │ ☐ Esi Boateng — RP-2026-00003 │ └── Summary: "3 students selected" ├── Footer: │ [Cancel] [Enroll 3 Students] WITHDRAWAL: RP/Modal (md) ├── Header: "Withdraw Student" ├── Content: │ Student: "Amara Asante" (read-only) │ Reason: RP/Select [Personal] [Transfer] [Other] │ Notes: RP/Input (textarea) │ ⚠ "This action can be undone by re-enrolling." ├── Footer: │ [Cancel] [Withdraw Student] ``` --- ## 2. TEACHER MANAGEMENT (ADM-07 to ADM-08) ### ADM-07: Teacher Invitation Flow ``` Step 1: Admin clicks "Invite Teacher" ↓ Step 2: Modal — Enter email ↓ Step 3: POST /admin/teachers/invite → TeacherInvitationService creates record → Hashed token generated (72-hour expiry) → Invitation email sent ↓ Step 4: Teacher receives email → /invite/{token} ↓ Step 5: Teacher completes registration ↓ Step 6: Account created, status: pending ↓ Step 7: Admin approves → status: active ``` ### ADM-07: Invite Modal States ``` State 1: Ready ┌──────────────────────────────────────────┐ │ Invite Teacher │ │ │ │ Email Address │ │ ┌────────────────────────────────────┐ │ │ │ teacher@example.com │ │ │ └────────────────────────────────────┘ │ │ │ │ An invitation email with a unique │ │ registration link will be sent. │ │ The link expires in 72 hours. │ │ │ │ [Cancel] [Send Invitation] │ └──────────────────────────────────────────┘ State 2: Sending ┌──────────────────────────────────────────┐ │ ⏳ Sending invitation... │ └──────────────────────────────────────────┘ State 3: Success ┌──────────────────────────────────────────┐ │ ✅ Invitation Sent! │ │ │ │ An invitation has been sent to │ │ teacher@example.com │ │ │ │ The link expires in 72 hours. │ │ You can resend if needed. │ │ │ │ [Done] [Send Another] │ └──────────────────────────────────────────┘ ``` ### ADM-08: Teacher Payroll Tab ``` ┌──────────────────────────────────────────────────────────┐ │ Payroll History — Dr. Mensah │ ├──────────────────────────────────────────────────────────┤ │ │ │ Period Gross Admin Fee Net Status │ │ ───────────────────────────────────────────────────── │ │ June 2026 ₵ 2,400 ₵ 360 ₵ 2,040 Paid │ │ May 2026 ₵ 2,200 ₵ 330 ₵ 1,870 Paid │ │ Apr 2026 ₵ 2,600 ₵ 390 ₵ 2,210 Paid │ │ │ │ Total Earned: ₵ 7,200 | Total Fees: ₵ 1,080 │ │ Net Received: ₵ 6,120 │ │ │ │ [Download Payslips] [Export] │ └──────────────────────────────────────────────────────────┘ ``` ### ADM-08: Teacher Compensation Tab ``` ┌──────────────────────────────────────────────────────────┐ │ Compensation Settings — Dr. Mensah │ ├──────────────────────────────────────────────────────────┤ │ │ │ Admin Fee Percentage │ │ ┌──────────────────────────────────────────┐ │ │ │ 15 % │ │ │ └──────────────────────────────────────────┘ │ │ Current school default: 15% │ │ │ │ Per-Session Rate │ │ ┌──────────────────────────────────────────┐ │ │ │ ₵ 200.00 │ │ │ └──────────────────────────────────────────┘ │ │ │ │ Effective Date │ │ ┌──────────────────────────────────────────┐ │ │ │ June 1, 2026 │ │ │ └──────────────────────────────────────────┘ │ │ │ │ Reason (required for audit) │ │ ┌──────────────────────────────────────────┐ │ │ │ Standard rate for senior teachers │ │ │ └──────────────────────────────────────────┘ │ │ │ │ [Save Changes] │ │ ⚠ Changes are logged in the payroll audit trail. │ │ Historical payrolls always show the rate applied. │ │ │ ├──────────────────────────────────────────────────────────┤ │ Compensation History │ │ Date Field Old New Changed By│ │ ───────────────────────────────────────────────────── │ │ Jun 1 admin_fee 12% 15% Admin │ │ Jan 1 session_rate 180 200 Admin │ └──────────────────────────────────────────────────────────┘ ``` --- ## 3. STUDENT MANAGEMENT (ADM-09 to ADM-10) ### ADM-09: Student Export ``` Export Options: ├── Format: [Excel (.xlsx)] / [CSV] ├── Columns: [All] / [Custom] │ ☑ Name ☑ Student ID ☑ Class ☑ OPS ☑ Attendance │ ☑ Risk Level ☑ Parent ☑ Status ├── Filter: Current filters applied └── [Export] → Download file ``` ### ADM-10: Admin Student Detail — Additional Tabs ``` ENROLLMENT HISTORY TAB: ┌──────────────────────────────────────────────────────────┐ │ Enrollment History │ │ Term Class Enrolled Withdrawn Status │ │ ───────────────────────────────────────────────────── │ │ Term 1 2025 JSS 1 Sep 1 — Active │ │ Term 2 2026 JSS 1 Jan 6 — Active │ │ Term 3 2026 JSS 2 May 5 — Active │ └──────────────────────────────────────────────────────────┘ PARENT/GUARDIAN TAB: ┌──────────────────────────────────────────────────────────┐ │ Parent/Guardian Information │ │ │ │ ● Kofi Asante (Primary) — +233 24 123 4567 │ │ [View Profile →] [Send Message] │ │ │ │ ○ Ama Asante — +233 20 987 6543 │ │ [View Profile →] [Send Message] │ │ │ │ [+ Link New Parent] [Set Primary] │ └──────────────────────────────────────────────────────────┘ AUDIT TRAIL TAB: ┌──────────────────────────────────────────────────────────┐ │ Activity Log — Amara Asante │ │ │ │ ● Jun 12 — OPS recalculated: 75% → 78% │ │ ● Jun 10 — Attendance logged: Present │ │ ● Jun 8 — Exam submitted: Math Mid-Term │ │ ● Jun 5 — Assignment submitted: English Essay │ │ ● Jun 1 — Class transfer: JSS 1 → JSS 2 │ └──────────────────────────────────────────────────────────┘ ``` --- ## 4. PARENT MANAGEMENT (ADM-11 to ADM-12) ### ADM-11: Link Child Modal ``` RP/Modal (md) ├── Header: "Link Child to Parent" ├── Content: │ ├── Parent: [Kofi Asante] (read-only, from context) │ ├── Student: RP/Select (searchable by name/ID) │ ├── Relationship: RP/Select [Father] [Mother] [Guardian] [Other] │ └── Is Primary Guardian: RP/Toggle ├── Footer: │ [Cancel] [Link Child] ``` ### ADM-12: Policy Acceptance Detail ``` ┌──────────────────────────────────────────────────────────┐ │ Policy Acceptance Details │ ├──────────────────────────────────────────────────────────┤ │ │ │ Policy: Terms of Service │ │ Version: 2.1 │ │ Accepted: June 10, 2026 at 2:15 PM │ │ IP Address: 192.168.1.1 │ │ User Agent: Chrome 125.0 on Windows 10 │ │ Cryptographic Hash: sha256$a1b2c3d4... │ │ │ │ ⚠ This record is immutable and legally binding. │ └──────────────────────────────────────────────────────────┘ ``` --- ## 5. TIMETABLE & SESSIONS (ADM-13 to ADM-14) ### ADM-13: Session Conflict Detection ``` When creating a session: ├── System checks for: │ ├── Teacher already assigned at that time │ ├── Room/class already occupied │ └── Student schedule conflicts │ ├── If conflict found: │ ⚠ "Dr. Mensah is already assigned to JSS 3 at this time" │ [View Conflict] [Assign Anyway] [Cancel] │ └── If no conflict: ✓ Session created successfully ``` ### ADM-14: Session Detail (Admin View) ``` Same as TCH-04 with admin additions: ├── Full session info (teacher, class, students) ├── Attendance summary ├── Recording availability ├── Admin actions: │ ├── [Reschedule] → date/time picker │ ├── [Cancel Session] │ ├── [Change Teacher] → teacher selector │ └── [View Audit Trail] ``` --- ## 6. RESOURCE LIBRARY (ADM-17) ### Category Management ``` RP/Modal (md) ├── Header: "Manage Resource Categories" ├── Content: │ Categories list: │ ├── Mathematics [Edit] [Delete] │ ├── English [Edit] [Delete] │ ├── Science [Edit] [Delete] │ ├── [+ Add Category] │ │ Name: RP/Input │ │ Color: RP/ColorPicker │ │ [Save] │ └── Drag to reorder ├── Footer: │ [Done] ``` --- ## 7. INTERVENTION MANAGEMENT (ADM-19) ### Admin Intervention Actions ``` VIEW INTERVENTION: Same as TCH-19 Detail with admin additions: ├── [Reassign Teacher] → teacher selector ├── [Escalate to Principal] → modal ├── [Archive] → confirmation └── [View Full Audit Trail] ESCALATION MODAL: RP/Modal (md) ├── Header: "Escalate Intervention" ├── Content: │ Student: [Name] │ Current Teacher: [Name] │ Status: [Active — 40% complete] │ Reason: RP/Input (textarea) │ Notify: [Principal] [Vice Principal] [Both] ├── Footer: │ [Cancel] [Escalate] ``` --- ## 8. DARK MODE — Academic Screens | Element | Light | Dark | |---------|-------|------| | Table header BG | #F8FAFC | #0F172A | | Table row hover | #F1F5F9 | #1E293B | | Table border | #E2E8F0 | #334155 | | Modal overlay | rgba(0,0,0,0.5) | rgba(0,0,0,0.7) | | Modal BG | #FFFFFF | #1E293B | | Active tab | color/secondary | color/secondary | | Inactive tab | #F1F5F9 | #1E293B | | Status badges | Same colors | Same colors | | Empty state icon | #94A3B8 | #64748B | --- ## 9. EMPTY STATES — Academic Screens | Screen | Empty Title | Empty CTA | |--------|------------|-----------| | ADM-02 | "No academic years created yet" | [Create Academic Year] | | ADM-04 | "No subjects added yet" | [Add Subject] | | ADM-05 | "No classes created yet" | [Create Class] | | ADM-06 | "No students enrolled yet" | [Enroll Student] | | ADM-07 | "No teachers yet" | [Invite Teacher] | | ADM-09 | "No students enrolled yet" | [Enroll Student] | | ADM-11 | "No parents registered yet" | [View Registration] | | ADM-13 | "No sessions scheduled" | [Add Session] | | ADM-17 | "No resources uploaded yet" | [Upload Resource] | | ADM-19 | "No interventions created yet" | [Create Intervention] | --- ## 10. LOADING STATES — Academic Screens All academic screens use RP/Skeleton for loading: ``` Table loading: ├── RP/Skeleton (rect, height: 48px × 8 rows) ├── RP/Skeleton (rect, height: 48px × 8 rows) └── RP/Skeleton (rect, height: 48px × 8 rows) Detail loading: ├── RP/Skeleton (rect, height: 120px) — header ├── RP/Skeleton (rect, height: 40px × 4) — tabs └── RP/Skeleton (rect, height: 200px) — content ``` --- ## 11. ERROR STATES — Academic Screens ``` Table error: RP/Banner (danger) ├── "Failed to load data" ├── [Retry] └── "If this persists, contact support" Modal error: RP/Banner (danger, inline) ├── "Failed to save. Please check your input." └── Inline field errors highlighted in red Permission error: RP/Banner (warning) ├── "You don't have permission to perform this action." └── [Go Back] ``` --- ## 12. ACCESSIBILITY — Academic Screens - All tables: `role="table"` with `aria-label` - Modal triggers: `aria-haspopup="dialog"` - Modal: `role="dialog"`, `aria-modal="true"`, focus trap - Tabs: `role="tablist"`, `role="tab"`, `role="tabpanel"` - Status badges: `aria-label` includes status text - Form fields: `