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

add templates, update styles

Browse source
This commit is contained in:
Casey 2026-01-27 16:34:06 -06:00
parent 8542a9bf37
commit 8452f57787
6 changed files with 362 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

115
frontend/src/components/clientView/GeneralClientInfo.vue
View file

@ -4,6 +4,26 @@
<!-- Lead Badge -->
<div v-if="isLead" class="lead-badge-container">
<Badge value="LEAD" severity="warn" size="large" />
<div class="action-buttons">
<v-btn
size="small"
variant="outlined"
color="primary"
@click="addAddress"
>
<v-icon left size="small">mdi-map-marker-plus</v-icon>
Add Address
</v-btn>
<v-btn
size="small"
variant="outlined"
color="primary"
@click="addContact"
>
<v-icon left size="small">mdi-account-plus</v-icon>
Add Contact
</v-btn>
</div>
</div>
<!-- Client Name (only show for Company type) -->
@ -145,35 +165,56 @@ const formattedCreationDate = computed(() => {
day: "numeric",
});
});
// Placeholder methods for adding address and contact
const addAddress = () => {
console.log("Add Address modal would open here");
// TODO: Open add address modal
};
const addContact = () => {
console.log("Add Contact modal would open here");
// TODO: Open add contact modal
};
</script>
<style scoped>
.general-client-info {
background: var(--surface-card);
border-radius: 8px;
padding: 0.75rem 1rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--surface-border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
margin-bottom: 0.75rem;
}
.lead-badge-container {
display: inline-flex;
margin-left: 0.5rem;
vertical-align: middle;
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.25rem;
}
.action-buttons {
display: flex;
gap: 0.5rem;
}
.info-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem 1.5rem;
align-items: start;
}
.info-section {
display: inline-flex;
display: grid;
grid-template-columns: 120px 1fr;
align-items: center;
gap: 0.5rem;
gap: 0.75rem;
min-height: 2rem;
padding: 0.25rem 0;
}
.info-section label {
@ -182,12 +223,18 @@ const formattedCreationDate = computed(() => {
color: var(--text-color-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
justify-self: start;
align-self: center;
margin: 0;
}
.info-value {
font-size: 0.85rem;
color: var(--text-color);
font-weight: 500;
justify-self: start;
align-self: center;
margin: 0;
}
.info-value.large {
@ -197,30 +244,36 @@ const formattedCreationDate = computed(() => {
}
.companies-list {
display: inline-flex;
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
justify-content: flex-start;
align-items: center;
}
.primary-contact {
display: flex;
align-items: center;
gap: 0.5rem;
grid-column: span 1;
justify-self: stretch;
}
.contact-details {
display: inline-flex;
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 0.35rem 0.75rem;
padding: 0.5rem 0.75rem;
background: var(--surface-ground);
border-radius: 4px;
width: 100%;
justify-content: flex-start;
align-items: center;
}
.contact-item {
display: inline-flex;
display: flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
flex: 1;
}
.contact-item i {
@ -234,23 +287,29 @@ const formattedCreationDate = computed(() => {
}
.stats {
display: inline-flex;
align-items: center;
gap: 0.5rem;
grid-column: span 1;
justify-self: stretch;
}
.stats-grid {
display: inline-flex;
display: flex;
gap: 1rem;
padding: 0.35rem 0.75rem;
padding: 0.5rem 0.75rem;
background: var(--surface-ground);
border-radius: 4px;
width: 100%;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.stat-item {
display: inline-flex;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
gap: 0.25rem;
text-align: center;
min-width: 60px;
}
.stat-item i {
@ -259,14 +318,18 @@ const formattedCreationDate = computed(() => {
}
.stat-value {
font-size: 0.95rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-color);
line-height: 1.2;
}
.stat-label {
font-size: 0.75rem;
font-size: 0.7rem;
color: var(--text-color-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.2;
}
</style>