refactor: enhance Settings component structure

(cherry picked from commit 03acea69b130cfdbdc00994c8d9930ad948cb64c)

# Conflicts:
#	frontend/src/components/Settings/Settings.vue

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 class="flex flex-col overflow-y-auto">
-            <div
+            <template v-for="tab in tabs" :key="tab.label">
-              v-if="!tab.hideLabel"
+              <div
-              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"
+                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>
+                <span>{{ __(tab.label) }}</span>
-            <nav class="space-y-1">
+              </div>
-              <SidebarLink
+              <nav class="space-y-1">
-                v-for="i in tab.items"
+                <SidebarLink
-                :icon="i.icon"
+                  v-for="i in tab.items"
-                :label="__(i.label)"
+                  :icon="i.icon"
-                class="w-full"
+                  :label="__(i.label)"
-                :class="
+                  class="w-full"
-                  activeTab?.label == i.label
+                  :class="
-                    ? 'bg-surface-selected shadow-sm hover:bg-surface-selected'
+                    activeTab?.label == i.label
-                    : 'hover:bg-surface-gray-3'
+                      ? 'bg-surface-selected shadow-sm hover:bg-surface-selected'
-                "
+                      : 'hover:bg-surface-gray-3'
-                @click="activeSettingsPage = i.label"
+                  "
-              />
+                  @click="activeSettingsPage = i.label"
-            </nav>
+                />
+              </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 PhoneIcon from '@/components/Icons/PhoneIcon.vue'
@@ -49,11 +54,18 @@ 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'
+<<<<<<< HEAD
+=======
+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'
+>>>>>>> 03acea69 (refactor: enhance Settings component structure)
 import EmailTemplatePage from '@/components/Settings/EmailTemplate/EmailTemplatePage.vue'
 import TelephonySettings from '@/components/Settings/TelephonySettings.vue'
 import EmailConfig from '@/components/Settings/EmailConfig.vue'
@@ -76,7 +88,7 @@ const user = computed(() => getUser() || {})
 const tabs = computed(() => {
   let _tabs = [
     {
-      label: __('Settings'),
+      label: __('Personal Settings'),
       hideLabel: true,
       items: [
         {
@@ -89,12 +101,32 @@ const tabs = computed(() => {
             }),
           component: markRaw(ProfileSettings),
         },
+      ],
+    },
+    {
+      label: __('System Configuration'),
+      items: [
         {
-          label: __('General'),
+          label: __('Forecasting'),
-          icon: 'settings',
+          component: markRaw(ForecastingSettings),
-          component: markRaw(GeneralSettingsPage),
+          icon: TrendingUpDownIcon,
-          condition: () => isManager(),
         },
+        {
+          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',
@@ -107,6 +139,12 @@ const tabs = computed(() => {
           component: markRaw(InviteUserPage),
           condition: () => isManager(),
         },
+      ],
+      condition: () => isManager(),
+    },
+    {
+      label: __('Email Settings'),
+      items: [
         {
           label: __('Email Accounts'),
           icon: Email2Icon,
@@ -118,6 +156,11 @@ const tabs = computed(() => {
           icon: EmailTemplateIcon,
           component: markRaw(EmailTemplatePage),
         },
+      ],
+    },
+    {
+      label: __('Automation & Rules'),
+      items: [
         {
           label: __('Assignment rules'),
           icon: markRaw(h(SettingsIcon2, { class: 'rotate-90' })),
@@ -125,6 +168,17 @@ const tabs = computed(() => {
         },
       ],
     },
+    {
+      label: __('Customization'),
+      items: [
+        {
+          label: __('Home Actions'),
+          component: markRaw(HomeActions),
+          icon: 'home',
+        },
+      ],
+      condition: () => isManager(),
+    },
     {
       label: __('Integrations', null, 'FCRM'),
       items: [