# PAR-01 Parent Command Center — Dashboard Deep-Dive Specs --- ## 1. CHILD SWITCHER COMPONENT ### Component: `RP/ChildSwitcher` #### Visual Specification ``` ┌──────────────────────────────────────────────────┐ │ ┌─────┐ │ │ │ AA │ Amara Asante — JSS 2 ▾ │ │ └─────┘ │ └──────────────────────────────────────────────────┘ ``` #### Expanded State ``` ┌──────────────────────────────────────────────────┐ │ ┌─────┐ │ │ │ AA │ Amara Asante — JSS 2 ▴ │ │ └─────┘ │ ├──────────────────────────────────────────────────┤ │ ● ┌─────┐ Amara Asante — JSS 2 78% OPS │ │ │ AA │ │ │ └─────┘ │ │ ○ ┌─────┐ Kofi Asante — JSS 3 85% OPS │ │ │ KA │ │ │ └─────┘ │ ├──────────────────────────────────────────────────┤ │ + Add New Ward │ └──────────────────────────────────────────────────┘ ``` #### Properties | Property | Type | Default | Description | |----------|------|---------|-------------| | `children` | Array | required | List of linked children | | `activeChildId` | Number | required | Currently selected child | | `maxDisplay` | Number | 4 | Max children before "View All" | #### States | State | Visual | |-------|--------| | Default | Border: color/border, BG: transparent | | Hover | Border: color/secondary | | Active/Expanded | Border: color/secondary, shadow/lg | | Loading | RP/Skeleton (200ms transition) | | Single child | No dropdown, just display | #### Behavior - Click opens dropdown - Selecting a child triggers AJAX reload - All page data refreshes to show selected child - Selection persists across page navigation (session) - "Add New Ward" → navigates to /register/add-ward #### Responsive | Breakpoint | Layout | |-----------|--------| | Desktop (≥1024px) | Full display with OPS, attendance, rank, tier | | Tablet (768-1023px) | Compact: Avatar + Name + OPS only | | Mobile (<768px) | Avatar only (tap to open dropdown) | --- ## 2. PARENT DASHBOARD KPI CARDS ### KPI 1: OPS Score ``` ┌─────────────────────────────────────────┐ │ 📈 OPS Score │ │ │ │ 78% │ │ ↑ +3% vs last term green │ │ │ │ ████████████████░░░░ Target: 85% │ └─────────────────────────────────────────┘ ``` - Click → PAR-02 (Child OPS Detail) - Color: `color/secondary` (primary) - Progress bar: toward school target - Trend arrow: green if up, red if down, grey if stable ### KPI 2: Attendance ``` ┌─────────────────────────────────────────┐ │ ✅ Attendance │ │ │ │ 92% │ │ ↑ +2% vs last term green │ │ │ │ Present: 46 | Late: 3 | Absent: 2 │ └─────────────────────────────────────────┘ ``` - Click → PAR-03 (Child Attendance) - Color: `color/success` - Mini stat row below trend ### KPI 3: Outstanding Fees ``` ┌─────────────────────────────────────────┐ │ ⚠️ Outstanding Fees │ │ │ │ ₵ 1,200.00 │ │ Due Jun 30, 2026 amber │ │ │ │ 1 invoice outstanding │ └─────────────────────────────────────────┘ ``` - Click → PAR-08 (Invoices List) - Color: `color/warning` - If no outstanding: "All fees paid ✓" (green) ### KPI 4: Action Items ``` ┌─────────────────────────────────────────┐ │ ☑️ Action Items │ │ │ │ 3 │ │ 2 overdue red │ │ │ │ Pending: 1 | Overdue: 2 │ └─────────────────────────────────────────┘ ``` - Click → PAR-06 (Action Items) - Color: `color/danger` if overdue, `color/warning` if pending - Badge count on sidebar icon --- ## 3. DASHBOARD WIDGET SPECIFICATIONS ### Action Items Widget ``` ┌──────────────────────────────────────────────────┐ │ Action Items View All → │ ├──────────────────────────────────────────────────┤ │ │ │ ✓ Review homework Due Jun 20 [Done] │ │ ○ Sign permission slip Due Jun 25 [Done] │ │ ⏳ Buy textbook Due Jul 1 │ │ ⚠ Review exam results OVERDUE [Done] │ │ │ └──────────────────────────────────────────────────┘ ``` - Max 4 items shown - Sorted by urgency: Overdue first, then by due date - "Done" button marks complete (inline, no navigation) - Click row → PAR-07 (Detail) ### Teacher Remarks Widget ``` ┌──────────────────────────────────────────────────┐ │ Teacher Remarks View All → │ ├──────────────────────────────────────────────────┤ │ │ │ Dr. Mensah — Mathematics Jun 12 │ │ "Excellent progress in algebra this week." │ │ [Academic] [Positive] │ │ │ │ Mrs. Aidoo — English Jun 10 │ │ "Please ensure homework is completed on time." │ │ [Academic] [Concern] │ │ │ │ Mr. Ofori — Science Jun 8 │ │ "Great participation in today's experiment!" │ │ [Academic] [Positive] │ │ │ └──────────────────────────────────────────────────┘ ``` - Max 3 remarks shown - Sorted by date (newest first) - Sentiment badge color: Positive=green, Neutral=blue, Concern=amber ### Goal Progress Widget ``` ┌──────────────────────────────────────────────────┐ │ Goal Progress View All → │ ├──────────────────────────────────────────────────┤ │ │ │ Improve Math score to 85% │ │ ████████████████░░░░░░░░ 65% │ │ Target: 85% by Dec 31 │ │ │ │ Complete all English assignments │ │ ████████████████████████ 100% ✓ │ │ Achieved! │ │ │ │ Read 5 books this term │ │ ██████████████░░░░░░░░░░ 60% │ │ 3 of 5 books read │ │ │ └──────────────────────────────────────────────────┘ ``` - Max 3 goals shown - Completed goals shown with green checkmark - Progress bar color: red (<50%), amber (50-74%), blue (75-99%), green (100%) ### Invoice Quick-Pay Widget ``` ┌──────────────────────────────────────────────────┐ │ ⚠ Outstanding Invoice │ ├──────────────────────────────────────────────────┤ │ │ │ INV-2026-0042 │ │ │ │ ₵ 1,200.00 │ │ Due Jun 30, 2026 │ │ │ │ ┌──────────────────────────────────────────┐ │ │ │ Pay Now │ │ │ └──────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────┘ ``` - Border-left: 3px color/warning - "Pay Now" → PAR-10 - If no outstanding: "All fees paid ✓" state - If multiple outstanding: Show highest amount, "View All" link --- ## 4. DASHBOARD RESPONSIVE LAYOUTS ### Desktop (≥1024px) ``` ┌─────────────────────────────────────────────────┐ │ Sidebar (260px) │ Content │ │ │ │ │ │ [Child Switcher] │ │ │ │ │ │ [KPI1] [KPI2] [KPI3] [KPI4] │ │ │ │ │ │ [Widgets Left (66%)] [Right] │ │ │ │ └─────────────────────────────────────────────────┘ ``` ### Tablet (768-1023px) ``` ┌───────────────────────────────────────┐ │ Sidebar collapsed (64px icons) │ │ │ │ [Child Switcher] │ │ │ │ [KPI1] [KPI2] │ │ [KPI3] [KPI4] │ │ │ │ [Widgets - stacked full width] │ │ │ └───────────────────────────────────────┘ ``` ### Mobile (<768px) ``` ┌─────────────────────┐ │ Topbar only │ │ [Child avatar tap] │ │ │ │ [KPIs: 2x2 grid] │ │ │ │ [Widgets: stacked] │ │ │ │ [Bottom nav] │ └─────────────────────┘ ``` Bottom nav (mobile only): ``` [Dashboard] [Attendance] [Invoices] [Messages] [More] ``` --- ## 5. DARK MODE DASHBOARD OVERRIDES | Element | Light | Dark | |---------|-------|------| | Card BG | #FFFFFF | #1E293B | | Card border | #E2E8F0 | #334155 | | Card shadow | sm | none | | KPI text | #0F172A | #F8FAFC | | KPI trend | Context color | Context color | | Widget header | #0F172A | #F8FAFC | | Widget body text | #1E293B | #E2E8F0 | | Muted text | #64748B | #94A3B8 | | Badge colors | Same | Same | | Action item overdue bg | #FEF2F2 | rgba(220,38,38,0.15) | | Invoice card border-left | #F59E0B | #FBBF24 | | Child switcher BG | #FFFFFF | #1E293B | | Child switcher dropdown | #FFFFFF | #1E293B | | Progress bar track | #E2E8F0 | #334155 | --- ## 6. DASHBOARD ACCESSIBILITY - All KPI cards: `role="link"` with `aria-label` describing content - Child switcher: `aria-expanded`, `aria-haspopup="listbox"` - Action items: `role="list"` with `role="listitem"` per item - Progress bars: `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` - Color trends: Always accompanied by text labels (not color-only) - Keyboard navigation: Tab order follows visual order - Focus ring: 2px solid #1E5FA8 on all interactive elements