@applica-software-guru/react-admin 1.0.32 → 1.0.34

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

@@ -0,0 +1,20 @@
+import { Box } from '@mui/material'
+import PropTypes from 'prop-types'
+import { styled } from '@mui/material/styles'
+
+const DrawerHeaderStyled = styled(Box, { shouldForwardProp: (prop) => prop !== 'open' })(
+  ({ theme, open }) => ({
+    ...theme.mixins.toolbar,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: open ? 'flex-start' : 'center',
+    paddingLeft: theme.spacing(open ? 3 : 0),
+  }),
+)
+
+DrawerHeaderStyled.propTypes = {
+  theme: PropTypes.object,
+  open: PropTypes.bool,
+}
+
+export default DrawerHeaderStyled

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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,55 @@
+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/MiniDrawerStyled.jsx

@@ -0,0 +1,47 @@
+import Drawer from '@mui/material/Drawer'
+import { styled } from '@mui/material/styles'
+import { useThemeConfig } from '../../../hooks'
+
+const openedMixin = (theme, drawerWidth) => ({
+  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',
+  boxShadow: theme.palette.mode === 'dark' ? theme.customShadows.z1 : 'none',
+})
+
+const closedMixin = (theme) => ({
+  transition: theme.transitions.create('width', {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  overflowX: 'hidden',
+  width: theme.spacing(7.5),
+  borderRight: 'none',
+  boxShadow: theme.customShadows.z1,
+})
+
+const MiniDrawerStyled = styled(Drawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+  ({ theme, open }) => {
+    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 default MiniDrawerStyled

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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,23 @@
+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/AppBarStyled.jsx

@@ -0,0 +1,34 @@
+import AppBar from '@mui/material/AppBar'
+import PropTypes from 'prop-types'
+import { styled } from '@mui/material/styles'
+import { useThemeConfig } from '../../../hooks'
+
+const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })(
+  ({ theme, open }) => {
+    const { drawerWidth } = useThemeConfig()
+    return {
+      zIndex: theme.zIndex.drawer + 1,
+      transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      ...(!open && {
+        width: `calc(100% - ${theme.spacing(7.5)})`,
+      }),
+      ...(open && {
+        marginLeft: drawerWidth,
+        width: `calc(100% - ${drawerWidth}px)`,
+        transition: theme.transitions.create(['width', 'margin'], {
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.enteringScreen,
+        }),
+      }),
+    }
+  },
+)
+
+AppBarStyled.propTypes = {
+  open: PropTypes.bool,
+}
+
+export default AppBarStyled

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

@@ -0,0 +1,91 @@
+import { AppBar, Box, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material'
+import { IconButton, Transitions } from '../../../@extended'
+import { useEffect, useRef, useState } from 'react'
+
+import { MoreOutlined } from '@ant-design/icons'
+import Profile from './Profile'
+import { useTheme } from '@mui/material/styles'
+
+const MobileSection = () => {
+  const theme = useTheme()
+
+  const [open, setOpen] = useState(false)
+  const anchorRef = useRef(null)
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen)
+  }
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return
+    }
+    setOpen(false)
+  }
+
+  const prevOpen = useRef(open)
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus()
+    }
+
+    prevOpen.current = open
+  }, [open])
+
+  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300'
+  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100'
+
+  return (
+    <>
+      <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+        <IconButton
+          sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+          aria-label="open more menu"
+          ref={anchorRef}
+          aria-controls={open ? 'menu-list-grow' : undefined}
+          aria-haspopup="true"
+          onClick={handleToggle}
+          color="secondary"
+          variant="light"
+        >
+          <MoreOutlined />
+        </IconButton>
+      </Box>
+      <Popper
+        placement="bottom-end"
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        style={{ width: '100%' }}
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 9],
+              },
+            },
+          ],
+        }}
+      >
+        {({ TransitionProps }) => (
+          <Transitions type="fade" in={open} {...TransitionProps}>
+            <Paper sx={{ boxShadow: theme.customShadows.z1 }}>
+              <ClickAwayListener onClickAway={handleClose}>
+                <AppBar color="inherit">
+                  <Toolbar>
+                    <Profile />
+                  </Toolbar>
+                </AppBar>
+              </ClickAwayListener>
+            </Paper>
+          </Transitions>
+        )}
+      </Popper>
+    </>
+  )
+}
+
+export default MobileSection

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

@@ -0,0 +1,179 @@
+import {
+  Badge,
+  Box,
+  ClickAwayListener,
+  List,
+  Paper,
+  Popper,
+  Tooltip,
+  useMediaQuery
+} from '@mui/material'
+import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons'
+import { IconButton, Transitions } from '../../../@extended'
+import { useEffect, useRef, useState } from 'react'
+
+import MainCard from '../../../MainCard'
+import NotificationItem from './NotificationItem'
+import PropTypes from 'prop-types'
+import { useGetList } from 'react-admin'
+import { useTheme } from '@mui/material/styles'
+
+const avatarSX = {
+  width: 36,
+  height: 36,
+  fontSize: '1rem'
+}
+
+const actionSX = {
+  mt: '6px',
+  ml: 1,
+  top: 'auto',
+  right: 'auto',
+  alignSelf: 'flex-start',
+
+  transform: 'none'
+}
+
+const Notification = ({ resource }) => {
+  const theme = useTheme()
+  const matchesXs = useMediaQuery(theme.breakpoints.down('md'))
+
+  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)
+  }
+
+  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300'
+  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100'
+
+  const { data, isLoading } = useGetList(resource, {
+    pagination: { page: 1, perPage: 50 },
+    sort: { field: 'created', order: 'DESC' },
+    filter: {
+      readed: false
+    }
+  })
+  const [notifications, setNotifications] = useState([])
+  useEffect(() => setNotifications(!isLoading && data ? data : []), [data, isLoading])
+  const read = notifications.filter((item) => item.readed === null).length
+
+  return (
+    <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+      <IconButton
+        color="secondary"
+        variant="light"
+        sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+        aria-label="open profile"
+        ref={anchorRef}
+        aria-controls={open ? 'profile-grow' : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <Badge badgeContent={read} color="primary">
+          <BellOutlined />
+        </Badge>
+      </IconButton>
+      <Popper
+        placement={matchesXs ? 'bottom' : 'bottom-end'}
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [matchesXs ? -5 : 0, 9]
+              }
+            }
+          ]
+        }}
+      >
+        {({ TransitionProps }) => (
+          <Transitions
+            type="grow"
+            position={matchesXs ? 'top' : 'top-right'}
+            sx={{ overflow: 'hidden' }}
+            in={open}
+            {...TransitionProps}
+          >
+            <Paper
+              sx={{
+                boxShadow: theme.customShadows.z1,
+                width: '100%',
+                minWidth: 285,
+                maxWidth: 420,
+                [theme.breakpoints.down('md')]: {
+                  maxWidth: 285
+                }
+              }}
+            >
+              <ClickAwayListener onClickAway={handleClose}>
+                <MainCard
+                  title="Notification"
+                  elevation={0}
+                  border={true}
+                  content={false}
+                  secondary={
+                    <>
+                      {read > 0 && (
+                        <Tooltip title="Mark as all read">
+                          <IconButton color="success" size="small">
+                            <CheckCircleOutlined style={{ fontSize: '1.15rem' }} />
+                          </IconButton>
+                        </Tooltip>
+                      )}
+                    </>
+                  }
+                >
+                  <List
+                    component="nav"
+                    sx={{
+                      p: 0,
+                      '& .MuiListItemButton-root': {
+                        py: 0.5,
+                        '&.Mui-selected': { bgcolor: 'grey.50', color: 'text.primary' },
+                        '& .MuiAvatar-root': avatarSX,
+                        '& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }
+                      }
+                    }}
+                  >
+                    {notifications.map((item) => (
+                      <NotificationItem
+                        resource={resource}
+                        key={item.id}
+                        selected={read > 0}
+                        notification={item}
+                        onClick={handleClose}
+                      />
+                    ))}
+                  </List>
+                </MainCard>
+              </ClickAwayListener>
+            </Paper>
+          </Transitions>
+        )}
+      </Popper>
+    </Box>
+  )
+}
+
+Notification.displayName = 'Notification'
+Notification.defaultProps = {
+  resource: 'entities/notification'
+}
+Notification.propTypes = {
+  resource: PropTypes.string.isRequired
+}
+
+export default Notification

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

@@ -0,0 +1,109 @@
+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