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

package/src/components/Layout/Drawer/DrawerContent/Navigation/index.jsx

@@ -1,73 +0,0 @@
-import { Box, Typography, useMediaQuery } from '@mui/material';
-import { useMenu, useMenuConfig, useThemeConfig } from '../../../../../hooks';
-
-import NavGroup from './NavGroup';
-import { useState } from 'react';
-import { useTheme } from '@mui/material/styles';
-
-const Navigation = () => {
-  const theme = useTheme();
-  const { menu, isLoading } = useMenu();
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
-
-  const { menuOrientation, horizontalMaxItems, isHorizontalLayout } = useThemeConfig();
-  const { drawerOpen } = useMenuConfig();
-  const [selectedItems, setSelectedItems] = useState('');
-  const [selectedLevel, setSelectedLevel] = useState(0);
-  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG;
-  const lastItem = isHorizontal ? horizontalMaxItems : null;
-
-  let lastItemIndex = isLoading ? 0 : menu.length - 1;
-  let remItems = [];
-  let lastItemId;
-
-  if (!isLoading && lastItem && lastItem < menu.length) {
-    lastItemId = menu[lastItem - 1].id;
-    lastItemIndex = lastItem - 1;
-    remItems = menu.slice(lastItem - 1, menu.length).map((item) => ({
-      title: item.title,
-      elements: item.children,
-      icon: item.icon
-    }));
-  }
-
-  const navGroups = isLoading
-    ? []
-    : menu.slice(0, lastItemIndex + 1).map((item) => {
-        switch (item.type) {
-          case 'group':
-            return (
-              <NavGroup
-                key={item.id}
-                setSelectedItems={setSelectedItems}
-                setSelectedLevel={setSelectedLevel}
-                selectedLevel={selectedLevel}
-                selectedItems={selectedItems}
-                lastItem={lastItem}
-                remItems={remItems}
-                lastItemId={lastItemId}
-                item={item}
-              />
-            );
-          default:
-            return (
-              <Typography key={item.id} variant="h6" color="error" align="center">
-                Fix - Navigation Group
-              </Typography>
-            );
-        }
-      });
-  return (
-    <Box
-      sx={{
-        pt: drawerOpen ? (isHorizontal ? 0 : 2) : 0,
-        '& > ul:first-of-type': { mt: 0 },
-        display: isHorizontal ? { xs: 'block', lg: 'flex' } : 'block'
-      }}
-    >
-      {navGroups}
-    </Box>
-  );
-};
-
-export default Navigation;

package/src/components/Layout/Drawer/DrawerContent/index.jsx

@@ -1,19 +0,0 @@
-import Navigation from './Navigation';
-import { SimpleBar } from '../../../third-party';
-
-const DrawerContent = () => {
-  return (
-    <SimpleBar
-      sx={{
-        '& .simplebar-content': {
-          display: 'flex',
-          flexDirection: 'column'
-        }
-      }}
-    >
-      <Navigation />
-    </SimpleBar>
-  );
-};
-
-export default DrawerContent;

package/src/components/Layout/Drawer/DrawerHeader/index.jsx

@@ -1,39 +0,0 @@
-import DrawerHeaderStyled from './DrawerHeaderStyled';
-import Logo from '../../../Logo';
-import PropTypes from 'prop-types';
-import { useMediaQuery } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { useThemeConfig } from '../../../../hooks';
-
-const DrawerHeader = ({ open, logoMain, logoIcon }) => {
-  const theme = useTheme();
-
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
-
-  const { menuOrientation, isHorizontalLayout } = useThemeConfig();
-  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG;
-
-  return (
-    <DrawerHeaderStyled
-      theme={theme}
-      open={open}
-      sx={{
-        minHeight: isHorizontal ? 'unset' : '60px',
-        width: isHorizontal ? { xs: '100%', lg: '424px' } : 'inherit',
-        paddingTop: isHorizontal ? { xs: '10px', lg: '0' } : '8px',
-        paddingBottom: isHorizontal ? { xs: '18px', lg: '0' } : '8px',
-        paddingLeft: isHorizontal ? { xs: '24px', lg: '0' } : open ? '24px' : 0
-      }}
-    >
-      <Logo isIcon={!open} sx={{ width: open ? 'auto' : 35, height: 35 }} logoMain={logoMain} logoIcon={logoIcon} />
-    </DrawerHeaderStyled>
-  );
-};
-
-DrawerHeader.propTypes = {
-  open: PropTypes.bool,
-  logoMain: PropTypes.node,
-  logoIcon: PropTypes.node
-};
-
-export default DrawerHeader;

package/src/components/Layout/Drawer/HorizontalBar.jsx

@@ -1,55 +0,0 @@
-import { AppBar, Box, Container, useScrollTrigger } from '@mui/material';
-
-import Navigation from './DrawerContent/Navigation';
-import React from 'react';
-import { useTheme } from '@mui/material/styles';
-import { useThemeConfig } from '../../../hooks';
-
-function ElevationScroll({ children, window }) {
-  const theme = useTheme();
-  // Note that you normally won't need to set the window ref as useScrollTrigger
-  // will default to window.
-  // This is only being set here because the demo is in an iframe.
-  const trigger = useScrollTrigger({
-    disableHysteresis: true,
-    threshold: 0,
-    target: window
-  });
-
-  theme.shadows[4] = theme.customShadows.z1;
-
-  return React.cloneElement(children, {
-    elevation: trigger ? 4 : 0
-  });
-}
-
-const CustomAppBar = () => {
-  const theme = useTheme();
-  const { container } = useThemeConfig();
-
-  return (
-    <ElevationScroll>
-      <AppBar
-        sx={{
-          top: 60,
-          bgcolor: theme.palette.background.paper,
-          width: '100%',
-          height: 62,
-          justifyContent: 'center',
-          borderTop: `1px solid ${theme.palette.divider}`,
-          borderBottom: `1px solid ${theme.palette.divider}`,
-          zIndex: 1098,
-          color: theme.palette.grey[500]
-        }}
-      >
-        <Container maxWidth={container ? 'xl' : false}>
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <Navigation />
-          </Box>
-        </Container>
-      </AppBar>
-    </ElevationScroll>
-  );
-};
-
-export default CustomAppBar;

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

@@ -1,60 +0,0 @@
-import { Box, Drawer, useMediaQuery } from '@mui/material';
-
-import DrawerContent from './DrawerContent';
-import DrawerHeader from './DrawerHeader';
-import MiniDrawerStyled from './MiniDrawerStyled';
-import PropTypes from 'prop-types';
-import { useMemo } from 'react';
-import { useTheme } from '@mui/material/styles';
-import { useThemeConfig } from '../../../hooks';
-
-const MainDrawer = ({ open, handleDrawerToggle, window, logoMain, logoIcon }) => {
-  const theme = useTheme();
-  const matchDownMD = useMediaQuery(theme.breakpoints.down('lg'));
-  const container = window !== undefined ? () => window().document.body : undefined;
-  const drawerContent = useMemo(() => <DrawerContent />, []);
-  const drawerHeader = useMemo(() => <DrawerHeader open={open} logoMain={logoMain} logoIcon={logoIcon} />, [open, logoMain, logoIcon]);
-  const { drawerWidth } = useThemeConfig();
-
-  return (
-    <Box component="nav" sx={{ flexShrink: { md: 0 }, zIndex: 1200 }} aria-label="mailbox folders">
-      {!matchDownMD ? (
-        <MiniDrawerStyled variant="permanent" open={open}>
-          {drawerHeader}
-          {drawerContent}
-        </MiniDrawerStyled>
-      ) : (
-        <Drawer
-          container={container}
-          variant="temporary"
-          open={open}
-          onClose={handleDrawerToggle}
-          ModalProps={{ keepMounted: true }}
-          sx={{
-            display: { xs: 'block', lg: 'none' },
-            '& .MuiDrawer-paper': {
-              boxSizing: 'border-box',
-              width: drawerWidth,
-              borderRight: `1px solid ${theme.palette.divider}`,
-              backgroundImage: 'none',
-              boxShadow: 'inherit'
-            }
-          }}
-        >
-          {drawerHeader}
-          {drawerContent}
-        </Drawer>
-      )}
-    </Box>
-  );
-};
-
-MainDrawer.propTypes = {
-  open: PropTypes.bool,
-  window: PropTypes.object,
-  handleDrawerToggle: PropTypes.func,
-  logoMain: PropTypes.node,
-  logoIcon: PropTypes.node
-};
-
-export default MainDrawer;

package/src/components/Layout/Footer.jsx

@@ -1,18 +0,0 @@
-import { Stack, Typography } from '@mui/material';
-
-import PropTypes from 'prop-types';
-
-const Footer = ({ name, version }) => (
-  <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 default Footer;

package/src/components/Layout/Header/HeaderContent/NotificationItem.jsx

@@ -1,97 +0,0 @@
-import { Avatar, Divider, ListItemAvatar, ListItemButton, ListItemSecondaryAction, ListItemText, Typography } from '@mui/material';
-import { useCallback, useMemo } from 'react';
-import { useLocaleState, useNotify, useRedirect, useUpdate } from 'react-admin';
-
-import { MessageOutlined } from '@ant-design/icons';
-import PropTypes from 'prop-types';
-import dayjs from 'dayjs';
-
-const NotificationItem = ({ resource, selected, notification, onClick }) => {
-  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: () => {
-        if (notification?.resource) {
-          if (notification?.resource.startsWith('/')) {
-            redirect(notification?.resource);
-            onClick();
-          } else {
-            document.location.href = notification?.resource;
-          }
-        } else {
-          onClick();
-        }
-      },
-      onFailure: () => {
-        notify('resources.notifications.messages.readed.error', 'warning');
-      }
-    }
-  );
-  const handleClick = useCallback(() => update(), [update]);
-  const [locale] = useLocaleState();
-  const ago = useMemo(() => dayjs(notification.created).locale(locale).fromNow(), [notification, locale]);
-  return (
-    <>
-      <ListItemButton selected={selected} onClick={handleClick}>
-        <ListItemAvatar>
-          <Avatar
-            sx={{
-              color: 'primary.main',
-              bgcolor: 'primary.lighter'
-            }}
-          >
-            <MessageOutlined />
-          </Avatar>
-        </ListItemAvatar>
-        <ListItemText
-          primary={
-            <Typography variant="h6">
-              {notification.title}
-              <Typography component="span" variant="subtitle1">
-                {notification.content}
-              </Typography>
-            </Typography>
-          }
-          secondary="2 min ago"
-        />
-        <ListItemSecondaryAction>
-          <Typography variant="caption" noWrap>
-            {ago}
-          </Typography>
-        </ListItemSecondaryAction>
-      </ListItemButton>
-      <Divider />
-    </>
-  );
-};
-
-NotificationItem.displayName = 'NotificationItem';
-
-NotificationItem.defaultProps = {
-  resource: 'entities/notification',
-  selected: false
-};
-
-NotificationItem.propTypes = {
-  resource: PropTypes.string.isRequired,
-  selected: PropTypes.bool.isRequired,
-  notification: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    title: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-    resource: PropTypes.string,
-    readed: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]),
-    created: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]).isRequired
-  }).isRequired,
-  onClick: PropTypes.func.isRequired
-};
-export default NotificationItem;

package/src/components/Layout/Header/HeaderContent/index.jsx

@@ -1,36 +0,0 @@
-import { Box, useMediaQuery } from '@mui/material';
-import { useMenuConfig, useThemeConfig } from '../../../../hooks';
-
-import DrawerHeader from '../../Drawer/DrawerHeader';
-import { LoadingIndicator } from 'react-admin';
-import MobileSection from './MobileSection';
-import Notification from './Notification';
-import Profile from './Profile';
-import PropTypes from 'prop-types';
-
-const HeaderContent = ({ logoMain, logoIcon, notification, enableNotification }) => {
-  const matchesXs = useMediaQuery((theme) => theme.breakpoints.down('md'));
-  const { isHorizontalLayout, menuOrientation } = useThemeConfig();
-  const { drawerOpen } = useMenuConfig();
-  return (
-    <>
-      {(!drawerOpen || !matchesXs) && isHorizontalLayout(menuOrientation) && <DrawerHeader open logoMain={logoMain} logoIcon={logoIcon} />}
-      <Box sx={{ flexGrow: 1 }} />
-      {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
-
-      <LoadingIndicator />
-      {enableNotification && <Notification resource={notification} />}
-      {!matchesXs && <Profile />}
-      {matchesXs && <MobileSection />}
-    </>
-  );
-};
-
-HeaderContent.propTypes = {
-  logoMain: PropTypes.node,
-  logoIcon: PropTypes.node,
-  notification: PropTypes.string,
-  enableNotification: PropTypes.bool
-};
-
-export default HeaderContent;

package/src/components/Layout/Header/index.jsx

@@ -1,81 +0,0 @@
-import { AppBar, Toolbar, useMediaQuery } from '@mui/material';
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
-
-import AppBarStyled from './AppBarStyled';
-import HeaderContent from './HeaderContent';
-import { IconButton } from '../../@extended';
-import PropTypes from 'prop-types';
-import { useMemo } from 'react';
-import { useTheme } from '@mui/material/styles';
-import { useThemeConfig } from '../../../hooks';
-
-const Header = ({ open, logoMain, logoIcon, handleDrawerToggle, notification, enableNotification }) => {
-  const theme = useTheme();
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
-  const { menuOrientation, isHorizontalLayout } = useThemeConfig();
-
-  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG;
-  const headerContent = useMemo(
-    () => <HeaderContent logoMain={logoMain} logoIcon={logoIcon} notification={notification} enableNotification={enableNotification} />,
-    [logoMain, logoIcon, notification]
-  );
-
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
-  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100';
-
-  const mainHeader = (
-    <Toolbar>
-      {!isHorizontal ? (
-        <IconButton
-          aria-label="open drawer"
-          onClick={handleDrawerToggle}
-          edge="start"
-          color="secondary"
-          variant="light"
-          sx={{
-            color: 'text.primary',
-            bgcolor: open ? iconBackColorOpen : iconBackColor,
-            ml: { xs: 0, lg: -2 }
-          }}
-        >
-          {!open ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-        </IconButton>
-      ) : null}
-      {headerContent}
-    </Toolbar>
-  );
-
-  const appBar = {
-    position: 'fixed',
-    color: 'inherit',
-    elevation: 0,
-    sx: {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      zIndex: 1200,
-      width: isHorizontal ? '100%' : open ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' }
-    }
-  };
-
-  return (
-    <>
-      {!downLG ? (
-        <AppBarStyled open={open} {...appBar}>
-          {mainHeader}
-        </AppBarStyled>
-      ) : (
-        <AppBar {...appBar}>{mainHeader}</AppBar>
-      )}
-    </>
-  );
-};
-
-Header.propTypes = {
-  open: PropTypes.bool,
-  handleDrawerToggle: PropTypes.func,
-  logoMain: PropTypes.node,
-  logoIcon: PropTypes.node,
-  notification: PropTypes.string,
-  enableNotification: PropTypes.bool
-};
-
-export default Header;

package/src/components/Layout/index.jsx

@@ -1,114 +0,0 @@
-import 'simplebar/dist/simplebar.css';
-
-import { Box, Container, Dialog, Toolbar, useMediaQuery } from '@mui/material';
-import { useBreadcrumbs, useMenuConfig, useThemeConfig } from '../../hooks';
-import { useEffect, useState } from 'react';
-
-import Breadcrumbs from '../@extended/Breadcrumbs';
-import { ChangePasswordForm } from '../ra-forms';
-import Drawer from './Drawer';
-import Footer from './Footer';
-import Header from './Header';
-import HorizontalBar from './Drawer/HorizontalBar';
-import { Outlet } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { useGetIdentity } from 'ra-core';
-import { useTheme } from '@mui/material/styles';
-
-const Layout = ({ children, name, version, logoMain, logoIcon, notification, enableNotification }) => {
-  const theme = useTheme();
-  const { openDrawer } = useMenuConfig();
-  const { isLoading, navigation, breadcrumbs } = useBreadcrumbs();
-  const { identity } = useGetIdentity();
-  const [needToChangePassword, setNeedToChangePassword] = useState(false);
-
-  const matchDownLG = useMediaQuery(theme.breakpoints.down('xl'));
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
-  const { container, miniDrawer, menuOrientation, isHorizontalLayout } = useThemeConfig();
-
-  const { drawerOpen } = useMenuConfig();
-  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG;
-  const [open, setOpen] = useState(!miniDrawer || drawerOpen);
-  const handleDrawerToggle = () => {
-    setOpen(!open);
-    openDrawer(!open);
-  };
-  useEffect(() => setNeedToChangePassword(identity?.needToChangePassword === true), [identity]);
-  useEffect(() => {
-    if (!miniDrawer) {
-      setOpen(!matchDownLG);
-      openDrawer(!matchDownLG);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [matchDownLG]);
-
-  useEffect(() => {
-    if (open !== drawerOpen) setOpen(drawerOpen);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [drawerOpen]);
-
-  const handlePasswordChange = () => setNeedToChangePassword(false);
-
-  return (
-    <Box sx={{ display: 'flex', width: '100%' }}>
-      <Header
-        open={open}
-        handleDrawerToggle={handleDrawerToggle}
-        logoMain={logoMain}
-        logoIcon={logoIcon}
-        notification={notification}
-        enableNotification={enableNotification}
-      />
-      {!isHorizontal ? (
-        <Drawer open={open} handleDrawerToggle={handleDrawerToggle} logoMain={logoMain} logoIcon={logoIcon} />
-      ) : (
-        <HorizontalBar />
-      )}
-      <Box component="main" sx={{ width: 'calc(100% - 260px)', flexGrow: 1, p: { xs: 0, sm: 2, lg: 1 }, pt: { lg: 2 } }}>
-        <Toolbar sx={{ mt: isHorizontal ? 8 : 'inherit' }} />
-        <Container
-          maxWidth={container ? 'xl' : false}
-          sx={{
-            ...(container && { px: { xs: 0, sm: 2 } }),
-            position: 'relative',
-            minHeight: 'calc(100vh - 110px)',
-            display: 'flex',
-            flexDirection: 'column'
-          }}
-        >
-          <Dialog open={needToChangePassword} maxWidth="xs" fullWidth>
-            <ChangePasswordForm onSuccess={handlePasswordChange} firstAccess />
-          </Dialog>
-          {!isLoading && (
-            <Breadcrumbs
-              titleBottom
-              mode="breadcrumbs"
-              navigation={navigation}
-              breadcrumbs={breadcrumbs}
-              card={false}
-              divider={false}
-              icon
-              icons
-              home={false}
-            />
-          )}
-          {children}
-          <Outlet />
-          <Footer name={name} version={version} />
-        </Container>
-      </Box>
-    </Box>
-  );
-};
-
-Layout.propTypes = {
-  name: PropTypes.string,
-  version: PropTypes.string,
-  children: PropTypes.node,
-  logoMain: PropTypes.node,
-  logoIcon: PropTypes.node,
-  notification: PropTypes.string,
-  enableNotification: PropTypes.bool
-};
-
-export default Layout;