fac7754d7a
Updates design system documentation with comprehensive component overview Enhances UI layout across multiple pages with consistent styling and new components Adds support for charts, pagination, and responsive design elements Improves overall system documentation and visual consistency
1203 lines
33 KiB
HTML
1203 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fordelskort - 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>
|
|
<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
|
|
========================================== */
|
|
: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 */
|
|
@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;
|
|
}
|
|
}
|
|
|
|
: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;
|
|
}
|
|
|
|
/* ==========================================
|
|
TOPBAR
|
|
========================================== */
|
|
swp-topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 24px;
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
swp-topbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
swp-page-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
swp-topbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* ==========================================
|
|
LAYOUT
|
|
========================================== */
|
|
swp-page-container {
|
|
display: block;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
/* ==========================================
|
|
BUTTONS
|
|
========================================== */
|
|
swp-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 18px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
font-family: var(--font-family);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
border: none;
|
|
}
|
|
|
|
swp-btn i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
swp-btn.primary {
|
|
background: var(--color-teal);
|
|
color: white;
|
|
}
|
|
|
|
swp-btn.primary:hover {
|
|
background: #00796b;
|
|
}
|
|
|
|
swp-btn.secondary {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-btn.secondary:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
/* ==========================================
|
|
STATS BAR
|
|
========================================== */
|
|
swp-stats-bar {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
swp-stat-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 16px 20px;
|
|
background: var(--color-surface);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-stat-card swp-stat-value {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-stat-card swp-stat-label {
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-stat-card.highlight swp-stat-value {
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
swp-stat-card.success swp-stat-value {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
swp-stat-card.warning swp-stat-value {
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
/* ==========================================
|
|
FILTER BAR
|
|
========================================== */
|
|
swp-filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px 20px;
|
|
background: var(--color-surface);
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
swp-search-input {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
background: var(--color-surface);
|
|
flex: 1;
|
|
max-width: 350px;
|
|
}
|
|
|
|
swp-search-input i {
|
|
color: var(--color-text-secondary);
|
|
font-size: 18px;
|
|
}
|
|
|
|
swp-search-input input {
|
|
border: none;
|
|
outline: none;
|
|
font-size: 13px;
|
|
font-family: var(--font-family);
|
|
width: 100%;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
swp-filter-label {
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-filter-bar select {
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-family: var(--font-family);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
swp-filter-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
/* ==========================================
|
|
TABLE
|
|
========================================== */
|
|
swp-table {
|
|
display: block;
|
|
background: var(--color-surface);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-table-header,
|
|
swp-table-row {
|
|
display: grid;
|
|
grid-template-columns: 180px minmax(150px, 1fr) 150px 150px 120px 100px 40px;
|
|
align-items: center;
|
|
}
|
|
|
|
swp-table-header {
|
|
background: var(--color-background-alt);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
swp-th {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-th.right {
|
|
text-align: right;
|
|
}
|
|
|
|
swp-th.center {
|
|
text-align: center;
|
|
}
|
|
|
|
swp-table-body {
|
|
display: block;
|
|
}
|
|
|
|
swp-table-row {
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
transition: background 150ms ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
swp-table-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
swp-table-row:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-td {
|
|
font-size: 14px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-td.right {
|
|
text-align: right;
|
|
}
|
|
|
|
swp-td.center {
|
|
text-align: center;
|
|
}
|
|
|
|
swp-td.mono {
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
}
|
|
|
|
swp-td.muted {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Gift card cell */
|
|
swp-giftcard-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
swp-giftcard-code {
|
|
font-family: var(--font-mono);
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-giftcard-date {
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Recipient cell */
|
|
swp-recipient-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
swp-recipient-name {
|
|
font-weight: 500;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-recipient-email {
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-recipient-none {
|
|
color: var(--color-text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Balance with progress */
|
|
swp-balance-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 0 30px;
|
|
}
|
|
|
|
swp-balance-amount {
|
|
font-family: var(--font-mono);
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
}
|
|
|
|
swp-balance-bar {
|
|
width: 100%;
|
|
height: 6px;
|
|
background: var(--color-border);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
swp-balance-bar-fill {
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--color-green);
|
|
border-radius: 3px 0 0 3px;
|
|
transition: width 300ms ease;
|
|
}
|
|
|
|
swp-balance-bar-fill[style*="100%"] {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
swp-balance-bar-fill.low {
|
|
background: var(--color-amber);
|
|
}
|
|
|
|
swp-balance-bar-fill.empty {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Status badge */
|
|
swp-status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 10px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
swp-status-badge.active {
|
|
background: color-mix(in srgb, var(--color-green) 15%, transparent);
|
|
color: var(--color-green);
|
|
}
|
|
|
|
swp-status-badge.partial {
|
|
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
swp-status-badge.depleted {
|
|
background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-status-badge.expired {
|
|
background: color-mix(in srgb, var(--color-red) 15%, transparent);
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* Row arrow */
|
|
swp-row-arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
swp-row-arrow i {
|
|
font-size: 18px;
|
|
color: var(--color-text-secondary);
|
|
transition: transform 150ms ease, color 150ms ease;
|
|
}
|
|
|
|
swp-table-row:hover swp-row-arrow i {
|
|
transform: translateX(4px);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
/* Table footer */
|
|
swp-table-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 20px;
|
|
background: var(--color-background-alt);
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ==========================================
|
|
DRAWER & OVERLAY
|
|
========================================== */
|
|
swp-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 200ms ease, visibility 0ms 200ms;
|
|
z-index: 500;
|
|
}
|
|
|
|
swp-overlay.open {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition-delay: 0ms;
|
|
}
|
|
|
|
swp-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 420px;
|
|
background: var(--color-surface);
|
|
border-left: 1px solid var(--color-border);
|
|
transform: translateX(100%);
|
|
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 600;
|
|
}
|
|
|
|
swp-drawer.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
swp-drawer-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-background-alt);
|
|
}
|
|
|
|
swp-drawer-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
swp-drawer-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
transition: background 150ms ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
swp-drawer-close:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-drawer-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
swp-drawer-footer {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
border-top: 1px solid var(--color-border);
|
|
background: var(--color-background-alt);
|
|
}
|
|
|
|
swp-drawer-footer swp-btn {
|
|
flex: 1;
|
|
}
|
|
|
|
/* ==========================================
|
|
FORM ELEMENTS
|
|
========================================== */
|
|
swp-form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
swp-form-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-form-field input,
|
|
swp-form-field textarea,
|
|
swp-form-field select {
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-family: var(--font-family);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
transition: border-color 150ms ease;
|
|
}
|
|
|
|
swp-form-field input:focus,
|
|
swp-form-field textarea:focus,
|
|
swp-form-field select:focus {
|
|
outline: none;
|
|
border-color: var(--color-teal);
|
|
}
|
|
|
|
swp-form-field input.mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
swp-form-field textarea {
|
|
resize: none;
|
|
min-height: 80px;
|
|
}
|
|
|
|
swp-form-hint {
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Input with button */
|
|
swp-input-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
swp-input-group input {
|
|
flex: 1;
|
|
}
|
|
|
|
swp-input-group button {
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
background: var(--color-background-alt);
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
swp-input-group button:hover {
|
|
background: var(--color-background-hover);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-input-group button i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Checkbox */
|
|
swp-checkbox-field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
swp-checkbox-field input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: var(--color-teal);
|
|
}
|
|
|
|
swp-checkbox-field span {
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Quick amount buttons */
|
|
swp-quick-amounts {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
swp-quick-amount {
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-family: var(--font-mono);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-quick-amount:hover {
|
|
background: var(--color-background-hover);
|
|
border-color: var(--color-teal);
|
|
}
|
|
|
|
swp-quick-amount.selected {
|
|
background: color-mix(in srgb, var(--color-teal) 10%, transparent);
|
|
border-color: var(--color-teal);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
/* Divider */
|
|
swp-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: var(--color-text-secondary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
swp-divider::before,
|
|
swp-divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
}
|
|
|
|
/* ==========================================
|
|
RESPONSIVE
|
|
========================================== */
|
|
@media (max-width: 1200px) {
|
|
swp-stats-bar {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
swp-table-header,
|
|
swp-table-row {
|
|
grid-template-columns: 1fr 100px 100px 40px;
|
|
}
|
|
|
|
swp-th:nth-child(2),
|
|
swp-td:nth-child(2),
|
|
swp-th:nth-child(3),
|
|
swp-td:nth-child(3),
|
|
swp-th:nth-child(6),
|
|
swp-td:nth-child(6) {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Topbar -->
|
|
<swp-topbar>
|
|
<swp-topbar-left>
|
|
<swp-page-title>Fordelskort</swp-page-title>
|
|
</swp-topbar-left>
|
|
<swp-topbar-right>
|
|
<swp-btn class="primary" id="openCreateDrawer">
|
|
<i class="ph ph-plus"></i>
|
|
Opret fordelskort
|
|
</swp-btn>
|
|
</swp-topbar-right>
|
|
</swp-topbar>
|
|
|
|
<swp-page-container>
|
|
<!-- Stats Bar -->
|
|
<swp-stats-bar>
|
|
<swp-stat-card class="highlight">
|
|
<swp-stat-value>47</swp-stat-value>
|
|
<swp-stat-label>Aktive fordelskort</swp-stat-label>
|
|
</swp-stat-card>
|
|
<swp-stat-card>
|
|
<swp-stat-value>23.500 DKK</swp-stat-value>
|
|
<swp-stat-label>Samlet saldo</swp-stat-label>
|
|
</swp-stat-card>
|
|
<swp-stat-card class="success">
|
|
<swp-stat-value>18.230 DKK</swp-stat-value>
|
|
<swp-stat-label>Indløst i år</swp-stat-label>
|
|
</swp-stat-card>
|
|
<swp-stat-card class="warning">
|
|
<swp-stat-value>5</swp-stat-value>
|
|
<swp-stat-label>Udløber inden 30 dage</swp-stat-label>
|
|
</swp-stat-card>
|
|
</swp-stats-bar>
|
|
|
|
<!-- Filter Bar -->
|
|
<swp-filter-bar>
|
|
<swp-search-input>
|
|
<i class="ph ph-magnifying-glass"></i>
|
|
<input type="search" id="searchInput" placeholder="Søg kode, kunde, email..." />
|
|
</swp-search-input>
|
|
<swp-filter-group>
|
|
<swp-filter-label>Status</swp-filter-label>
|
|
<select id="statusFilter">
|
|
<option value="">Alle</option>
|
|
<option value="active">Aktiv</option>
|
|
<option value="partial">Delvist brugt</option>
|
|
<option value="depleted">Opbrugt</option>
|
|
<option value="expired">Udløbet</option>
|
|
</select>
|
|
</swp-filter-group>
|
|
<swp-filter-group>
|
|
<swp-filter-label>Sortering</swp-filter-label>
|
|
<select id="sortFilter">
|
|
<option value="newest">Nyeste først</option>
|
|
<option value="oldest">Ældste først</option>
|
|
<option value="highest">Højeste saldo</option>
|
|
<option value="lowest">Laveste saldo</option>
|
|
</select>
|
|
</swp-filter-group>
|
|
</swp-filter-bar>
|
|
|
|
<!-- Table -->
|
|
<swp-table>
|
|
<swp-table-header>
|
|
<swp-th>Fordelskort</swp-th>
|
|
<swp-th>Modtager</swp-th>
|
|
<swp-th class="right">Original</swp-th>
|
|
<swp-th>Saldo</swp-th>
|
|
<swp-th>Status</swp-th>
|
|
<swp-th>Udløber</swp-th>
|
|
<swp-th></swp-th>
|
|
</swp-table-header>
|
|
<swp-table-body>
|
|
<swp-table-row onclick="location.href='poc-gavekort-detail.html'">
|
|
<swp-td>
|
|
<swp-giftcard-cell>
|
|
<swp-giftcard-code>FK-A7X2-9KM4</swp-giftcard-code>
|
|
<swp-giftcard-date>Oprettet 15. jan 2024</swp-giftcard-date>
|
|
</swp-giftcard-cell>
|
|
</swp-td>
|
|
<swp-td>
|
|
<swp-recipient-cell>
|
|
<swp-recipient-name>Maria Hansen</swp-recipient-name>
|
|
<swp-recipient-email>maria@example.com</swp-recipient-email>
|
|
</swp-recipient-cell>
|
|
</swp-td>
|
|
<swp-td class="right mono">500 DKK</swp-td>
|
|
<swp-td>
|
|
<swp-balance-cell>
|
|
<swp-balance-amount>350 DKK</swp-balance-amount>
|
|
<swp-balance-bar>
|
|
<swp-balance-bar-fill style="width: 70%"></swp-balance-bar-fill>
|
|
</swp-balance-bar>
|
|
</swp-balance-cell>
|
|
</swp-td>
|
|
<swp-td><swp-status-badge class="partial">Delvist brugt</swp-status-badge></swp-td>
|
|
<swp-td class="muted">31. dec 2025</swp-td>
|
|
<swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
|
|
</swp-table-row>
|
|
|
|
<swp-table-row>
|
|
<swp-td>
|
|
<swp-giftcard-cell>
|
|
<swp-giftcard-code>FK-B3K9-2LM7</swp-giftcard-code>
|
|
<swp-giftcard-date>Oprettet 20. dec 2024</swp-giftcard-date>
|
|
</swp-giftcard-cell>
|
|
</swp-td>
|
|
<swp-td>
|
|
<swp-recipient-cell>
|
|
<swp-recipient-none>Ikke tildelt</swp-recipient-none>
|
|
</swp-recipient-cell>
|
|
</swp-td>
|
|
<swp-td class="right mono">1.000 DKK</swp-td>
|
|
<swp-td>
|
|
<swp-balance-cell>
|
|
<swp-balance-amount>1.000 DKK</swp-balance-amount>
|
|
<swp-balance-bar>
|
|
<swp-balance-bar-fill style="width: 100%"></swp-balance-bar-fill>
|
|
</swp-balance-bar>
|
|
</swp-balance-cell>
|
|
</swp-td>
|
|
<swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
|
|
<swp-td class="muted">15. jun 2025</swp-td>
|
|
<swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
|
|
</swp-table-row>
|
|
|
|
<swp-table-row>
|
|
<swp-td>
|
|
<swp-giftcard-cell>
|
|
<swp-giftcard-code>FK-C5P1-8NQ3</swp-giftcard-code>
|
|
<swp-giftcard-date>Oprettet 10. nov 2024</swp-giftcard-date>
|
|
</swp-giftcard-cell>
|
|
</swp-td>
|
|
<swp-td>
|
|
<swp-recipient-cell>
|
|
<swp-recipient-name>Jonas Petersen</swp-recipient-name>
|
|
<swp-recipient-email>jonas.p@mail.dk</swp-recipient-email>
|
|
</swp-recipient-cell>
|
|
</swp-td>
|
|
<swp-td class="right mono">250 DKK</swp-td>
|
|
<swp-td>
|
|
<swp-balance-cell>
|
|
<swp-balance-amount>0 DKK</swp-balance-amount>
|
|
<swp-balance-bar>
|
|
<swp-balance-bar-fill class="empty" style="width: 0%"></swp-balance-bar-fill>
|
|
</swp-balance-bar>
|
|
</swp-balance-cell>
|
|
</swp-td>
|
|
<swp-td><swp-status-badge class="depleted">Opbrugt</swp-status-badge></swp-td>
|
|
<swp-td class="muted">1. mar 2025</swp-td>
|
|
<swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
|
|
</swp-table-row>
|
|
|
|
<swp-table-row>
|
|
<swp-td>
|
|
<swp-giftcard-cell>
|
|
<swp-giftcard-code>FK-D2R4-6TY9</swp-giftcard-code>
|
|
<swp-giftcard-date>Oprettet 5. sep 2024</swp-giftcard-date>
|
|
</swp-giftcard-cell>
|
|
</swp-td>
|
|
<swp-td>
|
|
<swp-recipient-cell>
|
|
<swp-recipient-name>Anne Nielsen</swp-recipient-name>
|
|
<swp-recipient-email>anne.nielsen@email.dk</swp-recipient-email>
|
|
</swp-recipient-cell>
|
|
</swp-td>
|
|
<swp-td class="right mono">750 DKK</swp-td>
|
|
<swp-td>
|
|
<swp-balance-cell>
|
|
<swp-balance-amount>200 DKK</swp-balance-amount>
|
|
<swp-balance-bar>
|
|
<swp-balance-bar-fill class="low" style="width: 27%"></swp-balance-bar-fill>
|
|
</swp-balance-bar>
|
|
</swp-balance-cell>
|
|
</swp-td>
|
|
<swp-td><swp-status-badge class="partial">Delvist brugt</swp-status-badge></swp-td>
|
|
<swp-td class="muted">20. jan 2025</swp-td>
|
|
<swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
|
|
</swp-table-row>
|
|
|
|
<swp-table-row>
|
|
<swp-td>
|
|
<swp-giftcard-cell>
|
|
<swp-giftcard-code>FK-E8W3-4VX1</swp-giftcard-code>
|
|
<swp-giftcard-date>Oprettet 1. jun 2024</swp-giftcard-date>
|
|
</swp-giftcard-cell>
|
|
</swp-td>
|
|
<swp-td>
|
|
<swp-recipient-cell>
|
|
<swp-recipient-none>Ikke tildelt</swp-recipient-none>
|
|
</swp-recipient-cell>
|
|
</swp-td>
|
|
<swp-td class="right mono">500 DKK</swp-td>
|
|
<swp-td>
|
|
<swp-balance-cell>
|
|
<swp-balance-amount>500 DKK</swp-balance-amount>
|
|
<swp-balance-bar>
|
|
<swp-balance-bar-fill style="width: 100%"></swp-balance-bar-fill>
|
|
</swp-balance-bar>
|
|
</swp-balance-cell>
|
|
</swp-td>
|
|
<swp-td><swp-status-badge class="expired">Udløbet</swp-status-badge></swp-td>
|
|
<swp-td class="muted">1. dec 2024</swp-td>
|
|
<swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
|
|
</swp-table-row>
|
|
|
|
<swp-table-row>
|
|
<swp-td>
|
|
<swp-giftcard-cell>
|
|
<swp-giftcard-code>FK-F9Q7-3WK5</swp-giftcard-code>
|
|
<swp-giftcard-date>Oprettet 28. dec 2024</swp-giftcard-date>
|
|
</swp-giftcard-cell>
|
|
</swp-td>
|
|
<swp-td>
|
|
<swp-recipient-cell>
|
|
<swp-recipient-name>Sofie Larsen</swp-recipient-name>
|
|
<swp-recipient-email>sofie.l@gmail.com</swp-recipient-email>
|
|
</swp-recipient-cell>
|
|
</swp-td>
|
|
<swp-td class="right mono">300 DKK</swp-td>
|
|
<swp-td>
|
|
<swp-balance-cell>
|
|
<swp-balance-amount>300 DKK</swp-balance-amount>
|
|
<swp-balance-bar>
|
|
<swp-balance-bar-fill style="width: 100%"></swp-balance-bar-fill>
|
|
</swp-balance-bar>
|
|
</swp-balance-cell>
|
|
</swp-td>
|
|
<swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
|
|
<swp-td class="muted">28. dec 2025</swp-td>
|
|
<swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
|
|
</swp-table-row>
|
|
</swp-table-body>
|
|
<swp-table-footer>
|
|
<span>Viser 6 af 47 fordelskort</span>
|
|
<span>Side 1 af 8</span>
|
|
</swp-table-footer>
|
|
</swp-table>
|
|
</swp-page-container>
|
|
|
|
<!-- Overlay -->
|
|
<swp-overlay id="overlay"></swp-overlay>
|
|
|
|
<!-- Create Gift Card Drawer -->
|
|
<swp-drawer id="createDrawer">
|
|
<swp-drawer-header>
|
|
<swp-drawer-title>Opret fordelskort</swp-drawer-title>
|
|
<swp-drawer-close id="closeDrawer">
|
|
<i class="ph ph-x"></i>
|
|
</swp-drawer-close>
|
|
</swp-drawer-header>
|
|
|
|
<swp-drawer-content>
|
|
<swp-form-field>
|
|
<swp-form-label>Kortkode</swp-form-label>
|
|
<swp-input-group>
|
|
<input type="text" id="giftcardCode" class="mono" value="FK-K8M2-5NP7" readonly />
|
|
<button type="button" id="generateCode">
|
|
<i class="ph ph-arrows-clockwise"></i>
|
|
Ny kode
|
|
</button>
|
|
</swp-input-group>
|
|
<swp-checkbox-field>
|
|
<input type="checkbox" id="customCode" />
|
|
<span>Lad mig vælge egen kode</span>
|
|
</swp-checkbox-field>
|
|
</swp-form-field>
|
|
|
|
<swp-form-field>
|
|
<swp-form-label>Værdi</swp-form-label>
|
|
<input type="text" id="giftcardValue" class="mono" placeholder="Indtast beløb" value="500 DKK" />
|
|
<swp-quick-amounts>
|
|
<swp-quick-amount data-value="100">100 DKK</swp-quick-amount>
|
|
<swp-quick-amount data-value="250">250 DKK</swp-quick-amount>
|
|
<swp-quick-amount data-value="500" class="selected">500 DKK</swp-quick-amount>
|
|
<swp-quick-amount data-value="1000">1.000 DKK</swp-quick-amount>
|
|
</swp-quick-amounts>
|
|
</swp-form-field>
|
|
|
|
<swp-form-field>
|
|
<swp-form-label>Udløbsdato</swp-form-label>
|
|
<input type="date" id="expiryDate" />
|
|
<swp-form-hint>Standard: 1 år fra oprettelse</swp-form-hint>
|
|
</swp-form-field>
|
|
|
|
<swp-divider>Modtager (valgfri)</swp-divider>
|
|
|
|
<swp-form-field>
|
|
<swp-form-label>Søg eksisterende kunde</swp-form-label>
|
|
<swp-input-group>
|
|
<input type="text" id="customerSearch" placeholder="Søg navn, email, telefon..." />
|
|
<button type="button">
|
|
<i class="ph ph-magnifying-glass"></i>
|
|
</button>
|
|
</swp-input-group>
|
|
</swp-form-field>
|
|
|
|
<swp-divider>eller indtast manuelt</swp-divider>
|
|
|
|
<swp-form-field>
|
|
<swp-form-label>Modtagers navn</swp-form-label>
|
|
<input type="text" id="recipientName" placeholder="Navn til gavekortet" />
|
|
</swp-form-field>
|
|
|
|
<swp-form-field>
|
|
<swp-form-label>Email</swp-form-label>
|
|
<input type="email" id="recipientEmail" placeholder="Til afsendelse af gavekort" />
|
|
</swp-form-field>
|
|
|
|
<swp-form-field>
|
|
<swp-form-label>Intern note</swp-form-label>
|
|
<textarea id="internalNote" placeholder="Intern note (vises ikke for kunden)"></textarea>
|
|
</swp-form-field>
|
|
</swp-drawer-content>
|
|
|
|
<swp-drawer-footer>
|
|
<swp-btn class="secondary" id="cancelCreate">Annuller</swp-btn>
|
|
<swp-btn class="primary" id="saveGiftcard">Opret fordelskort</swp-btn>
|
|
</swp-drawer-footer>
|
|
</swp-drawer>
|
|
|
|
<script>
|
|
// Elements
|
|
const overlay = document.getElementById('overlay');
|
|
const createDrawer = document.getElementById('createDrawer');
|
|
const openCreateBtn = document.getElementById('openCreateDrawer');
|
|
const closeDrawerBtn = document.getElementById('closeDrawer');
|
|
const cancelCreateBtn = document.getElementById('cancelCreate');
|
|
const generateCodeBtn = document.getElementById('generateCode');
|
|
const codeInput = document.getElementById('giftcardCode');
|
|
const customCodeCheckbox = document.getElementById('customCode');
|
|
const quickAmounts = document.querySelectorAll('swp-quick-amount');
|
|
const valueInput = document.getElementById('giftcardValue');
|
|
const expiryInput = document.getElementById('expiryDate');
|
|
|
|
// Set default expiry date (1 year from now)
|
|
const defaultExpiry = new Date();
|
|
defaultExpiry.setFullYear(defaultExpiry.getFullYear() + 1);
|
|
expiryInput.value = defaultExpiry.toISOString().split('T')[0];
|
|
|
|
// Open drawer
|
|
function openDrawer() {
|
|
overlay.classList.add('open');
|
|
createDrawer.classList.add('open');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
// Close drawer
|
|
function closeDrawer() {
|
|
overlay.classList.remove('open');
|
|
createDrawer.classList.remove('open');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Generate random code
|
|
function generateCode() {
|
|
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
|
|
let code = 'FK-';
|
|
for (let i = 0; i < 4; i++) {
|
|
code += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
}
|
|
code += '-';
|
|
for (let i = 0; i < 4; i++) {
|
|
code += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
}
|
|
return code;
|
|
}
|
|
|
|
// Event listeners
|
|
openCreateBtn.addEventListener('click', openDrawer);
|
|
closeDrawerBtn.addEventListener('click', closeDrawer);
|
|
cancelCreateBtn.addEventListener('click', closeDrawer);
|
|
overlay.addEventListener('click', closeDrawer);
|
|
|
|
generateCodeBtn.addEventListener('click', () => {
|
|
codeInput.value = generateCode();
|
|
});
|
|
|
|
customCodeCheckbox.addEventListener('change', (e) => {
|
|
codeInput.readOnly = !e.target.checked;
|
|
if (!e.target.checked) {
|
|
codeInput.value = generateCode();
|
|
}
|
|
});
|
|
|
|
// Quick amount selection
|
|
quickAmounts.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
quickAmounts.forEach(b => b.classList.remove('selected'));
|
|
btn.classList.add('selected');
|
|
const value = btn.dataset.value;
|
|
valueInput.value = Number(value).toLocaleString('da-DK') + ' DKK';
|
|
});
|
|
});
|
|
|
|
// Close on Escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') closeDrawer();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|