Next Ops Dashboard

A production-minded operations command surface built with Next.js. Revenue, checkout funnel, service health, incidents, freshness, and execution signals in one focused view.

This project distills a year of building multi-client command-center workflows, commerce monitoring, analytics summaries, lead and task operations, service status, and production briefing systems. The public application runs entirely on synthetic data and exposes clean adapter boundaries for real providers. The operating principles behind it are documented in field notes.

Why this exists

Most dashboard starters optimize for the number of charts. Operations teams need something different:

• Clear ownership and state semantics
• Visible stale or unavailable data
• A small set of decision-driving signals
• Provider credentials confined to the server
• Read-only coordination instead of another source of truth
• A useful demo with no accounts or configuration

Highlights

• Polished responsive interface with no chart dependency
• Server-rendered Next.js App Router architecture
• Synthetic demo data by default
• Typed OpsAdapter contract for external sources
• Runtime snapshot validation
• Overall health derived from the worst service state
• Independent freshness semantics
• Checkout funnel, incident, service, work, and KPI views
• JSON overview endpoint with cache policy
• Unit tests, strict TypeScript, ESLint, production build, and GitHub Actions
• No database, authentication, provider account, or secret required to explore

Run it

npm install
npm run dev

Open http://localhost:3000.

Verification:

npm run lint
npm test
npm run check
npm run build

Architecture

flowchart LR
  Providers["Sentry · Analytics · Commerce · Work"] --> Adapters["Server-only adapters"]
  Demo["Synthetic adapter"] --> Adapters
  Adapters --> Snapshot["Validated OpsSnapshot"]
  Snapshot --> Page["Server-rendered dashboard"]
  Snapshot --> Route["JSON overview route"]

Loading

Read architecture and adapter guidance.

Replace demo data

Implement the OpsAdapter interface and pass it to loadSnapshot():

export const myAdapter: OpsAdapter = {
  name: "production",
  async load() {
    return normalizedSnapshot;
  },
};

The UI never imports provider SDKs or credentials. Real adapters should use timeouts, server-only environment variables, explicit cache policy, and partial-failure semantics.

Operational principles

1. One authoritative owner per metric or record.
2. Unknown is better than fabricated healthy.
3. Staleness is visible, not silently hidden.
4. Dashboards summarize and link; they do not fork editable business records.
5. Synthetic mode is maintained as a real product path.
6. Customer and employee data never enters demo fixtures.

API

GET /api/overview returns the normalized snapshot consumed by the page. The demo route uses short public caching with stale-while-revalidate behavior.

License

MIT