Adds HR tab and website builder prototype
Introduces new HR section in employee profile with documents, certifications, and courses management Adds initial website builder interface with block-based design system and theming capabilities Enhances settings and indstillinger pages with new module configurations
This commit is contained in:
Janus C. H. Knudsen
parent
2a066c6d14
commit
0137a4b4f9
4 changed files with 4009 additions and 39 deletions
|
|
@ -2154,6 +2154,118 @@
|
|||
height: 14px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
HR TAB - DOCUMENTS
|
||||
========================================== */
|
||||
swp-document-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
swp-document-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--color-background-alt);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-document-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
swp-document-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
swp-document-name {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-document-meta {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
swp-document-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
HR TAB - COURSES
|
||||
========================================== */
|
||||
swp-course-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
swp-course-section:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
swp-course-section-title {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
swp-course-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
swp-course-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
background: var(--color-background-alt);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
swp-course-item.upcoming {
|
||||
background: color-mix(in srgb, var(--color-teal) 8%, white);
|
||||
border: 1px solid color-mix(in srgb, var(--color-teal) 20%, white);
|
||||
}
|
||||
|
||||
swp-course-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
swp-course-name {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-course-meta {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
swp-course-status {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
background: color-mix(in srgb, var(--color-teal) 15%, white);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -2225,6 +2337,7 @@
|
|||
<swp-tab data-tab="hours">Arbejdstid</swp-tab>
|
||||
<swp-tab data-tab="services">Services</swp-tab>
|
||||
<swp-tab data-tab="salary">Løn</swp-tab>
|
||||
<swp-tab data-tab="hr">HR</swp-tab>
|
||||
<swp-tab data-tab="stats">Statistik</swp-tab>
|
||||
</swp-tab-bar>
|
||||
|
||||
|
|
@ -2481,44 +2594,6 @@
|
|||
<swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
|
||||
</swp-schedule-grid>
|
||||
</swp-card>
|
||||
|
||||
<div class="grid-2" style="margin-top: 24px;">
|
||||
<swp-card>
|
||||
<swp-section-label>Planlagt fravær</swp-section-label>
|
||||
<swp-vacation-list>
|
||||
<swp-vacation-item>
|
||||
<swp-vacation-dates>23. dec – 2. jan 2026</swp-vacation-dates>
|
||||
<swp-vacation-type class="ferie">Ferie</swp-vacation-type>
|
||||
</swp-vacation-item>
|
||||
<swp-vacation-item>
|
||||
<swp-vacation-dates>14. feb 2025</swp-vacation-dates>
|
||||
<swp-vacation-type class="fri">Fri</swp-vacation-type>
|
||||
</swp-vacation-item>
|
||||
<swp-vacation-item>
|
||||
<swp-vacation-dates>7. apr – 11. apr 2025</swp-vacation-dates>
|
||||
<swp-vacation-type class="ferie">Ferie</swp-vacation-type>
|
||||
</swp-vacation-item>
|
||||
</swp-vacation-list>
|
||||
</swp-card>
|
||||
|
||||
<swp-card>
|
||||
<swp-section-label>Ferie-saldo</swp-section-label>
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Optjente feriedage</swp-edit-label>
|
||||
<swp-edit-value>25 dage</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Brugte feriedage</swp-edit-label>
|
||||
<swp-edit-value>12 dage</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Resterende</swp-edit-label>
|
||||
<swp-edit-value style="font-weight: 600; color: var(--color-teal);">13 dage</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
</swp-card>
|
||||
</div>
|
||||
</swp-tab-content>
|
||||
|
||||
<!-- ==========================================
|
||||
|
|
@ -2669,6 +2744,212 @@
|
|||
</div>
|
||||
</swp-tab-content>
|
||||
|
||||
<!-- ==========================================
|
||||
HR TAB
|
||||
========================================== -->
|
||||
<swp-tab-content data-tab="hr">
|
||||
<div class="grid-2">
|
||||
<!-- Venstre kolonne -->
|
||||
<div>
|
||||
<!-- Kontrakt & Dokumenter -->
|
||||
<swp-card>
|
||||
<swp-section-label>Kontrakt & Dokumenter</swp-section-label>
|
||||
|
||||
<!-- Kontrakt info -->
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Kontrakttype</swp-edit-label>
|
||||
<swp-edit-select>
|
||||
<select>
|
||||
<option selected>Fastansættelse</option>
|
||||
<option>Tidsbegrænset</option>
|
||||
<option>Freelance</option>
|
||||
<option>Elev/Lærling</option>
|
||||
</select>
|
||||
</swp-edit-select>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Opsigelsesvarsel</swp-edit-label>
|
||||
<swp-edit-select>
|
||||
<select>
|
||||
<option>14 dage</option>
|
||||
<option selected>1 måned</option>
|
||||
<option>3 måneder</option>
|
||||
</select>
|
||||
</swp-edit-select>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Kontraktudløb</swp-edit-label>
|
||||
<swp-edit-value>— (ingen udløb)</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
|
||||
<!-- Dokument liste -->
|
||||
<swp-document-list>
|
||||
<swp-document-item>
|
||||
<swp-document-icon>📄</swp-document-icon>
|
||||
<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="small secondary">Vis</swp-btn>
|
||||
</swp-document-actions>
|
||||
</swp-document-item>
|
||||
<swp-document-item>
|
||||
<swp-document-icon>📄</swp-document-icon>
|
||||
<swp-document-info>
|
||||
<swp-document-name>Tillæg - Lønforhøjelse 2023.pdf</swp-document-name>
|
||||
<swp-document-meta>Uploadet 15. jan 2023</swp-document-meta>
|
||||
</swp-document-info>
|
||||
<swp-document-actions>
|
||||
<swp-btn class="small secondary">Vis</swp-btn>
|
||||
</swp-document-actions>
|
||||
</swp-document-item>
|
||||
</swp-document-list>
|
||||
|
||||
<swp-add-button>
|
||||
+ Upload dokument
|
||||
</swp-add-button>
|
||||
</swp-card>
|
||||
</div>
|
||||
|
||||
<!-- Højre kolonne -->
|
||||
<div>
|
||||
<!-- Certificeringer -->
|
||||
<swp-card>
|
||||
<swp-section-label>Certificeringer</swp-section-label>
|
||||
<swp-cert-list>
|
||||
<swp-cert-item>
|
||||
<swp-cert-icon>🎓</swp-cert-icon>
|
||||
<swp-cert-info>
|
||||
<swp-cert-name>Balayage Specialist</swp-cert-name>
|
||||
<swp-cert-dates>Udløber: 15. juni 2026</swp-cert-dates>
|
||||
</swp-cert-info>
|
||||
<swp-cert-status class="valid">Gyldig</swp-cert-status>
|
||||
</swp-cert-item>
|
||||
<swp-cert-item>
|
||||
<swp-cert-icon>🎓</swp-cert-icon>
|
||||
<swp-cert-info>
|
||||
<swp-cert-name>Farvecertificering (Wella)</swp-cert-name>
|
||||
<swp-cert-dates>Udløber: 1. marts 2025</swp-cert-dates>
|
||||
</swp-cert-info>
|
||||
<swp-cert-status class="expiring">Udløber snart</swp-cert-status>
|
||||
</swp-cert-item>
|
||||
</swp-cert-list>
|
||||
<swp-add-button>
|
||||
+ Tilføj certificering
|
||||
</swp-add-button>
|
||||
</swp-card>
|
||||
|
||||
<!-- Kurser -->
|
||||
<swp-card>
|
||||
<swp-section-label>Kurser</swp-section-label>
|
||||
|
||||
<swp-course-section>
|
||||
<swp-course-section-title>Gennemførte kurser</swp-course-section-title>
|
||||
<swp-course-list>
|
||||
<swp-course-item>
|
||||
<swp-course-info>
|
||||
<swp-course-name>Avanceret balayage teknikker</swp-course-name>
|
||||
<swp-course-meta>Wella Academy · Marts 2024</swp-course-meta>
|
||||
</swp-course-info>
|
||||
</swp-course-item>
|
||||
<swp-course-item>
|
||||
<swp-course-info>
|
||||
<swp-course-name>Kundeservice & mersalg</swp-course-name>
|
||||
<swp-course-meta>SalonUp · November 2023</swp-course-meta>
|
||||
</swp-course-info>
|
||||
</swp-course-item>
|
||||
</swp-course-list>
|
||||
</swp-course-section>
|
||||
|
||||
<swp-course-section>
|
||||
<swp-course-section-title>Planlagte kurser</swp-course-section-title>
|
||||
<swp-course-list>
|
||||
<swp-course-item class="upcoming">
|
||||
<swp-course-info>
|
||||
<swp-course-name>Olaplex certificering</swp-course-name>
|
||||
<swp-course-meta>Olaplex DK · 15. februar 2026</swp-course-meta>
|
||||
</swp-course-info>
|
||||
<swp-course-status>Tilmeldt</swp-course-status>
|
||||
</swp-course-item>
|
||||
</swp-course-list>
|
||||
</swp-course-section>
|
||||
|
||||
<swp-add-button>
|
||||
+ Tilføj kursus
|
||||
</swp-add-button>
|
||||
</swp-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ferie & Fravær sektion -->
|
||||
<div class="grid-2" style="margin-top: 24px;">
|
||||
<swp-card>
|
||||
<swp-section-label>Ferie-saldo</swp-section-label>
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Optjente feriedage</swp-edit-label>
|
||||
<swp-edit-value>25 dage</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Brugte feriedage</swp-edit-label>
|
||||
<swp-edit-value>12 dage</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Resterende</swp-edit-label>
|
||||
<swp-edit-value style="font-weight: 600; color: var(--color-teal);">13 dage</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
</swp-card>
|
||||
|
||||
<swp-card>
|
||||
<swp-section-label>Fravær & Sygdom</swp-section-label>
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Sygefravær 2025</swp-edit-label>
|
||||
<swp-edit-value>3 dage</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Sygefravær 2024</swp-edit-label>
|
||||
<swp-edit-value>7 dage</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Børns sygdom 2025</swp-edit-label>
|
||||
<swp-edit-value>1 dag</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Barsel</swp-edit-label>
|
||||
<swp-edit-value>— (ingen planlagt)</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
</swp-card>
|
||||
</div>
|
||||
|
||||
<!-- Planlagt fravær -->
|
||||
<swp-card style="margin-top: 24px;">
|
||||
<swp-section-label>Planlagt fravær</swp-section-label>
|
||||
<swp-vacation-list>
|
||||
<swp-vacation-item>
|
||||
<swp-vacation-dates>23. dec – 2. jan 2026</swp-vacation-dates>
|
||||
<swp-vacation-type class="ferie">Ferie</swp-vacation-type>
|
||||
</swp-vacation-item>
|
||||
<swp-vacation-item>
|
||||
<swp-vacation-dates>14. feb 2025</swp-vacation-dates>
|
||||
<swp-vacation-type class="fri">Fri</swp-vacation-type>
|
||||
</swp-vacation-item>
|
||||
<swp-vacation-item>
|
||||
<swp-vacation-dates>7. apr – 11. apr 2025</swp-vacation-dates>
|
||||
<swp-vacation-type class="ferie">Ferie</swp-vacation-type>
|
||||
</swp-vacation-item>
|
||||
</swp-vacation-list>
|
||||
<swp-add-button>
|
||||
+ Tilføj fravær
|
||||
</swp-add-button>
|
||||
</swp-card>
|
||||
</swp-tab-content>
|
||||
|
||||
<!-- ==========================================
|
||||
STATISTIK TAB
|
||||
========================================== -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue