frontend phase 14

client/src/layout/CustomerLayout.tsx

@@ -1,8 +1,11 @@
 'use client';
 import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
 import { Box, Stack } from '@mui/material';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
 import { ErrorBoundary } from '@/components';
+import AppIconButton from '@/components/common/AppIconButton';
+import { NotificationBell } from '@/components/notifications';
 import { CONTENT_MAX_WIDTH } from '@/components/config';
 import { ROUTES } from '@/constants';
 import { LinkToPage } from '@/utils';
@@ -13,14 +16,17 @@ import { TOP_BAR_DESKTOP_HEIGHT, TOP_BAR_MOBILE_HEIGHT } from './config';
 
 /**
  * Customer (family) app shell — the primary, mobile-first experience.
- * A slim TopBar, a scrollable content column constrained to reading width, and the
- * 5-tab BottomBar (Home/Bookings/Patients/Wallet/Profile) from the wireframe.
+ * A slim TopBar (a "Support / My Tickets" action at the start, the notification bell + dark-mode toggle at
+ * the end), a scrollable content column constrained to reading width, and the 5-tab BottomBar
+ * (Home/Bookings/Patients/Wallet/Profile) from the wireframe.
  * @layout CustomerLayout
  */
 const CustomerLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
   const t = useTranslations('nav');
   const tShell = useTranslations('shell');
   const onMobile = useIsMobile();
+  const router = useRouter();
+  const locale = useLocale();
 
   const bottomNavItems: Array<LinkToPage> = useMemo(
     () => [
@@ -36,7 +42,23 @@ const CustomerLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
   return (
     <Stack sx={{ height: '100dvh' }}>
       <Stack component="header">
-        <TopBar title={tShell('customer_app')} endNode={<DarkModeToggleButton />} />
+        <TopBar
+          title={tShell('customer_app')}
+          startNode={
+            <AppIconButton
+              icon="support"
+              color="inherit"
+              title={t('support')}
+              onClick={() => router.push(`/${locale}${ROUTES.SUPPORT_TICKETS}`)}
+            />
+          }
+          endNode={
+            <Stack direction="row" sx={{ alignItems: 'center' }}>
+              <NotificationBell role="customer" />
+              <DarkModeToggleButton />
+            </Stack>
+          }
+        />
       </Stack>
 
       <Box