0a431c8db4
Enhances customer management with interactive drawer Introduces detailed customer profile view with metadata Implements search functionality and dynamic drawer population Improves user experience for customer information exploration
339 lines
7.3 KiB
CSS
339 lines
7.3 KiB
CSS
/**
|
|
* Customers - Page Styling
|
|
*
|
|
* Feature-specific styling only.
|
|
* Reuses:
|
|
* - swp-sticky-header, swp-header-content, swp-page-container (page.css)
|
|
* - swp-stats-row, swp-stat-card, swp-quick-stats (stats.css)
|
|
* - swp-action-bar, swp-search-input (components.css, services.css)
|
|
* - swp-data-table, swp-avatar, swp-tag, swp-empty-state (components.css)
|
|
* - swp-btn (components.css)
|
|
*/
|
|
|
|
/* ===========================================
|
|
CUSTOMER TABLE (uses swp-data-table from components.css)
|
|
=========================================== */
|
|
swp-card.customers-list {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Table columns: Navn(1fr) | Tlf(120px) | Email(180px) | Besøg(70px) | Sidste(90px) | Frisør(100px) | Oprettet(90px) | Tags(140px) */
|
|
swp-card.customers-list swp-data-table {
|
|
grid-template-columns: minmax(200px, 1fr) 120px 180px 70px 90px 100px 90px 140px;
|
|
}
|
|
|
|
swp-card.customers-list swp-data-table-header,
|
|
swp-card.customers-list swp-data-table-row {
|
|
padding: 0 var(--spacing-10);
|
|
}
|
|
|
|
swp-card.customers-list swp-data-table-header swp-data-table-cell {
|
|
padding-top: var(--spacing-5);
|
|
padding-bottom: var(--spacing-5);
|
|
}
|
|
|
|
swp-card.customers-list swp-data-table-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
swp-card.customers-list swp-data-table-cell {
|
|
padding: var(--spacing-5) 0;
|
|
}
|
|
|
|
/* Name cell with avatar */
|
|
swp-card.customers-list swp-data-table-cell:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
/* Mono font for visits column */
|
|
swp-card.customers-list swp-data-table-row swp-data-table-cell:nth-child(4) {
|
|
font-family: var(--font-mono);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Muted text for email and created columns */
|
|
swp-card.customers-list swp-data-table-row swp-data-table-cell:nth-child(3),
|
|
swp-card.customers-list swp-data-table-row swp-data-table-cell:nth-child(7) {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Tags cell */
|
|
swp-card.customers-list swp-data-table-cell:last-child {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ===========================================
|
|
CUSTOMER DRAWER
|
|
Reuses: swp-drawer-* (drawers.css), swp-section-label (components.css),
|
|
swp-edit-section/row (components.css), swp-toggle-row/slider (controls.css)
|
|
=========================================== */
|
|
|
|
/* Customer Header */
|
|
swp-customer-header {
|
|
display: flex;
|
|
gap: var(--spacing-6);
|
|
padding-bottom: var(--spacing-6);
|
|
border-bottom: 1px solid var(--color-border);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
|
|
swp-customer-avatar-large {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-teal);
|
|
color: white;
|
|
font-size: var(--font-size-3xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
swp-customer-header-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
swp-customer-header-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
swp-customer-header-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-1);
|
|
}
|
|
|
|
swp-customer-header-name {
|
|
font-size: var(--font-size-xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-customer-since {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-customer-header-contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: var(--spacing-2);
|
|
font-size: var(--font-size-sm);
|
|
|
|
a {
|
|
color: var(--color-teal);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
swp-customer-tags {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
margin-top: var(--spacing-1);
|
|
}
|
|
|
|
/* Marketing Section */
|
|
swp-marketing-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-3);
|
|
|
|
swp-toggle-row,
|
|
swp-toggle-row:last-child {
|
|
padding: var(--spacing-4);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
}
|
|
|
|
/* Profile Boxes (2x2 grid) */
|
|
swp-profile-boxes {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
swp-profile-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-4);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--color-border);
|
|
|
|
&.warning {
|
|
background: var(--bg-red-subtle);
|
|
border: 1px solid var(--border-red);
|
|
|
|
swp-profile-box-label {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
}
|
|
|
|
swp-profile-box-label {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
swp-profile-box-value {
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* Chart Section */
|
|
swp-chart-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
margin-top: var(--spacing-6);
|
|
padding-top: var(--spacing-6);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-chart-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
swp-chart-legend {
|
|
display: flex;
|
|
gap: var(--spacing-5);
|
|
}
|
|
|
|
swp-chart-legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-chart-legend-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: var(--radius-full);
|
|
|
|
&.services {
|
|
background: var(--color-teal);
|
|
}
|
|
|
|
&.products {
|
|
background: var(--color-blue);
|
|
}
|
|
}
|
|
|
|
swp-chart-container {
|
|
width: 100%;
|
|
height: 180px;
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
/* Notes Section */
|
|
swp-notes-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
margin-top: var(--spacing-6);
|
|
padding-top: var(--spacing-6);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-note-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-4);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-note-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
swp-note-type {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-teal);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
swp-note-date {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
swp-note-text {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
swp-see-all-link {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-teal);
|
|
cursor: pointer;
|
|
text-align: center;
|
|
padding-top: var(--spacing-2);
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
/* Edit input variant for drawer */
|
|
swp-edit-input {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
|
|
input {
|
|
flex: 1;
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
font-size: var(--font-size-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-teal);
|
|
}
|
|
|
|
&.short {
|
|
width: 80px;
|
|
flex: none;
|
|
}
|
|
}
|
|
}
|