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

packages/ui/src/components/index.ts

@@ -2,10 +2,7 @@ export * from '@mantine/core';
 export { List, TypographyStylesProvider } from '@mantine/core';
 
 export * from './Form';
-export * from './system-pages/coming-soon';
-export * from './system-pages/forbidden';
-export * from './system-pages/maintenance';
-export * from './system-pages/not-found';
+export * from './system-pages/status-page';
 export * from './core-app-shell';
 export * from './actions-tools';
 export * from './status-badge';

packages/ui/src/components/system-pages/coming-soon.tsx

@@ -1,34 +0,0 @@
-interface ComingSoonProps {
-  showActions?: boolean;
-  height?: StyleProp<React.CSSProperties['height']>;
-}
-
-import { Title, Text, Button, Container, Stack, Center, StyleProp } from '@mantine/core';
-
-export function ComingSoon({ showActions = false, height = '100vh' }: ComingSoonProps) {
-  return (
-    <Container size="sm" h={height} pos="relative">
-      <Center h="100%">
-        <Stack align="center" ta="center" gap="md">
-          <Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
-            Coming Soon
-          </Text>
-
-          <Title order={1} fw={900} c="brand">
-            Feature in Progress
-          </Title>
-
-          <Text size="md" c="dimmed">
-            This feature is currently under development. Stay tuned! We'll have it ready for you very soon.
-          </Text>
-
-          {showActions && (
-            <Button component="a" href="/" color="brand" size="sm" mt="xl">
-              Back to Home
-            </Button>
-          )}
-        </Stack>
-      </Center>
-    </Container>
-  );
-}

packages/ui/src/components/system-pages/forbidden.tsx

@@ -1,68 +0,0 @@
-interface ForbiddenProps {
-  showActionsBack?: boolean;
-  showActionsHome?: boolean;
-  onClickGoBack?(): void;
-  onClickBackToHome?(): void;
-  homeUrl?: string;
-  height?: StyleProp<React.CSSProperties['height']>;
-}
-
-import { Title, Text, Button, Container, Stack, Group, Center, StyleProp } from '@mantine/core';
-import { useNavigate } from 'react-router-dom';
-
-export function Forbidden({
-  showActionsBack = true,
-  showActionsHome = true,
-  onClickGoBack,
-  onClickBackToHome,
-  homeUrl,
-  height = '100vh',
-}: ForbiddenProps) {
-  const navigate = useNavigate();
-
-  function onBack() {
-    if (onClickGoBack) onClickGoBack();
-    else navigate(-1);
-  }
-
-  function onBackHome() {
-    if (onClickBackToHome) onClickBackToHome();
-    else if (homeUrl) navigate(homeUrl, { replace: true });
-  }
-  return (
-    <Container size="sm" h={height} pos="relative">
-      <Center h="100%">
-        <Stack align="center" ta="center" gap="md">
-          <Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
-            403 Error
-          </Text>
-
-          <Title order={1} fw={900} c="brand">
-            Access Denied
-          </Title>
-
-          <Text size="md" c="dimmed">
-            Sorry, you don’t have permission to access this page. Please contact your administrator if you believe this
-            is a mistake.
-          </Text>
-
-          {(showActionsBack || showActionsHome) && (
-            <Group mt="xl" justify="center">
-              {showActionsBack && (
-                <Button variant="default" size="sm" onClick={onBack}>
-                  Go Back
-                </Button>
-              )}
-
-              {showActionsHome && (
-                <Button color="brand" size="sm" onClick={onBackHome}>
-                  Back to Home
-                </Button>
-              )}
-            </Group>
-          )}
-        </Stack>
-      </Center>
-    </Container>
-  );
-}

packages/ui/src/components/system-pages/maintenance.tsx

@@ -1,35 +0,0 @@
-interface MaintenanceProps {
-  showActions?: boolean;
-  height?: StyleProp<React.CSSProperties['height']>;
-}
-
-import { Title, Text, Button, Container, Stack, Center, StyleProp } from '@mantine/core';
-
-export function Maintenance({ showActions = false, height = '100vh' }: MaintenanceProps) {
-  return (
-    <Container size="sm" h={height} pos="relative">
-      <Center h="100%">
-        <Stack align="center" ta="center" gap="md">
-          <Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
-            Maintenance
-          </Text>
-
-          <Title order={1} fw={900} c="brand">
-            We'll Be Back Soon
-          </Title>
-
-          <Text size="md" c="dimmed">
-            Our system is currently undergoing scheduled maintenance. We are working hard to bring it back online as
-            soon as possible.
-          </Text>
-
-          {showActions && (
-            <Button component="a" href="/" color="brand" size="sm" mt="xl">
-              Back to Home
-            </Button>
-          )}
-        </Stack>
-      </Center>
-    </Container>
-  );
-}

packages/ui/src/components/system-pages/status-page.tsx

@@ -1,23 +1,38 @@
-interface NotFoundProps {
-  showActionsBack?: boolean;
-  showActionsHome?: boolean;
-  onClickGoBack?(): void;
-  onClickBackToHome?(): void;
-  homeUrl?: string;
-  height?: StyleProp<React.CSSProperties['height']>;
-}
-
 import { Title, Text, Button, Container, Stack, Group, Center, StyleProp } from '@mantine/core';
 import { useNavigate } from 'react-router-dom';
 
-export function NotFound({
-  showActionsBack = true,
-  showActionsHome = true,
+export interface StatusPageProps {
+  title?: string;
+  heading?: string;
+  description?: string;
+  icon?: React.ReactNode;
+  
+  showActionsBack?: boolean;
+  backButtonLabel?: string;
+  onClickGoBack?(): void;
+  
+  showActionsHome?: boolean;
+  homeButtonLabel?: string;
+  onClickBackToHome?(): void;
+  homeUrl?: string;
+  
+  height?: StyleProp<React.CSSProperties['height']>;
+}
+
+export function StatusPage({
+  title,
+  heading,
+  description,
+  icon,
+  showActionsBack = false,
+  backButtonLabel,
   onClickGoBack,
+  showActionsHome = false,
+  homeButtonLabel,
   onClickBackToHome,
   homeUrl,
   height = '100vh',
-}: NotFoundProps) {
+}: StatusPageProps) {
   const navigate = useNavigate();
 
   function onBack() {
@@ -34,29 +49,37 @@ export function NotFound({
     <Container size="sm" h={height} pos="relative">
       <Center h="100%">
         <Stack align="center" ta="center" gap="md">
-          <Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
-            404 Error
-          </Text>
+          {icon && icon}
 
-          <Title order={1} fw={900} c="brand">
-            Page Not Found
-          </Title>
+          {title && (
+            <Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
+              {title}
+            </Text>
+          )}
 
-          <Text size="md" c="dimmed">
-            Sorry, the page you’re looking for doesn’t exist or has been moved.
-          </Text>
+          {heading && (
+            <Title order={1} fw={900} c="brand">
+              {heading}
+            </Title>
+          )}
+
+          {description && (
+            <Text size="md" c="dimmed">
+              {description}
+            </Text>
+          )}
 
           {(showActionsBack || showActionsHome) && (
             <Group mt="xl" justify="center">
               {showActionsBack && (
                 <Button variant="default" size="sm" onClick={onBack}>
-                  Go Back
+                  {backButtonLabel || 'Go Back'}
                 </Button>
               )}
 
               {showActionsHome && (
                 <Button color="brand" size="sm" onClick={onBackHome}>
-                  Back to Home
+                  {homeButtonLabel || 'Back to Home'}
                 </Button>
               )}
             </Group>

packages/ui/src/foundations/enterprise-module/providers/module.provider.tsx

@@ -19,7 +19,7 @@ import {
   EnterpriseModalContext,
   EnterpriseTranslationContext,
 } from '../hooks/use-module.context';
-import { Forbidden } from '../../../components';
+import { StatusPage } from '../../../components';
 import { useEnterpriseStorage } from '../hooks/enterprise-storage.context';
 import { defaultPrivileges, noPrivileges } from '../constant';
 
@@ -176,7 +176,19 @@ export function EnterpriseModuleProvider<
 
   const { ALLOW_VIEW } = configSlice.privileges ?? {};
 
-  if (!ALLOW_VIEW) return <Forbidden homeUrl="/app" height={500} />;
+  if (!ALLOW_VIEW) {
+    return (
+      <StatusPage
+        title={t('common:systemPages.forbidden.title')}
+        heading={t('common:systemPages.forbidden.heading')}
+        description={t('common:systemPages.forbidden.description')}
+        showActionsHome
+        homeUrl="/app"
+        homeButtonLabel={t('common:systemPages.actions.backToHome')}
+        height={500}
+      />
+    );
+  }
 
   return (
     <EnterpriseConfigContext.Provider value={configSlice}>