refactor: moved all activity logic from lead/deal to activites component

crm/fcrm/doctype/crm_lead/api.py

@@ -21,15 +21,15 @@ def get_lead(name):
 		frappe.throw(_("Lead not found"), frappe.DoesNotExistError)
 	lead = lead.pop()
 
+	return lead
+
+@frappe.whitelist()
+def get_activities(name):
 	get_docinfo('', "CRM Lead", name)
 	docinfo = frappe.response["docinfo"]
-	activities = get_activities(lead, docinfo)
-
-	return { **lead, 'activities': activities }
-
-def get_activities(doc, docinfo):
 	lead_fields_meta = frappe.get_meta("CRM Lead").fields
 
+	doc = frappe.get_doc("CRM Lead", name, fields=["creation", "owner"])
 	activities = [{
 		"activity_type": "creation",
 		"creation": doc.creation,
@@ -75,15 +75,6 @@ def get_activities(doc, docinfo):
 		}
 		activities.append(activity)
 
-	for comment in docinfo.comments:
-		activity = {
-			"activity_type": "comment",
-			"creation": comment.creation,
-			"owner": comment.owner,
-			"data": comment.content,
-		}
-		activities.append(activity)
-
 	for communication in docinfo.communications:
 		activity = {
 			"activity_type": "communication",

frontend/src/components/Activities.vue

@@ -3,23 +3,23 @@
     <div class="flex h-7 items-center text-xl font-semibold text-gray-800">
       {{ title }}
     </div>
-    <Button v-if="title == 'Calls'" variant="solid" @click="makeCall(lead.data.mobile_no)">
+    <Button
+      v-if="title == 'Calls'"
+      variant="solid"
+      @click="makeCall(lead.data.mobile_no)"
+    >
       <PhoneIcon class="h-4 w-4" />
     </Button>
-    <Button
+    <Button v-else-if="title == 'Notes'" variant="solid" @click="showNote">
-      v-else-if="title == 'Notes'"
-      variant="solid"
-      @click="emit('makeNote')"
-    >
       <FeatherIcon name="plus" class="h-4 w-4" />
     </Button>
   </div>
-  <div v-if="activities.length" class="flex-1 overflow-y-auto">
+  <div v-if="activities?.length" class="flex-1 overflow-y-auto">
     <div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 px-10 py-5 pt-0">
       <div
         v-for="note in activities"
         class="group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md bg-gray-50 px-4 py-3 hover:bg-gray-100"
-        @click="emit('makeNote', note)"
+        @click="showNote(note)"
       >
         <div class="flex items-center justify-between">
           <div class="truncate text-lg font-medium">
@@ -30,7 +30,7 @@
               {
                 icon: 'trash-2',
                 label: 'Delete',
-                onClick: () => emit('deleteNote', note.name),
+                onClick: () => deleteNote(note.name),
               },
             ]"
             @click.stop
@@ -346,11 +346,6 @@
               </Tooltip>
             </div>
           </div>
-          <div
-            v-if="activity.activity_type == 'comment'"
-            class="max-w-[80%] cursor-pointer rounded-xl border px-4 py-3 text-base leading-6 shadow-sm transition-all duration-300 ease-in-out"
-            v-html="activity.data"
-          />
         </div>
       </div>
     </div>
@@ -371,7 +366,7 @@
       v-else-if="title == 'Notes'"
       variant="solid"
       label="Create note"
-      @click="emit('makeNote')"
+      @click="showNote"
     />
     <Button
       v-else-if="title == 'Emails'"
@@ -385,6 +380,7 @@
     v-if="['Emails', 'Activity'].includes(title) && lead"
     v-model="lead"
   />
+  <NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
 </template>
 <script setup>
 import UserAvatar from '@/components/UserAvatar.vue'
@@ -399,8 +395,15 @@ import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
 import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
 import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
 import CommunicationArea from '@/components/CommunicationArea.vue'
-import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import NoteModal from '@/components/NoteModal.vue'
+import {
+  timeAgo,
+  dateFormat,
+  dateTooltipFormat,
+  secondsToDuration,
+} from '@/utils'
 import { usersStore } from '@/stores/users'
+import { contactsStore } from '@/stores/contacts'
 import {
   Button,
   FeatherIcon,
@@ -408,10 +411,14 @@ import {
   Dropdown,
   TextEditor,
   Avatar,
+  createResource,
+  createListResource,
+  call,
 } from 'frappe-ui'
-import { computed, h, defineModel, markRaw } from 'vue'
+import { ref, computed, h, defineModel, markRaw } from 'vue'
 
 const { getUser } = usersStore()
+const { getContact } = contactsStore()
 
 const props = defineProps({
   title: {
@@ -426,20 +433,105 @@ const props = defineProps({
 
 const lead = defineModel()
 
-const emit = defineEmits(['makeNote', 'deleteNote'])
+const versions = createResource({
+  url: 'crm.fcrm.doctype.crm_lead.api.get_activities',
+  params: { name: lead.value.data.name },
+  cache: ['activity', lead.value.data.name],
+  auto: true,
+})
+
+const calls = createListResource({
+  type: 'list',
+  doctype: 'CRM Call Log',
+  cache: ['Call Logs', lead.value.data.name],
+  fields: [
+    'name',
+    'caller',
+    'receiver',
+    'from',
+    'to',
+    'duration',
+    'start_time',
+    'end_time',
+    'status',
+    'type',
+    'recording_url',
+    'creation',
+    'note',
+  ],
+  filters: { lead: lead.value.data.name },
+  orderBy: 'creation desc',
+  pageLength: 999,
+  auto: true,
+  transform: (docs) => {
+    docs.forEach((doc) => {
+      doc.show_recording = false
+      doc.activity_type =
+        doc.type === 'Incoming' ? 'incoming_call' : 'outgoing_call'
+      doc.duration = secondsToDuration(doc.duration)
+      if (doc.type === 'Incoming') {
+        doc.caller = {
+          label: getContact(doc.from)?.full_name || 'Unknown',
+          image: getContact(doc.from)?.image,
+        }
+        doc.receiver = {
+          label: getUser(doc.receiver).full_name,
+          image: getUser(doc.receiver).user_image,
+        }
+      } else {
+        doc.caller = {
+          label: getUser(doc.caller).full_name,
+          image: getUser(doc.caller).user_image,
+        }
+        doc.receiver = {
+          label: getContact(doc.to)?.full_name || 'Unknown',
+          image: getContact(doc.to)?.image,
+        }
+      }
+    })
+    return docs
+  },
+})
+
+const notes = createListResource({
+  type: 'list',
+  doctype: 'CRM Note',
+  cache: ['Notes', lead.value.data.name],
+  fields: ['name', 'title', 'content', 'owner', 'modified'],
+  filters: { lead: lead.value.data.name },
+  orderBy: 'modified desc',
+  pageLength: 999,
+  auto: true,
+})
+
+function all_activities() {
+  if (!versions.data) return []
+  if (!calls.data) return versions.data
+  return [...versions.data, ...calls.data].sort(
+    (a, b) => new Date(b.creation) - new Date(a.creation)
+  )
+}
 
 const activities = computed(() => {
-  if (props.title == 'Calls') {
+  let activities = []
-    props.activities.forEach((activity) => {
+  if (props.title == 'Activity') {
-      activity.show_recording = false
+    activities = all_activities()
-    })
+  } else if (props.title == 'Emails') {
-    return props.activities
+    activities = versions.data.filter(
+      (activity) => activity.activity_type === 'communication'
+    )
+  } else if (props.title == 'Calls') {
+    return calls.data
+  } else if (props.title == 'Notes') {
+    return notes.data
   }
-  props.activities.forEach((activity) => {
+  activities.forEach((activity) => {
     activity.icon = timelineIcon(activity.activity_type)
+
     if (
       activity.activity_type == 'incoming_call' ||
-      activity.activity_type == 'outgoing_call'
+      activity.activity_type == 'outgoing_call' ||
+      activity.activity_type == 'communication'
     )
       return
 
@@ -450,8 +542,6 @@ const activities = computed(() => {
 
     if (activity.activity_type == 'creation') {
       activity.type = activity.data
-    } else if (activity.activity_type == 'comment') {
-      activity.type = 'added a comment'
     } else if (activity.activity_type == 'added') {
       activity.type = 'added'
       activity.value = 'value as'
@@ -464,7 +554,7 @@ const activities = computed(() => {
       activity.to = 'to'
     }
   })
-  return props.activities
+  return activities
 })
 
 const emptyText = computed(() => {
@@ -508,6 +598,53 @@ function timelineIcon(activity_type) {
 
   return markRaw(icon)
 }
+
+const showNoteModal = ref(false)
+const note = ref({
+  title: '',
+  content: '',
+})
+
+function showNote(n) {
+  note.value = n || {
+    title: '',
+    content: '',
+  }
+  showNoteModal.value = true
+}
+
+async function deleteNote(name) {
+  await call('frappe.client.delete', {
+    doctype: 'CRM Note',
+    name,
+  })
+  notes.reload()
+}
+
+async function updateNote(note) {
+  if (note.name) {
+    let d = await call('frappe.client.set_value', {
+      doctype: 'CRM Note',
+      name: note.name,
+      fieldname: note,
+    })
+    if (d.name) {
+      notes.reload()
+    }
+  } else {
+    let d = await call('frappe.client.insert', {
+      doc: {
+        doctype: 'CRM Note',
+        title: note.title,
+        content: note.content,
+        lead: props.leadId,
+      },
+    })
+    if (d.name) {
+      notes.reload()
+    }
+  }
+}
 </script>
 
 <style scoped>

frontend/src/pages/Deal.vue

@@ -36,8 +36,8 @@
     </template>
   </LayoutHeader>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
-    <TabGroup as="div" class="flex flex-col flex-1" @change="onTabChange">
+    <TabGroup as="div" class="flex flex-1 flex-col" @change="onTabChange">
-      <TabList class="flex items-center gap-6 border-b pl-5 relative">
+      <TabList class="relative flex items-center gap-6 border-b pl-5">
         <Tab
           ref="tabRef"
           as="template"
@@ -46,7 +46,7 @@
           v-slot="{ selected }"
         >
           <button
-            class="flex items-center gap-2 py-2.5 -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
+            class="-mb-[1px] flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 transition-all duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
             :class="{ 'text-gray-900': selected }"
           >
             <component v-if="tab.icon" :is="tab.icon" class="h-5" />
@@ -55,39 +55,33 @@
         </Tab>
         <div
           ref="indicator"
-          class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
+          class="absolute -bottom-[1px] h-[1px] w-[82px] bg-gray-900"
           :style="{ left: `${indicatorLeftValue}px` }"
         />
       </TabList>
       <TabPanels class="flex flex-1 overflow-hidden">
         <TabPanel
-          class="flex-1 flex flex-col overflow-y-auto"
+          class="flex flex-1 flex-col overflow-y-auto"
           v-for="tab in tabs"
           :key="tab.label"
         >
-          <Activities
+          <Activities :title="tab.label" v-model="deal" />
-            :title="tab.activityTitle"
-            :activities="tab.content"
-            v-model="deal"
-            @makeNote="(e) => showNote(e)"
-            @deleteNote="(e) => deleteNote(e)"
-          />
         </TabPanel>
       </TabPanels>
     </TabGroup>
-    <div class="flex flex-col justify-between border-l w-[352px]">
+    <div class="flex w-[352px] flex-col justify-between border-l">
       <div
-        class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg"
+        class="flex h-[41px] items-center border-b px-5 py-2.5 text-lg font-semibold"
       >
         About this deal
       </div>
       <FileUploader @success="changeDealImage" :validateFile="validateFile">
         <template #default="{ openFileSelector, error }">
-          <div class="flex gap-5 items-center justify-start p-5 border-b">
+          <div class="flex items-center justify-start gap-5 border-b p-5">
-            <div class="relative w-[88px] h-[88px] group">
+            <div class="group relative h-[88px] w-[88px]">
               <Avatar
                 size="3xl"
-                class="w-[88px] h-[88px]"
+                class="h-[88px] w-[88px]"
                 :label="deal.data.organization_name"
                 :image="deal.data.organization_logo"
               />
@@ -112,19 +106,19 @@
                 class="!absolute bottom-0 left-0 right-0"
               >
                 <div
-                  class="absolute bottom-0 left-0 right-0 rounded-b-full z-1 h-11 flex items-center justify-center pt-3 bg-black bg-opacity-40 cursor-pointer opacity-0 group-hover:opacity-100 duration-300 ease-in-out"
+                  class="z-1 absolute bottom-0 left-0 right-0 flex h-11 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-3 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
                   style="
                     -webkit-clip-path: inset(12px 0 0 0);
                     clip-path: inset(12px 0 0 0);
                   "
                 >
-                  <CameraIcon class="h-6 w-6 text-white cursor-pointer" />
+                  <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
                 </div>
               </Dropdown>
             </div>
             <div class="flex flex-col gap-2.5 truncate">
               <Tooltip :text="deal.data.organization_name">
-                <div class="font-medium text-2xl truncate">
+                <div class="truncate text-2xl font-medium">
                   {{ deal.data.organization_name }}
                 </div>
               </Tooltip>
@@ -154,7 +148,7 @@
           </div>
         </template>
       </FileUploader>
-      <div class="flex-1 flex flex-col justify-between overflow-hidden">
+      <div class="flex flex-1 flex-col justify-between overflow-hidden">
         <div class="flex flex-col overflow-y-auto">
           <div
             v-for="(section, i) in detailSections"
@@ -164,7 +158,7 @@
           >
             <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
               <div
-                class="flex items-center gap-2 text-base font-semibold leading-5 pl-2 pr-3 cursor-pointer max-w-fit"
+                class="flex max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
                 @click="toggle()"
               >
                 <FeatherIcon
@@ -186,9 +180,9 @@
                   <div
                     v-for="field in section.fields"
                     :key="field.label"
-                    class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
+                    class="flex items-center gap-2 px-3 text-base leading-5 first:mt-3"
                   >
-                    <div class="text-gray-600 w-[106px]">
+                    <div class="w-[106px] text-gray-600">
                       {{ field.label }}
                     </div>
                     <div class="flex-1">
@@ -240,7 +234,7 @@
                             variant="ghost"
                             @click="togglePopover()"
                             :label="getUser(deal.data[field.name]).full_name"
-                            class="!justify-start w-full"
+                            class="w-full !justify-start"
                           >
                             <template #prefix>
                               <UserAvatar
@@ -268,7 +262,7 @@
                         <template #default="{ open }">
                           <Button
                             :label="deal.data[field.name]"
-                            class="justify-between w-full"
+                            class="w-full justify-between"
                           >
                             <template #prefix>
                               <IndicatorIcon
@@ -339,13 +333,11 @@
       </div>
     </div>
   </div>
-  <NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
 </template>
 <script setup>
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
@@ -355,21 +347,18 @@ import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import NoteModal from '@/components/NoteModal.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { TransitionPresets, useTransition } from '@vueuse/core'
 import {
   dealStatuses,
   statusDropdownOptions,
   openWebsite,
-  secondsToDuration,
   createToast,
 } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 import {
   createResource,
-  createListResource,
   FeatherIcon,
   FileUploader,
   ErrorMessage,
@@ -378,12 +367,11 @@ import {
   Dropdown,
   Tooltip,
   Avatar,
-  call,
 } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const { getUser, users } = usersStore()
-const { getContact, contacts } = contactsStore()
+const { contacts } = contactsStore()
 
 const props = defineProps({
   dealId: {
@@ -438,49 +426,24 @@ const breadcrumbs = computed(() => {
   return items
 })
 
-const tabs = computed(() => {
+const tabs = [
-  return [
+  {
-    {
+    label: 'Activity',
-      label: 'Activity',
+    icon: ActivityIcon,
-      icon: ActivityIcon,
+  },
-      content: all_activities(),
+  {
-      activityTitle: 'Activity',
+    label: 'Emails',
-    },
+    icon: EmailIcon,
-    {
+  },
-      label: 'Emails',
+  {
-      icon: EmailIcon,
+    label: 'Calls',
-      content: deal.data.activities.filter(
+    icon: PhoneIcon,
-        (activity) => activity.activity_type === 'communication'
+  },
-      ),
+  {
-      activityTitle: 'Emails',
+    label: 'Notes',
-    },
+    icon: NoteIcon,
-    {
+  },
-      label: 'Calls',
+]
-      icon: PhoneIcon,
-      content: calls.data,
-      activityTitle: 'Calls',
-    },
-    // {
-    //   label: 'Tasks',
-    //   icon: TaskIcon,
-    //   activityTitle: 'Tasks',
-    // },
-    {
-      label: 'Notes',
-      icon: NoteIcon,
-      activityTitle: 'Notes',
-      content: notes.data,
-    },
-  ]
-})
-
-function all_activities() {
-  if (!deal.data) return []
-  if (!calls.data) return deal.data.activities
-  return [...deal.data.activities, ...calls.data].sort(
-    (a, b) => new Date(b.creation) - new Date(a.creation)
-  )
-}
 
 function changeDealImage(file) {
   deal.data.organization_logo = file.file_url
@@ -611,116 +574,6 @@ const activeAgents = computed(() => {
     })
 })
 
-const showNoteModal = ref(false)
-const note = ref({
-  title: '',
-  content: '',
-})
-
-const notes = createListResource({
-  type: 'list',
-  doctype: 'CRM Note',
-  cache: ['Notes', props.dealId],
-  fields: ['name', 'title', 'content', 'owner', 'modified'],
-  filters: { lead: props.dealId },
-  orderBy: 'modified desc',
-  pageLength: 999,
-  auto: true,
-})
-
-function showNote(n) {
-  note.value = n || {
-    title: '',
-    content: '',
-  }
-  showNoteModal.value = true
-}
-
-async function deleteNote(name) {
-  await call('frappe.client.delete', {
-    doctype: 'CRM Note',
-    name,
-  })
-  notes.reload()
-}
-
-async function updateNote(note) {
-  if (note.name) {
-    let d = await call('frappe.client.set_value', {
-      doctype: 'CRM Note',
-      name: note.name,
-      fieldname: note,
-    })
-    if (d.name) {
-      notes.reload()
-    }
-  } else {
-    let d = await call('frappe.client.insert', {
-      doc: {
-        doctype: 'CRM Note',
-        title: note.title,
-        content: note.content,
-        lead: props.dealId,
-      },
-    })
-    if (d.name) {
-      notes.reload()
-    }
-  }
-}
-
-const calls = createListResource({
-  type: 'list',
-  doctype: 'CRM Call Log',
-  cache: ['Call Logs', props.dealId],
-  fields: [
-    'name',
-    'caller',
-    'receiver',
-    'from',
-    'to',
-    'duration',
-    'start_time',
-    'end_time',
-    'status',
-    'type',
-    'recording_url',
-    'creation',
-    'note',
-  ],
-  filters: { lead: props.dealId },
-  orderBy: 'creation desc',
-  pageLength: 999,
-  auto: true,
-  transform: (docs) => {
-    docs.forEach((doc) => {
-      doc.activity_type =
-        doc.type === 'Incoming' ? 'incoming_call' : 'outgoing_call'
-      doc.duration = secondsToDuration(doc.duration)
-      if (doc.type === 'Incoming') {
-        doc.caller = {
-          label: getContact(doc.from)?.full_name || 'Unknown',
-          image: getContact(doc.from)?.image,
-        }
-        doc.receiver = {
-          label: getUser(doc.receiver).full_name,
-          image: getUser(doc.receiver).user_image,
-        }
-      } else {
-        doc.caller = {
-          label: getUser(doc.caller).full_name,
-          image: getUser(doc.caller).user_image,
-        }
-        doc.receiver = {
-          label: getContact(doc.to)?.full_name || 'Unknown',
-          image: getContact(doc.to)?.image,
-        }
-      }
-    })
-    return docs
-  },
-})
-
 function updateAssignedAgent(email) {
   deal.data.lead_owner = email
   updateDeal('lead_owner', email)

frontend/src/pages/Lead.vue

@@ -38,9 +38,9 @@
       />
     </template>
   </LayoutHeader>
-  <div v-if="lead.data" class="flex h-full overflow-hidden">
+  <div v-if="lead?.data" class="flex h-full overflow-hidden">
-    <TabGroup as="div" class="flex flex-col flex-1" @change="onTabChange">
+    <TabGroup as="div" class="flex flex-1 flex-col" @change="onTabChange">
-      <TabList class="flex items-center gap-6 border-b pl-5 relative">
+      <TabList class="relative flex items-center gap-6 border-b pl-5">
         <Tab
           ref="tabRef"
           as="template"
@@ -49,7 +49,7 @@
           v-slot="{ selected }"
         >
           <button
-            class="flex items-center gap-2 py-2.5 -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
+            class="-mb-[1px] flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 transition-all duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
             :class="{ 'text-gray-900': selected }"
           >
             <component v-if="tab.icon" :is="tab.icon" class="h-5" />
@@ -58,39 +58,33 @@
         </Tab>
         <div
           ref="indicator"
-          class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
+          class="absolute -bottom-[1px] h-[1px] w-[82px] bg-gray-900"
           :style="{ left: `${indicatorLeftValue}px` }"
         />
       </TabList>
       <TabPanels class="flex flex-1 overflow-hidden">
         <TabPanel
-          class="flex-1 flex flex-col overflow-y-auto"
+          class="flex flex-1 flex-col overflow-y-auto"
           v-for="tab in tabs"
           :key="tab.label"
         >
-          <Activities
+          <Activities :title="tab.label" v-model="lead" />
-            :title="tab.activityTitle"
-            :activities="tab.content"
-            v-model="lead"
-            @makeNote="(e) => showNote(e)"
-            @deleteNote="(e) => deleteNote(e)"
-          />
         </TabPanel>
       </TabPanels>
     </TabGroup>
-    <div class="flex flex-col justify-between border-l w-[352px]">
+    <div class="flex w-[352px] flex-col justify-between border-l">
       <div
-        class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg"
+        class="flex h-[41px] items-center border-b px-5 py-2.5 text-lg font-semibold"
       >
         About this lead
       </div>
       <FileUploader @success="changeLeadImage" :validateFile="validateFile">
         <template #default="{ openFileSelector, error }">
-          <div class="flex gap-5 items-center justify-start p-5">
+          <div class="flex items-center justify-start gap-5 p-5">
-            <div class="relative w-[88px] h-[88px] group">
+            <div class="group relative h-[88px] w-[88px]">
               <Avatar
                 size="3xl"
-                class="w-[88px] h-[88px]"
+                class="h-[88px] w-[88px]"
                 :label="lead.data.first_name"
                 :image="lead.data.image"
               />
@@ -113,19 +107,19 @@
                 class="!absolute bottom-0 left-0 right-0"
               >
                 <div
-                  class="absolute bottom-0 left-0 right-0 rounded-b-full z-1 h-11 flex items-center justify-center pt-3 bg-black bg-opacity-40 cursor-pointer opacity-0 group-hover:opacity-100 duration-300 ease-in-out"
+                  class="z-1 absolute bottom-0 left-0 right-0 flex h-11 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-3 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
                   style="
                     -webkit-clip-path: inset(12px 0 0 0);
                     clip-path: inset(12px 0 0 0);
                   "
                 >
-                  <CameraIcon class="h-6 w-6 text-white cursor-pointer" />
+                  <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
                 </div>
               </Dropdown>
             </div>
             <div class="flex flex-col gap-2.5 truncate">
               <Tooltip :text="lead.data.lead_name">
-                <div class="font-medium text-2xl truncate">
+                <div class="truncate text-2xl font-medium">
                   {{ lead.data.lead_name }}
                 </div>
               </Tooltip>
@@ -155,7 +149,7 @@
           </div>
         </template>
       </FileUploader>
-      <div class="flex-1 flex flex-col justify-between overflow-hidden">
+      <div class="flex flex-1 flex-col justify-between overflow-hidden">
         <div class="flex flex-col overflow-y-auto">
           <div
             v-for="(section, i) in detailSections"
@@ -163,9 +157,9 @@
             class="flex flex-col"
           >
             <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
-              <div class="sticky bg-white top-0 p-3 border-t z-10">
+              <div class="sticky top-0 z-10 border-t bg-white p-3">
                 <div
-                  class="flex items-center gap-2 text-base font-semibold leading-5 px-2 cursor-pointer max-w-fit"
+                  class="flex max-w-fit cursor-pointer items-center gap-2 px-2 text-base font-semibold leading-5"
                   @click="toggle()"
                 >
                   <FeatherIcon
@@ -188,9 +182,9 @@
                   <div
                     v-for="field in section.fields"
                     :key="field.name"
-                    class="flex items-center px-3 gap-2 text-base leading-5 last:mb-3"
+                    class="flex items-center gap-2 px-3 text-base leading-5 last:mb-3"
                   >
-                    <div class="text-gray-600 w-[106px]">
+                    <div class="w-[106px] text-gray-600">
                       {{ field.label }}
                     </div>
                     <div class="flex-1">
@@ -242,7 +236,7 @@
                             variant="ghost"
                             @click="togglePopover()"
                             :label="getUser(lead.data[field.name]).full_name"
-                            class="!justify-start w-full"
+                            class="w-full !justify-start"
                           >
                             <template #prefix>
                               <UserAvatar
@@ -270,7 +264,7 @@
                         <template #default="{ open }">
                           <Button
                             :label="lead.data[field.name]"
-                            class="justify-between w-full"
+                            class="w-full justify-between"
                           >
                             <template #prefix>
                               <IndicatorIcon
@@ -311,7 +305,6 @@
       </div>
     </div>
   </div>
-  <NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
 </template>
 <script setup>
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -325,21 +318,18 @@ import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import NoteModal from '@/components/NoteModal.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { TransitionPresets, useTransition } from '@vueuse/core'
 import {
   leadStatuses,
   statusDropdownOptions,
   openWebsite,
-  secondsToDuration,
   createToast,
 } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 import {
   createResource,
-  createListResource,
   FileUploader,
   ErrorMessage,
   FeatherIcon,
@@ -348,14 +338,13 @@ import {
   Dropdown,
   Tooltip,
   Avatar,
-  call,
 } from 'frappe-ui'
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import CameraIcon from '../components/Icons/CameraIcon.vue'
 
 const { getUser, users } = usersStore()
-const { getContact, contacts } = contactsStore()
+const { contacts } = contactsStore()
 const router = useRouter()
 
 const props = defineProps({
@@ -411,49 +400,24 @@ const breadcrumbs = computed(() => {
   return items
 })
 
-const tabs = computed(() => {
+const tabs = [
-  return [
+  {
-    {
+    label: 'Activity',
-      label: 'Activity',
+    icon: ActivityIcon,
-      icon: ActivityIcon,
+  },
-      content: all_activities(),
+  {
-      activityTitle: 'Activity',
+    label: 'Emails',
-    },
+    icon: EmailIcon,
-    {
+  },
-      label: 'Emails',
+  {
-      icon: EmailIcon,
+    label: 'Calls',
-      content: lead.data.activities.filter(
+    icon: PhoneIcon,
-        (activity) => activity.activity_type === 'communication'
+  },
-      ),
+  {
-      activityTitle: 'Emails',
+    label: 'Notes',
-    },
+    icon: NoteIcon,
-    {
+  },
-      label: 'Calls',
+]
-      icon: PhoneIcon,
-      content: calls.data,
-      activityTitle: 'Calls',
-    },
-    // {
-    //   label: 'Tasks',
-    //   icon: TaskIcon,
-    //   activityTitle: 'Tasks',
-    // },
-    {
-      label: 'Notes',
-      icon: NoteIcon,
-      activityTitle: 'Notes',
-      content: notes.data,
-    },
-  ]
-})
-
-function all_activities() {
-  if (!lead.data) return []
-  if (!calls.data) return lead.data.activities
-  return [...lead.data.activities, ...calls.data].sort(
-    (a, b) => new Date(b.creation) - new Date(a.creation)
-  )
-}
 
 function changeLeadImage(file) {
   lead.data.image = file.file_url
@@ -607,116 +571,6 @@ function convertToDeal() {
   router.push({ name: 'Deal', params: { dealId: lead.data.name } })
 }
 
-const showNoteModal = ref(false)
-const note = ref({
-  title: '',
-  content: '',
-})
-
-const notes = createListResource({
-  type: 'list',
-  doctype: 'CRM Note',
-  cache: ['Notes', props.leadId],
-  fields: ['name', 'title', 'content', 'owner', 'modified'],
-  filters: { lead: props.leadId },
-  orderBy: 'modified desc',
-  pageLength: 999,
-  auto: true,
-})
-
-function showNote(n) {
-  note.value = n || {
-    title: '',
-    content: '',
-  }
-  showNoteModal.value = true
-}
-
-async function deleteNote(name) {
-  await call('frappe.client.delete', {
-    doctype: 'CRM Note',
-    name,
-  })
-  notes.reload()
-}
-
-async function updateNote(note) {
-  if (note.name) {
-    let d = await call('frappe.client.set_value', {
-      doctype: 'CRM Note',
-      name: note.name,
-      fieldname: note,
-    })
-    if (d.name) {
-      notes.reload()
-    }
-  } else {
-    let d = await call('frappe.client.insert', {
-      doc: {
-        doctype: 'CRM Note',
-        title: note.title,
-        content: note.content,
-        lead: props.leadId,
-      },
-    })
-    if (d.name) {
-      notes.reload()
-    }
-  }
-}
-
-const calls = createListResource({
-  type: 'list',
-  doctype: 'CRM Call Log',
-  cache: ['Call Logs', props.leadId],
-  fields: [
-    'name',
-    'caller',
-    'receiver',
-    'from',
-    'to',
-    'duration',
-    'start_time',
-    'end_time',
-    'status',
-    'type',
-    'recording_url',
-    'creation',
-    'note',
-  ],
-  filters: { lead: props.leadId },
-  orderBy: 'creation desc',
-  pageLength: 999,
-  auto: true,
-  transform: (docs) => {
-    docs.forEach((doc) => {
-      doc.activity_type =
-        doc.type === 'Incoming' ? 'incoming_call' : 'outgoing_call'
-      doc.duration = secondsToDuration(doc.duration)
-      if (doc.type === 'Incoming') {
-        doc.caller = {
-          label: getContact(doc.from)?.full_name || 'Unknown',
-          image: getContact(doc.from)?.image,
-        }
-        doc.receiver = {
-          label: getUser(doc.receiver).full_name,
-          image: getUser(doc.receiver).user_image,
-        }
-      } else {
-        doc.caller = {
-          label: getUser(doc.caller).full_name,
-          image: getUser(doc.caller).user_image,
-        }
-        doc.receiver = {
-          label: getContact(doc.to)?.full_name || 'Unknown',
-          image: getContact(doc.to)?.image,
-        }
-      }
-    })
-    return docs
-  },
-})
-
 function updateAssignedAgent(email) {
   lead.data.lead_owner = email
   updateLead('lead_owner', email)