Skip to content
Framework: Vite + React + TypeScriptDifficulty: intermediate

Operations dashboard

A dark service-health dashboard with SVG sparklines, status indicators, and a filterable incident table.

A second dashboard variant focused on monitoring rather than business metrics. Each service card shows current latency, a dependency-free SVG sparkline of the last 24 samples and an error rate; the incident table filters by status. A 'simulate live updates' toggle re-samples the local data every two seconds so you can see how the UI behaves with changing values before connecting a real metrics endpoint.

  • react
  • dashboard
  • monitoring
  • charts
  • dark-mode
  • tailwind

This preview is the template's actual file tree and source code — exactly what is copied into a new project. Codexa does not publish screenshots or mock-ups of templates; run the project to see it rendered.

Files11 files

src/data.ts36 lines
export type Service = { name: string; status: "operational" | "degraded" | "down"; latencyMs: number[]; errorRate: number };
export type Incident = { id: string; title: string; service: string; status: "open" | "monitoring" | "resolved"; openedAt: string };

/** Deterministic pseudo-random series so the demo is stable between reloads. */
function series(seed: number, base: number, spread: number, n = 24) {
  const out: number[] = [];
  let x = seed;
  for (let i = 0; i < n; i++) {
    x = (x * 9301 + 49297) % 233280;
    out.push(Math.round(base + (x / 233280 - 0.5) * spread));
  }
  return out;
}

export const services: Service[] = [
  { name: "API", status: "operational", latencyMs: series(7, 120, 40), errorRate: 0.2 },
  { name: "Web", status: "operational", latencyMs: series(13, 80, 30), errorRate: 0.1 },
  { name: "Worker", status: "degraded", latencyMs: series(21, 400, 250), errorRate: 2.4 },
  { name: "Database", status: "operational", latencyMs: series(5, 12, 6), errorRate: 0 },
];

export const incidents: Incident[] = [
  { id: "INC-104", title: "Worker queue backlog above 5k jobs", service: "Worker", status: "monitoring", openedAt: "2026-05-02T08:14:00Z" },
  { id: "INC-103", title: "Elevated 5xx on /api/export", service: "API", status: "resolved", openedAt: "2026-04-29T16:40:00Z" },
  { id: "INC-102", title: "Slow dashboard loads for EU users", service: "Web", status: "resolved", openedAt: "2026-04-25T09:02:00Z" },
  { id: "INC-101", title: "Scheduled database maintenance", service: "Database", status: "resolved", openedAt: "2026-04-20T22:00:00Z" },
];

/** Simulate a new sample arriving. In a real app, fetch from your metrics endpoint instead. */
export function tick(list: Service[]): Service[] {
  return list.map((s) => {
    const last = s.latencyMs[s.latencyMs.length - 1] ?? 100;
    const next = Math.max(1, Math.round(last + (Math.random() - 0.5) * last * 0.2));
    return { ...s, latencyMs: [...s.latencyMs.slice(1), next] };
  });
}

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

PackageVersion
react^19.1.0
react-dom^19.1.0
vite^6.3.0
@vitejs/plugin-react^4.4.0
tailwindcss^4.1.0
@tailwindcss/vite^4.1.0
typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Opens at
/
Difficulty
intermediate

Projects run in an isolated sandbox with a live preview. Read the projects documentation for details on settings, snapshots and deployment.

View all
  • Framework: Vite + React + TypeScriptDifficulty: intermediate
    Featured

    Analytics dashboard

    A responsive dashboard layout with sidebar navigation, stat cards, and a data table.

    • react
    • dashboard
    • tailwind
    • table

    9 files

Need the raw data? GET /api/v1/templates/vite-react-ops-dashboard returns this template with its files.

Build on Operations dashboard

Create a free account, start from this template, and ask the AI agent to turn it into your app.