fix: added contact name & lead/deal list

frontend/src/pages/Contact.vue

@@ -4,109 +4,138 @@
       <Breadcrumbs :items="breadcrumbs" />
     </template>
   </LayoutHeader>
-  <div class="flex gap-6 p-5">
+  <div class="flex h-full overflow-hidden">
-    <FileUploader @success="changeContactImage" :validateFile="validateFile">
+    <div class="flex w-[352px] shrink-0 flex-col border-r">
-      <template #default="{ openFileSelector, error }">
+      <FileUploader @success="changeContactImage" :validateFile="validateFile">
-        <div class="group relative h-24 w-24">
+        <template #default="{ openFileSelector, error }">
-          <Avatar
+          <div class="flex items-center justify-start gap-5 border-b p-5">
-            size="3xl"
+            <div class="group relative h-[88px] w-[88px]">
-            :image="contact.image"
+              <Avatar
-            :label="contact.full_name"
+                size="3xl"
-            class="!h-24 !w-24"
+                class="h-[88px] w-[88px]"
-          />
+                :label="contact.full_name"
-          <component
+                :image="contact.image"
-            :is="contact.image ? Dropdown : 'div'"
+              />
-            v-bind="
+              <component
-              contact.image
+                :is="contact.image ? Dropdown : 'div'"
-                ? {
+                v-bind="
-                    options: [
+                  contact.image
-                      {
+                    ? {
-                        icon: 'upload',
+                        options: [
-                        label: contact.image ? 'Change image' : 'Upload image',
+                          {
-                        onClick: openFileSelector,
+                            icon: 'upload',
-                      },
+                            label: contact.image
-                      {
+                              ? 'Change image'
-                        icon: 'trash-2',
+                              : 'Upload image',
-                        label: 'Remove image',
+                            onClick: openFileSelector,
-                        onClick: () => changeContactImage(''),
+                          },
-                      },
+                          {
-                    ],
+                            icon: 'trash-2',
-                  }
+                            label: 'Remove image',
-                : { onClick: openFileSelector }
+                            onClick: () => changeContactImage(''),
-            "
+                          },
-            class="!absolute bottom-0 left-0 right-0"
+                        ],
-          >
+                      }
-            <div
+                    : { onClick: openFileSelector }
-              class="z-1 absolute bottom-0 left-0 right-0 flex h-13 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="
+                class="!absolute bottom-0 left-0 right-0"
-                -webkit-clip-path: inset(12px 0 0 0);
+              >
-                clip-path: inset(12px 0 0 0);
+                <div
-              "
+                  class="z-1 absolute bottom-0 left-0 right-0 flex h-13 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="
-              <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
+                    -webkit-clip-path: inset(12px 0 0 0);
+                    clip-path: inset(12px 0 0 0);
+                  "
+                >
+                  <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
+                </div>
+              </component>
             </div>
-          </component>
+            <div class="flex flex-col gap-2.5 truncate">
-          <ErrorMessage class="mt-2" :message="error" />
+              <Tooltip :text="contact.full_name">
-        </div>
+                <div class="truncate text-2xl font-medium">
-      </template>
+                  {{ contact.full_name }}
-    </FileUploader>
+                </div>
-    <div class="flex flex-col justify-center gap-2">
+              </Tooltip>
-      <div class="text-3xl font-semibold text-gray-900">
+              <div class="flex gap-1.5">
-        {{ contact.salutation + ' ' + contact.full_name }}
+                <Button
-      </div>
+                  label="Call"
-      <div class="flex items-center gap-2 text-base text-gray-700">
+                  size="sm"
-        <div v-if="contact.email_id" class="flex items-center gap-1.5">
+                  @click="makeCall(contact.mobile_no)"
-          <EmailIcon class="h-4 w-4" />
+                >
-          <span class="">{{ contact.email_id }}</span>
+                  <template #prefix>
-        </div>
+                    <PhoneIcon class="h-4 w-4" />
-        <span
+                  </template>
-          v-if="contact.mobile_no"
+                </Button>
-          class="text-3xl leading-[0] text-gray-600"
+                <Button
-          >&middot;</span
+                  label="Delete"
-        >
+                  theme="red"
-        <div v-if="contact.mobile_no" class="flex items-center gap-1.5">
+                  size="sm"
-          <PhoneIcon class="h-4 w-4" />
+                  @click="deleteContact"
-          <span class="">{{ contact.mobile_no }}</span>
+                >
-        </div>
+                  <template #prefix>
-        <span
+                    <FeatherIcon name="trash-2" class="h-4 w-4" />
-          v-if="(contact.email_id || contact.mobile_no) && contact.company_name"
+                  </template>
-          class="text-3xl leading-[0] text-gray-600"
+                </Button>
-          >&middot;</span
+              </div>
-        >
+              <ErrorMessage :message="error" />
-        <div v-if="contact.company_name" class="flex items-center gap-1.5">
+            </div>
-          <Avatar :label="contact.company_name" size="xs" />
+          </div>
-          <span class="">{{ contact.company_name }}</span>
+        </template>
-        </div>
+      </FileUploader>
-      </div>
+      <div class="overflow-y-auto">
-      <div class="mt-1 flex gap-2">
+        <!-- details -->
-        <Button label="Edit" size="sm" @click="showContactModal = true">
-          <template #prefix>
-            <EditIcon class="h-4 w-4" />
-          </template>
-        </Button>
-        <Button label="Delete" theme="red" size="sm" @click="deleteContact">
-          <template #prefix>
-            <FeatherIcon name="trash-2" class="h-4 w-4" />
-          </template>
-        </Button>
-        <!-- <Button label="Add lead" size="sm">
-          <template #prefix>
-            <FeatherIcon name="plus" class="h-4 w-4" />
-          </template>
-        </Button>
-        <Button label="Add deal" size="sm">
-          <template #prefix>
-            <FeatherIcon name="plus" class="h-4 w-4" />
-          </template>
-        </Button> -->
       </div>
     </div>
-    <ContactModal
+    <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
-      v-model="showContactModal"
+      <template #tab="{ tab, selected }">
-      v-model:reloadContacts="contacts"
+        <button
-      :contact="contact"
+          class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-    />
+          :class="{ 'text-gray-900': selected }"
+        >
+          <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+          {{ tab.label }}
+          <Badge
+            class="group-hover:bg-gray-900"
+            :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+            variant="solid"
+            theme="gray"
+            size="sm"
+          >
+            {{ tab.count }}
+          </Badge>
+        </button>
+      </template>
+      <template #default="{ tab }">
+        <LeadsListView
+          class="mt-4"
+          v-if="tab.label === 'Leads' && rows.length"
+          :rows="rows"
+          :columns="columns"
+        />
+        <DealsListView
+          class="mt-4"
+          v-if="tab.label === 'Deals' && rows.length"
+          :rows="rows"
+          :columns="columns"
+        />
+        <div
+          v-if="!rows.length"
+          class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+        >
+          <div class="flex flex-col items-center justify-center space-y-2">
+            <component :is="tab.icon" class="!h-10 !w-10" />
+            <div>No {{ tab.label.toLowerCase() }} found</div>
+          </div>
+        </div>
+      </template>
+    </Tabs>
   </div>
+  <ContactModal
+    v-model="showContactModal"
+    v-model:reloadContacts="contacts"
+    :contact="contact"
+  />
 </template>
 
 <script setup>
@@ -117,18 +146,33 @@ import {
   FileUploader,
   ErrorMessage,
   Dropdown,
+  Tooltip,
+  Tabs,
   call,
+  createListResource,
 } from 'frappe-ui'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/ContactModal.vue'
-import EmailIcon from '@/components/Icons/EmailIcon.vue'
-import EditIcon from '@/components/Icons/EditIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
+import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
+import DealsIcon from '@/components/Icons/DealsIcon.vue'
+import LeadsListView from '@/components/ListViews/LeadsListView.vue'
+import DealsListView from '@/components/ListViews/DealsListView.vue'
+import {
+  dateFormat,
+  dateTooltipFormat,
+  timeAgo,
+  formatNumberIntoCurrency,
+  dealStatuses,
+  leadStatuses,
+} from '@/utils'
+import { usersStore } from '@/stores/users.js'
 import { contactsStore } from '@/stores/contacts.js'
-import { ref, computed } from 'vue'
+import { ref, computed, h } from 'vue'
 
 const { getContactByName, contacts } = contactsStore()
+const { getUser } = usersStore()
 
 const showContactModal = ref(false)
 
@@ -188,4 +232,213 @@ async function deleteContact() {
     ],
   })
 }
+
+const tabIndex = ref(0)
+const tabs = [
+  {
+    label: 'Leads',
+    icon: h(LeadsIcon, { class: 'h-4 w-4' }),
+    count: computed(() => leads.data?.length),
+  },
+  {
+    label: 'Deals',
+    icon: h(DealsIcon, { class: 'h-4 w-4' }),
+    count: computed(() => deals.data?.length),
+  },
+]
+
+const leads = createListResource({
+  type: 'list',
+  doctype: 'CRM Lead',
+  cache: ['leads', props.contactId],
+  fields: [
+    'name',
+    'first_name',
+    'lead_name',
+    'image',
+    'organization_name',
+    'organization_logo',
+    'status',
+    'email',
+    'mobile_no',
+    'lead_owner',
+    'modified',
+  ],
+  filters: {
+    email: contact.value.email_id,
+    is_deal: 0,
+  },
+  orderBy: 'modified desc',
+  pageLength: 20,
+  auto: true,
+})
+
+const deals = createListResource({
+  type: 'list',
+  doctype: 'CRM Lead',
+  cache: ['deals', props.contactId],
+  fields: [
+    'name',
+    'organization_name',
+    'organization_logo',
+    'annual_revenue',
+    'deal_status',
+    'email',
+    'mobile_no',
+    'lead_owner',
+    'modified',
+  ],
+  filters: {
+    email: contact.value.email_id,
+    is_deal: 1,
+  },
+  orderBy: 'modified desc',
+  pageLength: 20,
+  auto: true,
+})
+
+const rows = computed(() => {
+  let list = []
+  list = tabIndex.value ? deals : leads
+
+  if (!list.data) return []
+
+  return list.data.map((row) => {
+    return tabIndex.value ? getDealRowObject(row) : getLeadRowObject(row)
+  })
+})
+
+const columns = computed(() => {
+  return tabIndex.value ? dealColumns : leadColumns
+})
+
+function getLeadRowObject(lead) {
+  return {
+    name: lead.name,
+    lead_name: {
+      label: lead.lead_name,
+      image: lead.image,
+      image_label: lead.first_name,
+    },
+    organization_name: {
+      label: lead.organization_name,
+      logo: lead.organization_logo,
+    },
+    status: {
+      label: lead.status,
+      color: leadStatuses[lead.status]?.color,
+    },
+    email: lead.email,
+    mobile_no: lead.mobile_no,
+    lead_owner: {
+      label: lead.lead_owner && getUser(lead.lead_owner).full_name,
+      ...(lead.lead_owner && getUser(lead.lead_owner)),
+    },
+    modified: {
+      label: dateFormat(lead.modified, dateTooltipFormat),
+      timeAgo: timeAgo(lead.modified),
+    },
+  }
+}
+
+function getDealRowObject(deal) {
+  return {
+    name: deal.name,
+    organization_name: {
+      label: deal.organization_name,
+      logo: deal.organization_logo,
+    },
+    annual_revenue: formatNumberIntoCurrency(deal.annual_revenue),
+    deal_status: {
+      label: deal.deal_status,
+      color: dealStatuses[deal.deal_status]?.color,
+    },
+    email: deal.email,
+    mobile_no: deal.mobile_no,
+    lead_owner: {
+      label: deal.lead_owner && getUser(deal.lead_owner).full_name,
+      ...(deal.lead_owner && getUser(deal.lead_owner)),
+    },
+    modified: {
+      label: dateFormat(deal.modified, dateTooltipFormat),
+      timeAgo: timeAgo(deal.modified),
+    },
+  }
+}
+
+const leadColumns = [
+  {
+    label: 'Name',
+    key: 'lead_name',
+    width: '12rem',
+  },
+  {
+    label: 'Organization',
+    key: 'organization_name',
+    width: '10rem',
+  },
+  {
+    label: 'Status',
+    key: 'status',
+    width: '8rem',
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    width: '12rem',
+  },
+  {
+    label: 'Mobile no',
+    key: 'mobile_no',
+    width: '11rem',
+  },
+  {
+    label: 'Lead owner',
+    key: 'lead_owner',
+    width: '10rem',
+  },
+  {
+    label: 'Last modified',
+    key: 'modified',
+    width: '8rem',
+  },
+]
+
+const dealColumns = [
+  {
+    label: 'Organization',
+    key: 'organization_name',
+    width: '11rem',
+  },
+  {
+    label: 'Amount',
+    key: 'annual_revenue',
+    width: '9rem',
+  },
+  {
+    label: 'Status',
+    key: 'deal_status',
+    width: '10rem',
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    width: '12rem',
+  },
+  {
+    label: 'Mobile no',
+    key: 'mobile_no',
+    width: '11rem',
+  },
+  {
+    label: 'Lead owner',
+    key: 'lead_owner',
+    width: '10rem',
+  },
+  {
+    label: 'Last modified',
+    key: 'modified',
+    width: '8rem',
+  },
+]
 </script>