.gitignore

@@ -7,5 +7,6 @@ dev-dist
 tags
 node_modules
 crm/public/frontend
+frontend/yarn.lock
 crm/www/crm.html
 build

crm/__init__.py

@@ -1,4 +1,4 @@
 
-__version__ = "1.53.1"
+__version__ = "1.48.2"
 __title__ = "Frappe CRM"
 

crm/api/assignment_rule.py

@@ -1,32 +0,0 @@
-import frappe
-
-
-@frappe.whitelist()
-def get_assignment_rules_list():
-	assignment_rules = []
-	for docname in frappe.get_all(
-		"Assignment Rule", filters={"document_type": ["in", ["CRM Lead", "CRM Deal"]]}
-	):
-		doc = frappe.get_value(
-			"Assignment Rule",
-			docname,
-			fieldname=[
-				"name",
-				"description",
-				"disabled",
-				"priority",
-			],
-			as_dict=True,
-		)
-		users_exists = bool(frappe.db.exists("Assignment Rule User", {"parent": docname.name}))
-		assignment_rules.append({**doc, "users_exists": users_exists})
-	return assignment_rules
-
-
-@frappe.whitelist()
-def duplicate_assignment_rule(docname, new_name):
-	doc = frappe.get_doc("Assignment Rule", docname)
-	doc.name = new_name
-	doc.assignment_rule_name = new_name
-	doc.insert()
-	return doc

crm/api/doc.py

@@ -662,7 +662,7 @@ def get_fields_meta(doctype, restricted_fieldtypes=None, as_array=False, only_re
 
 @frappe.whitelist()
 def remove_assignments(doctype, name, assignees, ignore_permissions=False):
-	assignees = frappe.parse_json(assignees)
+	assignees = json.loads(assignees)
 
 	if not assignees:
 		return
@@ -750,11 +750,7 @@ def getCounts(d, doctype):
 
 @frappe.whitelist()
 def get_linked_docs_of_document(doctype, docname):
-	try:
-		doc = frappe.get_doc(doctype, docname)
-	except frappe.DoesNotExistError:
-		return []
-
+	doc = frappe.get_doc(doctype, docname)
 	linked_docs = get_linked_docs(doc)
 	dynamic_linked_docs = get_dynamic_linked_docs(doc)
 
@@ -763,14 +759,7 @@ def get_linked_docs_of_document(doctype, docname):
 
 	docs_data = []
 	for doc in linked_docs:
-		if not doc.get("reference_doctype") or not doc.get("reference_docname"):
-			continue
-
-		try:
-			data = frappe.get_doc(doc["reference_doctype"], doc["reference_docname"])
-		except (frappe.DoesNotExistError, frappe.ValidationError):
-			continue
-
+		data = frappe.get_doc(doc["reference_doctype"], doc["reference_docname"])
 		title = data.get("title")
 		if data.doctype == "CRM Call Log":
 			title = f"Call from {data.get('from')} to {data.get('to')}"
@@ -778,9 +767,6 @@ def get_linked_docs_of_document(doctype, docname):
 		if data.doctype == "CRM Deal":
 			title = data.get("organization")
 
-		if data.doctype == "CRM Notification":
-			title = data.get("message")
-
 		docs_data.append(
 			{
 				"doc": data.doctype,
@@ -793,51 +779,25 @@ def get_linked_docs_of_document(doctype, docname):
 
 
 def remove_doc_link(doctype, docname):
-	if not doctype or not docname:
-		return
-
-	try:
-		linked_doc_data = frappe.get_doc(doctype, docname)
-		if doctype == "CRM Notification":
-			delete_notification_type = {
-				"notification_type_doctype": "",
-				"notification_type_doc": "",
-			}
-			delete_references = {
-				"reference_doctype": "",
-				"reference_name": "",
-			}
-			if linked_doc_data.get("notification_type_doctype") == linked_doc_data.get("reference_doctype"):
-				delete_references.update(delete_notification_type)
-
-			linked_doc_data.update(delete_references)
-		else:
-			linked_doc_data.update(
-				{
-					"reference_doctype": "",
-					"reference_docname": "",
-				}
-			)
-		linked_doc_data.save(ignore_permissions=True)
-	except (frappe.DoesNotExistError, frappe.ValidationError):
-		pass
+	linked_doc_data = frappe.get_doc(doctype, docname)
+	linked_doc_data.update(
+		{
+			"reference_doctype": None,
+			"reference_docname": None,
+		}
+	)
+	linked_doc_data.save(ignore_permissions=True)
 
 
 def remove_contact_link(doctype, docname):
-	if not doctype or not docname:
-		return
-
-	try:
-		linked_doc_data = frappe.get_doc(doctype, docname)
-		linked_doc_data.update(
-			{
-				"contact": None,
-				"contacts": [],
-			}
-		)
-		linked_doc_data.save(ignore_permissions=True)
-	except (frappe.DoesNotExistError, frappe.ValidationError):
-		pass
+	linked_doc_data = frappe.get_doc(doctype, docname)
+	linked_doc_data.update(
+		{
+			"contact": None,
+			"contacts": [],
+		}
+	)
+	linked_doc_data.save(ignore_permissions=True)
 
 
 @frappe.whitelist()
@@ -846,19 +806,13 @@ def remove_linked_doc_reference(items, remove_contact=None, delete=False):
 		items = frappe.parse_json(items)
 
 	for item in items:
-		if not item.get("doctype") or not item.get("docname"):
-			continue
+		if remove_contact:
+			remove_contact_link(item["doctype"], item["docname"])
+		else:
+			remove_doc_link(item["doctype"], item["docname"])
 
-		try:
-			if remove_contact:
-				remove_contact_link(item["doctype"], item["docname"])
-			else:
-				remove_doc_link(item["doctype"], item["docname"])
-			if delete:
-				frappe.delete_doc(item["doctype"], item["docname"])
-		except (frappe.DoesNotExistError, frappe.ValidationError):
-			# Skip if document doesn't exist or has validation errors
-			continue
+		if delete:
+			frappe.delete_doc(item["doctype"], item["docname"])
 
 	return "success"
 
@@ -867,40 +821,19 @@ def remove_linked_doc_reference(items, remove_contact=None, delete=False):
 def delete_bulk_docs(doctype, items, delete_linked=False):
 	from frappe.desk.reportview import delete_bulk
 
-	if not doctype:
-		frappe.throw("Doctype is required")
-
-	if not items:
-		frappe.throw("Items are required")
-
 	items = frappe.parse_json(items)
-	if not isinstance(items, list):
-		frappe.throw("Items must be a list")
-
 	for doc in items:
-		try:
-			if not frappe.db.exists(doctype, doc):
-				frappe.log_error(f"Document {doctype} {doc} does not exist", "Bulk Delete Error")
-				continue
-
-			linked_docs = get_linked_docs_of_document(doctype, doc)
-			for linked_doc in linked_docs:
-				if not linked_doc.get("reference_doctype") or not linked_doc.get("reference_docname"):
-					continue
-
-				remove_linked_doc_reference(
-					[
-						{
-							"doctype": linked_doc["reference_doctype"],
-							"docname": linked_doc["reference_docname"],
-						}
-					],
-					remove_contact=doctype == "Contact",
-					delete=delete_linked,
-				)
-		except Exception as e:
-			frappe.log_error(
-				f"Error processing linked docs for {doctype} {doc}: {str(e)}", "Bulk Delete Error"
+		linked_docs = get_linked_docs_of_document(doctype, doc)
+		for linked_doc in linked_docs:
+			remove_linked_doc_reference(
+				[
+					{
+						"doctype": linked_doc["reference_doctype"],
+						"docname": linked_doc["reference_docname"],
+					}
+				],
+				remove_contact=doctype == "Contact",
+				delete=delete_linked,
 			)
 
 	if len(items) > 10:

crm/api/todo.py

@@ -1,79 +1,90 @@
 import frappe
 from frappe import _
-
 from crm.fcrm.doctype.crm_notification.crm_notification import notify_user
 
 
 def after_insert(doc, method):
-	if doc.reference_type in ["CRM Lead", "CRM Deal"] and doc.reference_name and doc.allocated_to:
-		fieldname = "lead_owner" if doc.reference_type == "CRM Lead" else "deal_owner"
-		owner = frappe.db.get_value(doc.reference_type, doc.reference_name, fieldname)
-		if not owner:
-			frappe.db.set_value(
-				doc.reference_type, doc.reference_name, fieldname, doc.allocated_to, update_modified=False
-			)
+    if (
+        doc.reference_type in ["CRM Lead", "CRM Deal"]
+        and doc.reference_name
+        and doc.allocated_to
+    ):
+        fieldname = "lead_owner" if doc.reference_type == "CRM Lead" else "deal_owner"
+        lead_owner = frappe.db.get_value(
+            doc.reference_type, doc.reference_name, fieldname
+        )
+        if not lead_owner:
+            frappe.db.set_value(
+                doc.reference_type, doc.reference_name, fieldname, doc.allocated_to
+            )
 
-	if doc.reference_type in ["CRM Lead", "CRM Deal", "CRM Task"] and doc.reference_name and doc.allocated_to:
-		notify_assigned_user(doc)
+    if (
+        doc.reference_type in ["CRM Lead", "CRM Deal", "CRM Task"]
+        and doc.reference_name
+        and doc.allocated_to
+    ):
+        notify_assigned_user(doc)
 
 
 def on_update(doc, method):
-	if (
-		doc.has_value_changed("status")
-		and doc.status == "Cancelled"
-		and doc.reference_type in ["CRM Lead", "CRM Deal", "CRM Task"]
-		and doc.reference_name
-		and doc.allocated_to
-	):
-		notify_assigned_user(doc, is_cancelled=True)
+    if (
+        doc.has_value_changed("status")
+        and doc.status == "Cancelled"
+        and doc.reference_type in ["CRM Lead", "CRM Deal", "CRM Task"]
+        and doc.reference_name
+        and doc.allocated_to
+    ):
+        notify_assigned_user(doc, is_cancelled=True)
 
 
 def notify_assigned_user(doc, is_cancelled=False):
-	_doc = frappe.get_doc(doc.reference_type, doc.reference_name)
-	owner = frappe.get_cached_value("User", frappe.session.user, "full_name")
-	notification_text = get_notification_text(owner, doc, _doc, is_cancelled)
+    _doc = frappe.get_doc(doc.reference_type, doc.reference_name)
+    owner = frappe.get_cached_value("User", frappe.session.user, "full_name")
+    notification_text = get_notification_text(owner, doc, _doc, is_cancelled)
 
-	message = (
-		_("Your assignment on {0} {1} has been removed by {2}").format(
-			doc.reference_type, doc.reference_name, owner
-		)
-		if is_cancelled
-		else _("{0} assigned a {1} {2} to you").format(owner, doc.reference_type, doc.reference_name)
-	)
+    message = (
+        _("Your assignment on {0} {1} has been removed by {2}").format(
+            doc.reference_type, doc.reference_name, owner
+        )
+        if is_cancelled
+        else _("{0} assigned a {1} {2} to you").format(
+            owner, doc.reference_type, doc.reference_name
+        )
+    )
 
-	redirect_to_doctype, redirect_to_name = get_redirect_to_doc(doc)
+    redirect_to_doctype, redirect_to_name = get_redirect_to_doc(doc)
 
-	notify_user(
-		{
-			"owner": frappe.session.user,
-			"assigned_to": doc.allocated_to,
-			"notification_type": "Assignment",
-			"message": message,
-			"notification_text": notification_text,
-			"reference_doctype": doc.reference_type,
-			"reference_docname": doc.reference_name,
-			"redirect_to_doctype": redirect_to_doctype,
-			"redirect_to_docname": redirect_to_name,
-		}
-	)
+    notify_user(
+        {
+            "owner": frappe.session.user,
+            "assigned_to": doc.allocated_to,
+            "notification_type": "Assignment",
+            "message": message,
+            "notification_text": notification_text,
+            "reference_doctype": doc.reference_type,
+            "reference_docname": doc.reference_name,
+            "redirect_to_doctype": redirect_to_doctype,
+            "redirect_to_docname": redirect_to_name,
+        }
+    )
 
 
 def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
-	name = doc.reference_name
-	doctype = doc.reference_type
+    name = doc.reference_name
+    doctype = doc.reference_type
 
-	if doctype.startswith("CRM "):
-		doctype = doctype[4:].lower()
+    if doctype.startswith("CRM "):
+        doctype = doctype[4:].lower()
 
-	if doctype in ["lead", "deal"]:
-		name = (
-			reference_doc.lead_name or name
-			if doctype == "lead"
-			else reference_doc.organization or reference_doc.lead_name or name
-		)
+    if doctype in ["lead", "deal"]:
+        name = (
+            reference_doc.lead_name or name
+            if doctype == "lead"
+            else reference_doc.organization or reference_doc.lead_name or name
+        )
 
-		if is_cancelled:
-			return f"""
+        if is_cancelled:
+            return f"""
                 <div class="mb-2 leading-5 text-ink-gray-5">
                     <span>{ _('Your assignment on {0} {1} has been removed by {2}').format(
                         doctype,
@@ -83,7 +94,7 @@ def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
                 </div>
             """
 
-		return f"""
+        return f"""
             <div class="mb-2 leading-5 text-ink-gray-5">
                 <span class="font-medium text-ink-gray-9">{ owner }</span>
                 <span>{ _('assigned a {0} {1} to you').format(
@@ -93,9 +104,9 @@ def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
             </div>
         """
 
-	if doctype == "task":
-		if is_cancelled:
-			return f"""
+    if doctype == "task":
+        if is_cancelled:
+            return f"""
                 <div class="mb-2 leading-5 text-ink-gray-5">
                     <span>{ _('Your assignment on task {0} has been removed by {1}').format(
                         f'<span class="font-medium text-ink-gray-9">{ reference_doc.title }</span>',
@@ -103,7 +114,7 @@ def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
                     ) }</span>
                 </div>
             """
-		return f"""
+        return f"""
             <div class="mb-2 leading-5 text-ink-gray-5">
                 <span class="font-medium text-ink-gray-9">{ owner }</span>
                 <span>{ _('assigned a new task {0} to you').format(
@@ -114,8 +125,8 @@ def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
 
 
 def get_redirect_to_doc(doc):
-	if doc.reference_type == "CRM Task":
-		reference_doc = frappe.get_doc(doc.reference_type, doc.reference_name)
-		return reference_doc.reference_doctype, reference_doc.reference_docname
+    if doc.reference_type == "CRM Task":
+        reference_doc = frappe.get_doc(doc.reference_type, doc.reference_name)
+        return reference_doc.reference_doctype, reference_doc.reference_docname
 
-	return doc.reference_type, doc.reference_name
+    return doc.reference_type, doc.reference_name

crm/api/whatsapp.py

@@ -10,15 +10,8 @@ from crm.fcrm.doctype.crm_notification.crm_notification import notify_user
 def validate(doc, method):
 	if doc.type == "Incoming" and doc.get("from"):
 		name, doctype = get_lead_or_deal_from_number(doc.get("from"))
-		if name != None:
-			doc.reference_doctype = doctype 
-			doc.reference_name = name
-
-	if doc.type == "Outgoing" and doc.get("to"):
-		name, doctype = get_lead_or_deal_from_number(doc.get("to"))
-		if name != None:
-			doc.reference_doctype = doctype
-			doc.reference_name = name
+		doc.reference_doctype = doctype
+		doc.reference_name = name
 
 
 def on_update(doc, method):
@@ -36,7 +29,7 @@ def on_update(doc, method):
 def notify_agent(doc):
 	if doc.type == "Incoming":
 		doctype = doc.reference_doctype
-		if doctype and doctype.startswith("CRM "):
+		if doctype.startswith("CRM "):
 			doctype = doctype[4:].lower()
 		notification_text = f"""
             <div class="mb-2 leading-5 text-ink-gray-5">

crm/fcrm/doctype/crm_dashboard/crm_dashboard.py

@@ -26,9 +26,8 @@ def create_default_manager_dashboard(force=False):
 		doc.title = "Manager Dashboard"
 		doc.layout = default_manager_dashboard_layout()
 		doc.insert(ignore_permissions=True)
-	else:
+	elif force:
 		doc = frappe.get_doc("CRM Dashboard", "Manager Dashboard")
-		if force:
-			doc.layout = default_manager_dashboard_layout()
-			doc.save(ignore_permissions=True)
+		doc.layout = default_manager_dashboard_layout()
+		doc.save(ignore_permissions=True)
 	return doc.layout

crm/fcrm/doctype/crm_deal/crm_deal.json

@@ -129,13 +129,15 @@
    "fieldname": "email",
    "fieldtype": "Data",
    "label": "Primary Email",
-   "options": "Email"
+   "options": "Email",
+   "read_only": 1
   },
   {
    "fieldname": "mobile_no",
    "fieldtype": "Data",
    "label": "Primary Mobile No",
-   "options": "Phone"
+   "options": "Phone",
+   "read_only": 1
   },
   {
    "default": "Qualification",
@@ -249,7 +251,8 @@
    "fieldname": "phone",
    "fieldtype": "Data",
    "label": "Primary Phone",
-   "options": "Phone"
+   "options": "Phone",
+   "read_only": 1
   },
   {
    "fieldname": "log_tab",
@@ -432,7 +435,7 @@
  "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-08-26 12:12:56.324245",
+ "modified": "2025-07-13 11:54:20.608489",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Deal",

crm/fcrm/doctype/crm_deal/crm_deal.py

@@ -25,7 +25,7 @@ class CRMDeal(Document):
 			add_status_change_log(self)
 			if frappe.db.get_value("CRM Deal Status", self.status, "type") == "Won":
 				self.closed_date = frappe.utils.nowdate()
-		self.validate_forecasting_fields()
+		self.validate_forcasting_fields()
 		self.validate_lost_reason()
 		self.update_exchange_rate()
 
@@ -151,21 +151,9 @@ class CRMDeal(Document):
 		if not self.probability or self.probability == 0:
 			self.probability = frappe.db.get_value("CRM Deal Status", self.status, "probability") or 0
 
-	def update_expected_deal_value(self):
-		"""
-		Update the expected deal value based on the net total or total.
-		"""
-		if (
-			frappe.db.get_single_value("FCRM Settings", "auto_update_expected_deal_value")
-			and (self.net_total or self.total)
-			and self.expected_deal_value
-		):
-			self.expected_deal_value = self.net_total or self.total
-
-	def validate_forecasting_fields(self):
+	def validate_forcasting_fields(self):
 		self.update_closed_date()
 		self.update_default_probability()
-		self.update_expected_deal_value()
 		if frappe.db.get_single_value("FCRM Settings", "enable_forecasting"):
 			if not self.expected_deal_value or self.expected_deal_value == 0:
 				frappe.throw(_("Expected Deal Value is required."), frappe.MandatoryError)

crm/fcrm/doctype/crm_twilio_settings/crm_twilio_settings.json

@@ -63,7 +63,8 @@
    "fieldname": "twiml_sid",
    "fieldtype": "Data",
    "label": "TwiML SID",
-   "permlevel": 1
+   "permlevel": 1,
+   "read_only": 1
   },
   {
    "fieldname": "section_break_ssqj",
@@ -104,7 +105,7 @@
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2025-08-19 13:36:19.823197",
+ "modified": "2025-01-15 19:35:13.406254",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Twilio Settings",
@@ -151,9 +152,8 @@
    "write": 1
   }
  ],
- "row_format": "Dynamic",
  "sort_field": "modified",
  "sort_order": "DESC",
  "states": [],
  "track_changes": 1
-}
+}

crm/fcrm/doctype/erpnext_crm_settings/erpnext_crm_settings.py

@@ -128,35 +128,14 @@ def get_quotation_url(crm_deal, organization):
 	address = address.get("name") if address else None
 
 	if not erpnext_crm_settings.is_erpnext_in_different_site:
-		base_url = f"{get_url_to_list('Quotation')}/new"
-		params = {
-			"quotation_to": "CRM Deal",
-			"crm_deal": crm_deal,
-			"party_name": crm_deal,
-			"company": erpnext_crm_settings.erpnext_company,
-			"contact_person": contact,
-			"customer_address": address
-		}
+		quotation_url = get_url_to_list("Quotation")
+		return f"{quotation_url}/new?quotation_to=CRM Deal&crm_deal={crm_deal}&party_name={crm_deal}&company={erpnext_crm_settings.erpnext_company}&contact_person={contact}&customer_address={address}"
 	else:
 		site_url = erpnext_crm_settings.get("erpnext_site_url")
-		base_url = f"{site_url}/app/quotation/new"
-		prospect = create_prospect_in_remote_site(crm_deal, erpnext_crm_settings)
-		params = {
-			"quotation_to": "Prospect",
-			"crm_deal": crm_deal,
-			"party_name": prospect,
-			"company": erpnext_crm_settings.erpnext_company,
-			"contact_person": contact,
-			"customer_address": address
-		}
-	
-	# Filter out None values and build query string
-	query_string = "&".join(
-		f"{key}={value}" for key, value in params.items() 
-		if value is not None
-	)
+		quotation_url = f"{site_url}/app/quotation"
 
-	return f"{base_url}?{query_string}"
+		prospect = create_prospect_in_remote_site(crm_deal, erpnext_crm_settings)
+		return f"{quotation_url}/new?quotation_to=Prospect&crm_deal={crm_deal}&party_name={prospect}&company={erpnext_crm_settings.erpnext_company}&contact_person={contact}&customer_address={address}"
 
 
 def create_prospect_in_remote_site(crm_deal, erpnext_crm_settings):

crm/fcrm/doctype/fcrm_settings/fcrm_settings.json

@@ -8,7 +8,6 @@
   "defaults_tab",
   "restore_defaults",
   "enable_forecasting",
-  "auto_update_expected_deal_value",
   "currency_tab",
   "currency",
   "exchange_rate_provider_section",
@@ -106,19 +105,12 @@
   {
    "fieldname": "column_break_vqck",
    "fieldtype": "Column Break"
-  },
-  {
-   "default": "1",
-   "description": "Automatically update \"Expected Deal Value\" based on the total value of associated products in a deal",
-   "fieldname": "auto_update_expected_deal_value",
-   "fieldtype": "Check",
-   "label": "Auto Update Expected Deal Value"
   }
  ],
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2025-09-16 17:33:26.406549",
+ "modified": "2025-07-29 11:26:50.420614",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "FCRM Settings",

crm/install.py

@@ -25,8 +25,6 @@ def after_install(force=False):
 	add_standard_dropdown_items()
 	add_default_scripts()
 	create_default_manager_dashboard(force)
-	create_assignment_rule_custom_fields()
-	add_assignment_rule_property_setters()
 	frappe.db.commit()
 
 
@@ -194,7 +192,7 @@ def add_default_fields_layout(force=False):
 		},
 		"CRM Deal-Data Fields": {
 			"doctype": "CRM Deal",
-			"layout": '[{"name":"first_tab","sections":[{"label":"Details","name":"details_section","opened":true,"columns":[{"name":"column_z9XL","fields":["organization","annual_revenue","next_step"]},{"name":"column_gM4w","fields":["website","closed_date","deal_owner"]},{"name":"column_gWmE","fields":["territory","probability"]}]},{"label":"Products","name":"section_jHhQ","opened":true,"columns":[{"name":"column_xiNF","fields":["products"]}],"editingLabel":false,"hideLabel":true},{"label":"New Section","name":"section_WNOQ","opened":true,"columns":[{"name":"column_ziBW","fields":["total"]},{"label":"","name":"column_wuwA","fields":["net_total"]}],"hideBorder":true,"hideLabel":true}]}]',
+			"layout": '[{"label": "Details", "name": "details_section", "opened": true, "columns": [{"name": "column_z9XL", "fields": ["organization", "annual_revenue", "next_step"]}, {"name": "column_gM4w", "fields": ["website", "close_date", "deal_owner"]}, {"name": "column_gWmE", "fields": ["territory", "probability"]}]}]',
 		},
 	}
 
@@ -423,80 +421,3 @@ def add_default_scripts():
 	for doctype in ["CRM Lead", "CRM Deal"]:
 		create_product_details_script(doctype)
 	create_forecasting_script()
-
-
-def add_assignment_rule_property_setters():
-	"""Add a property setter to the Assignment Rule DocType for assign_condition and unassign_condition."""
-
-	default_fields = {
-		"doctype": "Property Setter",
-		"doctype_or_field": "DocField",
-		"doc_type": "Assignment Rule",
-		"property_type": "Data",
-		"is_system_generated": 1,
-	}
-
-	if not frappe.db.exists("Property Setter", {"name": "Assignment Rule-assign_condition-depends_on"}):
-		frappe.get_doc(
-			{
-				**default_fields,
-				"name": "Assignment Rule-assign_condition-depends_on",
-				"field_name": "assign_condition",
-				"property": "depends_on",
-				"value": "eval: !doc.assign_condition_json",
-			}
-		).insert()
-	else:
-		frappe.db.set_value(
-			"Property Setter",
-			{"name": "Assignment Rule-assign_condition-depends_on"},
-			"value",
-			"eval: !doc.assign_condition_json",
-		)
-	if not frappe.db.exists("Property Setter", {"name": "Assignment Rule-unassign_condition-depends_on"}):
-		frappe.get_doc(
-			{
-				**default_fields,
-				"name": "Assignment Rule-unassign_condition-depends_on",
-				"field_name": "unassign_condition",
-				"property": "depends_on",
-				"value": "eval: !doc.unassign_condition_json",
-			}
-		).insert()
-	else:
-		frappe.db.set_value(
-			"Property Setter",
-			{"name": "Assignment Rule-unassign_condition-depends_on"},
-			"value",
-			"eval: !doc.unassign_condition_json",
-		)
-
-
-def create_assignment_rule_custom_fields():
-	if not frappe.get_meta("Assignment Rule").has_field("assign_condition_json"):
-		click.secho("* Installing Custom Fields in Assignment Rule")
-
-		create_custom_fields(
-			{
-				"Assignment Rule": [
-					{
-						"description": "Autogenerated field by CRM App",
-						"fieldname": "assign_condition_json",
-						"fieldtype": "Code",
-						"label": "Assign Condition JSON",
-						"insert_after": "assign_condition",
-						"depends_on": "eval: doc.assign_condition_json",
-					},
-					{
-						"description": "Autogenerated field by CRM App",
-						"fieldname": "unassign_condition_json",
-						"fieldtype": "Code",
-						"label": "Unassign Condition JSON",
-						"insert_after": "unassign_condition",
-						"depends_on": "eval: doc.unassign_condition_json",
-					},
-				],
-			}
-		)
-
-		frappe.clear_cache(doctype="Assignment Rule")

crm/patches.txt

@@ -14,6 +14,4 @@ crm.patches.v1_0.update_layouts_to_new_format
 crm.patches.v1_0.move_twilio_agent_to_telephony_agent
 crm.patches.v1_0.create_default_scripts # 13-06-2025
 crm.patches.v1_0.update_deal_status_probabilities
-crm.patches.v1_0.update_deal_status_type
-crm.patches.v1_0.create_default_lost_reasons
-crm.patches.v1_0.add_fields_in_assignment_rule
+crm.patches.v1_0.update_deal_status_type

crm/patches/v1_0/add_fields_in_assignment_rule.py

@@ -1,9 +0,0 @@
-from crm.install import (
-	add_assignment_rule_property_setters,
-	create_assignment_rule_custom_fields,
-)
-
-
-def execute():
-	create_assignment_rule_custom_fields()
-	add_assignment_rule_property_setters()

crm/patches/v1_0/create_default_lost_reasons.py

@@ -1,5 +0,0 @@
-from crm.install import add_default_lost_reasons
-
-
-def execute():
-	add_default_lost_reasons()

frappe-ui

@@ -1 +1 @@
-Subproject commit c9a0fc937cc897864857271b3708a0c675379015
+Subproject commit b295b54aaa3a2a22f455df819d87433dc6b9ff6a

frontend/.gitignore

@@ -2,5 +2,4 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-*.local
-components.d.ts
+*.local

frontend/auto-imports.d.ts

@@ -1,10 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-// biome-ignore lint: disable
-export {}
-declare global {
-
-}

frontend/components.d.ts

@@ -25,7 +25,6 @@ declare module 'vue' {
     AscendingIcon: typeof import('./src/components/Icons/AscendingIcon.vue')['default']
     AssignmentModal: typeof import('./src/components/Modals/AssignmentModal.vue')['default']
     AssignTo: typeof import('./src/components/AssignTo.vue')['default']
-    AssignToBody: typeof import('./src/components/AssignToBody.vue')['default']
     AttachmentArea: typeof import('./src/components/Activities/AttachmentArea.vue')['default']
     AttachmentIcon: typeof import('./src/components/Icons/AttachmentIcon.vue')['default']
     AttachmentItem: typeof import('./src/components/AttachmentItem.vue')['default']
@@ -33,7 +32,7 @@ declare module 'vue' {
     Autocomplete: typeof import('./src/components/frappe-ui/Autocomplete.vue')['default']
     AvatarIcon: typeof import('./src/components/Icons/AvatarIcon.vue')['default']
     BrandLogo: typeof import('./src/components/BrandLogo.vue')['default']
-    BrandSettings: typeof import('./src/components/Settings/BrandSettings.vue')['default']
+    BrandSettings: typeof import('./src/components/Settings/General/BrandSettings.vue')['default']
     BulkDeleteLinkedDocModal: typeof import('./src/components/BulkDeleteLinkedDocModal.vue')['default']
     CalendarIcon: typeof import('./src/components/Icons/CalendarIcon.vue')['default']
     CallArea: typeof import('./src/components/Activities/CallArea.vue')['default']
@@ -63,7 +62,7 @@ declare module 'vue' {
     CountUpTimer: typeof import('./src/components/CountUpTimer.vue')['default']
     CreateDocumentModal: typeof import('./src/components/Modals/CreateDocumentModal.vue')['default']
     CRMLogo: typeof import('./src/components/Icons/CRMLogo.vue')['default']
-    CurrencySettings: typeof import('./src/components/Settings/CurrencySettings.vue')['default']
+    CurrencySettings: typeof import('./src/components/Settings/General/CurrencySettings.vue')['default']
     CustomActions: typeof import('./src/components/CustomActions.vue')['default']
     DashboardGrid: typeof import('./src/components/Dashboard/DashboardGrid.vue')['default']
     DashboardIcon: typeof import('./src/components/Icons/DashboardIcon.vue')['default']
@@ -85,6 +84,7 @@ declare module 'vue' {
     DragIcon: typeof import('./src/components/Icons/DragIcon.vue')['default']
     DragVerticalIcon: typeof import('./src/components/Icons/DragVerticalIcon.vue')['default']
     Dropdown: typeof import('./src/components/frappe-ui/Dropdown.vue')['default']
+    DropdownItem: typeof import('./src/components/DropdownItem.vue')['default']
     DuplicateIcon: typeof import('./src/components/Icons/DuplicateIcon.vue')['default']
     DurationIcon: typeof import('./src/components/Icons/DurationIcon.vue')['default']
     EditEmailTemplate: typeof import('./src/components/Settings/EmailTemplate/EditEmailTemplate.vue')['default']
@@ -127,10 +127,11 @@ declare module 'vue' {
     FileVideoIcon: typeof import('./src/components/Icons/FileVideoIcon.vue')['default']
     Filter: typeof import('./src/components/Filter.vue')['default']
     FilterIcon: typeof import('./src/components/Icons/FilterIcon.vue')['default']
-    ForecastingSettings: typeof import('./src/components/Settings/ForecastingSettings.vue')['default']
     FormattedInput: typeof import('./src/components/Controls/FormattedInput.vue')['default']
     FrappeCloudIcon: typeof import('./src/components/Icons/FrappeCloudIcon.vue')['default']
     GenderIcon: typeof import('./src/components/Icons/GenderIcon.vue')['default']
+    GeneralSettings: typeof import('./src/components/Settings/General/GeneralSettings.vue')['default']
+    GeneralSettingsPage: typeof import('./src/components/Settings/General/GeneralSettingsPage.vue')['default']
     GlobalModals: typeof import('./src/components/Modals/GlobalModals.vue')['default']
     GoogleIcon: typeof import('./src/components/Icons/GoogleIcon.vue')['default']
     Grid: typeof import('./src/components/Controls/Grid.vue')['default']
@@ -141,7 +142,7 @@ declare module 'vue' {
     GroupByIcon: typeof import('./src/components/Icons/GroupByIcon.vue')['default']
     HeartIcon: typeof import('./src/components/Icons/HeartIcon.vue')['default']
     HelpIcon: typeof import('./src/components/Icons/HelpIcon.vue')['default']
-    HomeActions: typeof import('./src/components/Settings/HomeActions.vue')['default']
+    HomeActions: typeof import('./src/components/Settings/General/HomeActions.vue')['default']
     Icon: typeof import('./src/components/Icon.vue')['default']
     IconPicker: typeof import('./src/components/IconPicker.vue')['default']
     ImageUploader: typeof import('./src/components/Controls/ImageUploader.vue')['default']
@@ -168,6 +169,9 @@ declare module 'vue' {
     LoadingIndicator: typeof import('./src/components/Icons/LoadingIndicator.vue')['default']
     LostReasonModal: typeof import('./src/components/Modals/LostReasonModal.vue')['default']
     LucideCalendar: typeof import('~icons/lucide/calendar')['default']
+    LucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    LucidePenLine: typeof import('~icons/lucide/pen-line')['default']
+    LucideRefreshCcw: typeof import('~icons/lucide/refresh-ccw')['default']
     MarkAsDoneIcon: typeof import('./src/components/Icons/MarkAsDoneIcon.vue')['default']
     MaximizeIcon: typeof import('./src/components/Icons/MaximizeIcon.vue')['default']
     MenuIcon: typeof import('./src/components/Icons/MenuIcon.vue')['default']
@@ -182,6 +186,7 @@ declare module 'vue' {
     MultiSelectEmailInput: typeof import('./src/components/Controls/MultiSelectEmailInput.vue')['default']
     MultiSelectUserInput: typeof import('./src/components/Controls/MultiSelectUserInput.vue')['default']
     MuteIcon: typeof import('./src/components/Icons/MuteIcon.vue')['default']
+    NestedPopover: typeof import('./src/components/NestedPopover.vue')['default']
     NewEmailTemplate: typeof import('./src/components/Settings/EmailTemplate/NewEmailTemplate.vue')['default']
     NoteArea: typeof import('./src/components/Activities/NoteArea.vue')['default']
     NoteIcon: typeof import('./src/components/Icons/NoteIcon.vue')['default']
@@ -200,8 +205,6 @@ declare module 'vue' {
     PlaybackSpeedOption: typeof import('./src/components/Activities/PlaybackSpeedOption.vue')['default']
     PlayIcon: typeof import('./src/components/Icons/PlayIcon.vue')['default']
     Popover: typeof import('./src/components/frappe-ui/Popover.vue')['default']
-    PrimaryDropdown: typeof import('./src/components/PrimaryDropdown.vue')['default']
-    PrimaryDropdownItem: typeof import('./src/components/PrimaryDropdownItem.vue')['default']
     ProfileSettings: typeof import('./src/components/Settings/ProfileSettings.vue')['default']
     QuickEntryModal: typeof import('./src/components/Modals/QuickEntryModal.vue')['default']
     QuickFilterField: typeof import('./src/components/QuickFilterField.vue')['default']
@@ -228,7 +231,6 @@ declare module 'vue' {
     SmileIcon: typeof import('./src/components/Icons/SmileIcon.vue')['default']
     SortBy: typeof import('./src/components/SortBy.vue')['default']
     SortIcon: typeof import('./src/components/Icons/SortIcon.vue')['default']
-    SparkleIcon: typeof import('./src/components/Icons/SparkleIcon.vue')['default']
     SquareAsterisk: typeof import('./src/components/Icons/SquareAsterisk.vue')['default']
     StepsIcon: typeof import('./src/components/Icons/StepsIcon.vue')['default']
     SuccessIcon: typeof import('./src/components/Icons/SuccessIcon.vue')['default']

frontend/package.json

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

frontend/src/components/Activities/Activities.vue

@@ -50,13 +50,11 @@
             class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-3 sm:gap-4 sm:px-10"
           >
             <div
-              class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
-              :class="
-                i != activities.length - 1 ? 'before:h-full' : 'before:h-4'
-              "
+              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-outline-gray-modals"
+              :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
             >
               <div
-                class="flex h-8 w-7 items-center justify-center bg-surface-white"
+                class="z-10 flex h-8 w-7 items-center justify-center bg-surface-white"
               >
                 <CommentIcon class="text-ink-gray-8" />
               </div>
@@ -74,13 +72,11 @@
             class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 sm:px-10"
           >
             <div
-              class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
-              :class="
-                i != activities.length - 1 ? 'before:h-full' : 'before:h-4'
-              "
+              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-outline-gray-modals"
+              :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
             >
               <div
-                class="flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
+                class="z-10 flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
               >
                 <MissedCallIcon
                   v-if="call.status == 'No Answer'"
@@ -120,11 +116,11 @@
       >
         <div
           v-if="['Activity', 'Emails'].includes(title)"
-          class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
+          class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-outline-gray-modals"
           :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
         >
           <div
-            class="flex h-7 w-7 items-center justify-center bg-surface-white"
+            class="z-10 flex h-7 w-7 items-center justify-center bg-surface-white"
             :class="{
               'mt-2.5': ['communication'].includes(activity.activity_type),
               'bg-surface-white': ['added', 'removed', 'changed'].includes(
@@ -238,9 +234,12 @@
               <Button
                 class="!size-4"
                 variant="ghost"
-                :icon="SelectIcon"
                 @click="activity.show_others = !activity.show_others"
-              />
+              >
+                <template #icon>
+                  <SelectIcon />
+                </template>
+              </Button>
             </div>
             <div
               v-else
@@ -556,7 +555,6 @@ const all_activities = createResource({
   transform: ([versions, calls, notes, tasks, attachments]) => {
     return { versions, calls, notes, tasks, attachments }
   },
-  onSuccess: () => nextTick(() => scroll()),
 })
 
 const showWhatsappTemplates = ref(false)

frontend/src/components/Activities/ActivityHeader.vue

@@ -9,17 +9,23 @@
     <Button
       v-if="title == 'Emails'"
       variant="solid"
-      :label="__('New Email')"
-      iconLeft="plus"
       @click="emailBox.show = true"
-    />
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ __('New Email') }}</span>
+    </Button>
     <Button
       v-else-if="title == 'Comments'"
       variant="solid"
-      :label="__('New Comment')"
-      iconLeft="plus"
       @click="emailBox.showComment = true"
-    />
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ __('New Comment') }}</span>
+    </Button>
     <MultiActionButton
       v-else-if="title == 'Calls'"
       variant="solid"
@@ -28,45 +34,59 @@
     <Button
       v-else-if="title == 'Notes'"
       variant="solid"
-      :label="__('New Note')"
-      iconLeft="plus"
       @click="modalRef.showNote()"
-    />
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ __('New Note') }}</span>
+    </Button>
     <Button
       v-else-if="title == 'Tasks'"
       variant="solid"
-      :label="__('New Task')"
-      iconLeft="plus"
       @click="modalRef.showTask()"
-    />
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ __('New Task') }}</span>
+    </Button>
     <Button
       v-else-if="title == 'Attachments'"
       variant="solid"
-      :label="__('Upload Attachment')"
-      iconLeft="plus"
       @click="showFilesUploader = true"
-    />
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ __('Upload Attachment') }}</span>
+    </Button>
     <div class="flex gap-2 shrink-0" v-else-if="title == 'WhatsApp'">
       <Button
         :label="__('Send Template')"
         @click="showWhatsappTemplates = true"
       />
-      <Button
-        variant="solid"
-        :label="__('New Message')"
-        iconLeft="plus"
-        @click="whatsappBox.show()"
-      />
+      <Button variant="solid" @click="whatsappBox.show()">
+        <template #prefix>
+          <FeatherIcon name="plus" class="h-4 w-4" />
+        </template>
+        <span>{{ __('New Message') }}</span>
+      </Button>
     </div>
     <Dropdown v-else :options="defaultActions" @click.stop>
       <template v-slot="{ open }">
-        <Button
-          variant="solid"
-          class="flex items-center gap-1"
-          :label="__('New')"
-          iconLeft="plus"
-          :iconRight="open ? 'chevron-up' : 'chevron-down'"
-        />
+        <Button variant="solid" class="flex items-center gap-1">
+          <template #prefix>
+            <FeatherIcon name="plus" class="h-4 w-4" />
+          </template>
+          <span>{{ __('New') }}</span>
+          <template #suffix>
+            <FeatherIcon
+              :name="open ? 'chevron-up' : 'chevron-down'"
+              class="h-4 w-4"
+            />
+          </template>
+        </Button>
       </template>
     </Dropdown>
   </div>

frontend/src/components/Activities/AttachmentArea.vue

@@ -38,31 +38,42 @@
             </div>
           </Tooltip>
           <div class="flex gap-1">
-            <Button
-              :tooltip="
+            <Tooltip
+              :text="
                 attachment.is_private ? __('Make public') : __('Make private')
               "
-              class="!size-5"
-              @click.stop="
-                togglePrivate(attachment.name, attachment.is_private)
-              "
             >
-              <template #icon>
-                <FeatherIcon
-                  :name="attachment.is_private ? 'lock' : 'unlock'"
-                  class="size-3 text-ink-gray-7"
-                />
-              </template>
-            </Button>
-            <Button
-              :tooltip="__('Delete attachment')"
-              class="!size-5"
-              @click.stop="() => deleteAttachment(attachment.name)"
-            >
-              <template #icon>
-                <FeatherIcon name="trash-2" class="size-3 text-ink-gray-7" />
-              </template>
-            </Button>
+              <div>
+                <Button
+                  class="!size-5"
+                  @click.stop="
+                    togglePrivate(attachment.name, attachment.is_private)
+                  "
+                >
+                  <template #icon>
+                    <FeatherIcon
+                      :name="attachment.is_private ? 'lock' : 'unlock'"
+                      class="size-3 text-ink-gray-7"
+                    />
+                  </template>
+                </Button>
+              </div>
+            </Tooltip>
+            <Tooltip :text="__('Delete attachment')">
+              <div>
+                <Button
+                  class="!size-5"
+                  @click.stop="() => deleteAttachment(attachment.name)"
+                >
+                  <template #icon>
+                    <FeatherIcon
+                      name="trash-2"
+                      class="size-3 text-ink-gray-7"
+                    />
+                  </template>
+                </Button>
+              </div>
+            </Tooltip>
           </div>
         </div>
       </div>

frontend/src/components/Activities/AudioPlayer.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="w-full text-sm text-ink-gray-5">
     <div class="flex items-center gap-2">
-      <Button
-        variant="ghost"
-        class="text-ink-gray-5"
-        :icon="isPaused ? PlayIcon : PauseIcon"
-        @click="playPause"
-      />
+      <Button variant="ghost" @click="playPause">
+        <template #icon>
+          <PlayIcon v-if="isPaused" class="size-4 text-ink-gray-5" />
+          <PauseIcon v-else class="size-4 text-ink-gray-5" />
+        </template>
+      </Button>
       <div class="flex gap-2 items-center justify-between flex-1">
         <input
           class="w-full slider !h-[0.5] bg-surface-gray-3 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]"
@@ -61,11 +61,11 @@
           </Button>
         </div>
         <Dropdown :options="options">
-          <Button
-            icon="more-horizontal"
-            variant="ghost"
-            @click="showPlaybackSpeed = false"
-          />
+          <Button variant="ghost" @click="showPlaybackSpeed = false">
+            <template #icon>
+              <FeatherIcon class="size-4" name="more-horizontal" />
+            </template>
+          </Button>
         </Dropdown>
       </div>
     </div>

frontend/src/components/Activities/CallArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div @click="showCallLogDetailModal = true" class="cursor-pointer">
     <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
       <div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
         <Avatar
@@ -25,8 +25,7 @@
       </div>
     </div>
     <div
-      @click="showCallLogDetailModal = true"
-      class="flex flex-col gap-2 border cursor-pointer border-outline-gray-modals rounded-md bg-surface-cards px-3 py-2.5 text-ink-gray-9"
+      class="flex flex-col gap-2 border border-outline-gray-modals rounded-md bg-surface-cards px-3 py-2.5 text-ink-gray-9"
     >
       <div class="flex items-center justify-between">
         <div class="inline-flex gap-2 items-center text-base font-medium">

frontend/src/components/Activities/DataFields.vue

@@ -14,10 +14,12 @@
     <div class="flex gap-1">
       <Button
         v-if="isManager() && !isMobileView"
-        :tooltip="__('Edit fields layout')"
-        :icon="EditIcon"
         @click="showDataFieldsModal = true"
-      />
+      >
+        <template #icon>
+          <EditIcon />
+        </template>
+      </Button>
       <Button
         label="Save"
         :disabled="!document.isDirty"

frontend/src/components/Activities/EmailArea.vue

@@ -2,9 +2,7 @@
   <div
     class="cursor-pointer flex flex-col rounded-md shadow bg-surface-cards px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
   >
-    <div
-      class="-mb-0.5 flex items-center justify-between gap-2 truncate text-ink-gray-9"
-    >
+    <div class="-mb-0.5 flex items-center justify-between gap-2 truncate text-ink-gray-9">
       <div class="flex items-center gap-2 truncate">
         <span>{{ activity.data.sender_full_name }}</span>
         <span class="sm:flex hidden text-sm text-ink-gray-5">
@@ -30,20 +28,32 @@
           </div>
         </Tooltip>
         <div class="flex gap-0.5">
-          <Button
-            :tooltip="__('Reply')"
-            variant="ghost"
-            class="text-ink-gray-7"
-            :icon="ReplyIcon"
-            @click="reply(activity.data)"
-          />
-          <Button
-            :tooltip="__('Reply All')"
-            variant="ghost"
-            :icon="ReplyAllIcon"
-            class="text-ink-gray-7"
-            @click="reply(activity.data, true)"
-          />
+          <Tooltip :text="__('Reply')">
+            <div>
+              <Button
+                variant="ghost"
+                class="text-ink-gray-7"
+                @click="reply(activity.data)"
+              >
+                <template #icon>
+                  <ReplyIcon />
+                </template>
+              </Button>
+            </div>
+          </Tooltip>
+          <Tooltip :text="__('Reply All')">
+            <div>
+              <Button
+                variant="ghost"
+                class="text-ink-gray-7"
+                @click="reply(activity.data, true)"
+              >
+                <template #icon>
+                  <ReplyAllIcon />
+                </template>
+              </Button>
+            </div>
+          </Tooltip>
         </div>
       </div>
     </div>

frontend/src/components/Activities/TaskArea.vue

@@ -41,13 +41,13 @@
             :options="taskStatusOptions(modalRef.updateTaskStatus, task)"
             @click.stop
           >
-            <Button
-              :tooltip="__('Change status')"
-              variant="ghosted"
-              class="hover:bg-surface-gray-4"
-            >
-              <TaskStatusIcon :status="task.status" />
-            </Button>
+            <Tooltip :text="__('Change Status')">
+              <div>
+                <Button variant="ghosted" class="hover:bg-surface-gray-4">
+                  <TaskStatusIcon :status="task.status" />
+                </Button>
+              </div>
+            </Tooltip>
           </Dropdown>
           <Dropdown
             :options="[

frontend/src/components/AssignTo.vue

@@ -1,99 +1,31 @@
 <template>
-  <Popover placement="bottom-end">
-    <template #target="{ togglePopover }">
-      <div class="flex items-center" @click="togglePopover">
-        <component
-          v-if="assignees?.length"
-          :is="assignees?.length == 1 ? 'Button' : 'div'"
-        >
-          <MultipleAvatar :avatars="assignees" />
-        </component>
-        <Button v-else :label="__('Assign to')" />
-      </div>
-    </template>
-    <template #body="{ isOpen }">
-      <AssignToBody
-        v-show="isOpen"
-        v-model="assignees"
-        :docname="docname"
-        :doctype="doctype"
-        :open="isOpen"
-        :onUpdate="ownerField && saveAssignees"
-      />
-    </template>
-  </Popover>
+  <component
+    v-if="assignees?.length"
+    :is="assignees?.length == 1 ? 'Button' : 'div'"
+  >
+    <MultipleAvatar :avatars="assignees" @click="showAssignmentModal = true" />
+  </component>
+  <Button v-else @click="showAssignmentModal = true">
+    {{ __('Assign to') }}
+  </Button>
+  <AssignmentModal
+    v-if="showAssignmentModal"
+    v-model="showAssignmentModal"
+    v-model:assignees="assignees"
+    :doctype="doctype"
+    :doc="data"
+  />
 </template>
 <script setup>
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
-import AssignToBody from '@/components/AssignToBody.vue'
-import { useDocument } from '@/data/document'
-import { toast, Popover } from 'frappe-ui'
-import { computed } from 'vue'
+import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import { ref } from 'vue'
 
 const props = defineProps({
+  data: Object,
   doctype: String,
-  docname: String,
 })
 
-const { document } = useDocument(props.doctype, props.docname)
-
+const showAssignmentModal = ref(false)
 const assignees = defineModel()
-
-const ownerField = computed(() => {
-  if (props.doctype === 'CRM Lead') {
-    return 'lead_owner'
-  } else if (props.doctype === 'CRM Deal') {
-    return 'deal_owner'
-  } else {
-    return null
-  }
-})
-
-async function saveAssignees(
-  addedAssignees,
-  removedAssignees,
-  addAssignees,
-  removeAssignees,
-) {
-  removedAssignees.length && (await removeAssignees.submit(removedAssignees))
-  addedAssignees.length && (await addAssignees.submit(addedAssignees))
-
-  const nextAssignee = assignees.value.find(
-    (a) => a.name !== document.doc[ownerField.value],
-  )
-
-  let owner = ownerField.value.replace('_', ' ')
-
-  if (
-    document.doc[ownerField.value] &&
-    removedAssignees.includes(document.doc[ownerField.value])
-  ) {
-    document.doc[ownerField.value] = nextAssignee ? nextAssignee.name : ''
-    document.save.submit()
-
-    if (nextAssignee) {
-      toast.info(
-        __(
-          'Since you removed {0} from the assignee, the {0} has been changed to the next available assignee {1}.',
-          [owner, nextAssignee.label || nextAssignee.name],
-        ),
-      )
-    } else {
-      toast.info(
-        __(
-          'Since you removed {0} from the assignee, the {0} has also been removed.',
-          [owner],
-        ),
-      )
-    }
-  } else if (!document.doc[ownerField.value] && nextAssignee) {
-    document.doc[ownerField.value] = nextAssignee ? nextAssignee.name : ''
-    toast.info(
-      __('Since you added a new assignee, the {0} has been set to {1}.', [
-        owner,
-        nextAssignee.label || nextAssignee.name,
-      ]),
-    )
-  }
-}
 </script>

frontend/src/components/AssignToBody.vue

@@ -1,211 +0,0 @@
-<template>
-  <div
-    class="flex flex-col gap-2 my-2 w-[470px] rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black p-3 ring-opacity-5 focus:outline-none"
-  >
-    <div class="text-base text-ink-gray-5">{{ __('Assign to') }}</div>
-    <Link
-      class="form-control"
-      value=""
-      doctype="User"
-      @change="(option) => addValue(option) && ($refs.input.value = '')"
-      :placeholder="__('John Doe')"
-      :filters="{
-        name: ['in', users.data.crmUsers?.map((user) => user.name)],
-      }"
-      :hideMe="true"
-    >
-      <template #target="{ togglePopover }">
-        <div
-          class="w-full min-h-12 flex flex-wrap items-center gap-1.5 p-1.5 pb-5 rounded-lg bg-surface-gray-2 cursor-text"
-          @click.stop="togglePopover"
-        >
-          <Tooltip
-            :text="assignee.name"
-            v-for="assignee in assignees"
-            :key="assignee.name"
-            @click.stop
-          >
-            <div
-              class="flex items-center text-sm p-0.5 text-ink-gray-6 border border-outline-gray-1 bg-surface-modal rounded-full cursor-pointer"
-              @click.stop
-            >
-              <UserAvatar :user="assignee.name" size="sm" />
-              <div class="ml-1">{{ getUser(assignee.name).full_name }}</div>
-              <Button
-                variant="ghost"
-                class="rounded-full !size-4 m-1"
-                @click.stop="removeValue(assignee.name)"
-              >
-                <template #icon>
-                  <FeatherIcon name="x" class="h-3 w-3 text-ink-gray-6" />
-                </template>
-              </Button>
-            </div>
-          </Tooltip>
-        </div>
-      </template>
-      <template #item-prefix="{ option }">
-        <UserAvatar class="mr-2" :user="option.value" size="sm" />
-      </template>
-      <template #item-label="{ option }">
-        <Tooltip :text="option.value">
-          <div class="cursor-pointer text-ink-gray-9">
-            {{ getUser(option.value).full_name }}
-          </div>
-        </Tooltip>
-      </template>
-    </Link>
-    <div class="flex items-center justify-between gap-2">
-      <div
-        class="text-base text-ink-gray-5 cursor-pointer select-none"
-        @click="assignToMe = !assignToMe"
-      >
-        {{ __('Assign to me') }}
-      </div>
-      <Switch v-model="assignToMe" @click.stop />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import UserAvatar from '@/components/UserAvatar.vue'
-import Link from '@/components/Controls/Link.vue'
-import { usersStore } from '@/stores/users'
-import { capture } from '@/telemetry'
-import { Tooltip, Switch, createResource } from 'frappe-ui'
-import { ref, watch } from 'vue'
-
-const props = defineProps({
-  doctype: {
-    type: String,
-    default: '',
-  },
-  docname: {
-    type: Object,
-    default: null,
-  },
-  open: {
-    type: Boolean,
-    default: false,
-  },
-  onUpdate: {
-    type: Function,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['reload'])
-
-const assignees = defineModel()
-const oldAssignees = ref([])
-const assignToMe = ref(false)
-
-const error = ref('')
-
-const { users, getUser } = usersStore()
-
-const removeValue = (value) => {
-  if (value === getUser('').name) {
-    assignToMe.value = false
-  }
-
-  assignees.value = assignees.value.filter(
-    (assignee) => assignee.name !== value,
-  )
-}
-
-const addValue = (value) => {
-  if (value === getUser('').name) {
-    assignToMe.value = true
-  }
-
-  error.value = ''
-  let obj = {
-    name: value,
-    image: getUser(value).user_image,
-    label: getUser(value).full_name,
-  }
-  if (!assignees.value.find((assignee) => assignee.name === value)) {
-    assignees.value.push(obj)
-  }
-}
-
-watch(assignToMe, (val) => {
-  let user = getUser('')
-  if (val) {
-    addValue(user.name)
-  } else {
-    removeValue(user.name)
-  }
-})
-
-watch(
-  () => props.open,
-  (val) => {
-    if (val) {
-      oldAssignees.value = [...(assignees.value || [])]
-
-      assignToMe.value = assignees.value.some(
-        (assignee) => assignee.name === getUser('').name,
-      )
-    } else {
-      updateAssignees()
-    }
-  },
-  { immediate: true },
-)
-
-async function updateAssignees() {
-  if (JSON.stringify(oldAssignees.value) === JSON.stringify(assignees.value))
-    return
-
-  const removedAssignees = oldAssignees.value
-    .filter(
-      (assignee) => !assignees.value.find((a) => a.name === assignee.name),
-    )
-    .map((assignee) => assignee.name)
-
-  const addedAssignees = assignees.value
-    .filter(
-      (assignee) => !oldAssignees.value.find((a) => a.name === assignee.name),
-    )
-    .map((assignee) => assignee.name)
-
-  if (props.onUpdate) {
-    props.onUpdate(
-      addedAssignees,
-      removedAssignees,
-      addAssignees,
-      removeAssignees,
-    )
-  } else {
-    if (removedAssignees.length) {
-      await removeAssignees.submit(removedAssignees)
-    }
-    if (addedAssignees.length) {
-      addAssignees.submit(addedAssignees)
-    }
-  }
-}
-
-const addAssignees = createResource({
-  url: 'frappe.desk.form.assign_to.add',
-  makeParams: (addedAssignees) => ({
-    doctype: props.doctype,
-    name: props.docname,
-    assign_to: addedAssignees,
-  }),
-  onSuccess: () => {
-    capture('assign_to', { doctype: props.doctype })
-  },
-})
-
-const removeAssignees = createResource({
-  url: 'crm.api.doc.remove_assignments',
-  makeParams: (removedAssignees) => ({
-    doctype: props.doctype,
-    name: props.docname,
-    assignees: removedAssignees,
-  }),
-})
-</script>

frontend/src/components/AttachmentItem.vue

@@ -5,9 +5,11 @@
         :label="label"
         theme="gray"
         variant="outline"
-        :iconLeft="getIcon()"
         @click="toggleDialog()"
       >
+        <template #prefix>
+          <component :is="getIcon()" class="h-4 w-4" />
+        </template>
         <template #suffix>
           <slot name="suffix" />
         </template>

frontend/src/components/BulkDeleteLinkedDocModal.vue

@@ -13,7 +13,7 @@
           </div>
         </div>
         <div>
-          <div class="text-ink-gray-5 text-base">
+          <div class="text-ink-gray-5">
             {{
               __('Are you sure you want to delete {0} items?', [
                 props.items?.length,
@@ -53,7 +53,7 @@
           </div>
         </div>
         <div>
-          <div class="text-ink-gray-5 text-base">
+          <div class="text-ink-gray-5">
             {{
               confirmDeleteInfo.delete
                 ? __(

frontend/src/components/ColumnSettings.vue

@@ -1,7 +1,7 @@
 <template>
-  <Popover placement="bottom-end">
-    <template #target="{ togglePopover }">
-      <Button :label="__('Columns')" @click="togglePopover">
+  <NestedPopover>
+    <template #target>
+      <Button :label="__('Columns')">
         <template v-if="hideLabel">
           <ColumnsIcon class="h-4" />
         </template>
@@ -65,28 +65,37 @@
                 <Button
                   class="w-full !justify-start !text-ink-gray-5"
                   variant="ghost"
+                  @click="togglePopover()"
                   :label="__('Add Column')"
-                  iconLeft="plus"
-                  @click="togglePopover"
-                />
+                >
+                  <template #prefix>
+                    <FeatherIcon name="plus" class="h-4" />
+                  </template>
+                </Button>
               </template>
             </Autocomplete>
             <Button
               v-if="columnsUpdated"
               class="w-full !justify-start !text-ink-gray-5"
               variant="ghost"
-              :label="__('Reset Changes')"
-              :iconLeft="ReloadIcon"
               @click="reset(close)"
-            />
+              :label="__('Reset Changes')"
+            >
+              <template #prefix>
+                <ReloadIcon class="h-4" />
+              </template>
+            </Button>
             <Button
               v-if="!is_default"
               class="w-full !justify-start !text-ink-gray-5"
               variant="ghost"
-              :label="__('Reset to Default')"
-              :iconLeft="ReloadIcon"
               @click="resetToDefault(close)"
-            />
+              :label="__('Reset to Default')"
+            >
+              <template #prefix>
+                <ReloadIcon class="h-4" />
+              </template>
+            </Button>
           </div>
         </div>
         <div v-else>
@@ -135,7 +144,7 @@
         </div>
       </div>
     </template>
-  </Popover>
+  </NestedPopover>
 </template>
 
 <script setup>
@@ -143,9 +152,9 @@ import ColumnsIcon from '@/components/Icons/ColumnsIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import DragIcon from '@/components/Icons/DragIcon.vue'
 import ReloadIcon from '@/components/Icons/ReloadIcon.vue'
+import NestedPopover from '@/components/NestedPopover.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import { isTouchScreenDevice } from '@/utils'
-import { Popover } from 'frappe-ui'
 import Draggable from 'vuedraggable'
 import { computed, ref } from 'vue'
 import { watchOnce } from '@vueuse/core'
@@ -210,7 +219,6 @@ const fields = computed(() => {
 })
 
 function addColumn(c) {
-  if (!c) return
   let align = ['Float', 'Int', 'Percent', 'Currency'].includes(c.type)
     ? 'right'
     : 'left'

frontend/src/components/CommentBox.vue

@@ -45,12 +45,11 @@
               v-slot="{ togglePopover }"
               @update:modelValue="() => appendEmoji()"
             >
-              <Button
-                :tooltip="__('Insert Emoji')"
-                :icon="SmileIcon"
-                variant="ghost"
-                @click="togglePopover()"
-              />
+              <Button variant="ghost" @click="togglePopover()">
+                <template #icon>
+                  <SmileIcon class="h-4" />
+                </template>
+              </Button>
             </IconPicker>
             <FileUploader
               :upload-args="{
@@ -62,11 +61,14 @@
             >
               <template #default="{ openFileSelector }">
                 <Button
-                  :tooltip="__('Attach a file')"
+                  theme="gray"
                   variant="ghost"
-                  :icon="AttachmentIcon"
                   @click="openFileSelector()"
-                />
+                >
+                  <template #icon>
+                    <AttachmentIcon class="h-4" />
+                  </template>
+                </Button>
               </template>
             </FileUploader>
           </div>

frontend/src/components/CommunicationArea.vue

@@ -8,18 +8,24 @@
           showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
         ]"
         :label="__('Reply')"
-        :iconLeft="Email2Icon"
         @click="toggleEmailBox()"
-      />
+      >
+        <template #prefix>
+          <Email2Icon class="h-4" />
+        </template>
+      </Button>
       <Button
         variant="ghost"
         :label="__('Comment')"
         :class="[
           showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
         ]"
-        :iconLeft="CommentIcon"
         @click="toggleCommentBox()"
-      />
+      >
+        <template #prefix>
+          <CommentIcon class="h-4" />
+        </template>
+      </Button>
     </div>
   </div>
   <div

frontend/src/components/ConditionsFilter/CFCondition.vue

@@ -1,454 +0,0 @@
-<template>
-  <div
-    class="flex gap-2"
-    :class="[
-      {
-        'items-center': !props.isGroup,
-      },
-    ]"
-  >
-    <div
-      class="flex gap-2 w-full"
-      :class="[
-        {
-          'items-center justify-between': !props.isGroup,
-        },
-      ]"
-    >
-      <div :class="'text-end text-base text-gray-600'">
-        <div v-if="props.itemIndex == 0" class="min-w-[66px] text-start">
-          {{ __('Where') }}
-        </div>
-        <div v-else class="min-w-[66px] flex items-start">
-          <Button
-            variant="subtle"
-            class="w-max"
-            @click="toggleConjunction"
-            icon-right="refresh-cw"
-            :disabled="props.itemIndex > 2"
-            :label="conjunction"
-          />
-        </div>
-      </div>
-      <div v-if="!props.isGroup" class="flex items-center gap-2 w-full">
-        <div id="fieldname" class="w-full">
-          <Autocomplete
-            :options="filterableFields.data"
-            v-model="props.condition[0]"
-            :placeholder="__('Field')"
-            @update:modelValue="updateField"
-          />
-        </div>
-        <div id="operator">
-          <FormControl
-            v-if="!props.condition[0]"
-            disabled
-            type="text"
-            :placeholder="__('operator')"
-            class="w-[100px]"
-          />
-          <FormControl
-            v-else
-            :disabled="!props.condition[0]"
-            type="select"
-            v-model="props.condition[1]"
-            @change="updateOperator"
-            :options="getOperators()"
-            class="w-max min-w-[100px]"
-          />
-        </div>
-        <div id="value" class="w-full">
-          <FormControl
-            v-if="!props.condition[0]"
-            disabled
-            type="text"
-            :placeholder="__('condition')"
-            class="w-full"
-          />
-          <component
-            v-else
-            :is="getValueControl()"
-            v-model="props.condition[2]"
-            @change="updateValue"
-            :placeholder="__('condition')"
-          />
-        </div>
-      </div>
-      <CFConditions
-        v-if="props.isGroup && !(props.level == 2 || props.level == 4)"
-        :conditions="props.condition"
-        :isChild="true"
-        :level="props.level"
-        :disableAddCondition="props.disableAddCondition"
-      />
-      <Button
-        variant="outline"
-        v-if="props.isGroup && (props.level == 2 || props.level == 4)"
-        @click="show = true"
-        :label="__('Open nested conditions')"
-      />
-    </div>
-    <div :class="'w-max'">
-      <Dropdown placement="right" :options="dropdownOptions">
-        <Button variant="ghost" icon="more-horizontal" />
-      </Dropdown>
-    </div>
-  </div>
-  <Dialog
-    v-model="show"
-    :options="{ size: '3xl', title: __('Nested conditions') }"
-  >
-    <template #body-content>
-      <CFConditions
-        :conditions="props.condition"
-        :isChild="true"
-        :level="props.level"
-        :disableAddCondition="props.disableAddCondition"
-      />
-    </template>
-  </Dialog>
-</template>
-
-<script setup>
-import {
-  Autocomplete,
-  Button,
-  DatePicker,
-  DateRangePicker,
-  DateTimePicker,
-  Dialog,
-  Dropdown,
-  FormControl,
-  Rating,
-} from 'frappe-ui'
-import { computed, defineEmits, h, ref } from 'vue'
-import GroupIcon from '~icons/lucide/group'
-import UnGroupIcon from '~icons/lucide/ungroup'
-import CFConditions from './CFConditions.vue'
-import { filterableFields } from './filterableFields'
-import Link from '@/components/Controls/Link.vue'
-
-const show = ref(false)
-const emit = defineEmits([
-  'remove',
-  'unGroupConditions',
-  'toggleConjunction',
-  'turnIntoGroup',
-])
-
-const props = defineProps({
-  condition: {
-    type: Array,
-    required: true,
-  },
-  isChild: {
-    type: Boolean,
-    default: false,
-  },
-  itemIndex: {
-    type: Number,
-  },
-  level: {
-    type: Number,
-    default: 0,
-  },
-  isGroup: {
-    type: Boolean,
-    default: false,
-  },
-  conjunction: {
-    type: String,
-  },
-  disableAddCondition: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const dropdownOptions = computed(() => {
-  const options = []
-
-  if (!props.isGroup && props.level < 4) {
-    options.push({
-      label: __('Turn into a group'),
-      icon: () => h(GroupIcon),
-      onClick: () => {
-        emit('turnIntoGroup')
-      },
-    })
-  }
-
-  if (props.isGroup) {
-    options.push({
-      label: __('Ungroup conditions'),
-      icon: () => h(UnGroupIcon),
-      onClick: () => {
-        emit('unGroupConditions')
-      },
-    })
-  }
-
-  options.push({
-    label: __('Remove'),
-    icon: 'trash-2',
-    variant: 'red',
-    onClick: () => emit('remove'),
-    condition: () => !props.isGroup,
-  })
-
-  options.push({
-    label: __('Remove group'),
-    icon: 'trash-2',
-    variant: 'red',
-    onClick: () => emit('remove'),
-    condition: () => props.isGroup,
-  })
-
-  return options
-})
-
-const typeCheck = ['Check']
-const typeLink = ['Link', 'Dynamic Link']
-const typeNumber = ['Float', 'Int', 'Currency', 'Percent']
-const typeSelect = ['Select']
-const typeString = ['Data', 'Long Text', 'Small Text', 'Text Editor', 'Text']
-const typeDate = ['Date', 'Datetime']
-const typeRating = ['Rating']
-
-function toggleConjunction() {
-  emit('toggleConjunction', props.conjunction)
-}
-
-const updateField = (field) => {
-  props.condition[0] = field?.fieldname
-  resetConditionValue()
-}
-
-const resetConditionValue = () => {
-  props.condition[2] = ''
-}
-
-function getValueControl() {
-  const [field, operator] = props.condition
-  if (!field) return null
-  const fieldData = filterableFields.data?.find((f) => f.fieldname == field)
-  if (!fieldData) return null
-  const { fieldtype, options } = fieldData
-  if (operator == 'is') {
-    return h(FormControl, {
-      type: 'select',
-      options: [
-        {
-          label: 'Set',
-          value: 'set',
-        },
-        {
-          label: 'Not Set',
-          value: 'not set',
-        },
-      ],
-    })
-  } else if (['like', 'not like', 'in', 'not in'].includes(operator)) {
-    return h(FormControl, { type: 'text' })
-  } else if (typeSelect.includes(fieldtype) || typeCheck.includes(fieldtype)) {
-    const _options =
-      fieldtype == 'Check' ? ['Yes', 'No'] : getSelectOptions(options)
-    return h(FormControl, {
-      type: 'select',
-      options: _options.map((o) => ({
-        label: o,
-        value: o,
-      })),
-    })
-  } else if (typeLink.includes(fieldtype)) {
-    if (fieldtype == 'Dynamic Link') {
-      return h(FormControl, { type: 'text' })
-    }
-    return h(Link, {
-      class: 'form-control',
-      doctype: options,
-      value: props.condition[2],
-    })
-  } else if (typeNumber.includes(fieldtype)) {
-    return h(FormControl, { type: 'number' })
-  } else if (typeDate.includes(fieldtype) && operator == 'between') {
-    return h(DateRangePicker, { value: props.condition[2], iconLeft: '' })
-  } else if (typeDate.includes(fieldtype)) {
-    return h(fieldtype == 'Date' ? DatePicker : DateTimePicker, {
-      value: props.condition[2],
-      iconLeft: '',
-    })
-  } else if (typeRating.includes(fieldtype)) {
-    return h(Rating, {
-      modelValue: props.condition[2] || 0,
-      class: 'truncate',
-      'update:modelValue': (v) => updateValue(v),
-    })
-  } else {
-    return h(FormControl, { type: 'text' })
-  }
-}
-
-function updateValue(value) {
-  value = value.target ? value.target.value : value
-  if (props.condition[1] === 'between') {
-    props.condition[2] = [value.split(',')[0], value.split(',')[1]]
-  } else {
-    props.condition[2] = value + ''
-  }
-}
-
-function getSelectOptions(options) {
-  return options.split('\n')
-}
-
-function updateOperator(event) {
-  let oldOperatorValue = event.target._value
-  let newOperatorValue = event.target.value
-  props.condition[1] = event.target.value
-  if (!isSameTypeOperator(oldOperatorValue, newOperatorValue)) {
-    props.condition[2] = getDefaultValue(props.condition[0])
-  }
-  resetConditionValue()
-}
-
-function getOperators() {
-  let options = []
-  const field = props.condition[0]
-  if (!field) return options
-  const fieldData = filterableFields.data?.find((f) => f.fieldname == field)
-  if (!fieldData) return options
-  const { fieldtype, fieldname } = fieldData
-  if (typeString.includes(fieldtype)) {
-    options.push(
-      ...[
-        { label: 'Equals', value: '==' },
-        { label: 'Not Equals', value: '!=' },
-        { label: 'Like', value: 'like' },
-        { label: 'Not Like', value: 'not like' },
-        { label: 'In', value: 'in' },
-        { label: 'Not In', value: 'not in' },
-        { label: 'Is', value: 'is' },
-      ],
-    )
-  }
-  if (fieldname === '_assign') {
-    options = [
-      { label: 'Like', value: 'like' },
-      { label: 'Not Like', value: 'not like' },
-      { label: 'Is', value: 'is' },
-    ]
-  }
-  if (typeNumber.includes(fieldtype)) {
-    options.push(
-      ...[
-        { label: 'Equals', value: '==' },
-        { label: 'Not Equals', value: '!=' },
-        { label: 'Like', value: 'like' },
-        { label: 'Not Like', value: 'not like' },
-        { label: 'In', value: 'in' },
-        { label: 'Not In', value: 'not in' },
-        { label: 'Is', value: 'is' },
-        { label: '<', value: '<' },
-        { label: '>', value: '>' },
-        { label: '<=', value: '<=' },
-        { label: '>=', value: '>=' },
-      ],
-    )
-  }
-  if (typeSelect.includes(fieldtype)) {
-    options.push(
-      ...[
-        { label: 'Equals', value: '==' },
-        { label: 'Not Equals', value: '!=' },
-        { label: 'In', value: 'in' },
-        { label: 'Not In', value: 'not in' },
-        { label: 'Is', value: 'is' },
-      ],
-    )
-  }
-  if (typeLink.includes(fieldtype)) {
-    options.push(
-      ...[
-        { label: 'Equals', value: '==' },
-        { label: 'Not Equals', value: '!=' },
-        { label: 'Like', value: 'like' },
-        { label: 'Not Like', value: 'not like' },
-        { label: 'In', value: 'in' },
-        { label: 'Not In', value: 'not in' },
-        { label: 'Is', value: 'is' },
-      ],
-    )
-  }
-  if (typeCheck.includes(fieldtype)) {
-    options.push(...[{ label: 'Equals', value: '==' }])
-  }
-  if (['Duration'].includes(fieldtype)) {
-    options.push(
-      ...[
-        { label: 'Like', value: 'like' },
-        { label: 'Not Like', value: 'not like' },
-        { label: 'In', value: 'in' },
-        { label: 'Not In', value: 'not in' },
-        { label: 'Is', value: 'is' },
-      ],
-    )
-  }
-  if (typeDate.includes(fieldtype)) {
-    options.push(
-      ...[
-        { label: 'Equals', value: '==' },
-        { label: 'Not Equals', value: '!=' },
-        { label: 'Is', value: 'is' },
-        { label: '>', value: '>' },
-        { label: '<', value: '<' },
-        { label: '>=', value: '>=' },
-        { label: '<=', value: '<=' },
-        { label: 'Between', value: 'between' },
-      ],
-    )
-  }
-  if (typeRating.includes(fieldtype)) {
-    options.push(
-      ...[
-        { label: 'Equals', value: '==' },
-        { label: 'Not Equals', value: '!=' },
-        { label: 'Is', value: 'is' },
-        { label: '>', value: '>' },
-        { label: '<', value: '<' },
-        { label: '>=', value: '>=' },
-        { label: '<=', value: '<=' },
-      ],
-    )
-  }
-  const op = options.find((o) => o.value == props.condition[1])
-  props.condition[1] = op?.value || options[0].value
-  return options
-}
-
-function getDefaultValue(field) {
-  if (typeSelect.includes(field.fieldtype)) {
-    return getSelectOptions(field.options)[0]
-  }
-  if (typeCheck.includes(field.fieldtype)) {
-    return 'Yes'
-  }
-  if (typeDate.includes(field.fieldtype)) {
-    return null
-  }
-  if (typeRating.includes(field.fieldtype)) {
-    return 0
-  }
-  return ''
-}
-
-function isSameTypeOperator(oldOperator, newOperator) {
-  let textOperators = ['==', '!=', 'in', 'not in', '>', '<', '>=', '<=']
-  if (
-    textOperators.includes(oldOperator) &&
-    textOperators.includes(newOperator)
-  )
-    return true
-  return false
-}
-</script>

frontend/src/components/ConditionsFilter/CFConditions.vue

@@ -1,142 +0,0 @@
-<template>
-  <div class="rounded-lg border border-outline-gray-2 p-3 flex flex-col gap-4 w-full">
-    <template v-for="(condition, i) in props.conditions" :key="condition.field">
-      <CFCondition
-        v-if="Array.isArray(condition)"
-        :condition="condition"
-        :isChild="props.isChild"
-        :itemIndex="i"
-        @remove="removeCondition(condition)"
-        @unGroupConditions="unGroupConditions(condition)"
-        :level="props.level + 1"
-        @toggleConjunction="toggleConjunction"
-        :isGroup="isGroupCondition(condition[0])"
-        :conjunction="getConjunction()"
-        @turnIntoGroup="turnIntoGroup(condition)"
-        :disableAddCondition="props.disableAddCondition"
-      />
-    </template>
-    <div v-if="props.isChild" class="flex">
-      <Dropdown v-slot="{ open }" :options="dropdownOptions">
-        <Button
-          :disabled="props.disableAddCondition"
-          :label="__('Add condition')"
-          icon-left="plus"
-          :icon-right="open ? 'chevron-up' : 'chevron-down'"
-        />
-      </Dropdown>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Button, Dropdown } from 'frappe-ui'
-import { computed, watch } from 'vue'
-import CFCondition from './CFCondition.vue'
-import { filterableFields } from './filterableFields'
-
-const props = defineProps({
-  conditions: {
-    type: Array,
-    required: true,
-  },
-  isChild: {
-    type: Boolean,
-    default: false,
-  },
-  level: {
-    type: Number,
-    default: 0,
-  },
-  disableAddCondition: {
-    type: Boolean,
-    default: false,
-  },
-  doctype: {
-    type: String,
-    required: true,
-  },
-})
-
-const getConjunction = () => {
-  let conjunction = 'and'
-  props.conditions.forEach((condition) => {
-    if (typeof condition == 'string') {
-      conjunction = condition
-    }
-  })
-  return conjunction
-}
-
-const turnIntoGroup = (condition) => {
-  props.conditions.splice(props.conditions.indexOf(condition), 1, [condition])
-}
-
-const isGroupCondition = (condition) => {
-  return Array.isArray(condition)
-}
-
-const dropdownOptions = computed(() => {
-  const options = [
-    {
-      label: __('Add condition'),
-      onClick: () => {
-        const conjunction = getConjunction()
-        props.conditions.push(conjunction, ['', '', ''])
-      },
-    },
-  ]
-  if (props.level < 3) {
-    options.push({
-      label: __('Add condition group'),
-      onClick: () => {
-        const conjunction = getConjunction()
-        props.conditions.push(conjunction, [[]])
-      },
-    })
-  }
-  return options
-})
-
-function removeCondition(condition) {
-  const conditionIndex = props.conditions.indexOf(condition)
-  if (conditionIndex == 0) {
-    props.conditions.splice(conditionIndex, 2)
-  } else {
-    props.conditions.splice(conditionIndex - 1, 2)
-  }
-}
-
-function unGroupConditions(condition) {
-  const conjunction = getConjunction()
-  const newConditions = condition.map((c) => {
-    if (typeof c == 'string') {
-      return conjunction
-    }
-    return c
-  })
-
-  const index = props.conditions.indexOf(condition)
-  if (index !== -1) {
-    props.conditions.splice(index, 1, ...newConditions)
-  }
-}
-
-function toggleConjunction(conjunction) {
-  for (let i = 0; i < props.conditions.length; i++) {
-    if (typeof props.conditions[i] == 'string') {
-      props.conditions[i] = conjunction == 'and' ? 'or' : 'and'
-    }
-  }
-}
-
-watch(
-  () => props.doctype,
-  (doctype) => {
-    filterableFields.submit({
-      doctype,
-    })
-  },
-  { immediate: true },
-)
-</script>

frontend/src/components/ConditionsFilter/filterableFields.ts

@@ -1,17 +0,0 @@
-import { createResource } from 'frappe-ui'
-
-export const filterableFields = createResource({
-  url: 'crm.api.doc.get_filterable_fields',
-  transform: (data) => {
-    data = data
-      .filter((field) => !field.fieldname.startsWith('_'))
-      .map((field) => {
-        return {
-          label: field.label,
-          value: field.fieldname,
-          ...field,
-        }
-      })
-    return data
-  },
-})

frontend/src/components/Controls/Grid.vue

@@ -52,14 +52,16 @@
             >
           </div>
         </div>
-        <div class="flex items-center justify-center w-12">
+        <div class="w-12">
           <Button
-            :tooltip="__('Edit grid fields')"
-            class="rounded !bg-surface-gray-2 border-0 !text-ink-gray-5"
+            class="flex w-full items-center justify-center rounded !bg-surface-gray-2 border-0"
             variant="outline"
-            icon="settings"
             @click="showGridFieldsEditorModal = true"
-          />
+          >
+            <template #icon>
+              <FeatherIcon name="settings" class="size-4 text-ink-gray-7" />
+            </template>
+          </Button>
         </div>
       </div>
       <!-- Rows -->
@@ -70,7 +72,6 @@
           :delay="isTouchScreenDevice() ? 200 : 0"
           group="rows"
           item-key="name"
-          @end="reorder"
         >
           <template #item="{ element: row, index }">
             <div
@@ -276,14 +277,16 @@
                   />
                 </div>
               </div>
-              <div class="edit-row flex items-center justify-center w-12">
+              <div class="edit-row w-12">
                 <Button
-                  :tooltip="__('Edit row')"
-                  class="rounded border-0 !text-ink-gray-7"
+                  class="flex w-full items-center justify-center rounded border-0"
                   variant="outline"
-                  :icon="EditIcon"
                   @click="showRowList[index] = true"
-                />
+                >
+                  <template #icon>
+                    <EditIcon class="text-ink-gray-7" />
+                  </template>
+                </Button>
               </div>
               <GridRowModal
                 v-if="showRowList[index]"
@@ -347,6 +350,7 @@ import { usersStore } from '@/stores/users'
 import { getMeta } from '@/stores/meta'
 import { createDocument } from '@/composables/document'
 import {
+  FeatherIcon,
   FormControl,
   Checkbox,
   DateTimePicker,
@@ -516,13 +520,6 @@ const deleteRows = () => {
   selectedRows.clear()
 }
 
-const reorder = () => {
-  rows.value.forEach((row, index) => {
-    row.idx = index + 1
-  })
-}
-
-
 function fieldChange(value, field, row) {
   triggerOnChange(field.fieldname, value, row)
 }

frontend/src/components/Controls/GridFieldsEditorModal.vue

@@ -54,10 +54,13 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full mt-2"
-              :label="__('Add Field')"
-              iconLeft="plus"
               @click="togglePopover()"
-            />
+              :label="__('Add Field')"
+            >
+              <template #prefix>
+                <FeatherIcon name="plus" class="h-4" />
+              </template>
+            </Button>
           </template>
           <template #item-label="{ option }">
             <div class="flex flex-col gap-1 text-ink-gray-9">
@@ -72,7 +75,7 @@
       </div>
     </template>
     <template #actions>
-      <div class="flex items-center gap-2 justify-end">
+      <div class="flex flex-col gap-2">
         <Button
           v-if="dirty"
           class="w-full"

frontend/src/components/Controls/GridRowModal.vue

@@ -11,18 +11,19 @@
           <div class="flex items-center gap-1">
             <Button
               v-if="isManager()"
-              :tooltip="__('Edit fields layout')"
               variant="ghost"
               class="w-7"
-              :icon="EditIcon"
               @click="openGridRowFieldsModal"
-            />
-            <Button
-              icon="x"
-              variant="ghost"
-              class="w-7"
-              @click="show = false"
-            />
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
+            </Button>
           </div>
         </div>
         <div>

frontend/src/components/Controls/ImageUploader.vue

@@ -1,6 +1,7 @@
 <template>
   <FileUploader
     :file-types="image_type"
+    class="text-base"
     @success="
       (file) => {
         $emit('upload', file.file_url)
@@ -9,28 +10,21 @@
   >
     <template v-slot="{ progress, uploading, openFileSelector }">
       <div class="flex items-end space-x-1">
-        <Button
-          @click="openFileSelector"
-          :iconLeft="uploading ? 'cloud-upload' : ImageUpIcon"
-          :label="
+        <Button @click="openFileSelector">
+          {{
             uploading
-              ? __('Uploading {0}%', [progress])
+              ? `Uploading ${progress}%`
               : image_url
-                ? __('Change')
-                : __('Upload')
-          "
-        />
-        <Button
-          v-if="image_url"
-          :label="__('Remove')"
-          @click="$emit('remove')"
-        />
+                ? 'Change'
+                : 'Upload'
+          }}
+        </Button>
+        <Button v-if="image_url" @click="$emit('remove')">Remove</Button>
       </div>
     </template>
   </FileUploader>
 </template>
 <script setup>
-import ImageUpIcon from '~icons/lucide/image-up'
 import { FileUploader, Button } from 'frappe-ui'
 
 const prop = defineProps({
@@ -39,6 +33,10 @@ const prop = defineProps({
     type: String,
     default: 'image/*',
   },
+  label: {
+    type: String,
+    default: '',
+  },
 })
 const emit = defineEmits(['upload', 'remove'])
 </script>

frontend/src/components/Controls/Link.vue

@@ -48,18 +48,24 @@
             variant="ghost"
             class="w-full !justify-start"
             :label="__('Create New')"
-            iconLeft="plus"
             @click="() => attrs.onCreate(value, close)"
-          />
+          >
+            <template #prefix>
+              <FeatherIcon name="plus" class="h-4" />
+            </template>
+          </Button>
         </div>
         <div>
           <Button
             variant="ghost"
             class="w-full !justify-start"
             :label="__('Clear')"
-            iconLeft="x"
             @click="() => clearValue(close)"
-          />
+          >
+            <template #prefix>
+              <FeatherIcon name="x" class="h-4" />
+            </template>
+          </Button>
         </div>
       </template>
     </Autocomplete>

frontend/src/components/CustomActions.vue

@@ -18,10 +18,14 @@
     :key="g.label"
   >
     <Dropdown :options="g.action" v-slot="{ open }">
-      <Button
-        :label="g.label"
-        :iconRight="open ? 'chevron-up' : 'chevron-down'"
-      />
+      <Button :label="g.label">
+        <template #suffix>
+          <FeatherIcon
+            :name="open ? 'chevron-up' : 'chevron-down'"
+            class="h-4"
+          />
+        </template>
+      </Button>
     </Dropdown>
   </div>
 </template>

frontend/src/components/DeleteLinkedDocModal.vue

@@ -2,7 +2,7 @@
   <Dialog v-model="show" :options="{ size: 'xl' }">
     <template #body v-if="!confirmDeleteInfo.show">
       <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
-        <div class="mb-6 flex items-center justify-between">
+        <div class="mb-4 flex items-center justify-between">
           <div>
             <h3 class="text-2xl leading-6 text-ink-gray-9 font-semibold">
               {{
@@ -32,12 +32,11 @@
                 {
                   label: 'Document',
                   key: 'title',
-                  width: '19rem',
                 },
                 {
                   label: 'Master',
                   key: 'reference_doctype',
-                  width: '12rem',
+                  width: '30%',
                 },
               ]"
               @selectionsChanged="

frontend/src/components/DropdownItem.vue

@@ -19,36 +19,53 @@
           v-if="editMode"
           variant="ghost"
           :label="__('Save')"
+          size="sm"
           class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
           @click="saveOption"
         />
-        <Button
-          v-if="!isNew && !option.selected"
-          :tooltip="__('Set As Primary')"
-          variant="ghost"
-          :icon="SuccessIcon"
-          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
-          @click="option.onClick"
-        />
-        <Button
-          v-if="!editMode"
-          :tooltip="__('Edit')"
-          variant="ghost"
-          :icon="EditIcon"
-          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
-          @click="toggleEditMode"
-        />
-        <Button
-          :tooltip="__('Delete')"
-          variant="ghost"
-          icon="x"
-          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
-          @click="() => option.onDelete(option, isNew)"
-        />
+        <Tooltip text="Set As Primary" v-if="!isNew && !option.selected">
+          <div>
+            <Button
+              variant="ghost"
+              size="sm"
+              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
+              @click="option.onClick"
+            >
+              <template #icon>
+                <SuccessIcon />
+              </template>
+            </Button>
+          </div>
+        </Tooltip>
+        <Tooltip v-if="!editMode" text="Edit">
+          <div>
+            <Button
+              variant="ghost"
+              size="sm"
+              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
+              @click="toggleEditMode"
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
+            </Button>
+          </div>
+        </Tooltip>
+        <Tooltip text="Delete">
+          <div>
+            <Button
+              variant="ghost"
+              icon="x"
+              size="sm"
+              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
+              @click="() => option.onDelete(option, isNew)"
+            />
+          </div>
+        </Tooltip>
       </div>
     </div>
     <div v-if="option.selected">
-      <FeatherIcon name="check" class="text-ink-gray-5 h-4 w-6" />
+      <FeatherIcon name="check" class="text-ink-gray-5 h-4 w-6" size="sm" />
     </div>
   </div>
 </template>
@@ -56,7 +73,7 @@
 <script setup>
 import SuccessIcon from '@/components/Icons/SuccessIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
-import { TextInput } from 'frappe-ui'
+import { TextInput, Tooltip } from 'frappe-ui'
 import { nextTick, ref, onMounted } from 'vue'
 
 const props = defineProps({

frontend/src/components/EmailEditor.vue

@@ -123,12 +123,11 @@
               v-slot="{ togglePopover }"
               @update:modelValue="() => appendEmoji()"
             >
-              <Button
-                :tooltip="__('Insert Emoji')"
-                :icon="SmileIcon"
-                variant="ghost"
-                @click="togglePopover()"
-              />
+              <Button variant="ghost" @click="togglePopover()">
+                <template #icon>
+                  <SmileIcon class="h-4" />
+                </template>
+              </Button>
             </IconPicker>
             <FileUploader
               :upload-args="{
@@ -139,20 +138,21 @@
               @success="(f) => attachments.push(f)"
             >
               <template #default="{ openFileSelector }">
-                <Button
-                  :tooltip="__('Attach a file')"
-                  :icon="AttachmentIcon"
-                  variant="ghost"
-                  @click="openFileSelector()"
-                />
+                <Button variant="ghost" @click="openFileSelector()">
+                  <template #icon>
+                    <AttachmentIcon class="h-4" />
+                  </template>
+                </Button>
               </template>
             </FileUploader>
             <Button
-              :tooltip="__('Insert Email Template')"
               variant="ghost"
-              :icon="EmailTemplateIcon"
               @click="showEmailTemplateSelectorModal = true"
-            />
+            >
+              <template #icon>
+                <EmailTemplateIcon class="h-4" />
+              </template>
+            </Button>
           </div>
           <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
             <Button v-bind="discardButtonProps || {}" :label="__('Discard')" />

frontend/src/components/FieldLayout/Field.vue

@@ -89,9 +89,12 @@
         v-if="data[field.fieldname] && field.edit"
         class="shrink-0"
         :label="__('Edit')"
-        :iconLeft="EditIcon"
         @click="field.edit(data[field.fieldname])"
-      />
+      >
+        <template #prefix>
+          <EditIcon class="h-4 w-4" />
+        </template>
+      </Button>
     </div>
 
     <TableMultiselectInput

frontend/src/components/FieldLayoutEditor.vue

@@ -169,10 +169,13 @@
                         <Button
                           class="w-full !h-8 !bg-surface-modal"
                           variant="outline"
-                          :label="__('Add Field')"
-                          iconLeft="plus"
                           @click="togglePopover()"
-                        />
+                          :label="__('Add Field')"
+                        >
+                          <template #prefix>
+                            <FeatherIcon name="plus" class="h-4" />
+                          </template>
+                        </Button>
                       </div>
                     </template>
                     <template #item-label="{ option }">
@@ -195,7 +198,6 @@
           class="w-full h-8"
           variant="subtle"
           :label="__('Add Section')"
-          iconLeft="plus"
           @click="
             tabs[tabIndex].sections.push({
               label: __('New Section'),
@@ -204,7 +206,11 @@
               columns: [{ name: 'column_' + getRandom(), fields: [] }],
             })
           "
-        />
+        >
+          <template #prefix>
+            <FeatherIcon name="plus" class="h-4" />
+          </template>
+        </Button>
       </div>
     </div>
   </div>

frontend/src/components/FilesUploader/FilesUploader.vue

@@ -29,7 +29,6 @@
               filesUploaderArea?.showWebLink || filesUploaderArea?.showCamera
             "
             :label="isMobileView ? __('Back') : __('Back to file upload')"
-            iconLeft="arrow-left"
             @click="
               () => {
                 filesUploaderArea.showWebLink = false
@@ -38,7 +37,11 @@
                 filesUploaderArea.cameraImage = null
               }
             "
-          />
+          >
+            <template #prefix>
+              <FeatherIcon name="arrow-left" class="size-4" />
+            </template>
+          </Button>
           <Button
             v-if="
               filesUploaderArea?.showCamera && !filesUploaderArea?.cameraImage

frontend/src/components/Filter.vue

@@ -1,13 +1,12 @@
 <template>
-  <Popover placement="bottom-end">
-    <template #target="{ togglePopover, close }">
+  <NestedPopover>
+    <template #target>
       <div class="flex items-center">
         <Button
           :label="__('Filter')"
           :class="filters?.size ? 'rounded-r-none' : ''"
-          :iconLeft="FilterIcon"
-          @click="togglePopover"
         >
+          <template #prefix><FilterIcon class="h-4" /></template>
           <template v-if="filters?.size" #suffix>
             <div
               class="flex h-5 w-5 items-center justify-center rounded-[5px] bg-surface-white pt-px text-xs font-medium text-ink-gray-8 shadow-sm"
@@ -16,13 +15,15 @@
             </div>
           </template>
         </Button>
-        <Button
-          v-if="filters?.size"
-          :tooltip="__('Clear all Filter')"
-          class="rounded-l-none border-l"
-          icon="x"
-          @click.stop="clearfilter(close)"
-        />
+        <Tooltip v-if="filters?.size" :text="__('Clear all Filter')">
+          <div>
+            <Button
+              class="rounded-l-none border-l"
+              icon="x"
+              @click.stop="clearfilter(false)"
+            />
+          </div>
+        </Tooltip>
       </div>
     </template>
     <template #body="{ close }">
@@ -133,10 +134,13 @@
                 <Button
                   class="!text-ink-gray-5"
                   variant="ghost"
-                  :label="__('Add Filter')"
-                  iconLeft="plus"
                   @click="togglePopover()"
-                />
+                  :label="__('Add Filter')"
+                >
+                  <template #prefix>
+                    <FeatherIcon name="plus" class="h-4" />
+                  </template>
+                </Button>
               </template>
             </Autocomplete>
             <Button
@@ -150,16 +154,17 @@
         </div>
       </div>
     </template>
-  </Popover>
+  </NestedPopover>
 </template>
 <script setup>
+import NestedPopover from '@/components/NestedPopover.vue'
 import FilterIcon from '@/components/Icons/FilterIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import {
   FormControl,
   createResource,
-  Popover,
+  Tooltip,
   DatePicker,
   DateTimePicker,
   DateRangePicker,
@@ -480,7 +485,7 @@ function removeFilter(index) {
 function clearfilter(close) {
   filters.value.clear()
   apply()
-  close()
+  close && close()
 }
 
 function updateValue(value, filter) {

frontend/src/components/GroupBy.vue

@@ -7,10 +7,18 @@
             ? groupByValue?.label
             : __('Group By: ') + groupByValue?.label
         "
-        :iconLeft="DetailsIcon"
-        :iconRight="isOpen ? 'chevron-up' : 'chevron-down'"
         @click="togglePopover()"
-      />
+      >
+        <template #prefix>
+          <DetailsIcon />
+        </template>
+        <template #suffix>
+          <FeatherIcon
+            :name="isOpen ? 'chevron-up' : 'chevron-down'"
+            class="h-4"
+          />
+        </template>
+      </Button>
     </template>
   </Autocomplete>
 </template>

frontend/src/components/IconPicker.vue

@@ -69,7 +69,7 @@
   </Popover>
 </template>
 <script setup>
-import { Popover } from 'frappe-ui'
+import Popover from '@/components/frappe-ui/Popover.vue'
 import { gemoji } from 'gemoji'
 import { ref, computed } from 'vue'
 

frontend/src/components/Icons/SettingsIcon2.vue

@@ -1,19 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="lucide lucide-settings2-icon lucide-settings-2"
-  >
-    <path d="M14 17H5" />
-    <path d="M19 7h-9" />
-    <circle cx="17" cy="17" r="3" />
-    <circle cx="7" cy="7" r="3" />
-  </svg>
-</template>

frontend/src/components/Icons/SparkleIcon.vue

@@ -1,16 +0,0 @@
-<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="M3.37543 1.93494L4.21632 2.21494C4.35232 2.26027 4.44388 2.38738 4.44388 2.53138C4.44388 2.67538 4.35143 2.80249 4.21543 2.84783L3.37454 3.12783L3.09365 3.9696C3.04921 4.10472 2.92121 4.19716 2.7781 4.19716C2.63499 4.19716 2.50787 4.1056 2.46254 3.9696L2.18165 3.12783L1.34076 2.84783C1.20476 2.80249 1.11232 2.67538 1.11232 2.53138C1.11232 2.38738 1.20476 2.26027 1.34076 2.21494L2.18165 1.93494L2.46254 1.09316C2.55321 0.82116 3.00387 0.82116 3.09454 1.09316L3.37543 1.93494ZM8.44852 1.33394C8.3643 1.16325 8.19046 1.05518 8.00012 1.05518C7.80978 1.05518 7.63595 1.16325 7.55173 1.33394L5.67697 5.13368L1.48388 5.74214C1.29552 5.76947 1.13901 5.90137 1.08017 6.08238C1.02133 6.26339 1.07036 6.46211 1.20665 6.59497L4.24065 9.55281L3.52421 13.7284C3.49203 13.916 3.56913 14.1056 3.7231 14.2174C3.87706 14.3293 4.08119 14.3441 4.24966 14.2555L8.11188 12.2253C8.35631 12.0968 8.4503 11.7945 8.32181 11.5501C8.19333 11.3057 7.89102 11.2117 7.64659 11.3402L4.68114 12.899L5.2707 9.46284C5.29853 9.30065 5.24477 9.13514 5.12693 9.02027L2.63025 6.58626L6.08082 6.08555C6.24373 6.06191 6.38457 5.95959 6.45741 5.81196L8.00012 2.6852L9.54284 5.81196C9.61568 5.95959 9.75652 6.06191 9.91943 6.08555L13.37 6.58625L11.6235 8.2887C11.4258 8.48146 11.4218 8.79802 11.6145 8.99575C11.8073 9.19349 12.1239 9.19752 12.3216 9.00476L14.7936 6.59498C14.9299 6.46212 14.9789 6.2634 14.9201 6.08239C14.8612 5.90138 14.7047 5.76947 14.5164 5.74214L10.3233 5.13368L8.44852 1.33394ZM13.4744 11.9911L12.3517 11.6168L11.9775 10.4942C11.8557 10.1315 11.2557 10.1315 11.1339 10.4942L10.7597 11.6168L9.63702 11.9911C9.45569 12.0515 9.33302 12.2213 9.33302 12.4124C9.33302 12.6035 9.45569 12.7733 9.63702 12.8337L10.7597 13.2079L11.1339 14.3306C11.1944 14.5119 11.365 14.6346 11.5561 14.6346C11.7472 14.6346 11.917 14.5119 11.9784 14.3306L12.3526 13.2079L13.4752 12.8337C13.6566 12.7733 13.7792 12.6035 13.7792 12.4124C13.7792 12.2213 13.6566 12.0515 13.4752 11.9911H13.4744ZM13.3333 2.88883C13.3333 3.25702 13.0349 3.5555 12.6667 3.5555C12.2985 3.5555 12 3.25702 12 2.88883C12 2.52064 12.2985 2.22217 12.6667 2.22217C13.0349 2.22217 13.3333 2.52064 13.3333 2.88883Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>

frontend/src/components/Kanban/KanbanSettings.vue

@@ -3,8 +3,11 @@
     :label="__('Kanban Settings')"
     @click="showDialog = true"
     v-bind="$attrs"
-    :iconLeft="KanbanIcon"
-  />
+  >
+    <template #prefix>
+      <KanbanIcon class="h-4" />
+    </template>
+  </Button>
   <Dialog v-model="showDialog" :options="{ title: __('Kanban Settings') }">
     <template #body-content>
       <div>
@@ -20,8 +23,8 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full !justify-start"
-              :label="columnField.label"
               @click="togglePopover()"
+              :label="columnField.label"
             />
           </template>
         </Autocomplete>
@@ -77,10 +80,13 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full mt-2"
-              :label="__('Add Field')"
-              iconLeft="plus"
               @click="togglePopover()"
-            />
+              :label="__('Add Field')"
+            >
+              <template #prefix>
+                <FeatherIcon name="plus" class="h-4" />
+              </template>
+            </Button>
           </template>
           <template #item-label="{ option }">
             <div class="flex flex-col gap-1 text-ink-gray-9">

frontend/src/components/Kanban/KanbanView.vue

@@ -15,18 +15,17 @@
         >
           <div class="flex gap-2 items-center group justify-between">
             <div class="flex items-center text-base">
-              <Popover>
-                <template #target="{ togglePopover }">
+              <NestedPopover>
+                <template #target>
                   <Button
                     variant="ghost"
                     size="sm"
                     class="hover:!bg-surface-gray-2"
-                    @click="togglePopover"
                   >
                     <IndicatorIcon :class="parseColor(column.column.color)" />
                   </Button>
                 </template>
-                <template #body>
+                <template #body="{ close }">
                   <div
                     class="flex flex-col gap-3 px-3 py-2.5 min-w-40 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
                   >
@@ -49,7 +48,7 @@
                     </div>
                   </div>
                 </template>
-              </Popover>
+              </NestedPopover>
               <div class="text-ink-gray-9">{{ column.column.name }}</div>
             </div>
             <div class="flex">
@@ -154,10 +153,13 @@
         <template #target="{ togglePopover }">
           <Button
             class="w-full mt-2.5 mb-1 mr-5"
-            :label="__('Add Column')"
-            iconLeft="plus"
             @click="togglePopover()"
-          />
+            :label="__('Add Column')"
+          >
+            <template #prefix>
+              <FeatherIcon name="plus" class="h-4" />
+            </template>
+          </Button>
         </template>
       </Autocomplete>
     </div>
@@ -165,10 +167,11 @@
 </template>
 <script setup>
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import NestedPopover from '@/components/NestedPopover.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import { isTouchScreenDevice, colors, parseColor } from '@/utils'
 import Draggable from 'vuedraggable'
-import { Dropdown, Popover } from 'frappe-ui'
+import { Dropdown } from 'frappe-ui'
 import { computed } from 'vue'
 
 const props = defineProps({

frontend/src/components/Layouts/AppSidebar.vue

@@ -3,8 +3,8 @@
     class="relative flex h-full flex-col justify-between transition-all duration-300 ease-in-out"
     :class="isSidebarCollapsed ? 'w-12' : 'w-[220px]'"
   >
-    <div class="p-2">
-      <UserDropdown :isCollapsed="isSidebarCollapsed" />
+    <div>
+      <UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
     </div>
     <div class="flex-1 overflow-y-auto">
       <div class="mb-3 flex flex-col">
@@ -197,50 +197,51 @@ const isSidebarCollapsed = useStorage('isSidebarCollapsed', false)
 const isFCSite = ref(window.is_fc_site)
 const isDemoSite = ref(window.is_demo_site)
 
-const links = [
-  {
-    label: 'Dashboard',
-    icon: LucideLayoutDashboard,
-    to: 'Dashboard',
-  },
-  {
-    label: 'Leads',
-    icon: LeadsIcon,
-    to: 'Leads',
-  },
-  {
-    label: 'Deals',
-    icon: DealsIcon,
-    to: 'Deals',
-  },
-  {
-    label: 'Contacts',
-    icon: ContactsIcon,
-    to: 'Contacts',
-  },
-  {
-    label: 'Organizations',
-    icon: OrganizationsIcon,
-    to: 'Organizations',
-  },
-  {
-    label: 'Notes',
-    icon: NoteIcon,
-    to: 'Notes',
-  },
-  {
-    label: 'Tasks',
-    icon: TaskIcon,
-    to: 'Tasks',
-  },
-  {
-    label: 'Call Logs',
-    icon: PhoneIcon,
-    to: 'Call Logs',
-  },
-]
-
 const allViews = computed(() => {
+  const links = [
+    {
+      label: 'Dashboard',
+      icon: LucideLayoutDashboard,
+      to: 'Dashboard',
+      condition: () => isManager(),
+    },
+    {
+      label: 'Leads',
+      icon: LeadsIcon,
+      to: 'Leads',
+    },
+    {
+      label: 'Deals',
+      icon: DealsIcon,
+      to: 'Deals',
+    },
+    {
+      label: 'Contacts',
+      icon: ContactsIcon,
+      to: 'Contacts',
+    },
+    {
+      label: 'Organizations',
+      icon: OrganizationsIcon,
+      to: 'Organizations',
+    },
+    {
+      label: 'Notes',
+      icon: NoteIcon,
+      to: 'Notes',
+    },
+    {
+      label: 'Tasks',
+      icon: TaskIcon,
+      to: 'Tasks',
+    },
+    {
+      label: 'Call Logs',
+      icon: PhoneIcon,
+      to: 'Call Logs',
+    },
+  ]
+
   let _views = [
     {
       name: 'All Views',

frontend/src/components/ListBulkActions.vue

@@ -106,8 +106,6 @@ function convertToDeal(selections, unselectAll) {
 }
 
 function deleteValues(selections, unselectAll) {
-  unselectAllAction.value = unselectAll
-
   const selectedDocs = Array.from(selections)
   if (selectedDocs.length == 1) {
     showDeleteDocModal.value = {
@@ -219,12 +217,6 @@ function bulkActions(selections, unselectAll) {
 }
 
 function reload(unselectAll) {
-  showDeleteDocModal.value = {
-    showLinkedDocsModal: false,
-    showDeleteModal: false,
-    docname: null,
-  }
-
   unselectAllAction.value?.()
   unselectAll?.()
   list.value?.reload()

frontend/src/components/ListViews/LinkedDocsListView.vue

@@ -26,14 +26,13 @@
         <ListRowItem
           :item="item"
           @click="listViewRef.toggleRow(row['reference_docname'])"
-          class="!w-full"
         >
           <template #default="{ label }">
             <div
               v-if="column.key === 'title'"
-              class="truncate text-base flex gap-2 w-full"
+              class="truncate text-base flex gap-2"
             >
-              <span class="max-w-[90%] truncate">
+              <span>
                 {{ label }}
               </span>
               <FeatherIcon
@@ -103,7 +102,6 @@ const listViewRef = ref(null)
 const viewLinkedDoc = (doc) => {
   let page = ''
   let id = ''
-  let openDesk = false
   switch (doc.reference_doctype) {
     case 'CRM Lead':
       page = 'leads'
@@ -125,11 +123,6 @@ const viewLinkedDoc = (doc) => {
       page = 'organizations'
       id = doc.reference_docname
       break
-    case 'CRM Notification':
-      page = 'crm-notification'
-      id = doc.reference_docname
-      openDesk = true
-      break
     case 'FCRM Note':
       page = 'notes'
       id = `view?open=${doc.reference_docname}`
@@ -137,11 +130,7 @@ const viewLinkedDoc = (doc) => {
     default:
       break
   }
-  let base = '/crm'
-  if (openDesk) {
-    base = '/app'
-  }
-  window.open(`${base}/${page}/${id}`)
+  window.open(`/crm/${page}/${id}`)
 }
 
 const getDoctypeName = (doctype) => {

frontend/src/components/Modals/AddressModal.vue

@@ -11,18 +11,19 @@
           <div class="flex items-center gap-1">
             <Button
               v-if="isManager() && !isMobileView"
-              :tooltip="__('Edit fields layout')"
               variant="ghost"
-              :icon="EditIcon"
               class="w-7"
               @click="openQuickEntryModal"
-            />
-            <Button
-              icon="x"
-              variant="ghost"
-              class="w-7"
-              @click="show = false"
-            />
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
+            </Button>
           </div>
         </div>
         <div v-if="tabs.data && _address.doc">

frontend/src/components/Modals/AssignmentModal.vue

@@ -1,8 +1,30 @@
 <template>
   <Dialog
     v-model="show"
-    :options="{ title: __('Assign To'), size: 'xl' }"
-    @close="() => (assignees = [...oldAssignees])"
+    :options="{
+      title: __('Assign To'),
+      size: 'xl',
+      actions: [
+        {
+          label: __('Cancel'),
+          variant: 'subtle',
+          onClick: () => {
+            assignees = [...oldAssignees]
+            show = false
+          },
+        },
+        {
+          label: __('Update'),
+          variant: 'solid',
+          onClick: () => updateAssignees(),
+        },
+      ],
+    }"
+    @close="
+      () => {
+        assignees = [...oldAssignees]
+      }
+    "
   >
     <template #body-content>
       <Link
@@ -11,43 +33,9 @@
         doctype="User"
         @change="(option) => addValue(option) && ($refs.input.value = '')"
         :placeholder="__('John Doe')"
-        :filters="{
-          name: ['in', users.data.crmUsers?.map((user) => user.name)],
-        }"
+        :filters="{ name: ['in', users.data.crmUsers?.map((user) => user.name)] }"
         :hideMe="true"
       >
-        <template #target="{ togglePopover }">
-          <div
-            class="w-full min-h-12 flex flex-wrap items-center gap-1.5 p-1.5 pb-5 rounded-lg bg-surface-gray-2 cursor-text"
-            @click.stop="togglePopover"
-          >
-            <Tooltip
-              :text="assignee.name"
-              v-for="assignee in assignees"
-              :key="assignee.name"
-              @click.stop
-            >
-              <div>
-                <div
-                  class="flex items-center text-sm text-ink-gray-6 border border-outline-gray-1 bg-surface-white rounded-full hover:bg-surface-white !p-0.5"
-                  @click.stop
-                >
-                  <UserAvatar :user="assignee.name" size="sm" />
-                  <div class="ml-1">{{ getUser(assignee.name).full_name }}</div>
-                  <Button
-                    variant="ghost"
-                    class="rounded-full !size-4 m-1"
-                    @click.stop="removeValue(assignee.name)"
-                  >
-                    <template #icon>
-                      <FeatherIcon name="x" class="h-3 w-3 text-ink-gray-6" />
-                    </template>
-                  </Button>
-                </div>
-              </div>
-            </Tooltip>
-          </div>
-        </template>
         <template #item-prefix="{ option }">
           <UserAvatar class="mr-2" :user="option.value" size="sm" />
         </template>
@@ -59,28 +47,30 @@
           </Tooltip>
         </template>
       </Link>
-    </template>
-    <template #actions>
-      <div class="flex justify-between items-center gap-2">
-        <div><ErrorMessage :message="__(error)" /></div>
-        <div class="flex items-center justify-end gap-2">
-          <Button
-            variant="subtle"
-            :label="__('Cancel')"
-            @click="
-              () => {
-                assignees = [...oldAssignees]
-                show = false
-              }
-            "
-          />
-          <Button
-            variant="solid"
-            :label="__('Update')"
-            @click="updateAssignees()"
-          />
-        </div>
+      <div class="mt-3 flex flex-wrap items-center gap-2">
+        <Tooltip
+          :text="assignee.name"
+          v-for="assignee in assignees"
+          :key="assignee.name"
+        >
+          <div>
+            <Button :label="getUser(assignee.name).full_name" theme="gray">
+              <template #prefix>
+                <UserAvatar :user="assignee.name" size="sm" />
+              </template>
+              <template #suffix>
+                <FeatherIcon
+                  v-if="assignee.name !== owner"
+                  class="h-3.5"
+                  name="x"
+                  @click.stop="removeValue(assignee.name)"
+                />
+              </template>
+            </Button>
+          </div>
+        </Tooltip>
       </div>
+      <ErrorMessage class="mt-2" v-if="error" :message="__(error)" />
     </template>
   </Dialog>
 </template>
@@ -142,7 +132,7 @@ const addValue = (value) => {
   }
 }
 
-async function updateAssignees() {
+function updateAssignees() {
   const removedAssignees = oldAssignees.value
     .filter(
       (assignee) => !assignees.value.find((a) => a.name === assignee.name),
@@ -156,7 +146,7 @@ async function updateAssignees() {
     .map((assignee) => assignee.name)
 
   if (removedAssignees.length) {
-    await call('crm.api.doc.remove_assignments', {
+    call('crm.api.doc.remove_assignments', {
       doctype: props.doctype,
       name: props.doc.name,
       assignees: JSON.stringify(removedAssignees),

frontend/src/components/Modals/CallLogDetailModal.vue

@@ -36,17 +36,18 @@
             <Button
               v-if="!isMobileView"
               variant="ghost"
-              :tooltip="__('Edit call log')"
-              :icon="EditIcon"
               class="w-7"
               @click="openCallLogModal"
-            />
-            <Button
-              icon="x"
-              variant="ghost"
-              class="w-7"
-              @click="show = false"
-            />
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
+            </Button>
           </div>
         </div>
         <div class="flex flex-col gap-3.5">

frontend/src/components/Modals/CallLogModal.vue

@@ -13,17 +13,18 @@
             <Button
               v-if="isManager() && !isMobileView"
               variant="ghost"
-              :tooltip="__('Edit fields layout')"
-              :icon="EditIcon"
               class="w-7"
               @click="openQuickEntryModal"
-            />
-            <Button
-              variant="ghost"
-              class="w-7"
-              @click="show = false"
-              icon="x"
-            />
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
+            </Button>
           </div>
         </div>
         <div v-if="tabs.data">
@@ -36,7 +37,7 @@
         </div>
       </div>
       <div class="px-4 pt-4 pb-7 sm:px-6">
-        <div class="flex justify-end gap-2">
+        <div class="space-y-2">
           <Button
             class="w-full"
             v-for="action in dialogOptions.actions"
@@ -60,7 +61,7 @@ import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
 import { getRandom } from '@/utils'
 import { capture } from '@/telemetry'
 import { useDocument } from '@/data/document'
-import { createResource, ErrorMessage, Badge } from 'frappe-ui'
+import { FeatherIcon, createResource, ErrorMessage, Badge } from 'frappe-ui'
 import { ref, nextTick, computed, onMounted } from 'vue'
 
 const props = defineProps({

frontend/src/components/Modals/ContactModal.vue

@@ -13,16 +13,17 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
-              :tooltip="__('Edit fields layout')"
-              :icon="EditIcon"
               @click="openQuickEntryModal"
-            />
-            <Button
-              variant="ghost"
-              class="w-7"
-              @click="show = false"
-              icon="x"
-            />
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
+            </Button>
           </div>
         </div>
         <FieldLayout
@@ -89,16 +90,12 @@ const { document: _contact, triggerOnBeforeCreate } = useDocument('Contact')
 
 async function createContact() {
   if (_contact.doc.email_id) {
-    _contact.doc.email_ids = [
-      { email_id: _contact.doc.email_id, is_primary: 1 },
-    ]
+    _contact.doc.email_ids = [{ email_id: _contact.doc.email_id, is_primary: 1 }]
     delete _contact.doc.email_id
   }
 
   if (_contact.doc.mobile_no) {
-    _contact.doc.phone_nos = [
-      { phone: _contact.doc.mobile_no, is_primary_mobile_no: 1 },
-    ]
+    _contact.doc.phone_nos = [{ phone: _contact.doc.mobile_no, is_primary_mobile_no: 1 }]
     delete _contact.doc.mobile_no
   }
 

frontend/src/components/Modals/ConvertToDealModal.vue

@@ -1,5 +1,17 @@
 <template>
-  <Dialog v-model="show" :options="{ size: 'xl' }">
+  <Dialog
+    v-model="show"
+    :options="{
+      size: 'xl',
+      actions: [
+        {
+          label: __('Convert'),
+          variant: 'solid',
+          onClick: convertToDeal,
+        },
+      ],
+    }"
+  >
     <template #body-header>
       <div class="mb-6 flex items-center justify-between">
         <div>
@@ -11,10 +23,12 @@
           <Button
             v-if="isManager() && !isMobileView"
             variant="ghost"
-            :tooltip="__('Edit deal\'s mandatory fields layout')"
-            :icon="EditIcon"
             @click="openQuickEntryModal"
-          />
+          >
+            <template #icon>
+              <EditIcon class="h-4 w-4" />
+            </template>
+          </Button>
           <Button icon="x" variant="ghost" @click="show = false" />
         </div>
       </div>
@@ -78,11 +92,6 @@
       />
       <ErrorMessage class="mt-4" :message="error" />
     </template>
-    <template #actions>
-      <div class="flex justify-end">
-        <Button :label="__('Convert')" variant="solid" @click="convertToDeal" />
-      </div>
-    </template>
   </Dialog>
 </template>
 <script setup>

frontend/src/components/Modals/CreateDocumentModal.vue

@@ -13,16 +13,17 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
-              :tooltip="__('Edit fields layout')"
-              :icon="EditIcon"
               @click="openQuickEntryModal"
-            />
-            <Button
-              variant="ghost"
-              class="w-7"
-              icon="x"
-              @click="show = false"
-            />
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
+            </Button>
           </div>
         </div>
         <div v-if="tabs.data">

frontend/src/components/Modals/DealModal.vue

@@ -13,16 +13,17 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
-              :tooltip="__('Edit fields layout')"
-              :icon="EditIcon"
               @click="openQuickEntryModal"
-            />
-            <Button
-              variant="ghost"
-              class="w-7"
-              icon="x"
-              @click="show = false"
-            />
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
+            </Button>
           </div>
         </div>
         <div>

frontend/src/components/Modals/LeadModal.vue

@@ -13,16 +13,17 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
-              :tooltip="__('Edit fields layout')"
-              :icon="EditIcon"
               @click="openQuickEntryModal"
-            />
-            <Button
-              variant="ghost"
-              class="w-7"
-              @click="show = false"
-              icon="x"
-            />
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
+            </Button>
           </div>
         </div>
         <div>

frontend/src/components/Modals/NoteModal.vue

@@ -1,60 +1,45 @@
 <template>
-  <Dialog v-model="show" :options="{ size: 'xl' }">
+  <Dialog v-model="show" :options="{
+    size: 'xl',
+    actions: [
+      {
+        label: editMode ? __('Update') : __('Create'),
+        variant: 'solid',
+        onClick: () => updateNote(),
+      },
+    ],
+  }">
     <template #body-title>
       <div class="flex items-center gap-3">
         <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
           {{ editMode ? __('Edit Note') : __('Create Note') }}
         </h3>
-        <Button
-          v-if="_note?.reference_docname"
-          size="sm"
-          :label="
-            _note.reference_doctype == 'CRM Deal'
-              ? __('Open Deal')
-              : __('Open Lead')
-          "
-          :iconRight="ArrowUpRightIcon"
-          @click="redirect()"
-        />
+        <Button v-if="_note?.reference_docname" size="sm" :label="_note.reference_doctype == 'CRM Deal'
+          ? __('Open Deal')
+          : __('Open Lead')
+          " @click="redirect()">
+          <template #suffix>
+            <ArrowUpRightIcon class="w-4 h-4" />
+          </template>
+        </Button>
       </div>
     </template>
     <template #body-content>
       <div class="flex flex-col gap-4">
         <div>
-          <FormControl
-            ref="title"
-            :label="__('Title')"
-            v-model="_note.title"
-            :placeholder="__('Call with John Doe')"
-            required
-          />
+          <FormControl ref="title" :label="__('Title')" v-model="_note.title" :placeholder="__('Call with John Doe')"
+            required />
         </div>
         <div>
           <div class="mb-1.5 text-xs text-ink-gray-5">{{ __('Content') }}</div>
-          <TextEditor
-            variant="outline"
-            ref="content"
+          <TextEditor variant="outline" ref="content"
             editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
-            :bubbleMenu="true"
-            :content="_note.content"
-            @change="(val) => (_note.content = val)"
-            :placeholder="
-              __('Took a call with John Doe and discussed the new project.')
-            "
-          />
+            :bubbleMenu="true" :content="_note.content" @change="(val) => (_note.content = val)" :placeholder="__('Took a call with John Doe and discussed the new project.')
+              " />
         </div>
         <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
       </div>
     </template>
-    <template #actions>
-      <div class="flex justify-end">
-        <Button
-          :label="editMode ? __('Update') : __('Create')"
-          variant="solid"
-          @click="updateNote"
-        />
-      </div>
-    </template>
   </Dialog>
 </template>
 
@@ -107,25 +92,21 @@ async function updateNote() {
       emit('after', d)
     }
   } else {
-    let d = await call(
-      'frappe.client.insert',
-      {
-        doc: {
-          doctype: 'FCRM Note',
-          title: _note.value.title,
-          content: _note.value.content,
-          reference_doctype: props.doctype,
-          reference_docname: props.doc || '',
-        },
+    let d = await call('frappe.client.insert', {
+      doc: {
+        doctype: 'FCRM Note',
+        title: _note.value.title,
+        content: _note.value.content,
+        reference_doctype: props.doctype,
+        reference_docname: props.doc || '',
       },
-      {
-        onError: (err) => {
-          if (err.error.exc_type == 'MandatoryError') {
-            error.value = 'Title is mandatory'
-          }
-        },
-      },
-    )
+    }, {
+      onError: (err) => {
+        if (err.error.exc_type == 'MandatoryError') {
+          error.value = "Title is mandatory"
+        }
+      }
+    })
     if (d.name) {
       updateOnboardingStep('create_first_note')
       capture('note_created')

frontend/src/components/Modals/OrganizationModal.vue

@@ -13,16 +13,17 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
-              :tooltip="__('Edit fields layout')"
-              :icon="EditIcon"
               @click="openQuickEntryModal"
-            />
-            <Button
-              variant="ghost"
-              class="w-7"
-              @click="show = false"
-              icon="x"
-            />
+            >
+              <template #icon>
+                <EditIcon />
+              </template>
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
+            </Button>
           </div>
         </div>
         <FieldLayout
@@ -108,7 +109,6 @@ async function createOrganization() {
       onError: (err) => {
         if (err.error.exc_type == 'ValidationError') {
           error.value = err.error?.messages?.[0]
-          loading.value = false
         }
       },
     },
@@ -175,5 +175,6 @@ function openAddressModal(_address) {
     doctype: 'Address',
     address: _address,
   }
+  nextTick(() => (show.value = false))
 }
 </script>

frontend/src/components/Modals/TaskModal.vue

@@ -1,5 +1,17 @@
 <template>
-  <Dialog v-model="show" :options="{ size: 'xl' }">
+  <Dialog
+    v-model="show"
+    :options="{
+      size: 'xl',
+      actions: [
+        {
+          label: editMode ? __('Update') : __('Create'),
+          variant: 'solid',
+          onClick: () => updateTask(),
+        },
+      ],
+    }"
+  >
     <template #body-title>
       <div class="flex items-center gap-3">
         <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
@@ -13,9 +25,12 @@
               ? __('Open Deal')
               : __('Open Lead')
           "
-          :iconRight="ArrowUpRightIcon"
           @click="redirect()"
-        />
+        >
+          <template #suffix>
+            <ArrowUpRightIcon class="w-4 h-4" />
+          </template>
+        </Button>
       </div>
     </template>
     <template #body-content>
@@ -47,7 +62,7 @@
         </div>
         <div class="flex flex-wrap items-center gap-2">
           <Dropdown :options="taskStatusOptions(updateTaskStatus)">
-            <Button :label="_task.status">
+            <Button :label="_task.status" class="justify-between w-full">
               <template #prefix>
                 <TaskStatusIcon :status="_task.status" />
               </template>
@@ -78,17 +93,15 @@
               </Tooltip>
             </template>
           </Link>
-          <div class="w-36">
-            <DateTimePicker
-              class="datepicker"
-              v-model="_task.due_date"
-              :placeholder="__('01/04/2024 11:30 PM')"
-              :formatter="(date) => getFormat(date, '', true, true)"
-              input-class="border-none"
-            />
-          </div>
+          <DateTimePicker
+            class="datepicker w-36"
+            v-model="_task.due_date"
+            :placeholder="__('01/04/2024 11:30 PM')"
+            :formatter="(date) => getFormat(date, '', true, true)"
+            input-class="border-none"
+          />
           <Dropdown :options="taskPriorityOptions(updateTaskPriority)">
-            <Button :label="_task.priority">
+            <Button :label="_task.priority" class="justify-between w-full">
               <template #prefix>
                 <TaskPriorityIcon :priority="_task.priority" />
               </template>
@@ -98,15 +111,6 @@
         <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
       </div>
     </template>
-    <template #actions>
-      <div class="flex justify-end">
-        <Button
-          :label="editMode ? __('Update') : __('Create')"
-          variant="solid"
-          @click="updateTask"
-        />
-      </div>
-    </template>
   </Dialog>
 </template>