feat(mui): showcase Phase 3 kit components in /ui-kit (Select, Tabs, StatusChip, Pagination, sortable DataTable, DateField, Checkbox, Alert)

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

src/admin/pages/UiKit.tsx

@@ -1,13 +1,86 @@
+import { useState } from "react";
 import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import Chip from "@mui/material/Chip";
+import {
-import { Button, Card, TextField } from "../ui";
+  Button,
+  Card,
+  TextField,
+  Select,
+  StatusChip,
+  Tabs,
+  TabPanel,
+  Pagination,
+  CheckboxField,
+  Alert,
+  DataTable,
+  DateField,
+  type DataColumn,
+} from "../ui";
 import { useTheme } from "../../context/ThemeContext";
 
+interface DemoRow {
+  id: number;
+  name: string;
+  qty: number;
+}
+const DEMO_ROWS: DemoRow[] = [
+  { id: 1, name: "Beta", qty: 30 },
+  { id: 2, name: "Alfa", qty: 10 },
+  { id: 3, name: "Gama", qty: 20 },
+];
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <Typography
+      variant="overline"
+      color="text.secondary"
+      display="block"
+      mt={2}
+    >
+      {children}
+    </Typography>
+  );
+}
+
 export default function UiKit() {
   const { theme, toggleTheme } = useTheme();
+  const [selectVal, setSelectVal] = useState("a");
+  const [tab, setTab] = useState("one");
+  const [page, setPage] = useState(2);
+  const [checked, setChecked] = useState(true);
+  const [date, setDate] = useState("2026-06-06");
+  const [sortBy, setSortBy] = useState("name");
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+
+  const onSort = (key: string) => {
+    if (sortBy === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    else {
+      setSortBy(key);
+      setSortDir("asc");
+    }
+  };
+  const sortedRows = [...DEMO_ROWS].sort((a, b) => {
+    const cmp = String(a[sortBy as keyof DemoRow]).localeCompare(
+      String(b[sortBy as keyof DemoRow]),
+      "cs",
+      { numeric: true },
+    );
+    return sortDir === "asc" ? cmp : -cmp;
+  });
+  const columns: DataColumn<DemoRow>[] = [
+    { key: "name", header: "Název", sortKey: "name", render: (r) => r.name },
+    {
+      key: "qty",
+      header: "Množství",
+      align: "right",
+      mono: true,
+      sortKey: "qty",
+      render: (r) => r.qty,
+    },
+  ];
+
   return (
     <ScopedCssBaseline>
       <Box sx={{ p: 4, minHeight: "100vh", bgcolor: "background.default" }}>
@@ -18,7 +91,7 @@ export default function UiKit() {
           </Button>
         </Stack>
 
-        <Stack spacing={3} sx={{ maxWidth: 520 }}>
+        <Stack spacing={3} sx={{ maxWidth: 640 }}>
           <Card>
             <Typography variant="h6" gutterBottom>
               Faktury
@@ -27,8 +100,8 @@ export default function UiKit() {
               12 vystavených tento měsíc
             </Typography>
             <Stack direction="row" spacing={1} mb={2}>
-              <Chip label="Zaplaceno" color="success" size="small" />
+              <StatusChip label="Zaplaceno" color="success" />
-              <Chip label="Po splatnosti" color="error" size="small" />
+              <StatusChip label="Po splatnosti" color="error" />
             </Stack>
             <TextField
               label="Hledat fakturu"
@@ -38,6 +111,80 @@ export default function UiKit() {
               <Button>Nová faktura</Button>
             </Box>
           </Card>
+
+          <Card>
+            <Typography variant="h6">Kit — Phase 3</Typography>
+
+            <SectionLabel>Select</SectionLabel>
+            <Select
+              value={selectVal}
+              onChange={setSelectVal}
+              options={[
+                { value: "a", label: "Možnost A" },
+                { value: "b", label: "Možnost B" },
+                { value: "c", label: "Možnost C" },
+              ]}
+            />
+
+            <SectionLabel>StatusChip</SectionLabel>
+            <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
+              <StatusChip label="default" />
+              <StatusChip label="success" color="success" />
+              <StatusChip label="error" color="error" />
+              <StatusChip label="warning" color="warning" />
+              <StatusChip label="info" color="info" />
+              <StatusChip
+                label="clickable"
+                color="success"
+                onClick={() => {}}
+              />
+            </Stack>
+
+            <SectionLabel>Tabs</SectionLabel>
+            <Tabs
+              value={tab}
+              onChange={setTab}
+              tabs={[
+                { value: "one", label: "První" },
+                { value: "two", label: "Druhá" },
+              ]}
+            />
+            <TabPanel value="one" current={tab}>
+              <Typography>Obsah první záložky.</Typography>
+            </TabPanel>
+            <TabPanel value="two" current={tab}>
+              <Typography>Obsah druhé záložky.</Typography>
+            </TabPanel>
+
+            <SectionLabel>Sortable DataTable + Pagination</SectionLabel>
+            <DataTable<DemoRow>
+              columns={columns}
+              rows={sortedRows}
+              rowKey={(r) => r.id}
+              sortBy={sortBy}
+              sortDir={sortDir}
+              onSort={onSort}
+            />
+            <Pagination page={page} pageCount={5} onChange={setPage} />
+
+            <SectionLabel>DateField + Checkbox</SectionLabel>
+            <DateField value={date} onChange={setDate} label="Datum" />
+            <Box>
+              <CheckboxField
+                label="Souhlasím"
+                checked={checked}
+                onChange={setChecked}
+              />
+            </Box>
+
+            <SectionLabel>Alert</SectionLabel>
+            <Stack spacing={1}>
+              <Alert severity="success">Úspěšně uloženo.</Alert>
+              <Alert severity="error">Něco se pokazilo.</Alert>
+              <Alert severity="warning">Pozor na toto.</Alert>
+              <Alert severity="info">Informace.</Alert>
+            </Stack>
+          </Card>
         </Stack>
       </Box>
     </ScopedCssBaseline>