@applica-software-guru/react-admin 1.1.93 → 1.1.95

package/dist/style.css

@@ -1 +1 @@
-.simplebar-content:before,.simplebar-content:after{content:" ";display:table}.simplebar-scrollbar:before{position:absolute;content:"";background:black;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:" ";display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging,[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:"";background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}
+[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:" ";display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging,[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:"";background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.1.93",
+  "version": "1.1.95",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/AuthWrapper.jsx

@@ -2,10 +2,10 @@ import { Box, Grid } from '@mui/material';
 
 import AuthBackground from './AuthBackground';
 import AuthCard from './AuthCard';
-import Footer from './Layout/Footer';
 import MainIcon from './MainIcon';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Footer } from './Layout';
 
 const AuthWrapper = ({ version, name, children, background = AuthBackground }) => {
   return (

package/src/components/Layout/Content.tsx

@@ -0,0 +1,30 @@
+import { Box, Container, Toolbar } from '@mui/material';
+import { useLayoutDrawerState, useLayoutMediaState } from './Provider';
+import { useThemeConfig } from '../../hooks';
+
+type ILayoutContentProps = React.PropsWithChildren;
+
+function LayoutContent(props: ILayoutContentProps) {
+  const { width } = useLayoutDrawerState(),
+    { horizontal } = useLayoutMediaState(),
+    { container } = useThemeConfig();
+  return (
+    <Box component="main" sx={{ width: `calc(100% - ${width}px)`, flexGrow: 1, p: { xs: 0, sm: 2, lg: 1 }, pt: { lg: 2 } }}>
+      <Toolbar sx={{ mt: horizontal ? 8 : 'inherit' }} /> {/*Hugh...*/}
+      <Container
+        maxWidth={container ? 'xl' : false}
+        sx={{
+          ...(container && { px: { xs: 0, sm: 2 } }),
+          position: 'relative',
+          minHeight: 'calc(100vh - 110px)',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        {props.children}
+      </Container>
+    </Box>
+  );
+}
+
+export { LayoutContent };

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

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { Box, Drawer as MUIDrawer, SxProps, useTheme } from '@mui/material';
+import { useSx } from '../../../hooks';
+import { useLayoutDrawerState, useLayoutMediaState } from '../Provider';
+import MiniDrawerStyled from './MiniDrawerStyled';
+import { DrawerHeader } from './DrawerHeader';
+import { SimpleBar } from '../../third-party';
+
+type IDrawerProps = React.PropsWithChildren<{
+  sx?: SxProps;
+}>;
+
+function Drawer(props: IDrawerProps) {
+  const theme = useTheme(),
+    sx = useSx(props, { flexShrink: { md: 0 }, zIndex: 1200 }),
+    { downLg } = useLayoutMediaState(),
+    { open, handleDrawerToggle, width } = useLayoutDrawerState(),
+    Component = !downLg ? MiniDrawerStyled : MUIDrawer,
+    container = document.body,
+    ComponentProps = useMemo(() => {
+      return !downLg
+        ? { variant: 'permanent' }
+        : {
+            container: container,
+            variant: 'temporary',
+            onClose: handleDrawerToggle,
+            ModalProps: { keepMounted: true },
+            sx: {
+              display: { xs: 'block', lg: 'none' },
+              '& .MuiDrawer-paper': {
+                boxSizing: 'border-box',
+                width: width,
+                borderRight: `1px solid ${theme.palette.divider}`,
+                backgroundImage: 'none',
+                boxShadow: 'inherit'
+              }
+            }
+          };
+    }, [downLg, container, handleDrawerToggle, width]);
+
+  return (
+    <Box component="nav" sx={sx} aria-label="mailbox folders">
+      {/*@ts-ignore*/}
+      <Component {...ComponentProps} open={open}>
+        <DrawerHeader />
+        <SimpleBar
+          sx={{
+            '& .simplebar-content': {
+              display: 'flex',
+              flexDirection: 'column'
+            }
+          }}
+        >
+          {props.children}
+        </SimpleBar>
+      </Component>
+    </Box>
+  );
+}
+
+export { Drawer };

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

@@ -0,0 +1,31 @@
+import { SxProps, useTheme } from '@mui/material';
+import { useLayoutDrawerState, useLayoutLogoState, useLayoutMediaState } from '../Provider';
+import { DrawerHeaderStyled } from './DrawerHeaderStyled';
+import { useSx } from '../../../hooks';
+import Logo from '../../Logo';
+
+type IDrawerHeaderType = React.PropsWithChildren<{
+  sx?: SxProps;
+}>;
+
+function DrawerHeader(props: IDrawerHeaderType) {
+  const theme = useTheme(),
+    { horizontal } = useLayoutMediaState(),
+    { open } = useLayoutDrawerState(),
+    { icon, main } = useLayoutLogoState(),
+    sx = useSx(props, {
+      minHeight: horizontal ? 'unset' : '60px',
+      width: horizontal ? { xs: '100%', lg: '424px' } : 'inherit',
+      paddingTop: horizontal ? { xs: '10px', lg: '0' } : '8px',
+      paddingBottom: horizontal ? { xs: '18px', lg: '0' } : '8px',
+      paddingLeft: horizontal ? { xs: '24px', lg: '0' } : open ? '24px' : 0
+    });
+  return (
+    //@ts-ignore
+    <DrawerHeaderStyled theme={theme} open={open} sx={sx}>
+      <Logo isIcon={!open} sx={{ width: open ? 'auto' : 35, height: 35 }} logoMain={main} logoIcon={icon} />
+    </DrawerHeaderStyled>
+  );
+}
+
+export { DrawerHeader };

package/src/components/Layout/Drawer/{DrawerHeader/DrawerHeaderStyled.jsx → DrawerHeaderStyled.jsx}

@@ -15,4 +15,4 @@ DrawerHeaderStyled.propTypes = {
   open: PropTypes.bool
 };
 
-export default DrawerHeaderStyled;
+export { DrawerHeaderStyled };

package/src/components/Layout/Drawer/index.ts

@@ -0,0 +1,3 @@
+export * from './Drawer';
+export * from './DrawerHeader';
+export * from './DrawerHeaderStyled';

package/src/components/Layout/Footer.tsx

@@ -0,0 +1,26 @@
+import { Stack, Typography } from '@mui/material';
+
+import PropTypes from 'prop-types';
+
+type IFooterProps = {
+  name: string;
+  version: string;
+};
+
+function Footer(props: IFooterProps) {
+  const { name, version } = props;
+  return (
+    <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: '24px 16px 0px', mt: 'auto' }}>
+      <Typography variant="caption">
+        &copy; Applica Software Guru for {name} - {version}
+      </Typography>
+    </Stack>
+  );
+}
+
+Footer.propTypes = {
+  name: PropTypes.string.isRequired,
+  version: PropTypes.string.isRequired
+};
+
+export { Footer };

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

@@ -0,0 +1,28 @@
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { IconButton } from '../../@extended';
+import { useLayoutDrawerState, useLayoutThemeState } from '../Provider';
+
+function DrawerToggle() {
+  const { iconColor, iconColorOpen } = useLayoutThemeState(),
+    { open, handleDrawerToggle } = useLayoutDrawerState();
+
+  return (
+    //@ts-ignore
+    <IconButton
+      aria-label="open drawer"
+      onClick={handleDrawerToggle}
+      edge="start"
+      color="secondary"
+      variant="light"
+      sx={{
+        color: 'text.primary',
+        bgcolor: open ? iconColorOpen : iconColor,
+        ml: { xs: 0, lg: -2 }
+      }}
+    >
+      {!open ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+    </IconButton>
+  );
+}
+
+export { DrawerToggle };

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

@@ -0,0 +1,43 @@
+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 { DrawerToggle } from './DrawerToggle';
+
+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
+    };
+
+  if (!downLg) {
+    _.extend(ComponentProps, { open: open });
+  }
+
+  return (
+    //@ts-ignore
+    <Component ref={headerRef} {...ComponentProps}>
+      <Toolbar sx={{ '& > *': { marginX: theme.spacing(0.325) } }}>
+        {!horizontal && <DrawerToggle />}
+        {props.children}
+      </Toolbar>
+    </Component>
+  );
+}
+
+export { Header };

package/src/components/Layout/Header/{HeaderContent/Notification.jsx → Notification/Notification.tsx}

@@ -1,13 +1,11 @@
-import { Badge, Box, ClickAwayListener, List, Paper, Popper, Tooltip, useMediaQuery } from '@mui/material';
-import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Badge, Box, ClickAwayListener, List, Paper, Popper, Tooltip, useTheme } from '@mui/material';
+import { useLayoutMediaState, useLayoutNotificationsState, useLayoutThemeState } from '../../Provider';
 import { IconButton, Transitions } from '../../../@extended';
-import { useEffect, useRef, useState } from 'react';
-
+import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import { useGetList } from 'ra-core';
 import MainCard from '../../../MainCard';
-import NotificationItem from './NotificationItem';
-import PropTypes from 'prop-types';
-import { useGetList } from 'react-admin';
-import { useTheme } from '@mui/material/styles';
+import { HeaderNotificationItem, INotification } from './NotificationItem';
 
 const avatarSX = {
   width: 36,
@@ -25,46 +23,53 @@ const actionSX = {
   transform: 'none'
 };
 
-const Notification = ({ resource }) => {
-  const theme = useTheme();
-  const matchesXs = useMediaQuery(theme.breakpoints.down('md'));
+function HeaderNotification() {
+  const { enable } = useLayoutNotificationsState();
 
-  const anchorRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-
-  const handleClose = (event) => {
-    if (anchorRef.current && anchorRef.current.contains(event.target)) {
-      return;
-    }
-    setOpen(false);
-  };
+  return enable ? <HeaderNotificationButton /> : null;
+}
 
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
-  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100';
+function HeaderNotificationButton() {
+  const theme = useTheme(),
+    anchorRef = useRef(),
+    { resource } = useLayoutNotificationsState(),
+    { downMd } = useLayoutMediaState(),
+    { iconColor, iconColorOpen } = useLayoutThemeState(),
+    [notificationOpen, setNotificationOpen] = useState(false),
+    [notifications, setNotifications] = useState<Array<INotification>>([]),
+    read = notifications.filter((item) => item.readed === null).length,
+    handleToggle = useCallback(() => setNotificationOpen(!notificationOpen), [notificationOpen]),
+    handleClose = useCallback(() => {
+      //@ts-ignore
+      if (anchorRef.current && anchorRef.current.contains(event.target)) {
+        return;
+      }
+      setNotificationOpen(false);
+    }, [anchorRef.current, setNotificationOpen]),
+    { data, isLoading } = useGetList<INotification>(resource, {
+      pagination: { page: 1, perPage: 50 },
+      sort: { field: 'created', order: 'DESC' },
+      filter: {
+        readed: false
+      }
+    });
 
-  const { data, isLoading } = useGetList(resource, {
-    pagination: { page: 1, perPage: 50 },
-    sort: { field: 'created', order: 'DESC' },
-    filter: {
-      readed: false
+  useEffect(() => {
+    if (!isLoading && data) {
+      setNotifications(data ?? []);
     }
-  });
-  const [notifications, setNotifications] = useState([]);
-  useEffect(() => setNotifications(!isLoading && data ? data : []), [data, isLoading]);
-  const read = notifications.filter((item) => item.readed === null).length;
+  }, [data, isLoading]);
 
   return (
-    <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+    <Box sx={{ flexShrink: 0 }}>
+      {/*@ts-ignore*/}
       <IconButton
         color="secondary"
         variant="light"
-        sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+        sx={{ color: 'text.primary', bgcolor: notificationOpen ? iconColorOpen : iconColor }}
         aria-label="open profile"
         ref={anchorRef}
-        aria-controls={open ? 'profile-grow' : undefined}
+        aria-controls={notificationOpen ? 'profile-grow' : undefined}
         aria-haspopup="true"
         onClick={handleToggle}
       >
@@ -73,8 +78,8 @@ const Notification = ({ resource }) => {
         </Badge>
       </IconButton>
       <Popper
-        placement={matchesXs ? 'bottom' : 'bottom-end'}
-        open={open}
+        placement={downMd ? 'bottom' : 'bottom-end'}
+        open={notificationOpen}
         anchorEl={anchorRef.current}
         role={undefined}
         transition
@@ -84,16 +89,18 @@ const Notification = ({ resource }) => {
             {
               name: 'offset',
               options: {
-                offset: [matchesXs ? -5 : 0, 9]
+                offset: [downMd ? -5 : 0, 9]
               }
             }
           ]
         }}
       >
         {({ TransitionProps }) => (
-          <Transitions type="grow" position={matchesXs ? 'top' : 'top-right'} sx={{ overflow: 'hidden' }} in={open} {...TransitionProps}>
+          //@ts-ignore
+          <Transitions type="grow" position={downMd ? 'top' : 'top-right'} in={open} {...TransitionProps}>
             <Paper
               sx={{
+                //@ts-ignore
                 boxShadow: theme.customShadows.z1,
                 width: '100%',
                 minWidth: 285,
@@ -107,12 +114,13 @@ const Notification = ({ resource }) => {
                 <MainCard
                   title="Notification"
                   elevation={0}
-                  border={true}
+                  border={false}
                   content={false}
                   secondary={
                     <>
                       {read > 0 && (
                         <Tooltip title="Mark as all read">
+                          {/*@ts-ignore*/}
                           <IconButton color="success" size="small">
                             <CheckCircleOutlined style={{ fontSize: '1.15rem' }} />
                           </IconButton>
@@ -133,8 +141,14 @@ const Notification = ({ resource }) => {
                       }
                     }}
                   >
-                    {notifications.map((item) => (
-                      <NotificationItem resource={resource} key={item.id} selected={read > 0} notification={item} onClick={handleClose} />
+                    {notifications.map((item, index) => (
+                      <HeaderNotificationItem
+                        key={item.id}
+                        selected={read > 0}
+                        notification={item}
+                        onClick={handleClose}
+                        divider={index < notifications.length - 1}
+                      />
                     ))}
                   </List>
                 </MainCard>
@@ -145,14 +159,6 @@ const Notification = ({ resource }) => {
       </Popper>
     </Box>
   );
-};
-
-Notification.displayName = 'Notification';
-Notification.defaultProps = {
-  resource: 'entities/notification'
-};
-Notification.propTypes = {
-  resource: PropTypes.string.isRequired
-};
+}
 
-export default Notification;
+export { HeaderNotification };

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

@@ -0,0 +1,85 @@
+import { useCallback, useMemo } from 'react';
+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';
+
+type INotification = {
+  id: string;
+  readed: number | null;
+  resource: string;
+  created: string | number | dayjs.Dayjs | Date | null | undefined;
+  title: string;
+  content: string;
+};
+
+type IHeaderNotificationItemProps = {
+  selected: boolean;
+  notification: INotification;
+  onClick: () => void;
+  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: () => {
+          if (notification?.resource) {
+            if (notification?.resource.startsWith('/')) {
+              redirect(notification?.resource);
+              onClick();
+            } else {
+              document.location.href = notification?.resource;
+            }
+          } 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]);
+
+  return (
+    <ListItem disablePadding divider={divider}>
+      <ListItemButton selected={selected} onClick={handleClick}>
+        <ListItemAvatar>
+          <Avatar
+            sx={{
+              color: 'primary.main',
+              bgcolor: 'primary.lighter'
+            }}
+          >
+            <MessageOutlined />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText primary={notification.title} secondary={notification.content} />
+        <Box flexGrow={1} flexShrink={1} minWidth={theme.spacing(2)} />
+        <ListItemText primary={ago} primaryTypographyProps={{ variant: 'caption' }} />
+      </ListItemButton>
+    </ListItem>
+  );
+}
+
+export type { INotification };
+
+export { HeaderNotificationItem };

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

@@ -0,0 +1 @@
+export * from './Notification';

package/src/components/Layout/Header/{HeaderContent → Profile}/Profile.jsx

@@ -1,5 +1,18 @@
 import { Avatar, IconButton, Transitions } from '../../../@extended';
-import { Box, ButtonBase, CardContent, ClickAwayListener, Grid, List, Paper, Popper, Stack, Tooltip, Typography } from '@mui/material';
+import {
+  Box,
+  ButtonBase,
+  CardContent,
+  ClickAwayListener,
+  Grid,
+  List,
+  Paper,
+  Popper,
+  Stack,
+  Tooltip,
+  Typography,
+  useTheme
+} from '@mui/material';
 import { ChangePasswordButton, LogoutButton, StopImpersonateButton } from './buttons';
 import { useAuthProvider, useDataProvider, useGetIdentity, useLogout } from 'react-admin';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -7,7 +20,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { LogoutOutlined } from '@ant-design/icons';
 import MainCard from '../../../MainCard';
 import PropTypes from 'prop-types';
-import { useTheme } from '@mui/material/styles';
 
 function TabPanel({ children, value, index, ...other }) {
   return (
@@ -62,7 +74,7 @@ const Profile = () => {
   }, [dataProvider, hasProfilePic]);
 
   return (
-    <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+    <Box sx={{ flexShrink: 0 }}>
       <ButtonBase
         sx={{
           p: 0.25,

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

@@ -0,0 +1 @@
+export { default as HeaderProfile } from './Profile';