Admin Dashboard — Application Logic
Status: populated Owner: Platform Engineering (Frontend) Last updated: 2026-04-18
1. Authentication Flow
Sign-In
/loginpage renders Firebase Auth email + password form.signInWithEmailAndPasswordcalled via Firebase client SDK.- Firebase ID token POSTed to
/api/auth/loginBFF route. - BFF calls
GET /v1/internal/auth/mewith the Firebase ID token as Bearer. - auth-service verifies
admincustom claim. If missing, login is rejected with HTTP 403. - Platform JWT + refresh token returned; BFF sets
httpOnly; Secure; SameSite=Strictcookies. - User redirected to
/dashboard.
Session Guard (Middleware)
middleware.ts protects all routes under /(admin). It:
- Verifies JWT expiry and
adminrole claim. - On expiry: calls
/api/auth/refreshsilently; rotates cookies. - On failure: redirects to
/login?redirect=<path>.
2. Real-Time Dashboard (/dashboard)
Initial Render
Server component fetches all four data sources in parallel on first load:
const [summary, throughput, breakdown, topOperators] = await Promise.all([
fetchSummary(),
fetchThroughput({ range: '24h', interval: '1h' }),
fetchDeliveryBreakdown(),
fetchTopOperators({ limit: 5 }),
])
Client-Side Polling
After hydration, a useEffect sets a 30-second interval that calls GET /api/metrics.
- On response: chart data and metric cards are updated in-place.
- On error: a toast shows "Metrics refresh failed" but stale data remains visible.
- Polling pauses when the browser tab is hidden (
document.visibilityState === 'hidden'); resumes on visibility change.
Charts
- Throughput chart: Recharts
AreaChartwith three stacked areas (sent, delivered, failed). 24 hourly data points. - Delivery breakdown: Recharts
PieChartwith four segments and legend. - Top-5 operators table: Static table; refreshed on each poll cycle.
Alert Banners
If MetricsSummary.alertCount > 0, fetches GET /v1/internal/health/services and renders one banner per degraded/down service. Banners are dismissible per session (stored in sessionStorage).
3. Operator Management (/operators)
List
Server component fetches GET /v1/internal/operators. Renders a table with: name, host:port, bindType, throughput, status, connectionState badge.
Create Operator
- "Add Operator" button opens a multi-section modal.
- Sections: Connection (host, port, systemId, password, bindType), Throughput & Priority (TPS, priority), Status.
- Password field uses a masked input; never shown after creation.
- On submit:
POST /api/operators. - Success: modal closes; list re-fetches.
Edit Operator
- "Edit" button opens the same modal pre-populated with existing data (except password field — left blank means no change).
PUT /api/operators/{operatorId}.
Delete Operator
Confirmation dialog: "Deleting this operator will remove it from all active routing rules. Are you sure?" → DELETE /api/operators/{operatorId}.
Health Check
Each operator row has a live connection status badge fetched from GET /v1/internal/operators/{operatorId}/health (polled every 30s alongside dashboard metrics).
4. Routing Rules (/routing)
Drag-and-drop rule priority reordering using @dnd-kit/sortable. Reordering calls POST /v1/internal/routing/rules/reorder with the new ordered list of ruleIds.
Rule conditions editor: a dynamic form where admins add condition rows (type: prefix/country/accountTier, value input). Each condition renders as a human-readable pill.
5. Cross-Tenant Message Logs (/messages)
Filter panel includes: tenant selector (dropdown of all tenants), account selector (filtered by selected tenant), plus the standard filters (from, to, status, date range, operatorId).
Tenant and account selectors are loaded server-side on initial render. Filter state serialized to URL params.
6. User Management (/users)
Table of all platform users. Actions:
- Suspend:
PUT /v1/internal/users/{userId}/status { status: 'suspended' } - Reactivate:
PUT /v1/internal/users/{userId}/status { status: 'active' } - Delete:
DELETE /v1/internal/users/{userId}— with confirmation dialog; irreversible.
Search by email or userId.
7. System Health Page (/health)
Grid of service health cards. Each card shows: service name, status badge (healthy/degraded/down), last latency, last checked timestamp, and optional diagnostic detail. Refreshed every 30 seconds alongside dashboard polling.
8. Settings (/settings)
Platform configuration panel. Currently:
- Rate limit tier overrides (per-account, per-operator)
- Feature flag toggles
- Notification template editor (plain text SMS templates for system notifications)
Changes call PUT /v1/internal/settings/{key} on the relevant backend service. Each setting change shows a confirmation dialog before submission.