@applica-software-guru/react-admin 1.4.226 → 1.5.228

package/src/components/Layout/Drawer/DrawerHeaderStyled.tsx

@@ -0,0 +1,19 @@
+import { Box } from '@mui/material';
+import { Theme, styled } from '@mui/material/styles';
+
+type DrawerHeaderStyledProps = {
+  open: boolean;
+  theme: Theme;
+};
+const DrawerHeaderStyled = styled(Box, { shouldForwardProp: (prop) => prop !== 'open' })(
+  ({ theme, open }: DrawerHeaderStyledProps) => ({
+    ...theme.mixins.toolbar,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: open ? 'flex-start' : 'center',
+    paddingLeft: theme.spacing(open ? 3 : 0)
+  })
+);
+
+export { DrawerHeaderStyled };
+export type { DrawerHeaderStyledProps };

package/src/components/Layout/Drawer/MiniDrawerStyled.tsx

@@ -0,0 +1,59 @@
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { Drawer } from '@mui/material';
+import { Theme, styled } from '@mui/material/styles';
+
+function openedMixin(theme: Theme, drawerWidth: number) {
+  return {
+    width: drawerWidth,
+    borderRight: `1px solid ${theme.palette.divider}`,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    overflowX: 'hidden',
+    // @ts-ignore
+    boxShadow: theme.palette.mode === 'dark' ? theme.customShadows.z1 : 'none'
+  };
+}
+
+function closedMixin(theme: Theme) {
+  return {
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    overflowX: 'hidden',
+    width: theme.spacing(7.5),
+    borderRight: 'none',
+    // @ts-ignore
+    boxShadow: theme.customShadows.z1
+  };
+}
+type MiniDrawerStyledProps = {
+  open: boolean;
+  theme: Theme;
+};
+
+const MiniDrawerStyled = styled(Drawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+  // @ts-ignore
+  ({ theme, open }: MiniDrawerStyledProps) => {
+    const { drawerWidth } = useThemeConfig();
+    return {
+      width: drawerWidth,
+      flexShrink: 0,
+      whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
+      ...(open && {
+        ...openedMixin(theme, drawerWidth),
+        '& .MuiDrawer-paper': openedMixin(theme, drawerWidth)
+      }),
+      ...(!open && {
+        ...closedMixin(theme),
+        '& .MuiDrawer-paper': closedMixin(theme)
+      })
+    };
+  }
+);
+
+export { MiniDrawerStyled };
+export type { MiniDrawerStyledProps };

package/src/components/Layout/Error.tsx

@@ -1,14 +1,12 @@
-import { Container, Stack, Typography, Button, useTheme } from '@mui/material';
-import PropTypes from 'prop-types';
-// @ts-ignore
-import imgSrc from '../../assets/generic-error.png';
-import { Title, TitlePropType, useResetErrorBoundaryOnLocationChange } from 'ra-ui-materialui';
-import { ComponentType, ErrorInfo, HtmlHTMLAttributes, useCallback } from 'react';
+import imgSrc from '@/assets/generic-error.png';
+import { History } from '@mui/icons-material';
+import { Button, Container, Stack, Typography, useTheme } from '@mui/material';
 import { TitleComponent, useTranslate } from 'ra-core';
+import { Title, useResetErrorBoundaryOnLocationChange } from 'ra-ui-materialui';
+import { ComponentType, ErrorInfo, HtmlHTMLAttributes, useCallback } from 'react';
 import { FallbackProps } from 'react-error-boundary';
-import History from '@mui/icons-material/History';
 
-export type ErrorBoundaryProps = InternalErrorProps & {
+type ErrorBoundaryProps = InternalErrorProps & {
   errorComponent?: ComponentType<ErrorProps>;
   title?: TitleComponent;
   resetErrorBoundary?: null | (() => void);
@@ -36,8 +34,8 @@ function Error(props: ErrorBoundaryProps) {
   return (
     <Container>
       <Stack alignItems="center" px={2} py={{ xs: 4, sm: 8 }} spacing={2} textAlign="center">
-        {title && <Title title={title} />}
-        <img src={imgSrc} style={{ width: '100%', maxWidth: 450, marginTop: theme.spacing(4) }} />
+        {title ? <Title title={title} /> : null}
+        <img src={imgSrc} style={{ width: '100%', maxWidth: 450, marginTop: theme.spacing(4) }} alt="oops!" />
         <Typography
           variant="h2"
           sx={{
@@ -48,7 +46,7 @@ function Error(props: ErrorBoundaryProps) {
           {translate(isProduction ? 'ra.page.error' : error.message, { _: error.message })}
         </Typography>
         {!isProduction && <Typography variant="caption">{translate('ra.message.error_more_info')}</Typography>}
-        {errorInfo && (
+        {errorInfo ? (
           <Typography
             variant="body1"
             component="pre"
@@ -61,7 +59,7 @@ function Error(props: ErrorBoundaryProps) {
           >
             {isProduction ? translate('ra.message.error') : errorInfo?.componentStack?.substring(0, 250) + '...'}
           </Typography>
-        )}
+        ) : null}
 
         <Button variant="contained" startIcon={<History />} onClick={handleBack}>
           {translate('ra.action.back')}
@@ -70,20 +68,15 @@ function Error(props: ErrorBoundaryProps) {
     </Container>
   );
 }
-Error.propTypes = {
-  className: PropTypes.string,
-  error: PropTypes.object.isRequired,
-  errorInfo: PropTypes.object,
-  title: TitlePropType
-};
 
 interface InternalErrorProps extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'title'>, FallbackProps, ErrorProps {
   className?: string;
 }
 
-export interface ErrorProps extends Pick<FallbackProps, 'error'> {
+interface ErrorProps extends Pick<FallbackProps, 'error'> {
   errorInfo?: ErrorInfo;
   title?: TitleComponent;
 }
 
-export default Error;
+export { Error };
+export type { ErrorBoundaryProps, ErrorProps, InternalErrorProps };

package/src/components/Layout/Header/AppBarStyled.tsx

@@ -1,8 +1,8 @@
-import AppBar from '@mui/material/AppBar';
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { AppBar } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { useThemeConfig } from '../../../hooks';
 
-export const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })(
+const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })(
   ({ theme, open }: { theme: any; open: boolean }) => {
     const { drawerWidth } = useThemeConfig();
     return {
@@ -26,4 +26,4 @@ export const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !
   }
 );
 
-export default AppBarStyled;
+export { AppBarStyled };

package/src/components/Layout/Header/Buttons/HeaderButton.tsx

@@ -1,13 +1,17 @@
+import { useSx } from '@/hooks';
 import { Button, ButtonProps } from '@mui/material';
-import { useSx } from '../../../../hooks';
 import { ForwardedRef, forwardRef } from 'react';
 
 type IHeaderButtonProps = Omit<ButtonProps, 'color' | 'variant' | 'size'>;
 
-const HeaderButton = forwardRef(function HeaderButton(props: IHeaderButtonProps, ref: ForwardedRef<HTMLButtonElement> | null) {
+const HeaderButton = forwardRef(function HeaderButton(
+  props: IHeaderButtonProps,
+  ref: ForwardedRef<HTMLButtonElement> | null
+) {
   const sx = useSx(props, { color: 'text.primary' }, { defaults: true });
 
   return <Button ref={ref} {...props} color="secondary" variant="text" sx={sx} />;
 });
 
 export { HeaderButton };
+export type { IHeaderButtonProps };

package/src/components/Layout/Header/Buttons/HeaderIconButton.tsx

@@ -1,11 +1,14 @@
+import { IconButton } from '@/components/@extended';
+import { useSx } from '@/hooks';
 import { ButtonProps, IconButtonProps } from '@mui/material';
-import { IconButton } from '../../../@extended';
-import { useSx } from '../../../../hooks';
 import { ForwardedRef, forwardRef } from 'react';
 
 type IHeaderIconButtonProps = Omit<IconButtonProps & ButtonProps, 'color' | 'variant' | 'size'>;
 
-const HeaderIconButton = forwardRef(function HeaderIconButton(props: IHeaderIconButtonProps, ref: ForwardedRef<HTMLButtonElement> | null) {
+const HeaderIconButton = forwardRef(function HeaderIconButton(
+  props: IHeaderIconButtonProps,
+  ref: ForwardedRef<HTMLButtonElement> | null
+) {
   const sx = useSx(
     props,
     {

package/src/components/Layout/Header/Buttons/HeaderToggleButton.tsx

@@ -1,10 +1,13 @@
+import { useSx } from '@/hooks';
 import { ToggleButton, ToggleButtonProps } from '@mui/material';
 import { ForwardedRef, forwardRef } from 'react';
-import { useSx } from '../../../../hooks';
 
 type IHeaderToggleButtonProps = Omit<ToggleButtonProps, 'color' | 'size'>;
 
-const HeaderToggleButton = forwardRef(function HeaderToggleButton(props: IHeaderToggleButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
+const HeaderToggleButton = forwardRef(function HeaderToggleButton(
+  props: IHeaderToggleButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>
+) {
   const sx = useSx(
     props,
     {

package/src/components/Layout/Header/Buttons/LocaleButton.tsx

@@ -1,20 +1,21 @@
 import { HeaderButton } from './HeaderButton';
-import { usePopoverState } from '../../../../hooks';
+import { usePopoverState } from '@/hooks';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
 import { Menu, MenuItem, Stack, Typography } from '@mui/material';
-import { Fragment } from 'react/jsx-runtime';
 import { useLocaleState, useLocales } from 'ra-core';
-import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
-export function LocaleButton(): JSX.Element | null {
+import { Fragment } from 'react/jsx-runtime';
+
+function LocaleButton(): JSX.Element | null {
   const { open, anchorEl, handleClose, handleToggle } = usePopoverState();
   const [locale, setLocale] = useLocaleState();
   const locales = useLocales();
   if (locales.length === 0) {
     return null;
   }
-  const handleChooseLocale = (locale: string) => {
+  function handleChooseLocale(locale: string) {
     setLocale(locale);
     handleClose();
-  };
+  }
   return (
     <Fragment>
       <HeaderButton value="locale" onClick={handleToggle} sx={{ minWidth: 'auto' }}>
@@ -34,4 +35,4 @@ export function LocaleButton(): JSX.Element | null {
   );
 }
 
-export default LocaleButton;
+export { LocaleButton };

package/src/components/Layout/Header/Buttons/index.ts

@@ -1,4 +1,4 @@
 export * from './HeaderButton';
 export * from './HeaderIconButton';
 export * from './HeaderToggleButton';
-export * from './LocaleButton';
+export * from './LocaleButton';

package/src/components/Layout/Header/DrawerToggle.tsx

@@ -1,6 +1,6 @@
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
-import { useLayoutDrawerState } from '../Provider';
 import { HeaderToggleButton } from './Buttons';
+import { useLayoutDrawerState } from '@/components/Layout/Provider';
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 
 const buttonSx = {
   ml: { xs: 0, lg: -2 }
@@ -10,7 +10,13 @@ function DrawerToggle() {
   const { open, handleDrawerToggle } = useLayoutDrawerState();
 
   return (
-    <HeaderToggleButton value="drawer" aria-label="open drawer" sx={buttonSx} onChange={handleDrawerToggle} selected={open}>
+    <HeaderToggleButton
+      value="drawer"
+      aria-label="open drawer"
+      sx={buttonSx}
+      onChange={handleDrawerToggle}
+      selected={open}
+    >
       {!open ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
     </HeaderToggleButton>
   );

package/src/components/Layout/Header/Header.tsx

@@ -1,29 +1,30 @@
-import { useRef } from 'react';
-import _ from 'lodash';
-import { SxProps, AppBar, useTheme, Toolbar } from '@mui/material';
-import { useLayoutDrawerState, useLayoutMediaState } from '../Provider';
-import AppBarStyled from './AppBarStyled';
-import { useSx } from '../../../hooks';
+import { AppBarStyled } from './AppBarStyled';
 import { DrawerToggle } from './DrawerToggle';
+import { useLayoutDrawerState, useLayoutMediaState } from '@/components/Layout/Provider';
+import { useSx } from '@/hooks';
+import { AppBar, SxProps, Toolbar, useTheme } from '@mui/material';
+import _ from 'lodash';
+import { useRef } from 'react';
 
 type IHeaderProps = React.PropsWithChildren<{ sx?: SxProps }>;
+
 function Header(props: IHeaderProps) {
-  const headerRef = useRef<HTMLElement>(),
-    theme = useTheme(),
-    { downLg, horizontal } = useLayoutMediaState(),
-    { open, width } = useLayoutDrawerState(),
-    Component = !downLg ? AppBarStyled : AppBar,
-    sx = useSx(props, {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      zIndex: 1200,
-      width: horizontal ? '100%' : open ? `calc(100% - ${width}px)` : { xs: '100%', lg: 'calc(100% - 60px)' }
-    }),
-    ComponentProps = {
-      position: 'fixed',
-      color: 'inherit',
-      elevation: 0,
-      sx: sx
-    };
+  const headerRef = useRef<HTMLElement>();
+  const theme = useTheme();
+  const { downLg, horizontal } = useLayoutMediaState();
+  const { open, width } = useLayoutDrawerState();
+  const Component = !downLg ? AppBarStyled : AppBar;
+  const sx = useSx(props, {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    zIndex: 1200,
+    width: horizontal ? '100%' : open ? `calc(100% - ${width}px)` : { xs: '100%', lg: 'calc(100% - 60px)' }
+  });
+  const ComponentProps = {
+    position: 'fixed',
+    color: 'inherit',
+    elevation: 0,
+    sx: sx
+  };
 
   if (!downLg) {
     _.extend(ComponentProps, { open: open });

package/src/components/Layout/Header/Notification/Notification.tsx

@@ -1,27 +1,27 @@
-import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons';
-import { useLayoutMediaState, useLayoutNotificationsState } from '../../Provider';
-import { HeaderToggleButton } from '../Buttons';
-import { useGetList, useNotify, useRefresh, useTranslate, useUpdateMany } from 'ra-core';
 import { HeaderNotificationItem, INotification } from './NotificationItem';
-import { useCallback, useEffect, useState } from 'react';
+import { IconButton, Transitions } from '@/components/@extended';
+import { HeaderToggleButton } from '@/components/Layout/Header/Buttons';
+import { useLayoutMediaState, useLayoutNotificationsState } from '@/components/Layout/Provider';
+import { MainCard } from '@/components/MainCard';
+import { usePopoverState } from '@/hooks';
+import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import {
   Badge,
   ClickAwayListener,
-  Paper,
-  Popper,
-  useTheme,
-  Tooltip,
-  List,
   Divider,
+  List,
   ListItemButton,
   ListItemText,
-  Typography
+  Paper,
+  Popper,
+  Tooltip,
+  Typography,
+  useTheme
 } from '@mui/material';
-import { usePopoverState } from '../../../../hooks';
-import { IconButton, Transitions } from '../../../@extended';
-import MainCard from '../../../MainCard';
-import { Link } from 'react-router-dom';
 import dayjs from 'dayjs';
+import { useGetList, useNotify, useRefresh, useTranslate, useUpdateMany } from 'ra-core';
+import { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 
 const avatarSx = {
   width: 36,
@@ -44,22 +44,22 @@ function HeaderNotification() {
 }
 
 function HeaderNotificationButton() {
-  const translate = useTranslate(),
-    theme = useTheme(),
-    refresh = useRefresh(),
-    notify = useNotify(),
-    { downMd } = useLayoutMediaState(),
-    { resource } = useLayoutNotificationsState(),
-    [notifications, setNotifications] = useState<Array<INotification>>([]),
-    { data, isLoading } = useGetList<INotification>(resource, {
-      pagination: { page: 1, perPage: 25 },
-      sort: { field: 'created', order: 'DESC' },
-      filter: {
-        readed: false
-      }
-    }),
-    read = notifications.filter((item) => item.readed === null).length,
-    { open, anchorEl, handleClose, handleToggle } = usePopoverState();
+  const translate = useTranslate();
+  const theme = useTheme();
+  const refresh = useRefresh();
+  const notify = useNotify();
+  const { downMd } = useLayoutMediaState();
+  const { resource } = useLayoutNotificationsState();
+  const [notifications, setNotifications] = useState<Array<INotification>>([]);
+  const { data, isLoading } = useGetList<INotification>(resource, {
+    pagination: { page: 1, perPage: 25 },
+    sort: { field: 'created', order: 'DESC' },
+    filter: {
+      readed: false
+    }
+  });
+  const read = notifications.filter((item) => item.readed === null).length;
+  const { open, anchorEl, handleClose, handleToggle } = usePopoverState();
 
   useEffect(() => {
     if (!isLoading && data) {
@@ -67,7 +67,9 @@ function HeaderNotificationButton() {
     }
   }, [data, isLoading]);
 
-  const unreadNotificationIds = notifications.filter((notification) => !notification.readed).map((notification) => notification.id);
+  const unreadNotificationIds = notifications
+    .filter((notification) => !notification.readed)
+    .map((notification) => notification.id);
 
   const [updateMany] = useUpdateMany(
     resource,
@@ -95,7 +97,14 @@ function HeaderNotificationButton() {
           <BellOutlined />
         </Badge>
       </HeaderToggleButton>
-      <Popper placement={downMd ? 'bottom' : 'bottom-end'} open={open} anchorEl={anchorEl} role={undefined} transition disablePortal>
+      <Popper
+        placement={downMd ? 'bottom' : 'bottom-end'}
+        open={open}
+        anchorEl={anchorEl}
+        role={undefined}
+        transition
+        disablePortal
+      >
         {({ TransitionProps }) => (
           //@ts-ignore
           <Transitions type="grow" position={downMd ? 'top' : 'top-right'} in={open} {...TransitionProps}>

package/src/components/Layout/Header/Notification/NotificationItem.tsx

@@ -1,9 +1,9 @@
-import { useCallback, useMemo } from 'react';
+import { useLayoutNotificationsState } from '@/components/Layout/Provider';
+import { MessageOutlined } from '@ant-design/icons';
 import { Avatar, Box, ListItem, ListItemAvatar, ListItemButton, ListItemText, useTheme } from '@mui/material';
-import { useLocaleState, useNotify, useRedirect, useUpdate } from 'ra-core';
-import { useLayoutNotificationsState } from '../../Provider';
 import dayjs from 'dayjs';
-import { MessageOutlined } from '@ant-design/icons';
+import { useLocaleState, useNotify, useRedirect, useUpdate } from 'ra-core';
+import { useCallback, useMemo } from 'react';
 
 type INotification = {
   id: string;
@@ -21,45 +21,45 @@ type IHeaderNotificationItemProps = {
   divider?: boolean;
 };
 function HeaderNotificationItem(props: IHeaderNotificationItemProps) {
-  const theme = useTheme(),
-    { notification, onClick, selected, divider } = props,
-    { resource } = useLayoutNotificationsState(),
-    notify = useNotify(),
-    redirect = useRedirect(),
-    [update] = useUpdate(
-      resource,
-      {
-        id: notification?.id,
-        data: {
-          ...notification,
-          readed: dayjs().format('YYYY-MM-DD HH:mm:ss')
-        }
-      },
-      {
-        onSuccess: () => {
-          // eslint-disable-next-line no-console
-          if (notification?.resource) {
-            if (notification?.resource.startsWith('/')) {
-              redirect(notification?.resource);
-              onClick();
-            } else {
-              onClick();
-              document.location.href = notification?.resource;
-            }
+  const theme = useTheme();
+  const { notification, onClick, selected, divider } = props;
+  const { resource } = useLayoutNotificationsState();
+  const notify = useNotify();
+  const redirect = useRedirect();
+  const [update] = useUpdate(
+    resource,
+    {
+      id: notification?.id,
+      data: {
+        ...notification,
+        readed: dayjs().format('YYYY-MM-DD HH:mm:ss')
+      }
+    },
+    {
+      onSuccess: () => {
+        // eslint-disable-next-line no-console
+        if (notification?.resource) {
+          if (notification?.resource.startsWith('/')) {
+            redirect(notification?.resource);
+            onClick();
           } else {
             onClick();
+            document.location.href = notification?.resource;
           }
-        },
-        //@ts-ignore
-        onFailure: () => {
-          //@ts-ignore
-          notify('resources.notifications.messages.readed.error', 'warning');
+        } else {
+          onClick();
         }
+      },
+      //@ts-ignore
+      onFailure: () => {
+        //@ts-ignore
+        notify('resources.notifications.messages.readed.error', 'warning');
       }
-    ),
-    handleClick = useCallback(() => update(), [update]),
-    [locale] = useLocaleState(),
-    ago = useMemo(() => dayjs(notification.created).locale(locale).fromNow(), [notification, locale]);
+    }
+  );
+  const handleClick = useCallback(() => update(), [update]);
+  const [locale] = useLocaleState();
+  const ago = useMemo(() => dayjs(notification.created).locale(locale).fromNow(), [notification, locale]);
 
   return (
     <ListItem disablePadding divider={divider}>
@@ -98,6 +98,6 @@ function HeaderNotificationItem(props: IHeaderNotificationItemProps) {
   );
 }
 
-export type { INotification };
-
 export { HeaderNotificationItem };
+
+export type { INotification };

package/src/components/Layout/Header/Profile/{Profile.tsx → HeaderProfile.tsx}

@@ -1,26 +1,24 @@
+import { ChangePasswordButton, LogoutButton, StopImpersonateButton } from './buttons';
+import { HeaderToggleButton, MainCard } from '@/components';
+import { Avatar, IconButton, Transitions } from '@/components/@extended';
+import { usePopoverState } from '@/hooks';
+import { LogoutOutlined } from '@ant-design/icons';
+import { Popper } from '@mui/base';
 import { CardContent, ClickAwayListener, Grid, List, Paper, Stack, Tooltip, Typography, useTheme } from '@mui/material';
-import { HeaderToggleButton } from '../Buttons';
-import { Avatar, IconButton, Transitions } from '../../../@extended';
-import { useAuthProvider, useDataProvider, useGetIdentity, useLogout } from 'ra-core';
+import { useDataProvider, useGetIdentity, useLogout } from 'ra-core';
 import { useCallback, useEffect, useState } from 'react';
-import { usePopoverState } from '../../../../hooks';
-import { Popper } from '@mui/base';
-import MainCard from '../../../MainCard';
-import { LogoutOutlined } from '@ant-design/icons';
-import { ChangePasswordButton, LogoutButton, StopImpersonateButton } from './buttons';
 
-function Profile() {
-  const theme = useTheme(),
-    dataProvider = useDataProvider(),
-    authProvider = useAuthProvider(),
-    { identity } = useGetIdentity(),
-    hasProfilePic = identity !== undefined && identity.image && identity.image !== null && identity.image !== '',
-    [profileImage, setProfileImage] = useState<string | null>(null),
-    { open, anchorEl, handleToggle, handleClose } = usePopoverState(),
-    logout = useLogout(),
-    handleLogout = useCallback(() => {
-      logout();
-    }, [authProvider, logout]);
+function HeaderProfile() {
+  const theme = useTheme();
+  const dataProvider = useDataProvider();
+  const { identity } = useGetIdentity();
+  const hasProfilePic = identity !== undefined && identity.image && identity.image !== null && identity.image !== '';
+  const [profileImage, setProfileImage] = useState<string | null>(null);
+  const { open, anchorEl, handleToggle, handleClose } = usePopoverState();
+  const logout = useLogout();
+  const handleLogout = useCallback(() => {
+    logout();
+  }, [logout]);
 
   useEffect(() => {
     if (hasProfilePic) {
@@ -32,14 +30,13 @@ function Profile() {
     <>
       <HeaderToggleButton sx={{ p: 0.25, width: 'auto' }} onClick={handleToggle} value="profile" selected={open}>
         <Stack direction="row" spacing={2} alignItems="center" sx={{ p: 0.5 }}>
-          {/* @ts-ignore */}
+          {/** @ts-ignore */}
           <Avatar alt={identity?.name?.toUpperCase()} src={profileImage} size="xs" />
           <Typography variant="subtitle1">{identity?.name}</Typography>
         </Stack>
       </HeaderToggleButton>
       <Popper placement="bottom-end" open={open} anchorEl={anchorEl} role={undefined} transition disablePortal>
         {({ TransitionProps }) => (
-          /* @ts-ignore */
           <Transitions type="grow" position="top-right" in={open} {...TransitionProps}>
             <Paper
               sx={{
@@ -60,7 +57,7 @@ function Profile() {
                     <Grid container justifyContent="space-between" alignItems="center">
                       <Grid item>
                         <Stack direction="row" spacing={1.25} alignItems="center">
-                          {/* @ts-ignore */}
+                          {/* @ts-expect-error WARN: wtf */}
                           <Avatar alt="profile user" src={profileImage} sx={{ width: 32, height: 32 }} />
                           <Stack>
                             <Typography variant="h6">{identity?.name}</Typography>
@@ -72,7 +69,7 @@ function Profile() {
                       </Grid>
                       <Grid item>
                         <Tooltip title="Logout">
-                          {/* @ts-ignore */}
+                          {/* @ts-expect-error WARN: wtf  */}
                           <IconButton size="large" sx={{ color: 'text.primary' }} onClick={handleLogout}>
                             <LogoutOutlined />
                           </IconButton>
@@ -99,4 +96,4 @@ function Profile() {
   );
 }
 
-export default Profile;
+export { HeaderProfile };