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
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.
| Package | Version |
|---|---|
| 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.
More dashboards templates
View all- Framework: Vite + React + TypeScriptDifficulty: intermediateFeatured
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.