Enhances employee details with comprehensive salary and HR data
Adds detailed salary rates, commission structures, and HR-related records Introduces new data models and view components for: - Salary rates and supplements - Commissions and rate configurations - Employee HR tracking (certifications, courses, absence) Implements dynamic rate synchronization between drawer and card views
This commit is contained in:
Janus C. H. Knudsen
parent
2e6207bb0b
commit
f71f00099a
15 changed files with 1589 additions and 137 deletions
|
|
@ -190,6 +190,7 @@ swp-[feature]-row {
|
|||
|---------|-----------|-----|---------|
|
||||
| Cash | `swp-cash-table` | `swp-cash-table-row` | cash.css |
|
||||
| Employees | `swp-employee-table` | `swp-employee-row` | employees.css |
|
||||
| Salary | `swp-salary-table` | `swp-salary-table-row` | employees.css |
|
||||
| Bookings | `swp-booking-list` | `swp-booking-item` | bookings.css |
|
||||
| Notifications | `swp-notification-list` | `swp-notification-item` | notifications.css |
|
||||
| Attentions | `swp-attention-list` | `swp-attention-item` | attentions.css |
|
||||
|
|
@ -233,6 +234,49 @@ swp-[feature]-cell {
|
|||
|
||||
---
|
||||
|
||||
## Edit Forms (employees.css)
|
||||
|
||||
Key-value display med valgfri redigering. Bruger Grid + Subgrid for alignment.
|
||||
|
||||
### Basis struktur
|
||||
|
||||
```html
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Label tekst</swp-edit-label>
|
||||
<swp-edit-value>Værdi</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Med redigering</swp-edit-label>
|
||||
<swp-edit-value contenteditable="true">Redigerbar værdi</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
```
|
||||
|
||||
### Med select dropdown
|
||||
|
||||
```html
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Vælg type</swp-edit-label>
|
||||
<swp-edit-select>
|
||||
<select>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</select>
|
||||
</swp-edit-select>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
```
|
||||
|
||||
### Mono-font for tal
|
||||
|
||||
```html
|
||||
<swp-edit-value class="mono">131,49 kr</swp-edit-value>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## User Info Pattern (employees.css)
|
||||
|
||||
```html
|
||||
|
|
@ -249,6 +293,109 @@ swp-[feature]-cell {
|
|||
|
||||
---
|
||||
|
||||
## Document List (employees.css)
|
||||
|
||||
Genbruges til dokumenter, certificeringer, kurser og lignende lister.
|
||||
|
||||
```html
|
||||
<swp-document-list>
|
||||
<swp-document-item>
|
||||
<i class="ph ph-file-pdf"></i>
|
||||
<swp-document-info>
|
||||
<swp-document-name>Ansættelseskontrakt.pdf</swp-document-name>
|
||||
<swp-document-meta>Uploadet 1. aug 2019</swp-document-meta>
|
||||
</swp-document-info>
|
||||
<swp-document-actions>
|
||||
<swp-btn class="secondary sm">Vis</swp-btn>
|
||||
</swp-document-actions>
|
||||
</swp-document-item>
|
||||
</swp-document-list>
|
||||
```
|
||||
|
||||
**Med badge i stedet for knap:**
|
||||
```html
|
||||
<swp-document-item>
|
||||
<i class="ph ph-certificate"></i>
|
||||
<swp-document-info>
|
||||
<swp-document-name>Balayage Specialist</swp-document-name>
|
||||
<swp-document-meta>Udløber: 15. juni 2026</swp-document-meta>
|
||||
</swp-document-info>
|
||||
<swp-document-actions>
|
||||
<swp-status-badge class="valid">Gyldig</swp-status-badge>
|
||||
</swp-document-actions>
|
||||
</swp-document-item>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Subsection (employees.css)
|
||||
|
||||
Til gruppering af lister (f.eks. "Gennemførte kurser" / "Planlagte kurser").
|
||||
|
||||
```html
|
||||
<swp-subsection>
|
||||
<swp-subsection-title>Gennemførte kurser</swp-subsection-title>
|
||||
<swp-document-list>
|
||||
<!-- items -->
|
||||
</swp-document-list>
|
||||
</swp-subsection>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Simple List (employees.css)
|
||||
|
||||
Simpel liste med tekst + badge (f.eks. planlagt fravær).
|
||||
|
||||
```html
|
||||
<swp-simple-list>
|
||||
<swp-simple-item>
|
||||
<swp-simple-item-text>23. dec – 2. jan 2026</swp-simple-item-text>
|
||||
<swp-status-badge class="ferie">Ferie</swp-status-badge>
|
||||
</swp-simple-item>
|
||||
</swp-simple-list>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Salary Table (employees.css)
|
||||
|
||||
Bruger Grid + Subgrid mønsteret.
|
||||
|
||||
```html
|
||||
<swp-salary-table>
|
||||
<swp-salary-table-header>
|
||||
<swp-salary-table-cell>Periode</swp-salary-table-cell>
|
||||
<swp-salary-table-cell>Bruttoløn</swp-salary-table-cell>
|
||||
<swp-salary-table-cell></swp-salary-table-cell>
|
||||
</swp-salary-table-header>
|
||||
<swp-salary-table-body>
|
||||
<swp-salary-table-row>
|
||||
<swp-salary-table-cell>Januar 2026</swp-salary-table-cell>
|
||||
<swp-salary-table-cell class="mono">34.063,50 kr</swp-salary-table-cell>
|
||||
<swp-salary-table-cell><i class="ph ph-caret-right"></i></swp-salary-table-cell>
|
||||
</swp-salary-table-row>
|
||||
</swp-salary-table-body>
|
||||
</swp-salary-table>
|
||||
```
|
||||
|
||||
Rækker har hover-effekt og chevron bliver teal ved hover.
|
||||
|
||||
---
|
||||
|
||||
## Add Button (components.css)
|
||||
|
||||
Dashed border knap til tilføjelse af elementer.
|
||||
|
||||
```html
|
||||
<swp-add-button>+ Upload dokument</swp-add-button>
|
||||
<swp-add-button>+ Tilføj certificering</swp-add-button>
|
||||
```
|
||||
|
||||
**Styling:** Dashed border, centreret, hover → teal border og tekst.
|
||||
|
||||
---
|
||||
|
||||
## Design Tokens (design-tokens.css)
|
||||
|
||||
### Farver
|
||||
|
|
@ -317,11 +464,11 @@ swp-[feature]-cell {
|
|||
|-----|---------|
|
||||
| `design-tokens.css` | Farver, spacing, fonts, shadows |
|
||||
| `design-system.css` | Base resets, typography |
|
||||
| `page.css` | Page structure, cards |
|
||||
| `page.css` | Page structure |
|
||||
| `components.css` | Buttons, badges, cards, section-label, add-button, avatars, icon-btn |
|
||||
| `stats.css` | Stat cards, stat rows |
|
||||
| `tabs.css` | Tab bar, tab content |
|
||||
| `cash.css` | Buttons, status badges, tables |
|
||||
| `employees.css` | User info, role badges, employee table |
|
||||
| `employees.css` | Employee table, user info, edit forms, document lists, salary table |
|
||||
| `bookings.css` | Booking list items |
|
||||
| `notifications.css` | Notification items |
|
||||
| `attentions.css` | Attention items |
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
* - swp-section-label (card section headers)
|
||||
* - swp-section-header (section header with action link)
|
||||
* - swp-section-action (action link in section header)
|
||||
* - swp-add-button (dashed border add button)
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -194,6 +195,36 @@ swp-status-badge.employee {
|
|||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Additional status variants */
|
||||
swp-status-badge.valid {
|
||||
background: color-mix(in srgb, var(--color-green) 15%, transparent);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-status-badge.expiring,
|
||||
swp-status-badge.warning {
|
||||
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
swp-status-badge.enrolled,
|
||||
swp-status-badge.ferie {
|
||||
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-status-badge.fri,
|
||||
swp-status-badge.info {
|
||||
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-status-badge.sygdom,
|
||||
swp-status-badge.danger {
|
||||
background: color-mix(in srgb, var(--color-red) 15%, transparent);
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
PLAN CARDS (swp-plan-card)
|
||||
=========================================== */
|
||||
|
|
@ -432,3 +463,27 @@ swp-card-footer {
|
|||
margin: var(--spacing-6) calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding));
|
||||
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
ADD BUTTON (dashed border style)
|
||||
=========================================== */
|
||||
swp-add-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-5);
|
||||
margin-top: var(--spacing-5);
|
||||
border: 2px dashed var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-add-button:hover {
|
||||
border-color: var(--color-teal);
|
||||
color: var(--color-teal);
|
||||
background: color-mix(in srgb, var(--color-teal) 5%, transparent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,17 @@
|
|||
*
|
||||
* Employees-specific styling only.
|
||||
* Reuses: swp-stat-card (stats.css), swp-stats-row (stats.css), swp-tab-bar (tabs.css),
|
||||
* swp-btn, swp-status-badge, swp-icon-btn, swp-card, swp-section-label (components.css),
|
||||
* swp-btn, swp-status-badge, swp-icon-btn, swp-card, swp-section-label,
|
||||
* swp-add-button (components.css),
|
||||
* swp-row-toggle (cash.css),
|
||||
* swp-sticky-header, swp-header-content (page.css),
|
||||
* swp-toggle-slider, swp-checkbox-list (controls.css)
|
||||
*
|
||||
* Creates: swp-employee-table, swp-employee-row, swp-user-info,
|
||||
* swp-employee-avatar-large, swp-employee-detail-header,
|
||||
* swp-fact-inline, swp-edit-row, swp-detail-grid
|
||||
* swp-fact-inline, swp-edit-section/row/label/value/select, swp-detail-grid,
|
||||
* swp-salary-table, swp-document-list/item/info/name/meta/actions,
|
||||
* swp-subsection/title, swp-simple-list/item/text
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -434,7 +437,7 @@ swp-edit-label {
|
|||
swp-edit-value {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-background-alt);
|
||||
border: 1px solid transparent;
|
||||
|
|
@ -585,48 +588,62 @@ swp-service-price {
|
|||
|
||||
/* ===========================================
|
||||
DOCUMENT LIST (HR tab)
|
||||
Also used for certs, courses, and similar lists
|
||||
=========================================== */
|
||||
swp-document-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-document-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-4) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-document-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-document-item:hover {
|
||||
padding: 12px 16px;
|
||||
background: var(--color-background-alt);
|
||||
margin: 0 calc(-1 * var(--spacing-3));
|
||||
padding-left: var(--spacing-3);
|
||||
padding-right: var(--spacing-3);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-document-item i {
|
||||
font-size: 24px;
|
||||
/* Icon (optional) */
|
||||
swp-document-item i,
|
||||
swp-document-icon {
|
||||
font-size: 20px;
|
||||
color: var(--color-text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-document-item i.ph-file-pdf {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
swp-document-name {
|
||||
/* Info wrapper (name + meta) */
|
||||
swp-document-info {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
swp-document-date {
|
||||
swp-document-name {
|
||||
display: block;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-document-meta {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Actions (buttons/badges at end) */
|
||||
swp-document-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Notes area */
|
||||
|
|
@ -646,6 +663,262 @@ swp-notes-area:focus {
|
|||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
EDIT SELECT (dropdown in edit rows)
|
||||
=========================================== */
|
||||
swp-edit-select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-edit-select select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
font-size: var(--font-size-base);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-edit-select select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Mono variant for edit-value */
|
||||
swp-edit-value.mono {
|
||||
font-family: var(--font-mono);
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* Input in edit-row */
|
||||
swp-edit-row input {
|
||||
font-size: var(--font-size-base);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-background-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
swp-edit-row input:hover {
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
swp-edit-row input:focus {
|
||||
outline: none;
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Number input variant */
|
||||
swp-edit-row input[data-type="number"] {
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
width: 150px;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SALARY TABLE (Grid + Subgrid)
|
||||
=========================================== */
|
||||
swp-salary-table {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 120px 60px;
|
||||
}
|
||||
|
||||
swp-salary-table-header,
|
||||
swp-salary-table-body {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
swp-salary-table-header {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-salary-table-row {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-salary-table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-salary-table-cell {
|
||||
padding: var(--spacing-4) var(--spacing-2);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-salary-table-cell:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
swp-salary-table-cell:last-child {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-salary-table-header swp-salary-table-cell {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-salary-table-cell.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Chevron for row actions */
|
||||
swp-salary-table-cell i {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
swp-salary-table-row {
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-salary-table-row:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-salary-table-row:hover swp-salary-table-cell i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SUBSECTION TITLE (for grouped lists like courses)
|
||||
=========================================== */
|
||||
swp-subsection {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-subsection:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
swp-subsection-title {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SIMPLE LIST (dates + badge, like vacation)
|
||||
=========================================== */
|
||||
swp-simple-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-simple-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-3);
|
||||
padding: 12px 16px;
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-simple-item-text {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* swp-add-button styles in components.css */
|
||||
|
||||
/* ===========================================
|
||||
RATES DRAWER CONTENT (overrides for swp-data-*)
|
||||
=========================================== */
|
||||
.rates-content swp-data-table {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr 100px;
|
||||
}
|
||||
|
||||
.rates-content swp-data-row {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.rates-content swp-data-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.rates-content swp-data-row input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--color-teal);
|
||||
}
|
||||
|
||||
.rates-content swp-data-label {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.rates-content swp-data-label.disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.rates-content swp-data-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 4px;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.rates-content swp-data-input input {
|
||||
width: 100px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rates-content swp-data-input.disabled input {
|
||||
opacity: 0.4;
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
.rates-content swp-section-label {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.rates-content swp-data-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
RESPONSIVE
|
||||
=========================================== */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue