From c9dbe6c204b436f6321311573aadb43601c37d30 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Fri, 3 Jul 2026 16:27:30 +0700
Subject: [PATCH] feat: add system pages for information, notifications, and
 settings with corresponding navigation and i18n support

---
 apps/web/src/apps/modules/index.tsx             |  6 ++++++
 .../layouts/components/header.layout.tsx        |  5 +++--
 .../notifications/notification-dropdown.tsx     |  3 ++-
 .../apps/modules/system/information/index.tsx   | 17 +++++++++++++++++
 .../apps/modules/system/notification/index.tsx  | 17 +++++++++++++++++
 .../src/apps/modules/system/setting/index.tsx   | 17 +++++++++++++++++
 packages/core-i18n/src/locales/en/common.json   |  8 +++++++-
 packages/core-i18n/src/locales/id/common.json   |  8 +++++++-
 8 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/apps/modules/system/information/index.tsx
 create mode 100644 apps/web/src/apps/modules/system/notification/index.tsx
 create mode 100644 apps/web/src/apps/modules/system/setting/index.tsx

diff --git a/apps/web/src/apps/modules/index.tsx b/apps/web/src/apps/modules/index.tsx
index 839c01e..d588af8 100644
--- a/apps/web/src/apps/modules/index.tsx
+++ b/apps/web/src/apps/modules/index.tsx
@@ -3,12 +3,18 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import ModuleLayout from './layouts/module.layout';
 
 const ExampleModule = lazy(() => import('./example'));
+const SystemSetting = lazy(() => import('./system/setting'));
+const SystemInformation = lazy(() => import('./system/information'));
+const SystemNotification = lazy(() => import('./system/notification'));
 
 export default function AppModule() {
   return (
     <ModuleLayout>
       <Routes>
         <Route path="/example/*" element={<ExampleModule />} />
+        <Route path="/system/setting" element={<SystemSetting />} />
+        <Route path="/system/information" element={<SystemInformation />} />
+        <Route path="/system/notifications" element={<SystemNotification />} />
         <Route path="/" element={<Navigate to="/app/example/full-page" replace={true} />} />
         <Route path="*" element={<Navigate to={'/404'} replace={true} />} />
       </Routes>
diff --git a/apps/web/src/apps/modules/layouts/components/header.layout.tsx b/apps/web/src/apps/modules/layouts/components/header.layout.tsx
index 3f9ea43..0a5abb0 100644
--- a/apps/web/src/apps/modules/layouts/components/header.layout.tsx
+++ b/apps/web/src/apps/modules/layouts/components/header.layout.tsx
@@ -14,6 +14,7 @@ import {
 import { Globe, Bell, HelpCircle, Settings, User, Briefcase, LogOut, ChevronDown } from 'lucide-react';
 import { AppStorageKey, secureStorage } from '../../../../core/storage/local';
 import { NotificationDropdown } from './notifications/notification-dropdown';
+import { Link } from 'react-router-dom';
 
 // Dummy user data for preview
 const USER = {
@@ -56,7 +57,7 @@ export default function HeaderLayout() {
 
       {/* 3. RIGHT SECTION (Actions & Profile) */}
       <Group wrap="nowrap" gap="sm">
-        <ActionIcon variant="subtle" color="gray" size="lg" aria-label="Help">
+        <ActionIcon component={Link} to="/app/system/information" variant="subtle" color="gray" size="lg" aria-label="Help">
           <HelpCircle size={18} />
         </ActionIcon>
 
@@ -148,7 +149,7 @@ export default function HeaderLayout() {
 
             {/* Application Section */}
             <Menu.Label>{t('common:application')}</Menu.Label>
-            <Menu.Item leftSection={<Settings size={14} />}>{t('common:settings')}</Menu.Item>
+            <Menu.Item component={Link} to="/app/system/setting" leftSection={<Settings size={14} />}>{t('common:settings')}</Menu.Item>
             <Menu.Item leftSection={<User size={14} />}>{t('common:myProfile')}</Menu.Item>
 
             <Menu.Divider />
diff --git a/apps/web/src/apps/modules/layouts/components/notifications/notification-dropdown.tsx b/apps/web/src/apps/modules/layouts/components/notifications/notification-dropdown.tsx
index c619a83..97b922e 100644
--- a/apps/web/src/apps/modules/layouts/components/notifications/notification-dropdown.tsx
+++ b/apps/web/src/apps/modules/layouts/components/notifications/notification-dropdown.tsx
@@ -14,6 +14,7 @@ import {
   NavLink,
 } from '@repo/ui/components';
 import { BellOff } from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 interface NotificationItem {
   id: string;
@@ -137,7 +138,7 @@ export function NotificationDropdown({ children }: NotificationDropdownProps) {
 
         {notifications.length > 0 && (
           <Box p="xs">
-            <Button variant="light" color="gray" fullWidth size="xs" radius="md">
+            <Button component={Link} to="/app/system/notifications" variant="light" color="gray" fullWidth size="xs" radius="md">
               {t('common:viewAll')}
             </Button>
           </Box>
diff --git a/apps/web/src/apps/modules/system/information/index.tsx b/apps/web/src/apps/modules/system/information/index.tsx
new file mode 100644
index 0000000..a803ea3
--- /dev/null
+++ b/apps/web/src/apps/modules/system/information/index.tsx
@@ -0,0 +1,17 @@
+import { Container, Paper, Title, Text } from '@repo/ui/components';
+import { useTranslation } from '@repo/core-i18n';
+
+export default function InformationPage() {
+  const { t } = useTranslation();
+
+  return (
+    <Container fluid p="md">
+      <Paper shadow="sm" p="md" radius="md">
+        <Title order={2} mb="xs">
+          {t('common:systemInformation')}
+        </Title>
+        <Text c="dimmed">{t('common:systemInformationDesc')}</Text>
+      </Paper>
+    </Container>
+  );
+}
diff --git a/apps/web/src/apps/modules/system/notification/index.tsx b/apps/web/src/apps/modules/system/notification/index.tsx
new file mode 100644
index 0000000..cd23740
--- /dev/null
+++ b/apps/web/src/apps/modules/system/notification/index.tsx
@@ -0,0 +1,17 @@
+import { Container, Paper, Title, Text } from '@repo/ui/components';
+import { useTranslation } from '@repo/core-i18n';
+
+export default function NotificationPage() {
+  const { t } = useTranslation();
+
+  return (
+    <Container fluid p="md">
+      <Paper shadow="sm" p="md" radius="md">
+        <Title order={2} mb="xs">
+          {t('common:systemNotifications')}
+        </Title>
+        <Text c="dimmed">{t('common:systemNotificationsDesc')}</Text>
+      </Paper>
+    </Container>
+  );
+}
diff --git a/apps/web/src/apps/modules/system/setting/index.tsx b/apps/web/src/apps/modules/system/setting/index.tsx
new file mode 100644
index 0000000..9df8096
--- /dev/null
+++ b/apps/web/src/apps/modules/system/setting/index.tsx
@@ -0,0 +1,17 @@
+import { Container, Paper, Title, Text } from '@repo/ui/components';
+import { useTranslation } from '@repo/core-i18n';
+
+export default function ConfigurationPage() {
+  const { t } = useTranslation();
+
+  return (
+    <Container fluid p="md">
+      <Paper shadow="sm" p="md" radius="md">
+        <Title order={2} mb="xs">
+          {t('common:configuration')}
+        </Title>
+        <Text c="dimmed">{t('common:configurationDesc')}</Text>
+      </Paper>
+    </Container>
+  );
+}
diff --git a/packages/core-i18n/src/locales/en/common.json b/packages/core-i18n/src/locales/en/common.json
index e12b59d..9e88c68 100644
--- a/packages/core-i18n/src/locales/en/common.json
+++ b/packages/core-i18n/src/locales/en/common.json
@@ -26,6 +26,12 @@
     "viewAll": "View all notifications",
     "emptyState": "No new notifications",
     "justNow": "Just now",
-    "hoursAgo": "hours ago"
+    "hoursAgo": "hours ago",
+    "configuration": "System Configuration",
+    "configurationDesc": "Manage your system settings and preferences here.",
+    "systemInformation": "System Information",
+    "systemInformationDesc": "View details about the system version and status.",
+    "systemNotifications": "All Notifications",
+    "systemNotificationsDesc": "View and manage all system notifications."
   }
 }
\ No newline at end of file
diff --git a/packages/core-i18n/src/locales/id/common.json b/packages/core-i18n/src/locales/id/common.json
index 100049d..0e90c76 100644
--- a/packages/core-i18n/src/locales/id/common.json
+++ b/packages/core-i18n/src/locales/id/common.json
@@ -26,6 +26,12 @@
     "viewAll": "Lihat semua notifikasi",
     "emptyState": "Tidak ada notifikasi baru",
     "justNow": "Baru saja",
-    "hoursAgo": "jam lalu"
+    "hoursAgo": "jam lalu",
+    "configuration": "Konfigurasi Sistem",
+    "configurationDesc": "Kelola pengaturan dan preferensi sistem Anda di sini.",
+    "systemInformation": "Informasi Sistem",
+    "systemInformationDesc": "Lihat detail tentang versi dan status sistem.",
+    "systemNotifications": "Semua Notifikasi",
+    "systemNotificationsDesc": "Lihat dan kelola semua notifikasi sistem."
   }
 }
\ No newline at end of file