From 819a669922b9105d7978d6b3242f1c2f0c4353d9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 31 Jul 2025 13:32:31 +0530
Subject: [PATCH 01/10] refactor: simplify AssignmentModal component by
 streamlining dialog options and enhancing assignee management

---
 .../src/components/Modals/AssignmentModal.vue | 102 ++++++++++--------
 1 file changed, 56 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/Modals/AssignmentModal.vue b/frontend/src/components/Modals/AssignmentModal.vue
index c6fc6dfd..12e23417 100644
--- a/frontend/src/components/Modals/AssignmentModal.vue
+++ b/frontend/src/components/Modals/AssignmentModal.vue
@@ -1,53 +1,11 @@
 <template>
   <Dialog
     v-model="show"
-    :options="{
-      title: __('Assign To'),
-      size: 'xl',
-      actions: [
-        {
-          label: __('Cancel'),
-          variant: 'subtle',
-          onClick: () => {
-            assignees = [...oldAssignees]
-            show = false
-          },
-        },
-        {
-          label: __('Update'),
-          variant: 'solid',
-          onClick: () => updateAssignees(),
-        },
-      ],
-    }"
-    @close="
-      () => {
-        assignees = [...oldAssignees]
-      }
-    "
+    :options="{ title: __('Assign To'), size: 'xl' }"
+    @close="() => (assignees = [...oldAssignees])"
   >
     <template #body-content>
-      <Link
-        class="form-control"
-        value=""
-        doctype="User"
-        @change="(option) => addValue(option) && ($refs.input.value = '')"
-        :placeholder="__('John Doe')"
-        :filters="{ name: ['in', users.data.crmUsers?.map((user) => user.name)] }"
-        :hideMe="true"
-      >
-        <template #item-prefix="{ option }">
-          <UserAvatar class="mr-2" :user="option.value" size="sm" />
-        </template>
-        <template #item-label="{ option }">
-          <Tooltip :text="option.value">
-            <div class="cursor-pointer text-ink-gray-9">
-              {{ getUser(option.value).full_name }}
-            </div>
-          </Tooltip>
-        </template>
-      </Link>
-      <div class="mt-3 flex flex-wrap items-center gap-2">
+      <div class="flex flex-wrap items-center gap-2">
         <Tooltip
           :text="assignee.name"
           v-for="assignee in assignees"
@@ -69,8 +27,60 @@
             </Button>
           </div>
         </Tooltip>
+        <Link
+          class="form-control"
+          value=""
+          doctype="User"
+          @change="(option) => addValue(option) && ($refs.input.value = '')"
+          :placeholder="__('John Doe')"
+          :filters="{
+            name: ['in', users.data.crmUsers?.map((user) => user.name)],
+          }"
+          :hideMe="true"
+        >
+          <template #target="{ togglePopover }">
+            <Button
+              :label="__('Add assignee')"
+              variant="subtle"
+              icon-left="plus"
+              @click.stop="togglePopover"
+            />
+          </template>
+          <template #item-prefix="{ option }">
+            <UserAvatar class="mr-2" :user="option.value" size="sm" />
+          </template>
+          <template #item-label="{ option }">
+            <Tooltip :text="option.value">
+              <div class="cursor-pointer text-ink-gray-9">
+                {{ getUser(option.value).full_name }}
+              </div>
+            </Tooltip>
+          </template>
+        </Link>
+      </div>
+    </template>
+    <template #actions>
+      <div class="flex justify-between items-center gap-2">
+        <div><ErrorMessage :message="__(error)" /></div>
+        <div class="flex items-center justify-end gap-2">
+          <Button
+            variant="subtle"
+            :label="__('Cancel')"
+            @click="
+              () => {
+                assignees = [...oldAssignees]
+                show = false
+              }
+            "
+          />
+          <Button
+            variant="solid"
+            :label="__('Update')"
+            @click="updateAssignees()"
+            :disabled="!assignees.length"
+          />
+        </div>
       </div>
-      <ErrorMessage class="mt-2" v-if="error" :message="__(error)" />
     </template>
   </Dialog>
 </template>

From 995f3564193ec1a44c2a6bfa344e734bce415a46 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 1 Aug 2025 12:50:22 +0530
Subject: [PATCH 02/10] refactor: Assign to as popover instead of dialog

---
 frontend/components.d.ts                 |   1 +
 frontend/src/components/AssignTo.vue     |  41 ++---
 frontend/src/components/AssignToBody.vue | 196 +++++++++++++++++++++++
 3 files changed, 219 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/AssignToBody.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index afedd3ed..05dfca54 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -25,6 +25,7 @@ declare module 'vue' {
     AscendingIcon: typeof import('./src/components/Icons/AscendingIcon.vue')['default']
     AssignmentModal: typeof import('./src/components/Modals/AssignmentModal.vue')['default']
     AssignTo: typeof import('./src/components/AssignTo.vue')['default']
+    AssignToBody: typeof import('./src/components/AssignToBody.vue')['default']
     AttachmentArea: typeof import('./src/components/Activities/AttachmentArea.vue')['default']
     AttachmentIcon: typeof import('./src/components/Icons/AttachmentIcon.vue')['default']
     AttachmentItem: typeof import('./src/components/AttachmentItem.vue')['default']
diff --git a/frontend/src/components/AssignTo.vue b/frontend/src/components/AssignTo.vue
index 1f42df3a..dcd5cf9d 100644
--- a/frontend/src/components/AssignTo.vue
+++ b/frontend/src/components/AssignTo.vue
@@ -1,31 +1,34 @@
 <template>
-  <component
-    v-if="assignees?.length"
-    :is="assignees?.length == 1 ? 'Button' : 'div'"
-  >
-    <MultipleAvatar :avatars="assignees" @click="showAssignmentModal = true" />
-  </component>
-  <Button v-else @click="showAssignmentModal = true">
-    {{ __('Assign to') }}
-  </Button>
-  <AssignmentModal
-    v-if="showAssignmentModal"
-    v-model="showAssignmentModal"
-    v-model:assignees="assignees"
-    :doctype="doctype"
-    :doc="data"
-  />
+  <NestedPopover>
+    <template #target>
+      <component
+        v-if="assignees?.length"
+        :is="assignees?.length == 1 ? 'Button' : 'div'"
+      >
+        <MultipleAvatar :avatars="assignees" />
+      </component>
+      <Button v-else :label="__('Assign to')" />
+    </template>
+    <template #body="{ open }">
+      <AssignToBody
+        v-show="open"
+        v-model="assignees"
+        :doc="data"
+        :doctype="doctype"
+        :open="open"
+      />
+    </template>
+  </NestedPopover>
 </template>
 <script setup>
+import NestedPopover from '@/components/NestedPopover.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
-import { ref } from 'vue'
+import AssignToBody from '@/components/AssignToBody.vue'
 
 const props = defineProps({
   data: Object,
   doctype: String,
 })
 
-const showAssignmentModal = ref(false)
 const assignees = defineModel()
 </script>
diff --git a/frontend/src/components/AssignToBody.vue b/frontend/src/components/AssignToBody.vue
new file mode 100644
index 00000000..dc71dbea
--- /dev/null
+++ b/frontend/src/components/AssignToBody.vue
@@ -0,0 +1,196 @@
+<template>
+  <div
+    class="flex flex-col gap-2 my-2 w-96 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black p-3 ring-opacity-5 focus:outline-none"
+  >
+    <div class="text-base text-ink-gray-5">{{ __('Assign to') }}</div>
+    <Link
+      class="form-control"
+      value=""
+      doctype="User"
+      @change="(option) => addValue(option) && ($refs.input.value = '')"
+      :placeholder="__('John Doe')"
+      :filters="{
+        name: ['in', users.data.crmUsers?.map((user) => user.name)],
+      }"
+      :hideMe="true"
+    >
+      <template #target="{ togglePopover }">
+        <div
+          class="w-full min-h-12 flex flex-wrap items-center gap-1.5 p-1.5 pb-5 rounded-lg bg-surface-gray-2 cursor-text"
+          @click.stop="togglePopover"
+        >
+          <Tooltip
+            :text="assignee.name"
+            v-for="assignee in assignees"
+            :key="assignee.name"
+            @click.stop
+          >
+            <div>
+              <div
+                class="flex items-center text-sm text-ink-gray-6 border border-outline-gray-1 bg-surface-white rounded-full hover:bg-surface-white !p-0.5"
+                @click.stop
+              >
+                <UserAvatar :user="assignee.name" size="sm" />
+                <div class="ml-1">{{ getUser(assignee.name).full_name }}</div>
+                <Button
+                  variant="ghost"
+                  class="rounded-full !size-4 m-1"
+                  @click.stop="removeValue(assignee.name)"
+                >
+                  <template #icon>
+                    <FeatherIcon name="x" class="h-3 w-3 text-ink-gray-6" />
+                  </template>
+                </Button>
+              </div>
+            </div>
+          </Tooltip>
+        </div>
+      </template>
+      <template #item-prefix="{ option }">
+        <UserAvatar class="mr-2" :user="option.value" size="sm" />
+      </template>
+      <template #item-label="{ option }">
+        <Tooltip :text="option.value">
+          <div class="cursor-pointer text-ink-gray-9">
+            {{ getUser(option.value).full_name }}
+          </div>
+        </Tooltip>
+      </template>
+    </Link>
+    <div class="flex items-center justify-between gap-2">
+      <div
+        class="text-base text-ink-gray-5 cursor-pointer select-none"
+        @click="assignToMe = !assignToMe"
+      >
+        {{ __('Assign to me') }}
+      </div>
+      <Switch v-model="assignToMe" @click.stop />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import UserAvatar from '@/components/UserAvatar.vue'
+import Link from '@/components/Controls/Link.vue'
+import { usersStore } from '@/stores/users'
+import { capture } from '@/telemetry'
+import { Tooltip, call, Switch, toast } from 'frappe-ui'
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  doc: {
+    type: Object,
+    default: null,
+  },
+  doctype: {
+    type: String,
+    default: '',
+  },
+  open: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['reload'])
+
+const assignees = defineModel()
+const oldAssignees = ref([])
+const assignToMe = ref(false)
+
+const error = ref('')
+const ownerRemoved = ref(false)
+
+const { users, getUser } = usersStore()
+
+const owner = computed(() => {
+  if (!props.doc) return ''
+  if (props.doctype == 'CRM Lead') return props.doc.lead_owner
+  return props.doc.deal_owner
+})
+
+const removeValue = (value) => {
+  if (value === getUser('').name) {
+    assignToMe.value = false
+  }
+
+  assignees.value = assignees.value.filter(
+    (assignee) => assignee.name !== value,
+  )
+}
+
+const addValue = (value) => {
+  error.value = ''
+  let obj = {
+    name: value,
+    image: getUser(value).user_image,
+    label: getUser(value).full_name,
+  }
+  if (!assignees.value.find((assignee) => assignee.name === value)) {
+    assignees.value.push(obj)
+  }
+}
+
+watch(assignToMe, (val) => {
+  let user = getUser('')
+  if (val) {
+    addValue(user.name)
+  } else {
+    removeValue(user.name)
+  }
+})
+
+watch(
+  () => props.open,
+  (val) => {
+    ownerRemoved.value = false
+    if (val) {
+      oldAssignees.value = [...(assignees.value || [])]
+
+      assignToMe.value = assignees.value.some(
+        (assignee) => assignee.name === getUser('').name,
+      )
+    } else {
+      updateAssignees()
+    }
+  },
+)
+
+async function updateAssignees() {
+  const removedAssignees = oldAssignees.value
+    .filter(
+      (assignee) => !assignees.value.find((a) => a.name === assignee.name),
+    )
+    .map((assignee) => assignee.name)
+
+  const addedAssignees = assignees.value
+    .filter(
+      (assignee) => !oldAssignees.value.find((a) => a.name === assignee.name),
+    )
+    .map((assignee) => assignee.name)
+
+  if (removedAssignees.length) {
+    if (!ownerRemoved.value && removedAssignees.includes(owner.value)) {
+      ownerRemoved.value = true
+      return
+    }
+
+    await call('crm.api.doc.remove_assignments', {
+      doctype: props.doctype,
+      name: props.doc.name,
+      assignees: JSON.stringify(removedAssignees),
+    })
+    toast.success(__('Assignees removed successfully.'))
+  }
+
+  if (addedAssignees.length) {
+    capture('assign_to', { doctype: props.doctype })
+    call('frappe.desk.form.assign_to.add', {
+      doctype: props.doctype,
+      name: props.doc.name,
+      assign_to: addedAssignees,
+    })
+    toast.success(__('Assignees added successfully.'))
+  }
+}
+</script>

From aeb3f150c58a24396824037f01ccf09624bdcc01 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 1 Aug 2025 12:54:16 +0530
Subject: [PATCH 03/10] refactor: assignment modal for bulk assign

---
 .../src/components/Modals/AssignmentModal.vue | 108 +++++++++---------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/frontend/src/components/Modals/AssignmentModal.vue b/frontend/src/components/Modals/AssignmentModal.vue
index 12e23417..0a0533dd 100644
--- a/frontend/src/components/Modals/AssignmentModal.vue
+++ b/frontend/src/components/Modals/AssignmentModal.vue
@@ -5,59 +5,60 @@
     @close="() => (assignees = [...oldAssignees])"
   >
     <template #body-content>
-      <div class="flex flex-wrap items-center gap-2">
-        <Tooltip
-          :text="assignee.name"
-          v-for="assignee in assignees"
-          :key="assignee.name"
-        >
-          <div>
-            <Button :label="getUser(assignee.name).full_name" theme="gray">
-              <template #prefix>
-                <UserAvatar :user="assignee.name" size="sm" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  v-if="assignee.name !== owner"
-                  class="h-3.5"
-                  name="x"
-                  @click.stop="removeValue(assignee.name)"
-                />
-              </template>
-            </Button>
-          </div>
-        </Tooltip>
-        <Link
-          class="form-control"
-          value=""
-          doctype="User"
-          @change="(option) => addValue(option) && ($refs.input.value = '')"
-          :placeholder="__('John Doe')"
-          :filters="{
-            name: ['in', users.data.crmUsers?.map((user) => user.name)],
-          }"
-          :hideMe="true"
-        >
-          <template #target="{ togglePopover }">
-            <Button
-              :label="__('Add assignee')"
-              variant="subtle"
-              icon-left="plus"
-              @click.stop="togglePopover"
-            />
-          </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 }}
+      <Link
+        class="form-control"
+        value=""
+        doctype="User"
+        @change="(option) => addValue(option) && ($refs.input.value = '')"
+        :placeholder="__('John Doe')"
+        :filters="{
+          name: ['in', users.data.crmUsers?.map((user) => user.name)],
+        }"
+        :hideMe="true"
+      >
+        <template #target="{ togglePopover }">
+          <div
+            class="w-full min-h-12 flex flex-wrap items-center gap-1.5 p-1.5 pb-5 rounded-lg bg-surface-gray-2 cursor-text"
+            @click.stop="togglePopover"
+          >
+            <Tooltip
+              :text="assignee.name"
+              v-for="assignee in assignees"
+              :key="assignee.name"
+              @click.stop
+            >
+              <div>
+                <div
+                  class="flex items-center text-sm text-ink-gray-6 border border-outline-gray-1 bg-surface-white rounded-full hover:bg-surface-white !p-0.5"
+                  @click.stop
+                >
+                  <UserAvatar :user="assignee.name" size="sm" />
+                  <div class="ml-1">{{ getUser(assignee.name).full_name }}</div>
+                  <Button
+                    variant="ghost"
+                    class="rounded-full !size-4 m-1"
+                    @click.stop="removeValue(assignee.name)"
+                  >
+                    <template #icon>
+                      <FeatherIcon name="x" class="h-3 w-3 text-ink-gray-6" />
+                    </template>
+                  </Button>
+                </div>
               </div>
             </Tooltip>
-          </template>
-        </Link>
-      </div>
+          </div>
+        </template>
+        <template #item-prefix="{ option }">
+          <UserAvatar class="mr-2" :user="option.value" size="sm" />
+        </template>
+        <template #item-label="{ option }">
+          <Tooltip :text="option.value">
+            <div class="cursor-pointer text-ink-gray-9">
+              {{ getUser(option.value).full_name }}
+            </div>
+          </Tooltip>
+        </template>
+      </Link>
     </template>
     <template #actions>
       <div class="flex justify-between items-center gap-2">
@@ -77,7 +78,6 @@
             variant="solid"
             :label="__('Update')"
             @click="updateAssignees()"
-            :disabled="!assignees.length"
           />
         </div>
       </div>
@@ -142,7 +142,7 @@ const addValue = (value) => {
   }
 }
 
-function updateAssignees() {
+async function updateAssignees() {
   const removedAssignees = oldAssignees.value
     .filter(
       (assignee) => !assignees.value.find((a) => a.name === assignee.name),
@@ -156,7 +156,7 @@ function updateAssignees() {
     .map((assignee) => assignee.name)
 
   if (removedAssignees.length) {
-    call('crm.api.doc.remove_assignments', {
+    await call('crm.api.doc.remove_assignments', {
       doctype: props.doctype,
       name: props.doc.name,
       assignees: JSON.stringify(removedAssignees),

From 5010cccc7158dca670530c564a4a4b01067e090f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 1 Aug 2025 13:03:14 +0530
Subject: [PATCH 04/10] refactor: replace json.loads with frappe.parse_json for
 assignees in remove_assignments function

---
 crm/api/doc.py                           | 2 +-
 frontend/src/components/AssignToBody.vue | 9 +--------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index 74227b68..afa2f2a6 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -663,7 +663,7 @@ def get_fields_meta(doctype, restricted_fieldtypes=None, as_array=False, only_re
 
 @frappe.whitelist()
 def remove_assignments(doctype, name, assignees, ignore_permissions=False):
-	assignees = json.loads(assignees)
+	assignees = frappe.parse_json(assignees)
 
 	if not assignees:
 		return
diff --git a/frontend/src/components/AssignToBody.vue b/frontend/src/components/AssignToBody.vue
index dc71dbea..223d1fb4 100644
--- a/frontend/src/components/AssignToBody.vue
+++ b/frontend/src/components/AssignToBody.vue
@@ -99,7 +99,6 @@ const oldAssignees = ref([])
 const assignToMe = ref(false)
 
 const error = ref('')
-const ownerRemoved = ref(false)
 
 const { users, getUser } = usersStore()
 
@@ -143,7 +142,6 @@ watch(assignToMe, (val) => {
 watch(
   () => props.open,
   (val) => {
-    ownerRemoved.value = false
     if (val) {
       oldAssignees.value = [...(assignees.value || [])]
 
@@ -170,15 +168,10 @@ async function updateAssignees() {
     .map((assignee) => assignee.name)
 
   if (removedAssignees.length) {
-    if (!ownerRemoved.value && removedAssignees.includes(owner.value)) {
-      ownerRemoved.value = true
-      return
-    }
-
     await call('crm.api.doc.remove_assignments', {
       doctype: props.doctype,
       name: props.doc.name,
-      assignees: JSON.stringify(removedAssignees),
+      assignees: removedAssignees,
     })
     toast.success(__('Assignees removed successfully.'))
   }

From 3ed2c4812a98f6a08f21276e27d09070987af048 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 1 Aug 2025 16:52:51 +0530
Subject: [PATCH 05/10] refactor: do not update modified field

---
 crm/api/todo.py | 137 ++++++++++++++++++++++--------------------------
 1 file changed, 63 insertions(+), 74 deletions(-)

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

From faef5cb86629ace8a113bd5dc06cfaa272d55e88 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 1 Aug 2025 16:56:06 +0530
Subject: [PATCH 06/10] refactor: update AssignTo component to use docname prop
 and streamline assignment logic

---
 .../src/components/Activities/CallArea.vue    |  5 +-
 frontend/src/components/AssignTo.vue          | 68 ++++++++++++++-
 frontend/src/components/AssignToBody.vue      | 85 ++++++++++++-------
 frontend/src/pages/Deal.vue                   |  2 +-
 frontend/src/pages/Lead.vue                   |  2 +-
 frontend/src/pages/MobileDeal.vue             |  2 +-
 frontend/src/pages/MobileLead.vue             |  2 +-
 7 files changed, 129 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/Activities/CallArea.vue b/frontend/src/components/Activities/CallArea.vue
index d7771879..4a1ae469 100644
--- a/frontend/src/components/Activities/CallArea.vue
+++ b/frontend/src/components/Activities/CallArea.vue
@@ -1,5 +1,5 @@
 <template>
-  <div @click="showCallLogDetailModal = true" class="cursor-pointer">
+  <div>
     <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
       <div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
         <Avatar
@@ -25,7 +25,8 @@
       </div>
     </div>
     <div
-      class="flex flex-col gap-2 border border-outline-gray-modals rounded-md bg-surface-cards px-3 py-2.5 text-ink-gray-9"
+      @click="showCallLogDetailModal = true"
+      class="flex flex-col gap-2 border cursor-pointer border-outline-gray-modals rounded-md bg-surface-cards px-3 py-2.5 text-ink-gray-9"
     >
       <div class="flex items-center justify-between">
         <div class="inline-flex gap-2 items-center text-base font-medium">
diff --git a/frontend/src/components/AssignTo.vue b/frontend/src/components/AssignTo.vue
index dcd5cf9d..6e9e2bdc 100644
--- a/frontend/src/components/AssignTo.vue
+++ b/frontend/src/components/AssignTo.vue
@@ -13,9 +13,10 @@
       <AssignToBody
         v-show="open"
         v-model="assignees"
-        :doc="data"
+        :docname="docname"
         :doctype="doctype"
         :open="open"
+        :onUpdate="ownerField && saveAssignees"
       />
     </template>
   </NestedPopover>
@@ -24,11 +25,74 @@
 import NestedPopover from '@/components/NestedPopover.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import AssignToBody from '@/components/AssignToBody.vue'
+import { useDocument } from '@/data/document'
+import { toast } from 'frappe-ui'
+import { computed } from 'vue'
 
 const props = defineProps({
-  data: Object,
   doctype: String,
+  docname: String,
 })
 
+const { document } = useDocument(props.doctype, props.docname)
+
 const assignees = defineModel()
+
+const ownerField = computed(() => {
+  if (props.doctype === 'CRM Lead') {
+    return 'lead_owner'
+  } else if (props.doctype === 'CRM Deal') {
+    return 'deal_owner'
+  } else {
+    return null
+  }
+})
+
+async function saveAssignees(
+  addedAssignees,
+  removedAssignees,
+  addAssignees,
+  removeAssignees,
+) {
+  removedAssignees.length && (await removeAssignees.submit(removedAssignees))
+  addedAssignees.length && (await addAssignees.submit(addedAssignees))
+
+  const nextAssignee = assignees.value.find(
+    (a) => a.name !== document.doc[ownerField.value],
+  )
+
+  let owner = ownerField.value.replace('_', ' ')
+
+  if (
+    document.doc[ownerField.value] &&
+    removedAssignees.includes(document.doc[ownerField.value])
+  ) {
+    document.doc[ownerField.value] = nextAssignee ? nextAssignee.name : ''
+    document.save.submit()
+
+    if (nextAssignee) {
+      toast.info(
+        __(
+          'Since you removed {0} from the assignee, the {0} has been changed to the next available assignee {1}.',
+          [owner, nextAssignee.label || nextAssignee.name],
+        ),
+      )
+    } else {
+      toast.info(
+        __(
+          'Since you removed {0} from the assignee, the {0} has also been removed.',
+          [owner],
+        ),
+      )
+    }
+  } else if (!document.doc[ownerField.value] && nextAssignee) {
+    document.doc[ownerField.value] = nextAssignee ? nextAssignee.name : ''
+    toast.info(
+      __('Since you added a new assignee, the {0} has been set to {1}.', [
+        owner,
+        nextAssignee.label || nextAssignee.name,
+      ]),
+    )
+  }
+}
 </script>
diff --git a/frontend/src/components/AssignToBody.vue b/frontend/src/components/AssignToBody.vue
index 223d1fb4..675417cf 100644
--- a/frontend/src/components/AssignToBody.vue
+++ b/frontend/src/components/AssignToBody.vue
@@ -74,22 +74,26 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
-import { Tooltip, call, Switch, toast } from 'frappe-ui'
-import { ref, computed, watch } from 'vue'
+import { Tooltip, Switch, toast, createResource } from 'frappe-ui'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
-  doc: {
-    type: Object,
-    default: null,
-  },
   doctype: {
     type: String,
     default: '',
   },
+  docname: {
+    type: Object,
+    default: null,
+  },
   open: {
     type: Boolean,
     default: false,
   },
+  onUpdate: {
+    type: Function,
+    default: null,
+  },
 })
 
 const emit = defineEmits(['reload'])
@@ -102,12 +106,6 @@ const error = ref('')
 
 const { users, getUser } = usersStore()
 
-const owner = computed(() => {
-  if (!props.doc) return ''
-  if (props.doctype == 'CRM Lead') return props.doc.lead_owner
-  return props.doc.deal_owner
-})
-
 const removeValue = (value) => {
   if (value === getUser('').name) {
     assignToMe.value = false
@@ -119,6 +117,10 @@ const removeValue = (value) => {
 }
 
 const addValue = (value) => {
+  if (value === getUser('').name) {
+    assignToMe.value = true
+  }
+
   error.value = ''
   let obj = {
     name: value,
@@ -155,6 +157,9 @@ watch(
 )
 
 async function updateAssignees() {
+  if (JSON.stringify(oldAssignees.value) === JSON.stringify(assignees.value))
+    return
+
   const removedAssignees = oldAssignees.value
     .filter(
       (assignee) => !assignees.value.find((a) => a.name === assignee.name),
@@ -167,23 +172,45 @@ async function updateAssignees() {
     )
     .map((assignee) => assignee.name)
 
-  if (removedAssignees.length) {
-    await call('crm.api.doc.remove_assignments', {
-      doctype: props.doctype,
-      name: props.doc.name,
-      assignees: removedAssignees,
-    })
-    toast.success(__('Assignees removed successfully.'))
-  }
-
-  if (addedAssignees.length) {
-    capture('assign_to', { doctype: props.doctype })
-    call('frappe.desk.form.assign_to.add', {
-      doctype: props.doctype,
-      name: props.doc.name,
-      assign_to: addedAssignees,
-    })
-    toast.success(__('Assignees added successfully.'))
+  if (props.onUpdate) {
+    props.onUpdate(
+      addedAssignees,
+      removedAssignees,
+      addAssignees,
+      removeAssignees,
+    )
+  } else {
+    if (removedAssignees.length) {
+      await removeAssignees.submit(removedAssignees)
+    }
+    if (addedAssignees.length) {
+      addAssignees.submit(addedAssignees)
+    }
   }
 }
+
+const addAssignees = createResource({
+  url: 'frappe.desk.form.assign_to.add',
+  makeParams: (addedAssignees) => ({
+    doctype: props.doctype,
+    name: props.docname,
+    assign_to: addedAssignees,
+  }),
+  onSuccess: () => {
+    capture('assign_to', { doctype: props.doctype })
+    toast.success(__('Assignees added successfully.'))
+  },
+})
+
+const removeAssignees = createResource({
+  url: 'crm.api.doc.remove_assignments',
+  makeParams: (removedAssignees) => ({
+    doctype: props.doctype,
+    name: props.docname,
+    assignees: removedAssignees,
+  }),
+  onSuccess: () => {
+    toast.success(__('Assignees removed successfully.'))
+  },
+})
 </script>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 7c8e9605..80212a72 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -16,7 +16,7 @@
         v-if="document.actions?.length"
         :actions="document.actions"
       />
-      <AssignTo v-model="assignees.data" :data="doc" doctype="CRM Deal" />
+      <AssignTo v-model="assignees.data" doctype="CRM Lead" :docname="dealId" />
       <Dropdown
         v-if="doc"
         :options="
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 7fd52dad..c2cc4d1f 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -16,7 +16,7 @@
         v-if="document.actions?.length"
         :actions="document.actions"
       />
-      <AssignTo v-model="assignees.data" :data="doc" doctype="CRM Lead" />
+      <AssignTo v-model="assignees.data" doctype="CRM Lead" :docname="leadId" />
       <Dropdown
         v-if="doc"
         :options="
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index dbe52f54..ca709b03 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -42,7 +42,7 @@
     v-if="doc.name"
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
-    <AssignTo v-model="assignees.data" :data="doc" doctype="CRM Deal" />
+    <AssignTo v-model="assignees.data" doctype="CRM Lead" :docname="dealId" />
     <div class="flex items-center gap-2">
       <CustomActions
         v-if="document._actions?.length"
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index 26669ad0..8f6a4cef 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -42,7 +42,7 @@
     v-if="doc.name"
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
-    <AssignTo v-model="assignees.data" :data="doc" doctype="CRM Lead" />
+    <AssignTo v-model="assignees.data" doctype="CRM Lead" :docname="leadId" />
     <div class="flex items-center gap-2">
       <CustomActions
         v-if="document._actions?.length"

From 564d2b1ac5bdee71d4b54b6ef672cd08ae2a87a1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 1 Aug 2025 17:37:02 +0530
Subject: [PATCH 07/10] refactor: update AssignTo component to use correct
 doctype for CRM Deal

---
 frontend/src/components/AssignTo.vue     | 16 +++++++++-------
 frontend/src/components/AssignToBody.vue |  8 ++------
 frontend/src/pages/Deal.vue              |  2 +-
 frontend/src/pages/MobileDeal.vue        |  2 +-
 4 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/AssignTo.vue b/frontend/src/components/AssignTo.vue
index 6e9e2bdc..96d29cb6 100644
--- a/frontend/src/components/AssignTo.vue
+++ b/frontend/src/components/AssignTo.vue
@@ -1,13 +1,15 @@
 <template>
   <NestedPopover>
     <template #target>
-      <component
-        v-if="assignees?.length"
-        :is="assignees?.length == 1 ? 'Button' : 'div'"
-      >
-        <MultipleAvatar :avatars="assignees" />
-      </component>
-      <Button v-else :label="__('Assign to')" />
+      <div class="flex items-center">
+        <component
+          v-if="assignees?.length"
+          :is="assignees?.length == 1 ? 'Button' : 'div'"
+        >
+          <MultipleAvatar :avatars="assignees" />
+        </component>
+        <Button v-else :label="__('Assign to')" />
+      </div>
     </template>
     <template #body="{ open }">
       <AssignToBody
diff --git a/frontend/src/components/AssignToBody.vue b/frontend/src/components/AssignToBody.vue
index 675417cf..e4e226b0 100644
--- a/frontend/src/components/AssignToBody.vue
+++ b/frontend/src/components/AssignToBody.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col gap-2 my-2 w-96 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black p-3 ring-opacity-5 focus:outline-none"
+    class="flex flex-col gap-2 my-2 w-[470px] rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black p-3 ring-opacity-5 focus:outline-none"
   >
     <div class="text-base text-ink-gray-5">{{ __('Assign to') }}</div>
     <Link
@@ -27,7 +27,7 @@
           >
             <div>
               <div
-                class="flex items-center text-sm text-ink-gray-6 border border-outline-gray-1 bg-surface-white rounded-full hover:bg-surface-white !p-0.5"
+                class="flex items-center text-sm p-0.5 text-ink-gray-6 border border-outline-gray-1 bg-surface-modal rounded-full cursor-pointer"
                 @click.stop
               >
                 <UserAvatar :user="assignee.name" size="sm" />
@@ -198,7 +198,6 @@ const addAssignees = createResource({
   }),
   onSuccess: () => {
     capture('assign_to', { doctype: props.doctype })
-    toast.success(__('Assignees added successfully.'))
   },
 })
 
@@ -209,8 +208,5 @@ const removeAssignees = createResource({
     name: props.docname,
     assignees: removedAssignees,
   }),
-  onSuccess: () => {
-    toast.success(__('Assignees removed successfully.'))
-  },
 })
 </script>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 80212a72..e11bff77 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -16,7 +16,7 @@
         v-if="document.actions?.length"
         :actions="document.actions"
       />
-      <AssignTo v-model="assignees.data" doctype="CRM Lead" :docname="dealId" />
+      <AssignTo v-model="assignees.data" doctype="CRM Deal" :docname="dealId" />
       <Dropdown
         v-if="doc"
         :options="
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index ca709b03..32d6b4c9 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -42,7 +42,7 @@
     v-if="doc.name"
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
-    <AssignTo v-model="assignees.data" doctype="CRM Lead" :docname="dealId" />
+    <AssignTo v-model="assignees.data" doctype="CRM Deal" :docname="dealId" />
     <div class="flex items-center gap-2">
       <CustomActions
         v-if="document._actions?.length"

From 76149b0c79f70fc903516bb3665312d01873f381 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 1 Aug 2025 17:44:35 +0530
Subject: [PATCH 08/10] refactor: update Activities component to scroll on
 success

---
 frontend/components.d.ts                          | 1 +
 frontend/src/components/Activities/Activities.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 05dfca54..8b1b706a 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -173,6 +173,7 @@ declare module 'vue' {
     LucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     LucidePenLine: typeof import('~icons/lucide/pen-line')['default']
     LucideRefreshCcw: typeof import('~icons/lucide/refresh-ccw')['default']
+    LucideX: typeof import('~icons/lucide/x')['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']
diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 32528416..5e8e3e7e 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -555,6 +555,7 @@ const all_activities = createResource({
   transform: ([versions, calls, notes, tasks, attachments]) => {
     return { versions, calls, notes, tasks, attachments }
   },
+  onSuccess: () => nextTick(() => scroll()),
 })
 
 const showWhatsappTemplates = ref(false)

From 4c1eaf507d9ea095ada7277d1a3ae8850184e961 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 1 Aug 2025 17:56:07 +0530
Subject: [PATCH 09/10] refactor: update z-index values for activity components
 for better layering

---
 frontend/src/components/Activities/Activities.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 5e8e3e7e..44396a49 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -50,11 +50,11 @@
             class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-3 sm:gap-4 sm:px-10"
           >
             <div
-              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-outline-gray-modals"
+              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:border-l after:border-outline-gray-modals"
               :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
             >
               <div
-                class="z-10 flex h-8 w-7 items-center justify-center bg-surface-white"
+                class="z-[1] flex h-8 w-7 items-center justify-center bg-surface-white"
               >
                 <CommentIcon class="text-ink-gray-8" />
               </div>
@@ -72,11 +72,11 @@
             class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 sm:px-10"
           >
             <div
-              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-outline-gray-modals"
+              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:border-l after:border-outline-gray-modals"
               :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
             >
               <div
-                class="z-10 flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
+                class="z-[1] flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
               >
                 <MissedCallIcon
                   v-if="call.status == 'No Answer'"
@@ -116,11 +116,11 @@
       >
         <div
           v-if="['Activity', 'Emails'].includes(title)"
-          class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-outline-gray-modals"
+          class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:border-l before:border-outline-gray-modals"
           :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
         >
           <div
-            class="z-10 flex h-7 w-7 items-center justify-center bg-surface-white"
+            class="z-[1] flex h-7 w-7 items-center justify-center bg-surface-white"
             :class="{
               'mt-2.5': ['communication'].includes(activity.activity_type),
               'bg-surface-white': ['added', 'removed', 'changed'].includes(

From 2a18a556bf6fbefc6aee2d10c3e7e9d529f33298 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 4 Aug 2025 12:30:48 +0530
Subject: [PATCH 10/10] refactor: update Activities component for improved
 z-index layering

---
 frontend/auto-imports.d.ts                    | 10 ++++++++++
 .../src/components/Activities/Activities.vue  | 20 +++++++++++--------
 2 files changed, 22 insertions(+), 8 deletions(-)
 create mode 100644 frontend/auto-imports.d.ts

diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
new file mode 100644
index 00000000..9d240079
--- /dev/null
+++ b/frontend/auto-imports.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}
diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 44396a49..2c8d0341 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -50,11 +50,13 @@
             class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-3 sm:gap-4 sm:px-10"
           >
             <div
-              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:border-l after:border-outline-gray-modals"
-              :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
+              class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
+              :class="
+                i != activities.length - 1 ? 'before:h-full' : 'before:h-4'
+              "
             >
               <div
-                class="z-[1] flex h-8 w-7 items-center justify-center bg-surface-white"
+                class="flex h-8 w-7 items-center justify-center bg-surface-white"
               >
                 <CommentIcon class="text-ink-gray-8" />
               </div>
@@ -72,11 +74,13 @@
             class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 sm:px-10"
           >
             <div
-              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:border-l after:border-outline-gray-modals"
-              :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
+              class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
+              :class="
+                i != activities.length - 1 ? 'before:h-full' : 'before:h-4'
+              "
             >
               <div
-                class="z-[1] flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
+                class="flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
               >
                 <MissedCallIcon
                   v-if="call.status == 'No Answer'"
@@ -116,11 +120,11 @@
       >
         <div
           v-if="['Activity', 'Emails'].includes(title)"
-          class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:border-l before:border-outline-gray-modals"
+          class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
           :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
         >
           <div
-            class="z-[1] flex h-7 w-7 items-center justify-center bg-surface-white"
+            class="flex h-7 w-7 items-center justify-center bg-surface-white"
             :class="{
               'mt-2.5': ['communication'].includes(activity.activity_type),
               'bg-surface-white': ['added', 'removed', 'changed'].includes(