196129b74a
Updates currency representation consistently to use 'DKK' instead of 'kr' Standardizes number formatting across product, order, and pricing displays Improves localization and visual consistency
1367 lines
42 KiB
HTML
1367 lines
42 KiB
HTML
<!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>
|
|
|
|
<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>
|
|
</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>
|
|
<swp-stat-value>145.230 DKK</swp-stat-value>
|
|
<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>
|
|
<swp-product-price>195 DKK</swp-product-price>
|
|
</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>
|
|
<swp-product-price>145 DKK</swp-product-price>
|
|
</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>
|
|
<swp-product-price>145 DKK</swp-product-price>
|
|
</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>
|
|
<swp-product-price>155 DKK</swp-product-price>
|
|
</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>
|
|
<swp-product-price>175 DKK</swp-product-price>
|
|
</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>
|
|
<span class="right mono">18.450 DKK</span>
|
|
<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>
|
|
<span class="right mono">12.340 DKK</span>
|
|
<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>
|
|
<span class="right mono">24.680 DKK</span>
|
|
<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>
|
|
<span class="right mono">8.920 DKK</span>
|
|
<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>
|
|
<span class="right mono">32.150 DKK</span>
|
|
<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>
|
|
<swp-detail-drawer-value class="mono" id="drawerPurchasePrice">195,00 DKK</swp-detail-drawer-value>
|
|
</swp-detail-drawer-item>
|
|
<swp-detail-drawer-item>
|
|
<swp-detail-drawer-label>Salgspris (inkl. moms)</swp-detail-drawer-label>
|
|
<swp-detail-drawer-value class="mono" id="drawerSalePrice">379,00 DKK</swp-detail-drawer-value>
|
|
</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="drawerMargin">108,20 DKK</swp-detail-drawer-value>
|
|
</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>
|
|
<swp-detail-drawer-stat-value id="drawerRevenue">12.128 DKK</swp-detail-drawer-stat-value>
|
|
<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;
|
|
document.getElementById('drawerPurchasePrice').textContent = purchasePrice + ' DKK';
|
|
document.getElementById('drawerSalePrice').textContent = salePrice + ' DKK';
|
|
document.getElementById('drawerMargin').textContent = margin.toFixed(2).replace('.', ',') + ' DKK';
|
|
document.getElementById('drawerMarginPct').textContent = marginPct.toFixed(1).replace('.', ',') + '%';
|
|
document.getElementById('drawerStock').textContent = stock;
|
|
document.getElementById('drawerSold').textContent = sold;
|
|
document.getElementById('drawerRevenue').textContent = revenue + ' DKK';
|
|
|
|
// 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',
|
|
unit: 'DKK',
|
|
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>
|