feat(mui): kit primitives — PageHeader, EmptyState, LoadingState, FilterBar, StatCard + DataTable onRowClick/rowDanger

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

src/admin/ui/DataTable.tsx

@@ -32,6 +32,10 @@ export interface DataTableProps<T> {
   rows: T[];
   rowKey: (row: T) => string | number;
   rowInactive?: (row: T) => boolean;
+  /** When set, each row is clickable and shows a pointer cursor. */
+  onRowClick?: (row: T) => void;
+  /** When it returns true, the row is tinted with the error palette (danger highlight). */
+  rowDanger?: (row: T) => boolean;
   empty?: ReactNode;
   /** Server-sort wiring: active key (matches a column's sortKey), direction, handler. */
   sortBy?: string;
@@ -45,6 +49,8 @@ export default function DataTable<T>({
   rows,
   rowKey,
   rowInactive,
+  onRowClick,
+  rowDanger,
   empty,
   sortBy,
   sortDir,
@@ -115,7 +121,21 @@ export default function DataTable<T>({
             <TableRow
               key={rowKey(row)}
               hover
-              sx={rowInactive?.(row) ? { opacity: 0.55 } : undefined}
+              onClick={onRowClick ? () => onRowClick(row) : undefined}
+              sx={[
+                onRowClick ? { cursor: "pointer" } : {},
+                rowDanger?.(row)
+                  ? {
+                      bgcolor: "error.light",
+                      opacity: 0.88,
+                      "&:hover": {
+                        bgcolor: "error.light",
+                        filter: "brightness(0.97)",
+                      },
+                    }
+                  : {},
+                rowInactive?.(row) ? { opacity: 0.55 } : {},
+              ]}
             >
               {columns.map((c) => (
                 <TableCell