massage data

frontend/src/components/common/DataTable.vue

@@ -1,6 +1,10 @@
 <template lang="html">
 	<!-- Filter Controls Panel -->
-	<div v-if="hasFilters" class="filter-controls-panel mb-3 p-3 bg-light rounded">
+	<div
+		v-if="hasFilters"
+		:key="`filter-controls-${tableName}`"
+		class="filter-controls-panel mb-3 p-3 bg-light rounded"
+	>
 		<div class="row g-3 align-items-end">
 			<div v-for="col in filterableColumns" :key="col.fieldName" class="col-md-4 col-lg-3">
 				<label :for="`filter-${col.fieldName}`" class="form-label small fw-semibold">
@@ -41,7 +45,11 @@
 	</div>
 
 	<!-- Page Jump Controls -->
-	<div v-if="totalPages > 1" class="page-controls-panel mb-3 p-2 bg-light rounded">
+	<div
+		v-if="totalPages > 1"
+		:key="`page-controls-${totalPages}-${getPageInfo().total}`"
+		class="page-controls-panel mb-3 p-2 bg-light rounded"
+	>
 		<div class="row g-3 align-items-center">
 			<div class="col-auto">
 				<small class="text-muted">Quick navigation:</small>
@@ -278,6 +286,28 @@ const filterRef = computed({
 	},
 });
 
+// Watch for changes in total records to update page controls reactivity
+watch(
+	() => props.totalRecords,
+	(newTotal) => {
+		if (props.lazy && newTotal !== undefined) {
+			// Force reactivity update for page controls
+			selectedPageJump.value = "";
+		}
+	},
+);
+
+// Watch for data changes to update page controls for non-lazy tables
+watch(
+	() => props.data,
+	(newData) => {
+		if (!props.lazy && newData) {
+			// Force reactivity update for page controls
+			selectedPageJump.value = "";
+		}
+	},
+);
+
 // Watch for filter changes to sync match mode changes
 watch(
 	filterRef,

frontend/src/components/pages/Clients.vue

@@ -44,26 +44,31 @@ const onClick = () => {
 };
 
 const filters = {
-	fullName: { value: null, matchMode: FilterMatchMode.CONTAINS },
+	addressName: { value: null, matchMode: FilterMatchMode.CONTAINS },
 };
 
 const columns = [
 	{
 		label: "Name",
-		fieldName: "fullName",
+		fieldName: "addressName",
 		type: "text",
 		sortable: true,
 		filterable: true,
 	},
 	{
 		label: "Appt. Scheduled",
-		fieldName: "appointmentStatus",
+		fieldName: "appointmentScheduledStatus",
 		type: "status",
 		sortable: true,
 	},
-	{ label: "Estimate Sent", fieldName: "estimateStatus", type: "status", sortable: true },
-	{ label: "Payment Received", fieldName: "paymentStatus", type: "status", sortable: true },
-	{ label: "Job Status", fieldName: "jobStatus", type: "status", sortable: true },
+	{ label: "Estimate Sent", fieldName: "estimateSentStatus", type: "status", sortable: true },
+	{
+		label: "Payment Received",
+		fieldName: "paymentReceivedStatus",
+		type: "status",
+		sortable: true,
+	},
+	{ label: "Job Status", fieldName: "jobScheduledStatus", type: "status", sortable: true },
 ];
 // Handle lazy loading events from DataTable
 const handleLazyLoad = async (event) => {
@@ -125,12 +130,19 @@ const handleLazyLoad = async (event) => {
 		// Call API with pagination and filters
 		const result = await Api.getPaginatedClientDetails(paginationParams, filters);
 
-		// Update local state
+		// Update local state - extract from pagination structure
 		tableData.value = result.data;
-		totalRecords.value = result.totalRecords;
+		totalRecords.value = result.pagination.total;
 
 		// Update pagination store with new total
-		paginationStore.setTotalRecords("clients", result.totalRecords);
+		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(
@@ -142,13 +154,13 @@ const handleLazyLoad = async (event) => {
 			filters,
 			{
 				records: result.data,
-				totalRecords: result.totalRecords,
+				totalRecords: result.pagination.total,
 			},
 		);
 
 		console.log("Loaded from API:", {
 			records: result.data.length,
-			total: result.totalRecords,
+			total: result.pagination.total,
 			page: paginationParams.page + 1,
 		});
 	} catch (error) {