From 3e1fd039b3dfd124bea79e2f9041871c4b161886 Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Tue, 13 Jan 2026 10:01:48 -0500
Subject: [PATCH] Changed the Task project and address columns to link types to
 click and navigate to their respective information.

---
 frontend/src/components/pages/Tasks.vue | 37 ++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/pages/Tasks.vue b/frontend/src/components/pages/Tasks.vue
index a773977..23d4097 100644
--- a/frontend/src/components/pages/Tasks.vue
+++ b/frontend/src/components/pages/Tasks.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="page-container">
-		<h2>Admin Tasks</h2>
+		<h2>Tasks</h2>
 		<!-- Todo Chart Section -->
 		<div class = "widgets-grid">
 			<!-- Widget Cards go here if needed -->
@@ -8,6 +8,8 @@
 		<DataTable
 			:data="tableData"
 			:columns="columns"
+			:filters="filters"
+			:tableActions="tableActions"
 			tableName="tasks"
 			:lazy="true"
 			:totalRecords="totalRecords"
@@ -18,7 +20,7 @@
 </template>
 <script setup>
 import DataTable from "../common/DataTable.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import Api from "../../api";
 import { useLoadingStore } from "../../stores/loading";
@@ -37,8 +39,12 @@ const isLoading = ref(false);
 
 const columns = [
 	{ label: "Task", fieldName: "subject", type: "text", sortable: true, filterable: true },
-	{ label: "Project", fieldName: "project", type: "link", sortable: true },
-	{ label: "Address", fieldName: "address", type: "text", sortable: true },
+	{ label: "Project", fieldName: "project", type: "link", sortable: true,
+		onLinkClick: (link, rowData) => handleProjectClick(link, rowData)
+	},
+	{ label: "Address", fieldName: "address", type: "link", sortable: true,
+		onLinkClick: (link, rowData) => handlePropertyClick(link, rowData)
+	},
 	{ label: "Type", fieldName: "type", type: "text", sortable: true },
 	{ label: "Overall Status", fieldName: "status", type: "status", sortable: true },
 ];
@@ -160,12 +166,35 @@ const handleLazyLoad = async (event) => {
 	}
 };
 
+const handleProjectClick = (link, rowData) => {
+	console.log("DEBUG: Project Link Clicked.");
+	const jobId = encodeURIComponent(rowData.project);
+	router.push(`/job?jobId=${jobId}`);
+};
+
+const handlePropertyClick = (link, rowData) => {
+	console.log("DEBUG: Property Link Clicked.");
+	const client = encodeURIComponent(rowData.customerName);
+	const address = encodeURIComponent(rowData.address);
+	router.push(`/property?client=${client}&address=${address}`);
+}
+
+
 // If we implement a Task Detail View, this may be helpful
 //const handleRowClick = (event) => {
 //	const rowData = event.data;
 //	router.push(`/task?taskId=${rowData.name}`);
 //}
 
+// Watch for filters change to update status counts
+watch(
+	() => filtersStore.getTableFilters("tasks"),
+	async () => {
+		await refreshStatusCounts();
+	},
+	{ deep: true },
+);
+
 // Load initial data
 onMounted(async () => {
 	notifications.addWarning("Tasks page coming soon");