615 lines
18 KiB
HTML
615 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Rapport - POC</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ==========================================
|
|
FONT FACE (Poppins)
|
|
========================================== */
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('fonts/Poppins-Regular.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('fonts/Poppins-Medium.woff') format('woff');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('fonts/Poppins-SemiBold.woff') format('woff');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('fonts/Poppins-Bold.woff') format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ==========================================
|
|
CSS VARIABLES (Design System)
|
|
========================================== */
|
|
:root {
|
|
--color-surface: #fff;
|
|
--color-background: #f5f5f5;
|
|
--color-background-hover: #f0f0f0;
|
|
--color-background-alt: #fafafa;
|
|
--color-border: #e0e0e0;
|
|
--color-text: #333;
|
|
--color-text-secondary: #666;
|
|
--color-teal: #00897b;
|
|
--color-purple: #8b5cf6;
|
|
--color-amber: #f59e0b;
|
|
--color-red: #e53935;
|
|
--color-green: #43a047;
|
|
--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* ==========================================
|
|
RESET & BASE
|
|
========================================== */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family);
|
|
font-size: 14px;
|
|
color: var(--color-text);
|
|
background: var(--color-background);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ==========================================
|
|
LAYOUT
|
|
========================================== */
|
|
swp-page-container {
|
|
display: block;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
/* ==========================================
|
|
HEADER
|
|
========================================== */
|
|
swp-page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
swp-page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* ==========================================
|
|
FILTERS
|
|
========================================== */
|
|
swp-report-filters {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
swp-period-selector {
|
|
display: flex;
|
|
background: var(--color-surface);
|
|
border-radius: 6px;
|
|
padding: 4px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
swp-period-selector button {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--color-text-secondary);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-period-selector button:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-period-selector button.active {
|
|
background: var(--color-teal);
|
|
color: white;
|
|
}
|
|
|
|
swp-employee-filter select {
|
|
padding: 10px 32px 10px 12px;
|
|
font-size: 13px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
min-width: 180px;
|
|
}
|
|
|
|
/* ==========================================
|
|
STATS BAR
|
|
========================================== */
|
|
swp-stats-bar {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
swp-stat-card {
|
|
background: var(--color-surface);
|
|
border-radius: 8px;
|
|
padding: 20px 24px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
swp-stat-value {
|
|
display: block;
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
swp-stat-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
margin-top: 4px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
swp-stat-card.teal swp-stat-value { color: var(--color-teal); }
|
|
swp-stat-card.red swp-stat-value { color: var(--color-red); }
|
|
swp-stat-card.amber swp-stat-value { color: var(--color-amber); }
|
|
swp-stat-card.purple swp-stat-value { color: var(--color-purple); }
|
|
|
|
/* ==========================================
|
|
CHARTS GRID
|
|
========================================== */
|
|
swp-charts-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
swp-chart-card {
|
|
background: var(--color-surface);
|
|
border-radius: 8px;
|
|
padding: 20px 24px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
swp-chart-title {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
swp-chart-container {
|
|
display: block;
|
|
height: 240px;
|
|
position: relative;
|
|
}
|
|
|
|
/* ==========================================
|
|
REPORT TABLE
|
|
========================================== */
|
|
swp-report-table {
|
|
display: block;
|
|
background: var(--color-surface);
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
swp-table-header,
|
|
swp-table-row {
|
|
display: grid;
|
|
grid-template-columns: 200px repeat(7, 1fr);
|
|
align-items: center;
|
|
}
|
|
|
|
swp-table-header {
|
|
background: var(--color-background-alt);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
swp-th {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-text-secondary);
|
|
user-select: none;
|
|
}
|
|
|
|
swp-th.sortable {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
swp-th.sortable:hover {
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
swp-th.sorted {
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
.sort-icon {
|
|
font-size: 10px;
|
|
opacity: 0.4;
|
|
transition: opacity 150ms ease, transform 150ms ease;
|
|
}
|
|
|
|
swp-th.sorted .sort-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
swp-th.sorted.desc .sort-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
swp-th.right,
|
|
swp-td.right {
|
|
text-align: right;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
swp-table-body {
|
|
display: block;
|
|
}
|
|
|
|
swp-table-row {
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
transition: background 150ms ease;
|
|
}
|
|
|
|
swp-table-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
swp-table-row:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-td {
|
|
font-size: 13px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-td.name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
swp-td.number {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
}
|
|
|
|
swp-td.red { color: var(--color-red); }
|
|
swp-td.amber { color: var(--color-amber); }
|
|
swp-td.purple { color: var(--color-purple); }
|
|
|
|
swp-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
swp-badge.low {
|
|
background: color-mix(in srgb, var(--color-green) 15%, white);
|
|
color: var(--color-green);
|
|
}
|
|
|
|
swp-badge.medium {
|
|
background: color-mix(in srgb, var(--color-amber) 15%, white);
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
swp-badge.high {
|
|
background: color-mix(in srgb, var(--color-red) 15%, white);
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* ==========================================
|
|
FOOTER
|
|
========================================== */
|
|
swp-table-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 20px;
|
|
background: var(--color-background-alt);
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<swp-page-container>
|
|
<!-- Header -->
|
|
<swp-page-header>
|
|
<swp-page-title>Rapport</swp-page-title>
|
|
<swp-report-filters>
|
|
<swp-period-selector>
|
|
<button>Uge</button>
|
|
<button class="active">Måned</button>
|
|
<button>Kvartal</button>
|
|
<button>År</button>
|
|
</swp-period-selector>
|
|
<swp-employee-filter>
|
|
<select>
|
|
<option>Alle medarbejdere</option>
|
|
<option>Anna Jensen</option>
|
|
<option>Martin Nielsen</option>
|
|
<option>Sofie Larsen</option>
|
|
<option>Peter Hansen</option>
|
|
</select>
|
|
</swp-employee-filter>
|
|
</swp-report-filters>
|
|
</swp-page-header>
|
|
|
|
<!-- Stats Bar -->
|
|
<swp-stats-bar>
|
|
<swp-stat-card class="teal">
|
|
<swp-stat-value>320 t</swp-stat-value>
|
|
<swp-stat-label>Planlagte timer</swp-stat-label>
|
|
</swp-stat-card>
|
|
<swp-stat-card class="red">
|
|
<swp-stat-value>24 t</swp-stat-value>
|
|
<swp-stat-label>Fravær total</swp-stat-label>
|
|
</swp-stat-card>
|
|
<swp-stat-card class="amber">
|
|
<swp-stat-value>8 t</swp-stat-value>
|
|
<swp-stat-label>Overarbejde</swp-stat-label>
|
|
</swp-stat-card>
|
|
<swp-stat-card>
|
|
<swp-stat-value>7.5%</swp-stat-value>
|
|
<swp-stat-label>Fraværsprocent</swp-stat-label>
|
|
</swp-stat-card>
|
|
</swp-stats-bar>
|
|
|
|
<!-- Charts -->
|
|
<swp-charts-grid>
|
|
<swp-chart-card>
|
|
<swp-chart-title>Timer pr. uge</swp-chart-title>
|
|
<swp-chart-container id="hoursChart"></swp-chart-container>
|
|
</swp-chart-card>
|
|
|
|
<swp-chart-card>
|
|
<swp-chart-title>Fraværsfordeling</swp-chart-title>
|
|
<swp-chart-container id="absenceChart"></swp-chart-container>
|
|
</swp-chart-card>
|
|
</swp-charts-grid>
|
|
|
|
<!-- Table -->
|
|
<swp-report-table>
|
|
<swp-table-header>
|
|
<swp-th class="sortable sorted">Medarbejder <span class="sort-icon">▲</span></swp-th>
|
|
<swp-th class="sortable right">Planlagt <span class="sort-icon">▲</span></swp-th>
|
|
<swp-th class="sortable right">Fravær <span class="sort-icon">▲</span></swp-th>
|
|
<swp-th class="sortable right">Syg <span class="sort-icon">▲</span></swp-th>
|
|
<swp-th class="sortable right">Ferie <span class="sort-icon">▲</span></swp-th>
|
|
<swp-th class="sortable right">Fri <span class="sort-icon">▲</span></swp-th>
|
|
<swp-th class="sortable right">Overarbejde <span class="sort-icon">▲</span></swp-th>
|
|
<swp-th class="sortable right">Fraværs-% <span class="sort-icon">▲</span></swp-th>
|
|
</swp-table-header>
|
|
<swp-table-body>
|
|
<swp-table-row>
|
|
<swp-td class="name">Anna Jensen</swp-td>
|
|
<swp-td class="number right">80 t</swp-td>
|
|
<swp-td class="number right">4 t</swp-td>
|
|
<swp-td class="number right red">0 t</swp-td>
|
|
<swp-td class="number right amber">4 t</swp-td>
|
|
<swp-td class="number right purple">0 t</swp-td>
|
|
<swp-td class="number right">2 t</swp-td>
|
|
<swp-td class="right"><swp-badge class="low">5.0%</swp-badge></swp-td>
|
|
</swp-table-row>
|
|
<swp-table-row>
|
|
<swp-td class="name">Martin Nielsen</swp-td>
|
|
<swp-td class="number right">80 t</swp-td>
|
|
<swp-td class="number right">8 t</swp-td>
|
|
<swp-td class="number right red">8 t</swp-td>
|
|
<swp-td class="number right amber">0 t</swp-td>
|
|
<swp-td class="number right purple">0 t</swp-td>
|
|
<swp-td class="number right">0 t</swp-td>
|
|
<swp-td class="right"><swp-badge class="medium">10.0%</swp-badge></swp-td>
|
|
</swp-table-row>
|
|
<swp-table-row>
|
|
<swp-td class="name">Sofie Larsen</swp-td>
|
|
<swp-td class="number right">80 t</swp-td>
|
|
<swp-td class="number right">4 t</swp-td>
|
|
<swp-td class="number right red">0 t</swp-td>
|
|
<swp-td class="number right amber">0 t</swp-td>
|
|
<swp-td class="number right purple">4 t</swp-td>
|
|
<swp-td class="number right">4 t</swp-td>
|
|
<swp-td class="right"><swp-badge class="low">5.0%</swp-badge></swp-td>
|
|
</swp-table-row>
|
|
<swp-table-row>
|
|
<swp-td class="name">Peter Hansen</swp-td>
|
|
<swp-td class="number right">80 t</swp-td>
|
|
<swp-td class="number right">8 t</swp-td>
|
|
<swp-td class="number right red">4 t</swp-td>
|
|
<swp-td class="number right amber">4 t</swp-td>
|
|
<swp-td class="number right purple">0 t</swp-td>
|
|
<swp-td class="number right">2 t</swp-td>
|
|
<swp-td class="right"><swp-badge class="medium">10.0%</swp-badge></swp-td>
|
|
</swp-table-row>
|
|
</swp-table-body>
|
|
<swp-table-footer>
|
|
<span>Viser 4 medarbejdere</span>
|
|
<span>Total: 320 t planlagt, 24 t fravær, 8 t overarbejde</span>
|
|
</swp-table-footer>
|
|
</swp-report-table>
|
|
</swp-page-container>
|
|
|
|
<script type="module">
|
|
// Import charting library
|
|
import { createChart } from 'https://unpkg.com/@sevenweirdpeople/swp-charting@latest/dist/index.js';
|
|
|
|
// Initialize pie chart with breakdown
|
|
createChart(document.getElementById('absenceChart'), {
|
|
height: 240,
|
|
series: [
|
|
{
|
|
name: 'Syg',
|
|
color: '#e53935',
|
|
type: 'pie',
|
|
unit: 't',
|
|
data: [
|
|
{ x: 'Martin Nielsen', y: 8 },
|
|
{ x: 'Peter Hansen', y: 4 },
|
|
],
|
|
pie: { innerRadius: 25, outerRadius: 100 }
|
|
},
|
|
{
|
|
name: 'Ferie',
|
|
color: '#f59e0b',
|
|
type: 'pie',
|
|
unit: 't',
|
|
data: [
|
|
{ x: 'Anna Jensen', y: 4 },
|
|
{ x: 'Peter Hansen', y: 4 },
|
|
],
|
|
pie: { innerRadius: 25, outerRadius: 100 }
|
|
},
|
|
{
|
|
name: 'Fri',
|
|
color: '#8b5cf6',
|
|
type: 'pie',
|
|
unit: 't',
|
|
data: [
|
|
{ x: 'Sofie Larsen', y: 4 },
|
|
],
|
|
pie: { innerRadius: 25, outerRadius: 100 }
|
|
}
|
|
],
|
|
legend: { position: 'right', align: 'center' }
|
|
});
|
|
|
|
// Initialize grouped bar chart
|
|
createChart(document.getElementById('hoursChart'), {
|
|
xAxis: { categories: ['Uge 48', 'Uge 49', 'Uge 50', 'Uge 51', 'Uge 52'] },
|
|
series: [
|
|
{
|
|
name: 'Anna Jensen',
|
|
color: '#00897b',
|
|
type: 'bar',
|
|
data: [
|
|
{ x: 'Uge 48', y: 32 },
|
|
{ x: 'Uge 49', y: 40 },
|
|
{ x: 'Uge 50', y: 38 },
|
|
{ x: 'Uge 51', y: 40 },
|
|
{ x: 'Uge 52', y: 20 },
|
|
]
|
|
},
|
|
{
|
|
name: 'Martin Nielsen',
|
|
color: '#3b82f6',
|
|
type: 'bar',
|
|
data: [
|
|
{ x: 'Uge 48', y: 30 },
|
|
{ x: 'Uge 49', y: 40 },
|
|
{ x: 'Uge 50', y: 35 },
|
|
{ x: 'Uge 51', y: 40 },
|
|
{ x: 'Uge 52', y: 16 },
|
|
]
|
|
},
|
|
{
|
|
name: 'Sofie Larsen',
|
|
color: '#8b5cf6',
|
|
type: 'bar',
|
|
data: [
|
|
{ x: 'Uge 48', y: 28 },
|
|
{ x: 'Uge 49', y: 36 },
|
|
{ x: 'Uge 50', y: 40 },
|
|
{ x: 'Uge 51', y: 40 },
|
|
{ x: 'Uge 52', y: 18 },
|
|
]
|
|
},
|
|
{
|
|
name: 'Peter Hansen',
|
|
color: '#f59e0b',
|
|
type: 'bar',
|
|
data: [
|
|
{ x: 'Uge 48', y: 34 },
|
|
{ x: 'Uge 49', y: 38 },
|
|
{ x: 'Uge 50', y: 32 },
|
|
{ x: 'Uge 51', y: 40 },
|
|
{ x: 'Uge 52', y: 14 },
|
|
]
|
|
}
|
|
],
|
|
yAxis: { format: (v) => v + ' t' },
|
|
legend: { position: 'bottom', align: 'center', gap: 0 },
|
|
height: 240
|
|
});
|
|
|
|
// Period selector
|
|
document.querySelectorAll('swp-period-selector button').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('swp-period-selector button').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Sort columns
|
|
document.querySelectorAll('swp-th.sortable').forEach(th => {
|
|
th.addEventListener('click', () => {
|
|
const wasSorted = th.classList.contains('sorted');
|
|
const wasDesc = th.classList.contains('desc');
|
|
|
|
// Remove sorted state from all
|
|
document.querySelectorAll('swp-th.sortable').forEach(t => {
|
|
t.classList.remove('sorted', 'desc');
|
|
});
|
|
|
|
// Toggle this column
|
|
th.classList.add('sorted');
|
|
if (wasSorted && !wasDesc) {
|
|
th.classList.add('desc');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|