From d9a2d7098a1578ed8fc00d5f7969bad5d3a9c9b0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 2 May 2024 14:33:18 +0530
Subject: [PATCH 1/5] fix: show call log details in modal

---
 crm/fcrm/doctype/crm_call_log/crm_call_log.py |   4 +
 .../src/components/Icons/CheckCircleIcon.vue  |  23 +++
 .../components/ListViews/CallLogsListView.vue |   5 +-
 .../src/components/Modals/CallLogModal.vue    | 185 ++++++++++++++++++
 frontend/src/pages/CallLogs.vue               |  45 +++++
 5 files changed, 258 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Icons/CheckCircleIcon.vue
 create mode 100644 frontend/src/components/Modals/CallLogModal.vue

diff --git a/crm/fcrm/doctype/crm_call_log/crm_call_log.py b/crm/fcrm/doctype/crm_call_log/crm_call_log.py
index 0147b9ac..132e9a4a 100644
--- a/crm/fcrm/doctype/crm_call_log/crm_call_log.py
+++ b/crm/fcrm/doctype/crm_call_log/crm_call_log.py
@@ -69,6 +69,10 @@ class CRMCallLog(Document):
 				"duration",
 				"from",
 				"to",
+				"note",
+				"recording_url",
+				"reference_doctype",
+				"reference_docname",
 				"creation",
 			]
 			return {'columns': columns, 'rows': rows}
diff --git a/frontend/src/components/Icons/CheckCircleIcon.vue b/frontend/src/components/Icons/CheckCircleIcon.vue
new file mode 100644
index 00000000..5daed8c7
--- /dev/null
+++ b/frontend/src/components/Icons/CheckCircleIcon.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_3668_69185)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.25 8C14.25 11.4518 11.4518 14.25 8 14.25C4.54822 14.25 1.75 11.4518 1.75 8C1.75 4.54822 4.54822 1.75 8 1.75C11.4518 1.75 14.25 4.54822 14.25 8ZM15.25 8C15.25 12.0041 12.0041 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C12.0041 0.75 15.25 3.99594 15.25 8ZM11.2909 5.98482C11.4666 5.77175 11.4363 5.45663 11.2232 5.28096C11.0101 5.1053 10.695 5.13561 10.5193 5.34868L7.07001 9.53239L5.72845 7.79857C5.55946 7.58018 5.24543 7.54012 5.02703 7.70911C4.80863 7.8781 4.76858 8.19214 4.93756 8.41053L6.66217 10.6394C6.7552 10.7596 6.89788 10.831 7.04988 10.8334C7.20188 10.8357 7.3467 10.7688 7.4434 10.6515L11.2909 5.98482Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3668_69185">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index 7ccd86a6..b8302a50 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -3,10 +3,7 @@
     :columns="columns"
     :rows="rows"
     :options="{
-      getRowRoute: (row) => ({
-        name: 'Call Log',
-        params: { callLogId: row.name },
-      }),
+      onRowClick: (row) => emit('showCallLog', row.name),
       selectable: options.selectable,
       showTooltip: options.showTooltip,
       resizeColumn: options.resizeColumn,
diff --git a/frontend/src/components/Modals/CallLogModal.vue b/frontend/src/components/Modals/CallLogModal.vue
new file mode 100644
index 00000000..3aa7c4a8
--- /dev/null
+++ b/frontend/src/components/Modals/CallLogModal.vue
@@ -0,0 +1,185 @@
+<template>
+  <Dialog v-model="show">
+    <template #body-title>
+      <div class="flex items-center gap-3">
+        <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+          {{ __('Call Details') }}
+        </h3>
+      </div>
+    </template>
+    <template #body-content>
+      <div class="flex flex-col gap-3.5">
+        <div
+          v-for="field in detailFields"
+          :key="field.name"
+          class="flex h-7 items-center gap-2 text-base text-gray-800"
+        >
+          <div class="grid w-7 place-content-center">
+            <component :is="field.icon" />
+          </div>
+          <div v-if="field.name == 'receiver'" class="flex items-center gap-1">
+            <Avatar
+              :image="field.value.caller.image"
+              :label="field.value.caller.label"
+              size="sm"
+            />
+            <div class="ml-1 flex flex-col gap-1">
+              {{ field.value.caller.label }}
+            </div>
+            <FeatherIcon
+              name="arrow-right"
+              class="mx-1 h-4 w-4 text-gray-600"
+            />
+            <Avatar
+              :image="field.value.receiver.image"
+              :label="field.value.receiver.label"
+              size="sm"
+            />
+            <div class="ml-1 flex flex-col gap-1">
+              {{ field.value.receiver.label }}
+            </div>
+          </div>
+          <Tooltip v-else-if="field.tooltip" :text="field.tooltip">
+            {{ field.value }}
+          </Tooltip>
+          <div v-else-if="field.name == 'recording_url'">
+            <audio class="audio-control" controls :src="field.value"></audio>
+          </div>
+          <div v-else :class="field.color ? `text-${field.color}-600` : ''">
+            {{ field.value }}
+          </div>
+          <div v-if="field.link">
+            <ArrowUpRightIcon
+              class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
+              @click="() => field.link()"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
+import DurationIcon from '@/components/Icons/DurationIcon.vue'
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
+import Dealsicon from '@/components/Icons/DealsIcon.vue'
+import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import CheckCircleIcon from '@/components/Icons/CheckCircleIcon.vue'
+// import NoteModal from '@/components/Modals/NoteModal.vue'
+import { FeatherIcon, Avatar, Tooltip, createResource } from 'frappe-ui'
+import { ref, computed, h } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+  callLog: {
+    type: Object,
+    default: {},
+  },
+})
+
+const show = defineModel()
+const router = useRouter()
+
+const detailFields = computed(() => {
+  let details = [
+    {
+      icon: h(FeatherIcon, {
+        name: props.callLog.type.icon,
+        class: 'h-3.5 w-3.5',
+      }),
+      name: 'type',
+      value: props.callLog.type.label + ' Call',
+    },
+    {
+      icon: ContactsIcon,
+      name: 'receiver',
+      value: {
+        receiver: props.callLog.receiver,
+        caller: props.callLog.caller,
+      },
+    },
+    {
+      icon:
+        props.callLog.reference_doctype == 'CRM Lead' ? LeadsIcon : Dealsicon,
+      name: 'reference_doctype',
+      value: props.callLog.reference_doctype == 'CRM Lead' ? 'Lead' : 'Deal',
+      link: () => {
+        if (props.callLog.reference_doctype == 'CRM Lead') {
+          router.push({
+            name: 'Lead',
+            params: { leadId: props.callLog.reference_docname },
+          })
+        } else {
+          router.push({
+            name: 'Deal',
+            params: { dealId: props.callLog.reference_docname },
+          })
+        }
+      },
+    },
+    {
+      icon: CalendarIcon,
+      name: 'creation',
+      value: props.callLog.creation.label,
+      tooltip: props.callLog.creation.label,
+    },
+    {
+      icon: DurationIcon,
+      name: 'duration',
+      value: props.callLog.duration.label,
+    },
+    {
+      icon: CheckCircleIcon,
+      name: 'status',
+      value: props.callLog.status.label,
+      color: props.callLog.status.color,
+    },
+    {
+      icon: h(FeatherIcon, {
+        name: 'play',
+        class: 'h-3.5 w-3.5',
+      }),
+      name: 'recording_url',
+      value: props.callLog.recording_url,
+    },
+    {
+      icon: NoteIcon,
+      name: 'note',
+      value: props.callLog.note,
+    },
+  ]
+
+  return details.filter((detail) => detail.value)
+})
+
+async function updateNote(_note) {
+  if (_note.title || _note.content) {
+    let d = await call('frappe.client.set_value', {
+      doctype: 'CRM Note',
+      name: _callLog.data?.note,
+      fieldname: _note,
+    })
+    if (d.name) {
+      _callLog.reload()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.audio-control {
+  height: 40px;
+  outline: none;
+  border-radius: 10px;
+  border: 1px solid gray;
+  cursor: pointer;
+}
+
+.audio-control::-webkit-media-controls-panel {
+  background-color: white;
+}
+</style>
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index 28bb5983..280c11a4 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -31,6 +31,7 @@
       rowCount: callLogs.data.row_count,
       totalCount: callLogs.data.total_count,
     }"
+    @showCallLog="showCallLog"
     @loadMore="() => loadMore++"
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
@@ -47,6 +48,11 @@
       <span>{{ __('No Logs Found') }}</span>
     </div>
   </div>
+  <CallLogModal
+    v-model="showCallLogModal"
+    v-model:reloadCallLogs="callLogs"
+    :callLog="callLog"
+  />
 </template>
 
 <script setup>
@@ -55,6 +61,7 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import CallLogsListView from '@/components/ListViews/CallLogsListView.vue'
+import CallLogModal from '@/components/Modals/CallLogModal.vue'
 import {
   secondsToDuration,
   dateFormat,
@@ -139,6 +146,44 @@ const rows = computed(() => {
   })
 })
 
+const showCallLogModal = ref(false)
+
+const callLog = ref({
+  name: '',
+  caller: '',
+  receiver: '',
+  duration: '',
+  type: '',
+  status: '',
+  from: '',
+  to: '',
+  note: '',
+  recording_url: '',
+  reference_doctype: '',
+  reference_docname: '',
+  creation: '',
+})
+
+function showCallLog(name) {
+  let d = rows.value?.find((row) => row.name === name)
+  callLog.value = {
+    name: d.name,
+    caller: d.caller,
+    receiver: d.receiver,
+    duration: d.duration,
+    type: d.type,
+    status: d.status,
+    from: d.from,
+    to: d.to,
+    note: d.note,
+    recording_url: d.recording_url,
+    reference_doctype: d.reference_doctype,
+    reference_docname: d.reference_docname,
+    creation: d.creation,
+  }
+  showCallLogModal.value = true
+}
+
 const statusLabelMap = {
   Completed: 'Completed',
   Initiated: 'Initiated',

From cf3a556cd07346ef8aaa8cd35ab2a9a23804f765 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 2 May 2024 14:48:27 +0530
Subject: [PATCH 2/5] style: audio tag styling

---
 frontend/src/components/Modals/CallLogModal.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Modals/CallLogModal.vue b/frontend/src/components/Modals/CallLogModal.vue
index 3aa7c4a8..006941fe 100644
--- a/frontend/src/components/Modals/CallLogModal.vue
+++ b/frontend/src/components/Modals/CallLogModal.vue
@@ -42,8 +42,8 @@
           <Tooltip v-else-if="field.tooltip" :text="field.tooltip">
             {{ field.value }}
           </Tooltip>
-          <div v-else-if="field.name == 'recording_url'">
-            <audio class="audio-control" controls :src="field.value"></audio>
+          <div class="w-full" v-else-if="field.name == 'recording_url'">
+            <audio class="audio-control w-full" controls :src="field.value"></audio>
           </div>
           <div v-else :class="field.color ? `text-${field.color}-600` : ''">
             {{ field.value }}
@@ -140,8 +140,8 @@ const detailFields = computed(() => {
     },
     {
       icon: h(FeatherIcon, {
-        name: 'play',
-        class: 'h-3.5 w-3.5',
+        name: 'play-circle',
+        class: 'h-4 w-4',
       }),
       name: 'recording_url',
       value: props.callLog.recording_url,
@@ -175,8 +175,12 @@ async function updateNote(_note) {
   height: 40px;
   outline: none;
   border-radius: 10px;
-  border: 1px solid gray;
   cursor: pointer;
+  background-color: rgb(237, 237, 237);
+}
+
+audio::-webkit-media-controls-panel {
+  background-color: rgb(237, 237, 237) !important;
 }
 
 .audio-control::-webkit-media-controls-panel {

From 825450a96b64e12415223071a1fa646dfd31e300 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 4 May 2024 16:18:51 +0530
Subject: [PATCH 3/5] fix: render call note and allow editing note

---
 .../src/components/Modals/CallLogModal.vue    | 127 +++++++++++-------
 frontend/src/components/Modals/NoteModal.vue  |   2 +-
 2 files changed, 76 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/Modals/CallLogModal.vue b/frontend/src/components/Modals/CallLogModal.vue
index 006941fe..586431ed 100644
--- a/frontend/src/components/Modals/CallLogModal.vue
+++ b/frontend/src/components/Modals/CallLogModal.vue
@@ -12,52 +12,74 @@
         <div
           v-for="field in detailFields"
           :key="field.name"
-          class="flex h-7 items-center gap-2 text-base text-gray-800"
+          class="flex gap-2 text-base text-gray-800"
         >
-          <div class="grid w-7 place-content-center">
+          <div class="grid size-7 place-content-center">
             <component :is="field.icon" />
           </div>
-          <div v-if="field.name == 'receiver'" class="flex items-center gap-1">
-            <Avatar
-              :image="field.value.caller.image"
-              :label="field.value.caller.label"
-              size="sm"
-            />
-            <div class="ml-1 flex flex-col gap-1">
-              {{ field.value.caller.label }}
+          <div class="flex min-h-7 w-full items-center gap-2">
+            <div
+              v-if="field.name == 'receiver'"
+              class="flex items-center gap-1"
+            >
+              <Avatar
+                :image="field.value.caller.image"
+                :label="field.value.caller.label"
+                size="sm"
+              />
+              <div class="ml-1 flex flex-col gap-1">
+                {{ field.value.caller.label }}
+              </div>
+              <FeatherIcon
+                name="arrow-right"
+                class="mx-1 h-4 w-4 text-gray-600"
+              />
+              <Avatar
+                :image="field.value.receiver.image"
+                :label="field.value.receiver.label"
+                size="sm"
+              />
+              <div class="ml-1 flex flex-col gap-1">
+                {{ field.value.receiver.label }}
+              </div>
             </div>
-            <FeatherIcon
-              name="arrow-right"
-              class="mx-1 h-4 w-4 text-gray-600"
-            />
-            <Avatar
-              :image="field.value.receiver.image"
-              :label="field.value.receiver.label"
-              size="sm"
-            />
-            <div class="ml-1 flex flex-col gap-1">
-              {{ field.value.receiver.label }}
+            <Tooltip v-else-if="field.tooltip" :text="field.tooltip">
+              {{ field.value }}
+            </Tooltip>
+            <div class="w-full" v-else-if="field.name == 'recording_url'">
+              <audio
+                class="audio-control w-full"
+                controls
+                :src="field.value"
+              ></audio>
+            </div>
+            <div
+              class="max-h-30 min-h-16 w-full cursor-pointer overflow-hidden rounded border px-2 py-1.5 text-base text-gray-700"
+              v-else-if="field.name == 'note'"
+              @click="() => (showNoteModal = true)"
+            >
+              <div
+                v-if="field.value?.title"
+                :class="[field.value?.content ? 'mb-1 font-bold' : '']"
+                v-html="field.value?.title"
+              />
+              <div v-if="field.value?.content" v-html="field.value?.content" />
+            </div>
+            <div v-else :class="field.color ? `text-${field.color}-600` : ''">
+              {{ field.value }}
+            </div>
+            <div v-if="field.link">
+              <ArrowUpRightIcon
+                class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
+                @click="() => field.link()"
+              />
             </div>
-          </div>
-          <Tooltip v-else-if="field.tooltip" :text="field.tooltip">
-            {{ field.value }}
-          </Tooltip>
-          <div class="w-full" v-else-if="field.name == 'recording_url'">
-            <audio class="audio-control w-full" controls :src="field.value"></audio>
-          </div>
-          <div v-else :class="field.color ? `text-${field.color}-600` : ''">
-            {{ field.value }}
-          </div>
-          <div v-if="field.link">
-            <ArrowUpRightIcon
-              class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
-              @click="() => field.link()"
-            />
           </div>
         </div>
       </div>
     </template>
   </Dialog>
+  <NoteModal v-model="showNoteModal" :note="callNoteDoc?.doc" />
 </template>
 
 <script setup>
@@ -69,9 +91,9 @@ import Dealsicon from '@/components/Icons/DealsIcon.vue'
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import CheckCircleIcon from '@/components/Icons/CheckCircleIcon.vue'
-// import NoteModal from '@/components/Modals/NoteModal.vue'
-import { FeatherIcon, Avatar, Tooltip, createResource } from 'frappe-ui'
-import { ref, computed, h } from 'vue'
+import NoteModal from '@/components/Modals/NoteModal.vue'
+import { FeatherIcon, Avatar, Tooltip, createDocumentResource } from 'frappe-ui'
+import { ref, computed, h, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -82,7 +104,9 @@ const props = defineProps({
 })
 
 const show = defineModel()
+const showNoteModal = ref(false)
 const router = useRouter()
+const callNoteDoc = ref(null)
 
 const detailFields = computed(() => {
   let details = [
@@ -141,7 +165,7 @@ const detailFields = computed(() => {
     {
       icon: h(FeatherIcon, {
         name: 'play-circle',
-        class: 'h-4 w-4',
+        class: 'h-4 w-4 mt-2',
       }),
       name: 'recording_url',
       value: props.callLog.recording_url,
@@ -149,30 +173,29 @@ const detailFields = computed(() => {
     {
       icon: NoteIcon,
       name: 'note',
-      value: props.callLog.note,
+      value: callNoteDoc.value?.doc,
     },
   ]
 
   return details.filter((detail) => detail.value)
 })
 
-async function updateNote(_note) {
-  if (_note.title || _note.content) {
-    let d = await call('frappe.client.set_value', {
-      doctype: 'CRM Note',
-      name: _callLog.data?.note,
-      fieldname: _note,
+watch(show, (val) => {
+  if (val) {
+    callNoteDoc.value = createDocumentResource({
+      doctype: 'FCRM Note',
+      name: props.callLog.note,
+      fields: ['title', 'content'],
+      cache: ['note', props.callLog.note],
+      auto: true,
     })
-    if (d.name) {
-      _callLog.reload()
-    }
   }
-}
+})
 </script>
 
 <style scoped>
 .audio-control {
-  height: 40px;
+  height: 36px;
   outline: none;
   border-radius: 10px;
   cursor: pointer;
diff --git a/frontend/src/components/Modals/NoteModal.vue b/frontend/src/components/Modals/NoteModal.vue
index 8597b461..fde58204 100644
--- a/frontend/src/components/Modals/NoteModal.vue
+++ b/frontend/src/components/Modals/NoteModal.vue
@@ -149,7 +149,7 @@ watch(
     nextTick(() => {
       title.value.el.focus()
       _note.value = { ...props.note }
-      if (_note.value.title) {
+      if (_note.value.title || _note.value.content) {
         editMode.value = true
       }
     })

From 0114ffced2fcabaa5b78153c8c020d0b1b336ea7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 4 May 2024 16:34:53 +0530
Subject: [PATCH 4/5] fix: create lead from call log modal

---
 .../src/components/Modals/CallLogModal.vue    | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Modals/CallLogModal.vue b/frontend/src/components/Modals/CallLogModal.vue
index 586431ed..294103b2 100644
--- a/frontend/src/components/Modals/CallLogModal.vue
+++ b/frontend/src/components/Modals/CallLogModal.vue
@@ -78,6 +78,17 @@
         </div>
       </div>
     </template>
+    <template
+      v-if="callLog.type.label == 'Incoming' && !callLog.reference_docname"
+      #actions
+    >
+      <Button
+        class="w-full"
+        variant="solid"
+        :label="__('Create lead')"
+        @click="createLead"
+      />
+    </template>
   </Dialog>
   <NoteModal v-model="showNoteModal" :note="callNoteDoc?.doc" />
 </template>
@@ -92,7 +103,7 @@ import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import CheckCircleIcon from '@/components/Icons/CheckCircleIcon.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
-import { FeatherIcon, Avatar, Tooltip, createDocumentResource } from 'frappe-ui'
+import { FeatherIcon, Avatar, Tooltip, createDocumentResource, call } from 'frappe-ui'
 import { ref, computed, h, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -180,6 +191,16 @@ const detailFields = computed(() => {
   return details.filter((detail) => detail.value)
 })
 
+function createLead() {
+  call('crm.fcrm.doctype.crm_call_log.crm_call_log.create_lead_from_call_log', {
+    call_log: props.callLog,
+  }).then((d) => {
+    if (d) {
+      router.push({ name: 'Lead', params: { leadId: d } })
+    }
+  })
+}
+
 watch(show, (val) => {
   if (val) {
     callNoteDoc.value = createDocumentResource({

From 9bd5e21b1bfc93e7b6af5a5808e4a36cc329e4f1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 4 May 2024 16:36:03 +0530
Subject: [PATCH 5/5] fix: removed CallLog page

---
 crm/fcrm/doctype/crm_call_log/crm_call_log.py |  54 ----
 frontend/src/pages/CallLog.vue                | 258 ------------------
 frontend/src/router.js                        |   6 -
 3 files changed, 318 deletions(-)
 delete mode 100644 frontend/src/pages/CallLog.vue

diff --git a/crm/fcrm/doctype/crm_call_log/crm_call_log.py b/crm/fcrm/doctype/crm_call_log/crm_call_log.py
index 132e9a4a..42752c6a 100644
--- a/crm/fcrm/doctype/crm_call_log/crm_call_log.py
+++ b/crm/fcrm/doctype/crm_call_log/crm_call_log.py
@@ -77,60 +77,6 @@ class CRMCallLog(Document):
 			]
 			return {'columns': columns, 'rows': rows}
 
-@frappe.whitelist()
-def get_call_log(name):
-	doc = frappe.get_doc("CRM Call Log", name)
-	doc = doc.as_dict()
-	if doc.reference_docname and doc.reference_doctype == "CRM Lead":
-		doc.lead = doc.reference_docname
-		doc.lead_name = frappe.db.get_value("CRM Lead", doc.reference_docname, "lead_name")
-	if doc.note:
-		note = frappe.db.get_values("FCRM Note", doc.note, ["title", "content"])[0]
-		doc.note_doc = {
-			"name": doc.note,
-			"title": note[0],
-			"content": note[1]
-		}
-
-	def get_contact(number):
-		c = frappe.db.get_value("Contact", {"mobile_no": number}, ["full_name", "image"], as_dict=True)
-		if c:
-			return [c.full_name, c.image]
-		return [None, None]
-
-	def get_lead_contact(number):
-		l = frappe.db.get_value("CRM Lead", {"mobile_no": number, "converted": 0}, ["lead_name", "image"], as_dict=True)
-		if l:
-			return [l.lead_name, l.image]
-		return [None, None]
-
-	def get_user(user):
-		u = frappe.db.get_value("User", user, ["full_name", "user_image"], as_dict=True)
-		if u:
-			return [u.full_name, u.user_image]
-		return [None, None]
-
-	if doc.type == "Incoming":
-		doc.caller = {
-			"label": get_contact(doc.get("from"))[0] or get_lead_contact(doc.get("from"))[0] or "Unknown",
-			"image": get_contact(doc.get("from"))[1] or get_lead_contact(doc.get("from"))[1]
-		}
-		doc.receiver = {
-			"label": get_user(doc.get("receiver"))[0],
-			"image": get_user(doc.get("receiver"))[1]
-		}
-	else:
-		doc.caller = {
-			"label": get_user(doc.get("caller"))[0],
-			"image": get_user(doc.get("caller"))[1]
-		}
-		doc.receiver = {
-			"label": get_contact(doc.get("to"))[0] or get_lead_contact(doc.get("to"))[0] or "Unknown",
-			"image": get_contact(doc.get("to"))[1] or get_lead_contact(doc.get("to"))[1]
-	}
-
-	return doc
-
 @frappe.whitelist()
 def create_lead_from_call_log(call_log):
 	lead = frappe.new_doc("CRM Lead")
diff --git a/frontend/src/pages/CallLog.vue b/frontend/src/pages/CallLog.vue
deleted file mode 100644
index dd258e06..00000000
--- a/frontend/src/pages/CallLog.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-  <LayoutHeader v-if="callLog.data">
-    <template #left-header>
-      <Breadcrumbs :items="breadcrumbs" />
-    </template>
-    <template #right-header>
-      <Button
-        v-if="callLog.data.type == 'Incoming' && !callLog.data.lead"
-        variant="solid"
-        :label="__('Create lead')"
-        @click="createLead"
-      >
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
-    </template>
-  </LayoutHeader>
-  <div v-if="callLog.data" class="max-w-lg p-6">
-    <div class="pb-3 text-base font-medium">{{ __('Call details') }}</div>
-    <div class="mb-3 flex flex-col gap-4 rounded-lg border p-4 shadow-sm">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          <FeatherIcon
-            :name="
-              callLog.data.type == 'Incoming'
-                ? 'phone-incoming'
-                : 'phone-outgoing'
-            "
-            class="h-4 w-4 text-gray-600"
-          />
-          <div class="font-medium">
-            {{
-              callLog.data.type == 'Incoming'
-                ? __('Inbound Call')
-                : __('Outbound Call')
-            }}
-          </div>
-        </div>
-        <div>
-          <Badge
-            :variant="'subtle'"
-            :theme="statusColorMap[callLog.data.status]"
-            size="md"
-            :label="__(statusLabelMap[callLog.data.status])"
-          />
-        </div>
-      </div>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-1">
-          <Avatar
-            :image="callLog.data.caller.image"
-            :label="callLog.data.caller.label"
-            size="xl"
-          />
-          <div class="ml-1 flex flex-col gap-1">
-            <div class="text-base font-medium">
-              {{ __(callLog.data.caller.label) }}
-            </div>
-            <div class="text-xs text-gray-600">
-              {{ callLog.data.from }}
-            </div>
-          </div>
-          <FeatherIcon name="arrow-right" class="mx-2 h-5 w-5 text-gray-600" />
-          <Avatar
-            :image="callLog.data.receiver.image"
-            :label="callLog.data.receiver.label"
-            size="xl"
-          />
-          <div class="ml-1 flex flex-col gap-1">
-            <div class="text-base font-medium">
-              {{ __(callLog.data.receiver.label) }}
-            </div>
-            <div class="text-xs text-gray-600">
-              {{ callLog.data.to }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-1">
-          <DurationIcon class="h-4 w-4 text-gray-600" />
-          <div class="text-sm text-gray-600">{{ __('Duration') }}</div>
-          <div class="text-sm">{{ callLog.data.duration }}</div>
-        </div>
-        <Tooltip :text="dateFormat(callLog.data.creation, dateTooltipFormat)">
-          <div class="text-sm text-gray-600">
-            {{ __(timeAgo(callLog.data.creation)) }}
-          </div>
-        </Tooltip>
-      </div>
-    </div>
-
-    <div v-if="callLog.data.recording_url" class="mt-6">
-      <div class="mb-3 text-base font-medium">{{ __('Call recording') }}</div>
-      <div class="flex items-center justify-between rounded border shadow-sm">
-        <audio
-          class="audio-control"
-          controls
-          :src="callLog.data.recording_url"
-        ></audio>
-      </div>
-    </div>
-
-    <div v-if="callLog.data.note" class="mt-6">
-      <div class="mb-3 text-base font-medium">{{ __('Call note') }}</div>
-      <div
-        class="flex h-56 cursor-pointer flex-col gap-3 rounded border p-4 shadow-sm"
-        @click="showNoteModal = true"
-      >
-        <div class="truncate text-lg font-medium">
-          {{ callLog.data.note_doc.title }}
-        </div>
-        <TextEditor
-          v-if="callLog.data.note_doc.content"
-          :content="callLog.data.note_doc.content"
-          :editable="false"
-          editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
-          class="flex-1 overflow-hidden"
-        />
-      </div>
-    </div>
-
-    <div v-if="callLog.data.lead" class="mt-6">
-      <div class="mb-3 text-base font-medium">{{ __('Lead') }}</div>
-
-      <Button
-        variant="outline"
-        :route="{ name: 'Lead', params: { leadId: callLog.data.lead } }"
-        :label="callLog.data.lead_name"
-        class="p-4"
-      >
-        <template #prefix><Avatar :label="callLog.data.lead_name" /></template>
-      </Button>
-    </div>
-  </div>
-  <NoteModal
-    v-model="showNoteModal"
-    :note="callLog.data?.note_doc"
-    @after="updateNote"
-  />
-</template>
-
-<script setup>
-import LayoutHeader from '@/components/LayoutHeader.vue'
-import DurationIcon from '@/components/Icons/DurationIcon.vue'
-import NoteModal from '@/components/Modals/NoteModal.vue'
-import {
-  dateFormat,
-  timeAgo,
-  dateTooltipFormat,
-  secondsToDuration,
-} from '@/utils'
-import {
-  TextEditor,
-  Avatar,
-  call,
-  Tooltip,
-  createResource,
-  Breadcrumbs,
-} from 'frappe-ui'
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-const props = defineProps({
-  callLogId: {
-    type: String,
-    required: true,
-  },
-})
-
-const showNoteModal = ref(false)
-
-const callLog = createResource({
-  url: 'crm.fcrm.doctype.crm_call_log.crm_call_log.get_call_log',
-  auto: true,
-  cache: ['callLog', props.callLogId],
-  params: {
-    name: props.callLogId,
-  },
-  transform: (doc) => {
-    doc.duration = secondsToDuration(doc.duration)
-    return doc
-  },
-})
-
-async function updateNote(_note) {
-  if (_note.title || _note.content) {
-    let d = await call('frappe.client.set_value', {
-      doctype: 'FCRM Note',
-      name: callLog.data?.note,
-      fieldname: _note,
-    })
-    if (d.name) {
-      callLog.reload()
-    }
-  }
-}
-
-function createLead() {
-  call('crm.fcrm.doctype.crm_call_log.crm_call_log.create_lead_from_call_log', {
-    call_log: callLog.data,
-  }).then((d) => {
-    if (d) {
-      callLog.reload()
-      router.push({ name: 'Lead', params: { leadId: d } })
-    }
-  })
-}
-
-const breadcrumbs = computed(() => {
-  let items = [{ label: __('Call Logs'), route: { name: 'Call Logs' } }]
-  items.push({
-    label: callLog.data?.caller.label,
-    route: { name: 'Call Log', params: { callLogId: props.callLogId } },
-  })
-  return items
-})
-
-const statusLabelMap = {
-  Completed: 'Completed',
-  Initiated: 'Initiated',
-  Busy: 'Declined',
-  Failed: 'Failed',
-  Queued: 'Queued',
-  Cancelled: 'Cancelled',
-  Ringing: 'Ringing',
-  'No Answer': 'Missed Call',
-  'In Progress': 'In Progress',
-}
-
-const statusColorMap = {
-  Completed: 'green',
-  Busy: 'orange',
-  Failed: 'red',
-  Initiated: 'gray',
-  Queued: 'gray',
-  Cancelled: 'gray',
-  Ringing: 'gray',
-  'No Answer': 'red',
-  'In Progress': 'blue',
-}
-</script>
-
-<style scoped>
-.audio-control {
-  width: 100%;
-  height: 40px;
-  outline: none;
-  border: none;
-  background: none;
-  cursor: pointer;
-}
-
-.audio-control::-webkit-media-controls-panel {
-  background-color: white;
-}
-</style>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 7e69658d..901324c8 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -72,12 +72,6 @@ const routes = [
     component: () => import('@/pages/CallLogs.vue'),
     meta: { scrollPos: { top: 0, left: 0 } },
   },
-  {
-    path: '/call-logs/:callLogId',
-    name: 'Call Log',
-    component: () => import('@/pages/CallLog.vue'),
-    props: true,
-  },
   {
     path: '/email-templates',
     name: 'Email Templates',