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

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

src/admin/ui/Pagination.tsx

@@ -0,0 +1,26 @@
+import Box from "@mui/material/Box";
+import MuiPagination from "@mui/material/Pagination";
+
+/** Centered pager. Renders nothing for a single page. */
+export default function Pagination({
+  page,
+  pageCount,
+  onChange,
+}: {
+  page: number;
+  pageCount: number;
+  onChange: (p: number) => void;
+}) {
+  if (pageCount <= 1) return null;
+  return (
+    <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
+      <MuiPagination
+        page={page}
+        count={pageCount}
+        onChange={(_, p) => onChange(p)}
+        color="primary"
+        shape="rounded"
+      />
+    </Box>
+  );
+}

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>;
+}

src/admin/ui/index.ts

@@ -12,3 +12,6 @@ export type { SelectOption } from "./Select";
 export { default as StatusChip } from "./StatusChip";
 export { CheckboxField } from "./Checkbox";
 export { default as Alert } from "./Alert";
+export { Tabs, TabPanel } from "./Tabs";
+export type { TabDef } from "./Tabs";
+export { default as Pagination } from "./Pagination";