From 1a7f0d872abeb116261e71b51dc9c83b3d9ee1ae Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Fri, 9 Jan 2026 09:50:15 -0500
Subject: [PATCH 1/2] Added a link type to the datatable columns.

---
 frontend/src/components/common/DataTable.vue | 31 ++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index 5a9bcd2..96bc7a7 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -300,6 +300,12 @@
 					@click="$emit('rowClick', slotProps)"
 				/>
 			</template>
+			<template v-if="col.type === 'link'" #body="slotProps">
+				<button class="datatable-link"
+					@click="handleLinkClick(col, slotProps.data)">
+					{{ slotProps.data[col.fieldName] }}
+				</button>
+			</template>
 		</Column>
 
 		<!-- Actions Column -->
@@ -1096,6 +1102,17 @@ const handleStatusButtonClick = (column, rowData) => {
 	}
 };
 
+// Handle link clicks
+const handleLinkClick = (column, rowData) => {
+	try {
+		if (column.onLinkClick && typeof column.onLinkClick === "function") {
+			column.onLinkClick(rowData[column.fieldName], rowData);
+		}
+	} catch (error) {
+		console.error("Error executing link click:", error);
+	}
+};
+
 const getBadgeColor = (status) => {
 	switch (status?.toLowerCase()) {
 		case "paid":
@@ -1634,4 +1651,18 @@ defineExpose({
 	transform: none;
 	box-shadow: none;
 }
+
+/* Link Styles */
+.datatable-link {
+	background: none;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	outline: none;
+}
+
+.datatable-link:hover {
+	text-decoration: underline;
+}
+
 </style>

From 54280ac78fd45d2e5dbd87aefbc158e1309345e8 Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Fri, 9 Jan 2026 09:51:22 -0500
Subject: [PATCH 2/2] Changed the customer name and Property column types to
 link to support additional ways to access the forthcoming customer detail
 page and the current property detail page.

---
 frontend/src/components/pages/Clients.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/pages/Clients.vue b/frontend/src/components/pages/Clients.vue
index 9854aea..8c286eb 100644
--- a/frontend/src/components/pages/Clients.vue
+++ b/frontend/src/components/pages/Clients.vue
@@ -112,10 +112,11 @@ const columns = [
 	{
 		label: "Customer Name",
 		fieldName: "customerName",
-		type: "text",
+		type: "link",
 		sortable: true,
 		filterable: true,
 		filterInputId: "customerSearchInput",
+		onLinkClick: (link, rowData) => handleCustomerClick(link, rowData),
 	},
 	{
 		label: "Type",
@@ -126,10 +127,11 @@ const columns = [
 	{
 		label: "Property",
 		fieldName: "address",
-		type: "text",
+		type: "link",
 		sortable: true,
 		filterable: true,
 		filterInputId: "propertySearchInput",
+		onLinkClick: (link, rowData) => handlePropertyClick(link, rowData),
 	},
 	//{
 	//	label: "Create Estimate",
@@ -297,6 +299,20 @@ const handleAppointmentClick = (status, rowData) => {
 	}
 };
 
+const handleCustomerClick = (link, rowData) => {
+	console.log("DEBUG: Customer Link Clicked.");
+	const client = encodeURIComponent(rowData.customerName);
+	const address = encodeURIComponent(rowData.address);
+	router.push(`/client?client=${client}&address=${address}`);
+}
+
+const handlePropertyClick = (link, rowData) => {
+	console.log("DEBUG: Property Link Clicked.");
+	const client = encodeURIComponent(rowData.customerName);
+	const address = encodeURIComponent(rowData.address);
+	router.push(`/client?client=${client}&address=${address}`);
+}
+
 const handleEstimateClick = (status, rowData) => {
 	const address = encodeURIComponent(rowData.address);
 	router.push(`/estimate?new=true&address=${address}`);