fix: show details in tabs in lead/deal page in mobile view

frontend/src/components/Icons/DetailsIcon.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-list-collapse"
+  >
+    <path d="m3 10 2.5-2.5L3 5" />
+    <path d="m3 19 2.5-2.5L3 14" />
+    <path d="M10 6h11" />
+    <path d="M10 12h11" />
+    <path d="M10 18h11" />
+  </svg>
+</template>

frontend/src/pages/MobileDeal.vue

@@ -44,73 +44,14 @@
     </div>
   </div>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
-    <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
+    <Tabs
-      <Activities
+      v-model="tabIndex"
-        ref="activities"
+      v-slot="{ tab }"
-        doctype="CRM Deal"
+      :tabs="tabs"
-        :title="tab.name"
+      tablistClass="!px-3"
-        v-model:reload="reload"
+      class="overflow-auto"
-        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 v-if="tab.name == 'Details'">
-      </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"
@@ -124,7 +65,7 @@
             <div
               v-for="(section, i) in detailSections"
               :key="section.label"
-            class="flex flex-col p-3"
+              class="flex flex-col px-2 py-3 sm:p-3"
               :class="{ 'border-b': i !== detailSections.length - 1 }"
             >
               <Section :is-opened="section.opened" :label="section.label">
@@ -265,7 +206,16 @@
             </div>
           </div>
         </div>
-    </Resizer>
+      </div>
+      <Activities
+        v-else
+        doctype="CRM Deal"
+        :title="tab.name"
+        v-model:reload="reload"
+        v-model:tabIndex="tabIndex"
+        v-model="deal"
+      />
+    </Tabs>
   </div>
   <OrganizationModal
     v-model="showOrganizationModal"
@@ -295,7 +245,7 @@
   />
 </template>
 <script setup>
-import Resizer from '@/components/Resizer.vue'
+import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
@@ -305,7 +255,6 @@ 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'
@@ -320,21 +269,18 @@ 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 { whatsappEnabled, callEnabled, isMobileView } from '@/stores/settings'
 import {
   createResource,
   Dropdown,
-  Tooltip,
   Avatar,
   Tabs,
   Breadcrumbs,
@@ -448,6 +394,12 @@ const breadcrumbs = computed(() => {
 const tabIndex = ref(0)
 const tabs = computed(() => {
   let tabOptions = [
+    {
+      name: 'Details',
+      label: __('Details'),
+      icon: DetailsIcon,
+      condition: () => isMobileView.value,
+    },
     {
       name: 'Activity',
       label: __('Activity'),
@@ -606,23 +558,6 @@ const deal_contacts = createResource({
   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
@@ -637,10 +572,4 @@ async function deleteDeal(name) {
   })
   router.push({ name: 'Deals' })
 }
-
-const activities = ref(null)
-
-function openEmailBox() {
-  activities.value.emailBox.show = true
-}
 </script>

frontend/src/pages/MobileLead.vue

@@ -49,122 +49,14 @@
     </div>
   </div>
   <div v-if="lead?.data" class="flex h-full overflow-hidden">
-    <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
+    <Tabs
-      <Activities
+      v-model="tabIndex"
-        ref="activities"
+      v-slot="{ tab }"
-        doctype="CRM Lead"
-        :title="tab.name"
       :tabs="tabs"
-        v-model:reload="reload"
+      tablistClass="!px-3"
-        v-model:tabIndex="tabIndex"
+      class="overflow-auto"
-        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 v-if="tab.name == 'Details'">
-      </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"
@@ -178,7 +70,7 @@
             <div
               v-for="(section, i) in detailSections"
               :key="section.label"
-            class="flex flex-col p-3"
+              class="flex flex-col px-2 py-3 sm:p-3"
               :class="{ 'border-b': i !== detailSections.length - 1 }"
             >
               <Section :is-opened="section.opened" :label="section.label">
@@ -191,7 +83,17 @@
             </div>
           </div>
         </div>
-    </Resizer>
+      </div>
+      <Activities
+        v-else
+        doctype="CRM Lead"
+        :title="tab.name"
+        :tabs="tabs"
+        v-model:reload="reload"
+        v-model:tabIndex="tabIndex"
+        v-model="lead"
+      />
+    </Tabs>
   </div>
   <AssignmentModal
     v-if="lead.data"
@@ -268,7 +170,7 @@
   </Dialog>
 </template>
 <script setup>
-import Resizer from '@/components/Resizer.vue'
+import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import CommentIcon from '@/components/Icons/CommentIcon.vue'
@@ -277,8 +179,6 @@ 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'
@@ -290,25 +190,15 @@ 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 {
+import { createToast, setupAssignees, setupCustomActions } from '@/utils'
-  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 { whatsappEnabled, callEnabled, isMobileView } from '@/stores/settings'
 import {
   createResource,
-  FileUploader,
   Dropdown,
-  Tooltip,
-  Avatar,
   Tabs,
   Switch,
   Breadcrumbs,
@@ -317,7 +207,7 @@ import {
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
-const { $dialog, makeCall } = globalStore()
+const { $dialog } = globalStore()
 const { getContactByName, contacts } = contactsStore()
 const { organizations } = organizationsStore()
 const { statusOptions, getLeadStatus } = statusesStore()
@@ -419,6 +309,12 @@ const tabIndex = ref(0)
 
 const tabs = computed(() => {
   let tabOptions = [
+    {
+      name: 'Details',
+      label: __('Details'),
+      icon: DetailsIcon,
+      condition: () => isMobileView.value,
+    },
     {
       name: 'Activity',
       label: __('Activity'),
@@ -471,13 +367,6 @@ watch(tabs, (value) => {
   }
 })
 
-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 []
@@ -576,10 +465,4 @@ async function convertToDeal(updated) {
     }
   }
 }
-
-const activities = ref(null)
-
-function openEmailBox() {
-  activities.value.emailBox.show = true
-}
 </script>