From 03acea69b130cfdbdc00994c8d9930ad948cb64c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 16 Sep 2025 17:14:58 +0530
Subject: [PATCH] refactor: enhance Settings component structure

---
 frontend/src/components/Settings/Settings.vue | 104 +++++++++++++-----
 1 file changed, 77 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Settings/Settings.vue b/frontend/src/components/Settings/Settings.vue
index f896184a..755fea4c 100644
--- a/frontend/src/components/Settings/Settings.vue
+++ b/frontend/src/components/Settings/Settings.vue
@@ -11,27 +11,29 @@
           <h1 class="px-2 pt-2 mb-3 text-lg font-semibold text-ink-gray-8">
             {{ __('Settings') }}
           </h1>
-          <div v-for="tab in tabs">
-            <div
-              v-if="!tab.hideLabel"
-              class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-ink-gray-5 transition-all duration-300 ease-in-out"
-            >
-              <span>{{ __(tab.label) }}</span>
-            </div>
-            <nav class="space-y-1">
-              <SidebarLink
-                v-for="i in tab.items"
-                :icon="i.icon"
-                :label="__(i.label)"
-                class="w-full"
-                :class="
-                  activeTab?.label == i.label
-                    ? 'bg-surface-selected shadow-sm hover:bg-surface-selected'
-                    : 'hover:bg-surface-gray-3'
-                "
-                @click="activeSettingsPage = i.label"
-              />
-            </nav>
+          <div class="flex flex-col overflow-y-auto">
+            <template v-for="tab in tabs" :key="tab.label">
+              <div
+                v-if="!tab.hideLabel"
+                class="py-[7px] px-1 my-1 flex cursor-pointer gap-1.5 text-base text-ink-gray-5 transition-all duration-300 ease-in-out"
+              >
+                <span>{{ __(tab.label) }}</span>
+              </div>
+              <nav class="space-y-1">
+                <SidebarLink
+                  v-for="i in tab.items"
+                  :icon="i.icon"
+                  :label="__(i.label)"
+                  class="w-full"
+                  :class="
+                    activeTab?.label == i.label
+                      ? 'bg-surface-selected shadow-sm hover:bg-surface-selected'
+                      : 'hover:bg-surface-gray-3'
+                  "
+                  @click="activeSettingsPage = i.label"
+                />
+              </nav>
+            </template>
           </div>
         </div>
         <div class="flex flex-col flex-1 overflow-y-auto bg-surface-modal">
@@ -42,6 +44,9 @@
   </Dialog>
 </template>
 <script setup>
+import CircleDollarSignIcon from '~icons/lucide/circle-dollar-sign'
+import TrendingUpDownIcon from '~icons/lucide/trending-up-down'
+import SparkleIcon from '@/components/Icons/SparkleIcon.vue'
 import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import ERPNextIcon from '@/components/Icons/ERPNextIcon.vue'
 import HelpdeskIcon from '@/components/Icons/HelpdeskIcon.vue'
@@ -50,12 +55,15 @@ import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import EmailTemplateIcon from '@/components/Icons/EmailTemplateIcon.vue'
 import SettingsIcon2 from '@/components/Icons/SettingsIcon2.vue'
 import Users from '@/components/Settings/Users.vue'
-import GeneralSettingsPage from '@/components/Settings/General/GeneralSettingsPage.vue'
 import InviteUserPage from '@/components/Settings/InviteUserPage.vue'
 import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
 import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
 import ERPNextSettings from '@/components/Settings/ERPNextSettings.vue'
 import HelpdeskSettings from '@/components/Settings/HelpdeskSettings.vue'
+import BrandSettings from '@/components/Settings/BrandSettings.vue'
+import HomeActions from '@/components/Settings/HomeActions.vue'
+import ForecastingSettings from '@/components/Settings/ForecastingSettings.vue'
+import CurrencySettings from '@/components/Settings/CurrencySettings.vue'
 import EmailTemplatePage from '@/components/Settings/EmailTemplate/EmailTemplatePage.vue'
 import TelephonySettings from '@/components/Settings/TelephonySettings.vue'
 import EmailConfig from '@/components/Settings/EmailConfig.vue'
@@ -78,7 +86,7 @@ const user = computed(() => getUser() || {})
 const tabs = computed(() => {
   let _tabs = [
     {
-      label: __('Settings'),
+      label: __('Personal Settings'),
       hideLabel: true,
       items: [
         {
@@ -91,12 +99,32 @@ const tabs = computed(() => {
             }),
           component: markRaw(ProfileSettings),
         },
+      ],
+    },
+    {
+      label: __('System Configuration'),
+      items: [
         {
-          label: __('General'),
-          icon: 'settings',
-          component: markRaw(GeneralSettingsPage),
-          condition: () => isManager(),
+          label: __('Forecasting'),
+          component: markRaw(ForecastingSettings),
+          icon: TrendingUpDownIcon,
         },
+        {
+          label: __('Currency & Exchange Rate'),
+          icon: CircleDollarSignIcon,
+          component: markRaw(CurrencySettings),
+        },
+        {
+          label: __('Brand Settings'),
+          icon: SparkleIcon,
+          component: markRaw(BrandSettings),
+        },
+      ],
+      condition: () => isManager(),
+    },
+    {
+      label: __('User Management'),
+      items: [
         {
           label: __('Users'),
           icon: 'user',
@@ -109,6 +137,12 @@ const tabs = computed(() => {
           component: markRaw(InviteUserPage),
           condition: () => isManager(),
         },
+      ],
+      condition: () => isManager(),
+    },
+    {
+      label: __('Email Settings'),
+      items: [
         {
           label: __('Email Accounts'),
           icon: Email2Icon,
@@ -120,6 +154,11 @@ const tabs = computed(() => {
           icon: EmailTemplateIcon,
           component: markRaw(EmailTemplatePage),
         },
+      ],
+    },
+    {
+      label: __('Automation & Rules'),
+      items: [
         {
           label: __('Assignment rules'),
           icon: markRaw(h(SettingsIcon2, { class: 'rotate-90' })),
@@ -127,6 +166,17 @@ const tabs = computed(() => {
         },
       ],
     },
+    {
+      label: __('Customization'),
+      items: [
+        {
+          label: __('Home Actions'),
+          component: markRaw(HomeActions),
+          icon: 'home',
+        },
+      ],
+      condition: () => isManager(),
+    },
     {
       label: __('Integrations', null, 'FCRM'),
       items: [