Moves POC-files into PlanTempus
This commit is contained in:
Janus C. H. Knudsen
parent
51f3b92d69
commit
ea3ecdfb68
91 changed files with 59868 additions and 0 deletions
588
.workbench/POC/poc-medarbejdere.html
Normal file
588
.workbench/POC/poc-medarbejdere.html
Normal file
|
|
@ -0,0 +1,588 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue