From 9746703433c5bf0639669223dd2e8579c752dbf2 Mon Sep 17 00:00:00 2001
From: Samuel Helbling <samy4sam@icloud.com>
Date: Fri, 31 Jan 2025 08:38:52 +0100
Subject: [PATCH] Added customer and supplier page, improved contact page,
 added email upload

---
 crm/api/customer.py                           |  87 ++
 crm/api/doc.py                                | 343 ++++++-
 crm/api/supplier.py                           |  77 ++
 .../src/components/Contact/ContactHeader.vue  |  54 +
 .../src/components/Contact/ContactProfile.vue |  85 ++
 .../src/components/Contact/ContactTabs.vue    | 172 ++++
 frontend/src/components/EmailDropZone.vue     | 140 +++
 .../src/components/Icons/CustomerIcon.vue     |  19 +
 frontend/src/components/Icons/DealIcon.vue    |  17 +
 frontend/src/components/Icons/ImageIcon.vue   |  18 +
 frontend/src/components/Icons/PdfIcon.vue     |  20 +
 frontend/src/components/Icons/SMSIcon.vue     |  16 +
 .../src/components/Icons/SupplierIcon.vue     |  19 +
 .../src/components/Layouts/AppSidebar.vue     | 122 ++-
 .../src/components/ListViews/BaseListView.vue | 225 ++++
 .../ListViews/CustomersListView.vue           |  55 +
 .../ListViews/SuppliersListView.vue           |  55 +
 .../src/components/Mobile/MobileHeader.vue    |  15 +
 .../src/components/Modals/CommentModal.vue    | 172 ++++
 .../components/Timeline/ActivityContent.vue   |  21 +
 .../src/components/Timeline/EmailContent.vue  | 111 ++
 .../src/components/Timeline/TimelineGroup.vue |  28 +
 .../src/components/Timeline/TimelineItem.vue  |  39 +
 .../src/components/Timeline/TimelineView.vue  |  97 ++
 frontend/src/pages/Contact.vue                | 961 ++++++++----------
 frontend/src/pages/Customer.vue               | 400 ++++++++
 frontend/src/pages/Customers.vue              | 139 +++
 frontend/src/pages/MobileCustomer.vue         | 132 +++
 frontend/src/pages/MobileSupplier.vue         | 124 +++
 frontend/src/pages/Supplier.vue               | 392 +++++++
 frontend/src/pages/Suppliers.vue              | 167 +++
 frontend/src/router.js                        |  24 +
 frontend/src/utils/erpnext.js                 |  22 +
 yarn.lock                                     |  20 +-
 34 files changed, 3817 insertions(+), 571 deletions(-)
 create mode 100644 crm/api/customer.py
 create mode 100644 crm/api/supplier.py
 create mode 100644 frontend/src/components/Contact/ContactHeader.vue
 create mode 100644 frontend/src/components/Contact/ContactProfile.vue
 create mode 100644 frontend/src/components/Contact/ContactTabs.vue
 create mode 100644 frontend/src/components/EmailDropZone.vue
 create mode 100644 frontend/src/components/Icons/CustomerIcon.vue
 create mode 100644 frontend/src/components/Icons/DealIcon.vue
 create mode 100644 frontend/src/components/Icons/ImageIcon.vue
 create mode 100644 frontend/src/components/Icons/PdfIcon.vue
 create mode 100644 frontend/src/components/Icons/SMSIcon.vue
 create mode 100644 frontend/src/components/Icons/SupplierIcon.vue
 create mode 100644 frontend/src/components/ListViews/BaseListView.vue
 create mode 100644 frontend/src/components/ListViews/CustomersListView.vue
 create mode 100644 frontend/src/components/ListViews/SuppliersListView.vue
 create mode 100644 frontend/src/components/Mobile/MobileHeader.vue
 create mode 100644 frontend/src/components/Modals/CommentModal.vue
 create mode 100644 frontend/src/components/Timeline/ActivityContent.vue
 create mode 100644 frontend/src/components/Timeline/EmailContent.vue
 create mode 100644 frontend/src/components/Timeline/TimelineGroup.vue
 create mode 100644 frontend/src/components/Timeline/TimelineItem.vue
 create mode 100644 frontend/src/components/Timeline/TimelineView.vue
 create mode 100644 frontend/src/pages/Customer.vue
 create mode 100644 frontend/src/pages/Customers.vue
 create mode 100644 frontend/src/pages/MobileCustomer.vue
 create mode 100644 frontend/src/pages/MobileSupplier.vue
 create mode 100644 frontend/src/pages/Supplier.vue
 create mode 100644 frontend/src/pages/Suppliers.vue
 create mode 100644 frontend/src/utils/erpnext.js

diff --git a/crm/api/customer.py b/crm/api/customer.py
new file mode 100644
index 000000000..111566a46
--- /dev/null
+++ b/crm/api/customer.py
@@ -0,0 +1,87 @@
+import frappe
+from frappe import _
+
+@frappe.whitelist()
+def get_customer_sections(customer):
+	"""Get sections for customer information"""
+	doc = frappe.get_doc("Customer", customer)
+	
+	basic_info = {
+		"title": "Basic Info",
+		"fields": [
+			{
+				"label": "Customer Name",
+				"value": doc.customer_name,
+				"type": "Data"
+			},
+			{
+				"label": "Customer Group",
+				"value": doc.customer_group,
+				"type": "Link"
+			},
+			{
+				"label": "Customer Type",
+				"value": doc.customer_type,
+				"type": "Select"
+			},
+			{
+				"label": "Territory",
+				"value": doc.territory,
+				"type": "Link"
+			}
+		]
+	}
+	
+	contact_info = {
+		"title": "Contact Info",
+		"fields": [
+			{
+				"label": "Email",
+				"value": doc.email_id,
+				"type": "Data"
+			},
+			{
+				"label": "Phone",
+				"value": doc.phone,
+				"type": "Data"
+			},
+			{
+				"label": "Mobile",
+				"value": doc.mobile_no,
+				"type": "Data"
+			},
+			{
+				"label": "Website",
+				"value": doc.website,
+				"type": "Data"
+			}
+		]
+	}
+	
+	financial_info = {
+		"title": "Financial Info",
+		"fields": [
+			{
+				"label": "Tax ID",
+				"value": doc.tax_id,
+				"type": "Data"
+			},
+			{
+				"label": "Default Currency",
+				"value": doc.default_currency,
+				"type": "Link"
+			},
+			{
+				"label": "Credit Limit",
+				"value": doc.credit_limit,
+				"type": "Currency"
+			},
+			{
+				"label": "Payment Terms",
+				"value": doc.payment_terms,
+				"type": "Link"
+			}
+		]
+	}
+	
+	return [basic_info, contact_info, financial_info]
\ No newline at end of file
diff --git a/crm/api/doc.py b/crm/api/doc.py
index ad2cf99ce..ad1715bd1 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -1,11 +1,16 @@
 import json
+import email
+from email import policy
+from email.parser import BytesParser
 
 import frappe
 from frappe import _
 from frappe.model import no_value_fields
 from frappe.model.document import get_controller
 from frappe.utils import make_filter_tuple
+from frappe.utils.file_manager import save_file
 from pypika import Criterion
+import email.utils
 
 from crm.api.views import get_views
 from crm.fcrm.doctype.crm_form_script.crm_form_script import get_form_script
@@ -205,6 +210,74 @@ def get_quick_filters(doctype: str):
 	return quick_filters
 
 
+def is_erpnext_doctype(doctype):
+	return doctype in ['Customer', 'Supplier']
+
+
+def get_erpnext_enabled():
+	try:
+		return frappe.db.get_single_value('ERPNext CRM Settings', 'enabled')
+	except:
+		return False
+
+
+def format_erpnext_data(data, doctype):
+	formatted_data = []
+	for d in data:
+		if doctype == 'Customer':
+			formatted_doc = {
+				'name': d.get('name'),
+				'customer_name': {
+					'name': d.get('name'),
+					'label': d.get('customer_name') or d.get('name'),
+					'logo': d.get('image')
+				},
+				'customer_group': {
+					'name': d.get('customer_group'),
+					'label': d.get('customer_group')
+				},
+				'territory': {
+					'name': d.get('territory'),
+					'label': d.get('territory')
+				},
+				'customer_type': {
+					'name': d.get('customer_type'),
+					'label': d.get('customer_type')
+				},
+				'modified': {
+					'label': str(d.get('modified')),
+					'timeAgo': str(d.get('modified'))
+				}
+			}
+		elif doctype == 'Supplier':
+			formatted_doc = {
+				'name': d.get('name'),
+				'supplier_name': {
+					'name': d.get('name'),
+					'label': d.get('supplier_name') or d.get('name'),
+					'logo': d.get('image')
+				},
+				'supplier_group': {
+					'name': d.get('supplier_group'),
+					'label': d.get('supplier_group')
+				},
+				'supplier_type': {
+					'name': d.get('supplier_type'),
+					'label': d.get('supplier_type')
+				},
+				'country': {
+					'name': d.get('country'),
+					'label': d.get('country')
+				},
+				'modified': {
+					'label': str(d.get('modified')),
+					'timeAgo': str(d.get('modified'))
+				}
+			}
+		formatted_data.append(formatted_doc)
+	return formatted_data
+
+
 @frappe.whitelist()
 def get_data(
 	doctype: str,
@@ -220,7 +293,45 @@ def get_data(
 	kanban_fields=[],
 	view=None,
 	default_filters=None,
-):
+):	
+	if is_erpnext_doctype(doctype) and get_erpnext_enabled():
+		# Get default data first to know what fields to fetch
+		default_data = get_erpnext_default_list_data(doctype)
+		fields_to_fetch = default_data.get("rows", [])
+		fields_to_fetch.extend(["image", "name"])  # Always fetch image and name
+		
+		# Get data from ERPNext with all needed fields
+		data = frappe.get_list(
+			doctype,
+			fields=fields_to_fetch,
+			filters=filters,
+			order_by=order_by or "modified desc",
+			page_length=page_length,
+			as_list=False
+		)
+		
+		# Format data
+		formatted_data = format_erpnext_data(data, doctype)
+		
+		# Get columns definition
+		column_list = default_data.get("columns", [])
+		row_list = default_data.get("rows", [])
+		return {
+			"data": formatted_data,
+			"columns": column_list,
+			"rows": row_list,
+			"fields": get_fields_meta(doctype, as_array=True),
+			"total_count": len(frappe.get_all(doctype, filters=filters)),
+			"row_count": len(data),
+			"views": [],
+			"form_script": None,
+			"list_script": None,
+			"view_type": "list",
+			"page_length": page_length,
+			"page_length_count": page_length_count
+		}
+
+	# Original implementation for non-ERPNext doctypes
 	custom_view = False
 	filters = frappe._dict(filters)
 	rows = frappe.parse_json(rows or "[]")
@@ -285,7 +396,12 @@ def get_data(
 			is_default = False
 		elif not custom_view or (is_default and hasattr(_list, "default_list_data")):
 			rows = default_rows
-			columns = _list.default_list_data().get("columns")
+			if doctype in ["Customer", "Supplier"]:
+				default_data = get_erpnext_default_list_data(doctype)
+				if default_data:
+					columns = default_data.get("columns")
+			else:
+				columns = _list.default_list_data().get("columns")
 
 		# check if rows has all keys from columns if not add them
 		for column in columns:
@@ -645,3 +761,226 @@ def getCounts(d, doctype):
 		"FCRM Note", filters={"reference_doctype": doctype, "reference_docname": d.get("name")}
 	)
 	return d
+
+
+def _get_default_column(label, fieldtype, key, width):
+	return {
+		"label": label,
+		"type": fieldtype,
+		"key": key,
+		"width": width
+	}
+
+def get_erpnext_default_list_data(doctype):
+	"""Get default list data configuration for ERPNext doctypes"""
+	if doctype == 'Customer':
+		return {
+			'columns': [
+				_get_default_column('Customer', 'Data', 'customer_name', '16rem'),
+				_get_default_column('Customer Group', 'Link', 'customer_group', '14rem'),
+				_get_default_column('Territory', 'Link', 'territory', '14rem'),
+				_get_default_column('Customer Type', 'Data', 'customer_type', '14rem'),
+				_get_default_column('Last Modified', 'Datetime', 'modified', '8rem')
+			],
+			'rows': [
+				'name', 'customer_name', 'customer_group', 
+				'territory', 'customer_type', 'modified'
+			]
+		}
+	elif doctype == 'Supplier':
+		return {
+			'columns': [
+				_get_default_column('Supplier', 'Data', 'supplier_name', '16rem'),
+				_get_default_column('Supplier Group', 'Link', 'supplier_group', '14rem'),
+				_get_default_column('Supplier Type', 'Data', 'supplier_type', '14rem'),
+				_get_default_column('Country', 'Link', 'country', '14rem'),
+				_get_default_column('Last Modified', 'Datetime', 'modified', '8rem')
+			],
+			'rows': [
+				'name', 'supplier_name', 'supplier_group',
+				'supplier_type', 'country', 'modified'
+			]
+		}
+	return None
+
+@frappe.whitelist()
+def get_timeline(doctype: str, name: str, for_contact: bool = False) -> list:
+    """Get timeline entries for a doctype"""
+    contacts = [frappe.get_doc("Contact", name)] if for_contact else get_contacts(doctype, name)
+    return _get_timeline(doctype, name, for_contact, contacts)
+
+@frappe.whitelist()
+def get_contacts_count(doctype: str, name: str) -> int:
+    """Get count of contacts linked to a doctype"""
+    return frappe.db.count("Contact", filters=[
+        ["Dynamic Link", "link_doctype", "=", doctype],
+        ["Dynamic Link", "link_name", "=", name]
+    ])
+
+@frappe.whitelist()
+def get_contacts(reference_doctype: str, reference_name: str) -> list:
+    """Get list of contacts linked to a reference doctype"""
+    return frappe.get_list(
+        "Contact",
+        filters=[
+            ["Dynamic Link", "link_doctype", "=", reference_doctype],
+            ["Dynamic Link", "link_name", "=", reference_name]
+        ],
+        fields=["name", "email_id", "phone", "modified"]
+    )
+
+@frappe.whitelist()
+def create_communication_from_eml(file_url: str, contact_name: str) -> dict:
+    """Create a Communication from an uploaded .eml file."""
+    try:
+        file = frappe.get_doc("File", {"file_url": file_url})
+        file_path = frappe.get_site_path("public", file.file_url.lstrip("/"))
+
+        with open(file_path, "rb") as f:
+            msg = BytesParser(policy=policy.default).parse(f)
+
+        # Create Communication
+        comm = frappe.new_doc("Communication")
+        comm.update({
+            "subject": msg["subject"],
+            "communication_medium": "Email",
+            "content": msg.get_body(preferencelist=("plain", "html")).get_content(),
+            "sender": msg["from"],
+            "recipients": msg["to"],
+            "communication_date": email.utils.parsedate_to_datetime(msg["date"]).replace(tzinfo=None),
+            "reference_doctype": "Contact",
+            "reference_name": contact_name,
+            "timeline_links": [{
+                "link_doctype": "Contact",
+                "link_name": contact_name
+            }]
+        })
+        comm.insert(ignore_permissions=True)
+
+        # Handle attachments
+        for part in msg.iter_attachments():
+            if file_name := part.get_filename():
+                save_file(
+                    file_name,
+                    part.get_payload(decode=True),
+                    "Communication",
+                    comm.name,
+                    "Home/Attachments"
+                )
+
+        return {"success": True, "communication": comm.name}
+    except Exception as e:
+        frappe.log_error(f"Failed to create communication from EML: {str(e)}")
+        return {"success": False, "error": str(e)}
+
+def _get_timeline(reference_doctype, reference_name, for_contact, contacts = None):
+    """Base timeline function that can be reused across doctypes"""
+    timeline = []
+    if contacts:
+        _add_contact_entries(timeline, contacts)
+
+    if not for_contact:
+        _add_reference_entries(timeline, reference_doctype, reference_name)
+    
+    timeline.sort(key=lambda x: x["timestamp"], reverse=True)
+    return timeline
+
+def _get_comments(reference_doctype, reference_name):
+    return frappe.get_list(
+        'Comment',
+        filters={
+            'reference_doctype': reference_doctype,
+            'reference_name': reference_name,
+            'comment_type': 'Comment'
+        },
+        fields=['name', 'content', 'comment_by', 'creation', 'owner'],
+        order_by='creation desc'
+    )
+
+def _get_emails(reference_doctype, reference_name):
+    return frappe.get_list(
+        "Communication",
+        filters={
+            'reference_doctype': reference_doctype,
+            'reference_name': reference_name
+        },
+        fields=[
+            "name", "subject", "content", "communication_type",
+            "communication_medium", "creation", "owner", "sender",
+            "sender_full_name", "recipients", "delivery_status", "communication_date"
+        ],
+        order_by="creation desc"
+    )
+
+def _get_notes(reference_doctype, reference_name):
+    return frappe.get_list(
+        "FCRM Note",
+        fields=["name", "title", "content", "owner", "modified"],
+        filters={
+            "reference_doctype": reference_doctype,
+            "reference_docname": reference_name
+        },
+        order_by="modified desc"
+    )
+
+def _add_reference_entries(timeline, reference_doctype, reference_name):
+    _add_comments(timeline, reference_doctype, reference_name)
+    _add_emails(timeline, reference_doctype, reference_name)
+    _add_notes(timeline, reference_doctype, reference_name)
+
+def _add_contact_entries(timeline, contacts):
+    for contact in contacts:
+        _add_reference_entries(timeline, "Contact", contact.name)
+
+def _add_comments(timeline, reference_doctype, reference_name):
+	for comment in _get_comments(reference_doctype, reference_name):
+		if reference_doctype == "Contact":
+			title = "Comment"
+		else:
+			title = "Comment regarding " + reference_name
+
+		timeline.append({
+			"type": "comment",
+			"title": title,
+			"description": comment.content,
+			"timestamp": comment.creation,
+			"owner": comment.owner,
+			"reference": {
+				"type": "Comment",
+				"name": comment.name
+			}
+		})
+
+def _add_emails(timeline, reference_doctype, reference_name):
+    for email in _get_emails(reference_doctype, reference_name):
+        timeline.append({
+            "type": "email",
+            "title": email.subject,
+            "description": email.content,
+            "reference": {
+                "type": "Communication",
+                "name": email.name
+            },
+            "owner": email.sender,
+            "timestamp": email.communication_date,
+            "details": {
+                "sender": email.sender,
+                "sender_name": email.sender_full_name,
+                "recipients": email.recipients,
+                "contact": reference_name
+            }
+        })
+
+def _add_notes(timeline, reference_doctype, reference_name):
+    for note in _get_notes(reference_doctype, reference_name):
+        timeline.append({
+            "type": "note",
+            "title": note.title,
+            "description": note.content,
+            "reference": {
+                "type": "Note",
+                "name": note.name
+            },
+            "owner": note.owner,
+            "timestamp": note.modified
+        })
\ No newline at end of file
diff --git a/crm/api/supplier.py b/crm/api/supplier.py
new file mode 100644
index 000000000..a23db4518
--- /dev/null
+++ b/crm/api/supplier.py
@@ -0,0 +1,77 @@
+import frappe
+from frappe import _
+
+@frappe.whitelist()
+def get_supplier_sections(supplier):
+	"""Get sections for supplier information"""
+	doc = frappe.get_doc("Supplier", supplier)
+	
+	basic_info = {
+		"title": "Basic Info",
+		"fields": [
+			{
+				"label": "Supplier Name",
+				"value": doc.supplier_name,
+				"type": "Data"
+			},
+			{
+				"label": "Supplier Group",
+				"value": doc.supplier_group,
+				"type": "Link"
+			},
+			{
+				"label": "Supplier Type",
+				"value": doc.supplier_type,
+				"type": "Select"
+			}
+		]
+	}
+	
+	contact_info = {
+		"title": "Contact Info",
+		"fields": [
+			{
+				"label": "Email",
+				"value": doc.email_id,
+				"type": "Data"
+			},
+			{
+				"label": "Phone",
+				"value": doc.phone,
+				"type": "Data"
+			},
+			{
+				"label": "Mobile",
+				"value": doc.mobile_no,
+				"type": "Data"
+			},
+			{
+				"label": "Website",
+				"value": doc.website,
+				"type": "Data"
+			}
+		]
+	}
+	
+	financial_info = {
+		"title": "Financial Info",
+		"fields": [
+			{
+				"label": "Tax ID",
+				"value": doc.tax_id,
+				"type": "Data"
+			},
+			{
+				"label": "Default Currency",
+				"value": doc.default_currency,
+				"type": "Link"
+			},
+			{
+				"label": "Payment Terms",
+				"value": doc.payment_terms,
+				"type": "Link"
+			}
+		]
+	}
+	
+	return [basic_info, contact_info, financial_info]
\ No newline at end of file
diff --git a/frontend/src/components/Contact/ContactHeader.vue b/frontend/src/components/Contact/ContactHeader.vue
new file mode 100644
index 000000000..ab3b0ab20
--- /dev/null
+++ b/frontend/src/components/Contact/ContactHeader.vue
@@ -0,0 +1,54 @@
+<template>
+  <LayoutHeader v-if="contact">
+    <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>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { getView } from '@/utils/view'
+import Icon from '@/components/Icon.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import { Breadcrumbs } from 'frappe-ui'
+
+const props = defineProps({
+  contact: {
+    type: Object,
+    required: true
+  }
+})
+
+const route = useRoute()
+
+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: props.contact?.full_name,
+    route: { name: 'Contact', params: { contactId: props.contact.name } },
+  })
+  return items
+})
+</script> 
\ No newline at end of file
diff --git a/frontend/src/components/Contact/ContactProfile.vue b/frontend/src/components/Contact/ContactProfile.vue
new file mode 100644
index 000000000..635e98477
--- /dev/null
+++ b/frontend/src/components/Contact/ContactProfile.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="border-b">
+    <FileUploader @success="handleImageChange" :validateFile="validateFile">
+      <template #default="{ openFileSelector }">
+        <div class="flex flex-col items-start justify-start gap-4 p-5">
+
+          <div class="relative group cursor-pointer" @click="openFileSelector">
+            <Avatar
+              :image="contact.image"
+              :label="contact.full_name"
+              size="2xl"
+              class="rounded-full transition-all duration-200 group-hover:opacity-75"
+            />
+            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+              <div class="p-2 bg-black bg-opacity-50 rounded-full">
+                <FeatherIcon name="camera" class="w-5 h-5 text-white" />
+              </div>
+            </div>
+          </div>
+
+          <div class="flex gap-2 w-full">
+            <Button
+              v-if="callEnabled && contact.mobile_no"
+              class="w-full"
+              variant="solid"
+              @click="makeCall"
+            >
+              <template #prefix>
+                <FeatherIcon name="phone" class="w-4 h-4" />
+              </template>
+              {{ __('Call') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+    </FileUploader>
+  </div>
+</template>
+
+<script setup>
+import { Avatar, FileUploader, Button, FeatherIcon } from 'frappe-ui'
+import { callEnabled } from '@/composables/settings'
+
+const props = defineProps({
+  contact: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update'])
+
+function validateFile(file) {
+  let extn = file.name.split('.').pop().toLowerCase()
+  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
+    return __('Only PNG and JPG images are allowed')
+  }
+}
+
+async function handleImageChange(file) {
+  await call('frappe.client.set_value', {
+    doctype: 'Contact',
+    name: props.contact.name,
+    fieldname: 'image',
+    value: file?.file_url || '',
+  })
+  emit('update')
+}
+
+function makeCall() {
+  if (props.contact.mobile_no) {
+    window.location.href = `tel:${props.contact.mobile_no}`
+  }
+}
+</script>
+
+<style scoped>
+.group:hover .group-hover\:opacity-75 {
+  opacity: 0.75;
+}
+
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+</style> 
\ No newline at end of file
diff --git a/frontend/src/components/Contact/ContactTabs.vue b/frontend/src/components/Contact/ContactTabs.vue
new file mode 100644
index 000000000..933fd4b59
--- /dev/null
+++ b/frontend/src/components/Contact/ContactTabs.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="flex-1 flex flex-col overflow-hidden">
+    <div class="border-b px-5 flex items-center">
+      <div class="flex gap-4 h-12 overflow-x-hidden">
+        <button
+          v-for="(tab, index) in tabs"
+          :key="index"
+          class="flex items-center gap-2 px-4 py-2 text-sm font-medium whitespace-nowrap"
+          :class="{
+            'text-gray-900 border-b-2 border-gray-900': modelValue === index,
+            'text-gray-600 hover:text-gray-900': modelValue !== index
+          }"
+          @click="emit('update:modelValue', index)"
+        >
+          <component :is="tab.icon" class="h-4 w-4" />
+          {{ __(tab.label) }}
+          <span
+            v-if="tab.count > 0"
+            class="ml-2 rounded-full bg-gray-100 px-2 py-0.5 text-xs"
+          >
+            {{ tab.count }}
+          </span>
+        </button>
+      </div>
+    </div>
+    <div class="flex-1 overflow-y-auto overflow-x-hidden">
+
+      <div v-if="modelValue === 0" class="p-5">
+        <TimelineView
+          v-if="contact?.name"
+          :items="timeline || []"
+          :doctype="'Contact'"
+          :docname="contact?.name"
+          @comment-added="$emit('comment-added')"
+        />
+      </div>
+      <div v-else-if="modelValue === 1" class="p-5">
+        <div v-if="deals?.length" class="space-y-4">
+          <ListView
+            :rows="rows"
+            :columns="columns"
+            :options="{
+              getRowRoute: (row) => ({
+                name: 'Deal',
+                params: { dealId: row?.name },
+              }),
+            }"
+          >
+            <ListHeader>
+              <ListHeaderItem
+                v-for="column in columns"
+                :key="column.key"
+                :item="column"
+              />
+            </ListHeader>
+            <ListRows :rows="rows" v-slot="{ column, item }">
+              <ListRowItem :item="item" :align="column?.align">
+                <template #prefix>
+                  <div v-if="column?.key === 'organization'">
+                    <Avatar
+                      v-if="item"
+                      class="flex items-center"
+                      :image="item?.logo"
+                      :label="item?.label"
+                      size="sm"
+                    />
+                  </div>
+                </template>
+                <template #default="{ label }">
+                  <div
+                    v-if="column?.key === 'modified'"
+                    class="truncate text-base"
+                  >
+                    <Tooltip :text="item?.label">
+                      <div>{{ item?.timeAgo }}</div>
+                    </Tooltip>
+                  </div>
+                  <div v-else-if="column?.key === 'status'" class="flex items-center gap-2">
+                    <div
+                      class="h-2 w-2 rounded-full"
+                      :style="{ backgroundColor: item?.color }"
+                    />
+                    <span>{{ item?.label }}</span>
+                  </div>
+                  <div v-else-if="column?.key === 'deal_owner'" class="flex items-center gap-2">
+                    <Avatar
+                      v-if="item"
+                      :image="item?.image"
+                      :label="item?.label"
+                      size="sm"
+                    />
+                    <span>{{ item?.label }}</span>
+                  </div>
+                  <div v-else class="truncate text-base">
+                    {{ item?.label }}
+                  </div>
+                </template>
+              </ListRowItem>
+            </ListRows>
+          </ListView>
+        </div>
+        <div v-else class="text-center text-gray-600 py-8">
+          {{ __('No deals found') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import {
+  ListView,
+  ListHeader,
+  ListHeaderItem,
+  ListRows,
+  ListRowItem,
+  Avatar,
+  Tooltip,
+} from 'frappe-ui'
+import TimelineView from '@/components/Timeline/TimelineView.vue'
+import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
+import DealsIcon from '@/components/Icons/DealsIcon.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
+  },
+  timeline: {
+    type: Array,
+    default: () => [],
+  },
+  deals: {
+    type: Array,
+    default: () => [],
+  },
+  contact: {
+    type: Object,
+    default: () => ({}),
+  },
+  rows: {
+    type: Array,
+    default: () => [],
+  },
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'comment-added'])
+
+const tabs = computed(() => [
+  {
+    label: 'Timeline',
+    icon: CalendarIcon,
+    count: props.timeline?.length || 0,
+  },
+  {
+    label: 'Deals',
+    icon: DealsIcon,
+    count: props.deals?.length || 0,
+  },
+])
+</script>
+
+<style scoped>
+.tab-content {
+  height: calc(100vh - 12rem);
+}
+</style> 
\ No newline at end of file
diff --git a/frontend/src/components/EmailDropZone.vue b/frontend/src/components/EmailDropZone.vue
new file mode 100644
index 000000000..e76ec4279
--- /dev/null
+++ b/frontend/src/components/EmailDropZone.vue
@@ -0,0 +1,140 @@
+<template>
+  <div
+    class="relative border-2 border-dashed rounded-lg p-6 text-center transition-colors duration-200"
+    :class="{
+      'border-gray-300': !isDragging,
+      'border-blue-500 bg-blue-50': isDragging,
+    }"
+    @dragenter.prevent
+    @dragover.prevent="handleDragOver"
+    @dragleave.prevent="handleDragLeave"
+    @drop.prevent="handleDrop"
+  >
+    <div class="flex flex-col items-center justify-center space-y-2">
+    <FeatherIcon name="mail" class="w-8 h-8 text-gray-400" />
+      <p class="text-base text-gray-600">
+        Drag and drop Email files here to add to contact
+      </p>
+      <p class="text-sm text-gray-500">
+        Only .eml files are supported
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { call, FeatherIcon } from 'frappe-ui'
+import { createToast } from '@/utils'
+import FilesUploadHandler from './FilesUploader/filesUploaderHandler'
+
+const props = defineProps({
+  contactName: {
+    type: String,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['upload-complete'])
+
+const isDragging = ref(false)
+const uploader = ref(null)
+
+onMounted(() => {
+  uploader.value = new FilesUploadHandler()
+})
+
+function handleDragOver() {
+  isDragging.value = true
+}
+
+function handleDragLeave() {
+  isDragging.value = false
+}
+
+async function handleDrop(event) {
+  isDragging.value = false
+  const files = event.dataTransfer?.files || []
+
+  if (!files.length) {
+    showErrorToast('No files dropped')
+    return
+  }
+
+  const file = files[0]
+  if (!isValidFile(file)) {
+    showErrorToast('Only .eml files are allowed')
+    return
+  }
+
+  try {
+    await uploadFile(file)
+    showSuccessToast('Email file uploaded and communication created')
+    emit('upload-complete')
+  } catch (error) {
+    console.error('Upload error:', error)
+    showErrorToast(error.message || 'Failed to upload file')
+  }
+}
+
+function isValidFile(file) {
+  return file.name.endsWith('.eml')
+}
+
+async function uploadFile(file) {
+  try {
+
+    const uploadResponse = await uploader.value.upload(file, {
+      fileObj: file,
+      folder: 'Home/Attachments',
+      is_private: false,
+    })
+
+    if (!uploadResponse?.file_url) {
+      throw new Error('File upload failed: No file URL returned')
+    }
+
+    const communicationResponse = await call('crm.api.doc.create_communication_from_eml', {
+        file_url: uploadResponse.file_url,
+        contact_name: props.contactName
+      }
+    )
+
+    if (!communicationResponse) {
+      throw new Error('Failed to create communication from EML file')
+    }
+    else if (!communicationResponse?.success) {
+      throw new Error(communicationResponse?.error)
+    }
+
+    return communicationResponse.message
+  } catch (error) {
+    console.error('Upload error:', error)
+    throw new Error(error.message || 'Failed to process email file')
+  }
+}
+
+function showErrorToast(message) {
+  createToast({
+    title: 'Error',
+    text: message,
+    icon: 'x',
+    iconClasses: 'text-red-500',
+  })
+}
+
+function showSuccessToast(message) {
+  createToast({
+    title: 'Success',
+    text: message,
+    icon: 'check',
+    iconClasses: 'text-green-500',
+  })
+}
+</script>
+
+<style scoped>
+.border-dashed {
+  border-style: dashed;
+}
+</style> 
\ No newline at end of file
diff --git a/frontend/src/components/Icons/CustomerIcon.vue b/frontend/src/components/Icons/CustomerIcon.vue
new file mode 100644
index 000000000..18ebc705e
--- /dev/null
+++ b/frontend/src/components/Icons/CustomerIcon.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-users"
+  >
+    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+    <circle cx="9" cy="7" r="4"></circle>
+    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+  </svg>
+</template> 
\ No newline at end of file
diff --git a/frontend/src/components/Icons/DealIcon.vue b/frontend/src/components/Icons/DealIcon.vue
new file mode 100644
index 000000000..875a064a3
--- /dev/null
+++ b/frontend/src/components/Icons/DealIcon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-briefcase"
+  >
+    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
+    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
+  </svg>
+</template> 
\ No newline at end of file
diff --git a/frontend/src/components/Icons/ImageIcon.vue b/frontend/src/components/Icons/ImageIcon.vue
new file mode 100644
index 000000000..2588fd415
--- /dev/null
+++ b/frontend/src/components/Icons/ImageIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-image"
+  >
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+    <circle cx="8.5" cy="8.5" r="1.5"></circle>
+    <polyline points="21 15 16 10 5 21"></polyline>
+  </svg>
+</template> 
\ No newline at end of file
diff --git a/frontend/src/components/Icons/PdfIcon.vue b/frontend/src/components/Icons/PdfIcon.vue
new file mode 100644
index 000000000..6134e442b
--- /dev/null
+++ b/frontend/src/components/Icons/PdfIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-file-text"
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+    <polyline points="14 2 14 8 20 8"></polyline>
+    <line x1="16" y1="13" x2="8" y2="13"></line>
+    <line x1="16" y1="17" x2="8" y2="17"></line>
+    <polyline points="10 9 9 9 8 9"></polyline>
+  </svg>
+</template> 
\ No newline at end of file
diff --git a/frontend/src/components/Icons/SMSIcon.vue b/frontend/src/components/Icons/SMSIcon.vue
new file mode 100644
index 000000000..ce32d9013
--- /dev/null
+++ b/frontend/src/components/Icons/SMSIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-message-square"
+  >
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+  </svg>
+</template> 
\ No newline at end of file
diff --git a/frontend/src/components/Icons/SupplierIcon.vue b/frontend/src/components/Icons/SupplierIcon.vue
new file mode 100644
index 000000000..640bfcf36
--- /dev/null
+++ b/frontend/src/components/Icons/SupplierIcon.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-truck"
+  >
+    <rect x="1" y="3" width="15" height="13"></rect>
+    <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
+    <circle cx="5.5" cy="18.5" r="2.5"></circle>
+    <circle cx="18.5" cy="18.5" r="2.5"></circle>
+  </svg>
+</template> 
\ No newline at end of file
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index d4906834b..8149a207b 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -117,55 +117,85 @@ import {
 } from '@/stores/notifications'
 import { FeatherIcon } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
-import { computed, h } from 'vue'
+import { computed, h, ref, onMounted } from 'vue'
+import CustomerIcon from '@/components/Icons/CustomerIcon.vue'
+import SupplierIcon from '@/components/Icons/SupplierIcon.vue'
+import { checkERPNextEnabled } from '@/utils/erpnext'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
 
 const isSidebarCollapsed = useStorage('isSidebarCollapsed', false)
 
-const links = [
-  {
-    label: 'Leads',
-    icon: LeadsIcon,
-    to: 'Leads',
-  },
-  {
-    label: 'Deals',
-    icon: DealsIcon,
-    to: 'Deals',
-  },
-  {
-    label: 'Contacts',
-    icon: ContactsIcon,
-    to: 'Contacts',
-  },
-  {
-    label: 'Organizations',
-    icon: OrganizationsIcon,
-    to: 'Organizations',
-  },
-  {
-    label: 'Notes',
-    icon: NoteIcon,
-    to: 'Notes',
-  },
-  {
-    label: 'Tasks',
-    icon: TaskIcon,
-    to: 'Tasks',
-  },
-  {
-    label: 'Call Logs',
-    icon: PhoneIcon,
-    to: 'Call Logs',
-  },
-  {
-    label: 'Email Templates',
-    icon: Email2Icon,
-    to: 'Email Templates',
-  },
-]
+const isERPNextEnabled = ref(false)
+
+onMounted(async () => {
+  isERPNextEnabled.value = await checkERPNextEnabled()
+})
+
+const links = computed(() => {
+  let baseLinks = [
+    {
+      label: 'Leads',
+      icon: LeadsIcon,
+      to: 'Leads',
+    },
+    {
+      label: 'Deals',
+      icon: DealsIcon,
+      to: 'Deals',
+    },
+    {
+      label: 'Contacts',
+      icon: ContactsIcon,
+      to: 'Contacts',
+    },
+    {
+      label: 'Organizations',
+      icon: OrganizationsIcon,
+      to: 'Organizations',
+    }
+  ]
+
+  if (isERPNextEnabled.value) {
+    baseLinks.push(
+      {
+        label: 'Customers',
+        icon: CustomerIcon,
+        to: 'Customers',
+      },
+      {
+        label: 'Suppliers',
+        icon: SupplierIcon,
+        to: 'Suppliers',
+      }
+    )
+  }
+
+  return [
+    ...baseLinks,
+    {
+      label: 'Notes',
+      icon: NoteIcon,
+      to: 'Notes',
+    },
+    {
+      label: 'Tasks',
+      icon: TaskIcon,
+      to: 'Tasks',
+    },
+    {
+      label: 'Call Logs',
+      icon: PhoneIcon,
+      to: 'Call Logs',
+    },
+    {
+      label: 'Email Templates',
+      icon: Email2Icon,
+      to: 'Email Templates',
+    },
+  ]
+})
 
 const allViews = computed(() => {
   let _views = [
@@ -173,7 +203,7 @@ const allViews = computed(() => {
       name: 'All Views',
       hideLabel: true,
       opened: true,
-      views: links,
+      views: links.value,
     },
   ]
   if (getPublicViews().length) {
@@ -220,6 +250,10 @@ function getIcon(routeName, icon) {
       return ContactsIcon
     case 'Organizations':
       return OrganizationsIcon
+    case 'Customers':
+      return CustomerIcon
+    case 'Suppliers':
+      return SupplierIcon
     case 'Notes':
       return NoteIcon
     case 'Call Logs':
diff --git a/frontend/src/components/ListViews/BaseListView.vue b/frontend/src/components/ListViews/BaseListView.vue
new file mode 100644
index 000000000..73c644121
--- /dev/null
+++ b/frontend/src/components/ListViews/BaseListView.vue
@@ -0,0 +1,225 @@
+<template>
+  <ListView
+    :columns="columns"
+    :rows="rows"
+    :options="{
+      getRowRoute: (row) => ({
+        name: doctype,
+        params: { [routeParamKey]: row.label?.name || 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="sm:mx-5 mx-3"
+      @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="doctype"
+    >
+      <ListRowItem :item="item" :align="column.align">
+        <template #prefix>
+          <div v-if="column.key === nameField">
+            <Avatar
+              v-if="item"
+              class="flex items-center"
+              :image="item.logo"
+              :label="typeof item === 'object' ? item.label.name || item.name : item"
+              size="sm"
+            />
+          </div>
+        </template>
+        <template #default="{ label }">
+          <div
+            v-if="['modified', 'creation'].includes(column.key)"
+            class="truncate text-base"
+            @click="handleFilterClick(event, idx, column, item)"
+          >
+            <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
+              variant="ghosted"
+              :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+              @click.stop.prevent="handleLikeClick(row, item)"
+            >
+              <HeartIcon class="h-4 w-4" />
+            </Button>
+          </div>
+          <div
+            v-else
+            class="truncate text-base"
+            @click="handleFilterClick(event, idx, column, item)"
+          >
+            {{ item.label && typeof item.label === 'object' ? item.label.name : item.name }}
+          </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
+    class="border-t sm:px-5 px-3 py-2"
+    v-model="pageLengthCount"
+    :options="{
+      rowCount: options.rowCount,
+      totalCount: options.totalCount,
+    }"
+    @loadMore="emit('loadMore')"
+  />
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
+    :doctype="doctype"
+    :options="{
+      hideAssign: true,
+    }"
+  />
+</template>
+
+<script setup>
+import HeartIcon from '@/components/Icons/HeartIcon.vue'
+import ListBulkActions from '@/components/ListBulkActions.vue'
+import ListRows from '@/components/ListViews/ListRows.vue'
+import {
+  Avatar,
+  ListView,
+  ListHeader,
+  ListHeaderItem,
+  ListSelectBanner,
+  ListRowItem,
+  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,
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      selectable: true,
+      showTooltip: true,
+      resizeColumn: false,
+      totalCount: 0,
+      rowCount: 0,
+    }),
+  },
+  doctype: {
+    type: String,
+    required: true,
+  },
+  routeParamKey: {
+    type: String,
+    required: true,
+  },
+  nameField: {
+    type: String,
+    required: true,
+  },
+})
+
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'columnWidthUpdated',
+  'applyFilter',
+  'applyLikeFilter',
+  'likeDoc',
+])
+
+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
+})
+
+function isLiked(item) {
+  if (item) {
+    let likedByMe = JSON.parse(item)
+    return likedByMe.includes(user)
+  }
+  return false
+}
+
+function handleFilterClick(event, idx, column, item) {
+  emit('applyFilter', {
+    event,
+    idx,
+    column,
+    item,
+    firstColumn: props.columns[0],
+  })
+}
+
+function handleLikeClick(row, item) {
+  emit('likeDoc', { name: row.name, liked: isLiked(item) })
+}
+
+watch(pageLengthCount, (val, old_value) => {
+  if (val === old_value) return
+  emit('updatePageCount', val)
+})
+
+defineExpose({
+  customListActions: computed(() => listBulkActionsRef.value?.customListActions),
+})
+</script> 
\ No newline at end of file
diff --git a/frontend/src/components/ListViews/CustomersListView.vue b/frontend/src/components/ListViews/CustomersListView.vue
new file mode 100644
index 000000000..fe0f9209a
--- /dev/null
+++ b/frontend/src/components/ListViews/CustomersListView.vue
@@ -0,0 +1,55 @@
+<template>
+  <BaseListView
+    :columns="columns"
+    :rows="rows"
+    :options="options"
+    doctype="Customer"
+    routeParamKey="customerId"
+    nameField="customer_name"
+    v-model="pageLengthCount"
+    v-model:list="list"
+    @loadMore="emit('loadMore')"
+    @updatePageCount="emit('updatePageCount')"
+    @columnWidthUpdated="emit('columnWidthUpdated')"
+    @applyFilter="emit('applyFilter', $event)"
+    @applyLikeFilter="emit('applyLikeFilter')"
+    @likeDoc="emit('likeDoc', $event)"
+  />
+</template>
+
+<script setup>
+import BaseListView from './BaseListView.vue'
+
+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 pageLengthCount = defineModel()
+const list = defineModel('list')
+</script> 
\ No newline at end of file
diff --git a/frontend/src/components/ListViews/SuppliersListView.vue b/frontend/src/components/ListViews/SuppliersListView.vue
new file mode 100644
index 000000000..37b2b6c20
--- /dev/null
+++ b/frontend/src/components/ListViews/SuppliersListView.vue
@@ -0,0 +1,55 @@
+<template>
+  <BaseListView
+    :columns="columns"
+    :rows="rows"
+    :options="options"
+    doctype="Supplier"
+    routeParamKey="supplierId"
+    nameField="supplier_name"
+    v-model="pageLengthCount"
+    v-model:list="list"
+    @loadMore="emit('loadMore')"
+    @updatePageCount="emit('updatePageCount')"
+    @columnWidthUpdated="emit('columnWidthUpdated')"
+    @applyFilter="emit('applyFilter', $event)"
+    @applyLikeFilter="emit('applyLikeFilter')"
+    @likeDoc="emit('likeDoc', $event)"
+  />
+</template>
+
+<script setup>
+import BaseListView from './BaseListView.vue'
+
+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 pageLengthCount = defineModel()
+const list = defineModel('list')
+</script> 
\ No newline at end of file
diff --git a/frontend/src/components/Mobile/MobileHeader.vue b/frontend/src/components/Mobile/MobileHeader.vue
new file mode 100644
index 000000000..ae12529d9
--- /dev/null
+++ b/frontend/src/components/Mobile/MobileHeader.vue
@@ -0,0 +1,15 @@
+<template>
+  <header class="flex h-14 items-center justify-between border-b bg-white px-4">
+    <div class="flex items-center gap-3">
+      <slot name="left"></slot>
+    </div>
+    <div class="flex-1 text-center">
+      <h1 class="text-base font-medium text-gray-900">
+        <slot name="title"></slot>
+      </h1>
+    </div>
+    <div class="flex items-center gap-3">
+      <slot name="right"></slot>
+    </div>
+  </header>
+</template> 
\ No newline at end of file
diff --git a/frontend/src/components/Modals/CommentModal.vue b/frontend/src/components/Modals/CommentModal.vue
new file mode 100644
index 000000000..cd34de431
--- /dev/null
+++ b/frontend/src/components/Modals/CommentModal.vue
@@ -0,0 +1,172 @@
+<template>
+    <Dialog
+        :modelValue="show"
+        :title="__('Add Comment')"
+        @update:modelValue="handleDialogUpdate"
+        @close="handleClose"
+        class="comment-dialog"
+    >
+        <template #body>
+            <div class="space-y-6 p-4">
+                <!-- User Info -->
+                <div class="flex items-center gap-3">
+                    <Avatar
+                        :label="userInitials"
+                        :image="userImage"
+                        size="md"
+                        class="bg-blue-100"
+                    />
+                    <div>
+                        <div class="font-medium text-gray-900">{{ userName }}</div>
+                        <div class="text-sm text-gray-500">{{ userEmail }}</div>
+                    </div>
+                </div>
+
+                <!-- Comment Input -->
+                <div class="relative">
+                    <textarea
+                        v-model="newComment"
+                        class="w-full p-4 border rounded-lg resize-none transition-shadow duration-200 bg-gray-50"
+                        :class="{ 'border-gray-300': !newComment.trim(), 'border-gray-400': newComment.trim() }"
+                        rows="4"
+                        :placeholder="__('Write your comment here...')"
+                        @keydown.ctrl.enter="submitComment"
+                    ></textarea>
+                    <div class="absolute bottom-2 right-2 text-xs text-gray-400">
+                        {{ __('Press Ctrl + Enter to submit') }}
+                    </div>
+                </div>
+
+                <!-- Action Buttons -->
+                <div class="flex justify-end gap-3">
+                    <Button
+                        variant="subtle"
+                        @click="handleClose"
+                        class="hover:bg-gray-100 transition-colors duration-200"
+                    >
+                        {{ __('Cancel') }}
+                    </Button>
+                    <Button
+                        variant="solid"
+                        :disabled="!newComment.trim()"
+                        @click="submitComment"
+                        :loading="isSubmitting"
+                        class="bg-gray-900 hover:bg-gray-800 text-white transition-colors duration-200"
+                    >
+                        {{ __('Post Comment') }}
+                    </Button>
+                </div>
+            </div>
+        </template>
+    </Dialog>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { call } from 'frappe-ui'
+import { usersStore } from '@/stores/users'
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        required: true
+    },
+    doctype: {
+        type: String,
+        required: true
+    },
+    docname: {
+        type: String,
+        required: true
+    }
+})
+
+const emit = defineEmits(['update:show', 'comment-added'])
+const { getUser } = usersStore()
+const currentUser = computed(() => getUser())
+
+const newComment = ref('')
+const isSubmitting = ref(false)
+
+// User information
+const userName = computed(() => currentUser.value?.full_name || '')
+const userEmail = computed(() => currentUser.value?.email || '')
+const userImage = computed(() => currentUser.value?.user_image || '')
+const userInitials = computed(() => {
+    const name = userName.value
+    return name
+        .split(' ')
+        .map(word => word[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2)
+})
+
+function handleDialogUpdate(value) {
+    emit('update:show', value)
+}
+
+function handleClose() {
+    newComment.value = ''
+    emit('update:show', false)
+}
+
+async function submitComment() {
+    if (!newComment.value.trim() || isSubmitting.value) return
+
+    isSubmitting.value = true
+    try {
+        await call('frappe.desk.form.utils.add_comment', {
+            reference_doctype: props.doctype,
+            reference_name: props.docname,
+            content: newComment.value,
+            comment_email: userEmail.value,
+            comment_by: userName.value
+        })
+        
+        emit('comment-added')
+        handleClose()
+    } catch (error) {
+        console.error('Error adding comment:', error)
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
+
+<style scoped>
+.comment-dialog :deep(.dialog-container) {
+    max-width: 600px;
+}
+
+.comment-dialog textarea {
+    min-height: 120px;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.comment-dialog textarea:focus {
+    outline: none;
+    border-color: #9ca3af; /* gray-400 */
+    box-shadow: none;
+}
+
+/* Custom scrollbar for textarea */
+.comment-dialog textarea::-webkit-scrollbar {
+    width: 8px;
+}
+
+.comment-dialog textarea::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+.comment-dialog textarea::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 4px;
+}
+
+.comment-dialog textarea::-webkit-scrollbar-thumb:hover {
+    background: #999;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Timeline/ActivityContent.vue b/frontend/src/components/Timeline/ActivityContent.vue
new file mode 100644
index 000000000..b96eabe0c
--- /dev/null
+++ b/frontend/src/components/Timeline/ActivityContent.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="text-sm text-gray-600 mt-2">
+    <template v-if="activity.type === 'email'">
+      <EmailContent :activity="activity" />
+    </template>
+    <template v-else>
+      <div v-html="activity.description"></div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import EmailContent from './EmailContent.vue'
+
+defineProps({
+  activity: {
+    type: Object,
+    required: true
+  }
+})
+</script>
diff --git a/frontend/src/components/Timeline/EmailContent.vue b/frontend/src/components/Timeline/EmailContent.vue
new file mode 100644
index 000000000..741686455
--- /dev/null
+++ b/frontend/src/components/Timeline/EmailContent.vue
@@ -0,0 +1,111 @@
+<template>
+  <div
+    class="email-container border-l-4 border-blue-400 pl-3 cursor-pointer"
+    @click="openInDesk(activity)"
+  >
+    <div class="flex items-center gap-2">
+      <span class="text-gray-500">{{ __('From') }}:</span>
+      <span class="text-gray-700">{{ activity.details.sender_name || activity.details.sender }}</span>
+    </div>
+    <div class="flex items-center gap-2" v-if="activity.details.recipients">
+      <span class="text-gray-500">{{ __('To') }}:</span>
+      <span class="text-gray-700">{{ activity.details.recipients }}</span>
+    </div>
+    <div 
+      class="mt-2 prose max-w-none email-content"
+      v-html="displayedContent"
+    ></div>
+    <div v-if="activity.description.length > 500" class="mt-2">
+      <button
+        class="text-gray-600 hover:text-gray-900 text-sm"
+        @click.stop="toggleExpanded"
+      >
+        {{ isExpanded ? __('Show Less') : __('Show More') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  activity: {
+    type: Object,
+    required: true
+  }
+})
+
+const isExpanded = ref(false)
+const originalContent = ref(props.activity.description)
+
+const displayedContent = computed(() => {
+  if (isExpanded.value || props.activity.description.length <= 500) {
+    return originalContent.value
+  }
+  return props.activity.description.slice(0, 500) + '...'
+})
+
+function toggleExpanded(event) {
+  event.preventDefault()
+  isExpanded.value = !isExpanded.value
+}
+
+function openInDesk(activity) {
+  if (activity.type === 'email' && activity.reference?.name) {
+    const url = `/app/communication/${activity.reference.name}`
+    window.open(url, '_blank')
+  }
+}
+</script>
+
+<style scoped>
+.email-content {
+  @apply text-sm text-gray-700 whitespace-pre-wrap break-words;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+.email-content :deep(*) {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.email-content :deep(a) {
+  @apply text-blue-600 hover:text-blue-800 underline;
+  word-break: break-all;
+}
+
+.email-content :deep(p) {
+  @apply mb-3;
+  max-width: 100%;
+}
+
+.email-content :deep(ul), 
+.email-content :deep(ol) {
+  @apply ml-4 mb-3 list-disc;
+}
+
+.email-content :deep(ol) {
+  @apply list-decimal;
+}
+
+.email-content :deep(li) {
+  @apply mb-1;
+}
+
+.email-content :deep(blockquote) {
+  @apply border-l-4 border-gray-300 pl-3 my-2 text-gray-600;
+}
+
+.email-content :deep(pre) {
+  @apply bg-gray-100 p-2 rounded my-2;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-x: auto;
+  max-width: 100%;
+}
+</style>
diff --git a/frontend/src/components/Timeline/TimelineGroup.vue b/frontend/src/components/Timeline/TimelineGroup.vue
new file mode 100644
index 000000000..bdb762f6b
--- /dev/null
+++ b/frontend/src/components/Timeline/TimelineGroup.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="timeline-group">
+    <div class="text-sm text-gray-600 mb-2">{{ formatDate(date) }}</div>
+    <div class="space-y-3">
+      <TimelineItem
+        v-for="activity in group"
+        :key="activity.reference.name"
+        :activity="activity"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatDate } from '@/utils'
+import TimelineItem from './TimelineItem.vue'
+
+defineProps({
+  date: {
+    type: String,
+    required: true
+  },
+  group: {
+    type: Array,
+    required: true
+  }
+})
+</script>
diff --git a/frontend/src/components/Timeline/TimelineItem.vue b/frontend/src/components/Timeline/TimelineItem.vue
new file mode 100644
index 000000000..efeaef23a
--- /dev/null
+++ b/frontend/src/components/Timeline/TimelineItem.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="activity-item flex gap-3 p-3 bg-white rounded-lg border">
+    <div class="activity-icon">
+      <component :is="getActivityIcon(activity.type)" class="h-5 w-5 text-gray-600" />
+    </div>
+    <div class="flex-1">
+      <div class="flex justify-between items-start">
+        <div class="font-medium">{{ activity.title }}</div>
+        <div class="text-sm text-gray-500">{{ getUser(activity.owner).full_name }}</div>
+      </div>
+      <ActivityContent :activity="activity" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { usersStore } from '@/stores/users'
+import ActivityContent from './ActivityContent.vue'
+import EmailIcon from '../Icons/EmailIcon.vue'
+import NoteIcon from '../Icons/NoteIcon.vue'
+
+const { getUser } = usersStore()
+
+const props = defineProps({
+  activity: {
+    type: Object,
+    required: true
+  }
+})
+
+function getActivityIcon(type) {
+  const icons = {
+    'email': EmailIcon,
+    'note': NoteIcon,
+    'comment': NoteIcon
+  }
+  return icons[type] || NoteIcon
+}
+</script> 
\ No newline at end of file
diff --git a/frontend/src/components/Timeline/TimelineView.vue b/frontend/src/components/Timeline/TimelineView.vue
new file mode 100644
index 000000000..150987759
--- /dev/null
+++ b/frontend/src/components/Timeline/TimelineView.vue
@@ -0,0 +1,97 @@
+<template>
+    <div class="timeline-view">
+        <!-- Filters -->
+        <div class="flex justify-between mb-4">
+            <div class="flex gap-2">
+                <Button v-for="filter in availableFilters" :key="filter" size="sm"
+                    :variant="activeFilters.includes(filter) ? 'solid' : 'subtle'" @click="toggleFilter(filter)">
+                    {{ __(filter) }}
+                </Button>
+            </div>
+            <Button variant="solid" size="sm" @click="showCommentModal = true">
+                {{ __('New Comment') }}
+            </Button>
+        </div>
+
+        <!-- Timeline -->
+        <div class="space-y-4">
+            <template v-for="(group, date) in groupedActivities" :key="date">
+                <TimelineGroup :date="date" :group="group" />
+            </template>
+        </div>
+
+        <!-- Comment Modal -->
+        <CommentModal
+            v-model:show="showCommentModal"
+            :doctype="props.doctype"
+            :docname="props.docname"
+            @comment-added="handleCommentAdded"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { usersStore } from '@/stores/users'
+import TimelineGroup from './TimelineGroup.vue'
+import CommentModal from '../Modals/CommentModal.vue'
+
+const { getUser } = usersStore()
+const showCommentModal = ref(false)
+
+const props = defineProps({
+    items: {
+        type: Array,
+        default: () => []
+    },
+    filters: {
+        type: Array,
+        default: () => ['emails', 'notes', 'comments']
+    },
+    doctype: {
+        type: String,
+        required: true
+    },
+    docname: {
+        type: String,
+        required: true
+    }
+})
+
+const emit = defineEmits(['filter-change', 'comment-added'])
+
+const availableFilters = computed(() => props.filters)
+const activeFilters = ref([...props.filters])
+
+const groupedActivities = computed(() => {
+    return props.items
+        .filter(item => activeFilters.value.includes(item.type + 's'))
+        .reduce((groups, activity) => {
+            const date = activity.timestamp.split('T')[0]
+            groups[date] = groups[date] || []
+            groups[date].push(activity)
+            return groups
+        }, {})
+})
+
+function toggleFilter(filter) {
+    const index = activeFilters.value.indexOf(filter)
+    if (index === -1) {
+        activeFilters.value.push(filter)
+    } else {
+        activeFilters.value.splice(index, 1)
+    }
+    emit('filter-change', activeFilters.value)
+}
+
+function handleCommentAdded() {
+    showCommentModal.value = false
+    emit('comment-added')
+}
+</script>
+
+<style scoped>
+.timeline-view {
+    @apply p-4;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 92f919a1e..8b3eef0d1 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -1,185 +1,56 @@
 <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 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 class="flex flex-col h-screen overflow-hidden">
+        <ContactHeader :contact="contact?.data" />
+        <div class="flex flex-1 min-h-0">
+            <Resizer 
+                v-if="contact?.data" 
+                :parent="$refs.parentRef" 
+                ref="parentRef"
+                class="flex-shrink-0 w-80 border-r flex flex-col"
+            >
+                <div class="flex-shrink-0">
+                    <ContactProfile 
+                        :contact="contact?.data" 
+                        @update="contact?.reload" 
+                    />
+                </div>
+                <div v-if="sections?.data" class="flex-shrink-0">
+                    <SidePanelLayout 
+                        v-model="contact.data" 
+                        :sections="sections.data" 
+                        doctype="Contact"
+                        @update="updateField" 
+                        @reload="sections?.reload" 
+                    />
                 </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
-                      "
+                <div class="flex-shrink-0 border-t px-4 py-4">
+                    <EmailDropZone 
+                        :contact-name="contactId" 
+                        @upload-complete="timeline?.reload()" 
                     />
-                    <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>
+            </Resizer>
+
+            <div class="flex-1 flex flex-col min-w-0">
+                <ContactTabs 
+                    v-model="tabIndex"
+                    :timeline="timeline?.data || []"
+                    :deals="deals?.data || []"
+                    :contact="contact?.data"
+                    :rows="rows || []"
+                    :columns="columns || []"
+                    @comment-added="refreshTimeline"
+                />
             </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 }">
-        <DealsListView
-          v-if="tab.label === 'Deals' && rows.length"
-          class="mt-4"
-          :rows="rows"
-          :columns="columns"
-          :options="{ selectable: false, showTooltip: false }"
-        />
-        <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>
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
+        <AddressModal v-model="showAddressModal" v-model:address="_address" />
+    </div>
 </template>
 
 <script setup>
 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 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'
@@ -189,19 +60,18 @@ 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,
+    call,
+    createResource,
+    usePageMeta,
 } from 'frappe-ui'
-import { ref, computed, h } from 'vue'
+import { ref, computed, h, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
+import EmailDropZone from '@/components/EmailDropZone.vue'
+import ContactHeader from '@/components/Contact/ContactHeader.vue'
+import ContactProfile from '@/components/Contact/ContactProfile.vue'
+import ContactTabs from '@/components/Contact/ContactTabs.vue'
 
 const { brand } = getSettings()
 const { $dialog, makeCall } = globalStore()
@@ -211,10 +81,10 @@ const { getOrganization } = organizationsStore()
 const { getDealStatus } = statusesStore()
 
 const props = defineProps({
-  contactId: {
-    type: String,
-    required: true,
-  },
+    contactId: {
+        type: String,
+        required: true,
+    },
 })
 
 const route = useRoute()
@@ -223,347 +93,352 @@ const router = useRouter()
 const showAddressModal = ref(false)
 const _contact = ref({})
 const _address = ref({})
+const tabIndex = ref(0)
 
 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,
-    }
-  },
+    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,
+        }
+    },
 })
 
 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 },
-        },
-      })
+    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: contact.data?.full_name,
-    route: { name: 'Contact', params: { contactId: props.contactId } },
-  })
-  return items
+    items.push({
+        label: contact.data?.full_name,
+        route: { name: 'Contact', params: { contactId: props.contactId } },
+    })
+    return items
 })
 
 usePageMeta(() => {
-  return {
-    title: contact.data?.full_name || contact.data?.name,
-    icon: brand.favicon,
-  }
+    return {
+        title: contact.data?.full_name || contact.data?.name,
+        icon: brand.favicon,
+    }
 })
 
 function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
+    let extn = file.name.split('.').pop().toLowerCase()
+    if (!['png', 'jpg', 'jpeg'].includes(extn)) {
+        return __('Only PNG and JPG images are allowed')
+    }
 }
 
 async function changeContactImage(file) {
-  await call('frappe.client.set_value', {
-    doctype: 'Contact',
-    name: props.contactId,
-    fieldname: 'image',
-    value: file?.file_url || '',
-  })
-  contact.reload()
+    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' })
-        },
-      },
-    ],
-  })
+    $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: 'Deals',
-    icon: h(DealsIcon, { class: 'h-4 w-4' }),
-    count: computed(() => deals.data?.length),
-  },
+    {
+        label: 'Timeline',
+        icon: h(CalendarIcon, { class: 'h-4 w-4' }),
+        count: computed(() => timeline.data?.length || 0),
+    },
+    {
+        label: 'Deals',
+        icon: h(DealsIcon, { class: 'h-4 w-4' }),
+        count: computed(() => deals.data?.length || 0),
+    },
 ]
 
 const deals = createResource({
-  url: 'crm.api.contact.get_linked_deals',
-  cache: ['deals', props.contactId],
-  params: {
-    contact: props.contactId,
-  },
-  auto: true,
+    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 []
+    if (!deals.data || deals.data == []) return []
 
-  return deals.data.map((row) => getDealRowObject(row))
+    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', 'Contact'],
-  params: { doctype: 'Contact' },
-  auto: true,
-  transform: (data) => computed(() => getParsedSections(data)),
+    url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
+    cache: ['sidePanelSections', 'Contact'],
+    params: { doctype: 'Contact' },
+    auto: true,
+    transform: (data) => computed(() => getParsedSections(data)),
 })
 
 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
-                      }
+    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,
+                            })
+                        },
                     }
-                  },
-                }
-              }) || [],
-            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,
-                      )
+                } 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,
+                            })
+                        },
                     }
-                  },
-                  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
-                      }
+                } 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
                 }
-              }) || [],
-            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 column
+        })
+        return section
     })
-    return section
-  })
 }
 
 async function setAsPrimary(field, value) {
-  let d = await call('crm.api.contact.set_as_primary', {
-    contact: contact.data.name,
-    field,
-    value,
-  })
-  if (d) {
-    contact.reload()
-    createToast({
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
+    let d = await call('crm.api.contact.set_as_primary', {
+        contact: contact.data.name,
+        field,
+        value,
     })
-  }
+    if (d) {
+        contact.reload()
+        createToast({
+            title: 'Contact updated',
+            icon: 'check',
+            iconClasses: 'text-ink-green-3',
+        })
+    }
 }
 
 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: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
+    if (!value) return
+    let d = await call('crm.api.contact.create_new', {
+        contact: contact.data.name,
+        field,
+        value,
     })
-  }
+    if (d) {
+        contact.reload()
+        createToast({
+            title: 'Contact updated',
+            icon: 'check',
+            iconClasses: 'text-ink-green-3',
+        })
+    }
 }
 
 async function editOption(doctype, name, fieldname, value) {
-  let d = await call('frappe.client.set_value', {
-    doctype,
-    name,
-    fieldname,
-    value,
-  })
-  if (d) {
-    contact.reload()
-    createToast({
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
+    let d = await call('frappe.client.set_value', {
+        doctype,
+        name,
+        fieldname,
+        value,
     })
-  }
+    if (d) {
+        contact.reload()
+        createToast({
+            title: 'Contact updated',
+            icon: 'check',
+            iconClasses: 'text-ink-green-3',
+        })
+    }
 }
 
 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',
-  })
+    await call('frappe.client.delete', {
+        doctype,
+        name,
+    })
+    await contact.reload()
+    createToast({
+        title: 'Contact updated',
+        icon: 'check',
+        iconClasses: 'text-ink-green-3',
+    })
 }
 
 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()
+    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')
@@ -571,66 +446,106 @@ 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,
+    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',
     },
-    annual_revenue: getFormattedCurrency('annual_revenue', deal),
-    status: {
-      label: deal.status,
-      color: getDealStatus(deal.status)?.color,
+    {
+        label: __('Mobile no'),
+        key: 'mobile_no',
+        width: '11rem',
     },
-    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)),
+    {
+        label: __('Deal owner'),
+        key: 'deal_owner',
+        width: '10rem',
     },
-    modified: {
-      label: formatDate(deal.modified),
-      timeAgo: __(timeAgo(deal.modified)),
+    {
+        label: __('Last modified'),
+        key: 'modified',
+        width: '8rem',
     },
-  }
+]
+
+const timeline = createResource({
+    url: 'crm.api.doc.get_timeline',
+    cache: ['timeline', props.contactId],
+    params: {
+        doctype: 'Contact',
+        name: props.contactId,
+        for_contact: true,
+    },
+    auto: true,
+})
+
+const refreshTimeline = async () => {
+    try {
+        if (timeline?.reload) {
+            await timeline.reload()
+        }
+    } catch (error) {
+        console.error('Error refreshing timeline:', error)
+    }
 }
 
-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>
+
+<style>
+.drop-zone {
+    border: 2px dashed #ccc;
+    padding: 20px;
+    text-align: center;
+    margin: 20px 0;
+    border-radius: 5px;
+    background-color: rgba(255, 0, 0, 0.1);
+    z-index: 1000;
+    position: relative;
+}
+
+.drag-over {
+    border-color: #000;
+    background-color: #f0f0f0;
+}
+</style>
diff --git a/frontend/src/pages/Customer.vue b/frontend/src/pages/Customer.vue
new file mode 100644
index 000000000..c78c1402d
--- /dev/null
+++ b/frontend/src/pages/Customer.vue
@@ -0,0 +1,400 @@
+<template>
+  <LayoutHeader v-if="customer.doc">
+    <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 ref="parentRef" class="flex h-full overflow-hidden">
+    <Resizer v-if="customer.doc" :parent="$refs.parentRef" class="flex h-full flex-col overflow-hidden border-r">
+      <div class="border-b">
+        <FileUploader @success="changeCustomerImage" :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="customer.doc.customer_name"
+                    :image="customer.doc.image" />
+                  <component :is="customer.doc.image ? Dropdown : 'div'" v-bind="customer.doc.image
+                    ? {
+                      options: [
+                        {
+                          icon: 'upload',
+                          label: customer.doc.image
+                            ? __('Change image')
+                            : __('Upload image'),
+                          onClick: openFileSelector,
+                        },
+                        {
+                          icon: 'trash-2',
+                          label: __('Remove image'),
+                          onClick: () => changeCustomerImage(''),
+                        },
+                      ],
+                    }
+                    : { 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">
+                  <div class="truncate text-2xl font-medium text-ink-gray-9">
+                    <span>{{ customer.doc.customer_name }}</span>
+                  </div>
+                  <div v-if="customer.doc.website" class="flex items-center gap-1.5 text-base text-ink-gray-8">
+                    <WebsiteIcon class="size-4" />
+                    <span>{{ website(customer.doc.website) }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="flex gap-1.5">
+                <Button :label="__('Delete')" theme="red" size="sm" @click="deleteCustomer">
+                  <template #prefix>
+                    <FeatherIcon name="trash-2" class="h-4 w-4" />
+                  </template>
+                </Button>
+                <Tooltip :text="__('Open website')" v-if="customer.doc.website">
+                  <div>
+                    <Button @click="openWebsite">
+                      <FeatherIcon name="link" class="h-4 w-4" />
+                    </Button>
+                  </div>
+                </Tooltip>
+              </div>
+            </div>
+          </template>
+        </FileUploader>
+      </div>
+      <div class="flex-1 overflow-auto p-5">
+        <div class="space-y-6">
+          <div v-if="customer.doc.tax_id" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Tax ID') }}</label>
+            <p class="text-base text-gray-900">{{ customer.doc.tax_id }}</p>
+          </div>
+          <div v-if="customer.doc.customer_group" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Customer Group') }}</label>
+            <p class="text-base text-gray-900">{{ customer.doc.customer_group }}</p>
+          </div>
+          <div v-if="customer.doc.territory" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Territory') }}</label>
+            <p class="text-base text-gray-900">{{ customer.doc.territory }}</p>
+          </div>
+          <div v-if="customer.doc.default_currency" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Default Currency') }}</label>
+            <p class="text-base text-gray-900">{{ customer.doc.default_currency }}</p>
+          </div>
+          <div v-if="customer.doc.default_price_list" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Default Price List') }}</label>
+            <p class="text-base text-gray-900">{{ customer.doc.default_price_list }}</p>
+          </div>
+          <div v-if="customer.doc.payment_terms" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Payment Terms') }}</label>
+            <p class="text-base text-gray-900">{{ customer.doc.payment_terms }}</p>
+          </div>
+          <div v-if="customer.doc.credit_limits?.length" class="space-y-2">
+            <h3 class="text-lg font-medium text-gray-900">{{ __('Credit Limits') }}</h3>
+            <div class="space-y-4">
+              <div v-for="limit in customer.doc.credit_limits" :key="limit.name" class="rounded-lg border p-4">
+                <div class="grid grid-cols-2 gap-4">
+                  <div class="space-y-1">
+                    <label class="text-sm font-medium text-gray-500">{{ __('Company') }}</label>
+                    <p class="text-base text-gray-900">{{ limit.company }}</p>
+                  </div>
+                  <div class="space-y-1">
+                    <label class="text-sm font-medium text-gray-500">{{ __('Credit Limit') }}</label>
+                    <p class="text-base text-gray-900">{{ formatCurrency(limit.credit_limit) }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </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 }">
+        <TimelineView v-if="tab.label === 'Timeline' && customer.doc" class="mt-4" :items="timeline.data || []"
+              doctype="Customer" :docname="customer.doc?.name || ''" @comment-added="refreshTimeline" />
+        <ContactsListView class="mt-4" v-if="tab.label === 'Contacts' && rows.length" :rows="rows" :columns="columns"
+          :options="{ selectable: false, showTooltip: false }" />
+        <div v-if="!rows.length && tab.label !== 'Timeline'"
+          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>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  createDocumentResource,
+  createResource,
+  Tooltip,
+  Breadcrumbs,
+  Avatar,
+  FileUploader,
+  Dropdown,
+  Tabs,
+  call,
+  toast
+} from 'frappe-ui'
+import { getSettings } from '@/stores/settings'
+import { globalStore } from '@/stores/global'
+import { usersStore } from '@/stores/users'
+import { getView } from '@/utils/view'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Icon from '@/components/Icon.vue'
+import ContactsListView from '@/components/ListViews/ContactsListView.vue'
+import Resizer from '@/components/Resizer.vue'
+import CameraIcon from '@/components/Icons/CameraIcon.vue'
+import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import TimelineView from '@/components/Timeline/TimelineView.vue'
+import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
+import { FeatherIcon } from 'frappe-ui'
+import { Badge } from 'frappe-ui'
+
+const props = defineProps({
+  customerId: {
+    type: String,
+    required: true,
+  },
+})
+
+const { brand } = getSettings()
+const { getUser } = usersStore()
+const { $dialog } = globalStore()
+
+const route = useRoute()
+const router = useRouter()
+
+const customer = createDocumentResource({
+  doctype: 'Customer',
+  name: props.customerId,
+  cache: ['customer', props.customerId],
+  fields: ['*'],
+  auto: true,
+})
+
+async function updateField(fieldname, value) {
+  await customer.setValue.submit({
+    [fieldname]: value,
+  })
+  toast({
+    title: __('Customer updated'),
+    icon: 'check',
+    iconClasses: 'text-ink-green-3',
+  })
+}
+
+const breadcrumbs = computed(() => {
+  let items = [{ label: __('Customers'), route: { name: 'Customers' } }]
+
+  if (route.query.view || route.query.viewType) {
+    let view = getView(
+      route.query.view,
+      route.query.viewType,
+      'Customer'
+    )
+    if (view) {
+      items.push({
+        label: view.title,
+        route: {
+          name: 'Customers',
+          query: { view: route.query.view, viewType: route.query.viewType },
+        },
+      })
+    }
+  }
+
+  if (customer.doc) {
+    items.push({
+      label: customer.doc.customer_name,
+    })
+  }
+
+  return items
+})
+
+const contactsCount = createResource({
+  url: 'crm.api.doc.get_contacts_count',
+  params: {
+    doctype: 'Customer',
+    name: props.customerId
+  },
+  auto: true,
+})
+
+const tabIndex = ref(0)
+const tabs = computed(() => [
+  {
+    label: 'Timeline',
+    icon: CalendarIcon,
+    count: computed(() => timeline.data?.length || 0),
+  },
+  {
+    label: 'Contacts',
+    icon: ContactsIcon,
+    count: contactsCount.data || 0,
+  },
+])
+
+const rows = ref([])
+const columns = ref([])
+
+watch(
+  () => tabIndex.value,
+  async (newIndex) => {
+    const tab = tabs.value[newIndex]
+    try {
+      if (tab.label === 'Contacts') {
+        const response = await call('crm.api.doc.get_contacts', {
+          reference_doctype: 'Customer',
+          reference_name: props.customerId,
+        })
+        rows.value = response || []
+        columns.value = [
+          { key: 'name', label: 'Contact', type: 'Data' },
+          { key: 'email', label: 'Email', type: 'Data' },
+          { key: 'phone', label: 'Phone', type: 'Data' },
+        ]
+      }
+    } catch (error) {
+      console.error(`Error fetching ${tab.label.toLowerCase()}:`, error)
+      toast({
+        title: `Error fetching ${tab.label.toLowerCase()}`,
+        message: error.message,
+        icon: 'x',
+        iconClasses: 'text-red-500',
+      })
+      rows.value = []
+    }
+  },
+  { immediate: true }
+)
+
+function formatCurrency(value) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: customer.doc?.default_currency || 'USD',
+  }).format(value)
+}
+
+function website(url) {
+  return url.replace(/^https?:\/\//, '')
+}
+
+function validateFile(file) {
+  const maxSize = 5 * 1024 * 1024 // 5MB
+  if (file.size > maxSize) {
+    return __('File size should not exceed 5MB')
+  }
+  if (!file.type.startsWith('image/')) {
+    return __('Only image files are allowed')
+  }
+  return null
+}
+
+async function changeCustomerImage(image) {
+  await customer.setValue.submit({
+    image: image,
+  })
+  toast({
+    title: __('Customer image updated'),
+    icon: 'check',
+    iconClasses: 'text-ink-green-3',
+  })
+}
+
+async function deleteCustomer() {
+  const confirmed = await $dialog({
+    title: __('Delete Customer'),
+    message: __('Are you sure you want to delete this customer? This action cannot be undone.'),
+    actions: [
+      {
+        label: __('Yes, delete'),
+        variant: 'solid',
+        theme: 'red',
+      },
+      {
+        label: __('No'),
+        variant: 'subtle',
+      },
+    ],
+  })
+  if (!confirmed) return
+
+  try {
+    await call('frappe.client.delete', {
+      doctype: 'Customer',
+      name: props.customerId,
+    })
+    toast({
+      title: __('Customer deleted'),
+      icon: 'check',
+      iconClasses: 'text-ink-green-3',
+    })
+    router.push({ name: 'Customers' })
+  } catch (error) {
+    console.error('Error deleting customer:', error)
+    toast({
+      title: __('Error deleting customer'),
+      message: error.message,
+      icon: 'x',
+      iconClasses: 'text-red-500',
+    })
+  }
+}
+
+function openWebsite() {
+  if (customer.doc?.website) {
+    window.open(customer.doc.website, '_blank')
+  }
+}
+
+const timeline = createResource({
+  url: 'crm.api.doc.get_timeline',
+  cache: ['timeline', props.customerId],
+  params: {
+    doctype: 'Customer',
+    name: props.customerId,
+  },
+  auto: true,
+})
+
+const refreshTimeline = async () => {
+    try {
+        await timeline.reload()
+    } catch (error) {
+        console.error('Error refreshing timeline:', error)
+    }
+}
+</script> 
\ No newline at end of file
diff --git a/frontend/src/pages/Customers.vue b/frontend/src/pages/Customers.vue
new file mode 100644
index 000000000..d001526b6
--- /dev/null
+++ b/frontend/src/pages/Customers.vue
@@ -0,0 +1,139 @@
+<template>
+  <LayoutHeader>
+    <template #left-header>
+      <ViewBreadcrumbs v-model="viewControls" routeName="Customers" />
+    </template>
+    <template #right-header>
+      <CustomActions v-if="customersListView?.customListActions" :actions="customersListView.customListActions" />
+      <Button variant="solid" :label="__('Create')" @click="showCustomerModal = true">
+        <template #prefix>
+          <FeatherIcon name="plus" class="h-4" />
+        </template>
+      </Button>
+    </template>
+  </LayoutHeader>
+  <ViewControls ref="viewControls" v-model="customers" v-model:loadMore="loadMore" v-model:resizeColumn="triggerResize"
+    v-model:updatedPageCount="updatedPageCount" doctype="Customer" />
+  <CustomersListView ref="customersListView" v-if="customers.data && rows.length"
+    v-model="customers.data.page_length_count" v-model:list="customers" :rows="rows" :columns="customers.data.columns"
+    :options="{
+      showTooltip: false,
+      resizeColumn: true,
+      rowCount: customers.data.row_count,
+      totalCount: customers.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="customers.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">
+      <OrganizationsIcon class="h-10 w-10" />
+      <span>{{ __('No {0} Found', [__('Customers')]) }}</span>
+      <Button :label="__('Create')" @click="showCustomerModal = true">
+        <template #prefix>
+          <FeatherIcon name="plus" class="h-4" />
+        </template>
+      </Button>
+    </div>
+  </div>
+  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" doctype="Customer" />
+  <AddressModal v-model="showAddressModal" v-model:address="address" />
+</template>
+<script setup>
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
+import CustomActions from '@/components/CustomActions.vue'
+import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
+import CustomersListView from '@/components/ListViews/CustomersListView.vue'
+import ViewControls from '@/components/ViewControls.vue'
+import { getMeta } from '@/stores/meta'
+import { formatDate, timeAgo, website } from '@/utils'
+import { call } from 'frappe-ui'
+import { ref, computed, watch } from 'vue'
+
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('Customer')
+
+const customersListView = ref(null)
+const showCustomerModal = ref(false)
+const showQuickEntryModal = ref(false)
+const showAddressModal = ref(false)
+
+// customers data is loaded in the ViewControls component
+const customers = ref({})
+const address = ref({})
+const loadMore = ref(1)
+const triggerResize = ref(1)
+const updatedPageCount = ref(20)
+const viewControls = ref(null)
+
+const rows = computed(() => {
+  if (
+    !customers.value?.data?.data ||
+    !['list', 'group_by'].includes(customers.value.data.view_type)
+  )
+    return []
+  return customers.value?.data.data.map((customer) => {
+    let _rows = {}
+    customers.value?.data.rows.forEach((row) => {
+      _rows[row] = customer[row]
+
+      let fieldType = customers.value?.data.columns?.find(
+        (col) => (col.key || col.value) == row,
+      )?.type
+
+      if (
+        fieldType &&
+        ['Date', 'Datetime'].includes(fieldType) &&
+        !['modified', 'creation'].includes(row)
+      ) {
+        _rows[row] = formatDate(
+          customer[row],
+          '',
+          true,
+          fieldType == 'Datetime',
+        )
+      }
+
+      if (fieldType && fieldType == 'Currency') {
+        _rows[row] = getFormattedCurrency(row, customer)
+      }
+
+      if (fieldType && fieldType == 'Float') {
+        _rows[row] = getFormattedFloat(row, customer)
+      }
+
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, customer)
+      }
+
+      if (row === 'customer_name') {
+        _rows[row] = {
+          label: customer.customer_name || customer.name,
+          logo: customer.image,
+        }
+      } else if (row === 'website') {
+        _rows[row] = website(customer.website)
+      } else if (['modified', 'creation'].includes(row)) {
+        _rows[row] = {
+          label: formatDate(customer[row]),
+          timeAgo: __(timeAgo(customer[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> 
\ No newline at end of file
diff --git a/frontend/src/pages/MobileCustomer.vue b/frontend/src/pages/MobileCustomer.vue
new file mode 100644
index 000000000..9e847ea2f
--- /dev/null
+++ b/frontend/src/pages/MobileCustomer.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="flex h-full flex-col">
+    <MobileHeader>
+      <template #left>
+        <router-link
+          :to="{ name: 'Customers' }"
+          class="flex items-center gap-2 text-base font-medium text-gray-600"
+        >
+          <FeatherIcon name="arrow-left" class="h-4" />
+        </router-link>
+      </template>
+      <template #title>
+        {{ customer?.customer_name || __('Customer') }}
+      </template>
+    </MobileHeader>
+
+    <div v-if="customer" class="flex-1 overflow-auto">
+      <div class="space-y-6 p-4">
+        <div class="flex items-center gap-4">
+          <div
+            v-if="customer.image"
+            class="h-16 w-16 overflow-hidden rounded-lg"
+          >
+            <img
+              :src="customer.image"
+              :alt="customer.customer_name"
+              class="h-full w-full object-cover"
+            />
+          </div>
+          <div v-else class="flex h-16 w-16 items-center justify-center rounded-lg bg-gray-100">
+            <span class="text-2xl font-medium text-gray-600">
+              {{ customer.customer_name[0] }}
+            </span>
+          </div>
+          <div>
+            <h1 class="text-xl font-bold text-gray-900">
+              {{ customer.customer_name }}
+            </h1>
+            <p v-if="customer.customer_type" class="text-sm text-gray-500">
+              {{ customer.customer_type }}
+            </p>
+          </div>
+        </div>
+
+        <div class="space-y-4">
+          <div v-if="customer.tax_id" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Tax ID') }}</label>
+            <p class="text-base text-gray-900">{{ customer.tax_id }}</p>
+          </div>
+          <div v-if="customer.customer_group" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Customer Group') }}</label>
+            <p class="text-base text-gray-900">{{ customer.customer_group }}</p>
+          </div>
+          <div v-if="customer.territory" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Territory') }}</label>
+            <p class="text-base text-gray-900">{{ customer.territory }}</p>
+          </div>
+          <div v-if="customer.default_currency" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Default Currency') }}</label>
+            <p class="text-base text-gray-900">{{ customer.default_currency }}</p>
+          </div>
+          <div v-if="customer.default_price_list" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Default Price List') }}</label>
+            <p class="text-base text-gray-900">{{ customer.default_price_list }}</p>
+          </div>
+          <div v-if="customer.payment_terms" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Payment Terms') }}</label>
+            <p class="text-base text-gray-900">{{ customer.payment_terms }}</p>
+          </div>
+        </div>
+
+        <div v-if="customer.credit_limits && customer.credit_limits.length" class="space-y-2">
+          <h3 class="text-lg font-medium text-gray-900">{{ __('Credit Limits') }}</h3>
+          <div class="space-y-4">
+            <div
+              v-for="limit in customer.credit_limits"
+              :key="limit.name"
+              class="rounded-lg border p-4"
+            >
+              <div class="space-y-2">
+                <div class="space-y-1">
+                  <label class="text-sm font-medium text-gray-500">{{ __('Company') }}</label>
+                  <p class="text-base text-gray-900">{{ limit.company }}</p>
+                </div>
+                <div class="space-y-1">
+                  <label class="text-sm font-medium text-gray-500">{{ __('Credit Limit') }}</label>
+                  <p class="text-base text-gray-900">{{ formatCurrency(limit.credit_limit) }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="flex h-full items-center justify-center text-lg text-gray-500"
+    >
+      {{ __('Loading...') }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { call } from 'frappe-ui'
+import { FeatherIcon } from 'frappe-ui'
+import MobileHeader from '@/components/Mobile/MobileHeader.vue'
+
+const route = useRoute()
+const customer = ref(null)
+
+onMounted(async () => {
+  try {
+    const result = await call('frappe.client.get', {
+      doctype: 'Customer',
+      name: route.params.customerId,
+    })
+    customer.value = result.message
+  } catch (error) {
+    console.error('Error fetching customer:', error)
+  }
+})
+
+function formatCurrency(value) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: customer.value?.default_currency || 'USD',
+  }).format(value)
+}
+</script> 
\ No newline at end of file
diff --git a/frontend/src/pages/MobileSupplier.vue b/frontend/src/pages/MobileSupplier.vue
new file mode 100644
index 000000000..c88e97941
--- /dev/null
+++ b/frontend/src/pages/MobileSupplier.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="flex h-full flex-col">
+    <MobileHeader>
+      <template #left>
+        <router-link
+          :to="{ name: 'Suppliers' }"
+          class="flex items-center gap-2 text-base font-medium text-gray-600"
+        >
+          <FeatherIcon name="arrow-left" class="h-4" />
+        </router-link>
+      </template>
+      <template #title>
+        {{ supplier?.supplier_name || __('Supplier') }}
+      </template>
+    </MobileHeader>
+
+    <div v-if="supplier" class="flex-1 overflow-auto">
+      <div class="space-y-6 p-4">
+        <div class="flex items-center gap-4">
+          <div
+            v-if="supplier.image"
+            class="h-16 w-16 overflow-hidden rounded-lg"
+          >
+            <img
+              :src="supplier.image"
+              :alt="supplier.supplier_name"
+              class="h-full w-full object-cover"
+            />
+          </div>
+          <div v-else class="flex h-16 w-16 items-center justify-center rounded-lg bg-gray-100">
+            <span class="text-2xl font-medium text-gray-600">
+              {{ supplier.supplier_name[0] }}
+            </span>
+          </div>
+          <div>
+            <h1 class="text-xl font-bold text-gray-900">
+              {{ supplier.supplier_name }}
+            </h1>
+            <p v-if="supplier.supplier_type" class="text-sm text-gray-500">
+              {{ supplier.supplier_type }}
+            </p>
+          </div>
+        </div>
+
+        <div class="space-y-4">
+          <div v-if="supplier.tax_id" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Tax ID') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.tax_id }}</p>
+          </div>
+          <div v-if="supplier.supplier_group" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Supplier Group') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.supplier_group }}</p>
+          </div>
+          <div v-if="supplier.country" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Country') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.country }}</p>
+          </div>
+          <div v-if="supplier.default_currency" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Default Currency') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.default_currency }}</p>
+          </div>
+          <div v-if="supplier.default_price_list" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Default Price List') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.default_price_list }}</p>
+          </div>
+          <div v-if="supplier.payment_terms" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Payment Terms') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.payment_terms }}</p>
+          </div>
+          <div v-if="supplier.website" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Website') }}</label>
+            <p class="text-base text-blue-600">
+              <a :href="supplier.website" target="_blank" rel="noopener noreferrer">
+                {{ supplier.website }}
+              </a>
+            </p>
+          </div>
+        </div>
+
+        <div v-if="supplier.is_frozen" class="rounded-lg bg-red-50 p-4">
+          <p class="text-sm text-red-700">
+            {{ __('This supplier is frozen. Transactions with this supplier cannot be created.') }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="flex h-full items-center justify-center text-lg text-gray-500"
+    >
+      {{ __('Loading...') }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { call } from 'frappe-ui'
+import { FeatherIcon } from 'frappe-ui'
+import MobileHeader from '@/components/Mobile/MobileHeader.vue'
+
+const route = useRoute()
+const supplier = ref(null)
+
+onMounted(async () => {
+  try {
+    const result = await call('frappe.client.get', {
+      doctype: 'Supplier',
+      name: route.params.supplierId,
+    })
+    supplier.value = result.message
+  } catch (error) {
+    console.error('Error fetching supplier:', error)
+  }
+})
+
+function formatCurrency(value) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: supplier.value?.default_currency || 'USD',
+  }).format(value)
+}
+</script> 
\ No newline at end of file
diff --git a/frontend/src/pages/Supplier.vue b/frontend/src/pages/Supplier.vue
new file mode 100644
index 000000000..0a241a6cc
--- /dev/null
+++ b/frontend/src/pages/Supplier.vue
@@ -0,0 +1,392 @@
+<template>
+  <LayoutHeader v-if="supplier.doc">
+    <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 ref="parentRef" class="flex h-full overflow-hidden">
+    <Resizer v-if="supplier.doc" :parent="$refs.parentRef" class="flex h-full flex-col overflow-hidden border-r">
+      <div class="border-b">
+        <FileUploader @success="changeSupplierImage" :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="supplier.doc.supplier_name"
+                    :image="supplier.doc.image" />
+                  <component :is="supplier.doc.image ? Dropdown : 'div'" v-bind="supplier.doc.image
+                    ? {
+                      options: [
+                        {
+                          icon: 'upload',
+                          label: supplier.doc.image
+                            ? __('Change image')
+                            : __('Upload image'),
+                          onClick: openFileSelector,
+                        },
+                        {
+                          icon: 'trash-2',
+                          label: __('Remove image'),
+                          onClick: () => changeSupplierImage(''),
+                        },
+                      ],
+                    }
+                    : { 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">
+                  <div class="truncate text-2xl font-medium text-ink-gray-9">
+                    <span>{{ supplier.doc.supplier_name }}</span>
+                  </div>
+                  <div v-if="supplier.doc.website" class="flex items-center gap-1.5 text-base text-ink-gray-8">
+                    <WebsiteIcon class="size-4" />
+                    <span>{{ website(supplier.doc.website) }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="flex gap-1.5">
+                <Button :label="__('Delete')" theme="red" size="sm" @click="deleteSupplier">
+                  <template #prefix>
+                    <FeatherIcon name="trash-2" class="h-4 w-4" />
+                  </template>
+                </Button>
+                <Tooltip :text="__('Open website')" v-if="supplier.doc.website">
+                  <div>
+                    <Button @click="openWebsite">
+                      <FeatherIcon name="link" class="h-4 w-4" />
+                    </Button>
+                  </div>
+                </Tooltip>
+              </div>
+            </div>
+          </template>
+        </FileUploader>
+      </div>
+      <div class="flex-1 overflow-auto p-5">
+        <div class="space-y-6">
+          <div v-if="supplier.doc.tax_id" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Tax ID') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.doc.tax_id }}</p>
+          </div>
+          <div v-if="supplier.doc.supplier_group" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Supplier Group') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.doc.supplier_group }}</p>
+          </div>
+          <div v-if="supplier.doc.country" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Country') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.doc.country }}</p>
+          </div>
+          <div v-if="supplier.doc.default_currency" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Default Currency') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.doc.default_currency }}</p>
+          </div>
+          <div v-if="supplier.doc.default_price_list" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Default Price List') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.doc.default_price_list }}</p>
+          </div>
+          <div v-if="supplier.doc.payment_terms" class="space-y-1">
+            <label class="text-sm font-medium text-gray-500">{{ __('Payment Terms') }}</label>
+            <p class="text-base text-gray-900">{{ supplier.doc.payment_terms }}</p>
+          </div>
+          <div v-if="supplier.doc.is_frozen" class="rounded-lg bg-red-50 p-4">
+            <p class="text-sm text-red-700">
+              {{ __('This supplier is frozen. Transactions with this supplier cannot be created.') }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Resizer>
+    <div class="flex-1 overflow-hidden">
+      <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 }">
+          <TimelineView v-if="tab.label === 'Timeline' && supplier.doc" class="mt-4" :items="timeline.data || []"
+              doctype="Supplier" :docname="supplier.doc?.name || ''" @comment-added="refreshTimeline" />
+          <ContactsListView class="mt-4" v-if="tab.label === 'Contacts' && rows.length" :rows="rows" :columns="columns"
+            :options="{ selectable: false, showTooltip: false }" />
+          <div v-if="!rows.length && tab.label !== 'Timeline'"
+            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>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  createDocumentResource,
+  createResource,
+  Tooltip,
+  Breadcrumbs,
+  Avatar,
+  FileUploader,
+  Dropdown,
+  Tabs,
+  call,
+  toast
+} from 'frappe-ui'
+import { getSettings } from '@/stores/settings'
+import { globalStore } from '@/stores/global'
+import { usersStore } from '@/stores/users'
+import { getView } from '@/utils/view'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Icon from '@/components/Icon.vue'
+import ContactsListView from '@/components/ListViews/ContactsListView.vue'
+import Resizer from '@/components/Resizer.vue'
+import CameraIcon from '@/components/Icons/CameraIcon.vue'
+import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import TimelineView from '@/components/Timeline/TimelineView.vue'
+import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
+import { FeatherIcon } from 'frappe-ui'
+import { Badge } from 'frappe-ui'
+
+const props = defineProps({
+  supplierId: {
+    type: String,
+    required: true,
+  },
+})
+
+const { brand } = getSettings()
+const { getUser } = usersStore()
+const { $dialog } = globalStore()
+
+const route = useRoute()
+const router = useRouter()
+
+const supplier = createDocumentResource({
+  doctype: 'Supplier',
+  name: props.supplierId,
+  cache: ['supplier', props.supplierId],
+  fields: ['*'],
+  auto: true,
+})
+
+async function updateField(fieldname, value) {
+  await supplier.setValue.submit({
+    [fieldname]: value,
+  })
+  toast({
+    title: __('Supplier updated'),
+    icon: 'check',
+    iconClasses: 'text-ink-green-3',
+  })
+}
+
+const breadcrumbs = computed(() => {
+  let items = [{ label: __('Suppliers'), route: { name: 'Suppliers' } }]
+
+  if (route.query.view || route.query.viewType) {
+    let view = getView(
+      route.query.view,
+      route.query.viewType,
+      'Supplier'
+    )
+    if (view) {
+      items.push({
+        label: view.title,
+        route: {
+          name: 'Suppliers',
+          query: { view: route.query.view, viewType: route.query.viewType },
+        },
+      })
+    }
+  }
+
+  if (supplier.doc) {
+    items.push({
+      label: supplier.doc.supplier_name,
+    })
+  }
+
+  return items
+})
+
+const contactsCount = createResource({
+  url: 'crm.api.doc.get_contacts_count',
+  params: {
+    doctype: 'Supplier',
+    name: props.supplierId
+  },
+  auto: true,
+})
+
+
+const tabIndex = ref(0)
+const tabs = computed(() => [
+  {
+    label: 'Timeline',
+    icon: CalendarIcon,
+    count: computed(() => timeline.data?.length || 0),
+  },
+  {
+    label: 'Contacts',
+    icon: ContactsIcon,
+    count: contactsCount.data || 0,
+  },
+])
+
+const rows = ref([])
+const columns = ref([])
+
+const timeline = createResource({
+  url: 'crm.api.doc.get_timeline',
+  cache: ['timeline', props.supplierId],
+  params: {
+    doctype: 'Supplier',
+    name: props.supplierId,
+  },
+  auto: true,
+})
+
+watch(
+  () => tabIndex.value,
+  async (newIndex) => {
+    const tab = tabs.value[newIndex]
+    try {
+      if (tab.label === 'Contacts') {
+        const response = await call('crm.api.doc.get_contacts', {
+          reference_doctype: 'Supplier',
+          reference_name: props.supplierId,
+        })
+        rows.value = response || []
+        columns.value = [
+          { key: 'name', label: 'Contact', type: 'Data' },
+          { key: 'email', label: 'Email', type: 'Data' },
+          { key: 'phone', label: 'Phone', type: 'Data' },
+        ]
+      }
+    } catch (error) {
+      console.error(`Error fetching ${tab.label.toLowerCase()}:`, error)
+      toast({
+        title: `Error fetching ${tab.label.toLowerCase()}`,
+        message: error.message,
+        icon: 'x',
+        iconClasses: 'text-red-500',
+      })
+      rows.value = []
+    }
+  },
+  { immediate: true }
+)
+
+function formatCurrency(value) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: supplier.doc?.default_currency || 'USD',
+  }).format(value)
+}
+
+function website(url) {
+  return url.replace(/^https?:\/\//, '')
+}
+
+function validateFile(file) {
+  const maxSize = 5 * 1024 * 1024 // 5MB
+  if (file.size > maxSize) {
+    return __('File size should not exceed 5MB')
+  }
+  if (!file.type.startsWith('image/')) {
+    return __('Only image files are allowed')
+  }
+  return null
+}
+
+async function changeSupplierImage(image) {
+  await supplier.setValue.submit({
+    image: image,
+  })
+  toast({
+    title: __('Supplier image updated'),
+    icon: 'check',
+    iconClasses: 'text-ink-green-3',
+  })
+}
+
+async function deleteSupplier() {
+  const confirmed = await $dialog({
+    title: __('Delete Supplier'),
+    message: __('Are you sure you want to delete this supplier? This action cannot be undone.'),
+    actions: [
+      {
+        label: __('Yes, delete'),
+        variant: 'solid',
+        theme: 'red',
+      },
+      {
+        label: __('No'),
+        variant: 'subtle',
+      },
+    ],
+  })
+  if (!confirmed) return
+
+  try {
+    await call('frappe.client.delete', {
+      doctype: 'Supplier',
+      name: props.supplierId,
+    })
+    toast({
+      title: __('Supplier deleted'),
+      icon: 'check',
+      iconClasses: 'text-ink-green-3',
+    })
+    router.push({ name: 'Suppliers' })
+  } catch (error) {
+    console.error('Error deleting supplier:', error)
+    toast({
+      title: __('Error deleting supplier'),
+      message: error.message,
+      icon: 'x',
+      iconClasses: 'text-red-500',
+    })
+  }
+}
+
+function openWebsite() {
+  if (supplier.doc?.website) {
+    window.open(supplier.doc.website, '_blank')
+  }
+}
+
+const refreshTimeline = async () => {
+    try {
+        await timeline.reload()
+    } catch (error) {
+        console.error('Error refreshing timeline:', error)
+    }
+}
+
+</script> 
\ No newline at end of file
diff --git a/frontend/src/pages/Suppliers.vue b/frontend/src/pages/Suppliers.vue
new file mode 100644
index 000000000..10039c6da
--- /dev/null
+++ b/frontend/src/pages/Suppliers.vue
@@ -0,0 +1,167 @@
+<template>
+  <LayoutHeader>
+    <template #left-header>
+      <ViewBreadcrumbs v-model="viewControls" routeName="Suppliers" />
+    </template>
+    <template #right-header>
+      <CustomActions
+        v-if="suppliersListView?.customListActions"
+        :actions="suppliersListView.customListActions"
+      />
+      <Button
+        variant="solid"
+        :label="__('Create')"
+        @click="showSupplierModal = true"
+      >
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </template>
+  </LayoutHeader>
+  <ViewControls
+    ref="viewControls"
+    v-model="suppliers"
+    v-model:loadMore="loadMore"
+    v-model:resizeColumn="triggerResize"
+    v-model:updatedPageCount="updatedPageCount"
+    doctype="Supplier"
+  />
+  <SuppliersListView
+    ref="suppliersListView"
+    v-if="suppliers.data && rows.length"
+    v-model="suppliers.data.page_length_count"
+    v-model:list="suppliers"
+    :rows="rows"
+    :columns="suppliers.data.columns"
+    :options="{
+      showTooltip: false,
+      resizeColumn: true,
+      rowCount: suppliers.data.row_count,
+      totalCount: suppliers.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="suppliers.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"
+    >
+      <OrganizationsIcon class="h-10 w-10" />
+      <span>{{ __('No {0} Found', [__('Suppliers')]) }}</span>
+      <Button :label="__('Create')" @click="showSupplierModal = true">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </div>
+  </div>
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="Supplier"
+  />
+  <AddressModal v-model="showAddressModal" v-model:address="address" />
+</template>
+<script setup>
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
+import CustomActions from '@/components/CustomActions.vue'
+import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
+import SuppliersListView from '@/components/ListViews/SuppliersListView.vue'
+import ViewControls from '@/components/ViewControls.vue'
+import { getMeta } from '@/stores/meta'
+import { formatDate, timeAgo, website } from '@/utils'
+import { call } from 'frappe-ui'
+import { ref, computed } from 'vue'
+
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('Supplier')
+
+const suppliersListView = ref(null)
+const showSupplierModal = ref(false)
+const showQuickEntryModal = ref(false)
+const showAddressModal = ref(false)
+
+// suppliers data is loaded in the ViewControls component
+const suppliers = ref({})
+const address = ref({})
+const loadMore = ref(1)
+const triggerResize = ref(1)
+const updatedPageCount = ref(20)
+const viewControls = ref(null)
+
+const rows = computed(() => {
+  if (
+    !suppliers.value?.data?.data ||
+    !['list', 'group_by'].includes(suppliers.value.data.view_type)
+  )
+    return []
+  return suppliers.value?.data.data.map((supplier) => {
+    let _rows = {}
+    suppliers.value?.data.rows.forEach((row) => {
+      _rows[row] = supplier[row]
+
+      let fieldType = suppliers.value?.data.columns?.find(
+        (col) => (col.key || col.value) == row,
+      )?.type
+
+      if (
+        fieldType &&
+        ['Date', 'Datetime'].includes(fieldType) &&
+        !['modified', 'creation'].includes(row)
+      ) {
+        _rows[row] = formatDate(
+          supplier[row],
+          '',
+          true,
+          fieldType == 'Datetime',
+        )
+      }
+
+      if (fieldType && fieldType == 'Currency') {
+        _rows[row] = getFormattedCurrency(row, supplier)
+      }
+
+      if (fieldType && fieldType == 'Float') {
+        _rows[row] = getFormattedFloat(row, supplier)
+      }
+
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, supplier)
+      }
+
+      if (row === 'supplier_name') {
+        _rows[row] = {
+          label: supplier.supplier_name,
+          image: supplier.image,
+        }
+      } else if (row === 'website') {
+        _rows[row] = website(supplier.website)
+      } else if (['modified', 'creation'].includes(row)) {
+        _rows[row] = {
+          label: formatDate(supplier[row]),
+          timeAgo: __(timeAgo(supplier[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> 
\ No newline at end of file
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 7ce0f1105..13bb27e9e 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -91,6 +91,30 @@ const routes = [
     component: () => import('@/pages/EmailTemplate.vue'),
     props: true,
   },
+  {
+    alias: '/customers',
+    path: '/customers/view/:viewType?',
+    name: 'Customers',
+    component: () => import('@/pages/Customers.vue'),
+  },
+  {
+    path: '/customers/:customerId',
+    name: 'Customer',
+    component: () => import(`@/pages/${handleMobileView('Customer')}.vue`),
+    props: true,
+  },
+  {
+    alias: '/suppliers',
+    path: '/suppliers/view/:viewType?',
+    name: 'Suppliers',
+    component: () => import('@/pages/Suppliers.vue'),
+  },
+  {
+    path: '/suppliers/:supplierId',
+    name: 'Supplier',
+    component: () => import(`@/pages/${handleMobileView('Supplier')}.vue`),
+    props: true,
+  },
   {
     path: '/:invalidpath',
     name: 'Invalid Page',
diff --git a/frontend/src/utils/erpnext.js b/frontend/src/utils/erpnext.js
new file mode 100644
index 000000000..3f60e9fac
--- /dev/null
+++ b/frontend/src/utils/erpnext.js
@@ -0,0 +1,22 @@
+import { call } from 'frappe-ui'
+
+let isERPNextEnabled = null
+
+export async function checkERPNextEnabled() {
+  if (isERPNextEnabled === null) {
+    try {
+      const result = await call('frappe.client.get_single_value', {
+        doctype: 'ERPNext CRM Settings',
+        field: 'enabled'
+      })
+      isERPNextEnabled = !!result
+    } catch (error) {
+      isERPNextEnabled = false
+    }
+  }
+  return isERPNextEnabled
+}
+
+export function resetERPNextCheck() {
+  isERPNextEnabled = null
+}
diff --git a/yarn.lock b/yarn.lock
index 7b7baaa4d..3bc5732b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3939,7 +3939,16 @@ sourcemap-codec@^1.4.8:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4023,7 +4032,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==