feat(phase-6): rich super admin dashboard UI

Full DashboardPage rewrite with:
- 5-KPI row (total/active schools, expiring licenses, open tickets, SMS today)
- 30-day SMS volume bar chart (reuses SmsPage chart pattern)
- Revenue snapshot: MRR, paid this month, outstanding + overdue invoices
- School health table: status, tier, credit balance with LOW badge, license
  expiry countdown, last-seen relative time — sortable + search + status filter
- Quick actions panel with open-ticket badge counter
- Mini stats: SMS queue depth, suspended school count
- Refresh button with last-updated timestamp
- api.ts: getDashboardSchoolHealth + getDashboardRevenue
This commit is contained in:
kevin-asprec
2026-03-16 12:38:38 +08:00
parent 132290957c
commit 34f87476ff
5 changed files with 411 additions and 51 deletions

View File

@@ -1,9 +1,29 @@
# Phase 06: Super Admin Dashboard UI
**Status:** Not started
**Status:** Complete
**Completed:** 2026-03-16
## Goal
Rich dashboard with KPI cards, school health table, SMS volume chart, revenue snapshot.
## Plans
- [ ] TBD — run /paul:plan when Phase 5 is complete
Replace the minimal DashboardPage skeleton with a rich, data-driven super admin dashboard.
## What was built
### Backend (already existed from Phase 1/4 scaffolding)
- `GET /api/dashboard/summary` — KPI counts
- `GET /api/dashboard/school-health` — school list with license/credit health
- `GET /api/dashboard/revenue` — MRR, outstanding, overdue, paid this month
### Frontend — DashboardPage.vue (full rewrite)
1. **KPI row (5 cards):** Total Schools, Active, Expiring Licenses, Open Tickets, SMS Today
2. **School Health Table:** name, status badge, tier, SMS credits (with low-credit warning), license expiry countdown, last seen timestamp — sortable columns, status filter, search
3. **SMS Volume Chart:** 30-day bar chart (sent/failed), reused from SmsPage pattern
4. **Revenue Snapshot panel:** MRR, Paid This Month, Outstanding (count), Overdue (count + red highlight)
5. **Quick Actions:** Add School (→ /schools), SMS Gateway (→ /sms), Billing (→ /billing)
6. **Refresh button** with last-updated timestamp
### api.ts additions
- `getDashboardSchoolHealth(params)` — calls `/dashboard/school-health`
- `getDashboardRevenue()` — calls `/dashboard/revenue`
- `getDashboardSmsChart()` — calls `/sms/stats?days=30` (reuse existing)