chore: update POT file

fix: international call log issue

.mergify.yml

@@ -0,0 +1,45 @@
+pull_request_rules:
+    - name: Auto-close PRs on stable branch
+      conditions:
+          - and:
+                - and:
+                      - author!=shariquerik
+                      - author!=frappe-pr-bot
+                      - author!=mergify[bot]
+                - or:
+                      - base=main
+      actions:
+          close:
+          comment:
+              message: |
+                  @{{author}}, thanks for the contribution, but we do not accept pull requests on a stable branch. Please raise PR on develop branch.
+
+    - name: backport to develop
+      conditions:
+          - label="backport develop"
+      actions:
+          backport:
+              branches:
+                  - develop
+              assignees:
+                  - "{{ author }}"
+
+    - name: backport to main-hotfix
+      conditions:
+          - label="backport main-hotfix"
+      actions:
+          backport:
+              branches:
+                  - main-hotfix
+              assignees:
+                  - "{{ author }}"
+
+    - name: backport to main
+      conditions:
+          - label="backport main"
+      actions:
+          backport:
+              branches:
+                  - main
+              assignees:
+                  - "{{ author }}"

crm/api/__init__.py

@@ -1,9 +1,10 @@
-from bs4 import BeautifulSoup
 import frappe
-from frappe.translate import get_all_translations
-from frappe.utils import validate_email_address, split_emails, cstr
-from frappe.utils.telemetry import POSTHOG_HOST_FIELD, POSTHOG_PROJECT_FIELD
+from bs4 import BeautifulSoup
 from frappe.core.api.file import get_max_file_size
+from frappe.translate import get_all_translations
+from frappe.utils import cstr, split_emails, validate_email_address
+from frappe.utils.modules import get_modules_from_all_apps_for_user
+from frappe.utils.telemetry import POSTHOG_HOST_FIELD, POSTHOG_PROJECT_FIELD
 
 
 @frappe.whitelist(allow_guest=True)
@@ -63,6 +64,11 @@ def check_app_permission():
 	if frappe.session.user == "Administrator":
 		return True
 
+	allowed_modules = get_modules_from_all_apps_for_user()
+	allowed_modules = [x["module_name"] for x in allowed_modules]
+	if "FCRM" not in allowed_modules:
+		return False
+
 	roles = frappe.get_roles()
 	if any(
 		role in ["System Manager", "Sales User", "Sales Manager", "Sales Master Manager"] for role in roles
@@ -94,8 +100,13 @@ def accept_invitation(key: str | None = None):
 @frappe.whitelist()
 def invite_by_email(emails: str, role: str):
 	frappe.only_for("Sales Manager")
+
+	if role not in ["Sales Manager", "Sales User"]:
+		frappe.throw("Cannot invite for this role")
+
 	if not emails:
 		return
+
 	email_string = validate_email_address(emails, throw=False)
 	email_list = split_emails(email_string)
 	if not email_list:

crm/api/contact.py

@@ -23,22 +23,14 @@ def update_deals_email_mobile_no(doc):
 
 @frappe.whitelist()
 def get_contact(name):
-	Contact = frappe.qb.DocType("Contact")
+	contact = frappe.get_doc("Contact", name)
+	contact.check_permission("read")
 
-	query = frappe.qb.from_(Contact).select("*").where(Contact.name == name).limit(1)
+	contact = contact.as_dict()
 
-	contact = query.run(as_dict=True)
 	if not len(contact):
 		frappe.throw(_("Contact not found"), frappe.DoesNotExistError)
-	contact = contact.pop()
 
-	contact["doctype"] = "Contact"
-	contact["email_ids"] = frappe.get_all(
-		"Contact Email", filters={"parent": name}, fields=["name", "email_id", "is_primary"]
-	)
-	contact["phone_nos"] = frappe.get_all(
-		"Contact Phone", filters={"parent": name}, fields=["name", "phone", "is_primary_mobile_no"]
-	)
 	return contact
 
 

crm/api/doc.py

@@ -418,16 +418,23 @@ def get_data(
 				rows.append(field)
 
 		for kc in kanban_columns:
-			column_filters = {column_field: kc.get("name")}
+			# Start with base filters
+			column_filters = []
+
+			# Convert and add the main filters first
+			if filters:
+				base_filters = convert_filter_to_tuple(doctype, filters)
+				column_filters.extend(base_filters)
+
+			# Add the column-specific filter
+			if column_field and kc.get("name"):
+				column_filters.append([doctype, column_field, "=", kc.get("name")])
+
 			order = kc.get("order")
-			if (column_field in filters and filters.get(column_field) != kc.get("name")) or kc.get("delete"):
+			if kc.get("delete"):
 				column_data = []
 			else:
-				column_filters.update(filters.copy())
-				page_length = 20
-
-				if kc.get("page_length"):
-					page_length = kc.get("page_length")
+				page_length = kc.get("page_length", 20)
 
 				if order:
 					column_data = get_records_based_on_order(
@@ -437,26 +444,20 @@ def get_data(
 					column_data = frappe.get_list(
 						doctype,
 						fields=rows,
-						filters=convert_filter_to_tuple(doctype, column_filters),
+						filters=column_filters,
 						order_by=order_by,
 						page_length=page_length,
 					)
 
-				new_filters = filters.copy()
-				new_filters.update({column_field: kc.get("name")})
-
 				all_count = frappe.get_list(
 					doctype,
-					filters=convert_filter_to_tuple(doctype, new_filters),
+					filters=column_filters,
 					fields="count(*) as total_count",
 				)[0].total_count
 
 				kc["all_count"] = all_count
 				kc["count"] = len(column_data)
 
-				for d in column_data:
-					getCounts(d, doctype)
-
 			if order:
 				column_data = sorted(
 					column_data,

crm/api/settings.py

@@ -0,0 +1,99 @@
+import frappe
+
+
+@frappe.whitelist()
+def create_email_account(data):
+	service = data.get("service")
+	service_config = email_service_config.get(service)
+	if not service_config:
+		return "Service not supported"
+
+	try:
+		email_doc = frappe.get_doc(
+			{
+				"doctype": "Email Account",
+				"email_id": data.get("email_id"),
+				"email_account_name": data.get("email_account_name"),
+				"service": service,
+				"enable_incoming": data.get("enable_incoming"),
+				"enable_outgoing": data.get("enable_outgoing"),
+				"default_incoming": data.get("default_incoming"),
+				"default_outgoing": data.get("default_outgoing"),
+				"email_sync_option": "ALL",
+				"initial_sync_count": 100,
+				"create_contact": 1,
+				"track_email_status": 1,
+				"use_tls": 1,
+				"use_imap": 1,
+				"smtp_port": 587,
+				**service_config,
+			}
+		)
+		if service == "Frappe Mail":
+			email_doc.api_key = data.get("api_key")
+			email_doc.api_secret = data.get("api_secret")
+			email_doc.frappe_mail_site = data.get("frappe_mail_site")
+			email_doc.append_to = "CRM Lead"
+		else:
+			email_doc.append("imap_folder", {"append_to": "CRM Lead", "folder_name": "INBOX"})
+			email_doc.password = data.get("password")
+			# validate whether the credentials are correct
+			email_doc.get_incoming_server()
+
+		# if correct credentials, save the email account
+		email_doc.save()
+	except Exception as e:
+		frappe.throw(str(e))
+
+
+email_service_config = {
+	"Frappe Mail": {
+		"domain": None,
+		"password": None,
+		"awaiting_password": 0,
+		"ascii_encode_password": 0,
+		"login_id_is_different": 0,
+		"login_id": None,
+		"use_imap": 0,
+		"use_ssl": 0,
+		"validate_ssl_certificate": 0,
+		"use_starttls": 0,
+		"email_server": None,
+		"incoming_port": 0,
+		"always_use_account_email_id_as_sender": 1,
+		"use_tls": 0,
+		"use_ssl_for_outgoing": 0,
+		"smtp_server": None,
+		"smtp_port": None,
+		"no_smtp_authentication": 0,
+	},
+	"GMail": {
+		"email_server": "imap.gmail.com",
+		"use_ssl": 1,
+		"smtp_server": "smtp.gmail.com",
+	},
+	"Outlook": {
+		"email_server": "imap-mail.outlook.com",
+		"use_ssl": 1,
+		"smtp_server": "smtp-mail.outlook.com",
+	},
+	"Sendgrid": {
+		"smtp_server": "smtp.sendgrid.net",
+		"smtp_port": 587,
+	},
+	"SparkPost": {
+		"smtp_server": "smtp.sparkpostmail.com",
+	},
+	"Yahoo": {
+		"email_server": "imap.mail.yahoo.com",
+		"use_ssl": 1,
+		"smtp_server": "smtp.mail.yahoo.com",
+		"smtp_port": 587,
+	},
+	"Yandex": {
+		"email_server": "imap.yandex.com",
+		"use_ssl": 1,
+		"smtp_server": "smtp.yandex.com",
+		"smtp_port": 587,
+	},
+}

crm/fcrm/doctype/crm_call_log/crm_call_log.json

@@ -41,13 +41,15 @@
    "fieldname": "from",
    "fieldtype": "Data",
    "in_list_view": 1,
-   "label": "From"
+   "label": "From",
+   "reqd": 1
   },
   {
    "fieldname": "status",
    "fieldtype": "Select",
    "label": "Status",
-   "options": "Initiated\nRinging\nIn Progress\nCompleted\nFailed\nBusy\nNo Answer\nQueued\nCanceled"
+   "options": "Initiated\nRinging\nIn Progress\nCompleted\nFailed\nBusy\nNo Answer\nQueued\nCanceled",
+   "reqd": 1
   },
   {
    "fieldname": "start_time",
@@ -69,13 +71,15 @@
    "in_list_view": 1,
    "in_standard_filter": 1,
    "label": "Type",
-   "options": "Incoming\nOutgoing"
+   "options": "Incoming\nOutgoing",
+   "reqd": 1
   },
   {
    "fieldname": "to",
    "fieldtype": "Data",
    "in_list_view": 1,
-   "label": "To"
+   "label": "To",
+   "reqd": 1
   },
   {
    "description": "Call duration in seconds",
@@ -153,7 +157,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-01-22 17:57:59.289548",
+ "modified": "2025-04-01 16:01:54.479309",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Call Log",

crm/fcrm/doctype/crm_deal/api.py

@@ -6,7 +6,10 @@ from crm.fcrm.doctype.crm_form_script.crm_form_script import get_form_script
 
 @frappe.whitelist()
 def get_deal(name):
-	deal = frappe.get_doc("CRM Deal", name).as_dict()
+	deal = frappe.get_doc("CRM Deal", name)
+	deal.check_permission("read")
+
+	deal = deal.as_dict()
 
 	deal["fields_meta"] = get_fields_meta("CRM Deal")
 	deal["_form_script"] = get_form_script("CRM Deal")

crm/fcrm/doctype/crm_lead/api.py

@@ -6,7 +6,10 @@ from crm.fcrm.doctype.crm_form_script.crm_form_script import get_form_script
 
 @frappe.whitelist()
 def get_lead(name):
-	lead = frappe.get_doc("CRM Lead", name).as_dict()
+	lead = frappe.get_doc("CRM Lead", name)
+	lead.check_permission("read")
+
+	lead = lead.as_dict()
 
 	lead["fields_meta"] = get_fields_meta("CRM Lead")
 	lead["_form_script"] = get_form_script("CRM Lead")

crm/fcrm/doctype/fcrm_note/fcrm_note.json

@@ -19,7 +19,8 @@
    "fieldtype": "Data",
    "in_list_view": 1,
    "in_standard_filter": 1,
-   "label": "Title"
+   "label": "Title",
+   "reqd": 1
   },
   {
    "fieldname": "content",
@@ -49,7 +50,7 @@
    "link_fieldname": "note"
   }
  ],
- "modified": "2024-01-19 21:56:30.123334",
+ "modified": "2025-04-01 15:30:14.742001",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "FCRM Note",

crm/integrations/api.py

@@ -110,12 +110,12 @@ def get_contact_by_phone_number(phone_number):
 	number = parse_phone_number(phone_number)
 
 	if number.get("is_valid"):
-		return get_contact(number.get("national_number"))
+		return get_contact(number.get("national_number"), number.get("country"))
 	else:
-		return get_contact(phone_number, exact_match=True)
+		return get_contact(phone_number, number.get("country"), exact_match=True)
 
 
-def get_contact(phone_number, exact_match=False):
+def get_contact(phone_number, country="IN", exact_match=False):
 	if not phone_number:
 		return {"mobile_no": phone_number}
 
@@ -149,11 +149,11 @@ def get_contact(phone_number, exact_match=False):
 				deal = frappe.db.get_value(
 					"CRM Contacts", {"contact": contact.name, "is_primary": 1}, "parent"
 				)
-				if are_same_phone_number(contact.mobile_no, phone_number, validate=not exact_match):
+				if are_same_phone_number(contact.mobile_no, phone_number, country, validate=not exact_match):
 					contact["deal"] = deal
 					return contact
 		# Else, return the first contact
-		if are_same_phone_number(contacts[0].mobile_no, phone_number, validate=not exact_match):
+		if are_same_phone_number(contacts[0].mobile_no, phone_number, country, validate=not exact_match):
 			return contacts[0]
 
 	# Else, Check if the number is associated with a lead
@@ -173,7 +173,7 @@ def get_contact(phone_number, exact_match=False):
 
 	if len(leads):
 		for lead in leads:
-			if are_same_phone_number(lead.mobile_no, phone_number, validate=not exact_match):
+			if are_same_phone_number(lead.mobile_no, phone_number, country, validate=not exact_match):
 				lead["lead"] = lead.name
 				lead["full_name"] = lead.lead_name
 				return lead

frappe-ui

@@ -1 +1 @@
-Subproject commit 3423aa5b5c38d3a1b143ae8ab08cbde7360f9a7c
+Subproject commit 29307e4fffaacdbb3d9c5d95c5270b2f245a5607

frontend/components.d.ts

@@ -78,16 +78,23 @@ declare module 'vue' {
     EditIcon: typeof import('./src/components/Icons/EditIcon.vue')['default']
     EditValueModal: typeof import('./src/components/Modals/EditValueModal.vue')['default']
     Email2Icon: typeof import('./src/components/Icons/Email2Icon.vue')['default']
+    EmailAccountCard: typeof import('./src/components/Settings/EmailAccountCard.vue')['default']
+    EmailAccountList: typeof import('./src/components/Settings/EmailAccountList.vue')['default']
+    EmailAdd: typeof import('./src/components/Settings/EmailAdd.vue')['default']
     EmailArea: typeof import('./src/components/Activities/EmailArea.vue')['default']
     EmailAtIcon: typeof import('./src/components/Icons/EmailAtIcon.vue')['default']
+    EmailConfig: typeof import('./src/components/Settings/EmailConfig.vue')['default']
     EmailContent: typeof import('./src/components/Activities/EmailContent.vue')['default']
+    EmailEdit: typeof import('./src/components/Settings/EmailEdit.vue')['default']
     EmailEditor: typeof import('./src/components/EmailEditor.vue')['default']
     EmailIcon: typeof import('./src/components/Icons/EmailIcon.vue')['default']
+    EmailProviderIcon: typeof import('./src/components/Settings/EmailProviderIcon.vue')['default']
     EmailTemplateModal: typeof import('./src/components/Modals/EmailTemplateModal.vue')['default']
     EmailTemplateSelectorModal: typeof import('./src/components/Modals/EmailTemplateSelectorModal.vue')['default']
     EmailTemplatesListView: typeof import('./src/components/ListViews/EmailTemplatesListView.vue')['default']
     ERPNextIcon: typeof import('./src/components/Icons/ERPNextIcon.vue')['default']
     ERPNextSettings: typeof import('./src/components/Settings/ERPNextSettings.vue')['default']
+    ErrorPage: typeof import('./src/components/ErrorPage.vue')['default']
     ExotelCallUI: typeof import('./src/components/Telephony/ExotelCallUI.vue')['default']
     ExportIcon: typeof import('./src/components/Icons/ExportIcon.vue')['default']
     ExternalLinkIcon: typeof import('./src/components/Icons/ExternalLinkIcon.vue')['default']
@@ -140,6 +147,7 @@ declare module 'vue' {
     ListIcon: typeof import('./src/components/Icons/ListIcon.vue')['default']
     ListRows: typeof import('./src/components/ListViews/ListRows.vue')['default']
     LoadingIndicator: typeof import('./src/components/Icons/LoadingIndicator.vue')['default']
+    LucidePlus: typeof import('~icons/lucide/plus')['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']
@@ -149,6 +157,7 @@ declare module 'vue' {
     MobileLayout: typeof import('./src/components/Layouts/MobileLayout.vue')['default']
     MobileSidebar: typeof import('./src/components/Mobile/MobileSidebar.vue')['default']
     MoneyIcon: typeof import('./src/components/Icons/MoneyIcon.vue')['default']
+    MultiActionButton: typeof import('./src/components/MultiActionButton.vue')['default']
     MultipleAvatar: typeof import('./src/components/MultipleAvatar.vue')['default']
     MultiSelectEmailInput: typeof import('./src/components/Controls/MultiSelectEmailInput.vue')['default']
     MuteIcon: typeof import('./src/components/Icons/MuteIcon.vue')['default']

frontend/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@twilio/voice-sdk": "^2.10.2",
     "@vueuse/integrations": "^10.3.0",
-    "frappe-ui": "^0.1.121",
+    "frappe-ui": "^0.1.123",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",

frontend/src/components/Activities/Activities.vue

@@ -373,11 +373,7 @@
     >
       <component :is="emptyTextIcon" class="h-10 w-10" />
       <span>{{ __(emptyText) }}</span>
-      <Button
-        v-if="title == 'Calls'"
-        :label="__('Make a Call')"
-        @click="makeCall(doc.data.mobile_no)"
-      />
+      <MultiActionButton v-if="title == 'Calls'" :options="callActions" />
       <Button
         v-else-if="title == 'Notes'"
         :label="__('Create Note')"
@@ -470,6 +466,7 @@ import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import WhatsAppArea from '@/components/Activities/WhatsAppArea.vue'
 import WhatsAppBox from '@/components/Activities/WhatsAppBox.vue'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
+import MultiActionButton from '@/components/MultiActionButton.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DotIcon from '@/components/Icons/DotIcon.vue'
@@ -487,7 +484,7 @@ import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
 import { timeAgo, formatDate, startCase } from '@/utils'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
-import { whatsappEnabled } from '@/composables/settings'
+import { whatsappEnabled, callEnabled } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { Button, Tooltip, createResource } from 'frappe-ui'
 import { useElementVisibility } from '@vueuse/core'
@@ -785,5 +782,23 @@ function scroll(hash) {
   }, 500)
 }
 
+const callActions = computed(() => {
+  let actions = [
+    {
+      label: __('Create Call Log'),
+      onClick: () => modalRef.value.createCallLog(),
+    },
+    {
+      label: __('Make a Call'),
+      onClick: () => makeCall(doc.data.mobile_no),
+      condition: () => callEnabled.value,
+    },
+  ]
+
+  return actions.filter((action) =>
+    action.condition ? action.condition() : true,
+  )
+})
+
 defineExpose({ emailBox, all_activities })
 </script>

frontend/src/components/Activities/ActivityHeader.vue

@@ -26,16 +26,11 @@
       </template>
       <span>{{ __('New Comment') }}</span>
     </Button>
-    <Button
+    <MultiActionButton
       v-else-if="title == 'Calls'"
       variant="solid"
-      @click="makeCall(doc.data.mobile_no)"
-    >
-      <template #prefix>
-        <PhoneIcon class="h-4 w-4" />
-      </template>
-      <span>{{ __('Make a Call') }}</span>
-    </Button>
+      :options="callActions"
+    />
     <Button
       v-else-if="title == 'Notes'"
       variant="solid"
@@ -97,6 +92,7 @@
   </div>
 </template>
 <script setup>
+import MultiActionButton from '@/components/MultiActionButton.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
@@ -136,6 +132,11 @@ const defaultActions = computed(() => {
       label: __('New Comment'),
       onClick: () => (props.emailBox.showComment = true),
     },
+    {
+      icon: h(PhoneIcon, { class: 'h-4 w-4' }),
+      label: __('Create Call Log'),
+      onClick: () => props.modalRef.createCallLog(),
+    },
     {
       icon: h(PhoneIcon, { class: 'h-4 w-4' }),
       label: __('Make a Call'),
@@ -172,4 +173,24 @@ const defaultActions = computed(() => {
 function getTabIndex(name) {
   return props.tabs.findIndex((tab) => tab.name === name)
 }
+
+const callActions = computed(() => {
+  let actions = [
+    {
+      label: __('Create Call Log'),
+      icon: 'plus',
+      onClick: () => props.modalRef.createCallLog(),
+    },
+    {
+      label: __('Make a Call'),
+      icon: h(PhoneIcon, { class: 'h-4 w-4' }),
+      onClick: () => makeCall(doc.data.mobile_no),
+      condition: () => callEnabled.value,
+    },
+  ]
+
+  return actions.filter((action) =>
+    action.condition ? action.condition() : true,
+  )
+})
 </script>

frontend/src/components/Activities/AllModals.vue

@@ -15,10 +15,16 @@
     :doc="doc.data?.name"
     @after="redirect('notes')"
   />
+  <CallLogModal
+    v-model="showCallLogModal"
+    v-model:callLog="callLog"
+    :options="{ afterInsert: () => activities.reload() }"
+  />
 </template>
 <script setup>
 import TaskModal from '@/components/Modals/TaskModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
+import CallLogModal from '@/components/Modals/CallLogModal.vue'
 import { call } from 'frappe-ui'
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -77,6 +83,22 @@ function showNote(n) {
   showNoteModal.value = true
 }
 
+// Call Logs
+const showCallLogModal = ref(false)
+const callLog = ref({})
+
+function createCallLog() {
+  let doctype = props.doctype
+  let docname = props.doc.data?.name
+  callLog.value = {
+    data: {
+      reference_doctype: doctype,
+      reference_docname: docname,
+    },
+  }
+  showCallLogModal.value = true
+}
+
 // common
 const route = useRoute()
 const router = useRouter()
@@ -95,5 +117,6 @@ defineExpose({
   deleteTask,
   updateTaskStatus,
   showNote,
+  createCallLog,
 })
 </script>

frontend/src/components/Activities/DataFields.vue

@@ -64,7 +64,7 @@ import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
 import { createToast } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -114,4 +114,20 @@ const tabs = createResource({
 function saveChanges() {
   data.save.submit()
 }
+
+watch(
+  () => data.doc,
+  (newValue, oldValue) => {
+    if (!oldValue) return
+    if (newValue && oldValue) {
+      const isDirty =
+        JSON.stringify(newValue) !== JSON.stringify(data.originalDoc)
+      data.isDirty = isDirty
+      if (isDirty) {
+        data.save.loading = false
+      }
+    }
+  },
+  { deep: true },
+)
 </script>

frontend/src/components/Controls/Grid.vue

@@ -100,10 +100,16 @@
                     :disabled="true"
                   />
                   <Link
-                    v-else-if="field.fieldtype === 'Link'"
+                    v-else-if="
+                      ['Link', 'Dynamic Link'].includes(field.fieldtype)
+                    "
                     class="text-sm text-ink-gray-8"
                     v-model="row[field.fieldname]"
-                    :doctype="field.options"
+                    :doctype="
+                      field.fieldtype == 'Link'
+                        ? field.options
+                        : row[field.options]
+                    "
                     :filters="field.filters"
                   />
                   <Link

frontend/src/components/Controls/Link.vue

@@ -159,6 +159,7 @@ const options = createResource({
 })
 
 function reload(val) {
+  if (!props.doctype) return
   if (
     options.data?.length &&
     val === options.params?.txt &&

frontend/src/components/ErrorPage.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="grid h-full place-items-center px-4 py-20 text-center text-lg text-ink-gray-5"
+  >
+    <div class="flex flex-col justify-between items-center gap-3">
+      <FeatherIcon name="x-octagon" class="h-12 w-12 text-ink-red-3" />
+      <div class="text-2xl font-semibold">{{ errorTitle }}</div>
+      <div v-html="errorMessage" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  errorTitle: {
+    type: String,
+    required: true,
+  },
+  errorMessage: {
+    type: String,
+    required: true,
+  },
+})
+</script>

frontend/src/components/FieldLayout/Field.vue

@@ -59,11 +59,16 @@
         <span class="text-ink-red-3" v-if="field.mandatory">*</span>
       </label>
     </div>
-    <div class="flex gap-1" v-else-if="field.fieldtype === 'Link'">
+    <div
+      class="flex gap-1"
+      v-else-if="['Link', 'Dynamic Link'].includes(field.fieldtype)"
+    >
       <Link
         class="form-control flex-1 truncate"
         :value="data[field.fieldname]"
-        :doctype="field.options"
+        :doctype="
+          field.fieldtype == 'Link' ? field.options : data[field.options]
+        "
         :filters="field.filters"
         @change="(v) => (data[field.fieldname] = v)"
         :placeholder="getPlaceholder(field)"

frontend/src/components/ListViews/CallLogsListView.vue

@@ -10,6 +10,7 @@
     }"
     row-key="name"
     v-bind="$attrs"
+    @update:selections="(selections) => emit('selectionsChanged', selections)"
   >
     <ListHeader
       class="sm:mx-5 mx-3"
@@ -205,6 +206,7 @@ const emit = defineEmits([
   'applyFilter',
   'applyLikeFilter',
   'likeDoc',
+  'selectionsChanged',
 ])
 
 const pageLengthCount = defineModel()

frontend/src/components/ListViews/ContactsListView.vue

@@ -14,6 +14,7 @@
       resizeColumn: options.resizeColumn,
     }"
     row-key="name"
+    @update:selections="(selections) => emit('selectionsChanged', selections)"
   >
     <ListHeader
       class="mx-3 sm:mx-5"
@@ -201,6 +202,7 @@ const emit = defineEmits([
   'applyFilter',
   'applyLikeFilter',
   'likeDoc',
+  'selectionsChanged',
 ])
 
 const route = useRoute()

frontend/src/components/ListViews/DealsListView.vue

@@ -14,6 +14,7 @@
       resizeColumn: options.resizeColumn,
     }"
     row-key="name"
+    @update:selections="(selections) => emit('selectionsChanged', selections)"
   >
     <ListHeader
       class="sm:mx-5 mx-3"
@@ -245,6 +246,7 @@ const emit = defineEmits([
   'applyFilter',
   'applyLikeFilter',
   'likeDoc',
+  'selectionsChanged',
 ])
 
 const route = useRoute()

frontend/src/components/ListViews/EmailTemplatesListView.vue

@@ -9,6 +9,7 @@
       resizeColumn: options.resizeColumn,
     }"
     row-key="name"
+    @update:selections="(selections) => emit('selectionsChanged', selections)"
   >
     <ListHeader
       class="sm:mx-5 mx-3"
@@ -191,6 +192,7 @@ const emit = defineEmits([
   'applyFilter',
   'applyLikeFilter',
   'likeDoc',
+  'selectionsChanged',
 ])
 
 const pageLengthCount = defineModel()

frontend/src/components/ListViews/LeadsListView.vue

@@ -14,6 +14,7 @@
       resizeColumn: options.resizeColumn,
     }"
     row-key="name"
+    @update:selections="(selections) => emit('selectionsChanged', selections)"
   >
     <ListHeader
       class="sm:mx-5 mx-3"
@@ -250,7 +251,6 @@ const props = defineProps({
     }),
   },
 })
-
 const emit = defineEmits([
   'loadMore',
   'updatePageCount',
@@ -258,6 +258,7 @@ const emit = defineEmits([
   'applyFilter',
   'applyLikeFilter',
   'likeDoc',
+  'selectionsChanged',
 ])
 
 const route = useRoute()

frontend/src/components/ListViews/OrganizationsListView.vue

@@ -13,6 +13,7 @@
       resizeColumn: options.resizeColumn,
     }"
     row-key="name"
+    @update:selections="(selections) => emit('selectionsChanged', selections)"
   >
     <ListHeader
       class="sm:mx-5 mx-3"
@@ -186,6 +187,7 @@ const emit = defineEmits([
   'applyFilter',
   'applyLikeFilter',
   'likeDoc',
+  'selectionsChanged',
 ])
 
 const route = useRoute()

frontend/src/components/ListViews/TasksListView.vue

@@ -9,6 +9,7 @@
       resizeColumn: options.resizeColumn,
     }"
     row-key="name"
+    @update:selections="(selections) => emit('selectionsChanged', selections)"
   >
     <ListHeader
       class="mx-3 sm:mx-5"
@@ -207,6 +208,7 @@ const emit = defineEmits([
   'applyFilter',
   'applyLikeFilter',
   'likeDoc',
+  'selectionsChanged',
 ])
 
 const pageLengthCount = defineModel()

frontend/src/components/Modals/CallLogModal.vue

@@ -1,55 +1,36 @@
 <template>
   <Dialog v-model="show" :options="dialogOptions">
     <template #body>
-      <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
-        <div class="mb-5 flex items-center justify-between">
+      <div class="px-4 pt-5 pb-6 bg-surface-modal sm:px-6">
+        <div class="flex items-center justify-between mb-5">
           <div>
             <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
           </div>
           <div class="flex items-center gap-1">
-            <Button
-              v-if="isManager() && !isMobileView"
-              variant="ghost"
-              class="w-7"
-              @click="openQuickEntryModal"
-            >
-              <EditIcon class="h-4 w-4" />
+            <Button v-if="isManager() && !isMobileView" variant="ghost" class="w-7" @click="openQuickEntryModal">
+              <EditIcon class="w-4 h-4" />
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <FeatherIcon name="x" class="w-4 h-4" />
             </Button>
           </div>
         </div>
         <div v-if="tabs.data">
-          <FieldLayout
-            :tabs="tabs.data"
-            :data="_callLog"
-            doctype="CRM Call Log"
-          />
-          <ErrorMessage class="mt-2" :message="error" />
+          <FieldLayout :tabs="tabs.data" :data="_callLog" doctype="CRM Call Log" />
+          <ErrorMessage class="mt-8" :message="error" />
         </div>
       </div>
-      <div class="px-4 pb-7 pt-4 sm:px-6">
+      <div class="px-4 pt-4 pb-7 sm:px-6">
         <div class="space-y-2">
-          <Button
-            class="w-full"
-            v-for="action in dialogOptions.actions"
-            :key="action.label"
-            v-bind="action"
-            :label="__(action.label)"
-            :loading="loading"
-          />
+          <Button class="w-full" v-for="action in dialogOptions.actions" :key="action.label" v-bind="action"
+            :label="__(action.label)" :loading="loading" />
         </div>
       </div>
     </template>
   </Dialog>
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Call Log"
-  />
+  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" doctype="CRM Call Log" />
 </template>
 
 <script setup>
@@ -67,7 +48,7 @@ const props = defineProps({
   options: {
     type: Object,
     default: {
-      afterInsert: () => {},
+      afterInsert: () => { },
     },
   },
 })
@@ -175,6 +156,13 @@ const createCallLog = createResource({
   },
   onError(err) {
     loading.value = false
+    if (err.exc_type == 'MandatoryError') {
+      const errorMessage = err.messages
+        .map(msg => msg.split('Log:')[1].trim())
+        .join(', ')
+      error.value = `These fields are required: ${errorMessage}`
+      return
+    }
     error.value = err
   },
 })

frontend/src/components/Modals/NoteModal.vue

@@ -1,34 +1,25 @@
 <template>
-  <Dialog
-    v-model="show"
-    :options="{
-      size: 'xl',
-      actions: [
-        {
-          label: editMode ? __('Update') : __('Create'),
-          variant: 'solid',
-          onClick: () => updateNote(),
-        },
-      ],
-    }"
-  >
+  <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')
-          "
-          @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="h-4 w-4" />
+            <ArrowUpRightIcon class="w-4 h-4" />
           </template>
         </Button>
       </div>
@@ -36,27 +27,17 @@
     <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')"
-          />
+          <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>
   </Dialog>
@@ -94,17 +75,12 @@ const router = useRouter()
 
 const { updateOnboardingStep } = useOnboarding('frappecrm')
 
+const error = ref(null)
 const title = ref(null)
 const editMode = ref(false)
 let _note = ref({})
 
 async function updateNote() {
-  if (
-    props.note.title === _note.value.title &&
-    props.note.content === _note.value.content
-  )
-    return
-
   if (_note.value.name) {
     let d = await call('frappe.client.set_value', {
       doctype: 'FCRM Note',
@@ -124,6 +100,12 @@ async function updateNote() {
         reference_doctype: props.doctype,
         reference_docname: props.doc || '',
       },
+    }, {
+      onError: (err) => {
+        if (err.error.exc_type == 'MandatoryError') {
+          error.value = "Title is mandatory"
+        }
+      }
     })
     if (d.name) {
       updateOnboardingStep('create_first_note')

frontend/src/components/Modals/OrganizationModal.vue

@@ -1,43 +1,28 @@
 <template>
   <Dialog v-model="show" :options="{ size: 'xl' }">
     <template #body>
-      <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
-        <div class="mb-5 flex items-center justify-between">
+      <div class="px-4 pt-5 pb-6 bg-surface-modal sm:px-6">
+        <div class="flex items-center justify-between mb-5">
           <div>
             <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __('New Organization') }}
             </h3>
           </div>
           <div class="flex items-center gap-1">
-            <Button
-              v-if="isManager() && !isMobileView"
-              variant="ghost"
-              class="w-7"
-              @click="openQuickEntryModal"
-            >
-              <EditIcon class="h-4 w-4" />
+            <Button v-if="isManager() && !isMobileView" variant="ghost" class="w-7" @click="openQuickEntryModal">
+              <EditIcon class="w-4 h-4" />
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <FeatherIcon name="x" class="w-4 h-4" />
             </Button>
           </div>
         </div>
-        <FieldLayout
-          v-if="tabs.data?.length"
-          :tabs="tabs.data"
-          :data="_organization"
-          doctype="CRM Organization"
-        />
+        <FieldLayout v-if="tabs.data?.length" :tabs="tabs.data" :data="_organization" doctype="CRM Organization" />
+        <ErrorMessage class="mt-8" v-if="error" :message="__(error)" />
       </div>
-      <div class="px-4 pb-7 pt-4 sm:px-6">
+      <div class="px-4 pt-4 pb-7 sm:px-6">
         <div class="space-y-2">
-          <Button
-            class="w-full"
-            variant="solid"
-            :label="__('Create')"
-            :loading="loading"
-            @click="createOrganization"
-          />
+          <Button class="w-full" variant="solid" :label="__('Create')" :loading="loading" @click="createOrganization" />
         </div>
       </div>
     </template>
@@ -59,7 +44,7 @@ const props = defineProps({
     type: Object,
     default: {
       redirect: true,
-      afterInsert: () => {},
+      afterInsert: () => { },
     },
   },
 })
@@ -84,6 +69,7 @@ let _organization = ref({
 })
 
 let doc = ref({})
+const error = ref(null)
 
 async function createOrganization() {
   const doc = await call('frappe.client.insert', {
@@ -91,6 +77,12 @@ async function createOrganization() {
       doctype: 'CRM Organization',
       ..._organization.value,
     },
+  }, {
+    onError: (err) => {
+      if (err.error.exc_type == 'ValidationError') {
+        error.value = err.error?.messages?.[0]
+      }
+    }
   })
   loading.value = false
   if (doc.name) {

frontend/src/components/Modals/TaskModal.vue

@@ -1,34 +1,25 @@
 <template>
-  <Dialog
-    v-model="show"
-    :options="{
-      size: 'xl',
-      actions: [
-        {
-          label: editMode ? __('Update') : __('Create'),
-          variant: 'solid',
-          onClick: () => updateTask(),
-        },
-      ],
-    }"
-  >
+  <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">
           {{ editMode ? __('Edit Task') : __('Create Task') }}
         </h3>
-        <Button
-          v-if="task?.reference_docname"
-          size="sm"
-          :label="
-            task.reference_doctype == 'CRM Deal'
-              ? __('Open Deal')
-              : __('Open Lead')
-          "
-          @click="redirect()"
-        >
+        <Button v-if="task?.reference_docname" size="sm" :label="task.reference_doctype == 'CRM Deal'
+          ? __('Open Deal')
+          : __('Open Lead')
+          " @click="redirect()">
           <template #suffix>
-            <ArrowUpRightIcon class="h-4 w-4" />
+            <ArrowUpRightIcon class="w-4 h-4" />
           </template>
         </Button>
       </div>
@@ -36,74 +27,53 @@
     <template #body-content>
       <div class="flex flex-col gap-4">
         <div>
-          <FormControl
-            ref="title"
-            :label="__('Title')"
-            v-model="_task.title"
-            :placeholder="__('Call with John Doe')"
-          />
+          <FormControl ref="title" :label="__('Title')" v-model="_task.title" :placeholder="__('Call with John Doe')"
+            required />
         </div>
         <div>
           <div class="mb-1.5 text-xs text-ink-gray-5">
             {{ __('Description') }}
           </div>
-          <TextEditor
-            variant="outline"
-            ref="description"
+          <TextEditor variant="outline" ref="description"
             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="_task.description"
-            @change="(val) => (_task.description = val)"
-            :placeholder="
-              __('Took a call with John Doe and discussed the new project.')
-            "
-          />
+            :bubbleMenu="true" :content="_task.description" @change="(val) => (_task.description = val)" :placeholder="__('Took a call with John Doe and discussed the new project.')
+              " />
         </div>
         <div class="flex flex-wrap items-center gap-2">
           <Dropdown :options="taskStatusOptions(updateTaskStatus)">
-            <Button :label="_task.status" class="w-full justify-between">
+            <Button :label="_task.status" class="justify-between w-full">
               <template #prefix>
                 <TaskStatusIcon :status="_task.status" />
               </template>
             </Button>
           </Dropdown>
-          <Link
-            class="form-control"
-            :value="getUser(_task.assigned_to).full_name"
-            doctype="User"
-            @change="(option) => (_task.assigned_to = option)"
-            :placeholder="__('John Doe')"
-            :hideMe="true"
-          >
-            <template #prefix>
-              <UserAvatar class="mr-2 !h-4 !w-4" :user="_task.assigned_to" />
-            </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 class="form-control" :value="getUser(_task.assigned_to).full_name" doctype="User"
+            @change="(option) => (_task.assigned_to = option)" :placeholder="__('John Doe')" :hideMe="true">
+          <template #prefix>
+            <UserAvatar class="mr-2 !h-4 !w-4" :user="_task.assigned_to" />
+          </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>
-          <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"
-          />
+          <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" class="w-full justify-between">
+            <Button :label="_task.priority" class="justify-between w-full">
               <template #prefix>
                 <TaskPriorityIcon :priority="_task.priority" />
               </template>
             </Button>
           </Dropdown>
         </div>
+        <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
       </div>
     </template>
   </Dialog>
@@ -147,6 +117,7 @@ const router = useRouter()
 const { getUser } = usersStore()
 const { updateOnboardingStep } = useOnboarding('frappecrm')
 
+const error = ref(null)
 const title = ref(null)
 const editMode = ref(false)
 const _task = ref({
@@ -200,6 +171,12 @@ async function updateTask() {
         reference_docname: props.doc || null,
         ..._task.value,
       },
+    }, {
+      onError: (err) => {
+        if (err.error.exc_type == 'MandatoryError') {
+          error.value = "Title is mandatory"
+        }
+      }
     })
     if (d.name) {
       updateOnboardingStep('create_first_task')

frontend/src/components/MultiActionButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="flex items-center">
+    <Button
+      :variant="$attrs.variant"
+      class="border-0"
+      :label="activeButton.label"
+      :size="$attrs.size"
+      :class="[
+        $attrs.class,
+        showDropdown ? 'rounded-br-none rounded-tr-none' : '',
+      ]"
+      @click="() => activeButton.onClick()"
+    >
+      <template #prefix>
+        <FeatherIcon
+          v-if="activeButton.icon && typeof activeButton.icon === 'string'"
+          :name="activeButton.icon"
+          class="h-4 w-4"
+        />
+        <component
+          v-else-if="activeButton.icon"
+          :is="activeButton.icon"
+          class="h-4 w-4"
+        />
+      </template>
+    </Button>
+    <Dropdown
+      v-show="showDropdown"
+      :options="parsedOptions"
+      size="sm"
+      class="flex-1 [&>div>div>div]:w-full"
+      placement="right"
+    >
+      <template v-slot="{ togglePopover }">
+        <Button
+          :variant="$attrs.variant"
+          @click="togglePopover"
+          icon="chevron-down"
+          class="!w-6 justify-start rounded-bl-none rounded-tl-none border-0 pr-0 text-xs"
+        />
+      </template>
+    </Dropdown>
+  </div>
+</template>
+<script setup>
+import { Dropdown } from 'frappe-ui'
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const showDropdown = ref(props.options?.length > 1)
+const activeButton = ref(props.options?.[0] || {})
+
+const parsedOptions = computed(() => {
+  return (
+    props.options?.map((option) => {
+      return {
+        label: option.label,
+        onClick: () => {
+          activeButton.value = option
+        },
+      }
+    }) || []
+  )
+})
+</script>

frontend/src/components/Settings/EmailAccountCard.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="flex items-center justify-between p-1 py-3 border-b border-gray-200 dark:border-gray-700 cursor-pointer"
+  >
+    <!-- avatar and name -->
+    <div class="flex items-center justify-between gap-2">
+      <EmailProviderIcon :logo="emailIcon[emailAccount.service]" />
+      <div>
+        <p class="text-sm font-semibold text-ink-gray-9">
+          {{ emailAccount.email_account_name }}
+        </p>
+        <div class="text-sm text-gray-500">{{ emailAccount.email_id }}</div>
+      </div>
+    </div>
+    <div>
+      <Badge variant="subtle" :label="badgeTitle" :theme="gray" />
+    </div>
+    <!-- email id -->
+  </div>
+</template>
+
+<script setup>
+import { emailIcon } from './emailConfig'
+import EmailProviderIcon from './EmailProviderIcon.vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  emailAccount: {
+    type: Object,
+    required: true,
+  },
+})
+
+const badgeTitle = computed(() => {
+  if (
+    props.emailAccount.default_incoming &&
+    props.emailAccount.default_outgoing
+  ) {
+    return __('Default Sending and Inbox')
+  } else if (props.emailAccount.default_incoming) {
+    return __('Default Inbox')
+  } else if (props.emailAccount.default_outgoing) {
+    return __('Default Sending')
+  } else {
+    return __('Inbox')
+  }
+})
+</script>
+
+<style scoped></style>

frontend/src/components/Settings/EmailAccountList.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <!-- header -->
+    <div class="flex items-center justify-between text-ink-gray-9">
+      <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
+        {{ __('Email Accounts') }}
+      </h2>
+      <Button
+        :label="__('Add Account')"
+        theme="gray"
+        variant="solid"
+        @click="emit('update:step', 'email-add')"
+        class="mr-8"
+      >
+        <template #prefix>
+          <LucidePlus class="w-4 h-4" />
+        </template>
+      </Button>
+    </div>
+    <!-- list accounts -->
+    <div
+      v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)"
+      class="mt-4"
+    >
+      <div v-for="emailAccount in emailAccounts.data" :key="emailAccount.name">
+        <EmailAccountCard
+          :emailAccount="emailAccount"
+          @click="emit('update:step', 'email-edit', emailAccount)"
+        />
+      </div>
+    </div>
+    <!-- fallback if no email accounts -->
+    <div v-else class="flex items-center justify-center h-64 text-gray-500">
+      {{ __('Please add an email account to continue.') }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { createListResource } from 'frappe-ui'
+import EmailAccountCard from './EmailAccountCard.vue'
+
+const emit = defineEmits(['update:step'])
+
+const emailAccounts = createListResource({
+  doctype: 'Email Account',
+  cache: true,
+  fields: ['*'],
+  filters: {
+    email_id: ['Not Like', '%example%'],
+  },
+  pageLength: 10,
+  auto: true,
+  onSuccess: (accounts) => {
+    // convert 0 to false to handle boolean fields
+    accounts.forEach((account) => {
+      account.enable_incoming = Boolean(account.enable_incoming)
+      account.enable_outgoing = Boolean(account.enable_outgoing)
+      account.default_incoming = Boolean(account.default_incoming)
+      account.default_outgoing = Boolean(account.default_outgoing)
+    })
+  },
+})
+</script>

frontend/src/components/Settings/EmailAdd.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="flex flex-col h-full gap-4">
+    <!-- title and desc -->
+    <div role="heading" aria-level="1" class="flex flex-col gap-1">
+      <h2 class="text-xl font-semibold text-ink-gray-9">
+        {{ __('Setup Email') }}
+      </h2>
+      <p class="text-sm text-gray-600">
+        {{ __('Choose the email service provider you want to configure.') }}
+      </p>
+    </div>
+    <!-- email service provider selection -->
+    <div class="flex flex-wrap items-center">
+      <div
+        v-for="s in services"
+        :key="s.name"
+        class="flex flex-col items-center gap-1 mt-4 w-[70px]"
+        @click="handleSelect(s)"
+      >
+        <EmailProviderIcon
+          :service-name="s.name"
+          :logo="s.icon"
+          :selected="selectedService?.name === s?.name"
+        />
+      </div>
+    </div>
+    <div v-if="selectedService" class="flex flex-col gap-4">
+      <!-- email service provider info -->
+      <div
+        class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700 text-gray-700 dark:text-gray-500"
+      >
+        <CircleAlert class="w-5 h-6 w-min-5 w-max-5 min-h-5 max-w-5" />
+        <div class="text-xs text-wrap">
+          {{ selectedService.info }}
+          <a :href="selectedService.link" target="_blank" class="underline"
+            >here</a
+          >.
+        </div>
+      </div>
+      <!-- service provider fields -->
+      <div class="flex flex-col gap-4">
+        <div class="grid grid-cols-1 gap-4">
+          <div
+            v-for="field in fields"
+            :key="field.name"
+            class="flex flex-col gap-1"
+          >
+            <FormControl
+              v-model="state[field.name]"
+              :label="field.label"
+              :name="field.name"
+              :type="field.type"
+              :placeholder="field.placeholder"
+            />
+          </div>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div
+            v-for="field in incomingOutgoingFields"
+            :key="field.name"
+            class="flex flex-col gap-1"
+          >
+            <FormControl
+              v-model="state[field.name]"
+              :label="field.label"
+              :name="field.name"
+              :type="field.type"
+            />
+            <p class="text-gray-500 text-p-sm">{{ field.description }}</p>
+          </div>
+        </div>
+        <ErrorMessage v-if="error" class="ml-1" :message="error" />
+      </div>
+    </div>
+    <!-- action button -->
+    <div v-if="selectedService" class="flex justify-between mt-auto">
+      <Button
+        label="Back"
+        theme="gray"
+        variant="outline"
+        :disabled="addEmailRes.loading"
+        @click="emit('update:step', 'email-list')"
+      />
+      <Button
+        label="Create"
+        variant="solid"
+        :loading="addEmailRes.loading"
+        @click="createEmailAccount"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from 'vue'
+import { createResource } from 'frappe-ui'
+import CircleAlert from '~icons/lucide/circle-alert'
+import { createToast } from '@/utils'
+import {
+  customProviderFields,
+  popularProviderFields,
+  services,
+  validateInputs,
+  incomingOutgoingFields,
+} from './emailConfig'
+import EmailProviderIcon from './EmailProviderIcon.vue'
+
+const emit = defineEmits()
+
+const state = reactive({
+  service: '',
+  email_account_name: '',
+  email_id: '',
+  password: '',
+  api_key: '',
+  api_secret: '',
+  frappe_mail_site: '',
+  enable_incoming: false,
+  enable_outgoing: false,
+  default_incoming: false,
+  default_outgoing: false,
+})
+
+const selectedService = ref(null)
+const fields = computed(() =>
+  selectedService.value.custom ? customProviderFields : popularProviderFields,
+)
+
+function handleSelect(service) {
+  selectedService.value = service
+  state.service = service.name
+}
+
+const addEmailRes = createResource({
+  url: 'crm.api.settings.create_email_account',
+  makeParams: (val) => {
+    return {
+      ...val,
+    }
+  },
+  onSuccess: () => {
+    createToast({
+      title: __('Email account created successfully'),
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+    emit('update:step', 'email-list')
+  },
+  onError: () => {
+    error.value = __('Failed to create email account, Invalid credentials')
+  },
+})
+
+const error = ref()
+function createEmailAccount() {
+  error.value = validateInputs(state, selectedService.value.custom)
+  if (error.value) return
+
+  addEmailRes.submit({ data: state })
+}
+</script>
+
+<style scoped></style>

frontend/src/components/Settings/EmailConfig.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex-1 p-8">
+    <div v-if="step === 'email-add'" class="h-full">
+      <EmailAdd @update:step="updateStep" />
+    </div>
+    <div v-else-if="step === 'email-list'" class="h-full">
+      <EmailAccountList @update:step="updateStep" />
+    </div>
+    <div v-else-if="step === 'email-edit'" class="h-full">
+      <EmailEdit :account-data="accountData" @update:step="updateStep" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import EmailAdd from "./EmailAdd.vue";
+import EmailAccountList from "./EmailAccountList.vue";
+import EmailEdit from "./EmailEdit.vue";
+
+const step = ref("email-list");
+const accountData = ref(null);
+function updateStep(newStep, data) {
+  step.value = newStep;
+  accountData.value = data;
+}
+</script>

frontend/src/components/Settings/EmailEdit.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="flex flex-col h-full gap-4">
+    <!-- title and desc -->
+    <div role="heading" aria-level="1" class="flex justify-between gap-1">
+      <h2 class="text-xl font-semibold text-ink-gray-9">
+        {{ __('Edit Email') }}
+      </h2>
+    </div>
+    <div class="w-fit">
+      <EmailProviderIcon
+        :logo="emailIcon[accountData.service]"
+        :service-name="accountData.service"
+      />
+    </div>
+    <!-- banner for setting up email account -->
+    <div
+      class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700"
+    >
+      <CircleAlert
+        class="size-6 text-gray-500 w-min-5 w-max-5 min-h-5 max-w-5"
+      />
+      <div class="text-xs text-gray-700 dark:text-gray-500 text-wrap">
+        {{ info.description }}
+        <a :href="info.link" target="_blank" class="underline">{{
+          __('here')
+        }}</a>
+        .
+      </div>
+    </div>
+    <!-- fields -->
+    <div class="flex flex-col gap-4">
+      <div class="grid grid-cols-1 gap-4">
+        <div
+          v-for="field in fields"
+          :key="field.name"
+          class="flex flex-col gap-1"
+        >
+          <FormControl
+            v-model="state[field.name]"
+            :label="field.label"
+            :name="field.name"
+            :type="field.type"
+            :placeholder="field.placeholder"
+          />
+        </div>
+      </div>
+      <div class="grid grid-cols-2 gap-4">
+        <div
+          v-for="field in incomingOutgoingFields"
+          :key="field.name"
+          class="flex flex-col gap-1"
+        >
+          <FormControl
+            v-model="state[field.name]"
+            :label="field.label"
+            :name="field.name"
+            :type="field.type"
+          />
+          <p class="text-gray-500 text-p-sm">{{ field.description }}</p>
+        </div>
+      </div>
+      <ErrorMessage v-if="error" class="ml-1" :message="error" />
+    </div>
+    <!-- action buttons -->
+    <div class="flex justify-between mt-auto">
+      <Button
+        :label="__('Back')"
+        theme="gray"
+        variant="outline"
+        :disabled="loading"
+        @click="emit('update:step', 'email-list')"
+      />
+      <Button
+        :label="__('Update Account')"
+        variant="solid"
+        @click="updateAccount"
+        :loading="loading"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from 'vue'
+import { call } from 'frappe-ui'
+import EmailProviderIcon from './EmailProviderIcon.vue'
+import {
+  emailIcon,
+  services,
+  popularProviderFields,
+  customProviderFields,
+  validateInputs,
+  incomingOutgoingFields,
+} from './emailConfig'
+import { createToast } from '@/utils'
+import CircleAlert from '~icons/lucide/circle-alert'
+
+const props = defineProps({
+  accountData: null,
+})
+
+const emit = defineEmits()
+
+const state = reactive({
+  email_account_name: props.accountData.email_account_name || '',
+  service: props.accountData.service || '',
+  email_id: props.accountData.email_id || '',
+  api_key: props.accountData?.api_key || null,
+  api_secret: props.accountData?.api_secret || null,
+  password: props.accountData?.password || null,
+  frappe_mail_site: props.accountData?.frappe_mail_site || '',
+  enable_incoming: props.accountData.enable_incoming || false,
+  enable_outgoing: props.accountData.enable_outgoing || false,
+  default_outgoing: props.accountData.default_outgoing || false,
+  default_incoming: props.accountData.default_incoming || false,
+})
+
+const info = {
+  description: __('To know more about setting up email accounts, click'),
+  link: 'https://docs.erpnext.com/docs/user/manual/en/email-account',
+}
+
+const isCustomService = computed(() => {
+  return services.find((s) => s.name === props.accountData.service).custom
+})
+
+const fields = computed(() => {
+  if (isCustomService.value) {
+    return customProviderFields
+  }
+  return popularProviderFields
+})
+
+const error = ref()
+const loading = ref(false)
+async function updateAccount() {
+  error.value = validateInputs(state, isCustomService.value)
+  if (error.value) return
+  const old = { ...props.accountData }
+  const updatedEmailAccount = { ...state }
+
+  const nameChanged =
+    old.email_account_name !== updatedEmailAccount.email_account_name
+  delete old.email_account_name
+  delete updatedEmailAccount.email_account_name
+
+  const otherFieldsChanged = isDirty.value
+  const values = updatedEmailAccount
+
+  if (!nameChanged && !otherFieldsChanged) {
+    createToast({
+      title: __('No changes made'),
+      icon: 'info',
+      iconClasses: 'text-blue-600',
+    })
+    return
+  }
+
+  if (nameChanged) {
+    try {
+      loading.value = true
+      await callRenameDoc()
+      succesHandler()
+    } catch (err) {
+      errorHandler()
+    }
+  }
+  if (otherFieldsChanged) {
+    try {
+      loading.value = true
+      await callSetValue(values)
+      succesHandler()
+    } catch (err) {
+      errorHandler()
+    }
+  }
+}
+
+const isDirty = computed(() => {
+  return (
+    state.email_id !== props.accountData.email_id ||
+    state.api_key !== props.accountData.api_key ||
+    state.api_secret !== props.accountData.api_secret ||
+    state.password !== props.accountData.password ||
+    state.enable_incoming !== props.accountData.enable_incoming ||
+    state.enable_outgoing !== props.accountData.enable_outgoing ||
+    state.default_outgoing !== props.accountData.default_outgoing ||
+    state.default_incoming !== props.accountData.default_incoming ||
+    state.frappe_mail_site !== props.accountData.frappe_mail_site
+  )
+})
+
+async function callRenameDoc() {
+  const d = await call('frappe.client.rename_doc', {
+    doctype: 'Email Account',
+    old_name: props.accountData.email_account_name,
+    new_name: state.email_account_name,
+  })
+  return d
+}
+
+async function callSetValue(values) {
+  const d = await call('frappe.client.set_value', {
+    doctype: 'Email Account',
+    name: state.email_account_name,
+    fieldname: values,
+  })
+  return d.name
+}
+
+function succesHandler() {
+  emit('update:step', 'email-list')
+  createToast({
+    title: __('Email account updated successfully'),
+    icon: 'check',
+    iconClasses: 'text-green-600',
+  })
+}
+
+function errorHandler() {
+  loading.value = false
+  error.value = __('Failed to update email account, Invalid credentials')
+}
+</script>

frontend/src/components/Settings/EmailProviderIcon.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="flex items-center justify-center w-8 h-8 bg-gray-100 cursor-pointer rounded-xl hover:bg-gray-200"
+    :class="{ 'ring-2 ring-gray-500 dark:ring-gray-100': selected }"
+  >
+    <img :src="logo" class="w-4 h-4" />
+  </div>
+  <p
+    v-if="serviceName"
+    class="text-xs text-center text-gray-700 dark:text-gray-500 mt-2"
+  >
+    {{ serviceName }}
+  </p>
+</template>
+
+<script setup>
+defineProps({
+  logo: {
+    type: String,
+    required: true,
+  },
+  serviceName: {
+    type: String,
+    default: '',
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<style scoped></style>

frontend/src/components/Settings/Settings.vue

@@ -6,8 +6,8 @@
   >
     <template #body>
       <div class="flex h-[calc(100vh_-_8rem)]">
-        <div class="flex w-52 shrink-0 flex-col bg-surface-gray-2 p-2">
-          <h1 class="mb-3 px-2 pt-2 text-lg font-semibold text-ink-gray-9">
+        <div class="flex flex-col p-2 w-52 shrink-0 bg-surface-gray-2">
+          <h1 class="px-2 pt-2 mb-3 text-lg font-semibold text-ink-gray-9">
             {{ __('Settings') }}
           </h1>
           <div v-for="tab in tabs">
@@ -34,7 +34,7 @@
           </div>
         </div>
         <div
-          class="flex relative flex-1 flex-col overflow-y-auto bg-surface-modal"
+          class="relative flex flex-col flex-1 overflow-y-auto bg-surface-modal"
         >
           <Button
             class="absolute right-5 top-5"
@@ -53,12 +53,14 @@ import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import ERPNextIcon from '@/components/Icons/ERPNextIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import InviteIcon from '@/components/Icons/InviteIcon.vue'
+import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import GeneralSettings from '@/components/Settings/GeneralSettings.vue'
 import InviteMemberPage from '@/components/Settings/InviteMemberPage.vue'
 import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
 import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
 import ERPNextSettings from '@/components/Settings/ERPNextSettings.vue'
 import TelephonySettings from '@/components/Settings/TelephonySettings.vue'
+import EmailConfig from '@/components/Settings/EmailConfig.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { usersStore } from '@/stores/users'
 import {
@@ -101,6 +103,12 @@ const tabs = computed(() => {
           component: markRaw(InviteMemberPage),
           condition: () => isManager(),
         },
+        {
+          label: __('Email Accounts'),
+          icon: Email2Icon,
+          component: markRaw(EmailConfig),
+          condition: () => isManager(),
+        },
       ],
     },
     {

frontend/src/components/Settings/emailConfig.js

@@ -0,0 +1,186 @@
+import { validateEmail } from '../../utils'
+
+import LogoGmail from '@/images/gmail.png'
+import LogoOutlook from '@/images/outlook.png'
+import LogoSendgrid from '@/images/sendgrid.png'
+import LogoSparkpost from '@/images/sparkpost.webp'
+import LogoYahoo from '@/images/yahoo.png'
+import LogoYandex from '@/images/yandex.png'
+import LogoFrappeMail from '@/images/frappe-mail.svg'
+
+const fixedFields = [
+  {
+    label: __('Account Name'),
+    name: 'email_account_name',
+    type: 'text',
+    placeholder: __('Support / Sales'),
+  },
+  {
+    label: 'Email ID',
+    name: 'email_id',
+    type: 'email',
+    placeholder: 'johndoe@example.com',
+  },
+]
+
+export const incomingOutgoingFields = [
+  {
+    label: __('Enable Incoming'),
+    name: 'enable_incoming',
+    type: 'checkbox',
+    description: __(
+      'If enabled, records can be created from the incoming emails on this account.',
+    ),
+  },
+  {
+    label: __('Enable Outgoing'),
+    name: 'enable_outgoing',
+    type: 'checkbox',
+    description: __(
+      'If enabled, outgoing emails can be sent from this account.',
+    ),
+  },
+  {
+    label: __('Default Incoming'),
+    name: 'default_incoming',
+    type: 'checkbox',
+    description: __(
+      'If enabled, all replies to your company (eg: replies@yourcomany.com) will come to this account. Note: Only one account can be default incoming.',
+    ),
+  },
+  {
+    label: __('Default Outgoing'),
+    name: 'default_outgoing',
+    type: 'checkbox',
+    description: __(
+      'If enabled, all outgoing emails will be sent from this account. Note: Only one account can be default outgoing.',
+    ),
+  },
+]
+
+export const popularProviderFields = [
+  ...fixedFields,
+  {
+    label: __('Password'),
+    name: 'password',
+    type: 'password',
+    placeholder: '********',
+  },
+]
+
+export const customProviderFields = [
+  ...fixedFields,
+  {
+    label: 'Frappe Mail Site',
+    name: 'frappe_mail_site',
+    type: 'text',
+    placeholder: 'https://frappemail.com',
+  },
+  {
+    label: 'API Key',
+    name: 'api_key',
+    type: 'text',
+    placeholder: '********',
+  },
+  {
+    label: 'API Secret',
+    name: 'api_secret',
+    type: 'password',
+    placeholder: '********',
+  },
+]
+
+export const services = [
+  {
+    name: 'GMail',
+    icon: LogoGmail,
+    info: __(`Setting up GMail requires you to enable two factor authentication
+		  and app specific passwords. Read more`),
+    link: 'https://support.google.com/accounts/answer/185833',
+    custom: false,
+  },
+  {
+    name: 'Outlook',
+    icon: LogoOutlook,
+    info: __(`Setting up Outlook requires you to enable two factor authentication
+		  and app specific passwords. Read more`),
+    link: 'https://support.microsoft.com/en-us/account-billing/how-to-get-and-use-app-passwords-5896ed9b-4263-e681-128a-a6f2979a7944',
+    custom: false,
+  },
+  {
+    name: 'Sendgrid',
+    icon: LogoSendgrid,
+    info: __(`Setting up Sendgrid requires you to enable two factor authentication
+		  and app specific passwords. Read more `),
+    link: 'https://sendgrid.com/docs/ui/account-and-settings/two-factor-authentication/',
+    custom: false,
+  },
+  {
+    name: 'SparkPost',
+    icon: LogoSparkpost,
+    info: __(`Setting up SparkPost requires you to enable two factor authentication
+		  and app specific passwords. Read more `),
+    link: 'https://support.sparkpost.com/docs/my-account-and-profile/enabling-two-factor-authentication',
+    custom: false,
+  },
+  {
+    name: 'Yahoo',
+    icon: LogoYahoo,
+    info: __(`Setting up Yahoo requires you to enable two factor authentication
+		  and app specific passwords. Read more `),
+    link: 'https://help.yahoo.com/kb/SLN15241.html',
+    custom: false,
+  },
+  {
+    name: 'Yandex',
+    icon: LogoYandex,
+    info: __(`Setting up Yandex requires you to enable two factor authentication
+		  and app specific passwords. Read more `),
+    link: 'https://yandex.com/support/id/authorization/app-passwords.html',
+    custom: false,
+  },
+  {
+    name: 'Frappe Mail',
+    icon: LogoFrappeMail,
+    info: __(
+      `Setting up Frappe Mail requires you to have an API key and API Secret of your email account. Read more `,
+    ),
+    link: 'https://github.com/frappe/mail',
+    custom: true,
+  },
+]
+
+export const emailIcon = {
+  GMail: LogoGmail,
+  Outlook: LogoOutlook,
+  Sendgrid: LogoSendgrid,
+  SparkPost: LogoSparkpost,
+  Yahoo: LogoYahoo,
+  Yandex: LogoYandex,
+  'Frappe Mail': LogoFrappeMail,
+}
+
+export function validateInputs(state, isCustom) {
+  if (!state.email_account_name) {
+    return __('Account name is required')
+  }
+  if (!state.email_id) {
+    return __('Email ID is required')
+  }
+  const validEmail = validateEmail(state.email_id)
+  if (!validEmail) {
+    return __('Invalid email ID')
+  }
+  if (!isCustom && !state.password) {
+    return __('Password is required')
+  }
+  if (isCustom) {
+    if (!state.api_key) {
+      return __('API Key is required')
+    }
+    if (!state.api_secret) {
+      return
+    }
+  }
+  return ''
+}

frontend/src/components/SidePanelLayout.vue

@@ -215,10 +215,16 @@
                           </template>
                         </Link>
                         <Link
-                          v-else-if="field.fieldtype === 'Link'"
+                          v-else-if="
+                            ['Link', 'Dynamic Link'].includes(field.fieldtype)
+                          "
                           class="form-control select-text"
                           :value="data[field.fieldname]"
-                          :doctype="field.options"
+                          :doctype="
+                            field.fieldtype == 'Link'
+                              ? field.options
+                              : data[field.options]
+                          "
                           :filters="field.filters"
                           :placeholder="field.placeholder"
                           @change="

frontend/src/components/ViewControls.vue

@@ -545,6 +545,11 @@ function reload() {
 const showExportDialog = ref(false)
 const export_type = ref('Excel')
 const export_all = ref(false)
+const selectedRows = ref([])
+
+function updateSelections(selections) {
+  selectedRows.value = Array.from(selections)
+}
 
 async function exportRows() {
   let fields = JSON.stringify(list.value.data.columns.map((f) => f.key))
@@ -560,7 +565,15 @@ async function exportRows() {
     page_length = list.value.data.total_count
   }
 
-  window.location.href = `/api/method/frappe.desk.reportview.export_query?file_format_type=${export_type.value}&title=${props.doctype}&doctype=${props.doctype}&fields=${fields}&filters=${filters}&order_by=${order_by}&page_length=${page_length}&start=0&view=Report&with_comment_count=1`
+  let url = `/api/method/frappe.desk.reportview.export_query?file_format_type=${export_type.value}&title=${props.doctype}&doctype=${props.doctype}&fields=${fields}&filters=${filters}&order_by=${order_by}&page_length=${page_length}&start=0&view=Report&with_comment_count=1`
+
+  // Add selected items parameter if rows are selected
+  if (selectedRows.value?.length && !export_all.value) {
+    url += `&selected_items=${JSON.stringify(selectedRows.value)}`
+  }
+
+  window.location.href = url
+
   showExportDialog.value = false
   export_all.value = false
   export_type.value = 'Excel'
@@ -1336,6 +1349,7 @@ defineExpose({
   viewActions,
   viewsDropdownOptions,
   currentView,
+  updateSelections,
 })
 
 // Watchers

frontend/src/images/frappe-mail.svg

@@ -0,0 +1,4 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5714 44L31.4286 44C38.3716 44 44 38.3716 44 31.4286L44 12.5714C44 5.62842 38.3716 0 31.4286 0L12.5714 0C5.62842 0 0 5.62842 0 12.5714L0 31.4286C0 38.3716 5.62842 44 12.5714 44Z" fill="#0466DC"/>
+<path d="M9.42859 12.5715V14.8972L12.5714 17.4587L18.5743 22.3458C19.5329 23.1315 20.7586 23.5715 22 23.5715C23.2414 23.5715 24.4672 23.1315 25.4257 22.3458L31.4286 17.443V28.2701H12.5714V21.5287L9.42859 18.9672V27.4844C9.42859 29.653 11.1886 31.413 13.3572 31.413H30.6429C32.8115 31.413 34.5715 29.653 34.5715 27.4844V12.5715H9.42859ZM23.4457 19.9101C22.6286 20.5701 21.3714 20.5701 20.57 19.9101L15.4157 15.7144H28.6L23.4457 19.9101Z" fill="white"/>
+</svg>

frontend/src/pages/CallLogs.vue

@@ -41,6 +41,9 @@
     @applyFilter="(data) => viewControls.applyFilter(data)"
     @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
     @likeDoc="(data) => viewControls.likeDoc(data)"
+    @selectionsChanged="
+      (selections) => viewControls.updateSelections(selections)
+    "
   />
   <div
     v-else-if="callLogs.data"

frontend/src/pages/Contact.vue

@@ -8,7 +8,7 @@
       </Breadcrumbs>
     </template>
   </LayoutHeader>
-  <div ref="parentRef" class="flex h-full">
+  <div v-if="contact.data" ref="parentRef" class="flex h-full">
     <Resizer
       v-if="contact.data"
       :parent="$refs.parentRef"
@@ -168,10 +168,16 @@
       </template>
     </Tabs>
   </div>
+  <ErrorPage
+    v-else-if="errorTitle"
+    :errorTitle="errorTitle"
+    :errorMessage="errorMessage"
+  />
   <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
+import ErrorPage from '@/components/ErrorPage.vue'
 import Resizer from '@/components/Resizer.vue'
 import Icon from '@/components/Icon.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
@@ -202,6 +208,7 @@ import {
 } from 'frappe-ui'
 import { ref, computed, h } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { errorMessage as _errorMessage } from '../utils'
 
 const { brand } = getSettings()
 const { $dialog, makeCall } = globalStore()
@@ -225,6 +232,9 @@ const showAddressModal = ref(false)
 const _contact = ref({})
 const _address = ref({})
 
+const errorTitle = ref('')
+const errorMessage = ref('')
+
 const contact = createResource({
   url: 'crm.api.contact.get_contact',
   cache: ['contact', props.contactId],
@@ -237,6 +247,18 @@ const contact = createResource({
       mobile_no: data.mobile_no,
     }
   },
+  onSuccess: () => {
+    errorTitle.value = ''
+    errorMessage.value = ''
+  },
+  onError: (err) => {
+    if (err.messages?.[0]) {
+      errorTitle.value = __('Not permitted')
+      errorMessage.value = __(err.messages?.[0])
+    } else {
+      router.push({ name: 'Contacts' })
+    }
+  },
 })
 
 const breadcrumbs = computed(() => {

frontend/src/pages/Contacts.vue

@@ -44,6 +44,9 @@
     @applyFilter="(data) => viewControls.applyFilter(data)"
     @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
     @likeDoc="(data) => viewControls.likeDoc(data)"
+    @selectionsChanged="
+      (selections) => viewControls.updateSelections(selections)
+    "
   />
   <div
     v-else-if="contacts.data"

frontend/src/pages/Deal.vue

@@ -89,7 +89,7 @@
                     @click="
                       deal.data.email
                         ? openEmailBox()
-                        : errorMessage(__('No email set'))
+                        : _errorMessage(__('No email set'))
                     "
                   />
                 </Button>
@@ -103,7 +103,7 @@
                     @click="
                       deal.data.website
                         ? openWebsite(deal.data.website)
-                        : errorMessage(__('No website set'))
+                        : _errorMessage(__('No website set'))
                     "
                   />
                 </Button>
@@ -267,6 +267,11 @@
       </div>
     </Resizer>
   </div>
+  <ErrorPage
+    v-else-if="errorTitle"
+    :errorTitle="errorTitle"
+    :errorMessage="errorMessage"
+  />
   <OrganizationModal
     v-model="showOrganizationModal"
     v-model:organization="_organization"
@@ -297,6 +302,7 @@
   />
 </template>
 <script setup>
+import ErrorPage from '@/components/ErrorPage.vue'
 import Icon from '@/components/Icon.vue'
 import Resizer from '@/components/Resizer.vue'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
@@ -330,7 +336,7 @@ import {
   createToast,
   setupAssignees,
   setupCustomizations,
-  errorMessage,
+  errorMessage as _errorMessage,
   copyToClipboard,
 } from '@/utils'
 import { getView } from '@/utils/view'
@@ -372,11 +378,17 @@ const props = defineProps({
   },
 })
 
+const errorTitle = ref('')
+const errorMessage = ref('')
+
 const deal = createResource({
   url: 'crm.fcrm.doctype.crm_deal.api.get_deal',
   params: { name: props.dealId },
   cache: ['deal', props.dealId],
   onSuccess: (data) => {
+    errorTitle.value = ''
+    errorMessage.value = ''
+
     if (data.organization) {
       organization.update({
         params: { doctype: 'CRM Organization', name: data.organization },
@@ -401,6 +413,14 @@ const deal = createResource({
       call,
     })
   },
+  onError: (err) => {
+    if (err.messages?.[0]) {
+      errorTitle.value = __('Not permitted')
+      errorMessage.value = __(err.messages?.[0])
+    } else {
+      router.push({ name: 'Deals' })
+    }
+  },
 })
 
 const organization = createResource({
@@ -545,7 +565,6 @@ const tabs = computed(() => {
       name: 'Calls',
       label: __('Calls'),
       icon: PhoneIcon,
-      condition: () => callEnabled.value,
     },
     {
       name: 'Tasks',
@@ -699,12 +718,12 @@ function triggerCall() {
   let mobile_no = primaryContact.mobile_no || null
 
   if (!primaryContact) {
-    errorMessage(__('No primary contact set'))
+    _errorMessage(__('No primary contact set'))
     return
   }
 
   if (!mobile_no) {
-    errorMessage(__('No mobile number set'))
+    _errorMessage(__('No mobile number set'))
     return
   }
 

frontend/src/pages/Deals.vue

@@ -223,6 +223,9 @@
     @applyFilter="(data) => viewControls.applyFilter(data)"
     @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
     @likeDoc="(data) => viewControls.likeDoc(data)"
+    @selectionsChanged="
+      (selections) => viewControls.updateSelections(selections)
+    "
   />
   <div v-else-if="deals.data" class="flex h-full items-center justify-center">
     <div
@@ -457,9 +460,6 @@ function parseRows(rows, columns = []) {
         }
       } else if (row == '_assign') {
         let assignees = JSON.parse(deal._assign || '[]')
-        if (!assignees.length && deal.deal_owner) {
-          assignees = [deal.deal_owner]
-        }
         _rows[row] = assignees.map((user) => ({
           name: user,
           image: getUser(user).user_image,

frontend/src/pages/EmailTemplates.vue

@@ -45,6 +45,9 @@
     @applyFilter="(data) => viewControls.applyFilter(data)"
     @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
     @likeDoc="(data) => viewControls.likeDoc(data)"
+    @selectionsChanged="
+      (selections) => viewControls.updateSelections(selections)
+    "
   />
   <div
     v-else-if="emailTemplates.data"

frontend/src/pages/Lead.vue

@@ -124,7 +124,7 @@
                         () =>
                           lead.data.mobile_no
                             ? makeCall(lead.data.mobile_no)
-                            : errorMessage(__('No phone number set'))
+                            : _errorMessage(__('No phone number set'))
                       "
                     >
                       <PhoneIcon class="h-4 w-4" />
@@ -139,7 +139,7 @@
                         @click="
                           lead.data.email
                             ? openEmailBox()
-                            : errorMessage(__('No email set'))
+                            : _errorMessage(__('No email set'))
                         "
                       />
                     </Button>
@@ -153,7 +153,7 @@
                         @click="
                           lead.data.website
                             ? openWebsite(lead.data.website)
-                            : errorMessage(__('No website set'))
+                            : _errorMessage(__('No website set'))
                         "
                       />
                     </Button>
@@ -191,6 +191,11 @@
       </div>
     </Resizer>
   </div>
+  <ErrorPage
+    v-else-if="errorTitle"
+    :errorTitle="errorTitle"
+    :errorMessage="errorMessage"
+  />
   <Dialog
     v-model="showConvertToDealModal"
     :options="{
@@ -309,6 +314,7 @@
   />
 </template>
 <script setup>
+import ErrorPage from '@/components/ErrorPage.vue'
 import Icon from '@/components/Icon.vue'
 import Resizer from '@/components/Resizer.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -342,7 +348,7 @@ import {
   createToast,
   setupAssignees,
   setupCustomizations,
-  errorMessage,
+  errorMessage as _errorMessage,
   copyToClipboard,
 } from '@/utils'
 import { getView } from '@/utils/view'
@@ -392,11 +398,16 @@ const props = defineProps({
   },
 })
 
+const errorTitle = ref('')
+const errorMessage = ref('')
+
 const lead = createResource({
   url: 'crm.fcrm.doctype.crm_lead.api.get_lead',
   params: { name: props.leadId },
   cache: ['lead', props.leadId],
   onSuccess: (data) => {
+    errorTitle.value = ''
+    errorMessage.value = ''
     setupAssignees(lead)
     setupCustomizations(lead, {
       doc: data,
@@ -410,6 +421,14 @@ const lead = createResource({
       call,
     })
   },
+  onError: (err) => {
+    if (err.messages?.[0]) {
+      errorTitle.value = __('Not permitted')
+      errorMessage.value = __(err.messages?.[0])
+    } else {
+      router.push({ name: 'Leads' })
+    }
+  },
 })
 
 onMounted(() => {
@@ -532,7 +551,6 @@ const tabs = computed(() => {
       name: 'Calls',
       label: __('Calls'),
       icon: PhoneIcon,
-      condition: () => callEnabled.value,
     },
     {
       name: 'Tasks',

frontend/src/pages/Leads.vue

@@ -249,6 +249,9 @@
     @applyFilter="(data) => viewControls.applyFilter(data)"
     @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
     @likeDoc="(data) => viewControls.likeDoc(data)"
+    @selectionsChanged="
+      (selections) => viewControls.updateSelections(selections)
+    "
   />
   <div v-else-if="leads.data" class="flex h-full items-center justify-center">
     <div
@@ -480,9 +483,6 @@ function parseRows(rows, columns = []) {
         }
       } else if (row == '_assign') {
         let assignees = JSON.parse(lead._assign || '[]')
-        if (!assignees.length && lead.lead_owner) {
-          assignees = [lead.lead_owner]
-        }
         _rows[row] = assignees.map((user) => ({
           name: user,
           image: getUser(user).user_image,

frontend/src/pages/Organization.vue

@@ -8,7 +8,7 @@
       </Breadcrumbs>
     </template>
   </LayoutHeader>
-  <div ref="parentRef" class="flex h-full">
+  <div v-if="organization.doc" ref="parentRef" class="flex h-full">
     <Resizer
       v-if="organization.doc"
       :parent="$refs.parentRef"
@@ -160,6 +160,11 @@
       </template>
     </Tabs>
   </div>
+  <ErrorPage
+    v-else-if="errorTitle"
+    :errorTitle="errorTitle"
+    :errorMessage="errorMessage"
+  />
   <QuickEntryModal
     v-if="showQuickEntryModal"
     v-model="showQuickEntryModal"
@@ -169,6 +174,7 @@
 </template>
 
 <script setup>
+import ErrorPage from '@/components/ErrorPage.vue'
 import Resizer from '@/components/Resizer.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import Icon from '@/components/Icon.vue'
@@ -221,12 +227,27 @@ const showQuickEntryModal = ref(false)
 const route = useRoute()
 const router = useRouter()
 
+const errorTitle = ref('')
+const errorMessage = ref('')
+
 const organization = createDocumentResource({
   doctype: 'CRM Organization',
   name: props.organizationId,
   cache: ['organization', props.organizationId],
   fields: ['*'],
   auto: true,
+  onSuccess: () => {
+    errorTitle.value = ''
+    errorMessage.value = ''
+  },
+  onError: (err) => {
+    if (err.messages?.[0]) {
+      errorTitle.value = __('Not permitted')
+      errorMessage.value = __(err.messages?.[0])
+    } else {
+      router.push({ name: 'Organizations' })
+    }
+  },
 })
 
 async function updateField(fieldname, value) {

frontend/src/pages/Organizations.vue

@@ -44,6 +44,9 @@
     @applyFilter="(data) => viewControls.applyFilter(data)"
     @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
     @likeDoc="(data) => viewControls.likeDoc(data)"
+    @selectionsChanged="
+      (selections) => viewControls.updateSelections(selections)
+    "
   />
   <div
     v-else-if="organizations.data"

frontend/src/pages/Tasks.vue

@@ -172,6 +172,9 @@
     @applyFilter="(data) => viewControls.applyFilter(data)"
     @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
     @likeDoc="(data) => viewControls.likeDoc(data)"
+    @selectionsChanged="
+      (selections) => viewControls.updateSelections(selections)
+    "
   />
   <div v-else-if="tasks.data" class="flex h-full items-center justify-center">
     <div

frontend/src/types.ts

@@ -0,0 +1,13 @@
+export interface EmailAccount {
+  email_account_name: string
+  email_id: string
+  service: string
+  api_key?: string
+  api_secret?: string
+  password?: string
+  frappe_mail_site?: string
+  enable_outgoing?: boolean
+  enable_incoming?: boolean
+  default_outgoing?: boolean
+  default_incoming?: boolean
+}

yarn.lock

@@ -2542,10 +2542,10 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-frappe-ui@^0.1.121:
-  version "0.1.121"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.121.tgz#a8d37f300228edfcbb6b4fffb343f0773dcfd933"
-  integrity sha512-gvtKKZECPD2MU5X4MwPUKr2hSOs1+s1DA9laP3aPnmH0ukJRSFEhDOyjCMfH9k6ZdAe/vZCIbT4XucxLq/fOEA==
+frappe-ui@^0.1.123:
+  version "0.1.123"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.123.tgz#501139a103a03e52648d9ee9ea85aa54bc8102e0"
+  integrity sha512-WkTnKZ+n82d9xZ9g9ZQXVkFyKU2wlcfT6/9g8/2biJuXMwmo/80I29EKGb9nrM1Liuj0Wtyg9nsqvfvgktdHbw==
   dependencies:
     "@headlessui/vue" "^1.7.14"
     "@popperjs/core" "^2.11.2"