bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: bnilsen:4401a541ebab404acf41e6ada3e60e3c016813f3
Branches Tags
bnilsen:main
bnilsen:test-fixtures
...
compare: bnilsen:59320f90bbe115be1e23314d87ae0bd897e39de5
Branches Tags
bnilsen:main
bnilsen:test-fixtures

2 commits
4401a541eb ... 59320f90bb

Author SHA1 Message Date
Casey
59320f90bb update mapping of data return for a lead 2025-12-16 11:14:29 -06:00
rocketdebris
4ca18a514c Styling changes to the CRM page. More in-line with LMN. Removed Status Buttons, moved some information around to be more cohesive. 2025-12-16 11:13:04 -06:00
1 changed files with 113 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

110
frontend/src/components/clientSubPages/Overview.vue
View file

@ -1,5 +1,16 @@
<template> <template>
<div class="overview-container"> <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"> <template v-if="isNew || editMode">
<ClientInformationForm <ClientInformationForm
ref="clientInfoRef" ref="clientInfoRef"
@ -32,41 +43,9 @@
<!-- Display Mode (existing client view) --> <!-- Display Mode (existing client view) -->
<template v-else> <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 --> <!-- Address Info Card -->
<div class="info-card" v-if="selectedAddressData"> <div class="info-card" v-if="selectedAddressData">
<h3>Address Information</h3> <h3>General Information</h3>
<div class="info-grid"> <div class="info-grid">
<div class="info-item full-width"> <div class="info-item full-width">
<label>Address Title:</label> <label>Address Title:</label>
@ -76,25 +55,34 @@
<label>Full Address:</label> <label>Full Address:</label>
<span>{{ fullAddress }}</span> <span>{{ fullAddress }}</span>
</div> </div>
<div class="info-item"> <div class="info-item full-width">
<label>City:</label> <label>City:</label>
<span>{{ selectedAddressData.city || "N/A" }}</span> <span>{{ selectedAddressData.city || "N/A" }}</span>
</div> </div>
<div class="info-item"> <div class="info-item full-width">
<label>State:</label> <label>State:</label>
<span>{{ selectedAddressData.state || "N/A" }}</span> <span>{{ selectedAddressData.state || "N/A" }}</span>
</div> </div>
<div class="info-item"> <div class="info-item full-width">
<label>Zip Code:</label> <label>Zip Code:</label>
<span>{{ selectedAddressData.pincode || "N/A" }}</span> <span>{{ selectedAddressData.pincode || "N/A" }}</span>
</div> </div>
</div> </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> <h3>Contact Information</h3>
<template v-if="contactsForAddress.length > 0"> <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"> <div v-if="contactsForAddress.length > 1" class="contact-selector">
<Dropdown <Dropdown
v-model="selectedContactIndex" v-model="selectedContactIndex"
@ -119,47 +107,21 @@
<span>{{ primaryContactEmail }}</span> <span>{{ primaryContactEmail }}</span>
</div> </div>
</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>
<template v-else> <template v-else>
<p>No contacts available for this address.</p> <p>No contacts available for this address.</p>
</template> </template>
</div> </div>
</template> </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> </div>
<!-- Form Actions --> <!-- Form Actions -->
@ -686,7 +648,7 @@ const handleCancel = () => {
.info-item { .info-item {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
gap: 0.5rem; gap: 0.5rem;
} }