ui phase 10

client/src/layout/NurseLayout.tsx

@@ -8,6 +8,7 @@ import { ROUTES } from '@/constants';
 import { LinkToPage } from '@/utils';
 import { useMe } from '@/services/auth';
 import { useNurseProfile } from '@/services/profiles';
+import { useSupportUnreadTotal } from '@/services/tickets';
 import { useVerificationStatus } from '@/services/verification';
 import { ownBadgeState } from '@/services/verification/types';
 import TopBarAndSideBarLayout from './TopBarAndSideBarLayout';
@@ -29,6 +30,7 @@ const NurseLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
   const { data: me } = useMe();
   const { data: nurseProfile } = useNurseProfile();
   const { data: verification } = useVerificationStatus();
+  const supportUnreadTotal = useSupportUnreadTotal();
 
   const identityLoading = !me;
   const displayName = me ? [me.firstName, me.lastName].filter(Boolean).join(' ').trim() || me.phone : '';
@@ -48,9 +50,15 @@ const NurseLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
       { title: t('verification'), path: ROUTES.NURSE_VERIFICATION, icon: 'verification', group: groupProfession },
       { title: t('earnings'), path: ROUTES.NURSE_EARNINGS, icon: 'earnings', group: groupFinance },
       { title: t('bank'), path: ROUTES.NURSE_BANK, icon: 'bank', group: groupFinance },
-      { title: t('support'), path: ROUTES.NURSE_SUPPORT_TICKETS, icon: 'support', group: groupSupport },
+      {
+        title: t('support'),
+        path: ROUTES.NURSE_SUPPORT_TICKETS,
+        icon: 'support',
+        group: groupSupport,
+        badgeCount: supportUnreadTotal ?? undefined,
+      },
     ];
-  }, [t]);
+  }, [t, supportUnreadTotal]);
 
   const mobileTabs = useMemo(
     (): Array<LinkToPage> => [