Refactors dashboard to use external CSS file

Moves inline styles to dedicated dashboard.css
Updates HTML to reference external stylesheet
Improves code organization and maintainability

Relates to refac branch
This commit is contained in:
Janus C. H. Knudsen 2025-12-31 00:36:32 +01:00
parent 0fa5b60a6b
commit 7b2080a7bf
10 changed files with 9481 additions and 899 deletions

View file

@ -6,6 +6,7 @@
<title>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/dashboard.css">
<style>
/* ==========================================
FONT FACE (Poppins)
@ -1667,11 +1668,11 @@
<!-- SYSTEM -->
<swp-side-menu-group>
<swp-side-menu-label>System</swp-side-menu-label>
<swp-side-menu-item data-tooltip="Indstillinger">
<swp-side-menu-item onclick="location.href='poc-indstillinger.html'" data-tooltip="Indstillinger">
<i class="ph ph-gear"></i>
<span>Indstillinger</span>
</swp-side-menu-item>
<swp-side-menu-item data-tooltip="Abonnement & Konto">
<swp-side-menu-item onclick="location.href='poc-konto.html'" data-tooltip="Abonnement & Konto">
<i class="ph ph-credit-card"></i>
<span>Abonnement & Konto</span>
</swp-side-menu-item>
@ -1716,15 +1717,464 @@
<!-- Main Content -->
<swp-main-content>
<swp-content-placeholder>
<i class="ph ph-squares-four"></i>
<swp-content-placeholder-title>Dashboard</swp-content-placeholder-title>
<swp-content-placeholder-text>
Vælg et menupunkt i venstre side for at navigere til den ønskede sektion.
<br><br>
Prøv f.eks. <a href="poc-produkter.html">Produkter & Lager</a> eller <a href="poc-leverandoerer.html">Leverandører</a>.
</swp-content-placeholder-text>
</swp-content-placeholder>
<swp-page-container>
<!-- Stats Bar -->
<swp-stats-bar>
<swp-stat-card class="highlight">
<swp-stat-value>12</swp-stat-value>
<swp-stat-label>Bookinger i dag</swp-stat-label>
<swp-stat-trend class="up">
<i class="ph ph-check-circle"></i>
4 gennemført, 2 i gang
</swp-stat-trend>
</swp-stat-card>
<swp-stat-card class="success">
<swp-stat-value>8.450 kr</swp-stat-value>
<swp-stat-label>Forventet omsætning</swp-stat-label>
<swp-stat-trend class="up">
<i class="ph ph-trend-up"></i>
+12% vs. gennemsnit
</swp-stat-trend>
</swp-stat-card>
<swp-stat-card>
<swp-stat-value>78%</swp-stat-value>
<swp-stat-label>Belægningsgrad</swp-stat-label>
<swp-stat-trend class="up">
<i class="ph ph-trend-up"></i>
God kapacitet
</swp-stat-trend>
</swp-stat-card>
<swp-stat-card class="warning">
<swp-stat-value>4</swp-stat-value>
<swp-stat-label>Kræver opmærksomhed</swp-stat-label>
</swp-stat-card>
</swp-stats-bar>
<swp-dashboard-grid>
<!-- Main Column -->
<swp-main-column>
<!-- AI Insight -->
<swp-card>
<swp-ai-insight>
<swp-ai-header>
<i class="ph ph-sparkle"></i>
<span>AI Analyse</span>
</swp-ai-header>
<swp-ai-text>
<strong>Godt i gang!</strong> 4 af 12 bookinger er gennemført. 2 er i gang nu, og 6 venter.
Forventet omsætning: <strong>8.450 kr</strong> allerede realiseret <strong>2.150 kr</strong>.
Tip: Ida Rasmussen (11:30) har ikke bekræftet overvej at sende en påmindelse.
</swp-ai-text>
</swp-ai-insight>
</swp-card>
<!-- Today's Bookings -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-calendar-check"></i>
Dagens bookinger
</swp-card-title>
<swp-card-action>Se alle</swp-card-action>
</swp-card-header>
<swp-current-time>
<i class="ph ph-clock"></i>
<span>Nu: <swp-time>10:45</swp-time></span>
</swp-current-time>
<swp-booking-list>
<!-- Gennemførte bookinger -->
<swp-booking-item class="completed">
<swp-booking-time>
<swp-time-start>08:00</swp-time-start>
<swp-time-end>08:30</swp-time-end>
</swp-booking-time>
<swp-booking-indicator></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Herreklip</swp-booking-service>
<swp-booking-customer>Thomas Berg</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>MH</swp-avatar-small>
<span>Maria</span>
</swp-booking-employee>
<swp-booking-status class="completed">Gennemført</swp-booking-status>
</swp-booking-item>
<swp-booking-item class="completed">
<swp-booking-time>
<swp-time-start>08:30</swp-time-start>
<swp-time-end>09:00</swp-time-end>
</swp-booking-time>
<swp-booking-indicator></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Dameklip</swp-booking-service>
<swp-booking-customer>Katrine Holm</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>AS</swp-avatar-small>
<span>Anna</span>
</swp-booking-employee>
<swp-booking-status class="completed">Gennemført</swp-booking-status>
</swp-booking-item>
<swp-booking-item class="completed">
<swp-booking-time>
<swp-time-start>09:00</swp-time-start>
<swp-time-end>09:30</swp-time-end>
</swp-booking-time>
<swp-booking-indicator></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Skægtrimning</swp-booking-service>
<swp-booking-customer>Mikkel Skov</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>PK</swp-avatar-small>
<span>Peter</span>
</swp-booking-employee>
<swp-booking-status class="completed">Gennemført</swp-booking-status>
</swp-booking-item>
<swp-booking-item class="completed">
<swp-booking-time>
<swp-time-start>09:00</swp-time-start>
<swp-time-end>10:30</swp-time-end>
</swp-booking-time>
<swp-booking-indicator></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Dameklip + Farve</swp-booking-service>
<swp-booking-customer>Sofie Nielsen</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>AS</swp-avatar-small>
<span>Anna</span>
</swp-booking-employee>
<swp-booking-status class="completed">Gennemført</swp-booking-status>
</swp-booking-item>
<!-- Igangværende -->
<swp-booking-item style="background: color-mix(in srgb, var(--color-teal) 8%, var(--color-background-alt));">
<swp-booking-time>
<swp-time-start>10:30</swp-time-start>
<swp-time-end>11:00</swp-time-end>
</swp-booking-time>
<swp-booking-indicator class="blue"></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Herreklip</swp-booking-service>
<swp-booking-customer>Jonas Petersen</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>MH</swp-avatar-small>
<span>Maria</span>
</swp-booking-employee>
<swp-booking-status class="inprogress">I gang</swp-booking-status>
</swp-booking-item>
<swp-booking-item style="background: color-mix(in srgb, var(--color-teal) 8%, var(--color-background-alt));">
<swp-booking-time>
<swp-time-start>10:00</swp-time-start>
<swp-time-end>11:00</swp-time-end>
</swp-booking-time>
<swp-booking-indicator class="purple"></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Føn + Styling</swp-booking-service>
<swp-booking-customer>Rikke Dam</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>LJ</swp-avatar-small>
<span>Louise</span>
</swp-booking-employee>
<swp-booking-status class="inprogress">I gang</swp-booking-status>
</swp-booking-item>
<!-- Kommende -->
<swp-booking-item>
<swp-booking-time>
<swp-time-start>11:00</swp-time-start>
<swp-time-end>12:00</swp-time-end>
</swp-booking-time>
<swp-booking-indicator class="teal"></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Balayage</swp-booking-service>
<swp-booking-customer>Emma Christensen</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>AS</swp-avatar-small>
<span>Anna</span>
</swp-booking-employee>
<swp-booking-status class="confirmed">Bekræftet</swp-booking-status>
</swp-booking-item>
<swp-booking-item>
<swp-booking-time>
<swp-time-start>11:30</swp-time-start>
<swp-time-end>12:00</swp-time-end>
</swp-booking-time>
<swp-booking-indicator class="amber"></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Dameklip</swp-booking-service>
<swp-booking-customer>Ida Rasmussen</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>MH</swp-avatar-small>
<span>Maria</span>
</swp-booking-employee>
<swp-booking-status class="pending">Afventer</swp-booking-status>
</swp-booking-item>
<swp-booking-item>
<swp-booking-time>
<swp-time-start>13:00</swp-time-start>
<swp-time-end>14:00</swp-time-end>
</swp-booking-time>
<swp-booking-indicator class="green"></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Farve + Føn</swp-booking-service>
<swp-booking-customer>Louise Andersen</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>AS</swp-avatar-small>
<span>Anna</span>
</swp-booking-employee>
<swp-booking-status class="confirmed">Bekræftet</swp-booking-status>
</swp-booking-item>
<swp-booking-item>
<swp-booking-time>
<swp-time-start>14:00</swp-time-start>
<swp-time-end>14:30</swp-time-end>
</swp-booking-time>
<swp-booking-indicator class="blue"></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Herreklip</swp-booking-service>
<swp-booking-customer>Anders Møller</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>PK</swp-avatar-small>
<span>Peter</span>
</swp-booking-employee>
<swp-booking-status class="confirmed">Bekræftet</swp-booking-status>
</swp-booking-item>
<swp-booking-item>
<swp-booking-time>
<swp-time-start>15:30</swp-time-start>
<swp-time-end>16:30</swp-time-end>
</swp-booking-time>
<swp-booking-indicator class="purple"></swp-booking-indicator>
<swp-booking-details>
<swp-booking-service>Extensions</swp-booking-service>
<swp-booking-customer>Julie Lund</swp-booking-customer>
</swp-booking-details>
<swp-booking-employee>
<swp-avatar-small>LJ</swp-avatar-small>
<span>Louise</span>
</swp-booking-employee>
<swp-booking-status class="confirmed">Bekræftet</swp-booking-status>
</swp-booking-item>
</swp-booking-list>
</swp-card>
<!-- Attention Items -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-warning-circle"></i>
Opmærksomheder
</swp-card-title>
</swp-card-header>
<swp-attention-list>
<swp-attention-item class="urgent">
<swp-attention-icon>
<i class="ph ph-package"></i>
</swp-attention-icon>
<swp-attention-content>
<swp-attention-title>Lav lagerbeholdning på Moroccanoil Balsam</swp-attention-title>
<swp-attention-desc>4 stk tilbage · sidst bestilt for 21 dage siden</swp-attention-desc>
</swp-attention-content>
<swp-attention-action>Opret bestilling</swp-attention-action>
</swp-attention-item>
<swp-attention-item class="warning">
<swp-attention-icon>
<i class="ph ph-calendar-x"></i>
</swp-attention-icon>
<swp-attention-content>
<swp-attention-title>2 kunder uden bekræftet tid i eftermiddag</swp-attention-title>
<swp-attention-desc>Line · Balayage · 13:00 · Cecilie · Klip · 15:00</swp-attention-desc>
</swp-attention-content>
<swp-attention-action>Send SMS-påmindelse</swp-attention-action>
</swp-attention-item>
<swp-attention-item class="info">
<swp-attention-icon>
<i class="ph ph-cash-register"></i>
</swp-attention-icon>
<swp-attention-content>
<swp-attention-title>Kasseafstemning for i går mangler</swp-attention-title>
<swp-attention-desc>9 kontantsalg registreret · forventet differens: 0 kr</swp-attention-desc>
</swp-attention-content>
<swp-attention-action>Afstem kasse</swp-attention-action>
</swp-attention-item>
<swp-attention-item class="info">
<swp-attention-icon>
<i class="ph ph-gift"></i>
</swp-attention-icon>
<swp-attention-content>
<swp-attention-title>Gavekort udløber snart</swp-attention-title>
<swp-attention-desc>GC-D2R4-6TY9 udløber om 3 uger (200 DKK)</swp-attention-desc>
</swp-attention-content>
<swp-attention-action>Se gavekort</swp-attention-action>
</swp-attention-item>
</swp-attention-list>
</swp-card>
</swp-main-column>
<!-- Side Column -->
<swp-side-column>
<!-- Notifications -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-bell"></i>
Notifikationer
</swp-card-title>
<swp-card-action>Marker alle som læst</swp-card-action>
</swp-card-header>
<swp-notification-list>
<swp-notification-item class="unread">
<swp-notification-icon>
<i class="ph ph-calendar-plus"></i>
</swp-notification-icon>
<swp-notification-content>
<swp-notification-text>
<strong>Ny booking</strong> fra Emma Christensen til Balayage
</swp-notification-text>
<swp-notification-time>For 15 min. siden</swp-notification-time>
</swp-notification-content>
</swp-notification-item>
<swp-notification-item class="unread">
<swp-notification-icon>
<i class="ph ph-star"></i>
</swp-notification-icon>
<swp-notification-content>
<swp-notification-text>
<strong>Ny anmeldelse</strong> 5 stjerner fra Sofie Nielsen
</swp-notification-text>
<swp-notification-time>For 1 time siden</swp-notification-time>
</swp-notification-content>
</swp-notification-item>
<swp-notification-item>
<swp-notification-icon>
<i class="ph ph-x"></i>
</swp-notification-icon>
<swp-notification-content>
<swp-notification-text>
<strong>Aflysning</strong> Mette Hansen aflyste kl. 15:00
</swp-notification-text>
<swp-notification-time>For 2 timer siden</swp-notification-time>
</swp-notification-content>
</swp-notification-item>
<swp-notification-item>
<swp-notification-icon>
<i class="ph ph-check"></i>
</swp-notification-icon>
<swp-notification-content>
<swp-notification-text>
<strong>Bekræftet</strong> Louise Andersen bekræftede kl. 13:00
</swp-notification-text>
<swp-notification-time>I går kl. 18:30</swp-notification-time>
</swp-notification-content>
</swp-notification-item>
</swp-notification-list>
</swp-card>
<!-- Quick Stats -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-chart-line-up"></i>
Denne uge
</swp-card-title>
</swp-card-header>
<swp-quick-stats>
<swp-quick-stat>
<swp-stat-value>47</swp-stat-value>
<swp-stat-label>Bookinger</swp-stat-label>
</swp-quick-stat>
<swp-quick-stat>
<swp-stat-value>38.200 kr</swp-stat-value>
<swp-stat-label>Omsætning</swp-stat-label>
</swp-quick-stat>
<swp-quick-stat>
<swp-stat-value>8</swp-stat-value>
<swp-stat-label>Nye kunder</swp-stat-label>
</swp-quick-stat>
<swp-quick-stat>
<swp-stat-value>72%</swp-stat-value>
<swp-stat-label>Gns. belægning</swp-stat-label>
</swp-quick-stat>
</swp-quick-stats>
</swp-card>
<!-- Employee Status -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-users"></i>
Medarbejdere
</swp-card-title>
</swp-card-header>
<swp-employee-list>
<swp-employee-status-item>
<swp-employee-avatar>AS</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Anna Sørensen</swp-employee-name>
<swp-employee-current>Ledig til kl. 11:00 (Balayage)</swp-employee-current>
</swp-employee-info>
<swp-employee-status-badge class="available">Ledig</swp-employee-status-badge>
</swp-employee-status-item>
<swp-employee-status-item>
<swp-employee-avatar>MH</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Maria Hansen</swp-employee-name>
<swp-employee-current>Herreklip med Jonas</swp-employee-current>
</swp-employee-info>
<swp-employee-status-badge class="busy">Optaget</swp-employee-status-badge>
</swp-employee-status-item>
<swp-employee-status-item>
<swp-employee-avatar>LJ</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Louise Jensen</swp-employee-name>
<swp-employee-current>Føn + Styling med Rikke</swp-employee-current>
</swp-employee-info>
<swp-employee-status-badge class="busy">Optaget</swp-employee-status-badge>
</swp-employee-status-item>
<swp-employee-status-item>
<swp-employee-avatar>PK</swp-employee-avatar>
<swp-employee-info>
<swp-employee-name>Peter Kristensen</swp-employee-name>
<swp-employee-current>Ledig til kl. 14:00</swp-employee-current>
</swp-employee-info>
<swp-employee-status-badge class="available">Ledig</swp-employee-status-badge>
</swp-employee-status-item>
</swp-employee-list>
</swp-card>
</swp-side-column>
</swp-dashboard-grid>
</swp-page-container>
</swp-main-content>
</swp-app-layout>
@ -2504,6 +2954,39 @@
handlePinKey('backspace');
}
});
// ==========================================
// DASHBOARD FUNCTIONALITY
// ==========================================
// Update current time
function updateDashboardTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const timeEl = document.querySelector('swp-current-time swp-time');
if (timeEl) {
timeEl.textContent = `${hours}:${minutes}`;
}
}
updateDashboardTime();
setInterval(updateDashboardTime, 60000);
// Click handlers for attention items
document.querySelectorAll('swp-attention-action').forEach(action => {
action.addEventListener('click', (e) => {
e.stopPropagation();
alert('Handling: ' + action.textContent);
});
});
// Click handlers for bookings
document.querySelectorAll('swp-booking-item').forEach(item => {
item.addEventListener('click', () => {
const service = item.querySelector('swp-booking-service').textContent;
alert('Åbn booking: ' + service);
});
});
</script>
</body>
</html>