From 10cda824e827dff82ad471841ccb33072906f4b2 Mon Sep 17 00:00:00 2001
From: Casey Wittrock <casey@shilohcode.com>
Date: Tue, 11 Nov 2025 12:40:47 -0600
Subject: [PATCH] fix data table

---
 .../documentation/components/DataTable.md     |  97 +++++++------
 frontend/src/components/common/DataTable.vue  | 137 ++++++++++++------
 frontend/src/components/pages/Clients.vue     |  20 +--
 3 files changed, 151 insertions(+), 103 deletions(-)

diff --git a/frontend/documentation/components/DataTable.md b/frontend/documentation/components/DataTable.md
index c4596a1..3033f60 100644
--- a/frontend/documentation/components/DataTable.md
+++ b/frontend/documentation/components/DataTable.md
@@ -768,102 +768,107 @@ const customFilters = {
 
 ```vue
 <script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useModalStore } from '@/stores/modal'
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { useModalStore } from "@/stores/modal";
 
-const router = useRouter()
-const modalStore = useModalStore()
+const router = useRouter();
+const modalStore = useModalStore();
 
 const columns = [
-  { fieldName: 'name', label: 'Client Name', sortable: true, filterable: true },
-  { fieldName: 'email', label: 'Email', filterable: true },
-  { fieldName: 'status', label: 'Status', type: 'status', sortable: true }
-]
+  { fieldName: "name", label: "Client Name", sortable: true, filterable: true },
+  { fieldName: "email", label: "Email", filterable: true },
+  { fieldName: "status", label: "Status", type: "status", sortable: true },
+];
 
 const data = ref([
-  { id: 1, name: 'Acme Corp', email: 'contact@acme.com', status: 'completed' },
-  { id: 2, name: 'Tech Solutions', email: 'info@tech.com', status: 'in progress' }
-])
+  { id: 1, name: "Acme Corp", email: "contact@acme.com", status: "completed" },
+  {
+    id: 2,
+    name: "Tech Solutions",
+    email: "info@tech.com",
+    status: "in progress",
+  },
+]);
 
 const tableActions = [
   // Left-positioned action with filled style
   {
-    label: 'Quick Export',
-    icon: 'pi pi-download',
+    label: "Quick Export",
+    icon: "pi pi-download",
     action: () => exportAllClients(),
-    severity: 'success',
-    layout: { position: 'left', variant: 'outlined' }
+    severity: "success",
+    layout: { position: "left", variant: "outlined" },
   },
   // Center-positioned bulk action
   {
-    label: 'Archive Selected',
-    icon: 'pi pi-archive',
+    label: "Archive Selected",
+    icon: "pi pi-archive",
     action: (selectedRows) => archiveClients(selectedRows),
-    severity: 'warning',
+    severity: "warning",
     requiresMultipleSelection: true,
-    layout: { position: 'center', variant: 'outlined' }
+    layout: { position: "center", variant: "outlined" },
   },
   // Right-positioned main action
   {
-    label: 'Create Client',
-    icon: 'pi pi-plus',
-    action: () => modalStore.openModal('createClient'),
-    severity: 'info',
-    layout: { position: 'right', variant: 'filled' }
+    label: "Create Client",
+    icon: "pi pi-plus",
+    action: () => modalStore.openModal("createClient"),
+    severity: "info",
+    layout: { position: "right", variant: "filled" },
   },
   // Single selection action
   {
-    label: 'Edit Details',
-    icon: 'pi pi-pencil',
+    label: "Edit Details",
+    icon: "pi pi-pencil",
     action: (rowData) => router.push(`/clients/${rowData.id}/edit`),
-    severity: 'secondary',
+    severity: "secondary",
     requiresSelection: true,
-    layout: { position: 'left', variant: 'text' }
+    layout: { position: "left", variant: "text" },
   },
   // Primary row action - most important
   {
-    label: 'View',
-    icon: 'pi pi-eye',
+    label: "View",
+    icon: "pi pi-eye",
     action: (rowData) => router.push(`/clients/${rowData.id}`),
-    severity: 'info',
+    severity: "info",
     rowAction: true,
-    layout: { priority: 'primary', variant: 'outlined' }
+    layout: { priority: "primary", variant: "outlined" },
   },
   // Secondary row action - less important
   {
-    label: 'Contact',
-    icon: 'pi pi-phone',
+    label: "Contact",
+    icon: "pi pi-phone",
     action: (rowData) => initiateContact(rowData),
-    severity: 'success',
+    severity: "success",
     rowAction: true,
-    layout: { priority: 'secondary', variant: 'text' }
+    layout: { priority: "secondary", variant: "text" },
   },
   // Dropdown row action - additional options
   {
-    label: 'More',
-    icon: 'pi pi-ellipsis-v',
+    label: "More",
+    icon: "pi pi-ellipsis-v",
     action: (rowData) => showMoreOptions(rowData),
     rowAction: true,
-    layout: { priority: 'dropdown', variant: 'icon-only' }
-  }
-]
+    layout: { priority: "dropdown", variant: "icon-only" },
+  },
+];
 
 const exportAllClients = () => {
   // Export logic
-}
+};
 
 const archiveClients = (clients) => {
   // Archive logic
-}
+};
 
 const initiateContact = (client) => {
   // Contact logic
-}
+};
 
 const showMoreOptions = (client) => {
   // More options logic
-}
+};
 </script>
 
 <template>
diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index b63cc55..b9c1e12 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -1,10 +1,6 @@
 <template lang="html">
 	<!-- Filter Controls Panel -->
-	<div
-		v-if="hasFilters"
-		:key="`filter-controls-${tableName}`"
-		class="dt-filter-panel"
-	>
+	<div v-if="hasFilters" :key="`filter-controls-${tableName}`" class="dt-filter-panel">
 		<div class="dt-filter-header">
 			<h6 class="dt-filter-title">
 				<i class="pi pi-filter"></i>
@@ -85,14 +81,14 @@
 	</div>
 
 	<!-- Bulk Actions Section (when rows are selected) -->
-	<div
-		v-if="hasBulkActions && hasSelectedRows"
-		class="dt-bulk-actions-panel"
-	>
+	<div v-if="hasBulkActions && hasSelectedRows" class="dt-bulk-actions-panel">
 		<div class="dt-bulk-actions-content">
 			<div class="dt-bulk-actions-groups">
 				<!-- Left positioned bulk actions -->
-				<div v-if="bulkActionsGrouped.left.length > 0" class="dt-action-group dt-action-group-left">
+				<div
+					v-if="bulkActionsGrouped.left.length > 0"
+					class="dt-action-group dt-action-group-left"
+				>
 					<Button
 						v-for="action in bulkActionsGrouped.left"
 						:key="action.label"
@@ -106,7 +102,10 @@
 					/>
 				</div>
 				<!-- Center positioned bulk actions -->
-				<div v-if="bulkActionsGrouped.center.length > 0" class="dt-action-group dt-action-group-center">
+				<div
+					v-if="bulkActionsGrouped.center.length > 0"
+					class="dt-action-group dt-action-group-center"
+				>
 					<Button
 						v-for="action in bulkActionsGrouped.center"
 						:key="action.label"
@@ -120,7 +119,10 @@
 					/>
 				</div>
 				<!-- Right positioned bulk actions -->
-				<div v-if="bulkActionsGrouped.right.length > 0" class="dt-action-group dt-action-group-right">
+				<div
+					v-if="bulkActionsGrouped.right.length > 0"
+					class="dt-action-group dt-action-group-right"
+				>
 					<Button
 						v-for="action in bulkActionsGrouped.right"
 						:key="action.label"
@@ -136,7 +138,12 @@
 			</div>
 			<div class="dt-bulk-actions-status">
 				<i class="pi pi-check-circle"></i>
-				<span>{{ selectedRows.length }} row{{ selectedRows.length !== 1 ? "s" : "" }} selected</span>
+				<span
+					>{{ selectedRows.length }} row{{
+						selectedRows.length !== 1 ? "s" : ""
+					}}
+					selected</span
+				>
 			</div>
 		</div>
 	</div>
@@ -145,7 +152,10 @@
 	<div v-if="hasTopActions" class="dt-global-actions-panel">
 		<div class="dt-global-actions-content">
 			<!-- Left positioned actions -->
-			<div v-if="topActionsGrouped.left.length > 0" class="dt-action-group dt-action-group-left">
+			<div
+				v-if="topActionsGrouped.left.length > 0"
+				class="dt-action-group dt-action-group-left"
+			>
 				<Button
 					v-for="action in topActionsGrouped.left"
 					:key="action.label"
@@ -159,7 +169,10 @@
 				/>
 			</div>
 			<!-- Center positioned actions -->
-			<div v-if="topActionsGrouped.center.length > 0" class="dt-action-group dt-action-group-center">
+			<div
+				v-if="topActionsGrouped.center.length > 0"
+				class="dt-action-group dt-action-group-center"
+			>
 				<Button
 					v-for="action in topActionsGrouped.center"
 					:key="action.label"
@@ -173,7 +186,10 @@
 				/>
 			</div>
 			<!-- Right positioned actions -->
-			<div v-if="topActionsGrouped.right.length > 0" class="dt-action-group dt-action-group-right">
+			<div
+				v-if="topActionsGrouped.right.length > 0"
+				class="dt-action-group dt-action-group-right"
+			>
 				<Button
 					v-for="action in topActionsGrouped.right"
 					:key="action.label"
@@ -190,7 +206,9 @@
 		<div v-if="singleSelectionActions.length > 0" class="dt-global-actions-status">
 			<i class="pi pi-info-circle"></i>
 			<span v-if="!hasSelectedRows">Select a row to enable single-selection actions</span>
-			<span v-else-if="selectedRows.length > 1">Select only one row to enable single-selection actions</span>
+			<span v-else-if="selectedRows.length > 1"
+				>Select only one row to enable single-selection actions</span
+			>
 			<span v-else-if="hasExactlyOneRowSelected">Single-selection actions enabled</span>
 		</div>
 	</div>
@@ -277,7 +295,10 @@
 			<template #body="slotProps">
 				<div class="dt-row-actions">
 					<!-- Primary row actions -->
-					<div v-if="rowActionsGrouped.primary.length > 0" class="dt-row-actions-primary">
+					<div
+						v-if="rowActionsGrouped.primary.length > 0"
+						class="dt-row-actions-primary"
+					>
 						<Button
 							v-for="action in rowActionsGrouped.primary"
 							:key="action.label"
@@ -287,12 +308,18 @@
 							:size="action.size || 'small'"
 							@click="handleRowAction(action, slotProps.data)"
 							:disabled="loading"
-							:class="['dt-row-btn', action.layout?.variant && `dt-row-btn-${action.layout.variant}`]"
+							:class="[
+								'dt-row-btn',
+								action.layout?.variant && `dt-row-btn-${action.layout.variant}`,
+							]"
 							outlined
 						/>
 					</div>
 					<!-- Secondary row actions -->
-					<div v-if="rowActionsGrouped.secondary.length > 0" class="dt-row-actions-secondary">
+					<div
+						v-if="rowActionsGrouped.secondary.length > 0"
+						class="dt-row-actions-secondary"
+					>
 						<Button
 							v-for="action in rowActionsGrouped.secondary"
 							:key="action.label"
@@ -302,12 +329,19 @@
 							:size="action.size || 'small'"
 							@click="handleRowAction(action, slotProps.data)"
 							:disabled="loading"
-							:class="['dt-row-btn', 'dt-row-btn-secondary', action.layout?.variant && `dt-row-btn-${action.layout.variant}`]"
+							:class="[
+								'dt-row-btn',
+								'dt-row-btn-secondary',
+								action.layout?.variant && `dt-row-btn-${action.layout.variant}`,
+							]"
 							text
 						/>
 					</div>
 					<!-- Dropdown menu for overflow actions -->
-					<div v-if="rowActionsGrouped.dropdown.length > 0" class="dt-row-actions-dropdown">
+					<div
+						v-if="rowActionsGrouped.dropdown.length > 0"
+						class="dt-row-actions-dropdown"
+					>
 						<Button
 							icon="pi pi-ellipsis-v"
 							:size="'small'"
@@ -593,27 +627,33 @@ const bulkActions = computed(() => {
 const topActionsGrouped = computed(() => {
 	const actions = [...globalActions.value, ...singleSelectionActions.value];
 	const groups = {
-		left: actions.filter(action => action.layout?.position === 'left' || !action.layout?.position),
-		center: actions.filter(action => action.layout?.position === 'center'),
-		right: actions.filter(action => action.layout?.position === 'right'),
+		left: actions.filter(
+			(action) => action.layout?.position === "left" || !action.layout?.position,
+		),
+		center: actions.filter((action) => action.layout?.position === "center"),
+		right: actions.filter((action) => action.layout?.position === "right"),
 	};
 	return groups;
 });
 
 const bulkActionsGrouped = computed(() => {
 	const groups = {
-		left: bulkActions.value.filter(action => action.layout?.position === 'left' || !action.layout?.position),
-		center: bulkActions.value.filter(action => action.layout?.position === 'center'),
-		right: bulkActions.value.filter(action => action.layout?.position === 'right'),
+		left: bulkActions.value.filter(
+			(action) => action.layout?.position === "left" || !action.layout?.position,
+		),
+		center: bulkActions.value.filter((action) => action.layout?.position === "center"),
+		right: bulkActions.value.filter((action) => action.layout?.position === "right"),
 	};
 	return groups;
 });
 
 const rowActionsGrouped = computed(() => {
 	const groups = {
-		primary: rowActions.value.filter(action => action.layout?.priority === 'primary' || !action.layout?.priority),
-		secondary: rowActions.value.filter(action => action.layout?.priority === 'secondary'),
-		dropdown: rowActions.value.filter(action => action.layout?.priority === 'dropdown'),
+		primary: rowActions.value.filter(
+			(action) => action.layout?.priority === "primary" || !action.layout?.priority,
+		),
+		secondary: rowActions.value.filter((action) => action.layout?.priority === "secondary"),
+		dropdown: rowActions.value.filter((action) => action.layout?.priority === "dropdown"),
 	};
 	return groups;
 });
@@ -928,9 +968,9 @@ const handleTopAction = (action) => {
 // Helper methods for action styling and behavior
 const getActionSeverity = (action) => {
 	if (action.requiresSelection) {
-		return action.style || 'info';
+		return action.style || "info";
 	}
-	return action.style || 'primary';
+	return action.style || "primary";
 };
 
 const getActionDisabled = (action) => {
@@ -942,14 +982,14 @@ const getActionDisabled = (action) => {
 };
 
 const getActionClasses = (action) => {
-	const classes = ['dt-action-btn'];
+	const classes = ["dt-action-btn"];
 	if (action.requiresSelection) {
-		classes.push('dt-action-btn-selection');
+		classes.push("dt-action-btn-selection");
 		if (!hasExactlyOneRowSelected.value) {
-			classes.push('dt-action-btn-disabled');
+			classes.push("dt-action-btn-disabled");
 		}
 	} else {
-		classes.push('dt-action-btn-global');
+		classes.push("dt-action-btn-global");
 	}
 	if (action.layout?.variant) {
 		classes.push(`dt-action-btn-${action.layout.variant}`);
@@ -960,7 +1000,7 @@ const getActionClasses = (action) => {
 const toggleRowDropdown = (event, rowData) => {
 	// Placeholder for dropdown menu functionality
 	// Could be implemented with PrimeVue OverlayPanel or Menu component
-	console.log('Toggle dropdown for row:', rowData);
+	console.log("Toggle dropdown for row:", rowData);
 };
 
 const handleBulkAction = (action, selectedRows) => {
@@ -1126,7 +1166,9 @@ defineExpose({
 	border-radius: 8px;
 	padding: 0.625rem;
 	font-size: 0.875rem;
-	transition: border-color 0.2s ease, box-shadow 0.2s ease;
+	transition:
+		border-color 0.2s ease,
+		box-shadow 0.2s ease;
 }
 
 .dt-filter-input:focus {
@@ -1141,7 +1183,8 @@ defineExpose({
 	flex-wrap: wrap;
 }
 
-.dt-btn-primary, .dt-btn-secondary {
+.dt-btn-primary,
+.dt-btn-secondary {
 	border-radius: 8px;
 	font-weight: 500;
 	transition: all 0.2s ease;
@@ -1433,22 +1476,22 @@ defineExpose({
 	.dt-filter-grid {
 		grid-template-columns: 1fr;
 	}
-	
+
 	.dt-pagination-content {
 		flex-direction: column;
 		align-items: stretch;
 		text-align: center;
 	}
-	
+
 	.dt-global-actions-content {
 		flex-direction: column;
 		align-items: stretch;
 	}
-	
+
 	.dt-action-group {
 		justify-content: center;
 	}
-	
+
 	.dt-bulk-actions-groups {
 		flex-direction: column;
 		align-items: stretch;
@@ -1464,20 +1507,20 @@ defineExpose({
 		border-color: #374151;
 		color: #f9fafb;
 	}
-	
+
 	.dt-filter-title,
 	.dt-filter-label,
 	.dt-pagination-label {
 		color: #f9fafb;
 	}
-	
+
 	.dt-filter-input,
 	.dt-pagination-select {
 		background: #374151;
 		border-color: #4b5563;
 		color: #f9fafb;
 	}
-	
+
 	.dt-filter-status,
 	.dt-global-actions-status {
 		background: #374151;
diff --git a/frontend/src/components/pages/Clients.vue b/frontend/src/components/pages/Clients.vue
index cbc3bda..f17b8b3 100644
--- a/frontend/src/components/pages/Clients.vue
+++ b/frontend/src/components/pages/Clients.vue
@@ -158,8 +158,8 @@ const tableActions = [
 		icon: "pi pi-plus",
 		layout: {
 			position: "left",
-			variant: "filled"
-		}
+			variant: "filled",
+		},
 		// Global action - always available
 	},
 	{
@@ -173,8 +173,8 @@ const tableActions = [
 		requiresSelection: true, // Single selection action - appears above table, enabled when exactly one row selected
 		layout: {
 			position: "center",
-			variant: "outlined"
-		}
+			variant: "outlined",
+		},
 	},
 	{
 		label: "Export Selected",
@@ -188,8 +188,8 @@ const tableActions = [
 		requiresMultipleSelection: true, // Bulk action - operates on selected rows
 		layout: {
 			position: "right",
-			variant: "filled"
-		}
+			variant: "filled",
+		},
 	},
 	{
 		label: "Edit",
@@ -203,8 +203,8 @@ const tableActions = [
 		rowAction: true, // Row action - appears in each row's actions column
 		layout: {
 			priority: "primary",
-			variant: "outlined"
-		}
+			variant: "outlined",
+		},
 	},
 	{
 		label: "Quick View",
@@ -218,8 +218,8 @@ const tableActions = [
 		rowAction: true, // Row action - appears in each row's actions column
 		layout: {
 			priority: "secondary",
-			variant: "compact"
-		}
+			variant: "compact",
+		},
 	},
 ];
 // Handle lazy loading events from DataTable