Adds comprehensive service detail views and localization

Implements new service detail tabs for prices, duration, and rules

Extends localization support for Danish and English translations
Adds dynamic view components for managing service-specific configurations
Introduces flexible pricing, duration, and booking rule management

Enhances service management with granular configuration options
This commit is contained in:
Janus C. H. Knudsen 2026-01-17 01:21:00 +01:00
parent e9f3639c7c
commit 5e3811347c
11 changed files with 1018 additions and 13 deletions

View file

@ -272,3 +272,157 @@ swp-service-name {
border-bottom: 1px dashed var(--color-teal);
}
}
/* ===========================================
PRICE MODE TOGGLE (Priser tab)
=========================================== */
swp-price-mode {
display: flex;
gap: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: var(--spacing-6);
width: fit-content;
}
swp-price-mode-btn {
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--font-size-sm);
cursor: pointer;
background: var(--color-surface);
border-right: 1px solid var(--color-border);
transition: all var(--transition-fast);
&:last-child {
border-right: none;
}
&:hover {
background: var(--color-background-alt);
}
&.active {
background: var(--color-teal);
color: white;
}
}
/* ===========================================
PRICE MATRIX TABLE (Priser tab)
=========================================== */
swp-price-matrix {
display: block;
}
swp-data-table.price-matrix {
grid-template-columns: 3fr repeat(4, 2fr);
margin-bottom: var(--spacing-6);
}
swp-data-table.price-matrix swp-data-table-cell:first-child {
font-weight: var(--font-weight-medium);
}
swp-data-table.price-matrix span[contenteditable="true"] {
outline: none;
padding: var(--spacing-1) var(--spacing-2);
border-radius: var(--radius-sm);
&:hover {
background: var(--color-background-alt);
}
&:focus {
background: var(--color-surface);
box-shadow: 0 0 0 2px var(--color-teal);
}
}
/* ===========================================
DURATION LIST (Varighed tab)
=========================================== */
swp-duration-list {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-bottom: var(--spacing-6);
}
swp-duration-item {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: var(--spacing-4);
padding: var(--spacing-4);
background: var(--color-background-alt);
border-radius: var(--radius-md);
transition: background var(--transition-fast);
&:hover {
background: var(--color-background-hover);
}
}
swp-duration-name {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
swp-duration-value {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-family: var(--font-mono);
font-size: var(--font-size-base);
color: var(--color-text);
span[contenteditable="true"] {
outline: none;
padding: var(--spacing-1) var(--spacing-2);
border-radius: var(--radius-sm);
min-width: 40px;
text-align: right;
&:hover {
background: var(--color-background);
}
&:focus {
background: var(--color-surface);
box-shadow: 0 0 0 2px var(--color-teal);
}
}
}
swp-duration-unit {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
font-family: var(--font-family);
}
swp-duration-delete {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
color: var(--color-text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
opacity: 0;
&:hover {
color: var(--color-red);
background: var(--bg-red-subtle);
}
}
swp-duration-item:hover swp-duration-delete {
opacity: 1;
}