codeburn/dash/src/components/DataTable.tsx
Resham Joshi 2d44aeaedb
feat(web): local React dashboard served by codeburn web (#531)
Add a Vite + React 19 + Tailwind v4 + Recharts SPA (dash/) and a 'web'
command that serves the built UI plus a local /api/usage endpoint backed
by the existing menubar aggregation. Midnight theme with CodeBurn's
orange chart ramp: hero cost, a stacked-by-model daily bar chart with a
custom tooltip and hover-dim, metric cards, by-tool and by-activity bar
lists, and top-projects and tools tables. Period and provider filters,
react-query with skeleton loading. Stays 100% local.

build:dash builds the SPA into dist/dash (shipped via package files,
served at runtime); a missing build falls back to a helpful message.
2026-06-20 16:21:25 +02:00

38 lines
1.1 KiB
TypeScript

import type { ReactNode } from 'react'
import { cn } from '@/lib/utils'
export type Column = { key: string; label: string; num?: boolean }
export function DataTable({ columns, rows }: { columns: Column[]; rows: Array<Record<string, ReactNode>> }) {
if (!rows.length) return <div className="py-8 text-center text-sm text-tertiary-foreground">No data.</div>
return (
<table className="w-full text-sm">
<thead>
<tr>
{columns.map((c) => (
<th
key={c.key}
className={cn(
'pb-2 text-[11px] font-medium uppercase tracking-wider text-tertiary-foreground',
c.num ? 'text-right' : 'text-left',
)}
>
{c.label}
</th>
))}
</tr>
</thead>
<tbody>
{rows.map((r, i) => (
<tr key={i} className="border-t border-border">
{columns.map((c) => (
<td key={c.key} className={cn('py-2 tabular-nums', c.num ? 'text-right' : 'text-left')}>
{r[c.key]}
</td>
))}
</tr>
))}
</tbody>
</table>
)
}