From 917f999a7a386727a4d60c38e6bfba5868a8af1d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 27 Dec 2024 21:44:00 +0530
Subject: [PATCH 1/6] fix: added branding related fields in settings

---
 .../doctype/fcrm_settings/fcrm_settings.json  | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/crm/fcrm/doctype/fcrm_settings/fcrm_settings.json b/crm/fcrm/doctype/fcrm_settings/fcrm_settings.json
index 18bcb985..bd5dc4ee 100644
--- a/crm/fcrm/doctype/fcrm_settings/fcrm_settings.json
+++ b/crm/fcrm/doctype/fcrm_settings/fcrm_settings.json
@@ -5,7 +5,13 @@
  "doctype": "DocType",
  "engine": "InnoDB",
  "field_order": [
+  "defaults_tab",
   "restore_defaults",
+  "branding_tab",
+  "brand_name",
+  "brand_logo",
+  "favicon",
+  "dropdown_items_tab",
   "dropdown_items"
  ],
  "fields": [
@@ -17,14 +23,45 @@
   {
    "fieldname": "dropdown_items",
    "fieldtype": "Table",
-   "label": "Dropdown Items",
    "options": "CRM Dropdown Item"
+  },
+  {
+   "fieldname": "defaults_tab",
+   "fieldtype": "Tab Break",
+   "label": "Defaults"
+  },
+  {
+   "fieldname": "branding_tab",
+   "fieldtype": "Tab Break",
+   "label": "Branding"
+  },
+  {
+   "description": "An image with 1:1 ratio is preferred",
+   "fieldname": "brand_logo",
+   "fieldtype": "Attach",
+   "label": "Logo"
+  },
+  {
+   "fieldname": "dropdown_items_tab",
+   "fieldtype": "Tab Break",
+   "label": "Dropdown Items"
+  },
+  {
+   "fieldname": "brand_name",
+   "fieldtype": "Data",
+   "label": "Name"
+  },
+  {
+   "description": "An icon file with .ico extension. Should be 16 x 16 px. Generated using a favicon generator. [favicon-generator.org]",
+   "fieldname": "favicon",
+   "fieldtype": "Attach",
+   "label": "Favicon"
   }
  ],
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2024-12-27 17:47:29.196692",
+ "modified": "2024-12-27 21:16:47.251706",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "FCRM Settings",

From 73f227f76b88242ce4d355a102f03ee8c14ed660 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 27 Dec 2024 21:47:07 +0530
Subject: [PATCH 2/6] fix: created a settings store

---
 frontend/src/stores/settings.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 frontend/src/stores/settings.js

diff --git a/frontend/src/stores/settings.js b/frontend/src/stores/settings.js
new file mode 100644
index 00000000..55675ae2
--- /dev/null
+++ b/frontend/src/stores/settings.js
@@ -0,0 +1,28 @@
+import { createDocumentResource } from 'frappe-ui'
+import { reactive, ref } from 'vue'
+
+const settings = ref({})
+const brand = reactive({})
+
+export function getSettings() {
+  const _settings = createDocumentResource({
+    doctype: 'FCRM Settings',
+    name: 'FCRM Settings',
+    onSuccess: (data) => {
+      settings.value = data
+      brand.name = settings.value?.brand_name
+      brand.logo = settings.value?.brand_logo
+      brand.favicon = settings.value?.favicon
+      return data
+    },
+  })
+
+  if (!settings.value?.length) {
+    _settings.fetch()
+  }
+
+  return {
+    settings,
+    brand,
+  }
+}

From d1220c0c6f03eaa7936cb145a749bd3c72d1f945 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 27 Dec 2024 21:50:50 +0530
Subject: [PATCH 3/6] refactor: use settings store to load dropdown items

---
 frontend/src/components/UserDropdown.vue | 67 ++++++++++++------------
 1 file changed, 34 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 52ac4f80..d7268892 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dropdown :options="dropdownItems.doc || []" v-bind="$attrs">
+  <Dropdown :options="dropdownItems" v-bind="$attrs">
     <template v-slot="{ open }">
       <button
         class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out"
@@ -51,8 +51,9 @@ import CRMLogo from '@/components/Icons/CRMLogo.vue'
 import Apps from '@/components/Apps.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
+import { getSettings } from '@/stores/settings'
 import { showSettings } from '@/composables/settings'
-import { createDocumentResource, Dropdown } from 'frappe-ui'
+import { Dropdown } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
 import { computed, markRaw, onMounted } from 'vue'
 
@@ -63,6 +64,7 @@ const props = defineProps({
   },
 })
 
+const { settings } = getSettings()
 const { logout } = sessionStore()
 const { getUser } = usersStore()
 
@@ -70,46 +72,45 @@ const user = computed(() => getUser() || {})
 
 const theme = useStorage('theme', 'light')
 
-const dropdownItems = createDocumentResource({
-  doctype: 'FCRM Settings',
-  name: 'FCRM Settings',
-  fields: ['dropdown_items'],
-  auto: true,
-  transform: (data) => {
-    let items = data.dropdown_items
+const dropdownItems = computed(() => {
+  if (!settings.value?.dropdown_items) return []
 
-    let _dropdownItems = [
-      {
-        group: 'Dropdown Items',
+  let items = settings.value.dropdown_items
+
+  let _dropdownItems = [
+    {
+      group: 'Dropdown Items',
+      hideLabel: true,
+      items: [],
+    },
+  ]
+
+  items.forEach((item) => {
+    if (item.hidden) return
+    if (item.type !== 'Separator') {
+      _dropdownItems[_dropdownItems.length - 1].items.push(
+        dropdownItemObj(item),
+      )
+    } else {
+      _dropdownItems.push({
+        group: '',
         hideLabel: true,
         items: [],
-      },
-    ]
+      })
+    }
+  })
 
-    items.forEach((item) => {
-      if (item.hidden) return
-      if (item.type !== 'Separator') {
-        _dropdownItems[_dropdownItems.length - 1].items.push(
-          dropdownItemObj(item),
-        )
-      } else {
-        _dropdownItems.push({
-          group: '',
-          hideLabel: true,
-          items: [],
-        })
-      }
-    })
-
-    return _dropdownItems
-  },
+  return _dropdownItems
 })
 
 function dropdownItemObj(item) {
   let openInNewWindow = item.open_in_new_window
 
   let icon = item.icon || 'external-link'
-  item.icon = icon.startsWith('<svg') ? markRaw({ template: icon }) : icon
+  if (typeof icon === 'string' && icon.startsWith('<svg')) {
+    icon = markRaw({ template: icon })
+  }
+  item.icon = icon
 
   if (item.is_standard) {
     return getStandardItem(item)
@@ -142,7 +143,7 @@ function getStandardItem(item) {
       }
     case 'toggle_theme':
       return {
-        icon: computed(() => (theme.value === 'dark' ? 'sun' : item.icon)),
+        icon: theme.value === 'dark' ? 'sun' : item.icon,
         label: __(item.label),
         onClick: toggleTheme,
       }

From 7e949ea78baec397fa09fa94daedb27a9813b384 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 27 Dec 2024 21:52:00 +0530
Subject: [PATCH 4/6] feat: custom brand logo & name

---
 frontend/src/components/BrandLogo.vue    | 12 ++++++++++++
 frontend/src/components/UserDropdown.vue |  8 ++++----
 2 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/BrandLogo.vue

diff --git a/frontend/src/components/BrandLogo.vue b/frontend/src/components/BrandLogo.vue
new file mode 100644
index 00000000..675bc90a
--- /dev/null
+++ b/frontend/src/components/BrandLogo.vue
@@ -0,0 +1,12 @@
+<template>
+  <div v-if="brand?.logo">
+    <img :src="brand.logo" class="h-full w-full object-cover" />
+  </div>
+  <CRMLogo v-else class="size-8 shrink-0 rounded" />
+</template>
+
+<script setup>
+import CRMLogo from '@/components/Icons/CRMLogo.vue'
+
+const brand = defineModel()
+</script>
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index d7268892..b2cc944f 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -11,7 +11,7 @@
               : 'w-52 px-2 hover:bg-surface-gray-3'
         "
       >
-        <CRMLogo class="size-8 flex-shrink-0 rounded" />
+        <BrandLogo v-model="brand" class="size-8 flex-shrink-0" />
         <div
           class="flex flex-1 flex-col text-left duration-300 ease-in-out"
           :class="
@@ -21,7 +21,7 @@
           "
         >
           <div class="text-base font-medium leading-none text-ink-gray-9">
-            {{ __('CRM') }}
+            {{ __(brand.name || 'CRM') }}
           </div>
           <div class="mt-1 text-sm leading-none text-ink-gray-7">
             {{ user.full_name }}
@@ -47,7 +47,7 @@
 </template>
 
 <script setup>
-import CRMLogo from '@/components/Icons/CRMLogo.vue'
+import BrandLogo from '@/components/BrandLogo.vue'
 import Apps from '@/components/Apps.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
@@ -64,7 +64,7 @@ const props = defineProps({
   },
 })
 
-const { settings } = getSettings()
+const { settings, brand } = getSettings()
 const { logout } = sessionStore()
 const { getUser } = usersStore()
 

From ced40e5182a5d4a65751f1378069ebb5dbeb1501 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 27 Dec 2024 21:59:05 +0530
Subject: [PATCH 5/6] fix: removed unnessary code

---
 frontend/src/stores/settings.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/stores/settings.js b/frontend/src/stores/settings.js
index 55675ae2..551a87aa 100644
--- a/frontend/src/stores/settings.js
+++ b/frontend/src/stores/settings.js
@@ -5,7 +5,7 @@ const settings = ref({})
 const brand = reactive({})
 
 export function getSettings() {
-  const _settings = createDocumentResource({
+  createDocumentResource({
     doctype: 'FCRM Settings',
     name: 'FCRM Settings',
     onSuccess: (data) => {
@@ -17,10 +17,6 @@ export function getSettings() {
     },
   })
 
-  if (!settings.value?.length) {
-    _settings.fetch()
-  }
-
   return {
     settings,
     brand,

From 16c3e25c83a411d0c4180aeae7b5c6c2b9bb75cd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 27 Dec 2024 21:59:41 +0530
Subject: [PATCH 6/6] feat: custom favicon

---
 frontend/src/components/ViewControls.vue  |  3 +++
 frontend/src/pages/Contact.vue            |  3 +++
 frontend/src/pages/Deal.vue               |  3 +++
 frontend/src/pages/Lead.vue               |  3 +++
 frontend/src/pages/MobileContact.vue      |  3 +++
 frontend/src/pages/MobileDeal.vue         | 10 ++++++++++
 frontend/src/pages/MobileLead.vue         | 10 ++++++++++
 frontend/src/pages/MobileOrganization.vue |  3 +++
 frontend/src/pages/Organization.vue       |  3 +++
 9 files changed, 41 insertions(+)

diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index eac26611..0ae8c09a 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -224,6 +224,7 @@ import GroupBy from '@/components/GroupBy.vue'
 import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
 import ColumnSettings from '@/components/ColumnSettings.vue'
 import KanbanSettings from '@/components/Kanban/KanbanSettings.vue'
+import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { viewsStore } from '@/stores/views'
 import { usersStore } from '@/stores/users'
@@ -260,6 +261,7 @@ const props = defineProps({
   },
 })
 
+const { brand } = getSettings()
 const { $dialog } = globalStore()
 const { reload: reloadView, getView } = viewsStore()
 const { isManager } = usersStore()
@@ -320,6 +322,7 @@ usePageMeta(() => {
   return {
     title: label,
     emoji: isEmoji(currentView.value.icon) ? currentView.value.icon : '',
+    icon: brand.favicon,
   }
 })
 
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 659f6711..db0fa94a 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -214,6 +214,7 @@ import SidePanelModal from '@/components/Modals/SidePanelModal.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
 import { formatDate, timeAgo, createToast } from '@/utils'
 import { getView } from '@/utils/view'
+import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global.js'
 import { usersStore } from '@/stores/users.js'
@@ -233,6 +234,7 @@ import {
 import { ref, computed, h } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+const { brand } = getSettings()
 const { $dialog, makeCall } = globalStore()
 
 const { getUser, isManager } = usersStore()
@@ -298,6 +300,7 @@ const breadcrumbs = computed(() => {
 usePageMeta(() => {
   return {
     title: contact.data?.full_name || contact.data?.name,
+    icon: brand.favicon,
   }
 })
 
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 9c2b3db9..2ee383c6 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -363,6 +363,7 @@ import {
   copyToClipboard,
 } from '@/utils'
 import { getView } from '@/utils/view'
+import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { statusesStore } from '@/stores/statuses'
 import { usersStore } from '@/stores/users'
@@ -381,6 +382,7 @@ import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useActiveTabManager } from '@/composables/useActiveTabManager'
 
+const { brand } = getSettings()
 const { $dialog, $socket, makeCall } = globalStore()
 const { statusOptions, getDealStatus } = statusesStore()
 const { isManager } = usersStore()
@@ -540,6 +542,7 @@ const breadcrumbs = computed(() => {
 usePageMeta(() => {
   return {
     title: organization.data?.name || deal.data?.name,
+    icon: brand.favicon,
   }
 })
 
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index e927d011..5e768d42 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -333,6 +333,7 @@ import {
   copyToClipboard,
 } from '@/utils'
 import { getView } from '@/utils/view'
+import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { contactsStore } from '@/stores/contacts'
 import { statusesStore } from '@/stores/statuses'
@@ -355,6 +356,7 @@ import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useActiveTabManager } from '@/composables/useActiveTabManager'
 
+const { brand } = getSettings()
 const { $dialog, $socket, makeCall } = globalStore()
 const { getContactByName, contacts } = contactsStore()
 const { statusOptions, getLeadStatus } = statusesStore()
@@ -485,6 +487,7 @@ const breadcrumbs = computed(() => {
 usePageMeta(() => {
   return {
     title: lead.data?.lead_name || lead.data?.name,
+    icon: brand.favicon,
   }
 })
 
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index ca08c833..3de45ac3 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -189,6 +189,7 @@ import DealsListView from '@/components/ListViews/DealsListView.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
 import { formatDate, timeAgo, createToast } from '@/utils'
 import { getView } from '@/utils/view'
+import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global.js'
 import { usersStore } from '@/stores/users.js'
@@ -208,6 +209,7 @@ import {
 import { ref, computed, h } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+const { brand } = getSettings()
 const { $dialog, makeCall } = globalStore()
 
 const { getUser } = usersStore()
@@ -272,6 +274,7 @@ const breadcrumbs = computed(() => {
 usePageMeta(() => {
   return {
     title: contact.data?.full_name || contact.data?.name,
+    icon: brand.favicon,
   }
 })
 
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index 8936921f..8d5493db 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -273,6 +273,7 @@ import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import { createToast, setupAssignees, setupCustomizations } from '@/utils'
 import { getView } from '@/utils/view'
+import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { statusesStore } from '@/stores/statuses'
 import {
@@ -288,10 +289,12 @@ import {
   Tabs,
   Breadcrumbs,
   call,
+  usePageMeta
 } from 'frappe-ui'
 import { ref, computed, h, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+const { brand } = getSettings()
 const { $dialog, $socket } = globalStore()
 const { statusOptions, getDealStatus } = statusesStore()
 const route = useRoute()
@@ -430,6 +433,13 @@ const breadcrumbs = computed(() => {
   return items
 })
 
+usePageMeta(() => {
+  return {
+    title: organization.data?.name || deal.data?.name,
+    icon: brand.favicon,
+  }
+})
+
 const tabs = computed(() => {
   let tabOptions = [
     {
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index fe11b58e..954a2d1b 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -195,6 +195,7 @@ import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import { createToast, setupAssignees, setupCustomizations } from '@/utils'
 import { getView } from '@/utils/view'
+import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { contactsStore } from '@/stores/contacts'
 import { statusesStore } from '@/stores/statuses'
@@ -211,10 +212,12 @@ import {
   Switch,
   Breadcrumbs,
   call,
+  usePageMeta,
 } from 'frappe-ui'
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
+const { brand } = getSettings()
 const { $dialog, $socket } = globalStore()
 const { getContactByName, contacts } = contactsStore()
 const { statusOptions, getLeadStatus } = statusesStore()
@@ -339,6 +342,13 @@ const breadcrumbs = computed(() => {
   return items
 })
 
+usePageMeta(() => {
+  return {
+    title: lead.data?.lead_name || lead.data?.name,
+    icon: brand.favicon,
+  }
+})
+
 const tabs = computed(() => {
   let tabOptions = [
     {
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index 0a06f695..e51e8698 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -177,6 +177,7 @@ import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
@@ -205,6 +206,7 @@ const props = defineProps({
   },
 })
 
+const { brand } = getSettings()
 const { getUser } = usersStore()
 const { $dialog } = globalStore()
 const { getDealStatus } = statusesStore()
@@ -266,6 +268,7 @@ const breadcrumbs = computed(() => {
 usePageMeta(() => {
   return {
     title: props.organizationId,
+    icon: brand.favicon,
   }
 })
 
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index 831a5b2a..2a1c7917 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -212,6 +212,7 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
@@ -241,6 +242,7 @@ const props = defineProps({
   },
 })
 
+const { brand } = getSettings()
 const { getUser, isManager } = usersStore()
 const { $dialog } = globalStore()
 const { getDealStatus } = statusesStore()
@@ -304,6 +306,7 @@ const breadcrumbs = computed(() => {
 usePageMeta(() => {
   return {
     title: props.organizationId,
+    icon: brand.favicon,
   }
 })