update mapping of data return for a lead

frontend/src/components/clientSubPages/Overview.vue

@@ -1,5 +1,16 @@
 <template>
 	<div class="overview-container">
+		<template v-if="!editMode">
+			<Button
+				@click="toggleEditMode"
+				icon="pi pi-pencil"
+				label="Edit Information"
+				size="small"
+				severity="secondary"
+			/>
+		</template>
+		<div class="status-cards">
+				<template v-if="isNew || editMode">
 				<template v-if="isNew || editMode">
 				<ClientInformationForm
 					ref="clientInfoRef"
@@ -32,41 +43,9 @@
 
 			<!-- 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>
-
 				<!-- Address Info Card -->
 				<div class="info-card" v-if="selectedAddressData">
-				<h3>Address Information</h3>
+					<h3>General Information</h3>
 					<div class="info-grid">
 						<div class="info-item full-width">
 							<label>Address Title:</label>
@@ -76,25 +55,34 @@
 							<label>Full Address:</label>
 							<span>{{ fullAddress }}</span>
 						</div>
-					<div class="info-item">
+						<div class="info-item full-width">
 							<label>City:</label>
 							<span>{{ selectedAddressData.city || "N/A" }}</span>
 						</div>
-					<div class="info-item">
+						<div class="info-item full-width">
 							<label>State:</label>
 							<span>{{ selectedAddressData.state || "N/A" }}</span>
 						</div>
-					<div class="info-item">
+						<div class="info-item full-width">
 							<label>Zip Code:</label>
 							<span>{{ selectedAddressData.pincode || "N/A" }}</span>
 						</div>
 					</div>
 				</div>
 
-			<!-- Contact Info Card -->
+				<!-- Client Basic Info Card -->
-			<div class="info-card" v-if="selectedAddressData">
+				<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"
@@ -119,47 +107,21 @@
 									<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>
-
-		<!-- 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>
 		</div>
 
 		<!-- Form Actions -->
@@ -686,7 +648,7 @@ const handleCancel = () => {
 
 .info-item {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	gap: 0.5rem;
 }