# ADM-01 Admin Dashboard — Deep-Dive Specs --- ## 1. ADMIN KPI SPECIFICATIONS ### KPI 1: Total Students ``` ┌─────────────────────────────────────────┐ │ 👥 Total Students │ │ │ │ 245 │ │ ↑ +12 this month green │ │ │ │ New: 12 | Withdrawn: 3 | Net: +9 │ └─────────────────────────────────────────┘ ``` - Color: `color/secondary` - Click → ADM-09 (Students List) - Trend: compared to previous month ### KPI 2: Active Teachers ``` ┌─────────────────────────────────────────┐ │ 👨‍🏫 Active Teachers │ │ │ │ 18 │ │ ↑ +2 new green │ │ │ │ Active: 15 | Pending: 2 | Off: 1 │ └─────────────────────────────────────────┘ ``` - Color: `color/secondary` - Click → ADM-07 (Teachers List) ### KPI 3: Avg Attendance ``` ┌─────────────────────────────────────────┐ │ ✅ Avg Attendance │ │ │ │ 89% │ │ ↑ +3% vs last month green │ │ │ │ Target: 90% ██████████████████░░ 89% │ └─────────────────────────────────────────┘ ``` - Color: `color/success` - Click → ADM-18 (OPS Dashboard) ### KPI 4: Avg OPS Score ``` ┌─────────────────────────────────────────┐ │ 📊 Avg OPS Score │ │ │ │ 72% │ │ ↑ +1% vs last term amber │ │ │ │ Target: 75% ████████████████░░░░ 72% │ └─────────────────────────────────────────┘ ``` - Color: `color/warning` - Click → ADM-18 ### KPI 5: Revenue This Month ``` ┌─────────────────────────────────────────┐ │ 💰 Revenue This Month │ │ │ │ ₵ 48,500 │ │ ↑ +15% vs last month green │ │ │ │ Target: ₵ 55,000 ████████████░░░░░ │ └─────────────────────────────────────────┘ ``` - Color: `color/success` - Currency: GHS (₵) - Click → ADM-22 (Invoices) ### KPI 6: Outstanding Fees ``` ┌─────────────────────────────────────────┐ │ ⚠️ Outstanding Fees │ │ │ │ ₵ 12,300 │ │ 23 invoices overdue red │ │ │ │ Current: ₵8,100 | 30+ days: ₵4,200 │ └─────────────────────────────────────────┘ ``` - Color: `color/danger` - Click → ADM-22 (filtered to overdue) --- ## 2. ADMIN CHART SPECIFICATIONS ### CH-10: Revenue Trend (Dual Line) ```javascript { chart: { type: 'line', height: 280 }, colors: ['#22C55E', '#94A3B8'], series: [ { name: 'Realized Revenue', data: [35000, 42000, 38000, 45000, 48500, 52000] }, { name: 'Projected Revenue', data: [40000, 45000, 48000, 52000, 55000, 58000] } ], xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }, stroke: { curve: 'smooth', width: [3, 2], dashArray: [0, 5] }, yaxis: { labels: { formatter: (v) => '₵ ' + (v/1000).toFixed(0) + 'k' } }, tooltip: { y: { formatter: (v) => '₵ ' + v.toLocaleString() } } } ``` ### CH-11: Enrollment by Class (Stacked Bar) ```javascript { chart: { type: 'bar', height: 280, stacked: true }, colors: ['#1E5FA8', '#22C55E', '#F59E0B'], series: [ { name: 'JSS 1', data: [32, 30, 35] }, { name: 'JSS 2', data: [28, 30, 29] }, { name: 'JSS 3', data: [25, 28, 28] } ], xaxis: { categories: ['Term 1', 'Term 2', 'Term 3'] }, plotOptions: { bar: { borderRadius: 4, columnWidth: '60%' } } } ``` ### CH-12: School OPS Trend (Area) ```javascript { chart: { type: 'area', height: 300 }, colors: ['#1E5FA8', '#94A3B8'], series: [ { name: 'School Average', data: [65, 68, 66, 70, 72, 75] }, { name: 'National Average', data: [60, 62, 63, 65, 67, 68] } ], xaxis: { categories: ['Term 1', 'Term 2', 'Term 3', 'Term 4', 'Term 5', 'Term 6'] }, stroke: { curve: 'smooth', width: [3, 2], dashArray: [0, 5] }, fill: { type: 'gradient', gradient: { opacityFrom: 0.3, opacityTo: 0.05 } } } ``` ### CH-13: Class Rankings (Horizontal Bar) ```javascript { chart: { type: 'bar', height: 280 }, colors: ['#22C55E'], series: [{ name: 'Avg OPS', data: [78, 74, 72, 68, 65] }], xaxis: { categories: ['JSS 3A', 'JSS 2A', 'JSS 1A', 'JSS 2B', 'JSS 1B'] }, plotOptions: { bar: { horizontal: true, borderRadius: 4 } }, // Color conditional: green >75%, amber 60-75%, red <60% } ``` ### CH-14: Subject Rankings (Radial Bar) ```javascript { chart: { type: 'radialBar', height: 280 }, colors: ['#1E5FA8', '#22C55E', '#F59E0B', '#8B5CF6', '#EC4899'], series: [78, 72, 68, 75, 80], labels: ['Mathematics', 'English', 'Science', 'Social Studies', 'ICT'], plotOptions: { radialBar: { hollow: { size: '40%' } } } } ``` ### CH-15: Attendance vs OPS Correlation (Scatter) ```javascript { chart: { type: 'scatter', height: 300 }, colors: ['#1E5FA8'], series: [{ name: 'Students', data: [[92,78],[85,72],[70,55],[95,88],[60,45],...] }], xaxis: { title: 'Attendance %', min: 0, max: 100 }, yaxis: { title: 'OPS Score', min: 0, max: 100 }, markers: { size: 8 } // Trend line: linear regression overlay } ``` ### CH-16: Teacher Effectiveness (Grouped Bar) ```javascript { chart: { type: 'bar', height: 280 }, colors: ['#DC2626', '#22C55E'], series: [ { name: 'OPS Before', data: [65, 70, 60, 72, 68] }, { name: 'OPS After', data: [78, 82, 75, 85, 80] } ], xaxis: { categories: ['Dr. Mensah', 'Mrs. Aidoo', 'Mr. Ofori', 'Mrs. Opoku', 'Mr. Tetteh'] }, plotOptions: { bar: { borderRadius: 4, columnWidth: '50%' } } } ``` --- ## 3. ADMIN DASHBOARD WIDGETS ### Pending Payments Widget ``` ┌──────────────────────────────────────────────────┐ │ Pending Payments 23 invoices │ ├──────────────────────────────────────────────────┤ │ │ │ INV-2026-0045 Amara A. ₵ 1,200 45d overdue│ │ INV-2026-0038 Kofi M. ₵ 800 32d overdue│ │ INV-2026-0041 Esi B. ₵ 1,500 28d overdue│ │ INV-2026-0044 Yaa A. ₵ 950 15d overdue│ │ INV-2026-0046 Kwame D. ₵ 600 7d overdue │ │ │ │ Total overdue: ₵ 12,300 │ │ │ │ [View All Invoices →] │ └──────────────────────────────────────────────────┘ ``` ### Risk Alerts Widget ``` ┌──────────────────────────────────────────────────┐ │ ⚠ Risk Alerts 7 students │ ├──────────────────────────────────────────────────┤ │ │ │ ● Kofi M. OPS: 42% [High] ↑ worsening │ │ ● Yaa A. OPS: 48% [High] ↑ worsening │ │ ● Kwame D. Att: 52% [High] → stable │ │ ● Esi B. OPS: 55% [Medium] → stable │ │ ● Ama S. OPS: 62% [Low] ↓ improving │ │ │ │ [View All →] │ └──────────────────────────────────────────────────┘ ``` ### Recent Activity Widget ``` ┌──────────────────────────────────────────────────┐ │ Recent Activity │ ├──────────────────────────────────────────────────┤ │ │ │ ● 3 new students enrolled (today) │ │ ● 2 teacher invitations sent │ │ ● Invoice INV-2026-0045 sent to K. Asante │ │ ● Payroll June 2026 completed │ │ ● Amara A. intervention updated │ │ │ │ [View Audit Log →] │ └──────────────────────────────────────────────────┘ ``` --- ## 4. RESPONSIVE LAYOUTS ### Desktop (≥1024px) ``` ┌─────────────────────────────────────────────────┐ │ Sidebar (260px) │ Content │ │ │ [6 KPIs: 3×2 grid] │ │ │ [Charts Left | Widgets Right]│ └─────────────────────────────────────────────────┘ ``` ### Tablet (768-1023px) ``` ┌───────────────────────────────────────┐ │ Sidebar collapsed (64px) │ │ [6 KPIs: 2×3 grid] │ │ [Charts + Widgets: stacked] │ └───────────────────────────────────────┘ ``` ### Mobile (<768px) ``` ┌─────────────────────┐ │ Topbar only │ │ [6 KPIs: 2×3 grid]│ │ [Widgets: stacked] │ │ [Bottom nav] │ └─────────────────────┘ ``` Bottom nav (admin mobile): ``` [Dashboard] [Students] [Finance] [Settings] [More] ``` --- ## 5. EMPTY / LOADING / ERROR STATES ### Empty State (no data) ``` RP/EmptyState ├── Icon: layout-dashboard ├── Title: "Welcome to Admin Dashboard" ├── Description: "Set up your school to get started." └── CTA: [Create Academic Year] ``` ### Loading State ``` RP/Skeleton (6 cards, 2 rows × 3) RP/Skeleton (rect, height: 280px × 2 for charts) RP/Skeleton (rows × 5 for lists) ``` ### Error State ``` RP/Banner (danger) ├── "Failed to load dashboard data" ├── [Retry] button └── "Contact support if this persists" ``` --- ## 6. DARK MODE | Element | Light | Dark | |---------|-------|------| | KPI card BG | #FFFFFF | #1E293B | | KPI text | #0F172A | #F8FAFC | | Chart BG | transparent | transparent | | Chart grid | #E2E8F0 | #334155 | | Risk alert border | #DC2626 | #F87171 | | Pending payment row | transparent | rgba(220,38,38,0.05) | | Activity timeline dot | color/secondary | #60A5FA | | Quick action button | border #E2E8F0 | border #475569 | --- ## 7. ACCESSIBILITY - KPI cards: `role="article"` with `aria-label` - Charts: `aria-label` describing data summary - Risk alerts: `role="alert"` for critical items - Pending payments: `role="list"` with `role="listitem"` - Activity timeline: `role="log"` with `aria-live="polite"` - Keyboard: Tab order follows visual grid (left-to-right, top-to-bottom) - Focus ring: 2px solid #1E5FA8