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/pages/UiKit.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
 import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
@@ -17,9 +18,41 @@ import {
   DataTable,
   DateField,
   type DataColumn,
+  PageHeader,
+  EmptyState,
+  LoadingState,
+  FilterBar,
+  StatCard,
 } from "../ui";
 import { useTheme } from "../../context/ThemeContext";
 
+const BoxIcon = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+  </svg>
+);
+
+const InboxIcon = (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+  >
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+    <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </svg>
+);
+
 interface DemoRow {
   id: number;
   name: string;
@@ -53,6 +86,7 @@ export default function UiKit() {
   const [date, setDate] = useState("2026-06-06");
   const [sortBy, setSortBy] = useState("name");
   const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+  const [lastClicked, setLastClicked] = useState<string | null>(null);
 
   const onSort = (key: string) => {
     if (sortBy === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
@@ -185,6 +219,146 @@ export default function UiKit() {
               <Alert severity="info">Informace.</Alert>
             </Stack>
           </Card>
+
+          {/* ── Phase 6 primitives ── */}
+          <Card>
+            <Typography variant="h6">Kit — Phase 6 Primitives</Typography>
+
+            <SectionLabel>PageHeader — title only</SectionLabel>
+            <PageHeader title="Přehled projektů" />
+
+            <SectionLabel>PageHeader — with subtitle + actions</SectionLabel>
+            <PageHeader
+              title="Sklady"
+              subtitle="Správa skladových zásob"
+              actions={
+                <>
+                  <Button variant="outlined" color="inherit" size="small">
+                    Export
+                  </Button>
+                  <Button size="small">Nová položka</Button>
+                </>
+              }
+            />
+
+            <SectionLabel>EmptyState — icon + action</SectionLabel>
+            <EmptyState
+              icon={InboxIcon}
+              title="Žádné záznamy"
+              description="Zatím nebyly přidány žádné položky."
+              action={<Button size="small">Přidat první položku</Button>}
+            />
+
+            <SectionLabel>EmptyState — title only</SectionLabel>
+            <EmptyState title="Žádné výsledky" />
+
+            <SectionLabel>LoadingState</SectionLabel>
+            <LoadingState label="Načítám data…" />
+
+            <SectionLabel>FilterBar</SectionLabel>
+            <FilterBar>
+              <Box sx={{ width: 200 }}>
+                <TextField placeholder="Hledat…" />
+              </Box>
+              <Box sx={{ width: 160 }}>
+                <Select
+                  value={selectVal}
+                  onChange={setSelectVal}
+                  options={[
+                    { value: "a", label: "Všechny stavy" },
+                    { value: "b", label: "Aktivní" },
+                    { value: "c", label: "Uzavřené" },
+                  ]}
+                />
+              </Box>
+              <Button size="small" variant="outlined" color="inherit">
+                Resetovat
+              </Button>
+            </FilterBar>
+
+            <SectionLabel>StatCard grid — all colors</SectionLabel>
+            <Box
+              sx={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+                gap: 1.5,
+              }}
+            >
+              <StatCard label="Celkem" value="1 240" icon={BoxIcon} />
+              <StatCard
+                label="Aktivní"
+                value="38"
+                icon={BoxIcon}
+                color="primary"
+              />
+              <StatCard
+                label="Dokončené"
+                value="112"
+                icon={BoxIcon}
+                color="success"
+                footer="↑ 12 oproti minulému měsíci"
+              />
+              <StatCard
+                label="Varování"
+                value="5"
+                icon={BoxIcon}
+                color="warning"
+              />
+              <StatCard label="Chyby" value="2" icon={BoxIcon} color="error" />
+              <StatCard
+                label="Informace"
+                value="99"
+                icon={BoxIcon}
+                color="info"
+              />
+            </Box>
+
+            <SectionLabel>
+              DataTable — onRowClick + rowDanger (row 2 = danger)
+            </SectionLabel>
+            {lastClicked && (
+              <Typography
+                variant="caption"
+                color="text.secondary"
+                mb={1}
+                display="block"
+              >
+                Naposledy kliknuto: {lastClicked}
+              </Typography>
+            )}
+            <DataTable<DemoRow>
+              columns={columns}
+              rows={DEMO_ROWS}
+              rowKey={(r) => r.id}
+              onRowClick={(r) => setLastClicked(r.name)}
+              rowDanger={(r) => r.id === 2}
+              rowInactive={(r) => r.id === 3}
+            />
+
+            <SectionLabel>Button as RouterLink</SectionLabel>
+            <Stack direction="row" spacing={1}>
+              <Button
+                component={RouterLink}
+                to="/ui-kit"
+                variant="outlined"
+                color="inherit"
+                size="small"
+              >
+                RouterLink button (current page)
+              </Button>
+              <Button
+                component="a"
+                href="https://mui.com"
+                target="_blank"
+                rel="noopener"
+                size="small"
+                variant="outlined"
+                color="inherit"
+              >
+                Anchor button
+              </Button>
+            </Stack>
+          </Card>
         </Stack>
       </Box>
     </ScopedCssBaseline>