Files
TapTrack-Hub/.paul/phases/07-school-portal
kevin-asprec e45e63903d feat(phase-7): complete school admin portal UI
Backend (school_portal.py):
- GET /portal/sms-stats: 30/7/90-day chart, delivery rate, credit burn this month
- POST /portal/credits/request: auto-creates billing ticket for credit top-up
- GET /portal/overview: extended with days_left, sms_credit_low flag, 30-day SMS chart, full school details

PortalOverviewPage: suspension/expired banner, low-credit warning, credit meter
  with progress bar, license countdown with expiry badge, 30-day SMS sparkline
PortalBillingPage: subscription plan panel (fee, SMS cost, cycle, next billing),
  invoice table with subscription/SMS breakdown, credit top-up request form
PortalSmsPage: 30/7/90d period picker, 4-stat KPI row (sent, failed, delivery
  rate, credit burn), daily volume chart, credit snapshot with top-up link,
  paginated SMS log with status filter
PortalTicketsPage: status filter tabs (all/open/in-progress/resolved/closed),
  pagination, improved empty states
PortalProfilePage: school details panel (name, city, contact, tier, status)
  alongside existing change-password form
2026-03-16 13:21:41 +08:00
..

Phase 07: School Admin Portal UI

Status: Complete Completed: 2026-03-16

Goal

Replace the 5 portal page skeletons with fully functional school-admin views.

What was built

Backend additions to school_portal.py

  • GET /portal/sms-stats — 30-day SMS chart, delivery rate, credit burn rate, monthly breakdown
  • POST /portal/credits/request — school admin submits a credit top-up request (creates a support ticket)

Frontend pages (full rewrites)

PortalOverviewPage.vue

  • Suspension/expired banner (red alert if school is not active)
  • Credit meter: progress bar showing credits vs. threshold, LOW CREDIT warning
  • License countdown: days remaining badge, expired warning
  • 30-day SMS usage mini-chart (same bar pattern as SmsPage)
  • KPI cards: SMS Credits, SMS This Month, Open Tickets, Pending Invoices
  • Announcements banner

PortalBillingPage.vue

  • Invoice table: number, period, breakdown (subscription + SMS), total, status badge, due date
  • Credit top-up request form (opens inline, sends request to support ticket)
  • Subscription info panel (monthly fee, SMS cost/message)

PortalSmsPage.vue

  • 30-day SMS volume chart (sent/failed bars)
  • Delivery rate stat card
  • Credit burn rate (credits used this month)
  • Monthly SMS job table with status filter and pagination
  • Trigger type breakdown

PortalTicketsPage.vue

  • Status filter tabs (All / Open / In Progress / Resolved)
  • Pagination
  • Better empty state

PortalProfilePage.vue

  • School details panel (name, city, contact, tier, status)
  • Change password form (already existed — preserved)