wcz-layout 6.7.2 → 7.6.1

package/src/components/layout/AccountMenu.tsx

@@ -1,160 +0,0 @@
-import { useIsAuthenticated, useMsal } from "@azure/msal-react";
-import { AccountCircle, ArrowBack, Brightness4, ChevronRight, DarkMode, LightMode, Login, Logout, SettingsBrightness, Translate } from "@mui/icons-material";
-import { Avatar, Box, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Menu } from "@mui/material";
-import { useQuery } from "@tanstack/react-query";
-import React, { Fragment, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { graphQueries } from "../../hooks/UseUser";
-import { User } from "../../models/User";
-
-const drawerWidth = 240;
-type TabType = "settings" | "theme" | "language";
-
-interface AccountMenuProps {
-    mode: "light" | "dark" | "system";
-    setMode: (mode: "light" | "dark" | "system") => void;
-    user: User;
-}
-
-export const AccountMenu: React.FC<AccountMenuProps> = ({ mode, setMode, user }) => {
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-    const [tab, setTab] = useState<TabType>("settings");
-    const open = Boolean(anchorEl);
-    const { t, i18n } = useTranslation();
-    const { instance } = useMsal();
-    const isAuthenticated = useIsAuthenticated();
-
-    const { data: userPhoto } = useQuery({ ...graphQueries.sessionUserPhoto(), enabled: isAuthenticated });
-
-    const changeLanguage = (newLanguage: "en" | "cs") => () => {
-        i18n.changeLanguage(newLanguage)
-            .finally(() => closeMenu());
-    };
-
-    const changeMode = (newMode: "light" | "dark" | "system") => () => {
-        setMode(newMode);
-        closeMenu();
-    };
-
-    const openMenu = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => setAnchorEl(e.currentTarget);
-    const closeMenu = () => { setAnchorEl(null); setTimeout(() => setTab("settings"), 300); };
-
-    const login = () => instance.loginRedirect();
-    const logout = () => instance.logoutRedirect({
-        postLogoutRedirectUri: "/",
-    });
-
-    const changeTab = (newTab: TabType) => () => setTab(newTab);
-
-    const settings = (
-        <List component="nav" subheader={<ListSubheader sx={{ backgroundColor: "transparent" }}>{t("Layout.Settings")}</ListSubheader>}>
-            <ListItemButton onClick={changeTab("theme")} sx={{ py: 0.3 }}>
-                <ListItemIcon>
-                    <Brightness4 />
-                </ListItemIcon>
-                <ListItemText primary={t("Layout.Appearance")} secondary={t(`Layout.${mode.charAt(0).toUpperCase() + mode.slice(1)}`)} />
-                <ChevronRight />
-            </ListItemButton>
-
-            <ListItemButton onClick={changeTab("language")} sx={{ py: 0.3 }}>
-                <ListItemIcon>
-                    <Translate />
-                </ListItemIcon>
-                <ListItemText primary={t("Layout.Language")} secondary={i18n.resolvedLanguage === "en" ? "English" : "Čeština"} />
-                <ChevronRight />
-            </ListItemButton>
-        </List>
-    );
-
-    const theme = (
-        <List subheader={
-            <ListSubheader onClick={changeTab("settings")} sx={{ backgroundColor: "transparent", display: "flex", alignItems: "center", px: 1, cursor: "pointer" }}>
-                <IconButton size="small" sx={{ mr: 0.5 }}>
-                    <ArrowBack fontSize="small" />
-                </IconButton> {t("Layout.Appearance")}
-            </ListSubheader>
-        }>
-            <ListItemButton onClick={changeMode("light")} disabled={mode === "light"}>
-                <ListItemIcon>
-                    <LightMode />
-                </ListItemIcon>
-                <ListItemText primary={t("Layout.Light")} />
-            </ListItemButton>
-            <ListItemButton onClick={changeMode("dark")} disabled={mode === "dark"}>
-                <ListItemIcon>
-                    <DarkMode />
-                </ListItemIcon>
-                <ListItemText primary={t("Layout.Dark")} />
-            </ListItemButton>
-            <ListItemButton onClick={changeMode("system")} disabled={mode === "system"}>
-                <ListItemIcon>
-                    <SettingsBrightness />
-                </ListItemIcon>
-                <ListItemText primary={t("Layout.System")} />
-            </ListItemButton>
-        </List>
-    );
-
-    const language = (
-        <List subheader={
-            <ListSubheader onClick={changeTab("settings")} sx={{ backgroundColor: "transparent", display: "flex", alignItems: "center", px: 1, cursor: "pointer" }}>
-                <IconButton size="small" sx={{ mr: 0.5 }}>
-                    <ArrowBack fontSize="small" />
-                </IconButton> {t("Layout.Language")}
-            </ListSubheader>
-        }>
-            <ListItemButton onClick={changeLanguage("en")} disabled={i18n.resolvedLanguage === "en"}>
-                <ListItemText primary="English" />
-            </ListItemButton>
-            <ListItemButton onClick={changeLanguage("cs")} disabled={i18n.resolvedLanguage === "cs"}>
-                <ListItemText primary="Čeština" />
-            </ListItemButton>
-        </List>
-    );
-
-    return (
-        <Fragment>
-            <IconButton size="small" edge="end" onClick={openMenu}>
-                {userPhoto ?
-                    <Avatar src={userPhoto} sx={{ width: { xs: 32, sm: 40 }, height: { xs: 32, sm: 40 } }} />
-                    :
-                    <AccountCircle sx={{ width: { xs: 32, sm: 40 }, height: { xs: 32, sm: 40 } }} />
-                }
-            </IconButton>
-
-            <Menu anchorEl={anchorEl} open={open} onClose={closeMenu}>
-                <Box sx={{ width: drawerWidth }}>
-                    <List disablePadding>
-                        {isAuthenticated ?
-                            <Fragment>
-                                <ListItem>
-                                    <ListItemText primary={user.name} secondary={
-                                        <span>
-                                            {user.employeeId && <span>{user.employeeId}</span>}
-                                            {user.employeeId && <br />}
-                                            {user.department && <span>{user.department}</span>}
-                                        </span>
-                                    } />
-                                </ListItem>
-
-                                <ListItemButton onClick={logout}>
-                                    <ListItemIcon><Logout color="error" /></ListItemIcon>
-                                    <ListItemText primary={t("Layout.Logout")} />
-                                </ListItemButton>
-                            </Fragment>
-                            :
-                            <ListItemButton onClick={login}>
-                                <ListItemIcon><Login color="success" /></ListItemIcon>
-                                <ListItemText primary={t("Layout.LogIn")} />
-                            </ListItemButton>
-                        }
-                    </List>
-
-                    {tab === "settings" && settings}
-                    {tab === "theme" && theme}
-                    {tab === "language" && language}
-                </Box>
-            </Menu>
-        </Fragment>
-    );
-};

package/src/components/layout/DevelopmentBanner.tsx

@@ -1,54 +0,0 @@
-import { Close } from "@mui/icons-material";
-import { Fade, Grid2, IconButton, Paper, Typography } from "@mui/material";
-import { grey } from "@mui/material/colors";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { User } from "../../models/User";
-import { environment } from "../../utils/Helpers";
-import { hasRole } from "../../utils/Auth";
-
-interface DevelopmentBannerProps {
-    user: User;
-    hasNavigationRoutes: boolean;
-}
-
-export const DevelopmentBanner: React.FC<DevelopmentBannerProps> = ({ user, hasNavigationRoutes }) => {
-    const { t } = useTranslation();
-    const [bannerOpen, setBannerOpen] = useState<boolean>(false);
-
-    useEffect(() => {
-        if (!hasRole(user, ["wcz-developers"]) && (environment === "dev" || environment === "qas"))
-            setBannerOpen(true);
-    }, [user]);
-
-    const closeBanner = () => setBannerOpen(false);
-
-    return (
-        <Fade appear={false} in={bannerOpen}>
-            <Paper square variant="outlined" tabIndex={-1} sx={theme => ({
-                position: "fixed",
-                bottom: 0,
-                left: { xs: 0, sm: hasNavigationRoutes ? 68.7 : 0 },
-                right: 0,
-                m: 0,
-                p: 2,
-                borderWidth: 0,
-                borderTopWidth: 1,
-                bgcolor: theme.palette.mode === "dark" ? grey[900] : grey[100]
-            })}>
-                <Grid2 container justifyContent="space-between" alignItems="center">
-                    <Grid2 size={10}>
-                        <Typography fontWeight="bold">{t("Layout.DevelopmentDialogTitle")}</Typography>
-                        <Typography variant="body2">{t("Layout.DevelopmentDialogContent")}</Typography>
-                    </Grid2>
-
-                    <Grid2 size={2} sx={{ p: 1, textAlign: "right" }}>
-                        <IconButton size="small" onClick={closeBanner}>
-                            <Close />
-                        </IconButton>
-                    </Grid2>
-                </Grid2>
-            </Paper>
-        </Fade>
-    );
-};

package/src/components/layout/ErrorPage.tsx

@@ -1,34 +0,0 @@
-import { Box, Container, Typography } from "@mui/material";
-import { FC } from "react";
-import { useRouteError } from "react-router-dom";
-
-export const ErrorPage: FC = () => {
-    const error = useRouteError();
-
-    const formatErrorMessage = (error: unknown): string => {
-        if (typeof error === "string") {
-            return error;
-        } else if (error instanceof Error) {
-            return error.message;
-        } else if (typeof error === "object" && error !== null) {
-            return JSON.stringify(error, null, 2);
-        } else if (typeof error === "number" || typeof error === "boolean") {
-            return error.toString();
-        } else {
-            return "An unknown error occurred.";
-        }
-    };
-
-    return (
-        <Container maxWidth="sm">
-            <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" minHeight="100vh" textAlign="center" padding={3} >
-                <Typography variant="h2" gutterBottom>
-                    Oops!
-                </Typography>
-                <Typography variant="h6" color="textSecondary" gutterBottom>
-                    {formatErrorMessage(error)}
-                </Typography>
-            </Box>
-        </Container>
-    );
-};

package/src/components/layout/LayoutDialog.tsx

@@ -1,50 +0,0 @@
-import { Close } from "@mui/icons-material";
-import { AppBar, Breakpoint, Dialog, DialogTitle, Grid2, IconButton, Toolbar, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { ReactNode } from "react";
-
-interface DialogProps {
-    open: boolean;
-    onClose: (_event?: {}, reason?: "backdropClick" | "escapeKeyDown") => void;
-    title: string | ReactNode;
-    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "inherit" | "default";
-    maxWidth?: Breakpoint;
-    children?: ReactNode;
-}
-
-export const LayoutDialog: React.FC<DialogProps> = ({ open, onClose, title, color, maxWidth, children }) => {
-    const theme = useTheme();
-    const fullscreen = useMediaQuery(theme.breakpoints.down("sm"));
-
-    return (
-        <Dialog open={open} onClose={onClose} fullScreen={fullscreen} fullWidth maxWidth={maxWidth}>
-            {fullscreen ?
-                <AppBar sx={{ position: "relative", bgcolor: `${color}.main` }}>
-                    <Toolbar>
-                        <Typography sx={{ flex: 1 }} variant="h6">
-                            {title}
-                        </Typography>
-                        <IconButton onClick={onClose}>
-                            <Close sx={{ color: `${color}.contrastText` }} />
-                        </IconButton>
-                    </Toolbar>
-                </AppBar>
-                :
-                <Grid2 container justifyContent="space-between" sx={{ bgcolor: `${color}.main`, color: `${color}.contrastText` }}>
-                    <Grid2>
-                        <DialogTitle>
-                            {title}
-                        </DialogTitle>
-                    </Grid2>
-
-                    <Grid2 size={2} sx={{ p: 1, textAlign: "right" }}>
-                        <IconButton onClick={onClose}>
-                            <Close fontSize="small" sx={{ color: `${color}.contrastText` }} />
-                        </IconButton>
-                    </Grid2>
-                </Grid2>
-            }
-
-            {open ? children : null}
-        </Dialog >
-    );
-};

package/src/components/layout/LayoutSnackbar.tsx

@@ -1,44 +0,0 @@
-import { Alert, AlertTitle, Portal, Snackbar } from "@mui/material";
-import { Dispatch, Fragment, SetStateAction, SyntheticEvent, useMemo } from "react";
-import { Snackbar as SnackbarModel } from "../../models/Snackbar";
-
-interface SnackbarProps {
-    snackbar: SnackbarModel;
-    setSnackbar: Dispatch<SetStateAction<SnackbarModel>>;
-}
-
-export const LayoutSnackbar: React.FC<SnackbarProps> = ({ snackbar, setSnackbar }) => {
-
-    const handleOnSnackbarClose = (_event?: SyntheticEvent | Event, reason?: string) => {
-        if (reason === "clickaway") return;
-        setSnackbar(prevSnackbar => ({ ...prevSnackbar, title: "" }));
-    };
-
-    const autoHideDuration = useMemo(() => {
-        if (snackbar?.duration === undefined) {
-            if (snackbar?.severity === "error")
-                return 15000;
-            if (snackbar?.severity === "warning")
-                return 10000;
-            return 5000;
-        }
-        return snackbar.duration;
-    }, [snackbar]);
-
-    return (
-        <Portal>
-            <Snackbar open={!!snackbar?.title} autoHideDuration={autoHideDuration} onClose={handleOnSnackbarClose}>
-                <Alert onClose={handleOnSnackbarClose} severity={snackbar?.severity} sx={{ width: "100%" }} variant="filled">
-                    {snackbar?.description ?
-                        <Fragment>
-                            <AlertTitle>{snackbar?.title}</AlertTitle>
-                            {snackbar.description}
-                        </Fragment>
-                        :
-                        snackbar?.title
-                    }
-                </Alert>
-            </Snackbar>
-        </Portal>
-    );
-};

package/src/components/layout/NavigationDrawer.tsx

@@ -1,131 +0,0 @@
-import { ChevronLeft, ChevronRight } from "@mui/icons-material";
-import { Box, Divider, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Drawer as MuiDrawer, Tooltip, Typography } from "@mui/material";
-import { CSSObject, Theme, styled, useTheme } from "@mui/material/styles";
-import React, { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation, useNavigate } from "react-router-dom";
-import { LayoutRoute } from "../../models/LayoutRoute";
-
-const drawerWidth = 240;
-
-const openedMixin = (theme: Theme): CSSObject => ({
-    width: drawerWidth,
-    transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-    }),
-    overflowX: "hidden",
-});
-
-const closedMixin = (theme: Theme): CSSObject => ({
-    transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    overflowX: "hidden",
-    width: `calc(${theme.spacing(7)} + 1px)`,
-    [theme.breakpoints.up("sm")]: {
-        width: `calc(${theme.spacing(8.4)} + 1px)`,
-    },
-});
-
-const DrawerHeader = styled("div")(({ theme }) => ({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    padding: theme.spacing(0, 1),
-    // necessary for content to be below app bar
-    ...theme.mixins.toolbar,
-}));
-
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(
-    ({ theme, open }) => ({
-        width: drawerWidth,
-        flexShrink: 0,
-        whiteSpace: "nowrap",
-        boxSizing: "border-box",
-        ...(open && {
-            ...openedMixin(theme),
-            "& .MuiDrawer-paper": openedMixin(theme),
-        }),
-        ...(!open && {
-            ...closedMixin(theme),
-            "& .MuiDrawer-paper": closedMixin(theme),
-        }),
-    }),
-);
-
-const isExternalUrl = (url: string) => url.startsWith("http://") || url.startsWith("https://");
-
-interface NavigationDrawerProps {
-    routes: LayoutRoute[];
-    appVersion: string;
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    hasRoutes: boolean;
-}
-
-export const NavigationDrawer: React.FC<NavigationDrawerProps> = ({ routes, appVersion, open, setOpen, hasRoutes }) => {
-    const theme = useTheme();
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    const closeDrawer = () => setOpen(false);
-
-    const handleMenuItemClick = (item: LayoutRoute) => () => {
-        if (!item.path) return console.error("Path is not defined for menu item", item);
-        setOpen(false);
-
-        if (location.pathname === item.path)
-            return window.location.reload();
-
-        if (isExternalUrl(item.path))
-            return window.open(item.path, "_blank");
-
-        navigate(item.path);
-    };
-
-    const menuItems = (
-        <List>
-            {routes.filter(route => route.showInMenu && !route.disabled).map(item =>
-                <Fragment key={item.path}>
-                    <Tooltip title={item.title} placement="right" disableInteractive disableHoverListener={open} disableTouchListener={open}>
-                        <ListItem disablePadding sx={{ display: "block" }} onClick={handleMenuItemClick(item)}>
-                            <ListItemButton selected={location.pathname === item.path}>
-                                <ListItemIcon>
-                                    {item.icon}
-                                </ListItemIcon>
-                                <ListItemText primary={item.title} />
-                            </ListItemButton>
-                        </ListItem>
-                    </Tooltip>
-
-                    {item.divider && <Divider sx={{ my: 1 }} />}
-                </Fragment>
-            )}
-        </List>
-    );
-
-    return (
-        <Fragment>
-            <Drawer variant="permanent" open={open} sx={{ display: { xs: "none", sm: hasRoutes ? "inherit" : "none" } }}>
-                <DrawerHeader>
-                    <Typography sx={{ flexGrow: 1, textAlign: "center", marginLeft: 3 }}>{t("Layout.Version")}: {appVersion}</Typography>
-                    <IconButton onClick={closeDrawer}>
-                        {theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />}
-                    </IconButton>
-                </DrawerHeader>
-                <Divider />
-                {menuItems}
-            </Drawer>
-
-            <MuiDrawer anchor="left" open={open} onClose={closeDrawer} sx={{ display: { xs: "inherit", sm: hasRoutes ? "none" : "inherit" } }}>
-                <Box sx={{ width: drawerWidth }}>
-                    <Typography sx={{ textAlign: "center", my: 1.5 }}>{t("Layout.Version")}: {appVersion}</Typography>
-                    {menuItems}
-                </Box>
-            </MuiDrawer>
-        </Fragment>
-    );
-};

package/src/components/layout/NotificationMenu.tsx

@@ -1,76 +0,0 @@
-import { Done, Error, Info, Notifications, NotificationsOff, Warning } from "@mui/icons-material";
-import { Badge, Grid, IconButton, List, ListItem, ListItemIcon, ListItemText, Menu, Typography } from "@mui/material";
-import { grey } from "@mui/material/colors";
-import moment from "moment";
-import React, { Dispatch, Fragment, SetStateAction, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import Notification from "../../models/Notification";
-import { TypographyWithIcon } from "./TypographyWithIcon";
-
-interface NotificationMenuProps {
-    notifications: Notification[] | undefined;
-    setNotifications: Dispatch<SetStateAction<Notification[] | undefined>>;
-}
-
-export const NotificationMenu: React.FC<NotificationMenuProps> = ({ notifications, setNotifications }) => {
-    const { t } = useTranslation();
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-    const open = Boolean(anchorEl);
-
-    const openMenu = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => setAnchorEl(e.currentTarget);
-    const closeMenu = () => setAnchorEl(null);
-
-    useEffect(() => {
-        if (open)
-            setAllNotificationsAsRead();
-    }, [open]);
-
-    const setAllNotificationsAsRead = () => {
-        const updatedNotifications = [...notifications || []].map(notification => ({ ...notification, isRead: true }));
-        setNotifications(updatedNotifications);
-    };
-
-    return (
-        <Fragment>
-            <IconButton color="inherit" onClick={openMenu} sx={{ mr: 1 }}>
-                <Badge badgeContent={notifications?.filter(notification => !notification.isRead).length} color="error">
-                    <Notifications />
-                </Badge>
-            </IconButton>
-
-            <Menu anchorEl={anchorEl} open={open} onClose={closeMenu} sx={{ height: 700, maxHeight: "calc(100vh - 50px)" }}>
-                <List dense sx={{ width: 400, maxWidth: "calc(100vw - 50px)" }}>
-                    <ListItem>
-                        <Typography variant="h6">{t("Layout.Notifications")}</Typography>
-                    </ListItem>
-
-                    {notifications?.map(notification =>
-                        <ListItem key={notification.dateTime} sx={theme => ({ transition: "background-color 0.2s ease", cursor: "default", "&:hover": { bgcolor: theme.palette.mode === "dark" ? grey[800] : grey[200] } })}>
-                            <ListItemIcon>
-                                {notification.severity === "error" && <Error color="error" fontSize="large" />}
-                                {notification.severity === "warning" && <Warning color="warning" fontSize="large" />}
-                                {notification.severity === "info" && <Info color="info" fontSize="large" />}
-                                {(notification.severity === "success" || !notification.severity) && <Done color="success" fontSize="large" />}
-                            </ListItemIcon>
-
-                            <ListItemText primary={<Typography variant="body1">{notification.title}</Typography>} secondary={
-                                <Fragment>
-                                    <Typography variant="body2">{notification.description}</Typography>
-                                    <Typography variant="caption">{moment(notification.dateTime).fromNow()}</Typography>
-                                </Fragment>
-                            } />
-                        </ListItem>
-                    )}
-
-                    {!notifications?.length &&
-                        <Grid container justifyContent="center" alignItems="center" sx={{ width: "100%", height: 200, maxHeight: "calc(100vh - 150px)" }}>
-                            <Grid item>
-                                <TypographyWithIcon startIcon={<NotificationsOff color="disabled" />} color="text.secondary">{t("Layout.NoNotificationsAtTheMoment")}</TypographyWithIcon>
-                            </Grid>
-                        </Grid>
-                    }
-                </List>
-            </Menu>
-        </Fragment>
-    );
-};

package/src/components/layout/TypographyWithIcon.tsx

@@ -1,35 +0,0 @@
-import { Stack, SxProps, Theme, Typography, TypographyProps } from "@mui/material";
-
-const stackSxProps = [
-    "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "m", "mt", "mr", "mb", "ml", "mx", "my",
-    "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "p", "pt", "pr", "pb", "pl", "px", "py",
-    "flexGrow", "flexShrink", "flexBasis", "flexDirection", "alignItems", "justifyContent",
-    "position", "zIndex", "top", "right", "bottom", "left",
-    "gridGap", "gridColumnGap", "gridRowGap", "gridColumn", "gridRow", "gridAutoFlow",
-    "gap", "columnGap", "rowGap"
-];
-
-interface TypographyWithIconProps extends TypographyProps {
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-}
-
-export const TypographyWithIcon: React.FC<TypographyWithIconProps> = ({ startIcon, endIcon, children, sx, gutterBottom, ...props }) => {
-    const sxCopy = { ...sx };
-
-    const stackStyles = stackSxProps.reduce((acc, curr) => {
-        if (sxCopy && (sxCopy as any)[curr]) {
-            (acc as any)[curr] = (sxCopy as any)[curr];
-            delete (sxCopy as any)[curr];
-        }
-        return acc;
-    }, {} as SxProps<Theme>);
-
-    return (
-        <Stack direction="row" alignItems="center" gap={1} sx={stackStyles} mb={gutterBottom ? 0.7 : undefined}>
-            {startIcon && startIcon}
-            <Typography {...props} sx={sxCopy}>{children}</Typography>
-            {endIcon && endIcon}
-        </Stack>
-    );
-};

package/src/components/layout/Unauthorized.tsx

@@ -1,37 +0,0 @@
-import { Box, CircularProgress, Typography } from "@mui/material";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-export const Unauthorized: React.FC = () => {
-    const { t } = useTranslation();
-    const [isInitializingKeycloak, setIsInitializingKeycloak] = useState(false);
-    const [showComponent, setShowComponent] = useState(false);
-
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            setShowComponent(true);
-        }, 1000);
-
-        window.addEventListener("keycloakInitialization", handleInitialization as EventListener);
-
-        return () => {
-            clearTimeout(timer);
-            window.removeEventListener("keycloakInitialization", handleInitialization as EventListener);
-        };
-    }, []);
-
-    const handleInitialization = (event: CustomEvent) => {
-        setIsInitializingKeycloak(event.detail.initializing);
-    };
-
-    if (!showComponent)
-        return null;
-
-    return (
-        <Box sx={{ position: "relative", height: { xs: "calc(100vh - 56px)", sm: "calc(100vh - 64px)" } }}>
-            <Box sx={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>
-                {isInitializingKeycloak ? <CircularProgress /> : <Typography variant="h6">{t("Layout.Unauthorized")}</Typography>}
-            </Box>
-        </Box>
-    );
-};