Data GridData Grid

"use client";

import { DataGrid, type DataGridColumn } from "@/components/ui/notchset/data-grid";

type EvalCase = { id: string; input: string; score: number; status: string };

const columns: DataGridColumn<EvalCase>[] = [
  { key: "id", label: "CASE", width: 92 },
  { key: "input", label: "INPUT", width: 260, editable: true },
  { key: "score", label: "SCORE", width: 80, type: "number", editable: true, min: 0, max: 100 },
  { key: "status", label: "STATUS", width: 92, dot: (r) => (r.status === "PASS" ? "ink" : "signal") },
];
const cases: EvalCase[] = [
  { id: "pc-0001", input: "Summarise the migration evals", score: 91, status: "PASS" },
  { id: "pc-0002", input: "Find the cheapest model for triage", score: 72, status: "FAIL" },
];
// Stable functions: the grid rebuilds its view when they change.
const rowId = (r: EvalCase) => r.id;
const derive = (r: EvalCase) => ({ ...r, status: r.score >= 80 ? "PASS" : "FAIL" });

// Edits, undos and redos arrive here once the grid shows them: save them to your API.
export function EvalCases({ saveScore }: { saveScore: (caseId: string, score: number) => void }) {
  return (
    <DataGrid
      columns={columns}
      rows={cases}
      rowId={rowId}
      derive={derive}
      csvName="cases.csv"
      onCellChange={(change) => {
        if (change.key === "score") saveScore(change.rowId, Number(change.value));
      }}
    />
  );
}