Skip to main content

Admin Dashboard — Application Logic

Status: populated Owner: Platform Engineering (Frontend) Last updated: 2026-04-18

1. Authentication Flow

Sign-In

  1. /login page renders Firebase Auth email + password form.
  2. signInWithEmailAndPassword called via Firebase client SDK.
  3. Firebase ID token POSTed to /api/auth/login BFF route.
  4. BFF calls GET /v1/internal/auth/me with the Firebase ID token as Bearer.
  5. auth-service verifies admin custom claim. If missing, login is rejected with HTTP 403.
  6. Platform JWT + refresh token returned; BFF sets httpOnly; Secure; SameSite=Strict cookies.
  7. User redirected to /dashboard.

Session Guard (Middleware)

middleware.ts protects all routes under /(admin). It:

  • Verifies JWT expiry and admin role claim.
  • On expiry: calls /api/auth/refresh silently; 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 AreaChart with three stacked areas (sent, delivered, failed). 24 hourly data points.
  • Delivery breakdown: Recharts PieChart with 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

  1. "Add Operator" button opens a multi-section modal.
  2. Sections: Connection (host, port, systemId, password, bindType), Throughput & Priority (TPS, priority), Status.
  3. Password field uses a masked input; never shown after creation.
  4. On submit: POST /api/operators.
  5. Success: modal closes; list re-fetches.

Edit Operator

  1. "Edit" button opens the same modal pre-populated with existing data (except password field — left blank means no change).
  2. 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.