Merge pull request #17 from shariquerik/contact-page

feat: contact page

crm/api/session.py

@@ -25,7 +25,7 @@ def get_contacts():
 
 	contacts = frappe.qb.get_query(
 		"Contact",
-		fields=['name', 'full_name', 'image', 'email_id', 'mobile_no', 'phone', 'salutation'],
+		fields=['name', 'first_name', 'last_name', 'full_name', 'image', 'email_id', 'mobile_no', 'phone', 'salutation', 'company_name', 'modified'],
 		order_by="first_name asc",
 		distinct=True,
 	).run(as_dict=1)

frontend/src/components/AppSidebar.vue

@@ -3,16 +3,18 @@
     class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out"
     :class="isSidebarCollapsed ? 'w-12' : 'w-56'"
   >
-    <div class="flex flex-col">
+    <div class="flex flex-col overflow-hidden">
       <UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
-      <SidebarLink
+      <div class="flex flex-col overflow-y-auto">
-        v-for="link in links"
+        <SidebarLink
-        :icon="link.icon"
+          v-for="link in links"
-        :label="link.label"
+          :icon="link.icon"
-        :to="link.to"
+          :label="link.label"
-        :isCollapsed="isSidebarCollapsed"
+          :to="link.to"
-        class="mx-2 my-0.5"
+          :isCollapsed="isSidebarCollapsed"
-      />
+          class="mx-2 my-0.5"
+        />
+      </div>
     </div>
     <SidebarLink
       :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"

frontend/src/components/ContactModal.vue

@@ -0,0 +1,136 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{
+      title: editMode ? 'Edit contact' : 'New contact',
+      size: 'xl',
+      actions: [
+        {
+          label: editMode ? 'Update' : 'Create',
+          variant: 'solid',
+          disabled: !dirty,
+          onClick: ({ close }) => updateContact(close),
+        },
+      ],
+    }"
+  >
+    <template #body-content>
+      <div class="flex flex-col gap-4">
+        <FormControl
+          type="text"
+          size="md"
+          variant="outline"
+          label="Salutation"
+          v-model="_contact.salutation"
+        />
+        <div class="flex gap-4">
+          <FormControl
+            class="flex-1"
+            variant="outline"
+            size="md"
+            type="text"
+            label="First Name"
+            v-model="_contact.first_name"
+          />
+          <FormControl
+            class="flex-1"
+            variant="outline"
+            size="md"
+            type="text"
+            label="Last Name"
+            v-model="_contact.last_name"
+          />
+        </div>
+        <FormControl
+          type="text"
+          variant="outline"
+          size="md"
+          label="Organisation"
+          v-model="_contact.company_name"
+        />
+        <div class="flex gap-4">
+          <FormControl
+            class="flex-1"
+            variant="outline"
+            size="md"
+            type="text"
+            label="Mobile no"
+            v-model="_contact.mobile_no"
+          />
+          <FormControl
+            class="flex-1"
+            variant="outline"
+            size="md"
+            type="email"
+            label="Email"
+            v-model="_contact.email_id"
+          />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { FormControl, Dialog, call } from 'frappe-ui'
+import { ref, defineModel, nextTick, watch, computed } from 'vue'
+
+const props = defineProps({
+  contact: {
+    type: Object,
+    default: {},
+  },
+})
+
+const show = defineModel()
+const contacts = defineModel('reloadContacts')
+
+const editMode = ref(false)
+let _contact = ref({})
+
+async function updateContact(close) {
+  if (JSON.stringify(props.contact) === JSON.stringify(_contact.value)) {
+    return
+  }
+
+  if (_contact.value.name) {
+    let d = await call('frappe.client.set_value', {
+      doctype: 'Contact',
+      name: _contact.value.name,
+      fieldname: _contact.value,
+    })
+    if (d.name) {
+      contacts.value.reload()
+    }
+  } else {
+    let d = await call('frappe.client.insert', {
+      doc: {
+        doctype: 'Contact',
+        ..._contact.value,
+      },
+    })
+    if (d.name) {
+      contacts.value.reload()
+    }
+  }
+  close()
+}
+
+const dirty = computed(() => {
+  return JSON.stringify(props.contact) !== JSON.stringify(_contact.value)
+})
+
+watch(
+  () => show.value,
+  (value) => {
+    if (!value) return
+    editMode.value = false
+    nextTick(() => {
+      _contact.value = { ...props.contact }
+      if (_contact.value.first_name) {
+        editMode.value = true
+      }
+    })
+  }
+)
+</script>

frontend/src/components/ListViews/ContactsListView.vue

@@ -1,14 +1,65 @@
 <template>
   <ListView
-    class="px-5"
-    v-if="rows"
     :columns="columns"
     :rows="rows"
+    :options="{
+      getRowRoute: (row) => ({ name: 'Contact', params: { contactId: row.name } }),
+    }"
     row-key="name"
-  />
+  >
+    <ListHeader class="mx-5" />
+    <ListRows>
+      <ListRow
+        class="mx-5"
+        v-for="row in rows"
+        :key="row.name"
+        v-slot="{ column, item }"
+        :row="row"
+      >
+        <ListRowItem :item="item">
+          <template #prefix>
+            <div v-if="column.key === 'full_name'">
+              <Avatar
+                v-if="item.label"
+                class="flex items-center"
+                :image="item.image"
+                :label="item.image_label"
+                size="sm"
+              />
+            </div>
+            <div v-else-if="column.key === 'company_name'">
+              <Avatar
+                v-if="item.label"
+                class="flex items-center"
+                :image="item.logo"
+                :label="item.label"
+                size="sm"
+              />
+            </div>
+            <div v-else-if="column.key === 'mobile_no'">
+              <PhoneIcon class="h-4 w-4" />
+            </div>
+          </template>
+          <div v-if="column.key === 'modified'" class="truncate text-base">
+            {{ item.timeAgo }}
+          </div>
+        </ListRowItem>
+      </ListRow>
+    </ListRows>
+    <ListSelectBanner />
+  </ListView>
 </template>
 <script setup>
-import { ListView } from 'frappe-ui'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import {
+  Avatar,
+  ListView,
+  ListHeader,
+  ListRows,
+  ListRow,
+  ListSelectBanner,
+  ListRowItem,
+} from 'frappe-ui'
 
 const props = defineProps({
   rows: {

frontend/src/pages/Contact.vue

@@ -0,0 +1,576 @@
+<template>
+  <LayoutHeader v-if="contact">
+    <template #left-header>
+      <Breadcrumbs :items="breadcrumbs" />
+    </template>
+  </LayoutHeader>
+  <div class="flex h-full overflow-hidden">
+    <div class="flex w-[352px] shrink-0 flex-col border-r">
+      <FileUploader @success="changeContactImage" :validateFile="validateFile">
+        <template #default="{ openFileSelector, error }">
+          <div class="flex items-center justify-start gap-5 border-b p-5">
+            <div class="group relative h-[88px] w-[88px]">
+              <Avatar
+                size="3xl"
+                class="h-[88px] w-[88px]"
+                :label="contact.full_name"
+                :image="contact.image"
+              />
+              <component
+                :is="contact.image ? Dropdown : 'div'"
+                v-bind="
+                  contact.image
+                    ? {
+                        options: [
+                          {
+                            icon: 'upload',
+                            label: contact.image
+                              ? 'Change image'
+                              : 'Upload image',
+                            onClick: openFileSelector,
+                          },
+                          {
+                            icon: 'trash-2',
+                            label: 'Remove image',
+                            onClick: () => changeContactImage(''),
+                          },
+                        ],
+                      }
+                    : { onClick: openFileSelector }
+                "
+                class="!absolute bottom-0 left-0 right-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="
+                    -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>
+            <div class="flex flex-col gap-2.5 truncate">
+              <Tooltip :text="contact.full_name">
+                <div class="truncate text-2xl font-medium">
+                  {{ contact.full_name }}
+                </div>
+              </Tooltip>
+              <div class="flex gap-1.5">
+                <Button
+                  label="Call"
+                  size="sm"
+                  @click="makeCall(contact.mobile_no)"
+                >
+                  <template #prefix>
+                    <PhoneIcon 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>
+              </div>
+              <ErrorMessage :message="error" />
+            </div>
+          </div>
+        </template>
+      </FileUploader>
+      <div class="flex flex-col overflow-y-auto">
+        <div class="px-5 py-3 text-base font-semibold leading-5">Details</div>
+        <div class="flex flex-col gap-1.5 px-2">
+          <div
+            v-for="field in details"
+            :key="field.name"
+            class="flex items-center gap-2 px-3 text-base leading-5 last:mb-3"
+          >
+            <div class="w-[106px] text-gray-600">
+              {{ field.label }}
+            </div>
+            <div class="flex-1">
+              <FormControl
+                v-if="field.type === 'email'"
+                type="email"
+                class="form-control"
+                :value="contact[field.name]"
+                @change.stop="updateContact(field.name, $event.target.value)"
+                :debounce="500"
+              />
+              <FormControl
+                v-else-if="field.type === 'link'"
+                type="autocomplete"
+                :value="contact[field.name]"
+                :options="field.options"
+                @change="(e) => field.change(e)"
+                :placeholder="field.placeholder"
+                class="form-control"
+              />
+              <FormControl
+                v-else
+                type="text"
+                :value="contact[field.name]"
+                @change.stop="updateContact(field.name, $event.target.value)"
+                class="form-control"
+                :debounce="500"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
+      <template #tab="{ tab, selected }">
+        <button
+          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>
+import {
+  FormControl,
+  FeatherIcon,
+  Breadcrumbs,
+  Avatar,
+  FileUploader,
+  ErrorMessage,
+  Dropdown,
+  Tooltip,
+  Tabs,
+  call,
+  createResource,
+  createListResource,
+} from 'frappe-ui'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import ContactModal from '@/components/ContactModal.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,
+  createToast,
+} from '@/utils'
+import { usersStore } from '@/stores/users.js'
+import { contactsStore } from '@/stores/contacts.js'
+import { ref, computed, h } from 'vue'
+
+const { getContactByName, contacts } = contactsStore()
+const { getUser } = usersStore()
+
+const showContactModal = ref(false)
+
+const props = defineProps({
+  contactId: {
+    type: String,
+    required: true,
+  },
+})
+
+const contact = computed(() => getContactByName(props.contactId))
+
+const breadcrumbs = computed(() => {
+  let items = [{ label: 'Contacts', route: { name: 'Contacts' } }]
+  items.push({
+    label: contact.value.full_name,
+    route: { name: 'Contact', params: { contactId: contact.value.name } },
+  })
+  return items
+})
+
+function validateFile(file) {
+  let extn = file.name.split('.').pop().toLowerCase()
+  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
+    return 'Only PNG and JPG images are allowed'
+  }
+}
+
+async function changeContactImage(file) {
+  await call('frappe.client.set_value', {
+    doctype: 'Contact',
+    name: props.contactId,
+    fieldname: 'image',
+    value: file?.file_url || '',
+  })
+  contacts.reload()
+}
+
+async function deleteContact() {
+  $dialog({
+    title: 'Delete contact',
+    message: 'Are you sure you want to delete this contact?',
+    actions: [
+      {
+        label: 'Delete',
+        theme: 'red',
+        variant: 'solid',
+        async onClick({ close }) {
+          await call('frappe.client.delete', {
+            doctype: 'Contact',
+            name: props.contactId,
+          })
+          contacts.reload()
+          close()
+        },
+      },
+    ],
+  })
+}
+
+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',
+  },
+]
+
+const details = [
+  {
+    label: 'Salutation',
+    type: 'link',
+    name: 'salutation',
+    placeholder: 'Mr./Mrs./Ms.',
+    options: [
+      { label: 'Dr', value: 'Dr' },
+      { label: 'Mr', value: 'Mr' },
+      { label: 'Mrs', value: 'Mrs' },
+      { label: 'Ms', value: 'Ms' },
+      { label: 'Mx', value: 'Mx' },
+      { label: 'Prof', value: 'Prof' },
+      { label: 'Master', value: 'Master' },
+      { label: 'Madam', value: 'Madam' },
+      { label: 'Miss', value: 'Miss' },
+    ],
+    change: (data) => {
+      contact.value.salutation = data.value
+      updateContact('salutation', data.value)
+    },
+  },
+  {
+    label: 'First name',
+    type: 'data',
+    name: 'first_name',
+  },
+  {
+    label: 'Last name',
+    type: 'data',
+    name: 'last_name',
+  },
+  {
+    label: 'Email',
+    type: 'email',
+    name: 'email',
+  },
+  {
+    label: 'Mobile no.',
+    type: 'phone',
+    name: 'mobile_no',
+  },
+  {
+    label: 'Organization',
+    type: 'data',
+    name: 'company_name',
+  },
+]
+
+function updateContact(fieldname, value) {
+  createResource({
+    url: 'frappe.client.set_value',
+    params: {
+      doctype: 'Contact',
+      name: props.contactId,
+      fieldname,
+      value,
+    },
+    auto: true,
+    onSuccess: () => {
+      contacts.reload()
+      createToast({
+        title: 'Contact updated',
+        icon: 'check',
+        iconClasses: 'text-green-600',
+      })
+    },
+    onError: (err) => {
+      createToast({
+        title: 'Error updating contact',
+        text: err.messages?.[0],
+        icon: 'x',
+        iconClasses: 'text-red-600',
+      })
+    },
+  })
+}
+</script>
+
+<style scoped>
+:deep(.form-control input),
+:deep(.form-control select),
+:deep(.form-control button) {
+  border-color: transparent;
+  background: white;
+}
+
+:deep(.form-control button svg) {
+  color: white;
+}
+</style>

frontend/src/pages/Contacts.vue

@@ -4,7 +4,7 @@
       <Breadcrumbs :items="breadcrumbs" />
     </template>
     <template #right-header>
-      <Button variant="solid" label="Create">
+      <Button variant="solid" label="Create" @click="showContactModal = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
@@ -14,74 +14,69 @@
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
           <Button :label="currentView.label">
-            <template #prefix
+            <template #prefix>
-              ><FeatherIcon :name="currentView.icon" class="h-4"
+              <FeatherIcon :name="currentView.icon" class="h-4" />
-            /></template>
+            </template>
-            <template #suffix
+            <template #suffix>
-              ><FeatherIcon
+              <FeatherIcon
                 :name="open ? 'chevron-up' : 'chevron-down'"
                 class="h-4 text-gray-600"
-            /></template>
+              />
+            </template>
           </Button>
         </template>
       </Dropdown>
     </div>
     <div class="flex items-center gap-2">
-      <Button label="Sort">
+      <Filter doctype="Contact" />
-        <template #prefix><SortIcon class="h-4" /></template>
+      <SortBy doctype="Contact" />
-      </Button>
-      <Button label="Filter">
-        <template #prefix><FilterIcon class="h-4" /></template>
-      </Button>
       <Button icon="more-horizontal" />
     </div>
   </div>
-  <ListView class="px-5" v-if="rows" :columns="columns" :rows="rows" row-key="name" />
+  <ContactsListView :rows="rows" :columns="columns" />
+  <ContactModal
+    v-model="showContactModal"
+    v-model:reloadContacts="contacts"
+    :contact="{}"
+  />
 </template>
 
 <script setup>
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import SortIcon from '@/components/Icons/SortIcon.vue'
+import ContactModal from '@/components/ContactModal.vue'
-import FilterIcon from '@/components/Icons/FilterIcon.vue'
+import ContactsListView from '@/components/ListViews/ContactsListView.vue'
-import { FeatherIcon, Button, Dropdown, Breadcrumbs, ListView } from 'frappe-ui'
+import SortBy from '@/components/SortBy.vue'
-import { ref, computed } from 'vue'
+import Filter from '@/components/Filter.vue'
+import { FeatherIcon, Breadcrumbs, Dropdown } from 'frappe-ui'
 import { contactsStore } from '@/stores/contacts.js'
+import { organizationsStore } from '@/stores/organizations.js'
+import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 
 const { contacts } = contactsStore()
+const { getOrganization } = organizationsStore()
+const route = useRoute()
 
-const breadcrumbs = [{ label: 'Contacts', route: { name: 'Contacts' } }]
+const showContactModal = ref(false)
 
-const columns = [
+const currentContact = computed(() => {
-  {
+  return contacts.data.find(
-    label: 'Full name',
+    (contact) => contact.name === route.params.contactId
-    key: 'full_name',
+  )
-    width: '12rem',
+})
-  },
-  {
-    label: 'Email',
-    key: 'email',
-    width: '12rem',
-  },
-  {
-    label: 'Phone',
-    key: 'mobile_no',
-    width: '12rem',
-  },
-]
 
-const rows = computed(() => {
+const breadcrumbs = computed(() => {
-  return contacts.data?.map((contact) => {
+  let items = [{ label: 'Contacts', route: { name: 'Contacts' } }]
-    return {
+  if (!currentContact.value) return items
-      name: contact.name,
+  items.push({
-      full_name: {
+    label: currentContact.value.full_name,
-        label: contact.full_name,
+    route: {
-        image_label: contact.full_name,
+      name: 'Contact',
-        image: contact.image,
+      params: { contactId: currentContact.value.name },
-      },
+    },
-      email: contact.email_id,
-      mobile_no: contact.mobile_no,
-    }
   })
+  return items
 })
 
 const currentView = ref({
@@ -131,4 +126,63 @@ const viewsDropdownOptions = [
     },
   },
 ]
+
+const rows = computed(() => {
+  return contacts.data.map((contact) => {
+    return {
+      name: contact.name,
+      full_name: {
+        label: contact.full_name,
+        image_label: contact.full_name,
+        image: contact.image,
+      },
+      email: contact.email_id,
+      mobile_no: contact.mobile_no,
+      company_name: {
+        label: contact.company_name,
+        logo: getOrganization(contact.company_name)?.organization_logo,
+      },
+      modified: {
+        label: dateFormat(contact.modified, dateTooltipFormat),
+        timeAgo: timeAgo(contact.modified),
+      },
+    }
+  })
+})
+
+const columns = [
+  {
+    label: 'Name',
+    key: 'full_name',
+    width: '17rem',
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    width: '12rem',
+  },
+  {
+    label: 'Phone',
+    key: 'mobile_no',
+    width: '12rem',
+  },
+  {
+    label: 'Organization',
+    key: 'company_name',
+    width: '12rem',
+  },
+  {
+    label: 'Last modified',
+    key: 'modified',
+    width: '8rem',
+  },
+]
+
+onMounted(() => {
+  const el = document.querySelector('.router-link-active')
+  if (el)
+    setTimeout(() => {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    })
+})
 </script>

frontend/src/pages/Organization.vue

@@ -430,7 +430,14 @@ function getContactRowObject(contact) {
     },
     email: contact.email_id,
     mobile_no: contact.mobile_no,
-    company_name: contact.company_name,
+    company_name: {
+      label: contact.company_name,
+      logo: props.organization?.organization_logo,
+    },
+    modified: {
+      label: dateFormat(contact.modified, dateTooltipFormat),
+      timeAgo: timeAgo(contact.modified),
+    },
   }
 }
 
@@ -512,9 +519,9 @@ const dealColumns = [
 
 const contactColumns = [
   {
-    label: 'Full name',
+    label: 'Name',
     key: 'full_name',
-    width: '12rem',
+    width: '17rem',
   },
   {
     label: 'Email',
@@ -531,6 +538,11 @@ const contactColumns = [
     key: 'company_name',
     width: '12rem',
   },
+  {
+    label: 'Last modified',
+    key: 'modified',
+    width: '8rem',
+  },
 ]
 
 function reload(val) {

frontend/src/router.js

@@ -39,6 +39,12 @@ const routes = [
     name: 'Contacts',
     component: () => import('@/pages/Contacts.vue'),
   },
+  {
+    path: '/contacts/:contactId',
+    name: 'Contact',
+    component: () => import('@/pages/Contact.vue'),
+    props: true,
+  },
   {
     path: '/organizations',
     name: 'Organizations',

frontend/src/stores/contacts.js

@@ -4,6 +4,7 @@ import { reactive } from 'vue'
 
 export const contactsStore = defineStore('crm-contacts', () => {
   let contactsByPhone = reactive({})
+  let contactsByName = reactive({})
 
   const contacts = createResource({
     url: 'crm.api.session.get_contacts',
@@ -12,6 +13,7 @@ export const contactsStore = defineStore('crm-contacts', () => {
     transform(contacts) {
       for (let contact of contacts) {
         contactsByPhone[contact.mobile_no] = contact
+        contactsByName[contact.name] = contact
       }
       return contacts
     },
@@ -26,9 +28,13 @@ export const contactsStore = defineStore('crm-contacts', () => {
   function getContact(mobile_no) {
     return contactsByPhone[mobile_no]
   }
+  function getContactByName(name) {
+    return contactsByName[name]
+  }
 
   return {
     contacts,
     getContact,
+    getContactByName,
   }
 })