fix: added lead detail section on right sidebar with phone call button and more

now agent can call the customer using that button

frontend/src/components/CallUI.vue

@@ -333,8 +333,7 @@ function handleDisconnectedIncomingCall() {
   counterUp.value.stop()
 }
 
-async function makeOutgoingCall(close) {
-  close()
+async function makeOutgoingCall() {
   if (device) {
     log.value = `Attempting to call +917666980887 ...`
 
@@ -428,7 +427,7 @@ watch(
   { immediate: true }
 )
 
-provide('showPhoneCall', showPhoneCall)
+provide('makeOutgoingCall', makeOutgoingCall)
 </script>
 
 <style scoped>

frontend/src/components/CommunicationArea.vue

@@ -1,18 +1,12 @@
 <template>
   <div class="max-w-[81.7%] pl-16 p-4 pt-2">
     <button
-      class="flex gap-2 w-full items-center rounded-lg p-1 bg-gray-100 hover:bg-gray-200"
+      class="flex gap-2 w-full items-center rounded-lg p-2 bg-gray-100 hover:bg-gray-200"
       @click="showCommunicationBox = true"
       v-show="!showCommunicationBox"
     >
-      <UserAvatar class="m-1" :user="getUser().name" size="sm" />
-      <div class="flex-1 text-left text-base text-gray-600">Add a reply...</div>
-      <Tooltip text="Make a call..." class="m-1">
-        <PhoneIcon
-          class="bg-gray-900 rounded-full text-white fill-white p-[3px]"
-          @click.stop="showPhoneCall = true"
-        />
-      </Tooltip>
+      <UserAvatar :user="getUser().name" size="sm" />
+      <div class="text-base text-gray-600">Add a reply...</div>
     </button>
     <div
       v-show="showCommunicationBox"
@@ -55,14 +49,12 @@ import EmailEditor from '@/components/EmailEditor.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import { usersStore } from '@/stores/users'
 import { Tooltip, call, Button } from 'frappe-ui'
-import { ref, watch, computed, defineModel, inject } from 'vue'
+import { ref, watch, computed, defineModel } from 'vue'
 
 const modelValue = defineModel()
 
 const { getUser } = usersStore()
 
-let showPhoneCall = inject('showPhoneCall')
-
 const showCommunicationBox = ref(false)
 const newEmail = ref('')
 const newEmailEditor = ref(null)

frontend/src/pages/Lead.vue

@@ -69,11 +69,33 @@
             <Activities :title="tab.activityTitle" :activities="tab.content" />
           </TabPanel>
         </TabPanels>
-        <CommunicationArea v-if="[0, 1].includes(selectedIndex)" v-model="lead" />
+        <CommunicationArea
+          v-if="[0, 1].includes(selectedIndex)"
+          v-model="lead"
+        />
       </div>
+      <div class="flex flex-col justify-between border-l w-[360px]">
         <div
-        class="flex flex-col justify-between border-l w-[390px] overflow-hidden"
+          class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
         >
+          <Avatar
+            size="3xl"
+            :label="lead.data.first_name"
+            :image="lead.data.image"
+          />
+          <div class="font-medium text-2xl">{{ lead.data.lead_name }}</div>
+          <div class="flex gap-3">
+            <Button class="rounded-full h-8 w-8" @click="makeCall">
+              <PhoneIcon class="h-4 w-4" />
+            </Button>
+            <Button class="rounded-full h-8 w-8">
+              <EmailIcon class="h-4 w-4" />
+            </Button>
+            <Button icon="message-square" class="rounded-full h-8 w-8" />
+            <Button icon="more-horizontal" class="rounded-full h-8 w-8" />
+          </div>
+        </div>
+        <div class="flex-1 flex flex-col justify-between overflow-hidden">
           <div class="flex flex-col gap-6.5 p-3 overflow-y-auto">
             <div
               v-for="section in detailSections"
@@ -106,7 +128,9 @@
                       :key="field.label"
                       class="flex items-center px-3 gap-2 text-base leading-5 first:mt-4.5"
                     >
-                    <div class="text-gray-600 w-[106px]">{{ field.label }}</div>
+                      <div class="text-gray-600 w-[106px]">
+                        {{ field.label }}
+                      </div>
                       <div class="flex-1 w-full">
                         <FormControl
                           v-if="field.type === 'select'"
@@ -188,6 +212,7 @@
               </Toggler>
             </div>
           </div>
+        </div>
         <div
           class="flex items-center gap-1 text-sm px-6 p-3 leading-5 cursor-pointer"
         >
@@ -217,7 +242,7 @@ 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 CommunicationArea from '../components/CommunicationArea.vue'
+import CommunicationArea from '@/components/CommunicationArea.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { TransitionPresets, useTransition } from '@vueuse/core'
 import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
@@ -230,11 +255,14 @@ import {
   FormControl,
   Dropdown,
   Tooltip,
+  Avatar,
 } from 'frappe-ui'
-import { ref, computed, h } from 'vue'
+import { ref, computed, h, inject } from 'vue'
 
 const { getUser, users } = usersStore()
 
+const makeCall = inject('makeOutgoingCall')
+
 const props = defineProps({
   leadId: {
     type: String,
@@ -406,9 +434,14 @@ const detailSections = computed(() => {
       opened: true,
       fields: [
         {
-          label: 'Name',
+          label: 'First Name',
           type: 'data',
-          name: 'lead_name',
+          name: 'first_name',
+        },
+        {
+          label: 'Last Name',
+          type: 'data',
+          name: 'last_name',
         },
         {
           label: 'Email',