wcz-layout
Version:
1 lines • 89 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","names":["Avatar","useQuery","createServerFn","axios","FC","getAccessToken","getProfilePhoto","method","handler","Promise","accessToken","response","get","ArrayBuffer","responseType","headers","Authorization","Buffer","from","data","toString","UserAvatar","$","_c","$i","Symbol","for","t0","queryKey","queryFn","_temp","staleTime","Infinity","gcTime","photoUrl","t1","undefined","t2","width","xs","sm","height","t3","AccountCircle","ArrowBack","Brightness4","ChevronRight","DarkMode","Done","LightMode","Login","Logout","SettingsBrightness","Translate","Box","IconButton","List","ListItem","ListItemButton","ListItemIcon","ListItemText","ListSubheader","Menu","useColorScheme","rootRouteId","useMatch","FC","Fragment","useState","useTranslation","UserAvatar","TabType","capitalize","value","charAt","toUpperCase","slice","ToolbarAccount","$","_c","$i","Symbol","for","anchorElement","setAnchorElement","tab","setTab","open","Boolean","t","i18n","mode","setMode","t0","from","rootMatch","user","context","T0","closeMenu","openMenu","settings","t1","t2","theme","supportedLanguages","Array","isArray","options","supportedLngs","filter","_temp","languageDisplayNames","Intl","DisplayNames","language","type","t3","t4","icon","label","t5","t6","t7","t8","t9","colorModes","t10","event","currentTarget","t11","undefined","setTimeout","t12","newTab","changeTab","t13","backgroundColor","t14","t15","t16","t17","py","t18","t19","t20","find","m","t21","t22","t23","t24","t25","t26","t27","t28","t29","of","t30","t31","t32","display","alignItems","px","cursor","t33","mr","t34","t35","t36","t37","map","t38","modeValue","Icon","t39","t40","t41","t42","t43","languageCode","changeLanguage","finally","resolvedLanguage","width","xs","sm","height","name","employeeId","department","_temp2","_temp3","lng","location","href","returnTo","pathname","search","encodeURIComponent","Chip","Stack","Typography","useRouter","z","FC","clientEnv","RouterIconButton","PRODUCTION_ENV","getEnv","url","string","refine","u","split","length","transform","toUpperCase","catch","parse","AppTitle","$","_c","$i","Symbol","for","router","t0","origin","env","isProduction","t1","alignItems","flexGrow","t2","t3","VITE_APP_TITLE","t4","t5","LinkOptions","NavigationBase","hidden","NavigationBaseItem","title","icon","React","ReactNode","NavigationPageItem","Pick","kind","NavigationPageGroup","children","Array","NavigationItem","NavigationDivider","NavigationHeader","Navigation","isPageItem","item","isPageGroup","isDivider","isHeader","ExpandMoreIcon","Collapse","Grow","Avatar","Box","ListItem","ListItemButton","ListItemIcon","ListItemText","Paper","styled","Typography","Fragment","useState","MINI_WIDTH","isPageGroup","NavigationItem","NavigationPageGroup","NavigationPageItem","FC","ReactNode","SxProps","Theme","RouterListItemButton","ICON_SIZE","getSelectedColor","theme","vars","palette","primary","dark","getActionActiveColor","action","active","StyledNavButton","borderRadius","Number","shape","color","backgroundColor","routerButtonSx","IconOrAvatar","item","collapsed","t0","$","_c","$i","Symbol","for","icon","t1","position","left","top","transform","t2","display","alignItems","justifyContent","minWidth","t3","t4","title","width","height","fontSize","split","slice","map","_temp","join","t5","t6","bottom","fontWeight","textAlign","whiteSpace","overflow","textOverflow","maxWidth","t7","MiniPopoverProps","open","children","MiniPopover","pl","pb","pt","maxHeight","overflowY","overscrollBehavior","NavigationListItemProps","isOpen","selected","disabled","isSidebarFullyExpanded","isSidebarFullyCollapsed","onClick","renderNested","sub","Array","onClose","NavigationListItem","undefined","hoveredMiniItemId","setHoveredMiniItemId","groupItem","itemId","to","href","right","ml","transition","transitions","create","easing","sharp","duration","chevronSx","shouldJustExpand","px","sx","buttonProps","t8","noWrap","flex","t9","t10","buttonContent","t11","onMouseEnter","onMouseLeave","t12","py","overflowX","t13","params","search","t14","t15","listItem","t16","t17","word","charAt","toUpperCase","Divider","List","ListSubheader","Fragment","useEffect","useState","NavigationListItem","MINI_WIDTH","FC","ReactNode","isPageItem","isPageGroup","isDivider","isHeader","Navigation","NavigationItem","NavigationPageGroup","NavigationPageItem","NavigationListProps","subNavigation","depth","collapsed","isPopover","isSidebarFullyExpanded","isSidebarFullyCollapsed","renderItem","item","context","activePath","onClose","NavigationList","t0","$","_c","$i","Symbol","for","t1","t2","undefined","t3","openKeys","setOpenKeys","t4","t5","t6","key","previous","includes","filter","k","toggleKey","t7","children","renderNested","t8","filteredNavigation","_temp","t9","t10","t11","t12","t13","t14","padding","mt","mb","pl","minWidth","width","map","navItem","index","fontSize","fontWeight","height","px","overflow","textOverflow","whiteSpace","zIndex","bgcolor","position","title","nextItem","mx","key_0","uniqueItemKey","selected","to","nav","hidden","Box","useLocation","NavigationList","FC","isHeader","Navigation","NavigationContentProps","navigation","collapsed","expanded","setExpanded","open","showPermanent","NavigationContent","t0","$","_c","$i","Symbol","for","location","t1","t2","t3","height","display","flexDirection","justifyContent","overflow","scrollbarGutter","overflowX","pt","t4","t5","undefined","t6","pathname","t7","Drawer","Fragment","NavigationContent","FC","Navigation","MINI_WIDTH","EXPANDED_WIDTH","TOOLBAR_HEIGHT","NavigationRailProps","navigation","expanded","setExpanded","open","NavigationRail","t0","$","_c","$i","Symbol","for","t1","xs","sm","t2","t3","theme","position","top","height","width","background","borderTop","borderColor","vars","palette","divider","boxShadow","t4","display","t5","t6","t7","t8","t9","t10","t11","t12","Menu","MenuOpen","AppBar","Box","CssBaseline","IconButton","InitColorSchemeScript","Toolbar","styled","FC","ReactNode","Fragment","useEffect","useState","Platform","LayoutOptions","Navigation","ToolbarAccount","AppTitle","NavigationRail","NAVIGATION_STORAGE_KEY","getInitialNavigationOpen","isWindows","isMacOS","localStorage","getItem","saveNavigationState","value","setItem","String","DrawerHeader","theme","display","alignItems","justifyContent","padding","spacing","mixins","toolbar","LayoutProps","navigation","options","children","Layout","t0","$","_c","$i","Symbol","for","navigationOpen","setNavigationOpen","t1","some","_temp","showNavigation","showShell","t2","t3","t4","t5","t6","height","maxHeight","overflow","width","t7","borderBottom","borderColor","boxShadow","_temp2","marginRight","t8","newValue_0","newValue","t9","flexGrow","flexDirection","minWidth","t10","t11","flex","position","t12","t13","t14","item","hidden","previous","useEventCallback","useId","useRef","useState","DialogsContext","DialogComponent","OpenDialog","OpenDialogOptions","DialogStackEntry","key","open","promise","Promise","TResult","Component","TPayload","payload","onClose","result","resolve","DialogProviderProps","children","React","ReactNode","DialogsProvider","Readonly","stack","setStack","Array","keyPrefix","nextId","dialogMetadata","WeakMap","requestDialog","options","resolveImpl","current","newEntry","set","previousStack","removeDialogFromStack","dialog","filter","entry","delete","closeDialogUi","map","setTimeout","closeDialog","entryToClose","get","Error","close","Alert","Snackbar","useEffect","useRef","useState","SnackbarOrigin","AlertColor","NotificationOptions","NotificationContext","Notification","message","severity","autoHideDuration","NotificationProviderProps","children","React","ReactNode","snackbarOrigin","STACK_INTERVAL","NotificationProvider","FC","t0","$","_c","$i","Symbol","for","t1","queue","setQueue","current","setCurrent","open","Boolean","processingTimeout","t2","prevQueue","length","next","rest","processQueue","t3","t4","setTimeout","clearTimeout","t5","options","notification","prev","notify","t6","t7","t8","_event","reason","t9","t10","undefined","t11","t12","createCache","CacheProvider","Theme","ThemeProvider","LocalizationProvider","AdapterDayjs","dayjs","i18n","LanguageDetector","FC","ReactNode","useEffect","I18nextProvider","initReactI18next","resources","z","Layout","LayoutOptions","Navigation","DialogsProvider","NotificationProvider","YEAR_IN_MINUTES","setLocale","language","config","core","locales","locale","use","init","fallbackLng","supportedLngs","Object","keys","detection","caches","cookieMinutes","interpolation","escapeValue","resolvedLanguage","on","ProvidersProps","options","navigation","theme","children","LayoutProvider","t0","$","_c","$i","Symbol","for","t1","key","emotionCache","t2","_temp","t3","snackbarOrigin","t4","t5","t6","navigator","serviceWorker","register"],"sources":["../src/components/core/account/UserAvatar.tsx","../src/components/core/account/UserMenu.tsx","../src/components/core/AppTitle.tsx","../src/models/Navigation.ts","../src/components/core/navigation/NavigationListItem.tsx","../src/components/core/navigation/NavigationList.tsx","../src/components/core/navigation/NavigationContent.tsx","../src/components/core/navigation/NavigationRail.tsx","../src/components/core/Layout.tsx","../src/providers/DialogsProvider.tsx","../src/providers/NotificationProvider.tsx","../src/providers/LayoutProvider.tsx"],"sourcesContent":["import { Avatar } from \"@mui/material\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { createServerFn } from \"@tanstack/react-start\";\nimport axios from \"axios\";\nimport { FC } from \"react\";\nimport { getAccessToken } from \"~/lib/auth/user\";\n\nconst getProfilePhoto = createServerFn({ method: \"GET\" }).handler(async (): Promise<string> => {\n try {\n const accessToken = await getAccessToken(\"graph\");\n const response = await axios.get<ArrayBuffer>(\n \"https://graph.microsoft.com/v1.0/me/photo/$value\",\n {\n responseType: \"arraybuffer\",\n headers: { Authorization: `Bearer ${accessToken}` },\n },\n );\n return `data:image/jpeg;base64,${Buffer.from(response.data).toString(\"base64\")}`;\n } catch {\n return \"\";\n }\n});\n\nexport const UserAvatar: FC = () => {\n const { data: photoUrl } = useQuery({\n queryKey: [\"graph\", \"me\", \"photo\"],\n queryFn: () => getProfilePhoto(),\n staleTime: Infinity,\n gcTime: Infinity,\n });\n\n return (\n <Avatar\n src={photoUrl || undefined}\n sx={{ width: { xs: 32, sm: 40 }, height: { xs: 32, sm: 40 } }}\n />\n );\n};\n","import AccountCircle from \"@mui/icons-material/AccountCircle\";\nimport ArrowBack from \"@mui/icons-material/ArrowBack\";\nimport Brightness4 from \"@mui/icons-material/Brightness4\";\nimport ChevronRight from \"@mui/icons-material/ChevronRight\";\nimport DarkMode from \"@mui/icons-material/DarkMode\";\nimport Done from \"@mui/icons-material/Done\";\nimport LightMode from \"@mui/icons-material/LightMode\";\nimport Login from \"@mui/icons-material/Login\";\nimport Logout from \"@mui/icons-material/Logout\";\nimport SettingsBrightness from \"@mui/icons-material/SettingsBrightness\";\nimport Translate from \"@mui/icons-material/Translate\";\nimport {\n Box,\n IconButton,\n List,\n ListItem,\n ListItemButton,\n ListItemIcon,\n ListItemText,\n ListSubheader,\n Menu,\n useColorScheme,\n} from \"@mui/material\";\nimport { rootRouteId, useMatch } from \"@tanstack/react-router\";\nimport type { FC } from \"react\";\nimport { Fragment, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { UserAvatar } from \"./UserAvatar\";\n\ntype TabType = \"settings\" | \"theme\" | \"language\";\nconst capitalize = (value: string | undefined) =>\n value && value.charAt(0).toUpperCase() + value.slice(1);\n\nexport const ToolbarAccount: FC = () => {\n const [anchorElement, setAnchorElement] = useState<HTMLElement>();\n const [tab, setTab] = useState<TabType>(\"settings\");\n const open = Boolean(anchorElement);\n const { t, i18n } = useTranslation();\n const { mode, setMode } = useColorScheme();\n const rootMatch = useMatch({ from: rootRouteId });\n const user = rootMatch.context.user;\n\n const supportedLanguages = (\n Array.isArray(i18n.options.supportedLngs) ? i18n.options.supportedLngs : []\n ).filter((lng) => lng !== \"cimode\");\n const languageDisplayNames = new Intl.DisplayNames([i18n.language], { type: \"language\" });\n\n const colorModes: Array<{\n mode: Exclude<typeof mode, undefined>;\n icon: typeof LightMode;\n label: string;\n }> = [\n { mode: \"light\", icon: LightMode, label: t(\"Layout.Light\") },\n { mode: \"dark\", icon: DarkMode, label: t(\"Layout.Dark\") },\n { mode: \"system\", icon: SettingsBrightness, label: t(\"Layout.System\") },\n ];\n\n const openMenu = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>\n setAnchorElement(event.currentTarget);\n const closeMenu = () => {\n setAnchorElement(undefined);\n setTimeout(() => setTab(\"settings\"), 300);\n };\n\n const changeTab = (newTab: TabType) => () => setTab(newTab);\n\n const settings = (\n <List\n component=\"nav\"\n subheader={\n <ListSubheader sx={{ backgroundColor: \"transparent\" }}>\n {t(\"Layout.Settings\")}\n </ListSubheader>\n }\n >\n <ListItemButton onClick={changeTab(\"theme\")} sx={{ py: 0.3 }}>\n <ListItemIcon>\n <Brightness4 />\n </ListItemIcon>\n <ListItemText\n primary={t(\"Layout.Appearance\")}\n secondary={colorModes.find((m) => m.mode === mode)?.label ?? t(\"Layout.System\")}\n />\n <ChevronRight />\n </ListItemButton>\n\n <ListItemButton onClick={changeTab(\"language\")} sx={{ py: 0.3 }}>\n <ListItemIcon>\n <Translate />\n </ListItemIcon>\n <ListItemText\n primary={t(\"Layout.Language\")}\n secondary={capitalize(languageDisplayNames.of(i18n.language))}\n />\n <ChevronRight />\n </ListItemButton>\n </List>\n );\n\n const theme = (\n <List\n subheader={\n <ListSubheader\n onClick={changeTab(\"settings\")}\n sx={{\n backgroundColor: \"transparent\",\n display: \"flex\",\n alignItems: \"center\",\n px: 1,\n cursor: \"pointer\",\n }}\n >\n <IconButton size=\"small\" sx={{ mr: 0.5 }} aria-label=\"Back\">\n <ArrowBack fontSize=\"small\" />\n </IconButton>{\" \"}\n {t(\"Layout.Appearance\")}\n </ListSubheader>\n }\n >\n {colorModes.map(({ mode: modeValue, icon: Icon, label }) => (\n <ListItemButton\n key={modeValue}\n onClick={() => {\n setMode(modeValue);\n closeMenu();\n }}\n selected={mode === modeValue}\n >\n <ListItemIcon>\n <Icon />\n </ListItemIcon>\n <ListItemText primary={label} />\n </ListItemButton>\n ))}\n </List>\n );\n\n const language = (\n <List\n subheader={\n <ListSubheader\n onClick={changeTab(\"settings\")}\n sx={{\n backgroundColor: \"transparent\",\n display: \"flex\",\n alignItems: \"center\",\n px: 1,\n cursor: \"pointer\",\n }}\n >\n <IconButton size=\"small\" sx={{ mr: 0.5 }} aria-label=\"Back\">\n <ArrowBack fontSize=\"small\" />\n </IconButton>{\" \"}\n {t(\"Layout.Language\")}\n </ListSubheader>\n }\n >\n {supportedLanguages.map((languageCode) => (\n <ListItemButton\n key={languageCode}\n onClick={() => i18n.changeLanguage(languageCode).finally(() => closeMenu())}\n selected={i18n.resolvedLanguage === languageCode}\n >\n <ListItemIcon>{i18n.resolvedLanguage === languageCode && <Done />}</ListItemIcon>\n <ListItemText primary={capitalize(languageDisplayNames.of(languageCode))} />\n </ListItemButton>\n ))}\n </List>\n );\n\n return (\n <Fragment>\n <IconButton size=\"small\" edge=\"end\" onClick={openMenu} aria-label=\"Account\">\n {user ? (\n <UserAvatar />\n ) : (\n <AccountCircle sx={{ width: { xs: 32, sm: 40 }, height: { xs: 32, sm: 40 } }} />\n )}\n </IconButton>\n\n <Menu anchorEl={anchorElement} open={open} onClose={closeMenu}>\n <Box sx={{ width: 240 }}>\n <List disablePadding>\n {user ? (\n <Fragment>\n <ListItem>\n <ListItemText\n primary={user.name}\n secondary={\n <span>\n {user.employeeId && <span>{user.employeeId}</span>}\n {user.employeeId && <br />}\n {user.department && <span>{user.department}</span>}\n </span>\n }\n />\n </ListItem>\n <ListItemButton onClick={() => {\n location.href = \"/auth/logout\";\n }}>\n <ListItemIcon>\n <Logout color=\"error\" />\n </ListItemIcon>\n <ListItemText primary={t(\"Layout.Logout\")} />\n </ListItemButton>\n </Fragment>\n ) : (\n <ListItemButton onClick={() => {\n const returnTo = location.pathname + location.search;\n location.href = `/auth/login?returnTo=${encodeURIComponent(returnTo)}`;\n }}>\n <ListItemIcon>\n <Login color=\"success\" />\n </ListItemIcon>\n <ListItemText primary={t(\"Layout.LogIn\")} />\n </ListItemButton>\n )}\n </List>\n\n {tab === \"settings\" && settings}\n {tab === \"theme\" && theme}\n {tab === \"language\" && language}\n </Box>\n </Menu>\n </Fragment>\n );\n};\n","import { Chip, Stack, Typography } from \"@mui/material\";\nimport { useRouter } from \"@tanstack/react-router\";\nimport z from \"zod\";\nimport type { FC } from \"react\";\nimport { clientEnv } from \"~/env\";\nimport { RouterIconButton } from \"~/components/router/RouterIconButton\";\n\nconst PRODUCTION_ENV = \"PRD\";\n\nconst getEnv = (url: string | undefined) =>\n z\n .string()\n .refine((u) => u.split(\"-\").length > 2)\n .transform((u) => u.split(\"-\")[2].toUpperCase())\n .catch(\"LOCALHOST\")\n .parse(url);\n\nexport const AppTitle: FC = () => {\n const router = useRouter();\n const env = getEnv(router.origin);\n const isProduction = env === PRODUCTION_ENV;\n\n return (\n <Stack direction=\"row\" spacing={1} sx={{ alignItems: \"center\", flexGrow: 1 }}>\n <RouterIconButton to=\"/\" size=\"small\">\n <img src=\"/favicon-32x32.png\" alt={clientEnv.VITE_APP_TITLE} loading=\"lazy\" />\n </RouterIconButton>\n <Typography variant=\"h6\">{clientEnv.VITE_APP_TITLE}</Typography>\n {!isProduction && <Chip size=\"small\" label={env} color=\"primary\" />}\n </Stack>\n );\n};\n","import { LinkOptions } from \"@tanstack/react-router\";\n\ntype NavigationBase = { hidden?: boolean };\n\ntype NavigationBaseItem = NavigationBase & {\n title: string;\n icon: React.ReactNode;\n};\n\nexport type NavigationPageItem = NavigationBaseItem &\n Pick<LinkOptions, \"to\" | \"href\" | \"params\" | \"search\"> & { kind: \"item\" };\n\nexport type NavigationPageGroup = NavigationBaseItem & {\n kind: \"group\";\n children: Array<NavigationItem>;\n};\n\nexport type NavigationDivider = NavigationBase & { kind: \"divider\" };\n\nexport type NavigationHeader = NavigationBase & {\n kind: \"header\";\n title: string;\n};\n\nexport type NavigationItem =\n | NavigationPageItem\n | NavigationPageGroup\n | NavigationDivider\n | NavigationHeader;\n\nexport type Navigation = Array<NavigationItem>;\n\nexport const isPageItem = (item: NavigationItem): item is NavigationPageItem =>\n item.kind === \"item\";\nexport const isPageGroup = (item: NavigationItem): item is NavigationPageGroup =>\n item.kind === \"group\";\nexport const isDivider = (item: NavigationItem): item is NavigationDivider =>\n item.kind === \"divider\";\nexport const isHeader = (item: NavigationItem): item is NavigationHeader => item.kind === \"header\";\n","import ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\nimport { Collapse, Grow } from \"@mui/material\";\nimport Avatar from \"@mui/material/Avatar\";\nimport Box from \"@mui/material/Box\";\nimport ListItem from \"@mui/material/ListItem\";\nimport ListItemButton from \"@mui/material/ListItemButton\";\nimport ListItemIcon from \"@mui/material/ListItemIcon\";\nimport ListItemText from \"@mui/material/ListItemText\";\nimport Paper from \"@mui/material/Paper\";\nimport { styled } from \"@mui/material/styles\";\nimport Typography from \"@mui/material/Typography\";\nimport { Fragment, useState } from \"react\";\nimport { MINI_WIDTH } from \"./NavigationRail\";\nimport { isPageGroup } from \"~/models/Navigation\";\nimport type { NavigationItem, NavigationPageGroup, NavigationPageItem } from \"~/models/Navigation\";\nimport type { FC, ReactNode } from \"react\";\nimport type { SxProps, Theme } from \"@mui/material/styles\";\nimport { RouterListItemButton } from \"~/components/router/RouterListItemButton\";\n\nconst ICON_SIZE = 34;\n\nconst getSelectedColor = (theme: Theme) =>\n theme.vars?.palette.primary.dark ?? theme.palette.primary.dark;\n\nconst getActionActiveColor = (theme: Theme) =>\n theme.vars?.palette.action.active ?? theme.palette.action.active;\n\nconst StyledNavButton = styled(ListItemButton)(({ theme }) => ({\n borderRadius: Number(theme.shape.borderRadius) * 2,\n \"&.Mui-selected\": {\n \"& .MuiListItemIcon-root, & .MuiTypography-root, & .MuiSvgIcon-root\": {\n color: getSelectedColor(theme),\n },\n \"& .MuiAvatar-root\": {\n backgroundColor: getSelectedColor(theme),\n },\n \"& .MuiTouchRipple-child\": {\n backgroundColor: getSelectedColor(theme),\n },\n },\n \"& .MuiSvgIcon-root\": {\n color: getActionActiveColor(theme),\n },\n \"& .MuiAvatar-root\": {\n backgroundColor: getActionActiveColor(theme),\n },\n}));\n\nconst routerButtonSx: SxProps<Theme> = (theme: Theme) => ({\n borderRadius: 2,\n \"&.Mui-selected\": {\n \"& .MuiListItemIcon-root, & .MuiTypography-root, & .MuiSvgIcon-root\": {\n color: getSelectedColor(theme),\n },\n \"& .MuiAvatar-root\": {\n backgroundColor: getSelectedColor(theme),\n },\n \"& .MuiTouchRipple-child\": {\n backgroundColor: getSelectedColor(theme),\n },\n },\n \"& .MuiSvgIcon-root\": {\n color: getActionActiveColor(theme),\n },\n \"& .MuiAvatar-root\": {\n backgroundColor: getActionActiveColor(theme),\n },\n});\n\nconst IconOrAvatar: FC<{ item: NavigationPageItem | NavigationPageGroup; collapsed?: boolean }> = ({\n item,\n collapsed,\n}) => {\n if (item.icon || collapsed) {\n return (\n <Box\n sx={\n collapsed\n ? {\n position: \"absolute\",\n left: \"50%\",\n top: \"calc(50% - 6px)\",\n transform: \"translate(-50%, -50%)\",\n }\n : {}\n }\n >\n <ListItemIcon\n sx={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minWidth: ICON_SIZE,\n }}\n >\n {item.icon ?? null}\n {!item.icon && collapsed ? (\n <Avatar sx={{ width: ICON_SIZE - 7, height: ICON_SIZE - 7, fontSize: 12 }}>\n {item.title\n .split(\" \")\n .slice(0, 2)\n .map((word) => word.charAt(0).toUpperCase())\n .join(\"\")}\n </Avatar>\n ) : null}\n </ListItemIcon>\n {collapsed ? (\n <Typography\n variant=\"caption\"\n sx={{\n position: \"absolute\",\n bottom: -18,\n left: \"50%\",\n transform: \"translateX(-50%)\",\n fontSize: 10,\n fontWeight: 500,\n textAlign: \"center\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n maxWidth: MINI_WIDTH - 28,\n }}\n >\n {item.title}\n </Typography>\n ) : null}\n </Box>\n );\n }\n return null;\n};\n\ninterface MiniPopoverProps {\n open: boolean;\n children?: ReactNode;\n}\n\nconst MiniPopover: FC<MiniPopoverProps> = ({ open, children }) => (\n <Grow in={open}>\n <Box\n sx={{\n position: \"fixed\",\n left: MINI_WIDTH,\n pl: \"2px\",\n pb: \"10px\",\n }}\n >\n <Paper\n sx={{\n pt: 0.5,\n pb: 0.5,\n transform: \"translateY(calc(50% - 30px))\",\n maxHeight: \"min(calc(100vh - 100px), 560px)\",\n overflowY: \"auto\",\n overscrollBehavior: \"contain\",\n }}\n >\n {children}\n </Paper>\n </Box>\n </Grow>\n);\n\ninterface NavigationListItemProps {\n item: NavigationPageItem | NavigationPageGroup;\n isOpen?: boolean;\n selected?: boolean;\n disabled?: boolean;\n collapsed?: boolean;\n isSidebarFullyExpanded?: boolean;\n isSidebarFullyCollapsed?: boolean;\n onClick?: (item: NavigationPageItem | NavigationPageGroup) => void;\n renderNested?: (sub: Array<NavigationItem>) => ReactNode;\n onClose?: () => void;\n}\n\nexport const NavigationListItem: FC<NavigationListItemProps> = ({\n item,\n isOpen,\n selected,\n disabled,\n collapsed,\n isSidebarFullyExpanded = true,\n isSidebarFullyCollapsed,\n onClick,\n renderNested,\n onClose,\n}) => {\n const [hoveredMiniItemId, setHoveredMiniItemId] = useState<string | null>(null);\n const groupItem = isPageGroup(item);\n const itemId = groupItem ? `group-${item.title}` : `item-${item.to ?? item.href ?? item.title}`;\n\n const chevronSx: SxProps<Theme> = (theme: Theme) => {\n if (collapsed && isSidebarFullyCollapsed && groupItem) {\n return {\n fontSize: 18,\n position: \"absolute\",\n top: \"41.5%\",\n right: \"2px\",\n transform: \"translateY(-50%) rotate(-90deg)\",\n };\n }\n if (!collapsed && isSidebarFullyExpanded && groupItem) {\n return {\n ml: 0.5,\n transform: `rotate(${isOpen ? 0 : -90}deg)`,\n transition: theme.transitions.create(\"transform\", {\n easing: theme.transitions.easing.sharp,\n duration: 100,\n }),\n };\n }\n return { display: \"none\" };\n };\n\n const shouldJustExpand = groupItem && !collapsed;\n\n const buttonProps = {\n selected,\n disabled,\n sx: { px: 1.4, height: collapsed ? 60 : 48 },\n };\n\n const buttonContent = (\n <>\n <IconOrAvatar item={item} collapsed={collapsed} />\n {!collapsed && (\n <ListItemText\n primary={item.title}\n slotProps={{ primary: { noWrap: true, title: item.title } }}\n sx={{\n ml: 1.2,\n flex: 1,\n minWidth: 0,\n \"& .MuiTypography-root\": {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n }}\n />\n )}\n {groupItem ? <ExpandMoreIcon sx={chevronSx} /> : null}\n </>\n );\n\n const listItem = (\n <ListItem\n {...(groupItem && collapsed\n ? {\n onMouseEnter: () => {\n setHoveredMiniItemId(itemId);\n },\n onMouseLeave: () => {\n setHoveredMiniItemId(null);\n },\n }\n : {})}\n sx={{ py: 0, px: 1, overflowX: \"hidden\" }}\n >\n {groupItem ? (\n <StyledNavButton\n {...buttonProps}\n onClick={shouldJustExpand ? () => onClick?.(item) : undefined}\n >\n {buttonContent}\n </StyledNavButton>\n ) : (\n <RouterListItemButton\n {...buttonProps}\n to={item.to}\n href={item.href}\n params={item.params}\n search={item.search}\n onClick={onClose}\n sx={[buttonProps.sx, routerButtonSx]}\n >\n {buttonContent}\n </RouterListItemButton>\n )}\n\n {groupItem && collapsed ? (\n <MiniPopover open={itemId === hoveredMiniItemId}>\n {renderNested?.(item.children)}\n </MiniPopover>\n ) : null}\n </ListItem>\n );\n\n return (\n <Fragment key={itemId}>\n {listItem}\n {groupItem && !collapsed ? (\n <Collapse in={isOpen} timeout=\"auto\" unmountOnExit>\n {renderNested?.(item.children)}\n </Collapse>\n ) : null}\n </Fragment>\n );\n};\n","import Divider from \"@mui/material/Divider\";\nimport List from \"@mui/material/List\";\nimport ListSubheader from \"@mui/material/ListSubheader\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { NavigationListItem } from \"./NavigationListItem\";\nimport { MINI_WIDTH } from \"./NavigationRail\";\nimport type { FC, ReactNode } from \"react\";\nimport { isPageItem, isPageGroup, isDivider, isHeader } from \"~/models/Navigation\";\nimport type {\n Navigation,\n NavigationItem,\n NavigationPageGroup,\n NavigationPageItem,\n} from \"~/models/Navigation\";\n\ninterface NavigationListProps {\n subNavigation: Navigation;\n depth?: number;\n collapsed?: boolean;\n isPopover?: boolean;\n isSidebarFullyExpanded?: boolean;\n isSidebarFullyCollapsed?: boolean;\n renderItem?: (\n item: NavigationPageItem | NavigationPageGroup,\n context: { collapsed: boolean },\n ) => ReactNode;\n activePath?: string | null;\n onClose?: () => void;\n}\n\nexport const NavigationList: FC<NavigationListProps> = ({\n subNavigation,\n depth = 0,\n collapsed,\n isPopover,\n isSidebarFullyExpanded = true,\n isSidebarFullyCollapsed,\n renderItem,\n activePath,\n onClose,\n}) => {\n const [openKeys, setOpenKeys] = useState<Array<string>>([]);\n\n useEffect(() => {\n if (collapsed) setOpenKeys([]);\n }, [collapsed]);\n\n const toggleKey = (key: string) =>\n setOpenKeys((previous) =>\n previous.includes(key) ? previous.filter((k) => k !== key) : [...previous, key],\n );\n\n const renderNested = (children: Array<NavigationItem>) => (\n <NavigationList\n subNavigation={children}\n depth={depth + 1}\n isPopover={collapsed}\n activePath={activePath}\n onClose={onClose}\n />\n );\n\n const filteredNavigation = subNavigation.filter((nav) => !nav.hidden);\n\n return (\n <List\n sx={{\n padding: 0,\n mt: isPopover && depth === 1 ? 0.5 : 0,\n mb: depth === 0 && !isPopover ? 4 : 0.5,\n pl: (isPopover ? 1 : 2) * (isPopover ? depth - 1 : depth),\n minWidth: isPopover && depth === 1 ? 240 : \"auto\",\n width: collapsed ? MINI_WIDTH : \"auto\",\n }}\n >\n {filteredNavigation.map((navItem, index) => {\n if (isHeader(navItem)) {\n return (\n <ListSubheader\n key={`subheader-${depth}-${index}`}\n sx={{\n fontSize: 12,\n fontWeight: \"700\",\n height: collapsed ? 0 : 40,\n px: 2,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n zIndex: 2,\n bgcolor: \"transparent\",\n position: \"static\",\n }}\n >\n {navItem.title}\n </ListSubheader>\n );\n }\n\n if (isDivider(navItem)) {\n const nextItem = filteredNavigation[index + 1];\n return (\n <li key={`divider-${depth}-${index}`}>\n <Divider\n sx={{ mx: 1, mt: 1, mb: nextItem && isHeader(nextItem) && !collapsed ? 0 : 1 }}\n />\n </li>\n );\n }\n\n if (!isPageItem(navItem) && !isPageGroup(navItem)) return null;\n\n const key = `item-${depth}-${index}`;\n const uniqueItemKey = `${depth}-${index}-${navItem.title}`;\n const selected = isPageItem(navItem) && navItem.to === activePath;\n\n if (renderItem)\n return <Fragment key={key}>{renderItem(navItem, { collapsed: !!collapsed })}</Fragment>;\n\n return (\n <NavigationListItem\n key={key}\n item={navItem}\n isOpen={openKeys.includes(uniqueItemKey)}\n selected={selected}\n collapsed={collapsed}\n isSidebarFullyExpanded={isSidebarFullyExpanded}\n isSidebarFullyCollapsed={isSidebarFullyCollapsed}\n onClick={\n isPageGroup(navItem) && !collapsed ? () => toggleKey(uniqueItemKey) : undefined\n }\n renderNested={renderNested}\n onClose={onClose}\n />\n );\n })}\n </List>\n );\n};\n","import Box from \"@mui/material/Box\";\nimport { useLocation } from \"@tanstack/react-router\";\nimport { NavigationList } from \"./NavigationList\";\nimport type { FC } from \"react\";\nimport { isHeader } from \"~/models/Navigation\";\nimport type { Navigation } from \"~/models/Navigation\";\n\ninterface NavigationContentProps {\n navigation: Navigation;\n collapsed: boolean;\n expanded: boolean;\n setExpanded: (open: boolean) => void;\n showPermanent: boolean;\n}\n\nexport const NavigationContent: FC<NavigationContentProps> = ({\n navigation,\n collapsed,\n expanded,\n setExpanded,\n showPermanent,\n}) => {\n const location = useLocation();\n\n return (\n <Box\n component=\"nav\"\n sx={{\n height: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"space-between\",\n overflow: \"auto\",\n scrollbarGutter: collapsed ? \"stable\" : \"auto\",\n overflowX: \"hidden\",\n pt: navigation[0] && isHeader(navigation[0]) && !collapsed ? 0 : 2,\n }}\n >\n <NavigationList\n subNavigation={navigation}\n collapsed={collapsed}\n isSidebarFullyExpanded={expanded}\n isSidebarFullyCollapsed={!expanded}\n activePath={location.pathname}\n onClose={showPermanent ? undefined : () => setExpanded(false)}\n />\n </Box>\n );\n};\n","import Drawer from \"@mui/material/Drawer\";\nimport { Fragment } from \"react\";\nimport { NavigationContent } from \"./NavigationContent\";\nimport type { FC } from \"react\";\nimport type { Navigation } from \"~/models/Navigation\";\n\nexport const MINI_WIDTH = 84;\nexport const EXPANDED_WIDTH = 320;\nexport const TOOLBAR_HEIGHT = 64;\n\ninterface NavigationRailProps {\n navigation: Navigation;\n expanded: boolean;\n setExpanded: (open: boolean) => void;\n}\n\nexport const NavigationRail: FC<NavigationRailProps> = ({ navigation, expanded, setExpanded }) => (\n <Fragment>\n <Drawer\n variant=\"permanent\"\n sx={{\n display: { xs: \"none\", sm: \"block\" },\n width: expanded ? EXPANDED_WIDTH : MINI_WIDTH,\n [\"& .MuiDrawer-paper\"]: (theme) => ({\n position: \"absolute\",\n top: `${TOOLBAR_HEIGHT}px`,\n height: `calc(100% - ${TOOLBAR_HEIGHT}px)`,\n width: expanded ? EXPANDED_WIDTH : MINI_WIDTH,\n background: \"transparent\",\n borderTop: \"1px solid\",\n borderColor: theme.vars?.palette.divider ?? theme.palette.divider,\n boxShadow: \"none\",\n }),\n }}\n >\n <NavigationContent\n navigation={navigation}\n collapsed={!expanded}\n expanded={expanded}\n setExpanded={setExpanded}\n showPermanent={true}\n />\n </Drawer>\n\n <Drawer\n open={expanded}\n onClose={() => setExpanded(false)}\n sx={{\n display: { xs: \"block\", sm: \"none\" },\n \"& .MuiDrawer-paper\": {\n width: \"min(280px, calc(100vw - 56px))\",\n },\n }}\n >\n <NavigationContent\n navigation={navigation}\n collapsed={false}\n expanded={expanded}\n setExpanded={setExpanded}\n showPermanent={false}\n />\n </Drawer>\n </Fragment>\n);\n","import Menu from \"@mui/icons-material/Menu\";\nimport MenuOpen from \"@mui/icons-material/MenuOpen\";\nimport {\n AppBar,\n Box,\n CssBaseline,\n IconButton,\n InitColorSchemeScript,\n Toolbar,\n} from \"@mui/material\";\nimport { styled } from \"@mui/material/styles\";\nimport type { FC, ReactNode } from \"react\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { Platform } from \"~/lib/utils\";\nimport type { LayoutOptions } from \"~/models/LayoutOptions\";\nimport type { Navigation } from \"~/models/Navigation\";\nimport { ToolbarAccount } from \"./account/UserMenu\";\nimport { AppTitle } from \"./AppTitle\";\nimport { NavigationRail } from \"./navigation/NavigationRail\";\n\nconst NAVIGATION_STORAGE_KEY = \"navigation-open\";\n\nconst getInitialNavigationOpen = (): boolean => {\n if (Platform.isWindows || Platform.isMacOS)\n return localStorage.getItem(NAVIGATION_STORAGE_KEY) === \"true\";\n return false;\n};\n\nconst saveNavigationState = (value: boolean): void => {\n if (Platform.isWindows || Platform.isMacOS) {\n localStorage.setItem(NAVIGATION_STORAGE_KEY, String(value));\n }\n};\n\nconst DrawerHeader = styled(\"div\")(({ theme }) => ({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n padding: theme.spacing(0, 1),\n ...theme.mixins.toolbar,\n}));\n\ninterface LayoutProps {\n navigation: Navigation | undefined;\n options: LayoutOptions | undefined;\n children: ReactNode;\n}\n\nexport const Layout: FC<LayoutProps> = ({ navigation, options, children }) => {\n const [navigationOpen, setNavigationOpen] = useState(false);\n const showNavigation = navigation?.some((item) => item.hidden !== true);\n const showShell = options?.showShell ?? true;\n\n useEffect(() => {\n if (getInitialNavigationOpen()) setNavigationOpen(true);\n }, []);\n\n return (\n <Fragment>\n <InitColorSchemeScript />\n <CssBaseline />\n\n <Box\n sx={{\n display: \"flex\",\n height: \"100dvh\",\n maxHeight: \"100dvh\",\n overflow: \"hidden\",\n width: \"100%\",\n }}\n >\n {showShell && (\n <AppBar\n color=\"transparent\"\n position=\"fixed\"\n sx={{\n borderBottom: \"1px solid\",\n borderColor: \"var(--mui-palette-divider)\",\n boxShadow: \"none\",\n }}\n >\n <Toolbar>\n {showNavigation && (\n <IconButton\n aria-label=\"Toggle navigation\"\n onClick={() => {\n setNavigationOpen((previous) => {\n const newValue = !previous;\n saveNavigationState(newValue);\n return newValue;\n });\n }}\n sx={{ marginRight: 2 }}\n >\n {navigationOpen ? <MenuOpen /> : <Menu />}\n </IconButton>\n )}\n\n <AppTitle />\n\n <ToolbarAccount />\n </Toolbar>\n </AppBar>\n )}\n\n {showNavigation && showShell && (\n <NavigationRail\n navigation={navigation!}\n expanded={navigationOpen}\n setExpanded={(newValue) => {\n setNavigationOpen(newValue);\n saveNavigationState(newValue);\n }}\n />\n )}\n\n <Box\n component=\"main\"\n sx={{\n flexGrow: 1,\n display: \"flex\",\n flexDirection: \"column\",\n minWidth: 0,\n height: \"100%\",\n overflow: \"hidden\",\n }}\n >\n {showShell && <DrawerHeader />}\n <Box sx={{ flex: 1, overflow: \"auto\", position: \"relative\" }}>{children}</Box>\n </Box>\n </Box>\n </Fragment>\n );\n};\n","import useEventCallback from \"@mui/utils/useEventCallback\";\nimport { useId, useRef, useState } from \"react\";\nimport { DialogsContext } from \"../contexts/DialogsContext\";\nimport type { DialogComponent, OpenDialog, OpenDialogOptions } from \"../hooks/useDialogs\";\n\ninterface DialogStackEntry<TPayload, TResult> {\n key: string;\n open: boolean;\n promise: Promise<TResult>;\n Component: DialogComponent<TPayload, TResult>;\n payload: TPayload;\n onClose: (result: TResult) => Promise<void>;\n resolve: (result: TResult) => void;\n}\n\nexport interface DialogProviderProps {\n children?: React.ReactNode;\n}\n\nfunction DialogsProvider({ children }: Readonly<DialogProviderProps>) {\n const [stack, setStack] = useState<Array<DialogStackEntry<any, any>>>([]);\n const keyPrefix = useId();\n const nextId = useRef(0);\n const dialogMetadata = useRef(new WeakMap<Promise<any>, DialogStackEntry<any, any>>());\n\n const requestDialog = useEventCallback<OpenDialog>(function open<TPayload, TResult>(\n Component: DialogComponent<TPayload, TResult>,\n payload: TPayload,\n options: OpenDialogOptions<TResult> = {},\n ) {\n const { onClose = async () => {} } = options;\n\n let resolve: (result: TResult) => void;\n const promise = new Promise<TResult>((resolveImpl) => {\n resolve = resolveImpl;\n });\n\n const key = `${keyPrefix}-${nextId.current}`;\n nextId.current += 1;\n\n const newEntry: DialogStackEntry<TPayload, TResult> = {\n key,\n open: true,\n promise,\n Component,\n payload,\n onClose,\n resolve: resolve!,\n };\n\n dialogMetadata.current.set(promise, newEntry);\n\n setStack((previousStack) => [...previousStack, newEntry]);\n\n return promise;\n });\n\n const removeDialogFromStack = (dialog: Promise<any>) => {\n setStack((previousStack) => previousStack.filter((entry) => entry.promise !== dialog));\n dialogMetadata.current.delete(dialog);\n };\n\n const closeDialogUi = useEventCallback(function closeDialogUi<TResult>(dialog: Promise<TResult>) {\n setStack((previousStack) =>\n previousStack.map((entry) => (entry.promise === dialog ? { ...entry, open: false } : entry)),\n );\n\n setTimeout(() => removeDialogFromStack(dialog), 1000);\n });\n\n const closeDialog = useEventCallback(async function closeDialog<TResult>(\n dialog: Promise<TResult>,\n result: TResult,\n ) {\n const entryToClose = dialogMetadata.current.get(dialog);\n if (!entryToClose) {\n throw new Error(\"Dialog not found in stack\");\n }\n\n try {\n await entryToClose.onClose(result);\n } finally {\n entryToClose.resolve(result);\n closeDialogUi(dialog);\n }\n\n return dialog;\n });\n\n return (\n <DialogsContext.Provider value={{ open: requestDialog, close: closeDialog }}>\n {children}\n {stack.map(({ key, open, Component, payload, promise }) => (\n <Component\n key={key}\n payload={payload}\n open={open}\n onClose={async (result) => {\n await closeDialog(promise, result);\n }}\n />\n ))}\n </DialogsContext.Provider>\n );\n}\n\nexport { DialogsProvider };\n","import Alert from \"@mui/material/Alert\";\nimport Snackbar from \"@mui/material/Snackbar\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport type { AlertColor } from \"@mui/material/Alert\";\nimport type { NotificationOptions } from \"~/contexts/NotificationContext\";\nimport { NotificationContext } from \"~/contexts/NotificationContext\";\n\ninterface Notification {\n message: string;\n severity?: AlertColor;\n autoHideDuration: number;\n}\n\ninterface NotificationProviderProps {\n children: React.ReactNode;\n snackbarOrigin?: SnackbarOrigin;\n}\n\nconst STACK_INTERVAL = 1000;\n\nexport const NotificationProvider: React.FC<NotificationProviderProps> = ({\n children,\n snackbarOrigin,\n}) => {\n const [queue, setQueue] = useState<Array<Notification>>([]);\n const [current, setCurrent] = useState<Notification | null>(null);\n const open = Boolean(current);\n const processingTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const processQueue = () => {\n setQueue((prevQueue) => {\n if (prevQueue.length === 0) return prevQueue;\n\n const [next, ...rest] = prevQueue;\n setCurrent(next);\n return rest;\n });\n };\n\n useEffect(() => {\n if (!open && queue.length > 0) {\n processingTimeout.current = setTimeout(processQueue, current ? STACK_INTERVAL : 0);\n }\n\n return () => {\n if (processingTimeout.current) {\n clearTimeout(processingTimeout.current);\n }\n };\n }, [open, queue.length, current]);\n\n const notify = (message: string, options?: NotificationOptions) => {\n const notification: Notification = {\n message,\n severity: options?.severity,\n autoHideDuration: options?.autoHideDuration ?? 5000,\n };\n\n setQueue((prev) => [...prev, notification]);\n };\n\n return (\n <NotificationContext value={{ notify }}>\n {children}\n <Snackbar\n open={open}\n autoHideDuration={current?.autoHideDuration}\n onClose={(_event, reason) => {\n if (reason === \"clickaway\") return;\n setCurrent(null);\n }}\n anchorOrigin={snackbarOrigin}\n message={current?.message}\n >\n {current?.severity ? (\n <Alert onClose={() => setCurrent(null)} severity={current.severity} variant=\"filled\">\n {current.message}\n </Alert>\n ) : undefined}\n </Snackbar>\n </NotificationContext>\n );\n};\n","import createCache from \"@emotion/cache\";\r\nimport { CacheProvider } from \"@emotion/react\";\r\nimport type { Theme } from \"@mui/material\";\r\nimport { ThemeProvider } from \"@mui/material\";\r\nimport { LocalizationProvider } from \"@mui/x-date-pickers-pro\";\r\nimport { AdapterDayjs } from \"@mui/x-date-pickers-pro/AdapterDayjs\";\r\nimport dayjs from \"dayjs\";\r\nimport i18n from \"i18next\";\r\nimport LanguageDetector from \"i18next-browser-languagedetector\";\r\nimport type { FC, ReactNode } from \"react\";\r\nimport { useEffect } from \"react\";\r\nimport { I18nextProvider, initReactI18next } from \"react-i18next\";\r\nimport { resources } from \"virtual:wcz-layout\";\r\nimport z from \"zod\";\r\nimport { Layout } from \"~/components/core/Layout\";\r\nimport type { LayoutOptions } from \"~/models/LayoutOptions\";\r\nimport type { Navigation } from \"~/models/Navigation\";\r\nimport { DialogsProvider } from \"./DialogsProvider\";\r\nimport { NotificationProvider } from \"./NotificationProvider\";\r\n\r\nconst YEAR_IN_MINUTES = 60 * 24 * 365;\r\n\r\nconst setLocale = (language: string) => {\r\n z.config(z.core.locales[language as keyof typeof z.core.locales]());\r\n dayjs.locale(language);\r\n};\r\n\r\nawait i18n\r\n .use(LanguageDetector)\r\n .use(initReactI18next)\r\n .init({\r\n resources,\r\n fallbackLng: \"en\",\r\n supportedLngs: Object.keys(resources),\r\n detection: {\r\n caches: [\"cookie\"],\r\n cookieMinutes: YEAR_IN_MINUTES,\r\n },\r\n interpolation: { escapeValue: false },\r\n });\r\n\r\nsetLocale(i18n.resolvedLanguage ?? i18n.language);\r\n\r\ni18n.on(\"languageChanged\", (language) => {\r\n setLocale(language);\r\n});\r\n\r\ninterface ProvidersProps {\r\n options?: LayoutOptions;\r\n navigation?: Navigation;\r\n theme: Theme;\r\n children: ReactNode;\r\n}\r\n\r\nexport const LayoutProvider: FC<ProvidersProps> = ({ options, navigation, theme, children }) => {\r\n const emotionCache = createCache({ key: \"css\" });\r\n\r\n useEffect(() => {\r\n if (\"serviceWorker\" in navigator) {\r\n void navigator.serviceWorker.register(\"/sw.js\");\r\n }\r\n }, []);\r\n\r\n return (\r\n <CacheProvider value={emotionCache}>\r\n <I18nextProvider i18n={i18n}>\r\n <ThemeProvider theme={theme}>\r\n <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={i18n.language}>\r\n <NotificationProvider snackbarOrigin={options?.snackbarOrigin}>\r\n <DialogsProvider>\r\n <Layout navigation={navigation} options={options}>\r\n {children}\r\n </Layout>\r\n </DialogsProvider>\r\n </NotificationProvider>\r\n </LocalizationProvider>\r\n </ThemeProvider>\r\n </I18nextProvider>\r\n </CacheProvider>\r\n );\r\n};\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAMM,kBAAkBJ,eAAe,EAAEK,QAAQ,MAAM,CAAC,CAAC,CAACC,QAAQ,YAA6B;CAC7F,IAAI;EACF,MAAME,cAAc,MAAML,eAAe,OAAO;EAChD,MAAMM,WAAW,MAAMR,MAAMS,IAC3B,oDACA;GACEE,cAAc;GACdC,SAAS,EAAEC,eAAe,UAAUN,cAAc;EACpD,CACF;EACA,OAAO,0BAA0BO,OAAOC,KAAKP,SAASQ,IAAI,CAAC,CAACC,SAAS,QAAQ;CAC/E,QAAQ;EACN,OAAO;CACT;AACF,CAAC;AAED,MAAaC,mBAAiB;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAD,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAAE,KAAA,GAAAA,KAAA,GAAAA,MAAA,GAAAF,EAAAE,MAAAC,OAAAC,IAAA,2BAAA;EAAAJ,EAAA,KAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;E