ui phase 1

client/src/layout/CustomerLayout.tsx

@@ -24,6 +24,7 @@ import { TOP_BAR_DESKTOP_HEIGHT, TOP_BAR_MOBILE_HEIGHT } from './config';
 const CustomerLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
   const t = useTranslations('nav');
   const tShell = useTranslations('shell');
+  const tChrome = useTranslations('routeChrome');
   const onMobile = useIsMobile();
   const router = useRouter();
   const locale = useLocale();
@@ -75,7 +76,14 @@ const CustomerLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
           pt: `calc(${onMobile ? TOP_BAR_MOBILE_HEIGHT : TOP_BAR_DESKTOP_HEIGHT} + 8px)`,
         }}
       >
-        <ErrorBoundary name="Customer">{children}</ErrorBoundary>
+        <ErrorBoundary
+          name="Customer"
+          title={tChrome('error_title')}
+          body={tChrome('error_body')}
+          retryLabel={tChrome('error_retry')}
+        >
+          {children}
+        </ErrorBoundary>
       </Box>
 
       <BottomBar items={bottomNavItems} />

client/src/layout/TopBarAndSideBarLayout.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { FunctionComponent, ReactNode, useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { Stack, StackProps } from '@mui/material';
 import { AppIconButton, ErrorBoundary } from '@/components';
 import { LinkToPage } from '@/utils';
@@ -24,6 +25,7 @@ interface Props extends StackProps {
 }
 
 const TopBarAndSideBarLayout: FunctionComponent<Props> = ({ children, sidebarItems, title, variant, headerActions }) => {
+  const tChrome = useTranslations('routeChrome');
   const [sidebarVisible, setSidebarVisible] = useState(false);
   const onMobile = useIsMobile();
 
@@ -101,7 +103,14 @@ const TopBarAndSideBarLayout: FunctionComponent<Props> = ({ children, sidebarIte
         component="main"
         sx={{ flexGrow: 1, justifyContent: 'space-between', paddingLeft: 1, paddingRight: 1, paddingTop: 1 }}
       >
-        <ErrorBoundary name="Content">{children}</ErrorBoundary>
+        <ErrorBoundary
+          name="Content"
+          title={tChrome('error_title')}
+          body={tChrome('error_body')}
+          retryLabel={tChrome('error_retry')}
+        >
+          {children}
+        </ErrorBoundary>
       </Stack>
     </Stack>
   );