Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Calendar/wwwroot/poc-dashboard.html
Janus C. H. Knudsen 7b2080a7bf 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
2025-12-31 00:36:32 +01:00

507 lines
21 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>Dashboard - Salon OS</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
<link rel="stylesheet" href="css/dashboard.css">
</head>
<body>
<!-- Page Header -->
<swp-page-header>
<swp-page-title>Dashboard</swp-page-title>
<swp-page-actions>
<swp-date-display>
<i class="ph ph-calendar-blank"></i>
<span>Mandag, 30. december 2024</span>
</swp-date-display>
<swp-btn class="primary">
<i class="ph ph-plus"></i>
Ny booking
</swp-btn>
</swp-page-actions>
</swp-page-header>
<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&oslash;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&aelig;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&aelig;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>3</swp-stat-value>
<swp-stat-label>Kr&aelig;ver opm&aelig;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&oslash;rt. 2 er i gang nu, og 6 venter.
Forventet oms&aelig;tning: <strong>8.450 kr</strong> &ndash; allerede realiseret <strong>2.150 kr</strong>.
Tip: Ida Rasmussen (11:30) har ikke bekr&aelig;ftet &ndash; overvej at sende en p&aring;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&oslash;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&oslash;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&aelig;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&oslash;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&oslash;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&oslash;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&aelig;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&oslash;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&aelig;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&oslash;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&aelig;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&aelig;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&aelig;rksomheder
</swp-card-title>
</swp-card-header>
<swp-attention-list>
<swp-attention-item class="urgent">
<swp-attention-icon>
<i class="ph ph-x-circle"></i>
</swp-attention-icon>
<swp-attention-content>
<swp-attention-title>Aflyst booking</swp-attention-title>
<swp-attention-desc>Mette Hansen aflyste kl. 15:00 &ndash; tid nu ledig</swp-attention-desc>
</swp-attention-content>
<swp-attention-action>Fyld tid</swp-attention-action>
</swp-attention-item>
<swp-attention-item class="warning">
<swp-attention-icon>
<i class="ph ph-clock"></i>
</swp-attention-icon>
<swp-attention-content>
<swp-attention-title>Ubekr&aelig;ftet booking</swp-attention-title>
<swp-attention-desc>Ida Rasmussen har ikke bekr&aelig;ftet kl. 11:30</swp-attention-desc>
</swp-attention-content>
<swp-attention-action>Send p&aring;mindelse</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&oslash;ber snart</swp-attention-title>
<swp-attention-desc>GC-D2R4-6TY9 udl&oslash;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&aelig;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> &ndash; 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> &ndash; 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&aelig;ftet</strong> &ndash; Louise Andersen bekr&aelig;ftede kl. 13:00
</swp-notification-text>
<swp-notification-time>I g&aring;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&aelig;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&aelig;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&oslash;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&oslash;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>
<script>
// Update current time
function updateTime() {
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}`;
}
}
updateTime();
setInterval(updateTime, 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('&Aring;bn booking: ' + service);
});
});
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink