wcz-test 3.1.1 → 3.3.0

package/dist/index.js

@@ -47,7 +47,7 @@ var require_react_is_production_min = __commonJS({
     var w = b ? Symbol.for("react.fundamental") : 60117;
     var x = b ? Symbol.for("react.responder") : 60118;
     var y = b ? Symbol.for("react.scope") : 60119;
-    function z(a) {
+    function z2(a) {
       if ("object" === typeof a && null !== a) {
         var u = a.$$typeof;
         switch (u) {
@@ -78,7 +78,7 @@ var require_react_is_production_min = __commonJS({
       }
     }
     function A(a) {
-      return z(a) === m;
+      return z2(a) === m;
     }
     exports.AsyncMode = l;
     exports.ConcurrentMode = m;
@@ -94,46 +94,46 @@ var require_react_is_production_min = __commonJS({
     exports.StrictMode = f;
     exports.Suspense = p;
     exports.isAsyncMode = function(a) {
-      return A(a) || z(a) === l;
+      return A(a) || z2(a) === l;
     };
     exports.isConcurrentMode = A;
     exports.isContextConsumer = function(a) {
-      return z(a) === k;
+      return z2(a) === k;
     };
     exports.isContextProvider = function(a) {
-      return z(a) === h;
+      return z2(a) === h;
     };
     exports.isElement = function(a) {
       return "object" === typeof a && null !== a && a.$$typeof === c;
     };
     exports.isForwardRef = function(a) {
-      return z(a) === n;
+      return z2(a) === n;
     };
     exports.isFragment = function(a) {
-      return z(a) === e;
+      return z2(a) === e;
     };
     exports.isLazy = function(a) {
-      return z(a) === t2;
+      return z2(a) === t2;
     };
     exports.isMemo = function(a) {
-      return z(a) === r;
+      return z2(a) === r;
     };
     exports.isPortal = function(a) {
-      return z(a) === d;
+      return z2(a) === d;
     };
     exports.isProfiler = function(a) {
-      return z(a) === g;
+      return z2(a) === g;
     };
     exports.isStrictMode = function(a) {
-      return z(a) === f;
+      return z2(a) === f;
     };
     exports.isSuspense = function(a) {
-      return z(a) === p;
+      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 === 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 = z;
+    exports.typeOf = z2;
   }
 });
 
@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment2 = REACT_FRAGMENT_TYPE;
+        var Fragment6 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment2;
+        exports.Fragment = Fragment6;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -1040,68 +1040,672 @@ var TypographyWithIcon = ({ startIcon, endIcon, children, sx, gutterBottom, ...p
   ] });
 };
 
-// src/index.ts
-import { PageHeader } from "@toolpad/core/PageContainer";
-
-// src/components/core/PageContainer.tsx
-import { Container } from "@mui/material";
+// src/components/core/PageHeader.tsx
+import { CardHeader, Typography as Typography2 } from "@mui/material";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var PageContainer = (props) => {
-  return /* @__PURE__ */ jsx2(
-    Container,
+var PageHeader = ({ title, action, sx }) => {
+  return /* @__PURE__ */ jsx2(CardHeader, { title: /* @__PURE__ */ jsx2(Typography2, { variant: "h4", fontWeight: 600, children: title }), action, sx: { px: 0, ...sx } });
+};
+
+// src/components/core/TableContainer.tsx
+import { Box } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TableContainer = ({ children, className, sx }) => {
+  const reference = useRef(null);
+  const [height, setHeight] = useState(null);
+  useEffect(() => {
+    const element = reference.current;
+    if (!element) return;
+    const recompute = () => {
+      if (!reference.current) return;
+      const top = Math.ceil(reference.current.getBoundingClientRect().top);
+      const avail = Math.max(0, window.innerHeight - top);
+      setHeight(avail);
+    };
+    recompute();
+    window.addEventListener("resize", recompute);
+    const ro = new ResizeObserver(recompute);
+    ro.observe(document.documentElement);
+    ro.observe(document.body);
+    ro.observe(element);
+    return () => {
+      window.removeEventListener("resize", recompute);
+      ro.disconnect();
+    };
+  }, []);
+  const style = height == null ? { height: "100%" } : { height };
+  return /* @__PURE__ */ jsx3(
+    Box,
     {
+      ref: reference,
+      className,
       sx: {
         display: "flex",
         flexDirection: "column",
-        height: "100vh",
-        my: 1,
-        ...props.sx
+        minHeight: 0,
+        width: "100%",
+        ...sx
       },
-      ...props,
-      children: props.children
+      style,
+      children: /* @__PURE__ */ jsx3(Box, { sx: { flex: 1, minHeight: 0, height: "100%" }, children })
+    }
+  );
+};
+
+// src/components/file/Dropzone.tsx
+import CloudUpload from "@mui/icons-material/CloudUpload";
+import { Paper, Typography as Typography3, useTheme } from "@mui/material";
+import { useDropzone } from "react-dropzone";
+import { useTranslation } from "react-i18next";
+import { jsx as jsx4, 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__ */ jsx4("input", { ...getInputProps(), style: { display: "none" } }),
+    /* @__PURE__ */ jsx4(CloudUpload, {}),
+    /* @__PURE__ */ jsx4(Typography3, { children: t2("Layout.File.DragSomeFilesHereOrClickToSelectThem") })
+  ] });
+};
+
+// src/components/file/FileViewer.tsx
+import { useState as useState5 } from "react";
+
+// src/contexts/FileContext.ts
+import { createContext, useContext } from "react";
+var FileContext = createContext(null);
+var useFile = () => {
+  const context = useContext(FileContext);
+  if (!context) {
+    throw new Error("FileViewer components must be used within FileViewer");
+  }
+  return context;
+};
+
+// src/hooks/FileHooks.ts
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import saveAs from "file-saver";
+import { useState as useState2 } from "react";
+import { Upload as TusUpload } from "tus-js-client";
+import { uuidv7 } from "uuidv7";
+
+// src/components/core/AppTitle.tsx
+import { Chip, Stack as Stack2, Typography as Typography4 } from "@mui/material";
+import { useRouterState } from "@tanstack/react-router";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var AppTitle = () => {
+  const title = useAppTitle();
+  return /* @__PURE__ */ jsxs3(Stack2, { direction: "row", alignItems: "center", spacing: 2, flexGrow: 1, children: [
+    /* @__PURE__ */ jsx5("img", { src: "/favicon-32x32.png", alt: "app-logo", loading: "lazy" }),
+    /* @__PURE__ */ jsx5(Typography4, { variant: "h6", children: title }),
+    import.meta.env.DEV && /* @__PURE__ */ jsx5(Chip, { size: "small", label: "TEST", color: "info" })
+  ] });
+};
+var useAppTitle = () => {
+  const rootRouterState = useRouterState({ select: (s) => s.matches[0] });
+  return rootRouterState.meta?.find((meta) => meta?.title)?.title;
+};
+
+// 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/FileHooks.ts
+var BASE_URL = import.meta.env.VITE_FILE_API_BASE_URL;
+var QUERY_KEY = "Files";
+var HOUR = 1e3 * 60 * 60;
+var useGetFileMetas = (subId, options) => {
+  const appTitle = useAppTitle();
+  return useQuery({
+    ...options,
+    queryKey: [QUERY_KEY, "meta", subId, appTitle],
+    queryFn: ({ signal }) => wczApiClient.request({
+      url: `${BASE_URL}/v1/meta?appName=${appTitle}&subId=${subId}`,
+      method: "GET",
+      signal
+    }),
+    staleTime: HOUR,
+    gcTime: HOUR,
+    refetchOnWindowFocus: false
+  });
+};
+var useGetFileThumbnail = (meta, options) => {
+  const appTitle = useAppTitle();
+  return useQuery({
+    ...options,
+    queryKey: [QUERY_KEY, "thumbnail", meta?.id, appTitle],
+    queryFn: ({ signal }) => wczApiClient.request({
+      url: `${BASE_URL}/v1/thumbnail?appName=${appTitle}&id=${meta?.id}`,
+      method: "GET",
+      signal,
+      responseType: "blob"
+    }),
+    select: (data) => URL.createObjectURL(data),
+    staleTime: HOUR,
+    gcTime: HOUR,
+    refetchOnWindowFocus: false,
+    enabled: !!meta?.id && options?.enabled
+  });
+};
+var useGetFile = (meta, options) => {
+  const appTitle = useAppTitle();
+  return useQuery({
+    ...options,
+    queryKey: [QUERY_KEY, meta?.id, appTitle],
+    queryFn: ({ signal }) => wczApiClient.request({
+      url: `${BASE_URL}/v1?appName=${appTitle}&id=${meta?.id}`,
+      method: "GET",
+      signal,
+      responseType: "blob"
+    }),
+    select: (data) => URL.createObjectURL(data),
+    staleTime: HOUR,
+    gcTime: HOUR,
+    refetchOnWindowFocus: false,
+    enabled: !!meta?.id && options?.enabled
+  });
+};
+var useDownloadFile = (options) => {
+  const appTitle = useAppTitle();
+  return useMutation({
+    ...options,
+    mutationFn: (meta) => wczApiClient.request({
+      url: `${BASE_URL}/v1/download?appName=${appTitle}&id=${meta.id}`,
+      method: "GET",
+      responseType: "blob"
+    }),
+    onSuccess: (data, variables) => saveAs(data, `${variables.fileName}.${variables.fileExtension}`)
+  });
+};
+var useOpenFile = (options) => {
+  const appTitle = useAppTitle();
+  return useMutation({
+    ...options,
+    mutationFn: (meta) => wczApiClient.request({
+      url: `${BASE_URL}/v1?appName=${appTitle}&id=${meta.id}`,
+      method: "GET",
+      responseType: "blob"
+    }),
+    onSuccess: (data) => {
+      window.open(URL.createObjectURL(data));
+    }
+  });
+};
+var useUpdateFileMeta = (options) => {
+  const appTitle = useAppTitle();
+  const queryClient = useQueryClient();
+  return useMutation({
+    ...options,
+    mutationFn: (meta) => wczApiClient.request({
+      url: `${BASE_URL}/v1/meta?appName=${appTitle}&id=${meta.id}`,
+      method: "PUT",
+      data: meta
+    }),
+    onSettled: () => queryClient.invalidateQueries({ queryKey: [QUERY_KEY, "meta"], exact: false })
+  });
+};
+var useDeleteFile = (options) => {
+  const appTitle = useAppTitle();
+  const queryClient = useQueryClient();
+  return useMutation({
+    ...options,
+    mutationFn: (meta) => wczApiClient.request({
+      url: `${BASE_URL}/v1?appName=${appTitle}&id=${meta.id}`,
+      method: "DELETE"
+    }),
+    onSettled: () => queryClient.invalidateQueries({ queryKey: [QUERY_KEY, "meta"], exact: false })
+  });
+};
+var useDeleteFiles = (options) => {
+  const appTitle = useAppTitle();
+  const queryClient = useQueryClient();
+  return useMutation({
+    ...options,
+    mutationFn: (subId) => wczApiClient.request({
+      url: `${BASE_URL}/v1?appName=${appTitle}&subId=${subId}`,
+      method: "DELETE"
+    }),
+    onSettled: () => queryClient.invalidateQueries({ queryKey: [QUERY_KEY, "meta"], exact: false })
+  });
+};
+var useUploadFile = ({ subId, onSuccess, onError }) => {
+  const appTitle = useAppTitle();
+  const [progress, setProgress] = useState2(0);
+  const queryClient = useQueryClient();
+  const mutate = async (file) => {
+    if (!subId) throw new Error("subId is required for file upload");
+    if (!appTitle) throw new Error("appTitle 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: {
+        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) => {
+        setProgress(0);
+        onError?.(error);
+      },
+      onProgress: (bytesUploaded, bytesTotal) => {
+        setProgress(bytesUploaded / bytesTotal * 100);
+      },
+      onSuccess: () => {
+        setProgress(0);
+        queryClient.invalidateQueries({ queryKey: [QUERY_KEY, "meta", subId, appTitle], exact: false });
+        onSuccess?.(metadata);
+      }
+    });
+    const previousUploads = await upload.findPreviousUploads();
+    if (previousUploads.length > 0) {
+      upload.resumeFromPreviousUpload(previousUploads[0]);
+    }
+    upload.start();
+  };
+  return { mutate, progress };
+};
+
+// src/components/file/fileViewer/FileViewerGrid.tsx
+import MoreVert from "@mui/icons-material/MoreVert";
+import { Box as Box2, IconButton, ImageListItem, ImageListItemBar, Stack as Stack3, Tooltip } from "@mui/material";
+import { grey } from "@mui/material/colors";
+import { Fragment, useEffect as useEffect3, useState as useState3 } from "react";
+
+// src/components/file/fileViewer/common/ActionsMenu.tsx
+import Delete from "@mui/icons-material/Delete";
+import FileDownload from "@mui/icons-material/FileDownload";
+import { List, ListItemButton, ListItemIcon, ListItemText, Menu } from "@mui/material";
+import { useTranslation as useTranslation3 } from "react-i18next";
+
+// src/hooks/DialogsHooks.tsx
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+
+// node_modules/@mui/utils/esm/useEventCallback/useEventCallback.js
+import * as React2 from "react";
+
+// node_modules/@mui/utils/esm/useEnhancedEffect/useEnhancedEffect.js
+import * as React from "react";
+var useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+var useEnhancedEffect_default = useEnhancedEffect;
+
+// node_modules/@mui/utils/esm/useEventCallback/useEventCallback.js
+function useEventCallback(fn) {
+  const ref = React2.useRef(fn);
+  useEnhancedEffect_default(() => {
+    ref.current = fn;
+  });
+  return React2.useRef((...args) => (
+    // @ts-expect-error hide `this`
+    (0, ref.current)(...args)
+  )).current;
+}
+var useEventCallback_default = useEventCallback;
+
+// src/hooks/DialogsHooks.tsx
+import { useContext as useContext2, useMemo } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+
+// src/contexts/DialogsContext.ts
+import { createContext as createContext2 } from "react";
+var DialogsContext = createContext2({});
+
+// src/hooks/DialogsHooks.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function AlertDialog({ open, payload, onClose }) {
+  const { t: t2 } = useTranslation2();
+  return /* @__PURE__ */ jsxs4(Dialog, { maxWidth: "xs", fullWidth: true, open, onClose: () => onClose(), children: [
+    /* @__PURE__ */ jsx6(DialogTitle, { children: payload.title ?? t2("Layout.Dialog.Alert") }),
+    /* @__PURE__ */ jsx6(DialogContent, { children: payload.message }),
+    /* @__PURE__ */ jsx6(DialogActions, { children: /* @__PURE__ */ jsx6(Button, { disabled: !open, onClick: () => onClose(), children: t2("Layout.Dialog.Confirm") }) })
+  ] });
+}
+function ConfirmDialog({ open, payload, onClose }) {
+  const { t: t2 } = useTranslation2();
+  return /* @__PURE__ */ jsxs4(Dialog, { maxWidth: "xs", fullWidth: true, open, onClose: () => onClose(false), children: [
+    /* @__PURE__ */ jsx6(DialogTitle, { children: payload.title ?? t2("Layout.Dialog.Confirm") }),
+    /* @__PURE__ */ jsx6(DialogContent, { children: payload.message }),
+    /* @__PURE__ */ jsxs4(DialogActions, { children: [
+      /* @__PURE__ */ jsx6(Button, { autoFocus: true, disabled: !open, onClick: () => onClose(false), children: payload.cancelText ?? t2("Layout.Dialog.Cancel") }),
+      /* @__PURE__ */ jsx6(Button, { disabled: !open, onClick: () => onClose(true), children: t2("Layout.Dialog.Confirm") })
+    ] })
+  ] });
+}
+function useDialogs() {
+  const { open, close } = useContext2(DialogsContext);
+  const alert = useEventCallback_default(
+    (message, { ...options } = {}) => open(AlertDialog, { ...options, message })
+  );
+  const confirm = useEventCallback_default(
+    (message, { ...options } = {}) => open(ConfirmDialog, { ...options, message })
+  );
+  return useMemo(() => ({ alert, confirm, open, close }), [alert, close, confirm, open]);
+}
+
+// src/components/file/fileViewer/common/ActionsMenu.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ActionsMenu = ({ meta, menu, setMenu }) => {
+  const { t: t2 } = useTranslation3();
+  const { fileMetas, onDelete, actions } = useFile();
+  const { confirm } = useDialogs();
+  const handleMenuClose = () => {
+    setMenu(null);
+  };
+  const { mutate: download, isPending: isDownloading } = useDownloadFile();
+  const { mutate: deleteFile, isPending: isDeleting } = useDeleteFile();
+  const handleOnDownload = () => {
+    handleMenuClose();
+    download(meta);
+  };
+  const handleOnDelete = async () => {
+    if (!await confirm(t2("Layout.File.AreYouSureYouWantToDelete", { fileName: meta.fileName })))
+      return;
+    deleteFile(meta);
+    handleMenuClose();
+    if (onDelete) {
+      const remainingFileMetas = fileMetas.filter((m) => m.id !== meta.id);
+      onDelete({ remainingFileMetas, deletedFileMeta: meta });
+    }
+  };
+  return /* @__PURE__ */ jsx7(
+    Menu,
+    {
+      open: menu !== null,
+      onClose: handleMenuClose,
+      anchorReference: "anchorPosition",
+      variant: "menu",
+      anchorPosition: menu === null ? void 0 : { top: menu.mouseY, left: menu.mouseX },
+      children: /* @__PURE__ */ jsxs5(List, { disablePadding: true, children: [
+        actions?.download !== false && /* @__PURE__ */ jsxs5(ListItemButton, { onClick: handleOnDownload, disabled: isDownloading, children: [
+          /* @__PURE__ */ jsx7(ListItemIcon, { children: /* @__PURE__ */ jsx7(FileDownload, {}) }),
+          /* @__PURE__ */ jsx7(ListItemText, { children: t2("Layout.File.Download") })
+        ] }),
+        actions?.delete !== false && /* @__PURE__ */ jsxs5(ListItemButton, { onClick: handleOnDelete, disabled: isDeleting, children: [
+          /* @__PURE__ */ jsx7(ListItemIcon, { children: /* @__PURE__ */ jsx7(Delete, {}) }),
+          /* @__PURE__ */ jsx7(ListItemText, { children: t2("Layout.File.Delete") })
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/components/file/fileViewer/FileViewerGrid.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var IMAGE_SIZE = 150;
+var FileViewerGrid = ({ sx, size, itemBar }) => {
+  const { fileMetas } = useFile();
+  return /* @__PURE__ */ jsx8(Stack3, { direction: "row", spacing: 1, sx: { overflow: "auto", ...sx }, children: fileMetas.map((fileMeta) => /* @__PURE__ */ jsx8(
+    GridFileViewerItem,
+    {
+      meta: fileMeta,
+      size,
+      itemBar
+    },
+    fileMeta.id
+  )) });
+};
+var GridFileViewerItem = ({ meta, size, itemBar }) => {
+  const { setImageId, actions } = useFile();
+  const [showItemBar, setShowItemBar] = useState3(itemBar === "always");
+  const [menu, setMenu] = useState3(null);
+  useEffect3(() => {
+    setShowItemBar(itemBar === "always");
+  }, [itemBar]);
+  const { data: source } = useGetFileThumbnail(meta);
+  const handleOnMouseEnter = () => setShowItemBar(true);
+  const handleOnMouseLeave = () => itemBar !== "always" && setShowItemBar(false);
+  const openMenu = (event) => {
+    setMenu(menu === null ? { mouseX: event.clientX, mouseY: event.clientY } : null);
+    setTimeout(() => setShowItemBar(true));
+  };
+  const { mutate: openFile } = useOpenFile();
+  const { mutate: download } = useDownloadFile();
+  const onClick = () => {
+    switch (meta.mediaType) {
+      case "image": {
+        return setImageId(meta.id);
+      }
+      case "application": {
+        return openFile(meta);
+      }
+      case "video": {
+        return openFile(meta);
+      }
+      default: {
+        return download(meta);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsxs6(ImageListItem, { sx: { width: size ?? IMAGE_SIZE, height: size ?? IMAGE_SIZE }, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave, children: [
+      /* @__PURE__ */ jsx8(
+        Box2,
+        {
+          component: "img",
+          src: source,
+          loading: "lazy",
+          alt: "thumbnail-" + meta.id,
+          onClick,
+          sx: { cursor: "pointer", objectFit: "contain", width: size ?? IMAGE_SIZE, height: size ?? IMAGE_SIZE }
+        }
+      ),
+      itemBar !== "hidden" && showItemBar && /* @__PURE__ */ jsx8(
+        ImageListItemBar,
+        {
+          title: /* @__PURE__ */ jsx8(Tooltip, { title: meta.fileName, children: /* @__PURE__ */ jsx8(Box2, { children: meta.fileName }) }),
+          actionIcon: (actions?.download !== false || actions?.delete !== false) && /* @__PURE__ */ jsx8(IconButton, { sx: { color: grey[100] }, onClick: openMenu, children: /* @__PURE__ */ jsx8(MoreVert, {}) })
+        }
+      )
+    ] }),
+    (actions?.download !== false || actions?.delete !== false) && /* @__PURE__ */ jsx8(ActionsMenu, { meta, menu, setMenu })
+  ] });
+};
+
+// src/components/file/fileViewer/FileViewerList.tsx
+import AttachFile from "@mui/icons-material/AttachFile";
+import Image from "@mui/icons-material/Image";
+import MoreVert2 from "@mui/icons-material/MoreVert";
+import SmartDisplay from "@mui/icons-material/SmartDisplay";
+import { IconButton as IconButton2, List as List2, ListItemButton as ListItemButton2, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2 } from "@mui/material";
+import { Fragment as Fragment2, useState as useState4 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var FileViewerList = ({ sx }) => {
+  const { fileMetas } = useFile();
+  return /* @__PURE__ */ jsx9(List2, { dense: true, sx, children: fileMetas.map(
+    (fileMeta) => /* @__PURE__ */ jsx9(
+      ListFileViewerItem,
+      {
+        meta: fileMeta
+      },
+      fileMeta.id
+    )
+  ) });
+};
+var ListFileViewerItem = ({ meta }) => {
+  const { setImageId, actions } = useFile();
+  const [menu, setMenu] = useState4(null);
+  const openMenu = (event) => {
+    event.stopPropagation();
+    setMenu(menu === null ? { mouseX: event.clientX, mouseY: event.clientY } : null);
+  };
+  const { mutate: openFile } = useOpenFile();
+  const { mutate: download } = useDownloadFile();
+  const onClick = () => {
+    switch (meta.mediaType) {
+      case "image": {
+        return setImageId(meta.id);
+      }
+      case "application": {
+        return openFile(meta);
+      }
+      case "video": {
+        return openFile(meta);
+      }
+      default: {
+        return download(meta);
+      }
     }
-  );
+  };
+  const icon = () => {
+    switch (meta.mediaType) {
+      case "image": {
+        return /* @__PURE__ */ jsx9(Image, {});
+      }
+      case "video": {
+        return /* @__PURE__ */ jsx9(SmartDisplay, {});
+      }
+      default: {
+        return /* @__PURE__ */ jsx9(AttachFile, {});
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsxs7(ListItemButton2, { onClick, children: [
+      /* @__PURE__ */ jsx9(ListItemIcon2, { children: icon() }),
+      /* @__PURE__ */ jsx9(ListItemText2, { primary: `${meta.fileName}.${meta.fileExtension}` }),
+      (actions?.download !== false || actions?.delete !== false) && /* @__PURE__ */ jsx9(IconButton2, { edge: "end", onClick: openMenu, children: /* @__PURE__ */ jsx9(MoreVert2, {}) })
+    ] }, meta.id),
+    (actions?.download !== false || actions?.delete !== false) && /* @__PURE__ */ jsx9(ActionsMenu, { meta, menu, setMenu })
+  ] });
 };
 
-// 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 } : {}
+// src/components/file/fileViewer/ImageViewer.tsx
+import Close from "@mui/icons-material/Close";
+import { Box as Box3, Dialog as Dialog2, Fab } from "@mui/material";
+import { useEffect as useEffect4 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var ImageViewer = ({ metaId }) => {
+  const { fileMetas, setImageId } = useFile();
+  const meta = fileMetas.find((m) => m.id === metaId);
+  const { data: source } = useGetFile(meta);
+  useEffect4(() => {
+    if (globalThis.window !== void 0 && metaId)
+      globalThis.addEventListener("keydown", handleOnKeydown);
+    return () => {
+      globalThis.removeEventListener("keydown", handleOnKeydown);
+    };
+  }, [metaId]);
+  const handleOnKeydown = (event) => {
+    const images = fileMetas.filter((m) => m.mediaType === "image");
+    const imageIndex = images.findIndex((m) => m.id === metaId);
+    switch (event.key) {
+      case "ArrowLeft": {
+        return handleOnArrowLeft(images, imageIndex);
+      }
+      case "ArrowRight": {
+        return handleOnArrowRight(images, imageIndex);
+      }
+      case "Backspace":
+      case "Escape": {
+        event.preventDefault();
+        return onClose();
+      }
+    }
   };
-  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") })
+  const handleOnArrowLeft = (images, index) => {
+    if (index > 0) {
+      const previousFile = images[index - 1];
+      setImageId(previousFile.id);
+    }
+  };
+  const handleOnArrowRight = (images, index) => {
+    if (index < images.length - 1) {
+      const nextFile = images[index + 1];
+      setImageId(nextFile.id);
+    }
+  };
+  const onClose = () => setImageId("");
+  if (!metaId) return null;
+  return /* @__PURE__ */ jsxs8(Dialog2, { open: true, onClose, maxWidth: "xl", children: [
+    /* @__PURE__ */ jsx10(Box3, { component: "img", src: source, alt: metaId, sx: { maxWidth: "100vw", maxHeight: { xs: "calc(100vh - 56px)", sm: "calc(100vh - 64px)" } } }),
+    /* @__PURE__ */ jsx10(Fab, { size: "medium", onClick: onClose, sx: { position: "fixed", top: 8, right: 8 }, children: /* @__PURE__ */ jsx10(Close, {}) })
+  ] });
+};
+
+// src/components/file/FileViewer.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var FileViewer = ({ subId, onDelete, actions, children }) => {
+  const { data: fileMetas = [] } = useGetFileMetas(subId, { enabled: !!subId });
+  const [imageId, setImageId] = useState5("");
+  const components = { Grid: FileViewerGrid, List: FileViewerList };
+  if (fileMetas.length === 0) return null;
+  return /* @__PURE__ */ jsxs9(FileContext.Provider, { value: { fileMetas, onDelete, actions, setImageId }, children: [
+    children(components),
+    /* @__PURE__ */ jsx11(ImageViewer, { metaId: imageId })
   ] });
 };
 
 // src/components/data-grid/ChipInputCell.tsx
-import { Chip, Stack as Stack2 } from "@mui/material";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { Chip as Chip2, Stack as Stack4 } from "@mui/material";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var isArray = (value) => Array.isArray(value);
 var ChipInputCell = ({ params, slotProps, getLabel }) => {
   if (!params.value) return null;
@@ -1110,113 +1714,110 @@ var ChipInputCell = ({ params, slotProps, getLabel }) => {
     return value;
   };
   if (isArray(params.value))
-    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__ */ jsx12(Stack4, { direction: "row", alignItems: "center", gap: 1, sx: { overflowX: "auto", height: "100%", width: params.colDef.computedWidth }, children: params.value.map(
+      (value, index) => /* @__PURE__ */ jsx12(Chip2, { label: getLabelValue(value), ...slotProps }, `${index + 1}-chip-input-cell`)
     ) });
-  return /* @__PURE__ */ jsx4(Chip, { label: getLabelValue(params.value), ...slotProps });
+  return /* @__PURE__ */ jsx12(Chip2, { label: getLabelValue(params.value), ...slotProps });
 };
 
 // src/components/data-grid/EditableColumnHeader.tsx
 import Edit from "@mui/icons-material/Edit";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var EditableColumnHeader = ({ colDef }) => {
-  return /* @__PURE__ */ jsx5(TypographyWithIcon, { endIcon: /* @__PURE__ */ jsx5(Edit, { color: "disabled", fontSize: "small" }), variant: "body2", className: "MuiDataGrid-columnHeaderTitle", children: colDef.headerName });
+  return /* @__PURE__ */ jsx13(TypographyWithIcon, { endIcon: /* @__PURE__ */ jsx13(Edit, { color: "disabled", fontSize: "small" }), variant: "body2", className: "MuiDataGrid-columnHeaderTitle", children: colDef.headerName });
 };
 
 // src/components/router/RouterButton.tsx
-import { Button } from "@mui/material";
+import { Button as Button2 } from "@mui/material";
 import { createLink } from "@tanstack/react-router";
-import React from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Component = React.forwardRef(function ButtonComponent(props, reference) {
-  return /* @__PURE__ */ jsx6(Button, { ref: reference, component: "a", ...props });
+import React5 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Component = React5.forwardRef(function ButtonComponent(props, reference) {
+  return /* @__PURE__ */ jsx14(Button2, { ref: reference, component: "a", ...props });
 });
 var CreatedComponent = createLink(Component);
 var RouterButton = (props) => {
-  return /* @__PURE__ */ jsx6(CreatedComponent, { preload: "intent", ...props });
+  return /* @__PURE__ */ jsx14(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 jsx7 } from "react/jsx-runtime";
-var Component2 = React2.forwardRef(
+import React6 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Component2 = React6.forwardRef(
   function GridActionsCellItemComponent(props, reference) {
-    return /* @__PURE__ */ jsx7(GridActionsCellItem, { ref: reference, component: "a", ...props });
+    return /* @__PURE__ */ jsx15(GridActionsCellItem, { ref: reference, component: "a", ...props });
   }
 );
 var CreatedComponent2 = createLink2(Component2);
 var RouterGridActionsCellItem = (props) => {
-  return /* @__PURE__ */ jsx7(CreatedComponent2, { preload: "intent", ...props });
+  return /* @__PURE__ */ jsx15(CreatedComponent2, { preload: "intent", ...props });
 };
 
 // src/components/router/RouterIconButton.tsx
-import { IconButton } from "@mui/material";
+import { IconButton as IconButton3 } from "@mui/material";
 import { createLink as createLink3 } from "@tanstack/react-router";
-import React3 from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Component3 = React3.forwardRef(function IconButtonComponent(props, reference) {
-  return /* @__PURE__ */ jsx8(IconButton, { ref: reference, component: "a", ...props });
+import React7 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Component3 = React7.forwardRef(function IconButtonComponent(props, reference) {
+  return /* @__PURE__ */ jsx16(IconButton3, { ref: reference, component: "a", ...props });
 });
 var CreatedComponent3 = createLink3(Component3);
 var RouterIconButton = (props) => {
-  return /* @__PURE__ */ jsx8(CreatedComponent3, { preload: "intent", ...props });
+  return /* @__PURE__ */ jsx16(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 jsx9 } from "react/jsx-runtime";
-var Component4 = React4.forwardRef(function LinkComponent(props, reference) {
-  return /* @__PURE__ */ jsx9(Link, { ref: reference, ...props });
+import React8 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Component4 = React8.forwardRef(function LinkComponent(props, reference) {
+  return /* @__PURE__ */ jsx17(Link, { ref: reference, ...props });
 });
 var CreatedComponent4 = createLink4(Component4);
 var RouterLink = (props) => {
-  return /* @__PURE__ */ jsx9(CreatedComponent4, { preload: "intent", ...props });
+  return /* @__PURE__ */ jsx17(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 jsx10 } from "react/jsx-runtime";
-var Component5 = React5.forwardRef(function TabComponent(props, reference) {
-  return /* @__PURE__ */ jsx10(Tab, { ref: reference, component: "a", ...props });
+import React9 from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Component5 = React9.forwardRef(function TabComponent(props, reference) {
+  return /* @__PURE__ */ jsx18(Tab, { ref: reference, component: "a", ...props });
 });
 var CreatedComponent5 = createLink5(Component5);
 var RouterTab = (props) => {
-  return /* @__PURE__ */ jsx10(CreatedComponent5, { preload: "intent", ...props });
+  return /* @__PURE__ */ jsx18(CreatedComponent5, { preload: "intent", ...props });
 };
 
 // src/components/router/RouterNotFound.tsx
-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";
+import { Box as Box4, Divider, Typography as Typography5 } from "@mui/material";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function RouterNotFound() {
-  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") })
+  const { t: t2 } = useTranslation4();
+  return /* @__PURE__ */ jsx19(Box4, { height: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", px: 2, children: /* @__PURE__ */ jsxs10(Box4, { display: "flex", alignItems: "center", mb: 4, children: [
+    /* @__PURE__ */ jsx19(Typography5, { variant: "h3", component: "span", fontWeight: 500, sx: { lineHeight: 1 }, children: "404" }),
+    /* @__PURE__ */ jsx19(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 3 } }),
+    /* @__PURE__ */ jsx19(Typography5, { variant: "h5", component: "span", children: t2("Layout.ThisPageCouldNotBeFound") })
   ] }) });
 }
 
 // src/components/router/RouterError.tsx
-import { Box as Box2, Divider as Divider2, Typography as Typography4 } from "@mui/material";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Box as Box5, Divider as Divider2, Typography as Typography6 } from "@mui/material";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var RouterError = ({ error }) => {
-  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 })
+  return /* @__PURE__ */ jsx20(Box5, { height: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", px: 2, children: /* @__PURE__ */ jsxs11(Box5, { display: "flex", alignItems: "center", mb: 4, children: [
+    /* @__PURE__ */ jsx20(Typography6, { variant: "h3", component: "span", fontWeight: 500, sx: { lineHeight: 1 }, children: error.name || "500" }),
+    /* @__PURE__ */ jsx20(Divider2, { orientation: "vertical", flexItem: true, sx: { mx: 3 } }),
+    /* @__PURE__ */ jsx20(Typography6, { variant: "h5", component: "span", children: error.message })
   ] }) });
 };
 
-// src/providers/LayoutProvider.tsx
-import { LinearProgress, useMediaQuery } from "@mui/material";
-
 // node_modules/@babel/runtime/helpers/esm/extends.js
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
@@ -1241,11 +1842,11 @@ function _objectWithoutPropertiesLoose(r, e) {
 
 // node_modules/@mui/x-date-pickers/esm/LocalizationProvider/LocalizationProvider.js
 var import_prop_types = __toESM(require_prop_types(), 1);
-import * as React6 from "react";
+import * as React10 from "react";
 import { useThemeProps } from "@mui/material/styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 var _excluded = ["localeText"];
-var PickerAdapterContext = /* @__PURE__ */ React6.createContext(null);
+var PickerAdapterContext = /* @__PURE__ */ React10.createContext(null);
 if (process.env.NODE_ENV !== "production") PickerAdapterContext.displayName = "PickerAdapterContext";
 var LocalizationProvider = function LocalizationProvider2(inProps) {
   const {
@@ -1254,7 +1855,7 @@ var LocalizationProvider = function LocalizationProvider2(inProps) {
   const {
     adapter: parentAdapter,
     localeText: parentLocaleText
-  } = React6.useContext(PickerAdapterContext) ?? {
+  } = React10.useContext(PickerAdapterContext) ?? {
     utils: void 0,
     adapter: void 0,
     localeText: void 0
@@ -1273,8 +1874,8 @@ var LocalizationProvider = function LocalizationProvider2(inProps) {
     adapterLocale,
     localeText: themeLocaleText
   } = props;
-  const localeText = React6.useMemo(() => _extends({}, themeLocaleText, parentLocaleText, inLocaleText), [themeLocaleText, parentLocaleText, inLocaleText]);
-  const adapter = React6.useMemo(() => {
+  const localeText = React10.useMemo(() => _extends({}, themeLocaleText, parentLocaleText, inLocaleText), [themeLocaleText, parentLocaleText, inLocaleText]);
+  const adapter = React10.useMemo(() => {
     if (!DateAdapter) {
       if (parentAdapter) {
         return parentAdapter;
@@ -1292,7 +1893,7 @@ var LocalizationProvider = function LocalizationProvider2(inProps) {
     }
     return dateAdapter;
   }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentAdapter]);
-  const defaultDates = React6.useMemo(() => {
+  const defaultDates = React10.useMemo(() => {
     if (!adapter) {
       return null;
     }
@@ -1301,7 +1902,7 @@ var LocalizationProvider = function LocalizationProvider2(inProps) {
       maxDate: adapter.date("2099-12-31T00:00:00.000")
     };
   }, [adapter]);
-  const contextValue = React6.useMemo(() => {
+  const contextValue = React10.useMemo(() => {
     return {
       utils: adapter,
       adapter,
@@ -1506,394 +2107,759 @@ var defaultFormats = {
 var MISSING_UTC_PLUGIN = ["Missing UTC plugin", "To be able to use UTC or timezones, you have to enable the `utc` plugin", "Find more information on https://mui.com/x/react-date-pickers/timezone/#day-js-and-utc"].join("\n");
 var MISSING_TIMEZONE_PLUGIN = ["Missing timezone plugin", "To be able to use timezones, you have to enable both the `utc` and the `timezone` plugin", "Find more information on https://mui.com/x/react-date-pickers/timezone/#day-js-and-timezone"].join("\n");
 var AdapterDayjs = class {
+  isMUIAdapter = true;
+  isTimezoneCompatible = true;
+  lib = "dayjs";
+  escapedCharacters = {
+    start: "[",
+    end: "]"
+  };
+  formatTokenMap = /* @__PURE__ */ (() => formatTokenMap)();
   constructor({
-    locale: _locale,
+    locale,
     formats
   } = {}) {
-    this.isMUIAdapter = true;
-    this.isTimezoneCompatible = true;
-    this.lib = "dayjs";
-    this.locale = void 0;
-    this.formats = void 0;
-    this.escapedCharacters = {
-      start: "[",
-      end: "]"
-    };
-    this.formatTokenMap = formatTokenMap;
-    this.setLocaleToValue = (value) => {
-      const expectedLocale = this.getCurrentLocaleCode();
-      if (expectedLocale === value.locale()) {
-        return value;
-      }
-      return value.locale(expectedLocale);
-    };
-    this.hasUTCPlugin = () => typeof dayjs.utc !== "undefined";
-    this.hasTimezonePlugin = () => typeof dayjs.tz !== "undefined";
-    this.isSame = (value, comparing, comparisonTemplate) => {
-      const comparingInValueTimezone = this.setTimezone(comparing, this.getTimezone(value));
-      return value.format(comparisonTemplate) === comparingInValueTimezone.format(comparisonTemplate);
-    };
-    this.cleanTimezone = (timezone) => {
-      switch (timezone) {
-        case "default": {
-          return void 0;
-        }
-        case "system": {
-          return dayjs.tz.guess();
-        }
-        default: {
-          return timezone;
-        }
-      }
-    };
-    this.createSystemDate = (value) => {
-      let date;
-      if (this.hasUTCPlugin() && this.hasTimezonePlugin()) {
-        const timezone = dayjs.tz.guess();
-        if (timezone === "UTC") {
-          date = dayjs(value);
-        } else {
-          date = dayjs.tz(value, timezone);
-        }
-      } else {
-        date = dayjs(value);
-      }
-      return this.setLocaleToValue(date);
-    };
-    this.createUTCDate = (value) => {
-      if (!this.hasUTCPlugin()) {
-        throw new Error(MISSING_UTC_PLUGIN);
-      }
-      return this.setLocaleToValue(dayjs.utc(value));
-    };
-    this.createTZDate = (value, timezone) => {
-      if (!this.hasUTCPlugin()) {
-        throw new Error(MISSING_UTC_PLUGIN);
-      }
-      if (!this.hasTimezonePlugin()) {
-        throw new Error(MISSING_TIMEZONE_PLUGIN);
-      }
-      const keepLocalTime = value !== void 0 && !value.endsWith("Z");
-      return this.setLocaleToValue(dayjs(value).tz(this.cleanTimezone(timezone), keepLocalTime));
-    };
-    this.getLocaleFormats = () => {
-      const locales = dayjs.Ls;
-      const locale = this.locale || "en";
-      let localeObject = locales[locale];
-      if (localeObject === void 0) {
-        if (process.env.NODE_ENV !== "production") {
-          warnOnce(["MUI X: Your locale has not been found.", "Either the locale key is not a supported one. Locales supported by dayjs are available here: https://github.com/iamkun/dayjs/tree/dev/src/locale.", "Or you forget to import the locale from 'dayjs/locale/{localeUsed}'", "fallback on English locale."]);
-        }
-        localeObject = locales.en;
-      }
-      return localeObject.formats;
-    };
-    this.adjustOffset = (value) => {
-      if (!this.hasTimezonePlugin()) {
-        return value;
-      }
-      const timezone = this.getTimezone(value);
-      if (timezone !== "UTC") {
-        const fixedValue = value.tz(this.cleanTimezone(timezone), true);
-        if (fixedValue.$offset === (value.$offset ?? 0)) {
-          return value;
-        }
-        value.$offset = fixedValue.$offset;
-      }
+    this.locale = locale;
+    this.formats = _extends({}, defaultFormats, formats);
+    dayjs.extend(customParseFormatPlugin);
+  }
+  setLocaleToValue = (value) => {
+    const expectedLocale = this.getCurrentLocaleCode();
+    if (expectedLocale === value.locale()) {
       return value;
-    };
-    this.date = (value, timezone = "default") => {
-      if (value === null) {
-        return null;
-      }
-      if (timezone === "UTC") {
-        return this.createUTCDate(value);
-      }
-      if (timezone === "system" || timezone === "default" && !this.hasTimezonePlugin()) {
-        return this.createSystemDate(value);
-      }
-      return this.createTZDate(value, timezone);
-    };
-    this.getInvalidDate = () => dayjs(/* @__PURE__ */ new Date("Invalid date"));
-    this.getTimezone = (value) => {
-      if (this.hasTimezonePlugin()) {
-        const zone = value.$x?.$timezone;
-        if (zone) {
-          return zone;
-        }
+    }
+    return value.locale(expectedLocale);
+  };
+  hasUTCPlugin = () => typeof dayjs.utc !== "undefined";
+  hasTimezonePlugin = () => typeof dayjs.tz !== "undefined";
+  isSame = (value, comparing, comparisonTemplate) => {
+    const comparingInValueTimezone = this.setTimezone(comparing, this.getTimezone(value));
+    return value.format(comparisonTemplate) === comparingInValueTimezone.format(comparisonTemplate);
+  };
+  /**
+   * Replaces "default" by undefined and "system" by the system timezone before passing it to `dayjs`.
+   */
+  cleanTimezone = (timezone) => {
+    switch (timezone) {
+      case "default": {
+        return void 0;
       }
-      if (this.hasUTCPlugin() && value.isUTC()) {
-        return "UTC";
+      case "system": {
+        return dayjs.tz.guess();
       }
-      return "system";
-    };
-    this.setTimezone = (value, timezone) => {
-      if (this.getTimezone(value) === timezone) {
-        return value;
+      default: {
+        return timezone;
       }
+    }
+  };
+  createSystemDate = (value) => {
+    let date;
+    if (this.hasUTCPlugin() && this.hasTimezonePlugin()) {
+      const timezone = dayjs.tz.guess();
       if (timezone === "UTC") {
-        if (!this.hasUTCPlugin()) {
-          throw new Error(MISSING_UTC_PLUGIN);
-        }
-        return value.utc();
-      }
-      if (timezone === "system") {
-        return value.local();
-      }
-      if (!this.hasTimezonePlugin()) {
-        if (timezone === "default") {
-          return value;
-        }
-        throw new Error(MISSING_TIMEZONE_PLUGIN);
-      }
-      return this.setLocaleToValue(dayjs.tz(value, this.cleanTimezone(timezone)));
-    };
-    this.toJsDate = (value) => {
-      return value.toDate();
-    };
-    this.parse = (value, format) => {
-      if (value === "") {
-        return null;
-      }
-      return dayjs(value, format, this.locale, true);
-    };
-    this.getCurrentLocaleCode = () => {
-      return this.locale || "en";
-    };
-    this.is12HourCycleInCurrentLocale = () => {
-      return /A|a/.test(this.getLocaleFormats().LT || "");
-    };
-    this.expandFormat = (format) => {
-      const localeFormats = this.getLocaleFormats();
-      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] || t2(localeFormats[B]);
-      });
-    };
-    this.isValid = (value) => {
-      if (value == null) {
-        return false;
-      }
-      return value.isValid();
-    };
-    this.format = (value, formatKey) => {
-      return this.formatByString(value, this.formats[formatKey]);
-    };
-    this.formatByString = (value, formatString) => {
-      return this.setLocaleToValue(value).format(formatString);
-    };
-    this.formatNumber = (numberToFormat) => {
-      return numberToFormat;
-    };
-    this.isEqual = (value, comparing) => {
-      if (value === null && comparing === null) {
-        return true;
+        date = dayjs(value);
+      } else {
+        date = dayjs.tz(value, timezone);
       }
-      if (value === null || comparing === null) {
-        return false;
+    } else {
+      date = dayjs(value);
+    }
+    return this.setLocaleToValue(date);
+  };
+  createUTCDate = (value) => {
+    if (!this.hasUTCPlugin()) {
+      throw new Error(MISSING_UTC_PLUGIN);
+    }
+    return this.setLocaleToValue(dayjs.utc(value));
+  };
+  createTZDate = (value, timezone) => {
+    if (!this.hasUTCPlugin()) {
+      throw new Error(MISSING_UTC_PLUGIN);
+    }
+    if (!this.hasTimezonePlugin()) {
+      throw new Error(MISSING_TIMEZONE_PLUGIN);
+    }
+    const keepLocalTime = value !== void 0 && !value.endsWith("Z");
+    return this.setLocaleToValue(dayjs(value).tz(this.cleanTimezone(timezone), keepLocalTime));
+  };
+  getLocaleFormats = () => {
+    const locales = dayjs.Ls;
+    const locale = this.locale || "en";
+    let localeObject = locales[locale];
+    if (localeObject === void 0) {
+      if (process.env.NODE_ENV !== "production") {
+        warnOnce(["MUI X: Your locale has not been found.", "Either the locale key is not a supported one. Locales supported by dayjs are available here: https://github.com/iamkun/dayjs/tree/dev/src/locale.", "Or you forget to import the locale from 'dayjs/locale/{localeUsed}'", "fallback on English locale."]);
       }
-      return value.toDate().getTime() === comparing.toDate().getTime();
-    };
-    this.isSameYear = (value, comparing) => {
-      return this.isSame(value, comparing, "YYYY");
-    };
-    this.isSameMonth = (value, comparing) => {
-      return this.isSame(value, comparing, "YYYY-MM");
-    };
-    this.isSameDay = (value, comparing) => {
-      return this.isSame(value, comparing, "YYYY-MM-DD");
-    };
-    this.isSameHour = (value, comparing) => {
-      return value.isSame(comparing, "hour");
-    };
-    this.isAfter = (value, comparing) => {
-      return value > comparing;
-    };
-    this.isAfterYear = (value, comparing) => {
-      if (!this.hasUTCPlugin()) {
-        return value.isAfter(comparing, "year");
+      localeObject = locales.en;
+    }
+    return localeObject.formats;
+  };
+  /**
+   * If the new day does not have the same offset as the old one (when switching to summer day time for example),
+   * Then dayjs will not automatically adjust the offset (moment does).
+   * We have to parse again the value to make sure the `fixOffset` method is applied.
+   * See https://github.com/iamkun/dayjs/blob/b3624de619d6e734cd0ffdbbd3502185041c1b60/src/plugin/timezone/index.js#L72
+   */
+  adjustOffset = (value) => {
+    if (!this.hasTimezonePlugin()) {
+      return value;
+    }
+    const timezone = this.getTimezone(value);
+    if (timezone !== "UTC") {
+      const fixedValue = value.tz(this.cleanTimezone(timezone), true);
+      if (fixedValue.$offset === (value.$offset ?? 0)) {
+        return value;
       }
-      return !this.isSameYear(value, comparing) && value.utc() > comparing.utc();
-    };
-    this.isAfterDay = (value, comparing) => {
-      if (!this.hasUTCPlugin()) {
-        return value.isAfter(comparing, "day");
+      value.$offset = fixedValue.$offset;
+    }
+    return value;
+  };
+  date = (value, timezone = "default") => {
+    if (value === null) {
+      return null;
+    }
+    if (timezone === "UTC") {
+      return this.createUTCDate(value);
+    }
+    if (timezone === "system" || timezone === "default" && !this.hasTimezonePlugin()) {
+      return this.createSystemDate(value);
+    }
+    return this.createTZDate(value, timezone);
+  };
+  getInvalidDate = () => dayjs(/* @__PURE__ */ new Date("Invalid date"));
+  getTimezone = (value) => {
+    if (this.hasTimezonePlugin()) {
+      const zone = value.$x?.$timezone;
+      if (zone) {
+        return zone;
       }
-      return !this.isSameDay(value, comparing) && value.utc() > comparing.utc();
-    };
-    this.isBefore = (value, comparing) => {
-      return value < comparing;
-    };
-    this.isBeforeYear = (value, comparing) => {
+    }
+    if (this.hasUTCPlugin() && value.isUTC()) {
+      return "UTC";
+    }
+    return "system";
+  };
+  setTimezone = (value, timezone) => {
+    if (this.getTimezone(value) === timezone) {
+      return value;
+    }
+    if (timezone === "UTC") {
       if (!this.hasUTCPlugin()) {
-        return value.isBefore(comparing, "year");
+        throw new Error(MISSING_UTC_PLUGIN);
       }
-      return !this.isSameYear(value, comparing) && value.utc() < comparing.utc();
-    };
-    this.isBeforeDay = (value, comparing) => {
-      if (!this.hasUTCPlugin()) {
-        return value.isBefore(comparing, "day");
+      return value.utc();
+    }
+    if (timezone === "system") {
+      return value.local();
+    }
+    if (!this.hasTimezonePlugin()) {
+      if (timezone === "default") {
+        return value;
       }
-      return !this.isSameDay(value, comparing) && value.utc() < comparing.utc();
-    };
-    this.isWithinRange = (value, [start, end]) => {
-      return value >= start && value <= end;
-    };
-    this.startOfYear = (value) => {
-      return this.adjustOffset(value.startOf("year"));
-    };
-    this.startOfMonth = (value) => {
-      return this.adjustOffset(value.startOf("month"));
-    };
-    this.startOfWeek = (value) => {
-      return this.adjustOffset(this.setLocaleToValue(value).startOf("week"));
-    };
-    this.startOfDay = (value) => {
-      return this.adjustOffset(value.startOf("day"));
-    };
-    this.endOfYear = (value) => {
-      return this.adjustOffset(value.endOf("year"));
-    };
-    this.endOfMonth = (value) => {
-      return this.adjustOffset(value.endOf("month"));
-    };
-    this.endOfWeek = (value) => {
-      return this.adjustOffset(this.setLocaleToValue(value).endOf("week"));
-    };
-    this.endOfDay = (value) => {
-      return this.adjustOffset(value.endOf("day"));
-    };
-    this.addYears = (value, amount) => {
-      return this.adjustOffset(value.add(amount, "year"));
-    };
-    this.addMonths = (value, amount) => {
-      return this.adjustOffset(value.add(amount, "month"));
-    };
-    this.addWeeks = (value, amount) => {
-      return this.adjustOffset(value.add(amount, "week"));
-    };
-    this.addDays = (value, amount) => {
-      return this.adjustOffset(value.add(amount, "day"));
-    };
-    this.addHours = (value, amount) => {
-      return this.adjustOffset(value.add(amount, "hour"));
-    };
-    this.addMinutes = (value, amount) => {
-      return this.adjustOffset(value.add(amount, "minute"));
-    };
-    this.addSeconds = (value, amount) => {
-      return this.adjustOffset(value.add(amount, "second"));
-    };
-    this.getYear = (value) => {
-      return value.year();
-    };
-    this.getMonth = (value) => {
-      return value.month();
-    };
-    this.getDate = (value) => {
-      return value.date();
-    };
-    this.getHours = (value) => {
-      return value.hour();
-    };
-    this.getMinutes = (value) => {
-      return value.minute();
-    };
-    this.getSeconds = (value) => {
-      return value.second();
-    };
-    this.getMilliseconds = (value) => {
-      return value.millisecond();
-    };
-    this.setYear = (value, year) => {
-      return this.adjustOffset(value.set("year", year));
-    };
-    this.setMonth = (value, month) => {
-      return this.adjustOffset(value.set("month", month));
-    };
-    this.setDate = (value, date) => {
-      return this.adjustOffset(value.set("date", date));
-    };
-    this.setHours = (value, hours) => {
-      return this.adjustOffset(value.set("hour", hours));
-    };
-    this.setMinutes = (value, minutes) => {
-      return this.adjustOffset(value.set("minute", minutes));
-    };
-    this.setSeconds = (value, seconds) => {
-      return this.adjustOffset(value.set("second", seconds));
-    };
-    this.setMilliseconds = (value, milliseconds) => {
-      return this.adjustOffset(value.set("millisecond", milliseconds));
-    };
-    this.getDaysInMonth = (value) => {
-      return value.daysInMonth();
-    };
-    this.getWeekArray = (value) => {
-      const start = this.startOfWeek(this.startOfMonth(value));
-      const end = this.endOfWeek(this.endOfMonth(value));
-      let count = 0;
-      let current = start;
-      const nestedWeeks = [];
-      while (current < end) {
-        const weekNumber = Math.floor(count / 7);
-        nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
-        nestedWeeks[weekNumber].push(current);
-        current = this.addDays(current, 1);
-        count += 1;
-      }
-      return nestedWeeks;
-    };
-    this.getWeekNumber = (value) => {
-      return value.week();
-    };
-    this.getYearRange = ([start, end]) => {
-      const startDate = this.startOfYear(start);
-      const endDate = this.endOfYear(end);
-      const years = [];
-      let current = startDate;
-      while (this.isBefore(current, endDate)) {
-        years.push(current);
-        current = this.addYears(current, 1);
-      }
-      return years;
-    };
-    this.locale = _locale;
-    this.formats = _extends({}, defaultFormats, formats);
-    dayjs.extend(customParseFormatPlugin);
-  }
+      throw new Error(MISSING_TIMEZONE_PLUGIN);
+    }
+    return this.setLocaleToValue(dayjs.tz(value, this.cleanTimezone(timezone)));
+  };
+  toJsDate = (value) => {
+    return value.toDate();
+  };
+  parse = (value, format) => {
+    if (value === "") {
+      return null;
+    }
+    return dayjs(value, format, this.locale, true);
+  };
+  getCurrentLocaleCode = () => {
+    return this.locale || "en";
+  };
+  is12HourCycleInCurrentLocale = () => {
+    return /A|a/.test(this.getLocaleFormats().LT || "");
+  };
+  expandFormat = (format) => {
+    const localeFormats = this.getLocaleFormats();
+    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] || t2(localeFormats[B]);
+    });
+  };
+  isValid = (value) => {
+    if (value == null) {
+      return false;
+    }
+    return value.isValid();
+  };
+  format = (value, formatKey) => {
+    return this.formatByString(value, this.formats[formatKey]);
+  };
+  formatByString = (value, formatString) => {
+    return this.setLocaleToValue(value).format(formatString);
+  };
+  formatNumber = (numberToFormat) => {
+    return numberToFormat;
+  };
+  isEqual = (value, comparing) => {
+    if (value === null && comparing === null) {
+      return true;
+    }
+    if (value === null || comparing === null) {
+      return false;
+    }
+    return value.toDate().getTime() === comparing.toDate().getTime();
+  };
+  isSameYear = (value, comparing) => {
+    return this.isSame(value, comparing, "YYYY");
+  };
+  isSameMonth = (value, comparing) => {
+    return this.isSame(value, comparing, "YYYY-MM");
+  };
+  isSameDay = (value, comparing) => {
+    return this.isSame(value, comparing, "YYYY-MM-DD");
+  };
+  isSameHour = (value, comparing) => {
+    return value.isSame(comparing, "hour");
+  };
+  isAfter = (value, comparing) => {
+    return value > comparing;
+  };
+  isAfterYear = (value, comparing) => {
+    if (!this.hasUTCPlugin()) {
+      return value.isAfter(comparing, "year");
+    }
+    return !this.isSameYear(value, comparing) && value.utc() > comparing.utc();
+  };
+  isAfterDay = (value, comparing) => {
+    if (!this.hasUTCPlugin()) {
+      return value.isAfter(comparing, "day");
+    }
+    return !this.isSameDay(value, comparing) && value.utc() > comparing.utc();
+  };
+  isBefore = (value, comparing) => {
+    return value < comparing;
+  };
+  isBeforeYear = (value, comparing) => {
+    if (!this.hasUTCPlugin()) {
+      return value.isBefore(comparing, "year");
+    }
+    return !this.isSameYear(value, comparing) && value.utc() < comparing.utc();
+  };
+  isBeforeDay = (value, comparing) => {
+    if (!this.hasUTCPlugin()) {
+      return value.isBefore(comparing, "day");
+    }
+    return !this.isSameDay(value, comparing) && value.utc() < comparing.utc();
+  };
+  isWithinRange = (value, [start, end]) => {
+    return value >= start && value <= end;
+  };
+  startOfYear = (value) => {
+    return this.adjustOffset(value.startOf("year"));
+  };
+  startOfMonth = (value) => {
+    return this.adjustOffset(value.startOf("month"));
+  };
+  startOfWeek = (value) => {
+    return this.adjustOffset(this.setLocaleToValue(value).startOf("week"));
+  };
+  startOfDay = (value) => {
+    return this.adjustOffset(value.startOf("day"));
+  };
+  endOfYear = (value) => {
+    return this.adjustOffset(value.endOf("year"));
+  };
+  endOfMonth = (value) => {
+    return this.adjustOffset(value.endOf("month"));
+  };
+  endOfWeek = (value) => {
+    return this.adjustOffset(this.setLocaleToValue(value).endOf("week"));
+  };
+  endOfDay = (value) => {
+    return this.adjustOffset(value.endOf("day"));
+  };
+  addYears = (value, amount) => {
+    return this.adjustOffset(value.add(amount, "year"));
+  };
+  addMonths = (value, amount) => {
+    return this.adjustOffset(value.add(amount, "month"));
+  };
+  addWeeks = (value, amount) => {
+    return this.adjustOffset(value.add(amount, "week"));
+  };
+  addDays = (value, amount) => {
+    return this.adjustOffset(value.add(amount, "day"));
+  };
+  addHours = (value, amount) => {
+    return this.adjustOffset(value.add(amount, "hour"));
+  };
+  addMinutes = (value, amount) => {
+    return this.adjustOffset(value.add(amount, "minute"));
+  };
+  addSeconds = (value, amount) => {
+    return this.adjustOffset(value.add(amount, "second"));
+  };
+  getYear = (value) => {
+    return value.year();
+  };
+  getMonth = (value) => {
+    return value.month();
+  };
+  getDate = (value) => {
+    return value.date();
+  };
+  getHours = (value) => {
+    return value.hour();
+  };
+  getMinutes = (value) => {
+    return value.minute();
+  };
+  getSeconds = (value) => {
+    return value.second();
+  };
+  getMilliseconds = (value) => {
+    return value.millisecond();
+  };
+  setYear = (value, year) => {
+    return this.adjustOffset(value.set("year", year));
+  };
+  setMonth = (value, month) => {
+    return this.adjustOffset(value.set("month", month));
+  };
+  setDate = (value, date) => {
+    return this.adjustOffset(value.set("date", date));
+  };
+  setHours = (value, hours) => {
+    return this.adjustOffset(value.set("hour", hours));
+  };
+  setMinutes = (value, minutes) => {
+    return this.adjustOffset(value.set("minute", minutes));
+  };
+  setSeconds = (value, seconds) => {
+    return this.adjustOffset(value.set("second", seconds));
+  };
+  setMilliseconds = (value, milliseconds) => {
+    return this.adjustOffset(value.set("millisecond", milliseconds));
+  };
+  getDaysInMonth = (value) => {
+    return value.daysInMonth();
+  };
+  getWeekArray = (value) => {
+    const start = this.startOfWeek(this.startOfMonth(value));
+    const end = this.endOfWeek(this.endOfMonth(value));
+    let count = 0;
+    let current = start;
+    const nestedWeeks = [];
+    while (current < end) {
+      const weekNumber = Math.floor(count / 7);
+      nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+      nestedWeeks[weekNumber].push(current);
+      current = this.addDays(current, 1);
+      count += 1;
+    }
+    return nestedWeeks;
+  };
+  getWeekNumber = (value) => {
+    return value.week();
+  };
   getDayOfWeek(value) {
     return value.day() + 1;
   }
+  getYearRange = ([start, end]) => {
+    const startDate = this.startOfYear(start);
+    const endDate = this.endOfYear(end);
+    const years = [];
+    let current = startDate;
+    while (this.isBefore(current, endDate)) {
+      years.push(current);
+      current = this.addYears(current, 1);
+    }
+    return years;
+  };
 };
 
 // src/providers/LayoutProvider.tsx
+import { useEffect as useEffect6, useState as useState10 } from "react";
+import { I18nextProvider, useTranslation as useTranslation7 } from "react-i18next";
+import * as z from "zod";
+import { cs, en } from "zod/locales";
+
+// src/components/core/Layout.tsx
+import Menu3 from "@mui/icons-material/Menu";
+import MenuOpen from "@mui/icons-material/MenuOpen";
+import { AppBar, Box as Box9, CssBaseline, IconButton as IconButton5, InitColorSchemeScript, LinearProgress, Toolbar } from "@mui/material";
+import { ThemeProvider, styled as styled2 } from "@mui/material/styles";
 import { useIsFetching, useIsMutating } from "@tanstack/react-query";
-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 { useState as useState2 } from "react";
-import { I18nextProvider, useTranslation as useTranslation5 } from "react-i18next";
+import useLocalStorageState from "use-local-storage-state";
 
-// src/components/core/AppTitle.tsx
-import { Chip as Chip2, Stack as Stack3, Typography as Typography5 } from "@mui/material";
+// src/hooks/ThemeHook.ts
+import { createTheme, darken, lighten } from "@mui/material";
+import { grey as grey2 } from "@mui/material/colors";
+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 useTranslation5 } from "react-i18next";
+var WISTRON_PRIMARY_COLOR = "#00506E";
+var WISTRON_SECONDARY_COLOR = "#64DC00";
+var useGetTheme = (theme) => {
+  const { i18n: i18n2 } = useTranslation5();
+  return createTheme(
+    {
+      cssVariables: {
+        colorSchemeSelector: "data-mui-color-scheme"
+      },
+      colorSchemes: {
+        light: {
+          palette: {
+            primary: { main: WISTRON_PRIMARY_COLOR },
+            secondary: { main: WISTRON_SECONDARY_COLOR }
+          }
+        },
+        dark: {
+          palette: {
+            primary: { main: lighten(WISTRON_PRIMARY_COLOR, 0.5) },
+            secondary: { main: darken(WISTRON_SECONDARY_COLOR, 0.5) }
+          }
+        },
+        ...theme?.colorSchemes
+      },
+      components: {
+        MuiCssBaseline: {
+          styleOverrides: (theme2) => {
+            return {
+              body: {
+                "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
+                  width: "0.7em",
+                  height: "0.7em"
+                },
+                "&::-webkit-scrollbar-track, & *::-webkit-scrollbar-track": {
+                  backgroundColor: theme2.palette.mode === "dark" ? grey2[900] : grey2[200],
+                  borderRadius: "5px"
+                },
+                "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
+                  backgroundColor: theme2.palette.mode === "dark" ? grey2[800] : grey2[400],
+                  borderRadius: "10px"
+                },
+                "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
+                  backgroundColor: theme2.palette.mode === "dark" ? grey2[700] : grey2[500]
+                },
+                "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
+                  backgroundColor: "transparent"
+                }
+              }
+            };
+          }
+        },
+        MuiTableContainer: {
+          styleOverrides: {
+            root: ({ theme: theme2 }) => ({
+              "& .MuiDataGrid-cell--editing": {
+                "& .MuiInputBase-root": {
+                  height: "100%"
+                }
+              },
+              "& .MuiDataGrid-columnHeaderTitle": {
+                fontWeight: 600
+              },
+              "& .Mui-error": {
+                backgroundColor: theme2.palette.error.main,
+                color: theme2.palette.error.contrastText
+              },
+              "& .MuiDataGrid-booleanCell[data-value='true']": {
+                color: `${theme2.palette.success.main} !important`
+              },
+              "& .MuiDataGrid-booleanCell[data-value='false']": {
+                color: `${theme2.palette.error.main} !important`
+              }
+            })
+          }
+        },
+        ...theme?.components
+      }
+    },
+    i18n2.resolvedLanguage === "cs" ? datePickersCsCz : datePickersEnUs,
+    i18n2.resolvedLanguage === "cs" ? dataGridCsCz : dataGridEnUs,
+    i18n2.resolvedLanguage === "cs" ? csCZ : enUS
+  );
+};
 
-// src/contexts/LayoutContext.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var LayoutContext = createContext2({});
-var useLayout = () => useContext2(LayoutContext);
+// src/components/core/navigation/NavigationRail.tsx
+import { useMediaQuery } from "@mui/material";
+import Box7 from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import { useTheme as useTheme2 } from "@mui/material/styles";
+import { useNavigate, useRouterState as useRouterState2 } from "@tanstack/react-router";
 
-// src/components/core/AppTitle.tsx
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
-var AppTitle = () => {
-  const { appTitle } = useLayout();
-  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/navigation/NavigationList.tsx
+import Divider3 from "@mui/material/Divider";
+import List3 from "@mui/material/List";
+import ListSubheader from "@mui/material/ListSubheader";
+import { Fragment as Fragment4, useEffect as useEffect5, useState as useState7 } from "react";
+
+// src/components/core/navigation/NavigationListItem.tsx
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Avatar from "@mui/material/Avatar";
+import Box6 from "@mui/material/Box";
+import Collapse from "@mui/material/Collapse";
+import Grow from "@mui/material/Grow";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton3 from "@mui/material/ListItemButton";
+import ListItemIcon3 from "@mui/material/ListItemIcon";
+import ListItemText3 from "@mui/material/ListItemText";
+import Paper2 from "@mui/material/Paper";
+import { styled } from "@mui/material/styles";
+import Typography7 from "@mui/material/Typography";
+import { Fragment as Fragment3, useMemo as useMemo3, useState as useState6 } from "react";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+var ICON_SIZE = 34;
+var StyledNavButton = styled(ListItemButton3)(({ theme }) => ({
+  borderRadius: 8,
+  "&.Mui-selected": {
+    "& .MuiListItemIcon-root, & .MuiTypography-root, & .MuiSvgIcon-root": {
+      color: (theme.vars ?? theme).palette.primary.dark
+    },
+    "& .MuiAvatar-root": {
+      backgroundColor: (theme.vars ?? theme).palette.primary.dark
+    },
+    "& .MuiTouchRipple-child": {
+      backgroundColor: (theme.vars ?? theme).palette.primary.dark
+    }
+  },
+  "& .MuiSvgIcon-root": {
+    color: (theme.vars ?? theme).palette.action.active
+  },
+  "& .MuiAvatar-root": {
+    backgroundColor: (theme.vars ?? theme).palette.action.active
+  }
+}));
+var IconOrAvatar = ({ item, collapsed }) => {
+  if (item.icon || collapsed) {
+    return /* @__PURE__ */ jsxs12(Box6, { sx: collapsed ? { position: "absolute", left: "50%", top: "calc(50% - 6px)", transform: "translate(-50%, -50%)" } : {}, children: [
+      /* @__PURE__ */ jsxs12(ListItemIcon3, { sx: { display: "flex", alignItems: "center", justifyContent: "center", minWidth: ICON_SIZE }, children: [
+        item.icon ?? null,
+        !item.icon && collapsed ? /* @__PURE__ */ jsx21(Avatar, { sx: { width: ICON_SIZE - 7, height: ICON_SIZE - 7, fontSize: 12 }, children: item.title }) : null
+      ] }),
+      collapsed ? /* @__PURE__ */ jsx21(
+        Typography7,
+        {
+          variant: "caption",
+          sx: {
+            position: "absolute",
+            bottom: -18,
+            left: "50%",
+            transform: "translateX(-50%)",
+            fontSize: 10,
+            fontWeight: 500,
+            textAlign: "center",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            maxWidth: MINI_WIDTH - 28
+          },
+          children: item.title
+        }
+      ) : null
+    ] });
+  }
+  return null;
+};
+var MiniPopover = ({ open, leftOffset = MINI_WIDTH - 2, children }) => /* @__PURE__ */ jsx21(Grow, { in: open, children: /* @__PURE__ */ jsx21(Box6, { sx: { position: "fixed", left: leftOffset, pl: "6px" }, children: /* @__PURE__ */ jsx21(Paper2, { sx: { pt: 0.5, pb: 0.5, transform: "translateY(calc(50% - 30px))" }, children }) }) });
+var NavigationListItem = ({ item, isOpen, selected, disabled, collapsed, isSidebarFullyExpanded = true, isSidebarFullyCollapsed, onClick, renderNested }) => {
+  const [hoveredPopoverItem, setHoveredPopoverItem] = useState6(null);
+  const chevronSx = useMemo3(() => {
+    if (collapsed && isSidebarFullyCollapsed && item.children) {
+      return {
+        fontSize: 18,
+        position: "absolute",
+        top: "41.5%",
+        right: "2px",
+        transform: "translateY(-50%) rotate(-90deg)"
+      };
+    }
+    if (!collapsed && isSidebarFullyExpanded && item.children) {
+      return {
+        ml: 0.5,
+        transform: `rotate(${isOpen ? 0 : -90}deg)`,
+        transition: (theme) => theme.transitions.create("transform", {
+          easing: theme.transitions.easing.sharp,
+          duration: 100
+        })
+      };
+    }
+    return { display: "none" };
+  }, [collapsed, isSidebarFullyExpanded, isSidebarFullyCollapsed, isOpen, item.children]);
+  const listItem = /* @__PURE__ */ jsxs12(
+    ListItem,
+    {
+      ...item.children && collapsed ? {
+        onMouseEnter: () => {
+          setHoveredPopoverItem(item.title);
+        },
+        onMouseLeave: () => {
+          setHoveredPopoverItem(null);
+        }
+      } : {},
+      sx: { py: 0, px: 1, overflowX: "hidden" },
+      children: [
+        /* @__PURE__ */ jsxs12(StyledNavButton, { selected, disabled, sx: { px: 1.4, height: collapsed ? 60 : 48 }, onClick: () => onClick(item), children: [
+          /* @__PURE__ */ jsx21(IconOrAvatar, { item, collapsed }),
+          !collapsed && /* @__PURE__ */ jsx21(
+            ListItemText3,
+            {
+              primary: item.title,
+              slotProps: { primary: { noWrap: true, title: item.title } },
+              sx: { ml: 1.2, flex: 1, minWidth: 0, "& .MuiTypography-root": { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }
+            }
+          ),
+          item.children ? /* @__PURE__ */ jsx21(ExpandMoreIcon, { sx: chevronSx }) : null
+        ] }),
+        item.children && collapsed ? /* @__PURE__ */ jsx21(MiniPopover, { open: item.title === hoveredPopoverItem, children: renderNested?.(item.children) }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs12(Fragment3, { children: [
+    listItem,
+    item.children && !collapsed ? /* @__PURE__ */ jsx21(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: renderNested?.(item.children) }) : null
+  ] }, item.to);
+};
+
+// src/components/core/navigation/NavigationList.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var isPageItem = (item) => !("kind" in item);
+var isDivider = (item) => "kind" in item && item.kind === "divider";
+var isHeader = (item) => "kind" in item && item.kind === "header";
+var NavigationList = ({ subNavigation, depth = 0, collapsed, isPopover, isSidebarFullyExpanded = true, isSidebarFullyCollapsed, expandedWidth, renderItem, activePath, onNavigate }) => {
+  const [openKeys, setOpenKeys] = useState7([]);
+  useEffect5(() => {
+    if (collapsed) setOpenKeys([]);
+  }, [collapsed]);
+  const toggleKey = (key) => setOpenKeys((previous) => previous.includes(key) ? previous.filter((k) => k !== key) : [...previous, key]);
+  const renderNested = (children) => /* @__PURE__ */ jsx22(
+    NavigationList,
+    {
+      subNavigation: children,
+      depth: depth + 1,
+      isPopover: collapsed,
+      expandedWidth,
+      activePath,
+      onNavigate
+    }
+  );
+  return /* @__PURE__ */ jsx22(
+    List3,
+    {
+      sx: {
+        padding: 0,
+        mt: isPopover && depth === 1 ? 0.5 : 0,
+        mb: depth === 0 && !isPopover ? 4 : 0.5,
+        pl: (isPopover ? 1 : 2) * (isPopover ? depth - 1 : depth),
+        minWidth: isPopover && depth === 1 ? EXPANDED_WIDTH : "auto",
+        width: collapsed ? MINI_WIDTH : "auto"
+      },
+      children: subNavigation.map((navItem, index) => {
+        if (isHeader(navItem)) {
+          return /* @__PURE__ */ jsx22(
+            ListSubheader,
+            {
+              sx: {
+                fontSize: 12,
+                fontWeight: "700",
+                height: collapsed ? 0 : 40,
+                px: 2,
+                minWidth: expandedWidth,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                zIndex: 2,
+                bgcolor: "transparent",
+                position: "static"
+              },
+              children: navItem.title
+            },
+            `subheader-${depth}-${index}`
+          );
+        }
+        if (isDivider(navItem)) {
+          const nextItem = subNavigation[index + 1];
+          return /* @__PURE__ */ jsx22("li", { children: /* @__PURE__ */ jsx22(Divider3, { sx: { mx: 1, mt: 1, mb: nextItem && isHeader(nextItem) && !collapsed ? 0 : 1 } }) }, `divider-${depth}-${index}`);
+        }
+        if (!isPageItem(navItem)) return null;
+        const key = `item-${depth}-${index}`;
+        const uniqueItemKey = `${depth}-${index}-${navItem.title}`;
+        if (renderItem) return /* @__PURE__ */ jsx22(Fragment4, { children: renderItem(navItem, { collapsed: !!collapsed }) }, key);
+        return /* @__PURE__ */ jsx22(
+          NavigationListItem,
+          {
+            item: navItem,
+            isOpen: openKeys.includes(uniqueItemKey),
+            selected: activePath === navItem.to,
+            collapsed,
+            isSidebarFullyExpanded,
+            isSidebarFullyCollapsed,
+            onClick: (item) => item.children && !collapsed ? toggleKey(uniqueItemKey) : onNavigate(item),
+            renderNested
+          },
+          key
+        );
+      })
+    }
+  );
+};
+
+// src/components/core/navigation/NavigationRail.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var MINI_WIDTH = 84;
+var EXPANDED_WIDTH = 320;
+var TOOLBAR_HEIGHT = 65;
+var NavigationRail = ({ navigation, expanded, setExpanded }) => {
+  const navigate = useNavigate();
+  const routerState = useRouterState2();
+  const theme = useTheme2();
+  const showPermanent = useMediaQuery(theme.breakpoints.up("sm"));
+  const drawerContent = (collapsed) => /* @__PURE__ */ jsx23(
+    Box7,
+    {
+      component: "nav",
+      sx: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        overflow: "auto",
+        scrollbarGutter: collapsed ? "stable" : "auto",
+        overflowX: "hidden",
+        pt: navigation[0] && isHeader(navigation[0]) && !collapsed ? 0 : 2
+      },
+      children: /* @__PURE__ */ jsx23(
+        NavigationList,
+        {
+          subNavigation: navigation,
+          collapsed,
+          isSidebarFullyExpanded: expanded,
+          isSidebarFullyCollapsed: !expanded,
+          expandedWidth: EXPANDED_WIDTH,
+          activePath: routerState.location.pathname,
+          onNavigate: navigate
+        }
+      )
+    }
+  );
+  if (showPermanent)
+    return /* @__PURE__ */ jsx23(
+      Drawer,
+      {
+        variant: "permanent",
+        sx: {
+          width: expanded ? EXPANDED_WIDTH : MINI_WIDTH,
+          ["& .MuiDrawer-paper"]: {
+            position: "absolute",
+            top: `${TOOLBAR_HEIGHT}px`,
+            height: `calc(100% - ${TOOLBAR_HEIGHT}px)`,
+            width: expanded ? EXPANDED_WIDTH : MINI_WIDTH
+          }
+        },
+        children: drawerContent(!expanded)
+      }
+    );
+  return /* @__PURE__ */ jsx23(Drawer, { open: expanded, onClose: () => setExpanded(false), children: drawerContent(!expanded) });
 };
 
 // src/components/core/ToolbarAccount.tsx
@@ -1907,9 +2873,9 @@ 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";
+import { Avatar as Avatar2, Box as Box8, IconButton as IconButton4, List as List4, ListItem as ListItem2, ListItemButton as ListItemButton4, ListItemIcon as ListItemIcon4, ListItemText as ListItemText4, ListSubheader as ListSubheader2, Menu as Menu2, Typography as Typography8, useColorScheme } from "@mui/material";
+import { Fragment as Fragment5, useState as useState8 } from "react";
+import { useTranslation as useTranslation6 } from "react-i18next";
 
 // src/auth-test/keycloak.ts
 import { useRouter } from "@tanstack/react-router";
@@ -1929,12 +2895,12 @@ function useKeycloak() {
 }
 
 // src/components/core/ToolbarAccount.tsx
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var ToolbarAccount = () => {
-  const [anchorElement, setAnchorElement] = useState();
-  const [tab, setTab] = useState("settings");
+  const [anchorElement, setAnchorElement] = useState8();
+  const [tab, setTab] = useState8("settings");
   const open = Boolean(anchorElement);
-  const { t: t2, i18n: i18n2 } = useTranslation3();
+  const { t: t2, i18n: i18n2 } = useTranslation6();
   const { mode, setMode } = useColorScheme();
   const changeLanguage = (newLanguage) => () => {
     i18n2.changeLanguage(newLanguage).finally(() => closeMenu());
@@ -1969,160 +2935,124 @@ var ToolbarAccount = () => {
     setTimeout(() => setTab("settings"), 300);
   };
   const changeTab = (newTab) => () => setTab(newTab);
-  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: t2("Layout.Appearance"), secondary: getModeText() }),
-      /* @__PURE__ */ jsx14(ChevronRight, {})
+  const settings = /* @__PURE__ */ jsxs13(List4, { component: "nav", subheader: /* @__PURE__ */ jsx24(ListSubheader2, { sx: { backgroundColor: "transparent" }, children: t2("Layout.Settings") }), children: [
+    /* @__PURE__ */ jsxs13(ListItemButton4, { onClick: changeTab("theme"), sx: { py: 0.3 }, children: [
+      /* @__PURE__ */ jsx24(ListItemIcon4, { children: /* @__PURE__ */ jsx24(Brightness4, {}) }),
+      /* @__PURE__ */ jsx24(ListItemText4, { primary: t2("Layout.Appearance"), secondary: getModeText() }),
+      /* @__PURE__ */ jsx24(ChevronRight, {})
     ] }),
-    /* @__PURE__ */ jsxs6(ListItemButton, { onClick: changeTab("language"), sx: { py: 0.3 }, children: [
-      /* @__PURE__ */ jsx14(ListItemIcon, { children: /* @__PURE__ */ jsx14(Translate, {}) }),
-      /* @__PURE__ */ jsx14(ListItemText, { primary: t2("Layout.Language"), secondary: i18n2.resolvedLanguage === "en" ? "English" : "\u010Ce\u0161tina" }),
-      /* @__PURE__ */ jsx14(ChevronRight, {})
+    /* @__PURE__ */ jsxs13(ListItemButton4, { onClick: changeTab("language"), sx: { py: 0.3 }, children: [
+      /* @__PURE__ */ jsx24(ListItemIcon4, { children: /* @__PURE__ */ jsx24(Translate, {}) }),
+      /* @__PURE__ */ jsx24(ListItemText4, { primary: t2("Layout.Language"), secondary: i18n2.resolvedLanguage === "en" ? "English" : "\u010Ce\u0161tina" }),
+      /* @__PURE__ */ jsx24(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(IconButton2, { size: "small", sx: { mr: 0.5 }, children: /* @__PURE__ */ jsx14(ArrowBack, { fontSize: "small" }) }),
+  const theme = /* @__PURE__ */ jsxs13(List4, { subheader: /* @__PURE__ */ jsxs13(ListSubheader2, { onClick: changeTab("settings"), sx: { backgroundColor: "transparent", display: "flex", alignItems: "center", px: 1, cursor: "pointer" }, children: [
+    /* @__PURE__ */ jsx24(IconButton4, { size: "small", sx: { mr: 0.5 }, children: /* @__PURE__ */ jsx24(ArrowBack, { fontSize: "small" }) }),
     " ",
     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: t2("Layout.Light") })
+    /* @__PURE__ */ jsxs13(ListItemButton4, { onClick: changeMode("light"), disabled: mode === "light", children: [
+      /* @__PURE__ */ jsx24(ListItemIcon4, { children: /* @__PURE__ */ jsx24(LightMode, {}) }),
+      /* @__PURE__ */ jsx24(ListItemText4, { 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: t2("Layout.Dark") })
+    /* @__PURE__ */ jsxs13(ListItemButton4, { onClick: changeMode("dark"), disabled: mode === "dark", children: [
+      /* @__PURE__ */ jsx24(ListItemIcon4, { children: /* @__PURE__ */ jsx24(DarkMode, {}) }),
+      /* @__PURE__ */ jsx24(ListItemText4, { 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: t2("Layout.System") })
+    /* @__PURE__ */ jsxs13(ListItemButton4, { onClick: changeMode("system"), disabled: mode === "system", children: [
+      /* @__PURE__ */ jsx24(ListItemIcon4, { children: /* @__PURE__ */ jsx24(SettingsBrightness, {}) }),
+      /* @__PURE__ */ jsx24(ListItemText4, { 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(IconButton2, { size: "small", sx: { mr: 0.5 }, children: /* @__PURE__ */ jsx14(ArrowBack, { fontSize: "small" }) }),
+  const language = /* @__PURE__ */ jsxs13(List4, { subheader: /* @__PURE__ */ jsxs13(ListSubheader2, { onClick: changeTab("settings"), sx: { backgroundColor: "transparent", display: "flex", alignItems: "center", px: 1, cursor: "pointer" }, children: [
+    /* @__PURE__ */ jsx24(IconButton4, { size: "small", sx: { mr: 0.5 }, children: /* @__PURE__ */ jsx24(ArrowBack, { fontSize: "small" }) }),
     " ",
     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" }) })
+    /* @__PURE__ */ jsx24(ListItemButton4, { onClick: changeLanguage("en"), disabled: i18n2.resolvedLanguage === "en", children: /* @__PURE__ */ jsx24(ListItemText4, { primary: "English" }) }),
+    /* @__PURE__ */ jsx24(ListItemButton4, { onClick: changeLanguage("cs"), disabled: i18n2.resolvedLanguage === "cs", children: /* @__PURE__ */ jsx24(ListItemText4, { primary: "\u010Ce\u0161tina" }) })
   ] });
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__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(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 })
+  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+    /* @__PURE__ */ jsx24(IconButton4, { size: "small", edge: "end", onClick: openMenu, children: user?.name ? /* @__PURE__ */ jsx24(Avatar2, { sx: { width: { xs: 32, sm: 40 }, height: { xs: 32, sm: 40 }, bgcolor: "primary.main" }, children: /* @__PURE__ */ jsx24(Typography8, { variant: "subtitle2", sx: { fontWeight: "bold", lineHeight: 0 }, children: usernameInitials() }) }) : /* @__PURE__ */ jsx24(AccountCircle, { fontSize: "large" }) }),
+    /* @__PURE__ */ jsx24(Menu2, { anchorEl: anchorElement, open, onClose: closeMenu, children: /* @__PURE__ */ jsxs13(Box8, { sx: { width: 240 }, children: [
+      /* @__PURE__ */ jsx24(List4, { children: user?.name ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+        /* @__PURE__ */ jsx24(ListItem2, { children: /* @__PURE__ */ jsx24(ListItemText4, { primary: user.name, secondary: /* @__PURE__ */ jsxs13("span", { children: [
+          /* @__PURE__ */ jsx24("span", { children: user.employeeId }),
+          /* @__PURE__ */ jsx24("br", {}),
+          /* @__PURE__ */ jsx24("span", { children: user.department })
         ] }) }) }),
-        /* @__PURE__ */ jsxs6(ListItemButton, { onClick: () => keycloak.logout(), children: [
-          /* @__PURE__ */ jsx14(ListItemIcon, { children: /* @__PURE__ */ jsx14(Logout, { color: "error" }) }),
-          /* @__PURE__ */ jsx14(ListItemText, { primary: t2("Layout.Logout") })
+        /* @__PURE__ */ jsxs13(ListItemButton4, { onClick: () => keycloak.logout(), children: [
+          /* @__PURE__ */ jsx24(ListItemIcon4, { children: /* @__PURE__ */ jsx24(Logout, { color: "error" }) }),
+          /* @__PURE__ */ jsx24(ListItemText4, { primary: t2("Layout.Logout") })
         ] })
-      ] }) : /* @__PURE__ */ jsxs6(ListItemButton, { onClick: () => keycloak.login(), children: [
-        /* @__PURE__ */ jsx14(ListItemIcon, { children: /* @__PURE__ */ jsx14(Login, { color: "success" }) }),
-        /* @__PURE__ */ jsx14(ListItemText, { primary: t2("Layout.LogIn") })
+      ] }) : /* @__PURE__ */ jsxs13(ListItemButton4, { onClick: () => keycloak.login(), children: [
+        /* @__PURE__ */ jsx24(ListItemIcon4, { children: /* @__PURE__ */ jsx24(Login, { color: "success" }) }),
+        /* @__PURE__ */ jsx24(ListItemText4, { primary: t2("Layout.LogIn") })
       ] }) }),
       tab === "settings" && settings,
       tab === "theme" && theme,
-      tab === "language" && language
-    ] }) })
-  ] });
-};
-
-// src/hooks/ThemeHook.ts
-import { createTheme, darken, lighten } from "@mui/material";
-import { grey } from "@mui/material/colors";
-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";
-var WISTRON_PRIMARY_COLOR = "#00506E";
-var WISTRON_SECONDARY_COLOR = "#64DC00";
-var useGetTheme = (theme) => {
-  const { i18n: i18n2 } = useTranslation4();
-  return createTheme(
-    {
-      cssVariables: {
-        colorSchemeSelector: "data-toolpad-color-scheme"
-      },
-      colorSchemes: {
-        light: {
-          palette: {
-            primary: { main: WISTRON_PRIMARY_COLOR },
-            secondary: { main: WISTRON_SECONDARY_COLOR }
-          }
-        },
-        dark: {
-          palette: {
-            primary: { main: lighten(WISTRON_PRIMARY_COLOR, 0.5) },
-            secondary: { main: darken(WISTRON_SECONDARY_COLOR, 0.5) }
-          }
-        },
-        ...theme?.colorSchemes
-      },
-      components: {
-        MuiCssBaseline: {
-          styleOverrides: (theme2) => {
-            return {
-              body: {
-                "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
-                  width: "0.7em",
-                  height: "0.7em"
-                },
-                "&::-webkit-scrollbar-track, & *::-webkit-scrollbar-track": {
-                  backgroundColor: theme2.palette.mode === "dark" ? grey[900] : grey[200],
-                  borderRadius: "5px"
-                },
-                "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
-                  backgroundColor: theme2.palette.mode === "dark" ? grey[800] : grey[400],
-                  borderRadius: "10px"
-                },
-                "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
-                  backgroundColor: theme2.palette.mode === "dark" ? grey[700] : grey[500]
-                },
-                "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
-                  backgroundColor: "transparent"
-                }
-              }
-            };
-          }
-        },
-        MuiTableContainer: {
-          styleOverrides: {
-            root: ({ theme: theme2 }) => ({
-              flexGrow: 1,
-              "& .MuiDataGrid-cell--editing": {
-                "& .MuiInputBase-root": {
-                  height: "100%"
-                }
-              },
-              "& .MuiDataGrid-columnHeaderTitle": {
-                fontWeight: 600
-              },
-              "& .Mui-error": {
-                backgroundColor: theme2.palette.error.main,
-                color: theme2.palette.error.contrastText
-              },
-              "& .MuiDataGrid-booleanCell[data-value='true']": {
-                color: `${theme2.palette.success.main} !important`
-              },
-              "& .MuiDataGrid-booleanCell[data-value='false']": {
-                color: `${theme2.palette.error.main} !important`
+      tab === "language" && language
+    ] }) })
+  ] });
+};
+
+// src/components/core/Layout.tsx
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+var DrawerHeader = styled2("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  padding: theme.spacing(0, 1),
+  ...theme.mixins.toolbar
+}));
+var Layout = (props) => {
+  const theme = useGetTheme(props.theme);
+  const [navigationOpen, setNavigationOpen] = useLocalStorageState("navigationOpen", { defaultServerValue: false });
+  const isFetching = !!useIsFetching();
+  const isMutating = !!useIsMutating();
+  return /* @__PURE__ */ jsxs14(ThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsx25(InitColorSchemeScript, {}),
+    /* @__PURE__ */ jsx25(CssBaseline, {}),
+    /* @__PURE__ */ jsxs14(Box9, { sx: { display: "flex", height: "100dvh", maxHeight: "100dvh", overflow: "hidden", width: "100%" }, children: [
+      /* @__PURE__ */ jsx25(
+        AppBar,
+        {
+          color: "transparent",
+          position: "fixed",
+          sx: {
+            borderBottom: "1px solid",
+            borderColor: theme.vars?.palette.divider,
+            boxShadow: "none"
+          },
+          children: /* @__PURE__ */ jsxs14(Toolbar, { children: [
+            props.navigation && /* @__PURE__ */ jsx25(
+              IconButton5,
+              {
+                onClick: () => setNavigationOpen((previous) => !previous),
+                sx: { marginRight: 2 },
+                children: navigationOpen ? /* @__PURE__ */ jsx25(MenuOpen, {}) : /* @__PURE__ */ jsx25(Menu3, {})
               }
-            })
-          }
-        },
-        ...theme?.components
-      }
-    },
-    i18n2.resolvedLanguage === "cs" ? datePickersCsCz : datePickersEnUs,
-    i18n2.resolvedLanguage === "cs" ? dataGridCsCz : dataGridEnUs,
-    i18n2.resolvedLanguage === "cs" ? csCZ : enUS
-  );
+            ),
+            /* @__PURE__ */ jsx25(AppTitle, {}),
+            /* @__PURE__ */ jsx25(ToolbarAccount, {})
+          ] })
+        }
+      ),
+      props.navigation && /* @__PURE__ */ jsx25(NavigationRail, { navigation: props.navigation, expanded: navigationOpen ?? false, setExpanded: setNavigationOpen }),
+      /* @__PURE__ */ jsxs14(Box9, { component: "main", sx: { flexGrow: 1, display: "flex", flexDirection: "column", minWidth: 0, height: "100%", overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsx25(DrawerHeader, {}),
+        /* @__PURE__ */ jsx25(Box9, { sx: { flex: 1, overflow: "auto", position: "relative" }, children: props.children })
+      ] })
+    ] }),
+    (isFetching || isMutating) && /* @__PURE__ */ jsx25(LinearProgress, { sx: { position: "fixed", top: { xs: 56, sm: 64 }, left: 0, right: 0 } })
+  ] });
 };
 
+// src/contexts/LayoutContext.ts
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var LayoutContext = createContext4(null);
+
 // src/utils/i18n.ts
 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
@@ -2139,85 +3069,91 @@ i18n.use(HttpBackend).use(LanguageDetector).use(initReactI18next).init({
   }
 });
 
+// src/providers/DialogsProvider.tsx
+import { useCallback, useId, useMemo as useMemo4, useRef as useRef3, useState as useState9 } from "react";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+function DialogsProvider({ children, unmountAfter = 1e3 }) {
+  const [stack, setStack] = useState9([]);
+  const keyPrefix = useId();
+  const nextId = useRef3(0);
+  const dialogMetadata = useRef3(/* @__PURE__ */ new WeakMap());
+  const requestDialog = useEventCallback_default(function open(Component6, payload, options = {}) {
+    const { onClose = async () => {
+    } } = options;
+    let resolve;
+    const promise = new Promise((resolveImpl) => {
+      resolve = resolveImpl;
+    });
+    const key = `${keyPrefix}-${nextId.current}`;
+    nextId.current += 1;
+    const newEntry = {
+      key,
+      open: true,
+      promise,
+      Component: Component6,
+      payload,
+      onClose,
+      resolve
+    };
+    dialogMetadata.current.set(promise, newEntry);
+    setStack((previousStack) => [...previousStack, newEntry]);
+    return promise;
+  });
+  const removeDialogFromStack = useCallback((dialog) => {
+    setStack((previousStack) => previousStack.filter((entry) => entry.promise !== dialog));
+    dialogMetadata.current.delete(dialog);
+  }, []);
+  const closeDialogUi = useEventCallback_default(function closeDialogUi2(dialog) {
+    setStack(
+      (previousStack) => previousStack.map((entry) => entry.promise === dialog ? { ...entry, open: false } : entry)
+    );
+    setTimeout(() => removeDialogFromStack(dialog), unmountAfter);
+  });
+  const closeDialog = useEventCallback_default(async function closeDialog2(dialog, result) {
+    const entryToClose = dialogMetadata.current.get(dialog);
+    if (!entryToClose) {
+      throw new Error("Dialog not found in stack");
+    }
+    try {
+      await entryToClose.onClose(result);
+    } finally {
+      entryToClose.resolve(result);
+      closeDialogUi(dialog);
+    }
+    return dialog;
+  });
+  const contextValue = useMemo4(() => ({ open: requestDialog, close: closeDialog }), [requestDialog, closeDialog]);
+  return /* @__PURE__ */ jsxs15(DialogsContext.Provider, { value: contextValue, children: [
+    children,
+    stack.map(({ key, open, Component: Component6, payload, promise }) => /* @__PURE__ */ jsx26(
+      Component6,
+      {
+        payload,
+        open,
+        onClose: async (result) => {
+          await closeDialog(promise, result);
+        }
+      },
+      key
+    ))
+  ] });
+}
+
 // src/providers/LayoutProvider.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var LayoutProvider = (props) => {
-  const rootRouterState = useRouterState({ select: (s) => s.matches[0] });
-  const theme = useGetTheme(props.theme);
-  const { t: t2 } = useTranslation5();
-  const isFetching = !!useIsFetching();
-  const isMutating = !!useIsMutating();
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const [user, setUser] = useState2({ employeeId: "", name: "Unknown", department: "", company: "", category: "" });
+  const [user, setUser] = useState10({ employeeId: "", name: "Unknown", department: "", company: "", category: "" });
+  const { t: t2 } = useTranslation7();
   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(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: props.defaultSidebarCollapsed ?? true,
-      disableCollapsibleSidebar: props.disableCollapsibleSidebar,
-      sidebarExpandedWidth: props.sidebarExpandedWidth,
-      hideNavigation: navigation?.length === 0,
-      slots: {
-        toolbarActions: () => null,
-        toolbarAccount: ToolbarAccount,
-        appTitle: AppTitle
-      },
-      children: [
-        props.children,
-        (isFetching || isMutating) && /* @__PURE__ */ jsx15(LinearProgress, { sx: { position: "fixed", top: { xs: 56, sm: 64 }, left: 0, right: 0 } })
-      ]
-    }
-  ) }) }) }) }) });
+  useEffect6(() => {
+    z.config(default2.resolvedLanguage === "cs" ? cs() : en());
+  }, []);
+  return /* @__PURE__ */ jsx27(I18nextProvider, { i18n: default2, children: /* @__PURE__ */ jsx27(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: default2.resolvedLanguage, children: /* @__PURE__ */ jsx27(DialogsProvider, { children: /* @__PURE__ */ jsx27(LayoutContext.Provider, { value: { user: { get: user, set: setUser } }, children: /* @__PURE__ */ jsx27(Layout, { navigation, theme: props.theme, children: props.children }) }) }) }) });
 };
 
 // src/index.ts
 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";
 
@@ -2234,11 +3170,11 @@ var getFieldStatus = (field) => {
 };
 
 // src/components/form/FormAutocomplete.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var FormAutocomplete = ({ textFieldProps, ...autocompleteProps }) => {
   const field = useFieldContext();
   const { isTouched, hasError, helperText } = getFieldStatus(field);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx28(
     Autocomplete,
     {
       value: field.state.value,
@@ -2247,7 +3183,7 @@ var FormAutocomplete = ({ textFieldProps, ...autocompleteProps }) => {
       onBlur: field.handleBlur,
       "aria-label": field.name,
       ...autocompleteProps,
-      renderInput: (parameters) => /* @__PURE__ */ jsx16(
+      renderInput: (parameters) => /* @__PURE__ */ jsx28(
         TextField,
         {
           ...parameters,
@@ -2263,15 +3199,15 @@ var FormAutocomplete = ({ textFieldProps, ...autocompleteProps }) => {
 
 // src/components/form/FormCheckbox.tsx
 import { Checkbox, FormControl, FormControlLabel, FormHelperText } from "@mui/material";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var FormCheckbox = (props) => {
   const field = useFieldContext();
   const { isTouched, hasError, helperText } = getFieldStatus(field);
-  return /* @__PURE__ */ jsxs8(FormControl, { component: "fieldset", children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs16(FormControl, { component: "fieldset", children: [
+    /* @__PURE__ */ jsx29(
       FormControlLabel,
       {
-        control: /* @__PURE__ */ jsx17(
+        control: /* @__PURE__ */ jsx29(
           Checkbox,
           {
             name: field.name,
@@ -2285,18 +3221,18 @@ var FormCheckbox = (props) => {
         label: props.label ?? ""
       }
     ),
-    isTouched && hasError && /* @__PURE__ */ jsx17(FormHelperText, { error: hasError, children: helperText })
+    isTouched && hasError && /* @__PURE__ */ jsx29(FormHelperText, { error: hasError, children: helperText })
   ] });
 };
 
 // src/components/form/FormDatePicker.tsx
 import { DatePicker } from "@mui/x-date-pickers-pro";
 import dayjs2 from "dayjs";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var FormDatePicker = (props) => {
   const field = useFieldContext();
   const { isTouched, hasError, helperText } = getFieldStatus(field);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx30(
     DatePicker,
     {
       name: field.name,
@@ -2320,11 +3256,11 @@ var FormDatePicker = (props) => {
 // src/components/form/FormDateTimePicker.tsx
 import { DateTimePicker } from "@mui/x-date-pickers-pro";
 import dayjs3 from "dayjs";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var FormDateTimePicker = (props) => {
   const field = useFieldContext();
   const { isTouched, hasError, helperText } = getFieldStatus(field);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx31(
     DateTimePicker,
     {
       name: field.name,
@@ -2348,11 +3284,11 @@ var FormDateTimePicker = (props) => {
 // src/components/form/FormNumberField.tsx
 import { TextField as TextField2 } from "@mui/material";
 import { NumericFormat } from "react-number-format";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var FormNumberField = ({ options, ...props }) => {
   const field = useFieldContext();
   const { isTouched, hasError, helperText } = getFieldStatus(field);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx32(
     NumericFormat,
     {
       customInput: TextField2,
@@ -2371,13 +3307,13 @@ var FormNumberField = ({ options, ...props }) => {
 
 // src/components/form/FormRadioGroup.tsx
 import { FormControl as FormControl2, FormControlLabel as FormControlLabel2, FormHelperText as FormHelperText2, FormLabel, Radio, RadioGroup } from "@mui/material";
-import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 var FormRadioGroup = ({ label, options, ...props }) => {
   const field = useFieldContext();
   const { isTouched, hasError, helperText } = getFieldStatus(field);
-  return /* @__PURE__ */ jsxs9(FormControl2, { component: "fieldset", children: [
-    label && /* @__PURE__ */ jsx21(FormLabel, { component: "legend", children: label }),
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs17(FormControl2, { component: "fieldset", children: [
+    label && /* @__PURE__ */ jsx33(FormLabel, { component: "legend", children: label }),
+    /* @__PURE__ */ jsx33(
       RadioGroup,
       {
         name: field.name,
@@ -2386,30 +3322,30 @@ var FormRadioGroup = ({ label, options, ...props }) => {
         onBlur: field.handleBlur,
         "aria-label": field.name,
         ...props,
-        children: options.map((option) => /* @__PURE__ */ jsx21(
+        children: options.map((option) => /* @__PURE__ */ jsx33(
           FormControlLabel2,
           {
             value: option.value,
-            control: /* @__PURE__ */ jsx21(Radio, {}),
+            control: /* @__PURE__ */ jsx33(Radio, {}),
             label: option.label
           },
           option.value
         ))
       }
     ),
-    isTouched && hasError && /* @__PURE__ */ jsx21(FormHelperText2, { error: hasError, children: helperText })
+    isTouched && hasError && /* @__PURE__ */ jsx33(FormHelperText2, { error: hasError, children: helperText })
   ] });
 };
 
 // src/components/form/FormSlider.tsx
 import { FormControl as FormControl3, FormHelperText as FormHelperText3, FormLabel as FormLabel2, Slider } from "@mui/material";
-import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var FormSlider = ({ label, ...props }) => {
   const field = useFieldContext();
   const { isTouched, hasError, helperText } = getFieldStatus(field);
-  return /* @__PURE__ */ jsxs10(FormControl3, { component: "fieldset", children: [
-    label && /* @__PURE__ */ jsx22(FormLabel2, { children: label }),
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs18(FormControl3, { component: "fieldset", children: [
+    label && /* @__PURE__ */ jsx34(FormLabel2, { children: label }),
+    /* @__PURE__ */ jsx34(
       Slider,
       {
         name: field.name,
@@ -2420,13 +3356,13 @@ var FormSlider = ({ label, ...props }) => {
         ...props
       }
     ),
-    isTouched && hasError && /* @__PURE__ */ jsx22(FormHelperText3, { error: hasError, children: helperText })
+    isTouched && hasError && /* @__PURE__ */ jsx34(FormHelperText3, { error: hasError, children: helperText })
   ] });
 };
 
 // src/components/form/FormSubmitButton.tsx
-import { Button as Button2 } from "@mui/material";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { Button as Button3 } from "@mui/material";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var FormSubmitButton = (props) => {
   const form = useFormContext();
   const handleClick = (event) => {
@@ -2434,8 +3370,8 @@ var FormSubmitButton = (props) => {
     event.stopPropagation();
     form.handleSubmit();
   };
-  return /* @__PURE__ */ jsx23(form.Subscribe, { selector: (state) => [state.canSubmit, state.isSubmitting], children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsx23(
-    Button2,
+  return /* @__PURE__ */ jsx35(form.Subscribe, { selector: (state) => [state.canSubmit, state.isSubmitting], children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsx35(
+    Button3,
     {
       loading: isSubmitting,
       disabled: !canSubmit,
@@ -2449,15 +3385,15 @@ var FormSubmitButton = (props) => {
 
 // src/components/form/FormSwitch.tsx
 import { FormControl as FormControl4, FormControlLabel as FormControlLabel3, FormHelperText as FormHelperText4, Switch } from "@mui/material";
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 var FormSwitch = (props) => {
   const field = useFieldContext();
   const { isTouched, hasError, helperText } = getFieldStatus(field);
-  return /* @__PURE__ */ jsxs11(FormControl4, { component: "fieldset", children: [
-    /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs19(FormControl4, { component: "fieldset", children: [
+    /* @__PURE__ */ jsx36(
       FormControlLabel3,
       {
-        control: /* @__PURE__ */ jsx24(
+        control: /* @__PURE__ */ jsx36(
           Switch,
           {
             name: field.name,
@@ -2471,17 +3407,17 @@ var FormSwitch = (props) => {
         label: props.label ?? ""
       }
     ),
-    isTouched && hasError && /* @__PURE__ */ jsx24(FormHelperText4, { error: hasError, children: helperText })
+    isTouched && hasError && /* @__PURE__ */ jsx36(FormHelperText4, { error: hasError, children: helperText })
   ] });
 };
 
 // src/components/form/FormTextField.tsx
 import { TextField as TextField3 } from "@mui/material";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var FormTextField = (props) => {
   const field = useFieldContext();
   const { isTouched, hasError, helperText } = getFieldStatus(field);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx37(
     TextField3,
     {
       name: field.name,
@@ -2518,222 +3454,15 @@ var { useAppForm: useLayoutForm, withForm: withLayoutForm } = createFormHook({
 });
 
 // src/index.ts
-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 { default as default3 } from "use-local-storage-state";
+import { useTranslation as useTranslation8 } from "react-i18next";
 import { t } from "i18next";
-
-// src/hooks/FileHooks.ts
-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;
-var useGetFileMetas = (subId, options) => {
-  const { appTitle } = useLayout();
-  return useQuery({
-    ...options,
-    queryKey: [QUERY_KEY, "meta", subId, appTitle],
-    queryFn: ({ signal }) => wczApiClient.request({
-      url: `${BASE_URL}/v1/meta?appName=${appTitle}&subId=${subId}`,
-      method: "GET",
-      signal
-    }),
-    initialData: [],
-    refetchOnWindowFocus: false
-  });
-};
-var useGetFileThumbnail = (meta, options) => {
-  const { appTitle } = useLayout();
-  return useQuery({
-    ...options,
-    queryKey: [QUERY_KEY, "thumbnail", meta?.id, appTitle],
-    queryFn: ({ signal }) => wczApiClient.request({
-      url: `${BASE_URL}/v1/thumbnail?appName=${appTitle}&id=${meta?.id}`,
-      method: "GET",
-      signal,
-      responseType: "blob"
-    }),
-    select: (data) => URL.createObjectURL(data),
-    staleTime: HOUR,
-    gcTime: HOUR,
-    refetchOnWindowFocus: false,
-    enabled: !!meta?.id && options?.enabled
-  });
-};
-var useGetFile = (meta, options) => {
-  const { appTitle } = useLayout();
-  return useQuery({
-    ...options,
-    queryKey: [QUERY_KEY, meta?.id, appTitle],
-    queryFn: ({ signal }) => wczApiClient.request({
-      url: `${BASE_URL}/v1?appName=${appTitle}&id=${meta?.id}`,
-      method: "GET",
-      signal,
-      responseType: "blob"
-    }),
-    select: (data) => URL.createObjectURL(data),
-    staleTime: HOUR,
-    gcTime: HOUR,
-    refetchOnWindowFocus: false,
-    enabled: !!meta?.id && options?.enabled
-  });
-};
-var useDownloadFile = (options) => {
-  const { appTitle } = useLayout();
-  return useMutation({
-    ...options,
-    mutationFn: (meta) => wczApiClient.request({
-      url: `${BASE_URL}/v1/download?appName=${appTitle}&id=${meta.id}`,
-      method: "GET",
-      responseType: "blob"
-    }),
-    onSuccess: (data, variables) => saveAs(data, `${variables.fileName}.${variables.fileExtension}`)
-  });
-};
-var useOpenFile = (options) => {
-  const { appTitle } = useLayout();
-  return useMutation({
-    ...options,
-    mutationFn: (meta) => wczApiClient.request({
-      url: `${BASE_URL}/v1?appName=${appTitle}&id=${meta.id}`,
-      method: "GET",
-      responseType: "blob"
-    }),
-    onSuccess: (data) => {
-      window.open(URL.createObjectURL(data));
-    }
-  });
-};
-var useUpdateFileMeta = (options) => {
-  const { appTitle } = useLayout();
-  const queryClient = useQueryClient();
-  return useMutation({
-    ...options,
-    mutationFn: (meta) => wczApiClient.request({
-      url: `${BASE_URL}/v1/meta?appName=${appTitle}&id=${meta.id}`,
-      method: "PUT",
-      data: meta
-    }),
-    onSettled: () => queryClient.invalidateQueries({ queryKey: [QUERY_KEY, "meta"], exact: false })
-  });
-};
-var useDeleteFile = (options) => {
-  const { appTitle } = useLayout();
-  const queryClient = useQueryClient();
-  return useMutation({
-    ...options,
-    mutationFn: (meta) => wczApiClient.request({
-      url: `${BASE_URL}/v1?appName=${appTitle}&id=${meta.id}`,
-      method: "DELETE"
-    }),
-    onSettled: () => queryClient.invalidateQueries({ queryKey: [QUERY_KEY, "meta"], exact: false })
-  });
-};
-var useDeleteFiles = (options) => {
-  const { appTitle } = useLayout();
-  const queryClient = useQueryClient();
-  return useMutation({
-    ...options,
-    mutationFn: (subId) => wczApiClient.request({
-      url: `${BASE_URL}/v1?appName=${appTitle}&subId=${subId}`,
-      method: "DELETE"
-    }),
-    onSettled: () => queryClient.invalidateQueries({ queryKey: [QUERY_KEY, "meta"], exact: false })
-  });
-};
-var useUploadFile = ({ subId, onSuccess, onError }) => {
-  const { appTitle } = useLayout();
-  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: {
-        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) => {
-        setProgress(0);
-        onError?.(error);
-      },
-      onProgress: (bytesUploaded, bytesTotal) => {
-        setProgress(bytesUploaded / bytesTotal * 100);
-      },
-      onSuccess: () => {
-        setProgress(0);
-        queryClient.invalidateQueries({ queryKey: [QUERY_KEY, "meta"], exact: false });
-        onSuccess?.(metadata);
-      }
-    });
-    const previousUploads = await upload.findPreviousUploads();
-    if (previousUploads.length > 0) {
-      upload.resumeFromPreviousUpload(previousUploads[0]);
-    }
-    upload.start();
-  };
-  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,
+  FileViewer,
   LayoutProvider,
-  PageContainer,
   PageHeader,
   Platform,
   RouterButton,
@@ -2743,6 +3472,7 @@ export {
   RouterLink,
   RouterNotFound,
   RouterTab,
+  TableContainer,
   TypographyWithIcon,
   rootRouteHead,
   t,
@@ -2756,11 +3486,9 @@ export {
   useGetFileMetas,
   useGetFileThumbnail,
   useLayoutForm,
-  useLocalStorageState,
-  useNotifications,
+  default3 as useLocalStorageState,
   useOpenFile,
-  useOptimisticFileMutation,
-  useTranslation6 as useTranslation,
+  useTranslation8 as useTranslation,
   useUpdateFileMeta,
   useUploadFile,
   uuidv72 as uuidv7,