@applica-software-guru/react-admin 1.5.325 → 1.5.326

package/package.json

@@ -107,5 +107,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.325"
+  "version": "1.5.326"
 }

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

@@ -3,6 +3,7 @@ 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 { Empty } from '@/components/ra-lists';
 import { usePopoverState } from '@/hooks';
 import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import {
@@ -140,45 +141,58 @@ function HeaderNotificationButton() {
                     </>
                   }
                 >
-                  <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' }
-                      },
-                      maxHeight: 'calc(100vh - 240px)',
-                      overflow: 'auto'
-                    }}
-                  >
-                    {notifications.map((item, index) => (
-                      <HeaderNotificationItem
-                        key={item.id}
-                        selected={read > 0}
-                        notification={item}
-                        onClick={handleClose}
-                        divider={index < notifications.length - 1}
-                      />
-                    ))}
-                  </List>
-                  {/*@ts-ignore*/}
-                  <ListItemButton
-                    sx={{ textAlign: 'center', py: `${12}px !important` }}
-                    to={`/${resource}`}
-                    LinkComponent={Link}
-                    onClick={handleClose}
-                  >
-                    <ListItemText
-                      primary={
-                        <Typography variant="h6" color="primary">
-                          {translate('ra.notification.view_all')}
-                        </Typography>
-                      }
+                  {notifications.length === 0 ? (
+                    <Empty
+                      hasCreate={false}
+                      title={<Typography variant="h5">{translate('ra.notification.empty')}</Typography>}
+                      sx={{
+                        '& .ApplicaEmpty-icon': { fontSize: '60px' },
+                        '& .ApplicaEmpty-toolbar': { display: 'none' }
+                      }}
                     />
-                  </ListItemButton>
+                  ) : (
+                    <>
+                      <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' }
+                          },
+                          maxHeight: 'calc(100vh - 240px)',
+                          overflow: 'auto'
+                        }}
+                      >
+                        {notifications.map((item, index) => (
+                          <HeaderNotificationItem
+                            key={item.id}
+                            selected={read > 0}
+                            notification={item}
+                            onClick={handleClose}
+                            divider={index < notifications.length - 1}
+                          />
+                        ))}
+                      </List>
+                      {/*@ts-ignore*/}
+                      <ListItemButton
+                        sx={{ textAlign: 'center', py: `${12}px !important` }}
+                        to={`/${resource}`}
+                        LinkComponent={Link}
+                        onClick={handleClose}
+                      >
+                        <ListItemText
+                          primary={
+                            <Typography variant="h6" color="primary">
+                              {translate('ra.notification.view_all')}
+                            </Typography>
+                          }
+                        />
+                      </ListItemButton>
+                    </>
+                  )}
                   <Divider />
                 </MainCard>
               </ClickAwayListener>

package/src/components/ra-lists/Empty.tsx

@@ -112,10 +112,12 @@ function Empty({
   const translate = useTranslate();
 
   const getResourceLabel = useGetResourceLabel();
-  const resourceName = translate(`resources.${resource}.forcedCaseName`, {
-    smart_count: 0,
-    _: getResourceLabel(resource, 0)
-  });
+  const resourceName = resource
+    ? translate(`resources.${resource}.forcedCaseName`, {
+        smart_count: 0,
+        _: getResourceLabel(resource, 0)
+      })
+    : translate('ra.empty.no_resource');
 
   const emptyMessage = translate('ra.page.empty', { name: resourceName });
   const inviteMessage = translate('ra.page.invite');