364 lines
14 KiB
HTML
364 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="da">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Templates - BMC Hub</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background-color: #f8f9fa;
|
||
|
|
padding-top: 80px;
|
||
|
|
}
|
||
|
|
.navbar {
|
||
|
|
background: #ffffff;
|
||
|
|
box-shadow: 0 2px 15px rgba(0,0,0,0.03);
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
.template-card {
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
.template-card:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
.test-modal .pdf-preview {
|
||
|
|
max-height: 400px;
|
||
|
|
overflow-y: auto;
|
||
|
|
background: #f8f9fa;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 12px;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
border: 1px solid #dee2e6;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- Navbar -->
|
||
|
|
<nav class="navbar navbar-expand-lg fixed-top">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<a class="navbar-brand" href="/">
|
||
|
|
<i class="bi bi-speedometer2 me-2"></i>BMC Hub
|
||
|
|
</a>
|
||
|
|
<div class="navbar-nav ms-auto">
|
||
|
|
<a class="nav-link" href="/billing/supplier-invoices">
|
||
|
|
<i class="bi bi-arrow-left me-1"></i>Tilbage til Fakturaer
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="container mt-4">
|
||
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
|
|
<div>
|
||
|
|
<h2><i class="bi bi-grid-3x3 me-2"></i>Faktura Templates</h2>
|
||
|
|
<p class="text-muted">Administrer templates til automatisk faktura-udtrækning</p>
|
||
|
|
</div>
|
||
|
|
<a href="/billing/template-builder" class="btn btn-primary">
|
||
|
|
<i class="bi bi-plus-circle me-2"></i>Ny Template
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="templatesList" class="row">
|
||
|
|
<!-- Templates loaded here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Test Modal -->
|
||
|
|
<div class="modal fade test-modal" id="testModal" tabindex="-1">
|
||
|
|
<div class="modal-dialog modal-xl">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title">
|
||
|
|
<i class="bi bi-flask me-2"></i>Test Template: <span id="modalTemplateName"></span>
|
||
|
|
</h5>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 mb-3">
|
||
|
|
<label class="form-label">Vælg PDF fil til test</label>
|
||
|
|
<select class="form-select" id="testFileSelect">
|
||
|
|
<option value="">-- Vælg fil --</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="testResultsContainer" class="d-none">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-5">
|
||
|
|
<h6>PDF Preview</h6>
|
||
|
|
<div class="pdf-preview" id="testPdfPreview"></div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-7">
|
||
|
|
<div id="testResults" class="alert" role="alert">
|
||
|
|
<!-- Test results shown here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Luk</button>
|
||
|
|
<button type="button" class="btn btn-primary" onclick="runTest()">
|
||
|
|
<i class="bi bi-play-fill me-2"></i>Kør Test
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
<script>
|
||
|
|
let currentTemplateId = null;
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
||
|
|
await loadTemplates();
|
||
|
|
await loadPendingFiles();
|
||
|
|
});
|
||
|
|
|
||
|
|
async function loadTemplates() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/v1/supplier-invoices/templates');
|
||
|
|
const templates = await response.json();
|
||
|
|
|
||
|
|
const container = document.getElementById('templatesList');
|
||
|
|
container.innerHTML = '';
|
||
|
|
|
||
|
|
if (templates.length === 0) {
|
||
|
|
container.innerHTML = `
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="alert alert-info">
|
||
|
|
<i class="bi bi-info-circle me-2"></i>
|
||
|
|
Ingen templates fundet. Klik "Ny Template" for at oprette den første.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
templates.forEach(template => {
|
||
|
|
const detectionPatterns = template.detection_patterns || [];
|
||
|
|
const fieldMappings = template.field_mappings || {};
|
||
|
|
const fieldCount = Object.keys(fieldMappings).filter(k => !['lines_start', 'lines_end', 'line_item'].includes(k)).length;
|
||
|
|
|
||
|
|
container.innerHTML += `
|
||
|
|
<div class="col-md-4 mb-3">
|
||
|
|
<div class="card template-card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title">
|
||
|
|
<i class="bi bi-file-text me-2"></i>${template.template_name}
|
||
|
|
</h5>
|
||
|
|
<p class="card-text text-muted mb-2">
|
||
|
|
<small>
|
||
|
|
<i class="bi bi-building me-1"></i>${template.vendor_name || 'Ingen leverandør'}<br>
|
||
|
|
<i class="bi bi-check-circle me-1"></i>${detectionPatterns.length} detektionsmønstre<br>
|
||
|
|
<i class="bi bi-input-cursor me-1"></i>${fieldCount} felter<br>
|
||
|
|
<i class="bi bi-graph-up me-1"></i>${template.usage_count || 0} gange brugt
|
||
|
|
</small>
|
||
|
|
</p>
|
||
|
|
<div class="d-flex gap-2">
|
||
|
|
<button class="btn btn-sm btn-info" onclick="openTestModal(${template.template_id}, '${template.template_name}')">
|
||
|
|
<i class="bi bi-flask"></i> Test
|
||
|
|
</button>
|
||
|
|
<button class="btn btn-sm btn-danger" onclick="deleteTemplate(${template.template_id})">
|
||
|
|
<i class="bi bi-trash"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load templates:', error);
|
||
|
|
alert('Kunne ikke hente templates');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadPendingFiles() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/v1/supplier-invoices/pending-files');
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
const select = document.getElementById('testFileSelect');
|
||
|
|
select.innerHTML = '<option value="">-- Vælg fil --</option>';
|
||
|
|
|
||
|
|
data.files.forEach(file => {
|
||
|
|
select.innerHTML += `<option value="${file.file_id}">${file.filename}</option>`;
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load files:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function openTestModal(templateId, templateName) {
|
||
|
|
currentTemplateId = templateId;
|
||
|
|
document.getElementById('modalTemplateName').textContent = templateName;
|
||
|
|
document.getElementById('testResultsContainer').classList.add('d-none');
|
||
|
|
document.getElementById('testFileSelect').value = '';
|
||
|
|
|
||
|
|
const modal = new bootstrap.Modal(document.getElementById('testModal'));
|
||
|
|
modal.show();
|
||
|
|
}
|
||
|
|
|
||
|
|
async function runTest() {
|
||
|
|
const fileId = document.getElementById('testFileSelect').value;
|
||
|
|
|
||
|
|
if (!fileId) {
|
||
|
|
alert('Vælg en PDF fil');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!currentTemplateId) {
|
||
|
|
alert('Ingen template valgt');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
// Load PDF text
|
||
|
|
const fileResponse = await fetch(`/api/v1/supplier-invoices/reprocess/${fileId}`, {
|
||
|
|
method: 'POST'
|
||
|
|
});
|
||
|
|
const fileData = await fileResponse.json();
|
||
|
|
const pdfText = fileData.pdf_text;
|
||
|
|
|
||
|
|
// Show PDF preview
|
||
|
|
document.getElementById('testPdfPreview').textContent = pdfText;
|
||
|
|
document.getElementById('testResultsContainer').classList.remove('d-none');
|
||
|
|
|
||
|
|
// Test template
|
||
|
|
const testResponse = await fetch(`/api/v1/supplier-invoices/templates/${currentTemplateId}/test`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({ pdf_text: pdfText })
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!testResponse.ok) {
|
||
|
|
throw new Error('Test fejlede');
|
||
|
|
}
|
||
|
|
|
||
|
|
const result = await testResponse.json();
|
||
|
|
|
||
|
|
// Display results
|
||
|
|
const testResults = document.getElementById('testResults');
|
||
|
|
testResults.className = 'alert';
|
||
|
|
|
||
|
|
let detectionHtml = '<h6>Detektionsmønstre:</h6><ul class="mb-2">';
|
||
|
|
for (let dr of result.detection_results) {
|
||
|
|
detectionHtml += `<li>${dr.found ? '✅' : '❌'} "${dr.pattern}" (weight: ${dr.weight})</li>`;
|
||
|
|
}
|
||
|
|
detectionHtml += '</ul>';
|
||
|
|
|
||
|
|
let extractedHtml = '<h6>Udtrækkede felter:</h6><ul class="mb-2">';
|
||
|
|
const extracted = result.extracted_fields || {};
|
||
|
|
if (Object.keys(extracted).length > 0) {
|
||
|
|
for (let [field, value] of Object.entries(extracted)) {
|
||
|
|
extractedHtml += `<li>✅ <strong>${field}:</strong> "${value}"</li>`;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
extractedHtml += '<li class="text-muted">Ingen felter udtrækket</li>';
|
||
|
|
}
|
||
|
|
extractedHtml += '</ul>';
|
||
|
|
|
||
|
|
// Display line items
|
||
|
|
let linesHtml = '';
|
||
|
|
const lineItems = result.line_items || [];
|
||
|
|
if (lineItems.length > 0) {
|
||
|
|
linesHtml = `
|
||
|
|
<h6 class="mt-3">Varelinjer (${lineItems.length} stk):</h6>
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-sm table-bordered">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>#</th>
|
||
|
|
${lineItems[0].item_number ? '<th>Varenr</th>' : ''}
|
||
|
|
${lineItems[0].description ? '<th>Beskrivelse</th>' : ''}
|
||
|
|
${lineItems[0].quantity ? '<th>Antal</th>' : ''}
|
||
|
|
${lineItems[0].unit_price ? '<th>Pris</th>' : ''}
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>`;
|
||
|
|
|
||
|
|
lineItems.forEach(line => {
|
||
|
|
linesHtml += `<tr>
|
||
|
|
<td>${line.line_number}</td>
|
||
|
|
${line.item_number ? `<td>${line.item_number}</td>` : ''}
|
||
|
|
${line.description ? `<td>${line.description}</td>` : ''}
|
||
|
|
${line.quantity ? `<td>${line.quantity}</td>` : ''}
|
||
|
|
${line.unit_price ? `<td>${line.unit_price}</td>` : ''}
|
||
|
|
</tr>`;
|
||
|
|
});
|
||
|
|
|
||
|
|
linesHtml += `</tbody></table></div>`;
|
||
|
|
} else {
|
||
|
|
linesHtml = `
|
||
|
|
<h6 class="mt-3 text-warning">⚠️ Ingen varelinjer fundet</h6>
|
||
|
|
<p class="text-muted small">
|
||
|
|
Tjek at:<br>
|
||
|
|
• "Linje Start" markør findes i PDF'en<br>
|
||
|
|
• "Linje Slut" markør findes i PDF'en<br>
|
||
|
|
• Linje pattern matcher dine varelinjer (én linje ad gangen)<br>
|
||
|
|
<br>
|
||
|
|
Tip: Varelinjer skal være på én linje hver. Hvis din PDF har multi-line varelinjer,
|
||
|
|
skal du justere pattern eller simplificere udtrækningen.
|
||
|
|
</p>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
testResults.innerHTML = `
|
||
|
|
<h5>${result.matched ? '✅' : '❌'} Template ${result.matched ? 'MATCHER' : 'MATCHER IKKE'}</h5>
|
||
|
|
<p><strong>Confidence:</strong> ${(result.confidence * 100).toFixed(0)}% (threshold: 70%)</p>
|
||
|
|
${detectionHtml}
|
||
|
|
${extractedHtml}
|
||
|
|
${linesHtml}
|
||
|
|
`;
|
||
|
|
|
||
|
|
if (result.matched && (Object.keys(extracted).length > 0 || lineItems.length > 0)) {
|
||
|
|
testResults.classList.add('alert-success');
|
||
|
|
} else if (result.matched) {
|
||
|
|
testResults.classList.add('alert-warning');
|
||
|
|
} else {
|
||
|
|
testResults.classList.add('alert-danger');
|
||
|
|
}
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Test failed:', error);
|
||
|
|
const testResults = document.getElementById('testResults');
|
||
|
|
testResults.className = 'alert alert-danger';
|
||
|
|
testResults.innerHTML = `<strong>Test fejlede:</strong> ${error.message}`;
|
||
|
|
document.getElementById('testResultsContainer').classList.remove('d-none');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function deleteTemplate(templateId) {
|
||
|
|
if (!confirm('Er du sikker på at du vil slette denne template?')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/v1/supplier-invoices/templates/${templateId}`, {
|
||
|
|
method: 'DELETE'
|
||
|
|
});
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
alert('✅ Template slettet');
|
||
|
|
await loadTemplates();
|
||
|
|
} else {
|
||
|
|
throw new Error('Sletning fejlede');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Delete failed:', error);
|
||
|
|
alert('❌ Kunne ikke slette template');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|