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

Styling changes to the CRM page. More in-line with LMN. Removed Status Buttons, moved some information around to be more cohesive.

Browse source
This commit is contained in:
rocketdebris 2025-12-16 10:39:04 -05:00
parent e508f265a1
commit b86d9a8861
1 changed files with 110 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,15 @@
<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">
<!-- Form Mode (new=true or edit mode) -->
<template v-if="isNew || editMode">
<ClientInformationForm
@ -30,41 +40,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>
@ -74,25 +52,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 -->
<div class="info-card" v-if="selectedAddressData">
<!-- 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"
@ -117,47 +104,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 -->
@ -684,7 +645,7 @@ const handleCancel = () => {
.info-item {
display: flex;
flex-direction: column;
flex-direction: row;
gap: 0.5rem;
}