From 181db2c4e6e8fd6cfb2abebad6c7a0666b4cd2ac Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Thu, 8 Jan 2026 11:41:01 -0500
Subject: [PATCH] Added quick action buttons to Clients page and Client Detail
 Page.

---
 .../clientSubPages/ClientInformationForm.vue  |  2 +-
 .../components/clientSubPages/Overview.vue    | 66 ++++++++++++++-----
 frontend/src/components/pages/Clients.vue     | 23 +++++--
 3 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/clientSubPages/ClientInformationForm.vue b/frontend/src/components/clientSubPages/ClientInformationForm.vue
index ce4a34a..ba2f949 100644
--- a/frontend/src/components/clientSubPages/ClientInformationForm.vue
+++ b/frontend/src/components/clientSubPages/ClientInformationForm.vue
@@ -254,7 +254,7 @@ defineExpose({
 	background: var(--surface-card);
 	border-radius: 8px;
 	padding: 1.5rem;
-	border: 1px solid var(--surface-border);
+	/*border: 1px solid var(--surface-border);*/
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
diff --git a/frontend/src/components/clientSubPages/Overview.vue b/frontend/src/components/clientSubPages/Overview.vue
index 967fc03..bbaacaa 100644
--- a/frontend/src/components/clientSubPages/Overview.vue
+++ b/frontend/src/components/clientSubPages/Overview.vue
@@ -1,13 +1,22 @@
 <template>
 	<div class="overview-container">
 		<template v-if="!editMode && !isNew">
-			<Button
-				@click="toggleEditMode"
-				icon="pi pi-pencil"
-				label="Edit Information"
-				size="small"
-				severity="secondary"
-			/>
+			<div class=quick-action-bar>
+				<Button
+					@click="toggleEditMode"
+					icon="pi pi-pencil"
+					label="Edit Information"
+					size="small"
+					severity="secondary"
+				/>
+				<Button
+					@click="handleCreateEstimate"
+					icon=""
+					label="Create Estimate"
+					size="small"
+					severity="secondary"
+				/>
+			</div>
 		</template>
 		<div class="status-cards">
 				<template v-if="isNew || editMode">
@@ -43,7 +52,7 @@
 			<!-- Display Mode (existing client view) -->
 			<template v-else>
 				<!-- Address Info Card -->
-				<div class="info-card" v-if="selectedAddressData">
+				<div class="info-card w-half" v-if="selectedAddressData">
 					<h3>General Information</h3>
 					<div class="info-grid">
 						<div class="info-item full-width">
@@ -70,7 +79,7 @@
 				</div>
 
 				<!-- Client Basic Info Card -->
-				<div class="info-card">
+				<div class="info-card w-half">
 					<h3>Contact Information</h3>
 					<template v-if="contactsForAddress.length > 0">
 						<div class="info-grid">
@@ -122,7 +131,7 @@
 				</div>
 
 				<!-- Financials At a Glance -->
-				<div class="info-card">
+				<div class="info-card w-half">
 					<h3>Open Balances</h3>
 					<span>$3200.00</span>
 					<button class="sidebar-button" @click="navigateTo('/invoices')">
@@ -150,7 +159,7 @@
 
 		<div class="status-cards">
 			<!-- Location Map (only for existing clients) -->
-			<div class="map-card" v-if="!isNew && !editMode">
+			<div class="map-card w-half" v-if="!isNew && !editMode">
 				<h3>Location</h3>
 				<LeafletMap
 					:latitude="latitude"
@@ -168,7 +177,7 @@
 			</div>
 
 			<!-- Client History  -->
-			<div class="info-card">
+			<div class="info-card w-half">
 				<History/>
 			</div>
 		</div>
@@ -538,6 +547,12 @@ const handleNewContactToggle = (isNewContact) => {
 	}
 };
 
+const handleCreateEstimate = () => {
+	if (props.selectedAddress) {
+		router.push(`/estimate?new=true&address=${props.selectedAddress}`);
+	}
+};
+
 // Edit mode methods
 const toggleEditMode = () => {
 	showEditConfirmDialog.value = true;
@@ -631,8 +646,15 @@ const handleCancel = () => {
 .overview-container {
 	display: flex;
 	flex-direction: column;
-	gap: 1.5rem;
-	padding: 1rem;
+	gap: 1rem;
+	/*padding: 1rem;*/
+}
+
+.quick-action-bar {
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+	justify-content: flex-end;
 }
 
 .info-card,
@@ -643,6 +665,13 @@ const handleCancel = () => {
 	border: 1px solid var(--surface-border);
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+.info-card {
+	flex: 1 1 300px;
+}
+
+.map-card {
+	flex: 1 1 600px;
+}
 
 .card-header {
 	display: flex;
@@ -664,9 +693,8 @@ const handleCancel = () => {
 }
 
 .info-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-	gap: 1rem;
+	display: flex;
+	flex-direction: column;
 }
 
 .info-item {
@@ -772,6 +800,10 @@ const handleCancel = () => {
 	width: 100% !important;
 }
 
+/*.w-half {
+	width: 45% !important;
+}*/
+
 @media (max-width: 768px) {
 	.overview-container {
 		padding: 0.5rem;
diff --git a/frontend/src/components/pages/Clients.vue b/frontend/src/components/pages/Clients.vue
index a9bde8c..9854aea 100644
--- a/frontend/src/components/pages/Clients.vue
+++ b/frontend/src/components/pages/Clients.vue
@@ -132,6 +132,13 @@ const columns = [
 		filterInputId: "propertySearchInput",
 	},
 	//{
+	//	label: "Create Estimate",
+	//	fieldName: "createEstimate",
+	//	type: "status-button",
+	//	buttonVariant: "outlined",
+	//	onStatusClick: (status, rowData) => handleEstimateClick(status, rowData),
+	//},
+	//{
 	//	label: "Appt. Scheduled",
 	//	fieldName: "appointmentScheduledStatus",
 	//	type: "status-button",
@@ -184,6 +191,14 @@ const tableActions = [
 		},
 		// Global action - always available
 	},
+	{
+		label: "Create Estimate",
+		rowAction: true,
+		action: (rowData) => {
+			const address = encodeURIComponent(rowData.address);
+			router.push(`/estimate?new=true&address=${address}`);
+		},
+	},
 	// {
 	// 	label: "Export Selected",
 	// 	action: (selectedRows) => {
@@ -284,13 +299,7 @@ const handleAppointmentClick = (status, rowData) => {
 
 const handleEstimateClick = (status, rowData) => {
 	const address = encodeURIComponent(rowData.address);
-	if (status?.toLowerCase() === "not started") {
-		// Navigate to create quotation/estimate
-		router.push(`/estimate?new=true&address=${address}`);
-	} else {
-		// Navigate to view estimate details
-		router.push('/estimate?address=' + address);
-	}
+	router.push(`/estimate?new=true&address=${address}`);
 };
 
 const handlePaymentClick = (status, rowData) => {