From 859ae1a45862d1ec83a335be221dac6c11fc9b0b Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sat, 6 Jun 2026 19:16:42 +0200
Subject: [PATCH] feat(mui): dev-only /ui-kit showcase proving the theme +
 data-theme bridge

Adds src/admin/pages/UiKit.tsx and registers a DEV-only <Route path="ui-kit">
sibling to <Route path="login">, outside the AdminLayout shell. The lazy import
uses the ternary `import.meta.env.DEV ? lazy(...) : null` pattern so Vite/Rolldown
evaluates the condition at build time and the UiKit chunk is entirely absent from
production bundles (confirmed: no UiKit-*.js in dist-client/assets after build:client).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/AdminApp.tsx    |  4 ++++
 src/admin/pages/UiKit.tsx | 45 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 src/admin/pages/UiKit.tsx

diff --git a/src/admin/AdminApp.tsx b/src/admin/AdminApp.tsx
index 1d84b3d..1414f4d 100644
--- a/src/admin/AdminApp.tsx
+++ b/src/admin/AdminApp.tsx
@@ -82,6 +82,7 @@ const WarehouseReports = lazy(() => import("./pages/WarehouseReports"));
 const WarehouseSuppliers = lazy(() => import("./pages/WarehouseSuppliers"));
 const WarehouseLocations = lazy(() => import("./pages/WarehouseLocations"));
 const WarehouseCategories = lazy(() => import("./pages/WarehouseCategories"));
+const UiKit = import.meta.env.DEV ? lazy(() => import("./pages/UiKit")) : null;
 
 export default function AdminApp() {
   return (
@@ -100,6 +101,9 @@ export default function AdminApp() {
               >
                 <Routes>
                   <Route path="login" element={<Login />} />
+                  {import.meta.env.DEV && UiKit && (
+                    <Route path="ui-kit" element={<UiKit />} />
+                  )}
                   <Route element={<AdminLayout />}>
                     <Route index element={<Dashboard />} />
                     <Route path="users" element={<Users />} />
diff --git a/src/admin/pages/UiKit.tsx b/src/admin/pages/UiKit.tsx
new file mode 100644
index 0000000..60cac50
--- /dev/null
+++ b/src/admin/pages/UiKit.tsx
@@ -0,0 +1,45 @@
+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 { Button, Card, TextField } from "../ui";
+import { useTheme } from "../../context/ThemeContext";
+
+export default function UiKit() {
+  const { theme, toggleTheme } = useTheme();
+  return (
+    <ScopedCssBaseline>
+      <Box sx={{ p: 4, minHeight: "100vh", bgcolor: "background.default" }}>
+        <Stack direction="row" alignItems="center" spacing={2} mb={3}>
+          <Typography variant="h4">UI Kit</Typography>
+          <Button color="inherit" variant="outlined" onClick={toggleTheme}>
+            Theme: {theme}
+          </Button>
+        </Stack>
+
+        <Stack spacing={3} sx={{ maxWidth: 520 }}>
+          <Card>
+            <Typography variant="h6" gutterBottom>
+              Faktury
+            </Typography>
+            <Typography color="text.secondary" gutterBottom>
+              12 vystavených tento měsíc
+            </Typography>
+            <Stack direction="row" spacing={1} mb={2}>
+              <Chip label="Zaplaceno" color="success" size="small" />
+              <Chip label="Po splatnosti" color="error" size="small" />
+            </Stack>
+            <TextField
+              label="Hledat fakturu"
+              placeholder="Číslo nebo klient…"
+            />
+            <Box mt={2}>
+              <Button>Nová faktura</Button>
+            </Box>
+          </Card>
+        </Stack>
+      </Box>
+    </ScopedCssBaseline>
+  );
+}