From b30bc8db1676c861c08d204572ce51bd4cd51b89 Mon Sep 17 00:00:00 2001
From: sandip_pandit <sandip.pandit@redsoftware.in>
Date: Sat, 19 Apr 2025 18:27:53 +0530
Subject: [PATCH 1/2] reractor:sidebar

---
 crm/fcrm/api.py                               |   19 +
 frontend/components.d.ts                      |    2 +
 .../src/components/Layouts/AppSidebar.vue     |   32 +-
 .../components/ListViews/ReportsListView.vue  |  236 ++++
 .../src/components/Mobile/MobileSidebar.vue   |   20 +-
 frontend/src/components/Modals/DealModal.vue  |    2 +-
 frontend/src/components/Modals/LeadModal.vue  |    2 +-
 .../components/Modals/ReportDetailModal.vue   |  174 +++
 frontend/src/components/Modals/ViewModal.vue  |    2 +-
 frontend/src/pages/Contact.vue                |    4 +-
 frontend/src/pages/Deal.vue                   |    8 +-
 frontend/src/pages/Deals.vue                  |    4 +-
 frontend/src/pages/InvalidPage.vue            |    4 +-
 frontend/src/pages/Lead.vue                   | 1119 ++++++++---------
 frontend/src/pages/Leads.vue                  |  561 ++-------
 frontend/src/pages/MobileContact.vue          |   10 +-
 frontend/src/pages/MobileDeal.vue             |    6 +-
 frontend/src/pages/MobileLead.vue             |    6 +-
 frontend/src/pages/MobileOrganization.vue     |    6 +-
 frontend/src/pages/Organization.vue           |    4 +-
 frontend/src/pages/Report.vue                 |  365 ++++++
 frontend/src/pages/Reports.vue                |  177 +++
 frontend/src/router.js                        |   32 +-
 23 files changed, 1661 insertions(+), 1134 deletions(-)
 create mode 100644 crm/fcrm/api.py
 create mode 100644 frontend/src/components/ListViews/ReportsListView.vue
 create mode 100644 frontend/src/components/Modals/ReportDetailModal.vue
 create mode 100644 frontend/src/pages/Report.vue
 create mode 100644 frontend/src/pages/Reports.vue

diff --git a/crm/fcrm/api.py b/crm/fcrm/api.py
new file mode 100644
index 000000000..71727c0bc
--- /dev/null
+++ b/crm/fcrm/api.py
@@ -0,0 +1,19 @@
+
+import frappe
+from frappe import _
+
+@frappe.whitelist(allow_guest=True)
+def get_fcrm_reports():
+    """Fetch all standard and custom reports for FCRM module (Redsoft CRM)."""
+    reports = frappe.get_all(
+        "Report",
+        filters={"module": "Redsoft CRM"},
+        fields=["name", "ref_doctype", "report_type", "is_standard", "modified"]
+    )
+
+    return {
+        "status": "success",
+        "module": "Redsoft CRM",
+        "count": len(reports),
+        "data": reports
+    }
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 82afdb191..06b1915a3 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -188,6 +188,8 @@ declare module 'vue' {
     ReloadIcon: typeof import('./src/components/Icons/ReloadIcon.vue')['default']
     ReplyAllIcon: typeof import('./src/components/Icons/ReplyAllIcon.vue')['default']
     ReplyIcon: typeof import('./src/components/Icons/ReplyIcon.vue')['default']
+    ReportDetailModal: typeof import('./src/components/Modals/ReportDetailModal.vue')['default']
+    ReportsListView: typeof import('./src/components/ListViews/ReportsListView.vue')['default']
     Resizer: typeof import('./src/components/Resizer.vue')['default']
     RightSideLayoutIcon: typeof import('./src/components/Icons/RightSideLayoutIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 05d5bbb0e..3b2cf2e95 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -164,6 +164,7 @@ import SidebarLink from '@/components/SidebarLink.vue'
 import Notifications from '@/components/Notifications.vue'
 import Settings from '@/components/Settings/Settings.vue'
 import { viewsStore } from '@/stores/views'
+import DashboardIcon from '@/components/Icons/DashboardIcon.vue'
 import {
   unreadNotificationsCount,
   notificationsStore,
@@ -195,14 +196,14 @@ const isDemoSite = ref(window.is_demo_site)
 
 const links = [
   {
-    label: 'Leads',
+    label: 'Patients',
     icon: LeadsIcon,
-    to: 'Leads',
+    to: 'Patients',
   },
   {
-    label: 'Deals',
+    label: 'Bookings',
     icon: DealsIcon,
-    to: 'Deals',
+    to: 'Bookings',
   },
   {
     label: 'Contacts',
@@ -234,6 +235,11 @@ const links = [
     icon: Email2Icon,
     to: 'Email Templates',
   },
+  {
+    label: 'Reports',
+    icon: DashboardIcon,         
+    to: 'Reports',
+  },
 ]
 
 const allViews = computed(() => {
@@ -281,9 +287,9 @@ function getIcon(routeName, icon) {
   if (icon) return h('div', { class: 'size-auto' }, icon)
 
   switch (routeName) {
-    case 'Leads':
+    case 'Patients':
       return LeadsIcon
-    case 'Deals':
+    case 'Bookings':
       return DealsIcon
     case 'Contacts':
       return ContactsIcon
@@ -292,7 +298,9 @@ function getIcon(routeName, icon) {
     case 'Notes':
       return NoteIcon
     case 'Call Logs':
-      return PhoneIcon
+      return 
+    case 'Dashboard':
+      return DashboardIcon
     default:
       return PinIcon
   }
@@ -324,7 +332,7 @@ const steps = reactive([
     completed: false,
     onClick: () => {
       minimize.value = true
-      router.push({ name: 'Leads' })
+      router.push({ name: 'Patients' })
     },
   },
   {
@@ -358,7 +366,7 @@ const steps = reactive([
           if (lead) {
             router.push({ name: 'Lead', params: { leadId: lead } })
           } else {
-            router.push({ name: 'Leads' })
+            router.push({ name: 'Patients' })
           }
         },
       }
@@ -421,7 +429,7 @@ const steps = reactive([
           hash: '#comments',
         })
       } else {
-        router.push({ name: 'Leads' })
+        router.push({ name: 'Patients' })
       }
     },
   },
@@ -441,7 +449,7 @@ const steps = reactive([
           hash: '#emails',
         })
       } else {
-        router.push({ name: 'Leads' })
+        router.push({ name: 'Patients' })
       }
     },
   },
@@ -469,7 +477,7 @@ const steps = reactive([
               hash: '#activity',
             })
           } else {
-            router.push({ name: 'Leads' })
+            router.push({ name: 'Patients' })
           }
         },
       }
diff --git a/frontend/src/components/ListViews/ReportsListView.vue b/frontend/src/components/ListViews/ReportsListView.vue
new file mode 100644
index 000000000..aeecb7c86
--- /dev/null
+++ b/frontend/src/components/ListViews/ReportsListView.vue
@@ -0,0 +1,236 @@
+<template>
+  <ListView
+    :class="$attrs.class"
+    :columns="columns"
+    :rows="rows"
+    :options="{
+      getRowRoute: (row) => ({
+        name: 'Contact',
+        params: { contactId: row.name },
+        query: { view: route.query.view, viewType: route.params.viewType },
+      }),
+      selectable: options.selectable,
+      showTooltip: options.showTooltip,
+      resizeColumn: options.resizeColumn,
+    }"
+    row-key="name"
+  >
+    <ListHeader
+      class="mx-3 sm:mx-5"
+      @columnWidthUpdated="emit('columnWidthUpdated')"
+    >
+      <ListHeaderItem
+        v-for="column in columns"
+        :key="column.key"
+        :item="column"
+        @columnWidthUpdated="emit('columnWidthUpdated', column)"
+      >
+        <Button
+          v-if="column.key == '_liked_by'"
+          variant="ghosted"
+          class="!h-4"
+          :class="isLikeFilterApplied ? 'fill-red-500' : 'fill-white'"
+          @click="() => emit('applyLikeFilter')"
+        >
+          <HeartIcon class="h-4 w-4" />
+        </Button>
+      </ListHeaderItem>
+    </ListHeader>
+    <ListRows
+      class="mx-3 sm:mx-5"
+      :rows="rows"
+      v-slot="{ idx, column, item }"
+      doctype="Contact"
+    >
+      <ListRowItem :item="item" :align="column.align">
+        <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>
+        <template #default="{ label }">
+          <div
+            v-if="['modified', 'creation'].includes(column.key)"
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            <Tooltip :text="item.label">
+              <div>{{ item.timeAgo }}</div>
+            </Tooltip>
+          </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-ink-gray-9"
+            />
+          </div>
+          <div v-else-if="column.key === '_liked_by'">
+            <Button
+              v-if="column.key == '_liked_by'"
+              variant="ghosted"
+              :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+              @click.stop.prevent="
+                () => emit('likeDoc', { name: row.name, liked: isLiked(item) })
+              "
+            >
+              <HeartIcon class="h-4 w-4" />
+            </Button>
+          </div>
+          <div
+            v-else
+            class="truncate text-base"
+            @click="
+              (event) =>
+                emit('applyFilter', {
+                  event,
+                  idx,
+                  column,
+                  item,
+                  firstColumn: columns[0],
+                })
+            "
+          >
+            {{ label }}
+          </div>
+        </template>
+      </ListRowItem>
+    </ListRows>
+    <ListSelectBanner>
+      <template #actions="{ selections, unselectAll }">
+        <Dropdown
+          :options="listBulkActionsRef.bulkActions(selections, unselectAll)"
+        >
+          <Button icon="more-horizontal" variant="ghost" />
+        </Dropdown>
+      </template>
+    </ListSelectBanner>
+  </ListView>
+  <ListFooter
+    v-if="pageLengthCount"
+    class="border-t px-3 py-2 sm:px-5"
+    v-model="pageLengthCount"
+    :options="{
+      rowCount: options.rowCount,
+      totalCount: options.totalCount,
+    }"
+    @loadMore="emit('loadMore')"
+  />
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
+    doctype="Contact"
+    :options="{
+      hideAssign: true,
+    }"
+  />
+</template>
+<script setup>
+import HeartIcon from '@/components/Icons/HeartIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import ListBulkActions from '@/components/ListBulkActions.vue'
+import ListRows from '@/components/ListViews/ListRows.vue'
+import {
+  Avatar,
+  ListView,
+  ListHeader,
+  ListHeaderItem,
+  ListSelectBanner,
+  ListRowItem,
+  ListFooter,
+  Tooltip,
+  Dropdown,
+} from 'frappe-ui'
+import { sessionStore } from '@/stores/session'
+import { ref, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const props = defineProps({
+  rows: {
+    type: Array,
+    required: true,
+  },
+  columns: {
+    type: Array,
+    required: true,
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      selectable: true,
+      showTooltip: true,
+      resizeColumn: false,
+      totalCount: 0,
+      rowCount: 0,
+    }),
+  },
+})
+
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'columnWidthUpdated',
+  'applyFilter',
+  'applyLikeFilter',
+  'likeDoc',
+])
+
+const route = useRoute()
+
+const pageLengthCount = defineModel()
+const list = defineModel('list')
+
+const isLikeFilterApplied = computed(() => {
+  return list.value.params?.filters?._liked_by ? true : false
+})
+
+const { user } = sessionStore()
+
+function isLiked(item) {
+  if (item) {
+    let likedByMe = JSON.parse(item)
+    return likedByMe.includes(user)
+  }
+}
+
+watch(pageLengthCount, (val, old_value) => {
+  if (val === old_value) return
+  emit('updatePageCount', val)
+})
+
+const listBulkActionsRef = ref(null)
+
+defineExpose({
+  customListActions: computed(
+    () => listBulkActionsRef.value?.customListActions,
+  ),
+})
+</script>
diff --git a/frontend/src/components/Mobile/MobileSidebar.vue b/frontend/src/components/Mobile/MobileSidebar.vue
index af313d635..eebe8a768 100644
--- a/frontend/src/components/Mobile/MobileSidebar.vue
+++ b/frontend/src/components/Mobile/MobileSidebar.vue
@@ -108,19 +108,20 @@ import { createResource } from 'frappe-ui'
 import { TrialBanner } from 'frappe-ui/frappe'
 import { computed, h, provide } from 'vue'
 import { mobileSidebarOpened as sidebarOpened } from '@/composables/settings'
+import DashboardIcon from '@/components/Icons/DashboardIcon.vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 
 const links = [
   {
-    label: 'Leads',
+    label: 'Patients',
     icon: LeadsIcon,
-    to: 'Leads',
+    to: 'Patients',
   },
   {
-    label: 'Deals',
+    label: 'Bookings',
     icon: DealsIcon,
-    to: 'Deals',
+    to: 'Bookings',
   },
   {
     label: 'Contacts',
@@ -152,6 +153,11 @@ const links = [
     icon: Email2Icon,
     to: 'Email Templates',
   },
+  {
+    label: 'Reports',
+    icon: DashboardIcon,
+    to: 'Reports',
+  },
 ]
 
 const allViews = computed(() => {
@@ -199,9 +205,9 @@ function getIcon(routeName, icon) {
   if (icon) return h('div', { class: 'size-auto' }, icon)
 
   switch (routeName) {
-    case 'Leads':
+    case 'Patients':
       return LeadsIcon
-    case 'Deals':
+    case 'Patients':
       return DealsIcon
     case 'Contacts':
       return ContactsIcon
@@ -211,6 +217,8 @@ function getIcon(routeName, icon) {
       return NoteIcon
     case 'Call Logs':
       return PhoneIcon
+    case 'Dashboard':
+      return DashboardIcon
     default:
       return PinIcon
   }
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index 7bd0b592b..4ad3dc04c 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -5,7 +5,7 @@
         <div class="mb-5 flex items-center justify-between">
           <div>
             <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
-              {{ __('Create Deal') }}
+              {{ __('Create Booking') }}
             </h3>
           </div>
           <div class="flex items-center gap-1">
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 95e0add20..09f1dc2aa 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -5,7 +5,7 @@
         <div class="mb-5 flex items-center justify-between">
           <div>
             <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
-              {{ __('Create Lead') }}
+              {{ __('Create Patient') }}
             </h3>
           </div>
           <div class="flex items-center gap-1">
diff --git a/frontend/src/components/Modals/ReportDetailModal.vue b/frontend/src/components/Modals/ReportDetailModal.vue
new file mode 100644
index 000000000..840fa14fc
--- /dev/null
+++ b/frontend/src/components/Modals/ReportDetailModal.vue
@@ -0,0 +1,174 @@
+<template>
+  <Dialog v-model="show" :options="{ size: 'xl' }">
+    <template #body>
+      <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
+        <div class="mb-5 flex items-center justify-between">
+          <div>
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
+              {{ __('New Contact') }}
+            </h3>
+          </div>
+          <div class="flex items-center gap-1">
+            <Button
+              v-if="isManager() && !isMobileView"
+              variant="ghost"
+              class="w-7"
+              @click="openQuickEntryModal"
+            >
+              <EditIcon class="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <FieldLayout
+          v-if="tabs.data?.length"
+          :tabs="tabs.data"
+          :data="_contact"
+          doctype="Contact"
+        />
+      </div>
+      <div class="px-4 pb-7 pt-4 sm:px-6">
+        <div class="space-y-2">
+          <Button
+            class="w-full"
+            variant="solid"
+            :label="__('Create')"
+            :loading="loading"
+            @click="createContact"
+          />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
+import { capture } from '@/telemetry'
+import { call, createResource } from 'frappe-ui'
+import { ref, nextTick, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+  contact: {
+    type: Object,
+    default: {},
+  },
+  options: {
+    type: Object,
+    default: {
+      redirect: true,
+      afterInsert: () => {},
+    },
+  },
+})
+
+const emit = defineEmits(['openAddressModal'])
+
+const { isManager } = usersStore()
+
+const router = useRouter()
+const show = defineModel()
+
+const loading = ref(false)
+
+let _contact = ref({})
+
+async function createContact() {
+  if (_contact.value.email_id) {
+    _contact.value.email_ids = [{ email_id: _contact.value.email_id }]
+    delete _contact.value.email_id
+  }
+
+  if (_contact.value.mobile_no) {
+    _contact.value.phone_nos = [{ phone: _contact.value.mobile_no }]
+    delete _contact.value.mobile_no
+  }
+
+  const doc = await call('frappe.client.insert', {
+    doc: {
+      doctype: 'Contact',
+      ..._contact.value,
+    },
+  })
+  if (doc.name) {
+    capture('contact_created')
+    handleContactUpdate(doc)
+  }
+}
+
+function handleContactUpdate(doc) {
+  props.contact?.reload?.()
+  if (doc.name && props.options.redirect) {
+    router.push({
+      name: 'Contact',
+      params: { contactId: doc.name },
+    })
+  }
+  show.value = false
+  props.options.afterInsert && props.options.afterInsert(doc)
+}
+
+const tabs = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['QuickEntry', 'Contact'],
+  params: { doctype: 'Contact', type: 'Quick Entry' },
+  auto: true,
+  transform: (_tabs) => {
+    return _tabs.forEach((tab) => {
+      tab.sections.forEach((section) => {
+        section.columns.forEach((column) => {
+          column.fields.forEach((field) => {
+            if (field.fieldname == 'email_id') {
+              field.read_only = false
+            } else if (field.fieldname == 'mobile_no') {
+              field.read_only = false
+            } else if (field.fieldname == 'address') {
+              field.create = (value, close) => {
+                _contact.value.address = value
+                emit('openAddressModal')
+                show.value = false
+                close()
+              }
+              field.edit = (address) => {
+                emit('openAddressModal', address)
+                show.value = false
+              }
+            } else if (field.fieldtype === 'Table') {
+              _contact.value[field.fieldname] = []
+            }
+          })
+        })
+      })
+    })
+  },
+})
+
+watch(
+  () => show.value,
+  (value) => {
+    if (!value) return
+    nextTick(() => {
+      _contact.value = { ...props.contact.data }
+    })
+  },
+)
+
+const showQuickEntryModal = defineModel('showQuickEntryModal')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => (show.value = false))
+}
+</script>
+
+<style scoped>
+:deep(:has(> .dropdown-button)) {
+  width: 100%;
+}
+</style>
diff --git a/frontend/src/components/Modals/ViewModal.vue b/frontend/src/components/Modals/ViewModal.vue
index a3ba26f7f..3b4d6f0bc 100644
--- a/frontend/src/components/Modals/ViewModal.vue
+++ b/frontend/src/components/Modals/ViewModal.vue
@@ -37,7 +37,7 @@
           class="flex-1"
           size="md"
           type="text"
-          :placeholder="__('My Open Deals')"
+          :placeholder="__('My Open Bookings')"
           v-model="view.label"
         />
       </div>
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index bfe7ea76f..60f739c98 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -150,7 +150,7 @@
       </template>
       <template #tab-panel="{ tab }">
         <DealsListView
-          v-if="tab.label === 'Deals' && rows.length"
+          v-if="tab.label === 'Bookings' && rows.length"
           class="mt-4"
           :rows="rows"
           :columns="columns"
@@ -336,7 +336,7 @@ async function deleteContact() {
 const tabIndex = ref(0)
 const tabs = [
   {
-    label: 'Deals',
+    label: 'Bookings',
     icon: h(DealsIcon, { class: 'h-4 w-4' }),
     count: computed(() => deals.data?.length),
   },
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index eb8446960..0dd3e17fc 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -414,7 +414,7 @@ const deal = createResource({
       errorTitle.value = __('Not permitted')
       errorMessage.value = __(err.messages?.[0])
     } else {
-      router.push({ name: 'Deals' })
+      router.push({ name: 'Bookings' })
     }
   },
 })
@@ -499,7 +499,7 @@ function validateRequired(fieldname, value) {
 }
 
 const breadcrumbs = computed(() => {
-  let items = [{ label: __('Deals'), route: { name: 'Deals' } }]
+  let items = [{ label: __('Bookings'), route: { name: 'Bookings' } }]
 
   if (route.query.view || route.query.viewType) {
     let view = getView(route.query.view, route.query.viewType, 'CRM Deal')
@@ -508,7 +508,7 @@ const breadcrumbs = computed(() => {
         label: __(view.label),
         icon: view.icon,
         route: {
-          name: 'Deals',
+          name: 'Bookings',
           params: { viewType: route.query.viewType },
           query: { view: route.query.view },
         },
@@ -742,7 +742,7 @@ async function deleteDeal(name) {
     doctype: 'CRM Deal',
     name,
   })
-  router.push({ name: 'Deals' })
+  router.push({ name: 'Bookings' })
 }
 
 const activities = ref(null)
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 093acddff..774e7cd6c 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -1,7 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <ViewBreadcrumbs v-model="viewControls" routeName="Deals" />
+      <ViewBreadcrumbs v-model="viewControls" routeName="Bookings" />
     </template>
     <template #right-header>
       <CustomActions
@@ -229,7 +229,7 @@
       class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <DealsIcon class="h-10 w-10" />
-      <span>{{ __('No {0} Found', [__('Deals')]) }}</span>
+      <span>{{ __('No {0} Found', [__('Bookings')]) }}</span>
       <Button :label="__('Create')" @click="showDealModal = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
diff --git a/frontend/src/pages/InvalidPage.vue b/frontend/src/pages/InvalidPage.vue
index 875cec2d4..5b40b0ede 100644
--- a/frontend/src/pages/InvalidPage.vue
+++ b/frontend/src/pages/InvalidPage.vue
@@ -4,9 +4,9 @@
   >
     <div class="space-y-2">
       <div>Invalid page or not permitted to access</div>
-      <Button :route="{ name: 'Leads' }">
+      <Button :route="{ name: 'Patients' }">
         <template #prefix><LeadsIcon class="w-4" /></template>
-        Leads
+        Patients
       </Button>
     </div>
   </div>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 19aa6e669..60f739c98 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutHeader v-if="lead.data">
+  <LayoutHeader v-if="contact.data">
     <template #left-header>
       <Breadcrumbs :items="breadcrumbs">
         <template #prefix="{ item }">
@@ -7,494 +7,267 @@
         </template>
       </Breadcrumbs>
     </template>
-    <template #right-header>
-      <CustomActions
-        v-if="lead.data._customActions?.length"
-        :actions="lead.data._customActions"
-      />
-      <AssignTo
-        v-model="lead.data._assignedTo"
-        :data="lead.data"
-        doctype="CRM Lead"
-      />
-      <Dropdown
-        :options="statusOptions('lead', updateField, lead.data._customStatuses)"
-      >
-        <template #default="{ open }">
-          <Button :label="lead.data.status">
-            <template #prefix>
-              <IndicatorIcon :class="getLeadStatus(lead.data.status).color" />
-            </template>
-            <template #suffix>
-              <FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4"
-              />
-            </template>
-          </Button>
-        </template>
-      </Dropdown>
-      <Button
-        :label="__('Convert to Deal')"
-        variant="solid"
-        @click="showConvertToDealModal = true"
-      />
-    </template>
   </LayoutHeader>
-  <div v-if="lead?.data" class="flex h-full overflow-hidden">
-    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
-      <template #tab-panel>
-        <Activities
-          ref="activities"
-          doctype="CRM Lead"
-          :tabs="tabs"
-          v-model:reload="reload"
-          v-model:tabIndex="tabIndex"
-          v-model="lead"
-        />
-      </template>
-    </Tabs>
-    <Resizer class="flex flex-col justify-between border-l" side="right">
-      <div
-        class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium text-ink-gray-9"
-        @click="copyToClipboard(lead.data.name)"
-      >
-        {{ __(lead.data.name) }}
-      </div>
-      <FileUploader
-        @success="(file) => updateField('image', file.file_url)"
-        :validateFile="validateFile"
-      >
-        <template #default="{ openFileSelector, error }">
-          <div class="flex items-center justify-start gap-5 border-b p-5">
-            <div class="group relative size-12">
-              <Avatar
-                size="3xl"
-                class="size-12"
-                :label="title"
-                :image="lead.data.image"
-              />
-              <component
-                :is="lead.data.image ? Dropdown : 'div'"
-                v-bind="
-                  lead.data.image
-                    ? {
-                        options: [
-                          {
-                            icon: 'upload',
-                            label: lead.data.image
-                              ? __('Change image')
-                              : __('Upload image'),
-                            onClick: openFileSelector,
-                          },
-                          {
-                            icon: 'trash-2',
-                            label: __('Remove image'),
-                            onClick: () => updateField('image', ''),
-                          },
-                        ],
-                      }
-                    : { onClick: openFileSelector }
-                "
-                class="!absolute bottom-0 left-0 right-0"
-              >
-                <div
-                  class="z-1 absolute bottom-0.5 left-0 right-0.5 flex h-9 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="size-4 cursor-pointer text-white" />
-                </div>
-              </component>
-            </div>
-            <div class="flex flex-col gap-2.5 truncate">
-              <Tooltip :text="lead.data.lead_name || __('Set first name')">
-                <div class="truncate text-2xl font-medium text-ink-gray-9">
-                  {{ title }}
-                </div>
-              </Tooltip>
-              <div class="flex gap-1.5">
-                <Tooltip v-if="callEnabled" :text="__('Make a call')">
-                  <div>
-                    <Button
-                      class="h-7 w-7"
-                      @click="
-                        () =>
-                          lead.data.mobile_no
-                            ? makeCall(lead.data.mobile_no)
-                            : _errorMessage(__('No phone number set'))
+  <div v-if="contact.data" ref="parentRef" class="flex h-full">
+    <Resizer
+      v-if="contact.data"
+      :parent="$refs.parentRef"
+      class="flex h-full flex-col overflow-hidden border-r"
+    >
+      <div class="border-b">
+        <FileUploader
+          @success="changeContactImage"
+          :validateFile="validateFile"
+        >
+          <template #default="{ openFileSelector, error }">
+            <div class="flex flex-col items-start justify-start gap-4 p-5">
+              <div class="flex gap-4 items-center">
+                <div class="group relative h-15.5 w-15.5">
+                  <Avatar
+                    size="3xl"
+                    class="h-15.5 w-15.5"
+                    :label="contact.data.full_name"
+                    :image="contact.data.image"
+                  />
+                  <component
+                    :is="contact.data.image ? Dropdown : 'div'"
+                    v-bind="
+                      contact.data.image
+                        ? {
+                            options: [
+                              {
+                                icon: 'upload',
+                                label: contact.data.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-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(22px 0 0 0);
+                        clip-path: inset(22px 0 0 0);
                       "
                     >
-                      <PhoneIcon class="h-4 w-4" />
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Send an email')">
-                  <div>
-                    <Button class="h-7 w-7">
-                      <Email2Icon
-                        class="h-4 w-4"
-                        @click="
-                          lead.data.email
-                            ? openEmailBox()
-                            : _errorMessage(__('No email set'))
-                        "
-                      />
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Go to website')">
-                  <div>
-                    <Button class="h-7 w-7">
-                      <LinkIcon
-                        class="h-4 w-4"
-                        @click="
-                          lead.data.website
-                            ? openWebsite(lead.data.website)
-                            : _errorMessage(__('No website set'))
-                        "
-                      />
-                    </Button>
+                      <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
+                    </div>
+                  </component>
+                </div>
+                <div class="flex flex-col gap-2 truncate text-ink-gray-9">
+                  <div class="truncate text-2xl font-medium">
+                    <span v-if="contact.data.salutation">
+                      {{ contact.data.salutation + '. ' }}
+                    </span>
+                    <span>{{ contact.data.full_name }}</span>
                   </div>
-                </Tooltip>
-                <Tooltip :text="__('Attach a file')">
-                  <div>
-                    <Button class="h-7 w-7" @click="showFilesUploader = true">
-                      <AttachmentIcon class="h-4 w-4" />
-                    </Button>
+                  <div
+                    v-if="contact.data.company_name"
+                    class="flex items-center gap-1.5 text-base text-ink-gray-8"
+                  >
+                    <Avatar
+                      size="xs"
+                      :label="contact.data.company_name"
+                      :image="
+                        getOrganization(contact.data.company_name)
+                          ?.organization_logo
+                      "
+                    />
+                    <span class="">{{ contact.data.company_name }}</span>
                   </div>
-                </Tooltip>
+                  <ErrorMessage :message="__(error)" />
+                </div>
+              </div>
+              <div class="flex gap-1.5">
+                <Button
+                  v-if="contact.data.actual_mobile_no"
+                  :label="__('Make Call')"
+                  size="sm"
+                  @click="
+                    callEnabled && makeCall(contact.data.actual_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>
-      <SLASection
-        v-if="lead.data.sla_status"
-        v-model="lead.data"
-        @updateField="updateField"
-      />
+          </template>
+        </FileUploader>
+      </div>
       <div
         v-if="sections.data"
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
         <SidePanelLayout
-          v-model="lead.data"
+          v-model="contact.data"
           :sections="sections.data"
-          doctype="CRM Lead"
+          doctype="Contact"
           @update="updateField"
           @reload="sections.reload"
         />
       </div>
     </Resizer>
-  </div>
-  <ErrorPage v-else :errorTitle="errorTitle" :errorMessage="errorMessage" />
-  <Dialog
-    v-model="showConvertToDealModal"
-    :options="{
-      size: 'xl',
-      actions: [
-        {
-          label: __('Convert'),
-          variant: 'solid',
-          onClick: convertToDeal,
-        },
-      ],
-    }"
-  >
-    <template #body-header>
-      <div class="mb-6 flex items-center justify-between">
-        <div>
-          <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
-            {{ __('Convert to Deal') }}
-          </h3>
-        </div>
-        <div class="flex items-center gap-1">
-          <Button
-            v-if="isManager() && !isMobileView"
-            variant="ghost"
-            class="w-7"
-            @click="openQuickEntryModal"
-          >
-            <EditIcon class="h-4 w-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            class="w-7"
-            @click="showConvertToDealModal = false"
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <template #tab-item="{ tab, selected }">
+        <button
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
+          :class="{ 'text-ink-gray-9': selected }"
+        >
+          <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+          {{ __(tab.label) }}
+          <Badge
+            class="group-hover:bg-surface-gray-7"
+            :class="[selected ? 'bg-surface-gray-7' : 'bg-gray-600']"
+            variant="solid"
+            theme="gray"
+            size="sm"
           >
-            <FeatherIcon name="x" class="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    </template>
-    <template #body-content>
-      <div class="mb-4 flex items-center gap-2 text-ink-gray-5">
-        <OrganizationsIcon class="h-4 w-4" />
-        <label class="block text-base">{{ __('Organization') }}</label>
-      </div>
-      <div class="ml-6 text-ink-gray-9">
-        <div class="flex items-center justify-between text-base">
-          <div>{{ __('Choose Existing') }}</div>
-          <Switch v-model="existingOrganizationChecked" />
-        </div>
-        <Link
-          v-if="existingOrganizationChecked"
-          class="form-control mt-2.5"
-          size="md"
-          :value="existingOrganization"
-          doctype="CRM Organization"
-          @change="(data) => (existingOrganization = data)"
-        />
-        <div v-else class="mt-2.5 text-base">
-          {{
-            __(
-              'New organization will be created based on the data in details section',
-            )
-          }}
-        </div>
-      </div>
-
-      <div class="mb-4 mt-6 flex items-center gap-2 text-ink-gray-5">
-        <ContactsIcon class="h-4 w-4" />
-        <label class="block text-base">{{ __('Contact') }}</label>
-      </div>
-      <div class="ml-6 text-ink-gray-9">
-        <div class="flex items-center justify-between text-base">
-          <div>{{ __('Choose Existing') }}</div>
-          <Switch v-model="existingContactChecked" />
-        </div>
-        <Link
-          v-if="existingContactChecked"
-          class="form-control mt-2.5"
-          size="md"
-          :value="existingContact"
-          doctype="Contact"
-          @change="(data) => (existingContact = data)"
+            {{ tab.count }}
+          </Badge>
+        </button>
+      </template>
+      <template #tab-panel="{ tab }">
+        <DealsListView
+          v-if="tab.label === 'Bookings' && rows.length"
+          class="mt-4"
+          :rows="rows"
+          :columns="columns"
+          :options="{ selectable: false, showTooltip: false }"
         />
-        <div v-else class="mt-2.5 text-base">
-          {{ __("New contact will be created based on the person's details") }}
+        <div
+          v-if="!rows.length"
+          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
+        >
+          <div class="flex flex-col items-center justify-center space-y-3">
+            <component :is="tab.icon" class="!h-10 !w-10" />
+            <div>{{ __('No {0} Found', [__(tab.label)]) }}</div>
+          </div>
         </div>
-      </div>
-
-      <div v-if="dealTabs.data?.length" class="h-px w-full border-t my-6" />
-
-      <FieldLayout
-        v-if="dealTabs.data?.length"
-        :tabs="dealTabs.data"
-        :data="deal"
-        doctype="CRM Deal"
-      />
-    </template>
-  </Dialog>
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Deal"
-    :onlyRequired="true"
-  />
-  <FilesUploader
-    v-if="lead.data?.name"
-    v-model="showFilesUploader"
-    doctype="CRM Lead"
-    :docname="lead.data.name"
-    @after="
-      () => {
-        activities?.all_activities?.reload()
-        changeTabTo('attachments')
-      }
-    "
-  />
+      </template>
+    </Tabs>
+  </div>
+  <ErrorPage v-else :errorTitle="errorTitle" :errorMessage="errorMessage" />
+  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
+
 <script setup>
 import ErrorPage from '@/components/ErrorPage.vue'
-import Icon from '@/components/Icon.vue'
 import Resizer from '@/components/Resizer.vue'
-import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
-import EmailIcon from '@/components/Icons/EmailIcon.vue'
-import Email2Icon from '@/components/Icons/Email2Icon.vue'
-import CommentIcon from '@/components/Icons/CommentIcon.vue'
-import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
+import Icon from '@/components/Icon.vue'
+import SidePanelLayout from '@/components/SidePanelLayout.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import TaskIcon from '@/components/Icons/TaskIcon.vue'
-import NoteIcon from '@/components/Icons/NoteIcon.vue'
-import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
-import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
-import LinkIcon from '@/components/Icons/LinkIcon.vue'
-import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
-import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
-import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
-import EditIcon from '@/components/Icons/EditIcon.vue'
-import LayoutHeader from '@/components/LayoutHeader.vue'
-import Activities from '@/components/Activities/Activities.vue'
-import AssignTo from '@/components/AssignTo.vue'
-import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
-import Link from '@/components/Controls/Link.vue'
-import SidePanelLayout from '@/components/SidePanelLayout.vue'
-import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
-import SLASection from '@/components/SLASection.vue'
-import CustomActions from '@/components/CustomActions.vue'
-import {
-  openWebsite,
-  createToast,
-  setupAssignees,
-  setupCustomizations,
-  errorMessage as _errorMessage,
-  copyToClipboard,
-} from '@/utils'
+import DealsIcon from '@/components/Icons/DealsIcon.vue'
+import DealsListView from '@/components/ListViews/DealsListView.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
+import { formatDate, timeAgo, createToast } from '@/utils'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
-import { usersStore } from '@/stores/users'
-import { globalStore } from '@/stores/global'
-import { statusesStore } from '@/stores/statuses'
 import { getMeta } from '@/stores/meta'
+import { globalStore } from '@/stores/global.js'
+import { usersStore } from '@/stores/users.js'
+import { organizationsStore } from '@/stores/organizations.js'
+import { statusesStore } from '@/stores/statuses'
+import { callEnabled } from '@/composables/settings'
 import {
-  whatsappEnabled,
-  callEnabled,
-  isMobileView,
-} from '@/composables/settings'
-import { capture } from '@/telemetry'
-import {
-  createResource,
-  FileUploader,
-  Dropdown,
-  Tooltip,
+  Breadcrumbs,
   Avatar,
+  FileUploader,
   Tabs,
-  Switch,
-  Breadcrumbs,
   call,
+  createResource,
   usePageMeta,
+  Dropdown,
 } from 'frappe-ui'
-import { useOnboarding } from 'frappe-ui/frappe'
-import { ref, reactive, computed, onMounted, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useActiveTabManager } from '@/composables/useActiveTabManager'
+import { ref, computed, h } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { errorMessage as _errorMessage } from '../utils'
 
 const { brand } = getSettings()
-const { isManager } = usersStore()
-const { $dialog, $socket, makeCall } = globalStore()
-const { statusOptions, getLeadStatus, getDealStatus } = statusesStore()
-const { doctypeMeta } = getMeta('CRM Lead')
+const { $dialog, makeCall } = globalStore()
 
-const { updateOnboardingStep } = useOnboarding('frappecrm')
-
-const route = useRoute()
-const router = useRouter()
+const { getUser } = usersStore()
+const { getOrganization } = organizationsStore()
+const { getDealStatus } = statusesStore()
+const { doctypeMeta } = getMeta('Contact')
 
 const props = defineProps({
-  leadId: {
+  contactId: {
     type: String,
     required: true,
   },
 })
 
+const route = useRoute()
+const router = useRouter()
+
+const showAddressModal = ref(false)
+const _contact = ref({})
+const _address = ref({})
+
 const errorTitle = ref('')
 const errorMessage = ref('')
 
-const lead = createResource({
-  url: 'crm.fcrm.doctype.crm_lead.api.get_lead',
-  params: { name: props.leadId },
-  cache: ['lead', props.leadId],
-  onSuccess: (data) => {
+const contact = createResource({
+  url: 'crm.api.contact.get_contact',
+  cache: ['contact', props.contactId],
+  params: { name: props.contactId },
+  auto: true,
+  transform: (data) => {
+    return {
+      ...data,
+      actual_mobile_no: data.mobile_no,
+      mobile_no: data.mobile_no,
+    }
+  },
+  onSuccess: () => {
     errorTitle.value = ''
     errorMessage.value = ''
-    setupAssignees(lead)
-    setupCustomizations(lead, {
-      doc: data,
-      $dialog,
-      $socket,
-      router,
-      updateField,
-      createToast,
-      deleteDoc: deleteLead,
-      resource: { lead, sections },
-      call,
-    })
   },
   onError: (err) => {
     if (err.messages?.[0]) {
       errorTitle.value = __('Not permitted')
       errorMessage.value = __(err.messages?.[0])
     } else {
-      router.push({ name: 'Leads' })
+      router.push({ name: 'Contacts' })
     }
   },
 })
 
-onMounted(() => {
-  if (lead.data) return
-  lead.fetch()
-})
-
-const reload = ref(false)
-const showFilesUploader = ref(false)
-
-function updateLead(fieldname, value, callback) {
-  value = Array.isArray(fieldname) ? '' : value
-
-  if (!Array.isArray(fieldname) && validateRequired(fieldname, value)) return
-
-  createResource({
-    url: 'frappe.client.set_value',
-    params: {
-      doctype: 'CRM Lead',
-      name: props.leadId,
-      fieldname,
-      value,
-    },
-    auto: true,
-    onSuccess: () => {
-      lead.reload()
-      reload.value = true
-      createToast({
-        title: __('Lead updated'),
-        icon: 'check',
-        iconClasses: 'text-ink-green-3',
-      })
-      callback?.()
-    },
-    onError: (err) => {
-      createToast({
-        title: __('Error updating lead'),
-        text: __(err.messages?.[0]),
-        icon: 'x',
-        iconClasses: 'text-ink-red-4',
-      })
-    },
-  })
-}
-
-function validateRequired(fieldname, value) {
-  let meta = lead.data.fields_meta || {}
-  if (meta[fieldname]?.reqd && !value) {
-    createToast({
-      title: __('Error Updating Lead'),
-      text: __('{0} is a required field', [meta[fieldname].label]),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
-    return true
-  }
-  return false
-}
-
 const breadcrumbs = computed(() => {
-  let items = [{ label: __('Leads'), route: { name: 'Leads' } }]
+  let items = [{ label: __('Contacts'), route: { name: 'Contacts' } }]
 
   if (route.query.view || route.query.viewType) {
-    let view = getView(route.query.view, route.query.viewType, 'CRM Lead')
+    let view = getView(route.query.view, route.query.viewType, 'Contact')
     if (view) {
       items.push({
         label: __(view.label),
         icon: view.icon,
         route: {
-          name: 'Leads',
+          name: 'Contacts',
           params: { viewType: route.query.viewType },
           query: { view: route.query.view },
         },
@@ -504,14 +277,14 @@ const breadcrumbs = computed(() => {
 
   items.push({
     label: title.value,
-    route: { name: 'Lead', params: { leadId: lead.data.name } },
+    route: { name: 'Contact', params: { contactId: props.contactId } },
   })
   return items
 })
 
 const title = computed(() => {
-  let t = doctypeMeta['CRM Lead']?.title_field || 'name'
-  return lead.data?.[t] || props.leadId
+  let t = doctypeMeta['Contact']?.title_field || 'name'
+  return contact.data?.[t] || props.contactId
 })
 
 usePageMeta(() => {
@@ -521,71 +294,6 @@ usePageMeta(() => {
   }
 })
 
-const tabs = computed(() => {
-  let tabOptions = [
-    {
-      name: 'Activity',
-      label: __('Activity'),
-      icon: ActivityIcon,
-    },
-    {
-      name: 'Emails',
-      label: __('Emails'),
-      icon: EmailIcon,
-    },
-    {
-      name: 'Comments',
-      label: __('Comments'),
-      icon: CommentIcon,
-    },
-    {
-      name: 'Data',
-      label: __('Data'),
-      icon: DetailsIcon,
-    },
-    {
-      name: 'Calls',
-      label: __('Calls'),
-      icon: PhoneIcon,
-    },
-    {
-      name: 'Tasks',
-      label: __('Tasks'),
-      icon: TaskIcon,
-    },
-    {
-      name: 'Notes',
-      label: __('Notes'),
-      icon: NoteIcon,
-    },
-    {
-      name: 'Attachments',
-      label: __('Attachments'),
-      icon: AttachmentIcon,
-    },
-    {
-      name: 'WhatsApp',
-      label: __('WhatsApp'),
-      icon: WhatsAppIcon,
-      condition: () => whatsappEnabled.value,
-    },
-  ]
-  return tabOptions.filter((tab) => (tab.condition ? tab.condition() : true))
-})
-
-const { tabIndex, changeTabTo } = useActiveTabManager(tabs, 'lastLeadTab')
-
-watch(tabs, (value) => {
-  if (value && route.params.tabName) {
-    let index = value.findIndex(
-      (tab) => tab.name.toLowerCase() === route.params.tabName.toLowerCase(),
-    )
-    if (index !== -1) {
-      tabIndex.value = index
-    }
-  }
-})
-
 function validateFile(file) {
   let extn = file.name.split('.').pop().toLowerCase()
   if (!['png', 'jpg', 'jpeg'].includes(extn)) {
@@ -593,141 +301,360 @@ function validateFile(file) {
   }
 }
 
+async function changeContactImage(file) {
+  await call('frappe.client.set_value', {
+    doctype: 'Contact',
+    name: props.contactId,
+    fieldname: 'image',
+    value: file?.file_url || '',
+  })
+  contact.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,
+          })
+          close()
+          router.push({ name: 'Contacts' })
+        },
+      },
+    ],
+  })
+}
+
+const tabIndex = ref(0)
+const tabs = [
+  {
+    label: 'Bookings',
+    icon: h(DealsIcon, { class: 'h-4 w-4' }),
+    count: computed(() => deals.data?.length),
+  },
+]
+
+const deals = createResource({
+  url: 'crm.api.contact.get_linked_deals',
+  cache: ['deals', props.contactId],
+  params: {
+    contact: props.contactId,
+  },
+  auto: true,
+})
+
+const rows = computed(() => {
+  if (!deals.data || deals.data == []) return []
+
+  return deals.data.map((row) => getDealRowObject(row))
+})
+
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
-  cache: ['sidePanelSections', 'CRM Lead'],
-  params: { doctype: 'CRM Lead' },
+  cache: ['sidePanelSections', 'Contact'],
+  params: { doctype: 'Contact' },
   auto: true,
+  transform: (data) => computed(() => getParsedSections(data)),
 })
 
-function updateField(name, value, callback) {
-  updateLead(name, value, () => {
-    lead.data[name] = value
-    callback?.()
+function getParsedSections(_sections) {
+  return _sections.map((section) => {
+    section.columns = section.columns.map((column) => {
+      column.fields = column.fields.map((field) => {
+        if (field.fieldname === 'email_id') {
+          return {
+            ...field,
+            read_only: false,
+            fieldtype: 'Dropdown',
+            options:
+              contact.data?.email_ids?.map((email) => {
+                return {
+                  name: email.name,
+                  value: email.email_id,
+                  selected: email.email_id === contact.data.email_id,
+                  placeholder: 'john@doe.com',
+                  onClick: () => {
+                    _contact.value.email_id = email.email_id
+                    setAsPrimary('email', email.email_id)
+                  },
+                  onSave: (option, isNew) => {
+                    if (isNew) {
+                      createNew('email', option.value)
+                      if (contact.data.email_ids.length === 1) {
+                        _contact.value.email_id = option.value
+                      }
+                    } else {
+                      editOption(
+                        'Contact Email',
+                        option.name,
+                        'email_id',
+                        option.value,
+                      )
+                    }
+                  },
+                  onDelete: async (option, isNew) => {
+                    contact.data.email_ids = contact.data.email_ids.filter(
+                      (email) => email.name !== option.name,
+                    )
+                    !isNew && (await deleteOption('Contact Email', option.name))
+                    if (_contact.value.email_id === option.value) {
+                      if (contact.data.email_ids.length === 0) {
+                        _contact.value.email_id = ''
+                      } else {
+                        _contact.value.email_id = contact.data.email_ids.find(
+                          (email) => email.is_primary,
+                        )?.email_id
+                      }
+                    }
+                  },
+                }
+              }) || [],
+            create: () => {
+              contact.data?.email_ids?.push({
+                name: 'new-1',
+                value: '',
+                selected: false,
+                isNew: true,
+              })
+            },
+          }
+        } else if (field.fieldname === 'mobile_no') {
+          return {
+            ...field,
+            read_only: false,
+            fieldtype: 'Dropdown',
+            options:
+              contact.data?.phone_nos?.map((phone) => {
+                return {
+                  name: phone.name,
+                  value: phone.phone,
+                  selected: phone.phone === contact.data.actual_mobile_no,
+                  onClick: () => {
+                    _contact.value.actual_mobile_no = phone.phone
+                    _contact.value.mobile_no = phone.phone
+                    setAsPrimary('mobile_no', phone.phone)
+                  },
+                  onSave: (option, isNew) => {
+                    if (isNew) {
+                      createNew('phone', option.value)
+                      if (contact.data.phone_nos.length === 1) {
+                        _contact.value.actual_mobile_no = option.value
+                      }
+                    } else {
+                      editOption(
+                        'Contact Phone',
+                        option.name,
+                        'phone',
+                        option.value,
+                      )
+                    }
+                  },
+                  onDelete: async (option, isNew) => {
+                    contact.data.phone_nos = contact.data.phone_nos.filter(
+                      (phone) => phone.name !== option.name,
+                    )
+                    !isNew && (await deleteOption('Contact Phone', option.name))
+                    if (_contact.value.actual_mobile_no === option.value) {
+                      if (contact.data.phone_nos.length === 0) {
+                        _contact.value.actual_mobile_no = ''
+                      } else {
+                        _contact.value.actual_mobile_no =
+                          contact.data.phone_nos.find(
+                            (phone) => phone.is_primary_mobile_no,
+                          )?.phone
+                      }
+                    }
+                  },
+                }
+              }) || [],
+            create: () => {
+              contact.data?.phone_nos?.push({
+                name: 'new-1',
+                value: '',
+                selected: false,
+                isNew: true,
+              })
+            },
+          }
+        } else if (field.fieldname === 'address') {
+          return {
+            ...field,
+            create: (value, close) => {
+              _contact.value.address = value
+              _address.value = {}
+              showAddressModal.value = true
+              close()
+            },
+            edit: async (addr) => {
+              _address.value = await call('frappe.client.get', {
+                doctype: 'Address',
+                name: addr,
+              })
+              showAddressModal.value = true
+            },
+          }
+        } else {
+          return field
+        }
+      })
+      return column
+    })
+    return section
   })
 }
 
-async function deleteLead(name) {
-  await call('frappe.client.delete', {
-    doctype: 'CRM Lead',
-    name,
+async function setAsPrimary(field, value) {
+  let d = await call('crm.api.contact.set_as_primary', {
+    contact: contact.data.name,
+    field,
+    value,
   })
-  router.push({ name: 'Leads' })
-}
-
-// Convert to Deal
-const showConvertToDealModal = ref(false)
-const existingContactChecked = ref(false)
-const existingOrganizationChecked = ref(false)
-
-const existingContact = ref('')
-const existingOrganization = ref('')
-
-async function convertToDeal() {
-  if (existingContactChecked.value && !existingContact.value) {
+  if (d) {
+    contact.reload()
     createToast({
-      title: __('Error'),
-      text: __('Please select an existing contact'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
+      title: 'Contact updated',
+      icon: 'check',
+      iconClasses: 'text-ink-green-3',
     })
-    return
   }
+}
 
-  if (existingOrganizationChecked.value && !existingOrganization.value) {
+async function createNew(field, value) {
+  if (!value) return
+  let d = await call('crm.api.contact.create_new', {
+    contact: contact.data.name,
+    field,
+    value,
+  })
+  if (d) {
+    contact.reload()
     createToast({
-      title: __('Error'),
-      text: __('Please select an existing organization'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
+      title: 'Contact updated',
+      icon: 'check',
+      iconClasses: 'text-ink-green-3',
     })
-    return
-  }
-
-  if (!existingContactChecked.value && existingContact.value) {
-    existingContact.value = ''
-  }
-
-  if (!existingOrganizationChecked.value && existingOrganization.value) {
-    existingOrganization.value = ''
   }
+}
 
-  let _deal = await call('crm.fcrm.doctype.crm_lead.crm_lead.convert_to_deal', {
-    lead: lead.data.name,
-    deal,
-    existing_contact: existingContact.value,
-    existing_organization: existingOrganization.value,
-  }).catch((err) => {
-    createToast({
-      title: __('Error converting to deal'),
-      text: __(err.messages?.[0]),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
+async function editOption(doctype, name, fieldname, value) {
+  let d = await call('frappe.client.set_value', {
+    doctype,
+    name,
+    fieldname,
+    value,
   })
-  if (_deal) {
-    showConvertToDealModal.value = false
-    existingContactChecked.value = false
-    existingOrganizationChecked.value = false
-    existingContact.value = ''
-    existingOrganization.value = ''
-    updateOnboardingStep('convert_lead_to_deal', true, false, () => {
-      localStorage.setItem('firstDeal', _deal)
+  if (d) {
+    contact.reload()
+    createToast({
+      title: 'Contact updated',
+      icon: 'check',
+      iconClasses: 'text-ink-green-3',
     })
-    capture('convert_lead_to_deal')
-    router.push({ name: 'Deal', params: { dealId: _deal } })
   }
 }
 
-const activities = ref(null)
-
-function openEmailBox() {
-  activities.value.emailBox.show = true
+async function deleteOption(doctype, name) {
+  await call('frappe.client.delete', {
+    doctype,
+    name,
+  })
+  await contact.reload()
+  createToast({
+    title: 'Contact updated',
+    icon: 'check',
+    iconClasses: 'text-ink-green-3',
+  })
 }
 
-const deal = reactive({})
+async function updateField(fieldname, value) {
+  await call('frappe.client.set_value', {
+    doctype: 'Contact',
+    name: props.contactId,
+    fieldname,
+    value,
+  })
+  createToast({
+    title: 'Contact updated',
+    icon: 'check',
+    iconClasses: 'text-ink-green-3',
+  })
 
-const dealStatuses = computed(() => {
-  let statuses = statusOptions('deal')
-  if (!deal.status) {
-    deal.status = statuses[0].value
-  }
-  return statuses
-})
+  contact.reload()
+}
 
-const dealTabs = createResource({
-  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
-  cache: ['RequiredFields', 'CRM Deal'],
-  params: { doctype: 'CRM Deal', type: 'Required Fields' },
-  auto: true,
-  transform: (_tabs) => {
-    let hasFields = false
-    let parsedTabs = _tabs.forEach((tab) => {
-      tab.sections.forEach((section) => {
-        section.columns.forEach((column) => {
-          column.fields.forEach((field) => {
-            hasFields = true
-            if (field.fieldname == 'status') {
-              field.fieldtype = 'Select'
-              field.options = dealStatuses.value
-              field.prefix = getDealStatus(deal.status).color
-            }
-
-            if (field.fieldtype === 'Table') {
-              deal[field.fieldname] = []
-            }
-          })
-        })
-      })
-    })
-    return hasFields ? parsedTabs : []
-  },
-})
+const { getFormattedCurrency } = getMeta('CRM Deal')
 
-const showQuickEntryModal = ref(false)
+const columns = computed(() => dealColumns)
 
-function openQuickEntryModal() {
-  showQuickEntryModal.value = true
-  showConvertToDealModal.value = false
+function getDealRowObject(deal) {
+  return {
+    name: deal.name,
+    organization: {
+      label: deal.organization,
+      logo: getOrganization(deal.organization)?.organization_logo,
+    },
+    annual_revenue: getFormattedCurrency('annual_revenue', deal),
+    status: {
+      label: deal.status,
+      color: getDealStatus(deal.status)?.color,
+    },
+    email: deal.email,
+    mobile_no: deal.mobile_no,
+    deal_owner: {
+      label: deal.deal_owner && getUser(deal.deal_owner).full_name,
+      ...(deal.deal_owner && getUser(deal.deal_owner)),
+    },
+    modified: {
+      label: formatDate(deal.modified),
+      timeAgo: __(timeAgo(deal.modified)),
+    },
+  }
 }
+
+const dealColumns = [
+  {
+    label: __('Organization'),
+    key: 'organization',
+    width: '11rem',
+  },
+  {
+    label: __('Amount'),
+    key: 'annual_revenue',
+    align: 'right',
+    width: '9rem',
+  },
+  {
+    label: __('Status'),
+    key: 'status',
+    width: '10rem',
+  },
+  {
+    label: __('Email'),
+    key: 'email',
+    width: '12rem',
+  },
+  {
+    label: __('Mobile no'),
+    key: 'mobile_no',
+    width: '11rem',
+  },
+  {
+    label: __('Deal owner'),
+    key: 'deal_owner',
+    width: '10rem',
+  },
+  {
+    label: __('Last modified'),
+    key: 'modified',
+    width: '8rem',
+  },
+]
 </script>
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 3956fb8e7..b2de02e63 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -1,17 +1,17 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <ViewBreadcrumbs v-model="viewControls" routeName="Leads" />
+      <ViewBreadcrumbs v-model="viewControls" routeName="Contacts" />
     </template>
     <template #right-header>
       <CustomActions
-        v-if="leadsListView?.customListActions"
-        :actions="leadsListView.customListActions"
+        v-if="contactsListView?.customListActions"
+        :actions="contactsListView.customListActions"
       />
       <Button
         variant="solid"
         :label="__('Create')"
-        @click="showLeadModal = true"
+        @click="showContactModal = true"
       >
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
@@ -19,229 +19,24 @@
   </LayoutHeader>
   <ViewControls
     ref="viewControls"
-    v-model="leads"
+    v-model="contacts"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
-    doctype="CRM Lead"
-    :filters="{ converted: 0 }"
-    :options="{
-      allowedViews: ['list', 'group_by', 'kanban'],
-    }"
+    doctype="Contact"
   />
-  <KanbanView
-    v-if="route.params.viewType == 'kanban'"
-    v-model="leads"
-    :options="{
-      getRoute: (row) => ({
-        name: 'Lead',
-        params: { leadId: row.name },
-        query: { view: route.query.view, viewType: route.params.viewType },
-      }),
-      onNewClick: (column) => onNewClick(column),
-    }"
-    @update="(data) => viewControls.updateKanbanSettings(data)"
-    @loadMore="(columnName) => viewControls.loadMoreKanban(columnName)"
-  >
-    <template #title="{ titleField, itemName }">
-      <div class="flex items-center gap-2">
-        <div v-if="titleField === 'status'">
-          <IndicatorIcon :class="getRow(itemName, titleField).color" />
-        </div>
-        <div
-          v-else-if="
-            titleField === 'organization' && getRow(itemName, titleField).label
-          "
-        >
-          <Avatar
-            class="flex items-center"
-            :image="getRow(itemName, titleField).logo"
-            :label="getRow(itemName, titleField).label"
-            size="sm"
-          />
-        </div>
-        <div
-          v-else-if="
-            titleField === 'lead_name' && getRow(itemName, titleField).label
-          "
-        >
-          <Avatar
-            class="flex items-center"
-            :image="getRow(itemName, titleField).image"
-            :label="getRow(itemName, titleField).image_label"
-            size="sm"
-          />
-        </div>
-        <div
-          v-else-if="
-            titleField === 'lead_owner' &&
-            getRow(itemName, titleField).full_name
-          "
-        >
-          <Avatar
-            class="flex items-center"
-            :image="getRow(itemName, titleField).user_image"
-            :label="getRow(itemName, titleField).full_name"
-            size="sm"
-          />
-        </div>
-        <div v-else-if="titleField === 'mobile_no'">
-          <PhoneIcon class="h-4 w-4" />
-        </div>
-        <div
-          v-if="
-            [
-              'modified',
-              'creation',
-              'first_response_time',
-              'first_responded_on',
-              'response_by',
-            ].includes(titleField)
-          "
-          class="truncate text-base"
-        >
-          <Tooltip :text="getRow(itemName, titleField).label">
-            <div>{{ getRow(itemName, titleField).timeAgo }}</div>
-          </Tooltip>
-        </div>
-        <div v-else-if="titleField === 'sla_status'" class="truncate text-base">
-          <Badge
-            v-if="getRow(itemName, titleField).value"
-            :variant="'subtle'"
-            :theme="getRow(itemName, titleField).color"
-            size="md"
-            :label="getRow(itemName, titleField).value"
-          />
-        </div>
-        <div
-          v-else-if="getRow(itemName, titleField).label"
-          class="truncate text-base"
-        >
-          {{ getRow(itemName, titleField).label }}
-        </div>
-        <div class="text-ink-gray-4" v-else>{{ __('No Title') }}</div>
-      </div>
-    </template>
-    <template #fields="{ fieldName, itemName }">
-      <div
-        v-if="getRow(itemName, fieldName).label"
-        class="truncate flex items-center gap-2"
-      >
-        <div v-if="fieldName === 'status'">
-          <IndicatorIcon :class="getRow(itemName, fieldName).color" />
-        </div>
-        <div
-          v-else-if="
-            fieldName === 'organization' && getRow(itemName, fieldName).label
-          "
-        >
-          <Avatar
-            class="flex items-center"
-            :image="getRow(itemName, fieldName).logo"
-            :label="getRow(itemName, fieldName).label"
-            size="xs"
-          />
-        </div>
-        <div v-else-if="fieldName === 'lead_name'">
-          <Avatar
-            v-if="getRow(itemName, fieldName).label"
-            class="flex items-center"
-            :image="getRow(itemName, fieldName).image"
-            :label="getRow(itemName, fieldName).image_label"
-            size="xs"
-          />
-        </div>
-        <div v-else-if="fieldName === 'lead_owner'">
-          <Avatar
-            v-if="getRow(itemName, fieldName).full_name"
-            class="flex items-center"
-            :image="getRow(itemName, fieldName).user_image"
-            :label="getRow(itemName, fieldName).full_name"
-            size="xs"
-          />
-        </div>
-        <div
-          v-if="
-            [
-              'modified',
-              'creation',
-              'first_response_time',
-              'first_responded_on',
-              'response_by',
-            ].includes(fieldName)
-          "
-          class="truncate text-base"
-        >
-          <Tooltip :text="getRow(itemName, fieldName).label">
-            <div>{{ getRow(itemName, fieldName).timeAgo }}</div>
-          </Tooltip>
-        </div>
-        <div v-else-if="fieldName === 'sla_status'" class="truncate text-base">
-          <Badge
-            v-if="getRow(itemName, fieldName).value"
-            :variant="'subtle'"
-            :theme="getRow(itemName, fieldName).color"
-            size="md"
-            :label="getRow(itemName, fieldName).value"
-          />
-        </div>
-        <div v-else-if="fieldName === '_assign'" class="flex items-center">
-          <MultipleAvatar
-            :avatars="getRow(itemName, fieldName).label"
-            size="xs"
-          />
-        </div>
-        <div v-else class="truncate text-base">
-          {{ getRow(itemName, fieldName).label }}
-        </div>
-      </div>
-    </template>
-    <template #actions="{ itemName }">
-      <div class="flex gap-2 items-center justify-between">
-        <div class="text-ink-gray-5 flex items-center gap-1.5">
-          <EmailAtIcon class="h-4 w-4" />
-          <span v-if="getRow(itemName, '_email_count').label">
-            {{ getRow(itemName, '_email_count').label }}
-          </span>
-          <span class="text-3xl leading-[0]"> &middot; </span>
-          <NoteIcon class="h-4 w-4" />
-          <span v-if="getRow(itemName, '_note_count').label">
-            {{ getRow(itemName, '_note_count').label }}
-          </span>
-          <span class="text-3xl leading-[0]"> &middot; </span>
-          <TaskIcon class="h-4 w-4" />
-          <span v-if="getRow(itemName, '_task_count').label">
-            {{ getRow(itemName, '_task_count').label }}
-          </span>
-          <span class="text-3xl leading-[0]"> &middot; </span>
-          <CommentIcon class="h-4 w-4" />
-          <span v-if="getRow(itemName, '_comment_count').label">
-            {{ getRow(itemName, '_comment_count').label }}
-          </span>
-        </div>
-        <Dropdown
-          class="flex items-center gap-2"
-          :options="actions(itemName)"
-          variant="ghost"
-          @click.stop.prevent
-        >
-          <Button icon="plus" variant="ghost" />
-        </Dropdown>
-      </div>
-    </template>
-  </KanbanView>
-  <LeadsListView
-    ref="leadsListView"
-    v-else-if="leads.data && rows.length"
-    v-model="leads.data.page_length_count"
-    v-model:list="leads"
+  <ContactsListView
+    ref="contactsListView"
+    v-if="contacts.data && rows.length"
+    v-model="contacts.data.page_length_count"
+    v-model:list="contacts"
     :rows="rows"
-    :columns="leads.data.columns"
+    :columns="contacts.data.columns"
     :options="{
       showTooltip: false,
       resizeColumn: true,
-      rowCount: leads.data.row_count,
-      totalCount: leads.data.total_count,
+      rowCount: contacts.data.row_count,
+      totalCount: contacts.data.total_count,
     }"
     @loadMore="() => loadMore++"
     @columnWidthUpdated="() => triggerResize++"
@@ -250,329 +45,133 @@
     @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
     @likeDoc="(data) => viewControls.likeDoc(data)"
   />
-  <div v-else-if="leads.data" class="flex h-full items-center justify-center">
+  <div
+    v-else-if="contacts.data"
+    class="flex h-full items-center justify-center"
+  >
     <div
       class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
-      <LeadsIcon class="h-10 w-10" />
-      <span>{{ __('No {0} Found', [__('Leads')]) }}</span>
-      <Button :label="__('Create')" @click="showLeadModal = true">
+      <ContactsIcon class="h-10 w-10" />
+      <span>{{ __('No {0} Found', [__('Contacts')]) }}</span>
+      <Button :label="__('Create')" @click="showContactModal = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </div>
   </div>
-  <LeadModal
-    v-if="showLeadModal"
-    v-model="showLeadModal"
-    v-model:quickEntry="showQuickEntryModal"
-    :defaults="defaults"
-  />
-  <NoteModal
-    v-if="showNoteModal"
-    v-model="showNoteModal"
-    :note="note"
-    doctype="CRM Lead"
-    :doc="docname"
+  <ContactModal
+    v-model="showContactModal"
+    v-model:showQuickEntryModal="showQuickEntryModal"
+    :contact="{}"
+    @openAddressModal="(_address) => openAddressModal(_address)"
   />
-  <TaskModal
-    v-if="showTaskModal"
-    v-model="showTaskModal"
-    :task="task"
-    doctype="CRM Lead"
-    :doc="docname"
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="Contact"
   />
-  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
+  <AddressModal v-model="showAddressModal" v-model:address="address" />
 </template>
 
 <script setup>
 import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
-import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import CustomActions from '@/components/CustomActions.vue'
-import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
-import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import NoteIcon from '@/components/Icons/NoteIcon.vue'
-import TaskIcon from '@/components/Icons/TaskIcon.vue'
-import CommentIcon from '@/components/Icons/CommentIcon.vue'
-import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import LeadsListView from '@/components/ListViews/LeadsListView.vue'
-import KanbanView from '@/components/Kanban/KanbanView.vue'
-import LeadModal from '@/components/Modals/LeadModal.vue'
-import NoteModal from '@/components/Modals/NoteModal.vue'
-import TaskModal from '@/components/Modals/TaskModal.vue'
+import ContactModal from '@/components/Modals/ContactModal.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
+import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
-import { globalStore } from '@/stores/global'
-import { usersStore } from '@/stores/users'
-import { statusesStore } from '@/stores/statuses'
-import { callEnabled } from '@/composables/settings'
-import { formatDate, timeAgo, website, formatTime } from '@/utils'
-import { Avatar, Tooltip, Dropdown } from 'frappe-ui'
-import { useRoute } from 'vue-router'
-import { ref, computed, reactive, h } from 'vue'
+import { organizationsStore } from '@/stores/organizations.js'
+import { formatDate, timeAgo } from '@/utils'
+import { call } from 'frappe-ui'
+import { ref, computed } from 'vue'
 
 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
-  getMeta('CRM Lead')
-const { makeCall } = globalStore()
-const { getUser } = usersStore()
-const { getLeadStatus } = statusesStore()
+  getMeta('Contact')
+const { getOrganization } = organizationsStore()
 
-const route = useRoute()
-
-const leadsListView = ref(null)
-const showLeadModal = ref(false)
+const showContactModal = ref(false)
 const showQuickEntryModal = ref(false)
+const showAddressModal = ref(false)
 
-const defaults = reactive({})
+const contactsListView = ref(null)
 
-// leads data is loaded in the ViewControls component
-const leads = ref({})
+// contacts data is loaded in the ViewControls component
+const contacts = ref({})
+const address = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
 const viewControls = ref(null)
 
-function getRow(name, field) {
-  function getValue(value) {
-    if (value && typeof value === 'object' && !Array.isArray(value)) {
-      return value
-    }
-    return { label: value }
-  }
-  return getValue(rows.value?.find((row) => row.name == name)[field])
-}
-
-// Rows
 const rows = computed(() => {
-  if (!leads.value?.data?.data) return []
-  if (leads.value.data.view_type === 'group_by') {
-    if (!leads.value?.data.group_by_field?.fieldname) return []
-    return getGroupedByRows(
-      leads.value?.data.data,
-      leads.value?.data.group_by_field,
-      leads.value.data.columns,
-    )
-  } else if (leads.value.data.view_type === 'kanban') {
-    return getKanbanRows(leads.value.data.data, leads.value.data.fields)
-  } else {
-    return parseRows(leads.value?.data.data, leads.value.data.columns)
-  }
-})
-
-function getGroupedByRows(listRows, groupByField, columns) {
-  let groupedRows = []
-
-  groupByField.options?.forEach((option) => {
-    let filteredRows = []
-
-    if (!option) {
-      filteredRows = listRows.filter((row) => !row[groupByField.fieldname])
-    } else {
-      filteredRows = listRows.filter(
-        (row) => row[groupByField.fieldname] == option,
-      )
-    }
-
-    let groupDetail = {
-      label: groupByField.label,
-      group: option || __(' '),
-      collapsed: false,
-      rows: parseRows(filteredRows, columns),
-    }
-    if (groupByField.fieldname == 'status') {
-      groupDetail.icon = () =>
-        h(IndicatorIcon, {
-          class: getLeadStatus(option)?.color,
-        })
-    }
-    groupedRows.push(groupDetail)
-  })
-
-  return groupedRows || listRows
-}
-
-function getKanbanRows(data, columns) {
-  let _rows = []
-  data.forEach((column) => {
-    column.data?.forEach((row) => {
-      _rows.push(row)
-    })
-  })
-  return parseRows(_rows, columns)
-}
-
-function parseRows(rows, columns = []) {
-  let view_type = leads.value.data.view_type
-  let key = view_type === 'kanban' ? 'fieldname' : 'key'
-  let type = view_type === 'kanban' ? 'fieldtype' : 'type'
-
-  return rows.map((lead) => {
+  if (
+    !contacts.value?.data?.data ||
+    !['list', 'group_by'].includes(contacts.value.data.view_type)
+  )
+    return []
+  return contacts.value?.data.data.map((contact) => {
     let _rows = {}
-    leads.value?.data.rows.forEach((row) => {
-      _rows[row] = lead[row]
+    contacts.value?.data.rows.forEach((row) => {
+      _rows[row] = contact[row]
 
-      let fieldType = columns?.find((col) => (col[key] || col.value) == row)?.[
-        type
-      ]
+      let fieldType = contacts.value?.data.columns?.find(
+        (col) => (col.key || col.value) == row,
+      )?.type
 
       if (
         fieldType &&
         ['Date', 'Datetime'].includes(fieldType) &&
         !['modified', 'creation'].includes(row)
       ) {
-        _rows[row] = formatDate(lead[row], '', true, fieldType == 'Datetime')
+        _rows[row] = formatDate(contact[row], '', true, fieldType == 'Datetime')
       }
 
       if (fieldType && fieldType == 'Currency') {
-        _rows[row] = getFormattedCurrency(row, lead)
+        _rows[row] = getFormattedCurrency(row, contact)
       }
 
       if (fieldType && fieldType == 'Float') {
-        _rows[row] = getFormattedFloat(row, lead)
+        _rows[row] = getFormattedFloat(row, contact)
       }
 
       if (fieldType && fieldType == 'Percent') {
-        _rows[row] = getFormattedPercent(row, lead)
+        _rows[row] = getFormattedPercent(row, contact)
       }
 
-      if (row == 'lead_name') {
-        _rows[row] = {
-          label: lead.lead_name,
-          image: lead.image,
-          image_label: lead.first_name,
-        }
-      } else if (row == 'organization') {
-        _rows[row] = lead.organization
-      } else if (row === 'website') {
-        _rows[row] = website(lead.website)
-      } else if (row == 'status') {
-        _rows[row] = {
-          label: lead.status,
-          color: getLeadStatus(lead.status)?.color,
-        }
-      } else if (row == 'sla_status') {
-        let value = lead.sla_status
-        let tooltipText = value
-        let color =
-          lead.sla_status == 'Failed'
-            ? 'red'
-            : lead.sla_status == 'Fulfilled'
-              ? 'green'
-              : 'orange'
-        if (value == 'First Response Due') {
-          value = __(timeAgo(lead.response_by))
-          tooltipText = formatDate(lead.response_by)
-          if (new Date(lead.response_by) < new Date()) {
-            color = 'red'
-          }
-        }
+      if (row == 'full_name') {
         _rows[row] = {
-          label: tooltipText,
-          value: value,
-          color: color,
+          label: contact.full_name,
+          image_label: contact.full_name,
+          image: contact.image,
         }
-      } else if (row == 'lead_owner') {
+      } else if (row == 'company_name') {
         _rows[row] = {
-          label: lead.lead_owner && getUser(lead.lead_owner).full_name,
-          ...(lead.lead_owner && getUser(lead.lead_owner)),
+          label: contact.company_name,
+          logo: getOrganization(contact.company_name)?.organization_logo,
         }
-      } else if (row == '_assign') {
-        let assignees = JSON.parse(lead._assign || '[]')
-        _rows[row] = assignees.map((user) => ({
-          name: user,
-          image: getUser(user).user_image,
-          label: getUser(user).full_name,
-        }))
       } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: formatDate(lead[row]),
-          timeAgo: __(timeAgo(lead[row])),
-        }
-      } else if (
-        ['first_response_time', 'first_responded_on', 'response_by'].includes(
-          row,
-        )
-      ) {
-        let field = row == 'response_by' ? 'response_by' : 'first_responded_on'
-        _rows[row] = {
-          label: lead[field] ? formatDate(lead[field]) : '',
-          timeAgo: lead[row]
-            ? row == 'first_response_time'
-              ? formatTime(lead[row])
-              : __(timeAgo(lead[row]))
-            : '',
+          label: formatDate(contact[row]),
+          timeAgo: __(timeAgo(contact[row])),
         }
       }
     })
-    _rows['_email_count'] = lead._email_count
-    _rows['_note_count'] = lead._note_count
-    _rows['_task_count'] = lead._task_count
-    _rows['_comment_count'] = lead._comment_count
     return _rows
   })
-}
-
-function onNewClick(column) {
-  let column_field = leads.value.params.column_field
-
-  if (column_field) {
-    defaults[column_field] = column.column.name
-  }
-
-  showLeadModal.value = true
-}
-
-function actions(itemName) {
-  let mobile_no = getRow(itemName, 'mobile_no')?.label || ''
-  let actions = [
-    {
-      icon: h(PhoneIcon, { class: 'h-4 w-4' }),
-      label: __('Make a Call'),
-      onClick: () => makeCall(mobile_no),
-      condition: () => mobile_no && callEnabled.value,
-    },
-    {
-      icon: h(NoteIcon, { class: 'h-4 w-4' }),
-      label: __('New Note'),
-      onClick: () => showNote(itemName),
-    },
-    {
-      icon: h(TaskIcon, { class: 'h-4 w-4' }),
-      label: __('New Task'),
-      onClick: () => showTask(itemName),
-    },
-  ]
-  return actions.filter((action) =>
-    action.condition ? action.condition() : true,
-  )
-}
-
-const docname = ref('')
-const showNoteModal = ref(false)
-const note = ref({
-  title: '',
-  content: '',
 })
 
-function showNote(name) {
-  docname.value = name
-  showNoteModal.value = true
-}
-
-const showTaskModal = ref(false)
-const task = ref({
-  title: '',
-  description: '',
-  assigned_to: '',
-  due_date: '',
-  priority: 'Low',
-  status: 'Backlog',
-})
-
-function showTask(name) {
-  docname.value = name
-  showTaskModal.value = true
+async function openAddressModal(_address) {
+  if (_address) {
+    _address = await call('frappe.client.get', {
+      doctype: 'Address',
+      name: _address,
+    })
+  }
+  showAddressModal.value = true
+  address.value = _address || {}
 }
 </script>
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 728ebc161..adb0ca092 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -106,7 +106,7 @@
     <Tabs as="div" v-model="tabIndex" :tabs="tabs" class="overflow-auto">
       <TabList class="!px-4" v-slot="{ tab, selected }">
         <button
-          v-if="tab.name == 'Deals'"
+          v-if="tab.name == 'Bookings'"
           class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
           :class="{ 'text-ink-gray-9': selected }"
         >
@@ -139,14 +139,14 @@
           </div>
         </div>
         <DealsListView
-          v-else-if="tab.label === 'Deals' && rows.length"
+          v-else-if="tab.label === 'Bookings' && rows.length"
           class="mt-4"
           :rows="rows"
           :columns="columns"
           :options="{ selectable: false, showTooltip: false }"
         />
         <div
-          v-if="tab.label === 'Deals' && !rows.length"
+          v-if="tab.label === 'Bookings' && !rows.length"
           class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
         >
           <div class="flex flex-col items-center justify-center space-y-3">
@@ -316,8 +316,8 @@ const tabs = [
     icon: DetailsIcon,
   },
   {
-    name: 'Deals',
-    label: __('Deals'),
+    name: 'Bookings',
+    label: __('Bookings'),
     icon: h(DealsIcon, { class: 'h-4 w-4' }),
     count: computed(() => deals.data?.length),
   },
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index c41ee3413..45bef1ff0 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -392,7 +392,7 @@ function validateRequired(fieldname, value) {
 }
 
 const breadcrumbs = computed(() => {
-  let items = [{ label: __('Deals'), route: { name: 'Deals' } }]
+  let items = [{ label: __('Bookings'), route: { name: 'Bookings' } }]
 
   if (route.query.view || route.query.viewType) {
     let view = getView(route.query.view, route.query.viewType, 'CRM Deal')
@@ -401,7 +401,7 @@ const breadcrumbs = computed(() => {
         label: __(view.label),
         icon: view.icon,
         route: {
-          name: 'Deals',
+          name: 'Bookings',
           params: { viewType: route.query.viewType },
           query: { view: route.query.view },
         },
@@ -630,6 +630,6 @@ async function deleteDeal(name) {
     doctype: 'CRM Deal',
     name,
   })
-  router.push({ name: 'Deals' })
+  router.push({ name: 'Bookings' })
 }
 </script>
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index 4e304d53c..98935beaf 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -295,7 +295,7 @@ function validateRequired(fieldname, value) {
 }
 
 const breadcrumbs = computed(() => {
-  let items = [{ label: __('Leads'), route: { name: 'Leads' } }]
+  let items = [{ label: __('Patients'), route: { name: 'Patients' } }]
 
   if (route.query.view || route.query.viewType) {
     let view = getView(route.query.view, route.query.viewType, 'CRM Lead')
@@ -304,7 +304,7 @@ const breadcrumbs = computed(() => {
         label: __(view.label),
         icon: view.icon,
         route: {
-          name: 'Leads',
+          name: 'Patients',
           params: { viewType: route.query.viewType },
           query: { view: route.query.view },
         },
@@ -421,7 +421,7 @@ async function deleteLead(name) {
     doctype: 'CRM Lead',
     name,
   })
-  router.push({ name: 'Leads' })
+  router.push({ name: 'Patients' })
 }
 
 // Convert to Deal
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index ba91553b5..245721089 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -122,7 +122,7 @@
         </div>
         <DealsListView
           class="mt-4"
-          v-if="tab.label === 'Deals' && rows.length"
+          v-if="tab.label === 'Bookings' && rows.length"
           :rows="rows"
           :columns="columns"
           :options="{ selectable: false, showTooltip: false }"
@@ -363,8 +363,8 @@ const tabs = [
     icon: DetailsIcon,
   },
   {
-    name: 'Deals',
-    label: __('Deals'),
+    name: 'Bookings',
+    label: __('Bookings'),
     icon: h(DealsIcon, { class: 'h-4 w-4' }),
     count: computed(() => deals.data?.length),
   },
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index bd0e9c497..b6ad27cc1 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -136,7 +136,7 @@
       <template #tab-panel="{ tab }">
         <DealsListView
           class="mt-4"
-          v-if="tab.label === 'Deals' && rows.length"
+          v-if="tab.label === 'Bookings' && rows.length"
           :rows="rows"
           :columns="columns"
           :options="{ selectable: false, showTooltip: false }"
@@ -400,7 +400,7 @@ function getParsedSections(_sections) {
 const tabIndex = ref(0)
 const tabs = [
   {
-    label: 'Deals',
+    label: 'Bookings',
     icon: h(DealsIcon, { class: 'h-4 w-4' }),
     count: computed(() => deals.data?.length),
   },
diff --git a/frontend/src/pages/Report.vue b/frontend/src/pages/Report.vue
new file mode 100644
index 000000000..b7407d4d6
--- /dev/null
+++ b/frontend/src/pages/Report.vue
@@ -0,0 +1,365 @@
+<template>
+  <LayoutHeader v-if="contact.data">
+    <template #left-header>
+      <Breadcrumbs :items="breadcrumbs">
+        <template #prefix="{ item }">
+          <Icon v-if="item.icon" :icon="item.icon" class="mr-2 h-4" />
+        </template>
+      </Breadcrumbs>
+    </template>
+  </LayoutHeader>
+  <div v-if="contact.data" ref="parentRef" class="flex h-full">
+    <Resizer
+      v-if="contact.data"
+      :parent="$refs.parentRef"
+      class="flex h-full flex-col overflow-hidden border-r"
+    >
+      <div class="border-b">
+        <FileUploader
+          @success="changeContactImage"
+          :validateFile="validateFile"
+        >
+          <template #default="{ openFileSelector, error }">
+            <div class="flex flex-col items-start justify-start gap-4 p-5">
+              <div class="flex gap-4 items-center">
+                <div class="group relative h-15.5 w-15.5">
+                  <Avatar
+                    size="3xl"
+                    class="h-15.5 w-15.5"
+                    :label="contact.data.full_name"
+                    :image="contact.data.image"
+                  />
+                  <component
+                    :is="contact.data.image ? Dropdown : 'div'"
+                    v-bind="
+                      contact.data.image
+                        ? {
+                            options: [
+                              {
+                                icon: 'upload',
+                                label: contact.data.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-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(22px 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 text-ink-gray-9">
+                  <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-ink-gray-8"
+                  >
+                    <Avatar
+                      size="xs"
+                      :label="contact.data.company_name"
+                      :image="
+                        getOrganization(contact.data.company_name)
+                          ?.organization_logo
+                      "
+                    />
+                    <span class="">{{ contact.data.company_name }}</span>
+                  </div>
+                  <ErrorMessage :message="__(error)" />
+                </div>
+              </div>
+              <div class="flex gap-1.5">
+                <Button
+                  v-if="contact.data.actual_mobile_no"
+                  :label="__('Make Call')"
+                  size="sm"
+                  @click="
+                    callEnabled && makeCall(contact.data.actual_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>
+            </div>
+          </template>
+        </FileUploader>
+      </div>
+      <div
+        v-if="sections.data"
+        class="flex flex-1 flex-col justify-between overflow-hidden"
+      >
+        <SidePanelLayout
+          v-model="contact.data"
+          :sections="sections.data"
+          doctype="Contact"
+          @update="updateField"
+          @reload="sections.reload"
+        />
+      </div>
+    </Resizer>
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <template #tab-item="{ tab, selected }">
+        <button
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
+          :class="{ 'text-ink-gray-9': selected }"
+        >
+          <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+          {{ __(tab.label) }}
+          <Badge
+            class="group-hover:bg-surface-gray-7"
+            :class="[selected ? 'bg-surface-gray-7' : 'bg-gray-600']"
+            variant="solid"
+            theme="gray"
+            size="sm"
+          >
+            {{ tab.count }}
+          </Badge>
+        </button>
+      </template>
+      <template #tab-panel="{ tab }">
+        <div
+          v-if="!rows.length"
+          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
+        >
+          <div class="flex flex-col items-center justify-center space-y-3">
+            <component :is="tab.icon" class="!h-10 !w-10" />
+            <div>{{ __('No {0} Found', [__(tab.label)]) }}</div>
+          </div>
+        </div>
+      </template>
+    </Tabs>
+  </div>
+  <ErrorPage v-else :errorTitle="errorTitle" :errorMessage="errorMessage" />
+  <AddressModal v-model="showAddressModal" v-model:address="_address" />
+</template>
+
+<script setup>
+import ErrorPage from '@/components/ErrorPage.vue'
+import Resizer from '@/components/Resizer.vue'
+import Icon from '@/components/Icon.vue'
+import SidePanelLayout from '@/components/SidePanelLayout.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import CameraIcon from '@/components/Icons/CameraIcon.vue'
+import DealsListView from '@/components/ListViews/DealsListView.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
+import { formatDate, timeAgo, createToast } from '@/utils'
+import { getView } from '@/utils/view'
+import { getSettings } from '@/stores/settings'
+import { getMeta } from '@/stores/meta'
+import { globalStore } from '@/stores/global.js'
+import { usersStore } from '@/stores/users.js'
+import { organizationsStore } from '@/stores/organizations.js'
+import { statusesStore } from '@/stores/statuses'
+import { callEnabled } from '@/composables/settings'
+import {
+  Breadcrumbs,
+  Avatar,
+  FileUploader,
+  Tabs,
+  call,
+  createResource,
+  usePageMeta,
+  Dropdown,
+} from 'frappe-ui'
+import { ref, computed, h } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { errorMessage as _errorMessage } from '../utils'
+
+const { brand } = getSettings()
+const { $dialog, makeCall } = globalStore()
+
+const { getUser } = usersStore()
+const { getOrganization } = organizationsStore()
+const { getDealStatus } = statusesStore()
+const { doctypeMeta } = getMeta('Contact')
+
+const props = defineProps({
+  contactId: {
+    type: String,
+    required: true,
+  },
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const showAddressModal = ref(false)
+const _address = ref({})
+
+const errorTitle = ref('')
+const errorMessage = ref('')
+
+const contact = createResource({
+  url: 'crm.api.contact.get_contact',
+  cache: ['contact', props.contactId],
+  params: { contactId: props.contactId },
+  auto: true,
+  transform: (data) => {
+    return {
+      ...data,
+      actual_mobile_no: data.mobile_no,
+      mobile_no: data.mobile_no,
+    }
+  },
+  onSuccess: () => {
+    errorTitle.value = ''
+    errorMessage.value = ''
+  },
+  onError: (err) => {
+    if (err.messages?.[0]) {
+      errorTitle.value = __('Not permitted')
+      errorMessage.value = __(err.messages?.[0])
+    } else {
+      router.push({ name: 'Contacts' })
+    }
+  },
+})
+
+const breadcrumbs = computed(() => {
+  let items = [{ label: __('Contacts'), route: { name: 'Contacts' } }]
+
+  if (route.query.view || route.query.viewType) {
+    let view = getView(route.query.view, route.query.viewType, 'Contact')
+    if (view) {
+      items.push({
+        label: __(view.label),
+        icon: view.icon,
+        route: {
+          name: 'Contacts',
+          params: { viewType: route.query.viewType },
+          query: { view: route.query.view },
+        },
+      })
+    }
+  }
+
+  items.push({
+    label: title.value,
+    route: { name: 'Contact', params: { contactId: props.contactId } },
+  })
+  return items
+})
+
+
+
+const tabIndex = ref(0)
+
+
+
+async function updateField(fieldname, value) {
+  await call('frappe.client.set_value', {
+    doctype: 'Contact',
+    name: props.contactId,
+    fieldname,
+    value,
+  })
+  createToast({
+    title: 'Contact updated',
+    icon: 'check',
+    iconClasses: 'text-ink-green-3',
+  })
+
+  contact.reload()
+}
+
+const { getFormattedCurrency } = getMeta('CRM Deal')
+
+const columns = computed(() => dealColumns)
+
+function getDealRowObject(deal) {
+  return {
+    name: deal.name,
+    organization: {
+      label: deal.organization,
+      logo: getOrganization(deal.organization)?.organization_logo,
+    },
+    annual_revenue: getFormattedCurrency('annual_revenue', deal),
+    status: {
+      label: deal.status,
+      color: getDealStatus(deal.status)?.color,
+    },
+    email: deal.email,
+    mobile_no: deal.mobile_no,
+    deal_owner: {
+      label: deal.deal_owner && getUser(deal.deal_owner).full_name,
+      ...(deal.deal_owner && getUser(deal.deal_owner)),
+    },
+    modified: {
+      label: formatDate(deal.modified),
+      timeAgo: __(timeAgo(deal.modified)),
+    },
+  }
+}
+
+const dealColumns = [
+  {
+    label: __('Organization'),
+    key: 'organization',
+    width: '11rem',
+  },
+  {
+    label: __('Amount'),
+    key: 'annual_revenue',
+    align: 'right',
+    width: '9rem',
+  },
+  {
+    label: __('Status'),
+    key: 'status',
+    width: '10rem',
+  },
+  {
+    label: __('Email'),
+    key: 'email',
+    width: '12rem',
+  },
+  {
+    label: __('Mobile no'),
+    key: 'mobile_no',
+    width: '11rem',
+  },
+  {
+    label: __('Deal owner'),
+    key: 'deal_owner',
+    width: '10rem',
+  },
+  {
+    label: __('Last modified'),
+    key: 'modified',
+    width: '8rem',
+  },
+]
+</script>
diff --git a/frontend/src/pages/Reports.vue b/frontend/src/pages/Reports.vue
new file mode 100644
index 000000000..b2de02e63
--- /dev/null
+++ b/frontend/src/pages/Reports.vue
@@ -0,0 +1,177 @@
+<template>
+  <LayoutHeader>
+    <template #left-header>
+      <ViewBreadcrumbs v-model="viewControls" routeName="Contacts" />
+    </template>
+    <template #right-header>
+      <CustomActions
+        v-if="contactsListView?.customListActions"
+        :actions="contactsListView.customListActions"
+      />
+      <Button
+        variant="solid"
+        :label="__('Create')"
+        @click="showContactModal = true"
+      >
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </template>
+  </LayoutHeader>
+  <ViewControls
+    ref="viewControls"
+    v-model="contacts"
+    v-model:loadMore="loadMore"
+    v-model:resizeColumn="triggerResize"
+    v-model:updatedPageCount="updatedPageCount"
+    doctype="Contact"
+  />
+  <ContactsListView
+    ref="contactsListView"
+    v-if="contacts.data && rows.length"
+    v-model="contacts.data.page_length_count"
+    v-model:list="contacts"
+    :rows="rows"
+    :columns="contacts.data.columns"
+    :options="{
+      showTooltip: false,
+      resizeColumn: true,
+      rowCount: contacts.data.row_count,
+      totalCount: contacts.data.total_count,
+    }"
+    @loadMore="() => loadMore++"
+    @columnWidthUpdated="() => triggerResize++"
+    @updatePageCount="(count) => (updatedPageCount = count)"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
+    @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
+    @likeDoc="(data) => viewControls.likeDoc(data)"
+  />
+  <div
+    v-else-if="contacts.data"
+    class="flex h-full items-center justify-center"
+  >
+    <div
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
+    >
+      <ContactsIcon class="h-10 w-10" />
+      <span>{{ __('No {0} Found', [__('Contacts')]) }}</span>
+      <Button :label="__('Create')" @click="showContactModal = true">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </div>
+  </div>
+  <ContactModal
+    v-model="showContactModal"
+    v-model:showQuickEntryModal="showQuickEntryModal"
+    :contact="{}"
+    @openAddressModal="(_address) => openAddressModal(_address)"
+  />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="Contact"
+  />
+  <AddressModal v-model="showAddressModal" v-model:address="address" />
+</template>
+
+<script setup>
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
+import CustomActions from '@/components/CustomActions.vue'
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import ContactModal from '@/components/Modals/ContactModal.vue'
+import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
+import ContactsListView from '@/components/ListViews/ContactsListView.vue'
+import ViewControls from '@/components/ViewControls.vue'
+import { getMeta } from '@/stores/meta'
+import { organizationsStore } from '@/stores/organizations.js'
+import { formatDate, timeAgo } from '@/utils'
+import { call } from 'frappe-ui'
+import { ref, computed } from 'vue'
+
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('Contact')
+const { getOrganization } = organizationsStore()
+
+const showContactModal = ref(false)
+const showQuickEntryModal = ref(false)
+const showAddressModal = ref(false)
+
+const contactsListView = ref(null)
+
+// contacts data is loaded in the ViewControls component
+const contacts = ref({})
+const address = ref({})
+const loadMore = ref(1)
+const triggerResize = ref(1)
+const updatedPageCount = ref(20)
+const viewControls = ref(null)
+
+const rows = computed(() => {
+  if (
+    !contacts.value?.data?.data ||
+    !['list', 'group_by'].includes(contacts.value.data.view_type)
+  )
+    return []
+  return contacts.value?.data.data.map((contact) => {
+    let _rows = {}
+    contacts.value?.data.rows.forEach((row) => {
+      _rows[row] = contact[row]
+
+      let fieldType = contacts.value?.data.columns?.find(
+        (col) => (col.key || col.value) == row,
+      )?.type
+
+      if (
+        fieldType &&
+        ['Date', 'Datetime'].includes(fieldType) &&
+        !['modified', 'creation'].includes(row)
+      ) {
+        _rows[row] = formatDate(contact[row], '', true, fieldType == 'Datetime')
+      }
+
+      if (fieldType && fieldType == 'Currency') {
+        _rows[row] = getFormattedCurrency(row, contact)
+      }
+
+      if (fieldType && fieldType == 'Float') {
+        _rows[row] = getFormattedFloat(row, contact)
+      }
+
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, contact)
+      }
+
+      if (row == 'full_name') {
+        _rows[row] = {
+          label: contact.full_name,
+          image_label: contact.full_name,
+          image: contact.image,
+        }
+      } else if (row == 'company_name') {
+        _rows[row] = {
+          label: contact.company_name,
+          logo: getOrganization(contact.company_name)?.organization_logo,
+        }
+      } else if (['modified', 'creation'].includes(row)) {
+        _rows[row] = {
+          label: formatDate(contact[row]),
+          timeAgo: __(timeAgo(contact[row])),
+        }
+      }
+    })
+    return _rows
+  })
+})
+
+async function openAddressModal(_address) {
+  if (_address) {
+    _address = await call('frappe.client.get', {
+      doctype: 'Address',
+      name: _address,
+    })
+  }
+  showAddressModal.value = true
+  address.value = _address || {}
+}
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index e5665630b..ba968f3d6 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -14,25 +14,25 @@ const routes = [
     component: () => import('@/pages/MobileNotification.vue'),
   },
   {
-    alias: '/leads',
-    path: '/leads/view/:viewType?',
-    name: 'Leads',
+    alias: '/patients',
+    path: '/patients/view/:viewType?',
+    name: 'Patients',
     component: () => import('@/pages/Leads.vue'),
   },
   {
-    path: '/leads/:leadId',
+    path: '/patients/:leadId',
     name: 'Lead',
     component: () => import(`@/pages/${handleMobileView('Lead')}.vue`),
     props: true,
   },
   {
-    alias: '/deals',
-    path: '/deals/view/:viewType?',
-    name: 'Deals',
+    alias: '/bookings',
+    path: '/bookings/view/:viewType?',
+    name: 'Bookings',
     component: () => import('@/pages/Deals.vue'),
   },
   {
-    path: '/deals/:dealId',
+    path: '/bookings/:dealId',
     name: 'Deal',
     component: () => import(`@/pages/${handleMobileView('Deal')}.vue`),
     props: true,
@@ -96,6 +96,18 @@ const routes = [
     name: 'Welcome',
     component: () => import('@/pages/Welcome.vue'),
   },
+  {
+    path: '/reports/view/:viewType?',
+    name: 'Reports',
+    component: () => import('@/pages/Reports.vue'),
+  },
+  // {
+  //   path: '/reports/:reportName',
+  //   name: 'Report',
+  //   component: () => import(`@/pages/${handleMobileView('Report')}.vue`),
+  //   props: true,
+  // },
+  
   {
     path: '/:invalidpath',
     name: 'Invalid Page',
@@ -123,12 +135,12 @@ router.beforeEach(async (to, from, next) => {
 
     let defaultView = getDefaultView()
     if (!defaultView) {
-      next({ name: 'Leads' })
+      next({ name: 'Patients' })
       return
     }
 
     let { route_name, type, name, is_standard } = defaultView
-    route_name = route_name || 'Leads'
+    route_name = route_name || 'Patients'
 
     if (name && !is_standard) {
       next({ name: route_name, params: { viewType: type }, query: { view: name } })

From fd5b9a5a0eaddd9dc2f8938b50df301f1feb3663 Mon Sep 17 00:00:00 2001
From: sandip_pandit <sandip.pandit@redsoftware.in>
Date: Mon, 21 Apr 2025 18:53:03 +0530
Subject: [PATCH 2/2] render:report on sidebar

---
 crm/api/report.py                             |  20 +
 crm/fcrm/doctype/crm_lead/crm_lead.json       |  12 +-
 .../components/ListViews/ReportsListView.vue  | 111 ++--
 frontend/src/pages/Leads.vue                  | 566 +++++++++++++++---
 frontend/src/pages/MobileReport.vue           | 175 ++++++
 frontend/src/pages/Report.vue                 | 426 ++++---------
 frontend/src/pages/Reports.vue                | 132 ++--
 frontend/src/router.js                        |  12 +-
 frontend/src/stores/reports.js                | 102 ++++
 9 files changed, 1007 insertions(+), 549 deletions(-)
 create mode 100644 crm/api/report.py
 create mode 100644 frontend/src/pages/MobileReport.vue
 create mode 100644 frontend/src/stores/reports.js

diff --git a/crm/api/report.py b/crm/api/report.py
new file mode 100644
index 000000000..07413b515
--- /dev/null
+++ b/crm/api/report.py
@@ -0,0 +1,20 @@
+import frappe
+from frappe.desk.query_report import run
+
+@frappe.whitelist(allow_guest=True)
+def get_report(report_name, filters=None):
+    print("Fetching report data...")
+    if isinstance(filters, str):
+        import json
+        filters = json.loads(filters)
+
+    # Run the report
+    try:
+        report_output = run(report_name, filters or {})
+        return {
+            "columns": report_output.get("columns"),
+            "data": report_output.get("result")
+        }
+    except Exception as e:
+        frappe.log_error(frappe.get_traceback(), "Error fetching report data")
+        return {"error": str(e)}
diff --git a/crm/fcrm/doctype/crm_lead/crm_lead.json b/crm/fcrm/doctype/crm_lead/crm_lead.json
index e39af407f..c5e84c820 100644
--- a/crm/fcrm/doctype/crm_lead/crm_lead.json
+++ b/crm/fcrm/doctype/crm_lead/crm_lead.json
@@ -290,7 +290,7 @@
  "image_field": "image",
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-01-02 22:14:01.991054",
+ "modified": "2025-04-21 11:56:49.339554",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Lead",
@@ -329,8 +329,18 @@
    "report": 1,
    "role": "All",
    "share": 1
+  },
+  {
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Guest",
+   "share": 1
   }
  ],
+ "row_format": "Dynamic",
  "sender_field": "email",
  "sender_name_field": "first_name",
  "show_title_field_in_link": 1,
diff --git a/frontend/src/components/ListViews/ReportsListView.vue b/frontend/src/components/ListViews/ReportsListView.vue
index aeecb7c86..67f1066ff 100644
--- a/frontend/src/components/ListViews/ReportsListView.vue
+++ b/frontend/src/components/ListViews/ReportsListView.vue
@@ -5,13 +5,15 @@
     :rows="rows"
     :options="{
       getRowRoute: (row) => ({
-        name: 'Contact',
-        params: { contactId: row.name },
+        name: 'Report',
+        params: { reportName: row.name },
         query: { view: route.query.view, viewType: route.params.viewType },
       }),
       selectable: options.selectable,
       showTooltip: options.showTooltip,
       resizeColumn: options.resizeColumn,
+      rowCount: options.rowCount,
+      totalCount: options.totalCount,
     }"
     row-key="name"
   >
@@ -26,7 +28,7 @@
         @columnWidthUpdated="emit('columnWidthUpdated', column)"
       >
         <Button
-          v-if="column.key == '_liked_by'"
+          v-if="column.key === '_liked_by'"
           variant="ghosted"
           class="!h-4"
           :class="isLikeFilterApplied ? 'fill-red-500' : 'fill-white'"
@@ -36,50 +38,26 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
+
     <ListRows
       class="mx-3 sm:mx-5"
       :rows="rows"
-      v-slot="{ idx, column, item }"
-      doctype="Contact"
+      v-slot="{ idx, column, item, row }"
+      doctype="Report"
     >
       <ListRowItem :item="item" :align="column.align">
-        <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>
         <template #default="{ label }">
           <div
             v-if="['modified', 'creation'].includes(column.key)"
             class="truncate text-base"
-            @click="
-              (event) =>
-                emit('applyFilter', {
-                  event,
-                  idx,
-                  column,
-                  item,
-                  firstColumn: columns[0],
-                })
-            "
+            @click="(event) =>
+              emit('applyFilter', {
+                event,
+                idx,
+                column,
+                item,
+                firstColumn: columns[0],
+              })"
           >
             <Tooltip :text="item.label">
               <div>{{ item.timeAgo }}</div>
@@ -95,11 +73,11 @@
           </div>
           <div v-else-if="column.key === '_liked_by'">
             <Button
-              v-if="column.key == '_liked_by'"
               variant="ghosted"
               :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
               @click.stop.prevent="
-                () => emit('likeDoc', { name: row.name, liked: isLiked(item) })
+                () =>
+                  emit('likeDoc', { name: row.name, liked: isLiked(item) })
               "
             >
               <HeartIcon class="h-4 w-4" />
@@ -108,22 +86,21 @@
           <div
             v-else
             class="truncate text-base"
-            @click="
-              (event) =>
-                emit('applyFilter', {
-                  event,
-                  idx,
-                  column,
-                  item,
-                  firstColumn: columns[0],
-                })
-            "
+            @click="(event) =>
+              emit('applyFilter', {
+                event,
+                idx,
+                column,
+                item,
+                firstColumn: columns[0],
+              })"
           >
             {{ label }}
           </div>
         </template>
       </ListRowItem>
     </ListRows>
+
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
         <Dropdown
@@ -134,6 +111,7 @@
       </template>
     </ListSelectBanner>
   </ListView>
+
   <ListFooter
     v-if="pageLengthCount"
     class="border-t px-3 py-2 sm:px-5"
@@ -144,22 +122,20 @@
     }"
     @loadMore="emit('loadMore')"
   />
+
   <ListBulkActions
     ref="listBulkActionsRef"
     v-model="list"
-    doctype="Contact"
-    :options="{
-      hideAssign: true,
-    }"
+    doctype="Report"
+    :options="{ hideAssign: true }"
   />
 </template>
+
 <script setup>
 import HeartIcon from '@/components/Icons/HeartIcon.vue'
-import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
 import ListRows from '@/components/ListViews/ListRows.vue'
 import {
-  Avatar,
   ListView,
   ListHeader,
   ListHeaderItem,
@@ -168,28 +144,24 @@ import {
   ListFooter,
   Tooltip,
   Dropdown,
+  FormControl,
+  Button,
 } from 'frappe-ui'
 import { sessionStore } from '@/stores/session'
 import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 const props = defineProps({
-  rows: {
-    type: Array,
-    required: true,
-  },
-  columns: {
-    type: Array,
-    required: true,
-  },
+  rows: { type: Array, required: true },
+  columns: { type: Array, required: true },
   options: {
     type: Object,
     default: () => ({
       selectable: true,
       showTooltip: true,
       resizeColumn: false,
-      totalCount: 0,
       rowCount: 0,
+      totalCount: 0,
     }),
   },
 })
@@ -207,13 +179,14 @@ const route = useRoute()
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
+const listBulkActionsRef = ref(null)
+
+const { user } = sessionStore()
 
 const isLikeFilterApplied = computed(() => {
-  return list.value.params?.filters?._liked_by ? true : false
+  return list.value?.params?.filters?._liked_by ? true : false
 })
 
-const { user } = sessionStore()
-
 function isLiked(item) {
   if (item) {
     let likedByMe = JSON.parse(item)
@@ -226,8 +199,6 @@ watch(pageLengthCount, (val, old_value) => {
   emit('updatePageCount', val)
 })
 
-const listBulkActionsRef = ref(null)
-
 defineExpose({
   customListActions: computed(
     () => listBulkActionsRef.value?.customListActions,
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index b2de02e63..6315d3ba0 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -1,17 +1,17 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <ViewBreadcrumbs v-model="viewControls" routeName="Contacts" />
+      <ViewBreadcrumbs v-model="viewControls" routeName="Patients" />
     </template>
     <template #right-header>
       <CustomActions
-        v-if="contactsListView?.customListActions"
-        :actions="contactsListView.customListActions"
+        v-if="leadsListView?.customListActions"
+        :actions="leadsListView.customListActions"
       />
       <Button
         variant="solid"
         :label="__('Create')"
-        @click="showContactModal = true"
+        @click="showLeadModal = true"
       >
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
@@ -19,24 +19,229 @@
   </LayoutHeader>
   <ViewControls
     ref="viewControls"
-    v-model="contacts"
+    v-model="leads"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
-    doctype="Contact"
+    doctype="CRM Lead"
+    :filters="{ converted: 0 }"
+    :options="{
+      allowedViews: ['list', 'group_by', 'kanban'],
+    }"
   />
-  <ContactsListView
-    ref="contactsListView"
-    v-if="contacts.data && rows.length"
-    v-model="contacts.data.page_length_count"
-    v-model:list="contacts"
+  <KanbanView
+    v-if="route.params.viewType == 'kanban'"
+    v-model="leads"
+    :options="{
+      getRoute: (row) => ({
+        name: 'Lead',
+        params: { leadId: row.name },
+        query: { view: route.query.view, viewType: route.params.viewType },
+      }),
+      onNewClick: (column) => onNewClick(column),
+    }"
+    @update="(data) => viewControls.updateKanbanSettings(data)"
+    @loadMore="(columnName) => viewControls.loadMoreKanban(columnName)"
+  >
+    <template #title="{ titleField, itemName }">
+      <div class="flex items-center gap-2">
+        <div v-if="titleField === 'status'">
+          <IndicatorIcon :class="getRow(itemName, titleField).color" />
+        </div>
+        <div
+          v-else-if="
+            titleField === 'organization' && getRow(itemName, titleField).label
+          "
+        >
+          <Avatar
+            class="flex items-center"
+            :image="getRow(itemName, titleField).logo"
+            :label="getRow(itemName, titleField).label"
+            size="sm"
+          />
+        </div>
+        <div
+          v-else-if="
+            titleField === 'lead_name' && getRow(itemName, titleField).label
+          "
+        >
+          <Avatar
+            class="flex items-center"
+            :image="getRow(itemName, titleField).image"
+            :label="getRow(itemName, titleField).image_label"
+            size="sm"
+          />
+        </div>
+        <div
+          v-else-if="
+            titleField === 'lead_owner' &&
+            getRow(itemName, titleField).full_name
+          "
+        >
+          <Avatar
+            class="flex items-center"
+            :image="getRow(itemName, titleField).user_image"
+            :label="getRow(itemName, titleField).full_name"
+            size="sm"
+          />
+        </div>
+        <div v-else-if="titleField === 'mobile_no'">
+          <PhoneIcon class="h-4 w-4" />
+        </div>
+        <div
+          v-if="
+            [
+              'modified',
+              'creation',
+              'first_response_time',
+              'first_responded_on',
+              'response_by',
+            ].includes(titleField)
+          "
+          class="truncate text-base"
+        >
+          <Tooltip :text="getRow(itemName, titleField).label">
+            <div>{{ getRow(itemName, titleField).timeAgo }}</div>
+          </Tooltip>
+        </div>
+        <div v-else-if="titleField === 'sla_status'" class="truncate text-base">
+          <Badge
+            v-if="getRow(itemName, titleField).value"
+            :variant="'subtle'"
+            :theme="getRow(itemName, titleField).color"
+            size="md"
+            :label="getRow(itemName, titleField).value"
+          />
+        </div>
+        <div
+          v-else-if="getRow(itemName, titleField).label"
+          class="truncate text-base"
+        >
+          {{ getRow(itemName, titleField).label }}
+        </div>
+        <div class="text-ink-gray-4" v-else>{{ __('No Title') }}</div>
+      </div>
+    </template>
+    <template #fields="{ fieldName, itemName }">
+      <div
+        v-if="getRow(itemName, fieldName).label"
+        class="truncate flex items-center gap-2"
+      >
+        <div v-if="fieldName === 'status'">
+          <IndicatorIcon :class="getRow(itemName, fieldName).color" />
+        </div>
+        <div
+          v-else-if="
+            fieldName === 'organization' && getRow(itemName, fieldName).label
+          "
+        >
+          <Avatar
+            class="flex items-center"
+            :image="getRow(itemName, fieldName).logo"
+            :label="getRow(itemName, fieldName).label"
+            size="xs"
+          />
+        </div>
+        <div v-else-if="fieldName === 'lead_name'">
+          <Avatar
+            v-if="getRow(itemName, fieldName).label"
+            class="flex items-center"
+            :image="getRow(itemName, fieldName).image"
+            :label="getRow(itemName, fieldName).image_label"
+            size="xs"
+          />
+        </div>
+        <div v-else-if="fieldName === 'lead_owner'">
+          <Avatar
+            v-if="getRow(itemName, fieldName).full_name"
+            class="flex items-center"
+            :image="getRow(itemName, fieldName).user_image"
+            :label="getRow(itemName, fieldName).full_name"
+            size="xs"
+          />
+        </div>
+        <div
+          v-if="
+            [
+              'modified',
+              'creation',
+              'first_response_time',
+              'first_responded_on',
+              'response_by',
+            ].includes(fieldName)
+          "
+          class="truncate text-base"
+        >
+          <Tooltip :text="getRow(itemName, fieldName).label">
+            <div>{{ getRow(itemName, fieldName).timeAgo }}</div>
+          </Tooltip>
+        </div>
+        <div v-else-if="fieldName === 'sla_status'" class="truncate text-base">
+          <Badge
+            v-if="getRow(itemName, fieldName).value"
+            :variant="'subtle'"
+            :theme="getRow(itemName, fieldName).color"
+            size="md"
+            :label="getRow(itemName, fieldName).value"
+          />
+        </div>
+        <div v-else-if="fieldName === '_assign'" class="flex items-center">
+          <MultipleAvatar
+            :avatars="getRow(itemName, fieldName).label"
+            size="xs"
+          />
+        </div>
+        <div v-else class="truncate text-base">
+          {{ getRow(itemName, fieldName).label }}
+        </div>
+      </div>
+    </template>
+    <template #actions="{ itemName }">
+      <div class="flex gap-2 items-center justify-between">
+        <div class="text-ink-gray-5 flex items-center gap-1.5">
+          <EmailAtIcon class="h-4 w-4" />
+          <span v-if="getRow(itemName, '_email_count').label">
+            {{ getRow(itemName, '_email_count').label }}
+          </span>
+          <span class="text-3xl leading-[0]"> &middot; </span>
+          <NoteIcon class="h-4 w-4" />
+          <span v-if="getRow(itemName, '_note_count').label">
+            {{ getRow(itemName, '_note_count').label }}
+          </span>
+          <span class="text-3xl leading-[0]"> &middot; </span>
+          <TaskIcon class="h-4 w-4" />
+          <span v-if="getRow(itemName, '_task_count').label">
+            {{ getRow(itemName, '_task_count').label }}
+          </span>
+          <span class="text-3xl leading-[0]"> &middot; </span>
+          <CommentIcon class="h-4 w-4" />
+          <span v-if="getRow(itemName, '_comment_count').label">
+            {{ getRow(itemName, '_comment_count').label }}
+          </span>
+        </div>
+        <Dropdown
+          class="flex items-center gap-2"
+          :options="actions(itemName)"
+          variant="ghost"
+          @click.stop.prevent
+        >
+          <Button icon="plus" variant="ghost" />
+        </Dropdown>
+      </div>
+    </template>
+  </KanbanView>
+  <LeadsListView
+    ref="leadsListView"
+    v-else-if="leads.data && rows.length"
+    v-model="leads.data.page_length_count"
+    v-model:list="leads"
     :rows="rows"
-    :columns="contacts.data.columns"
+    :columns="leads.data.columns"
     :options="{
       showTooltip: false,
       resizeColumn: true,
-      rowCount: contacts.data.row_count,
-      totalCount: contacts.data.total_count,
+      rowCount: leads.data.row_count,
+      totalCount: leads.data.total_count,
     }"
     @loadMore="() => loadMore++"
     @columnWidthUpdated="() => triggerResize++"
@@ -44,134 +249,333 @@
     @applyFilter="(data) => viewControls.applyFilter(data)"
     @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
     @likeDoc="(data) => viewControls.likeDoc(data)"
+    @selectionsChanged="
+      (selections) => viewControls.updateSelections(selections)
+    "
   />
-  <div
-    v-else-if="contacts.data"
-    class="flex h-full items-center justify-center"
-  >
+  <div v-else-if="leads.data" class="flex h-full items-center justify-center">
     <div
       class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
-      <ContactsIcon class="h-10 w-10" />
-      <span>{{ __('No {0} Found', [__('Contacts')]) }}</span>
-      <Button :label="__('Create')" @click="showContactModal = true">
+      <LeadsIcon class="h-10 w-10" />
+      <span>{{ __('No {0} Found', [__('Leads')]) }}</span>
+      <Button :label="__('Create')" @click="showLeadModal = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </div>
   </div>
-  <ContactModal
-    v-model="showContactModal"
-    v-model:showQuickEntryModal="showQuickEntryModal"
-    :contact="{}"
-    @openAddressModal="(_address) => openAddressModal(_address)"
+  <LeadModal
+    v-if="showLeadModal"
+    v-model="showLeadModal"
+    v-model:quickEntry="showQuickEntryModal"
+    :defaults="defaults"
+  />
+  <NoteModal
+    v-if="showNoteModal"
+    v-model="showNoteModal"
+    :note="note"
+    doctype="CRM Lead"
+    :doc="docname"
   />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="Contact"
+  <TaskModal
+    v-if="showTaskModal"
+    v-model="showTaskModal"
+    :task="task"
+    doctype="CRM Lead"
+    :doc="docname"
   />
-  <AddressModal v-model="showAddressModal" v-model:address="address" />
+  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
 </template>
 
 <script setup>
 import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
+import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import CustomActions from '@/components/CustomActions.vue'
-import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import TaskIcon from '@/components/Icons/TaskIcon.vue'
+import CommentIcon from '@/components/Icons/CommentIcon.vue'
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import ContactModal from '@/components/Modals/ContactModal.vue'
+import LeadsListView from '@/components/ListViews/LeadsListView.vue'
+import KanbanView from '@/components/Kanban/KanbanView.vue'
+import LeadModal from '@/components/Modals/LeadModal.vue'
+import NoteModal from '@/components/Modals/NoteModal.vue'
+import TaskModal from '@/components/Modals/TaskModal.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
-import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
-import { organizationsStore } from '@/stores/organizations.js'
-import { formatDate, timeAgo } from '@/utils'
-import { call } from 'frappe-ui'
-import { ref, computed } from 'vue'
+import { globalStore } from '@/stores/global'
+import { usersStore } from '@/stores/users'
+import { statusesStore } from '@/stores/statuses'
+import { callEnabled } from '@/composables/settings'
+import { formatDate, timeAgo, website, formatTime } from '@/utils'
+import { Avatar, Tooltip, Dropdown } from 'frappe-ui'
+import { useRoute } from 'vue-router'
+import { ref, computed, reactive, h } from 'vue'
 
 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
-  getMeta('Contact')
-const { getOrganization } = organizationsStore()
+  getMeta('CRM Lead')
+const { makeCall } = globalStore()
+const { getUser } = usersStore()
+const { getLeadStatus } = statusesStore()
 
-const showContactModal = ref(false)
+const route = useRoute()
+
+const leadsListView = ref(null)
+const showLeadModal = ref(false)
 const showQuickEntryModal = ref(false)
-const showAddressModal = ref(false)
 
-const contactsListView = ref(null)
+const defaults = reactive({})
 
-// contacts data is loaded in the ViewControls component
-const contacts = ref({})
-const address = ref({})
+// leads data is loaded in the ViewControls component
+const leads = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
 const viewControls = ref(null)
 
+function getRow(name, field) {
+  function getValue(value) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      return value
+    }
+    return { label: value }
+  }
+  return getValue(rows.value?.find((row) => row.name == name)[field])
+}
+
+// Rows
 const rows = computed(() => {
-  if (
-    !contacts.value?.data?.data ||
-    !['list', 'group_by'].includes(contacts.value.data.view_type)
-  )
-    return []
-  return contacts.value?.data.data.map((contact) => {
+  if (!leads.value?.data?.data) return []
+  if (leads.value.data.view_type === 'group_by') {
+    if (!leads.value?.data.group_by_field?.fieldname) return []
+    return getGroupedByRows(
+      leads.value?.data.data,
+      leads.value?.data.group_by_field,
+      leads.value.data.columns,
+    )
+  } else if (leads.value.data.view_type === 'kanban') {
+    return getKanbanRows(leads.value.data.data, leads.value.data.fields)
+  } else {
+    return parseRows(leads.value?.data.data, leads.value.data.columns)
+  }
+})
+
+function getGroupedByRows(listRows, groupByField, columns) {
+  let groupedRows = []
+
+  groupByField.options?.forEach((option) => {
+    let filteredRows = []
+
+    if (!option) {
+      filteredRows = listRows.filter((row) => !row[groupByField.fieldname])
+    } else {
+      filteredRows = listRows.filter(
+        (row) => row[groupByField.fieldname] == option,
+      )
+    }
+
+    let groupDetail = {
+      label: groupByField.label,
+      group: option || __(' '),
+      collapsed: false,
+      rows: parseRows(filteredRows, columns),
+    }
+    if (groupByField.fieldname == 'status') {
+      groupDetail.icon = () =>
+        h(IndicatorIcon, {
+          class: getLeadStatus(option)?.color,
+        })
+    }
+    groupedRows.push(groupDetail)
+  })
+
+  return groupedRows || listRows
+}
+
+function getKanbanRows(data, columns) {
+  let _rows = []
+  data.forEach((column) => {
+    column.data?.forEach((row) => {
+      _rows.push(row)
+    })
+  })
+  return parseRows(_rows, columns)
+}
+
+function parseRows(rows, columns = []) {
+  let view_type = leads.value.data.view_type
+  let key = view_type === 'kanban' ? 'fieldname' : 'key'
+  let type = view_type === 'kanban' ? 'fieldtype' : 'type'
+
+  return rows.map((lead) => {
     let _rows = {}
-    contacts.value?.data.rows.forEach((row) => {
-      _rows[row] = contact[row]
+    leads.value?.data.rows.forEach((row) => {
+      _rows[row] = lead[row]
 
-      let fieldType = contacts.value?.data.columns?.find(
-        (col) => (col.key || col.value) == row,
-      )?.type
+      let fieldType = columns?.find((col) => (col[key] || col.value) == row)?.[
+        type
+      ]
 
       if (
         fieldType &&
         ['Date', 'Datetime'].includes(fieldType) &&
         !['modified', 'creation'].includes(row)
       ) {
-        _rows[row] = formatDate(contact[row], '', true, fieldType == 'Datetime')
+        _rows[row] = formatDate(lead[row], '', true, fieldType == 'Datetime')
       }
 
       if (fieldType && fieldType == 'Currency') {
-        _rows[row] = getFormattedCurrency(row, contact)
+        _rows[row] = getFormattedCurrency(row, lead)
       }
 
       if (fieldType && fieldType == 'Float') {
-        _rows[row] = getFormattedFloat(row, contact)
+        _rows[row] = getFormattedFloat(row, lead)
       }
 
       if (fieldType && fieldType == 'Percent') {
-        _rows[row] = getFormattedPercent(row, contact)
+        _rows[row] = getFormattedPercent(row, lead)
       }
 
-      if (row == 'full_name') {
+      if (row == 'lead_name') {
+        _rows[row] = {
+          label: lead.lead_name,
+          image: lead.image,
+          image_label: lead.first_name,
+        }
+      } else if (row == 'organization') {
+        _rows[row] = lead.organization
+      } else if (row === 'website') {
+        _rows[row] = website(lead.website)
+      } else if (row == 'status') {
+        _rows[row] = {
+          label: lead.status,
+          color: getLeadStatus(lead.status)?.color,
+        }
+      } else if (row == 'sla_status') {
+        let value = lead.sla_status
+        let tooltipText = value
+        let color =
+          lead.sla_status == 'Failed'
+            ? 'red'
+            : lead.sla_status == 'Fulfilled'
+              ? 'green'
+              : 'orange'
+        if (value == 'First Response Due') {
+          value = __(timeAgo(lead.response_by))
+          tooltipText = formatDate(lead.response_by)
+          if (new Date(lead.response_by) < new Date()) {
+            color = 'red'
+          }
+        }
         _rows[row] = {
-          label: contact.full_name,
-          image_label: contact.full_name,
-          image: contact.image,
+          label: tooltipText,
+          value: value,
+          color: color,
         }
-      } else if (row == 'company_name') {
+      } else if (row == 'lead_owner') {
         _rows[row] = {
-          label: contact.company_name,
-          logo: getOrganization(contact.company_name)?.organization_logo,
+          label: lead.lead_owner && getUser(lead.lead_owner).full_name,
+          ...(lead.lead_owner && getUser(lead.lead_owner)),
         }
+      } else if (row == '_assign') {
+        let assignees = JSON.parse(lead._assign || '[]')
+        _rows[row] = assignees.map((user) => ({
+          name: user,
+          image: getUser(user).user_image,
+          label: getUser(user).full_name,
+        }))
       } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: formatDate(contact[row]),
-          timeAgo: __(timeAgo(contact[row])),
+          label: formatDate(lead[row]),
+          timeAgo: __(timeAgo(lead[row])),
+        }
+      } else if (
+        ['first_response_time', 'first_responded_on', 'response_by'].includes(
+          row,
+        )
+      ) {
+        let field = row == 'response_by' ? 'response_by' : 'first_responded_on'
+        _rows[row] = {
+          label: lead[field] ? formatDate(lead[field]) : '',
+          timeAgo: lead[row]
+            ? row == 'first_response_time'
+              ? formatTime(lead[row])
+              : __(timeAgo(lead[row]))
+            : '',
         }
       }
     })
+    _rows['_email_count'] = lead._email_count
+    _rows['_note_count'] = lead._note_count
+    _rows['_task_count'] = lead._task_count
+    _rows['_comment_count'] = lead._comment_count
     return _rows
   })
-})
+}
 
-async function openAddressModal(_address) {
-  if (_address) {
-    _address = await call('frappe.client.get', {
-      doctype: 'Address',
-      name: _address,
-    })
+function onNewClick(column) {
+  let column_field = leads.value.params.column_field
+
+  if (column_field) {
+    defaults[column_field] = column.column.name
   }
-  showAddressModal.value = true
-  address.value = _address || {}
+
+  showLeadModal.value = true
+}
+
+function actions(itemName) {
+  let mobile_no = getRow(itemName, 'mobile_no')?.label || ''
+  let actions = [
+    {
+      icon: h(PhoneIcon, { class: 'h-4 w-4' }),
+      label: __('Make a Call'),
+      onClick: () => makeCall(mobile_no),
+      condition: () => mobile_no && callEnabled.value,
+    },
+    {
+      icon: h(NoteIcon, { class: 'h-4 w-4' }),
+      label: __('New Note'),
+      onClick: () => showNote(itemName),
+    },
+    {
+      icon: h(TaskIcon, { class: 'h-4 w-4' }),
+      label: __('New Task'),
+      onClick: () => showTask(itemName),
+    },
+  ]
+  return actions.filter((action) =>
+    action.condition ? action.condition() : true,
+  )
+}
+
+const docname = ref('')
+const showNoteModal = ref(false)
+const note = ref({
+  title: '',
+  content: '',
+})
+
+function showNote(name) {
+  docname.value = name
+  showNoteModal.value = true
+}
+
+const showTaskModal = ref(false)
+const task = ref({
+  title: '',
+  description: '',
+  assigned_to: '',
+  due_date: '',
+  priority: 'Low',
+  status: 'Backlog',
+})
+
+function showTask(name) {
+  docname.value = name
+  showTaskModal.value = true
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/src/pages/MobileReport.vue b/frontend/src/pages/MobileReport.vue
new file mode 100644
index 000000000..fe489b7f5
--- /dev/null
+++ b/frontend/src/pages/MobileReport.vue
@@ -0,0 +1,175 @@
+<template>
+    <LayoutHeader v-if="contact.data">
+      <template #left-header>
+        <Breadcrumbs :items="breadcrumbs">
+          <template #prefix="{ item }">
+            <Icon v-if="item.icon" :icon="item.icon" class="mr-2 h-4" />
+          </template>
+        </Breadcrumbs>
+      </template>
+    </LayoutHeader>
+  
+    <div v-if="contact.data" ref="parentRef" class="flex h-full">
+      <Resizer
+        :parent="$refs.parentRef"
+        class="flex h-full flex-col overflow-hidden border-r"
+      >
+        <!-- Contact Header Section -->
+        <div class="border-b">
+          <FileUploader
+            @success="changeContactImage"
+            :validateFile="validateFile"
+          >
+            <template #default="{ openFileSelector, error }">
+              <div class="flex flex-col items-start gap-4 p-5">
+                <div class="flex items-center gap-4">
+                  <div class="group relative h-15.5 w-15.5">
+                    <Avatar
+                      size="3xl"
+                      :label="contact.data.full_name"
+                      :image="contact.data.image"
+                    />
+                    <component
+                      :is="contact.data.image ? Dropdown : 'div'"
+                      v-bind="contact.data.image
+                        ? {
+                            options: [
+                              {
+                                icon: 'upload',
+                                label: __('Change 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-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(22px 0 0 0); clip-path: inset(22px 0 0 0);"
+                      >
+                        <CameraIcon class="h-6 w-6 text-white" />
+                      </div>
+                    </component>
+                  </div>
+                </div>
+  
+              </div>
+            </template>
+          </FileUploader>
+        </div>
+      </Resizer>
+  
+    </div>
+  
+    <ErrorPage v-else :errorTitle="errorTitle" :errorMessage="errorMessage" />
+    <AddressModal v-model="showAddressModal" v-model:address="_address" />
+  </template>
+  
+  <script setup>
+  import { ref, computed } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import {
+    Breadcrumbs,
+    Avatar,
+    FileUploader,
+    Tabs,
+    Dropdown,
+    Badge,
+    createResource,
+  } from 'frappe-ui'
+  
+  import LayoutHeader from '@/components/LayoutHeader.vue'
+  import ErrorPage from '@/components/ErrorPage.vue'
+  import Resizer from '@/components/Resizer.vue'
+  import Icon from '@/components/Icon.vue'
+  import CameraIcon from '@/components/Icons/CameraIcon.vue'
+  import AddressModal from '@/components/Modals/AddressModal.vue'
+  import { globalStore } from '@/stores/global.js'
+  import { organizationsStore } from '@/stores/organizations.js'
+  import { getView } from '@/utils/view'
+  import { getSettings } from '@/stores/settings'
+  import { getMeta } from '@/stores/meta'
+  
+  const route = useRoute()
+  const router = useRouter()
+  
+  const props = defineProps({
+    reportName: {
+      type: String,
+      required: true,
+    },
+  })
+  
+  const contact = createResource({
+    url: 'crm.api.report.get_report',
+    cache: ['report_name', props.reportName],
+    params: { report_name: props.reportName },
+    auto: true,
+    transform: (data) => ({
+      ...data,
+      actual_mobile_no: data.mobile_no,
+      mobile_no: data.mobile_no,
+    }),
+    onError: (err) => {
+      if (err.messages?.[0]) {
+        errorTitle.value = __('Not permitted')
+        errorMessage.value = __(err.messages?.[0])
+      } else {
+        router.push({ name: 'Reports' })
+      }
+    },
+  })
+  
+  const showAddressModal = ref(false)
+  const _address = ref({})
+  const errorTitle = ref('')
+  const errorMessage = ref('')
+  const tabIndex = ref(0)
+  
+  const breadcrumbs = computed(() => {
+    let items = [{ label: __('Reports'), route: { name: 'Reports' } }]
+    if (route.query.view || route.query.viewType) {
+      let view = getView(route.query.view, route.query.viewType, 'Report')
+      if (view) {
+        items.push({
+          label: __(view.label),
+          icon: view.icon,
+          route: { name: 'Reports', query: { view: route.query.view } },
+        })
+      }
+    }
+    return items
+  })
+  
+  // Report data
+  const columns = ref([])
+  const rows = ref([])
+  
+  const reportResource = createResource({
+    url: 'crm.api.report.get_report',
+    params: { report_name: props.reportName },
+    auto: true,
+    onSuccess: (res) => {
+      console.log('Fetched report:', res)
+      columns.value = res.columns
+      rows.value = res.data
+    },
+    onError: (err) => {
+      errorTitle.value = __('Report Error')
+      errorMessage.value = err.message
+    },
+  })
+  
+  const dataRows = computed(() => rows.value || [])
+  </script>
+  
+  <style scoped>
+  /* Scoped styles here if needed */
+  </style>
+  
\ No newline at end of file
diff --git a/frontend/src/pages/Report.vue b/frontend/src/pages/Report.vue
index b7407d4d6..57e54ab16 100644
--- a/frontend/src/pages/Report.vue
+++ b/frontend/src/pages/Report.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutHeader v-if="contact.data">
+  <LayoutHeader v-if="report.data">
     <template #left-header>
       <Breadcrumbs :items="breadcrumbs">
         <template #prefix="{ item }">
@@ -7,359 +7,171 @@
         </template>
       </Breadcrumbs>
     </template>
+    <!-- <template #right-header>
+      <CustomActions
+        v-if="report.data._customActions?.length"
+        :actions="report.data._customActions"
+      />
+    </template> -->
   </LayoutHeader>
-  <div v-if="contact.data" ref="parentRef" class="flex h-full">
-    <Resizer
-      v-if="contact.data"
-      :parent="$refs.parentRef"
-      class="flex h-full flex-col overflow-hidden border-r"
-    >
-      <div class="border-b">
-        <FileUploader
-          @success="changeContactImage"
-          :validateFile="validateFile"
-        >
-          <template #default="{ openFileSelector, error }">
-            <div class="flex flex-col items-start justify-start gap-4 p-5">
-              <div class="flex gap-4 items-center">
-                <div class="group relative h-15.5 w-15.5">
-                  <Avatar
-                    size="3xl"
-                    class="h-15.5 w-15.5"
-                    :label="contact.data.full_name"
-                    :image="contact.data.image"
-                  />
-                  <component
-                    :is="contact.data.image ? Dropdown : 'div'"
-                    v-bind="
-                      contact.data.image
-                        ? {
-                            options: [
-                              {
-                                icon: 'upload',
-                                label: contact.data.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-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(22px 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 text-ink-gray-9">
-                  <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-ink-gray-8"
-                  >
-                    <Avatar
-                      size="xs"
-                      :label="contact.data.company_name"
-                      :image="
-                        getOrganization(contact.data.company_name)
-                          ?.organization_logo
-                      "
-                    />
-                    <span class="">{{ contact.data.company_name }}</span>
-                  </div>
-                  <ErrorMessage :message="__(error)" />
-                </div>
-              </div>
-              <div class="flex gap-1.5">
-                <Button
-                  v-if="contact.data.actual_mobile_no"
-                  :label="__('Make Call')"
-                  size="sm"
-                  @click="
-                    callEnabled && makeCall(contact.data.actual_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>
-            </div>
-          </template>
-        </FileUploader>
-      </div>
-      <div
-        v-if="sections.data"
-        class="flex flex-1 flex-col justify-between overflow-hidden"
-      >
-        <SidePanelLayout
-          v-model="contact.data"
-          :sections="sections.data"
-          doctype="Contact"
-          @update="updateField"
-          @reload="sections.reload"
-        />
-      </div>
-    </Resizer>
-    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
-      <template #tab-item="{ tab, selected }">
-        <button
-          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
-          :class="{ 'text-ink-gray-9': selected }"
-        >
-          <component v-if="tab.icon" :is="tab.icon" class="h-5" />
-          {{ __(tab.label) }}
-          <Badge
-            class="group-hover:bg-surface-gray-7"
-            :class="[selected ? 'bg-surface-gray-7' : 'bg-gray-600']"
-            variant="solid"
-            theme="gray"
-            size="sm"
+  <div v-if="report.data">
+    <div class="flex-1 overflow-auto p-4">
+      <table class="w-full table-auto border border-collapse border-gray-200">
+        <thead class="bg-gray-100" v-if="columns.length">
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.fieldname"
+              class="border border-gray-300 px-4 py-2 text-left text-sm font-medium text-gray-700"
+            >
+              {{ col.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- If no data -->
+          <tr v-if="!columns.length || !dataRows.length">
+            <td
+              :colspan="columns.length || 1"
+              class="text-center py-6 text-gray-500 text-sm"
+            >
+              No data available
+            </td>
+          </tr>
+
+          <!-- If data exists -->
+          <tr
+            v-else
+            v-for="(row, rowIndex) in dataRows"
+            :key="rowIndex"
+            class="hover:bg-gray-50"
           >
-            {{ tab.count }}
-          </Badge>
-        </button>
-      </template>
-      <template #tab-panel="{ tab }">
-        <div
-          v-if="!rows.length"
-          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
-        >
-          <div class="flex flex-col items-center justify-center space-y-3">
-            <component :is="tab.icon" class="!h-10 !w-10" />
-            <div>{{ __('No {0} Found', [__(tab.label)]) }}</div>
-          </div>
-        </div>
-      </template>
-    </Tabs>
+            <td
+              v-for="col in columns"
+              :key="col.fieldname"
+              class="border border-gray-300 px-4 py-2 text-sm text-gray-800"
+            >
+              {{ row[col.fieldname] ?? '-' }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
+
+  <!-- Error handling -->
   <ErrorPage v-else :errorTitle="errorTitle" :errorMessage="errorMessage" />
+
+  <!-- Address modal -->
   <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
+
+
 <script setup>
-import ErrorPage from '@/components/ErrorPage.vue'
-import Resizer from '@/components/Resizer.vue'
-import Icon from '@/components/Icon.vue'
-import SidePanelLayout from '@/components/SidePanelLayout.vue'
-import LayoutHeader from '@/components/LayoutHeader.vue'
-import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import CameraIcon from '@/components/Icons/CameraIcon.vue'
-import DealsListView from '@/components/ListViews/DealsListView.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
-import { formatDate, timeAgo, createToast } from '@/utils'
-import { getView } from '@/utils/view'
-import { getSettings } from '@/stores/settings'
-import { getMeta } from '@/stores/meta'
-import { globalStore } from '@/stores/global.js'
-import { usersStore } from '@/stores/users.js'
-import { organizationsStore } from '@/stores/organizations.js'
-import { statusesStore } from '@/stores/statuses'
-import { callEnabled } from '@/composables/settings'
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import {
   Breadcrumbs,
   Avatar,
   FileUploader,
   Tabs,
-  call,
-  createResource,
-  usePageMeta,
   Dropdown,
+  Badge,
+  createResource,
 } from 'frappe-ui'
-import { ref, computed, h } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { errorMessage as _errorMessage } from '../utils'
 
-const { brand } = getSettings()
-const { $dialog, makeCall } = globalStore()
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import ErrorPage from '@/components/ErrorPage.vue'
+import Resizer from '@/components/Resizer.vue'
+import Icon from '@/components/Icon.vue'
+import CameraIcon from '@/components/Icons/CameraIcon.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
+import { globalStore } from '@/stores/global.js'
+import { organizationsStore } from '@/stores/organizations.js'
+import { getView } from '@/utils/view'
+import { getSettings } from '@/stores/settings'
+import { getMeta } from '@/stores/meta'
 
-const { getUser } = usersStore()
-const { getOrganization } = organizationsStore()
-const { getDealStatus } = statusesStore()
-const { doctypeMeta } = getMeta('Contact')
+const route = useRoute()
+const router = useRouter()
 
 const props = defineProps({
-  contactId: {
+  reportName: {
     type: String,
-    required: true,
+    default:""
   },
 })
 
-const route = useRoute()
-const router = useRouter()
-
-const showAddressModal = ref(false)
-const _address = ref({})
-
-const errorTitle = ref('')
-const errorMessage = ref('')
+const reportName = computed(() => {
+  return props.reportName
+    || route.params.reportName       // if you ever set it via a :param on the path
+    || route.query.view              // or if you pass it as ?view=…
+})
 
-const contact = createResource({
-  url: 'crm.api.contact.get_contact',
-  cache: ['contact', props.contactId],
-  params: { contactId: props.contactId },
+const report = createResource({
+  url: 'crm.api.report.get_report',
+  cache: ['report_name', reportName.value],
+  params: { report_name: reportName.value },
+   auto: true,
   auto: true,
-  transform: (data) => {
-    return {
-      ...data,
-      actual_mobile_no: data.mobile_no,
-      mobile_no: data.mobile_no,
-    }
-  },
-  onSuccess: () => {
-    errorTitle.value = ''
-    errorMessage.value = ''
-  },
+  transform: (data) => ({
+    ...data,
+    actual_mobile_no: data.mobile_no,
+    mobile_no: data.mobile_no,
+  }),
   onError: (err) => {
     if (err.messages?.[0]) {
       errorTitle.value = __('Not permitted')
       errorMessage.value = __(err.messages?.[0])
     } else {
-      router.push({ name: 'Contacts' })
+      router.push({ name: 'Reports' })
     }
   },
 })
 
-const breadcrumbs = computed(() => {
-  let items = [{ label: __('Contacts'), route: { name: 'Contacts' } }]
+const showAddressModal = ref(false)
+const _address = ref({})
+const errorTitle = ref('')
+const errorMessage = ref('')
+const tabIndex = ref(0)
 
+const breadcrumbs = computed(() => {
+  let items = [{ label: __('Reports'), route: { name: 'Reports' } }]
   if (route.query.view || route.query.viewType) {
-    let view = getView(route.query.view, route.query.viewType, 'Contact')
+    let view = getView(route.query.view, route.query.viewType, 'Report')
     if (view) {
       items.push({
         label: __(view.label),
         icon: view.icon,
-        route: {
-          name: 'Contacts',
-          params: { viewType: route.query.viewType },
-          query: { view: route.query.view },
-        },
+        route: { name: 'Reports', query: { view: route.query.view } },
       })
     }
   }
-
-  items.push({
-    label: title.value,
-    route: { name: 'Contact', params: { contactId: props.contactId } },
-  })
   return items
 })
 
+const columns = ref([])
+const rows = ref([])
 
-
-const tabIndex = ref(0)
-
-
-
-async function updateField(fieldname, value) {
-  await call('frappe.client.set_value', {
-    doctype: 'Contact',
-    name: props.contactId,
-    fieldname,
-    value,
-  })
-  createToast({
-    title: 'Contact updated',
-    icon: 'check',
-    iconClasses: 'text-ink-green-3',
-  })
-
-  contact.reload()
-}
-
-const { getFormattedCurrency } = getMeta('CRM Deal')
-
-const columns = computed(() => dealColumns)
-
-function getDealRowObject(deal) {
-  return {
-    name: deal.name,
-    organization: {
-      label: deal.organization,
-      logo: getOrganization(deal.organization)?.organization_logo,
-    },
-    annual_revenue: getFormattedCurrency('annual_revenue', deal),
-    status: {
-      label: deal.status,
-      color: getDealStatus(deal.status)?.color,
-    },
-    email: deal.email,
-    mobile_no: deal.mobile_no,
-    deal_owner: {
-      label: deal.deal_owner && getUser(deal.deal_owner).full_name,
-      ...(deal.deal_owner && getUser(deal.deal_owner)),
-    },
-    modified: {
-      label: formatDate(deal.modified),
-      timeAgo: __(timeAgo(deal.modified)),
-    },
-  }
-}
-
-const dealColumns = [
-  {
-    label: __('Organization'),
-    key: 'organization',
-    width: '11rem',
-  },
-  {
-    label: __('Amount'),
-    key: 'annual_revenue',
-    align: 'right',
-    width: '9rem',
-  },
-  {
-    label: __('Status'),
-    key: 'status',
-    width: '10rem',
-  },
-  {
-    label: __('Email'),
-    key: 'email',
-    width: '12rem',
-  },
-  {
-    label: __('Mobile no'),
-    key: 'mobile_no',
-    width: '11rem',
-  },
-  {
-    label: __('Deal owner'),
-    key: 'deal_owner',
-    width: '10rem',
+const reportResource = createResource({
+  url: 'crm.api.report.get_report',
+  params: { report_name: props.reportName },
+  auto: true,
+  onSuccess: (res) => {
+    console.log('Fetched report:', res)
+    columns.value = res.columns
+    rows.value = res.data
   },
-  {
-    label: __('Last modified'),
-    key: 'modified',
-    width: '8rem',
+  onError: (err) => {
+    errorTitle.value = __('Report Error')
+    errorMessage.value = err.message
   },
-]
+})
+
+const dataRows = computed(() => rows.value || [])
 </script>
+
+<style scoped>
+/* Scoped styles here if needed */
+</style>
diff --git a/frontend/src/pages/Reports.vue b/frontend/src/pages/Reports.vue
index b2de02e63..54327e67e 100644
--- a/frontend/src/pages/Reports.vue
+++ b/frontend/src/pages/Reports.vue
@@ -1,42 +1,44 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <ViewBreadcrumbs v-model="viewControls" routeName="Contacts" />
+      <ViewBreadcrumbs v-model="viewControls" routeName="Reports" />
     </template>
     <template #right-header>
       <CustomActions
-        v-if="contactsListView?.customListActions"
-        :actions="contactsListView.customListActions"
+        v-if="reportsListView?.customListActions"
+        :actions="reportsListView.customListActions"
       />
-      <Button
+      <!-- <Button
         variant="solid"
         :label="__('Create')"
-        @click="showContactModal = true"
+        @click="showReportModal = true"
       >
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      </Button> -->
     </template>
   </LayoutHeader>
+  
   <ViewControls
     ref="viewControls"
-    v-model="contacts"
+    v-model="reports"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
-    doctype="Contact"
+    doctype="Report"
   />
-  <ContactsListView
-    ref="contactsListView"
-    v-if="contacts.data && rows.length"
-    v-model="contacts.data.page_length_count"
-    v-model:list="contacts"
+
+  <ReportsListView
+    ref="reportsListView"
+    v-if="reports.data && rows.length"
+    v-model="reports.data.page_length_count"
+    v-model:list="reports"
     :rows="rows"
-    :columns="contacts.data.columns"
+    :columns="reports.data.columns"
     :options="{
       showTooltip: false,
       resizeColumn: true,
-      rowCount: contacts.data.row_count,
-      totalCount: contacts.data.total_count,
+      rowCount: reports.data.row_count,
+      totalCount: reports.data.total_count,
     }"
     @loadMore="() => loadMore++"
     @columnWidthUpdated="() => triggerResize++"
@@ -45,80 +47,64 @@
     @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
     @likeDoc="(data) => viewControls.likeDoc(data)"
   />
+
   <div
-    v-else-if="contacts.data"
+    v-else-if="reports.data"
     class="flex h-full items-center justify-center"
   >
     <div
       class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
-      <ContactsIcon class="h-10 w-10" />
-      <span>{{ __('No {0} Found', [__('Contacts')]) }}</span>
-      <Button :label="__('Create')" @click="showContactModal = true">
+      <ReportsIcon class="h-10 w-10" />
+      <span>{{ __('No {0} Found', [__('Reports')]) }}</span>
+      <Button :label="__('Create')" @click="showReportModal = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </div>
   </div>
-  <ContactModal
-    v-model="showContactModal"
-    v-model:showQuickEntryModal="showQuickEntryModal"
-    :contact="{}"
-    @openAddressModal="(_address) => openAddressModal(_address)"
-  />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="Contact"
-  />
-  <AddressModal v-model="showAddressModal" v-model:address="address" />
+
+  <ReportModal v-model="showReportModal" v-model:report="report" />
 </template>
 
 <script setup>
 import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import CustomActions from '@/components/CustomActions.vue'
-import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import ReportsIcon from '@/components/Icons/DashboardIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import ContactModal from '@/components/Modals/ContactModal.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
-import ContactsListView from '@/components/ListViews/ContactsListView.vue'
+import ReportModal from '@/components/Modals/ReportDetailModal.vue'
+import ReportsListView from '../components/ListViews/ReportsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
-import { organizationsStore } from '@/stores/organizations.js'
+import { reportsStore } from '@/stores/reports.js'
 import { formatDate, timeAgo } from '@/utils'
-import { call } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
-  getMeta('Contact')
-const { getOrganization } = organizationsStore()
-
-const showContactModal = ref(false)
-const showQuickEntryModal = ref(false)
-const showAddressModal = ref(false)
+  getMeta('Report')
 
-const contactsListView = ref(null)
+const showReportModal = ref(false)
+const report = ref({})
 
-// contacts data is loaded in the ViewControls component
-const contacts = ref({})
-const address = ref({})
+// reports data is loaded in the ViewControls component
+const reports = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
 const viewControls = ref(null)
+const reportsListView= ref(null)  
 
 const rows = computed(() => {
   if (
-    !contacts.value?.data?.data ||
-    !['list', 'group_by'].includes(contacts.value.data.view_type)
+    !reports.value?.data?.data ||
+    !['list', 'group_by'].includes(reports.value.data.view_type)
   )
     return []
-  return contacts.value?.data.data.map((contact) => {
+  return reports.value?.data.data.map((reportData) => {
     let _rows = {}
-    contacts.value?.data.rows.forEach((row) => {
-      _rows[row] = contact[row]
+    reports.value?.data.rows.forEach((row) => {
+      _rows[row] = reportData[row]
 
-      let fieldType = contacts.value?.data.columns?.find(
+      let fieldType = reports.value?.data.columns?.find(
         (col) => (col.key || col.value) == row,
       )?.type
 
@@ -127,51 +113,29 @@ const rows = computed(() => {
         ['Date', 'Datetime'].includes(fieldType) &&
         !['modified', 'creation'].includes(row)
       ) {
-        _rows[row] = formatDate(contact[row], '', true, fieldType == 'Datetime')
+        _rows[row] = formatDate(reportData[row], '', true, fieldType == 'Datetime')
       }
 
       if (fieldType && fieldType == 'Currency') {
-        _rows[row] = getFormattedCurrency(row, contact)
+        _rows[row] = getFormattedCurrency(row, reportData)
       }
 
       if (fieldType && fieldType == 'Float') {
-        _rows[row] = getFormattedFloat(row, contact)
+        _rows[row] = getFormattedFloat(row, reportData)
       }
 
       if (fieldType && fieldType == 'Percent') {
-        _rows[row] = getFormattedPercent(row, contact)
+        _rows[row] = getFormattedPercent(row, reportData)
       }
 
-      if (row == 'full_name') {
+      if (row == 'modified' || row == 'creation') {
         _rows[row] = {
-          label: contact.full_name,
-          image_label: contact.full_name,
-          image: contact.image,
-        }
-      } else if (row == 'company_name') {
-        _rows[row] = {
-          label: contact.company_name,
-          logo: getOrganization(contact.company_name)?.organization_logo,
-        }
-      } else if (['modified', 'creation'].includes(row)) {
-        _rows[row] = {
-          label: formatDate(contact[row]),
-          timeAgo: __(timeAgo(contact[row])),
+          label: formatDate(reportData[row]),
+          timeAgo: __(timeAgo(reportData[row])),
         }
       }
     })
     return _rows
   })
 })
-
-async function openAddressModal(_address) {
-  if (_address) {
-    _address = await call('frappe.client.get', {
-      doctype: 'Address',
-      name: _address,
-    })
-  }
-  showAddressModal.value = true
-  address.value = _address || {}
-}
 </script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index ba968f3d6..b46b7c5d4 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -101,12 +101,12 @@ const routes = [
     name: 'Reports',
     component: () => import('@/pages/Reports.vue'),
   },
-  // {
-  //   path: '/reports/:reportName',
-  //   name: 'Report',
-  //   component: () => import(`@/pages/${handleMobileView('Report')}.vue`),
-  //   props: true,
-  // },
+  {
+    path: '/reports/:reportName',
+    name: 'Report',
+    component: () => import(`@/pages/${handleMobileView('Report')}.vue`),
+    props: true,
+  },
   
   {
     path: '/:invalidpath',
diff --git a/frontend/src/stores/reports.js b/frontend/src/stores/reports.js
new file mode 100644
index 000000000..26b6c55ef
--- /dev/null
+++ b/frontend/src/stores/reports.js
@@ -0,0 +1,102 @@
+
+import { defineStore } from 'pinia'
+import { createResource } from 'frappe-ui'
+import { userResource } from './user'
+import router from '@/router'
+import { ref, computed } from 'vue'
+
+
+export const reportsStore = {
+    reports: ref([]),
+    report: ref(null),
+  
+    // Method to fetch all reports
+    async fetchReports(page = 1, pageLength = 20) {
+      try {
+        const response = await call({
+          method: 'GET',
+          route: `/api/method/crm.api.get_reports`, // Adjust this API method according to your Frappe route
+          params: { page, page_length: pageLength }
+        })
+        
+        if (response && response.data) {
+          this.reports.value = response.data;
+        }
+      } catch (error) {
+        console.error('Error fetching reports:', error);
+      }
+    },
+  
+    // Method to fetch a specific report by ID
+    async fetchReportById(reportId) {
+      try {
+        const response = await call({
+          method: 'GET',
+          route: `/api/method/crm.api.get_report_by_id`,
+          params: { report_id: reportId }
+        })
+        
+        if (response && response.data) {
+          this.report.value = response.data;
+        }
+      } catch (error) {
+        console.error('Error fetching report by ID:', error);
+      }
+    },
+  
+    // Method to create a new report (if needed)
+    async createReport(reportData) {
+      try {
+        const response = await call({
+          method: 'POST',
+          route: `/api/method/crm.api.create_report`,
+          data: reportData
+        })
+  
+        if (response && response.data) {
+          // Optionally, update the reports list or report state after creation
+          this.reports.value.push(response.data);
+        }
+      } catch (error) {
+        console.error('Error creating report:', error);
+      }
+    },
+  
+    // Method to update an existing report
+    async updateReport(reportId, reportData) {
+      try {
+        const response = await call({
+          method: 'PUT',
+          route: `/api/method/crm.api.update_report`,
+          params: { report_id: reportId },
+          data: reportData
+        })
+  
+        if (response && response.data) {
+          // Optionally, update the report in the store
+          this.report.value = response.data;
+        }
+      } catch (error) {
+        console.error('Error updating report:', error);
+      }
+    },
+  
+    // Method to delete a report
+    async deleteReport(reportId) {
+      try {
+        const response = await call({
+          method: 'DELETE',
+          route: `/api/method/crm.api.delete_report`,
+          params: { report_id: reportId }
+        })
+  
+        if (response && response.data) {
+          // Optionally, remove the report from the store after deletion
+          this.reports.value = this.reports.value.filter(report => report.id !== reportId);
+        }
+      } catch (error) {
+        console.error('Error deleting report:', error);
+      }
+    }
+  }
+  
\ No newline at end of file