1377 lines
42 KiB
HTML
1377 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-row>
|
||
|
|
<swp-form-field>
|
||
|
|
<swp-form-label>Kredit limit</swp-form-label>
|
||
|
|
<input type="text" class="mono" value="50.000 kr" />
|
||
|
|
</swp-form-field>
|
||
|
|
<swp-form-field>
|
||
|
|
<swp-form-label>Valuta</swp-form-label>
|
||
|
|
<select>
|
||
|
|
<option selected>DKK</option>
|
||
|
|
<option>EUR</option>
|
||
|
|
</select>
|
||
|
|
</swp-form-field>
|
||
|
|
</swp-form-row>
|
||
|
|
</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 kr</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 kr</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 kr</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 kr</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 kr</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 kr</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 kr</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 kr</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 kr</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 kr</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 kr</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 kr</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 kr</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 kr</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 kr</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 + ' kr';
|
||
|
|
document.getElementById('drawerSalePrice').textContent = salePrice + ' kr';
|
||
|
|
document.getElementById('drawerMargin').textContent = margin.toFixed(2).replace('.', ',') + ' kr';
|
||
|
|
document.getElementById('drawerMarginPct').textContent = marginPct.toFixed(1).replace('.', ',') + '%';
|
||
|
|
document.getElementById('drawerStock').textContent = stock;
|
||
|
|
document.getElementById('drawerSold').textContent = sold;
|
||
|
|
document.getElementById('drawerRevenue').textContent = revenue + ' kr';
|
||
|
|
|
||
|
|
// 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: 'kr',
|
||
|
|
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>
|