From 3b432a0209689fbb8f92a6401816d88add8c0e5c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 7 Apr 2025 13:58:58 +0530
Subject: [PATCH 1/6] fix: added multi action button

---
 frontend/components.d.ts                      |  1 +
 frontend/src/components/MultiActionButton.vue | 61 +++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 frontend/src/components/MultiActionButton.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index ef8a8359..648edc46 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -156,6 +156,7 @@ declare module 'vue' {
     MobileLayout: typeof import('./src/components/Layouts/MobileLayout.vue')['default']
     MobileSidebar: typeof import('./src/components/Mobile/MobileSidebar.vue')['default']
     MoneyIcon: typeof import('./src/components/Icons/MoneyIcon.vue')['default']
+    MultiActionButton: typeof import('./src/components/MultiActionButton.vue')['default']
     MultipleAvatar: typeof import('./src/components/MultipleAvatar.vue')['default']
     MultiSelectEmailInput: typeof import('./src/components/Controls/MultiSelectEmailInput.vue')['default']
     MuteIcon: typeof import('./src/components/Icons/MuteIcon.vue')['default']
diff --git a/frontend/src/components/MultiActionButton.vue b/frontend/src/components/MultiActionButton.vue
new file mode 100644
index 00000000..b7e5d3ce
--- /dev/null
+++ b/frontend/src/components/MultiActionButton.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="flex items-center">
+    <Button
+      variant="solid"
+      class="border-0 rounded-br-none rounded-tr-none"
+      :label="activeButton.label"
+      :size="$attrs.size"
+      :class="$attrs.class"
+      @click="() => activeButton.onClick()"
+    >
+      <template #prefix>
+        <component
+          v-if="activeButton.icon"
+          :is="activeButton.icon"
+          class="h-4 w-4"
+        />
+      </template>
+    </Button>
+    <Dropdown
+      :options="parsedOptions"
+      size="sm"
+      class="flex-1 [&>div>div>div]:w-full"
+      placement="right"
+    >
+      <template v-slot="{ togglePopover }">
+        <Button
+          variant="solid"
+          @click="togglePopover"
+          icon="chevron-down"
+          class="!w-6 justify-start rounded-bl-none rounded-tl-none border-0 pr-0 text-xs"
+        />
+      </template>
+    </Dropdown>
+  </div>
+</template>
+<script setup>
+import { Dropdown } from 'frappe-ui'
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const activeButton = ref(props.options?.[0] || {})
+
+const parsedOptions = computed(() => {
+  return (
+    props.options?.map((option) => {
+      return {
+        label: option.label,
+        onClick: () => {
+          activeButton.value = option
+        },
+      }
+    }) || []
+  )
+})
+</script>

From f0bf6962e7b0f5d3932fa26370be94b134a37724 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 7 Apr 2025 14:07:41 +0530
Subject: [PATCH 2/6] fix: do not show dropdown if only one option

---
 frontend/src/components/MultiActionButton.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/MultiActionButton.vue b/frontend/src/components/MultiActionButton.vue
index b7e5d3ce..02445aae 100644
--- a/frontend/src/components/MultiActionButton.vue
+++ b/frontend/src/components/MultiActionButton.vue
@@ -2,10 +2,13 @@
   <div class="flex items-center">
     <Button
       variant="solid"
-      class="border-0 rounded-br-none rounded-tr-none"
+      class="border-0"
       :label="activeButton.label"
       :size="$attrs.size"
-      :class="$attrs.class"
+      :class="[
+        $attrs.class,
+        showDropdown ? 'rounded-br-none rounded-tr-none' : '',
+      ]"
       @click="() => activeButton.onClick()"
     >
       <template #prefix>
@@ -17,6 +20,7 @@
       </template>
     </Button>
     <Dropdown
+      v-show="showDropdown"
       :options="parsedOptions"
       size="sm"
       class="flex-1 [&>div>div>div]:w-full"
@@ -44,6 +48,7 @@ const props = defineProps({
   },
 })
 
+const showDropdown = ref(props.options?.length > 1)
 const activeButton = ref(props.options?.[0] || {})
 
 const parsedOptions = computed(() => {

From 40370067b20c92f339837745312b0594e7cc5b45 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 7 Apr 2025 14:13:55 +0530
Subject: [PATCH 3/6] fix: dynamic variant

---
 frontend/src/components/MultiActionButton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/MultiActionButton.vue b/frontend/src/components/MultiActionButton.vue
index 02445aae..5319c1e3 100644
--- a/frontend/src/components/MultiActionButton.vue
+++ b/frontend/src/components/MultiActionButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center">
     <Button
-      variant="solid"
+      :variant="$attrs.variant"
       class="border-0"
       :label="activeButton.label"
       :size="$attrs.size"
@@ -28,7 +28,7 @@
     >
       <template v-slot="{ togglePopover }">
         <Button
-          variant="solid"
+          :variant="$attrs.variant"
           @click="togglePopover"
           icon="chevron-down"
           class="!w-6 justify-start rounded-bl-none rounded-tl-none border-0 pr-0 text-xs"

From 26fabddcbefadc373d31d24b1eb71da21425d753 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 7 Apr 2025 15:32:09 +0530
Subject: [PATCH 4/6] fix: handle feather icon in multi action button

---
 frontend/src/components/MultiActionButton.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/MultiActionButton.vue b/frontend/src/components/MultiActionButton.vue
index 5319c1e3..a5cb6ae2 100644
--- a/frontend/src/components/MultiActionButton.vue
+++ b/frontend/src/components/MultiActionButton.vue
@@ -12,8 +12,13 @@
       @click="() => activeButton.onClick()"
     >
       <template #prefix>
+        <FeatherIcon
+          v-if="activeButton.icon && typeof activeButton.icon === 'string'"
+          :name="activeButton.icon"
+          class="h-4 w-4"
+        />
         <component
-          v-if="activeButton.icon"
+          v-else-if="activeButton.icon"
           :is="activeButton.icon"
           class="h-4 w-4"
         />

From 97a132e05f5e55c6b1673bb66af4bf26ca18a448 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 7 Apr 2025 15:32:34 +0530
Subject: [PATCH 5/6] fix: show call tab always

---
 frontend/src/pages/Deal.vue | 1 -
 frontend/src/pages/Lead.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 3a1d1225..6440ffde 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -545,7 +545,6 @@ const tabs = computed(() => {
       name: 'Calls',
       label: __('Calls'),
       icon: PhoneIcon,
-      condition: () => callEnabled.value,
     },
     {
       name: 'Tasks',
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 22041c7a..cd8ad7cb 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -532,7 +532,6 @@ const tabs = computed(() => {
       name: 'Calls',
       label: __('Calls'),
       icon: PhoneIcon,
-      condition: () => callEnabled.value,
     },
     {
       name: 'Tasks',

From fdceb51fdc634255853f7642c368b78c399318b0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 7 Apr 2025 15:34:46 +0530
Subject: [PATCH 6/6] fix: added multi action button to make and create call

---
 .../src/components/Activities/Activities.vue  | 27 +++++++++++---
 .../components/Activities/ActivityHeader.vue  | 37 +++++++++++++++----
 .../src/components/Activities/AllModals.vue   | 23 ++++++++++++
 3 files changed, 73 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 8e49b8db..847667a7 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -373,11 +373,7 @@
     >
       <component :is="emptyTextIcon" class="h-10 w-10" />
       <span>{{ __(emptyText) }}</span>
-      <Button
-        v-if="title == 'Calls'"
-        :label="__('Make a Call')"
-        @click="makeCall(doc.data.mobile_no)"
-      />
+      <MultiActionButton v-if="title == 'Calls'" :options="callActions" />
       <Button
         v-else-if="title == 'Notes'"
         :label="__('Create Note')"
@@ -470,6 +466,7 @@ import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import WhatsAppArea from '@/components/Activities/WhatsAppArea.vue'
 import WhatsAppBox from '@/components/Activities/WhatsAppBox.vue'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
+import MultiActionButton from '@/components/MultiActionButton.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DotIcon from '@/components/Icons/DotIcon.vue'
@@ -487,7 +484,7 @@ import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
 import { timeAgo, formatDate, startCase } from '@/utils'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
-import { whatsappEnabled } from '@/composables/settings'
+import { whatsappEnabled, callEnabled } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { Button, Tooltip, createResource } from 'frappe-ui'
 import { useElementVisibility } from '@vueuse/core'
@@ -785,5 +782,23 @@ function scroll(hash) {
   }, 500)
 }
 
+const callActions = computed(() => {
+  let actions = [
+    {
+      label: __('Create Call Log'),
+      onClick: () => modalRef.value.createCallLog(),
+    },
+    {
+      label: __('Make a Call'),
+      onClick: () => makeCall(doc.data.mobile_no),
+      condition: () => callEnabled.value,
+    },
+  ]
+
+  return actions.filter((action) =>
+    action.condition ? action.condition() : true,
+  )
+})
+
 defineExpose({ emailBox, all_activities })
 </script>
diff --git a/frontend/src/components/Activities/ActivityHeader.vue b/frontend/src/components/Activities/ActivityHeader.vue
index 78ad93a7..882d0d2e 100644
--- a/frontend/src/components/Activities/ActivityHeader.vue
+++ b/frontend/src/components/Activities/ActivityHeader.vue
@@ -26,16 +26,11 @@
       </template>
       <span>{{ __('New Comment') }}</span>
     </Button>
-    <Button
+    <MultiActionButton
       v-else-if="title == 'Calls'"
       variant="solid"
-      @click="makeCall(doc.data.mobile_no)"
-    >
-      <template #prefix>
-        <PhoneIcon class="h-4 w-4" />
-      </template>
-      <span>{{ __('Make a Call') }}</span>
-    </Button>
+      :options="callActions"
+    />
     <Button
       v-else-if="title == 'Notes'"
       variant="solid"
@@ -97,6 +92,7 @@
   </div>
 </template>
 <script setup>
+import MultiActionButton from '@/components/MultiActionButton.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
@@ -136,6 +132,11 @@ const defaultActions = computed(() => {
       label: __('New Comment'),
       onClick: () => (props.emailBox.showComment = true),
     },
+    {
+      icon: h(PhoneIcon, { class: 'h-4 w-4' }),
+      label: __('Create Call Log'),
+      onClick: () => props.modalRef.createCallLog(),
+    },
     {
       icon: h(PhoneIcon, { class: 'h-4 w-4' }),
       label: __('Make a Call'),
@@ -172,4 +173,24 @@ const defaultActions = computed(() => {
 function getTabIndex(name) {
   return props.tabs.findIndex((tab) => tab.name === name)
 }
+
+const callActions = computed(() => {
+  let actions = [
+    {
+      label: __('Create Call Log'),
+      icon: 'plus',
+      onClick: () => props.modalRef.createCallLog(),
+    },
+    {
+      label: __('Make a Call'),
+      icon: h(PhoneIcon, { class: 'h-4 w-4' }),
+      onClick: () => makeCall(doc.data.mobile_no),
+      condition: () => callEnabled.value,
+    },
+  ]
+
+  return actions.filter((action) =>
+    action.condition ? action.condition() : true,
+  )
+})
 </script>
diff --git a/frontend/src/components/Activities/AllModals.vue b/frontend/src/components/Activities/AllModals.vue
index 1217b039..9b312398 100644
--- a/frontend/src/components/Activities/AllModals.vue
+++ b/frontend/src/components/Activities/AllModals.vue
@@ -15,10 +15,16 @@
     :doc="doc.data?.name"
     @after="redirect('notes')"
   />
+  <CallLogModal
+    v-model="showCallLogModal"
+    v-model:callLog="callLog"
+    :options="{ afterInsert: () => activities.reload() }"
+  />
 </template>
 <script setup>
 import TaskModal from '@/components/Modals/TaskModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
+import CallLogModal from '@/components/Modals/CallLogModal.vue'
 import { call } from 'frappe-ui'
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -77,6 +83,22 @@ function showNote(n) {
   showNoteModal.value = true
 }
 
+// Call Logs
+const showCallLogModal = ref(false)
+const callLog = ref({})
+
+function createCallLog() {
+  let doctype = props.doctype
+  let docname = props.doc.data?.name
+  callLog.value = {
+    data: {
+      reference_doctype: doctype,
+      reference_docname: docname,
+    },
+  }
+  showCallLogModal.value = true
+}
+
 // common
 const route = useRoute()
 const router = useRouter()
@@ -95,5 +117,6 @@ defineExpose({
   deleteTask,
   updateTaskStatus,
   showNote,
+  createCallLog,
 })
 </script>