Merge pull request #490 from shariquerik/branding

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",

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>

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"
@@ -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,12 +47,13 @@
 </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'
+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, brand } = 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,
       }

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,
   }
 })
 

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,
   }
 })
 

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,
   }
 })
 

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,
   }
 })
 

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,
   }
 })
 

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 = [
     {

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 = [
     {

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,
   }
 })
 

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,
   }
 })
 

frontend/src/stores/settings.js

@@ -0,0 +1,24 @@
+import { createDocumentResource } from 'frappe-ui'
+import { reactive, ref } from 'vue'
+
+const settings = ref({})
+const brand = reactive({})
+
+export function getSettings() {
+  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
+    },
+  })
+
+  return {
+    settings,
+    brand,
+  }
+}