# PAR-01 through PAR-16: Figma Parent Portal Production Specs

---

## PAR-01: PARENT COMMAND CENTER (Dashboard)

### Frame: `RP/Parent/PAR-01-CommandCenter`

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

---

### Desktop Light (1440px)

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

├── RP/Sidebar (role: parent, state: expanded, active: dashboard)
│   Width: 260px
│   Menu items: Dashboard, Attendance, Goals, Remarks,
│               Action Items, Invoices, Messages, Profile
│
├── RP/Topbar (role: parent)
│   Height: 64px
│   ├── Left: Page title: "Parent Command Center"
│   └── Right: RP/NotificationBell + RP/Avatar
│
├── Content Area
│   Left margin: 260px, Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── CHILD SWITCHER (Flagship Component)
│   │   RP/Card (padding/md, shadow/sm)
│   │   Layout: Horizontal, gap 16px, alignment: center
│   │
│   │   ├── RP/ChildSwitcher (role: parent)
│   │   │   Width: 300px
│   │   │   ├── Current child avatar (48px)
│   │   │   ├── Name + Class: "Amara Asante — JSS 2"
│   │   │   ├── Dropdown arrow
│   │   │   └── Dropdown list:
│   │   │       ├── ● Amara Asante — JSS 2 (active, highlighted)
│   │   │       ├── ○ Kofi Asante — JSS 3
│   │   │       └── [+ Add New Ward]
│   │   │
│   │   ├── Quick stats (horizontal, gap 32px)
│   │   │   ├── OPS Score: "78%" (RP/OPSRing, sm)
│   │   │   ├── Attendance: "92%" (green)
│   │   │   ├── Rank: "#5 of 20" (secondary)
│   │   │   └── Tier: "🥈 Silver" (gamification badge)
│   │   │
│   │   └── Switching behavior:
│   │       AJAX state switch — reloads all child data
│   │       without full page refresh
│   │       Loading: RP/Skeleton (200ms)
│   │
│   ├── KPI CARDS ROW
│   │   Layout: Horizontal, gap 16px (4 cards across)
│   │
│   │   ├── KPI Card 1: "OPS Score"
│   │   │   RP/KPICard (color: primary, format: number)
│   │   │   Value: "78%", Trend: "+3% vs last term" ↑ success
│   │   │   Icon: trending-up (20px, secondary)
│   │   │   Click → PAR-02
│   │   │
│   │   ├── KPI Card 2: "Attendance"
│   │   │   RP/KPICard (color: success, format: number)
│   │   │   Value: "92%", Trend: "+2% vs last term" ↑ success
│   │   │   Icon: check-circle (20px, success)
│   │   │   Click → PAR-03
│   │   │
│   │   ├── KPI Card 3: "Outstanding Fees"
│   │   │   RP/KPICard (color: warning, format: currency)
│   │   │   Value: "₵ 1,200", Trend: "Due Jun 30"
│   │   │   Icon: alert-circle (20px, warning)
│   │   │   Click → PAR-08
│   │   │
│   │   └── KPI Card 4: "Action Items"
│   │       RP/KPICard (color: danger, format: number)
│   │       Value: "3", Trend: "2 overdue" ↑ danger
│   │       Icon: list-checks (20px, danger)
│   │       Click → PAR-06
│   │
│   ├── MAIN WIDGETS ROW
│   │   Layout: Horizontal, gap 16px
│   │
│   │   ├── LEFT (width: 66%)
│   │   │   Layout: Vertical, gap 16px
│   │   │
│   │   │   ├── ACTION ITEMS WIDGET
│   │   │   │   RP/Card (shadow/sm, padding/md)
│   │   │   │   Height: 280px
│   │   │   │
│   │   │   │   ├── Header (Horizontal, justify: space-between)
│   │   │   │   │   ├── H5: "Action Items"
│   │   │   │   │   └── RP/Button (ghost, sm): "View All" → PAR-06
│   │   │   │   │
│   │   │   │   └── Items List (Vertical, gap 8px)
│   │   │   │       Each item (max 4):
│   │   │   │       Height: 56px
│   │   │   │       Layout: Horizontal, gap 8px, alignment: center
│   │   │   │       ├── Status icon: ✓/○/⏳
│   │   │   │       ├── Title (Body/SM, flex: 1): "Review homework"
│   │   │   │       ├── Due badge (RP/Badge, color-coded):
│   │   │   │       │   info (>3d) / warning (1-3d) / danger (overdue)
│   │   │   │       └── [Complete] button (ghost, sm)
│   │   │   │
│   │   │   ├── TEACHER REMARKS FEED
│   │   │   │   RP/Card (shadow/sm, padding/md)
│   │   │   │   Height: 280px
│   │   │   │
│   │   │   │   ├── Header
│   │   │   │   │   ├── H5: "Teacher Remarks"
│   │   │   │   │   └── RP/Button (ghost, sm): "View All" → PAR-05
│   │   │   │   │
│   │   │   │   └── Remarks Feed (Vertical, gap 12px)
│   │   │   │       Each remark (max 3):
│   │   │   │       ├── Teacher name + subject: "Dr. Mensah — Mathematics"
│   │   │   │       ├── Remark text (Body/SM, 2-line clamp)
│   │   │   │       ├── Date: "Jun 12, 2026" (Body/XS, muted)
│   │   │   │       └── Subject badge (RP/Badge, sm)
│   │   │   │
│   │   │   ├── GOAL PROGRESS WIDGET
│   │   │   │   RP/Card (shadow/sm, padding/md)
│   │   │   │   Height: 240px
│   │   │   │
│   │   │   │   ├── Header
│   │   │   │   │   ├── H5: "Goal Progress"
│   │   │   │   │   └── RP/Button (ghost, sm): "View All" → PAR-04
│   │   │   │   │
│   │   │   │   └── Goals (Vertical, gap 12px)
│   │   │   │       Each (max 3):
│   │   │   │       ├── Title: "Improve Math to 85%"
│   │   │   │       ├── RP/ProgressBar (65/100)
│   │   │   │       └── "65% — Target: 85% by Dec 31"
│   │   │
│   │   └── RIGHT (width: 33%)
│   │       Layout: Vertical, gap 16px
│   │
│   │       ├── INVOICE QUICK-PAY
│   │       │   RP/Card (shadow/sm, padding/md, border-left: 3px warning)
│   │       │   Height: 180px
│   │       │
│   │       │   ├── H5: "Outstanding Invoice"
│   │       │   ├── Invoice number: "INV-2026-0042"
│   │       │   ├── Amount: "₵ 1,200.00" (Display/H3, warning color)
│   │       │   ├── Due date: "Due Jun 30, 2026"
│   │       │   └── RP/Button (primary, full-width): "Pay Now" → PAR-10
│   │       │
│   │       ├── UPCOMING SESSIONS
│   │       │   RP/Card (shadow/sm, padding/md)
│   │       │   Height: 200px
│   │       │
│   │       │   ├── H5: "Upcoming Sessions"
│   │       │   └── Sessions (max 3):
│   │       │       Each: RP/SessionCard (sm variant)
│   │       │
│   │       ├── CREDENTIAL MANAGEMENT
│   │       │   RP/Card (shadow/sm, padding/md)
│   │       │   Height: 160px
│   │       │
│   │       │   ├── H5: "Student Credentials"
│   │       │   ├── Student: "Amara Asante"
│   │       │   ├── ID: "RP-2026-00001" (Mono/Base)
│   │       │   └── Actions:
│   │       │       [Copy] [Download PDF] [Resend]
│   │       │       Click → PAR-16
│   │       │
│   │       └── NOTIFICATION CENTER LINK
│   │           RP/Card (padding/md)
│   │           ├── "3 unread notifications"
│   │           └── RP/Button (ghost, sm): "View Notifications" → TCH-13
│
└── Bottom padding: 48px
```

---

## PAR-02: CHILD OPS DETAIL

### Frame: `RP/Parent/PAR-02-ChildOPS`

```
Frame: PAR-02-ChildOPS-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent, active: dashboard)
├── RP/Topbar (parent)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > OPS Detail"
│   │
│   ├── STUDENT HEADER (same as PAR-01 child info area)
│   │   RP/Card (padding/lg)
│   │   Avatar + Name + ID + Class
│   │
│   ├── OPS HERO
│   │   RP/Card (padding/lg, shadow/md)
│   │   Layout: Horizontal, gap 32px, alignment: center
│   │
│   │   ├── RP/OPSRing (xl, 78%)
│   │   │   Color zone: Green (78% >= 60)
│   │   │
│   │   ├── OPS Breakdown Panel
│   │   │   ├── "Why is my score 78%?" (H5)
│   │   │   │
│   │   │   ├── Component Table (Vertical, gap 0)
│   │   │   │   Each row (Height: 48px, border-bottom):
│   │   │   │   ├── Component name (Body/SM, flex: 1)
│   │   │   │   ├── Weight badge (RP/Badge, info, xs)
│   │   │   │   ├── Score: "82%" (Body/SM, Bold)
│   │   │   │   ├── Contribution: "+24.6 pts" (Body/SM, secondary)
│   │   │   │   └── Progress bar (thin, 4px)
│   │   │   │
│   │   │   │   Components:
│   │   │   │   ├── Exams: 30% weight, 82% score, +24.6 pts
│   │   │   │   ├── Assignments: 20% weight, 75% score, +15.0 pts
│   │   │   │   ├── Attendance: 25% weight, 92% score, +23.0 pts
│   │   │   │   ├── Participation: 15% weight, 70% score, +10.5 pts
│   │   │   │   └── Behavior: 10% weight, 90% score, +9.0 pts
│   │   │   │
│   │   │   └── Total: "Total: 82.1 / 100" (H4, Bold)
│   │   │
│   │   └── Class Comparison
│   │       "Class average: 72% — Your child is above average"
│   │       Rank: "#5 of 20 students"
│   │
│   ├── OPS TREND CHART
│   │   RP/Card (padding/md)
│   │   CH-01 variant: Single student vs class average
│   │   Periods: Term 1 through current term
│   │
│   ├── SUBJECT BREAKDOWN
│   │   RP/Card (padding/md)
│   │   Table: Subject | Score | Trend | Rank
│   │   Color-coded scores (green/amber/red)
│   │
│   └── "Why is this important?" explanation
│       RP/Card (padding/md, border)
│       "OPS combines exam performance, assignments, attendance,
│        participation, and behavior into a single score.
│        It helps teachers identify students who need support."
│
└── Bottom padding: 48px
```

---

## PAR-03: CHILD ATTENDANCE

### Frame: `RP/Parent/PAR-03-Attendance`

```
Frame: PAR-03-Attendance-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent, active: attendance)
├── RP/Topbar (parent)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Attendance"
│   │
│   ├── KPI ROW (4 cards)
│   │   ├── "Attendance Rate: 92%" (color: success)
│   │   ├── "Present: 46 days" (color: success)
│   │   ├── "Late: 3 days" (color: warning)
│   │   └── "Absent: 2 days" (color: danger)
│   │
│   ├── ATTENDANCE HEATMAP
│   │   Same as STU-12 (parent view)
│   │   Monthly calendar with color-coded days
│   │   Legend: Present (green) / Late (amber) / Absent (red) / No Class
│   │
│   ├── BY-SUBJECT BREAKDOWN
│   │   RP/Card (padding/md)
│   │   Table: Subject | Rate | Present | Late | Absent
│   │   Color-coded rates
│   │
│   └── ATTENDANCE TREND CHART
│       CH-01 variant: Student attendance rate over terms
│
└── Bottom padding: 48px
```

---

## PAR-04: CHILD GOALS

### Frame: `RP/Parent/PAR-04-Goals`

```
Frame: PAR-04-Goals-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent, active: goals)
├── RP/Topbar (parent)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Goals"
│   │
│   ├── GOALS SUMMARY
│   │   "Active: 3 | Completed: 5 | Total: 8"
│   │
│   ├── GOALS LIST
│   │   Each goal:
│   │   RP/Card (padding/md)
│   │   ├── Title: "Improve Math score to 85%"
│   │   ├── Subject: Mathematics
│   │   ├── RP/ProgressBar (65/100)
│   │   ├── "65% — Target: 85% by Dec 31"
│   │   ├── Status badge: "Active"
│   │   └── Teacher note: "Keep practicing algebra exercises daily."
│   │       — Dr. Mensah
│   │
│   └── Empty state (if no goals):
│       "No goals set yet. Teachers will create goals for your child."
│
└── Bottom padding: 48px
```

---

## PAR-05: TEACHER REMARKS FEED

### Frame: `RP/Parent/PAR-05-Remarks`

```
Frame: PAR-05-Remarks-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent, active: remarks)
├── RP/Topbar (parent)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Teacher Remarks"
│   │
│   ├── FILTER
│   │   Subject filter + Date range
│   │
│   ├── REMARKS FEED
│   │   RP/Timeline
│   │
│   │   Each remark:
│   │   RP/Card (padding/md)
│   │   ├── Header: Teacher name + Subject badge + Date
│   │   ├── Remark text (Body/Base)
│   │   ├── Tags: [Academic] [Behavior] [Attendance] [General]
│   │   └── Sentiment: [Positive] [Neutral] [Concern]
│   │
│   │   Example entries:
│   │   ├── "Amara showed excellent progress in algebra this week.
│   │   │    She scored 85% on the quiz." — Dr. Mensah, Math
│   │   │    Jun 12, 2026 [Academic] [Positive]
│   │   │
│   │   ├── "Please ensure Amara completes her homework on time.
│   │   │    She missed 2 submissions this week." — Mrs. Aidoo, English
│   │   │    Jun 10, 2026 [Academic] [Concern]
│   │   │
│   │   └── "Great participation in science experiment today!"
│   │       — Mr. Ofori, Science
│   │       Jun 8, 2026 [Academic] [Positive]
│   │
│   └── Pagination: RP/Pagination
│
└── Bottom padding: 48px
```

---

## PAR-06: ACTION ITEMS LIST

### Frame: `RP/Parent/PAR-06-ActionItems`

```
Frame: PAR-06-ActionItems-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent, active: action-items)
├── RP/Topbar (parent)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Action Items"
│   │
│   ├── KPI ROW
│   │   ├── "Total: 8" | "Pending: 3" | "Completed: 3" | "Overdue: 2"
│   │
│   ├── FILTER BAR
│   │   Status: [All] [Pending] [In Progress] [Completed] [Overdue]
│   │
│   ├── ACTION ITEMS LIST
│   │   Layout: Vertical, gap 12px
│   │
│   │   Each item:
│   │   RP/Card (padding/md)
│   │   Layout: Vertical, gap 8px
│   │
│   │   ├── Header Row (Horizontal, justify: space-between)
│   │   │   ├── Title (Body/Base, Medium): "Review math homework"
│   │   │   ├── Status badge (Pending/In Progress/Completed/Overdue)
│   │   │   └── Priority badge (if High/Urgent)
│   │   │
│   │   ├── Description
│   │   │   "Please review Amara's math homework chapters 5-7
│   │   │    and sign the practice log." (Body/SM, muted)
│   │   │
│   │   ├── Meta Row (Horizontal, gap 16px)
│   │   │   ├── Student: "Amara Asante" (Body/XS)
│   │   │   ├── From: "Dr. Mensah — Mathematics" (Body/XS)
│   │   │   └── Due: "Jun 20, 2026" (Body/XS, color-coded)
│   │   │
│   │   ├── Acknowledgement Status
│   │   │   "Acknowledged: Jun 15, 2026 3:20 PM" (Body/XS, success)
│   │   │   OR "Not yet acknowledged" (Body/XS, warning)
│   │   │
│   │   └── Actions (Horizontal, gap 8px)
│   │       ├── [View Detail] (ghost, sm) → PAR-07
│   │       ├── [Acknowledge] (outline, sm) — if not yet acknowledged
│   │       └── [Mark Complete] (primary, sm) — if pending/in-progress
│   │
│   └── Empty state (if no action items):
│       "No action items assigned to you yet."
│
└── Bottom padding: 48px
```

---

## PAR-07: ACTION ITEM DETAIL

### Frame: `RP/Parent/PAR-07-ActionItemDetail`

```
Frame: PAR-07-ActionItemDetail-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent)
├── RP/Topbar (parent)
│
├── Content Area
│   Max-width: 720px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Action Items > Review Homework"
│   │
│   ├── ACTION ITEM HEADER
│   │   RP/Card (padding/lg, shadow/sm)
│   │   Layout: Vertical, gap 12px
│   │
│   │   ├── Title: "Review math homework with Amara" (H2)
│   │   ├── Status badge + Priority badge (horizontal)
│   │   │
│   │   ├── Details Grid (2 columns)
│   │   │   ├── Assigned to: "You (Kofi Asante)"
│   │   │   ├── Student: "Amara Asante — JSS 2"
│   │   │   ├── Created by: "Dr. Mensah — Mathematics"
│   │   │   ├── Created: "Jun 12, 2026"
│   │   │   ├── Due: "Jun 20, 2026"
│   │   │   └── Acknowledged: "Jun 15, 2026"
│   │   │
│   │   ├── Description
│   │   │   "Please review Amara's math homework chapters 5-7
│   │   │    and sign the practice log. Focus on algebra problems.
│   │   │    Let me know if she needs additional support."
│   │   │
│   │   └── Actions
│   │       ├── [Mark Complete] (primary) → confirmation modal
│   │       └── [Send Message to Teacher] (outline) → PAR-12
│   │
│   ├── ACTIVITY LOG
│   │   RP/Card (padding/md)
│   │   RP/Timeline
│   │
│   │   ├── Jun 12, 9:00 AM — Dr. Mensah created this action item
│   │   ├── Jun 12, 9:01 AM — Notification sent to Kofi Asante
│   │   ├── Jun 15, 3:20 PM — You acknowledged this item
│   │   └── Jun 18, 9:00 AM — Reminder sent (automatic)
│   │
│   └── RELATED REMARKS
│       RP/Card (padding/md)
│       "Related teacher remarks:"
│       ├── Jun 10 — "Amara needs help with algebra homework"
│       └── Jun 8 — "Algebra quiz result was below expectations"
│
└── Bottom padding: 48px
```

---

## PAR-08: INVOICES LIST

### Frame: `RP/Parent/PAR-08-Invoices`

```
Frame: PAR-08-Invoices-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent, active: invoices)
├── RP/Topbar (parent)
│
├── Content Area
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Invoices"
│   │
│   ├── KPI ROW (4 cards)
│   │   ├── "Total Invoices: 8" (color: primary)
│   │   ├── "Outstanding: ₵ 1,200" (color: warning)
│   │   ├── "Paid This Year: ₵ 4,800" (color: success)
│   │   └── "Next Due: Jun 30" (color: info)
│   │
│   ├── FILTER BAR
│   │   Status: [All] [Outstanding] [Paid] [Overdue]
│   │   Child filter (if multiple children)
│   │
│   ├── TABS
│   │   [Outstanding (2)] [Paid (5)] [All (8)]
│   │
│   ├── INVOICE CARDS
│   │   Layout: Vertical, gap 12px
│   │
│   │   Each invoice:
│   │   RP/Card (padding/md, shadow/sm)
│   │   Layout: Horizontal, gap 16px
│   │
│   │   ├── LEFT: Invoice Info
│   │   │   ├── Invoice #: "INV-2026-0042" (Mono/Base)
│   │   │   ├── Student: "Amara Asante" (Body/SM)
│   │   │   ├── Items: "Tuition — Term 3, Exam Fee" (Body/XS, muted)
│   │   │   └── Due date: "Jun 30, 2026" (Body/XS)
│   │   │
│   │   ├── CENTER: Amount
│   │   │   ├── Total: "₵ 1,200.00" (Display/H4, Bold)
│   │   │   └── Status badge: [Outstanding] (warning) / [Paid] (success)
│   │   │
│   │   └── RIGHT: Actions
│   │       ├── Outstanding: [Pay Now] (primary) → PAR-10
│   │       │                 [View] (outline) → PAR-09
│   │       ├── Paid: [Download Receipt] (outline) → PAR-11
│   │       │         [View] (outline) → PAR-09
│   │       └── Overdue: [Pay Now] (danger) + "X days overdue"
│   │
│   └── Pagination
│
└── Bottom padding: 48px
```

---

## PAR-09: INVOICE DETAIL

### Frame: `RP/Parent/PAR-09-InvoiceDetail`

```
Frame: PAR-09-InvoiceDetail-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent)
├── RP/Topbar (parent)
│
├── Content Area
│   Max-width: 720px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Invoices > INV-2026-0042"
│   │
│   ├── INVOICE DOCUMENT
│   │   RP/Card (padding/lg, shadow/md)
│   │   Layout: Vertical, gap 16px
│   │
│   │   ├── Header Row
│   │   │   ├── School logo + "RP Learning Portal"
│   │   │   └── Invoice #: "INV-2026-0042" (Mono/Base)
│   │   │
│   │   ├── Student & Parent Info
│   │   │   ├── Student: Amara Asante — JSS 2
│   │   │   ├── Parent: Kofi Asante (Primary Guardian)
│   │   │   └── Email: kofi@example.com
│   │   │
│   │   ├── LINE ITEMS TABLE
│   │   │   Columns: Description | Qty | Unit Price | Total
│   │   │   ├── Tuition — Term 3 | 1 | ₵ 800.00 | ₵ 800.00
│   │   │   ├── Exam Fee | 1 | ₵ 200.00 | ₵ 200.00
│   │   │   ├── Library Fee | 1 | ₵ 100.00 | ₵ 100.00
│   │   │   └── Activity Fee | 1 | ₵ 100.00 | ₵ 100.00
│   │   │
│   │   ├── TOTALS
│   │   │   Subtotal: ₵ 1,200.00
│   │   │   Discount: ₵ 0.00
│   │   │   Total: ₵ 1,200.00 (Bold, H3)
│   │   │
│   │   ├── Due Date: "Jun 30, 2026"
│   │   ├── Status: [Outstanding] (warning badge)
│   │   │
│   │   └── Payment History (if partial payment made)
│   │       "Payment history:"
│   │       ├── Jun 15 — ₵ 500.00 — Card — Successful
│   │       └── Remaining: ₵ 700.00
│   │
│   ├── ACTIONS
│   │   ├── [Pay Now] (primary, lg) → PAR-10
│   │   ├── [Download PDF] (outline)
│   │   └── [Contact Admin] (ghost)
│
└── Bottom padding: 48px
```

---

## PAR-10: PAYSTACK PAYMENT FLOW

### Frame: `RP/Parent/PAR-10-Payment`

```
Frame: PAR-10-Payment-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent)
├── RP/Topbar (parent)
│
├── Content Area
│   Max-width: 600px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Invoices > Payment"
│   │
│   ├── PAYMENT HEADER
│   │   RP/Card (padding/lg)
│   │   Layout: Vertical, gap 8px, alignment: center
│   │
│   │   ├── "Complete Payment" (H2)
│   │   ├── Invoice: "INV-2026-0042" (Mono/Base)
│   │   └── Amount: "₵ 1,200.00" (Display/H2, Bold, color/secondary)
│   │
│   ├── PAYMENT METHOD SELECTOR
│   │   RP/Card (padding/md)
│   │   Layout: Vertical, gap 16px
│   │
│   │   ├── H5: "Select Payment Method"
│   │   │
│   │   ├── RP/Tabs (variant: pill, 4 tabs)
│   │   │   [💳 Card] [📱 Mobile Money] [🏦 Bank Transfer] [📲 USSD]
│   │   │
│   │   ├── CARD TAB (default)
│   │   │   └── Paystack inline card form:
│   │   │       ├── Card Number: [•••• •••• •••• ••••]
│   │   │       ├── Expiry: [MM/YY]  CVV: [•••]
│   │   │       └── [Pay ₵ 1,200.00] (primary, full-width)
│   │   │
│   │   ├── MOBILE MONEY TAB
│   │   │   ├── Provider: [MTN ▾] / [Vodafone Cash] / [AirtelTigo]
│   │   │   ├── Mobile Number: [+233 ••• ••• •••]
│   │   │   └── [Send Payment Request] (primary)
│   │   │       → "Confirm on your phone" status
│   │   │       → Polling indicator
│   │   │
│   │   ├── BANK TRANSFER TAB
│   │   │   ├── "Paystack will generate a virtual account"
│   │   │   ├── Bank: [Bank Name]
│   │   │   ├── Account: [Generated number]
│   │   │   ├── Amount: ₵ 1,200.00
│   │   │   ├── Reference: [Generated]
│   │   │   └── [I have made the transfer] (primary)
│   │   │       → Polling status
│   │   │
│   │   └── USSD TAB
│   │       ├── Select Bank: [GTBank ▾] / [Access] / [Zenith]
│   │       ├── USSD Code: *737*[1200]*42#
│   │       ├── Instructions: "Dial this code on your phone"
│   │       └── [I have completed the payment] (primary)
│   │           → Polling status
│   │
│   ├── PAYMENT STATUS
│   │   Processing: "⏳ Processing payment..." (RP/Banner, info)
│   │   Success: "✅ Payment Confirmed!" (RP/Banner, success)
│   │   Failed: "❌ Payment Failed" (RP/Banner, danger) + [Retry]
│   │
│   └── SECURITY NOTE
│       🔒 "Payments are processed securely by Paystack.
│          Your card details are never stored on our servers."
│
└── Bottom padding: 48px
```

---

## PAR-11: RECEIPT DOWNLOAD

### Frame: `RP/Parent/PAR-11-Receipt`

```
Frame: PAR-11-Receipt-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent)
├── RP/Topbar (parent)
│
├── Content Area
│   Max-width: 600px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── SUCCESS HEADER
│   │   RP/Card (padding/lg, alignment: center)
│   │   ├── ✅ (large, success color)
│   │   ├── "Payment Confirmed!" (H2)
│   │   ├── "Receipt #REC-2026-0038" (Mono/Base)
│   │   └── "Amara Asante — JSS 2"
│   │
│   ├── RECEIPT PREVIEW
│   │   RP/Card (padding/md, border)
│   │   PDF preview iframe (or static preview)
│   │
│   │   Receipt content:
│   │   ├── School header
│   │   ├── Receipt number
│   │   ├── Date paid
│   │   ├── Student name
│   │   ├── Invoice reference
│   │   ├── Payment method
│   │   ├── Amount paid
│   │   └── Transaction reference
│   │
│   ├── ACTIONS
│   │   ├── [Download PDF] (primary, lg)
│   │   ├── [Email Receipt] (outline)
│   │   └── [Return to Dashboard] (ghost)
│   │
│   └── AUTO-EMAIL NOTE
│       "A copy of this receipt has been emailed to
│        kofi@example.com"
│
└── Bottom padding: 48px
```

---

## PAR-12: MESSAGES

Same layout as STU-16 with parent-specific participants:
- Teachers (of their children)
- Admin
- Other parents (if group conversations exist)

### Desktop Light

```
├── Conversation list (320px)
│   Filter: [All] [Teachers] [Admin]
│
├── Message area (fill)
│   Same chat UI as STU-16
│   ├── Message bubbles
│   │   Sent: right-aligned, color/secondary BG
│   │   Received: left-aligned, color/surface BG
│   │
│   ├── Input area
│   │   Text input + [Send] button
│   │   [📎 Attachment] button
│   │
│   └── New conversation: [Compose] button
│       ├── To: [Select teacher/admin]
│       ├── Subject: [Input]
│       └── Message: [Textarea]
│
└── Mobile: Full-screen list → tap to open chat
```

---

## PAR-13: NOTIFICATION PREFERENCES

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

```
Categories:
├── Financial / Invoices (payment confirmations, overdue alerts)
├── Attendance Warnings (child attendance drops below threshold)
├── Academic Updates (grades published, exam results)
├── Action Items (new assignments, reminders, overdue)
├── Teacher Messages (direct messages from teachers)
├── System Announcements (school-wide announcements)
└── Policy Updates (new policies requiring acceptance)

Same toggle grid:
"In-App" | "Email" | "SMS"
In-App: Always ON
Email: Toggle per category
SMS: Toggle per category (financial + attendance only)

Digest settings:
Frequency: [Real-time ▾] / [Daily Digest] / [Weekly Digest]
Quiet hours: [10:00 PM] to [7:00 AM]
```

---

## PAR-14: MY PROFILE

### Frame: `RP/Parent/PAR-14-Profile`

```
Frame: PAR-14-Profile-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent, active: profile)
├── RP/Topbar (parent)
│
├── Content Area
│   Max-width: 720px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Page Header: "My Profile"
│   │
│   ├── PROFILE HEADER
│   │   RP/Card (padding/lg)
│   │   ├── Avatar (lg) + [Change Photo]
│   │   ├── Name: "Kofi Asante"
│   │   ├── Email: "kofi@example.com"
│   │   ├── Phone: "+233 24 123 4567"
│   │   └── Role: "Parent" (RP/Badge)
│   │
│   ├── PERSONAL INFORMATION
│   │   RP/Card (padding/md)
│   │   Fields: Name, Email, Phone, Date of Birth
│   │   [Edit Profile] → modal
│   │
│   ├── LINKED CHILDREN
│   │   RP/Card (padding/md)
│   │   Table: Name | Student ID | Class | Status | Actions
│   │   ├── Amara Asante | RP-2026-00001 | JSS 2 | Active
│   │   ├── Kofi Asante | RP-2026-00002 | JSS 3 | Active
│   │   └── Actions: [View Profile] [Manage Credentials]
│   │
│   ├── SECURITY
│   │   RP/Card (padding/md)
│   │   ├── [Change Password] (outline)
│   │   └── [Two-Factor Authentication] (outline)
│   │
│   └── SETTINGS LINKS
│       ├── Notification Preferences → PAR-13
│       ├── Appearance Settings
│       └── Logout
│
└── Bottom padding: 48px
```

---

## PAR-15: POLICY ACCEPTANCES

### Frame: `RP/Parent/PAR-15-Policies`

```
Frame: PAR-15-Policies-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent)
├── RP/Topbar (parent)
│
├── Content Area
│   Max-width: 720px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Policy Acceptances"
│   │
│   ├── PAGE HEADER: "My Policy Acceptances"
│   │
│   ├── ACCEPTED POLICIES
│   │   Each policy:
│   │   RP/Card (padding/md)
│   │   Layout: Horizontal, gap 16px
│   │
│   │   ├── Status icon: ✅ (green, 20px)
│   │   ├── Policy info (flex: 1)
│   │   │   ├── Policy name: "Terms of Service" (Body/Base, Medium)
│   │   │   ├── Description: "Platform terms and conditions" (Body/SM, muted)
│   │   │   └── Accepted: "Jun 10, 2026 at 2:15 PM" (Body/XS, muted)
│   │   │
│   │   └── IP Address: "192.168.1.1" (Body/XS, muted)
│   │
│   │   Policies:
│   │   ├── ✅ Terms of Service — Accepted Jun 10, 2026
│   │   ├── ✅ Payment Responsibility — Accepted Jun 10, 2026
│   │   ├── ✅ Data Privacy Policy — Accepted Jun 10, 2026
│   │   └── ⏳ Media Consent (if not yet accepted)
│   │       [Review & Accept] → modal
│   │
│   └── NOTE
│       "All policy acceptances are recorded with cryptographic
│        timestamps and IP addresses for legal compliance."
│
└── Bottom padding: 48px
```

---

## PAR-16: CREDENTIAL MANAGEMENT

### Frame: `RP/Parent/PAR-16-Credentials`

```
Frame: PAR-16-Credentials-Desktop-Light
Width: 1440px
BG: color/background

├── RP/Sidebar (parent)
├── RP/Topbar (parent)
│
├── Content Area
│   Max-width: 600px (centered)
│   Padding: 24px
│   Layout: Vertical, gap 24px
│
│   ├── Breadcrumb: "Dashboard > Credentials"
│   │
│   ├── PAGE HEADER: "Student Credentials"
│   │
│   ├── CREDENTIAL CARDS
│   │   For each linked child:
│   │   RP/Card (padding/lg, shadow/sm)
│   │   Layout: Vertical, gap 12px
│   │
│   │   ├── Student Name: "Amara Asante" (H4)
│   │   ├── Class: "JSS 2" (Body/SM)
│   │   │
│   │   ├── Student ID
│   │   │   Label: "Student ID"
│   │   │   Value: "RP-2026-00001" (Mono/LG, Bold)
│   │   │   [Copy] button (ghost, sm) → Toast: "Copied ✓"
│   │   │
│   │   ├── Temporary Password
│   │   │   Label: "Temporary Password"
│   │   │   Value: "••••••••" (masked by default)
│   │   │   [Show/Hide] toggle (eye icon)
│   │   │   [Copy] button
│   │   │
│   │   ├── Warning Banner
│   │   │   "⚠ The temporary password will expire on first login.
│   │   │    Please ensure your child changes it immediately."
│   │   │   (RP/Banner, warning)
│   │   │
│   │   └── Actions
│   │       ├── [Copy Credentials] (outline)
│   │       │   Copies both ID and password to clipboard
│   │       │
│   │       ├── [Download PDF] (outline)
│   │       │   Generates credential PDF via DomPDF
│   │       │
│   │       ├── [Email to Student] (outline)
│   │       │   Sends credentials to student's email
│   │       │
│   │       └── [Resend Credentials] (ghost)
│   │           Re-sends via email
│   │
│   └── Credential Delivery Log
│       "Delivery History:"
│       ├── Jun 10, 2026 — Created during registration
│       ├── Jun 10, 2026 — Emailed to parent
│       └── Jun 12, 2026 — PDF downloaded
│
└── Bottom padding: 48px
```

---

## PROTOTYPE INTERACTIONS — Parent Portal

| Step | Screen | Trigger | Action |
|------|--------|---------|--------|
| 1 | PAR-01 | Click child in switcher | → AJAX reload all data |
| 2 | PAR-01 | Click "Pay Now" | → PAR-10 |
| 3 | PAR-01 | Click "View All" action items | → PAR-06 |
| 4 | PAR-01 | Click "View All" remarks | → PAR-05 |
| 5 | PAR-01 | Click OPS card | → PAR-02 |
| 6 | PAR-01 | Click Attendance card | → PAR-03 |
| 7 | PAR-06 | Click "View Detail" | → PAR-07 |
| 8 | PAR-06 | Click "Mark Complete" | → Confirmation modal |
| 9 | PAR-08 | Click "Pay Now" on invoice | → PAR-10 |
| 10 | PAR-08 | Click "View" on invoice | → PAR-09 |
| 11 | PAR-09 | Click "Pay Now" | → PAR-10 |
| 12 | PAR-10 | Complete payment | → PAR-11 |
| 13 | PAR-11 | Click "Download PDF" | → Download receipt |
| 14 | PAR-14 | Click "Manage Credentials" | → PAR-16 |