Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Calendar/wwwroot/poc-medarbejdere.html
Janus C. H. Knudsen fac7754d7a Refactors design system documentation and layout 
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
2026-01-07 22:12:25 +01:00

588 lines
18 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medarbejdere - Salon OS</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
<link rel="stylesheet" href="css/konto.css">
<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-blue: #1976d2;
--color-red: #e53935;
--color-amber: #f59e0b;
--color-purple: #8b5cf6;
--color-green: #43a047;
--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
/* Dark mode - system preference */
@media (prefers-color-scheme: dark) {
:root:not(.light-mode) {
--color-surface: #1e1e1e;
--color-background: #121212;
--color-background-hover: #2a2a2a;
--color-background-alt: #1a1a1a;
--color-border: #333;
--color-text: #e0e0e0;
--color-text-secondary: #999;
--color-teal: #26a69a;
--color-blue: #42a5f5;
--color-red: #ef5350;
--color-amber: #ffb74d;
--color-purple: #a78bfa;
--color-green: #66bb6a;
}
}
/* Manual dark mode override */
:root.dark-mode {
--color-surface: #1e1e1e;
--color-background: #121212;
--color-background-hover: #2a2a2a;
--color-background-alt: #1a1a1a;
--color-border: #333;
--color-text: #e0e0e0;
--color-text-secondary: #999;
--color-teal: #26a69a;
--color-blue: #42a5f5;
--color-red: #ef5350;
--color-amber: #ffb74d;
--color-purple: #a78bfa;
--color-green: #66bb6a;
}
/* ==========================================
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;
}
/* ==========================================
ROLE BADGES
========================================== */
swp-role-badge.leader {
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
color: var(--color-blue);
}
/* ==========================================
STATS CARDS
========================================== */
swp-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 24px;
}
swp-stat-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 20px;
background: var(--color-surface);
border-radius: 12px;
border: 1px solid var(--color-border);
}
swp-stat-value {
font-size: 28px;
font-weight: 600;
color: var(--color-text);
}
swp-stat-label {
font-size: 13px;
color: var(--color-text-secondary);
}
swp-stat-card.teal swp-stat-value {
color: var(--color-teal);
}
swp-stat-card.amber swp-stat-value {
color: var(--color-amber);
}
swp-stat-card.purple swp-stat-value {
color: var(--color-purple);
}
/* ==========================================
TABS
========================================== */
swp-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 24px;
}
swp-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
font-size: 14px;
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all 150ms ease;
}
swp-tab:hover {
color: var(--color-text);
background: var(--color-background-hover);
}
swp-tab[data-active="true"] {
color: var(--color-teal);
border-bottom-color: var(--color-teal);
}
swp-tab i {
font-size: 18px;
}
swp-tab-content {
display: none;
}
swp-tab-content[data-active="true"] {
display: block;
}
/* ==========================================
PERMISSIONS MATRIX
========================================== */
swp-permissions-matrix {
display: block;
background: var(--color-surface);
border-radius: 12px;
overflow: hidden;
}
swp-permissions-matrix table {
width: 100%;
border-collapse: collapse;
}
swp-permissions-matrix th,
swp-permissions-matrix td {
padding: 14px 16px;
text-align: center;
border-bottom: 1px solid var(--color-border);
}
swp-permissions-matrix th:first-child,
swp-permissions-matrix td:first-child {
text-align: left;
font-weight: 500;
}
swp-permissions-matrix thead th {
background: var(--color-background-alt);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
swp-permissions-matrix tbody tr:last-child td {
border-bottom: none;
}
swp-permissions-matrix .permission-name {
display: flex;
align-items: center;
gap: 10px;
}
swp-permissions-matrix .permission-name i {
font-size: 18px;
color: var(--color-text-secondary);
}
swp-permissions-matrix .check {
color: var(--color-teal);
font-size: 20px;
}
swp-permissions-matrix .no-access {
color: var(--color-border);
font-size: 16px;
}
</style>
</head>
<body>
<swp-page-container>
<!-- Page Header -->
<swp-page-header>
<swp-page-title>
<h1>Medarbejdere</h1>
<p>Administrer brugere, roller og rettigheder</p>
</swp-page-title>
</swp-page-header>
<!-- Stats Cards -->
<swp-stats-row>
<swp-stat-card class="teal">
<swp-stat-value>4</swp-stat-value>
<swp-stat-label>Aktive medarbejdere</swp-stat-label>
</swp-stat-card>
<swp-stat-card class="amber">
<swp-stat-value>1</swp-stat-value>
<swp-stat-label>Afventer invitation</swp-stat-label>
</swp-stat-card>
<swp-stat-card class="purple">
<swp-stat-value>4</swp-stat-value>
<swp-stat-label>Roller defineret</swp-stat-label>
</swp-stat-card>
</swp-stats-row>
<!-- Tabs -->
<swp-tabs>
<swp-tab data-tab="brugere" data-active="true">
<i class="ph ph-users"></i>
Brugere
</swp-tab>
<swp-tab data-tab="roller">
<i class="ph ph-shield-check"></i>
Roller
</swp-tab>
</swp-tabs>
<!-- Tab: Brugere -->
<swp-tab-content data-tab="brugere" data-active="true">
<swp-users-header>
<swp-users-count>
<strong>5 af 8</strong> brugere
<swp-users-progress>
<swp-users-progress-bar style="width: 62.5%"></swp-users-progress-bar>
</swp-users-progress>
</swp-users-count>
<swp-btn class="primary">
<i class="ph ph-user-plus"></i>
Inviter bruger
</swp-btn>
</swp-users-header>
<swp-table-card>
<swp-table>
<swp-table-header>
<swp-table-row>
<swp-table-cell>Bruger</swp-table-cell>
<swp-table-cell>Rolle</swp-table-cell>
<swp-table-cell>Status</swp-table-cell>
<swp-table-cell>Sidst aktiv</swp-table-cell>
<swp-table-cell></swp-table-cell>
</swp-table-row>
</swp-table-header>
<swp-table-body>
<!-- User 1 - Owner -->
<swp-table-row>
<swp-table-cell>
<swp-user-info>
<swp-user-avatar>MJ</swp-user-avatar>
<swp-user-details>
<swp-user-name>Maria Jensen</swp-user-name>
<swp-user-email>maria@salonbeauty.dk</swp-user-email>
</swp-user-details>
</swp-user-info>
</swp-table-cell>
<swp-table-cell>
<swp-role-badge class="owner">Ejer</swp-role-badge>
</swp-table-cell>
<swp-table-cell>
<swp-status-badge class="active">
<swp-status-dot></swp-status-dot>
Aktiv
</swp-status-badge>
</swp-table-cell>
<swp-table-cell>I dag, 14:32</swp-table-cell>
<swp-table-cell>
<swp-table-actions>
<swp-icon-btn title="Rediger">
<i class="ph ph-pencil"></i>
</swp-icon-btn>
</swp-table-actions>
</swp-table-cell>
</swp-table-row>
<!-- User 2 - Admin -->
<swp-table-row>
<swp-table-cell>
<swp-user-info>
<swp-user-avatar class="purple">AS</swp-user-avatar>
<swp-user-details>
<swp-user-name>Anna Sørensen</swp-user-name>
<swp-user-email>anna@salonbeauty.dk</swp-user-email>
</swp-user-details>
</swp-user-info>
</swp-table-cell>
<swp-table-cell>
<swp-role-badge class="admin">Admin</swp-role-badge>
</swp-table-cell>
<swp-table-cell>
<swp-status-badge class="active">
<swp-status-dot></swp-status-dot>
Aktiv
</swp-status-badge>
</swp-table-cell>
<swp-table-cell>I dag, 12:15</swp-table-cell>
<swp-table-cell>
<swp-table-actions>
<swp-icon-btn title="Rediger">
<i class="ph ph-pencil"></i>
</swp-icon-btn>
<swp-icon-btn class="danger" title="Fjern bruger">
<i class="ph ph-trash"></i>
</swp-icon-btn>
</swp-table-actions>
</swp-table-cell>
</swp-table-row>
<!-- User 3 - Leder -->
<swp-table-row>
<swp-table-cell>
<swp-user-info>
<swp-user-avatar class="blue">LP</swp-user-avatar>
<swp-user-details>
<swp-user-name>Louise Pedersen</swp-user-name>
<swp-user-email>louise@salonbeauty.dk</swp-user-email>
</swp-user-details>
</swp-user-info>
</swp-table-cell>
<swp-table-cell>
<swp-role-badge class="leader">Leder</swp-role-badge>
</swp-table-cell>
<swp-table-cell>
<swp-status-badge class="active">
<swp-status-dot></swp-status-dot>
Aktiv
</swp-status-badge>
</swp-table-cell>
<swp-table-cell>I går, 17:45</swp-table-cell>
<swp-table-cell>
<swp-table-actions>
<swp-icon-btn title="Rediger">
<i class="ph ph-pencil"></i>
</swp-icon-btn>
<swp-icon-btn class="danger" title="Fjern bruger">
<i class="ph ph-trash"></i>
</swp-icon-btn>
</swp-table-actions>
</swp-table-cell>
</swp-table-row>
<!-- User 4 -->
<swp-table-row>
<swp-table-cell>
<swp-user-info>
<swp-user-avatar class="amber">KN</swp-user-avatar>
<swp-user-details>
<swp-user-name>Katrine Nielsen</swp-user-name>
<swp-user-email>katrine@salonbeauty.dk</swp-user-email>
</swp-user-details>
</swp-user-info>
</swp-table-cell>
<swp-table-cell>
<swp-role-badge>Medarbejder</swp-role-badge>
</swp-table-cell>
<swp-table-cell>
<swp-status-badge class="active">
<swp-status-dot></swp-status-dot>
Aktiv
</swp-status-badge>
</swp-table-cell>
<swp-table-cell>27. dec, 09:30</swp-table-cell>
<swp-table-cell>
<swp-table-actions>
<swp-icon-btn title="Rediger">
<i class="ph ph-pencil"></i>
</swp-icon-btn>
<swp-icon-btn class="danger" title="Fjern bruger">
<i class="ph ph-trash"></i>
</swp-icon-btn>
</swp-table-actions>
</swp-table-cell>
</swp-table-row>
<!-- User 5 - Invited -->
<swp-table-row>
<swp-table-cell>
<swp-user-info>
<swp-user-avatar class="purple">SH</swp-user-avatar>
<swp-user-details>
<swp-user-name>Sofie Hansen</swp-user-name>
<swp-user-email>sofie@salonbeauty.dk</swp-user-email>
</swp-user-details>
</swp-user-info>
</swp-table-cell>
<swp-table-cell>
<swp-role-badge>Medarbejder</swp-role-badge>
</swp-table-cell>
<swp-table-cell>
<swp-status-badge class="invited">
<swp-status-dot></swp-status-dot>
Invitation sendt
</swp-status-badge>
</swp-table-cell>
<swp-table-cell>-</swp-table-cell>
<swp-table-cell>
<swp-table-actions>
<swp-icon-btn title="Send invitation igen">
<i class="ph ph-paper-plane-tilt"></i>
</swp-icon-btn>
<swp-icon-btn class="danger" title="Annuller invitation">
<i class="ph ph-x"></i>
</swp-icon-btn>
</swp-table-actions>
</swp-table-cell>
</swp-table-row>
</swp-table-body>
</swp-table>
</swp-table-card>
</swp-tab-content>
<!-- Tab: Roller -->
<swp-tab-content data-tab="roller">
<swp-permissions-matrix>
<table>
<thead>
<tr>
<th>Rettighed</th>
<th>Ejer</th>
<th>Admin</th>
<th>Leder</th>
<th>Medarbejder</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="permission-name">
<i class="ph ph-calendar"></i>
Kalender
</span>
</td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-check-circle check"></i></td>
</tr>
<tr>
<td>
<span class="permission-name">
<i class="ph ph-users"></i>
Medarbejdere
</span>
</td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-minus no-access"></i></td>
</tr>
<tr>
<td>
<span class="permission-name">
<i class="ph ph-address-book"></i>
Kunder
</span>
</td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-check-circle check"></i></td>
</tr>
<tr>
<td>
<span class="permission-name">
<i class="ph ph-chart-bar"></i>
Rapporter & Økonomi
</span>
</td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-check-circle check"></i></td>
<td><i class="ph ph-minus no-access"></i></td>
<td><i class="ph ph-minus no-access"></i></td>
</tr>
</tbody>
</table>
</swp-permissions-matrix>
</swp-tab-content>
</swp-page-container>
<script>
// Simple tab switching
document.querySelectorAll('swp-tab').forEach(tab => {
tab.addEventListener('click', () => {
const tabName = tab.dataset.tab;
// Update tab active states
document.querySelectorAll('swp-tab').forEach(t => t.removeAttribute('data-active'));
tab.setAttribute('data-active', 'true');
// Update content active states
document.querySelectorAll('swp-tab-content').forEach(c => c.removeAttribute('data-active'));
document.querySelector(`swp-tab-content[data-tab="${tabName}"]`).setAttribute('data-active', 'true');
});
});
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink