733 lines
29 KiB
HTML
733 lines
29 KiB
HTML
|
<!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ø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>3</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-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 – 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æftet booking</swp-attention-title>
|
||
|
|
<swp-attention-desc>Ida Rasmussen har ikke bekræftet kl. 11:30</swp-attention-desc>
|
||
|
|
</swp-attention-content>
|
||
|
|
<swp-attention-action>Send på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ø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>
|
||
|
|
|
||
|
|
<!-- Waitlist Mini Card -->
|
||
|
|
<swp-waitlist-card>
|
||
|
|
<swp-waitlist-icon>
|
||
|
|
<i class="ph ph-users-three"></i>
|
||
|
|
<swp-waitlist-badge>4</swp-waitlist-badge>
|
||
|
|
</swp-waitlist-icon>
|
||
|
|
<swp-waitlist-label>På venteliste</swp-waitlist-label>
|
||
|
|
</swp-waitlist-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>
|
||
|
|
|
||
|
|
<!-- Waitlist Drawer Overlay -->
|
||
|
|
<swp-drawer-overlay></swp-drawer-overlay>
|
||
|
|
|
||
|
|
<!-- Waitlist Drawer -->
|
||
|
|
<swp-waitlist-drawer>
|
||
|
|
<swp-drawer-header>
|
||
|
|
<swp-drawer-title>
|
||
|
|
Venteliste <swp-count>(4)</swp-count>
|
||
|
|
</swp-drawer-title>
|
||
|
|
<swp-drawer-close>
|
||
|
|
<i class="ph ph-x"></i>
|
||
|
|
</swp-drawer-close>
|
||
|
|
</swp-drawer-header>
|
||
|
|
<swp-drawer-body>
|
||
|
|
<swp-waitlist-list>
|
||
|
|
<!-- Entry 1 -->
|
||
|
|
<swp-waitlist-item>
|
||
|
|
<swp-waitlist-customer>
|
||
|
|
<swp-avatar>EC</swp-avatar>
|
||
|
|
<swp-waitlist-customer-info>
|
||
|
|
<swp-waitlist-name>Emma Christensen</swp-waitlist-name>
|
||
|
|
<swp-waitlist-phone>+45 12 34 56 78</swp-waitlist-phone>
|
||
|
|
</swp-waitlist-customer-info>
|
||
|
|
</swp-waitlist-customer>
|
||
|
|
<swp-waitlist-service>Dameklip + Farve</swp-waitlist-service>
|
||
|
|
<swp-waitlist-meta>
|
||
|
|
<swp-waitlist-periods>
|
||
|
|
<swp-label>Ønsker:</swp-label>
|
||
|
|
<swp-waitlist-period-tag>Mandag-Onsdag</swp-waitlist-period-tag>
|
||
|
|
<swp-waitlist-period-tag>Formiddag</swp-waitlist-period-tag>
|
||
|
|
</swp-waitlist-periods>
|
||
|
|
<swp-waitlist-dates>
|
||
|
|
<swp-waitlist-date>
|
||
|
|
<i class="ph ph-calendar"></i>
|
||
|
|
Tilmeldt: 2. jan 2026
|
||
|
|
</swp-waitlist-date>
|
||
|
|
<swp-waitlist-date class="expires">
|
||
|
|
<i class="ph ph-clock"></i>
|
||
|
|
Udløber: 16. jan 2026
|
||
|
|
</swp-waitlist-date>
|
||
|
|
</swp-waitlist-dates>
|
||
|
|
</swp-waitlist-meta>
|
||
|
|
<swp-waitlist-actions>
|
||
|
|
<swp-btn class="secondary">
|
||
|
|
<i class="ph ph-phone"></i>
|
||
|
|
Kontakt
|
||
|
|
</swp-btn>
|
||
|
|
<swp-btn class="primary">
|
||
|
|
<i class="ph ph-calendar-plus"></i>
|
||
|
|
Book nu
|
||
|
|
</swp-btn>
|
||
|
|
</swp-waitlist-actions>
|
||
|
|
</swp-waitlist-item>
|
||
|
|
|
||
|
|
<!-- Entry 2 -->
|
||
|
|
<swp-waitlist-item>
|
||
|
|
<swp-waitlist-customer>
|
||
|
|
<swp-avatar>MS</swp-avatar>
|
||
|
|
<swp-waitlist-customer-info>
|
||
|
|
<swp-waitlist-name>Mikkel Sørensen</swp-waitlist-name>
|
||
|
|
<swp-waitlist-phone>+45 23 45 67 89</swp-waitlist-phone>
|
||
|
|
</swp-waitlist-customer-info>
|
||
|
|
</swp-waitlist-customer>
|
||
|
|
<swp-waitlist-service>Herreklip</swp-waitlist-service>
|
||
|
|
<swp-waitlist-meta>
|
||
|
|
<swp-waitlist-periods>
|
||
|
|
<swp-label>Ønsker:</swp-label>
|
||
|
|
<swp-waitlist-period-tag>Weekend</swp-waitlist-period-tag>
|
||
|
|
</swp-waitlist-periods>
|
||
|
|
<swp-waitlist-dates>
|
||
|
|
<swp-waitlist-date>
|
||
|
|
<i class="ph ph-calendar"></i>
|
||
|
|
Tilmeldt: 30. dec 2025
|
||
|
|
</swp-waitlist-date>
|
||
|
|
<swp-waitlist-date class="expires soon">
|
||
|
|
<i class="ph ph-clock"></i>
|
||
|
|
Udløber: 6. jan 2026
|
||
|
|
</swp-waitlist-date>
|
||
|
|
</swp-waitlist-dates>
|
||
|
|
</swp-waitlist-meta>
|
||
|
|
<swp-waitlist-actions>
|
||
|
|
<swp-btn class="secondary">
|
||
|
|
<i class="ph ph-phone"></i>
|
||
|
|
Kontakt
|
||
|
|
</swp-btn>
|
||
|
|
<swp-btn class="primary">
|
||
|
|
<i class="ph ph-calendar-plus"></i>
|
||
|
|
Book nu
|
||
|
|
</swp-btn>
|
||
|
|
</swp-waitlist-actions>
|
||
|
|
</swp-waitlist-item>
|
||
|
|
|
||
|
|
<!-- Entry 3 -->
|
||
|
|
<swp-waitlist-item>
|
||
|
|
<swp-waitlist-customer>
|
||
|
|
<swp-avatar>LA</swp-avatar>
|
||
|
|
<swp-waitlist-customer-info>
|
||
|
|
<swp-waitlist-name>Lise Andersen</swp-waitlist-name>
|
||
|
|
<swp-waitlist-phone>+45 34 56 78 90</swp-waitlist-phone>
|
||
|
|
</swp-waitlist-customer-info>
|
||
|
|
</swp-waitlist-customer>
|
||
|
|
<swp-waitlist-service>Balayage</swp-waitlist-service>
|
||
|
|
<swp-waitlist-meta>
|
||
|
|
<swp-waitlist-periods>
|
||
|
|
<swp-label>Ønsker:</swp-label>
|
||
|
|
<swp-waitlist-period-tag>Tirsdag-Torsdag</swp-waitlist-period-tag>
|
||
|
|
<swp-waitlist-period-tag>Eftermiddag</swp-waitlist-period-tag>
|
||
|
|
</swp-waitlist-periods>
|
||
|
|
<swp-waitlist-dates>
|
||
|
|
<swp-waitlist-date>
|
||
|
|
<i class="ph ph-calendar"></i>
|
||
|
|
Tilmeldt: 28. dec 2025
|
||
|
|
</swp-waitlist-date>
|
||
|
|
<swp-waitlist-date class="expires">
|
||
|
|
<i class="ph ph-clock"></i>
|
||
|
|
Udløber: 11. jan 2026
|
||
|
|
</swp-waitlist-date>
|
||
|
|
</swp-waitlist-dates>
|
||
|
|
</swp-waitlist-meta>
|
||
|
|
<swp-waitlist-actions>
|
||
|
|
<swp-btn class="secondary">
|
||
|
|
<i class="ph ph-phone"></i>
|
||
|
|
Kontakt
|
||
|
|
</swp-btn>
|
||
|
|
<swp-btn class="primary">
|
||
|
|
<i class="ph ph-calendar-plus"></i>
|
||
|
|
Book nu
|
||
|
|
</swp-btn>
|
||
|
|
</swp-waitlist-actions>
|
||
|
|
</swp-waitlist-item>
|
||
|
|
|
||
|
|
<!-- Entry 4 -->
|
||
|
|
<swp-waitlist-item>
|
||
|
|
<swp-waitlist-customer>
|
||
|
|
<swp-avatar>PH</swp-avatar>
|
||
|
|
<swp-waitlist-customer-info>
|
||
|
|
<swp-waitlist-name>Peter Hansen</swp-waitlist-name>
|
||
|
|
<swp-waitlist-phone>+45 45 67 89 01</swp-waitlist-phone>
|
||
|
|
</swp-waitlist-customer-info>
|
||
|
|
</swp-waitlist-customer>
|
||
|
|
<swp-waitlist-service>Herreklip + Skæg</swp-waitlist-service>
|
||
|
|
<swp-waitlist-meta>
|
||
|
|
<swp-waitlist-periods>
|
||
|
|
<swp-label>Ønsker:</swp-label>
|
||
|
|
<swp-waitlist-period-tag>Fleksibel</swp-waitlist-period-tag>
|
||
|
|
</swp-waitlist-periods>
|
||
|
|
<swp-waitlist-dates>
|
||
|
|
<swp-waitlist-date>
|
||
|
|
<i class="ph ph-calendar"></i>
|
||
|
|
Tilmeldt: 27. dec 2025
|
||
|
|
</swp-waitlist-date>
|
||
|
|
<swp-waitlist-date class="expires">
|
||
|
|
<i class="ph ph-clock"></i>
|
||
|
|
Udløber: 10. jan 2026
|
||
|
|
</swp-waitlist-date>
|
||
|
|
</swp-waitlist-dates>
|
||
|
|
</swp-waitlist-meta>
|
||
|
|
<swp-waitlist-actions>
|
||
|
|
<swp-btn class="secondary">
|
||
|
|
<i class="ph ph-phone"></i>
|
||
|
|
Kontakt
|
||
|
|
</swp-btn>
|
||
|
|
<swp-btn class="primary">
|
||
|
|
<i class="ph ph-calendar-plus"></i>
|
||
|
|
Book nu
|
||
|
|
</swp-btn>
|
||
|
|
</swp-waitlist-actions>
|
||
|
|
</swp-waitlist-item>
|
||
|
|
</swp-waitlist-list>
|
||
|
|
</swp-drawer-body>
|
||
|
|
</swp-waitlist-drawer>
|
||
|
|
|
||
|
|
<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('Åbn booking: ' + service);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Waitlist Drawer functionality
|
||
|
|
const waitlistCard = document.querySelector('swp-waitlist-card');
|
||
|
|
const waitlistDrawer = document.querySelector('swp-waitlist-drawer');
|
||
|
|
const drawerOverlay = document.querySelector('swp-drawer-overlay');
|
||
|
|
const drawerClose = document.querySelector('swp-drawer-close');
|
||
|
|
|
||
|
|
function openWaitlistDrawer() {
|
||
|
|
waitlistDrawer.classList.add('open');
|
||
|
|
drawerOverlay.classList.add('visible');
|
||
|
|
document.body.style.overflow = 'hidden';
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeWaitlistDrawer() {
|
||
|
|
waitlistDrawer.classList.remove('open');
|
||
|
|
drawerOverlay.classList.remove('visible');
|
||
|
|
document.body.style.overflow = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
waitlistCard.addEventListener('click', openWaitlistDrawer);
|
||
|
|
drawerClose.addEventListener('click', closeWaitlistDrawer);
|
||
|
|
drawerOverlay.addEventListener('click', closeWaitlistDrawer);
|
||
|
|
|
||
|
|
// Close on Escape key
|
||
|
|
document.addEventListener('keydown', (e) => {
|
||
|
|
if (e.key === 'Escape' && waitlistDrawer.classList.contains('open')) {
|
||
|
|
closeWaitlistDrawer();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Click handlers for waitlist actions
|
||
|
|
document.querySelectorAll('swp-waitlist-actions swp-btn').forEach(btn => {
|
||
|
|
btn.addEventListener('click', (e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
const isContact = btn.classList.contains('secondary');
|
||
|
|
const name = btn.closest('swp-waitlist-item').querySelector('swp-waitlist-name').textContent;
|
||
|
|
if (isContact) {
|
||
|
|
alert('Kontakt: ' + name);
|
||
|
|
} else {
|
||
|
|
alert('Book nu for: ' + name);
|
||
|
|
closeWaitlistDrawer();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|