Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Calendar/wwwroot/poc-dashboard.html

508 lines
21 KiB
HTML
Raw Normal View History

Enhance POC dashboard with dynamic UI components Adds comprehensive dashboard HTML with responsive design and interactive elements Implements: - Dark/light mode color variables - Responsive grid layout - Interactive booking and notification sections - Dynamic time and status tracking - Custom web components for dashboard functionality
2025-12-30 20:20:57 +01:00
<!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>
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
<link rel="stylesheet" href="css/dashboard.css">
Enhance POC dashboard with dynamic UI components Adds comprehensive dashboard HTML with responsive design and interactive elements Implements: - Dark/light mode color variables - Responsive grid layout - Interactive booking and notification sections - Dynamic time and status tracking - Custom web components for dashboard functionality
2025-12-30 20:20:57 +01:00
</head>
<body>
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
<!-- Page Header -->
<swp-page-header>
<swp-page-title>Dashboard</swp-page-title>
<swp-page-actions>
Enhance POC dashboard with dynamic UI components Adds comprehensive dashboard HTML with responsive design and interactive elements Implements: - Dark/light mode color variables - Responsive grid layout - Interactive booking and notification sections - Dynamic time and status tracking - Custom web components for dashboard functionality
2025-12-30 20:20:57 +01:00
<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>
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
</swp-page-actions>
</swp-page-header>
Enhance POC dashboard with dynamic UI components Adds comprehensive dashboard HTML with responsive design and interactive elements Implements: - Dark/light mode color variables - Responsive grid layout - Interactive booking and notification sections - Dynamic time and status tracking - Custom web components for dashboard functionality
2025-12-30 20:20:57 +01:00
<swp-page-container>
<!-- Stats Bar -->
<swp-stats-bar>
<swp-stat-card class="highlight">
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
<swp-stat-value>12</swp-stat-value>
<swp-stat-label>Bookinger i dag</swp-stat-label>
Enhance POC dashboard with dynamic UI components Adds comprehensive dashboard HTML with responsive design and interactive elements Implements: - Dark/light mode color variables - Responsive grid layout - Interactive booking and notification sections - Dynamic time and status tracking - Custom web components for dashboard functionality
2025-12-30 20:20:57 +01:00
<swp-stat-trend class="up">
<i class="ph ph-check-circle"></i>
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
4 gennemf&oslash;rt, 2 i gang
Enhance POC dashboard with dynamic UI components Adds comprehensive dashboard HTML with responsive design and interactive elements Implements: - Dark/light mode color variables - Responsive grid layout - Interactive booking and notification sections - Dynamic time and status tracking - Custom web components for dashboard functionality
2025-12-30 20:20:57 +01:00
</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 Copy permalink