Merge branch 'develop' into agents

README.md

@@ -8,7 +8,7 @@
 
 **Simplify Sales, Amplify Relationships**
 
-![GitHub release (latest by date)](https://img.shields.io/github/v/release/frappe/crm)
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/frappe/crm)](https://github.com/frappe/crm/releases)
 
 <div>
     <picture>
@@ -181,6 +181,7 @@ You need Docker, docker-compose and git setup on your machine. Refer [Docker doc
 -   [Discuss Forum](https://discuss.frappe.io/c/frappe-crm)
 -   [Documentation](https://docs.frappe.io/crm)
 -   [YouTube](https://www.youtube.com/channel/UCn3bV5kx77HsVwtnlCeEi_A)
+-   [X/Twitter](https://x.com/frappetech)
 
 <br>
 <br>

crm/api/activities.py

@@ -124,6 +124,7 @@ def get_deal_activities(name):
 		activity = {
 			"activity_type": "communication",
 			"communication_type": communication.communication_type,
+			"communication_date": communication.communication_date or communication.creation,
 			"creation": communication.creation,
 			"data": {
 				"subject": communication.subject,
@@ -255,6 +256,7 @@ def get_lead_activities(name):
 		activity = {
 			"activity_type": "communication",
 			"communication_type": communication.communication_type,
+			"communication_date": communication.communication_date or communication.creation,
 			"creation": communication.creation,
 			"data": {
 				"subject": communication.subject,

crm/api/doc.py

@@ -3,6 +3,7 @@ import json
 import frappe
 from frappe import _
 from frappe.custom.doctype.property_setter.property_setter import make_property_setter
+from frappe.desk.form.assign_to import set_status
 from frappe.model import no_value_fields
 from frappe.model.document import get_controller
 from frappe.utils import make_filter_tuple
@@ -659,6 +660,24 @@ def get_fields_meta(doctype, restricted_fieldtypes=None, as_array=False, only_re
 	return fields_meta
 
 
+@frappe.whitelist()
+def remove_assignments(doctype, name, assignees, ignore_permissions=False):
+	assignees = json.loads(assignees)
+
+	if not assignees:
+		return
+
+	for assign_to in assignees:
+		set_status(
+			doctype,
+			name,
+			todo=None,
+			assign_to=assign_to,
+			status="Cancelled",
+			ignore_permissions=ignore_permissions,
+		)
+
+@frappe.whitelist()
 def get_assigned_users(doctype, name, default_assigned_to=None):
 	assigned_users = frappe.get_all(
 		"ToDo",

crm/fcrm/doctype/crm_call_log/crm_call_log.py

@@ -190,11 +190,20 @@ def get_call_log(name):
 
 
 @frappe.whitelist()
-def create_lead_from_call_log(call_log):
+def create_lead_from_call_log(call_log, lead_details=None):
 	lead = frappe.new_doc("CRM Lead")
-	lead.first_name = "Lead from call " + call_log.get("from")
+	lead_details = frappe.parse_json(lead_details or "{}")
-	lead.mobile_no = call_log.get("from")
+
-	lead.lead_owner = frappe.session.user
+	if not lead_details.get("lead_owner"):
+		lead_details["lead_owner"] = frappe.session.user
+	if not lead_details.get("mobile_no"):
+		lead_details["mobile_no"] = call_log.get("from") or ""
+	if not lead_details.get("first_name"):
+		lead_details["first_name"] = "Lead from call " + (
+			lead_details.get("mobile_no") or call_log.get("name")
+		)
+
+	lead.update(lead_details)
 	lead.save(ignore_permissions=True)
 
 	# link call log with lead

crm/fcrm/doctype/crm_deal/api.py

@@ -13,7 +13,6 @@ def get_deal(name):
 
 	deal["fields_meta"] = get_fields_meta("CRM Deal")
 	deal["_form_script"] = get_form_script("CRM Deal")
-	deal["_assign"] = get_assigned_users("CRM Deal", deal.name)
 	return deal
 
 

crm/fcrm/doctype/crm_deal/crm_deal.json

@@ -11,11 +11,14 @@
   "naming_series",
   "organization",
   "next_step",
-  "probability",
   "column_break_ijan",
   "status",
-  "close_date",
   "deal_owner",
+  "section_break_jgpm",
+  "probability",
+  "deal_value",
+  "column_break_kpxa",
+  "close_date",
   "contacts_tab",
   "contacts",
   "contact",
@@ -374,12 +377,26 @@
    "label": "Net Total",
    "options": "currency",
    "read_only": 1
+  },
+  {
+   "fieldname": "section_break_jgpm",
+   "fieldtype": "Section Break"
+  },
+  {
+   "fieldname": "deal_value",
+   "fieldtype": "Currency",
+   "label": "Deal Value",
+   "options": "currency"
+  },
+  {
+   "fieldname": "column_break_kpxa",
+   "fieldtype": "Column Break"
   }
  ],
  "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-05-12 12:30:55.415282",
+ "modified": "2025-06-16 11:42:49.413483",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Deal",

crm/fcrm/doctype/crm_deal/crm_deal.py

@@ -24,6 +24,7 @@ class CRMDeal(Document):
 			self.assign_agent(self.deal_owner)
 		if self.has_value_changed("status"):
 			add_status_change_log(self)
+		self.update_close_date()
 
 	def after_insert(self):
 		if self.deal_owner:
@@ -133,6 +134,13 @@ class CRMDeal(Document):
 		if sla:
 			sla.apply(self)
 
+	def update_close_date(self):
+		"""
+		Update the close date based on the "Won" status.
+		"""
+		if self.status == "Won" and not self.close_date:
+			self.close_date = frappe.utils.nowdate()
+
 	@staticmethod
 	def default_list_data():
 		columns = [

crm/fcrm/doctype/crm_deal_status/crm_deal_status.json

@@ -8,7 +8,8 @@
  "field_order": [
   "deal_status",
   "color",
-  "position"
+  "position",
+  "probability"
  ],
  "fields": [
   {
@@ -32,11 +33,17 @@
    "fieldtype": "Int",
    "in_list_view": 1,
    "label": "Position"
+  },
+  {
+   "fieldname": "probability",
+   "fieldtype": "Percent",
+   "label": "Probability"
   }
  ],
+ "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-01-19 21:56:44.552134",
+ "modified": "2025-06-11 13:00:34.518808",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Deal Status",
@@ -68,6 +75,7 @@
    "write": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "modified",
  "sort_order": "DESC",
  "states": []

crm/fcrm/doctype/crm_lead/api.py

@@ -13,5 +13,4 @@ def get_lead(name):
 
 	lead["fields_meta"] = get_fields_meta("CRM Lead")
 	lead["_form_script"] = get_form_script("CRM Lead")
-	lead["_assign"] = get_assigned_users("CRM Lead", lead.name)
 	return lead

crm/fcrm/doctype/fcrm_settings/fcrm_settings.json

@@ -7,6 +7,7 @@
  "field_order": [
   "defaults_tab",
   "restore_defaults",
+  "enable_forecasting",
   "branding_tab",
   "brand_name",
   "brand_logo",
@@ -28,7 +29,7 @@
   {
    "fieldname": "defaults_tab",
    "fieldtype": "Tab Break",
-   "label": "Defaults"
+   "label": "Settings"
   },
   {
    "fieldname": "branding_tab",
@@ -56,12 +57,19 @@
    "fieldname": "favicon",
    "fieldtype": "Attach",
    "label": "Favicon"
+  },
+  {
+   "default": "0",
+   "description": "It will make deal's \"Expected Closure Date\" mandatory to get accurate forecasting insights",
+   "fieldname": "enable_forecasting",
+   "fieldtype": "Check",
+   "label": "Enable Forecasting"
   }
  ],
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2025-02-20 12:38:38.088477",
+ "modified": "2025-06-11 19:12:16.762499",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "FCRM Settings",
@@ -95,6 +103,7 @@
    "share": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "creation",
  "sort_order": "DESC",
  "states": []

crm/fcrm/doctype/fcrm_settings/fcrm_settings.py

@@ -3,6 +3,7 @@
 
 import frappe
 from frappe import _
+from frappe.custom.doctype.property_setter.property_setter import delete_property_setter, make_property_setter
 from frappe.model.document import Document
 
 from crm.install import after_install
@@ -15,6 +16,7 @@ class FCRMSettings(Document):
 
 	def validate(self):
 		self.do_not_allow_to_delete_if_standard()
+		self.setup_forecasting()
 
 	def do_not_allow_to_delete_if_standard(self):
 		if not self.has_value_changed("dropdown_items"):
@@ -29,6 +31,23 @@ class FCRMSettings(Document):
 				return
 			frappe.throw(_("Cannot delete standard items {0}").format(", ".join(deleted_standard_items)))
 
+	def setup_forecasting(self):
+		if self.has_value_changed("enable_forecasting"):
+			if not self.enable_forecasting:
+				delete_property_setter(
+					"CRM Deal",
+					"reqd",
+					"close_date",
+				)
+			else:
+				make_property_setter(
+					"CRM Deal",
+					"close_date",
+					"reqd",
+					1 if self.enable_forecasting else 0,
+					"Check",
+				)
+
 
 def get_standard_dropdown_items():
 	return [item.get("name1") for item in frappe.get_hooks("standard_dropdown_items")]
@@ -57,3 +76,36 @@ def sync_table(key, hook):
 	crm_settings.set(key, items)
 
 	crm_settings.save()
+
+
+def create_forecasting_script():
+	if not frappe.db.exists("CRM Form Script", "Forecasting Script"):
+		script = get_forecasting_script()
+		frappe.get_doc(
+			{
+				"doctype": "CRM Form Script",
+				"name": "Forecasting Script",
+				"dt": "CRM Deal",
+				"view": "Form",
+				"script": script,
+				"enabled": 1,
+				"is_standard": 1,
+			}
+		).insert()
+
+
+def get_forecasting_script():
+	return """class CRMDeal {
+    async status() {
+        await this.doc.trigger('updateProbability')
+    }
+    async updateProbability() {
+        let status = await call("frappe.client.get_value", {
+            doctype: "CRM Deal Status",
+            fieldname: "probability",
+            filters: { name: this.doc.status },
+        })
+
+        this.doc.probability = status.probability
+    }
+}"""

crm/install.py

@@ -359,5 +359,8 @@ def add_standard_dropdown_items():
 
 
 def add_default_scripts():
+	from crm.fcrm.doctype.fcrm_settings.fcrm_settings import create_forecasting_script
+
 	for doctype in ["CRM Lead", "CRM Deal"]:
 		create_product_details_script(doctype)
+	create_forecasting_script()

crm/patches.txt

@@ -12,4 +12,4 @@ crm.patches.v1_0.create_default_sidebar_fields_layout
 crm.patches.v1_0.update_deal_quick_entry_layout
 crm.patches.v1_0.update_layouts_to_new_format
 crm.patches.v1_0.move_twilio_agent_to_telephony_agent
-crm.patches.v1_0.create_default_scripts
+crm.patches.v1_0.create_default_scripts # 13-06-2025

crm/www/crm.py

@@ -45,7 +45,6 @@ def get_boot():
 				"user": frappe.db.get_value("User", frappe.session.user, "time_zone")
 				or get_system_timezone(),
 			},
-			"app_version": get_app_version(),
 		}
 	)
 
@@ -54,25 +53,6 @@ def get_default_route():
 	return "/crm"
 
 
-def get_app_version():
-	app = "crm"
-	branch = run_git_command(f"cd ../apps/{app} && git rev-parse --abbrev-ref HEAD")
-	commit = run_git_command(f"git -C ../apps/{app} rev-parse --short=7 HEAD")
-	tag = run_git_command(f"git -C ../apps/{app} describe --tags --abbrev=0")
-	dirty = run_git_command(f"git -C ../apps/{app} diff --quiet || echo 'dirty'") == "dirty"
-	commit_date = run_git_command(f"git -C ../apps/{app} log -1 --format=%cd")
-	commit_message = run_git_command(f"git -C ../apps/{app} log -1 --pretty=%B")
-
-	return {
-		"branch": branch,
-		"commit": commit,
-		"commit_date": commit_date,
-		"commit_message": commit_message,
-		"tag": tag,
-		"dirty": dirty,
-	}
-
-
 def run_git_command(command):
 	try:
 		with open(os.devnull, "wb") as null_stream:

frontend/components.d.ts

@@ -153,10 +153,7 @@ declare module 'vue' {
     ListIcon: typeof import('./src/components/Icons/ListIcon.vue')['default']
     ListRows: typeof import('./src/components/ListViews/ListRows.vue')['default']
     LoadingIndicator: typeof import('./src/components/Icons/LoadingIndicator.vue')['default']
-    LucideCalendar: typeof import('~icons/lucide/calendar')['default']
-    LucideInfo: typeof import('~icons/lucide/info')['default']
     LucidePlus: typeof import('~icons/lucide/plus')['default']
-    LucideSearch: typeof import('~icons/lucide/search')['default']
     MarkAsDoneIcon: typeof import('./src/components/Icons/MarkAsDoneIcon.vue')['default']
     MaximizeIcon: typeof import('./src/components/Icons/MaximizeIcon.vue')['default']
     MenuIcon: typeof import('./src/components/Icons/MenuIcon.vue')['default']

frontend/package.json

@@ -13,7 +13,7 @@
     "@tiptap/extension-paragraph": "^2.12.0",
     "@twilio/voice-sdk": "^2.10.2",
     "@vueuse/integrations": "^10.3.0",
-    "frappe-ui": "^0.1.145",
+    "frappe-ui": "^0.1.156",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",

frontend/src/components/Activities/Activities.vue

@@ -250,14 +250,14 @@
               </span>
               <span v-if="activity.type">{{ __(activity.type) }}</span>
               <span
-                v-if="activity.data.field_label"
+                v-if="activity.data?.field_label"
                 class="max-w-xs truncate font-medium text-ink-gray-8"
               >
                 {{ __(activity.data.field_label) }}
               </span>
               <span v-if="activity.value">{{ __(activity.value) }}</span>
               <span
-                v-if="activity.data.old_value"
+                v-if="activity.data?.old_value"
                 class="max-w-xs font-medium text-ink-gray-8"
               >
                 <div
@@ -273,7 +273,7 @@
               </span>
               <span v-if="activity.to">{{ __('to') }}</span>
               <span
-                v-if="activity.data.value"
+                v-if="activity.data?.value"
                 class="max-w-xs font-medium text-ink-gray-8"
               >
                 <div
@@ -307,7 +307,7 @@
             >
               <div class="inline-flex flex-wrap gap-1 text-ink-gray-5">
                 <span
-                  v-if="activity.data.field_label"
+                  v-if="activity.data?.field_label"
                   class="max-w-xs truncate text-ink-gray-5"
                 >
                   {{ __(activity.data.field_label) }}
@@ -320,7 +320,7 @@
                   {{ startCase(__(activity.type)) }}
                 </span>
                 <span
-                  v-if="activity.data.old_value"
+                  v-if="activity.data?.old_value"
                   class="max-w-xs font-medium text-ink-gray-8"
                 >
                   <div
@@ -336,7 +336,7 @@
                 </span>
                 <span v-if="activity.to">{{ __('to') }}</span>
                 <span
-                  v-if="activity.data.value"
+                  v-if="activity.data?.value"
                   class="max-w-xs font-medium text-ink-gray-8"
                 >
                   <div
@@ -365,7 +365,11 @@
       </div>
     </div>
     <div v-else-if="title == 'Data'" class="h-full flex flex-col px-3 sm:px-10">
-      <DataFields :doctype="doctype" :docname="doc.data.name" />
+      <DataFields
+        :doctype="doctype"
+        :docname="doc.data.name"
+        @afterSave="(data) => emit('afterSave', data)"
+      />
     </div>
     <div
       v-else
@@ -514,6 +518,8 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['afterSave'])
+
 const route = useRoute()
 
 const doc = defineModel()
@@ -800,5 +806,5 @@ const callActions = computed(() => {
   )
 })
 
-defineExpose({ emailBox, all_activities })
+defineExpose({ emailBox, all_activities, changeTabTo })
 </script>

frontend/src/components/Activities/AllModals.vue

@@ -16,8 +16,9 @@
     @after="redirect('notes')"
   />
   <CallLogModal
+    v-if="showCallLogModal"
     v-model="showCallLogModal"
-    v-model:callLog="callLog"
+    :data="callLog"
     :options="{ afterInsert: () => activities.reload() }"
   />
 </template>
@@ -91,10 +92,8 @@ function createCallLog() {
   let doctype = props.doctype
   let docname = props.doc.data?.name
   callLog.value = {
-    data: {
+    reference_doctype: doctype,
-      reference_doctype: doctype,
+    reference_docname: docname,
-      reference_docname: docname,
-    },
   }
   showCallLogModal.value = true
 }

frontend/src/components/Activities/CallArea.vue

@@ -97,7 +97,11 @@
       v-model:callLogModal="showCallLogModal"
       v-model:callLog="callLog"
     />
-    <CallLogModal v-model="showCallLogModal" v-model:callLog="callLog" />
+    <CallLogModal
+      v-if="showCallLogModal"
+      v-model="showCallLogModal"
+      :data="callLog.data"
+    />
   </div>
 </template>
 <script setup>

frontend/src/components/Activities/DataFields.vue

@@ -16,7 +16,9 @@
         v-if="isManager() && !isMobileView"
         @click="showDataFieldsModal = true"
       >
-        <EditIcon class="h-4 w-4" />
+        <template #icon>
+          <EditIcon />
+        </template>
       </Button>
       <Button
         label="Save"
@@ -76,6 +78,9 @@ const props = defineProps({
     required: true,
   },
 })
+
+const emit = defineEmits(['afterSave'])
+
 const { isManager } = usersStore()
 
 const showDataFieldsModal = ref(false)
@@ -90,7 +95,21 @@ const tabs = createResource({
 })
 
 function saveChanges() {
-  document.save.submit()
+  if (!document.isDirty) return
+
+  const updatedDoc = { ...document.doc }
+  const oldDoc = { ...document.originalDoc }
+
+  const changes = Object.keys(updatedDoc).reduce((acc, key) => {
+    if (JSON.stringify(updatedDoc[key]) !== JSON.stringify(oldDoc[key])) {
+      acc[key] = updatedDoc[key]
+    }
+    return acc
+  }, {})
+
+  document.save.submit(null, {
+    onSuccess: () => emit('afterSave', changes),
+  })
 }
 
 watch(

frontend/src/components/Activities/EmailArea.vue

@@ -22,9 +22,9 @@
           variant="subtle"
           :theme="status.color"
         />
-        <Tooltip :text="formatDate(activity.creation)">
+        <Tooltip :text="formatDate(activity.communication_date)">
           <div class="text-sm text-ink-gray-5">
-            {{ __(timeAgo(activity.creation)) }}
+            {{ __(timeAgo(activity.communication_date)) }}
           </div>
         </Tooltip>
         <div class="flex gap-0.5">

frontend/src/components/ColumnSettings.vue

@@ -30,20 +30,24 @@
                   <DragIcon class="h-3.5" />
                   <div>{{ __(element.label) }}</div>
                 </div>
-                <div class="flex cursor-pointer items-center gap-1">
+                <div class="flex cursor-pointer items-center gap-0.5">
                   <Button
                     variant="ghost"
                     class="!h-5 w-5 !p-1"
                     @click="editColumn(element)"
                   >
-                    <EditIcon class="h-3.5" />
+                    <template #icon>
+                      <EditIcon class="h-3.5" />
+                    </template>
                   </Button>
                   <Button
                     variant="ghost"
                     class="!h-5 w-5 !p-1"
                     @click="removeColumn(element)"
                   >
-                    <FeatherIcon name="x" class="h-3.5" />
+                    <template #icon>
+                      <FeatherIcon name="x" class="h-3.5" />
+                    </template>
                   </Button>
                 </div>
               </div>
@@ -215,7 +219,9 @@ const fields = computed(() => {
 })
 
 function addColumn(c) {
-  let align = ['Float', 'Int', 'Percent', 'Currency'].includes(c.type) ? 'right' : 'left'
+  let align = ['Float', 'Int', 'Percent', 'Currency'].includes(c.type)
+    ? 'right'
+    : 'left'
   let _column = {
     label: c.label,
     type: c.fieldtype,

frontend/src/components/Controls/Grid.vue

@@ -58,7 +58,9 @@
             variant="outline"
             @click="showGridFieldsEditorModal = true"
           >
-            <FeatherIcon name="settings" class="h-4 w-4 text-ink-gray-7" />
+            <template #icon>
+              <FeatherIcon name="settings" class="size-4 text-ink-gray-7" />
+            </template>
           </Button>
         </div>
       </div>
@@ -281,7 +283,9 @@
                   variant="outline"
                   @click="showRowList[index] = true"
                 >
-                  <EditIcon class="h-4 w-4 text-ink-gray-7" />
+                  <template #icon>
+                    <EditIcon class="text-ink-gray-7" />
+                  </template>
                 </Button>
               </div>
               <GridRowModal
@@ -509,8 +513,7 @@ const deleteRows = () => {
 }
 
 function fieldChange(value, field, row) {
-  row[field.fieldname] = value
+  triggerOnChange(field.fieldname, value, row)
-  triggerOnChange(field.fieldname, row)
 }
 
 function getDefaultValue(defaultValue, fieldtype) {

frontend/src/components/Controls/GridRowModal.vue

@@ -15,10 +15,14 @@
               class="w-7"
               @click="openGridRowFieldsModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>

frontend/src/components/Controls/TableMultiselectInput.vue

@@ -64,7 +64,10 @@ const emit = defineEmits(['change'])
 
 const { getFields } = getMeta(props.doctype)
 
-const values = defineModel()
+const values = defineModel({
+  type: Array,
+  default: () => [],
+})
 
 const valuesRef = ref([])
 const error = ref(null)

frontend/src/components/DropdownItem.vue

@@ -31,7 +31,9 @@
               class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
               @click="option.onClick"
             >
-              <SuccessIcon />
+              <template #icon>
+                <SuccessIcon />
+              </template>
             </Button>
           </div>
         </Tooltip>
@@ -43,7 +45,9 @@
               class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
               @click="toggleEditMode"
             >
-              <EditIcon />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
           </div>
         </Tooltip>

frontend/src/components/FieldLayout/Field.vue

@@ -206,7 +206,7 @@
       v-else
       type="text"
       :placeholder="getPlaceholder(field)"
-      :value="data[field.fieldname]"
+      :value="getDataValue(data[field.fieldname], field)"
       :disabled="Boolean(field.read_only)"
       :description="field.description"
       @change="fieldChange($event.target.value, field)"
@@ -332,14 +332,19 @@ const getPlaceholder = (field) => {
 }
 
 function fieldChange(value, df) {
-  data.value[df.fieldname] = value
-
   if (isGridRow) {
-    triggerOnChange(df.fieldname, data.value)
+    triggerOnChange(df.fieldname, value, data.value)
   } else {
-    triggerOnChange(df.fieldname)
+    triggerOnChange(df.fieldname, value)
   }
 }
+
+function getDataValue(value, field) {
+  if (field.fieldtype === 'Duration') {
+    return value || 0
+  }
+  return value
+}
 </script>
 <style scoped>
 :deep(.form-control.prefix select) {

frontend/src/components/Filter.vue

@@ -126,7 +126,7 @@
           <div class="flex items-center justify-between gap-2">
             <Autocomplete
               value=""
-              :options="filterableFields.data"
+              :options="availableFilters"
               @change="(e) => setfilter(e)"
               :placeholder="__('First name')"
             >
@@ -217,6 +217,19 @@ const filters = computed(() => {
   return convertFilters(filterableFields.data, allFilters)
 })
 
+const availableFilters = computed(() => {
+  if (!filterableFields.data) return []
+
+  const selectedFieldNames = new Set()
+  for (const filter of filters.value) {
+    selectedFieldNames.add(filter.fieldname)
+  }
+
+  return filterableFields.data.filter(
+    (field) => !selectedFieldNames.has(field.fieldname),
+  )
+})
+
 function removeCommonFilters(commonFilters, allFilters) {
   for (const key in commonFilters) {
     if (commonFilters.hasOwnProperty(key) && allFilters.hasOwnProperty(key)) {

frontend/src/components/Layouts/MobileLayout.vue

@@ -5,9 +5,11 @@
       <MobileAppHeader />
       <slot />
     </div>
+    <GlobalModals />
   </div>
 </template>
 <script setup>
 import MobileSidebar from '@/components/Mobile/MobileSidebar.vue'
 import MobileAppHeader from '@/components/Mobile/MobileAppHeader.vue'
+import GlobalModals from '@/components/Modals/GlobalModals.vue'
 </script>

frontend/src/components/ListViews/LeadsListView.vue

@@ -72,15 +72,6 @@
               size="sm"
             />
           </div>
-          <div v-else-if="column.key === 'organization'">
-            <Avatar
-              v-if="item"
-              class="flex items-center"
-              :image="item"
-              :label="item"
-              size="sm"
-            />
-          </div>
           <div v-else-if="column.key === 'lead_owner'">
             <Avatar
               v-if="item.full_name"

frontend/src/components/Modals/AboutModal.vue

@@ -6,22 +6,6 @@
           <div class="flex flex-col items-center">
             <CRMLogo class="mb-3 size-12" />
             <h3 class="font-semibold text-xl text-ink-gray-9">Frappe CRM</h3>
-            <div class="flex items-center mt-1">
-              <div class="text-base text-ink-gray-6">
-                {{ appVersion.branch != 'main' ? appVersion.branch : '' }}
-                <template v-if="appVersion.branch != 'main'">
-                  ({{ appVersion.commit }})
-                </template>
-                <template v-else>{{ appVersion.tag }}</template>
-              </div>
-
-              <Tooltip
-                :text="`${appVersion.commit_message} - ${appVersion.commit_date}`"
-                placement="top"
-              >
-                <LucideInfo class="size-3.5 text-ink-gray-8 ml-1" />
-              </Tooltip>
-            </div>
           </div>
         </div>
         <hr class="border-t my-3 mx-2" />
@@ -95,6 +79,4 @@ let links = [
     icon: LucideHeadset,
   },
 ]
-
-let appVersion = window.app_version
 </script>

frontend/src/components/Modals/AddressModal.vue

@@ -15,15 +15,23 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
-        <div v-if="tabs.data">
+        <div v-if="tabs.data && _address.doc">
-          <FieldLayout :tabs="tabs.data" :data="_address" doctype="Address" />
+          <FieldLayout
+            :tabs="tabs.data"
+            :data="_address.doc"
+            doctype="Address"
+          />
           <ErrorMessage class="mt-2" :message="error" />
         </div>
       </div>
@@ -41,24 +49,24 @@
       </div>
     </template>
   </Dialog>
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="Address"
-  />
 </template>
 
 <script setup>
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
+import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
+import { useDocument } from '@/data/document'
 import { capture } from '@/telemetry'
 import { FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
-import { ref, nextTick, watch, computed } from 'vue'
+import { ref, nextTick, computed, onMounted } from 'vue'
 
 const props = defineProps({
+  address: {
+    type: String,
+    default: '',
+  },
   options: {
     type: Object,
     default: {
@@ -70,30 +78,18 @@ const props = defineProps({
 const { isManager } = usersStore()
 
 const show = defineModel()
-const address = defineModel('address')
 
 const loading = ref(false)
 const error = ref(null)
 const title = ref(null)
 const editMode = ref(false)
 
-let _address = ref({
+const { document: _address } = useDocument('Address', props.address || '')
-  name: '',
-  address_title: '',
-  address_type: 'Billing',
-  address_line1: '',
-  address_line2: '',
-  city: '',
-  county: '',
-  state: '',
-  country: '',
-  pincode: '',
-})
 
 const dialogOptions = computed(() => {
   let title = !editMode.value
     ? __('New Address')
-    : __(_address.value.address_title)
+    : __(_address.doc?.address_title)
   let size = 'xl'
   let actions = [
     {
@@ -114,42 +110,28 @@ const tabs = createResource({
   auto: true,
 })
 
-let doc = ref({})
+const callBacks = {
-
+  onSuccess: (doc) => {
-function updateAddress() {
-  error.value = null
-  const old = { ...doc.value }
-  const newAddress = { ..._address.value }
-
-  const dirty = JSON.stringify(old) !== JSON.stringify(newAddress)
-  const values = newAddress
-
-  if (!dirty) {
-    show.value = false
-    return
-  }
-
-  loading.value = true
-  updateAddressValues.submit({
-    doctype: 'Address',
-    name: _address.value.name,
-    fieldname: values,
-  })
-}
-
-const updateAddressValues = createResource({
-  url: 'frappe.client.set_value',
-  onSuccess(doc) {
     loading.value = false
-    if (doc.name) {
+    handleAddressUpdate(doc)
-      handleAddressUpdate(doc)
-    }
   },
-  onError(err) {
+  onError: (err) => {
     loading.value = false
+    if (err.exc_type == 'MandatoryError') {
+      const errorMessage = err.messages
+        .map((msg) => msg.split(': ')[2].trim())
+        .join(', ')
+      error.value = __('These fields are required: {0}', [errorMessage])
+      return
+    }
     error.value = err
   },
-})
+}
+
+async function updateAddress() {
+  loading.value = true
+  await _address.save.submit(null, callBacks)
+}
 
 const createAddress = createResource({
   url: 'frappe.client.insert',
@@ -157,7 +139,7 @@ const createAddress = createResource({
     return {
       doc: {
         doctype: 'Address',
-        ..._address.value,
+        ..._address.doc,
       },
     }
   },
@@ -179,27 +161,17 @@ function handleAddressUpdate(doc) {
   props.options.afterInsert && props.options.afterInsert(doc)
 }
 
-watch(
+onMounted(() => {
-  () => show.value,
+  editMode.value = props.address ? true : false
-  (value) => {
-    if (!value) return
-    editMode.value = false
-    nextTick(() => {
-      // TODO: Issue with FormControl
-      // title.value.el.focus()
-      doc.value = address.value?.doc || address.value || {}
-      _address.value = { ...doc.value }
-      if (_address.value.name) {
-        editMode.value = true
-      }
-    })
-  },
-)
 
-const showQuickEntryModal = ref(false)
+  if (!props.address) {
+    _address.doc = { address_type: 'Billing' }
+  }
+})
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
+  quickEntryProps.value = { doctype: 'Address' }
   nextTick(() => {
     show.value = false
   })

frontend/src/components/Modals/AssignmentModal.vue

@@ -145,13 +145,11 @@ function updateAssignees() {
     .map((assignee) => assignee.name)
 
   if (removedAssignees.length) {
-    for (let a of removedAssignees) {
+    call('crm.api.doc.remove_assignments', {
-      call('frappe.desk.form.assign_to.remove', {
+      doctype: props.doctype,
-        doctype: props.doctype,
+      name: props.doc.name,
-        name: props.doc.name,
+      assignees: JSON.stringify(removedAssignees),
-        assign_to: a,
+    })
-      })
-    }
   }
 
   if (addedAssignees.length) {

frontend/src/components/Modals/CallLogDetailModal.vue

@@ -39,10 +39,14 @@
               class="w-7"
               @click="openCallLogModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
@@ -172,8 +176,9 @@ import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
 import { getCallLogDetail } from '@/utils/callLog'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
+import { useDocument } from '@/data/document'
 import { FeatherIcon, Dropdown, Avatar, Tooltip, call } from 'frappe-ui'
-import { ref, computed, h, nextTick } from 'vue'
+import { ref, computed, h, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { isManager } = usersStore()
@@ -289,9 +294,19 @@ const detailFields = computed(() => {
     .filter((detail) => (detail.condition ? detail.condition() : true))
 })
 
-function createLead() {
+const d = ref({})
+const leadDetails = ref({})
+
+async function createLead() {
+  await d.value.triggerOnCreateLead?.(
+    callLog.value?.data,
+    leadDetails.value,
+    () => (show.value = false),
+  )
+
   call('crm.fcrm.doctype.crm_call_log.crm_call_log.create_lead_from_call_log', {
     call_log: callLog.value?.data,
+    lead_details: leadDetails.value,
   }).then((d) => {
     if (d) {
       router.push({ name: 'Lead', params: { leadId: d } })
@@ -351,6 +366,14 @@ async function addTaskToCallLog(_task, insert_mode = false) {
     })
   }
 }
+
+watch(
+  () => callLog.value?.data?.name,
+  (value) => {
+    if (!value) return
+    d.value = useDocument('CRM Call Log', value)
+  },
+)
 </script>
 
 <style scoped>

frontend/src/components/Modals/CallLogModal.vue

@@ -3,52 +3,76 @@
     <template #body>
       <div class="px-4 pt-5 pb-6 bg-surface-modal sm:px-6">
         <div class="flex items-center justify-between mb-5">
-          <div>
+          <div class="flex items-center gap-2">
             <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
+            <Badge v-if="callLog.isDirty" :label="'Not Saved'" theme="orange" />
           </div>
           <div class="flex items-center gap-1">
-            <Button v-if="isManager() && !isMobileView" variant="ghost" class="w-7" @click="openQuickEntryModal">
+            <Button
-              <EditIcon class="w-4 h-4" />
+              v-if="isManager() && !isMobileView"
+              variant="ghost"
+              class="w-7"
+              @click="openQuickEntryModal"
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="w-4 h-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
         <div v-if="tabs.data">
-          <FieldLayout :tabs="tabs.data" :data="_callLog" doctype="CRM Call Log" />
+          <FieldLayout
+            :tabs="tabs.data"
+            :data="callLog.doc"
+            doctype="CRM Call Log"
+          />
           <ErrorMessage class="mt-8" :message="error" />
         </div>
       </div>
       <div class="px-4 pt-4 pb-7 sm:px-6">
         <div class="space-y-2">
-          <Button class="w-full" v-for="action in dialogOptions.actions" :key="action.label" v-bind="action"
+          <Button
-            :label="__(action.label)" :loading="loading" />
+            class="w-full"
+            v-for="action in dialogOptions.actions"
+            :key="action.label"
+            v-bind="action"
+            :label="__(action.label)"
+            :loading="loading"
+          />
         </div>
       </div>
     </template>
   </Dialog>
-  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" doctype="CRM Call Log" />
 </template>
 
 <script setup>
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
+import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
 import { getRandom } from '@/utils'
 import { capture } from '@/telemetry'
-import { FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
+import { useDocument } from '@/data/document'
-import { ref, nextTick, watch, computed } from 'vue'
+import { FeatherIcon, createResource, ErrorMessage, Badge } from 'frappe-ui'
+import { ref, nextTick, computed, onMounted } from 'vue'
 
 const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
   options: {
     type: Object,
     default: {
-      afterInsert: () => { },
+      afterInsert: () => {},
     },
   },
 })
@@ -56,26 +80,15 @@ const props = defineProps({
 const { isManager } = usersStore()
 
 const show = defineModel()
-const callLog = defineModel('callLog')
 
 const loading = ref(false)
 const error = ref(null)
-const title = ref(null)
 const editMode = ref(false)
 
-let _callLog = ref({
+const { document: callLog } = useDocument(
-  name: '',
+  'CRM Call Log',
-  type: '',
+  props.data?.name || '',
-  from: '',
+)
-  to: '',
-  medium: '',
-  duration: '',
-  caller: '',
-  receiver: '',
-  status: '',
-  recording_url: '',
-  telephony_medium: 'Manual',
-})
 
 const dialogOptions = computed(() => {
   let title = !editMode.value ? __('New Call Log') : __('Edit Call Log')
@@ -99,41 +112,28 @@ const tabs = createResource({
   auto: true,
 })
 
-let doc = ref({})
+const callBacks = {
-
+  onSuccess: (doc) => {
-function updateCallLog() {
-  error.value = null
-  const old = { ...doc.value }
-  const newCallLog = { ..._callLog.value }
-
-  const dirty = JSON.stringify(old) !== JSON.stringify(newCallLog)
-
-  if (!dirty) {
-    show.value = false
-    return
-  }
-
-  loading.value = true
-  updateCallLogValues.submit({
-    doctype: 'CRM Call Log',
-    name: _callLog.value.name,
-    fieldname: newCallLog,
-  })
-}
-
-const updateCallLogValues = createResource({
-  url: 'frappe.client.set_value',
-  onSuccess(doc) {
     loading.value = false
-    if (doc.name) {
+    handleCallLogUpdate(doc)
-      handleCallLogUpdate(doc)
-    }
   },
-  onError(err) {
+  onError: (err) => {
     loading.value = false
+    if (err.exc_type == 'MandatoryError') {
+      const errorMessage = err.messages
+        .map((msg) => msg.split(': ')[2].trim())
+        .join(', ')
+      error.value = __('These fields are required: {0}', [errorMessage])
+      return
+    }
     error.value = err
   },
-})
+}
+
+async function updateCallLog() {
+  loading.value = true
+  await callLog.save.submit(null, callBacks)
+}
 
 const createCallLog = createResource({
   url: 'frappe.client.insert',
@@ -143,7 +143,7 @@ const createCallLog = createResource({
         doctype: 'CRM Call Log',
         id: getRandom(6),
         telephony_medium: 'Manual',
-        ..._callLog.value,
+        ...callLog.doc,
       },
     }
   },
@@ -155,15 +155,7 @@ const createCallLog = createResource({
     }
   },
   onError(err) {
-    loading.value = false
+    callBacks.onError(err)
-    if (err.exc_type == 'MandatoryError') {
-      const errorMessage = err.messages
-        .map(msg => msg.split('Log:')[1].trim())
-        .join(', ')
-      error.value = `These fields are required: ${errorMessage}`
-      return
-    }
-    error.value = err
   },
 })
 
@@ -172,29 +164,17 @@ function handleCallLogUpdate(doc) {
   props.options.afterInsert && props.options.afterInsert(doc)
 }
 
-watch(
+onMounted(() => {
-  () => show.value,
+  editMode.value = props.data?.name ? true : false
-  (value) => {
-    if (!value) return
-    editMode.value = false
-    nextTick(() => {
-      // TODO: Issue with FormControl
-      // title.value.el.focus()
-      doc.value = callLog.value?.data || {}
-      _callLog.value = { ...doc.value }
-      if (_callLog.value.name) {
-        editMode.value = true
-      }
-    })
-  },
-)
 
-const showQuickEntryModal = ref(false)
+  if (!props.data?.name) {
+    callLog.doc = { ...props.data }
+  }
+})
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
-  nextTick(() => {
+  quickEntryProps.value = { doctype: 'CRM Call Log' }
-    show.value = false
+  nextTick(() => (show.value = false))
-  })
 }
 </script>

frontend/src/components/Modals/ContactModal.vue

@@ -15,17 +15,21 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
         <FieldLayout
           v-if="tabs.data?.length"
           :tabs="tabs.data"
-          :data="_contact"
+          :data="_contact.doc"
           doctype="Contact"
         />
       </div>
@@ -49,9 +53,16 @@ import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
+import {
+  showQuickEntryModal,
+  quickEntryProps,
+  showAddressModal,
+  addressProps,
+} from '@/composables/modals'
+import { useDocument } from '@/data/document'
 import { capture } from '@/telemetry'
 import { call, createResource } from 'frappe-ui'
-import { ref, nextTick, watch } from 'vue'
+import { ref, nextTick, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -68,8 +79,6 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['openAddressModal'])
-
 const { isManager } = usersStore()
 
 const router = useRouter()
@@ -77,23 +86,23 @@ const show = defineModel()
 
 const loading = ref(false)
 
-let _contact = ref({})
+const { document: _contact } = useDocument('Contact')
 
 async function createContact() {
-  if (_contact.value.email_id) {
+  if (_contact.doc.email_id) {
-    _contact.value.email_ids = [{ email_id: _contact.value.email_id }]
+    _contact.doc.email_ids = [{ email_id: _contact.doc.email_id }]
-    delete _contact.value.email_id
+    delete _contact.doc.email_id
   }
 
-  if (_contact.value.mobile_no) {
+  if (_contact.doc.mobile_no) {
-    _contact.value.phone_nos = [{ phone: _contact.value.mobile_no }]
+    _contact.doc.phone_nos = [{ phone: _contact.doc.mobile_no }]
-    delete _contact.value.mobile_no
+    delete _contact.doc.mobile_no
   }
 
   const doc = await call('frappe.client.insert', {
     doc: {
       doctype: 'Contact',
-      ..._contact.value,
+      ..._contact.doc,
     },
   })
   if (doc.name) {
@@ -130,17 +139,13 @@ const tabs = createResource({
               field.read_only = false
             } else if (field.fieldname == 'address') {
               field.create = (value, close) => {
-                _contact.value.address = value
+                _contact.doc.address = value
-                emit('openAddressModal')
+                openAddressModal()
-                show.value = false
                 close()
               }
-              field.edit = (address) => {
+              field.edit = (address) => openAddressModal(address)
-                emit('openAddressModal', address)
-                show.value = false
-              }
             } else if (field.fieldtype === 'Table') {
-              _contact.value[field.fieldname] = []
+              _contact.doc[field.fieldname] = []
             }
           })
         })
@@ -149,20 +154,23 @@ const tabs = createResource({
   },
 })
 
-watch(
+onMounted(() => {
-  () => show.value,
+  _contact.doc = {}
-  (value) => {
+  Object.assign(_contact.doc, props.contact.data || props.contact)
-    if (!value) return
+})
-    nextTick(() => {
-      _contact.value = { ...props.contact.data }
-    })
-  },
-)
-
-const showQuickEntryModal = defineModel('showQuickEntryModal')
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
+  quickEntryProps.value = { doctype: 'Contact' }
+  nextTick(() => (show.value = false))
+}
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
   nextTick(() => (show.value = false))
 }
 </script>

frontend/src/components/Modals/CreateDocumentModal.vue

@@ -15,10 +15,14 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
@@ -48,6 +52,7 @@ import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
+import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
 import { FeatherIcon, createResource, ErrorMessage, call } from 'frappe-ui'
 import { ref, nextTick, watch, computed } from 'vue'
 
@@ -62,7 +67,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['showQuickEntryModal', 'callback'])
+const emit = defineEmits(['callback'])
 
 const { isManager } = usersStore()
 
@@ -139,9 +144,8 @@ watch(
 )
 
 function openQuickEntryModal() {
-  emit('showQuickEntryModal', props.doctype)
+  showQuickEntryModal.value = true
-  nextTick(() => {
+  quickEntryProps.value = { doctype: props.doctype }
-    show.value = false
+  nextTick(() => (show.value = false))
-  })
 }
 </script>

frontend/src/components/Modals/DealModal.vue

@@ -15,10 +15,14 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
@@ -50,7 +54,7 @@
             ref="fieldLayoutRef"
             v-if="tabs.data?.length"
             :tabs="tabs.data"
-            :data="deal"
+            :data="deal.doc"
             doctype="CRM Deal"
           />
           <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
@@ -76,9 +80,11 @@ import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { isMobileView } from '@/composables/settings'
+import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
+import { useDocument } from '@/data/document'
 import { capture } from '@/telemetry'
 import { Switch, createResource } from 'frappe-ui'
-import { computed, ref, reactive, onMounted, nextTick, watch } from 'vue'
+import { computed, ref, onMounted, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -92,24 +98,7 @@ const show = defineModel()
 const router = useRouter()
 const error = ref(null)
 
-const deal = reactive({
+const { document: deal, triggerOnChange } = useDocument('CRM Deal')
-  organization: '',
-  organization_name: '',
-  website: '',
-  no_of_employees: '',
-  territory: '',
-  annual_revenue: '',
-  industry: '',
-  contact: '',
-  salutation: '',
-  first_name: '',
-  last_name: '',
-  email: '',
-  mobile_no: '',
-  gender: '',
-  status: '',
-  deal_owner: '',
-})
 
 const hasOrganizationSections = ref(true)
 const hasContactSections = ref(true)
@@ -165,11 +154,11 @@ const tabs = createResource({
             if (field.fieldname == 'status') {
               field.fieldtype = 'Select'
               field.options = dealStatuses.value
-              field.prefix = getDealStatus(deal.status).color
+              field.prefix = getDealStatus(deal.doc.status).color
             }
 
             if (field.fieldtype === 'Table') {
-              deal[field.fieldname] = []
+              deal.doc[field.fieldname] = []
             }
           })
         })
@@ -179,47 +168,50 @@ const tabs = createResource({
 })
 
 const dealStatuses = computed(() => {
-  let statuses = statusOptions('deal')
+  let statuses = statusOptions('deal', null, [], triggerOnChange)
-  if (!deal.status) {
+  if (!deal.doc.status) {
-    deal.status = statuses[0].value
+    deal.doc.status = statuses[0].value
   }
   return statuses
 })
 
 function createDeal() {
-  if (deal.website && !deal.website.startsWith('http')) {
+  if (deal.doc.website && !deal.doc.website.startsWith('http')) {
-    deal.website = 'https://' + deal.website
+    deal.doc.website = 'https://' + deal.doc.website
   }
   if (chooseExistingContact.value) {
-    deal['first_name'] = null
+    deal.doc['first_name'] = null
-    deal['last_name'] = null
+    deal.doc['last_name'] = null
-    deal['email'] = null
+    deal.doc['email'] = null
-    deal['mobile_no'] = null
+    deal.doc['mobile_no'] = null
-  } else deal['contact'] = null
+  } else deal.doc['contact'] = null
 
   createResource({
     url: 'crm.fcrm.doctype.crm_deal.crm_deal.create_deal',
-    params: { args: deal },
+    params: { args: deal.doc },
     auto: true,
     validate() {
       error.value = null
-      if (deal.annual_revenue) {
+      if (deal.doc.annual_revenue) {
-        if (typeof deal.annual_revenue === 'string') {
+        if (typeof deal.doc.annual_revenue === 'string') {
-          deal.annual_revenue = deal.annual_revenue.replace(/,/g, '')
+          deal.doc.annual_revenue = deal.doc.annual_revenue.replace(/,/g, '')
-        } else if (isNaN(deal.annual_revenue)) {
+        } else if (isNaN(deal.doc.annual_revenue)) {
           error.value = __('Annual Revenue should be a number')
           return error.value
         }
       }
-      if (deal.mobile_no && isNaN(deal.mobile_no.replace(/[-+() ]/g, ''))) {
+      if (
+        deal.doc.mobile_no &&
+        isNaN(deal.doc.mobile_no.replace(/[-+() ]/g, ''))
+      ) {
         error.value = __('Mobile No should be a number')
         return error.value
       }
-      if (deal.email && !deal.email.includes('@')) {
+      if (deal.doc.email && !deal.doc.email.includes('@')) {
         error.value = __('Invalid Email')
         return error.value
       }
-      if (!deal.status) {
+      if (!deal.doc.status) {
         error.value = __('Status is required')
         return error.value
       }
@@ -242,22 +234,21 @@ function createDeal() {
   })
 }
 
-const showQuickEntryModal = defineModel('quickEntry')
-
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
-  nextTick(() => {
+  quickEntryProps.value = { doctype: 'CRM Deal' }
-    show.value = false
+  nextTick(() => (show.value = false))
-  })
 }
 
 onMounted(() => {
-  Object.assign(deal, props.defaults)
+  deal.doc = { no_of_employees: '1-10' }
-  if (!deal.deal_owner) {
+  Object.assign(deal.doc, props.defaults)
-    deal.deal_owner = getUser().name
+
+  if (!deal.doc.deal_owner) {
+    deal.doc.deal_owner = getUser().name
   }
-  if (!deal.status && dealStatuses.value[0].value) {
+  if (!deal.doc.status && dealStatuses.value[0].value) {
-    deal.status = dealStatuses.value[0].value
+    deal.doc.status = dealStatuses.value[0].value
   }
 })
 </script>

frontend/src/components/Modals/GlobalModals.vue

@@ -4,19 +4,24 @@
     v-model="showCreateDocumentModal"
     :doctype="createDocumentDoctype"
     :data="createDocumentData"
-    @showQuickEntryModal="(dt) => openQuickEntryModal(dt)"
     @callback="(data) => createDocumentCallback(data)"
   />
   <QuickEntryModal
     v-if="showQuickEntryModal"
     v-model="showQuickEntryModal"
-    :doctype="quickEntryDoctype"
+    v-bind="quickEntryProps"
+  />
+  <AddressModal
+    v-if="showAddressModal"
+    v-model="showAddressModal"
+    v-bind="addressProps"
   />
   <AboutModal v-model="showAboutModal" />
 </template>
 <script setup>
 import CreateDocumentModal from '@/components/Modals/CreateDocumentModal.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
 import AboutModal from '@/components/Modals/AboutModal.vue'
 import {
   showCreateDocumentModal,
@@ -24,14 +29,11 @@ import {
   createDocumentData,
   createDocumentCallback,
 } from '@/composables/document'
-import { showAboutModal } from '@/composables/settings'
+import {
-import { ref } from 'vue'
+  showQuickEntryModal,
-
+  quickEntryProps,
-const showQuickEntryModal = ref(false)
+  showAddressModal,
-const quickEntryDoctype = ref('')
+  addressProps,
-
+  showAboutModal
-function openQuickEntryModal(dt) {
+} from '@/composables/modals'
-  showQuickEntryModal.value = true
-  quickEntryDoctype.value = dt
-}
 </script>

frontend/src/components/Modals/LeadModal.vue

@@ -15,15 +15,19 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
         <div>
-          <FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="lead" />
+          <FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="lead.doc" />
           <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
         </div>
       </div>
@@ -48,10 +52,12 @@ import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { sessionStore } from '@/stores/session'
 import { isMobileView } from '@/composables/settings'
+import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
 import { capture } from '@/telemetry'
 import { createResource } from 'frappe-ui'
 import { useOnboarding } from 'frappe-ui/frappe'
-import { computed, onMounted, ref, reactive, nextTick } from 'vue'
+import { useDocument } from '@/data/document'
+import { computed, onMounted, ref, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -68,6 +74,16 @@ const router = useRouter()
 const error = ref(null)
 const isLeadCreating = ref(false)
 
+const { document: lead, triggerOnChange } = useDocument('CRM Lead')
+
+const leadStatuses = computed(() => {
+  let statuses = statusOptions('lead', null, [], triggerOnChange)
+  if (!lead.doc.status) {
+    lead.doc.status = statuses?.[0]?.value
+  }
+  return statuses
+})
+
 const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['QuickEntry', 'CRM Lead'],
@@ -81,11 +97,11 @@ const tabs = createResource({
             if (field.fieldname == 'status') {
               field.fieldtype = 'Select'
               field.options = leadStatuses.value
-              field.prefix = getLeadStatus(lead.status).color
+              field.prefix = getLeadStatus(lead.doc.status).color
             }
 
             if (field.fieldtype === 'Table') {
-              lead[field.fieldname] = []
+              lead.doc[field.fieldname] = []
             }
           })
         })
@@ -94,23 +110,6 @@ const tabs = createResource({
   },
 })
 
-const lead = reactive({
-  salutation: '',
-  first_name: '',
-  last_name: '',
-  email: '',
-  mobile_no: '',
-  gender: '',
-  organization: '',
-  website: '',
-  no_of_employees: '',
-  territory: '',
-  annual_revenue: '',
-  industry: '',
-  status: '',
-  lead_owner: '',
-})
-
 const createLead = createResource({
   url: 'frappe.client.insert',
   makeParams(values) {
@@ -123,43 +122,38 @@ const createLead = createResource({
   },
 })
 
-const leadStatuses = computed(() => {
-  let statuses = statusOptions('lead')
-  if (!lead.status) {
-    lead.status = statuses?.[0]?.value
-  }
-  return statuses
-})
-
 function createNewLead() {
-  if (lead.website && !lead.website.startsWith('http')) {
+  if (lead.doc.website && !lead.doc.website.startsWith('http')) {
-    lead.website = 'https://' + lead.website
+    lead.doc.website = 'https://' + lead.doc.website
   }
 
-  createLead.submit(lead, {
+  createLead.submit(lead.doc, {
     validate() {
       error.value = null
-      if (!lead.first_name) {
+      if (!lead.doc.first_name) {
         error.value = __('First Name is mandatory')
         return error.value
       }
-      if (lead.annual_revenue) {
+      if (lead.doc.annual_revenue) {
-        if (typeof lead.annual_revenue === 'string') {
+        if (typeof lead.doc.annual_revenue === 'string') {
-          lead.annual_revenue = lead.annual_revenue.replace(/,/g, '')
+          lead.doc.annual_revenue = lead.doc.annual_revenue.replace(/,/g, '')
-        } else if (isNaN(lead.annual_revenue)) {
+        } else if (isNaN(lead.doc.annual_revenue)) {
           error.value = __('Annual Revenue should be a number')
           return error.value
         }
       }
-      if (lead.mobile_no && isNaN(lead.mobile_no.replace(/[-+() ]/g, ''))) {
+      if (
+        lead.doc.mobile_no &&
+        isNaN(lead.doc.mobile_no.replace(/[-+() ]/g, ''))
+      ) {
         error.value = __('Mobile No should be a number')
         return error.value
       }
-      if (lead.email && !lead.email.includes('@')) {
+      if (lead.doc.email && !lead.doc.email.includes('@')) {
         error.value = __('Invalid Email')
         return error.value
       }
-      if (!lead.status) {
+      if (!lead.doc.status) {
         error.value = __('Status is required')
         return error.value
       }
@@ -185,22 +179,21 @@ function createNewLead() {
   })
 }
 
-const showQuickEntryModal = defineModel('quickEntry')
-
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
-  nextTick(() => {
+  quickEntryProps.value = { doctype: 'CRM Lead' }
-    show.value = false
+  nextTick(() => (show.value = false))
-  })
 }
 
 onMounted(() => {
-  Object.assign(lead, props.defaults)
+  lead.doc = { no_of_employees: '1-10' }
-  if (!lead.lead_owner) {
+  Object.assign(lead.doc, props.defaults)
-    lead.lead_owner = getUser().name
+
+  if (!lead.doc?.lead_owner) {
+    lead.doc.lead_owner = getUser().name
   }
-  if (!lead.status && leadStatuses.value[0]?.value) {
+  if (!lead.doc?.status && leadStatuses.value[0]?.value) {
-    lead.status = leadStatuses.value[0].value
+    lead.doc.status = leadStatuses.value[0].value
   }
 })
 </script>

frontend/src/components/Modals/OrganizationModal.vue

@@ -9,20 +9,40 @@
             </h3>
           </div>
           <div class="flex items-center gap-1">
-            <Button v-if="isManager() && !isMobileView" variant="ghost" class="w-7" @click="openQuickEntryModal">
+            <Button
-              <EditIcon class="w-4 h-4" />
+              v-if="isManager() && !isMobileView"
+              variant="ghost"
+              class="w-7"
+              @click="openQuickEntryModal"
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="w-4 h-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
-        <FieldLayout v-if="tabs.data?.length" :tabs="tabs.data" :data="_organization" doctype="CRM Organization" />
+        <FieldLayout
+          v-if="tabs.data?.length"
+          :tabs="tabs.data"
+          :data="organization.doc"
+          doctype="CRM Organization"
+        />
         <ErrorMessage class="mt-8" v-if="error" :message="__(error)" />
       </div>
       <div class="px-4 pt-4 pb-7 sm:px-6">
         <div class="space-y-2">
-          <Button class="w-full" variant="solid" :label="__('Create')" :loading="loading" @click="createOrganization" />
+          <Button
+            class="w-full"
+            variant="solid"
+            :label="__('Create')"
+            :loading="loading"
+            @click="createOrganization"
+          />
         </div>
       </div>
     </template>
@@ -34,56 +54,59 @@ import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
+import {
+  showQuickEntryModal,
+  quickEntryProps,
+  showAddressModal,
+  addressProps,
+} from '@/composables/modals'
+import { useDocument } from '@/data/document'
 import { capture } from '@/telemetry'
 import { call, FeatherIcon, createResource } from 'frappe-ui'
-import { ref, nextTick, watch } from 'vue'
+import { ref, nextTick, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
   options: {
     type: Object,
     default: {
       redirect: true,
-      afterInsert: () => { },
+      afterInsert: () => {},
     },
   },
 })
 
-const emit = defineEmits(['openAddressModal'])
-
 const { isManager } = usersStore()
 
 const router = useRouter()
 const show = defineModel()
-const organization = defineModel('organization')
 
 const loading = ref(false)
-const title = ref(null)
-
-let _organization = ref({
-  organization_name: '',
-  website: '',
-  annual_revenue: '',
-  no_of_employees: '1-10',
-  industry: '',
-})
-
-let doc = ref({})
 const error = ref(null)
 
+const { document: organization } = useDocument('CRM Organization')
+
 async function createOrganization() {
-  const doc = await call('frappe.client.insert', {
+  const doc = await call(
-    doc: {
+    'frappe.client.insert',
-      doctype: 'CRM Organization',
+    {
-      ..._organization.value,
+      doc: {
+        doctype: 'CRM Organization',
+        ...organization.doc,
+      },
     },
-  }, {
+    {
-    onError: (err) => {
+      onError: (err) => {
-      if (err.error.exc_type == 'ValidationError') {
+        if (err.error.exc_type == 'ValidationError') {
-        error.value = err.error?.messages?.[0]
+          error.value = err.error?.messages?.[0]
-      }
+        }
-    }
+      },
-  })
+    },
+  )
   loading.value = false
   if (doc.name) {
     capture('organization_created')
@@ -97,8 +120,6 @@ function handleOrganizationUpdate(doc) {
       name: 'Organization',
       params: { organizationId: doc.name },
     })
-  } else {
-    organization.value?.reload?.()
   }
   show.value = false
   props.options.afterInsert && props.options.afterInsert(doc)
@@ -116,17 +137,13 @@ const tabs = createResource({
           column.fields.forEach((field) => {
             if (field.fieldname == 'address') {
               field.create = (value, close) => {
-                _organization.value.address = value
+                organization.doc.address = value
-                emit('openAddressModal')
+                openAddressModal()
-                show.value = false
                 close()
               }
-              field.edit = (address) => {
+              field.edit = (address) => openAddressModal(address)
-                emit('openAddressModal', address)
-                show.value = false
-              }
             } else if (field.fieldtype === 'Table') {
-              _organization.value[field.fieldname] = []
+              organization.doc[field.fieldname] = []
             }
           })
         })
@@ -135,23 +152,23 @@ const tabs = createResource({
   },
 })
 
-watch(
+onMounted(() => {
-  () => show.value,
+  organization.doc = { no_of_employees: '1-10' }
-  (value) => {
+  Object.assign(organization.doc, props.data)
-    if (!value) return
+})
-    nextTick(() => {
-      // TODO: Issue with FormControl
-      // title.value.el.focus()
-      doc.value = organization.value?.doc || organization.value || {}
-      _organization.value = { ...doc.value }
-    })
-  },
-)
-
-const showQuickEntryModal = defineModel('showQuickEntryModal')
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
+  quickEntryProps.value = { doctype: 'CRM Organization' }
+  nextTick(() => (show.value = false))
+}
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
   nextTick(() => (show.value = false))
 }
 </script>

frontend/src/components/Settings/ProfileImageEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <FileUploader
     @success="(file) => setUserImage(file.file_url)"
-    :validateFile="validateFile"
+    :validateFile="validateIsImageFile"
   >
     <template v-slot="{ file, progress, error, uploading, openFileSelector }">
       <div class="flex flex-col items-center">
@@ -48,17 +48,11 @@
 </template>
 <script setup>
 import { FileUploader } from 'frappe-ui'
+import { validateIsImageFile } from '@/utils';
 
 const profile = defineModel()
 
 function setUserImage(url) {
   profile.value.user_image = url
 }
-
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg'].includes(extn)) {
-    return 'Only PNG and JPG images are allowed'
-  }
-}
 </script>

frontend/src/components/Settings/Settings.vue

@@ -110,7 +110,7 @@ const tabs = computed(() => {
       ],
     },
     {
-      label: __('Integrations'),
+      label: __('Integrations', null, 'FCRM'),
       items: [
         {
           label: __('Telephony'),

frontend/src/components/SidePanelLayout.vue

@@ -25,7 +25,9 @@
                   class="w-7 mr-2"
                   @click="showSidePanelModal = true"
                 >
-                  <EditIcon class="h-4 w-4" />
+                  <template #icon>
+                    <EditIcon />
+                  </template>
                 </Button>
               </slot>
             </template>
@@ -44,18 +46,21 @@
                   >
                     <Tooltip :text="__(field.label)" :hoverDelay="1">
                       <div
-                        class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5"
+                        class="w-[35%] min-w-20 shrink-0 flex items-center gap-0.5"
                       >
-                        {{ __(field.label) }}
+                        <div class="truncate text-sm text-ink-gray-5">
-                        <span
+                          {{ __(field.label) }}
+                        </div>
+                        <div
                           v-if="
                             field.reqd ||
                             (field.mandatory_depends_on &&
                               field.mandatory_via_depends_on)
                           "
                           class="text-ink-red-2"
-                          >*</span
                         >
+                          *
+                        </div>
                       </div>
                     </Tooltip>
                     <div class="flex items-center justify-between w-[65%]">
@@ -245,6 +250,7 @@
                             "
                             :placeholder="field.placeholder"
                             placement="left-start"
+                            :hideIcon="true"
                             @change="(v) => fieldChange(v, field)"
                           />
                         </div>
@@ -258,6 +264,7 @@
                             :formatter="(date) => getFormat(date, '', true)"
                             :placeholder="field.placeholder"
                             placement="left-start"
+                            :hideIcon="true"
                             @change="(v) => fieldChange(v, field)"
                           />
                         </div>
@@ -417,13 +424,13 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['afterFieldChange', 'reload'])
+
 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
   getMeta(props.doctype)
 
 const { isManager, getUser } = usersStore()
 
-const emit = defineEmits(['reload'])
-
 const showSidePanelModal = ref(false)
 
 let document = { doc: {} }
@@ -489,11 +496,15 @@ function parsedField(field) {
 async function fieldChange(value, df) {
   if (props.preview) return
 
-  document.doc[df.fieldname] = value
+  await triggerOnChange(df.fieldname, value)
 
-  await triggerOnChange(df.fieldname)
+  document.save.submit(null, {
-
+    onSuccess: () => {
-  document.save.submit()
+      emit('afterFieldChange', {
+        [df.fieldname]: value,
+      })
+    },
+  })
 }
 
 function parsedSection(section, editButtonAdded) {

frontend/src/components/SidePanelLayoutEditor.vue

@@ -41,7 +41,9 @@
                 variant="ghost"
                 @click="section.editingLabel = true"
               >
-                <EditIcon class="h-3.5" />
+                <template #icon>
+                  <EditIcon class="h-3.5" />
+                </template>
               </Button>
               <Button
                 v-if="section.editable !== false"

frontend/src/components/UserDropdown.vue

@@ -55,11 +55,8 @@ import Apps from '@/components/Apps.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
 import { getSettings } from '@/stores/settings'
-import {
+import { showSettings, isMobileView } from '@/composables/settings'
-  showSettings,
+import { showAboutModal } from '@/composables/modals'
-  isMobileView,
-  showAboutModal,
-} from '@/composables/settings'
 import { confirmLoginToFrappeCloud } from '@/composables/frappecloud'
 import { Dropdown } from 'frappe-ui'
 import { theme, toggleTheme } from '@/stores/theme'

frontend/src/components/ViewControls.vue

@@ -566,7 +566,7 @@ async function exportRows() {
     page_length = list.value.data.total_count
   }
 
-  let url = `/api/method/frappe.desk.reportview.export_query?file_format_type=${export_type.value}&title=${props.doctype}&doctype=${props.doctype}&fields=${fields}&filters=${filters}&order_by=${order_by}&page_length=${page_length}&start=0&view=Report&with_comment_count=1`
+  let url = `/api/method/frappe.desk.reportview.export_query?file_format_type=${export_type.value}&title=${props.doctype}&doctype=${props.doctype}&fields=${fields}&filters=${encodeURIComponent(filters)}&order_by=${order_by}&page_length=${page_length}&start=0&view=Report&with_comment_count=1`
 
   // Add selected items parameter if rows are selected
   if (selectedRows.value?.length && !export_all.value) {
@@ -752,6 +752,7 @@ const quickFilterOptions = computed(() => {
   let fields = getFields()
   if (!fields) return []
 
+  let existingQuickFilters = newQuickFilters.value.map((f) => f.fieldname)
   let restrictedFieldtypes = [
     'Tab Break',
     'Section Break',
@@ -766,6 +767,7 @@ const quickFilterOptions = computed(() => {
   ]
   let options = fields
     .filter((f) => f.label && !restrictedFieldtypes.includes(f.fieldtype))
+    .filter((f) => !existingQuickFilters.includes(f.fieldname))
     .map((field) => ({
       label: field.label,
       value: field.fieldname,

frontend/src/composables/modals.js

@@ -0,0 +1,9 @@
+import { ref } from 'vue';
+
+export const showQuickEntryModal = ref(false);
+export const quickEntryProps = ref({});
+
+export const showAddressModal = ref(false);
+export const addressProps = ref({});
+
+export const showAboutModal = ref(false);

frontend/src/composables/settings.js

@@ -42,5 +42,3 @@ export const isMobileView = computed(() => window.innerWidth < 768)
 
 export const showSettings = ref(false)
 export const activeSettingsPage = ref('')
-
-export const showAboutModal = ref(false)

frontend/src/data/document.js

@@ -1,6 +1,7 @@
 import { getScript } from '@/data/script'
-import { runSequentially } from '@/utils'
+import { runSequentially, parseAssignees } from '@/utils'
-import { createDocumentResource, toast } from 'frappe-ui'
+import { createDocumentResource, createResource, toast } from 'frappe-ui'
+import { reactive } from 'vue'
 
 const documentsCache = {}
 const controllersCache = {}
@@ -10,63 +11,139 @@ export function useDocument(doctype, docname) {
 
   documentsCache[doctype] = documentsCache[doctype] || {}
 
-  if (!documentsCache[doctype][docname]) {
+  if (!documentsCache[doctype][docname || '']) {
-    documentsCache[doctype][docname] = createDocumentResource({
+    if (docname) {
-      doctype: doctype,
+      documentsCache[doctype][docname] = createDocumentResource({
-      name: docname,
+        doctype: doctype,
-      onSuccess: () => setupFormScript(),
+        name: docname,
-      setValue: {
+        onSuccess: async () => await setupFormScript(),
-        onSuccess: () => {
+        setValue: {
-          toast.success(__('Document updated successfully'))
+          onSuccess: () => {
+            triggerOnSave()
+            toast.success(__('Document updated successfully'))
+          },
+          onError: (err) => {
+            let errorMessage = __('Error updating document')
+            if (err.exc_type == 'MandatoryError') {
+              const fieldName = err.messages
+                .map((msg) => msg.split(': ')[2].trim())
+                .join(', ')
+              errorMessage = __('Mandatory field error: {0}', [fieldName])
+            }
+            toast.error(errorMessage)
+            console.error(err)
+          },
         },
-        onError: (err) => {
+      })
-          toast.error(__('Error updating document'))
+    } else {
-          console.error(err)
+      documentsCache[doctype][''] = reactive({
-        },
+        doc: {},
-      },
+      })
-    })
+      setupFormScript()
+    }
   }
 
-  function setupFormScript() {
+  const assignees = createResource({
-    if (controllersCache[doctype]?.[docname]) return
+    url: 'crm.api.doc.get_assigned_users',
+    cache: `assignees:${doctype}:${docname}`,
+    auto: docname ? true : false,
+    params: {
+      doctype: doctype,
+      name: docname,
+    },
+    transform: (data) => parseAssignees(data),
+  })
+
+  async function setupFormScript() {
+    if (
+      controllersCache[doctype] &&
+      typeof controllersCache[doctype][docname || ''] === 'object'
+    ) {
+      return
+    }
 
     if (!controllersCache[doctype]) {
       controllersCache[doctype] = {}
     }
 
-    controllersCache[doctype][docname] = setupScript(
+    controllersCache[doctype][docname || ''] = {}
-      documentsCache[doctype][docname],
+
+    const controllersArray = await setupScript(
+      documentsCache[doctype][docname || ''],
     )
+
+    if (!controllersArray || controllersArray.length === 0) return
+
+    const organizedControllers = {}
+    for (const controller of controllersArray) {
+      const controllerKey = controller.constructor.name // e.g., "CRMLead", "CRMProducts"
+      if (!organizedControllers[controllerKey]) {
+        organizedControllers[controllerKey] = []
+      }
+      organizedControllers[controllerKey].push(controller)
+    }
+    controllersCache[doctype][docname || ''] = organizedControllers
+
+    triggerOnLoad()
   }
 
   function getControllers(row = null) {
     const _doctype = row?.doctype || doctype
-    return (controllersCache[doctype]?.[docname] || []).filter(
+    const controllerKey = _doctype.replace(/\s+/g, '')
-      (c) => c.constructor.name === _doctype.replace(/\s+/g, ''),
+
-    )
+    const docControllers = controllersCache[doctype]?.[docname || '']
+
+    if (
+      typeof docControllers === 'object' &&
+      docControllers !== null &&
+      !Array.isArray(docControllers)
+    ) {
+      return docControllers[controllerKey] || []
+    }
+    return []
   }
 
-  async function triggerOnRefresh() {
+  async function triggerOnLoad() {
     const handler = async function () {
-      await this.refresh()
+      await (this.onLoad?.() || this.on_load?.() || this.onload?.())
     }
     await trigger(handler)
   }
 
-  async function triggerOnChange(fieldname, row) {
+  async function triggerOnSave() {
     const handler = async function () {
+      await (this.onSave?.() || this.on_save?.())
+    }
+    await trigger(handler)
+  }
+
+  async function triggerOnRefresh() {
+    const handler = async function () {
+      await this.refresh?.()
+    }
+    await trigger(handler)
+  }
+
+  async function triggerOnChange(fieldname, value, row) {
+    const oldValue = documentsCache[doctype][docname || ''].doc[fieldname]
+    documentsCache[doctype][docname || ''].doc[fieldname] = value
+
+    const handler = async function () {
+      this.value = value
+      this.oldValue = oldValue
       if (row) {
         this.currentRowIdx = row.idx
-        this.value = row[fieldname]
-        this.oldValue = getOldValue(fieldname, row)
-      } else {
-        this.value = documentsCache[doctype][docname].doc[fieldname]
-        this.oldValue = getOldValue(fieldname)
       }
       await this[fieldname]?.()
     }
 
-    await trigger(handler, row)
+    try {
+      await trigger(handler, row)
+    } catch (error) {
+      documentsCache[doctype][docname || ''].doc[fieldname] = oldValue
+      console.error(handler)
+      throw error
+    }
   }
 
   async function triggerOnRowAdd(row) {
@@ -97,6 +174,23 @@ export function useDocument(doctype, docname) {
     await trigger(handler, rows[0])
   }
 
+  async function triggerOnCreateLead() {
+    const args = Array.from(arguments)
+    const handler = async function () {
+      await (this.onCreateLead?.(...args) || this.on_create_lead?.(...args))
+    }
+    await trigger(handler)
+  }
+
+  async function triggerConvertToDeal() {
+    const args = Array.from(arguments)
+    const handler = async function () {
+      await (this.convertToDeal?.(...args) ||
+        this.on_convert_to_deal?.(...args))
+    }
+    await trigger(handler)
+  }
+
   async function trigger(taskFn, row = null) {
     const controllers = getControllers(row)
     if (!controllers.length) return
@@ -109,9 +203,9 @@ export function useDocument(doctype, docname) {
   }
 
   function getOldValue(fieldname, row) {
-    if (!documentsCache[doctype][docname]) return ''
+    if (!documentsCache[doctype][docname || '']) return ''
 
-    const document = documentsCache[doctype][docname]
+    const document = documentsCache[doctype][docname || '']
     const oldDoc = document.originalDoc
 
     if (row?.name) {
@@ -124,11 +218,17 @@ export function useDocument(doctype, docname) {
   }
 
   return {
-    document: documentsCache[doctype][docname],
+    document: documentsCache[doctype][docname || ''],
+    assignees,
+    getControllers,
+    triggerOnLoad,
+    triggerOnSave,
+    triggerOnRefresh,
     triggerOnChange,
     triggerOnRowAdd,
     triggerOnRowRemove,
-    triggerOnRefresh,
     setupFormScript,
+    triggerOnCreateLead,
+    triggerConvertToDeal,
   }
 }

frontend/src/data/script.js

@@ -20,15 +20,23 @@ export function getScript(doctype, view = 'Form') {
         doctypeScripts[doctype][script.name] = script || {}
       }
     },
+    onError: (err) => {
+      console.error(
+        `Error loading CRM Form Scripts for ${doctype} (view: ${view}):`,
+        err,
+      )
+    },
   })
 
   if (!doctypeScripts[doctype] && !scripts.loading) {
     scripts.fetch()
   }
 
-  function setupScript(document, helpers = {}) {
+  async function setupScript(document, helpers = {}) {
-    let scripts = doctypeScripts[doctype]
+    await scripts.list.promise
-    if (!scripts) return null
+
+    let scriptDefs = doctypeScripts[doctype]
+    if (!scriptDefs || Object.keys(scriptDefs).length === 0) return null
 
     const { $dialog, $socket, makeCall } = globalStore()
 
@@ -38,11 +46,16 @@ export function getScript(doctype, view = 'Form') {
     helpers.router = router
     helpers.call = call
 
+    helpers.throwError = (message) => {
+      toast.error(message || __('An error occurred'))
+      throw new Error(message || __('An error occurred'))
+    }
+
     helpers.crm = {
       makePhoneCall: makeCall,
     }
 
-    return setupMultipleFormControllers(scripts, document, helpers)
+    return setupMultipleFormControllers(scriptDefs, document, helpers)
   }
 
   function setupMultipleFormControllers(scriptStrings, document, helpers) {
@@ -108,8 +121,13 @@ export function getScript(doctype, view = 'Form') {
     parentInstance = null,
     isChildDoctype = false,
   ) {
+    document.actions = document.actions || []
+    document.statuses = document.statuses || []
+
     let instance = new FormClass()
 
+    // Store the original document context to be used by properties like 'actions'
+    instance._originalDocumentContext = document
     instance._isChildDoctype = isChildDoctype
 
     for (const key in document) {
@@ -126,10 +144,10 @@ export function getScript(doctype, view = 'Form') {
       return meta[doctype]
     }
 
-    setupHelperMethods(FormClass, document)
+    const getDoc = () => document.doc
 
     if (isChildDoctype) {
-      instance.doc = createDocProxy(document.doc, parentInstance, instance)
+      instance.doc = createDocProxy(getDoc, parentInstance, instance)
 
       if (!parentInstance._childInstances) {
         parentInstance._childInstances = []
@@ -137,22 +155,21 @@ export function getScript(doctype, view = 'Form') {
 
       parentInstance._childInstances.push(instance)
     } else {
-      instance.doc = createDocProxy(document.doc, instance)
+      instance.doc = createDocProxy(getDoc, instance)
     }
 
     return instance
   }
 
-  function setupHelperMethods(FormClass, document) {
+  function setupHelperMethods(FormClass) {
     if (typeof FormClass.prototype.getRow !== 'function') {
       FormClass.prototype.getRow = function (parentField, idx) {
-        let data = document.doc
         idx = idx || this.currentRowIdx
 
         let dt = null
 
         if (this instanceof Array) {
-          const { getFields } = getMeta(data.doctype)
+          const { getFields } = getMeta(this.doc.doctype)
           let fields = getFields()
           let field = fields.find((f) => f.fieldname === parentField)
           dt = field?.options?.replace(/\s+/g, '')
@@ -162,13 +179,13 @@ export function getScript(doctype, view = 'Form') {
           }
         }
 
-        if (!data[parentField]) {
+        if (!this.doc[parentField]) {
           console.warn(
             __('⚠️ No data found for parent field: {0}', [parentField]),
           )
           return null
         }
-        const row = data[parentField].find((r) => r.idx === idx)
+        const row = this.doc[parentField].find((r) => r.idx === idx)
 
         if (!row) {
           console.warn(
@@ -180,7 +197,7 @@ export function getScript(doctype, view = 'Form') {
           return null
         }
 
-        row.parent = row.parent || data.name
+        row.parent = row.parent || this.doc.name
 
         if (this instanceof Array && dt) {
           return createDocProxy(
@@ -192,6 +209,76 @@ export function getScript(doctype, view = 'Form') {
         return createDocProxy(row, this)
       }
     }
+
+    if (!Object.prototype.hasOwnProperty.call(FormClass.prototype, 'actions')) {
+      Object.defineProperty(FormClass.prototype, 'actions', {
+        configurable: true,
+        enumerable: true,
+        get() {
+          if (!this._originalDocumentContext) {
+            console.warn(
+              'CRM Script: _originalDocumentContext not found on instance for actions getter.',
+            )
+            return []
+          }
+
+          return this._originalDocumentContext.actions
+        },
+        set(newValue) {
+          if (!this._originalDocumentContext) {
+            console.warn(
+              'CRM Script: _originalDocumentContext not found on instance for actions setter.',
+            )
+            return
+          }
+          if (!Array.isArray(newValue)) {
+            console.warn(
+              'CRM Script: "actions" property must be an array. Value was not set.',
+              newValue,
+            )
+            this._originalDocumentContext.actions = []
+            return
+          }
+          this._originalDocumentContext.actions = newValue
+        },
+      })
+    }
+
+    if (
+      !Object.prototype.hasOwnProperty.call(FormClass.prototype, 'statuses')
+    ) {
+      Object.defineProperty(FormClass.prototype, 'statuses', {
+        configurable: true,
+        enumerable: true,
+        get() {
+          if (!this._originalDocumentContext) {
+            console.warn(
+              'CRM Script: _originalDocumentContext not found on instance for statuses getter.',
+            )
+            return []
+          }
+
+          return this._originalDocumentContext.statuses
+        },
+        set(newValue) {
+          if (!this._originalDocumentContext) {
+            console.warn(
+              'CRM Script: _originalDocumentContext not found on instance for statuses setter.',
+            )
+            return
+          }
+          if (!Array.isArray(newValue)) {
+            console.warn(
+              'CRM Script: "statuses" property must be an array. Value was not set.',
+              newValue,
+            )
+            this._originalDocumentContext.statuses = []
+            return
+          }
+          this._originalDocumentContext.statuses = newValue
+        },
+      })
+    }
   }
 
   // utility function to setup a form controller
@@ -220,46 +307,76 @@ export function getScript(doctype, view = 'Form') {
     const FormClass = new Function(...helperKeys, wrappedScript)(
       ...helperValues,
     )
+
+    setupHelperMethods(FormClass)
+
     return FormClass
   }
 
-  function createDocProxy(data, instance, childInstance = null) {
+  function createDocProxy(source, instance, childInstance = null) {
-    return new Proxy(data, {
+    const isFunction = typeof source === 'function'
-      get(target, prop) {
+    const getCurrentData = () => (isFunction ? source() : source)
-        if (prop === 'trigger') {
+
-          if ('trigger' in data) {
+    return new Proxy(
-            console.warn(
+      {},
-              __(
+      {
-                '⚠️ Avoid using "trigger" as a field name — it conflicts with the built-in trigger() method.',
+        get(target, prop) {
-              ),
+          const currentDocData = getCurrentData()
+          if (!currentDocData) return undefined
+
+          if (prop === 'trigger') {
+            if (currentDocData && 'trigger' in currentDocData) {
+              console.warn(
+                __(
+                  '⚠️ Avoid using "trigger" as a field name — it conflicts with the built-in trigger() method.',
+                ),
+              )
+            }
+
+            return (methodName, ...args) => {
+              const method = instance[methodName]
+              if (typeof method === 'function') {
+                return method.apply(instance, args)
+              } else {
+                console.warn(
+                  __('⚠️ Method "{0}" not found in class.', [methodName]),
+                )
+              }
+            }
+          }
+
+          if (prop === 'getRow') {
+            return instance.getRow.bind(
+              childInstance || instance._childInstances || instance,
             )
           }
 
-          return (methodName, ...args) => {
+          return currentDocData[prop]
-            const method = instance[methodName]
+        },
-            if (typeof method === 'function') {
+        set(target, prop, value) {
-              return method.apply(instance, args)
+          const currentDocData = getCurrentData()
-            } else {
+          if (!currentDocData) return false
-              console.warn(
-                __('⚠️ Method "{0}" not found in class.', [methodName]),
-              )
-            }
-          }
-        }
 
-        if (prop === 'getRow') {
+          currentDocData[prop] = value
-          return instance.getRow.bind(
+          return true
-            childInstance || instance._childInstances || instance,
+        },
-          )
+        has(target, prop) {
-        }
+          const currentDocData = getCurrentData()
-
+          if (!currentDocData) return false
-        return target[prop]
+          return prop in currentDocData
+        },
+        ownKeys(target) {
+          const currentDocData = getCurrentData()
+          if (!currentDocData) return []
+          return Reflect.ownKeys(currentDocData)
+        },
+        getOwnPropertyDescriptor(target, prop) {
+          const currentDocData = getCurrentData()
+          if (!currentDocData) return undefined
+          return Reflect.getOwnPropertyDescriptor(currentDocData, prop)
+        },
       },
-      set(target, prop, value) {
+    )
-        target[prop] = value
-        return true
-      },
-    })
   }
 
   return {

frontend/src/pages/CallLogs.vue

@@ -62,8 +62,9 @@
     v-model:callLog="callLog"
   />
   <CallLogModal
+    v-if="showCallLogModal"
     v-model="showCallLogModal"
-    v-model:callLog="callLog"
+    :data="callLog.data"
     :options="{ afterInsert: () => callLogs.reload() }"
   />
 </template>

frontend/src/pages/Contact.vue

@@ -17,7 +17,7 @@
       <div class="border-b">
         <FileUploader
           @success="changeContactImage"
-          :validateFile="validateFile"
+          :validateFile="validateIsImageFile"
         >
           <template #default="{ openFileSelector, error }">
             <div class="flex flex-col items-start justify-start gap-4 p-5">
@@ -172,7 +172,6 @@
     :errorTitle="errorTitle"
     :errorMessage="errorMessage"
   />
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
@@ -185,8 +184,8 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
+import { formatDate, timeAgo, validateIsImageFile } from '@/utils'
-import { formatDate, timeAgo } from '@/utils'
+import { showAddressModal, addressProps } from '@/composables/modals'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
@@ -208,7 +207,6 @@ import {
 } from 'frappe-ui'
 import { ref, computed, h } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { errorMessage as _errorMessage } from '../utils'
 
 const { brand } = getSettings()
 const { $dialog, makeCall } = globalStore()
@@ -228,9 +226,7 @@ const props = defineProps({
 const route = useRoute()
 const router = useRouter()
 
-const showAddressModal = ref(false)
 const _contact = ref({})
-const _address = ref({})
 
 const errorTitle = ref('')
 const errorMessage = ref('')
@@ -298,13 +294,6 @@ usePageMeta(() => {
   }
 })
 
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
-}
-
 async function changeContactImage(file) {
   await call('frappe.client.set_value', {
     doctype: 'Contact',
@@ -493,17 +482,10 @@ function getParsedSections(_sections) {
             ...field,
             create: (value, close) => {
               _contact.value.address = value
-              _address.value = {}
+              openAddressModal()
-              showAddressModal.value = true
               close()
             },
-            edit: async (addr) => {
+            edit: (address) => openAddressModal(address),
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
           }
         } else {
           return field
@@ -562,18 +544,6 @@ async function deleteOption(doctype, name) {
   toast.success(__('Contact updated'))
 }
 
-async function updateField(fieldname, value) {
-  await call('frappe.client.set_value', {
-    doctype: 'Contact',
-    name: props.contactId,
-    fieldname,
-    value,
-  })
-  toast.success(__('Contact updated'))
-
-  contact.reload()
-}
-
 const { getFormattedCurrency } = getMeta('CRM Deal')
 
 const columns = computed(() => dealColumns)
@@ -641,4 +611,12 @@ const dealColumns = [
     width: '8rem',
   },
 ]
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+}
 </script>

frontend/src/pages/Contacts.vue

@@ -63,17 +63,10 @@
     </div>
   </div>
   <ContactModal
+    v-if="showContactModal"
     v-model="showContactModal"
-    v-model:showQuickEntryModal="showQuickEntryModal"
     :contact="{}"
-    @openAddressModal="(_address) => openAddressModal(_address)"
   />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="Contact"
-  />
-  <AddressModal v-model="showAddressModal" v-model:address="address" />
 </template>
 
 <script setup>
@@ -82,14 +75,11 @@ import CustomActions from '@/components/CustomActions.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
 import { organizationsStore } from '@/stores/organizations.js'
 import { formatDate, timeAgo } from '@/utils'
-import { call } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
@@ -97,14 +87,11 @@ const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
 const { getOrganization } = organizationsStore()
 
 const showContactModal = ref(false)
-const showQuickEntryModal = ref(false)
-const showAddressModal = ref(false)
 
 const contactsListView = ref(null)
 
 // contacts data is loaded in the ViewControls component
 const contacts = ref({})
-const address = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
@@ -166,15 +153,4 @@ const rows = computed(() => {
     return _rows
   })
 })
-
-async function openAddressModal(_address) {
-  if (_address) {
-    _address = await call('frappe.client.get', {
-      doctype: 'Address',
-      name: _address,
-    })
-  }
-  showAddressModal.value = true
-  address.value = _address || {}
-}
 </script>

frontend/src/pages/Deal.vue

@@ -12,18 +12,32 @@
         v-if="deal.data._customActions?.length"
         :actions="deal.data._customActions"
       />
+      <CustomActions
+        v-if="document.actions?.length"
+        :actions="document.actions"
+      />
       <AssignTo
-        v-model="deal.data._assignedTo"
+        v-model="assignees.data"
-        :data="deal.data"
+        :data="document.doc"
         doctype="CRM Deal"
       />
       <Dropdown
-        :options="statusOptions('deal', updateField, deal.data._customStatuses)"
+        v-if="document.doc"
+        :options="
+          statusOptions(
+            'deal',
+            document,
+            deal.data._customStatuses,
+            triggerOnChange,
+          )
+        "
       >
         <template #default="{ open }">
-          <Button :label="deal.data.status">
+          <Button :label="document.doc.status">
             <template #prefix>
-              <IndicatorIcon :class="getDealStatus(deal.data.status).color" />
+              <IndicatorIcon
+                :class="getDealStatus(document.doc.status).color"
+              />
             </template>
             <template #suffix>
               <FeatherIcon
@@ -46,6 +60,7 @@
           v-model:reload="reload"
           v-model:tabIndex="tabIndex"
           v-model="deal"
+          @afterSave="reloadAssignees"
         />
       </template>
     </Tabs>
@@ -77,42 +92,50 @@
             <Tooltip v-if="callEnabled" :text="__('Make a call')">
               <div>
                 <Button class="h-7 w-7" @click="triggerCall">
-                  <PhoneIcon class="h-4 w-4" />
+                  <template #icon>
+                    <PhoneIcon />
+                  </template>
                 </Button>
               </div>
             </Tooltip>
             <Tooltip :text="__('Send an email')">
               <div>
-                <Button class="h-7 w-7">
+                <Button
-                  <Email2Icon
+                  class="h-7 w-7"
-                    class="h-4 w-4"
+                  @click="
-                    @click="
+                    deal.data.email
-                      deal.data.email
+                      ? openEmailBox()
-                        ? openEmailBox()
+                      : toast.error(__('No email set'))
-                        : toast.error(__('No email set'))
+                  "
-                    "
+                >
-                  />
+                  <template #icon>
+                    <Email2Icon />
+                  </template>
                 </Button>
               </div>
             </Tooltip>
             <Tooltip :text="__('Go to website')">
               <div>
-                <Button class="h-7 w-7">
+                <Button
-                  <LinkIcon
+                  class="h-7 w-7"
-                    class="h-4 w-4"
+                  @click="
-                    @click="
+                    deal.data.website
-                      deal.data.website
+                      ? openWebsite(deal.data.website)
-                        ? openWebsite(deal.data.website)
+                      : toast.error(__('No website set'))
-                        : toast.error(__('No website set'))
+                  "
-                    "
+                >
-                  />
+                  <template #icon>
+                    <LinkIcon />
+                  </template>
                 </Button>
               </div>
             </Tooltip>
             <Tooltip :text="__('Attach a file')">
               <div>
                 <Button class="size-7" @click="showFilesUploader = true">
-                  <AttachmentIcon class="size-4" />
+                  <template #icon>
+                    <AttachmentIcon />
+                  </template>
                 </Button>
               </div>
             </Tooltip>
@@ -134,6 +157,7 @@
           doctype="CRM Deal"
           :docname="deal.data.name"
           @reload="sections.reload"
+          @afterFieldChange="reloadAssignees"
         >
           <template #actions="{ section }">
             <div v-if="section.name == 'contacts_section'" class="pr-2">
@@ -223,14 +247,18 @@
                               })
                             "
                           >
-                            <ArrowUpRightIcon class="h-4 w-4" />
+                            <template #icon>
+                              <ArrowUpRightIcon class="h-4 w-4" />
+                            </template>
                           </Button>
                           <Button variant="ghost" @click="toggle()">
-                            <FeatherIcon
+                            <template #icon>
-                              name="chevron-right"
+                              <FeatherIcon
-                              class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
+                                name="chevron-right"
-                              :class="{ 'rotate-90': opened }"
+                                class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
-                            />
+                                :class="{ 'rotate-90': opened }"
+                              />
+                            </template>
                           </Button>
                         </div>
                       </div>
@@ -272,14 +300,16 @@
     :errorMessage="errorMessage"
   />
   <OrganizationModal
+    v-if="showOrganizationModal"
     v-model="showOrganizationModal"
-    v-model:organization="_organization"
+    :data="_organization"
     :options="{
       redirect: false,
       afterInsert: (doc) => updateField('organization', doc.name),
     }"
   />
   <ContactModal
+    v-if="showContactModal"
     v-model="showContactModal"
     :contact="_contact"
     :options="{
@@ -330,17 +360,13 @@ import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
-import {
+import { openWebsite, setupCustomizations, copyToClipboard } from '@/utils'
-  openWebsite,
-  setupAssignees,
-  setupCustomizations,
-  copyToClipboard,
-} from '@/utils'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { statusesStore } from '@/stores/statuses'
 import { getMeta } from '@/stores/meta'
+import { useDocument } from '@/data/document'
 import { whatsappEnabled, callEnabled } from '@/composables/settings'
 import {
   createResource,
@@ -354,7 +380,7 @@ import {
   toast,
 } from 'frappe-ui'
 import { useOnboarding } from 'frappe-ui/frappe'
-import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, h, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useActiveTabManager } from '@/composables/useActiveTabManager'
 
@@ -394,7 +420,6 @@ const deal = createResource({
       organization.fetch()
     }
 
-    setupAssignees(deal)
     setupCustomizations(deal, {
       doc: data,
       $dialog,
@@ -717,6 +742,21 @@ async function deleteDeal(name) {
 const activities = ref(null)
 
 function openEmailBox() {
-  activities.value.emailBox.show = true
+  let currentTab = tabs.value[tabIndex.value]
+  if (!['Emails', 'Comments', 'Activities'].includes(currentTab.name)) {
+    activities.value.changeTabTo('emails')
+  }
+  nextTick(() => (activities.value.emailBox.show = true))
+}
+
+const { assignees, document, triggerOnChange } = useDocument(
+  'CRM Deal',
+  props.dealId,
+)
+
+function reloadAssignees(data) {
+  if (data?.hasOwnProperty('deal_owner')) {
+    assignees.reload()
+  }
 }
 </script>

frontend/src/pages/Deals.vue

@@ -241,7 +241,6 @@
   <DealModal
     v-if="showDealModal"
     v-model="showDealModal"
-    v-model:quickEntry="showQuickEntryModal"
     :defaults="defaults"
   />
   <NoteModal
@@ -258,11 +257,6 @@
     doctype="CRM Deal"
     :doc="docname"
   />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Deal"
-  />
 </template>
 
 <script setup>
@@ -282,7 +276,6 @@ import KanbanView from '@/components/Kanban/KanbanView.vue'
 import DealModal from '@/components/Modals/DealModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
@@ -306,7 +299,6 @@ const route = useRoute()
 
 const dealsListView = ref(null)
 const showDealModal = ref(false)
-const showQuickEntryModal = ref(false)
 
 const defaults = reactive({})
 

frontend/src/pages/Lead.vue

@@ -12,18 +12,32 @@
         v-if="lead.data._customActions?.length"
         :actions="lead.data._customActions"
       />
+      <CustomActions
+        v-if="document.actions?.length"
+        :actions="document.actions"
+      />
       <AssignTo
-        v-model="lead.data._assignedTo"
+        v-model="assignees.data"
-        :data="lead.data"
+        :data="document.doc"
         doctype="CRM Lead"
       />
       <Dropdown
-        :options="statusOptions('lead', updateField, lead.data._customStatuses)"
+        v-if="document.doc"
+        :options="
+          statusOptions(
+            'lead',
+            document,
+            lead.data._customStatuses,
+            triggerOnChange,
+          )
+        "
       >
         <template #default="{ open }">
-          <Button :label="lead.data.status">
+          <Button :label="document.doc.status">
             <template #prefix>
-              <IndicatorIcon :class="getLeadStatus(lead.data.status).color" />
+              <IndicatorIcon
+                :class="getLeadStatus(document.doc.status).color"
+              />
             </template>
             <template #suffix>
               <FeatherIcon
@@ -51,6 +65,7 @@
           v-model:reload="reload"
           v-model:tabIndex="tabIndex"
           v-model="lead"
+          @afterSave="reloadAssignees"
         />
       </template>
     </Tabs>
@@ -63,7 +78,7 @@
       </div>
       <FileUploader
         @success="(file) => updateField('image', file.file_url)"
-        :validateFile="validateFile"
+        :validateFile="validateIsImageFile"
       >
         <template #default="{ openFileSelector, error }">
           <div class="flex items-center justify-start gap-5 border-b p-5">
@@ -127,42 +142,50 @@
                             : toast.error(__('No phone number set'))
                       "
                     >
-                      <PhoneIcon class="h-4 w-4" />
+                      <template #icon>
+                        <PhoneIcon />
+                      </template>
                     </Button>
                   </div>
                 </Tooltip>
                 <Tooltip :text="__('Send an email')">
                   <div>
-                    <Button class="h-7 w-7">
+                    <Button
-                      <Email2Icon
+                      class="h-7 w-7"
-                        class="h-4 w-4"
+                      @click="
-                        @click="
+                        lead.data.email
-                          lead.data.email
+                          ? openEmailBox()
-                            ? openEmailBox()
+                          : toast.error(__('No email set'))
-                            : toast.error(__('No email set'))
+                      "
-                        "
+                    >
-                      />
+                      <template #icon>
+                        <Email2Icon />
+                      </template>
                     </Button>
                   </div>
                 </Tooltip>
                 <Tooltip :text="__('Go to website')">
                   <div>
-                    <Button class="h-7 w-7">
+                    <Button
-                      <LinkIcon
+                      class="h-7 w-7"
-                        class="h-4 w-4"
+                      @click="
-                        @click="
+                        lead.data.website
-                          lead.data.website
+                          ? openWebsite(lead.data.website)
-                            ? openWebsite(lead.data.website)
+                          : toast.error(__('No website set'))
-                            : toast.error(__('No website set'))
+                      "
-                        "
+                    >
-                      />
+                      <template #icon>
+                        <LinkIcon />
+                      </template>
                     </Button>
                   </div>
                 </Tooltip>
                 <Tooltip :text="__('Attach a file')">
                   <div>
                     <Button class="h-7 w-7" @click="showFilesUploader = true">
-                      <AttachmentIcon class="h-4 w-4" />
+                      <template #icon>
+                        <AttachmentIcon />
+                      </template>
                     </Button>
                   </div>
                 </Tooltip>
@@ -186,6 +209,7 @@
           doctype="CRM Lead"
           :docname="lead.data.name"
           @reload="sections.reload"
+          @afterFieldChange="reloadAssignees"
         />
       </div>
     </Resizer>
@@ -222,14 +246,18 @@
             class="w-7"
             @click="openQuickEntryModal"
           >
-            <EditIcon class="h-4 w-4" />
+            <template #icon>
+              <EditIcon class="h-4 w-4" />
+            </template>
           </Button>
           <Button
             variant="ghost"
             class="w-7"
             @click="showConvertToDealModal = false"
           >
-            <FeatherIcon name="x" class="h-4 w-4" />
+            <template #icon>
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </template>
           </Button>
         </div>
       </div>
@@ -293,12 +321,6 @@
       />
     </template>
   </Dialog>
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Deal"
-    :onlyRequired="true"
-  />
   <FilesUploader
     v-if="lead.data?.name"
     v-model="showFilesUploader"
@@ -339,15 +361,15 @@ import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
 import Link from '@/components/Controls/Link.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import {
   openWebsite,
-  setupAssignees,
   setupCustomizations,
   copyToClipboard,
+  validateIsImageFile,
 } from '@/utils'
+import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { sessionStore } from '@/stores/session'
@@ -355,6 +377,7 @@ import { usersStore } from '@/stores/users'
 import { globalStore } from '@/stores/global'
 import { statusesStore } from '@/stores/statuses'
 import { getMeta } from '@/stores/meta'
+import { useDocument } from '@/data/document'
 import {
   whatsappEnabled,
   callEnabled,
@@ -375,7 +398,7 @@ import {
   toast,
 } from 'frappe-ui'
 import { useOnboarding } from 'frappe-ui/frappe'
-import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useActiveTabManager } from '@/composables/useActiveTabManager'
 
@@ -408,7 +431,6 @@ const lead = createResource({
   onSuccess: (data) => {
     errorTitle.value = ''
     errorMessage.value = ''
-    setupAssignees(lead)
     setupCustomizations(lead, {
       doc: data,
       $dialog,
@@ -577,13 +599,6 @@ watch(tabs, (value) => {
   }
 })
 
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
-}
-
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
   cache: ['sidePanelSections', 'CRM Lead'],
@@ -614,6 +629,9 @@ const existingOrganizationChecked = ref(false)
 const existingContact = ref('')
 const existingOrganization = ref('')
 
+const { triggerConvertToDeal, triggerOnChange, assignees, document } =
+  useDocument('CRM Lead', props.leadId)
+
 async function convertToDeal() {
   if (existingContactChecked.value && !existingContact.value) {
     toast.error(__('Please select an existing contact'))
@@ -633,6 +651,12 @@ async function convertToDeal() {
     existingOrganization.value = ''
   }
 
+  await triggerConvertToDeal?.(
+    lead.data,
+    deal,
+    () => (showConvertToDealModal.value = false),
+  )
+
   let _deal = await call('crm.fcrm.doctype.crm_lead.crm_lead.convert_to_deal', {
     lead: lead.data.name,
     deal,
@@ -658,7 +682,11 @@ async function convertToDeal() {
 const activities = ref(null)
 
 function openEmailBox() {
-  activities.value.emailBox.show = true
+  let currentTab = tabs.value[tabIndex.value]
+  if (!['Emails', 'Comments', 'Activities'].includes(currentTab.name)) {
+    activities.value.changeTabTo('emails')
+  }
+  nextTick(() => (activities.value.emailBox.show = true))
 }
 
 const deal = reactive({})
@@ -700,10 +728,18 @@ const dealTabs = createResource({
   },
 })
 
-const showQuickEntryModal = ref(false)
-
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
+  quickEntryProps.value = {
+    doctype: 'CRM Deal',
+    onlyRequired: true,
+  }
   showConvertToDealModal.value = false
 }
+
+function reloadAssignees(data) {
+  if (data?.hasOwnProperty('lead_owner')) {
+    assignees.reload()
+  }
+}
 </script>

frontend/src/pages/Leads.vue

@@ -267,7 +267,6 @@
   <LeadModal
     v-if="showLeadModal"
     v-model="showLeadModal"
-    v-model:quickEntry="showQuickEntryModal"
     :defaults="defaults"
   />
   <NoteModal
@@ -284,7 +283,6 @@
     doctype="CRM Lead"
     :doc="docname"
   />
-  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
 </template>
 
 <script setup>
@@ -304,7 +302,6 @@ import KanbanView from '@/components/Kanban/KanbanView.vue'
 import LeadModal from '@/components/Modals/LeadModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
@@ -326,7 +323,6 @@ const route = useRoute()
 
 const leadsListView = ref(null)
 const showLeadModal = ref(false)
-const showQuickEntryModal = ref(false)
 
 const defaults = reactive({})
 

frontend/src/pages/MobileContact.vue

@@ -11,7 +11,7 @@
     </header>
   </LayoutHeader>
   <div v-if="contact.data" class="flex flex-col h-full overflow-hidden">
-    <FileUploader @success="changeContactImage" :validateFile="validateFile">
+    <FileUploader @success="changeContactImage" :validateFile="validateIsImageFile">
       <template #default="{ openFileSelector, error }">
         <div class="flex flex-col items-start justify-start gap-4 p-4">
           <div class="flex gap-4 items-center">
@@ -156,7 +156,6 @@
       </TabPanel>
     </Tabs>
   </div>
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
@@ -168,9 +167,9 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
+import { formatDate, timeAgo, validateIsImageFile } from '@/utils'
-import { formatDate, timeAgo } from '@/utils'
 import { getView } from '@/utils/view'
+import { showAddressModal, addressProps } from '@/composables/modals'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global.js'
@@ -212,9 +211,7 @@ const props = defineProps({
 const route = useRoute()
 const router = useRouter()
 
-const showAddressModal = ref(false)
 const _contact = ref({})
-const _address = ref({})
 
 const contact = createResource({
   url: 'crm.api.contact.get_contact',
@@ -269,13 +266,6 @@ usePageMeta(() => {
   }
 })
 
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
-}
-
 async function changeContactImage(file) {
   await call('frappe.client.set_value', {
     doctype: 'Contact',
@@ -467,17 +457,10 @@ function getParsedSections(_sections) {
             ...field,
             create: (value, close) => {
               _contact.value.address = value
-              _address.value = {}
+              openAddressModal()
-              showAddressModal.value = true
               close()
             },
-            edit: async (addr) => {
+            edit: (address) => openAddressModal(address),
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
           }
         } else {
           return field
@@ -536,18 +519,6 @@ async function deleteOption(doctype, name) {
   toast.success(__('Contact updated'))
 }
 
-async function updateField(fieldname, value) {
-  await call('frappe.client.set_value', {
-    doctype: 'Contact',
-    name: props.contactId,
-    fieldname,
-    value,
-  })
-  toast.success(__('Contact updated'))
-
-  contact.reload()
-}
-
 const { getFormattedCurrency } = getMeta('CRM Deal')
 
 const columns = computed(() => dealColumns)
@@ -615,4 +586,12 @@ const dealColumns = [
     width: '8rem',
   },
 ]
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+}
 </script>

frontend/src/pages/MobileDeal.vue

@@ -10,14 +10,22 @@
       </Breadcrumbs>
       <div class="absolute right-0">
         <Dropdown
+          v-if="document.doc"
           :options="
-            statusOptions('deal', updateField, deal.data._customStatuses)
+            statusOptions(
+              'deal',
+              document,
+              deal.data._customStatuses,
+              triggerOnChange,
+            )
           "
         >
           <template #default="{ open }">
-            <Button :label="deal.data.status">
+            <Button :label="document.doc.status">
               <template #prefix>
-                <IndicatorIcon :class="getDealStatus(deal.data.status).color" />
+                <IndicatorIcon
+                  :class="getDealStatus(document.doc.status).color"
+                />
               </template>
               <template #suffix>
                 <FeatherIcon
@@ -36,8 +44,8 @@
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
     <AssignTo
-      v-model="deal.data._assignedTo"
+      v-model="assignees.data"
-      :data="deal.data"
+      :data="document.doc"
       doctype="CRM Deal"
     />
     <div class="flex items-center gap-2">
@@ -45,6 +53,10 @@
         v-if="deal.data._customActions?.length"
         :actions="deal.data._customActions"
       />
+      <CustomActions
+        v-if="document.actions?.length"
+        :actions="document.actions"
+      />
     </div>
   </div>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
@@ -66,6 +78,7 @@
               doctype="CRM Deal"
               :docname="deal.data.name"
               @reload="sections.reload"
+              @afterFieldChange="reloadAssignees"
             >
               <template #actions="{ section }">
                 <div v-if="section.name == 'contacts_section'" class="pr-2">
@@ -214,14 +227,16 @@
     </Tabs>
   </div>
   <OrganizationModal
+    v-if="showOrganizationModal"
     v-model="showOrganizationModal"
-    v-model:organization="_organization"
+    :data="_organization"
     :options="{
       redirect: false,
       afterInsert: (doc) => updateField('organization', doc.name),
     }"
   />
   <ContactModal
+    v-if="showContactModal"
     v-model="showContactModal"
     :contact="_contact"
     :options="{
@@ -256,12 +271,13 @@ import Link from '@/components/Controls/Link.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
-import { setupAssignees, setupCustomizations } from '@/utils'
+import { setupCustomizations } from '@/utils'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { statusesStore } from '@/stores/statuses'
 import { getMeta } from '@/stores/meta'
+import { useDocument } from '@/data/document'
 import {
   whatsappEnabled,
   callEnabled,
@@ -309,7 +325,6 @@ const deal = createResource({
       organization.fetch()
     }
 
-    setupAssignees(deal)
     setupCustomizations(deal, {
       doc: data,
       $dialog,
@@ -603,4 +618,15 @@ async function deleteDeal(name) {
   })
   router.push({ name: 'Deals' })
 }
+
+const { assignees, document, triggerOnChange } = useDocument(
+  'CRM Deal',
+  props.dealId,
+)
+
+function reloadAssignees(data) {
+  if (data?.hasOwnProperty('deal_owner')) {
+    assignees.reload()
+  }
+}
 </script>

frontend/src/pages/MobileLead.vue

@@ -10,14 +10,22 @@
       </Breadcrumbs>
       <div class="absolute right-0">
         <Dropdown
+          v-if="document.doc"
           :options="
-            statusOptions('lead', updateField, lead.data._customStatuses)
+            statusOptions(
+              'lead',
+              document,
+              lead.data._customStatuses,
+              triggerOnChange,
+            )
           "
         >
           <template #default="{ open }">
-            <Button :label="lead.data.status">
+            <Button :label="document.doc.status">
               <template #prefix>
-                <IndicatorIcon :class="getLeadStatus(lead.data.status).color" />
+                <IndicatorIcon
+                  :class="getLeadStatus(document.doc.status).color"
+                />
               </template>
               <template #suffix>
                 <FeatherIcon
@@ -36,8 +44,8 @@
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
     <AssignTo
-      v-model="lead.data._assignedTo"
+      v-model="assignees.data"
-      :data="lead.data"
+      :data="document.doc"
       doctype="CRM Lead"
     />
     <div class="flex items-center gap-2">
@@ -45,6 +53,10 @@
         v-if="lead.data._customActions?.length"
         :actions="lead.data._customActions"
       />
+      <CustomActions
+        v-if="document.actions?.length"
+        :actions="document.actions"
+      />
       <Button
         :label="__('Convert')"
         variant="solid"
@@ -71,6 +83,7 @@
               doctype="CRM Lead"
               :docname="lead.data.name"
               @reload="sections.reload"
+              @afterFieldChange="reloadAssignees"
             />
           </div>
         </div>
@@ -173,12 +186,13 @@ import Link from '@/components/Controls/Link.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
-import { setupAssignees, setupCustomizations } from '@/utils'
+import { setupCustomizations } from '@/utils'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { statusesStore } from '@/stores/statuses'
 import { getMeta } from '@/stores/meta'
+import { useDocument } from '@/data/document'
 import {
   whatsappEnabled,
   callEnabled,
@@ -220,7 +234,6 @@ const lead = createResource({
   params: { name: props.leadId },
   cache: ['lead', props.leadId],
   onSuccess: (data) => {
-    setupAssignees(lead)
     setupCustomizations(lead, {
       doc: data,
       $dialog,
@@ -454,4 +467,15 @@ async function convertToDeal() {
     router.push({ name: 'Deal', params: { dealId: deal } })
   }
 }
+
+const { assignees, document, triggerOnChange } = useDocument(
+  'CRM Lead',
+  props.leadId,
+)
+
+function reloadAssignees(data) {
+  if (data?.hasOwnProperty('lead_owner')) {
+    assignees.reload()
+  }
+}
 </script>

frontend/src/pages/MobileOrganization.vue

@@ -13,7 +13,7 @@
   <div v-if="organization.doc" class="flex flex-col h-full overflow-hidden">
     <FileUploader
       @success="changeOrganizationImage"
-      :validateFile="validateFile"
+      :validateFile="validateIsImageFile"
     >
       <template #default="{ openFileSelector, error }">
         <div class="flex flex-col items-start justify-start gap-4 p-4">
@@ -145,27 +145,26 @@
       </TabPanel>
     </Tabs>
   </div>
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import Icon from '@/components/Icon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 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 { showAddressModal, addressProps } from '@/composables/modals'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { getView } from '@/utils/view'
-import { formatDate, timeAgo } from '@/utils'
+import { formatDate, timeAgo, validateIsImageFile } from '@/utils'
 import {
   Breadcrumbs,
   Avatar,
@@ -252,13 +251,6 @@ usePageMeta(() => {
   }
 })
 
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
-}
-
 async function changeOrganizationImage(file) {
   await call('frappe.client.set_value', {
     doctype: 'CRM Organization',
@@ -296,9 +288,7 @@ function openWebsite() {
   else window.open(organization.doc.website, '_blank')
 }
 
-const showAddressModal = ref(false)
 const _organization = ref({})
-const _address = ref({})
 
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
@@ -317,17 +307,10 @@ function getParsedSections(_sections) {
             ...field,
             create: (value, close) => {
               _organization.value.address = value
-              _address.value = {}
+              openAddressModal()
-              showAddressModal.value = true
               close()
             },
-            edit: async (addr) => {
+            edit: (address) => openAddressModal(address),
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
           }
         } else {
           return field
@@ -533,4 +516,12 @@ const contactColumns = [
     width: '8rem',
   },
 ]
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+}
 </script>

frontend/src/pages/Organization.vue

@@ -17,7 +17,7 @@
       <div class="border-b">
         <FileUploader
           @success="changeOrganizationImage"
-          :validateFile="validateFile"
+          :validateFile="validateIsImageFile"
         >
           <template #default="{ openFileSelector, error }">
             <div class="flex flex-col items-start justify-start gap-4 p-5">
@@ -164,12 +164,6 @@
     :errorTitle="errorTitle"
     :errorMessage="errorMessage"
   />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Organization"
-  />
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
@@ -178,21 +172,20 @@ import Resizer from '@/components/Resizer.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import Icon from '@/components/Icon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import { showAddressModal, addressProps } from '@/composables/modals'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { getView } from '@/utils/view'
-import { formatDate, timeAgo } from '@/utils'
+import { formatDate, timeAgo, validateIsImageFile } from '@/utils'
 import {
   Tooltip,
   Breadcrumbs,
@@ -222,7 +215,6 @@ const { getUser } = usersStore()
 const { $dialog } = globalStore()
 const { getDealStatus } = statusesStore()
 const { doctypeMeta } = getMeta('CRM Organization')
-const showQuickEntryModal = ref(false)
 
 const route = useRoute()
 const router = useRouter()
@@ -294,13 +286,6 @@ usePageMeta(() => {
   }
 })
 
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
-}
-
 async function changeOrganizationImage(file) {
   await call('frappe.client.set_value', {
     doctype: 'CRM Organization',
@@ -342,9 +327,7 @@ function openWebsite() {
   else window.open(organization.doc.website, '_blank')
 }
 
-const showAddressModal = ref(false)
 const _organization = ref({})
-const _address = ref({})
 
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
@@ -363,17 +346,10 @@ function getParsedSections(_sections) {
             ...field,
             create: (value, close) => {
               _organization.value.address = value
-              _address.value = {}
+              openAddressModal()
-              showAddressModal.value = true
               close()
             },
-            edit: async (addr) => {
+            edit: (address) => openAddressModal(address),
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
           }
         } else {
           return field
@@ -572,4 +548,12 @@ const contactColumns = [
     width: '8rem',
   },
 ]
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+}
 </script>

frontend/src/pages/Organizations.vue

@@ -63,16 +63,9 @@
     </div>
   </div>
   <OrganizationModal
+    v-if="showOrganizationModal"
     v-model="showOrganizationModal"
-    v-model:showQuickEntryModal="showQuickEntryModal"
-    @openAddressModal="(_address) => openAddressModal(_address)"
   />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Organization"
-  />
-  <AddressModal v-model="showAddressModal" v-model:address="address" />
 </template>
 <script setup>
 import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
@@ -80,8 +73,6 @@ import CustomActions from '@/components/CustomActions.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
@@ -94,12 +85,9 @@ const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
 
 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
-const showQuickEntryModal = ref(false)
-const showAddressModal = ref(false)
 
 // organizations data is loaded in the ViewControls component
 const organizations = ref({})
-const address = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
@@ -162,15 +150,4 @@ const rows = computed(() => {
     return _rows
   })
 })
-
-async function openAddressModal(_address) {
-  if (_address) {
-    _address = await call('frappe.client.get', {
-      doctype: 'Address',
-      name: _address,
-    })
-  }
-  showAddressModal.value = true
-  address.value = _address || {}
-}
 </script>

frontend/src/pages/Welcome.vue

@@ -41,21 +41,14 @@
       @click="showLeadModal = true"
     />
   </div>
-  <LeadModal
+  <LeadModal v-if="showLeadModal" v-model="showLeadModal" />
-    v-if="showLeadModal"
-    v-model="showLeadModal"
-    v-model:quickEntry="showQuickEntryModal"
-  />
-  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
 </template>
 <script setup>
 import AvatarIcon from '@/components/Icons/AvatarIcon.vue'
 import GoogleIcon from '@/components/Icons/GoogleIcon.vue'
 import LeadModal from '@/components/Modals/LeadModal.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import { ref } from 'vue'
 
 const name = ref('John Doe')
 const showLeadModal = ref(false)
-const showQuickEntryModal = ref(false)
 </script>

frontend/src/stores/statuses.js

@@ -77,11 +77,20 @@ export const statusesStore = defineStore('crm-statuses', () => {
     return communicationStatuses[name]
   }
 
-  function statusOptions(doctype, action, statuses = []) {
+  function statusOptions(
+    doctype,
+    document,
+    statuses = [],
+    triggerOnChange = null,
+  ) {
     let statusesByName =
       doctype == 'deal' ? dealStatusesByName : leadStatusesByName
 
-    if (statuses.length) {
+    if (document?.statuses?.length) {
+      statuses = document.statuses
+    }
+
+    if (statuses?.length) {
       statusesByName = statuses.reduce((acc, status) => {
         acc[status] = statusesByName[status]
         return acc
@@ -94,9 +103,12 @@ export const statusesStore = defineStore('crm-statuses', () => {
         label: statusesByName[status]?.name,
         value: statusesByName[status]?.name,
         icon: () => h(IndicatorIcon, { class: statusesByName[status]?.color }),
-        onClick: () => {
+        onClick: async () => {
           capture('status_changed', { doctype, status })
-          action && action('status', statusesByName[status]?.name)
+          if (document) {
+            await triggerOnChange?.('status', statusesByName[status]?.name)
+            document.save.submit()
+          }
         },
       })
     }

frontend/src/telemetry.ts

@@ -49,7 +49,8 @@ function initPosthog(ps: PosthogSettings) {
     capture_pageview: true,
     capture_pageleave: true,
     enable_heatmaps: false,
-    disable_session_recording: false,
+    disable_session_recording: true,
+    advanced_disable_decide: true,
     loaded: (ph: typeof posthog) => {
       window.posthog = ph
       ph.identify(window.location.hostname)
@@ -67,17 +68,9 @@ function capture(
 }
 
 function startRecording() {
-  if (!isTelemetryEnabled()) return
-  if (window.posthog?.__loaded) {
-    window.posthog.startSessionRecording()
-  }
 }
 
 function stopRecording() {
-  if (!isTelemetryEnabled()) return
-  if (window.posthog?.__loaded && window.posthog.sessionRecordingStarted()) {
-    window.posthog.stopSessionRecording()
-  }
 }
 
 // Posthog Plugin

frontend/src/utils/index.js

@@ -2,9 +2,8 @@ import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import { usersStore } from '@/stores/users'
 import { gemoji } from 'gemoji'
-import { useTimeAgo } from '@vueuse/core'
 import { getMeta } from '@/stores/meta'
-import { toast, dayjsLocal, dayjs } from 'frappe-ui'
+import { toast, dayjsLocal, dayjs, getConfig } from 'frappe-ui'
 import { h } from 'vue'
 
 export function formatTime(seconds) {
@@ -65,7 +64,133 @@ export function getFormat(
 }
 
 export function timeAgo(date) {
-  return useTimeAgo(date).value
+  return prettyDate(date)
+}
+
+function getBrowserTimezone() {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone
+}
+
+export function prettyDate(date, mini = false) {
+  if (!date) return ''
+
+  let systemTimezone = getConfig('systemTimezone')
+  let localTimezone = getConfig('localTimezone') || getBrowserTimezone()
+
+  if (typeof date == 'string') {
+    date = dayjsLocal(date)
+  }
+
+  let nowDatetime = dayjs().tz(localTimezone || systemTimezone)
+  let diff = nowDatetime.diff(date, 'seconds')
+
+  let dayDiff = Math.floor(diff / 86400)
+
+  if (isNaN(dayDiff)) return ''
+
+  if (mini) {
+    // Return short format of time difference
+    if (dayDiff < 0) {
+      if (Math.abs(dayDiff) < 1) {
+        if (diff < 60) {
+          return __('now')
+        } else if (diff < 3600) {
+          return __('in {0} m', [Math.floor(diff / 60)])
+        } else if (diff < 86400) {
+          return __('in {0} h', [Math.floor(diff / 3600)])
+        }
+      }
+      if (Math.abs(dayDiff) == 1) {
+        return __('tomorrow')
+      } else if (Math.abs(dayDiff) < 7) {
+        return __('in {0} d', [Math.abs(dayDiff)])
+      } else if (Math.abs(dayDiff) < 31) {
+        return __('in {0} w', [Math.floor(Math.abs(dayDiff) / 7)])
+      } else if (Math.abs(dayDiff) < 365) {
+        return __('in {0} M', [Math.floor(Math.abs(dayDiff) / 30)])
+      } else {
+        return __('in {0} y', [Math.floor(Math.abs(dayDiff) / 365)])
+      }
+    } else if (dayDiff == 0) {
+      if (diff < 60) {
+        return __('now')
+      } else if (diff < 3600) {
+        return __('{0} m', [Math.floor(diff / 60)])
+      } else if (diff < 86400) {
+        return __('{0} h', [Math.floor(diff / 3600)])
+      }
+    } else {
+      if (dayDiff < 7) {
+        return __('{0} d', [dayDiff])
+      } else if (dayDiff < 31) {
+        return __('{0} w', [Math.floor(dayDiff / 7)])
+      } else if (dayDiff < 365) {
+        return __('{0} M', [Math.floor(dayDiff / 30)])
+      } else {
+        return __('{0} y', [Math.floor(dayDiff / 365)])
+      }
+    }
+  } else {
+    // Return long format of time difference
+    if (dayDiff < 0) {
+      if (Math.abs(dayDiff) < 1) {
+        if (diff < 60) {
+          return __('just now')
+        } else if (diff < 120) {
+          return __('in 1 minute')
+        } else if (diff < 3600) {
+          return __('in {0} minutes', [Math.floor(diff / 60)])
+        } else if (diff < 7200) {
+          return __('in 1 hour')
+        } else if (diff < 86400) {
+          return __('in {0} hours', [Math.floor(diff / 3600)])
+        }
+      }
+      if (Math.abs(dayDiff) == 1) {
+        return __('tomorrow')
+      } else if (Math.abs(dayDiff) < 7) {
+        return __('in {0} days', [Math.abs(dayDiff)])
+      } else if (Math.abs(dayDiff) < 31) {
+        return __('in {0} weeks', [Math.floor(Math.abs(dayDiff) / 7)])
+      } else if (Math.abs(dayDiff) < 365) {
+        return __('in {0} months', [Math.floor(Math.abs(dayDiff) / 30)])
+      } else if (Math.abs(dayDiff) < 730) {
+        return __('in 1 year')
+      } else {
+        return __('in {0} years', [Math.floor(Math.abs(dayDiff) / 365)])
+      }
+    } else if (dayDiff == 0) {
+      if (diff < 60) {
+        return __('just now')
+      } else if (diff < 120) {
+        return __('1 minute ago')
+      } else if (diff < 3600) {
+        return __('{0} minutes ago', [Math.floor(diff / 60)])
+      } else if (diff < 7200) {
+        return __('1 hour ago')
+      } else if (diff < 86400) {
+        return __('{0} hours ago', [Math.floor(diff / 3600)])
+      }
+    } else {
+      if (dayDiff == 1) {
+        return __('yesterday')
+      } else if (dayDiff < 7) {
+        return __('{0} days ago', [dayDiff])
+      } else if (dayDiff < 14) {
+        return __('1 week ago')
+      } else if (dayDiff < 31) {
+        return __('{0} weeks ago', [Math.floor(dayDiff / 7)])
+      } else if (dayDiff < 62) {
+        return __('1 month ago')
+      } else if (dayDiff < 365) {
+        return __('{0} months ago', [Math.floor(dayDiff / 30)])
+      } else if (dayDiff < 730) {
+        return __('1 year ago')
+      } else {
+        return __('{0} years ago', [Math.floor(dayDiff / 365)])
+      }
+    }
+  }
 }
 
 export function taskStatusOptions(action, data) {
@@ -134,10 +259,9 @@ export function validateEmail(email) {
   return regExp.test(email)
 }
 
-export function setupAssignees(doc) {
+export function parseAssignees(assignees) {
   let { getUser } = usersStore()
-  let assignees = doc.data?._assign || []
+  return assignees.map((user) => ({
-  doc.data._assignedTo = assignees.map((user) => ({
     name: user,
     image: getUser(user).user_image,
     label: getUser(user).full_name,
@@ -318,6 +442,13 @@ export function isImage(extention) {
   )
 }
 
+export function validateIsImageFile(file) {
+  const extn = file.name.split('.').pop().toLowerCase()
+  if (!isImage(extn)) {
+    return __('Only image files are allowed')
+  }
+}
+
 export function getRandom(len = 4) {
   let text = ''
   const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

yarn.lock

@@ -1320,6 +1320,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.10.3.tgz#bf8efb3a580c75b86dce505a63f1ca7450a9aaea"
   integrity sha512-AlxXXPCWIvw8hQUDFRskasj32iMNB8Sb19VgyFWqwvntGs2/UffNu8VdsVqxD2HpZ0g5rLYCYtSW4wigs9R3og==
 
+"@tiptap/extension-heading@^2.12.0":
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.14.0.tgz#c5a9dc761712e9c87073ba8446548cbe4d403360"
+  integrity sha512-vM//6G3Ox3mxPv9eilhrDqylELCc8kEP1aQ4xUuOw7vCidjNtGggOa1ERnnpV2dCa2A9E8y4FHtN4Xh29stXQg==
+
 "@tiptap/extension-highlight@^2.0.3":
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-2.10.3.tgz#d94667d435d9dc556b06e7b764449dc2a6c18743"
@@ -2565,10 +2570,10 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-frappe-ui@^0.1.145:
+frappe-ui@^0.1.156:
-  version "0.1.145"
+  version "0.1.156"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.145.tgz#19ec429badf85f3f2c45a85ec13c3c462ec11ee9"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.156.tgz#1a476aec80b0e0f72470f9dc3990bb023b2ebb09"
-  integrity sha512-DnnSJREu/EpUAJGNFaXEUF3re0hQMmLBOX/MSW9AsQtnCJwXkO5VbH/dyVHAZjqdb9Do3CNQF33/HB4NibNI8Q==
+  integrity sha512-JsIODLL7YYFhKSYfWJJ9M1+VMmj8M0xZ1D5M7Cx0c+OWg5Qm0xda1592Tr+om1a7u0zWcfjuQnW9mHN1lW5HIA==
   dependencies:
     "@floating-ui/vue" "^1.1.6"
     "@headlessui/vue" "^1.7.14"
@@ -2579,6 +2584,7 @@ frappe-ui@^0.1.145:
     "@tiptap/extension-code-block" "^2.11.9"
     "@tiptap/extension-code-block-lowlight" "^2.11.5"
     "@tiptap/extension-color" "^2.0.3"
+    "@tiptap/extension-heading" "^2.12.0"
     "@tiptap/extension-highlight" "^2.0.3"
     "@tiptap/extension-image" "^2.0.3"
     "@tiptap/extension-link" "^2.0.3"
@@ -2599,6 +2605,7 @@ frappe-ui@^0.1.145:
     dayjs "^1.11.13"
     echarts "^5.6.0"
     feather-icons "^4.28.0"
+    highlight.js "^11.11.1"
     idb-keyval "^6.2.0"
     lowlight "^3.3.0"
     lucide-static "^0.479.0"
@@ -2806,7 +2813,7 @@ hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-highlight.js@~11.11.0:
+highlight.js@^11.11.1, highlight.js@~11.11.0:
   version "11.11.1"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.11.1.tgz#fca06fa0e5aeecf6c4d437239135fabc15213585"
   integrity sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==