fix: added contacts page with data in listview

frontend/src/components/AppSidebar.vue

@@ -27,6 +27,7 @@
 import UserDropdown from './UserDropdown.vue'
 import LeadsIcon from './Icons/LeadsIcon.vue'
 import DealsIcon from './Icons/DealsIcon.vue'
+import ContactsIcon from './Icons/ContactsIcon.vue'
 import InboxIcon from './Icons/InboxIcon.vue'
 import DashboardIcon from './Icons/DashboardIcon.vue'
 import NavLinks from './NavLinks.vue'
@@ -47,6 +48,11 @@ const navigations = [
     icon: DealsIcon,
     route: { name: 'Deals' },
   },
+  {
+    name: 'Contacts',
+    icon: ContactsIcon,
+    route: { name: 'Contacts' },
+  },
   {
     name: 'Dashboard',
     icon: DashboardIcon,

frontend/src/components/Icons/ContactsIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.02099 11.5599C10.662 11.5599 11.9923 10.2295 11.9923 8.58852C11.9923 6.9475 10.662 5.61719 9.02099 5.61719C7.37996 5.61719 6.04965 6.9475 6.04965 8.58852C6.04965 10.2295 7.37996 11.5599 9.02099 11.5599Z"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M3.92462 15.2834C4.245 14.2791 4.85628 13.3883 5.68566 12.7269C6.63325 11.9711 7.80938 11.5596 9.02143 11.5596C10.2335 11.5596 11.4096 11.9711 12.3572 12.7269C13.1866 13.3883 13.7979 14.2791 14.1182 15.2834"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <rect
+      x="2.25"
+      y="2.25"
+      width="13.5"
+      height="13.5"
+      rx="2.5"
+      stroke="currentColor"
+    />
+  </svg>
+</template>

frontend/src/pages/Contacts.vue

@@ -0,0 +1,50 @@
+<template>
+  <ListView :title="title" :columns="columns" :rows="rows" />
+</template>
+
+<script setup>
+import ListView from '../components/ListView.vue'
+import { computed } from 'vue'
+import { createListResource } from 'frappe-ui'
+
+const title = 'Contacts'
+
+const contacts = createListResource({
+  type: 'list',
+  doctype: 'Contact',
+  fields: ['name', 'full_name', 'email_id', 'phone'],
+  orderBy: 'full_name asc',
+  cache: 'Contacts',
+  pageLength: 999,
+  auto: true,
+})
+contacts.fetch()
+
+const columns = [
+  {
+    label: 'Full Name',
+    key: 'full_name',
+    size: 'w-44',
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    size: 'w-44',
+  },
+  {
+    label: 'Phone',
+    key: 'phone',
+    size: 'w-44',
+  },
+]
+
+const rows = computed(() => {
+  return contacts.data?.map((contact) => {
+    return {
+      full_name: contact.full_name,
+      email: contact.email_id,
+      phone: contact.phone,
+    }
+  })
+})
+</script>

frontend/src/router.js

@@ -21,6 +21,11 @@ const routes = [
     name: 'Inbox',
     component: () => import('@/pages/Inbox.vue'),
   },
+  {
+    path: '/contacts',
+    name: 'Contacts',
+    component: () => import('@/pages/Contacts.vue'),
+  },
   {
     path: '/dashboard',
     name: 'Dashboard',