add table actions to datatable, client page, start writing db method for clients

frontend/src/components/pages/Client.vue

@@ -0,0 +1,9 @@
+<template>
+	<div>{{ clientId }}</div>
+</template>
+<script setup>
+defineProps({
+	clientId: String,
+});
+</script>
+<style lang="css"></style>

frontend/src/components/pages/Clients.vue

@@ -11,15 +11,11 @@
 			/>
 		</div>
 
-		<div id="filter-container" class="filter-container">
-			<button @click="onClick" id="add-customer-button" class="interaction-button">
-				Add
-			</button>
-		</div>
 		<DataTable
 			:data="tableData"
 			:columns="columns"
 			:filters="filters"
+			:tableActions="tableActions"
 			tableName="clients"
 			:lazy="true"
 			:totalRecords="totalRecords"
@@ -38,11 +34,13 @@ import { useLoadingStore } from "../../stores/loading";
 import { usePaginationStore } from "../../stores/pagination";
 import { useFiltersStore } from "../../stores/filters";
 import { useModalStore } from "../../stores/modal";
+import { useRouter } from "vue-router";
 
 const loadingStore = useLoadingStore();
 const paginationStore = usePaginationStore();
 const filtersStore = useFiltersStore();
 const modalStore = useModalStore();
+const router = useRouter();
 
 const tableData = ref([]);
 const totalRecords = ref(0);
@@ -56,11 +54,6 @@ const currentFilters = computed(() => {
 	return filtersStore.getTableFilters("clients");
 });
 
-const onClick = () => {
-	//frappe.new_doc("Customer");
-	modalStore.openCreateClient();
-};
-
 // Handle week change from chart
 const handleWeekChange = async (weekParams) => {
 	console.log("handleWeekChange called with:", weekParams);
@@ -122,23 +115,99 @@ const columns = [
 	},
 	{
 		label: "Appt. Scheduled",
-		fieldName: "customOnsiteMeetingScheduled",
+		fieldName: "appointmentScheduledStatus",
 		type: "status",
 		sortable: true,
 	},
 	{
 		label: "Estimate Sent",
-		fieldName: "customEstimateSentStatus",
+		fieldName: "estimateSentStatus",
 		type: "status",
 		sortable: true,
 	},
 	{
 		label: "Payment Received",
-		fieldName: "customPaymentReceivedStatus",
+		fieldName: "paymentReceivedStatus",
 		type: "status",
 		sortable: true,
 	},
-	{ label: "Job Status", fieldName: "customJobStatus", type: "status", sortable: true },
+	{ label: "Job Status", fieldName: "jobStatus", type: "status", sortable: true },
+];
+
+const tableActions = [
+	{
+		label: "Add Client",
+		action: () => {
+			modalStore.openModal("createClient");
+		},
+		type: "button",
+		style: "primary",
+		icon: "pi pi-plus",
+		layout: {
+			position: "left",
+			variant: "filled"
+		}
+		// Global action - always available
+	},
+	{
+		label: "View Details",
+		action: (rowData) => {
+			router.push(`/clients/${rowData.id}`);
+		},
+		type: "button",
+		style: "info",
+		icon: "pi pi-eye",
+		requiresSelection: true, // Single selection action - appears above table, enabled when exactly one row selected
+		layout: {
+			position: "center",
+			variant: "outlined"
+		}
+	},
+	{
+		label: "Export Selected",
+		action: (selectedRows) => {
+			console.log("Exporting", selectedRows.length, "clients:", selectedRows);
+			// Implementation would export selected clients
+		},
+		type: "button",
+		style: "success",
+		icon: "pi pi-download",
+		requiresMultipleSelection: true, // Bulk action - operates on selected rows
+		layout: {
+			position: "right",
+			variant: "filled"
+		}
+	},
+	{
+		label: "Edit",
+		action: (rowData) => {
+			console.log("Editing client:", rowData);
+			// Implementation would open edit modal
+		},
+		type: "button",
+		style: "secondary",
+		icon: "pi pi-pencil",
+		rowAction: true, // Row action - appears in each row's actions column
+		layout: {
+			priority: "primary",
+			variant: "outlined"
+		}
+	},
+	{
+		label: "Quick View",
+		action: (rowData) => {
+			console.log("Quick view for:", rowData.addressTitle);
+			// Implementation would show quick preview
+		},
+		type: "button",
+		style: "info",
+		icon: "pi pi-search",
+		rowAction: true, // Row action - appears in each row's actions column
+		layout: {
+			priority: "secondary",
+			variant: "compact"
+		}
+	},
 ];
 // Handle lazy loading events from DataTable
 const handleLazyLoad = async (event) => {
@@ -199,8 +268,6 @@ const handleLazyLoad = async (event) => {
 			return;
 		}
 
-		console.log("Making API call with:", { paginationParams, filters });
-
 		// Call API with pagination, filters, and sorting
 		const result = await Api.getPaginatedClientDetails(paginationParams, filters, sorting);
 
@@ -210,14 +277,6 @@ const handleLazyLoad = async (event) => {
 
 		// Update pagination store with new total
 		paginationStore.setTotalRecords("clients", result.pagination.total);
-
-		console.log("Updated pagination state:", {
-			tableData: tableData.value.length,
-			totalRecords: totalRecords.value,
-			storeTotal: paginationStore.getTablePagination("clients").totalRecords,
-			storeTotalPages: paginationStore.getTotalPages("clients"),
-		});
-
 		// Cache the result
 		paginationStore.setCachedPage(
 			"clients",
@@ -231,12 +290,6 @@ const handleLazyLoad = async (event) => {
 				totalRecords: result.pagination.total,
 			},
 		);
-
-		console.log("Loaded from API:", {
-			records: result.data.length,
-			total: result.pagination.total,
-			page: paginationParams.page + 1,
-		});
 	} catch (error) {
 		console.error("Error loading client data:", error);
 		// You could also show a toast or other error notification here
@@ -287,24 +340,4 @@ onMounted(async () => {
 .chart-section {
 	margin-bottom: 20px;
 }
-
-.filter-container {
-	margin-bottom: 15px;
-}
-
-.interaction-button {
-	background: #3b82f6;
-	color: white;
-	border: none;
-	padding: 10px 20px;
-	border-radius: 6px;
-	cursor: pointer;
-	font-size: 14px;
-	font-weight: 500;
-	transition: background 0.2s;
-}
-
-.interaction-button:hover {
-	background: #2563eb;
-}
 </style>