From fd3fc4448e271f1f08912cc4be602a140c63f493 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 21:15:14 +0530
Subject: [PATCH 01/16] refactor: no need to pass unselectAll method

---
 frontend/src/components/ListViews/ContactsListView.vue    | 8 ++++++--
 frontend/src/components/ListViews/DealsListView.vue       | 8 ++++++--
 .../src/components/ListViews/EmailTemplatesListView.vue   | 8 ++++++--
 frontend/src/components/ListViews/LeadsListView.vue       | 8 ++++++--
 .../src/components/ListViews/OrganizationsListView.vue    | 8 ++++++--
 frontend/src/components/ListViews/TasksListView.vue       | 8 ++++++--
 6 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index e4fdda12..e1169ae5 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -100,10 +100,9 @@
   />
   <EditValueModal
     v-model="showEditModal"
-    v-model:unselectAll="unselectAllAction"
     doctype="Contact"
     :selectedValues="selectedValues"
-    @reload="list.reload()"
+    @reload="reload"
   />
 </template>
 <script setup>
@@ -225,6 +224,11 @@ function bulkActions(selections, unselectAll) {
   return actions
 }
 
+function reload() {
+  unselectAllAction.value?.()
+  list.value?.reload()
+}
+
 onMounted(() => {
   if (!list.value?.data) return
   setupListActions(list.value.data, {
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 40a0c934..3769895b 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -132,10 +132,9 @@
   />
   <EditValueModal
     v-model="showEditModal"
-    v-model:unselectAll="unselectAllAction"
     doctype="CRM Deal"
     :selectedValues="selectedValues"
-    @reload="list.reload()"
+    @reload="reload"
   />
 </template>
 
@@ -276,6 +275,11 @@ function bulkActions(selections, unselectAll) {
   return actions
 }
 
+function reload() {
+  unselectAllAction.value?.()
+  list.value?.reload()
+}
+
 onMounted(() => {
   if (!list.value?.data) return
   setupListActions(list.value.data, {
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index 1a35aa6d..22625af9 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -86,10 +86,9 @@
   />
   <EditValueModal
     v-model="showEditModal"
-    v-model:unselectAll="unselectAllAction"
     doctype="Email Template"
     :selectedValues="selectedValues"
-    @reload="list.reload()"
+    @reload="reload"
   />
 </template>
 <script setup>
@@ -210,6 +209,11 @@ function bulkActions(selections, unselectAll) {
   return actions
 }
 
+function reload() {
+  unselectAllAction.value?.()
+  list.value?.reload()
+}
+
 onMounted(() => {
   if (!list.value?.data) return
   setupListActions(list.value.data, {
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index a7a0a005..f00f3685 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -141,10 +141,9 @@
   />
   <EditValueModal
     v-model="showEditModal"
-    v-model:unselectAll="unselectAllAction"
     doctype="CRM Lead"
     :selectedValues="selectedValues"
-    @reload="list.reload()"
+    @reload="reload"
   />
 </template>
 
@@ -285,6 +284,11 @@ function bulkActions(selections, unselectAll) {
   return actions
 }
 
+function reload() {
+  unselectAllAction.value?.()
+  list.value?.reload()
+}
+
 onMounted(() => {
   if (!list.value?.data) return
   setupListActions(list.value.data, {
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index e3ed5b99..29a00d2d 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -86,10 +86,9 @@
   />
   <EditValueModal
     v-model="showEditModal"
-    v-model:unselectAll="unselectAllAction"
     doctype="CRM Organization"
     :selectedValues="selectedValues"
-    @reload="list.reload()"
+    @reload="reload"
   />
 </template>
 <script setup>
@@ -210,6 +209,11 @@ function bulkActions(selections, unselectAll) {
   return actions
 }
 
+function reload() {
+  unselectAllAction.value?.()
+  list.value?.reload()
+}
+
 onMounted(() => {
   if (!list.value?.data) return
   setupListActions(list.value.data, {
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index 43a945aa..63ceb354 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -99,10 +99,9 @@
   />
   <EditValueModal
     v-model="showEditModal"
-    v-model:unselectAll="unselectAllAction"
     doctype="CRM Task"
     :selectedValues="selectedValues"
-    @reload="list.reload()"
+    @reload="reload"
   />
 </template>
 <script setup>
@@ -228,6 +227,11 @@ function bulkActions(selections, unselectAll) {
   return actions
 }
 
+function reload() {
+  unselectAllAction.value?.()
+  list.value?.reload()
+}
+
 onMounted(() => {
   if (!list.value?.data) return
   setupListActions(list.value.data, {

From 657a2e76d0774fc32447a95a2f6eb1c0083786d4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 21:17:42 +0530
Subject: [PATCH 02/16] fix: pass doctype as a prop

---
 frontend/src/components/Modals/AssignmentModal.vue | 11 ++++++++---
 frontend/src/pages/Deal.vue                        |  1 +
 frontend/src/pages/Lead.vue                        |  1 +
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Modals/AssignmentModal.vue b/frontend/src/components/Modals/AssignmentModal.vue
index d9c3b9fa..83cbf5b1 100644
--- a/frontend/src/components/Modals/AssignmentModal.vue
+++ b/frontend/src/components/Modals/AssignmentModal.vue
@@ -27,6 +27,7 @@
         value=""
         doctype="User"
         @change="(option) => addValue(option) && ($refs.input.value = '')"
+        :placeholder="__('John Doe')"
         :hideMe="true"
       >
         <template #item-prefix="{ option }">
@@ -83,6 +84,10 @@ const props = defineProps({
     type: Object,
     default: null,
   },
+  doctype: {
+    type: String,
+    default: '',
+  },
 })
 
 const show = defineModel()
@@ -101,7 +106,7 @@ const removeValue = (value) => {
 
 const owner = computed(() => {
   if (!props.doc) return ''
-  if (props.doc.doctype == 'CRM Lead') return props.doc.lead_owner
+  if (props.doctype == 'CRM Lead') return props.doc.lead_owner
   return props.doc.deal_owner
 })
 
@@ -137,7 +142,7 @@ function updateAssignees() {
   if (removedAssignees.length) {
     for (let a of removedAssignees) {
       call('frappe.desk.form.assign_to.remove', {
-        doctype: props.doc.doctype,
+        doctype: props.doctype,
         name: props.doc.name,
         assign_to: a,
       })
@@ -146,7 +151,7 @@ function updateAssignees() {
 
   if (addedAssignees.length) {
     call('frappe.desk.form.assign_to.add', {
-      doctype: props.doc.doctype,
+      doctype: props.doctype,
       name: props.doc.name,
       assign_to: addedAssignees,
     })
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 3d849b09..a8b04997 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -280,6 +280,7 @@
   <AssignmentModal
     v-if="deal.data"
     :doc="deal.data"
+    doctype="CRM Deal"
     v-model="showAssignmentModal"
     v-model:assignees="deal.data._assignedTo"
   />
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 5c983292..eeeda16e 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -186,6 +186,7 @@
   <AssignmentModal
     v-if="lead.data"
     :doc="lead.data"
+    doctype="CRM Lead"
     v-model="showAssignmentModal"
     v-model:assignees="lead.data._assignedTo"
   />

From 49178f5321f92b55e6481a6b2f83f458c2ae1e40 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 21:18:51 +0530
Subject: [PATCH 03/16] fix: removed unused model

---
 frontend/src/components/Modals/EditValueModal.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/components/Modals/EditValueModal.vue b/frontend/src/components/Modals/EditValueModal.vue
index 3d918d96..0a9e2851 100644
--- a/frontend/src/components/Modals/EditValueModal.vue
+++ b/frontend/src/components/Modals/EditValueModal.vue
@@ -59,7 +59,6 @@ const props = defineProps({
 })
 
 const show = defineModel()
-const unselectAll = defineModel('unselectAll')
 
 const emit = defineEmits(['reload'])
 
@@ -114,7 +113,6 @@ function updateValues() {
     newValue.value = ''
     loading.value = false
     show.value = false
-    unselectAll.value()
     emit('reload')
   })
 }

From 458e5c1a64c63e68a91f610a592f05f3c589fa54 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 21:19:25 +0530
Subject: [PATCH 04/16] feat: Bulk assign from listview

---
 .../components/ListViews/LeadsListView.vue    | 22 +++++++++++++++
 .../src/components/Modals/AssignmentModal.vue | 28 +++++++++++++++----
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index f00f3685..54c8742f 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -145,6 +145,14 @@
     :selectedValues="selectedValues"
     @reload="reload"
   />
+  <AssignmentModal
+    v-if="selectedValues"
+    :docs="selectedValues"
+    doctype="CRM Lead"
+    v-model="showAssignmentModal"
+    v-model:assignees="bulkAssignees"
+    @reload="reload"
+  />
 </template>
 
 <script setup>
@@ -152,6 +160,7 @@ import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import EditValueModal from '@/components/Modals/EditValueModal.vue'
+import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
 import {
   Avatar,
   ListView,
@@ -252,6 +261,15 @@ function deleteValues(selections, unselectAll) {
   })
 }
 
+const showAssignmentModal = ref(false)
+const bulkAssignees = ref([])
+
+function assignValues(selections, unselectAll) {
+  showAssignmentModal.value = true
+  selectedValues.value = selections
+  unselectAllAction.value = unselectAll
+}
+
 const customBulkActions = ref([])
 const customListActions = ref([])
 
@@ -265,6 +283,10 @@ function bulkActions(selections, unselectAll) {
       label: __('Delete'),
       onClick: () => deleteValues(selections, unselectAll),
     },
+    {
+      label: __('Assign To'),
+      onClick: () => assignValues(selections, unselectAll),
+    },
   ]
   customBulkActions.value.forEach((action) => {
     actions.push({
diff --git a/frontend/src/components/Modals/AssignmentModal.vue b/frontend/src/components/Modals/AssignmentModal.vue
index 83cbf5b1..0e1a9682 100644
--- a/frontend/src/components/Modals/AssignmentModal.vue
+++ b/frontend/src/components/Modals/AssignmentModal.vue
@@ -84,12 +84,18 @@ const props = defineProps({
     type: Object,
     default: null,
   },
+  docs: {
+    type: Array,
+    default: () => [],
+  },
   doctype: {
     type: String,
     default: '',
   },
 })
 
+const emit = defineEmits(['reload'])
+
 const show = defineModel()
 const assignees = defineModel('assignees')
 const oldAssignees = ref([])
@@ -150,11 +156,23 @@ function updateAssignees() {
   }
 
   if (addedAssignees.length) {
-    call('frappe.desk.form.assign_to.add', {
-      doctype: props.doctype,
-      name: props.doc.name,
-      assign_to: addedAssignees,
-    })
+    if (props.docs.size) {
+      call('frappe.desk.form.assign_to.add_multiple', {
+        doctype: props.doctype,
+        name: JSON.stringify(Array.from(props.docs)),
+        assign_to: addedAssignees,
+        bulk_assign: true,
+        re_assign: true,
+      }).then(() => {
+        emit('reload')
+      })
+    } else {
+      call('frappe.desk.form.assign_to.add', {
+        doctype: props.doctype,
+        name: props.doc.name,
+        assign_to: addedAssignees,
+      })
+    }
   }
   show.value = false
 }

From 388114487640b614773f7f5cc7ccdcf23f93545c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 21:29:59 +0530
Subject: [PATCH 05/16] feat: Clear assignments from list view

---
 .../components/ListViews/LeadsListView.vue    | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index 54c8742f..303ecd9e 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -270,6 +270,39 @@ function assignValues(selections, unselectAll) {
   unselectAllAction.value = unselectAll
 }
 
+function clearAssignemnts(selections, unselectAll) {
+  $dialog({
+    title: __('Clear Assignment'),
+    message: __('Are you sure you want to clear assignment for {0} item(s)?', [
+      selections.size,
+    ]),
+    variant: 'solid',
+    theme: 'red',
+    actions: [
+      {
+        label: __('Clear Assignment'),
+        variant: 'solid',
+        theme: 'red',
+        onClick: (close) => {
+          call('frappe.desk.form.assign_to.remove_multiple', {
+            doctype: 'CRM Lead',
+            names: JSON.stringify(Array.from(selections)),
+            ignore_permissions: true,
+          }).then(() => {
+            createToast({
+              title: __('Assignment cleared successfully'),
+              icon: 'check',
+              iconClasses: 'text-green-600',
+            })
+            reload(unselectAll)
+            close()
+          })
+        },
+      },
+    ],
+  })
+}
+
 const customBulkActions = ref([])
 const customListActions = ref([])
 
@@ -287,6 +320,10 @@ function bulkActions(selections, unselectAll) {
       label: __('Assign To'),
       onClick: () => assignValues(selections, unselectAll),
     },
+    {
+      label: __('Clear Assignment'),
+      onClick: () => clearAssignemnts(selections, unselectAll),
+    },
   ]
   customBulkActions.value.forEach((action) => {
     actions.push({
@@ -306,8 +343,9 @@ function bulkActions(selections, unselectAll) {
   return actions
 }
 
-function reload() {
+function reload(unselectAll) {
   unselectAllAction.value?.()
+  unselectAll?.()
   list.value?.reload()
 }
 

From 7973b9ac3c60f9fa94440ebd6f91905d3b5a98ce Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 21:39:30 +0530
Subject: [PATCH 06/16] fix: show default assignee for lead & deal

---
 crm/api/doc.py                   | 9 +++++++--
 crm/fcrm/doctype/crm_deal/api.py | 2 +-
 crm/fcrm/doctype/crm_lead/api.py | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index b7b02511..b79de0c9 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -376,7 +376,7 @@ def get_type(field):
 		return "read_only"
 	return field.fieldtype.lower()
 
-def get_assigned_users(doctype, name):
+def get_assigned_users(doctype, name, default_assigned_to=None):
 	assigned_users = frappe.get_all(
 		"ToDo",
 		fields=["allocated_to"],
@@ -388,7 +388,12 @@ def get_assigned_users(doctype, name):
 		pluck="allocated_to",
 	)
 
-	return list(set(assigned_users))
+	users = list(set(assigned_users))
+
+	# if users is empty, add default_assigned_to
+	if not users and default_assigned_to:
+		users = [default_assigned_to]
+	return users
 
 
 @frappe.whitelist()
diff --git a/crm/fcrm/doctype/crm_deal/api.py b/crm/fcrm/doctype/crm_deal/api.py
index c05937bb..cb757b59 100644
--- a/crm/fcrm/doctype/crm_deal/api.py
+++ b/crm/fcrm/doctype/crm_deal/api.py
@@ -30,7 +30,7 @@ def get_deal(name):
 	deal["doctype_fields"], deal["all_fields"] = get_doctype_fields("CRM Deal", name) 
 	deal["doctype"] = "CRM Deal"
 	deal["_form_script"] = get_form_script('CRM Deal')
-	deal["_assign"] = get_assigned_users("CRM Deal", deal.name)
+	deal["_assign"] = get_assigned_users("CRM Deal", deal.name, deal.owner)
 	return deal
 
 @frappe.whitelist()
diff --git a/crm/fcrm/doctype/crm_lead/api.py b/crm/fcrm/doctype/crm_lead/api.py
index 74b6b7d1..b4dca9f7 100644
--- a/crm/fcrm/doctype/crm_lead/api.py
+++ b/crm/fcrm/doctype/crm_lead/api.py
@@ -18,5 +18,5 @@ def get_lead(name):
 	lead["doctype_fields"], lead["all_fields"] = get_doctype_fields("CRM Lead", name)
 	lead["doctype"] = "CRM Lead"
 	lead["_form_script"] = get_form_script('CRM Lead')
-	lead["_assign"] = get_assigned_users("CRM Lead", lead.name)
+	lead["_assign"] = get_assigned_users("CRM Lead", lead.name, lead.owner)
 	return lead

From 7bd6a19a05219a05990608437dcde8a4262f9f84 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 22:01:06 +0530
Subject: [PATCH 07/16] refactor: moved all list actions related code in one
 component

---
 frontend/src/components/ListBulkActions.vue   | 188 ++++++++++++++++++
 .../components/ListViews/LeadsListView.vue    | 175 +---------------
 2 files changed, 194 insertions(+), 169 deletions(-)
 create mode 100644 frontend/src/components/ListBulkActions.vue

diff --git a/frontend/src/components/ListBulkActions.vue b/frontend/src/components/ListBulkActions.vue
new file mode 100644
index 00000000..db07b4ba
--- /dev/null
+++ b/frontend/src/components/ListBulkActions.vue
@@ -0,0 +1,188 @@
+<template>
+  <EditValueModal
+    v-model="showEditModal"
+    :doctype="doctype"
+    :selectedValues="selectedValues"
+    @reload="reload"
+  />
+  <AssignmentModal
+    v-if="selectedValues"
+    :docs="selectedValues"
+    :doctype="doctype"
+    v-model="showAssignmentModal"
+    v-model:assignees="bulkAssignees"
+    @reload="reload"
+  />
+</template>
+
+<script setup>
+import EditValueModal from '@/components/Modals/EditValueModal.vue'
+import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import { setupListActions, createToast } from '@/utils'
+import { globalStore } from '@/stores/global'
+import { call } from 'frappe-ui'
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    default: '',
+  },
+})
+
+const list = defineModel()
+
+const router = useRouter()
+
+const { $dialog } = globalStore()
+
+const showEditModal = ref(false)
+const selectedValues = ref([])
+const unselectAllAction = ref(() => {})
+
+function editValues(selections, unselectAll) {
+  selectedValues.value = selections
+  showEditModal.value = true
+  unselectAllAction.value = unselectAll
+}
+
+function deleteValues(selections, unselectAll) {
+  $dialog({
+    title: __('Delete'),
+    message: __('Are you sure you want to delete {0} item(s)?', [
+      selections.size,
+    ]),
+    variant: 'solid',
+    theme: 'red',
+    actions: [
+      {
+        label: __('Delete'),
+        variant: 'solid',
+        theme: 'red',
+        onClick: (close) => {
+          call('frappe.desk.reportview.delete_items', {
+            items: JSON.stringify(Array.from(selections)),
+            doctype: props.doctype,
+          }).then(() => {
+            createToast({
+              title: __('Deleted successfully'),
+              icon: 'check',
+              iconClasses: 'text-green-600',
+            })
+            unselectAll()
+            list.value.reload()
+            close()
+          })
+        },
+      },
+    ],
+  })
+}
+
+const showAssignmentModal = ref(false)
+const bulkAssignees = ref([])
+
+function assignValues(selections, unselectAll) {
+  showAssignmentModal.value = true
+  selectedValues.value = selections
+  unselectAllAction.value = unselectAll
+}
+
+function clearAssignemnts(selections, unselectAll) {
+  $dialog({
+    title: __('Clear Assignment'),
+    message: __('Are you sure you want to clear assignment for {0} item(s)?', [
+      selections.size,
+    ]),
+    variant: 'solid',
+    theme: 'red',
+    actions: [
+      {
+        label: __('Clear Assignment'),
+        variant: 'solid',
+        theme: 'red',
+        onClick: (close) => {
+          call('frappe.desk.form.assign_to.remove_multiple', {
+            doctype: props.doctype,
+            names: JSON.stringify(Array.from(selections)),
+            ignore_permissions: true,
+          }).then(() => {
+            createToast({
+              title: __('Assignment cleared successfully'),
+              icon: 'check',
+              iconClasses: 'text-green-600',
+            })
+            reload(unselectAll)
+            close()
+          })
+        },
+      },
+    ],
+  })
+}
+
+const customBulkActions = ref([])
+const customListActions = ref([])
+
+function bulkActions(selections, unselectAll) {
+  let actions = [
+    {
+      label: __('Edit'),
+      onClick: () => editValues(selections, unselectAll),
+    },
+    {
+      label: __('Delete'),
+      onClick: () => deleteValues(selections, unselectAll),
+    },
+    {
+      label: __('Assign To'),
+      onClick: () => assignValues(selections, unselectAll),
+    },
+    {
+      label: __('Clear Assignment'),
+      onClick: () => clearAssignemnts(selections, unselectAll),
+    },
+  ]
+  customBulkActions.value.forEach((action) => {
+    actions.push({
+      label: __(action.label),
+      onClick: () =>
+        action.onClick({
+          list: list.value,
+          selections,
+          unselectAll,
+          call,
+          createToast,
+          $dialog,
+          router,
+        }),
+    })
+  })
+  return actions
+}
+
+function reload(unselectAll) {
+  unselectAllAction.value?.()
+  unselectAll?.()
+  list.value?.reload()
+}
+
+onMounted(() => {
+  if (!list.value?.data) return
+  setupListActions(list.value.data, {
+    list: list.value,
+    call,
+    createToast,
+    $dialog,
+    router,
+  })
+  customBulkActions.value = list.value?.data?.bulkActions || []
+  customListActions.value = list.value?.data?.listActions || []
+})
+
+defineExpose({
+  bulkActions,
+  customListActions,
+})
+</script>
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index 303ecd9e..1855e85e 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -123,7 +123,7 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown :options="listBulkActionsRef.bulkActions(selections, unselectAll)">
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -139,28 +139,14 @@
     }"
     @loadMore="emit('loadMore')"
   />
-  <EditValueModal
-    v-model="showEditModal"
-    doctype="CRM Lead"
-    :selectedValues="selectedValues"
-    @reload="reload"
-  />
-  <AssignmentModal
-    v-if="selectedValues"
-    :docs="selectedValues"
-    doctype="CRM Lead"
-    v-model="showAssignmentModal"
-    v-model:assignees="bulkAssignees"
-    @reload="reload"
-  />
+  <ListBulkActions ref="listBulkActionsRef" v-model="list" doctype="CRM Lead" />
 </template>
 
 <script setup>
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
-import EditValueModal from '@/components/Modals/EditValueModal.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
@@ -171,13 +157,9 @@ import {
   ListRowItem,
   ListFooter,
   Dropdown,
-  call,
   Tooltip,
 } from 'frappe-ui'
-import { setupListActions, createToast } from '@/utils'
-import { globalStore } from '@/stores/global'
-import { onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -210,159 +192,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const showEditModal = ref(false)
-const selectedValues = ref([])
-const unselectAllAction = ref(() => {})
-
-function editValues(selections, unselectAll) {
-  selectedValues.value = selections
-  showEditModal.value = true
-  unselectAllAction.value = unselectAll
-}
-
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [
-      selections.size,
-    ]),
-    variant: 'danger',
-    actions: [
-      {
-        label: __('Delete'),
-        variant: 'solid',
-        theme: 'red',
-        onClick: (close) => {
-          call('frappe.desk.reportview.delete_items', {
-            items: JSON.stringify(Array.from(selections)),
-            doctype: 'CRM Lead',
-          }).then(() => {
-            createToast({
-              title: __('Deleted successfully'),
-              icon: 'check',
-              iconClasses: 'text-green-600',
-            })
-            unselectAll()
-            list.value.reload()
-            close()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const showAssignmentModal = ref(false)
-const bulkAssignees = ref([])
-
-function assignValues(selections, unselectAll) {
-  showAssignmentModal.value = true
-  selectedValues.value = selections
-  unselectAllAction.value = unselectAll
-}
-
-function clearAssignemnts(selections, unselectAll) {
-  $dialog({
-    title: __('Clear Assignment'),
-    message: __('Are you sure you want to clear assignment for {0} item(s)?', [
-      selections.size,
-    ]),
-    variant: 'solid',
-    theme: 'red',
-    actions: [
-      {
-        label: __('Clear Assignment'),
-        variant: 'solid',
-        theme: 'red',
-        onClick: (close) => {
-          call('frappe.desk.form.assign_to.remove_multiple', {
-            doctype: 'CRM Lead',
-            names: JSON.stringify(Array.from(selections)),
-            ignore_permissions: true,
-          }).then(() => {
-            createToast({
-              title: __('Assignment cleared successfully'),
-              icon: 'check',
-              iconClasses: 'text-green-600',
-            })
-            reload(unselectAll)
-            close()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customBulkActions = ref([])
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: __('Edit'),
-      onClick: () => editValues(selections, unselectAll),
-    },
-    {
-      label: __('Delete'),
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-    {
-      label: __('Assign To'),
-      onClick: () => assignValues(selections, unselectAll),
-    },
-    {
-      label: __('Clear Assignment'),
-      onClick: () => clearAssignemnts(selections, unselectAll),
-    },
-  ]
-  customBulkActions.value.forEach((action) => {
-    actions.push({
-      label: __(action.label),
-      onClick: () =>
-        action.onClick({
-          list: list.value,
-          selections,
-          unselectAll,
-          call,
-          createToast,
-          $dialog,
-          router,
-        }),
-    })
-  })
-  return actions
-}
-
-function reload(unselectAll) {
-  unselectAllAction.value?.()
-  unselectAll?.()
-  list.value?.reload()
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>

From d518a4709fd92c0c51b2bc3e057b03aed7ce9203 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 22:13:58 +0530
Subject: [PATCH 08/16] fix: implemented ListBulkAction component in Deal List
 View

---
 .../components/ListViews/DealsListView.vue    | 117 ++----------------
 1 file changed, 8 insertions(+), 109 deletions(-)

diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 3769895b..8388c180 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -114,7 +114,9 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown
+          :options="listBulkActionsRef.bulkActions(selections, unselectAll)"
+        >
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -130,19 +132,14 @@
     }"
     @loadMore="emit('loadMore')"
   />
-  <EditValueModal
-    v-model="showEditModal"
-    doctype="CRM Deal"
-    :selectedValues="selectedValues"
-    @reload="reload"
-  />
+  <ListBulkActions ref="listBulkActionsRef" v-model="list" doctype="CRM Deal" />
 </template>
 
 <script setup>
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import EditValueModal from '@/components/Modals/EditValueModal.vue'
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
@@ -153,13 +150,9 @@ import {
   ListSelectBanner,
   ListFooter,
   Dropdown,
-  call,
   Tooltip,
 } from 'frappe-ui'
-import { setupListActions, createToast } from '@/utils'
-import { globalStore } from '@/stores/global'
-import { onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -192,108 +185,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const showEditModal = ref(false)
-const selectedValues = ref([])
-const unselectAllAction = ref(() => {})
-
-function editValues(selections, unselectAll) {
-  selectedValues.value = selections
-  showEditModal.value = true
-  unselectAllAction.value = unselectAll
-}
-
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [
-      selections.size,
-    ]),
-    variant: 'danger',
-    actions: [
-      {
-        label: __('Delete'),
-        variant: 'solid',
-        theme: 'red',
-        onClick: (close) => {
-          call('frappe.desk.reportview.delete_items', {
-            items: JSON.stringify(Array.from(selections)),
-            doctype: 'CRM Deal',
-          }).then(() => {
-            createToast({
-              title: __('Deleted successfully'),
-              icon: 'check',
-              iconClasses: 'text-green-600',
-            })
-            unselectAll()
-            list.value.reload()
-            close()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customBulkActions = ref([])
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: __('Edit'),
-      onClick: () => editValues(selections, unselectAll),
-    },
-    {
-      label: __('Delete'),
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  customBulkActions.value.forEach((action) => {
-    actions.push({
-      label: __(action.label),
-      onClick: () =>
-        action.onClick({
-          list: list.value,
-          selections,
-          unselectAll,
-          call,
-          createToast,
-          $dialog,
-          router,
-        }),
-    })
-  })
-  return actions
-}
-
-function reload() {
-  unselectAllAction.value?.()
-  list.value?.reload()
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>

From 8f1637ffa10d0fea814a11cd5a702f204cba05f5 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 22:14:25 +0530
Subject: [PATCH 09/16] fix: allow hiding some bulk actions

---
 frontend/src/components/ListBulkActions.vue | 37 +++++++++++++++------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/ListBulkActions.vue b/frontend/src/components/ListBulkActions.vue
index db07b4ba..ad33a0ab 100644
--- a/frontend/src/components/ListBulkActions.vue
+++ b/frontend/src/components/ListBulkActions.vue
@@ -29,6 +29,14 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  options: {
+    type: Object,
+    default: () => ({
+      hideEdit: false,
+      hideDelete: false,
+      hideAssign: false,
+    }),
+  },
 })
 
 const list = defineModel()
@@ -126,24 +134,33 @@ const customBulkActions = ref([])
 const customListActions = ref([])
 
 function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
+  let actions = []
+  debugger
+  if (!props.options.hideEdit) {
+    actions.push({
       label: __('Edit'),
       onClick: () => editValues(selections, unselectAll),
-    },
-    {
+    })
+  }
+
+  if (!props.options.hideDelete) {
+    actions.push({
       label: __('Delete'),
       onClick: () => deleteValues(selections, unselectAll),
-    },
-    {
+    })
+  }
+
+  if (!props.options.hideAssign) {
+    actions.push({
       label: __('Assign To'),
       onClick: () => assignValues(selections, unselectAll),
-    },
-    {
+    })
+    actions.push({
       label: __('Clear Assignment'),
       onClick: () => clearAssignemnts(selections, unselectAll),
-    },
-  ]
+    })
+  }
+
   customBulkActions.value.forEach((action) => {
     actions.push({
       label: __(action.label),

From f34e9bdaeb30e0fda1fe47f19a42bf0fed4bf547 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 22:26:25 +0530
Subject: [PATCH 10/16] fix: select options not working

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

diff --git a/frontend/src/components/Modals/EditValueModal.vue b/frontend/src/components/Modals/EditValueModal.vue
index 0a9e2851..9f60a6fa 100644
--- a/frontend/src/components/Modals/EditValueModal.vue
+++ b/frontend/src/components/Modals/EditValueModal.vue
@@ -128,6 +128,10 @@ function updateValue(v) {
   newValue.value = value
 }
 
+function getSelectOptions(options) {
+  return options.split('\n')
+}
+
 function getValueComponent(f) {
   const { type, options } = f
   if (typeSelect.includes(type) || typeCheck.includes(type)) {
@@ -138,6 +142,7 @@ function getValueComponent(f) {
         label: o,
         value: o,
       })),
+      modelValue: newValue.value,
     })
   } else if (typeLink.includes(type)) {
     if (type == 'Dynamic Link') {

From e291f2068c737d9acf08caf1a1746dba43517f83 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 22:32:44 +0530
Subject: [PATCH 11/16] fix: implemented ListBulkAction component in all List
 View

---
 frontend/src/components/ListBulkActions.vue   |   2 +-
 .../components/ListViews/CallLogsListView.vue |  99 +++--------------
 .../components/ListViews/ContactsListView.vue | 104 +++---------------
 .../ListViews/EmailTemplatesListView.vue      | 102 ++---------------
 .../ListViews/OrganizationsListView.vue       | 104 +++---------------
 .../components/ListViews/TasksListView.vue    | 102 ++---------------
 6 files changed, 65 insertions(+), 448 deletions(-)

diff --git a/frontend/src/components/ListBulkActions.vue b/frontend/src/components/ListBulkActions.vue
index ad33a0ab..6b54b15d 100644
--- a/frontend/src/components/ListBulkActions.vue
+++ b/frontend/src/components/ListBulkActions.vue
@@ -135,7 +135,7 @@ const customListActions = ref([])
 
 function bulkActions(selections, unselectAll) {
   let actions = []
-  debugger
+
   if (!props.options.hideEdit) {
     actions.push({
       label: __('Edit'),
diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index d4381818..e3aa425a 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -80,7 +80,9 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown
+          :options="listBulkActionsRef.bulkActions(selections, unselectAll)"
+        >
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -95,8 +97,18 @@
     }"
     @loadMore="emit('loadMore')"
   />
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
+    doctype="CRM Call Log"
+    :options="{
+      hideEdit: true,
+      hideAssign: true,
+    }"
+  />
 </template>
 <script setup>
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
@@ -108,12 +120,8 @@ import {
   ListFooter,
   Tooltip,
   Dropdown,
-  call,
 } from 'frappe-ui'
-import { setupListActions, createToast } from '@/utils'
-import { globalStore } from '@/stores/global'
-import { onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -146,89 +154,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: 'Delete',
-    message: `Are you sure you want to delete ${selections.size} item${
-      selections.size > 1 ? 's' : ''
-    }?`,
-    variant: 'danger',
-    actions: [
-      {
-        label: 'Delete',
-        variant: 'solid',
-        theme: 'red',
-        onClick: (close) => {
-          call('frappe.desk.reportview.delete_items', {
-            items: JSON.stringify(Array.from(selections)),
-            doctype: 'CRM Call Log',
-          }).then(() => {
-            createToast({
-              title: 'Deleted successfully',
-              icon: 'check',
-              iconClasses: 'text-green-600',
-            })
-            unselectAll()
-            list.value.reload()
-            close()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customBulkActions = ref([])
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: 'Delete',
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  customBulkActions.value.forEach((action) => {
-    actions.push({
-      label: action.label,
-      onClick: () =>
-        action.onClick({
-          list: list.value,
-          selections,
-          unselectAll,
-          call,
-          createToast,
-          $dialog,
-          router,
-        }),
-    })
-  })
-  return actions
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index e1169ae5..4a192497 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -82,7 +82,9 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown
+          :options="listBulkActionsRef.bulkActions(selections, unselectAll)"
+        >
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -98,18 +100,18 @@
     }"
     @loadMore="emit('loadMore')"
   />
-  <EditValueModal
-    v-model="showEditModal"
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
     doctype="Contact"
-    :selectedValues="selectedValues"
-    @reload="reload"
+    :options="{
+      hideAssign: true,
+    }"
   />
 </template>
 <script setup>
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import EditValueModal from '@/components/Modals/EditValueModal.vue'
-import { globalStore } from '@/stores/global'
-import { setupListActions, createToast } from '@/utils'
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
@@ -121,10 +123,8 @@ import {
   ListFooter,
   Tooltip,
   Dropdown,
-  call,
 } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -157,92 +157,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const showEditModal = ref(false)
-const selectedValues = ref([])
-const unselectAllAction = ref(() => {})
-
-function editValues(selections, unselectAll) {
-  selectedValues.value = selections
-  showEditModal.value = true
-  unselectAllAction.value = unselectAll
-}
-
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [
-      selections.size,
-    ]),
-    variant: 'danger',
-    actions: [
-      {
-        label: __('Delete'),
-        variant: 'solid',
-        theme: 'red',
-        onClick: (close) => {
-          call('frappe.desk.reportview.delete_items', {
-            items: JSON.stringify(Array.from(selections)),
-            doctype: 'Contact',
-          }).then(() => {
-            createToast({
-              title: __('Deleted successfully'),
-              icon: 'check',
-              iconClasses: 'text-green-600',
-            })
-            unselectAll()
-            list.value.reload()
-            close()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: __('Edit'),
-      onClick: () => editValues(selections, unselectAll),
-    },
-    {
-      label: __('Delete'),
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  return actions
-}
-
-function reload() {
-  unselectAllAction.value?.()
-  list.value?.reload()
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  // customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index 22625af9..52f3b4b0 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -69,7 +69,7 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown :options="listBulkActionsRef.bulkActions(selections, unselectAll)">
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -84,17 +84,17 @@
     }"
     @loadMore="emit('loadMore')"
   />
-  <EditValueModal
-    v-model="showEditModal"
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
     doctype="Email Template"
-    :selectedValues="selectedValues"
-    @reload="reload"
+    :options="{
+      hideAssign: true,
+    }"
   />
 </template>
 <script setup>
-import EditValueModal from '@/components/Modals/EditValueModal.vue'
-import { globalStore } from '@/stores/global'
-import { setupListActions, createToast } from '@/utils'
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   ListView,
   ListHeader,
@@ -104,11 +104,9 @@ import {
   ListRowItem,
   ListFooter,
   Dropdown,
-  call,
   Tooltip,
 } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -142,92 +140,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const showEditModal = ref(false)
-const selectedValues = ref([])
-const unselectAllAction = ref(() => {})
-
-function editValues(selections, unselectAll) {
-  selectedValues.value = selections
-  showEditModal.value = true
-  unselectAllAction.value = unselectAll
-}
-
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [
-      selections.size,
-    ]),
-    variant: 'danger',
-    actions: [
-      {
-        label: __('Delete'),
-        variant: 'solid',
-        theme: 'red',
-        onClick: (close) => {
-          call('frappe.desk.reportview.delete_items', {
-            items: JSON.stringify(Array.from(selections)),
-            doctype: 'Email Template',
-          }).then(() => {
-            createToast({
-              title: __('Deleted successfully'),
-              icon: 'check',
-              iconClasses: 'text-green-600',
-            })
-            unselectAll()
-            list.value.reload()
-            close()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: __('Edit'),
-      onClick: () => editValues(selections, unselectAll),
-    },
-    {
-      label: __('Delete'),
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  return actions
-}
-
-function reload() {
-  unselectAllAction.value?.()
-  list.value?.reload()
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  // customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index 29a00d2d..7a3509e0 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -69,7 +69,9 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown
+          :options="listBulkActionsRef.bulkActions(selections, unselectAll)"
+        >
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -84,17 +86,17 @@
     }"
     @loadMore="emit('loadMore')"
   />
-  <EditValueModal
-    v-model="showEditModal"
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
     doctype="CRM Organization"
-    :selectedValues="selectedValues"
-    @reload="reload"
+    :options="{
+      hideAssign: true,
+    }"
   />
 </template>
 <script setup>
-import EditValueModal from '@/components/Modals/EditValueModal.vue'
-import { globalStore } from '@/stores/global'
-import { setupListActions, createToast } from '@/utils'
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
@@ -106,10 +108,8 @@ import {
   ListFooter,
   Tooltip,
   Dropdown,
-  call,
 } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -142,92 +142,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const showEditModal = ref(false)
-const selectedValues = ref([])
-const unselectAllAction = ref(() => {})
-
-function editValues(selections, unselectAll) {
-  selectedValues.value = selections
-  showEditModal.value = true
-  unselectAllAction.value = unselectAll
-}
-
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [
-      selections.size,
-    ]),
-    variant: 'danger',
-    actions: [
-      {
-        label: __('Delete'),
-        variant: 'solid',
-        theme: 'red',
-        onClick: (close) => {
-          call('frappe.desk.reportview.delete_items', {
-            items: JSON.stringify(Array.from(selections)),
-            doctype: 'CRM Organization',
-          }).then(() => {
-            createToast({
-              title: __('Deleted successfully'),
-              icon: 'check',
-              iconClasses: 'text-green-600',
-            })
-            unselectAll()
-            list.value.reload()
-            close()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: __('Edit'),
-      onClick: () => editValues(selections, unselectAll),
-    },
-    {
-      label: __('Delete'),
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  return actions
-}
-
-function reload() {
-  unselectAllAction.value?.()
-  list.value?.reload()
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  // customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index 63ceb354..103a1a52 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -82,7 +82,7 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown :options="listBulkActionsRef.bulkActions(selections, unselectAll)">
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -97,21 +97,21 @@
     }"
     @loadMore="emit('loadMore')"
   />
-  <EditValueModal
-    v-model="showEditModal"
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
     doctype="CRM Task"
-    :selectedValues="selectedValues"
-    @reload="reload"
+    :options="{
+      hideAssign: true,
+    }"
   />
 </template>
 <script setup>
 import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
-import EditValueModal from '@/components/Modals/EditValueModal.vue'
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import { dateFormat } from '@/utils'
-import { globalStore } from '@/stores/global'
-import { setupListActions, createToast } from '@/utils'
 import {
   Avatar,
   ListView,
@@ -122,11 +122,9 @@ import {
   ListRowItem,
   ListFooter,
   Dropdown,
-  call,
   Tooltip,
 } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -160,92 +158,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const showEditModal = ref(false)
-const selectedValues = ref([])
-const unselectAllAction = ref(() => {})
-
-function editValues(selections, unselectAll) {
-  selectedValues.value = selections
-  showEditModal.value = true
-  unselectAllAction.value = unselectAll
-}
-
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [
-      selections.size,
-    ]),
-    variant: 'danger',
-    actions: [
-      {
-        label: __('Delete'),
-        variant: 'solid',
-        theme: 'red',
-        onClick: (close) => {
-          call('frappe.desk.reportview.delete_items', {
-            items: JSON.stringify(Array.from(selections)),
-            doctype: 'CRM Task',
-          }).then(() => {
-            createToast({
-              title: __('Deleted successfully'),
-              icon: 'check',
-              iconClasses: 'text-green-600',
-            })
-            unselectAll()
-            list.value.reload()
-            close()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: __('Edit'),
-      onClick: () => editValues(selections, unselectAll),
-    },
-    {
-      label: __('Delete'),
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  return actions
-}
-
-function reload() {
-  unselectAllAction.value?.()
-  list.value?.reload()
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  // customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>

From b0bf281007ac5e57ac64744ed23189241c632ab6 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 21 May 2024 11:18:48 +0530
Subject: [PATCH 12/16] revert: set first response to none

---
 crm/fcrm/doctype/crm_deal/crm_deal.py | 4 ++--
 crm/fcrm/doctype/crm_lead/crm_lead.py | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.py b/crm/fcrm/doctype/crm_deal/crm_deal.py
index d303c572..d4e3fcaa 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.py
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.py
@@ -108,8 +108,8 @@ class CRMDeal(Document):
 		"""
 		sla = get_sla(self)
 		if not sla:
-			self.first_responded_on = None
-			self.first_response_time = None
+			# self.first_responded_on = None
+			# self.first_response_time = None
 			return
 		self.sla = sla.name
 
diff --git a/crm/fcrm/doctype/crm_lead/crm_lead.py b/crm/fcrm/doctype/crm_lead/crm_lead.py
index b8160525..0ec3ad81 100644
--- a/crm/fcrm/doctype/crm_lead/crm_lead.py
+++ b/crm/fcrm/doctype/crm_lead/crm_lead.py
@@ -234,8 +234,8 @@ class CRMLead(Document):
 		"""
 		sla = get_sla(self)
 		if not sla:
-			self.first_responded_on = None
-			self.first_response_time = None
+			# self.first_responded_on = None
+			# self.first_response_time = None
 			return
 		self.sla = sla.name
 

From 979481c379193b2ff8b745bab9bbafb90c41603e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 21 May 2024 16:42:07 +0530
Subject: [PATCH 13/16] fix: remove default icon

---
 frontend/src/components/IconPicker.vue  | 6 +-----
 frontend/src/components/WhatsAppBox.vue | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/IconPicker.vue b/frontend/src/components/IconPicker.vue
index 29fee1b7..c1249d25 100644
--- a/frontend/src/components/IconPicker.vue
+++ b/frontend/src/components/IconPicker.vue
@@ -66,7 +66,7 @@
 <script setup>
 import { gemoji } from 'gemoji'
 import { Popover } from 'frappe-ui'
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed } from 'vue'
 
 const search = ref('')
 const emoji = defineModel()
@@ -109,9 +109,5 @@ function randomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min)
 }
 
-onMounted(() => {
-  if (!emoji.value) setRandom()
-})
-
 defineExpose({ setRandom })
 </script>
diff --git a/frontend/src/components/WhatsAppBox.vue b/frontend/src/components/WhatsAppBox.vue
index c3a1aa4c..76e88eac 100644
--- a/frontend/src/components/WhatsAppBox.vue
+++ b/frontend/src/components/WhatsAppBox.vue
@@ -67,7 +67,7 @@ import IconPicker from '@/components/IconPicker.vue'
 import SmileIcon from '@/components/Icons/SmileIcon.vue'
 import { createResource, Textarea, FileUploader, Dropdown } from 'frappe-ui'
 import FeatherIcon from 'frappe-ui/src/components/FeatherIcon.vue'
-import { ref, computed, nextTick, watch } from 'vue'
+import { ref, nextTick, watch } from 'vue'
 
 const props = defineProps({
   doctype: String,

From ef2a007319bf45f00f05f7fd9ad0bc4a9e5c1b19 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 21 May 2024 16:53:12 +0530
Subject: [PATCH 14/16] feat: Added comment tab

---
 frontend/src/components/Activities.vue        | 87 ++++++++++++++++++-
 frontend/src/components/CommunicationArea.vue |  2 +-
 2 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index a5c441da..c0157e95 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -15,6 +15,16 @@
       </template>
       <span>{{ __('New Email') }}</span>
     </Button>
+    <Button
+      v-else-if="title == 'Comments'"
+      variant="solid"
+      @click="$refs.emailBox.showComment = true"
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ __('New Comment') }}</span>
+    </Button>
     <Button
       v-else-if="title == 'Calls'"
       variant="solid"
@@ -146,6 +156,62 @@
         </div>
       </div>
     </div>
+    <div v-else-if="title == 'Comments'" class="activity pb-5">
+      <div v-for="(comment, i) in activities">
+        <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10">
+          <div
+            class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
+            :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
+          >
+            <div
+              class="z-10 flex h-7 w-7 items-center justify-center rounded bg-gray-100"
+            >
+              <CommentIcon class="text-gray-800" />
+            </div>
+          </div>
+          <div class="mb-4" :id="comment.name">
+            <div
+              class="mb-0.5 flex items-start justify-stretch gap-2 py-1.5 text-base"
+            >
+              <div class="inline-flex flex-wrap gap-1 text-gray-600">
+                <span class="font-medium text-gray-800">
+                  {{ comment.owner_name }}
+                </span>
+                <span>{{ __('added a') }}</span>
+                <span class="max-w-xs truncate font-medium text-gray-800">
+                  {{ __('comment') }}
+                </span>
+              </div>
+              <div class="ml-auto whitespace-nowrap">
+                <Tooltip
+                  :text="dateFormat(comment.creation, dateTooltipFormat)"
+                >
+                  <div class="text-sm text-gray-600">
+                    {{ __(timeAgo(comment.creation)) }}
+                  </div>
+                </Tooltip>
+              </div>
+            </div>
+            <div
+              class="cursor-pointer rounded bg-gray-50 px-4 py-3 text-base leading-6 transition-all duration-300 ease-in-out"
+            >
+              <div class="prose-f" v-html="comment.content" />
+              <div
+                v-if="comment.attachments.length"
+                class="mt-2 flex flex-wrap gap-2"
+              >
+                <AttachmentItem
+                  v-for="a in comment.attachments"
+                  :key="a.file_url"
+                  :label="a.file_name"
+                  :url="a.file_url"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div v-else-if="title == 'Tasks'" class="activity px-10 pb-5">
       <div v-for="(task, i) in activities">
         <div
@@ -756,6 +822,11 @@
       :label="__('New Email')"
       @click="$refs.emailBox.show = true"
     />
+    <Button
+      v-else-if="title == 'Comments'"
+      :label="__('New Comment')"
+      @click="$refs.emailBox.showComment = true"
+    />
     <Button
       v-else-if="title == 'Tasks'"
       :label="__('Create Task')"
@@ -764,7 +835,7 @@
   </div>
   <CommunicationArea
     ref="emailBox"
-    v-if="['Emails', 'Activity'].includes(title)"
+    v-if="['Emails', 'Comments', 'Activity'].includes(title)"
     v-model="doc"
     v-model:reload="reload_email"
     :doctype="doctype"
@@ -983,6 +1054,11 @@ const defaultActions = computed(() => {
       label: __('New Email'),
       onClick: () => (emailBox.value.show = true),
     },
+    {
+      icon: h(CommentIcon, { class: 'h-4 w-4' }),
+      label: __('New Comment'),
+      onClick: () => (emailBox.value.showComment = true),
+    },
     {
       icon: h(PhoneIcon, { class: 'h-4 w-4' }),
       label: __('Make a Call'),
@@ -1027,6 +1103,11 @@ const activities = computed(() => {
     activities = all_activities.data.versions.filter(
       (activity) => activity.activity_type === 'communication'
     )
+  } else if (props.title == 'Comments') {
+    if (!all_activities.data?.versions) return []
+    activities = all_activities.data.versions.filter(
+      (activity) => activity.activity_type === 'comment'
+    )
   } else if (props.title == 'Calls') {
     if (!all_activities.data?.calls) return []
     return sortByCreation(all_activities.data.calls)
@@ -1089,6 +1170,8 @@ const emptyText = computed(() => {
   let text = 'No Activities'
   if (props.title == 'Emails') {
     text = 'No Email Communications'
+  } else if (props.title == 'Comments') {
+    text = 'No Comments'
   } else if (props.title == 'Calls') {
     text = 'No Call Logs'
   } else if (props.title == 'Notes') {
@@ -1105,6 +1188,8 @@ const emptyTextIcon = computed(() => {
   let icon = ActivityIcon
   if (props.title == 'Emails') {
     icon = EmailIcon
+  } else if (props.title == 'Comments') {
+    icon = CommentIcon
   } else if (props.title == 'Calls') {
     icon = PhoneIcon
   } else if (props.title == 'Notes') {
diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index dc18f3d3..07d3676f 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -248,5 +248,5 @@ function toggleCommentBox() {
   showCommentBox.value = !showCommentBox.value
 }
 
-defineExpose({ show: showEmailBox, editor: newEmailEditor })
+defineExpose({ show: showEmailBox, showComment: showCommentBox, editor: newEmailEditor })
 </script>

From 239c028aeb1fd47885ef5e6eac212f8e89bd3f2c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 21 May 2024 16:53:50 +0530
Subject: [PATCH 15/16] fix: added comment tab in lead

---
 frontend/src/pages/Lead.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index eeeda16e..9eabfb6d 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -261,6 +261,7 @@
 import Resizer from '@/components/Resizer.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
+import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
@@ -417,6 +418,11 @@ const tabs = computed(() => {
       label: __('Emails'),
       icon: EmailIcon,
     },
+    {
+      name: 'Comments',
+      label: __('Comments'),
+      icon: CommentIcon,
+    },
     {
       name: 'Calls',
       label: __('Calls'),

From e5ef98dba7cf8911e91c558634d138a4b9362e20 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 21 May 2024 16:55:57 +0530
Subject: [PATCH 16/16] fix: added comment tab in deal

---
 frontend/src/pages/Deal.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index a8b04997..9e352291 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -290,6 +290,7 @@ import Resizer from '@/components/Resizer.vue'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
+import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
@@ -448,6 +449,11 @@ const tabs = computed(() => {
       label: __('Emails'),
       icon: EmailIcon,
     },
+    {
+      name: 'Comments',
+      label: __('Comments'),
+      icon: CommentIcon,
+    },
     {
       name: 'Calls',
       label: __('Calls'),