Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 1x 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 4x 4x 4x 4x 4x 4x 4x 10x 10x 10x 10x | /**
* @file NotificationsMenuSection.tsx
* @module app/HamburgerMenu/NotificationsMenuSection
*
* @summary
* Notifications section with low-stock alerts.
* Fetches low-stock item count from dashboard metrics hook and displays notification status.
*/
import { Box, Typography, Stack, Chip, Skeleton } from '@mui/material';
import NotificationsIcon from '@mui/icons-material/Notifications';
import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
import { useTranslation } from 'react-i18next';
import { useDashboardMetrics } from '../../api/analytics/hooks';
export default function NotificationsMenuSection() {
// Only need the common namespace here; remove mixed namespace lookups to avoid fallbacks.
const { t } = useTranslation('common');
// Fetch dashboard metrics (includes low-stock count) with consolidated cache management
const q = useDashboardMetrics();
const lowStockCount = q.data?.lowStockCount ?? 0;
const hasLowStock = !q.isLoading && lowStockCount > 0;
if (q.isLoading) {
return (
<Stack spacing={0.5} sx={{ p: 1 }}>
<Skeleton variant="text" width={160} />
<Skeleton variant="text" width={120} />
</Stack>
);
}
return (
<>
{hasLowStock ? (
<>
{/* ALERT SECTION */}
<Stack spacing={0.5} sx={{ p: 1, bgcolor: 'warning.light', borderRadius: 1 }}>
<Stack direction="row" spacing={1} alignItems="center">
<NotificationsActiveIcon sx={{ fontSize: 20, color: 'warning.main' }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: 'warning.dark' }}>
{t('notifications.lowStockAlert', 'Low Stock Alert')}
</Typography>
</Stack>
<Typography variant="caption" color="text.secondary">
{t(
'notifications.lowStockMessage',
'You have {{count}} merchandise item(s) with low stock',
{ count: lowStockCount }
)}
</Typography>
</Stack>
{/* QUICK STATS */}
<Box sx={{ mt: 1 }}>
<Chip
size="small"
label={
<Typography variant="caption">
{t('notifications.itemsLowStock', '{{count}} items below minimum', {
count: lowStockCount,
})}
</Typography>
}
color="warning"
variant="outlined"
/>
</Box>
</>
) : (
<Stack direction="row" spacing={1} alignItems="center" sx={{ p: 1 }}>
<NotificationsIcon sx={{ fontSize: 20, color: 'success.main' }} />
<Typography variant="caption" color="success.main">
{t('notifications.allGood', 'All clear – no low stock items')}
</Typography>
</Stack>
)}
</>
);
}
|