From ef43810298998028b922af8b8dc6835023802a96 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 25 Sep 2023 11:04:30 +0530
Subject: [PATCH] fix: made lead layout changes on deal

---
 frontend/src/pages/Deal.vue | 566 ++++++++++++++++++------------------
 frontend/src/pages/Lead.vue |   8 +-
 2 files changed, 288 insertions(+), 286 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 6027287f..5e78ba56 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -35,313 +35,318 @@
       </Dropdown>
     </template>
   </LayoutHeader>
-  <TabGroup v-slot="{ selectedIndex }" v-if="deal.data" @change="onTabChange">
-    <TabList class="flex items-center gap-6 border-b pl-5 relative">
-      <Tab
-        ref="tabRef"
-        as="template"
-        v-for="tab in tabs"
-        :key="tab.label"
-        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="{ 'text-gray-900': selected }"
-        >
-          <component v-if="tab.icon" :is="tab.icon" class="h-5" />
-          {{ tab.label }}
-        </button>
-      </Tab>
-      <div
-        ref="indicator"
-        class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
-        :style="{ left: `${indicatorLeftValue}px` }"
-      />
-    </TabList>
-    <div class="flex h-full overflow-hidden">
-      <div class="flex-1 flex flex-col">
-        <TabPanels class="flex flex-1 overflow-hidden">
-          <TabPanel
-            class="flex-1 flex flex-col overflow-y-auto"
+  <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"
+            as="template"
             v-for="tab in tabs"
             :key="tab.label"
+            v-slot="{ selected }"
           >
-            <Activities
-              :title="tab.activityTitle"
-              :activities="tab.content"
-              @makeCall="makeCall(deal.data.mobile_no)"
-              @makeNote="(e) => showNote(e)"
-              @deleteNote="(e) => deleteNote(e)"
-              @setFocusOnEmail="() => $refs.sendEmailRef.el.click()"
-            />
-          </TabPanel>
-        </TabPanels>
-        <CommunicationArea
-          ref="sendEmailRef"
-          v-if="[0, 1].includes(selectedIndex)"
-          v-model="deal"
-        />
-      </div>
-      <div class="flex flex-col justify-between border-l w-[370px]">
-        <FileUploader @success="changeDealImage" :validateFile="validateFile">
-          <template #default="{ openFileSelector, error }">
-            <div
-              class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
+            <button
+              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" />
+              {{ tab.label }}
+            </button>
+          </Tab>
+          <div
+            ref="indicator"
+            class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
+            :style="{ left: `${indicatorLeftValue}px` }"
+          />
+        </TabList>
+        <div class="flex flex-col h-full overflow-auto">
+          <TabPanels class="flex flex-1 overflow-hidden">
+            <TabPanel
+              class="flex-1 flex flex-col overflow-y-auto"
+              v-for="tab in tabs"
+              :key="tab.label"
+            >
+              <Activities
+                :title="tab.activityTitle"
+                :activities="tab.content"
+                @makeCall="makeCall(deal.data.mobile_no)"
+                @makeNote="(e) => showNote(e)"
+                @deleteNote="(e) => deleteNote(e)"
+                @setFocusOnEmail="() => $refs.sendEmailRef.el.click()"
+              />
+            </TabPanel>
+          </TabPanels>
+          <CommunicationArea
+            ref="sendEmailRef"
+            v-if="[0, 1].includes(selectedIndex)"
+            v-model="deal"
+          />
+        </div>
+      </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 class="flex gap-5 items-center justify-start p-5 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" />
+              <Dropdown
+                :options="[
+                  {
+                    icon: 'upload',
+                    label: deal.data.organization_logo
+                      ? 'Change image'
+                      : 'Upload image',
+                    onClick: openFileSelector,
+                  },
+                  {
+                    icon: 'trash-2',
+                    label: 'Remove image',
+                    onClick: () => {
+                      deal.data.organization_logo = ''
+                      updateDeal('organization_logo', '')
+                    },
+                  },
+                ]"
+                class="!absolute bottom-0 left-0 right-0"
+              >
+                <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-3">
+              <div class="flex gap-1.5">
                 <Tooltip text="Make a call...">
                   <Button
-                    class="rounded-full h-8 w-8"
+                    class="h-7 w-7"
                     @click="() => makeCall(deal.data.mobile_no)"
                   >
                     <PhoneIcon class="h-4 w-4" />
                   </Button>
                 </Tooltip>
-                <Button class="rounded-full h-8 w-8">
+                <Button class="h-7 w-7">
                   <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"
-                  />
+                  <Button class="h-7 w-7">
+                    <LinkIcon
+                      class="h-4 w-4"
+                      @click="openWebsite(deal.data.website)"
+                    />
+                  </Button>
                 </Tooltip>
-                <Dropdown
-                  :options="[
-                    {
-                      icon: 'upload',
-                      label: deal.data.organization_logo
-                        ? 'Change image'
-                        : 'Upload image',
-                      onClick: openFileSelector,
-                    },
-                    {
-                      icon: 'trash-2',
-                      label: 'Remove image',
-                      onClick: () => {
-                        deal.data.organization_logo = ''
-                        updateDeal('organization_logo', '')
-                      },
-                    },
-                  ]"
-                >
-                  <Button icon="more-horizontal" class="rounded-full h-8 w-8" />
-                </Dropdown>
               </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
-              v-for="section in detailSections"
-              :key="section.label"
-              class="flex flex-col"
-            >
-              <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
-                <div
-                  class="flex items-center gap-2 text-base font-semibold leading-5 pl-2 pr-3 cursor-pointer max-w-fit"
-                  @click="toggle()"
-                >
-                  <FeatherIcon
-                    name="chevron-right"
-                    class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
-                    :class="{ 'rotate-90': opened }"
-                  />
-                  {{ section.label }}
-                </div>
-                <transition
-                  enter-active-class="duration-300 ease-in"
-                  leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
-                  enter-to-class="max-h-[200px] overflow-hidden"
-                  leave-from-class="max-h-[200px] overflow-hidden"
-                  enter-from-class="max-h-0 overflow-hidden"
-                  leave-to-class="max-h-0 overflow-hidden"
-                >
-                  <div v-if="opened" class="flex flex-col gap-1.5">
-                    <div
-                      v-for="field in section.fields"
-                      :key="field.label"
-                      class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
-                    >
-                      <div class="text-gray-600 w-[106px]">
-                        {{ field.label }}
-                      </div>
-                      <div class="flex-1">
-                        <FormControl
-                          v-if="field.type === 'select'"
-                          type="select"
-                          :options="field.options"
-                          :value="deal.data[field.name]"
-                          @change.stop="
-                            updateDeal(field.name, $event.target.value)
-                          "
-                          :debounce="500"
-                          class="form-control cursor-pointer [&_select]:cursor-pointer"
-                        >
-                          <template #prefix>
-                            <IndicatorIcon
-                              :class="dealStatuses[deal.data[field.name]].color"
-                            />
-                          </template>
-                        </FormControl>
-                        <FormControl
-                          v-else-if="field.type === 'email'"
-                          type="email"
-                          class="form-control"
-                          :value="deal.data[field.name]"
-                          @change.stop="
-                            updateDeal(field.name, $event.target.value)
-                          "
-                          :debounce="500"
-                        />
-                        <Autocomplete
-                          v-else-if="field.type === 'link'"
-                          :value="deal.data[field.name]"
-                          :options="field.options"
-                          @change="(e) => field.change(e)"
-                          :placeholder="field.placeholder"
-                          class="form-control"
-                        />
-                        <Autocomplete
-                          v-else-if="field.type === 'user'"
-                          :options="activeAgents"
-                          :value="getUser(deal.data[field.name]).full_name"
-                          @change="
-                            (option) => updateAssignedAgent(option.email)
-                          "
-                          class="form-control"
-                          :placeholder="deal.placeholder"
-                        >
-                          <template #target="{ togglePopover }">
-                            <Button
-                              variant="ghost"
-                              @click="togglePopover()"
-                              :label="getUser(deal.data[field.name]).full_name"
-                              class="!justify-start w-full"
-                            >
-                              <template #prefix>
-                                <UserAvatar
-                                  :user="deal.data[field.name]"
-                                  size="sm"
-                                />
-                              </template>
-                            </Button>
-                          </template>
-                          <template #item-prefix="{ option }">
-                            <UserAvatar
-                              class="mr-2"
-                              :user="option.email"
-                              size="sm"
-                            />
-                          </template>
-                        </Autocomplete>
-                        <Dropdown
-                          v-else-if="field.type === 'dropdown'"
-                          :options="
-                            statusDropdownOptions(deal.data, 'deal', updateDeal)
-                          "
-                          class="w-full flex-1"
-                        >
-                          <template #default="{ open }">
-                            <Button
-                              :label="deal.data[field.name]"
-                              class="justify-between w-full"
-                            >
-                              <template #prefix>
-                                <IndicatorIcon
-                                  :class="
-                                    dealStatuses[deal.data[field.name]].color
-                                  "
-                                />
-                              </template>
-                              <template #default>{{
-                                deal.data[field.name]
-                              }}</template>
-                              <template #suffix>
-                                <FeatherIcon
-                                  :name="open ? 'chevron-up' : 'chevron-down'"
-                                  class="h-4 text-gray-600"
-                                />
-                              </template>
-                            </Button>
-                          </template>
-                        </Dropdown>
-                        <FormControl
-                          v-else-if="field.type === 'date'"
-                          type="date"
-                          :value="deal.data[field.name]"
-                          @change.stop="
-                            updateDeal(field.name, $event.target.value)
-                          "
-                          :debounce="500"
-                          class="form-control"
-                        />
-                        <FormControl
-                          v-else-if="field.type === 'number'"
-                          type="number"
-                          :value="deal.data[field.name]"
-                          @change.stop="
-                            updateDeal(field.name, $event.target.value)
-                          "
-                          :debounce="500"
-                          class="form-control"
-                        />
-                        <FormControl
-                          v-else-if="field.type === 'tel'"
-                          type="tel"
-                          :value="deal.data[field.name]"
-                          @change.stop="
-                            updateDeal(field.name, $event.target.value)
-                          "
-                          :debounce="500"
-                          class="form-control"
-                        />
-                        <FormControl
-                          v-else
-                          type="text"
-                          :value="deal.data[field.name]"
-                          @change.stop="
-                            updateDeal(field.name, $event.target.value)
-                          "
-                          :debounce="500"
-                          class="form-control"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </transition>
-              </Toggler>
+              <ErrorMessage :message="error" />
             </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>
+        </template>
+      </FileUploader>
+      <div class="flex-1 flex 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 }"
+          >
+            <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
+              <div
+                class="flex items-center gap-2 text-base font-semibold leading-5 pl-2 pr-3 cursor-pointer max-w-fit"
+                @click="toggle()"
+              >
+                <FeatherIcon
+                  name="chevron-right"
+                  class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
+                  :class="{ 'rotate-90': opened }"
+                />
+                {{ section.label }}
+              </div>
+              <transition
+                enter-active-class="duration-300 ease-in"
+                leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
+                enter-to-class="max-h-[200px] overflow-hidden"
+                leave-from-class="max-h-[200px] overflow-hidden"
+                enter-from-class="max-h-0 overflow-hidden"
+                leave-to-class="max-h-0 overflow-hidden"
+              >
+                <div v-if="opened" class="flex flex-col gap-1.5">
+                  <div
+                    v-for="field in section.fields"
+                    :key="field.label"
+                    class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
+                  >
+                    <div class="text-gray-600 w-[106px]">
+                      {{ field.label }}
+                    </div>
+                    <div class="flex-1">
+                      <FormControl
+                        v-if="field.type === 'select'"
+                        type="select"
+                        :options="field.options"
+                        :value="deal.data[field.name]"
+                        @change.stop="
+                          updateDeal(field.name, $event.target.value)
+                        "
+                        :debounce="500"
+                        class="form-control cursor-pointer [&_select]:cursor-pointer"
+                      >
+                        <template #prefix>
+                          <IndicatorIcon
+                            :class="dealStatuses[deal.data[field.name]].color"
+                          />
+                        </template>
+                      </FormControl>
+                      <FormControl
+                        v-else-if="field.type === 'email'"
+                        type="email"
+                        class="form-control"
+                        :value="deal.data[field.name]"
+                        @change.stop="
+                          updateDeal(field.name, $event.target.value)
+                        "
+                        :debounce="500"
+                      />
+                      <Autocomplete
+                        v-else-if="field.type === 'link'"
+                        :value="deal.data[field.name]"
+                        :options="field.options"
+                        @change="(e) => field.change(e)"
+                        :placeholder="field.placeholder"
+                        class="form-control"
+                      />
+                      <Autocomplete
+                        v-else-if="field.type === 'user'"
+                        :options="activeAgents"
+                        :value="getUser(deal.data[field.name]).full_name"
+                        @change="(option) => updateAssignedAgent(option.email)"
+                        class="form-control"
+                        :placeholder="deal.placeholder"
+                      >
+                        <template #target="{ togglePopover }">
+                          <Button
+                            variant="ghost"
+                            @click="togglePopover()"
+                            :label="getUser(deal.data[field.name]).full_name"
+                            class="!justify-start w-full"
+                          >
+                            <template #prefix>
+                              <UserAvatar
+                                :user="deal.data[field.name]"
+                                size="sm"
+                              />
+                            </template>
+                          </Button>
+                        </template>
+                        <template #item-prefix="{ option }">
+                          <UserAvatar
+                            class="mr-2"
+                            :user="option.email"
+                            size="sm"
+                          />
+                        </template>
+                      </Autocomplete>
+                      <Dropdown
+                        v-else-if="field.type === 'dropdown'"
+                        :options="
+                          statusDropdownOptions(deal.data, 'deal', updateDeal)
+                        "
+                        class="w-full flex-1"
+                      >
+                        <template #default="{ open }">
+                          <Button
+                            :label="deal.data[field.name]"
+                            class="justify-between w-full"
+                          >
+                            <template #prefix>
+                              <IndicatorIcon
+                                :class="
+                                  dealStatuses[deal.data[field.name]].color
+                                "
+                              />
+                            </template>
+                            <template #default>{{
+                              deal.data[field.name]
+                            }}</template>
+                            <template #suffix>
+                              <FeatherIcon
+                                :name="open ? 'chevron-up' : 'chevron-down'"
+                                class="h-4 text-gray-600"
+                              />
+                            </template>
+                          </Button>
+                        </template>
+                      </Dropdown>
+                      <FormControl
+                        v-else-if="field.type === 'date'"
+                        type="date"
+                        :value="deal.data[field.name]"
+                        @change.stop="
+                          updateDeal(field.name, $event.target.value)
+                        "
+                        :debounce="500"
+                        class="form-control"
+                      />
+                      <FormControl
+                        v-else-if="field.type === 'number'"
+                        type="number"
+                        :value="deal.data[field.name]"
+                        @change.stop="
+                          updateDeal(field.name, $event.target.value)
+                        "
+                        :debounce="500"
+                        class="form-control"
+                      />
+                      <FormControl
+                        v-else-if="field.type === 'tel'"
+                        type="tel"
+                        :value="deal.data[field.name]"
+                        @change.stop="
+                          updateDeal(field.name, $event.target.value)
+                        "
+                        :debounce="500"
+                        class="form-control"
+                      />
+                      <FormControl
+                        v-else
+                        type="text"
+                        :value="deal.data[field.name]"
+                        @change.stop="
+                          updateDeal(field.name, $event.target.value)
+                        "
+                        :debounce="500"
+                        class="form-control"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </transition>
+            </Toggler>
+          </div>
         </div>
       </div>
     </div>
-  </TabGroup>
+  </div>
   <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,
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index bce0ef29..80131aa8 100644
--- a/frontend/src/pages/Lead.vue
+++ b/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,