ui phase 1

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>
   );