diff --git a/apps/web/src/apps/index.tsx b/apps/web/src/apps/index.tsx index f33e854..e5d1f68 100644 --- a/apps/web/src/apps/index.tsx +++ b/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 ( + + ); +} + +function ForbiddenPage() { + const { t } = useTranslation(); + return ( + + ); +} + +function MaintenancePage() { + const { t } = useTranslation(); + return ( + + ); +} + +function ComingSoonPage() { + const { t } = useTranslation(); + return ( + + ); +} + const router = createBrowserRouter([ { path: '/auth/*', element: }, { path: '/app/*', element: }, - { path: '/404', element: }, - { path: '/403', element: }, - { path: '/maintenance', element: }, - { path: '/coming-soon', element: }, + { path: '/404', element: }, + { path: '/403', element: }, + { path: '/maintenance', element: }, + { path: '/coming-soon', element: }, { path: '/', element: }, { path: '*', element: }, ]); diff --git a/packages/core-i18n/src/languages/en/common.json b/packages/core-i18n/src/languages/en/common.json index 1250e39..e020d1c 100644 --- a/packages/core-i18n/src/languages/en/common.json +++ b/packages/core-i18n/src/languages/en/common.json @@ -195,6 +195,32 @@ "endDate": "End Date", "attachment": "Attachment", "reference": "Reference" + }, + "systemPages": { + "comingSoon": { + "title": "Coming Soon", + "heading": "Feature in Progress", + "description": "This feature is currently under development. Stay tuned! We'll have it ready for you very soon." + }, + "forbidden": { + "title": "403 Error", + "heading": "Access Denied", + "description": "Sorry, you don’t have permission to access this page. Please contact your administrator if you believe this is a mistake." + }, + "maintenance": { + "title": "Maintenance", + "heading": "We'll Be Back Soon", + "description": "Our system is currently undergoing scheduled maintenance. We are working hard to bring it back online as soon as possible." + }, + "notFound": { + "title": "404 Error", + "heading": "Page Not Found", + "description": "Sorry, the page you’re looking for doesn’t exist or has been moved." + }, + "actions": { + "backToHome": "Back to Home", + "goBack": "Go Back" + } } } } \ No newline at end of file diff --git a/packages/core-i18n/src/languages/id/common.json b/packages/core-i18n/src/languages/id/common.json index dcf64f3..8722b2a 100644 --- a/packages/core-i18n/src/languages/id/common.json +++ b/packages/core-i18n/src/languages/id/common.json @@ -195,6 +195,32 @@ "endDate": "Tanggal Selesai", "attachment": "Lampiran", "reference": "Referensi" + }, + "systemPages": { + "comingSoon": { + "title": "Segera Hadir", + "heading": "Fitur dalam Pengembangan", + "description": "Fitur ini sedang dalam tahap pengembangan. Tetap ikuti pembaruannya! Kami akan segera menyiapkannya untuk Anda." + }, + "forbidden": { + "title": "Error 403", + "heading": "Akses Ditolak", + "description": "Maaf, Anda tidak memiliki izin untuk mengakses halaman ini. Silakan hubungi administrator jika Anda merasa ini adalah kesalahan." + }, + "maintenance": { + "title": "Pemeliharaan", + "heading": "Kami Akan Segera Kembali", + "description": "Sistem kami saat ini sedang menjalani pemeliharaan terjadwal. Kami bekerja keras untuk menghadirkannya kembali sesegera mungkin." + }, + "notFound": { + "title": "Error 404", + "heading": "Halaman Tidak Ditemukan", + "description": "Maaf, halaman yang Anda cari tidak ada atau telah dipindahkan." + }, + "actions": { + "backToHome": "Kembali ke Beranda", + "goBack": "Kembali" + } } } } \ No newline at end of file diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 8f49f24..a282553 100644 --- a/packages/ui/src/components/index.ts +++ b/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'; diff --git a/packages/ui/src/components/system-pages/coming-soon.tsx b/packages/ui/src/components/system-pages/coming-soon.tsx deleted file mode 100644 index e07164a..0000000 --- a/packages/ui/src/components/system-pages/coming-soon.tsx +++ /dev/null @@ -1,34 +0,0 @@ -interface ComingSoonProps { - showActions?: boolean; - height?: StyleProp; -} - -import { Title, Text, Button, Container, Stack, Center, StyleProp } from '@mantine/core'; - -export function ComingSoon({ showActions = false, height = '100vh' }: ComingSoonProps) { - return ( - -
- - - Coming Soon - - - - Feature in Progress - - - - This feature is currently under development. Stay tuned! We'll have it ready for you very soon. - - - {showActions && ( - - )} - -
- - ); -} diff --git a/packages/ui/src/components/system-pages/forbidden.tsx b/packages/ui/src/components/system-pages/forbidden.tsx deleted file mode 100644 index 0644a4b..0000000 --- a/packages/ui/src/components/system-pages/forbidden.tsx +++ /dev/null @@ -1,68 +0,0 @@ -interface ForbiddenProps { - showActionsBack?: boolean; - showActionsHome?: boolean; - onClickGoBack?(): void; - onClickBackToHome?(): void; - homeUrl?: string; - height?: StyleProp; -} - -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 ( - -
- - - 403 Error - - - - Access Denied - - - - Sorry, you don’t have permission to access this page. Please contact your administrator if you believe this - is a mistake. - - - {(showActionsBack || showActionsHome) && ( - - {showActionsBack && ( - - )} - - {showActionsHome && ( - - )} - - )} - -
- - ); -} diff --git a/packages/ui/src/components/system-pages/maintenance.tsx b/packages/ui/src/components/system-pages/maintenance.tsx deleted file mode 100644 index 3619735..0000000 --- a/packages/ui/src/components/system-pages/maintenance.tsx +++ /dev/null @@ -1,35 +0,0 @@ -interface MaintenanceProps { - showActions?: boolean; - height?: StyleProp; -} - -import { Title, Text, Button, Container, Stack, Center, StyleProp } from '@mantine/core'; - -export function Maintenance({ showActions = false, height = '100vh' }: MaintenanceProps) { - return ( - -
- - - Maintenance - - - - We'll Be Back Soon - - - - Our system is currently undergoing scheduled maintenance. We are working hard to bring it back online as - soon as possible. - - - {showActions && ( - - )} - -
- - ); -} diff --git a/packages/ui/src/components/system-pages/not-found.tsx b/packages/ui/src/components/system-pages/status-page.tsx similarity index 58% rename from packages/ui/src/components/system-pages/not-found.tsx rename to packages/ui/src/components/system-pages/status-page.tsx index 38e230e..843095d 100644 --- a/packages/ui/src/components/system-pages/not-found.tsx +++ b/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; -} - 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; +} + +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({
- - 404 Error - + {icon && icon} - - Page Not Found - + {title && ( + + {title} + + )} - - Sorry, the page you’re looking for doesn’t exist or has been moved. - + {heading && ( + + {heading} + + )} + + {description && ( + + {description} + + )} {(showActionsBack || showActionsHome) && ( {showActionsBack && ( )} {showActionsHome && ( )} diff --git a/packages/ui/src/foundations/enterprise-module/providers/module.provider.tsx b/packages/ui/src/foundations/enterprise-module/providers/module.provider.tsx index 8be7d42..1ea0956 100644 --- a/packages/ui/src/foundations/enterprise-module/providers/module.provider.tsx +++ b/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 ; + if (!ALLOW_VIEW) { + return ( + + ); + } return (