wcz-test 2.13.0 → 3.0.0

package/dist/index.js

@@ -42,7 +42,7 @@ var require_react_is_production_min = __commonJS({
     var p = b ? Symbol.for("react.suspense") : 60113;
     var q = b ? Symbol.for("react.suspense_list") : 60120;
     var r = b ? Symbol.for("react.memo") : 60115;
-    var t = b ? Symbol.for("react.lazy") : 60116;
+    var t2 = b ? Symbol.for("react.lazy") : 60116;
     var v = b ? Symbol.for("react.block") : 60121;
     var w = b ? Symbol.for("react.fundamental") : 60117;
     var x = b ? Symbol.for("react.responder") : 60118;
@@ -64,7 +64,7 @@ var require_react_is_production_min = __commonJS({
                 switch (a = a && a.$$typeof, a) {
                   case k:
                   case n:
-                  case t:
+                  case t2:
                   case r:
                   case h:
                     return a;
@@ -87,7 +87,7 @@ var require_react_is_production_min = __commonJS({
     exports.Element = c;
     exports.ForwardRef = n;
     exports.Fragment = e;
-    exports.Lazy = t;
+    exports.Lazy = t2;
     exports.Memo = r;
     exports.Portal = d;
     exports.Profiler = g;
@@ -113,7 +113,7 @@ var require_react_is_production_min = __commonJS({
       return z2(a) === e;
     };
     exports.isLazy = function(a) {
-      return z2(a) === t;
+      return z2(a) === t2;
     };
     exports.isMemo = function(a) {
       return z2(a) === r;
@@ -131,7 +131,7 @@ var require_react_is_production_min = __commonJS({
       return z2(a) === p;
     };
     exports.isValidElementType = function(a) {
-      return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
+      return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t2 || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
     };
     exports.typeOf = z2;
   }
@@ -1063,9 +1063,45 @@ var PageContainer = (props) => {
   );
 };
 
+// src/components/file/Dropzone.tsx
+import CloudUpload from "@mui/icons-material/CloudUpload";
+import { Paper, Typography as Typography2, useTheme } from "@mui/material";
+import { useDropzone } from "react-dropzone";
+import { useTranslation } from "react-i18next";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var baseStyle = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  padding: "20px",
+  borderWidth: 2,
+  borderRadius: 2,
+  borderStyle: "dashed",
+  outline: "none",
+  transition: "border .24s ease-in-out",
+  cursor: "pointer"
+};
+var Dropzone = ({ sx, ...props }) => {
+  const { getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } = useDropzone(props);
+  const { t: t2 } = useTranslation();
+  const theme = useTheme();
+  const style = {
+    ...baseStyle,
+    ...isFocused ? { borderColor: theme.palette.primary.main } : {},
+    ...isDragAccept ? { borderColor: theme.palette.success.main } : {},
+    ...isDragReject ? { borderColor: theme.palette.error.main } : {}
+  };
+  return /* @__PURE__ */ jsxs2(Paper, { variant: "outlined", ...getRootProps({ style }), sx, children: [
+    /* @__PURE__ */ jsx3("input", { ...getInputProps(), style: { display: "none" } }),
+    /* @__PURE__ */ jsx3(CloudUpload, {}),
+    /* @__PURE__ */ jsx3(Typography2, { children: t2("Layout.File.DragSomeFilesHereOrClickToSelectThem") })
+  ] });
+};
+
 // src/components/data-grid/ChipInputCell.tsx
 import { Chip, Stack as Stack2 } from "@mui/material";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var isArray = (value) => Array.isArray(value);
 var ChipInputCell = ({ params, slotProps, getLabel }) => {
   if (!params.value) return null;
@@ -1074,107 +1110,107 @@ var ChipInputCell = ({ params, slotProps, getLabel }) => {
     return value;
   };
   if (isArray(params.value))
-    return /* @__PURE__ */ jsx3(Stack2, { direction: "row", alignItems: "center", gap: 1, sx: { overflowX: "auto", height: "100%", width: params.colDef.computedWidth }, children: params.value.map(
-      (value, index) => /* @__PURE__ */ jsx3(Chip, { label: getLabelValue(value), ...slotProps }, `${index + 1}-chip-input-cell`)
+    return /* @__PURE__ */ jsx4(Stack2, { direction: "row", alignItems: "center", gap: 1, sx: { overflowX: "auto", height: "100%", width: params.colDef.computedWidth }, children: params.value.map(
+      (value, index) => /* @__PURE__ */ jsx4(Chip, { label: getLabelValue(value), ...slotProps }, `${index + 1}-chip-input-cell`)
     ) });
-  return /* @__PURE__ */ jsx3(Chip, { label: getLabelValue(params.value), ...slotProps });
+  return /* @__PURE__ */ jsx4(Chip, { label: getLabelValue(params.value), ...slotProps });
 };
 
 // src/components/data-grid/EditableColumnHeader.tsx
-import { Edit } from "@mui/icons-material";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import Edit from "@mui/icons-material/Edit";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var EditableColumnHeader = ({ colDef }) => {
-  return /* @__PURE__ */ jsx4(TypographyWithIcon, { endIcon: /* @__PURE__ */ jsx4(Edit, { color: "disabled", fontSize: "small" }), variant: "body2", className: "MuiDataGrid-columnHeaderTitle", children: colDef.headerName });
+  return /* @__PURE__ */ jsx5(TypographyWithIcon, { endIcon: /* @__PURE__ */ jsx5(Edit, { color: "disabled", fontSize: "small" }), variant: "body2", className: "MuiDataGrid-columnHeaderTitle", children: colDef.headerName });
 };
 
 // src/components/router/RouterButton.tsx
 import { Button } from "@mui/material";
 import { createLink } from "@tanstack/react-router";
 import React from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var Component = React.forwardRef(function ButtonComponent(props, reference) {
-  return /* @__PURE__ */ jsx5(Button, { ref: reference, component: "a", ...props });
+  return /* @__PURE__ */ jsx6(Button, { ref: reference, component: "a", ...props });
 });
 var CreatedComponent = createLink(Component);
 var RouterButton = (props) => {
-  return /* @__PURE__ */ jsx5(CreatedComponent, { preload: "intent", ...props });
+  return /* @__PURE__ */ jsx6(CreatedComponent, { preload: "intent", ...props });
 };
 
 // src/components/router/RouterGridActionsCellItem.tsx
 import { GridActionsCellItem } from "@mui/x-data-grid-premium";
 import { createLink as createLink2 } from "@tanstack/react-router";
 import React2 from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Component2 = React2.forwardRef(
   function GridActionsCellItemComponent(props, reference) {
-    return /* @__PURE__ */ jsx6(GridActionsCellItem, { ref: reference, component: "a", ...props });
+    return /* @__PURE__ */ jsx7(GridActionsCellItem, { ref: reference, component: "a", ...props });
   }
 );
 var CreatedComponent2 = createLink2(Component2);
 var RouterGridActionsCellItem = (props) => {
-  return /* @__PURE__ */ jsx6(CreatedComponent2, { preload: "intent", ...props });
+  return /* @__PURE__ */ jsx7(CreatedComponent2, { preload: "intent", ...props });
 };
 
 // src/components/router/RouterIconButton.tsx
 import { IconButton } from "@mui/material";
 import { createLink as createLink3 } from "@tanstack/react-router";
 import React3 from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Component3 = React3.forwardRef(function IconButtonComponent(props, reference) {
-  return /* @__PURE__ */ jsx7(IconButton, { ref: reference, component: "a", ...props });
+  return /* @__PURE__ */ jsx8(IconButton, { ref: reference, component: "a", ...props });
 });
 var CreatedComponent3 = createLink3(Component3);
 var RouterIconButton = (props) => {
-  return /* @__PURE__ */ jsx7(CreatedComponent3, { preload: "intent", ...props });
+  return /* @__PURE__ */ jsx8(CreatedComponent3, { preload: "intent", ...props });
 };
 
 // src/components/router/RouterLink.tsx
 import { Link } from "@mui/material";
 import { createLink as createLink4 } from "@tanstack/react-router";
 import React4 from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Component4 = React4.forwardRef(function LinkComponent(props, reference) {
-  return /* @__PURE__ */ jsx8(Link, { ref: reference, ...props });
+  return /* @__PURE__ */ jsx9(Link, { ref: reference, ...props });
 });
 var CreatedComponent4 = createLink4(Component4);
 var RouterLink = (props) => {
-  return /* @__PURE__ */ jsx8(CreatedComponent4, { preload: "intent", ...props });
+  return /* @__PURE__ */ jsx9(CreatedComponent4, { preload: "intent", ...props });
 };
 
 // src/components/router/RouterTab.tsx
 import { Tab } from "@mui/material";
 import { createLink as createLink5 } from "@tanstack/react-router";
 import React5 from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Component5 = React5.forwardRef(function TabComponent(props, reference) {
-  return /* @__PURE__ */ jsx9(Tab, { ref: reference, component: "a", ...props });
+  return /* @__PURE__ */ jsx10(Tab, { ref: reference, component: "a", ...props });
 });
 var CreatedComponent5 = createLink5(Component5);
 var RouterTab = (props) => {
-  return /* @__PURE__ */ jsx9(CreatedComponent5, { preload: "intent", ...props });
+  return /* @__PURE__ */ jsx10(CreatedComponent5, { preload: "intent", ...props });
 };
 
 // src/components/router/RouterNotFound.tsx
-import { Box, Divider, Typography as Typography2 } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Box, Divider, Typography as Typography3 } from "@mui/material";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 function RouterNotFound() {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsx10(Box, { height: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", px: 2, children: /* @__PURE__ */ jsxs2(Box, { display: "flex", alignItems: "center", mb: 4, children: [
-    /* @__PURE__ */ jsx10(Typography2, { variant: "h3", component: "span", fontWeight: 500, sx: { lineHeight: 1 }, children: "404" }),
-    /* @__PURE__ */ jsx10(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 3 } }),
-    /* @__PURE__ */ jsx10(Typography2, { variant: "h5", component: "span", children: t("Layout.ThisPageCouldNotBeFound") })
+  const { t: t2 } = useTranslation2();
+  return /* @__PURE__ */ jsx11(Box, { height: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", px: 2, children: /* @__PURE__ */ jsxs3(Box, { display: "flex", alignItems: "center", mb: 4, children: [
+    /* @__PURE__ */ jsx11(Typography3, { variant: "h3", component: "span", fontWeight: 500, sx: { lineHeight: 1 }, children: "404" }),
+    /* @__PURE__ */ jsx11(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 3 } }),
+    /* @__PURE__ */ jsx11(Typography3, { variant: "h5", component: "span", children: t2("Layout.ThisPageCouldNotBeFound") })
   ] }) });
 }
 
 // src/components/router/RouterError.tsx
-import { Box as Box2, Divider as Divider2, Typography as Typography3 } from "@mui/material";
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Box as Box2, Divider as Divider2, Typography as Typography4 } from "@mui/material";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var RouterError = ({ error }) => {
-  return /* @__PURE__ */ jsx11(Box2, { height: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", px: 2, children: /* @__PURE__ */ jsxs3(Box2, { display: "flex", alignItems: "center", mb: 4, children: [
-    /* @__PURE__ */ jsx11(Typography3, { variant: "h3", component: "span", fontWeight: 500, sx: { lineHeight: 1 }, children: error.name || "500" }),
-    /* @__PURE__ */ jsx11(Divider2, { orientation: "vertical", flexItem: true, sx: { mx: 3 } }),
-    /* @__PURE__ */ jsx11(Typography3, { variant: "h5", component: "span", children: error.message })
+  return /* @__PURE__ */ jsx12(Box2, { height: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", px: 2, children: /* @__PURE__ */ jsxs4(Box2, { display: "flex", alignItems: "center", mb: 4, children: [
+    /* @__PURE__ */ jsx12(Typography4, { variant: "h3", component: "span", fontWeight: 500, sx: { lineHeight: 1 }, children: error.name || "500" }),
+    /* @__PURE__ */ jsx12(Divider2, { orientation: "vertical", flexItem: true, sx: { mx: 3 } }),
+    /* @__PURE__ */ jsx12(Typography4, { variant: "h5", component: "span", children: error.message })
   ] }) });
 };
 
@@ -1185,8 +1221,8 @@ import { LinearProgress, useMediaQuery } from "@mui/material";
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
     for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+      var t2 = arguments[e];
+      for (var r in t2) ({}).hasOwnProperty.call(t2, r) && (n[r] = t2[r]);
     }
     return n;
   }, _extends.apply(null, arguments);
@@ -1195,12 +1231,12 @@ function _extends() {
 // node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
-  var t = {};
+  var t2 = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
     if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
+    t2[n] = r[n];
   }
-  return t;
+  return t2;
 }
 
 // node_modules/@mui/x-date-pickers/esm/LocalizationProvider/LocalizationProvider.js
@@ -1209,17 +1245,18 @@ import * as React6 from "react";
 import { useThemeProps } from "@mui/material/styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 var _excluded = ["localeText"];
-var MuiPickersAdapterContext = /* @__PURE__ */ React6.createContext(null);
-if (process.env.NODE_ENV !== "production") MuiPickersAdapterContext.displayName = "MuiPickersAdapterContext";
+var PickerAdapterContext = /* @__PURE__ */ React6.createContext(null);
+if (process.env.NODE_ENV !== "production") PickerAdapterContext.displayName = "PickerAdapterContext";
 var LocalizationProvider = function LocalizationProvider2(inProps) {
   const {
     localeText: inLocaleText
   } = inProps, otherInProps = _objectWithoutPropertiesLoose(inProps, _excluded);
   const {
-    utils: parentUtils,
+    adapter: parentAdapter,
     localeText: parentLocaleText
-  } = React6.useContext(MuiPickersAdapterContext) ?? {
+  } = React6.useContext(PickerAdapterContext) ?? {
     utils: void 0,
+    adapter: void 0,
     localeText: void 0
   };
   const props = useThemeProps({
@@ -1237,41 +1274,42 @@ var LocalizationProvider = function LocalizationProvider2(inProps) {
     localeText: themeLocaleText
   } = props;
   const localeText = React6.useMemo(() => _extends({}, themeLocaleText, parentLocaleText, inLocaleText), [themeLocaleText, parentLocaleText, inLocaleText]);
-  const utils = React6.useMemo(() => {
+  const adapter = React6.useMemo(() => {
     if (!DateAdapter) {
-      if (parentUtils) {
-        return parentUtils;
+      if (parentAdapter) {
+        return parentAdapter;
       }
       return null;
     }
-    const adapter = new DateAdapter({
+    const dateAdapter = new DateAdapter({
       locale: adapterLocale,
       formats: dateFormats,
       instance: dateLibInstance
     });
-    if (!adapter.isMUIAdapter) {
+    if (!dateAdapter.isMUIAdapter) {
       throw new Error(["MUI X: The date adapter should be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`, not from `@date-io`", "For example, `import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'` instead of `import AdapterDayjs from '@date-io/dayjs'`", "More information on the installation documentation: https://mui.com/x/react-date-pickers/quickstart/#installation"].join(`
 `));
     }
-    return adapter;
-  }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentUtils]);
+    return dateAdapter;
+  }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentAdapter]);
   const defaultDates = React6.useMemo(() => {
-    if (!utils) {
+    if (!adapter) {
       return null;
     }
     return {
-      minDate: utils.date("1900-01-01T00:00:00.000"),
-      maxDate: utils.date("2099-12-31T00:00:00.000")
+      minDate: adapter.date("1900-01-01T00:00:00.000"),
+      maxDate: adapter.date("2099-12-31T00:00:00.000")
     };
-  }, [utils]);
+  }, [adapter]);
   const contextValue = React6.useMemo(() => {
     return {
-      utils,
+      utils: adapter,
+      adapter,
       defaultDates,
       localeText
     };
-  }, [defaultDates, utils, localeText]);
-  return /* @__PURE__ */ _jsx(MuiPickersAdapterContext.Provider, {
+  }, [defaultDates, adapter, localeText]);
+  return /* @__PURE__ */ _jsx(PickerAdapterContext.Provider, {
     value: contextValue,
     children
   });
@@ -1630,10 +1668,10 @@ var AdapterDayjs = class {
     };
     this.expandFormat = (format) => {
       const localeFormats = this.getLocaleFormats();
-      const t = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, a, b) => a || b.slice(1));
+      const t2 = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, a, b) => a || b.slice(1));
       return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (_, a, b) => {
         const B = b && b.toUpperCase();
-        return a || localeFormats[b] || t(localeFormats[B]);
+        return a || localeFormats[b] || t2(localeFormats[B]);
       });
     };
     this.isValid = (value) => {
@@ -1840,17 +1878,11 @@ import { useRouterState } from "@tanstack/react-router";
 import { DashboardLayout } from "@toolpad/core/DashboardLayout";
 import { TanStackRouterAppProvider } from "@toolpad/core/tanstack-router";
 import { NotificationsProvider } from "@toolpad/core/useNotifications";
-import i18n from "i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
-import HttpBackend from "i18next-http-backend";
-import { initReactI18next, useTranslation as useTranslation5 } from "react-i18next";
-import { z } from "zod";
-import { zodI18nMap } from "zod-i18n-map";
-import zodCsTranslations from "zod-i18n-map/locales/cs/zod.json";
-import zodEnTranslations from "zod-i18n-map/locales/en/zod.json";
+import { useState as useState2 } from "react";
+import { I18nextProvider, useTranslation as useTranslation5 } from "react-i18next";
 
 // src/components/core/AppTitle.tsx
-import { Stack as Stack3, Typography as Typography4 } from "@mui/material";
+import { Chip as Chip2, Stack as Stack3, Typography as Typography5 } from "@mui/material";
 
 // src/contexts/LayoutContext.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -1858,65 +1890,55 @@ var LayoutContext = createContext2({});
 var useLayout = () => useContext2(LayoutContext);
 
 // src/components/core/AppTitle.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var AppTitle = () => {
   const { appTitle } = useLayout();
-  return /* @__PURE__ */ jsxs4(Stack3, { direction: "row", alignItems: "center", spacing: 2, children: [
-    /* @__PURE__ */ jsx12("img", { src: "/favicon-32x32.png", alt: "app-logo", loading: "lazy" }),
-    /* @__PURE__ */ jsx12(Typography4, { variant: "h6", children: appTitle })
+  return /* @__PURE__ */ jsxs5(Stack3, { direction: "row", alignItems: "center", spacing: 2, children: [
+    /* @__PURE__ */ jsx13("img", { src: "/favicon-32x32.png", alt: "app-logo", loading: "lazy" }),
+    /* @__PURE__ */ jsx13(Typography5, { variant: "h6", children: appTitle }),
+    import.meta.env.DEV && /* @__PURE__ */ jsx13(Chip2, { size: "small", label: "BETA", color: "info" })
   ] });
 };
 
-// src/components/core/DevelopmentBanner.tsx
-import { Close } from "@mui/icons-material";
-import { Fade, Grid, IconButton as IconButton2, Paper, Typography as Typography5 } from "@mui/material";
-import { useState } from "react";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
-var DevelopmentBanner = ({ hasNavigationRoutes }) => {
-  const { t } = useTranslation2();
-  const [bannerOpen, setBannerOpen] = useState(true);
-  const closeBanner = () => setBannerOpen(false);
-  return /* @__PURE__ */ jsx13(Fade, { appear: false, in: bannerOpen, children: /* @__PURE__ */ jsx13(Paper, { square: true, elevation: 3, tabIndex: -1, sx: {
-    position: "fixed",
-    bottom: 0,
-    left: { xs: 0, sm: hasNavigationRoutes ? 83.3 : 0 },
-    right: 0,
-    m: 0,
-    p: 2,
-    borderWidth: 0,
-    borderTopWidth: 1
-  }, children: /* @__PURE__ */ jsxs5(Grid, { container: true, justifyContent: "space-between", alignItems: "center", children: [
-    /* @__PURE__ */ jsxs5(Grid, { size: 10, children: [
-      /* @__PURE__ */ jsx13(Typography5, { fontWeight: "bold", children: t("Layout.DevelopmentDialogTitle") }),
-      /* @__PURE__ */ jsx13(Typography5, { variant: "body2", children: t("Layout.DevelopmentDialogContent") })
-    ] }),
-    /* @__PURE__ */ jsx13(Grid, { size: 2, sx: { p: 1, textAlign: "right" }, children: /* @__PURE__ */ jsx13(IconButton2, { size: "small", onClick: closeBanner, children: /* @__PURE__ */ jsx13(Close, {}) }) })
-  ] }) }) });
+// src/components/core/ToolbarAccount.tsx
+import AccountCircle from "@mui/icons-material/AccountCircle";
+import ArrowBack from "@mui/icons-material/ArrowBack";
+import Brightness4 from "@mui/icons-material/Brightness4";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import DarkMode from "@mui/icons-material/DarkMode";
+import LightMode from "@mui/icons-material/LightMode";
+import Login from "@mui/icons-material/Login";
+import Logout from "@mui/icons-material/Logout";
+import SettingsBrightness from "@mui/icons-material/SettingsBrightness";
+import Translate from "@mui/icons-material/Translate";
+import { Avatar, Box as Box3, IconButton as IconButton2, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Menu, Typography as Typography6, useColorScheme } from "@mui/material";
+import { Fragment, useState } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+
+// src/auth-test/keycloak.ts
+import { useRouter } from "@tanstack/react-router";
+import Keycloak from "keycloak-js";
+var keycloakConfig = {
+  url: import.meta.env.VITE_KEYCLOAK_URL,
+  realm: import.meta.env.VITE_KEYCLOAK_REALM,
+  clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
+  idpHint: import.meta.env.VITE_KEYCLOAK_IDP_HINT,
+  confidentialClientId: import.meta.env.VITE_KEYCLOAK_CONFIDENTIAL_CLIENT_ID,
+  confidentialClientSecret: import.meta.env.VITE_KEYCLOAK_CONFIDENTIAL_CLIENT_SECRET
 };
+function useKeycloak() {
+  const routerContext = useRouter();
+  const keycloak = routerContext.options.context.keycloak;
+  return keycloak;
+}
 
 // src/components/core/ToolbarAccount.tsx
-import { AccountCircle, ArrowBack, Brightness4, ChevronRight, DarkMode, LightMode, Login, Logout, SettingsBrightness, Translate } from "@mui/icons-material";
-import { Avatar, Box as Box3, IconButton as IconButton3, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Menu, Typography as Typography6, useColorScheme } from "@mui/material";
-import { Fragment, useState as useState2 } from "react";
-import { useTranslation as useTranslation3 } from "react-i18next";
 import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
-var user = {
-  name: "Dalibor Homola",
-  employeeId: "C2503017",
-  department: "MD0L50",
-  login: () => {
-    console.log("Login");
-  },
-  logout: () => {
-    console.log("Logout");
-  }
-};
 var ToolbarAccount = () => {
-  const [anchorElement, setAnchorElement] = useState2();
-  const [tab, setTab] = useState2("settings");
+  const [anchorElement, setAnchorElement] = useState();
+  const [tab, setTab] = useState("settings");
   const open = Boolean(anchorElement);
-  const { t, i18n: i18n2 } = useTranslation3();
+  const { t: t2, i18n: i18n2 } = useTranslation3();
   const { mode, setMode } = useColorScheme();
   const changeLanguage = (newLanguage) => () => {
     i18n2.changeLanguage(newLanguage).finally(() => closeMenu());
@@ -1925,20 +1947,23 @@ var ToolbarAccount = () => {
     setMode(newMode);
     closeMenu();
   };
+  const keycloak = useKeycloak();
+  const user = keycloak.user;
   const getModeText = () => {
     switch (mode) {
       case "light": {
-        return t("Layout.Light");
+        return t2("Layout.Light");
       }
       case "dark": {
-        return t("Layout.Dark");
+        return t2("Layout.Dark");
       }
       default: {
-        return t("Layout.System");
+        return t2("Layout.System");
       }
     }
   };
   const usernameInitials = () => {
+    if (!user?.name) return "";
     const splittedName = user.name.split(" ");
     return `${splittedName[0][0]}${splittedName.length > 1 ? splittedName[1][0] : ""}`;
   };
@@ -1947,63 +1972,61 @@ var ToolbarAccount = () => {
     setAnchorElement(void 0);
     setTimeout(() => setTab("settings"), 300);
   };
-  const login = () => user.login();
-  const logout = () => user.logout();
   const changeTab = (newTab) => () => setTab(newTab);
-  const settings = /* @__PURE__ */ jsxs6(List, { component: "nav", subheader: /* @__PURE__ */ jsx14(ListSubheader, { sx: { backgroundColor: "transparent" }, children: t("Layout.Settings") }), children: [
+  const settings = /* @__PURE__ */ jsxs6(List, { component: "nav", subheader: /* @__PURE__ */ jsx14(ListSubheader, { sx: { backgroundColor: "transparent" }, children: t2("Layout.Settings") }), children: [
     /* @__PURE__ */ jsxs6(ListItemButton, { onClick: changeTab("theme"), sx: { py: 0.3 }, children: [
       /* @__PURE__ */ jsx14(ListItemIcon, { children: /* @__PURE__ */ jsx14(Brightness4, {}) }),
-      /* @__PURE__ */ jsx14(ListItemText, { primary: t("Layout.Appearance"), secondary: getModeText() }),
+      /* @__PURE__ */ jsx14(ListItemText, { primary: t2("Layout.Appearance"), secondary: getModeText() }),
       /* @__PURE__ */ jsx14(ChevronRight, {})
     ] }),
     /* @__PURE__ */ jsxs6(ListItemButton, { onClick: changeTab("language"), sx: { py: 0.3 }, children: [
       /* @__PURE__ */ jsx14(ListItemIcon, { children: /* @__PURE__ */ jsx14(Translate, {}) }),
-      /* @__PURE__ */ jsx14(ListItemText, { primary: t("Layout.Language"), secondary: i18n2.resolvedLanguage === "en" ? "English" : "\u010Ce\u0161tina" }),
+      /* @__PURE__ */ jsx14(ListItemText, { primary: t2("Layout.Language"), secondary: i18n2.resolvedLanguage === "en" ? "English" : "\u010Ce\u0161tina" }),
       /* @__PURE__ */ jsx14(ChevronRight, {})
     ] })
   ] });
   const theme = /* @__PURE__ */ jsxs6(List, { subheader: /* @__PURE__ */ jsxs6(ListSubheader, { onClick: changeTab("settings"), sx: { backgroundColor: "transparent", display: "flex", alignItems: "center", px: 1, cursor: "pointer" }, children: [
-    /* @__PURE__ */ jsx14(IconButton3, { size: "small", sx: { mr: 0.5 }, children: /* @__PURE__ */ jsx14(ArrowBack, { fontSize: "small" }) }),
+    /* @__PURE__ */ jsx14(IconButton2, { size: "small", sx: { mr: 0.5 }, children: /* @__PURE__ */ jsx14(ArrowBack, { fontSize: "small" }) }),
     " ",
-    t("Layout.Appearance")
+    t2("Layout.Appearance")
   ] }), children: [
     /* @__PURE__ */ jsxs6(ListItemButton, { onClick: changeMode("light"), disabled: mode === "light", children: [
       /* @__PURE__ */ jsx14(ListItemIcon, { children: /* @__PURE__ */ jsx14(LightMode, {}) }),
-      /* @__PURE__ */ jsx14(ListItemText, { primary: t("Layout.Light") })
+      /* @__PURE__ */ jsx14(ListItemText, { primary: t2("Layout.Light") })
     ] }),
     /* @__PURE__ */ jsxs6(ListItemButton, { onClick: changeMode("dark"), disabled: mode === "dark", children: [
       /* @__PURE__ */ jsx14(ListItemIcon, { children: /* @__PURE__ */ jsx14(DarkMode, {}) }),
-      /* @__PURE__ */ jsx14(ListItemText, { primary: t("Layout.Dark") })
+      /* @__PURE__ */ jsx14(ListItemText, { primary: t2("Layout.Dark") })
     ] }),
     /* @__PURE__ */ jsxs6(ListItemButton, { onClick: changeMode("system"), disabled: mode === "system", children: [
       /* @__PURE__ */ jsx14(ListItemIcon, { children: /* @__PURE__ */ jsx14(SettingsBrightness, {}) }),
-      /* @__PURE__ */ jsx14(ListItemText, { primary: t("Layout.System") })
+      /* @__PURE__ */ jsx14(ListItemText, { primary: t2("Layout.System") })
     ] })
   ] });
   const language = /* @__PURE__ */ jsxs6(List, { subheader: /* @__PURE__ */ jsxs6(ListSubheader, { onClick: changeTab("settings"), sx: { backgroundColor: "transparent", display: "flex", alignItems: "center", px: 1, cursor: "pointer" }, children: [
-    /* @__PURE__ */ jsx14(IconButton3, { size: "small", sx: { mr: 0.5 }, children: /* @__PURE__ */ jsx14(ArrowBack, { fontSize: "small" }) }),
+    /* @__PURE__ */ jsx14(IconButton2, { size: "small", sx: { mr: 0.5 }, children: /* @__PURE__ */ jsx14(ArrowBack, { fontSize: "small" }) }),
     " ",
-    t("Layout.Language")
+    t2("Layout.Language")
   ] }), children: [
     /* @__PURE__ */ jsx14(ListItemButton, { onClick: changeLanguage("en"), disabled: i18n2.resolvedLanguage === "en", children: /* @__PURE__ */ jsx14(ListItemText, { primary: "English" }) }),
     /* @__PURE__ */ jsx14(ListItemButton, { onClick: changeLanguage("cs"), disabled: i18n2.resolvedLanguage === "cs", children: /* @__PURE__ */ jsx14(ListItemText, { primary: "\u010Ce\u0161tina" }) })
   ] });
   return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx14(IconButton3, { size: "small", onClick: openMenu, children: user.name ? /* @__PURE__ */ jsx14(Avatar, { sx: { width: { xs: 32, sm: 40 }, height: { xs: 32, sm: 40 }, bgcolor: "primary.main" }, children: /* @__PURE__ */ jsx14(Typography6, { variant: "subtitle2", sx: { fontWeight: "bold", lineHeight: 0 }, children: usernameInitials() }) }) : /* @__PURE__ */ jsx14(AccountCircle, {}) }),
+    /* @__PURE__ */ jsx14(IconButton2, { size: "small", onClick: openMenu, children: user?.name ? /* @__PURE__ */ jsx14(Avatar, { sx: { width: { xs: 32, sm: 40 }, height: { xs: 32, sm: 40 }, bgcolor: "primary.main" }, children: /* @__PURE__ */ jsx14(Typography6, { variant: "subtitle2", sx: { fontWeight: "bold", lineHeight: 0 }, children: usernameInitials() }) }) : /* @__PURE__ */ jsx14(AccountCircle, {}) }),
     /* @__PURE__ */ jsx14(Menu, { anchorEl: anchorElement, open, onClose: closeMenu, children: /* @__PURE__ */ jsxs6(Box3, { sx: { width: 240 }, children: [
-      /* @__PURE__ */ jsx14(List, { children: user.name ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx14(List, { children: user?.name ? /* @__PURE__ */ jsxs6(Fragment, { children: [
         /* @__PURE__ */ jsx14(ListItem, { children: /* @__PURE__ */ jsx14(ListItemText, { primary: user.name, secondary: /* @__PURE__ */ jsxs6("span", { children: [
           /* @__PURE__ */ jsx14("span", { children: user.employeeId }),
           /* @__PURE__ */ jsx14("br", {}),
           /* @__PURE__ */ jsx14("span", { children: user.department })
         ] }) }) }),
-        /* @__PURE__ */ jsxs6(ListItemButton, { onClick: logout, children: [
+        /* @__PURE__ */ jsxs6(ListItemButton, { onClick: () => keycloak.logout(), children: [
           /* @__PURE__ */ jsx14(ListItemIcon, { children: /* @__PURE__ */ jsx14(Logout, { color: "error" }) }),
-          /* @__PURE__ */ jsx14(ListItemText, { primary: t("Layout.Logout") })
+          /* @__PURE__ */ jsx14(ListItemText, { primary: t2("Layout.Logout") })
         ] })
-      ] }) : /* @__PURE__ */ jsxs6(ListItemButton, { onClick: login, children: [
+      ] }) : /* @__PURE__ */ jsxs6(ListItemButton, { onClick: () => keycloak.login(), children: [
         /* @__PURE__ */ jsx14(ListItemIcon, { children: /* @__PURE__ */ jsx14(Login, { color: "success" }) }),
-        /* @__PURE__ */ jsx14(ListItemText, { primary: t("Layout.LogIn") })
+        /* @__PURE__ */ jsx14(ListItemText, { primary: t2("Layout.LogIn") })
       ] }) }),
       tab === "settings" && settings,
       tab === "theme" && theme,
@@ -2019,48 +2042,8 @@ import { csCZ, enUS } from "@mui/material/locale";
 import { csCZ as dataGridCsCz, enUS as dataGridEnUs } from "@mui/x-data-grid-premium/locales";
 import { csCZ as datePickersCsCz, enUS as datePickersEnUs } from "@mui/x-date-pickers-pro/locales";
 import { useTranslation as useTranslation4 } from "react-i18next";
-
-// src/utils/ClientUtils.ts
-import { useQueryClient } from "@tanstack/react-query";
-import axios from "axios";
-var Platform = class {
-  static isAndroid = /android/i.test(navigator.userAgent);
-  static isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
-  static isWindows = /windows/i.test(navigator.userAgent);
-  static isMacOS = /Macintosh|MacIntel|MacPPC|Mac68K/.test(navigator.userAgent);
-};
-var getContrastTextColor = (color) => {
-  const r = Number.parseInt(color.slice(1, 3), 16);
-  const g = Number.parseInt(color.slice(3, 5), 16);
-  const b = Number.parseInt(color.slice(5, 7), 16);
-  const yiq = (r * 299 + g * 587 + b * 114) / 1e3;
-  return yiq >= 128 ? "black" : "white";
-};
-var rootRouteHead = ({ title, themeColor }) => () => ({
-  meta: [
-    { charSet: "utf-8" },
-    { name: "viewport", content: "width=device-width, initial-scale=1" },
-    { title },
-    { name: "og:type", content: "website" },
-    { name: "og:title", content: title },
-    { name: "og:image", content: "/favicon-32x32.png" }
-  ],
-  links: [
-    { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" },
-    { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" },
-    { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" },
-    { rel: "manifest", href: "/site.webmanifest", name: title, theme_color: themeColor },
-    { rel: "icon", href: "/favicon.ico" }
-  ]
-});
-var wczApiClient = axios.create();
-wczApiClient.interceptors.request.use(async (config) => {
-  return config;
-});
 var WISTRON_PRIMARY_COLOR = "#00506E";
 var WISTRON_SECONDARY_COLOR = "#64DC00";
-
-// src/hooks/ThemeHook.ts
 var useGetTheme = (theme) => {
   const { i18n: i18n2 } = useTranslation4();
   return createTheme(
@@ -2110,11 +2093,6 @@ var useGetTheme = (theme) => {
             };
           }
         },
-        MuiTextField: {
-          defaultProps: {
-            fullWidth: true
-          }
-        },
         MuiTableContainer: {
           styleOverrides: {
             root: ({ theme: theme2 }) => ({
@@ -2140,16 +2118,6 @@ var useGetTheme = (theme) => {
             })
           }
         },
-        MuiDialog: {
-          defaultProps: {
-            fullWidth: true
-          }
-        },
-        MuiContainer: {
-          defaultProps: {
-            maxWidth: false
-          }
-        },
         ...theme?.components
       }
     },
@@ -2159,38 +2127,54 @@ var useGetTheme = (theme) => {
   );
 };
 
-// src/providers/LayoutProvider.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+// src/utils/i18n.ts
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import HttpBackend from "i18next-http-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { z } from "zod";
+import { zodI18nMap } from "zod-i18n-map";
+import zodCsTranslations from "zod-i18n-map/locales/cs/zod.json";
+import zodEnTranslations from "zod-i18n-map/locales/en/zod.json";
+import { default as default2 } from "i18next";
 i18n.use(HttpBackend).use(LanguageDetector).use(initReactI18next).init({
   fallbackLng: "en",
   interpolation: {
     escapeValue: false
+  },
+  react: {
+    useSuspense: false
   }
 });
 i18n.addResourceBundle("en", "zod", zodEnTranslations);
 i18n.addResourceBundle("cs", "zod", zodCsTranslations);
 z.setErrorMap(zodI18nMap);
+
+// src/providers/LayoutProvider.tsx
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var LayoutProvider = (props) => {
   const rootRouterState = useRouterState({ select: (s) => s.matches[0] });
   const theme = useGetTheme(props.theme);
-  const { t, i18n: i18n2 } = useTranslation5();
+  const { t: t2 } = useTranslation5();
   const isFetching = !!useIsFetching();
   const isMutating = !!useIsMutating();
   const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const user2 = { name: "Dalibor", department: "MD0L50", employeeId: "C2503017", company: "", category: "" };
-  const navigation = props.getNavigation ? props.getNavigation({ user: user2, t }) : [];
+  const [user, setUser] = useState2({ employeeId: "", name: "Unknown", department: "", company: "", category: "" });
+  const navigation = props.getNavigation?.({ user, t: t2 });
   const appTitle = rootRouterState.meta?.find((meta) => meta?.title)?.title;
   if (!appTitle)
     throw new Error("Title is not defined in the RootRoute head.");
-  return /* @__PURE__ */ jsx15(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: i18n2.resolvedLanguage, children: /* @__PURE__ */ jsx15(TanStackRouterAppProvider, { navigation, theme, localeText: {
-    confirm: t("Layout.Confirm"),
-    cancel: t("Layout.Cancel"),
-    alert: t("Layout.Alert")
-  }, children: /* @__PURE__ */ jsx15(NotificationsProvider, { slotProps: { snackbar: { anchorOrigin: { vertical: isLargeScreen ? "top" : "bottom", horizontal: "center" } } }, children: /* @__PURE__ */ jsx15(LayoutContext.Provider, { value: { appTitle }, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx15(I18nextProvider, { i18n: default2, children: /* @__PURE__ */ jsx15(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: default2.resolvedLanguage, children: /* @__PURE__ */ jsx15(TanStackRouterAppProvider, { navigation, theme, localeText: {
+    confirm: t2("Layout.Dialog.Confirm"),
+    cancel: t2("Layout.Dialog.Cancel"),
+    alert: t2("Layout.Dialog.Alert")
+  }, children: /* @__PURE__ */ jsx15(NotificationsProvider, { slotProps: { snackbar: { anchorOrigin: { vertical: isLargeScreen ? "top" : "bottom", horizontal: "center" } } }, children: /* @__PURE__ */ jsx15(LayoutContext.Provider, { value: { appTitle, user: { get: user, set: setUser } }, children: /* @__PURE__ */ jsxs7(
     DashboardLayout,
     {
-      defaultSidebarCollapsed: true,
-      hideNavigation: navigation.length === 0,
+      defaultSidebarCollapsed: props.defaultSidebarCollapsed ?? true,
+      disableCollapsibleSidebar: props.disableCollapsibleSidebar,
+      sidebarExpandedWidth: props.sidebarExpandedWidth,
+      hideNavigation: navigation?.length === 0,
       slots: {
         toolbarActions: () => null,
         toolbarAccount: ToolbarAccount,
@@ -2198,15 +2182,52 @@ var LayoutProvider = (props) => {
       },
       children: [
         props.children,
-        /* @__PURE__ */ jsx15(DevelopmentBanner, { hasNavigationRoutes: navigation.length > 0 }),
         (isFetching || isMutating) && /* @__PURE__ */ jsx15(LinearProgress, { sx: { position: "fixed", top: { xs: 56, sm: 64 }, left: 0, right: 0 } })
       ]
     }
-  ) }) }) }) });
+  ) }) }) }) }) });
 };
 
 // src/index.ts
-import { uuidv7 } from "uuidv7";
+import { uuidv7 as uuidv72 } from "uuidv7";
+
+// src/utils/ClientUtils.ts
+import axios from "axios";
+var Platform = class {
+  static get isAndroid() {
+    return /android/i.test(this.userAgent);
+  }
+  static get isIOS() {
+    return /iPad|iPhone|iPod/.test(this.userAgent);
+  }
+  static get isWindows() {
+    return /windows/i.test(this.userAgent);
+  }
+  static get isMacOS() {
+    return /Macintosh|MacIntel|MacPPC|Mac68K/.test(this.userAgent);
+  }
+  static get userAgent() {
+    return typeof navigator === "undefined" ? "" : navigator.userAgent;
+  }
+};
+var rootRouteHead = ({ title }) => () => ({
+  meta: [
+    { charSet: "utf-8" },
+    { name: "viewport", content: "width=device-width, initial-scale=1" },
+    { title },
+    { name: "og:type", content: "website" },
+    { name: "og:title", content: title },
+    { name: "og:image", content: "/favicon-32x32.png" }
+  ],
+  links: [
+    { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" },
+    { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" },
+    { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" },
+    { rel: "manifest", href: "/site.webmanifest" },
+    { rel: "icon", href: "/favicon.ico" }
+  ]
+});
+var wczApiClient = axios.create();
 
 // src/hooks/FormHooks.ts
 import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
@@ -2512,12 +2533,14 @@ import { useDialogs } from "@toolpad/core/useDialogs";
 import { useNotifications } from "@toolpad/core/useNotifications";
 import { useLocalStorageState } from "@toolpad/core/useLocalStorageState";
 import { useTranslation as useTranslation6 } from "react-i18next";
+import { t } from "i18next";
 
 // src/hooks/FileHooks.ts
-import { useMutation, useQuery, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import saveAs from "file-saver";
 import { useState as useState3 } from "react";
 import { Upload as TusUpload } from "tus-js-client";
+import { uuidv7 } from "uuidv7";
 var BASE_URL = import.meta.env.VITE_FILE_API_BASE_URL;
 var QUERY_KEY = "Files";
 var HOUR = 1e3 * 60 * 60;
@@ -2599,7 +2622,7 @@ var useOpenFile = (options) => {
 };
 var useUpdateFileMeta = (options) => {
   const { appTitle } = useLayout();
-  const queryClient = useQueryClient2();
+  const queryClient = useQueryClient();
   return useMutation({
     ...options,
     mutationFn: (meta) => wczApiClient.request({
@@ -2612,7 +2635,7 @@ var useUpdateFileMeta = (options) => {
 };
 var useDeleteFile = (options) => {
   const { appTitle } = useLayout();
-  const queryClient = useQueryClient2();
+  const queryClient = useQueryClient();
   return useMutation({
     ...options,
     mutationFn: (meta) => wczApiClient.request({
@@ -2624,7 +2647,7 @@ var useDeleteFile = (options) => {
 };
 var useDeleteFiles = (options) => {
   const { appTitle } = useLayout();
-  const queryClient = useQueryClient2();
+  const queryClient = useQueryClient();
   return useMutation({
     ...options,
     mutationFn: (subId) => wczApiClient.request({
@@ -2636,32 +2659,39 @@ var useDeleteFiles = (options) => {
 };
 var useUploadFile = ({ subId, onSuccess, onError }) => {
   const { appTitle } = useLayout();
-  const [uploadProgress, setUploadProgress] = useState3(0);
-  const queryClient = useQueryClient2();
+  const [progress, setProgress] = useState3(0);
+  const queryClient = useQueryClient();
   const mutate = async (file) => {
     if (!subId) throw new Error("subId is required for file upload");
+    const metadata = {
+      id: uuidv7(),
+      appName: appTitle,
+      subId,
+      fileName: file.name
+    };
     const upload = new TusUpload(file, {
       endpoint: `${BASE_URL}/v1/upload`,
       chunkSize: 1048576,
       // 1 MB
       metadata: {
-        appName: appTitle,
-        subId,
-        filename: file.name,
-        filetype: file.type
+        id: metadata.id,
+        appName: metadata.appName,
+        subId: metadata.subId,
+        fileName: metadata.fileName,
+        fileExtension: file.type
       },
       //headers: { "Authorization": `Bearer ${await getToken()}` }, //TODO: implement token retrieval
       onError: (error) => {
-        setUploadProgress(0);
+        setProgress(0);
         onError?.(error);
       },
       onProgress: (bytesUploaded, bytesTotal) => {
-        setUploadProgress(bytesUploaded / bytesTotal * 100);
+        setProgress(bytesUploaded / bytesTotal * 100);
       },
       onSuccess: () => {
-        setUploadProgress(0);
+        setProgress(0);
         queryClient.invalidateQueries({ queryKey: [QUERY_KEY, "meta"], exact: false });
-        onSuccess?.(file);
+        onSuccess?.(metadata);
       }
     });
     const previousUploads = await upload.findPreviousUploads();
@@ -2670,10 +2700,48 @@ var useUploadFile = ({ subId, onSuccess, onError }) => {
     }
     upload.start();
   };
-  return { mutate, uploadProgress };
+  return { mutate, progress };
 };
+function useOptimisticFileMutation(subId, options) {
+  const [uploadedFileIds, setUploadedFileIds] = useState3([]);
+  const [deletedFileIds, setDeletedFileIds] = useState3([]);
+  const { data } = useGetFileMetas(subId, options);
+  const { mutate: deleteAttachment } = useDeleteFile();
+  function addFile(meta) {
+    setUploadedFileIds((previous) => [...previous, meta.id]);
+  }
+  function removeFile(meta) {
+    const added = uploadedFileIds.includes(meta.id);
+    if (added) {
+      setUploadedFileIds((previous) => previous.filter((file) => file !== meta.id));
+    } else {
+      setDeletedFileIds((previous) => [...previous, meta.id]);
+    }
+  }
+  function save() {
+    for (const id of deletedFileIds) {
+      const meta = data.find((meta2) => meta2.id === id);
+      if (!meta) continue;
+      deleteAttachment(meta);
+    }
+  }
+  function undo() {
+    for (const id of uploadedFileIds) {
+      const meta = data.find((meta2) => meta2.id === id);
+      if (!meta) continue;
+      deleteAttachment(meta);
+    }
+  }
+  return {
+    addFile,
+    removeFile,
+    save,
+    undo
+  };
+}
 export {
   ChipInputCell,
+  Dropzone,
   EditableColumnHeader,
   LayoutProvider,
   PageContainer,
@@ -2687,10 +2755,8 @@ export {
   RouterNotFound,
   RouterTab,
   TypographyWithIcon,
-  WISTRON_PRIMARY_COLOR,
-  WISTRON_SECONDARY_COLOR,
-  getContrastTextColor,
   rootRouteHead,
+  t,
   useDeleteFile,
   useDeleteFiles,
   useDialogs,
@@ -2704,10 +2770,11 @@ export {
   useLocalStorageState,
   useNotifications,
   useOpenFile,
+  useOptimisticFileMutation,
   useTranslation6 as useTranslation,
   useUpdateFileMeta,
   useUploadFile,
-  uuidv7,
+  uuidv72 as uuidv7,
   wczApiClient,
   withLayoutForm
 };