ui phase 10

client/src/layout/CustomerLayout.tsx

@@ -1,11 +1,12 @@
 'use client';
 import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
-import { Box, Stack, Tab, Tabs } from '@mui/material';
+import { Badge, Box, Stack, Tab, Tabs } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { AppIcon, AppIconButton, ErrorBoundary } from '@/components';
 import { NotificationBell } from '@/components/notifications';
 import { CONTENT_MAX_WIDTH } from '@/components/config';
 import { ROUTES } from '@/constants';
+import { useSupportUnreadTotal } from '@/services/tickets';
 import { LinkToPage } from '@/utils';
 import { usePathname, useRouter } from '@/i18n/navigation';
 import { TopBar, BottomBar } from './components';
@@ -50,18 +51,27 @@ const CustomerHeader: FunctionComponent<{ bottomNavItems: Array<LinkToPage> }> =
   const router = useRouter();
   const title = useRouteTitle();
   const onRootTab = isCustomerRootTab(pathname);
+  const supportUnreadTotal = useSupportUnreadTotal();
 
   return (
     <TopBar
       align={onRootTab ? 'center' : 'start'}
       startNode={
         onRootTab ? (
-          <AppIconButton
-            icon="support"
-            color="inherit"
-            title={t('support')}
-            onClick={() => router.push(ROUTES.SUPPORT_TICKETS)}
-          />
+          <Badge
+            badgeContent={supportUnreadTotal ?? 0}
+            max={99}
+            overlap="circular"
+            invisible={!supportUnreadTotal}
+            sx={{ '& .MuiBadge-badge': { bgcolor: 'var(--bal-error)', color: 'var(--bal-error-contrast)' } }}
+          >
+            <AppIconButton
+              icon="support"
+              color="inherit"
+              title={t('support')}
+              onClick={() => router.push(ROUTES.SUPPORT_TICKETS)}
+            />
+          </Badge>
         ) : (
           <AppIconButton icon="back" title={tc('back')} onClick={() => router.back()} />
         )