fix: Contact page new design

frontend/src/pages/Contact.vue

@@ -8,14 +8,23 @@
       </Breadcrumbs>
     </template>
   </LayoutHeader>
-  <div v-if="contact.data" class="flex h-full flex-col overflow-hidden">
+  <div class="flex h-full">
-    <FileUploader @success="changeContactImage" :validateFile="validateFile">
+    <div
+      v-if="contact.data"
+      class="flex h-full flex-col overflow-hidden border-r min-w-[352px]"
+    >
+      <div class="border-b">
+        <FileUploader
+          @success="changeContactImage"
+          :validateFile="validateFile"
+        >
           <template #default="{ openFileSelector, error }">
-        <div class="flex items-start justify-start gap-6 p-5 sm:items-center">
+            <div class="flex flex-col items-start justify-start gap-4 p-5">
-          <div class="group relative h-24 w-24">
+              <div class="flex gap-4 items-center">
+                <div class="group relative h-15.5 w-15.5">
                   <Avatar
                     size="3xl"
-              class="h-24 w-24"
+                    class="h-15.5 w-15.5"
                     :label="contact.data.full_name"
                     :image="contact.data.image"
                   />
@@ -44,24 +53,38 @@
                     class="!absolute bottom-0 left-0 right-0"
                   >
                     <div
-                class="z-1 absolute bottom-0 left-0 right-0 flex h-14 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"
+                      class="z-1 absolute bottom-0 left-0 right-0 flex h-14 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-5 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
                       style="
-                  -webkit-clip-path: inset(12px 0 0 0);
+                        -webkit-clip-path: inset(22px 0 0 0);
-                  clip-path: inset(12px 0 0 0);
+                        clip-path: inset(22px 0 0 0);
                       "
                     >
                       <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
                     </div>
                   </component>
                 </div>
-          <div class="flex flex-col gap-2 truncate sm:gap-0.5">
+                <div class="flex flex-col gap-2 truncate">
-            <div class="truncate text-3xl font-semibold">
+                  <div class="truncate text-2xl font-medium">
                     <span v-if="contact.data.salutation">
                       {{ contact.data.salutation + '. ' }}
                     </span>
                     <span>{{ contact.data.full_name }}</span>
                   </div>
                   <div
+                    v-if="contact.data.company_name"
+                    class="flex items-center gap-1.5 text-base text-gray-800"
+                  >
+                    <Avatar
+                      size="xs"
+                      :label="contact.data.company_name"
+                      :image="
+                        getOrganization(contact.data.company_name)
+                          ?.organization_logo
+                      "
+                    />
+                    <span class="">{{ contact.data.company_name }}</span>
+                  </div>
+                  <!-- <div
                 class="flex flex-col flex-wrap gap-3 text-base text-gray-700 sm:flex-row sm:items-center sm:gap-2"
               >
                 <div
@@ -135,10 +158,13 @@
                     }
                   "
                 />
+              </div> -->
+                  <ErrorMessage :message="__(error)" />
                 </div>
-            <div class="mt-2 flex gap-1.5">
+              </div>
+              <div class="flex gap-1.5">
                 <Button
-                :label="__('Edit')"
+                  :label="__('Make Call')"
                   size="sm"
                   @click="
                     () => {
@@ -148,7 +174,7 @@
                   "
                 >
                   <template #prefix>
-                  <EditIcon class="h-4 w-4" />
+                    <PhoneIcon class="h-4 w-4" />
                   </template>
                 </Button>
                 <Button
@@ -162,11 +188,43 @@
                   </template>
                 </Button>
               </div>
-            <ErrorMessage :message="__(error)" />
-          </div>
             </div>
           </template>
         </FileUploader>
+      </div>
+      <div
+        v-if="fieldsLayout.data"
+        class="flex flex-1 flex-col justify-between overflow-hidden"
+      >
+        <div class="flex flex-col overflow-y-auto">
+          <div
+            v-for="(section, i) in fieldsLayout.data"
+            :key="section.label"
+            class="flex flex-col p-3"
+            :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
+          >
+            <Section :is-opened="section.opened" :label="section.label">
+              <template #actions>
+                <Button
+                  v-if="i == 0 && isManager()"
+                  variant="ghost"
+                  class="w-7"
+                  @click="showSidePanelModal = true"
+                >
+                  <EditIcon class="h-4 w-4" />
+                </Button>
+              </template>
+              <SectionFields
+                v-if="section.fields"
+                :fields="section.fields"
+                v-model="contact.data"
+                @update="updateField"
+              />
+            </Section>
+          </div>
+        </div>
+      </div>
+    </div>
     <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
       <template #tab="{ tab, selected }">
         <button
@@ -221,6 +279,8 @@
 
 <script setup>
 import Icon from '@/components/Icon.vue'
+import Section from '@/components/Section.vue'
+import SectionFields from '@/components/SectionFields.vue'
 import Dropdown from '@/components/frappe-ui/Dropdown.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
@@ -258,7 +318,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 const { $dialog, makeCall } = globalStore()
 
-const { getUser } = usersStore()
+const { getUser, isManager } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getDealStatus } = statusesStore()
 
@@ -386,6 +446,29 @@ const rows = computed(() => {
   return deals.data.map((row) => getDealRowObject(row))
 })
 
+// const fieldsLayout = ref({
+//   data: {},
+// })
+
+const fieldsLayout = createResource({
+  url: 'crm.api.doc.get_sidebar_fields',
+  cache: ['fieldsLayout', props.contactId],
+  params: { doctype: 'Contact', name: props.contactId },
+  auto: true,
+  // transform: (data) => getParsedFields(data),
+})
+
+function updateField(fieldname, value) {
+  call('frappe.client.set_value', {
+    doctype: 'Contact',
+    name: props.contactId,
+    fieldname,
+    value,
+  })
+
+  contact.reload()
+}
+
 const columns = computed(() => dealColumns)
 
 function getDealRowObject(deal) {