fix: made lead layout changes on deal

frontend/src/pages/Deal.vue

@@ -35,7 +35,9 @@
       </Dropdown>
     </template>
   </LayoutHeader>
+  <div class="flex h-full overflow-hidden">
     <TabGroup v-slot="{ selectedIndex }" v-if="deal.data" @change="onTabChange">
+      <div class="flex flex-col flex-1">
         <TabList class="flex items-center gap-6 border-b pl-5 relative">
           <Tab
             ref="tabRef"
@@ -45,7 +47,7 @@
             v-slot="{ selected }"
           >
             <button
-          class="flex items-center gap-2 py-[9px] -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
+              class="flex items-center gap-2 py-2.5 -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
               :class="{ 'text-gray-900': selected }"
             >
               <component v-if="tab.icon" :is="tab.icon" class="h-5" />
@@ -58,8 +60,7 @@
             :style="{ left: `${indicatorLeftValue}px` }"
           />
         </TabList>
-    <div class="flex h-full overflow-hidden">
+        <div class="flex flex-col h-full overflow-auto">
-      <div class="flex-1 flex flex-col">
           <TabPanels class="flex flex-1 overflow-hidden">
             <TabPanel
               class="flex-1 flex flex-col overflow-y-auto"
@@ -82,41 +83,24 @@
             v-model="deal"
           />
         </div>
-      <div class="flex flex-col justify-between border-l w-[370px]">
+      </div>
+    </TabGroup>
+    <div class="flex flex-col justify-between border-l w-[352px]">
+      <div
+        class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg"
+      >
+        About this deal
+      </div>
       <FileUploader @success="changeDealImage" :validateFile="validateFile">
         <template #default="{ openFileSelector, error }">
-            <div
+          <div class="flex gap-5 items-center justify-start p-5 border-b">
-              class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
+            <div class="relative w-[88px] h-[88px] group">
-            >
               <Avatar
                 size="3xl"
-                shape="square"
+                class="w-[88px] h-[88px]"
                 :label="deal.data.organization_name"
                 :image="deal.data.organization_logo"
               />
-              <ErrorMessage :message="error" />
-              <div class="font-medium text-2xl">
-                {{ deal.data.organization_name }}
-              </div>
-              <div class="flex gap-3">
-                <Tooltip text="Make a call...">
-                  <Button
-                    class="rounded-full h-8 w-8"
-                    @click="() => makeCall(deal.data.mobile_no)"
-                  >
-                    <PhoneIcon class="h-4 w-4" />
-                  </Button>
-                </Tooltip>
-                <Button class="rounded-full h-8 w-8">
-                  <EmailIcon class="h-4 w-4" />
-                </Button>
-                <Tooltip text="Go to website...">
-                  <Button
-                    icon="link"
-                    @click="openWebsite(deal.data.website)"
-                    class="rounded-full h-8 w-8"
-                  />
-                </Tooltip>
               <Dropdown
                 :options="[
                   {
@@ -135,19 +119,56 @@
                     },
                   },
                 ]"
+                class="!absolute bottom-0 left-0 right-0"
               >
-                  <Button icon="more-horizontal" class="rounded-full h-8 w-8" />
+                <div
+                  class="absolute bottom-0 left-0 right-0 rounded-b-full z-1 h-11 flex items-center justify-center pt-3 bg-black bg-opacity-40 cursor-pointer opacity-0 group-hover:opacity-100 duration-300 ease-in-out"
+                  style="
+                    -webkit-clip-path: inset(12px 0 0 0);
+                    clip-path: inset(12px 0 0 0);
+                  "
+                >
+                  <CameraIcon class="h-6 w-6 text-white cursor-pointer" />
+                </div>
               </Dropdown>
             </div>
+            <div class="flex flex-col gap-2.5">
+              <div class="font-medium text-2xl">
+                {{ deal.data.organization_name }}
+              </div>
+              <div class="flex gap-1.5">
+                <Tooltip text="Make a call...">
+                  <Button
+                    class="h-7 w-7"
+                    @click="() => makeCall(deal.data.mobile_no)"
+                  >
+                    <PhoneIcon class="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+                <Button class="h-7 w-7">
+                  <EmailIcon class="h-4 w-4" />
+                </Button>
+                <Tooltip text="Go to website...">
+                  <Button class="h-7 w-7">
+                    <LinkIcon
+                      class="h-4 w-4"
+                      @click="openWebsite(deal.data.website)"
+                    />
+                  </Button>
+                </Tooltip>
+              </div>
+              <ErrorMessage :message="error" />
+            </div>
           </div>
         </template>
       </FileUploader>
       <div class="flex-1 flex flex-col justify-between overflow-hidden">
-          <div class="flex flex-col gap-6 p-3 overflow-y-auto">
+        <div class="flex flex-col overflow-y-auto">
           <div
-              v-for="section in detailSections"
+            v-for="(section, i) in detailSections"
             :key="section.label"
-              class="flex flex-col"
+            class="flex flex-col p-3"
+            :class="{ 'border-b': i !== detailSections.length - 1 }"
           >
             <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
               <div
@@ -218,9 +239,7 @@
                         v-else-if="field.type === 'user'"
                         :options="activeAgents"
                         :value="getUser(deal.data[field.name]).full_name"
-                          @change="
+                        @change="(option) => updateAssignedAgent(option.email)"
-                            (option) => updateAssignedAgent(option.email)
-                          "
                         class="form-control"
                         :placeholder="deal.placeholder"
                       >
@@ -326,22 +345,8 @@
           </div>
         </div>
       </div>
-        <div
-          class="flex items-center gap-1 text-sm px-6 p-3 leading-5 cursor-pointer"
-        >
-          <span class="text-gray-600">Created </span>
-          <Tooltip :text="dateFormat(deal.data.creation, dateTooltipFormat)">
-            {{ timeAgo(deal.data.creation) }}
-          </Tooltip>
-          <span>&nbsp;&middot;&nbsp;</span>
-          <span class="text-gray-600">Updated </span>
-          <Tooltip :text="dateFormat(deal.data.modified, dateTooltipFormat)">
-            {{ timeAgo(deal.data.modified) }}
-          </Tooltip>
     </div>
   </div>
-    </div>
-  </TabGroup>
   <NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
 </template>
 <script setup>
@@ -351,6 +356,8 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import CameraIcon from '@/components/Icons/CameraIcon.vue'
+import LinkIcon from '@/components/Icons/LinkIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
@@ -361,9 +368,6 @@ import NoteModal from '@/components/NoteModal.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { TransitionPresets, useTransition } from '@vueuse/core'
 import {
-  dateFormat,
-  timeAgo,
-  dateTooltipFormat,
   dealStatuses,
   statusDropdownOptions,
   openWebsite,

frontend/src/pages/Lead.vue

@@ -89,7 +89,9 @@
       </div>
     </TabGroup>
     <div class="flex flex-col justify-between border-l w-[352px]">
-      <div class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg">
+      <div
+        class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg"
+      >
         About this lead
       </div>
       <FileUploader @success="changeLeadImage" :validateFile="validateFile">
@@ -336,9 +338,6 @@ import NoteModal from '@/components/NoteModal.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { TransitionPresets, useTransition } from '@vueuse/core'
 import {
-  dateFormat,
-  timeAgo,
-  dateTooltipFormat,
   leadStatuses,
   statusDropdownOptions,
   openWebsite,
@@ -349,7 +348,6 @@ import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 import {
   createResource,
-  createDocumentResource,
   createListResource,
   FileUploader,
   ErrorMessage,