Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds salary specifications with detailed accordion view

Browse source 
Introduces new salary specification feature with interactive accordion component

Implements detailed salary breakdown including:
- Salary specification JSON data model
- Salary specification page with printable view
- Accordion component for expanding/collapsing salary details
- Localization support for new salary labels

Enhances employee salary transparency and detail presentation
This commit is contained in:
Janus C. H. Knudsen 2026-01-23 20:03:24 +01:00
parent f3c54dde35
commit a1059adf06
14 changed files with 1613 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

203
PlanTempus.Application/wwwroot/css/accordion.css Normal file
View file

@ -0,0 +1,203 @@
/**
* Accordion Component
*
* Generic reusable accordion with expand/collapse behavior.
* Based on POC employee-card pattern from poc-loen-provision.html.
*
* Usage:
* <swp-accordion>
* <swp-accordion-item>
* <swp-accordion-header>
* <swp-accordion-info>
* <swp-accordion-title>Title</swp-accordion-title>
* <swp-accordion-meta>Subtitle</swp-accordion-meta>
* </swp-accordion-info>
* <swp-accordion-summary>
* <swp-summary-item>
* <swp-summary-value>Value</swp-summary-value>
* <swp-summary-label>Label</swp-summary-label>
* </swp-summary-item>
* </swp-accordion-summary>
* <swp-accordion-toggle>
* <i class="ph ph-caret-down"></i>
* </swp-accordion-toggle>
* </swp-accordion-header>
* <swp-accordion-content>
* <!-- Content -->
* </swp-accordion-content>
* </swp-accordion-item>
* </swp-accordion>
*/
/* ===========================================
ACCORDION CONTAINER
=========================================== */
swp-accordion {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
/* ===========================================
ACCORDION ITEM
=========================================== */
swp-accordion-item {
display: block;
background: var(--color-surface);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
overflow: hidden;
}
/* ===========================================
ACCORDION HEADER (clickable)
=========================================== */
swp-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-5) var(--spacing-6);
cursor: pointer;
transition: background var(--transition-fast);
user-select: none;
}
swp-accordion-header:hover {
background: var(--color-background-alt);
}
/* Info section (left side) */
swp-accordion-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
swp-accordion-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
swp-accordion-meta {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* Summary section (right side values) */
swp-accordion-summary {
display: flex;
align-items: center;
gap: var(--spacing-6);
}
swp-summary-item {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
swp-summary-value {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
font-family: var(--font-mono);
color: var(--color-text);
}
swp-summary-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
/* Toggle icon */
swp-accordion-toggle {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
transition: transform 200ms ease;
margin-left: var(--spacing-4);
flex-shrink: 0;
}
swp-accordion-toggle i {
font-size: 20px;
}
/* Expanded state - rotate toggle */
swp-accordion-item.expanded swp-accordion-toggle {
transform: rotate(180deg);
}
/* ===========================================
ACCORDION CONTENT
=========================================== */
swp-accordion-content {
display: none;
border-top: 1px solid var(--color-border);
overflow: hidden;
}
/* Expanded state - show content */
swp-accordion-item.expanded swp-accordion-content {
display: block;
}
/* ===========================================
CONFIG ROW (inside accordion content)
=========================================== */
swp-config-row {
display: flex;
gap: var(--spacing-6);
padding: var(--spacing-5) var(--spacing-6);
background: var(--color-background-alt);
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
}
swp-config-item {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-sm);
}
swp-config-label {
color: var(--color-text-secondary);
}
swp-config-value {
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
swp-config-value.mono {
font-family: var(--font-mono);
}
/* ===========================================
ACCORDION TABLE WRAPPER
=========================================== */
swp-accordion-table {
display: block;
padding: var(--spacing-6);
}
/* ===========================================
ACCORDION FOOTER (inside accordion content)
=========================================== */
swp-accordion-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-3);
padding: var(--spacing-4) var(--spacing-6);
background: var(--color-background-alt);
border-top: 1px solid var(--color-border);
}