From 2c8c9d22b4b8ea0aef7c7acecba746144d5b1759 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Fri, 31 Jul 2026 11:49:09 +0700
Subject: [PATCH] refactor: standardize theme colors, update UI components, and
 refine auth redirection logic

---
 .../layouts/components/bookmark/index.tsx     | 10 +--
 .../layouts/components/header.layout.tsx      |  8 +-
 .../layouts/components/history/index.tsx      | 14 ++--
 .../notifications/notification-dropdown.tsx   |  9 +-
 .../src/apps/modules/system/setting/index.tsx |  2 +-
 apps/web/src/core/lib/auth.helper.ts          | 22 +++--
 .../core-i18n/src/languages/id/common.json    |  4 +-
 .../providers/form-page.provider.tsx          |  6 +-
 packages/ui/src/provider/theme-provider.tsx   |  8 +-
 packages/ui/src/theme/tokens/colors.ts        | 82 +++++++++----------
 10 files changed, 95 insertions(+), 70 deletions(-)

diff --git a/apps/web/src/apps/modules/layouts/components/bookmark/index.tsx b/apps/web/src/apps/modules/layouts/components/bookmark/index.tsx
index 4015ee1..93e8a2b 100644
--- a/apps/web/src/apps/modules/layouts/components/bookmark/index.tsx
+++ b/apps/web/src/apps/modules/layouts/components/bookmark/index.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { Drawer, Text, Stack, NavLink, ThemeIcon, ActionIcon, ScrollArea, Group } from '@repo/ui/components';
 import { useAppEvent } from '@repo/core-events';
 import { useTranslation } from '@repo/core-i18n';
-import { Bookmark, Trash2 } from 'lucide-react';
+import { Bookmark, Trash } from 'lucide-react';
 import { LAYOUT_EVENTS } from '../../../../../core/constants/events';
 import { appDatabase, AppDatabaseKey } from '../../../../../core/storage/local';
 import { Link } from 'react-router-dom';
@@ -85,11 +85,11 @@ export function BookmarkDrawer() {
           <Group justify="flex-end" px="md" py="xs">
             <Text
               size="xs"
-              c="red"
+              c="var(--mantine-color-error-6)"
               style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '4px' }}
               onClick={handleClearAll}
             >
-              <Trash2 size={12} /> {t('bookmark:clearAll')}
+              <Trash size={12} /> {t('bookmark:clearAll')}
             </Text>
           </Group>
           <ScrollArea flex={1} type="scroll" px="xs" py="xs" pb={'xl'}>
@@ -120,7 +120,7 @@ export function BookmarkDrawer() {
                   rightSection={
                     <ActionIcon
                       variant="subtle"
-                      color="red"
+                      color="var(--mantine-color-error-6)"
                       size="sm"
                       onClick={(e) => {
                         e.preventDefault();
@@ -128,7 +128,7 @@ export function BookmarkDrawer() {
                       }}
                       aria-label={t('bookmark:removeItem')}
                     >
-                      <Trash2 size={14} />
+                      <Trash size={14} />
                     </ActionIcon>
                   }
                   styles={{
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 db52533..b4223a3 100644
--- a/apps/web/src/apps/modules/layouts/components/header.layout.tsx
+++ b/apps/web/src/apps/modules/layouts/components/header.layout.tsx
@@ -63,7 +63,7 @@ export default function HeaderLayout() {
               {t('common:cancel')}
             </Button>
             <Button
-              color="red"
+              color="var(--mantine-color-error-6)"
               size="xs"
               onClick={() => {
                 modals.close('logout-confirmation');
@@ -237,7 +237,11 @@ export default function HeaderLayout() {
             <Menu.Divider />
 
             {/* Sign Out Section */}
-            <Menu.Item color="red" leftSection={<LogOut size={14} />} onClick={() => handleLogout()}>
+            <Menu.Item
+              color="var(--mantine-color-error-6)"
+              leftSection={<LogOut size={14} />}
+              onClick={() => handleLogout()}
+            >
               {t('common:signOut')}
             </Menu.Item>
           </Menu.Dropdown>
diff --git a/apps/web/src/apps/modules/layouts/components/history/index.tsx b/apps/web/src/apps/modules/layouts/components/history/index.tsx
index 88b051e..271f446 100644
--- a/apps/web/src/apps/modules/layouts/components/history/index.tsx
+++ b/apps/web/src/apps/modules/layouts/components/history/index.tsx
@@ -13,7 +13,7 @@ import {
 } from '@repo/ui/components';
 import { useAppEvent } from '@repo/core-events';
 import { useTranslation } from '@repo/core-i18n';
-import { History, Clock, Trash2 } from 'lucide-react';
+import { History, Clock, Trash } from 'lucide-react';
 import { LAYOUT_EVENTS } from '../../../../../core/constants/events';
 import { appDatabase, AppDatabaseKey } from '../../../../../core/storage/local';
 import { Link } from 'react-router-dom';
@@ -129,7 +129,7 @@ export function HistoryDrawer() {
               <Menu.Target>
                 <UnstyledButton>
                   <Group gap={6} c="dimmed" style={{ transition: 'color 0.2s' }}>
-                    <Trash2 size={14} />
+                    <Trash size={14} />
                     <Text size="xs" fw={500} style={{ cursor: 'pointer' }}>
                       {t('history:clearRange')}
                     </Text>
@@ -142,7 +142,11 @@ export function HistoryDrawer() {
                 <Menu.Item onClick={() => handleClearRange('lastHour')}>{t('history:ranges.lastHour')}</Menu.Item>
                 <Menu.Item onClick={() => handleClearRange('today')}>{t('history:ranges.today')}</Menu.Item>
                 <Menu.Divider />
-                <Menu.Item color="red" leftSection={<Trash2 size={14} />} onClick={() => handleClearRange('allTime')}>
+                <Menu.Item
+                  color="var(--mantine-color-error-6)"
+                  leftSection={<Trash size={14} />}
+                  onClick={() => handleClearRange('allTime')}
+                >
                   {t('history:ranges.allTime')}
                 </Menu.Item>
               </Menu.Dropdown>
@@ -177,7 +181,7 @@ export function HistoryDrawer() {
                   rightSection={
                     <ActionIcon
                       variant="subtle"
-                      color="red"
+                      color="var(--mantine-color-error-6)"
                       size="sm"
                       onClick={(e) => {
                         e.preventDefault();
@@ -185,7 +189,7 @@ export function HistoryDrawer() {
                       }}
                       aria-label={t('history:removeItem')}
                     >
-                      <Trash2 size={14} />
+                      <Trash size={14} />
                     </ActionIcon>
                   }
                   styles={{
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 42f3492..f644280 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
@@ -67,7 +67,14 @@ export function NotificationDropdown({ children }: NotificationDropdownProps) {
       <Popover.Target>
         {/* Trigger wrapped around the Bell icon */}
         <Box onClick={() => setOpened((o) => !o)} style={{ cursor: 'pointer' }}>
-          <Indicator inline size={9} offset={4} color="red" withBorder disabled={unreadCount === 0}>
+          <Indicator
+            inline
+            size={9}
+            offset={4}
+            color="var(--mantine-color-error-6)"
+            withBorder
+            disabled={unreadCount === 0}
+          >
             {children}
           </Indicator>
         </Box>
diff --git a/apps/web/src/apps/modules/system/setting/index.tsx b/apps/web/src/apps/modules/system/setting/index.tsx
index 8b5a2a6..63300be 100644
--- a/apps/web/src/apps/modules/system/setting/index.tsx
+++ b/apps/web/src/apps/modules/system/setting/index.tsx
@@ -99,7 +99,7 @@ export default function SettingPage() {
           <Button variant="default" onClick={handleCancelSwitch}>
             {t('setting:unsaved.cancel')}
           </Button>
-          <Button color="red" onClick={handleDiscardChanges}>
+          <Button color="var(--mantine-color-error-6)" onClick={handleDiscardChanges}>
             {t('setting:unsaved.discard')}
           </Button>
         </Group>
diff --git a/apps/web/src/core/lib/auth.helper.ts b/apps/web/src/core/lib/auth.helper.ts
index ce0fd41..20c81a5 100644
--- a/apps/web/src/core/lib/auth.helper.ts
+++ b/apps/web/src/core/lib/auth.helper.ts
@@ -25,15 +25,21 @@ export async function terminateAuthSession(options: TerminateOptions = {}) {
    */
   let loginUrl = '/auth/login';
 
-  if (preserveRedirect) {
-    const currentPath = window.location.pathname + window.location.search;
-    loginUrl += `?redirect=${encodeURIComponent(currentPath)}`;
-  }
+  // Check if the current page is NOT the login page
+  const isNotLoginPage = !window.location.pathname.includes('/auth/login');
 
-  /**
-   * Redirect without saving history to prevent infinite back-loops
-   */
-  window.location.replace(loginUrl);
+  if (isNotLoginPage) {
+    // Set redirect parameters only if requested AND the user is not currently on the login page
+    if (preserveRedirect) {
+      const currentPath = window.location.pathname + window.location.search;
+      loginUrl += `?redirect=${encodeURIComponent(currentPath)}`;
+    }
+
+    /**
+     * Redirect without saving history to prevent infinite back-loops
+     */
+    window.location.replace(loginUrl);
+  }
 }
 
 export async function initiateAuthSession(respLogin: any) {
diff --git a/packages/core-i18n/src/languages/id/common.json b/packages/core-i18n/src/languages/id/common.json
index 493fb98..dcf64f3 100644
--- a/packages/core-i18n/src/languages/id/common.json
+++ b/packages/core-i18n/src/languages/id/common.json
@@ -3,7 +3,7 @@
     "save": "Simpan",
     "cancel": "Batal",
     "success": "Sukses",
-    "error": "Galat",
+    "error": "Error",
     "settings": "Pengaturan",
     "loading": "Memuat",
     "delete": "Hapus",
@@ -144,7 +144,7 @@
     },
     "notifications": {
       "successTitle": "Berhasil",
-      "errorTitle": "Galat",
+      "errorTitle": "Error",
       "saveSuccess": "Data berhasil disimpan",
       "deleteSuccess": "Data berhasil dihapus",
       "actionSuccess": "{{action}} berhasil diselesaikan",
diff --git a/packages/ui/src/foundations/enterprise-module/providers/form-page.provider.tsx b/packages/ui/src/foundations/enterprise-module/providers/form-page.provider.tsx
index 6282809..6a16cb3 100644
--- a/packages/ui/src/foundations/enterprise-module/providers/form-page.provider.tsx
+++ b/packages/ui/src/foundations/enterprise-module/providers/form-page.provider.tsx
@@ -188,7 +188,7 @@ export function EnterpriseFormPageProvider<E extends BaseEntity = BaseEntity>(pr
         notifications.show({
           title: t('common:notifications.errorTitle'),
           message: message ?? error?.message,
-          color: 'red',
+          color: 'var(--mantine-color-error-6)',
         });
       } finally {
         setIsLoading(false);
@@ -250,7 +250,7 @@ export function EnterpriseFormPageProvider<E extends BaseEntity = BaseEntity>(pr
         notifications.show({
           title: t('common:notifications.errorTitle'),
           message: message ?? error?.message,
-          color: 'red',
+          color: 'var(--mantine-color-error-6)',
         });
       } finally {
         setIsSaving(false);
@@ -355,7 +355,7 @@ export function EnterpriseFormPageProvider<E extends BaseEntity = BaseEntity>(pr
                 {t('common:confirmDialog.leave.cancel')}
               </Button>
               <Button
-                color="red"
+                color="var(--mantine-color-error-6)"
                 size="xs"
                 onClick={() => {
                   actionTaken = true;
diff --git a/packages/ui/src/provider/theme-provider.tsx b/packages/ui/src/provider/theme-provider.tsx
index 107ea26..bf3a658 100644
--- a/packages/ui/src/provider/theme-provider.tsx
+++ b/packages/ui/src/provider/theme-provider.tsx
@@ -35,11 +35,17 @@ export function ThemeProvider({ children, colorScheme = 'light', density = 'comp
     black: '#1A1B1E',
     colors: {
       brand: brandColors,
+      dark: darkColors,
+
       error: errorColors,
       warning: warningColors,
       success: successColors,
       info: infoColors,
-      dark: darkColors,
+
+      red: errorColors,
+      yellow: warningColors,
+      green: successColors,
+      blue: infoColors,
     },
     primaryColor: 'brand',
     fontFamily: typography.fontFamily,
diff --git a/packages/ui/src/theme/tokens/colors.ts b/packages/ui/src/theme/tokens/colors.ts
index 2834b7f..bc554a5 100644
--- a/packages/ui/src/theme/tokens/colors.ts
+++ b/packages/ui/src/theme/tokens/colors.ts
@@ -12,57 +12,56 @@ export const brandColors: MantineColorsTuple = [
   '#321a7a', // 800
   '#1b0f4a', // 900
 ];
-
 export const errorColors: MantineColorsTuple = [
-  '#fef2f2',
-  '#fee2e2',
-  '#fecaca',
-  '#fca5a5',
-  '#f87171',
-  '#ef4444',
-  '#dc2626',
-  '#b91c1c',
-  '#991b1b',
-  '#7f1d1d',
+  '#fef3f2', // 0: 50
+  '#fee4e2', // 1: 100
+  '#fecdca', // 2: 200
+  '#fda29b', // 3: 300
+  '#f97066', // 4: 400
+  '#f04438', // 5: 500
+  '#d92d20', // 6: 600 (Primary)
+  '#b42318', // 7: 700
+  '#912018', // 8: 800
+  '#7a271a', // 9: 900
 ];
 
 export const warningColors: MantineColorsTuple = [
-  '#fffbeb',
-  '#fef3c7',
-  '#fde68a',
-  '#fcd34d',
-  '#fbbf24',
-  '#f59e0b',
-  '#d97706',
-  '#b45309',
-  '#92400e',
-  '#78350f',
+  '#fffdf5', // 0: 50
+  '#fff9db', // 1: 100
+  '#fff0b3', // 2: 200
+  '#ffe480', // 3: 300
+  '#ffd64d', // 4: 400
+  '#ffc71a', // 5: 500
+  '#ffb800', // 6: 600 (Primary)
+  '#d19200', // 7: 700
+  '#a67000', // 8: 800
+  '#7a5000', // 9: 900
 ];
 
 export const successColors: MantineColorsTuple = [
-  '#f0fdf4',
-  '#dcfce7',
-  '#bbf7d0',
-  '#86efac',
-  '#4ade80',
-  '#22c55e',
-  '#16a34a',
-  '#15803d',
-  '#166534',
-  '#14532d',
+  '#f3fcf0', // 0: 50
+  '#e3f8dc', // 1: 100
+  '#c6f0b7', // 2: 200
+  '#a0e589', // 3: 300
+  '#7bd760', // 4: 400
+  '#5ace3c', // 5: 500
+  '#3ec300', // 6: 600 (Primary)
+  '#309b00', // 7: 700
+  '#267b00', // 8: 800
+  '#206505', // 9: 900
 ];
 
 export const infoColors: MantineColorsTuple = [
-  '#f0f9ff',
-  '#e0f2fe',
-  '#bae6fd',
-  '#7dd3fc',
-  '#38bdf8',
-  '#0ea5e9',
-  '#0284c7',
-  '#0369a1',
-  '#075985',
-  '#0c4a6e',
+  '#eef7ff', // 0: 50
+  '#d9efff', // 1: 100
+  '#b0ddff', // 2: 200
+  '#82c9ff', // 3: 300
+  '#54b5ff', // 4: 400
+  '#26a1ff', // 5: 500
+  '#0094ff', // 6: 600 (Primary)
+  '#0079d6', // 7: 700
+  '#0060ad', // 8: 800
+  '#004b87', // 9: 900
 ];
 
 export const grayColors: MantineColorsTuple = [
@@ -104,4 +103,3 @@ export const darkColors: MantineColorsTuple = [
   '#151828', // 8  – Deep background (sidebar, nav)
   '#0F1120', // 9  – Deepest background
 ];
-