feat(mui): data/form kit — Modal, ConfirmDialog, DataTable, Field/SwitchField

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/admin/ui/DataTable.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+
+export interface DataColumn<T> {
+  key: string;
+  header: string;
+  align?: "left" | "right";
+  /** Render the cell with the DM Mono numeric face. */
+  mono?: boolean;
+  render: (row: T) => ReactNode;
+}
+
+export interface DataTableProps<T> {
+  columns: DataColumn<T>[];
+  rows: T[];
+  rowKey: (row: T) => string | number;
+  rowInactive?: (row: T) => boolean;
+  empty?: ReactNode;
+}
+
+/** Dense, Soft-SaaS-styled data table. Styling only — never re-formats values. */
+export default function DataTable<T>({
+  columns,
+  rows,
+  rowKey,
+  rowInactive,
+  empty,
+}: DataTableProps<T>) {
+  if (rows.length === 0 && empty) return <>{empty}</>;
+  return (
+    <TableContainer sx={{ borderRadius: 2 }}>
+      <Table size="small" sx={{ "& td, & th": { borderColor: "divider" } }}>
+        <TableHead>
+          <TableRow>
+            {columns.map((c) => (
+              <TableCell
+                key={c.key}
+                align={c.align}
+                sx={{
+                  textTransform: "uppercase",
+                  letterSpacing: ".05em",
+                  fontSize: ".64rem",
+                  fontWeight: 700,
+                  color: "text.secondary",
+                }}
+              >
+                {c.header}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={rowKey(row)}
+              hover
+              sx={rowInactive?.(row) ? { opacity: 0.55 } : undefined}
+            >
+              {columns.map((c) => (
+                <TableCell
+                  key={c.key}
+                  align={c.align}
+                  sx={{
+                    fontSize: ".8rem",
+                    ...(c.mono ? { fontFamily: "'DM Mono', monospace" } : {}),
+                  }}
+                >
+                  {c.render(row)}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}