DocHub
Real-time operational dashboard with server resources, capacity planning, slice grid, and user management

Admin Dashboard

Purpose

The admin dashboard at /admin provides a real-time operational view of the entire SaaS platform. It surfaces server health, per-slice telemetry with sparklines, capacity planning estimates, and user management — everything needed to monitor and manage the live prototype.

Architecture

Access

  • URL: https://app.ipnoelp.io/admin
  • Auth: Session-based (user must have is_admin = true) or X-Admin-Key header
  • Frontend: React component AdminDashboard.tsx (~685 lines)
  • Backend: GET /admin/dashboard endpoint aggregates all data in one call

Dashboard Panels

Stats Bar (top row)

8 cards showing aggregate counts:

  • Total Users, Active Subscriptions, Trial Users
  • Assigned Slices, Available Slices, Total Slices
  • Total Contacts, Total Messages

Server Resources

Progress bars with percentages for:

  • RAM usage (used / total)
  • Swap usage
  • CPU percentage + load averages (1m, 5m, 15m)
  • Disk usage

Server telemetry sparklines from GET /admin/telemetry/server (24h default, up to 7 days).

Capacity Planning

Estimates based on current resource consumption:

  • Estimated max slices (from average RAM per slice)
  • Available disk headroom
  • “How many more users before resource limits” indicator

Slice Grid (expandable cards)

Each slice card shows at-a-glance:

  • Slice ID, port, status badge, WhatsApp connected indicator
  • User email (if assigned), phone number (if connected)
  • Container RAM, CPU %, disk usage
  • Contacts / Chats / Messages counts (queried from slice DBs)

Click to expand shows:

  • 24h sparkline charts for RAM, CPU, disk (from GET /admin/slice/:id)
  • Full app metrics breakdown
  • Last health check time
  • Container status and uptime

Users Table

Columns: email, subscription status, slice ID, phone number, last login, created date, subscription end date, Stripe customer link.

Data Flow

  1. Dashboard loads → GET /admin/dashboard
  2. Backend collects: server stats (free, top, df, uptime, loadavg), slices + latest telemetry (LATERAL join), Docker container stats, per-slice app metrics (parallel queries to wa_slice_N databases), users, counts
  3. For drill-down: GET /admin/slice/:id returns 24h telemetry history
  4. For time-series graphs: GET /admin/telemetry/server?hours=N and GET /admin/telemetry/slices?hours=N

Helper Components

Component Purpose
ProgressBar Server resource bars with percentage labels
Sparkline SVG-based mini charts for telemetry history
StatusBadge Coloured badges for slice/subscription status
StatCard Top-row aggregate number cards
WaIndicator Green/grey WhatsApp connection indicator
SliceDetailPanel Modal with 24h drill-down charts

Status

Live and operational. Auto-refreshes telemetry data. Accessible to admin user chas@omelasai.com.