From 8f256843f206e81ed7dd0f853bd30cac9d150082 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 12:47:08 +0530
Subject: [PATCH 01/51] fix: removed contact creation/updation code from lead

---
 crm/fcrm/doctype/crm_lead/crm_lead.json | 16 +----
 crm/fcrm/doctype/crm_lead/crm_lead.py   | 84 +------------------------
 2 files changed, 4 insertions(+), 96 deletions(-)

diff --git a/crm/fcrm/doctype/crm_lead/crm_lead.json b/crm/fcrm/doctype/crm_lead/crm_lead.json
index 8257a2e5f..269a0e79d 100644
--- a/crm/fcrm/doctype/crm_lead/crm_lead.json
+++ b/crm/fcrm/doctype/crm_lead/crm_lead.json
@@ -37,9 +37,7 @@
   "column_break_sijm",
   "mobile_no",
   "column_break_sjtw",
-  "phone",
-  "section_break_jyxr",
-  "contacts"
+  "phone"
  ],
  "fields": [
   {
@@ -203,16 +201,6 @@
    "fieldtype": "Tab Break",
    "label": "Contact"
   },
-  {
-   "fieldname": "contacts",
-   "fieldtype": "Table",
-   "label": "Contacts",
-   "options": "CRM Contacts"
-  },
-  {
-   "fieldname": "section_break_jyxr",
-   "fieldtype": "Section Break"
-  },
   {
    "fieldname": "organization",
    "fieldtype": "Link",
@@ -231,7 +219,7 @@
  "image_field": "image",
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-11-06 21:53:32.542503",
+ "modified": "2023-11-09 12:44:18.770076",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Lead",
diff --git a/crm/fcrm/doctype/crm_lead/crm_lead.py b/crm/fcrm/doctype/crm_lead/crm_lead.py
index 56436a7c6..82a822d72 100644
--- a/crm/fcrm/doctype/crm_lead/crm_lead.py
+++ b/crm/fcrm/doctype/crm_lead/crm_lead.py
@@ -14,9 +14,7 @@ def validate(self):
 		self.set_lead_name()
 		self.set_title()
 		self.validate_email()
-		if not self.is_new():
-			self.validate_contact()
-	
+
 	def set_full_name(self):
 		if self.first_name:
 			self.lead_name = " ".join(
@@ -37,7 +35,7 @@ def set_lead_name(self):
 
 	def set_title(self):
 		self.title = self.organization or self.lead_name
-	
+
 	def validate_email(self):
 		if self.email:
 			if not self.flags.ignore_email_validation:
@@ -48,84 +46,6 @@ def validate_email(self):
 
 			if self.is_new() or not self.image:
 				self.image = has_gravatar(self.email)
-	
-	def validate_contact(self):
-		link = frappe.db.exists("Dynamic Link", {"link_doctype": "CRM Lead", "link_name": self.name})
-
-		if link:
-			for field in ["first_name", "last_name", "email", "mobile_no", "phone", "salutation", "image"]:
-				if self.has_value_changed(field):
-					contact = frappe.db.get_value("Dynamic Link", link, "parent")
-					contact_doc = frappe.get_doc("Contact", contact)
-					contact_doc.update({
-						"first_name": self.first_name or self.lead_name,
-						"last_name": self.last_name,
-						"salutation": self.salutation,
-						"image": self.image or "",
-					})
-					if self.has_value_changed("email"):
-						contact_doc.email_ids = []
-						contact_doc.append("email_ids", {"email_id": self.email, "is_primary": 1})
-
-					if self.has_value_changed("phone"):
-						contact_doc.append("phone_nos", {"phone": self.phone, "is_primary_phone": 1})
-
-					if self.has_value_changed("mobile_no"):
-						contact_doc.phone_nos = []
-						contact_doc.append("phone_nos", {"phone": self.mobile_no, "is_primary_mobile_no": 1})
-
-					contact_doc.save()
-					break
-		else:
-			self.contact_doc = self.create_contact()
-			self.link_to_contact()
-
-	def before_insert(self):
-		self.contact_doc = None
-		self.contact_doc = self.create_contact()
-	
-	def after_insert(self):
-		self.link_to_contact()
-	
-	def link_to_contact(self):
-		# update contact links
-		if self.contact_doc:
-			self.contact_doc.append(
-				"links", {"link_doctype": "CRM Lead", "link_name": self.name, "link_title": self.lead_name}
-			)
-			self.contact_doc.save()
-	
-	def create_contact(self):
-		if not self.lead_name:
-			self.set_full_name()
-			self.set_lead_name()
-
-		contact = frappe.new_doc("Contact")
-		contact.update(
-			{
-				"first_name": self.first_name or self.lead_name,
-				"last_name": self.last_name,
-				"salutation": self.salutation,
-				"gender": self.gender,
-				"designation": self.job_title,
-				"company_name": self.organization,
-				"image": self.image or "",
-			}
-		)
-
-		if self.email:
-			contact.append("email_ids", {"email_id": self.email, "is_primary": 1})
-
-		if self.phone:
-			contact.append("phone_nos", {"phone": self.phone, "is_primary_phone": 1})
-
-		if self.mobile_no:
-			contact.append("phone_nos", {"phone": self.mobile_no, "is_primary_mobile_no": 1})
-
-		contact.insert(ignore_permissions=True)
-		contact.reload()  # load changes by hooks on contact
-
-		return contact
 
 	@staticmethod
 	def sort_options():

From 86fb7dbafa6c8372768d69fca861da7e08ba8c39 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 14:31:12 +0530
Subject: [PATCH 02/51] fix: router to contact after creation

---
 frontend/src/components/Modals/ContactModal.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index 5fd0d6cec..f8d91a2bc 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -74,6 +74,7 @@
 <script setup>
 import { FormControl, Dialog, call } from 'frappe-ui'
 import { ref, defineModel, nextTick, watch, computed } from 'vue'
+import { useRouter } from 'vue-router';
 
 const props = defineProps({
   contact: {
@@ -82,6 +83,8 @@ const props = defineProps({
   },
 })
 
+const router = useRouter()
+
 const show = defineModel()
 const contacts = defineModel('reloadContacts')
 
@@ -111,6 +114,10 @@ async function updateContact(close) {
     })
     if (d.name) {
       contacts.value.reload()
+      router.push({
+        name: 'Contact',
+        params: { contactId: d.name },
+      })
     }
   }
   close()

From fd7bf74598b1c847c9d9bc93095ffd6de3f84871 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 14:31:42 +0530
Subject: [PATCH 03/51] fix: router to contacts after deletion

---
 frontend/src/pages/Contact.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 138ea6f32..b64589f5d 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -212,6 +212,7 @@ import { usersStore } from '@/stores/users.js'
 import { contactsStore } from '@/stores/contacts.js'
 import { organizationsStore } from '@/stores/organizations.js'
 import { ref, computed, h } from 'vue'
+import { useRouter } from 'vue-router'
 
 const { getContactByName, contacts } = contactsStore()
 const { getUser } = usersStore()
@@ -224,6 +225,8 @@ const props = defineProps({
   },
 })
 
+const router = useRouter()
+
 const contact = computed(() => getContactByName(props.contactId))
 
 const breadcrumbs = computed(() => {
@@ -268,6 +271,7 @@ async function deleteContact() {
           })
           contacts.reload()
           close()
+          router.push({ name: 'Contacts' })
         },
       },
     ],
@@ -305,7 +309,7 @@ const leads = createListResource({
     'modified',
   ],
   filters: {
-    email: contact.value.email_id,
+    email: contact.value?.email_id,
     converted: 0,
   },
   orderBy: 'modified desc',
@@ -328,7 +332,7 @@ const deals = createListResource({
     'modified',
   ],
   filters: {
-    email: contact.value.email_id,
+    email: contact.value?.email_id,
     converted: 1,
   },
   orderBy: 'modified desc',

From 4000dfab096c4dcca23aca54e2bb25eb92445405 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 14:35:50 +0530
Subject: [PATCH 04/51] fix: removed unused imports

---
 crm/fcrm/doctype/crm_deal/api.py | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/crm/fcrm/doctype/crm_deal/api.py b/crm/fcrm/doctype/crm_deal/api.py
index 0dc14355c..8f34ea33f 100644
--- a/crm/fcrm/doctype/crm_deal/api.py
+++ b/crm/fcrm/doctype/crm_deal/api.py
@@ -1,9 +1,5 @@
-import json
-
 import frappe
 from frappe import _
-from frappe.desk.form.load import get_docinfo
-from crm.fcrm.doctype.crm_lead.api import get_activities as get_lead_activities
 
 
 @frappe.whitelist()

From d01b3e35208e769ba273cc2abfcc905932dd1959 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 14:36:20 +0530
Subject: [PATCH 05/51] fix: create contact after lead is converted

---
 crm/fcrm/doctype/crm_lead/crm_lead.py | 58 +++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/crm/fcrm/doctype/crm_lead/crm_lead.py b/crm/fcrm/doctype/crm_lead/crm_lead.py
index 82a822d72..5704544cf 100644
--- a/crm/fcrm/doctype/crm_lead/crm_lead.py
+++ b/crm/fcrm/doctype/crm_lead/crm_lead.py
@@ -15,6 +15,9 @@ def validate(self):
 		self.set_title()
 		self.validate_email()
 
+		if self.has_value_changed('converted') and self.converted:
+			self.create_contact()
+
 	def set_full_name(self):
 		if self.first_name:
 			self.lead_name = " ".join(
@@ -47,6 +50,61 @@ def validate_email(self):
 			if self.is_new() or not self.image:
 				self.image = has_gravatar(self.email)
 
+	def create_contact(self):
+		if not self.lead_name:
+			self.set_full_name()
+			self.set_lead_name()
+
+		if self.contact_exists():
+			return
+
+		contact = frappe.new_doc("Contact")
+		contact.update(
+			{
+				"first_name": self.first_name or self.lead_name,
+				"last_name": self.last_name,
+				"salutation": self.salutation,
+				"gender": self.gender,
+				"designation": self.job_title,
+				"company_name": self.organization,
+				"image": self.image or "",
+			}
+		)
+
+		if self.email:
+			contact.append("email_ids", {"email_id": self.email, "is_primary": 1})
+
+		if self.phone:
+			contact.append("phone_nos", {"phone": self.phone, "is_primary_phone": 1})
+
+		if self.mobile_no:
+			contact.append("phone_nos", {"phone": self.mobile_no, "is_primary_mobile_no": 1})
+
+		contact.insert(ignore_permissions=True)
+		contact.reload()  # load changes by hooks on contact
+
+		return contact
+
+	def contact_exists(self):
+		email_exist = frappe.db.exists("Contact Email", {"email_id": self.email})
+		phone_exist = frappe.db.exists("Contact Phone", {"phone": self.phone})
+		mobile_exist = frappe.db.exists("Contact Phone", {"phone": self.mobile_no})
+
+		if email_exist or phone_exist or mobile_exist:
+
+			text = "Email" if email_exist else "Phone" if phone_exist else "Mobile No"
+			data = self.email if email_exist else self.phone if phone_exist else self.mobile_no
+
+			value = "{0}: {1}".format(text, data)
+
+			frappe.throw(
+				_("Contact already exists with {0}").format(value),
+				title=_("Contact Already Exists"),
+			)
+			return True
+
+		return False
+
 	@staticmethod
 	def sort_options():
 		return [

From 2d2bca19157ac28620cebbb64d88ee3082cbc632 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 14:42:47 +0530
Subject: [PATCH 06/51] refactor: better way to update field/field in lead/deal

---
 frontend/src/pages/Deal.vue | 34 ++++++++--------
 frontend/src/pages/Lead.vue | 81 +++++++++----------------------------
 frontend/src/utils/index.js |  1 -
 3 files changed, 37 insertions(+), 79 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index aa86727b9..9aa220560 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -8,7 +8,7 @@
         type="autocomplete"
         :options="activeAgents"
         :value="getUser(deal.data.deal_owner).full_name"
-        @change="(option) => updateAssignedAgent(option.email)"
+        @change="(option) => updateField('deal_owner', option.email)"
         placeholder="Deal owner"
       >
         <template #prefix>
@@ -18,7 +18,9 @@
           <UserAvatar class="mr-2" :user="option.email" size="sm" />
         </template>
       </FormControl>
-      <Dropdown :options="statusDropdownOptions(deal.data, 'deal', updateDeal)">
+      <Dropdown
+        :options="statusDropdownOptions(deal.data, 'deal', updateField)"
+      >
         <template #default="{ open }">
           <Button :label="deal.data.status">
             <template #prefix>
@@ -170,7 +172,9 @@
                         type="autocomplete"
                         :options="activeAgents"
                         :value="getUser(deal.data[field.name]).full_name"
-                        @change="(option) => updateAssignedAgent(option.email)"
+                        @change="
+                          (option) => updateField('deal_owner', option.email)
+                        "
                         class="form-control"
                         :placeholder="deal.placeholder"
                       >
@@ -200,7 +204,7 @@
                       <Dropdown
                         v-else-if="field.type === 'dropdown'"
                         :options="
-                          statusDropdownOptions(deal.data, 'deal', updateDeal)
+                          statusDropdownOptions(deal.data, 'deal', updateField)
                         "
                         class="w-full flex-1"
                       >
@@ -352,7 +356,9 @@ const deal = createResource({
 
 const reload = ref(false)
 
-function updateDeal(fieldname, value) {
+function updateDeal(fieldname, value, callback) {
+  value = Array.isArray(fieldname) ? '' : value
+
   createResource({
     url: 'frappe.client.set_value',
     params: {
@@ -371,6 +377,7 @@ function updateDeal(fieldname, value) {
         icon: 'check',
         iconClasses: 'text-green-600',
       })
+      callback?.()
     },
     onError: (err) => {
       createToast({
@@ -428,10 +435,7 @@ const detailSections = computed(() => {
           name: 'organization',
           placeholder: 'Select organization',
           options: getOrganizationOptions(),
-          change: (data) => {
-            deal.data.organization = data.value
-            updateDeal('organization', data.value)
-          },
+          change: (data) => updateField('organization', data.value),
           link: () => {
             router.push({
               name: 'Organization',
@@ -492,10 +496,7 @@ const detailSections = computed(() => {
             { label: 'Madam', value: 'Madam' },
             { label: 'Miss', value: 'Miss' },
           ],
-          change: (data) => {
-            deal.data.salutation = data.value
-            updateDeal('salutation', data.value)
-          },
+          change: (data) => updateField('salutation', data.value),
         },
         {
           label: 'First name',
@@ -526,9 +527,10 @@ const organization = computed(() => {
   return getOrganization(deal.data.organization)
 })
 
-function updateAssignedAgent(email) {
-  deal.data.deal_owner = email
-  updateDeal('deal_owner', email)
+function updateField(name, value) {
+  updateDeal(name, value, () => {
+    deal.data[name] = value
+  })
 }
 </script>
 
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index d8759212d..1f25a4119 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -18,7 +18,7 @@
           <UserAvatar class="mr-2" :user="option.email" size="sm" />
         </template>
       </FormControl>
-      <Dropdown :options="statusDropdownOptions(lead.data, 'lead', updateLead)">
+      <Dropdown :options="statusDropdownOptions(lead.data, 'lead', updateField)">
         <template #default="{ open }">
           <Button :label="lead.data.status">
             <template #prefix>
@@ -32,11 +32,7 @@
           </Button>
         </template>
       </Dropdown>
-      <Button
-        label="Convert to deal"
-        variant="solid"
-        @click="convertToDeal()"
-      />
+      <Button label="Convert to deal" variant="solid" @click="convertToDeal" />
     </template>
   </LayoutHeader>
   <div v-if="lead?.data" class="flex h-full overflow-hidden">
@@ -54,7 +50,7 @@
       >
         About this lead
       </div>
-      <FileUploader @success="changeLeadImage" :validateFile="validateFile">
+      <FileUploader @success="(file) => updateField('image', file.file_url)" :validateFile="validateFile">
         <template #default="{ openFileSelector, error }">
           <div class="flex items-center justify-start gap-5 p-5">
             <div class="group relative h-[88px] w-[88px]">
@@ -80,7 +76,7 @@
                           {
                             icon: 'trash-2',
                             label: 'Remove image',
-                            onClick: () => changeLeadImage(''),
+                            onClick: () => updateField('image', ''),
                           },
                         ],
                       }
@@ -254,37 +250,6 @@
                           />
                         </template>
                       </FormControl>
-                      <Dropdown
-                        v-else-if="field.type === 'dropdown'"
-                        :options="
-                          statusDropdownOptions(lead.data, 'lead', updateLead)
-                        "
-                        class="w-full flex-1"
-                      >
-                        <template #default="{ open }">
-                          <Button
-                            :label="lead.data[field.name]"
-                            class="w-full justify-between"
-                          >
-                            <template #prefix>
-                              <IndicatorIcon
-                                :class="
-                                  leadStatuses[lead.data[field.name]].color
-                                "
-                              />
-                            </template>
-                            <template #default>{{
-                              lead.data[field.name]
-                            }}</template>
-                            <template #suffix>
-                              <FeatherIcon
-                                :name="open ? 'chevron-up' : 'chevron-down'"
-                                class="h-4 text-gray-600"
-                              />
-                            </template>
-                          </Button>
-                        </template>
-                      </Dropdown>
                       <Tooltip
                         :text="field.tooltip"
                         class="flex h-7 cursor-pointer items-center px-2 py-1"
@@ -395,7 +360,9 @@ const reload = ref(false)
 const showOrganizationModal = ref(false)
 const _organization = ref({})
 
-function updateLead(fieldname, value) {
+function updateLead(fieldname, value, callback) {
+  value = Array.isArray(fieldname) ? '' : value
+
   createResource({
     url: 'frappe.client.set_value',
     params: {
@@ -414,6 +381,7 @@ function updateLead(fieldname, value) {
         icon: 'check',
         iconClasses: 'text-green-600',
       })
+      callback?.()
     },
     onError: (err) => {
       createToast({
@@ -459,11 +427,6 @@ const tabs = [
   },
 ]
 
-function changeLeadImage(file) {
-  lead.data.image = file.file_url
-  updateLead('image', file.file_url)
-}
-
 function validateFile(file) {
   let extn = file.name.split('.').pop().toLowerCase()
   if (!['png', 'jpg', 'jpeg'].includes(extn)) {
@@ -519,10 +482,7 @@ const detailSections = computed(() => {
             { label: 'Web', value: 'Web' },
             { label: 'Others', value: 'Others' },
           ],
-          change: (data) => {
-            lead.data.source = data.value
-            updateLead('source', data.value)
-          },
+          change: (data) => updateField('source', data.value),
         },
         {
           label: 'Industry',
@@ -535,10 +495,7 @@ const detailSections = computed(() => {
             { label: 'Banking', value: 'Banking' },
             { label: 'Others', value: 'Others' },
           ],
-          change: (data) => {
-            lead.data.industry = data.value
-            updateLead('industry', data.value)
-          },
+          change: (data) => updateField('industry', data.value),
         },
       ],
     },
@@ -562,10 +519,7 @@ const detailSections = computed(() => {
             { label: 'Madam', value: 'Madam' },
             { label: 'Miss', value: 'Miss' },
           ],
-          change: (data) => {
-            lead.data.salutation = data.value
-            updateLead('salutation', data.value)
-          },
+          change: (data) => updateField('salutation', data.value),
         },
         {
           label: 'First name',
@@ -597,9 +551,11 @@ const organization = computed(() => {
 })
 
 function convertToDeal() {
-  lead.data.status = 'Qualified'
-  lead.data.converted = 1
-  createDeal(lead.data)
+  updateLead({ status: 'Qualified', converted: 1 }, '', () => {
+    lead.data.status = 'Qualified'
+    lead.data.converted = 1
+    createDeal(lead.data)
+  })
 }
 
 async function createDeal(lead) {
@@ -618,8 +574,9 @@ async function createDeal(lead) {
 }
 
 function updateField(name, value) {
-  lead.data[name] = value
-  updateLead(name, value)
+  updateLead(name, value, () => {
+    lead.data[name] = value
+  })
 }
 </script>
 
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 6467cd014..97ec41c7c 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -78,7 +78,6 @@ export function statusDropdownOptions(data, doctype, action) {
       label: statuses[status].label,
       icon: () => h(IndicatorIcon, { class: statuses[status].color }),
       onClick: () => {
-        data.status = statuses[status].label
         action && action('status', statuses[status].label)
       },
     })

From 602a71c25c4ee3c0de4de97366107e7a0319e6ef Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 19:41:31 +0530
Subject: [PATCH 07/51] fix: get contacts along with email_ids & phone_nos

---
 crm/api/session.py | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/crm/api/session.py b/crm/api/session.py
index 758c53b6c..3d11961f8 100644
--- a/crm/api/session.py
+++ b/crm/api/session.py
@@ -23,12 +23,37 @@ def get_contacts():
 	if frappe.session.user == "Guest":
 		frappe.throw("Authentication failed", exc=frappe.AuthenticationError)
 
-	contacts = frappe.qb.get_query(
+	contacts = frappe.get_all(
 		"Contact",
-		fields=['name', 'first_name', 'last_name', 'full_name', 'image', 'email_id', 'mobile_no', 'phone', 'salutation', 'company_name', 'modified'],
+		fields=[
+			"name",
+			"salutation",
+			"first_name",
+			"last_name",
+			"full_name",
+			"image",
+			"email_id",
+			"mobile_no",
+			"phone",
+			"company_name",
+			"modified"
+		],
 		order_by="first_name asc",
 		distinct=True,
-	).run(as_dict=1)
+	)
+
+	for contact in contacts:
+		contact["email_ids"] = frappe.get_all(
+			"Contact Email",
+			filters={"parenttype": "Contact", "parent": contact.name},
+			fields=["email_id", "is_primary"],
+		)
+
+		contact["phone_nos"] = frappe.get_all(
+			"Contact Phone",
+			filters={"parenttype": "Contact", "parent": contact.name},
+			fields=["phone", "is_primary_phone", "is_primary_mobile_no"],
+		)
 
 	return contacts
 

From d2e4d3683d0a45209f6a923d3a2b1f26872091c8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 19:43:40 +0530
Subject: [PATCH 08/51] fix: changed frappeui dropdown component to handle
 footer (for now made a copy)

---
 .../src/components/frappe-ui/Dropdown.vue     | 157 ++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 frontend/src/components/frappe-ui/Dropdown.vue

diff --git a/frontend/src/components/frappe-ui/Dropdown.vue b/frontend/src/components/frappe-ui/Dropdown.vue
new file mode 100644
index 000000000..0974ce64d
--- /dev/null
+++ b/frontend/src/components/frappe-ui/Dropdown.vue
@@ -0,0 +1,157 @@
+<template>
+  <Menu as="div" class="relative inline-block text-left" v-slot="{ open }">
+    <Popover
+      :transition="dropdownTransition"
+      :show="open"
+      :placement="popoverPlacement"
+    >
+      <template #target>
+        <MenuButton as="div">
+          <slot v-if="$slots.default" v-bind="{ open }" />
+          <Button v-else :active="open" v-bind="button">
+            {{ button ? button?.label || null : 'Options' }}
+          </Button>
+        </MenuButton>
+      </template>
+
+      <template #body>
+        <div
+          class="rounded-lg bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+        >
+          <MenuItems
+            class="mt-2 min-w-40 divide-y divide-gray-100"
+            :class="{
+              'left-0 origin-top-left': placement == 'left',
+              'right-0 origin-top-right': placement == 'right',
+              'inset-x-0 origin-top': placement == 'center',
+            }"
+          >
+            <div v-for="group in groups" :key="group.key" class="p-1.5">
+              <div
+                v-if="group.group && !group.hideLabel"
+                class="flex h-7 items-center px-2 text-sm font-medium text-gray-500"
+              >
+                {{ group.group }}
+              </div>
+              <MenuItem
+                v-for="item in group.items"
+                :key="item.label"
+                v-slot="{ active }"
+              >
+                <component
+                  v-if="item.component"
+                  :is="item.component"
+                  :active="active"
+                />
+                <button
+                  v-else
+                  :class="[
+                    active ? 'bg-gray-100' : 'text-gray-800',
+                    'group flex h-7 w-full items-center rounded px-2 text-base',
+                  ]"
+                  @click="item.onClick"
+                >
+                  <FeatherIcon
+                    v-if="item.icon && typeof item.icon === 'string'"
+                    :name="item.icon"
+                    class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+                    aria-hidden="true"
+                  />
+                  <component
+                    class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+                    v-else-if="item.icon"
+                    :is="item.icon"
+                  />
+                  <span class="whitespace-nowrap">
+                    {{ item.label }}
+                  </span>
+                </button>
+              </MenuItem>
+            </div>
+          </MenuItems>
+          <div v-if="slots.footer" class="border-t p-1.5">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </template>
+    </Popover>
+  </Menu>
+</template>
+
+<script setup>
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+import { Popover, Button, FeatherIcon } from 'frappe-ui'
+import { computed, useSlots } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+  button: {
+    type: Object,
+    default: null,
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  placement: {
+    type: String,
+    default: 'left',
+  },
+})
+
+const router = useRouter()
+const slots = useSlots()
+
+const dropdownTransition = {
+  enterActiveClass: 'transition duration-100 ease-out',
+  enterFromClass: 'transform scale-95 opacity-0',
+  enterToClass: 'transform scale-100 opacity-100',
+  leaveActiveClass: 'transition duration-75 ease-in',
+  leaveFromClass: 'transform scale-100 opacity-100',
+  leaveToClass: 'transform scale-95 opacity-0',
+}
+
+const groups = computed(() => {
+  let groups = props.options[0]?.group
+    ? props.options
+    : [{ group: '', items: props.options }]
+
+  return groups.map((group, i) => {
+    return {
+      key: i,
+      group: group.group,
+      hideLabel: group.hideLabel || false,
+      items: filterOptions(group.items),
+    }
+  })
+})
+
+const popoverPlacement = computed(() => {
+  if (props.placement === 'left') return 'bottom-start'
+  if (props.placement === 'right') return 'bottom-end'
+  if (props.placement === 'center') return 'bottom-center'
+  return 'bottom'
+})
+
+function normalizeDropdownItem(option) {
+  let onClick = option.onClick || null
+  if (!onClick && option.route && router) {
+    onClick = () => router.push(option.route)
+  }
+
+  return {
+    label: option.label,
+    icon: option.icon,
+    group: option.group,
+    component: option.component,
+    onClick,
+  }
+}
+
+function filterOptions(options) {
+  return (options || [])
+    .filter(Boolean)
+    .filter((option) => (option.condition ? option.condition() : true))
+    .map((option) => normalizeDropdownItem(option))
+}
+</script>

From 67f38c993f71b6c48353a4fd1525c72e4784ff7c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 19:44:44 +0530
Subject: [PATCH 09/51] fix: create new email/phone no using dropdown also show
 all emails/phones

---
 crm/api/contact.py                       |  48 +++++++
 frontend/src/components/DropdownItem.vue |  41 ++++++
 frontend/src/pages/Contact.vue           | 160 +++++++++++++++++++++--
 3 files changed, 237 insertions(+), 12 deletions(-)
 create mode 100644 crm/api/contact.py
 create mode 100644 frontend/src/components/DropdownItem.vue

diff --git a/crm/api/contact.py b/crm/api/contact.py
new file mode 100644
index 000000000..5711f869b
--- /dev/null
+++ b/crm/api/contact.py
@@ -0,0 +1,48 @@
+import frappe
+
+
+@frappe.whitelist()
+def create_new(contact, field, value):
+    """Create new email or phone for a contact"""
+    if not frappe.has_permission("Contact", "write", contact):
+        frappe.throw("Not permitted", frappe.PermissionError)
+
+    contact = frappe.get_doc("Contact", contact)
+
+    if field == "email":
+        contact.append("email_ids", {"email_id": value})
+    elif field in ("mobile_no", "phone"):
+        contact.append("phone_nos", {"phone": value})
+    else:
+        frappe.throw("Invalid field")
+
+    contact.save()
+    return True
+
+
+@frappe.whitelist()
+def set_as_primary(contact, field, value):
+    """Set email or phone as primary for a contact"""
+    if not frappe.has_permission("Contact", "write", contact):
+        frappe.throw("Not permitted", frappe.PermissionError)
+
+    contact = frappe.get_doc("Contact", contact)
+
+    if field == "email":
+        for email in contact.email_ids:
+            if email.email_id == value:
+                email.is_primary = 1
+            else:
+                email.is_primary = 0
+    elif field in ("mobile_no", "phone"):
+        name = "is_primary_mobile_no" if field == "mobile_no" else "is_primary_phone"
+        for phone in contact.phone_nos:
+            if phone.phone == value:
+                phone.set(name, 1)
+            else:
+                phone.set(name, 0)
+    else:
+        frappe.throw("Invalid field")
+
+    contact.save()
+    return True
diff --git a/frontend/src/components/DropdownItem.vue b/frontend/src/components/DropdownItem.vue
new file mode 100644
index 000000000..5460ff4b4
--- /dev/null
+++ b/frontend/src/components/DropdownItem.vue
@@ -0,0 +1,41 @@
+<template>
+  <button
+    :class="[
+      active ? 'bg-gray-100' : 'text-gray-800',
+      'group flex h-7 w-full items-center justify-between gap-3 rounded px-2 text-base',
+    ]"
+    @click="onClick"
+  >
+    <span class="whitespace-nowrap">
+      {{ value }}
+    </span>
+    <FeatherIcon
+      v-if="selected"
+      name="check"
+      class="text-primary-500 h-4 w-4"
+      size="sm"
+    />
+  </button>
+</template>
+<script setup>
+import { FeatherIcon } from 'frappe-ui'
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index b64589f5d..fe80f88bc 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -95,14 +95,40 @@
               {{ field.label }}
             </div>
             <div class="flex-1 overflow-hidden">
-              <FormControl
-                v-if="field.type === 'email'"
-                type="email"
-                class="form-control"
-                :value="contact[field.name]"
-                @change.stop="updateContact(field.name, $event.target.value)"
-                :debounce="500"
-              />
+              <Dropdown
+                v-if="field.type === 'dropdown'"
+                :options="field.options"
+                class="form-control show-dropdown-icon w-full flex-1"
+              >
+                <template #default="{ open }">
+                  <div
+                    class="dropdown-button flex w-full items-center justify-between gap-2"
+                  >
+                    <Button
+                      :label="contact[field.name]"
+                      class="w-full justify-between truncate"
+                    >
+                      <div class="truncate">{{ contact[field.name] }}</div>
+                    </Button>
+                    <FeatherIcon
+                      :name="open ? 'chevron-up' : 'chevron-down'"
+                      class="h-4 text-gray-600"
+                    />
+                  </div>
+                </template>
+                <template #footer>
+                  <Button
+                    variant="ghost"
+                    class="w-full !justify-start"
+                    label="Create one"
+                    @click="field.create()"
+                  >
+                    <template #prefix>
+                      <FeatherIcon name="plus" class="h-4" />
+                    </template>
+                  </Button>
+                </template>
+              </Dropdown>
               <FormControl
                 v-else-if="field.type === 'link'"
                 type="autocomplete"
@@ -174,6 +200,16 @@
       </template>
     </Tabs>
   </div>
+  <Dialog v-model="show" :options="dialogOptions">
+    <template #body-content>
+      <FormControl
+        :type="new_field.type"
+        variant="outline"
+        v-model="new_field.value"
+        :placeholder="new_field.placeholder"
+      />
+    </template>
+  </Dialog>
 </template>
 
 <script setup>
@@ -181,21 +217,23 @@ import {
   FormControl,
   FeatherIcon,
   Breadcrumbs,
+  Dialog,
   Avatar,
   FileUploader,
   ErrorMessage,
-  Dropdown,
   Tooltip,
   Tabs,
   call,
   createResource,
   createListResource,
 } from 'frappe-ui'
+import Dropdown from '@/components/frappe-ui/Dropdown.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
+import DropdownItem from '@/components/DropdownItem.vue'
 import ExternalLinkIcon from '@/components/Icons/ExternalLinkIcon.vue'
 import LeadsListView from '@/components/ListViews/LeadsListView.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
@@ -520,13 +558,63 @@ const details = computed(() => {
     },
     {
       label: 'Email',
-      type: 'email',
-      name: 'email',
+      type: 'dropdown',
+      name: 'email_id',
+      options: contact.value?.email_ids?.map((email) => {
+        return {
+          label: email.email_id,
+          value: email.email_id,
+          component: h(DropdownItem, {
+            value: email.email_id,
+            selected: email.email_id === contact.value.email_id,
+            onClick: () => setAsPrimary('email', email.email_id),
+          }),
+        }
+      }),
+      create: () => {
+        new_field.value = { type: 'email', placeholder: 'Add email address' }
+        dialogOptions.value = {
+          title: 'Add email',
+          actions: [
+            {
+              label: 'Add',
+              variant: 'solid',
+              onClick: ({ close }) => createNew('email', close),
+            },
+          ],
+        }
+        show.value = true
+      },
     },
     {
       label: 'Mobile no.',
-      type: 'phone',
+      type: 'dropdown',
       name: 'mobile_no',
+      options: contact.value?.phone_nos?.map((phone) => {
+        return {
+          label: phone.phone,
+          value: phone.phone,
+          component: h(DropdownItem, {
+            value: phone.phone,
+            selected: phone.phone === contact.value.mobile_no,
+            onClick: () => setAsPrimary('mobile_no', phone.phone),
+          }),
+        }
+      }),
+      create: () => {
+        new_field.value = { type: 'phone', placeholder: 'Add mobile no.' }
+        dialogOptions.value = {
+          title: 'Add mobile no.',
+          actions: [
+            {
+              label: 'Add',
+              variant: 'solid',
+              onClick: ({ close }) => createNew('phone', close),
+            },
+          ],
+        }
+        show.value = true
+      },
     },
     {
       label: 'Organization',
@@ -548,6 +636,11 @@ const details = computed(() => {
   ]
 })
 
+const show = ref(false)
+const new_field = ref({})
+
+const dialogOptions = ref({})
+
 function updateContact(fieldname, value) {
   createResource({
     url: 'frappe.client.set_value',
@@ -576,6 +669,39 @@ function updateContact(fieldname, value) {
     },
   })
 }
+
+async function setAsPrimary(field, value) {
+  let d = await call('crm.api.contact.set_as_primary', {
+    contact: props.contactId,
+    field,
+    value,
+  })
+  if (d) {
+    contacts.reload()
+    createToast({
+      title: 'Contact updated',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
+async function createNew(field, close) {
+  let d = await call('crm.api.contact.create_new', {
+    contact: props.contactId,
+    field,
+    value: new_field.value.value,
+  })
+  if (d) {
+    contacts.reload()
+    createToast({
+      title: 'Contact updated',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+  close()
+}
 </script>
 
 <style scoped>
@@ -600,4 +726,14 @@ function updateContact(fieldname, value) {
   color: white;
   width: 0;
 }
+
+:deep(:has(> .dropdown-button)) {
+  width: 100%;
+}
+
+:deep(.dropdown-button > button > span) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>

From f1f6c911496c48286c9757031ee2bfe5ce617117 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 21:56:26 +0530
Subject: [PATCH 10/51] fix: include contacts with deal

---
 crm/fcrm/doctype/crm_deal/api.py        |  7 +++++++
 crm/fcrm/doctype/crm_deal/crm_deal.json | 11 +++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/crm/fcrm/doctype/crm_deal/api.py b/crm/fcrm/doctype/crm_deal/api.py
index 8f34ea33f..6da461069 100644
--- a/crm/fcrm/doctype/crm_deal/api.py
+++ b/crm/fcrm/doctype/crm_deal/api.py
@@ -18,4 +18,11 @@ def get_deal(name):
 		frappe.throw(_("Deal not found"), frappe.DoesNotExistError)
 	deal = deal.pop()
 
+
+	deal["contacts"] = frappe.get_all(
+		"CRM Contacts",
+		filters={"parenttype": "CRM Deal", "parent": deal.name},
+		fields=["contact"],
+	)
+
 	return deal
diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.json b/crm/fcrm/doctype/crm_deal/crm_deal.json
index 41289ef09..1363f8099 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.json
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.json
@@ -21,7 +21,8 @@
   "column_break_bqvs",
   "contacts_tab",
   "email",
-  "mobile_no"
+  "mobile_no",
+  "contacts"
  ],
  "fields": [
   {
@@ -114,11 +115,17 @@
    "options": "Qualification\nDemo/Making\nProposal/Quotation\nNegotiation\nReady to Close\nWon\nLost",
    "reqd": 1,
    "search_index": 1
+  },
+  {
+   "fieldname": "contacts",
+   "fieldtype": "Table",
+   "label": "Contacts",
+   "options": "CRM Contacts"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-11-06 21:53:50.442404",
+ "modified": "2023-11-09 19:58:15.620483",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Deal",

From 5cc0430874943356533a9ddcd5be65d71acc9112 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 9 Nov 2023 22:03:37 +0530
Subject: [PATCH 11/51] fix: added contacts section in deal

---
 frontend/src/pages/Deal.vue | 211 +++++++++++++++---------------------
 1 file changed, 85 insertions(+), 126 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 9aa220560..38e326be5 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -103,12 +103,12 @@
           >
             <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
               <div
-                class="flex max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
+                class="flex h-7 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
                 @click="toggle()"
               >
                 <FeatherIcon
                   name="chevron-right"
-                  class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
+                  class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
                   :class="{ 'rotate-90': opened }"
                 />
                 {{ section.label }}
@@ -123,6 +123,7 @@
               >
                 <div v-if="opened" class="flex flex-col gap-1.5">
                   <div
+                    v-if="section.fields"
                     v-for="field in section.fields"
                     :key="field.label"
                     class="flex items-center gap-2 px-3 text-base leading-5 first:mt-3"
@@ -132,34 +133,7 @@
                     </div>
                     <div class="flex-1 overflow-hidden">
                       <FormControl
-                        v-if="field.type === 'select'"
-                        type="select"
-                        :options="field.options"
-                        :value="deal.data[field.name]"
-                        @change.stop="
-                          updateDeal(field.name, $event.target.value)
-                        "
-                        :debounce="500"
-                        class="form-control cursor-pointer [&_select]:cursor-pointer"
-                      >
-                        <template #prefix>
-                          <IndicatorIcon
-                            :class="dealStatuses[deal.data[field.name]].color"
-                          />
-                        </template>
-                      </FormControl>
-                      <FormControl
-                        v-else-if="field.type === 'email'"
-                        type="email"
-                        class="form-control"
-                        :value="deal.data[field.name]"
-                        @change.stop="
-                          updateDeal(field.name, $event.target.value)
-                        "
-                        :debounce="500"
-                      />
-                      <FormControl
-                        v-else-if="field.type === 'link'"
+                        v-if="field.type === 'link'"
                         type="autocomplete"
                         :value="deal.data[field.name]"
                         :options="field.options"
@@ -167,40 +141,6 @@
                         :placeholder="field.placeholder"
                         class="form-control"
                       />
-                      <FormControl
-                        v-else-if="field.type === 'user'"
-                        type="autocomplete"
-                        :options="activeAgents"
-                        :value="getUser(deal.data[field.name]).full_name"
-                        @change="
-                          (option) => updateField('deal_owner', option.email)
-                        "
-                        class="form-control"
-                        :placeholder="deal.placeholder"
-                      >
-                        <template #target="{ togglePopover }">
-                          <Button
-                            variant="ghost"
-                            @click="togglePopover()"
-                            :label="getUser(deal.data[field.name]).full_name"
-                            class="w-full !justify-start"
-                          >
-                            <template #prefix>
-                              <UserAvatar
-                                :user="deal.data[field.name]"
-                                size="sm"
-                              />
-                            </template>
-                          </Button>
-                        </template>
-                        <template #item-prefix="{ option }">
-                          <UserAvatar
-                            class="mr-2"
-                            :user="option.email"
-                            size="sm"
-                          />
-                        </template>
-                      </FormControl>
                       <Dropdown
                         v-else-if="field.type === 'dropdown'"
                         :options="
@@ -242,26 +182,6 @@
                         :debounce="500"
                         class="form-control"
                       />
-                      <FormControl
-                        v-else-if="field.type === 'number'"
-                        type="number"
-                        :value="deal.data[field.name]"
-                        @change.stop="
-                          updateDeal(field.name, $event.target.value)
-                        "
-                        :debounce="500"
-                        class="form-control"
-                      />
-                      <FormControl
-                        v-else-if="field.type === 'tel'"
-                        type="tel"
-                        :value="deal.data[field.name]"
-                        @change.stop="
-                          updateDeal(field.name, $event.target.value)
-                        "
-                        :debounce="500"
-                        class="form-control"
-                      />
                       <Tooltip
                         :text="field.tooltip"
                         class="flex h-7 cursor-pointer items-center px-2 py-1"
@@ -290,6 +210,80 @@
                       @click="field.link(deal.data[field.name])"
                     />
                   </div>
+                  <div v-else>
+                    <div v-for="(contact, i) in section.contacts">
+                      <div
+                        class="px-2 pb-2.5"
+                        :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
+                      >
+                        <Toggler
+                          :is-opened="contact.opened"
+                          v-slot="{ opened: cOpened, toggle: cToggle }"
+                        >
+                          <div
+                            class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-gray-700"
+                          >
+                            <div
+                              class="flex h-7 items-center gap-2"
+                              @click="cToggle()"
+                            >
+                              <Avatar
+                                :label="
+                                  getContactByName(contact.name).full_name
+                                "
+                                :image="getContactByName(contact.name).image"
+                                size="md"
+                              />
+                              {{ getContactByName(contact.name).full_name }}
+                            </div>
+                            <div class="flex gap-3">
+                              <ExternalLinkIcon
+                                class="h-4 w-4"
+                                @click="
+                                  router.push({
+                                    name: 'Contact',
+                                    params: { contactId: contact.name },
+                                  })
+                                "
+                              />
+                              <FeatherIcon
+                                name="chevron-right"
+                                class="h-4 w-4 text-gray-900 transition-all duration-300 ease-in-out"
+                                :class="{ 'rotate-90': cOpened }"
+                                @click="cToggle()"
+                              />
+                            </div>
+                          </div>
+                          <transition
+                            enter-active-class="duration-300 ease-in"
+                            leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
+                            enter-to-class="max-h-[200px] overflow-hidden"
+                            leave-from-class="max-h-[200px] overflow-hidden"
+                            enter-from-class="max-h-0 overflow-hidden"
+                            leave-to-class="max-h-0 overflow-hidden"
+                          >
+                            <div
+                              v-if="cOpened"
+                              class="flex flex-col gap-1.5 text-base text-gray-800"
+                            >
+                              <div class="flex items-center gap-3 pl-1 pb-1.5 pt-4">
+                                <EmailIcon class="h-4 w-4" />
+                                {{ getContactByName(contact.name).email_id }}
+                              </div>
+                              <div class="flex items-center gap-3 p-1 py-1.5">
+                                <PhoneIcon class="h-4 w-4" />
+                                {{ getContactByName(contact.name).mobile_no }}
+                              </div>
+                            </div>
+                          </transition>
+                        </Toggler>
+                      </div>
+                      <div
+                        v-if="i != section.contacts.length - 1"
+                        class="mx-2 h-px border-t border-gray-200"
+                      />
+                    </div>
+                  </div>
                 </div>
               </transition>
             </Toggler>
@@ -336,7 +330,7 @@ import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { getUser } = usersStore()
-const { contacts } = contactsStore()
+const { getContactByName, contacts } = contactsStore()
 const { getOrganization, getOrganizationOptions } = organizationsStore()
 const router = useRouter()
 
@@ -479,46 +473,12 @@ const detailSections = computed(() => {
     {
       label: 'Contacts',
       opened: true,
-      fields: [
-        {
-          label: 'Salutation',
-          type: 'link',
-          name: 'salutation',
-          placeholder: 'Mr./Mrs./Ms.',
-          options: [
-            { label: 'Dr', value: 'Dr' },
-            { label: 'Mr', value: 'Mr' },
-            { label: 'Mrs', value: 'Mrs' },
-            { label: 'Ms', value: 'Ms' },
-            { label: 'Mx', value: 'Mx' },
-            { label: 'Prof', value: 'Prof' },
-            { label: 'Master', value: 'Master' },
-            { label: 'Madam', value: 'Madam' },
-            { label: 'Miss', value: 'Miss' },
-          ],
-          change: (data) => updateField('salutation', data.value),
-        },
-        {
-          label: 'First name',
-          type: 'data',
-          name: 'first_name',
-        },
-        {
-          label: 'Last name',
-          type: 'data',
-          name: 'last_name',
-        },
-        {
-          label: 'Email',
-          type: 'email',
-          name: 'email',
-        },
-        {
-          label: 'Mobile no.',
-          type: 'tel',
-          name: 'mobile_no',
-        },
-      ],
+      contacts: deal.data.contacts.map((contact) => {
+        return {
+          name: contact.contact,
+          opened: false,
+        }
+      }),
     },
   ]
 })
@@ -536,7 +496,6 @@ function updateField(name, value) {
 
 <style scoped>
 :deep(.form-control input),
-:deep(.form-control select),
 :deep(.form-control button) {
   border-color: transparent;
   background: white;

From 720977962d090b1d085e8f2f468ea5c4d5fed5f1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 11 Nov 2023 12:25:44 +0530
Subject: [PATCH 12/51] chore: spacing fixes

---
 frontend/src/components/frappe-ui/Autocomplete.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index b07bd19dc..803c6d546 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -32,8 +32,8 @@
       </template>
       <template #body="{ isOpen }">
         <div v-show="isOpen">
-          <div class="mt-1 rounded-lg bg-white text-base shadow-2xl">
-            <div class="relative p-1.5 pb-0">
+          <div class="mt-1 rounded-lg bg-white text-base shadow-2xl py-1">
+            <div class="relative px-1.5 pt-0.5">
               <ComboboxInput
                 ref="search"
                 class="form-input w-full"
@@ -98,7 +98,7 @@
                 No results found
               </li>
             </ComboboxOptions>
-            <div v-if="slots.footer" class="border-t p-1.5">
+            <div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
               <slot
                 name="footer"
                 v-bind="{ value: search?.el._value, close }"

From 1cb017ac9e55ae4113f843e41a263c877480ec7a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 11 Nov 2023 12:27:57 +0530
Subject: [PATCH 13/51] fix: Add new organization button in lead organization
 autocomplete

---
 frontend/src/pages/Deal.vue | 44 +++++++++++++++++++++++++++++++++----
 frontend/src/pages/Lead.vue | 13 +++++++----
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 38e326be5..ae21a4c0f 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -132,15 +132,32 @@
                       {{ field.label }}
                     </div>
                     <div class="flex-1 overflow-hidden">
-                      <FormControl
+                      <Autocomplete
                         v-if="field.type === 'link'"
-                        type="autocomplete"
                         :value="deal.data[field.name]"
                         :options="field.options"
                         @change="(e) => field.change(e)"
                         :placeholder="field.placeholder"
                         class="form-control"
-                      />
+                      >
+                        <template
+                          v-if="field.create"
+                          #footer="{ value, close }"
+                        >
+                          <div>
+                            <Button
+                              variant="ghost"
+                              class="w-full !justify-start"
+                              label="Create one"
+                              @click="field.create(value, close)"
+                            >
+                              <template #prefix>
+                                <FeatherIcon name="plus" class="h-4" />
+                              </template>
+                            </Button>
+                          </div>
+                        </template>
+                      </Autocomplete>
                       <Dropdown
                         v-else-if="field.type === 'dropdown'"
                         :options="
@@ -266,7 +283,9 @@
                               v-if="cOpened"
                               class="flex flex-col gap-1.5 text-base text-gray-800"
                             >
-                              <div class="flex items-center gap-3 pl-1 pb-1.5 pt-4">
+                              <div
+                                class="flex items-center gap-3 pb-1.5 pl-1 pt-4"
+                              >
                                 <EmailIcon class="h-4 w-4" />
                                 {{ getContactByName(contact.name).email_id }}
                               </div>
@@ -292,6 +311,14 @@
       </div>
     </div>
   </div>
+  <OrganizationModal
+    v-model="showOrganizationModal"
+    :organization="_organization"
+    :options="{
+      redirect: false,
+      afterInsert: (doc) => updateField('organization', doc.name),
+    }"
+  />
 </template>
 <script setup>
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -306,6 +333,8 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
 import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import {
   dealStatuses,
   statusDropdownOptions,
@@ -349,6 +378,8 @@ const deal = createResource({
 })
 
 const reload = ref(false)
+const showOrganizationModal = ref(false)
+const _organization = ref({})
 
 function updateDeal(fieldname, value, callback) {
   value = Array.isArray(fieldname) ? '' : value
@@ -430,6 +461,11 @@ const detailSections = computed(() => {
           placeholder: 'Select organization',
           options: getOrganizationOptions(),
           change: (data) => updateField('organization', data.value),
+          create: (value, close) => {
+            _organization.value.organization_name = value
+            showOrganizationModal.value = true
+            close()
+          },
           link: () => {
             router.push({
               name: 'Organization',
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 1f25a4119..b21882221 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -18,7 +18,9 @@
           <UserAvatar class="mr-2" :user="option.email" size="sm" />
         </template>
       </FormControl>
-      <Dropdown :options="statusDropdownOptions(lead.data, 'lead', updateField)">
+      <Dropdown
+        :options="statusDropdownOptions(lead.data, 'lead', updateField)"
+      >
         <template #default="{ open }">
           <Button :label="lead.data.status">
             <template #prefix>
@@ -50,7 +52,10 @@
       >
         About this lead
       </div>
-      <FileUploader @success="(file) => updateField('image', file.file_url)" :validateFile="validateFile">
+      <FileUploader
+        @success="(file) => updateField('image', file.file_url)"
+        :validateFile="validateFile"
+      >
         <template #default="{ openFileSelector, error }">
           <div class="flex items-center justify-start gap-5 p-5">
             <div class="group relative h-[88px] w-[88px]">
@@ -201,7 +206,7 @@
                         :placeholder="field.placeholder"
                         class="form-control"
                       >
-                        <template #footer="{ value, close }">
+                        <template v-if="field.create" #footer="{ value, close }">
                           <div>
                             <Button
                               variant="ghost"
@@ -291,7 +296,7 @@
     :organization="_organization"
     :options="{
       redirect: false,
-      afterInsert: (doc) => updateField('organiation', doc.name),
+      afterInsert: (doc) => updateField('organization', doc.name),
     }"
   />
 </template>

From 50fceef0c366f1edd5ecebfbf6128480b3f26de3 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 11 Nov 2023 13:35:39 +0530
Subject: [PATCH 14/51] feat: add/remove contact in deal

---
 crm/fcrm/doctype/crm_deal/crm_deal.py | 23 ++++++-
 frontend/src/pages/Deal.vue           | 95 +++++++++++++++++++++++----
 2 files changed, 106 insertions(+), 12 deletions(-)

diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.py b/crm/fcrm/doctype/crm_deal/crm_deal.py
index 3cfcf3479..df1c84136 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.py
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.py
@@ -1,7 +1,8 @@
 # Copyright (c) 2023, Frappe Technologies Pvt. Ltd. and contributors
 # For license information, please see license.txt
 
-# import frappe
+import frappe
+from frappe import _
 from frappe.model.document import Document
 
 
@@ -17,3 +18,23 @@ def sort_options():
 			{ "label": 'Email', "value": 'email' },
 			{ "label": 'Mobile no', "value": 'mobile_no' },
 		]
+
+@frappe.whitelist()
+def add_contact(deal, contact):
+	if not frappe.has_permission("CRM Deal", "write", deal):
+		frappe.throw(_("Not allowed to add contact to Deal"), frappe.PermissionError)
+
+	deal = frappe.get_cached_doc("CRM Deal", deal)
+	deal.append("contacts", {"contact": contact})
+	deal.save()
+	return True
+
+@frappe.whitelist()
+def remove_contact(deal, contact):
+	if not frappe.has_permission("CRM Deal", "write", deal):
+		frappe.throw(_("Not allowed to remove contact from Deal"), frappe.PermissionError)
+
+	deal = frappe.get_cached_doc("CRM Deal", deal)
+	deal.contacts = [d for d in deal.contacts if d.contact != contact]
+	deal.save()
+	return True
\ No newline at end of file
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index ae21a4c0f..390fbc1aa 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -102,16 +102,44 @@
             :class="{ 'border-b': i !== detailSections.length - 1 }"
           >
             <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
-              <div
-                class="flex h-7 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
-                @click="toggle()"
-              >
-                <FeatherIcon
-                  name="chevron-right"
-                  class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
-                  :class="{ 'rotate-90': opened }"
-                />
-                {{ section.label }}
+              <div class="flex items-center justify-between">
+                <div
+                  class="flex h-7 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
+                  @click="toggle()"
+                >
+                  <FeatherIcon
+                    name="chevron-right"
+                    class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
+                    :class="{ 'rotate-90': opened }"
+                  />
+                  {{ section.label }}
+                </div>
+                <div v-if="section.contacts" class="pr-2">
+                  <Autocomplete
+                    value=""
+                    :options="
+                      contacts.data.map((contact) => {
+                        return {
+                          label: contact.full_name,
+                          value: contact.name,
+                        }
+                      })
+                    "
+                    @change="(e) => addContact(e.value)"
+                  >
+                    <template #target="{ togglePopover }">
+                      <Button
+                        class="h-7 px-3"
+                        label="Add contact"
+                        @click="togglePopover()"
+                      >
+                        <template #prefix>
+                          <FeatherIcon name="plus" class="h-4" />
+                        </template>
+                      </Button>
+                    </template>
+                  </Autocomplete>
+                </div>
               </div>
               <transition
                 enter-active-class="duration-300 ease-in"
@@ -228,7 +256,11 @@
                     />
                   </div>
                   <div v-else>
-                    <div v-for="(contact, i) in section.contacts">
+                    <div
+                      v-if="section.contacts.length"
+                      v-for="(contact, i) in section.contacts"
+                      :key="contact.name"
+                    >
                       <div
                         class="px-2 pb-2.5"
                         :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
@@ -254,6 +286,11 @@
                               {{ getContactByName(contact.name).full_name }}
                             </div>
                             <div class="flex gap-3">
+                              <FeatherIcon
+                                name="trash-2"
+                                class="h-4 w-4"
+                                @click="removeContact(contact.name)"
+                              />
                               <ExternalLinkIcon
                                 class="h-4 w-4"
                                 @click="
@@ -302,6 +339,9 @@
                         class="mx-2 h-px border-t border-gray-200"
                       />
                     </div>
+                    <div v-else class="flex justify-center items-center text-base text-gray-600 h-20">
+                      No contacts added
+                    </div>
                   </div>
                 </div>
               </transition>
@@ -354,6 +394,7 @@ import {
   Avatar,
   Tabs,
   Breadcrumbs,
+  call,
 } from 'frappe-ui'
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -519,6 +560,38 @@ const detailSections = computed(() => {
   ]
 })
 
+async function addContact(value) {
+  let d = await call('crm.fcrm.doctype.crm_deal.crm_deal.add_contact', {
+    deal: props.dealId,
+    contact: value,
+  })
+  if (d) {
+    deal.reload()
+    contacts.reload()
+    createToast({
+      title: 'Contact added',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
+async function removeContact(value) {
+  let d = await call('crm.fcrm.doctype.crm_deal.crm_deal.remove_contact', {
+    deal: props.dealId,
+    contact: value,
+  })
+  if (d) {
+    deal.reload()
+    contacts.reload()
+    createToast({
+      title: 'Contact removed',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
 const organization = computed(() => {
   return getOrganization(deal.data.organization)
 })

From d3d9caad5db835ec97694404428c88e51adb6143 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 11 Nov 2023 22:56:44 +0530
Subject: [PATCH 15/51] fix: create new contact from deals add contact

---
 .../src/components/Modals/ContactModal.vue    | 87 ++++++++++++-------
 .../components/Modals/OrganizationModal.vue   |  2 +-
 frontend/src/pages/Deal.vue                   | 44 +++++++++-
 3 files changed, 100 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index f8d91a2bc..e492912e0 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -9,7 +9,7 @@
           label: editMode ? 'Update' : 'Create',
           variant: 'solid',
           disabled: !dirty,
-          onClick: ({ close }) => updateContact(close),
+          onClick: ({ close }) => editMode ? updateContact(close) : callInsertDoc(close),
         },
       ],
     }"
@@ -42,11 +42,21 @@
           />
         </div>
         <FormControl
-          type="text"
+          type="autocomplete"
           variant="outline"
           size="md"
           label="Organisation"
-          v-model="_contact.company_name"
+          :value="_contact.company_name"
+          :options="
+            organizations.data.map((d) => {
+              return {
+                label: d.name,
+                value: d.name,
+              }
+            })
+          "
+          @change="(e) => (_contact.company_name = e.value)"
+          placeholder="Select organization"
         />
         <div class="flex gap-4">
           <FormControl
@@ -74,53 +84,72 @@
 <script setup>
 import { FormControl, Dialog, call } from 'frappe-ui'
 import { ref, defineModel, nextTick, watch, computed } from 'vue'
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router'
+import { organizationsStore } from '@/stores/organizations'
 
 const props = defineProps({
   contact: {
     type: Object,
     default: {},
   },
+  options: {
+    type: Object,
+    default: {
+      redirect: true,
+      afterInsert: () => {},
+    },
+  },
 })
 
 const router = useRouter()
-
 const show = defineModel()
 const contacts = defineModel('reloadContacts')
 
+const { organizations } = organizationsStore()
+
 const editMode = ref(false)
 let _contact = ref({})
 
 async function updateContact(close) {
-  if (JSON.stringify(props.contact) === JSON.stringify(_contact.value)) {
+  if (!dirty.value) {
+    close()
     return
   }
 
-  if (_contact.value.name) {
-    let d = await call('frappe.client.set_value', {
+  let name = await callSetValue(values)
+
+  handleContactUpdate({ name }, close)
+}
+
+async function callSetValue(values) {
+  const d = await call('frappe.client.set_value', {
+    doctype: 'Contact',
+    name: _contact.value.name,
+    fieldname: values,
+  })
+  return d.name
+}
+
+async function callInsertDoc(close) {
+  const doc = await call('frappe.client.insert', {
+    doc: {
       doctype: 'Contact',
-      name: _contact.value.name,
-      fieldname: _contact.value,
-    })
-    if (d.name) {
-      contacts.value.reload()
-    }
-  } else {
-    let d = await call('frappe.client.insert', {
-      doc: {
-        doctype: 'Contact',
-        ..._contact.value,
-      },
+      ..._contact.value,
+    },
+  })
+  doc.name && handleContactUpdate(doc, close)
+}
+
+function handleContactUpdate(doc, close) {
+  contacts.value?.reload()
+  if (doc.name && props.options.redirect) {
+    router.push({
+      name: 'Contact',
+      params: { contactId: doc.name },
     })
-    if (d.name) {
-      contacts.value.reload()
-      router.push({
-        name: 'Contact',
-        params: { contactId: d.name },
-      })
-    }
   }
-  close()
+  close && close()
+  props.options.afterInsert && props.options.afterInsert(doc)
 }
 
 const dirty = computed(() => {
@@ -134,7 +163,7 @@ watch(
     editMode.value = false
     nextTick(() => {
       _contact.value = { ...props.contact }
-      if (_contact.value.first_name) {
+      if (_contact.value.name) {
         editMode.value = true
       }
     })
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index 7aa80fe85..ee5049bb9 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -57,13 +57,13 @@ const props = defineProps({
   },
 })
 
+const router = useRouter()
 const show = defineModel()
 const organizations = defineModel('reloadOrganizations')
 
 const title = ref(null)
 const editMode = ref(false)
 let _organization = ref({})
-const router = useRouter()
 
 async function updateOrganization(close) {
   const old = { ...props.organization }
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 390fbc1aa..9d309b5a3 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -125,7 +125,7 @@
                         }
                       })
                     "
-                    @change="(e) => addContact(e.value)"
+                    @change="(e) => e.value && addContact(e.value)"
                   >
                     <template #target="{ togglePopover }">
                       <Button
@@ -138,6 +138,29 @@
                         </template>
                       </Button>
                     </template>
+                    <template #footer="{ value, close }">
+                      <div>
+                        <Button
+                          variant="ghost"
+                          class="w-full !justify-start"
+                          label="Create one"
+                          @click="
+                            () => {
+                              _contact = {
+                                first_name: value,
+                                company_name: deal.data.organization,
+                              }
+                              showContactModal = true
+                              close()
+                            }
+                          "
+                        >
+                          <template #prefix>
+                            <FeatherIcon name="plus" class="h-4" />
+                          </template>
+                        </Button>
+                      </div>
+                    </template>
                   </Autocomplete>
                 </div>
               </div>
@@ -339,7 +362,10 @@
                         class="mx-2 h-px border-t border-gray-200"
                       />
                     </div>
-                    <div v-else class="flex justify-center items-center text-base text-gray-600 h-20">
+                    <div
+                      v-else
+                      class="flex h-20 items-center justify-center text-base text-gray-600"
+                    >
                       No contacts added
                     </div>
                   </div>
@@ -359,6 +385,14 @@
       afterInsert: (doc) => updateField('organization', doc.name),
     }"
   />
+  <ContactModal
+    v-model="showContactModal"
+    :contact="_contact"
+    :options="{
+      redirect: false,
+      afterInsert: (doc) => addContact(doc.name),
+    }"
+  />
 </template>
 <script setup>
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -374,6 +408,7 @@ import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import ContactModal from '@/components/Modals/ContactModal.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import {
   dealStatuses,
@@ -560,14 +595,17 @@ const detailSections = computed(() => {
   ]
 })
 
+const showContactModal = ref(false)
+const _contact = ref({})
+
 async function addContact(value) {
   let d = await call('crm.fcrm.doctype.crm_deal.crm_deal.add_contact', {
     deal: props.dealId,
     contact: value,
   })
   if (d) {
+    await contacts.reload()
     deal.reload()
-    contacts.reload()
     createToast({
       title: 'Contact added',
       icon: 'check',

From c40e3073b403d853018fc0054fd0d97e0a7a79e1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 12 Nov 2023 14:04:05 +0530
Subject: [PATCH 16/51] fix: redirect to organization & deal was not working
 from contact page

---
 frontend/src/pages/Contact.vue | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index fe80f88bc..2e30d391e 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -184,7 +184,7 @@
         />
         <DealsListView
           class="mt-4"
-          v-if="tab.label === 'Deals' && rows.length"
+          v-else-if="tab.label === 'Deals' && rows.length"
           :rows="rows"
           :columns="columns"
         />
@@ -357,7 +357,7 @@ const leads = createListResource({
 
 const deals = createListResource({
   type: 'list',
-  doctype: 'CRM Lead',
+  doctype: 'CRM Deal',
   cache: ['deals', props.contactId],
   fields: [
     'name',
@@ -366,12 +366,11 @@ const deals = createListResource({
     'status',
     'email',
     'mobile_no',
-    'lead_owner',
+    'deal_owner',
     'modified',
   ],
   filters: {
     email: contact.value?.email_id,
-    converted: 1,
   },
   orderBy: 'modified desc',
   pageLength: 20,
@@ -436,9 +435,9 @@ function getDealRowObject(deal) {
     },
     email: deal.email,
     mobile_no: deal.mobile_no,
-    lead_owner: {
-      label: deal.lead_owner && getUser(deal.lead_owner).full_name,
-      ...(deal.lead_owner && getUser(deal.lead_owner)),
+    deal_owner: {
+      label: deal.deal_owner && getUser(deal.deal_owner).full_name,
+      ...(deal.deal_owner && getUser(deal.deal_owner)),
     },
     modified: {
       label: dateFormat(deal.modified, dateTooltipFormat),
@@ -512,8 +511,8 @@ const dealColumns = [
     width: '11rem',
   },
   {
-    label: 'Lead owner',
-    key: 'lead_owner',
+    label: 'Deal owner',
+    key: 'deal_owner',
     width: '10rem',
   },
   {
@@ -629,7 +628,7 @@ const details = computed(() => {
       link: (data) => {
         router.push({
           name: 'Organization',
-          params: { organizationId: data.value },
+          params: { organizationId: data },
         })
       },
     },

From 4371a274845375360541be0459371aa4e822996f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 12 Nov 2023 14:06:26 +0530
Subject: [PATCH 17/51] fix: redirect to deal was not working from organization
 page

---
 frontend/src/pages/Organization.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index ba56c70a6..c830ba8fd 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -307,7 +307,7 @@ const leads = createListResource({
 
 const deals = createListResource({
   type: 'list',
-  doctype: 'CRM Lead',
+  doctype: 'CRM Deal',
   cache: ['deals', props.organization.name],
   fields: [
     'name',
@@ -316,12 +316,11 @@ const deals = createListResource({
     'status',
     'email',
     'mobile_no',
-    'lead_owner',
+    'deal_owner',
     'modified',
   ],
   filters: {
     organization: props.organization.name,
-    converted: 1,
   },
   orderBy: 'modified desc',
   pageLength: 20,
@@ -415,9 +414,9 @@ function getDealRowObject(deal) {
     },
     email: deal.email,
     mobile_no: deal.mobile_no,
-    lead_owner: {
-      label: deal.lead_owner && getUser(deal.lead_owner).full_name,
-      ...(deal.lead_owner && getUser(deal.lead_owner)),
+    deal_owner: {
+      label: deal.deal_owner && getUser(deal.deal_owner).full_name,
+      ...(deal.deal_owner && getUser(deal.deal_owner)),
     },
     modified: {
       label: dateFormat(deal.modified, dateTooltipFormat),
@@ -512,8 +511,8 @@ const dealColumns = [
     width: '11rem',
   },
   {
-    label: 'Lead owner',
-    key: 'lead_owner',
+    label: 'Deal owner',
+    key: 'deal_owner',
     width: '10rem',
   },
   {

From d297f045c57ed14040f3cdefdc230775dd7a43c3 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 12 Nov 2023 14:35:32 +0530
Subject: [PATCH 18/51] fix: after converting to deal add contact & deal owner

---
 crm/fcrm/doctype/crm_lead/crm_lead.py | 33 +++++++++++++++++++++++----
 frontend/src/pages/Lead.vue           | 26 +++++----------------
 2 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/crm/fcrm/doctype/crm_lead/crm_lead.py b/crm/fcrm/doctype/crm_lead/crm_lead.py
index 5704544cf..362b4a10e 100644
--- a/crm/fcrm/doctype/crm_lead/crm_lead.py
+++ b/crm/fcrm/doctype/crm_lead/crm_lead.py
@@ -15,9 +15,6 @@ def validate(self):
 		self.set_title()
 		self.validate_email()
 
-		if self.has_value_changed('converted') and self.converted:
-			self.create_contact()
-
 	def set_full_name(self):
 		if self.first_name:
 			self.lead_name = " ".join(
@@ -83,7 +80,7 @@ def create_contact(self):
 		contact.insert(ignore_permissions=True)
 		contact.reload()  # load changes by hooks on contact
 
-		return contact
+		return contact.name
 
 	def contact_exists(self):
 		email_exist = frappe.db.exists("Contact Email", {"email_id": self.email})
@@ -105,6 +102,19 @@ def contact_exists(self):
 
 		return False
 
+	def create_deal(self, contact):
+		deal = frappe.new_doc("CRM Deal")
+		deal.update(
+			{
+				"lead": self.name,
+				"organization": self.organization,
+				"deal_owner": self.lead_owner,
+				"contacts": [{"contact": contact}],
+			}
+		)
+		deal.insert(ignore_permissions=True)
+		return deal.name
+
 	@staticmethod
 	def sort_options():
 		return [
@@ -118,4 +128,17 @@ def sort_options():
 			{ "label": 'Last Name', "value": 'last_name' },
 			{ "label": 'Email', "value": 'email' },
 			{ "label": 'Mobile no', "value": 'mobile_no' },
-		]
\ No newline at end of file
+		]
+
+@frappe.whitelist()
+def convert_to_deal(lead):
+	if not frappe.has_permission("CRM Lead", "write", lead):
+		frappe.throw(_("Not allowed to convert Lead to Deal"), frappe.PermissionError)
+
+	lead = frappe.get_cached_doc("CRM Lead", lead)
+	lead.status = "Qualified"
+	lead.converted = 1
+	contact = lead.create_contact()
+	deal = lead.create_deal(contact)
+	lead.save()
+	return deal
\ No newline at end of file
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index b21882221..3fc32b1bb 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -379,7 +379,6 @@ function updateLead(fieldname, value, callback) {
     auto: true,
     onSuccess: () => {
       lead.reload()
-      contacts.reload()
       reload.value = true
       createToast({
         title: 'Lead updated',
@@ -555,26 +554,13 @@ const organization = computed(() => {
   return getOrganization(lead.data.organization)
 })
 
-function convertToDeal() {
-  updateLead({ status: 'Qualified', converted: 1 }, '', () => {
-    lead.data.status = 'Qualified'
-    lead.data.converted = 1
-    createDeal(lead.data)
+async function convertToDeal() {
+  let deal = await call('crm.fcrm.doctype.crm_lead.crm_lead.convert_to_deal', {
+    lead: lead.data.name,
   })
-}
-
-async function createDeal(lead) {
-  let d = await call('frappe.client.insert', {
-    doc: {
-      doctype: 'CRM Deal',
-      organization: lead.organization,
-      email: lead.email,
-      mobile_no: lead.mobile_no,
-      lead: lead.name,
-    },
-  })
-  if (d.name) {
-    router.push({ name: 'Deal', params: { dealId: d.name } })
+  if (deal) {
+    await contacts.reload()
+    router.push({ name: 'Deal', params: { dealId: deal } })
   }
 }
 

From 36f4ddee207433f1bce5d6095ad55f223f349afd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 12 Nov 2023 15:05:39 +0530
Subject: [PATCH 19/51] fix: set contact as primary backend logic

---
 .../doctype/crm_contacts/crm_contacts.json    | 14 +++++--
 crm/fcrm/doctype/crm_deal/crm_deal.py         | 38 +++++++++++++++++++
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/crm/fcrm/doctype/crm_contacts/crm_contacts.json b/crm/fcrm/doctype/crm_contacts/crm_contacts.json
index e6044d67b..5bca79f91 100644
--- a/crm/fcrm/doctype/crm_contacts/crm_contacts.json
+++ b/crm/fcrm/doctype/crm_contacts/crm_contacts.json
@@ -12,7 +12,8 @@
   "column_break_uvny",
   "gender",
   "mobile_no",
-  "phone"
+  "phone",
+  "is_primary"
  ],
  "fields": [
   {
@@ -55,7 +56,6 @@
    "fetch_from": "contact.phone",
    "fieldname": "phone",
    "fieldtype": "Data",
-   "in_list_view": 1,
    "label": "Phone",
    "options": "Phone",
    "read_only": 1
@@ -64,16 +64,22 @@
    "fetch_from": "contact.gender",
    "fieldname": "gender",
    "fieldtype": "Link",
-   "in_list_view": 1,
    "label": "Gender",
    "options": "Gender",
    "read_only": 1
+  },
+  {
+   "default": "0",
+   "fieldname": "is_primary",
+   "fieldtype": "Check",
+   "in_list_view": 1,
+   "label": "Is Primary"
   }
  ],
  "index_web_pages_for_search": 1,
  "istable": 1,
  "links": [],
- "modified": "2023-08-25 19:19:27.813526",
+ "modified": "2023-11-12 14:58:18.846919",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Contacts",
diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.py b/crm/fcrm/doctype/crm_deal/crm_deal.py
index df1c84136..927c8baa6 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.py
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.py
@@ -7,6 +7,44 @@
 
 
 class CRMDeal(Document):
+	def validate(self):
+		self.set_primary_contact()
+		self.set_primary_email_mobile_no()
+
+	def set_primary_contact(self, contact=None):
+		if not self.contacts:
+			return
+
+		if not contact and len(self.contacts) == 1:
+			self.contacts[0].is_primary = 1
+		elif contact:
+			for d in self.contacts:
+				if d.contact == contact:
+					d.is_primary = 1
+				else:
+					d.is_primary = 0
+
+	def set_primary_email_mobile_no(self):
+		if not self.contacts:
+			self.email = ""
+			self.mobile_no = ""
+			return
+
+		if len([contact for contact in self.contacts if contact.is_primary]) > 1:
+			frappe.throw(_("Only one {0} can be set as primary.").format(frappe.bold("Contact")))
+
+		primary_contact_exists = False
+		for d in self.contacts:
+			if d.is_primary == 1:
+				primary_contact_exists = True
+				self.email = d.email.strip()
+				self.mobile_no = d.mobile_no.strip()
+				break
+
+		if not primary_contact_exists:
+			self.email = ""
+			self.mobile_no = ""
+
 	@staticmethod
 	def sort_options():
 		return [

From d408d066c76f7101ee18e455e64b7214894b54e7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 12:21:50 +0530
Subject: [PATCH 20/51] feat: set contact as primary from UI

---
 crm/fcrm/doctype/crm_deal/api.py              |   2 +-
 crm/fcrm/doctype/crm_deal/crm_deal.py         |  10 ++
 frontend/src/components/Icons/SuccessIcon.vue |  16 +++
 frontend/src/pages/Deal.vue                   | 123 ++++++++++--------
 4 files changed, 99 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/components/Icons/SuccessIcon.vue

diff --git a/crm/fcrm/doctype/crm_deal/api.py b/crm/fcrm/doctype/crm_deal/api.py
index 6da461069..a995e65a3 100644
--- a/crm/fcrm/doctype/crm_deal/api.py
+++ b/crm/fcrm/doctype/crm_deal/api.py
@@ -22,7 +22,7 @@ def get_deal(name):
 	deal["contacts"] = frappe.get_all(
 		"CRM Contacts",
 		filters={"parenttype": "CRM Deal", "parent": deal.name},
-		fields=["contact"],
+		fields=["contact", "is_primary"],
 	)
 
 	return deal
diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.py b/crm/fcrm/doctype/crm_deal/crm_deal.py
index 927c8baa6..c1f34b28d 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.py
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.py
@@ -75,4 +75,14 @@ def remove_contact(deal, contact):
 	deal = frappe.get_cached_doc("CRM Deal", deal)
 	deal.contacts = [d for d in deal.contacts if d.contact != contact]
 	deal.save()
+	return True
+
+@frappe.whitelist()
+def set_primary_contact(deal, contact):
+	if not frappe.has_permission("CRM Deal", "write", deal):
+		frappe.throw(_("Not allowed to set primary contact for Deal"), frappe.PermissionError)
+
+	deal = frappe.get_cached_doc("CRM Deal", deal)
+	deal.set_primary_contact(contact)
+	deal.save()
 	return True
\ No newline at end of file
diff --git a/frontend/src/components/Icons/SuccessIcon.vue b/frontend/src/components/Icons/SuccessIcon.vue
new file mode 100644
index 000000000..831786e61
--- /dev/null
+++ b/frontend/src/components/Icons/SuccessIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM11.2909 5.98482C11.4666 5.77175 11.4363 5.45663 11.2232 5.28096C11.0101 5.1053 10.695 5.13561 10.5193 5.34868L7.07001 9.53239L5.72845 7.79857C5.55946 7.58018 5.24543 7.54012 5.02703 7.70911C4.80863 7.8781 4.76858 8.19214 4.93756 8.41053L6.66217 10.6394C6.7552 10.7596 6.89788 10.831 7.04988 10.8334C7.20188 10.8357 7.3467 10.7688 7.4434 10.6515L11.2909 5.98482Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 9d309b5a3..6202c46fa 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -209,37 +209,6 @@
                           </div>
                         </template>
                       </Autocomplete>
-                      <Dropdown
-                        v-else-if="field.type === 'dropdown'"
-                        :options="
-                          statusDropdownOptions(deal.data, 'deal', updateField)
-                        "
-                        class="w-full flex-1"
-                      >
-                        <template #default="{ open }">
-                          <Button
-                            :label="deal.data[field.name]"
-                            class="w-full justify-between"
-                          >
-                            <template #prefix>
-                              <IndicatorIcon
-                                :class="
-                                  dealStatuses[deal.data[field.name]].color
-                                "
-                              />
-                            </template>
-                            <template #default>{{
-                              deal.data[field.name]
-                            }}</template>
-                            <template #suffix>
-                              <FeatherIcon
-                                :name="open ? 'chevron-up' : 'chevron-down'"
-                                class="h-4 text-gray-600"
-                              />
-                            </template>
-                          </Button>
-                        </template>
-                      </Dropdown>
                       <FormControl
                         v-else-if="field.type === 'date'"
                         type="date"
@@ -307,28 +276,41 @@
                                 size="md"
                               />
                               {{ getContactByName(contact.name).full_name }}
-                            </div>
-                            <div class="flex gap-3">
-                              <FeatherIcon
-                                name="trash-2"
-                                class="h-4 w-4"
-                                @click="removeContact(contact.name)"
+                              <Badge
+                                v-if="contact.is_primary"
+                                class="ml-2"
+                                variant="outline"
+                                label="Primary"
+                                theme="green"
                               />
-                              <ExternalLinkIcon
-                                class="h-4 w-4"
+                            </div>
+                            <div class="flex items-center">
+                              <Dropdown :options="contactOptions(contact)">
+                                <Button variant="ghost">
+                                  <FeatherIcon
+                                    name="more-horizontal"
+                                    class="h-4 text-gray-600"
+                                  />
+                                </Button>
+                              </Dropdown>
+                              <Button
+                                variant="ghost"
                                 @click="
                                   router.push({
                                     name: 'Contact',
                                     params: { contactId: contact.name },
                                   })
                                 "
-                              />
-                              <FeatherIcon
-                                name="chevron-right"
-                                class="h-4 w-4 text-gray-900 transition-all duration-300 ease-in-out"
-                                :class="{ 'rotate-90': cOpened }"
-                                @click="cToggle()"
-                              />
+                              >
+                                <ExternalLinkIcon class="h-4 w-4" />
+                              </Button>
+                              <Button variant="ghost" @click="cToggle()">
+                                <FeatherIcon
+                                  name="chevron-right"
+                                  class="h-4 w-4 text-gray-900 transition-all duration-300 ease-in-out"
+                                  :class="{ 'rotate-90': cOpened }"
+                                />
+                              </Button>
                             </div>
                           </div>
                           <transition
@@ -403,6 +385,7 @@ import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import LinkIcon from '@/components/Icons/LinkIcon.vue'
 import ExternalLinkIcon from '@/components/Icons/ExternalLinkIcon.vue'
+import SuccessIcon from '@/components/Icons/SuccessIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
@@ -430,8 +413,9 @@ import {
   Tabs,
   Breadcrumbs,
   call,
+  Badge,
 } from 'frappe-ui'
-import { ref, computed } from 'vue'
+import { ref, computed, h } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { getUser } = usersStore()
@@ -588,6 +572,7 @@ const detailSections = computed(() => {
       contacts: deal.data.contacts.map((contact) => {
         return {
           name: contact.contact,
+          is_primary: contact.is_primary,
           opened: false,
         }
       }),
@@ -598,10 +583,30 @@ const detailSections = computed(() => {
 const showContactModal = ref(false)
 const _contact = ref({})
 
-async function addContact(value) {
+function contactOptions(contact) {
+  let options = [
+    {
+      label: 'Delete',
+      icon: 'trash-2',
+      onClick: () => removeContact(contact.name),
+    },
+  ]
+
+  if (!contact.is_primary) {
+    options.push({
+      label: 'Set as primary contact',
+      icon: h(SuccessIcon, { class: 'h-4 w-4' }),
+      onClick: () => setPrimaryContact(contact.name),
+    })
+  }
+
+  return options
+}
+
+async function addContact(contact) {
   let d = await call('crm.fcrm.doctype.crm_deal.crm_deal.add_contact', {
     deal: props.dealId,
-    contact: value,
+    contact,
   })
   if (d) {
     await contacts.reload()
@@ -614,10 +619,10 @@ async function addContact(value) {
   }
 }
 
-async function removeContact(value) {
+async function removeContact(contact) {
   let d = await call('crm.fcrm.doctype.crm_deal.crm_deal.remove_contact', {
     deal: props.dealId,
-    contact: value,
+    contact,
   })
   if (d) {
     deal.reload()
@@ -630,6 +635,22 @@ async function removeContact(value) {
   }
 }
 
+async function setPrimaryContact(contact) {
+  let d = await call('crm.fcrm.doctype.crm_deal.crm_deal.set_primary_contact', {
+    deal: props.dealId,
+    contact,
+  })
+  if (d) {
+    await contacts.reload()
+    deal.reload()
+    createToast({
+      title: 'Primary contact set',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
 const organization = computed(() => {
   return getOrganization(deal.data.organization)
 })

From 1203990faf636eaf25f3ac42fd9cdbf242ddeffd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 13:16:57 +0530
Subject: [PATCH 21/51] fix: create new email/phone if contact doesn't have any

---
 frontend/src/pages/Contact.vue | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 2e30d391e..607f70bfe 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -96,7 +96,7 @@
             </div>
             <div class="flex-1 overflow-hidden">
               <Dropdown
-                v-if="field.type === 'dropdown'"
+                v-if="field.type === 'dropdown' && field.options.length"
                 :options="field.options"
                 class="form-control show-dropdown-icon w-full flex-1"
               >
@@ -561,8 +561,6 @@ const details = computed(() => {
       name: 'email_id',
       options: contact.value?.email_ids?.map((email) => {
         return {
-          label: email.email_id,
-          value: email.email_id,
           component: h(DropdownItem, {
             value: email.email_id,
             selected: email.email_id === contact.value.email_id,
@@ -570,8 +568,13 @@ const details = computed(() => {
           }),
         }
       }),
-      create: () => {
-        new_field.value = { type: 'email', placeholder: 'Add email address' }
+      create: (value) => {
+        new_field.value = {
+          type: 'email',
+          fieldname: 'email',
+          value,
+          placeholder: 'Add email address',
+        }
         dialogOptions.value = {
           title: 'Add email',
           actions: [
@@ -591,8 +594,6 @@ const details = computed(() => {
       name: 'mobile_no',
       options: contact.value?.phone_nos?.map((phone) => {
         return {
-          label: phone.phone,
-          value: phone.phone,
           component: h(DropdownItem, {
             value: phone.phone,
             selected: phone.phone === contact.value.mobile_no,
@@ -600,8 +601,13 @@ const details = computed(() => {
           }),
         }
       }),
-      create: () => {
-        new_field.value = { type: 'phone', placeholder: 'Add mobile no.' }
+      create: (value) => {
+        new_field.value = {
+          type: 'phone',
+          fieldname: 'mobile_no',
+          value,
+          placeholder: 'Add mobile no.',
+        }
         dialogOptions.value = {
           title: 'Add mobile no.',
           actions: [
@@ -641,6 +647,10 @@ const new_field = ref({})
 const dialogOptions = ref({})
 
 function updateContact(fieldname, value) {
+  if (['mobile_no', 'email_id'].includes(fieldname)) {
+    details.value.find((d) => d.name === fieldname).create(value)
+    return
+  }
   createResource({
     url: 'frappe.client.set_value',
     params: {
@@ -698,6 +708,9 @@ async function createNew(field, close) {
       icon: 'check',
       iconClasses: 'text-green-600',
     })
+    if (!contact.value[new_field.value.fieldname]) {
+      setAsPrimary(new_field.value.fieldname, new_field.value.value)
+    }
   }
   close()
 }

From 2f6b55e7bd789ee162d51cc8cf47b1643240b233 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 13:36:56 +0530
Subject: [PATCH 22/51] fix: made industry readonly & removed job title from
 organization

---
 crm/fcrm/doctype/crm_lead/crm_lead.json       |  8 +++---
 .../crm_organization/crm_organization.json    |  8 +-----
 frontend/src/pages/Lead.vue                   | 26 +++++++++----------
 3 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/crm/fcrm/doctype/crm_lead/crm_lead.json b/crm/fcrm/doctype/crm_lead/crm_lead.json
index 269a0e79d..3aaa2ad60 100644
--- a/crm/fcrm/doctype/crm_lead/crm_lead.json
+++ b/crm/fcrm/doctype/crm_lead/crm_lead.json
@@ -20,6 +20,7 @@
   "column_break_lcuv",
   "lead_owner",
   "status",
+  "job_title",
   "source",
   "converted",
   "organization_tab",
@@ -28,7 +29,6 @@
   "no_of_employees",
   "column_break_dbsv",
   "website",
-  "job_title",
   "annual_revenue",
   "industry",
   "contact_tab",
@@ -185,11 +185,9 @@
    "search_index": 1
   },
   {
-   "fetch_from": "organization.job_title",
    "fieldname": "job_title",
    "fieldtype": "Data",
-   "label": "Job Title",
-   "read_only": 1
+   "label": "Job Title"
   },
   {
    "fieldname": "organization_tab",
@@ -219,7 +217,7 @@
  "image_field": "image",
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-11-09 12:44:18.770076",
+ "modified": "2023-11-13 13:35:35.783003",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Lead",
diff --git a/crm/fcrm/doctype/crm_organization/crm_organization.json b/crm/fcrm/doctype/crm_organization/crm_organization.json
index eee059190..f048fc34e 100644
--- a/crm/fcrm/doctype/crm_organization/crm_organization.json
+++ b/crm/fcrm/doctype/crm_organization/crm_organization.json
@@ -11,7 +11,6 @@
   "organization_logo",
   "column_break_pnpp",
   "website",
-  "job_title",
   "annual_revenue",
   "industry"
  ],
@@ -43,11 +42,6 @@
    "fieldname": "column_break_pnpp",
    "fieldtype": "Column Break"
   },
-  {
-   "fieldname": "job_title",
-   "fieldtype": "Data",
-   "label": "Job Title"
-  },
   {
    "fieldname": "annual_revenue",
    "fieldtype": "Currency",
@@ -63,7 +57,7 @@
  "image_field": "organization_logo",
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-11-06 15:28:26.610882",
+ "modified": "2023-11-13 13:32:39.029742",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Organization",
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 3fc32b1bb..06fe0e0ef 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -206,7 +206,10 @@
                         :placeholder="field.placeholder"
                         class="form-control"
                       >
-                        <template v-if="field.create" #footer="{ value, close }">
+                        <template
+                          v-if="field.create"
+                          #footer="{ value, close }"
+                        >
                           <div>
                             <Button
                               variant="ghost"
@@ -471,6 +474,14 @@ const detailSections = computed(() => {
           tooltip:
             'It is a read only field, value is fetched from organization',
         },
+        {
+          label: 'Industry',
+          type: 'read_only',
+          name: 'industry',
+          value: organization.value?.industry,
+          tooltip:
+            'It is a read only field, value is fetched from organization',
+        },
         {
           label: 'Job title',
           type: 'data',
@@ -488,19 +499,6 @@ const detailSections = computed(() => {
           ],
           change: (data) => updateField('source', data.value),
         },
-        {
-          label: 'Industry',
-          type: 'link',
-          name: 'industry',
-          placeholder: 'Select industry...',
-          options: [
-            { label: 'Advertising', value: 'Advertising' },
-            { label: 'Agriculture', value: 'Agriculture' },
-            { label: 'Banking', value: 'Banking' },
-            { label: 'Others', value: 'Others' },
-          ],
-          change: (data) => updateField('industry', data.value),
-        },
       ],
     },
     {

From 289bc4df227cb5858a004ccfd99a3a9e1d3daada Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 13:42:50 +0530
Subject: [PATCH 23/51] fix: remove selectable from contact/organizations
 lead/deal/contact listview

---
 frontend/src/components/ListViews/ContactsListView.vue | 7 +++++++
 frontend/src/pages/Contact.vue                         | 2 ++
 frontend/src/pages/Organization.vue                    | 3 +++
 3 files changed, 12 insertions(+)

diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index 238fe3858..9540cc052 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -4,6 +4,7 @@
     :rows="rows"
     :options="{
       getRowRoute: (row) => ({ name: 'Contact', params: { contactId: row.name } }),
+      selectable: options.selectable,
     }"
     row-key="name"
   >
@@ -70,5 +71,11 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  options: {
+    type: Object,
+    default: () => ({
+      selectable: true,
+    }),
+  },
 })
 </script>
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 607f70bfe..38ae93ae4 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -181,12 +181,14 @@
           v-if="tab.label === 'Leads' && rows.length"
           :rows="rows"
           :columns="columns"
+          :options="{ selectable: false }"
         />
         <DealsListView
           class="mt-4"
           v-else-if="tab.label === 'Deals' && rows.length"
           :rows="rows"
           :columns="columns"
+          :options="{ selectable: false }"
         />
         <div
           v-if="!rows.length"
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index c830ba8fd..46624bb78 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -137,18 +137,21 @@
             v-if="tab.label === 'Leads' && rows.length"
             :rows="rows"
             :columns="columns"
+            :options="{ selectable: false }"
           />
           <DealsListView
             class="mt-4"
             v-if="tab.label === 'Deals' && rows.length"
             :rows="rows"
             :columns="columns"
+            :options="{ selectable: false }"
           />
           <ContactsListView
             class="mt-4"
             v-if="tab.label === 'Contacts' && rows.length"
             :rows="rows"
             :columns="columns"
+            :options="{ selectable: false }"
           />
           <div
             v-if="!rows.length"

From 4be5c18b7a2fbb46f3ff689160e98a2260051141 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 15:40:42 +0530
Subject: [PATCH 24/51] feat: Link component to render any link field with
 options

---
 frontend/src/components/Controls/Link.vue | 54 +++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 frontend/src/components/Controls/Link.vue

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
new file mode 100644
index 000000000..be0431437
--- /dev/null
+++ b/frontend/src/components/Controls/Link.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="space-y-1.5">
+    <label class="block" :class="labelClasses" v-if="attrs.label">
+      {{ attrs.label }}
+    </label>
+    <Autocomplete
+      :options="options"
+      v-model="value"
+      :size="attrs.size || 'sm'"
+      :variant="attrs.variant"
+      :placeholder="attrs.placeholder"
+    />
+  </div>
+</template>
+
+<script setup>
+import { call } from 'frappe-ui'
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import { defineModel, useAttrs, computed } from 'vue'
+import { computedAsync } from '@vueuse/core'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+})
+
+const value = defineModel()
+const attrs = useAttrs()
+
+const options = computedAsync(async () => {
+  let options = await call('frappe.desk.search.search_link', {
+    txt: '',
+    doctype: props.doctype,
+  })
+  return options?.map((option) => {
+    return {
+      label: option.value,
+      value: option.value,
+    }
+  })
+})
+
+const labelClasses = computed(() => {
+  return [
+    {
+      sm: 'text-xs',
+      md: 'text-base',
+    }[attrs.size || 'sm'],
+    'text-gray-600',
+  ]
+})
+</script>

From ce9477daca293d568b35be2af743b6e87e16b8a9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 15:41:22 +0530
Subject: [PATCH 25/51] fix: updated autocomplete to handle variant & size

---
 .../src/components/frappe-ui/Autocomplete.vue | 55 +++++++++++++++++--
 1 file changed, 51 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index 803c6d546..ed581bb27 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -5,8 +5,8 @@
         <slot name="target" v-bind="{ open: openPopover, togglePopover }">
           <div class="w-full">
             <button
-              class="flex h-7 w-full items-center justify-between gap-2 rounded bg-gray-100 px-2 py-1 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-gray-400"
-              :class="{ 'bg-gray-200': isComboboxOpen }"
+              class="flex w-full items-center justify-between focus:outline-none"
+              :class="inputClasses"
               @click="() => togglePopover()"
             >
               <div class="flex items-center">
@@ -32,7 +32,7 @@
       </template>
       <template #body="{ isOpen }">
         <div v-show="isOpen">
-          <div class="mt-1 rounded-lg bg-white text-base shadow-2xl py-1">
+          <div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
             <div class="relative px-1.5 pt-0.5">
               <ComboboxInput
                 ref="search"
@@ -121,7 +121,14 @@ import {
 import { Popover, Button, FeatherIcon } from 'frappe-ui'
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
 
-const props = defineProps(['modelValue', 'options', 'placeholder'])
+const props = defineProps([
+  'modelValue',
+  'options',
+  'placeholder',
+  'variant',
+  'size',
+  'disabled',
+])
 const emit = defineEmits(['update:modelValue', 'update:query', 'change'])
 
 const query = ref('')
@@ -201,4 +208,44 @@ watch(showOptions, (val) => {
     })
   }
 })
+
+const textColor = computed(() => {
+  return props.disabled ? 'text-gray-600' : 'text-gray-800'
+})
+
+const inputClasses = computed(() => {
+  let sizeClasses = {
+    sm: 'text-base rounded h-7',
+    md: 'text-base rounded h-8',
+    lg: 'text-lg rounded-md h-10',
+    xl: 'text-xl rounded-md h-10',
+  }[props.size]
+
+  let paddingClasses = {
+    sm: 'py-1.5 px-2',
+    md: 'py-1.5 px-2.5',
+    lg: 'py-1.5 px-3',
+    xl: 'py-1.5 px-3',
+  }[props.size]
+
+  let variant = props.disabled ? 'disabled' : props.variant
+  let variantClasses = {
+    subtle:
+      'border border-gray-100 bg-gray-100 placeholder-gray-500 hover:border-gray-200 hover:bg-gray-200 focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+    outline:
+      'border border-gray-300 bg-white placeholder-gray-500 hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+    disabled: [
+      'border bg-gray-50 placeholder-gray-400',
+      props.variant === 'outline' ? 'border-gray-300' : 'border-transparent',
+    ],
+  }[variant]
+
+  return [
+    sizeClasses,
+    paddingClasses,
+    variantClasses,
+    textColor.value,
+    'transition-colors w-full',
+  ]
+})
 </script>

From 91481634855584ef84e0895c3467c6259a714f0c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 16:03:19 +0530
Subject: [PATCH 26/51] fix: added more organization fields

---
 .../components/Modals/OrganizationModal.vue   | 77 +++++++++++++++----
 1 file changed, 63 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index ee5049bb9..cc3e46c00 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -16,21 +16,62 @@
   >
     <template #body-content>
       <div class="flex flex-col gap-4">
-        <div>
-          <div class="mb-1.5 text-sm text-gray-600">Organization name</div>
-          <TextInput
-            ref="title"
+        <FormControl
+          type="text"
+          ref="title"
+          size="md"
+          label="Organization name"
+          variant="outline"
+          v-model="_organization.organization_name"
+          placeholder="Add organization name"
+        />
+        <div class="flex gap-4">
+          <FormControl
+            class="flex-1"
+            type="text"
+            size="md"
+            label="Website"
             variant="outline"
-            v-model="_organization.organization_name"
-            placeholder="Add organization name"
+            v-model="_organization.website"
+            placeholder="Add website"
+          />
+          <FormControl
+            class="flex-1"
+            type="text"
+            size="md"
+            label="Annual revenue"
+            variant="outline"
+            v-model="_organization.annual_revenue"
+            placeholder="Add annual revenue"
           />
         </div>
-        <div>
-          <div class="mb-1.5 text-sm text-gray-600">Website</div>
-          <TextInput
+        <div class="flex gap-4">
+          <FormControl
+            class="flex-1"
+            type="select"
+            :options="[
+              '1-10',
+              '11-50',
+              '51-200',
+              '201-500',
+              '501-1000',
+              '1001-5000',
+              '5001-10000',
+              '10001+',
+            ]"
+            size="md"
+            label="No. of employees"
             variant="outline"
-            v-model="_organization.website"
-            placeholder="Add website"
+            v-model="_organization.no_of_employees"
+          />
+          <Link
+            class="flex-1"
+            size="md"
+            label="Industry"
+            variant="outline"
+            v-model="_organization.industry"
+            doctype="CRM Industry"
+            placeholder="Add industry"
           />
         </div>
       </div>
@@ -39,7 +80,8 @@
 </template>
 
 <script setup>
-import { TextInput, Dialog, call } from 'frappe-ui'
+import Link from '@/components/Controls/Link.vue'
+import { FormControl, Dialog, call } from 'frappe-ui'
 import { ref, defineModel, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -63,7 +105,13 @@ const organizations = defineModel('reloadOrganizations')
 
 const title = ref(null)
 const editMode = ref(false)
-let _organization = ref({})
+let _organization = ref({
+  organization_name: '',
+  website: '',
+  annual_revenue: '',
+  no_of_employees: '1-10',
+  industry: '',
+})
 
 async function updateOrganization(close) {
   const old = { ...props.organization }
@@ -138,7 +186,8 @@ watch(
     if (!value) return
     editMode.value = false
     nextTick(() => {
-      title.value.el.focus()
+      // TODO: Issue with FormControl
+      // title.value.el.focus()
       _organization.value = { ...props.organization }
       if (_organization.value.name) {
         editMode.value = true

From 929c0e4ee8b95f312e68ac00f84ae9d3fe717ab7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 16:24:36 +0530
Subject: [PATCH 27/51] fix: return value as string not object

---
 frontend/src/components/Controls/Link.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index be0431437..3e2738bf1 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -16,7 +16,7 @@
 <script setup>
 import { call } from 'frappe-ui'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
-import { defineModel, useAttrs, computed } from 'vue'
+import { useAttrs, computed } from 'vue'
 import { computedAsync } from '@vueuse/core'
 
 const props = defineProps({
@@ -24,11 +24,21 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  modelValue: {
+    type: String,
+    default: '',
+  },
 })
 
-const value = defineModel()
+const emit = defineEmits(['update:modelValue'])
+
 const attrs = useAttrs()
 
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val?.value),
+})
+
 const options = computedAsync(async () => {
   let options = await call('frappe.desk.search.search_link', {
     txt: '',

From 230ecae1be4a845834699dae22372db2da89f6ad Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 16:25:17 +0530
Subject: [PATCH 28/51] fix: load all organization fields

---
 crm/api/session.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crm/api/session.py b/crm/api/session.py
index 3d11961f8..2b7e2d074 100644
--- a/crm/api/session.py
+++ b/crm/api/session.py
@@ -64,7 +64,7 @@ def get_organizations():
 
 	organizations = frappe.qb.get_query(
 		"CRM Organization",
-		fields=['name', 'organization_name', 'organization_logo', 'website'],
+		fields=['*'],
 		order_by="name asc",
 		distinct=True,
 	).run(as_dict=1)

From ca036bcd2c15148841356a7d859349c361a8527a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 16:33:40 +0530
Subject: [PATCH 29/51] fix: show industry & revenue in details section

---
 frontend/src/pages/Organization.vue | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index 46624bb78..2ab6f0d45 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -61,25 +61,30 @@
             <span class="">{{ website(organization.website) }}</span>
           </div>
           <span
-            v-if="organization.email_id"
+            v-if="organization.industry && organization.website"
             class="text-3xl leading-[0] text-gray-600"
-            >&middot;</span
           >
-          <div v-if="organization.email_id" class="flex items-center gap-1.5">
-            <EmailIcon class="h-4 w-4" />
-            <span class="">{{ organization.email_id }}</span>
+            &middot;
+          </span>
+          <div v-if="organization.industry" class="flex items-center gap-1.5">
+            <FeatherIcon name="briefcase" class="h-4 w-4" />
+            <span class="">{{ organization.industry }}</span>
           </div>
           <span
             v-if="
-              (organization.name || organization.email_id) &&
-              organization.mobile_no
+              (organization.website || organization.industry) &&
+              organization.annual_revenue
             "
             class="text-3xl leading-[0] text-gray-600"
-            >&middot;</span
           >
-          <div v-if="organization.mobile_no" class="flex items-center gap-1.5">
-            <PhoneIcon class="h-4 w-4" />
-            <span class="">{{ organization.mobile_no }}</span>
+            &middot;
+          </span>
+          <div
+            v-if="organization.annual_revenue"
+            class="flex items-center gap-1.5"
+          >
+            <FeatherIcon name="dollar-sign" class="h-4 w-4" />
+            <span class="">{{ organization.annual_revenue }}</span>
           </div>
         </div>
         <div class="mt-1 flex gap-2">

From e6ce52fec8d01dc3edaf02fa042d961427cdb631 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 16:39:23 +0530
Subject: [PATCH 30/51] fix: update LeadListView/DealListView

---
 frontend/src/components/ListViews/DealsListView.vue | 7 +++++++
 frontend/src/components/ListViews/LeadsListView.vue | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 8824466b6..576e43084 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -4,6 +4,7 @@
     :rows="rows"
     :options="{
       getRowRoute: (row) => ({ name: 'Deal', params: { dealId: row.name } }),
+      selectable: options.selectable,
     }"
     row-key="name"
   >
@@ -75,5 +76,11 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  options: {
+    type: Object,
+    default: () => ({
+      selectable: true,
+    }),
+  },
 })
 </script>
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index ccf4b0c49..e28c57629 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -4,6 +4,7 @@
     :rows="rows"
     :options="{
       getRowRoute: (row) => ({ name: 'Lead', params: { leadId: row.name } }),
+      selectable: options.selectable,
     }"
     row-key="name"
   >
@@ -84,5 +85,11 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  options: {
+    type: Object,
+    default: () => ({
+      selectable: true,
+    }),
+  },
 })
 </script>

From eadea3e680b9f51fc68d954968cbd457cf338472 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 16:44:03 +0530
Subject: [PATCH 31/51] chore: change only if value is there

---
 frontend/src/pages/Contact.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 38ae93ae4..90809bfa0 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -134,7 +134,7 @@
                 type="autocomplete"
                 :value="contact[field.name]"
                 :options="field.options"
-                @change="(e) => field.change(e)"
+                @change="(e) => e && field.change(e)"
                 :placeholder="field.placeholder"
                 class="form-control"
               />

From 8224af82be9f10bfc7e4ff7d1020d9c631f5a454 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 17:03:15 +0530
Subject: [PATCH 32/51] fix: Link control was showing only 20 records

---
 frontend/src/components/Controls/Link.vue          | 8 ++++++--
 frontend/src/components/frappe-ui/Autocomplete.vue | 2 ++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 3e2738bf1..1588df1a1 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -4,6 +4,7 @@
       {{ attrs.label }}
     </label>
     <Autocomplete
+      ref="autocomplete"
       :options="options"
       v-model="value"
       :size="attrs.size || 'sm'"
@@ -16,7 +17,7 @@
 <script setup>
 import { call } from 'frappe-ui'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
-import { useAttrs, computed } from 'vue'
+import { useAttrs, computed, ref } from 'vue'
 import { computedAsync } from '@vueuse/core'
 
 const props = defineProps({
@@ -39,9 +40,12 @@ const value = computed({
   set: (val) => emit('update:modelValue', val?.value),
 })
 
+const autocomplete = ref(null)
+const text = computed(() => autocomplete.value?.query)
+
 const options = computedAsync(async () => {
   let options = await call('frappe.desk.search.search_link', {
-    txt: '',
+    txt: text.value || '',
     doctype: props.doctype,
   })
   return options?.map((option) => {
diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index ed581bb27..9e641b9aa 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -248,4 +248,6 @@ const inputClasses = computed(() => {
     'transition-colors w-full',
   ]
 })
+
+defineExpose({ query })
 </script>

From e748c55e6b34a7737907340eaef711dc19fb70e1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 17:04:57 +0530
Subject: [PATCH 33/51] fix: added Link Control in contact modal for
 organization

---
 .../src/components/Modals/ContactModal.vue     | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index e492912e0..4589b9633 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -41,21 +41,12 @@
             v-model="_contact.last_name"
           />
         </div>
-        <FormControl
-          type="autocomplete"
+        <Link 
           variant="outline"
           size="md"
-          label="Organisation"
-          :value="_contact.company_name"
-          :options="
-            organizations.data.map((d) => {
-              return {
-                label: d.name,
-                value: d.name,
-              }
-            })
-          "
-          @change="(e) => (_contact.company_name = e.value)"
+          label="Organization"
+          v-model="_contact.company_name"
+          doctype="CRM Organization"
           placeholder="Select organization"
         />
         <div class="flex gap-4">
@@ -82,6 +73,7 @@
 </template>
 
 <script setup>
+import Link from '@/components/Controls/Link.vue'
 import { FormControl, Dialog, call } from 'frappe-ui'
 import { ref, defineModel, nextTick, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'

From 61fa0eb6166c301eca092211e894b376a6c9b541 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 17:08:23 +0530
Subject: [PATCH 34/51] fix: also replaced Salutation with Link field

---
 frontend/src/components/Modals/ContactModal.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index 4589b9633..8949ce316 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -16,12 +16,13 @@
   >
     <template #body-content>
       <div class="flex flex-col gap-4">
-        <FormControl
-          type="text"
-          size="md"
+        <Link 
           variant="outline"
+          size="md"
           label="Salutation"
           v-model="_contact.salutation"
+          doctype="Salutation"
+          placeholder="Mr./Mrs./Ms..."
         />
         <div class="flex gap-4">
           <FormControl
@@ -77,7 +78,6 @@ import Link from '@/components/Controls/Link.vue'
 import { FormControl, Dialog, call } from 'frappe-ui'
 import { ref, defineModel, nextTick, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { organizationsStore } from '@/stores/organizations'
 
 const props = defineProps({
   contact: {
@@ -97,8 +97,6 @@ const router = useRouter()
 const show = defineModel()
 const contacts = defineModel('reloadContacts')
 
-const { organizations } = organizationsStore()
-
 const editMode = ref(false)
 let _contact = ref({})
 

From f5e3b81be8ee5f7d8106dfe1e7fde74e790a4e39 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 17:49:08 +0530
Subject: [PATCH 35/51] fix: added hooks to validate contact before save

---
 crm/api/contact.py | 93 ++++++++++++++++++++++++++++------------------
 crm/hooks.py       | 12 +++---
 2 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/crm/api/contact.py b/crm/api/contact.py
index 5711f869b..06a634082 100644
--- a/crm/api/contact.py
+++ b/crm/api/contact.py
@@ -1,48 +1,69 @@
 import frappe
 
 
+def validate(doc, method):
+	set_primary_email(doc)
+	set_primary_mobile_no(doc)
+	doc.set_primary_email()
+	doc.set_primary("mobile_no")
+
+
+def set_primary_email(doc):
+	if not doc.email_ids:
+		return
+
+	if len(doc.email_ids) == 1:
+		doc.email_ids[0].is_primary = 1
+
+def set_primary_mobile_no(doc):
+	if not doc.phone_nos:
+		return
+
+	if len(doc.phone_nos) == 1:
+		doc.phone_nos[0].is_primary_mobile_no = 1
+
 @frappe.whitelist()
 def create_new(contact, field, value):
-    """Create new email or phone for a contact"""
-    if not frappe.has_permission("Contact", "write", contact):
-        frappe.throw("Not permitted", frappe.PermissionError)
+	"""Create new email or phone for a contact"""
+	if not frappe.has_permission("Contact", "write", contact):
+		frappe.throw("Not permitted", frappe.PermissionError)
 
-    contact = frappe.get_doc("Contact", contact)
+	contact = frappe.get_doc("Contact", contact)
 
-    if field == "email":
-        contact.append("email_ids", {"email_id": value})
-    elif field in ("mobile_no", "phone"):
-        contact.append("phone_nos", {"phone": value})
-    else:
-        frappe.throw("Invalid field")
+	if field == "email":
+		contact.append("email_ids", {"email_id": value})
+	elif field in ("mobile_no", "phone"):
+		contact.append("phone_nos", {"phone": value})
+	else:
+		frappe.throw("Invalid field")
 
-    contact.save()
-    return True
+	contact.save()
+	return True
 
 
 @frappe.whitelist()
 def set_as_primary(contact, field, value):
-    """Set email or phone as primary for a contact"""
-    if not frappe.has_permission("Contact", "write", contact):
-        frappe.throw("Not permitted", frappe.PermissionError)
-
-    contact = frappe.get_doc("Contact", contact)
-
-    if field == "email":
-        for email in contact.email_ids:
-            if email.email_id == value:
-                email.is_primary = 1
-            else:
-                email.is_primary = 0
-    elif field in ("mobile_no", "phone"):
-        name = "is_primary_mobile_no" if field == "mobile_no" else "is_primary_phone"
-        for phone in contact.phone_nos:
-            if phone.phone == value:
-                phone.set(name, 1)
-            else:
-                phone.set(name, 0)
-    else:
-        frappe.throw("Invalid field")
-
-    contact.save()
-    return True
+	"""Set email or phone as primary for a contact"""
+	if not frappe.has_permission("Contact", "write", contact):
+		frappe.throw("Not permitted", frappe.PermissionError)
+
+	contact = frappe.get_doc("Contact", contact)
+
+	if field == "email":
+		for email in contact.email_ids:
+			if email.email_id == value:
+				email.is_primary = 1
+			else:
+				email.is_primary = 0
+	elif field in ("mobile_no", "phone"):
+		name = "is_primary_mobile_no" if field == "mobile_no" else "is_primary_phone"
+		for phone in contact.phone_nos:
+			if phone.phone == value:
+				phone.set(name, 1)
+			else:
+				phone.set(name, 0)
+	else:
+		frappe.throw("Invalid field")
+
+	contact.save()
+	return True
diff --git a/crm/hooks.py b/crm/hooks.py
index 744e09195..fdaef00f9 100644
--- a/crm/hooks.py
+++ b/crm/hooks.py
@@ -125,13 +125,11 @@
 # ---------------
 # Hook on document methods and events
 
-# doc_events = {
-#	"*": {
-#		"on_update": "method",
-#		"on_cancel": "method",
-#		"on_trash": "method"
-#	}
-# }
+doc_events = {
+	"Contact": {
+		"validate": ["crm.api.contact.validate"],
+	},
+}
 
 # Scheduled Tasks
 # ---------------

From f71525fa5a3ce68ecba1ebc89c203a0a53b9fb89 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 17:50:08 +0530
Subject: [PATCH 36/51] fix: set emails/phones table on contact create

---
 frontend/src/components/Modals/ContactModal.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index 8949ce316..9de9fff0e 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -9,14 +9,15 @@
           label: editMode ? 'Update' : 'Create',
           variant: 'solid',
           disabled: !dirty,
-          onClick: ({ close }) => editMode ? updateContact(close) : callInsertDoc(close),
+          onClick: ({ close }) =>
+            editMode ? updateContact(close) : callInsertDoc(close),
         },
       ],
     }"
   >
     <template #body-content>
       <div class="flex flex-col gap-4">
-        <Link 
+        <Link
           variant="outline"
           size="md"
           label="Salutation"
@@ -42,7 +43,7 @@
             v-model="_contact.last_name"
           />
         </div>
-        <Link 
+        <Link
           variant="outline"
           size="md"
           label="Organization"
@@ -121,6 +122,16 @@ async function callSetValue(values) {
 }
 
 async function callInsertDoc(close) {
+  if (_contact.value.email_id) {
+    _contact.value.email_ids = [{ email_id: _contact.value.email_id }]
+    delete _contact.value.email_id
+  }
+
+  if (_contact.value.mobile_no) {
+    _contact.value.phone_nos = [{ phone: _contact.value.mobile_no }]
+    delete _contact.value.mobile_no
+  }
+
   const doc = await call('frappe.client.insert', {
     doc: {
       doctype: 'Contact',

From 7bd276c37b9d00e9f2c68984fd90a6a302f397cc Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 17:50:21 +0530
Subject: [PATCH 37/51] chore: removed unused code

---
 frontend/src/pages/Contact.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 90809bfa0..7ae227eaf 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -573,7 +573,6 @@ const details = computed(() => {
       create: (value) => {
         new_field.value = {
           type: 'email',
-          fieldname: 'email',
           value,
           placeholder: 'Add email address',
         }
@@ -606,7 +605,6 @@ const details = computed(() => {
       create: (value) => {
         new_field.value = {
           type: 'phone',
-          fieldname: 'mobile_no',
           value,
           placeholder: 'Add mobile no.',
         }
@@ -710,9 +708,6 @@ async function createNew(field, close) {
       icon: 'check',
       iconClasses: 'text-green-600',
     })
-    if (!contact.value[new_field.value.fieldname]) {
-      setAsPrimary(new_field.value.fieldname, new_field.value.value)
-    }
   }
   close()
 }

From 21cc553d0c3508eb061b63005a91275becb1b40a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 18:13:04 +0530
Subject: [PATCH 38/51] fix: also handle value+change along with v-model

---
 frontend/src/components/Controls/Link.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 1588df1a1..b76442869 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -31,13 +31,18 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'change'])
 
 const attrs = useAttrs()
 
+const valuePropPassed = computed(() => 'value' in attrs)
+
 const value = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val?.value),
+  get: () => (valuePropPassed.value ? attrs.value : props.modelValue),
+  set: (val) => {
+    debugger
+    return emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value)
+  }
 })
 
 const autocomplete = ref(null)

From cc1657e91e41418b6c6390b54fb3bfe8b686eefc Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 18:16:50 +0530
Subject: [PATCH 39/51] fix: replaced salutation & organization with Link field
 in contact

---
 frontend/src/pages/Contact.vue | 40 +++++++++++++---------------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 7ae227eaf..2dbbfe46e 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -129,14 +129,13 @@
                   </Button>
                 </template>
               </Dropdown>
-              <FormControl
+              <Link
                 v-else-if="field.type === 'link'"
-                type="autocomplete"
+                class="form-control"
                 :value="contact[field.name]"
-                :options="field.options"
-                @change="(e) => e && field.change(e)"
+                :doctype="field.doctype"
                 :placeholder="field.placeholder"
-                class="form-control"
+                @change="(e) => e && field.change(e)"
               />
               <FormControl
                 v-else
@@ -215,6 +214,7 @@
 </template>
 
 <script setup>
+import Link from '@/components/Controls/Link.vue'
 import {
   FormControl,
   FeatherIcon,
@@ -256,7 +256,7 @@ import { useRouter } from 'vue-router'
 
 const { getContactByName, contacts } = contactsStore()
 const { getUser } = usersStore()
-const { getOrganization, getOrganizationOptions } = organizationsStore()
+const { getOrganization } = organizationsStore()
 
 const props = defineProps({
   contactId: {
@@ -530,21 +530,11 @@ const details = computed(() => {
       label: 'Salutation',
       type: 'link',
       name: 'salutation',
-      placeholder: 'Mr./Mrs./Ms.',
-      options: [
-        { label: 'Dr', value: 'Dr' },
-        { label: 'Mr', value: 'Mr' },
-        { label: 'Mrs', value: 'Mrs' },
-        { label: 'Ms', value: 'Ms' },
-        { label: 'Mx', value: 'Mx' },
-        { label: 'Prof', value: 'Prof' },
-        { label: 'Master', value: 'Master' },
-        { label: 'Madam', value: 'Madam' },
-        { label: 'Miss', value: 'Miss' },
-      ],
-      change: (data) => {
-        contact.value.salutation = data.value
-        updateContact('salutation', data.value)
+      placeholder: 'Mr./Mrs./Ms...',
+      doctype: 'Salutation',
+      change: (value) => {
+        contact.value.salutation = value
+        updateContact('salutation', value)
       },
     },
     {
@@ -626,10 +616,10 @@ const details = computed(() => {
       type: 'link',
       name: 'company_name',
       placeholder: 'Select organization',
-      options: getOrganizationOptions(),
-      change: (data) => {
-        contact.value.company_name = data.value
-        updateContact('company_name', data.value)
+      doctype: 'CRM Organization',
+      change: (value) => {
+        contact.value.company_name = value
+        updateContact('company_name', value)
       },
       link: (data) => {
         router.push({

From 179c670b0bafd1221da762a4c8694eed689a3a51 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 18:19:55 +0530
Subject: [PATCH 40/51] chore: code formatting

---
 frontend/src/components/Controls/Link.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index b76442869..b96aba9f8 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -39,10 +39,8 @@ const valuePropPassed = computed(() => 'value' in attrs)
 
 const value = computed({
   get: () => (valuePropPassed.value ? attrs.value : props.modelValue),
-  set: (val) => {
-    debugger
-    return emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value)
-  }
+  set: (val) =>
+    emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value),
 })
 
 const autocomplete = ref(null)

From ac1a20ec46fbf7c3f9dd24e472e8c81a17a7b2f1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 18:39:47 +0530
Subject: [PATCH 41/51] fix: allow slots in link field

---
 frontend/src/components/Controls/Link.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index b96aba9f8..9bd315e53 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -10,7 +10,23 @@
       :size="attrs.size || 'sm'"
       :variant="attrs.variant"
       :placeholder="attrs.placeholder"
-    />
+    >
+      <template #target="{ open, togglePopover }">
+        <slot name="target" v-bind="{ open, togglePopover }" />
+      </template>
+
+      <template #prefix>
+        <slot name="prefix" />
+      </template>
+
+      <template #item-prefix="{ active, selected, option }">
+        <slot name="item-prefix" v-bind="{ active, selected, option }" />
+      </template>
+
+      <template v-if="$slots.footer" #footer="{ value, close }">
+        <slot name="footer" v-bind="{ value, close }" />
+      </template>
+    </Autocomplete>
   </div>
 </template>
 

From 5abf460b5c7bd0b1f8caefe39afcc65090bd60c4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 18:40:53 +0530
Subject: [PATCH 42/51] fix: replaced salutation, source & organization with
 link field in lead

---
 frontend/src/pages/Lead.vue | 42 +++++++++++++------------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 06fe0e0ef..e2ed0d2e1 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -198,13 +198,13 @@
                         "
                         :debounce="500"
                       />
-                      <Autocomplete
+                      <Link
                         v-else-if="field.type === 'link'"
+                        class="form-control"
                         :value="lead.data[field.name]"
-                        :options="field.options"
-                        @change="(e) => field.change(e)"
+                        :doctype="field.doctype"
                         :placeholder="field.placeholder"
-                        class="form-control"
+                        @change="(e) => e && field.change(e)"
                       >
                         <template
                           v-if="field.create"
@@ -223,7 +223,7 @@
                             </Button>
                           </div>
                         </template>
-                      </Autocomplete>
+                      </Link>
                       <FormControl
                         v-else-if="field.type === 'user'"
                         type="autocomplete"
@@ -318,7 +318,7 @@ import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
-import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import Link from '@/components/Controls/Link.vue'
 import {
   leadStatuses,
   statusDropdownOptions,
@@ -347,7 +347,7 @@ import { useRouter } from 'vue-router'
 
 const { getUser } = usersStore()
 const { contacts } = contactsStore()
-const { getOrganization, getOrganizationOptions } = organizationsStore()
+const { getOrganization } = organizationsStore()
 const router = useRouter()
 
 const props = defineProps({
@@ -452,8 +452,8 @@ const detailSections = computed(() => {
           type: 'link',
           name: 'organization',
           placeholder: 'Select organization',
-          options: getOrganizationOptions(),
-          change: (data) => data && updateField('organization', data.value),
+          doctype: 'CRM Organization',
+          change: (data) => data && updateField('organization', data),
           create: (value, close) => {
             _organization.value.organization_name = value
             showOrganizationModal.value = true
@@ -492,12 +492,8 @@ const detailSections = computed(() => {
           type: 'link',
           name: 'source',
           placeholder: 'Select source...',
-          options: [
-            { label: 'Advertisement', value: 'Advertisement' },
-            { label: 'Web', value: 'Web' },
-            { label: 'Others', value: 'Others' },
-          ],
-          change: (data) => updateField('source', data.value),
+          doctype: 'CRM Lead Source',
+          change: (data) => updateField('source', data),
         },
       ],
     },
@@ -509,19 +505,9 @@ const detailSections = computed(() => {
           label: 'Salutation',
           type: 'link',
           name: 'salutation',
-          placeholder: 'Mr./Mrs./Ms.',
-          options: [
-            { label: 'Dr', value: 'Dr' },
-            { label: 'Mr', value: 'Mr' },
-            { label: 'Mrs', value: 'Mrs' },
-            { label: 'Ms', value: 'Ms' },
-            { label: 'Mx', value: 'Mx' },
-            { label: 'Prof', value: 'Prof' },
-            { label: 'Master', value: 'Master' },
-            { label: 'Madam', value: 'Madam' },
-            { label: 'Miss', value: 'Miss' },
-          ],
-          change: (data) => updateField('salutation', data.value),
+          placeholder: 'Mr./Mrs./Ms...',
+          doctype: 'Salutation',
+          change: (data) => updateField('salutation', data),
         },
         {
           label: 'First name',

From dc5b206e56c53fdf297d09517a3608cca2da106f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 18:49:41 +0530
Subject: [PATCH 43/51] fix: replaced organization & add contact autocomplete
 with link field

---
 frontend/src/pages/Deal.vue | 31 ++++++++++++-------------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 6202c46fa..0abefb394 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -115,17 +115,10 @@
                   {{ section.label }}
                 </div>
                 <div v-if="section.contacts" class="pr-2">
-                  <Autocomplete
+                  <Link
                     value=""
-                    :options="
-                      contacts.data.map((contact) => {
-                        return {
-                          label: contact.full_name,
-                          value: contact.name,
-                        }
-                      })
-                    "
-                    @change="(e) => e.value && addContact(e.value)"
+                    doctype="Contact"
+                    @change="(e) => e && addContact(e)"
                   >
                     <template #target="{ togglePopover }">
                       <Button
@@ -161,7 +154,7 @@
                         </Button>
                       </div>
                     </template>
-                  </Autocomplete>
+                  </Link>
                 </div>
               </div>
               <transition
@@ -183,13 +176,13 @@
                       {{ field.label }}
                     </div>
                     <div class="flex-1 overflow-hidden">
-                      <Autocomplete
+                      <Link
                         v-if="field.type === 'link'"
+                        class="form-control"
                         :value="deal.data[field.name]"
-                        :options="field.options"
-                        @change="(e) => field.change(e)"
+                        :doctype="field.doctype"
                         :placeholder="field.placeholder"
-                        class="form-control"
+                        @change="(e) => field.change(e)"
                       >
                         <template
                           v-if="field.create"
@@ -208,7 +201,7 @@
                             </Button>
                           </div>
                         </template>
-                      </Autocomplete>
+                      </Link>
                       <FormControl
                         v-else-if="field.type === 'date'"
                         type="date"
@@ -392,7 +385,7 @@ import Activities from '@/components/Activities.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
-import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import Link from '@/components/Controls/Link.vue'
 import {
   dealStatuses,
   statusDropdownOptions,
@@ -519,8 +512,8 @@ const detailSections = computed(() => {
           type: 'link',
           name: 'organization',
           placeholder: 'Select organization',
-          options: getOrganizationOptions(),
-          change: (data) => updateField('organization', data.value),
+          doctype: 'CRM Organization',
+          change: (data) => updateField('organization', data),
           create: (value, close) => {
             _organization.value.organization_name = value
             showOrganizationModal.value = true

From aa9eafdc5ec3de16e2ccb76b7710671fca0de9b7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 20:43:27 +0530
Subject: [PATCH 44/51] fix: debounce & cache the link options

---
 frontend/src/components/Controls/Link.vue | 24 +++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 9bd315e53..f509b681d 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -34,7 +34,7 @@
 import { call } from 'frappe-ui'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import { useAttrs, computed, ref } from 'vue'
-import { computedAsync } from '@vueuse/core'
+import { computedAsync, watchDebounced, useStorage } from '@vueuse/core'
 
 const props = defineProps({
   doctype: {
@@ -60,19 +60,35 @@ const value = computed({
 })
 
 const autocomplete = ref(null)
-const text = computed(() => autocomplete.value?.query)
+const text = ref('')
+
+watchDebounced(
+  () => autocomplete.value?.query,
+  (val) => (text.value = val),
+  { debounce: 500 }
+)
 
 const options = computedAsync(async () => {
+  let cachedOptions = localStorage.getItem(props.doctype + '-' + text.value)
+
+  if (cachedOptions) {
+    return JSON.parse(cachedOptions)
+  }
+
   let options = await call('frappe.desk.search.search_link', {
-    txt: text.value || '',
+    txt: text.value,
     doctype: props.doctype,
   })
-  return options?.map((option) => {
+  options = options?.map((option) => {
     return {
       label: option.value,
       value: option.value,
     }
   })
+
+  useStorage(props.doctype + '-' + text.value, options)
+
+  return options
 })
 
 const labelClasses = computed(() => {

From 318a4978864263ee2edd77dac7b180e6d93d95c1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 22:32:35 +0530
Subject: [PATCH 45/51] revert: removed storage cache from link field

---
 frontend/src/components/Controls/Link.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index f509b681d..830f36ac4 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -34,7 +34,7 @@
 import { call } from 'frappe-ui'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import { useAttrs, computed, ref } from 'vue'
-import { computedAsync, watchDebounced, useStorage } from '@vueuse/core'
+import { computedAsync, watchDebounced } from '@vueuse/core'
 
 const props = defineProps({
   doctype: {
@@ -69,12 +69,6 @@ watchDebounced(
 )
 
 const options = computedAsync(async () => {
-  let cachedOptions = localStorage.getItem(props.doctype + '-' + text.value)
-
-  if (cachedOptions) {
-    return JSON.parse(cachedOptions)
-  }
-
   let options = await call('frappe.desk.search.search_link', {
     txt: text.value,
     doctype: props.doctype,
@@ -85,9 +79,6 @@ const options = computedAsync(async () => {
       value: option.value,
     }
   })
-
-  useStorage(props.doctype + '-' + text.value, options)
-
   return options
 })
 

From e286551bcaf6edfdc8b3c10f662bbf3b81341a6e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 22:50:11 +0530
Subject: [PATCH 46/51] fix: get linked deals in contact

---
 crm/api/contact.py             | 38 ++++++++++++++++++++++++++++++++++
 frontend/src/pages/Contact.vue | 21 ++++---------------
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/crm/api/contact.py b/crm/api/contact.py
index 06a634082..e13fc4694 100644
--- a/crm/api/contact.py
+++ b/crm/api/contact.py
@@ -15,6 +15,7 @@ def set_primary_email(doc):
 	if len(doc.email_ids) == 1:
 		doc.email_ids[0].is_primary = 1
 
+
 def set_primary_mobile_no(doc):
 	if not doc.phone_nos:
 		return
@@ -22,6 +23,43 @@ def set_primary_mobile_no(doc):
 	if len(doc.phone_nos) == 1:
 		doc.phone_nos[0].is_primary_mobile_no = 1
 
+
+@frappe.whitelist()
+def get_linked_deals(contact):
+	"""Get linked deals for a contact"""
+
+	if not frappe.has_permission("Contact", "read", contact):
+		frappe.throw("Not permitted", frappe.PermissionError)
+
+	deal_names = frappe.get_all(
+		"CRM Contacts",
+		filters={"contact": contact, "parenttype": "CRM Deal"},
+		fields=["parent"],
+		distinct=True,
+	)
+
+	# get deals data
+	deals = []
+	for d in deal_names:
+		deal = frappe.get_cached_doc(
+			"CRM Deal",
+			d.parent,
+			fields=[
+				"name",
+				"organization",
+				"annual_revenue",
+				"status",
+				"email",
+				"mobile_no",
+				"deal_owner",
+				"modified",
+			],
+		)
+		deals.append(deal.as_dict())
+
+	return deals
+
+
 @frappe.whitelist()
 def create_new(contact, field, value):
 	"""Create new email or phone for a contact"""
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 2dbbfe46e..46363bb0a 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -357,25 +357,12 @@ const leads = createListResource({
   auto: true,
 })
 
-const deals = createListResource({
-  type: 'list',
-  doctype: 'CRM Deal',
+const deals = createResource({
+  url: 'crm.api.contact.get_linked_deals',
   cache: ['deals', props.contactId],
-  fields: [
-    'name',
-    'organization',
-    'annual_revenue',
-    'status',
-    'email',
-    'mobile_no',
-    'deal_owner',
-    'modified',
-  ],
-  filters: {
-    email: contact.value?.email_id,
+  params: {
+    contact: props.contactId,
   },
-  orderBy: 'modified desc',
-  pageLength: 20,
   auto: true,
 })
 

From f0fae040189a489155394038a5d5acdcb0b1c695 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 23:37:17 +0530
Subject: [PATCH 47/51] refactor: get link options

---
 frontend/src/components/Controls/Link.vue | 52 +++++++++++++++--------
 frontend/src/pages/Contact.vue            |  2 +-
 frontend/src/pages/Deal.vue               |  2 +-
 frontend/src/pages/Lead.vue               |  2 +-
 4 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 830f36ac4..0f79b2b6d 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -5,7 +5,7 @@
     </label>
     <Autocomplete
       ref="autocomplete"
-      :options="options"
+      :options="options.data"
       v-model="value"
       :size="attrs.size || 'sm'"
       :variant="attrs.variant"
@@ -31,10 +31,10 @@
 </template>
 
 <script setup>
-import { call } from 'frappe-ui'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import { watchDebounced } from '@vueuse/core'
+import { createResource } from 'frappe-ui'
 import { useAttrs, computed, ref } from 'vue'
-import { computedAsync, watchDebounced } from '@vueuse/core'
 
 const props = defineProps({
   doctype: {
@@ -55,8 +55,12 @@ const valuePropPassed = computed(() => 'value' in attrs)
 
 const value = computed({
   get: () => (valuePropPassed.value ? attrs.value : props.modelValue),
-  set: (val) =>
-    emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value),
+  set: (val) => {
+    return (
+      val?.value &&
+      emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value)
+    )
+  },
 })
 
 const autocomplete = ref(null)
@@ -64,22 +68,36 @@ const text = ref('')
 
 watchDebounced(
   () => autocomplete.value?.query,
-  (val) => (text.value = val),
-  { debounce: 500 }
+  (val) => {
+    if (text.value === val) return
+    text.value = val
+    options.update({
+      params: {
+        txt: val,
+        doctype: props.doctype,
+      },
+    })
+    options.reload()
+  },
+  { debounce: 300, immediate: true }
 )
 
-const options = computedAsync(async () => {
-  let options = await call('frappe.desk.search.search_link', {
+const options = createResource({
+  url: 'frappe.desk.search.search_link',
+  cache: [props.doctype, text.value],
+  method: 'POST',
+  params: {
     txt: text.value,
     doctype: props.doctype,
-  })
-  options = options?.map((option) => {
-    return {
-      label: option.value,
-      value: option.value,
-    }
-  })
-  return options
+  },
+  transform: (data) => {
+    return data.map((option) => {
+      return {
+        label: option.value,
+        value: option.value,
+      }
+    })
+  },
 })
 
 const labelClasses = computed(() => {
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 46363bb0a..2d6b9cbb4 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -135,7 +135,7 @@
                 :value="contact[field.name]"
                 :doctype="field.doctype"
                 :placeholder="field.placeholder"
-                @change="(e) => e && field.change(e)"
+                @change="(e) => field.change(e)"
               />
               <FormControl
                 v-else
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 0abefb394..5d4089b58 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -118,7 +118,7 @@
                   <Link
                     value=""
                     doctype="Contact"
-                    @change="(e) => e && addContact(e)"
+                    @change="(e) => addContact(e)"
                   >
                     <template #target="{ togglePopover }">
                       <Button
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index e2ed0d2e1..eb02c9eae 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -204,7 +204,7 @@
                         :value="lead.data[field.name]"
                         :doctype="field.doctype"
                         :placeholder="field.placeholder"
-                        @change="(e) => e && field.change(e)"
+                        @change="(e) => field.change(e)"
                       >
                         <template
                           v-if="field.create"

From e9bbd2fba7a9729bc1650d476bea9c931e84349e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 23:42:22 +0530
Subject: [PATCH 48/51] feat: filterable autocomplete

---
 frontend/src/components/Controls/Link.vue     |  1 +
 .../src/components/frappe-ui/Autocomplete.vue | 40 ++++++++++++++-----
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 0f79b2b6d..658764008 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -10,6 +10,7 @@
       :size="attrs.size || 'sm'"
       :variant="attrs.variant"
       :placeholder="attrs.placeholder"
+      :filterable="false"
     >
       <template #target="{ open, togglePopover }">
         <slot name="target" v-bind="{ open, togglePopover }" />
diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index 9e641b9aa..3ea95e2d5 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -121,14 +121,36 @@ import {
 import { Popover, Button, FeatherIcon } from 'frappe-ui'
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
 
-const props = defineProps([
-  'modelValue',
-  'options',
-  'placeholder',
-  'variant',
-  'size',
-  'disabled',
-])
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  size: {
+    type: String,
+    default: 'md',
+  },
+  variant: {
+    type: String,
+    default: 'subtle',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  filterable: {
+    type: Boolean,
+    default: true,
+  },
+})
 const emit = defineEmits(['update:modelValue', 'update:query', 'change'])
 
 const query = ref('')
@@ -170,7 +192,7 @@ const groups = computed(() => {
         key: i,
         group: group.group,
         hideLabel: group.hideLabel || false,
-        items: filterOptions(group.items),
+        items: props.filterable ? filterOptions(group.items) : group.items,
       }
     })
     .filter((group) => group.items.length > 0)

From c843f68738d04bd2bd0d95fda1bd9d9b939a169d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 16 Nov 2023 17:25:39 +0530
Subject: [PATCH 49/51] fix: not able to redirect after creating org from
 lead/deal

---
 frontend/src/pages/Deal.vue | 10 +++++++---
 frontend/src/pages/Lead.vue | 17 ++++++++++-------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 5d4089b58..a3615f287 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -357,7 +357,10 @@
     :organization="_organization"
     :options="{
       redirect: false,
-      afterInsert: (doc) => updateField('organization', doc.name),
+      afterInsert: (doc) =>
+        updateField('organization', doc.name, () => {
+          organizations.reload()
+        }),
     }"
   />
   <ContactModal
@@ -413,7 +416,7 @@ import { useRouter } from 'vue-router'
 
 const { getUser } = usersStore()
 const { getContactByName, contacts } = contactsStore()
-const { getOrganization, getOrganizationOptions } = organizationsStore()
+const { organizations, getOrganization } = organizationsStore()
 const router = useRouter()
 
 const props = defineProps({
@@ -648,9 +651,10 @@ const organization = computed(() => {
   return getOrganization(deal.data.organization)
 })
 
-function updateField(name, value) {
+function updateField(name, value, callback) {
   updateDeal(name, value, () => {
     deal.data[name] = value
+    callback?.()
   })
 }
 </script>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index eb02c9eae..b77f2665f 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -299,7 +299,10 @@
     :organization="_organization"
     :options="{
       redirect: false,
-      afterInsert: (doc) => updateField('organization', doc.name),
+      afterInsert: (doc) =>
+        updateField('organization', doc.name, () => {
+          organizations.reload()
+        }),
     }"
   />
 </template>
@@ -347,7 +350,7 @@ import { useRouter } from 'vue-router'
 
 const { getUser } = usersStore()
 const { contacts } = contactsStore()
-const { getOrganization } = organizationsStore()
+const { organizations, getOrganization } = organizationsStore()
 const router = useRouter()
 
 const props = defineProps({
@@ -459,12 +462,11 @@ const detailSections = computed(() => {
             showOrganizationModal.value = true
             close()
           },
-          link: () => {
+          link: () =>
             router.push({
               name: 'Organization',
-              params: { organizationId: organization.value?.name },
-            })
-          },
+              params: { organizationId: lead.data.organization },
+            }),
         },
         {
           label: 'Website',
@@ -548,9 +550,10 @@ async function convertToDeal() {
   }
 }
 
-function updateField(name, value) {
+function updateField(name, value, callback) {
   updateLead(name, value, () => {
     lead.data[name] = value
+    callback?.()
   })
 }
 </script>

From 10a37c6a54c08d09b6b81dedbbe7a81437bdea63 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 16 Nov 2023 17:56:11 +0530
Subject: [PATCH 50/51] fix: moved create one btn from slot to Link component

---
 frontend/src/components/Controls/Link.vue | 17 +++++--
 frontend/src/pages/Deal.vue               | 54 +++++------------------
 frontend/src/pages/Lead.vue               | 21 +--------
 3 files changed, 28 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 658764008..1cb2e40e5 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -24,8 +24,19 @@
         <slot name="item-prefix" v-bind="{ active, selected, option }" />
       </template>
 
-      <template v-if="$slots.footer" #footer="{ value, close }">
-        <slot name="footer" v-bind="{ value, close }" />
+      <template v-if="attrs.onCreate" #footer="{ value, close }">
+        <div>
+          <Button
+            variant="ghost"
+            class="w-full !justify-start"
+            label="Create one"
+            @click="attrs.onCreate(value, close)"
+          >
+            <template #prefix>
+              <FeatherIcon name="plus" class="h-4" />
+            </template>
+          </Button>
+        </div>
       </template>
     </Autocomplete>
   </div>
@@ -34,7 +45,7 @@
 <script setup>
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import { watchDebounced } from '@vueuse/core'
-import { createResource } from 'frappe-ui'
+import { createResource, FeatherIcon } from 'frappe-ui'
 import { useAttrs, computed, ref } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index a3615f287..42dd6ffaa 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -119,6 +119,16 @@
                     value=""
                     doctype="Contact"
                     @change="(e) => addContact(e)"
+                    :onCreate="
+                      (value, close) => {
+                        _contact = {
+                          first_name: value,
+                          company_name: deal.data.organization,
+                        }
+                        showContactModal = true
+                        close()
+                      }
+                    "
                   >
                     <template #target="{ togglePopover }">
                       <Button
@@ -131,29 +141,6 @@
                         </template>
                       </Button>
                     </template>
-                    <template #footer="{ value, close }">
-                      <div>
-                        <Button
-                          variant="ghost"
-                          class="w-full !justify-start"
-                          label="Create one"
-                          @click="
-                            () => {
-                              _contact = {
-                                first_name: value,
-                                company_name: deal.data.organization,
-                              }
-                              showContactModal = true
-                              close()
-                            }
-                          "
-                        >
-                          <template #prefix>
-                            <FeatherIcon name="plus" class="h-4" />
-                          </template>
-                        </Button>
-                      </div>
-                    </template>
                   </Link>
                 </div>
               </div>
@@ -183,25 +170,8 @@
                         :doctype="field.doctype"
                         :placeholder="field.placeholder"
                         @change="(e) => field.change(e)"
-                      >
-                        <template
-                          v-if="field.create"
-                          #footer="{ value, close }"
-                        >
-                          <div>
-                            <Button
-                              variant="ghost"
-                              class="w-full !justify-start"
-                              label="Create one"
-                              @click="field.create(value, close)"
-                            >
-                              <template #prefix>
-                                <FeatherIcon name="plus" class="h-4" />
-                              </template>
-                            </Button>
-                          </div>
-                        </template>
-                      </Link>
+                        :onCreate="field.create"
+                      />
                       <FormControl
                         v-else-if="field.type === 'date'"
                         type="date"
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index b77f2665f..7e25019b9 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -205,25 +205,8 @@
                         :doctype="field.doctype"
                         :placeholder="field.placeholder"
                         @change="(e) => field.change(e)"
-                      >
-                        <template
-                          v-if="field.create"
-                          #footer="{ value, close }"
-                        >
-                          <div>
-                            <Button
-                              variant="ghost"
-                              class="w-full !justify-start"
-                              label="Create one"
-                              @click="field.create(value, close)"
-                            >
-                              <template #prefix>
-                                <FeatherIcon name="plus" class="h-4" />
-                              </template>
-                            </Button>
-                          </div>
-                        </template>
-                      </Link>
+                        :onCreate="field.create"
+                      />
                       <FormControl
                         v-else-if="field.type === 'user'"
                         type="autocomplete"

From 1caaa89278310d342864223692f8c8cdb9e43366 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 16 Nov 2023 17:56:51 +0530
Subject: [PATCH 51/51] fix: create organization and set from new lead/deal
 dialog

---
 frontend/src/components/NewDeal.vue | 33 +++++++++++++++++++++--------
 frontend/src/components/NewLead.vue | 33 +++++++++++++++++++++--------
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/NewDeal.vue b/frontend/src/components/NewDeal.vue
index 869ad0eab..cfdb183ec 100644
--- a/frontend/src/components/NewDeal.vue
+++ b/frontend/src/components/NewDeal.vue
@@ -19,14 +19,14 @@
             type="email"
             v-model="newDeal[field.name]"
           />
-          <FormControl
+          <Link
             v-else-if="field.type === 'link'"
-            type="autocomplete"
+            class="form-control"
             :value="newDeal[field.name]"
-            :options="field.options"
+            :doctype="field.doctype"
             @change="(e) => field.change(e)"
             :placeholder="field.placeholder"
-            class="form-control"
+            :onCreate="field.create"
           />
           <FormControl
             v-else-if="field.type === 'user'"
@@ -73,18 +73,27 @@
       </div>
     </div>
   </div>
+  <OrganizationModal
+    v-model="showOrganizationModal"
+    :organization="_organization"
+    :options="{
+      redirect: false,
+      afterInsert: (doc) => (newLead.organization = doc.name),
+    }"
+  />
 </template>
 
 <script setup>
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import Link from '@/components/Controls/Link.vue'
+import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import { usersStore } from '@/stores/users'
-import { organizationsStore } from '@/stores/organizations'
 import { dealStatuses, statusDropdownOptions, activeAgents } from '@/utils'
 import { FormControl, Button, Dropdown, FeatherIcon } from 'frappe-ui'
+import { ref } from 'vue'
 
 const { getUser } = usersStore()
-const { getOrganizationOptions } = organizationsStore()
 
 const props = defineProps({
   newDeal: {
@@ -93,6 +102,9 @@ const props = defineProps({
   },
 })
 
+const showOrganizationModal = ref(false)
+const _organization = ref({})
+
 const allFields = [
   {
     section: 'Deal Details',
@@ -146,9 +158,12 @@ const allFields = [
         name: 'organization',
         type: 'link',
         placeholder: 'Organization',
-        options: getOrganizationOptions(),
-        change: (option) => {
-          newDeal.organization = option.name
+        doctype: 'CRM Organization',
+        change: (data) => (newDeal.organization = data),
+        create: (value, close) => {
+          _organization.value.organization_name = value
+          showOrganizationModal.value = true
+          close()
         },
       },
       {
diff --git a/frontend/src/components/NewLead.vue b/frontend/src/components/NewLead.vue
index 0c7b1f06f..3585b4439 100644
--- a/frontend/src/components/NewLead.vue
+++ b/frontend/src/components/NewLead.vue
@@ -19,14 +19,14 @@
             type="email"
             v-model="newLead[field.name]"
           />
-          <FormControl
+          <Link
             v-else-if="field.type === 'link'"
-            type="autocomplete"
+            class="form-control"
             :value="newLead[field.name]"
-            :options="field.options"
+            :doctype="field.doctype"
             @change="(e) => field.change(e)"
             :placeholder="field.placeholder"
-            class="form-control"
+            :onCreate="field.create"
           />
           <FormControl
             v-else-if="field.type === 'user'"
@@ -73,18 +73,27 @@
       </div>
     </div>
   </div>
+  <OrganizationModal
+    v-model="showOrganizationModal"
+    :organization="_organization"
+    :options="{
+      redirect: false,
+      afterInsert: (doc) => (newLead.organization = doc.name),
+    }"
+  />
 </template>
 
 <script setup>
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
-import { organizationsStore } from '@/stores/organizations'
 import { leadStatuses, statusDropdownOptions, activeAgents } from '@/utils'
 import { FormControl, Button, Dropdown, FeatherIcon } from 'frappe-ui'
+import { ref } from 'vue'
 
 const { getUser } = usersStore()
-const { getOrganizationOptions } = organizationsStore()
 
 const props = defineProps({
   newLead: {
@@ -93,6 +102,9 @@ const props = defineProps({
   },
 })
 
+const showOrganizationModal = ref(false)
+const _organization = ref({})
+
 const allFields = [
   {
     section: 'Lead Details',
@@ -146,9 +158,12 @@ const allFields = [
         name: 'organization',
         type: 'link',
         placeholder: 'Organization',
-        options: getOrganizationOptions(),
-        change: (option) => {
-          props.newLead.organization = option.value
+        doctype: 'CRM Organization',
+        change: (data) => (props.newLead.organization = data),
+        create: (value, close) => {
+          _organization.value.organization_name = value
+          showOrganizationModal.value = true
+          close()
         },
       },
       {