From 8cca611be6fee823b32af715ef94527c44308337 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 27 May 2024 14:14:56 +0530
Subject: [PATCH] fix: lead/deal header layout in mobile view

---
 .../src/components/Mobile/MobileAppHeader.vue |   4 +-
 frontend/src/pages/MobileDeal.vue             | 646 ++++++++++++++++++
 frontend/src/pages/MobileLead.vue             | 585 ++++++++++++++++
 3 files changed, 1233 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/MobileDeal.vue
 create mode 100644 frontend/src/pages/MobileLead.vue

diff --git a/frontend/src/components/Mobile/MobileAppHeader.vue b/frontend/src/components/Mobile/MobileAppHeader.vue
index 2270a841..1047f87d 100644
--- a/frontend/src/components/Mobile/MobileAppHeader.vue
+++ b/frontend/src/components/Mobile/MobileAppHeader.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex border-b pr-5">
-    <div class="z-20 -mr-4 ml-2 flex items-center justify-center">
+  <div class="flex border-b pr-3">
+    <div class="z-20 -mr-4 ml-1 flex items-center justify-center">
       <Button variant="ghosted" @click="sidebarOpened = !sidebarOpened">
         <FeatherIcon name="menu" class="size-4" />
       </Button>
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
new file mode 100644
index 00000000..c43d507d
--- /dev/null
+++ b/frontend/src/pages/MobileDeal.vue
@@ -0,0 +1,646 @@
+<template>
+  <LayoutHeader v-if="deal.data">
+    <header
+      class="relative flex h-12 items-center justify-between gap-2 py-2.5 pl-5"
+    >
+      <Breadcrumbs :items="breadcrumbs" />
+      <div class="absolute right-0">
+        <Dropdown :options="statusOptions('deal', updateField)">
+          <template #default="{ open }">
+            <Button
+              :label="deal.data.status"
+              :class="getDealStatus(deal.data.status).colorClass"
+            >
+              <template #prefix>
+                <IndicatorIcon />
+              </template>
+              <template #suffix>
+                <FeatherIcon
+                  :name="open ? 'chevron-up' : 'chevron-down'"
+                  class="h-4"
+                />
+              </template>
+            </Button>
+          </template>
+        </Dropdown>
+      </div>
+    </header>
+  </LayoutHeader>
+  <div
+    v-if="deal.data"
+    class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
+  >
+    <component :is="deal.data._assignedTo?.length == 1 ? 'Button' : 'div'">
+      <MultipleAvatar
+        :avatars="deal.data._assignedTo"
+        @click="showAssignmentModal = true"
+      />
+    </component>
+    <div class="flex items-center gap-2">
+      <CustomActions
+        v-if="deal.data._customActions"
+        :actions="deal.data._customActions"
+      />
+    </div>
+  </div>
+  <div v-if="deal.data" class="flex h-full overflow-hidden">
+    <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
+      <Activities
+        ref="activities"
+        doctype="CRM Deal"
+        :title="tab.name"
+        v-model:reload="reload"
+        v-model:tabIndex="tabIndex"
+        v-model="deal"
+      />
+    </Tabs>
+    <Resizer side="right" class="flex flex-col justify-between border-l">
+      <div
+        class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium"
+        @click="copyToClipboard(deal.data.name)"
+      >
+        {{ __(deal.data.name) }}
+      </div>
+      <div class="flex items-center justify-start gap-5 border-b p-5">
+        <Tooltip :text="__('Organization logo')">
+          <div class="group relative size-12">
+            <Avatar
+              size="3xl"
+              class="size-12"
+              :label="organization?.name || __('Untitled')"
+              :image="organization?.organization_logo"
+            />
+          </div>
+        </Tooltip>
+        <div class="flex flex-col gap-2.5 truncate">
+          <Tooltip :text="organization?.name || __('Set an organization')">
+            <div class="truncate text-2xl font-medium">
+              {{ organization?.name || __('Untitled') }}
+            </div>
+          </Tooltip>
+          <div class="flex gap-1.5">
+            <Tooltip v-if="callEnabled" :text="__('Make a call')">
+              <Button class="h-7 w-7" @click="triggerCall">
+                <PhoneIcon class="h-4 w-4" />
+              </Button>
+            </Tooltip>
+            <Tooltip :text="__('Send an email')">
+              <Button class="h-7 w-7">
+                <EmailIcon
+                  class="h-4 w-4"
+                  @click="
+                    deal.data.email
+                      ? openEmailBox()
+                      : errorMessage(__('No email set'))
+                  "
+                />
+              </Button>
+            </Tooltip>
+            <Tooltip :text="__('Go to website')">
+              <Button class="h-7 w-7">
+                <LinkIcon
+                  class="h-4 w-4"
+                  @click="
+                    deal.data.website
+                      ? openWebsite(deal.data.website)
+                      : errorMessage(__('No website set'))
+                  "
+                />
+              </Button>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+      <SLASection
+        v-if="deal.data.sla_status"
+        v-model="deal.data"
+        @updateField="updateField"
+      />
+      <div
+        v-if="detailSections.length"
+        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"
+            :key="section.label"
+            class="flex flex-col p-3"
+            :class="{ 'border-b': i !== detailSections.length - 1 }"
+          >
+            <Section :is-opened="section.opened" :label="section.label">
+              <template #actions>
+                <div v-if="section.contacts" class="pr-2">
+                  <Link
+                    value=""
+                    doctype="Contact"
+                    @change="(e) => addContact(e)"
+                    :onCreate="
+                      (value, close) => {
+                        _contact = {
+                          first_name: value,
+                          company_name: deal.data.organization,
+                        }
+                        showContactModal = true
+                        close()
+                      }
+                    "
+                  >
+                    <template #target="{ togglePopover }">
+                      <Button
+                        class="h-7 px-3"
+                        variant="ghost"
+                        icon="plus"
+                        @click="togglePopover()"
+                      />
+                    </template>
+                  </Link>
+                </div>
+              </template>
+              <SectionFields
+                v-if="section.fields"
+                :fields="section.fields"
+                v-model="deal.data"
+                @update="updateField"
+              />
+              <div v-else>
+                <div
+                  v-if="
+                    deal_contacts?.loading && deal_contacts?.data?.length == 0
+                  "
+                  class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-gray-500"
+                >
+                  <LoadingIndicator class="h-4 w-4" />
+                  <span>{{ __('Loading...') }}</span>
+                </div>
+                <div
+                  v-else-if="section.contacts.length"
+                  v-for="(contact, i) in section.contacts"
+                  :key="contact.name"
+                >
+                  <div
+                    class="px-2 pb-2.5"
+                    :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
+                  >
+                    <Section :is-opened="contact.opened">
+                      <template #header="{ opened, toggle }">
+                        <div
+                          class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-gray-700"
+                        >
+                          <div
+                            class="flex h-7 items-center gap-2 truncate"
+                            @click="toggle()"
+                          >
+                            <Avatar
+                              :label="contact.full_name"
+                              :image="contact.image"
+                              size="md"
+                            />
+                            <div class="truncate">
+                              {{ contact.full_name }}
+                            </div>
+                            <Badge
+                              v-if="contact.is_primary"
+                              class="ml-2"
+                              variant="outline"
+                              :label="__('Primary')"
+                              theme="green"
+                            />
+                          </div>
+                          <div class="flex items-center">
+                            <Dropdown :options="contactOptions(contact.name)">
+                              <Button
+                                icon="more-horizontal"
+                                class="text-gray-600"
+                                variant="ghost"
+                              />
+                            </Dropdown>
+                            <Button
+                              variant="ghost"
+                              @click="
+                                router.push({
+                                  name: 'Contact',
+                                  params: { contactId: contact.name },
+                                })
+                              "
+                            >
+                              <ArrowUpRightIcon class="h-4 w-4" />
+                            </Button>
+                            <Button variant="ghost" @click="toggle()">
+                              <FeatherIcon
+                                name="chevron-right"
+                                class="h-4 w-4 text-gray-900 transition-all duration-300 ease-in-out"
+                                :class="{ 'rotate-90': opened }"
+                              />
+                            </Button>
+                          </div>
+                        </div>
+                      </template>
+                      <div
+                        class="flex flex-col gap-1.5 text-base text-gray-800"
+                      >
+                        <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
+                          <EmailIcon class="h-4 w-4" />
+                          {{ contact.email }}
+                        </div>
+                        <div class="flex items-center gap-3 p-1 py-1.5">
+                          <PhoneIcon class="h-4 w-4" />
+                          {{ contact.mobile_no }}
+                        </div>
+                      </div>
+                    </Section>
+                  </div>
+                  <div
+                    v-if="i != section.contacts.length - 1"
+                    class="mx-2 h-px border-t border-gray-200"
+                  />
+                </div>
+                <div
+                  v-else
+                  class="flex h-20 items-center justify-center text-base text-gray-600"
+                >
+                  {{ __('No contacts added') }}
+                </div>
+              </div>
+            </Section>
+          </div>
+        </div>
+      </div>
+    </Resizer>
+  </div>
+  <OrganizationModal
+    v-model="showOrganizationModal"
+    v-model:organization="_organization"
+    :options="{
+      redirect: false,
+      afterInsert: (doc) =>
+        updateField('organization', doc.name, () => {
+          organizations.reload()
+        }),
+    }"
+  />
+  <ContactModal
+    v-model="showContactModal"
+    :contact="_contact"
+    :options="{
+      redirect: false,
+      afterInsert: (doc) => addContact(doc.name),
+    }"
+  />
+  <AssignmentModal
+    v-if="deal.data"
+    :doc="deal.data"
+    doctype="CRM Deal"
+    v-model="showAssignmentModal"
+    v-model:assignees="deal.data._assignedTo"
+  />
+</template>
+<script setup>
+import Resizer from '@/components/Resizer.vue'
+import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
+import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
+import CommentIcon from '@/components/Icons/CommentIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import TaskIcon from '@/components/Icons/TaskIcon.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import LinkIcon from '@/components/Icons/LinkIcon.vue'
+import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
+import SuccessIcon from '@/components/Icons/SuccessIcon.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Activities from '@/components/Activities.vue'
+import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import MultipleAvatar from '@/components/MultipleAvatar.vue'
+import ContactModal from '@/components/Modals/ContactModal.vue'
+import Link from '@/components/Controls/Link.vue'
+import Section from '@/components/Section.vue'
+import SectionFields from '@/components/SectionFields.vue'
+import SLASection from '@/components/SLASection.vue'
+import CustomActions from '@/components/CustomActions.vue'
+import {
+  openWebsite,
+  createToast,
+  setupAssignees,
+  setupCustomActions,
+  errorMessage,
+  copyToClipboard,
+} from '@/utils'
+import { globalStore } from '@/stores/global'
+import { organizationsStore } from '@/stores/organizations'
+import { statusesStore } from '@/stores/statuses'
+import { whatsappEnabled, callEnabled } from '@/stores/settings'
+import {
+  createResource,
+  Dropdown,
+  Tooltip,
+  Avatar,
+  Tabs,
+  Breadcrumbs,
+  call,
+} from 'frappe-ui'
+import { ref, computed, h, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const { $dialog, makeCall } = globalStore()
+const { organizations, getOrganization } = organizationsStore()
+const { statusOptions, getDealStatus } = statusesStore()
+const router = useRouter()
+
+const props = defineProps({
+  dealId: {
+    type: String,
+    required: true,
+  },
+})
+
+const deal = createResource({
+  url: 'crm.fcrm.doctype.crm_deal.api.get_deal',
+  params: { name: props.dealId },
+  cache: ['deal', props.dealId],
+  onSuccess: (data) => {
+    setupAssignees(data)
+    setupCustomActions(data, {
+      doc: data,
+      $dialog,
+      router,
+      updateField,
+      createToast,
+      deleteDoc: deleteDeal,
+      call,
+    })
+  },
+})
+
+onMounted(() => {
+  if (deal.data) return
+  deal.fetch()
+})
+
+const reload = ref(false)
+const showOrganizationModal = ref(false)
+const showAssignmentModal = ref(false)
+const _organization = ref({})
+
+const organization = computed(() => {
+  return deal.data?.organization && getOrganization(deal.data.organization)
+})
+
+function updateDeal(fieldname, value, callback) {
+  value = Array.isArray(fieldname) ? '' : value
+
+  if (validateRequired(fieldname, value)) return
+
+  createResource({
+    url: 'frappe.client.set_value',
+    params: {
+      doctype: 'CRM Deal',
+      name: props.dealId,
+      fieldname,
+      value,
+    },
+    auto: true,
+    onSuccess: () => {
+      deal.reload()
+      reload.value = true
+      createToast({
+        title: __('Deal updated'),
+        icon: 'check',
+        iconClasses: 'text-green-600',
+      })
+      callback?.()
+    },
+    onError: (err) => {
+      createToast({
+        title: __('Error updating deal'),
+        text: __(err.messages?.[0]),
+        icon: 'x',
+        iconClasses: 'text-red-600',
+      })
+    },
+  })
+}
+
+function validateRequired(fieldname, value) {
+  let meta = deal.data.all_fields || {}
+  if (meta[fieldname]?.reqd && !value) {
+    createToast({
+      title: __('Error Updating Deal'),
+      text: __('{0} is a required field', [meta[fieldname].label]),
+      icon: 'x',
+      iconClasses: 'text-red-600',
+    })
+    return true
+  }
+  return false
+}
+
+const breadcrumbs = computed(() => {
+  let items = [{ label: __('Deals'), route: { name: 'Deals' } }]
+  items.push({
+    label: organization.value?.name || __('Untitled'),
+    route: { name: 'Deal', params: { dealId: deal.data.name } },
+  })
+  return items
+})
+
+const tabIndex = ref(0)
+const tabs = computed(() => {
+  let tabOptions = [
+    {
+      name: 'Activity',
+      label: __('Activity'),
+      icon: ActivityIcon,
+    },
+    {
+      name: 'Emails',
+      label: __('Emails'),
+      icon: EmailIcon,
+    },
+    {
+      name: 'Comments',
+      label: __('Comments'),
+      icon: CommentIcon,
+    },
+    {
+      name: 'Calls',
+      label: __('Calls'),
+      icon: PhoneIcon,
+      condition: () => callEnabled.value,
+    },
+    {
+      name: 'Tasks',
+      label: __('Tasks'),
+      icon: TaskIcon,
+    },
+    {
+      name: 'Notes',
+      label: __('Notes'),
+      icon: NoteIcon,
+    },
+    {
+      name: 'WhatsApp',
+      label: __('WhatsApp'),
+      icon: WhatsAppIcon,
+      condition: () => whatsappEnabled.value,
+    },
+  ]
+  return tabOptions.filter((tab) => (tab.condition ? tab.condition() : true))
+})
+
+const detailSections = computed(() => {
+  let data = deal.data
+  if (!data) return []
+  return getParsedFields(data.doctype_fields, deal_contacts.data)
+})
+
+function getParsedFields(sections, contacts) {
+  sections.forEach((section) => {
+    if (section.name == 'contacts_tab') {
+      delete section.fields
+      section.contacts =
+        contacts?.map((contact) => {
+          return {
+            name: contact.name,
+            full_name: contact.full_name,
+            email: contact.email,
+            mobile_no: contact.mobile_no,
+            image: contact.image,
+            is_primary: contact.is_primary,
+            opened: false,
+          }
+        }) || []
+    } else {
+      section.fields.forEach((field) => {
+        if (field.name == 'organization') {
+          field.create = (value, close) => {
+            _organization.value.organization_name = value
+            showOrganizationModal.value = true
+            close()
+          }
+          field.link = (org) =>
+            router.push({
+              name: 'Organization',
+              params: { organizationId: org },
+            })
+        }
+      })
+    }
+  })
+  return sections
+}
+
+const showContactModal = ref(false)
+const _contact = ref({})
+
+function contactOptions(contact) {
+  let options = [
+    {
+      label: __('Delete'),
+      icon: 'trash-2',
+      onClick: () => removeContact(contact),
+    },
+  ]
+
+  if (!contact.is_primary) {
+    options.push({
+      label: __('Set as Primary Contact'),
+      icon: h(SuccessIcon, { class: 'h-4 w-4' }),
+      onClick: () => setPrimaryContact(contact),
+    })
+  }
+
+  return options
+}
+
+async function addContact(contact) {
+  let d = await call('crm.fcrm.doctype.crm_deal.crm_deal.add_contact', {
+    deal: props.dealId,
+    contact,
+  })
+  if (d) {
+    deal_contacts.reload()
+    createToast({
+      title: __('Contact added'),
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
+async function removeContact(contact) {
+  let d = await call('crm.fcrm.doctype.crm_deal.crm_deal.remove_contact', {
+    deal: props.dealId,
+    contact,
+  })
+  if (d) {
+    deal_contacts.reload()
+    createToast({
+      title: __('Contact removed'),
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
+async function setPrimaryContact(contact) {
+  let d = await call('crm.fcrm.doctype.crm_deal.crm_deal.set_primary_contact', {
+    deal: props.dealId,
+    contact,
+  })
+  if (d) {
+    deal_contacts.reload()
+    createToast({
+      title: __('Primary contact set'),
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
+const deal_contacts = createResource({
+  url: 'crm.fcrm.doctype.crm_deal.api.get_deal_contacts',
+  params: { name: props.dealId },
+  cache: ['deal_contacts', props.dealId],
+  auto: true,
+})
+
+function triggerCall() {
+  let primaryContact = deal_contacts.data?.find((c) => c.is_primary)
+  let mobile_no = primaryContact.mobile_no || null
+
+  if (!primaryContact) {
+    errorMessage(__('No primary contact set'))
+    return
+  }
+
+  if (!mobile_no) {
+    errorMessage(__('No mobile number set'))
+    return
+  }
+
+  makeCall(mobile_no)
+}
+
+function updateField(name, value, callback) {
+  updateDeal(name, value, () => {
+    deal.data[name] = value
+    callback?.()
+  })
+}
+
+async function deleteDeal(name) {
+  await call('frappe.client.delete', {
+    doctype: 'CRM Deal',
+    name,
+  })
+  router.push({ name: 'Deals' })
+}
+
+const activities = ref(null)
+
+function openEmailBox() {
+  activities.value.emailBox.show = true
+}
+</script>
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
new file mode 100644
index 00000000..668ed1e6
--- /dev/null
+++ b/frontend/src/pages/MobileLead.vue
@@ -0,0 +1,585 @@
+<template>
+  <LayoutHeader v-if="lead.data">
+    <header
+      class="relative flex h-12 items-center justify-between gap-2 py-2.5 pl-5"
+    >
+      <Breadcrumbs :items="breadcrumbs" />
+      <div class="absolute right-0">
+        <Dropdown :options="statusOptions('lead', updateField)">
+          <template #default="{ open }">
+            <Button
+              :label="lead.data.status"
+              :class="getLeadStatus(lead.data.status).colorClass"
+            >
+              <template #prefix>
+                <IndicatorIcon />
+              </template>
+              <template #suffix>
+                <FeatherIcon
+                  :name="open ? 'chevron-up' : 'chevron-down'"
+                  class="h-4"
+                />
+              </template>
+            </Button>
+          </template>
+        </Dropdown>
+      </div>
+    </header>
+  </LayoutHeader>
+  <div
+    v-if="lead.data"
+    class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
+  >
+    <component :is="lead.data._assignedTo?.length == 1 ? 'Button' : 'div'">
+      <MultipleAvatar
+        :avatars="lead.data._assignedTo"
+        @click="showAssignmentModal = true"
+      />
+    </component>
+    <div class="flex items-center gap-2">
+      <CustomActions
+        v-if="lead.data._customActions"
+        :actions="lead.data._customActions"
+      />
+      <Button
+        :label="__('Convert')"
+        variant="solid"
+        @click="showConvertToDealModal = true"
+      />
+    </div>
+  </div>
+  <div v-if="lead?.data" class="flex h-full overflow-hidden">
+    <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
+      <Activities
+        ref="activities"
+        doctype="CRM Lead"
+        :title="tab.name"
+        :tabs="tabs"
+        v-model:reload="reload"
+        v-model:tabIndex="tabIndex"
+        v-model="lead"
+      />
+    </Tabs>
+    <Resizer class="flex flex-col justify-between border-l" side="right">
+      <div
+        class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium"
+        @click="copyToClipboard(lead.data.name)"
+      >
+        {{ __(lead.data.name) }}
+      </div>
+      <FileUploader
+        @success="(file) => updateField('image', file.file_url)"
+        :validateFile="validateFile"
+      >
+        <template #default="{ openFileSelector, error }">
+          <div class="flex items-center justify-start gap-5 border-b p-5">
+            <div class="group relative size-12">
+              <Avatar
+                size="3xl"
+                class="size-12"
+                :label="lead.data.first_name || __('Untitled')"
+                :image="lead.data.image"
+              />
+              <component
+                :is="lead.data.image ? Dropdown : 'div'"
+                v-bind="
+                  lead.data.image
+                    ? {
+                        options: [
+                          {
+                            icon: 'upload',
+                            label: lead.data.image
+                              ? __('Change image')
+                              : __('Upload image'),
+                            onClick: openFileSelector,
+                          },
+                          {
+                            icon: 'trash-2',
+                            label: __('Remove image'),
+                            onClick: () => updateField('image', ''),
+                          },
+                        ],
+                      }
+                    : { onClick: openFileSelector }
+                "
+                class="!absolute bottom-0 left-0 right-0"
+              >
+                <div
+                  class="z-1 absolute bottom-0.5 left-0 right-0.5 flex h-9 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="size-4 cursor-pointer text-white" />
+                </div>
+              </component>
+            </div>
+            <div class="flex flex-col gap-2.5 truncate">
+              <Tooltip :text="lead.data.lead_name || __('Set first name')">
+                <div class="truncate text-2xl font-medium">
+                  {{ lead.data.lead_name || __('Untitled') }}
+                </div>
+              </Tooltip>
+              <div class="flex gap-1.5">
+                <Tooltip v-if="callEnabled" :text="__('Make a call')">
+                  <Button
+                    class="h-7 w-7"
+                    @click="
+                      () =>
+                        lead.data.mobile_no
+                          ? makeCall(lead.data.mobile_no)
+                          : errorMessage(__('No phone number set'))
+                    "
+                  >
+                    <PhoneIcon class="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+                <Tooltip :text="__('Send an email')">
+                  <Button class="h-7 w-7">
+                    <EmailIcon
+                      class="h-4 w-4"
+                      @click="
+                        lead.data.email
+                          ? openEmailBox()
+                          : errorMessage(__('No email set'))
+                      "
+                    />
+                  </Button>
+                </Tooltip>
+                <Tooltip :text="__('Go to website')">
+                  <Button class="h-7 w-7">
+                    <LinkIcon
+                      class="h-4 w-4"
+                      @click="
+                        lead.data.website
+                          ? openWebsite(lead.data.website)
+                          : errorMessage(__('No website set'))
+                      "
+                    />
+                  </Button>
+                </Tooltip>
+              </div>
+              <ErrorMessage :message="__(error)" />
+            </div>
+          </div>
+        </template>
+      </FileUploader>
+      <SLASection
+        v-if="lead.data.sla_status"
+        v-model="lead.data"
+        @updateField="updateField"
+      />
+      <div
+        v-if="detailSections.length"
+        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"
+            :key="section.label"
+            class="flex flex-col p-3"
+            :class="{ 'border-b': i !== detailSections.length - 1 }"
+          >
+            <Section :is-opened="section.opened" :label="section.label">
+              <SectionFields
+                :fields="section.fields"
+                v-model="lead.data"
+                @update="updateField"
+              />
+            </Section>
+          </div>
+        </div>
+      </div>
+    </Resizer>
+  </div>
+  <AssignmentModal
+    v-if="lead.data"
+    :doc="lead.data"
+    doctype="CRM Lead"
+    v-model="showAssignmentModal"
+    v-model:assignees="lead.data._assignedTo"
+  />
+  <Dialog
+    v-model="showConvertToDealModal"
+    :options="{
+      title: __('Convert to Deal'),
+      size: 'xl',
+      actions: [
+        {
+          label: __('Convert'),
+          variant: 'solid',
+          onClick: convertToDeal,
+        },
+      ],
+    }"
+  >
+    <template #body-content>
+      <div class="mb-4 flex items-center gap-2 text-gray-600">
+        <OrganizationsIcon class="h-4 w-4" />
+        <label class="block text-base">{{ __('Organization') }}</label>
+      </div>
+      <div class="ml-6">
+        <div class="flex items-center justify-between text-base">
+          <div>{{ __('Choose Existing') }}</div>
+          <Switch v-model="existingOrganizationChecked" />
+        </div>
+        <Link
+          v-if="existingOrganizationChecked"
+          class="form-control mt-2.5"
+          variant="outline"
+          size="md"
+          :value="existingOrganization"
+          doctype="CRM Organization"
+          @change="(data) => (existingOrganization = data)"
+        />
+        <div v-else class="mt-2.5 text-base">
+          {{
+            __(
+              'New organization will be created based on the data in details section'
+            )
+          }}
+        </div>
+      </div>
+
+      <div class="mb-4 mt-6 flex items-center gap-2 text-gray-600">
+        <ContactsIcon class="h-4 w-4" />
+        <label class="block text-base">{{ __('Contact') }}</label>
+      </div>
+      <div class="ml-6">
+        <div class="flex items-center justify-between text-base">
+          <div>{{ __('Choose Existing') }}</div>
+          <Switch v-model="existingContactChecked" />
+        </div>
+        <Link
+          v-if="existingContactChecked"
+          class="form-control mt-2.5"
+          variant="outline"
+          size="md"
+          :value="existingContact"
+          doctype="Contact"
+          @change="(data) => (existingContact = data)"
+        />
+        <div v-else class="mt-2.5 text-base">
+          {{ __("New contact will be created based on the person's details") }}
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import Resizer from '@/components/Resizer.vue'
+import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
+import CommentIcon from '@/components/Icons/CommentIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import TaskIcon from '@/components/Icons/TaskIcon.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import CameraIcon from '@/components/Icons/CameraIcon.vue'
+import LinkIcon from '@/components/Icons/LinkIcon.vue'
+import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Activities from '@/components/Activities.vue'
+import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import MultipleAvatar from '@/components/MultipleAvatar.vue'
+import Link from '@/components/Controls/Link.vue'
+import Section from '@/components/Section.vue'
+import SectionFields from '@/components/SectionFields.vue'
+import SLASection from '@/components/SLASection.vue'
+import CustomActions from '@/components/CustomActions.vue'
+import {
+  openWebsite,
+  createToast,
+  setupAssignees,
+  setupCustomActions,
+  errorMessage,
+  copyToClipboard,
+} from '@/utils'
+import { globalStore } from '@/stores/global'
+import { contactsStore } from '@/stores/contacts'
+import { organizationsStore } from '@/stores/organizations'
+import { statusesStore } from '@/stores/statuses'
+import { whatsappEnabled, callEnabled } from '@/stores/settings'
+import {
+  createResource,
+  FileUploader,
+  Dropdown,
+  Tooltip,
+  Avatar,
+  Tabs,
+  Switch,
+  Breadcrumbs,
+  call,
+} from 'frappe-ui'
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const { $dialog, makeCall } = globalStore()
+const { getContactByName, contacts } = contactsStore()
+const { organizations } = organizationsStore()
+const { statusOptions, getLeadStatus } = statusesStore()
+const route = useRoute()
+const router = useRouter()
+
+const props = defineProps({
+  leadId: {
+    type: String,
+    required: true,
+  },
+})
+
+const lead = createResource({
+  url: 'crm.fcrm.doctype.crm_lead.api.get_lead',
+  params: { name: props.leadId },
+  cache: ['lead', props.leadId],
+  onSuccess: (data) => {
+    setupAssignees(data)
+    setupCustomActions(data, {
+      doc: data,
+      $dialog,
+      router,
+      updateField,
+      createToast,
+      deleteDoc: deleteLead,
+      call,
+    })
+  },
+})
+
+onMounted(() => {
+  if (lead.data) return
+  lead.fetch()
+})
+
+const reload = ref(false)
+const showAssignmentModal = ref(false)
+
+function updateLead(fieldname, value, callback) {
+  value = Array.isArray(fieldname) ? '' : value
+
+  if (!Array.isArray(fieldname) && validateRequired(fieldname, value)) return
+
+  createResource({
+    url: 'frappe.client.set_value',
+    params: {
+      doctype: 'CRM Lead',
+      name: props.leadId,
+      fieldname,
+      value,
+    },
+    auto: true,
+    onSuccess: () => {
+      lead.reload()
+      reload.value = true
+      createToast({
+        title: __('Lead updated'),
+        icon: 'check',
+        iconClasses: 'text-green-600',
+      })
+      callback?.()
+    },
+    onError: (err) => {
+      createToast({
+        title: __('Error updating lead'),
+        text: __(err.messages?.[0]),
+        icon: 'x',
+        iconClasses: 'text-red-600',
+      })
+    },
+  })
+}
+
+function validateRequired(fieldname, value) {
+  let meta = lead.data.all_fields || {}
+  if (meta[fieldname]?.reqd && !value) {
+    createToast({
+      title: __('Error Updating Lead'),
+      text: __('{0} is a required field', [meta[fieldname].label]),
+      icon: 'x',
+      iconClasses: 'text-red-600',
+    })
+    return true
+  }
+  return false
+}
+
+const breadcrumbs = computed(() => {
+  let items = [{ label: __('Leads'), route: { name: 'Leads' } }]
+  items.push({
+    label: lead.data.lead_name || __('Untitled'),
+    route: { name: 'Lead', params: { leadId: lead.data.name } },
+  })
+  return items
+})
+
+const tabIndex = ref(0)
+
+const tabs = computed(() => {
+  let tabOptions = [
+    {
+      name: 'Activity',
+      label: __('Activity'),
+      icon: ActivityIcon,
+    },
+    {
+      name: 'Emails',
+      label: __('Emails'),
+      icon: EmailIcon,
+    },
+    {
+      name: 'Comments',
+      label: __('Comments'),
+      icon: CommentIcon,
+    },
+    {
+      name: 'Calls',
+      label: __('Calls'),
+      icon: PhoneIcon,
+      condition: () => callEnabled.value,
+    },
+    {
+      name: 'Tasks',
+      label: __('Tasks'),
+      icon: TaskIcon,
+    },
+    {
+      name: 'Notes',
+      label: __('Notes'),
+      icon: NoteIcon,
+    },
+    {
+      name: 'WhatsApp',
+      label: __('WhatsApp'),
+      icon: WhatsAppIcon,
+      condition: () => whatsappEnabled.value,
+    },
+  ]
+  return tabOptions.filter((tab) => (tab.condition ? tab.condition() : true))
+})
+
+watch(tabs, (value) => {
+  if (value && route.params.tabName) {
+    let index = value.findIndex(
+      (tab) => tab.name.toLowerCase() === route.params.tabName.toLowerCase()
+    )
+    if (index !== -1) {
+      tabIndex.value = index
+    }
+  }
+})
+
+function validateFile(file) {
+  let extn = file.name.split('.').pop().toLowerCase()
+  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
+    return __('Only PNG and JPG images are allowed')
+  }
+}
+
+const detailSections = computed(() => {
+  let data = lead.data
+  if (!data) return []
+  return data.doctype_fields
+})
+
+function updateField(name, value, callback) {
+  updateLead(name, value, () => {
+    lead.data[name] = value
+    callback?.()
+  })
+}
+
+async function deleteLead(name) {
+  await call('frappe.client.delete', {
+    doctype: 'CRM Lead',
+    name,
+  })
+  router.push({ name: 'Leads' })
+}
+
+// Convert to Deal
+const showConvertToDealModal = ref(false)
+const existingContactChecked = ref(false)
+const existingOrganizationChecked = ref(false)
+
+const existingContact = ref('')
+const existingOrganization = ref('')
+
+async function convertToDeal(updated) {
+  let valueUpdated = false
+
+  if (existingContactChecked.value && !existingContact.value) {
+    createToast({
+      title: __('Error'),
+      text: __('Please select an existing contact'),
+      icon: 'x',
+      iconClasses: 'text-red-600',
+    })
+    return
+  }
+
+  if (existingOrganizationChecked.value && !existingOrganization.value) {
+    createToast({
+      title: __('Error'),
+      text: __('Please select an existing organization'),
+      icon: 'x',
+      iconClasses: 'text-red-600',
+    })
+    return
+  }
+
+  if (existingContactChecked.value && existingContact.value) {
+    lead.data.salutation = getContactByName(existingContact.value).salutation
+    lead.data.first_name = getContactByName(existingContact.value).first_name
+    lead.data.last_name = getContactByName(existingContact.value).last_name
+    lead.data.email_id = getContactByName(existingContact.value).email_id
+    lead.data.mobile_no = getContactByName(existingContact.value).mobile_no
+    existingContactChecked.value = false
+    valueUpdated = true
+  }
+
+  if (existingOrganizationChecked.value && existingOrganization.value) {
+    lead.data.organization = existingOrganization.value
+    existingOrganizationChecked.value = false
+    valueUpdated = true
+  }
+
+  if (valueUpdated) {
+    updateLead(
+      {
+        salutation: lead.data.salutation,
+        first_name: lead.data.first_name,
+        last_name: lead.data.last_name,
+        email_id: lead.data.email_id,
+        mobile_no: lead.data.mobile_no,
+        organization: lead.data.organization,
+      },
+      '',
+      () => convertToDeal(true)
+    )
+    showConvertToDealModal.value = false
+  } else {
+    let deal = await call(
+      'crm.fcrm.doctype.crm_lead.crm_lead.convert_to_deal',
+      {
+        lead: lead.data.name,
+      }
+    )
+    if (deal) {
+      if (updated) {
+        await organizations.reload()
+        await contacts.reload()
+      }
+      router.push({ name: 'Deal', params: { dealId: deal } })
+    }
+  }
+}
+
+const activities = ref(null)
+
+function openEmailBox() {
+  activities.value.emailBox.show = true
+}
+</script>