367 lines
15 KiB
HTML
367 lines
15 KiB
HTML
|
{% extends "shared/frontend/base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Produkt - BMC Hub{% endblock %}
|
||
|
|
|
||
|
|
{% block extra_css %}
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;500;600&display=swap">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--product-bg-1: #f5f7fb;
|
||
|
|
--product-bg-2: #e9f1f7;
|
||
|
|
--product-ink: #102a43;
|
||
|
|
--product-ink-muted: #486581;
|
||
|
|
--product-accent: #0f4c75;
|
||
|
|
--product-card: #ffffff;
|
||
|
|
--product-border: rgba(15, 76, 117, 0.12);
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-bs-theme="dark"] {
|
||
|
|
--product-bg-1: #1b1f24;
|
||
|
|
--product-bg-2: #20252b;
|
||
|
|
--product-ink: #f1f5f9;
|
||
|
|
--product-ink-muted: #b6c2d1;
|
||
|
|
--product-card: #252b33;
|
||
|
|
--product-border: rgba(61, 139, 253, 0.18);
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-page {
|
||
|
|
font-family: "Space Grotesk", sans-serif;
|
||
|
|
color: var(--product-ink);
|
||
|
|
background: radial-gradient(circle at 10% 10%, var(--product-bg-2), transparent 45%),
|
||
|
|
radial-gradient(circle at 90% 20%, rgba(15, 76, 117, 0.15), transparent 50%),
|
||
|
|
linear-gradient(160deg, var(--product-bg-1), var(--product-bg-2));
|
||
|
|
border-radius: 18px;
|
||
|
|
padding: 28px;
|
||
|
|
box-shadow: 0 20px 40px rgba(15, 76, 117, 0.08);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-page h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-muted {
|
||
|
|
color: var(--product-ink-muted);
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-card {
|
||
|
|
background: var(--product-card);
|
||
|
|
border-radius: 16px;
|
||
|
|
border: 1px solid var(--product-border);
|
||
|
|
padding: 18px;
|
||
|
|
box-shadow: 0 16px 30px rgba(15, 76, 117, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-table th {
|
||
|
|
background: rgba(15, 76, 117, 0.06);
|
||
|
|
}
|
||
|
|
|
||
|
|
.badge-soft {
|
||
|
|
background: rgba(15, 76, 117, 0.12);
|
||
|
|
color: var(--product-ink);
|
||
|
|
border-radius: 999px;
|
||
|
|
padding: 4px 10px;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="container-fluid py-4">
|
||
|
|
<div class="product-page">
|
||
|
|
<div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
|
||
|
|
<div>
|
||
|
|
<a href="/products" class="text-decoration-none product-muted">← Tilbage til produkter</a>
|
||
|
|
<h1 id="productName">Produkt</h1>
|
||
|
|
<div class="product-muted" id="productMeta"></div>
|
||
|
|
</div>
|
||
|
|
<div class="text-end">
|
||
|
|
<div class="badge-soft" id="productStatus">-</div>
|
||
|
|
<div class="fs-3 fw-semibold mt-2" id="productPrice">-</div>
|
||
|
|
<div class="product-muted" id="productSku">-</div>
|
||
|
|
<div class="product-muted" id="productSupplierPrice">-</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row g-3">
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<div class="product-card h-100">
|
||
|
|
<h5 class="mb-3">Opdater pris</h5>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Ny salgspris</label>
|
||
|
|
<input type="number" class="form-control" id="priceNewValue" step="0.01" min="0">
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Note</label>
|
||
|
|
<input type="text" class="form-control" id="priceNote" placeholder="Aarsag til prisændring">
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Opdateret af</label>
|
||
|
|
<input type="text" class="form-control" id="priceChangedBy" placeholder="Navn">
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-primary w-100" onclick="submitPriceUpdate()">Gem pris</button>
|
||
|
|
<div class="small mt-3" id="priceUpdateMessage"></div>
|
||
|
|
</div>
|
||
|
|
<div class="product-card mt-3">
|
||
|
|
<h5 class="mb-3">Opdater leverandoer</h5>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Leverandoer</label>
|
||
|
|
<input type="text" class="form-control" id="supplierName" placeholder="Leverandoer navn">
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Leverandoer pris</label>
|
||
|
|
<input type="number" class="form-control" id="supplierPrice" step="0.01" min="0">
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Note</label>
|
||
|
|
<input type="text" class="form-control" id="supplierNote" placeholder="Aarsag til ændring">
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Opdateret af</label>
|
||
|
|
<input type="text" class="form-control" id="supplierChangedBy" placeholder="Navn">
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-outline-primary w-100" onclick="submitSupplierUpdate()">Gem leverandoer</button>
|
||
|
|
<div class="small mt-3" id="supplierUpdateMessage"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-8">
|
||
|
|
<div class="product-card mb-3">
|
||
|
|
<h5 class="mb-3">Pris historik</h5>
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-sm product-table mb-0">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Dato</th>
|
||
|
|
<th>Type</th>
|
||
|
|
<th>Gammel</th>
|
||
|
|
<th>Ny</th>
|
||
|
|
<th>Note</th>
|
||
|
|
<th>Af</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="priceHistoryBody">
|
||
|
|
<tr><td colspan="6" class="text-center product-muted py-3">Indlaeser...</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="product-card">
|
||
|
|
<h5 class="mb-3">Tidligere salg</h5>
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-sm product-table mb-0">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Dato</th>
|
||
|
|
<th>Kilde</th>
|
||
|
|
<th>Beskrivelse</th>
|
||
|
|
<th>Antal</th>
|
||
|
|
<th>Pris</th>
|
||
|
|
<th>Total</th>
|
||
|
|
<th>Status</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="salesHistoryBody">
|
||
|
|
<tr><td colspan="7" class="text-center product-muted py-3">Indlaeser...</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const productId = {{ product_id }};
|
||
|
|
|
||
|
|
function escapeHtml(value) {
|
||
|
|
return String(value || '').replace(/[&<>"']/g, (ch) => ({
|
||
|
|
'&': '&',
|
||
|
|
'<': '<',
|
||
|
|
'>': '>',
|
||
|
|
'"': '"',
|
||
|
|
"'": '''
|
||
|
|
}[ch]));
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCurrency(amount) {
|
||
|
|
return new Intl.NumberFormat('da-DK', {
|
||
|
|
style: 'currency',
|
||
|
|
currency: 'DKK',
|
||
|
|
minimumFractionDigits: 0,
|
||
|
|
maximumFractionDigits: 0
|
||
|
|
}).format(amount || 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatDate(value) {
|
||
|
|
if (!value) return '-';
|
||
|
|
const date = new Date(value);
|
||
|
|
if (Number.isNaN(date.getTime())) return value;
|
||
|
|
return date.toLocaleDateString('da-DK');
|
||
|
|
}
|
||
|
|
|
||
|
|
function setMessage(message, tone = 'text-muted') {
|
||
|
|
const el = document.getElementById('priceUpdateMessage');
|
||
|
|
if (!el) return;
|
||
|
|
el.className = `small ${tone}`;
|
||
|
|
el.textContent = message;
|
||
|
|
}
|
||
|
|
|
||
|
|
function setSupplierMessage(message, tone = 'text-muted') {
|
||
|
|
const el = document.getElementById('supplierUpdateMessage');
|
||
|
|
if (!el) return;
|
||
|
|
el.className = `small ${tone}`;
|
||
|
|
el.textContent = message;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadProductDetail() {
|
||
|
|
try {
|
||
|
|
const res = await fetch(`/api/v1/products/${productId}`);
|
||
|
|
if (!res.ok) throw new Error('Kunne ikke hente produkt');
|
||
|
|
const product = await res.json();
|
||
|
|
document.getElementById('productName').textContent = product.name || 'Produkt';
|
||
|
|
document.getElementById('productMeta').textContent = [
|
||
|
|
product.manufacturer,
|
||
|
|
product.type,
|
||
|
|
product.supplier_name
|
||
|
|
].filter(Boolean).join(' • ');
|
||
|
|
document.getElementById('productStatus').textContent = product.status || '-';
|
||
|
|
document.getElementById('productPrice').textContent = product.sales_price != null ? formatCurrency(product.sales_price) : '-';
|
||
|
|
document.getElementById('productSku').textContent = product.sku_internal || '-';
|
||
|
|
document.getElementById('productSupplierPrice').textContent = product.supplier_price != null
|
||
|
|
? `Leverandoer: ${formatCurrency(product.supplier_price)}`
|
||
|
|
: 'Leverandoer pris: -';
|
||
|
|
document.getElementById('priceNewValue').value = product.sales_price != null ? product.sales_price : '';
|
||
|
|
document.getElementById('supplierName').value = product.supplier_name || '';
|
||
|
|
document.getElementById('supplierPrice').value = product.supplier_price != null ? product.supplier_price : '';
|
||
|
|
} catch (e) {
|
||
|
|
setMessage(e.message || 'Fejl ved indlaesning', 'text-danger');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadPriceHistory() {
|
||
|
|
const tbody = document.getElementById('priceHistoryBody');
|
||
|
|
try {
|
||
|
|
const res = await fetch(`/api/v1/products/${productId}/price-history`);
|
||
|
|
if (!res.ok) throw new Error('Kunne ikke hente pris historik');
|
||
|
|
const history = await res.json();
|
||
|
|
if (!history.length) {
|
||
|
|
tbody.innerHTML = '<tr><td colspan="6" class="text-center product-muted py-3">Ingen historik</td></tr>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
tbody.innerHTML = history.map(entry => `
|
||
|
|
<tr>
|
||
|
|
<td>${formatDate(entry.changed_at)}</td>
|
||
|
|
<td>${entry.price_type === 'supplier_price' ? 'Leverandoer' : 'Salgspris'}</td>
|
||
|
|
<td>${entry.old_price != null ? formatCurrency(entry.old_price) : '-'}</td>
|
||
|
|
<td>${entry.new_price != null ? formatCurrency(entry.new_price) : '-'}</td>
|
||
|
|
<td>${escapeHtml(entry.note || '-')}</td>
|
||
|
|
<td>${escapeHtml(entry.changed_by || '-')}</td>
|
||
|
|
</tr>
|
||
|
|
`).join('');
|
||
|
|
} catch (e) {
|
||
|
|
tbody.innerHTML = `<tr><td colspan="6" class="text-center text-danger py-3">${escapeHtml(e.message || 'Fejl')}</td></tr>`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadSalesHistory() {
|
||
|
|
const tbody = document.getElementById('salesHistoryBody');
|
||
|
|
try {
|
||
|
|
const res = await fetch(`/api/v1/products/${productId}/sales-history`);
|
||
|
|
if (!res.ok) throw new Error('Kunne ikke hente salgs historik');
|
||
|
|
const history = await res.json();
|
||
|
|
if (!history.length) {
|
||
|
|
tbody.innerHTML = '<tr><td colspan="7" class="text-center product-muted py-3">Ingen salg fundet</td></tr>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
tbody.innerHTML = history.map(entry => `
|
||
|
|
<tr>
|
||
|
|
<td>${formatDate(entry.line_date)}</td>
|
||
|
|
<td>${entry.source === 'subscription' ? 'Abonnement' : 'Sag salg'}</td>
|
||
|
|
<td>${escapeHtml(entry.description || '-')}</td>
|
||
|
|
<td>${entry.quantity != null ? entry.quantity : '-'}</td>
|
||
|
|
<td>${entry.unit_price != null ? formatCurrency(entry.unit_price) : '-'}</td>
|
||
|
|
<td>${entry.total_amount != null ? formatCurrency(entry.total_amount) : '-'}</td>
|
||
|
|
<td>${escapeHtml(entry.status || '-')}</td>
|
||
|
|
</tr>
|
||
|
|
`).join('');
|
||
|
|
} catch (e) {
|
||
|
|
tbody.innerHTML = `<tr><td colspan="7" class="text-center text-danger py-3">${escapeHtml(e.message || 'Fejl')}</td></tr>`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function submitPriceUpdate() {
|
||
|
|
const newPrice = document.getElementById('priceNewValue').value;
|
||
|
|
const note = document.getElementById('priceNote').value.trim();
|
||
|
|
const changedBy = document.getElementById('priceChangedBy').value.trim();
|
||
|
|
|
||
|
|
if (!newPrice) {
|
||
|
|
setMessage('Angiv ny pris', 'text-danger');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const res = await fetch(`/api/v1/products/${productId}/price`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({
|
||
|
|
new_price: Number(newPrice),
|
||
|
|
note: note || null,
|
||
|
|
changed_by: changedBy || null
|
||
|
|
})
|
||
|
|
});
|
||
|
|
if (!res.ok) {
|
||
|
|
const error = await res.json();
|
||
|
|
throw new Error(error.detail || 'Prisopdatering fejlede');
|
||
|
|
}
|
||
|
|
await res.json();
|
||
|
|
setMessage('Pris opdateret', 'text-success');
|
||
|
|
await loadProductDetail();
|
||
|
|
await loadPriceHistory();
|
||
|
|
} catch (e) {
|
||
|
|
setMessage(e.message || 'Fejl ved opdatering', 'text-danger');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function submitSupplierUpdate() {
|
||
|
|
const supplierName = document.getElementById('supplierName').value.trim();
|
||
|
|
const supplierPriceValue = document.getElementById('supplierPrice').value;
|
||
|
|
const note = document.getElementById('supplierNote').value.trim();
|
||
|
|
const changedBy = document.getElementById('supplierChangedBy').value.trim();
|
||
|
|
|
||
|
|
try {
|
||
|
|
const res = await fetch(`/api/v1/products/${productId}/supplier`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({
|
||
|
|
supplier_name: supplierName || null,
|
||
|
|
supplier_price: supplierPriceValue ? Number(supplierPriceValue) : null,
|
||
|
|
note: note || null,
|
||
|
|
changed_by: changedBy || null
|
||
|
|
})
|
||
|
|
});
|
||
|
|
if (!res.ok) {
|
||
|
|
const error = await res.json();
|
||
|
|
throw new Error(error.detail || 'Leverandoer opdatering fejlede');
|
||
|
|
}
|
||
|
|
await res.json();
|
||
|
|
setSupplierMessage('Leverandoer opdateret', 'text-success');
|
||
|
|
await loadProductDetail();
|
||
|
|
await loadPriceHistory();
|
||
|
|
} catch (e) {
|
||
|
|
setSupplierMessage(e.message || 'Fejl ved opdatering', 'text-danger');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
loadProductDetail();
|
||
|
|
loadPriceHistory();
|
||
|
|
loadSalesHistory();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|