From b86d9a886168a049f3f0dbe22ffe5ea2e6dbcbb3 Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Tue, 16 Dec 2025 10:39:04 -0500
Subject: [PATCH] Styling changes to the CRM page. More in-line with LMN.
 Removed Status Buttons, moved some information around to be more cohesive.

---
 .../components/clientSubPages/Overview.vue    | 259 ++++++++----------
 1 file changed, 110 insertions(+), 149 deletions(-)

diff --git a/frontend/src/components/clientSubPages/Overview.vue b/frontend/src/components/clientSubPages/Overview.vue
index f03b6ec..09d3419 100644
--- a/frontend/src/components/clientSubPages/Overview.vue
+++ b/frontend/src/components/clientSubPages/Overview.vue
@@ -1,163 +1,124 @@
 <template>
 	<div class="overview-container">
-		<!-- Form Mode (new=true or edit mode) -->
-		<template v-if="isNew || editMode">
-			<ClientInformationForm
-				ref="clientInfoRef"
-				v-model:form-data="formData"
-				:is-submitting="isSubmitting"
-				:is-edit-mode="editMode"
-				@new-client-toggle="handleNewClientToggle"
-				@customer-selected="handleCustomerSelected"
-			/>
-
-			<ContactInformationForm
-				ref="contactInfoRef"
-				v-model:form-data="formData"
-				:is-submitting="isSubmitting"
-				:is-edit-mode="editMode"
-				:is-new-client-locked="isNewClientMode"
-				:available-contacts="availableContacts"
-				@new-contact-toggle="handleNewContactToggle"
-			/>
-
-			<AddressInformationForm
-				v-model:form-data="formData"
-				:is-submitting="isSubmitting"
-				:is-edit-mode="editMode"
+		<template v-if="!editMode">
+			<Button
+				@click="toggleEditMode"
+				icon="pi pi-pencil"
+				label="Edit Information"
+				size="small"
+				severity="secondary"
 			/>
 		</template>
+		<div class="status-cards">
+			<!-- Form Mode (new=true or edit mode) -->
+			<template v-if="isNew || editMode">
+				<ClientInformationForm
+					ref="clientInfoRef"
+					v-model:form-data="formData"
+					:is-submitting="isSubmitting"
+					:is-edit-mode="editMode"
+					@new-client-toggle="handleNewClientToggle"
+					@customer-selected="handleCustomerSelected"
+				/>
 
-		<!-- Display Mode (existing client view) -->
-		<template v-else>
-			<!-- Client Basic Info Card -->
-			<div class="info-card">
-				<div class="card-header">
-					<h3>Client Information</h3>
-					<Button
-						@click="toggleEditMode"
-						icon="pi pi-pencil"
-						label="Edit"
-						size="small"
-						severity="secondary"
-					/>
-				</div>
-				<div class="info-grid">
-					<div class="info-item">
-						<label>Customer Name:</label>
-						<span>{{ clientData?.customerName || "N/A" }}</span>
-					</div>
-					<div class="info-item">
-						<label>Customer Type:</label>
-						<span>{{ clientData?.customerType || "N/A" }}</span>
-					</div>
-					<div class="info-item">
-						<label>Customer Group:</label>
-						<span>{{ clientData?.customerGroup || "N/A" }}</span>
-					</div>
-					<div class="info-item">
-						<label>Territory:</label>
-						<span>{{ clientData?.territory || "N/A" }}</span>
-					</div>
-				</div>
-			</div>
+				<ContactInformationForm
+					ref="contactInfoRef"
+					v-model:form-data="formData"
+					:is-submitting="isSubmitting"
+					:is-edit-mode="editMode"
+					:is-new-client-locked="isNewClientMode"
+					:available-contacts="availableContacts"
+					@new-contact-toggle="handleNewContactToggle"
+				/>
 
-			<!-- Address Info Card -->
-			<div class="info-card" v-if="selectedAddressData">
-				<h3>Address Information</h3>
-				<div class="info-grid">
-					<div class="info-item full-width">
-						<label>Address Title:</label>
-						<span>{{ selectedAddressData.addressTitle || "N/A" }}</span>
-					</div>
-					<div class="info-item full-width">
-						<label>Full Address:</label>
-						<span>{{ fullAddress }}</span>
-					</div>
-					<div class="info-item">
-						<label>City:</label>
-						<span>{{ selectedAddressData.city || "N/A" }}</span>
-					</div>
-					<div class="info-item">
-						<label>State:</label>
-						<span>{{ selectedAddressData.state || "N/A" }}</span>
-					</div>
-					<div class="info-item">
-						<label>Zip Code:</label>
-						<span>{{ selectedAddressData.pincode || "N/A" }}</span>
-					</div>
-				</div>
-			</div>
+				<AddressInformationForm
+					v-model:form-data="formData"
+					:is-submitting="isSubmitting"
+					:is-edit-mode="editMode"
+				/>
+			</template>
 
-			<!-- Contact Info Card -->
-			<div class="info-card" v-if="selectedAddressData">
-				<h3>Contact Information</h3>
-				<template v-if="contactsForAddress.length > 0">
-					<div v-if="contactsForAddress.length > 1" class="contact-selector">
-						<Dropdown
-							v-model="selectedContactIndex"
-							:options="contactOptions"
-							option-label="label"
-							option-value="value"
-							placeholder="Select Contact"
-							class="w-full"
-						/>
-					</div>
+			<!-- Display Mode (existing client view) -->
+			<template v-else>
+				<!-- Address Info Card -->
+				<div class="info-card" v-if="selectedAddressData">
+					<h3>General Information</h3>
 					<div class="info-grid">
-						<div class="info-item">
-							<label>Contact Name:</label>
-							<span>{{ contactFullName }}</span>
+						<div class="info-item full-width">
+							<label>Address Title:</label>
+							<span>{{ selectedAddressData.addressTitle || "N/A" }}</span>
 						</div>
-						<div class="info-item">
-							<label>Phone:</label>
-							<span>{{ primaryContactPhone }}</span>
+						<div class="info-item full-width">
+							<label>Full Address:</label>
+							<span>{{ fullAddress }}</span>
 						</div>
-						<div class="info-item">
-							<label>Email:</label>
-							<span>{{ primaryContactEmail }}</span>
+						<div class="info-item full-width">
+							<label>City:</label>
+							<span>{{ selectedAddressData.city || "N/A" }}</span>
+						</div>
+						<div class="info-item full-width">
+							<label>State:</label>
+							<span>{{ selectedAddressData.state || "N/A" }}</span>
+						</div>
+						<div class="info-item full-width">
+							<label>Zip Code:</label>
+							<span>{{ selectedAddressData.pincode || "N/A" }}</span>
 						</div>
 					</div>
-				</template>
-				<template v-else>
-					<p>No contacts available for this address.</p>
-				</template>
-			</div>
-		</template>
+				</div>
 
-		<!-- Status Cards (only for existing clients) -->
-		<div class="status-cards" v-if="!isNew && !editMode && selectedAddressData">
-			<div class="status-card">
-				<h4>On-Site Meeting</h4>
-				<Button
-					:label="selectedAddressData.customOnsiteMeetingScheduled || 'Not Started'"
-					:severity="getStatusSeverity(selectedAddressData.customOnsiteMeetingScheduled)"
-					@click="handleStatusClick('onsite')"
-				/>
-			</div>
-			<div class="status-card">
-				<h4>Estimate Sent</h4>
-				<Button
-					:label="selectedAddressData.customEstimateSentStatus || 'Not Started'"
-					:severity="getStatusSeverity(selectedAddressData.customEstimateSentStatus)"
-					@click="handleStatusClick('estimate')"
-				/>
-			</div>
-			<div class="status-card">
-				<h4>Job Status</h4>
-				<Button
-					:label="selectedAddressData.customJobStatus || 'Not Started'"
-					:severity="getStatusSeverity(selectedAddressData.customJobStatus)"
-					@click="handleStatusClick('job')"
-				/>
-			</div>
-			<div class="status-card">
-				<h4>Payment Received</h4>
-				<Button
-					:label="selectedAddressData.customPaymentReceivedStatus || 'Not Started'"
-					:severity="getStatusSeverity(selectedAddressData.customPaymentReceivedStatus)"
-					@click="handleStatusClick('payment')"
-				/>
-			</div>
+				<!-- Client Basic Info Card -->
+				<div class="info-card">
+					<h3>Contact Information</h3>
+					<template v-if="contactsForAddress.length > 0">
+						<div class="info-grid">
+							<div class="info-item">
+								<label>Customer Name:</label>
+								<span>{{ clientData?.customerName || "N/A" }}</span>
+							</div>
+							<div class="info-item">
+								<label>Customer Type:</label>
+								<span>{{ clientData?.customerType || "N/A" }}</span>
+							</div>
+							<div v-if="contactsForAddress.length > 1" class="contact-selector">
+								<Dropdown
+									v-model="selectedContactIndex"
+									:options="contactOptions"
+									option-label="label"
+									option-value="value"
+									placeholder="Select Contact"
+									class="w-full"
+								/>
+							</div>
+							<div class="info-grid">
+								<div class="info-item">
+									<label>Contact Name:</label>
+									<span>{{ contactFullName }}</span>
+								</div>
+								<div class="info-item">
+									<label>Phone:</label>
+									<span>{{ primaryContactPhone }}</span>
+								</div>
+								<div class="info-item">
+									<label>Email:</label>
+									<span>{{ primaryContactEmail }}</span>
+								</div>
+							</div>
+							<div class="info-item">
+								<label>Customer Group:</label>
+								<span>{{ clientData?.customerGroup || "N/A" }}</span>
+							</div>
+							<div class="info-item">
+								<label>Territory:</label>
+								<span>{{ clientData?.territory || "N/A" }}</span>
+							</div>
+						</div>
+					</template>
+					<template v-else>
+						<p>No contacts available for this address.</p>
+					</template>
+				</div>
+			</template>
 		</div>
 
 		<!-- Form Actions -->
@@ -408,7 +369,7 @@ const isFormValid = computed(() => {
 	const hasCity = formData.value.city?.trim();
 	const hasState = formData.value.state?.trim();
 	const hasContacts = formData.value.contacts && formData.value.contacts.length > 0;
-	
+
 	// Check that all contacts have required fields
 	const allContactsValid = formData.value.contacts?.every((contact) => {
 		return (
@@ -684,7 +645,7 @@ const handleCancel = () => {
 
 .info-item {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	gap: 0.5rem;
 }