base commit

client/src/pages/admin-layout/ui/AdminLayoutPage.tsx

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react'
-import { useMemo, useState } from 'react'
+import { useMemo, useState, useSyncExternalStore } from 'react'
 import AssignmentOutlinedIcon from '@mui/icons-material/AssignmentOutlined'
 import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined'
 import PeopleOutlinedIcon from '@mui/icons-material/PeopleOutlined'
 import RateReviewOutlinedIcon from '@mui/icons-material/RateReviewOutlined'
 import StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined'
+import Badge from '@mui/material/Badge'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import Drawer from '@mui/material/Drawer'
@@ -17,11 +18,14 @@ import Stack from '@mui/material/Stack'
 import { useTheme } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
 import useMediaQuery from '@mui/material/useMediaQuery'
+import { useQuery } from '@tanstack/react-query'
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
+import { fetchAdminOrdersSummary } from '@/entities/order/api/admin-order-api'
 import { AdminPage } from '@/pages/admin'
 import { AdminOrdersPage } from '@/pages/admin-orders'
 import { AdminReviewsPage } from '@/pages/admin-reviews'
 import { AdminUsersPage } from '@/pages/admin-users'
+import { getAdminToken, subscribeAdminTokenChange } from '@/shared/lib/admin-token'
 
 type NavItem = {
   to: string
@@ -35,6 +39,17 @@ export function AdminLayoutPage() {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
   const [mobileOpen, setMobileOpen] = useState(false)
+  const adminToken = useSyncExternalStore(subscribeAdminTokenChange, getAdminToken, () => null)
+
+  const ordersSummaryQuery = useQuery({
+    queryKey: ['admin', 'orders', 'summary', adminToken],
+    queryFn: () => fetchAdminOrdersSummary(adminToken!),
+    enabled: Boolean(adminToken),
+    refetchInterval: 45_000,
+    refetchOnWindowFocus: true,
+  })
+
+  const newOrdersAttention = ordersSummaryQuery.data?.attentionCount ?? 0
 
   const navItems: NavItem[] = useMemo(
     () => [
@@ -72,7 +87,15 @@ export function AdminLayoutPage() {
               setMobileOpen(false)
             }}
           >
-            <ListItemIcon>{i.icon}</ListItemIcon>
+            <ListItemIcon>
+              {i.to === '/admin/orders' ? (
+                <Badge color="error" badgeContent={newOrdersAttention} max={99} invisible={newOrdersAttention === 0}>
+                  {i.icon}
+                </Badge>
+              ) : (
+                i.icon
+              )}
+            </ListItemIcon>
             <ListItemText primary={i.label} />
           </ListItemButton>
         ))}