feat(mui): kit — Tabs/TabPanel + Pagination

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

src/admin/ui/Tabs.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import MuiTabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+
+export interface TabDef {
+  value: string;
+  label: string;
+}
+
+/** Tab bar over MUI Tabs. Pair with <TabPanel> for the content. */
+export function Tabs({
+  value,
+  onChange,
+  tabs,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  tabs: TabDef[];
+}) {
+  return (
+    <MuiTabs
+      value={value}
+      onChange={(_, v) => onChange(v)}
+      sx={{
+        borderBottom: 1,
+        borderColor: "divider",
+        minHeight: 44,
+        "& .MuiTab-root": { textTransform: "none", fontWeight: 600 },
+      }}
+    >
+      {tabs.map((t) => (
+        <Tab key={t.value} value={t.value} label={t.label} />
+      ))}
+    </MuiTabs>
+  );
+}
+
+/** Renders children only when its value matches the current tab. */
+export function TabPanel({
+  value,
+  current,
+  children,
+}: {
+  value: string;
+  current: string;
+  children: ReactNode;
+}) {
+  if (value !== current) return null;
+  return <Box sx={{ pt: 2.5 }}>{children}</Box>;
+}