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

Refactors design system documentation and layout

Browse source 
Updates design system documentation with comprehensive component overview
Enhances UI layout across multiple pages with consistent styling and new components
Adds support for charts, pagination, and responsive design elements

Improves overall system documentation and visual consistency
This commit is contained in:
Janus C. H. Knudsen 2026-01-07 22:12:25 +01:00
parent 35b15294e3
commit fac7754d7a
14 changed files with 3492 additions and 281 deletions
Download patch file Download diff file Expand all files Collapse all files

533
wwwroot/poc-loenspecifikation.html Normal file
View file

@ -0,0 +1,533 @@
<!doctype html>
<html lang="da">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lønspecifikation – Januar 2026</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ===== Print setup ===== */
@page { size: A4; margin: 14mm; }
@media print {
.no-print { display: none !important; }
.page-break { break-after: page; page-break-after: always; }
a { color: inherit; text-decoration: none; }
}
/* ===== Base ===== */
:root {
--ink: #0f172a;
--muted: #475569;
--line: #e2e8f0;
--soft: #f8fafc;
--accent: #0ea5e9;
--accent-2: #22c55e;
--font-mono: 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--ink);
background: #fff;
}
.sheet {
max-width: 210mm;
margin: 0 auto;
}
/* ===== Header ===== */
.hdr {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 14px 0 10px;
border-bottom: 2px solid var(--line);
margin-bottom: 12px;
}
.brand {
display: flex;
flex-direction: column;
gap: 6px;
}
.title {
font-size: 20px;
font-weight: 800;
letter-spacing: .2px;
margin: 0;
line-height: 1.1;
}
.subtitle {
margin: 0;
color: var(--muted);
font-size: 12px;
}
.meta {
text-align: right;
min-width: 260px;
}
.meta .pill {
display: inline-block;
font-size: 12px;
padding: 6px 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--soft);
margin-bottom: 8px;
}
.meta .kv {
display: grid;
grid-template-columns: auto auto;
gap: 4px 12px;
justify-content: end;
font-size: 12px;
color: var(--muted);
}
.meta .kv b { color: var(--ink); font-weight: 600; }
/* ===== Blocks ===== */
.card {
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
background: #fff;
margin-bottom: 12px;
}
.card .hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: linear-gradient(0deg, var(--soft), #fff);
border-bottom: 1px solid var(--line);
}
.card .hd h2 {
font-size: 13px;
margin: 0;
letter-spacing: .2px;
text-transform: uppercase;
color: var(--muted);
}
.card .bd { padding: 12px; }
.grid {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 12px;
}
/* ===== Total ===== */
.total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 14px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: var(--soft);
margin-bottom: 12px;
}
.total .label {
color: var(--muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .25px;
margin-bottom: 6px;
}
.total .big {
font-size: 28px;
font-weight: 900;
font-family: var(--font-mono);
margin: 0;
line-height: 1.05;
}
.total .big small {
font-size: 14px;
font-weight: 700;
color: var(--muted);
}
.badge {
display: inline-block;
font-size: 11px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--soft);
color: var(--muted);
}
/* ===== Tables ===== */
table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
th, td {
padding: 8px 8px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
th {
text-align: left;
color: var(--muted);
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .2px;
background: var(--soft);
}
td.num, th.num { text-align: right; }
td.num { font-family: var(--font-mono); }
tr:last-child td { border-bottom: none; }
.note {
margin: 8px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
/* ===== Footer ===== */
.ftr {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 10.5px;
color: var(--muted);
}
/* ===== Ensure content doesn't get split awkwardly ===== */
.avoid-break { break-inside: avoid; page-break-inside: avoid; }
</style>
</head>
<body>
<!-- ===================== PAGE 1: OVERBLIK ===================== -->
<div class="sheet">
<div class="hdr">
<div class="brand">
<p class="title">Lønspecifikation</p>
<p class="subtitle">Periode: <b>Januar 2026</b></p>
</div>
<div class="meta">
<div class="pill">Medarbejdernr.: <b>EMP-001</b></div>
<div class="kv">
<span>Medarbejder:</span><b>Emma Larsen</b>
<span>Afdeling:</span><b>Frisør</b>
<span>Ansættelse:</span><b>Fuldtid (37 t/uge)</b>
</div>
</div>
</div>
<section class="total avoid-break">
<div>
<div class="label">Bruttoløn (Januar 2026)</div>
<p class="big">34.063,50 <small>kr</small></p>
</div>
</section>
<section class="grid">
<div class="card avoid-break">
<div class="hd">
<h2>Samlet lønopgørelse</h2>
</div>
<div class="bd">
<table>
<thead>
<tr>
<th>Løndel</th>
<th class="num">Beløb</th>
</tr>
</thead>
<tbody>
<tr>
<td>Grundløn inkl. overarbejde</td>
<td class="num">29.322,50 kr</td>
</tr>
<tr>
<td>Provision i alt</td>
<td class="num">3.685,00 kr</td>
</tr>
<tr>
<td>Tillæg i alt</td>
<td class="num">1.056,00 kr</td>
</tr>
<tr>
<td><b>Bruttoløn</b></td>
<td class="num"><b>34.063,50 kr</b></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card avoid-break">
<div class="hd">
<h2>Saldi</h2>
</div>
<div class="bd">
<table>
<thead>
<tr>
<th>Type</th>
<th class="num">Optjent</th>
<th class="num">Afholdt</th>
<th class="num">Rest</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ferie (dage)</td>
<td class="num">18,5</td>
<td class="num">6,0</td>
<td class="num">12,5</td>
</tr>
<tr>
<td>Afspadsering (timer)</td>
<td class="num">12,0</td>
<td class="num">4,0</td>
<td class="num">8,0</td>
</tr>
</tbody>
</table>
<p class="note">Saldi er opgjort som angivet på lønspecifikationen.</p>
</div>
</div>
</section>
<section class="card avoid-break">
<div class="hd">
<h2>Hurtigt resumé</h2>
</div>
<div class="bd">
<table>
<thead>
<tr>
<th>Nøglepunkt</th>
<th class="num">Værdi</th>
</tr>
</thead>
<tbody>
<tr>
<td>Normaltimer</td>
<td class="num">148,0 t</td>
</tr>
<tr>
<td>Overarbejde</td>
<td class="num">7,0 t</td>
</tr>
<tr>
<td>Provision (services + produkter)</td>
<td class="num">3.685,00 kr</td>
</tr>
<tr>
<td>Tillæg (aften + lørdag + søndag)</td>
<td class="num">1.056,00 kr</td>
</tr>
</tbody>
</table>
</div>
</section>
<div class="ftr">
<div>Overblik</div>
<div style="text-align:right">Lønspecifikation · Januar 2026</div>
</div>
<div class="page-break"></div>
<!-- ===================== PAGE 2: DETALJER ===================== -->
<section class="card">
<div class="hd">
<h2>Arbejdstid pr. uge</h2>
</div>
<div class="bd">
<table>
<thead>
<tr>
<th>Uge</th>
<th class="num">Normaltimer</th>
<th class="num">Overtid</th>
<th class="num">Beløb</th>
</tr>
</thead>
<tbody>
<tr>
<td>Uge 1 (30. dec – 5. jan)</td>
<td class="num">37,0 t</td>
<td class="num">2,0 t</td>
<td class="num">7.400,00 kr</td>
</tr>
<tr>
<td>Uge 2 (6. – 12. jan)</td>
<td class="num">37,0 t</td>
<td class="num">3,5 t</td>
<td class="num">7.816,25 kr</td>
</tr>
<tr>
<td>Uge 3 (13. – 19. jan)</td>
<td class="num">37,0 t</td>
<td class="num">0,0 t</td>
<td class="num">6.845,00 kr</td>
</tr>
<tr>
<td>Uge 4 (20. – 26. jan)</td>
<td class="num">37,0 t</td>
<td class="num">1,5 t</td>
<td class="num">7.261,25 kr</td>
</tr>
<tr>
<td><b>I alt</b></td>
<td class="num"><b>148,0 t</b></td>
<td class="num"><b>7,0 t</b></td>
<td class="num"><b>29.322,50 kr</b></td>
</tr>
</tbody>
</table>
<p class="note">
Satser: Normal 185,00 kr/time. Overtid (50%) 277,50 kr/time.
</p>
</div>
</section>
<section class="card">
<div class="hd">
<h2>Provision</h2>
</div>
<div class="bd">
<p class="note" style="margin-top:0">
<b>Services:</b> 15% af omsætning over minimum (220 kr/time).<br/>
<b>Produkter:</b> 10% af salg.
</p>
<table>
<thead>
<tr>
<th>Uge</th>
<th class="num">Service prov.</th>
<th class="num">Produkt prov.</th>
<th class="num">I alt</th>
</tr>
</thead>
<tbody>
<tr>
<td>Uge 1</td>
<td class="num">573,00 kr</td>
<td class="num">210,00 kr</td>
<td class="num">783,00 kr</td>
</tr>
<tr>
<td>Uge 2</td>
<td class="num">883,50 kr</td>
<td class="num">320,00 kr</td>
<td class="num">1.203,50 kr</td>
</tr>
<tr>
<td>Uge 3</td>
<td class="num">459,00 kr</td>
<td class="num">180,00 kr</td>
<td class="num">639,00 kr</td>
</tr>
<tr>
<td>Uge 4</td>
<td class="num">769,50 kr</td>
<td class="num">290,00 kr</td>
<td class="num">1.059,50 kr</td>
</tr>
<tr>
<td><b>I alt</b></td>
<td class="num"><b>2.685,00 kr</b></td>
<td class="num"><b>1.000,00 kr</b></td>
<td class="num"><b>3.685,00 kr</b></td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="card">
<div class="hd">
<h2>Tillæg & fravær</h2>
</div>
<div class="bd">
<div class="grid" style="grid-template-columns: 1fr 1fr;">
<div>
<table>
<thead>
<tr>
<th>Tillæg</th>
<th class="num">Timer</th>
<th class="num">Beløb</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aftentillæg (hverdage 18–21)</td>
<td class="num">12,0</td>
<td class="num">336,00 kr</td>
</tr>
<tr>
<td>Lørdagstillæg (før kl. 14)</td>
<td class="num">16,0</td>
<td class="num">720,00 kr</td>
</tr>
<tr>
<td>Søndagstillæg</td>
<td class="num">0,0</td>
<td class="num">0,00 kr</td>
</tr>
<tr>
<td><b>Tillæg i alt</b></td>
<td class="num"></td>
<td class="num"><b>1.056,00 kr</b></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<th>Fravær</th>
<th class="num">Dage</th>
<th class="num">Beløb</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ferie med løn</td>
<td class="num">0</td>
<td class="num">0,00 kr</td>
</tr>
<tr>
<td>Sygdom</td>
<td class="num">0</td>
<td class="num">0,00 kr</td>
</tr>
<tr>
<td>Barns sygedag</td>
<td class="num">0</td>
<td class="num">0,00 kr</td>
</tr>
</tbody>
</table>
<p class="note">Ingen fravær registreret i perioden.</p>
</div>
</div>
</div>
</section>
<div class="ftr">
<div>Detaljer</div>
<div style="text-align:right">Lønspecifikation · Januar 2026</div>
</div>
</div>
</body>
</html>