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 |
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue