refactor: consolidate individual system pages into a single reusable StatusPage component

apps/web/src/apps/index.tsx

@@ -1,7 +1,8 @@
 import { lazy, Suspense, useEffect } from 'react';
 import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
 import { ThemeProvider } from '@repo/ui/provider';
-import { NotFound, Forbidden, Maintenance, ComingSoon, AgGridProvider } from '@repo/ui/components';
+import { StatusPage, AgGridProvider } from '@repo/ui/components';
+import { useTranslation } from '@repo/core-i18n';
 import { LoadingScreen } from '../core/components/loading-screen';
 import { useThemeStore } from '../core/stores/theme.store';
 import { initializeAndPurgeHistoryBackground } from './main/layouts/hooks/useHistoryTracker';
@@ -9,13 +10,67 @@ import { initializeAndPurgeHistoryBackground } from './main/layouts/hooks/useHis
 const AuthModule = lazy(() => import('./auth'));
 const AppModule = lazy(() => import('./main'));
 
+function NotFoundPage() {
+  const { t } = useTranslation();
+  return (
+    <StatusPage
+      title={t('common:systemPages.notFound.title')}
+      heading={t('common:systemPages.notFound.heading')}
+      description={t('common:systemPages.notFound.description')}
+      showActionsBack
+      showActionsHome
+      homeUrl="/app"
+      backButtonLabel={t('common:systemPages.actions.goBack')}
+      homeButtonLabel={t('common:systemPages.actions.backToHome')}
+    />
+  );
+}
+
+function ForbiddenPage() {
+  const { t } = useTranslation();
+  return (
+    <StatusPage
+      title={t('common:systemPages.forbidden.title')}
+      heading={t('common:systemPages.forbidden.heading')}
+      description={t('common:systemPages.forbidden.description')}
+      showActionsBack
+      showActionsHome
+      homeUrl="/app"
+      backButtonLabel={t('common:systemPages.actions.goBack')}
+      homeButtonLabel={t('common:systemPages.actions.backToHome')}
+    />
+  );
+}
+
+function MaintenancePage() {
+  const { t } = useTranslation();
+  return (
+    <StatusPage
+      title={t('common:systemPages.maintenance.title')}
+      heading={t('common:systemPages.maintenance.heading')}
+      description={t('common:systemPages.maintenance.description')}
+    />
+  );
+}
+
+function ComingSoonPage() {
+  const { t } = useTranslation();
+  return (
+    <StatusPage
+      title={t('common:systemPages.comingSoon.title')}
+      heading={t('common:systemPages.comingSoon.heading')}
+      description={t('common:systemPages.comingSoon.description')}
+    />
+  );
+}
+
 const router = createBrowserRouter([
   { path: '/auth/*', element: <AuthModule /> },
   { path: '/app/*', element: <AppModule /> },
-  { path: '/404', element: <NotFound homeUrl="/app" /> },
-  { path: '/403', element: <Forbidden homeUrl="/app" /> },
-  { path: '/maintenance', element: <Maintenance /> },
-  { path: '/coming-soon', element: <ComingSoon /> },
+  { path: '/404', element: <NotFoundPage /> },
+  { path: '/403', element: <ForbiddenPage /> },
+  { path: '/maintenance', element: <MaintenancePage /> },
+  { path: '/coming-soon', element: <ComingSoonPage /> },
   { path: '/', element: <Navigate to="/app" /> },
   { path: '*', element: <Navigate to="/404" /> },
 ]);