2025-12-30 00:36:01 +01:00
<!DOCTYPE html>
< html lang = "da" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Leverandør - Beauty Group Denmark< / title >
< link href = "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel = "stylesheet" >
< 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 (Design System)
========================================== */
: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 - følger system preference ELLER manuel toggle */
@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;
}
}
/* Manuel dark mode override */
: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;
}
a {
color: var(--color-teal);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ==========================================
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-back-link {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-text-secondary);
text-decoration: none;
font-size: 13px;
cursor: pointer;
transition: color 150ms ease;
}
swp-back-link:hover {
color: var(--color-teal);
}
swp-back-link svg {
width: 16px;
height: 16px;
fill: currentColor;
}
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: 1200px;
margin: 0 auto;
padding: 24px;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 900px) {
.grid-2 { grid-template-columns: 1fr; }
}
/* ==========================================
CARDS
========================================== */
swp-card {
display: block;
background: var(--color-surface);
border-radius: 8px;
border: 1px solid var(--color-border);
margin-bottom: 20px;
overflow: hidden;
}
swp-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--color-border);
}
swp-card-title {
font-size: 14px;
font-weight: 600;
color: var(--color-text);
}
swp-card-hint {
font-size: 12px;
color: var(--color-text-secondary);
}
swp-card-body {
display: block;
padding: 20px;
}
/* ==========================================
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 svg {
width: 16px;
height: 16px;
fill: currentColor;
}
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);
}
swp-btn.danger {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-red);
}
swp-btn.danger:hover {
background: color-mix(in srgb, var(--color-red) 10%, white);
}
swp-btn.small {
padding: 6px 12px;
font-size: 12px;
}
swp-btn.icon-only {
padding: 10px;
}
swp-btn.icon-only svg {
width: 18px;
height: 18px;
}
/* ==========================================
FORM ELEMENTS
========================================== */
swp-form-grid {
display: grid;
gap: 16px;
}
swp-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
swp-form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
swp-form-field.full {
grid-column: 1 / -1;
}
swp-form-label {
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary);
}
swp-form-field input,
swp-form-field select,
swp-form-field textarea {
padding: 10px 12px;
font-size: 14px;
font-family: var(--font-family);
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-surface);
color: var(--color-text);
}
swp-form-field input:focus,
swp-form-field select:focus,
swp-form-field textarea:focus {
outline: none;
border-color: var(--color-teal);
}
swp-form-field textarea {
min-height: 100px;
resize: vertical;
}
swp-form-field input.mono {
font-family: var(--font-mono);
}
/* ==========================================
TOGGLE SLIDER (Ja/Nej)
========================================== */
swp-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
swp-toggle-label {
font-size: 14px;
font-weight: 500;
}
swp-toggle-slider {
display: inline-flex;
width: fit-content;
background: var(--color-background);
border-radius: 6px;
border: 1px solid var(--color-border);
position: relative;
cursor: pointer;
}
swp-toggle-slider::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(50% - 4px);
height: calc(100% - 4px);
background: color-mix(in srgb, var(--color-green) 18%, white);
border-radius: 4px;
transition: transform 200ms ease, background 200ms ease;
}
swp-toggle-slider[data-value="no"]::before {
transform: translateX(100%);
background: color-mix(in srgb, var(--color-red) 18%, white);
}
swp-toggle-option {
position: relative;
z-index: 1;
padding: 5px 16px;
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary);
transition: color 200ms ease;
user-select: none;
}
swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
color: var(--color-green);
font-weight: 600;
}
swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
color: var(--color-red);
font-weight: 600;
}
/* ==========================================
CONTACTS TABLE
========================================== */
swp-contacts-table {
display: block;
width: 100%;
}
swp-contacts-header,
swp-contacts-row {
display: grid;
grid-template-columns: 1fr 100px 1fr 100px 60px;
align-items: center;
gap: 12px;
}
swp-contacts-header {
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
swp-contacts-header span {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
swp-contacts-row {
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
swp-contacts-row:last-child {
border-bottom: none;
}
swp-contacts-row span {
font-size: 14px;
}
swp-contacts-row span.muted {
color: var(--color-text-secondary);
font-size: 13px;
}
swp-contacts-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
swp-contacts-actions button {
width: 28px;
height: 28px;
border: none;
background: var(--color-background);
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 150ms ease;
}
swp-contacts-actions button:hover {
background: var(--color-border);
}
swp-contacts-actions button svg {
width: 14px;
height: 14px;
fill: var(--color-text-secondary);
}
swp-add-contact {
display: flex;
justify-content: center;
padding-top: 16px;
}
/* ==========================================
STATS ROW
========================================== */
swp-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 20px;
}
swp-stat-box {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
background: var(--color-background-alt);
border-radius: 6px;
}
swp-stat-box swp-stat-value {
font-size: 22px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--color-text);
}
swp-stat-box swp-stat-label {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
swp-stat-box.highlight swp-stat-value {
color: var(--color-teal);
}
/* ==========================================
PRODUCT LIST
========================================== */
swp-product-list {
display: flex;
flex-direction: column;
gap: 8px;
}
swp-product-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: var(--color-background-alt);
border-radius: 6px;
cursor: pointer;
transition: background 150ms ease;
}
swp-product-item:hover {
background: var(--color-background-hover);
}
swp-product-name {
font-size: 14px;
color: var(--color-text);
}
swp-product-price {
font-size: 13px;
font-family: var(--font-mono);
color: var(--color-text-secondary);
}
/* ==========================================
ORDER TABLE
========================================== */
swp-order-table {
display: block;
width: 100%;
}
swp-order-header,
swp-order-row {
display: grid;
grid-template-columns: 2fr 2fr 1fr 1fr 110px 30px;
align-items: center;
gap: 12px;
}
swp-order-header {
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
swp-order-header span {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
swp-order-header span.right {
text-align: right;
}
swp-order-row {
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
transition: background 150ms ease;
}
swp-order-row:last-child {
border-bottom: none;
}
swp-order-row:hover {
background: var(--color-background-hover);
}
swp-order-row span {
font-size: 13px;
}
swp-order-row span.mono {
font-family: var(--font-mono);
}
swp-order-row span.right {
text-align: right;
}
/* ==========================================
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.delivered {
background: color-mix(in srgb, var(--color-green) 15%, white);
color: var(--color-green);
}
swp-status-badge.pending {
background: color-mix(in srgb, var(--color-amber) 15%, white);
color: #b45309;
}
swp-status-badge.cancelled {
background: color-mix(in srgb, var(--color-red) 15%, white);
color: var(--color-red);
}
/* ==========================================
ROW ARROW
========================================== */
swp-row-arrow {
display: flex;
align-items: center;
justify-content: flex-end;
}
swp-row-arrow svg {
width: 18px;
height: 18px;
fill: var(--color-text-secondary);
transition: transform 150ms ease;
}
swp-order-row:hover swp-row-arrow svg {
transform: translateX(4px);
fill: var(--color-teal);
}
/* ==========================================
SECTION TITLE
========================================== */
swp-section-title {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
margin-bottom: 12px;
display: block;
}
/* ==========================================
DETAIL DRAWER (samme mønster som poc-detail-drawer.html)
========================================== */
swp-detail-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease, visibility 200ms ease;
z-index: 900;
}
swp-detail-drawer-overlay.open {
opacity: 1;
visibility: visible;
}
swp-detail-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 380px;
background: var(--color-surface);
border-left: 1px solid var(--color-border);
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
transform: translateX(100%);
transition: transform 200ms ease;
display: flex;
flex-direction: column;
z-index: 1000;
}
swp-detail-drawer.open {
transform: translateX(0);
}
swp-detail-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--color-border);
background: var(--color-background-alt);
}
swp-detail-drawer-title {
font-size: 14px;
font-weight: 600;
color: var(--color-text);
}
swp-detail-drawer-close {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
transition: background 150ms ease;
}
swp-detail-drawer-close:hover {
background: var(--color-border);
}
swp-detail-drawer-close svg {
width: 16px;
height: 16px;
fill: var(--color-text-secondary);
}
swp-detail-drawer-content {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
swp-detail-drawer-section {
display: block;
}
swp-detail-drawer-section-title {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
margin-bottom: 10px;
display: block;
}
swp-detail-drawer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
swp-detail-drawer-item {
display: flex;
flex-direction: column;
gap: 2px;
}
swp-detail-drawer-item.full {
grid-column: 1 / -1;
}
swp-detail-drawer-label {
font-size: 11px;
color: var(--color-text-secondary);
}
swp-detail-drawer-value {
font-size: 14px;
color: var(--color-text);
}
swp-detail-drawer-value.mono {
font-family: var(--font-mono);
}
swp-detail-drawer-value.large {
font-size: 20px;
font-weight: 600;
font-family: var(--font-mono);
}
swp-detail-drawer-value.green {
color: var(--color-green);
}
swp-detail-drawer-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
swp-detail-drawer-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px;
background: var(--color-background-alt);
border-radius: 6px;
text-align: center;
}
swp-detail-drawer-stat-value {
font-size: 16px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--color-text);
}
swp-detail-drawer-stat-label {
font-size: 10px;
color: var(--color-text-secondary);
}
swp-detail-drawer-footer {
display: flex;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid var(--color-border);
background: var(--color-surface);
}
swp-detail-drawer-footer swp-btn {
flex: 1;
}
< / style >
< / head >
< body >
<!-- Topbar -->
< swp-topbar >
< swp-topbar-left >
< swp-back-link onclick = "location.href='poc-leverandoerer.html'" >
< svg viewBox = "0 0 24 24" > < path d = "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" / > < / svg >
Leverandører
< / swp-back-link >
< swp-page-title > Beauty Group Denmark< / swp-page-title >
< / swp-topbar-left >
< swp-topbar-right >
< swp-btn class = "secondary icon-only" id = "themeToggle" title = "Skift tema" >
< svg id = "sunIcon" viewBox = "0 0 24 24" > < path d = "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z" / > < / svg >
< svg id = "moonIcon" viewBox = "0 0 24 24" style = "display:none" > < path d = "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" / > < / svg >
< / swp-btn >
< swp-btn class = "danger" >
< svg viewBox = "0 0 24 24" > < path d = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" / > < / svg >
Slet
< / swp-btn >
< swp-btn class = "primary" >
< svg viewBox = "0 0 24 24" > < path d = "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" / > < / svg >
Gem ændringer
< / swp-btn >
< / swp-topbar-right >
< / swp-topbar >
< swp-page-container >
< div class = "grid-2" >
<!-- VENSTRE KOLONNE -->
< div >
<!-- Virksomhedsoplysninger -->
< swp-card >
< swp-card-header >
< swp-card-title > Virksomhedsoplysninger< / swp-card-title >
< / swp-card-header >
< swp-card-body >
< swp-form-grid >
< swp-form-field class = "full" >
< swp-form-label > Firmanavn< / swp-form-label >
< input type = "text" value = "Beauty Group Denmark" / >
< / swp-form-field >
< swp-form-field class = "full" >
< swp-form-label > CVR-nummer< / swp-form-label >
< input type = "text" class = "mono" value = "12345678" / >
< / swp-form-field >
< swp-form-field class = "full" >
< swp-form-label > Adresse< / swp-form-label >
< input type = "text" value = "Industriparken 42" / >
< / swp-form-field >
< swp-form-row >
< swp-form-field >
< swp-form-label > Postnr< / swp-form-label >
< input type = "text" value = "2750" / >
< / swp-form-field >
< swp-form-field >
< swp-form-label > By< / swp-form-label >
< input type = "text" value = "Ballerup" / >
< / swp-form-field >
< / swp-form-row >
< swp-form-row >
< swp-form-field >
< swp-form-label > Email< / swp-form-label >
< input type = "email" value = "ordre@beautygroup.dk" / >
< / swp-form-field >
< swp-form-field >
< swp-form-label > Telefon< / swp-form-label >
< input type = "tel" value = "70 20 30 40" / >
< / swp-form-field >
< / swp-form-row >
< swp-form-field class = "full" >
< swp-form-label > Website< / swp-form-label >
< input type = "url" value = "www.beautygroup.dk" / >
< / swp-form-field >
< swp-toggle-row >
< swp-toggle-label > Leverandør aktiv< / swp-toggle-label >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Ja< / swp-toggle-option >
< swp-toggle-option > Nej< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-toggle-row >
< / swp-form-grid >
< / swp-card-body >
< / swp-card >
<!-- Kontaktpersoner -->
< swp-card >
< swp-card-header >
< swp-card-title > Kontaktpersoner< / swp-card-title >
< / swp-card-header >
< swp-card-body >
< swp-contacts-table >
< swp-contacts-header >
< span > Navn< / span >
< span > Rolle< / span >
< span > Email< / span >
< span > Telefon< / span >
< span > < / span >
< / swp-contacts-header >
< swp-contacts-row >
< span > Lars Hansen< / span >
< span class = "muted" > Salgschef< / span >
< span class = "muted" > lars@beautygroup.dk< / span >
< span class = "muted" > 20 30 40 50< / span >
< swp-contacts-actions >
< button title = "Rediger" > < svg viewBox = "0 0 24 24" > < path d = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" / > < / svg > < / button >
< button title = "Slet" > < svg viewBox = "0 0 24 24" > < path d = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" / > < / svg > < / button >
< / swp-contacts-actions >
< / swp-contacts-row >
< swp-contacts-row >
< span > Mette Sørensen< / span >
< span class = "muted" > Kundeservice< / span >
< span class = "muted" > mette@beautygroup.dk< / span >
< span class = "muted" > 20 30 40 51< / span >
< swp-contacts-actions >
< button title = "Rediger" > < svg viewBox = "0 0 24 24" > < path d = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" / > < / svg > < / button >
< button title = "Slet" > < svg viewBox = "0 0 24 24" > < path d = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" / > < / svg > < / button >
< / swp-contacts-actions >
< / swp-contacts-row >
< / swp-contacts-table >
< swp-add-contact >
< swp-btn class = "secondary small" > + Tilføj kontaktperson< / swp-btn >
< / swp-add-contact >
< / swp-card-body >
< / swp-card >
<!-- Betalingsbetingelser -->
< swp-card >
< swp-card-header >
< swp-card-title > Betalingsbetingelser< / swp-card-title >
< / swp-card-header >
< swp-card-body >
< swp-form-grid >
< swp-form-field >
< swp-form-label > Betalingsfrist< / swp-form-label >
< select >
< option > Netto 8 dage< / option >
< option > Netto 14 dage< / option >
< option selected > Netto 30 dage< / option >
< / select >
< / swp-form-field >
2025-12-30 17:39:15 +01:00
< swp-form-field >
< swp-form-label > Kredit limit< / swp-form-label >
< input type = "text" class = "mono" value = "50.000 DKK" placeholder = "f.eks. 50.000 DKK eller 5.000 EUR" / >
< / swp-form-field >
2025-12-30 00:36:01 +01:00
< / swp-form-grid >
< / swp-card-body >
< / swp-card >
< / div >
<!-- HØJRE KOLONNE -->
< div >
<!-- Nøgletal -->
< swp-card >
< swp-card-header >
< swp-card-title > Nøgletal< / swp-card-title >
< swp-card-hint > 2024< / swp-card-hint >
< / swp-card-header >
< swp-card-body >
< swp-stats-row >
< swp-stat-box class = "highlight" >
< swp-stat-value > 24< / swp-stat-value >
< swp-stat-label > Produkter< / swp-stat-label >
< / swp-stat-box >
< swp-stat-box >
2025-12-30 17:39:15 +01:00
< swp-stat-value > 145.230 DKK< / swp-stat-value >
2025-12-30 00:36:01 +01:00
< swp-stat-label > Indkøb i år< / swp-stat-label >
< / swp-stat-box >
< swp-stat-box >
< swp-stat-value > 12< / swp-stat-value >
< swp-stat-label > Ordrer i år< / swp-stat-label >
< / swp-stat-box >
< / swp-stats-row >
< / swp-card-body >
< / swp-card >
<!-- Indkøbshistorik -->
< swp-card >
< swp-card-header >
< swp-card-title > Indkøbshistorik< / swp-card-title >
< swp-card-hint > Sidste 6 måneder< / swp-card-hint >
< / swp-card-header >
< swp-card-body >
< div id = "purchaseChart" > < / div >
< / swp-card-body >
< / swp-card >
<!-- Produkter fra leverandør -->
< swp-card >
< swp-card-header >
< swp-card-title > Produkter fra leverandør< / swp-card-title >
< swp-card-hint > 24 produkter< / swp-card-hint >
< / swp-card-header >
< swp-card-body >
< swp-product-list >
< swp-product-item onclick = "openDrawer('Redken Acidic Bonding Concentrate Serum 100ml', 'RDK-ABC-100', '884486532879', 'Hårpleje', '195,00', '379,00', 10, 32, '12.128')" >
< swp-product-name > Redken Acidic Bonding Concentrate Serum 100ml< / swp-product-name >
2025-12-30 17:39:15 +01:00
< swp-product-price > 195 DKK< / swp-product-price >
2025-12-30 00:36:01 +01:00
< / swp-product-item >
< swp-product-item onclick = "openDrawer('Redken All Soft Shampoo 300ml', 'RDK-ALS-300', '884486456123', 'Hårpleje', '145,00', '249,00', 4, 18, '4.482')" >
< swp-product-name > Redken All Soft Shampoo 300ml< / swp-product-name >
2025-12-30 17:39:15 +01:00
< swp-product-price > 145 DKK< / swp-product-price >
2025-12-30 00:36:01 +01:00
< / swp-product-item >
< swp-product-item onclick = "openDrawer('Redken Extreme Shampoo 300ml', 'RDK-EXT-300', '884486789012', 'Hårpleje', '145,00', '249,00', 8, 24, '5.976')" >
< swp-product-name > Redken Extreme Shampoo 300ml< / swp-product-name >
2025-12-30 17:39:15 +01:00
< swp-product-price > 145 DKK< / swp-product-price >
2025-12-30 00:36:01 +01:00
< / swp-product-item >
< swp-product-item onclick = "openDrawer('Redken Color Extend Magnetics Shampoo 300ml', 'RDK-CEM-300', '884486345678', 'Hårpleje', '155,00', '269,00', 6, 15, '4.035')" >
< swp-product-name > Redken Color Extend Magnetics Shampoo 300ml< / swp-product-name >
2025-12-30 17:39:15 +01:00
< swp-product-price > 155 DKK< / swp-product-price >
2025-12-30 00:36:01 +01:00
< / swp-product-item >
< swp-product-item onclick = "openDrawer('Redken One United 150ml', 'RDK-ONU-150', '884486901234', 'Styling', '175,00', '299,00', 12, 28, '8.372')" >
< swp-product-name > Redken One United 150ml< / swp-product-name >
2025-12-30 17:39:15 +01:00
< swp-product-price > 175 DKK< / swp-product-price >
2025-12-30 00:36:01 +01:00
< / swp-product-item >
< / swp-product-list >
< / swp-card-body >
< / swp-card >
<!-- Noter -->
< swp-card >
< swp-card-header >
< swp-card-title > Noter< / swp-card-title >
< / swp-card-header >
< swp-card-body >
< swp-form-field class = "full" >
< textarea placeholder = "Interne noter om leverandøren..." > God leverandør med hurtig levering. Kontakt Lars for store ordrer - kan ofte give rabat ved køb over 10.000 kr.< / textarea >
< / swp-form-field >
< / swp-card-body >
< / swp-card >
< / div >
< / div >
<!-- Ordrehistorik (full width) -->
< swp-card >
< swp-card-header >
< swp-card-title > Ordrehistorik< / swp-card-title >
< swp-card-hint > Seneste ordrer< / swp-card-hint >
< / swp-card-header >
< swp-card-body >
< swp-order-table >
< swp-order-header >
< span > Dato< / span >
< span > Ordrenr< / span >
< span class = "right" > Antal varer< / span >
< span class = "right" > Beløb< / span >
< span > Status< / span >
< span > < / span >
< / swp-order-header >
< swp-order-row >
< span > 15. december 2024< / span >
< span class = "mono" > BGD-2024-0847< / span >
< span class = "right" > 12< / span >
2025-12-30 17:39:15 +01:00
< span class = "right mono" > 18.450 DKK< / span >
2025-12-30 00:36:01 +01:00
< swp-status-badge class = "delivered" > Leveret< / swp-status-badge >
< swp-row-arrow > < svg viewBox = "0 0 24 24" > < path d = "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" / > < / svg > < / swp-row-arrow >
< / swp-order-row >
< swp-order-row >
< span > 28. november 2024< / span >
< span class = "mono" > BGD-2024-0812< / span >
< span class = "right" > 8< / span >
2025-12-30 17:39:15 +01:00
< span class = "right mono" > 12.340 DKK< / span >
2025-12-30 00:36:01 +01:00
< swp-status-badge class = "delivered" > Leveret< / swp-status-badge >
< swp-row-arrow > < svg viewBox = "0 0 24 24" > < path d = "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" / > < / svg > < / swp-row-arrow >
< / swp-order-row >
< swp-order-row >
< span > 10. november 2024< / span >
< span class = "mono" > BGD-2024-0798< / span >
< span class = "right" > 15< / span >
2025-12-30 17:39:15 +01:00
< span class = "right mono" > 24.680 DKK< / span >
2025-12-30 00:36:01 +01:00
< swp-status-badge class = "delivered" > Leveret< / swp-status-badge >
< swp-row-arrow > < svg viewBox = "0 0 24 24" > < path d = "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" / > < / svg > < / swp-row-arrow >
< / swp-order-row >
< swp-order-row >
< span > 22. oktober 2024< / span >
< span class = "mono" > BGD-2024-0756< / span >
< span class = "right" > 6< / span >
2025-12-30 17:39:15 +01:00
< span class = "right mono" > 8.920 DKK< / span >
2025-12-30 00:36:01 +01:00
< swp-status-badge class = "cancelled" > Annulleret< / swp-status-badge >
< swp-row-arrow > < svg viewBox = "0 0 24 24" > < path d = "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" / > < / svg > < / swp-row-arrow >
< / swp-order-row >
< swp-order-row >
< span > 5. oktober 2024< / span >
< span class = "mono" > BGD-2024-0734< / span >
< span class = "right" > 20< / span >
2025-12-30 17:39:15 +01:00
< span class = "right mono" > 32.150 DKK< / span >
2025-12-30 00:36:01 +01:00
< swp-status-badge class = "delivered" > Leveret< / swp-status-badge >
< swp-row-arrow > < svg viewBox = "0 0 24 24" > < path d = "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" / > < / svg > < / swp-row-arrow >
< / swp-order-row >
< / swp-order-table >
< / swp-card-body >
< / swp-card >
< / swp-page-container >
<!-- Product Detail Drawer -->
< swp-detail-drawer-overlay id = "drawerOverlay" onclick = "closeDrawer()" > < / swp-detail-drawer-overlay >
< swp-detail-drawer id = "productDrawer" >
< swp-detail-drawer-header >
< swp-detail-drawer-title id = "drawerTitle" > Produktnavn< / swp-detail-drawer-title >
< swp-detail-drawer-close onclick = "closeDrawer()" >
< svg viewBox = "0 0 24 24" > < path d = "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" / > < / svg >
< / swp-detail-drawer-close >
< / swp-detail-drawer-header >
< swp-detail-drawer-content >
< swp-detail-drawer-section >
< swp-detail-drawer-section-title > Basisoplysninger< / swp-detail-drawer-section-title >
< swp-detail-drawer-grid >
< swp-detail-drawer-item >
< swp-detail-drawer-label > Varenummer< / swp-detail-drawer-label >
< swp-detail-drawer-value class = "mono" id = "drawerSku" > RDK-ABC-100< / swp-detail-drawer-value >
< / swp-detail-drawer-item >
< swp-detail-drawer-item >
< swp-detail-drawer-label > EAN< / swp-detail-drawer-label >
< swp-detail-drawer-value class = "mono" id = "drawerEan" > 884486532879< / swp-detail-drawer-value >
< / swp-detail-drawer-item >
< swp-detail-drawer-item class = "full" >
< swp-detail-drawer-label > Kategori< / swp-detail-drawer-label >
< swp-detail-drawer-value id = "drawerCategory" > Hårpleje< / swp-detail-drawer-value >
< / swp-detail-drawer-item >
< / swp-detail-drawer-grid >
< / swp-detail-drawer-section >
< swp-detail-drawer-section >
< swp-detail-drawer-section-title > Pris & Avance< / swp-detail-drawer-section-title >
< swp-detail-drawer-grid >
< swp-detail-drawer-item >
< swp-detail-drawer-label > Indkøbspris (ekskl. moms)< / swp-detail-drawer-label >
2025-12-30 17:39:15 +01:00
< swp-detail-drawer-value class = "mono" id = "drawerPurchasePrice" > 195,00 DKK< / swp-detail-drawer-value >
2025-12-30 00:36:01 +01:00
< / swp-detail-drawer-item >
< swp-detail-drawer-item >
< swp-detail-drawer-label > Salgspris (inkl. moms)< / swp-detail-drawer-label >
2025-12-30 17:39:15 +01:00
< swp-detail-drawer-value class = "mono" id = "drawerSalePrice" > 379,00 DKK< / swp-detail-drawer-value >
2025-12-30 00:36:01 +01:00
< / swp-detail-drawer-item >
< swp-detail-drawer-item >
< swp-detail-drawer-label > Avance< / swp-detail-drawer-label >
2025-12-30 17:39:15 +01:00
< swp-detail-drawer-value class = "large green" id = "drawerMargin" > 108,20 DKK< / swp-detail-drawer-value >
2025-12-30 00:36:01 +01:00
< / swp-detail-drawer-item >
< swp-detail-drawer-item >
< swp-detail-drawer-label > Avance %< / swp-detail-drawer-label >
< swp-detail-drawer-value class = "large green" id = "drawerMarginPct" > 35,7%< / swp-detail-drawer-value >
< / swp-detail-drawer-item >
< / swp-detail-drawer-grid >
< / swp-detail-drawer-section >
< swp-detail-drawer-section >
< swp-detail-drawer-section-title > Statistik (6 mdr)< / swp-detail-drawer-section-title >
< swp-detail-drawer-stats >
< swp-detail-drawer-stat >
< swp-detail-drawer-stat-value id = "drawerStock" > 10< / swp-detail-drawer-stat-value >
< swp-detail-drawer-stat-label > På lager< / swp-detail-drawer-stat-label >
< / swp-detail-drawer-stat >
< swp-detail-drawer-stat >
< swp-detail-drawer-stat-value id = "drawerSold" > 32< / swp-detail-drawer-stat-value >
< swp-detail-drawer-stat-label > Solgt< / swp-detail-drawer-stat-label >
< / swp-detail-drawer-stat >
< swp-detail-drawer-stat >
2025-12-30 17:39:15 +01:00
< swp-detail-drawer-stat-value id = "drawerRevenue" > 12.128 DKK< / swp-detail-drawer-stat-value >
2025-12-30 00:36:01 +01:00
< swp-detail-drawer-stat-label > Omsætning< / swp-detail-drawer-stat-label >
< / swp-detail-drawer-stat >
< / swp-detail-drawer-stats >
< / swp-detail-drawer-section >
< / swp-detail-drawer-content >
< swp-detail-drawer-footer >
< swp-btn class = "secondary" onclick = "location.href='poc-produkt.html'" >
< svg viewBox = "0 0 24 24" > < path d = "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" / > < / svg >
Åbn produkt
< / swp-btn >
< / swp-detail-drawer-footer >
< / swp-detail-drawer >
< script type = "module" >
import { createChart } from '../node_modules/@sevenweirdpeople/swp-charting/dist/swp-charting.js';
// Toggle slider (Ja/Nej)
document.querySelectorAll('swp-toggle-slider').forEach(slider => {
const options = slider.querySelectorAll('swp-toggle-option');
options.forEach((option, index) => {
option.addEventListener('click', () => {
slider.dataset.value = index === 0 ? 'yes' : 'no';
});
});
});
// Product Drawer functions
window.openDrawer = function(name, sku, ean, category, purchasePrice, salePrice, stock, sold, revenue) {
// Calculate margin
const purchase = parseFloat(purchasePrice.replace(',', '.'));
const sale = parseFloat(salePrice.replace(',', '.'));
const saleExMoms = sale / 1.25;
const margin = saleExMoms - purchase;
const marginPct = (margin / saleExMoms) * 100;
// Update drawer content
document.getElementById('drawerTitle').textContent = name;
document.getElementById('drawerSku').textContent = sku;
document.getElementById('drawerEan').textContent = ean;
document.getElementById('drawerCategory').textContent = category;
2025-12-30 17:39:15 +01:00
document.getElementById('drawerPurchasePrice').textContent = purchasePrice + ' DKK';
document.getElementById('drawerSalePrice').textContent = salePrice + ' DKK';
document.getElementById('drawerMargin').textContent = margin.toFixed(2).replace('.', ',') + ' DKK';
2025-12-30 00:36:01 +01:00
document.getElementById('drawerMarginPct').textContent = marginPct.toFixed(1).replace('.', ',') + '%';
document.getElementById('drawerStock').textContent = stock;
document.getElementById('drawerSold').textContent = sold;
2025-12-30 17:39:15 +01:00
document.getElementById('drawerRevenue').textContent = revenue + ' DKK';
2025-12-30 00:36:01 +01:00
// Open drawer
document.getElementById('drawerOverlay').classList.add('open');
document.getElementById('productDrawer').classList.add('open');
document.body.style.overflow = 'hidden';
};
window.closeDrawer = function() {
document.getElementById('drawerOverlay').classList.remove('open');
document.getElementById('productDrawer').classList.remove('open');
document.body.style.overflow = '';
};
// Close on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeDrawer();
});
// Bar chart - Indkøb pr. måned
const chartContainer = document.getElementById('purchaseChart');
createChart(chartContainer, {
height: 180,
series: [{
name: 'Indkøb',
color: '#00897b',
type: 'bar',
2025-12-30 17:39:15 +01:00
unit: 'DKK',
2025-12-30 00:36:01 +01:00
data: [
{ x: 'Jul', y: 18500 },
{ x: 'Aug', y: 22300 },
{ x: 'Sep', y: 15800 },
{ x: 'Okt', y: 41070 },
{ x: 'Nov', y: 37020 },
{ x: 'Dec', y: 18450 }
],
bar: { radius: 4 }
}],
xAxis: {
categories: ['Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
},
yAxis: {
min: 0,
ticks: 4,
format: (v) => (v / 1000) + 'k'
},
padding: { top: 20, right: 10, bottom: 30, left: 45 },
tooltip: true,
legend: false,
animation: { duration: 400 }
});
// Theme toggle
const themeToggle = document.getElementById('themeToggle');
const sunIcon = document.getElementById('sunIcon');
const moonIcon = document.getElementById('moonIcon');
const root = document.documentElement;
function updateIcons() {
const isDark = root.classList.contains('dark-mode') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches & & !root.classList.contains('light-mode'));
sunIcon.style.display = isDark ? 'none' : 'block';
moonIcon.style.display = isDark ? 'block' : 'none';
}
updateIcons();
themeToggle.addEventListener('click', () => {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) {
root.classList.toggle('light-mode');
root.classList.remove('dark-mode');
} else {
root.classList.toggle('dark-mode');
root.classList.remove('light-mode');
}
updateIcons();
});
< / script >
< / body >
< / html >
