bmc_hub/app/billing/frontend/templates_list.html

533 lines
22 KiB
HTML
Raw Permalink Normal View History

<!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-file-earmark-code me-2"></i>Invoice2Data Templates (YAML)</h2>
<p class="text-muted">YAML-baserede templates til automatisk faktura-udtrækning</p>
</div>
</div>
<div id="templatesList" class="row">
<!-- Templates loaded here -->
</div>
</div>
<!-- Edit YAML Category Modal -->
<div class="modal fade" id="editYamlCategoryModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i class="bi bi-pencil me-2"></i>Rediger Kategori: <span id="yamlTemplateName"></span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Produkt Kategori</label>
<select class="form-select" id="yamlCategorySelect">
<option value="varesalg">🛒 Varesalg</option>
<option value="drift">🔧 Drift</option>
<option value="anlæg">🏗️ Anlæg</option>
<option value="abonnement">📅 Abonnement</option>
<option value="lager">📦 Lager</option>
<option value="udlejning">🏪 Udlejning</option>
</select>
</div>
<div class="alert alert-info">
<i class="bi bi-info-circle me-2"></i>
<small>Dette ændrer default_product_category i YAML filen. Filen bliver opdateret på serveren.</small>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuller</button>
<button type="button" class="btn btn-primary" onclick="saveYamlCategory()">
<i class="bi bi-save me-2"></i>Gem Kategori
</button>
</div>
</div>
</div>
</div>
<!-- View YAML Content Modal -->
<div class="modal fade" id="viewYamlModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i class="bi bi-file-earmark-code me-2"></i>YAML Indhold: <span id="viewYamlTemplateName"></span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<pre id="yamlContent" style="background: #f8f9fa; padding: 15px; border-radius: 8px; max-height: 600px; overflow-y: auto;"><code></code></pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Luk</button>
</div>
</div>
</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;
let currentTemplateIsInvoice2data = false;
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;
}
// Filter to only show invoice2data templates
const invoice2dataTemplates = templates.filter(t => t.template_type === 'invoice2data');
if (invoice2dataTemplates.length === 0) {
container.innerHTML = `
<div class="col-12">
<div class="alert alert-info">
<i class="bi bi-info-circle me-2"></i>
Ingen YAML templates endnu. Opret .yml filer i <code>data/invoice_templates/</code>
</div>
</div>
`;
return;
}
invoice2dataTemplates.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;
const category = template.default_product_category || 'varesalg';
const categoryIcons = {
'varesalg': '🛒',
'drift': '🔧',
'anlæg': '🏗️',
'abonnement': '📅',
'lager': '📦',
'udlejning': '🏪'
};
const categoryIcon = categoryIcons[category] || '📦';
container.innerHTML += `
<div class="col-md-4 mb-3">
<div class="card template-card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
<h5 class="card-title mb-0">
<i class="bi bi-file-earmark-code me-2"></i>${template.template_name}
</h5>
<span class="badge bg-success">YAML</span>
</div>
<p class="card-text text-muted mb-2">
<small>
<i class="bi bi-building me-1"></i>${template.vendor_name || 'Ingen leverandør'}
${template.vendor_cvr ? `<br><i class="bi bi-hash me-1"></i>CVR: ${template.vendor_cvr}` : ''}
<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><strong>${categoryIcon} Kategori: ${category}</strong>
</small>
</p>
<div class="d-flex gap-2 flex-wrap">
<button class="btn btn-sm btn-primary" onclick="viewYamlContent('${template.yaml_filename}')" title="Vis YAML indhold">
<i class="bi bi-file-earmark-code"></i> Vis YAML
</button>
<button class="btn btn-sm btn-warning" onclick="editYamlCategory('${template.yaml_filename}', '${category}')" title="Rediger kategori">
<i class="bi bi-pencil"></i> Kategori
</button>
<button class="btn btn-sm btn-info" onclick="openTestModal('${template.yaml_filename}', '${template.template_name}', true, ${template.vendor_id || 'null'})">
<i class="bi bi-flask"></i> Test
</button>
</div>
</div>
</div>
</div>
`;
});
} catch (error) {
console.error('Failed to load templates:', error);
alert('Kunne ikke hente templates');
}
}
async function loadPendingFiles(vendorId = null) {
try {
const response = await fetch('/api/v1/pending-supplier-invoice-files');
const data = await response.json();
const select = document.getElementById('testFileSelect');
select.innerHTML = '<option value="">-- Vælg fil --</option>';
// Filter by vendor if provided
let files = data.files;
if (vendorId) {
files = files.filter(f => f.vendor_matched_id == vendorId);
}
files.forEach(file => {
select.innerHTML += `<option value="${file.file_id}">${file.filename}</option>`;
});
// Show message if no files for this vendor
if (vendorId && files.length === 0) {
select.innerHTML += '<option value="" disabled>Ingen filer fra denne leverandør</option>';
}
} catch (error) {
console.error('Failed to load files:', error);
}
}
async function openTestModal(templateId, templateName, isInvoice2data = false, vendorId = null) {
currentTemplateId = templateId;
currentTemplateIsInvoice2data = isInvoice2data;
document.getElementById('modalTemplateName').textContent = templateName;
document.getElementById('testResultsContainer').classList.add('d-none');
document.getElementById('testFileSelect').value = '';
// For invoice2data templates, use vendorId if provided
if (isInvoice2data && vendorId) {
await loadPendingFiles(vendorId);
} else if (!isInvoice2data) {
// Load database template to get vendor_id
try {
const response = await fetch(`/api/v1/supplier-invoices/templates/${templateId}`);
const template = await response.json();
// Reload files filtered by this template's vendor
await loadPendingFiles(template.vendor_id);
} catch (error) {
console.error('Failed to load template:', error);
await loadPendingFiles(); // Fallback to all files
}
} else {
// No vendor - load all files
await loadPendingFiles();
}
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 - use different endpoint based on type
let testUrl;
if (currentTemplateIsInvoice2data) {
testUrl = `/api/v1/supplier-invoices/templates/invoice2data/${currentTemplateId}/test`;
} else {
testUrl = `/api/v1/supplier-invoices/templates/${currentTemplateId}/test`;
}
const testResponse = await fetch(testUrl, {
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].description ? '<th>Beskrivelse</th>' : ''}
${lineItems[0].quantity ? '<th>Antal</th>' : ''}
${lineItems[0].unit_price ? '<th>Pris</th>' : ''}
${lineItems.some(l => l.circuit_id || l.ip_address) ? '<th>Kredsløb/IP</th>' : ''}
${lineItems.some(l => l.location_street) ? '<th>Adresse</th>' : ''}
</tr>
</thead>
<tbody>`;
lineItems.forEach((line, idx) => {
const locationText = [line.location_street, line.location_zip, line.location_city].filter(x => x).join(' ');
const circuitText = line.circuit_id || line.ip_address || '';
linesHtml += `<tr>
<td>${idx + 1}</td>
${line.description ? `<td>${line.description}</td>` : ''}
${line.quantity ? `<td>${line.quantity}</td>` : ''}
${line.unit_price ? `<td>${line.unit_price}</td>` : ''}
${lineItems.some(l => l.circuit_id || l.ip_address) ? `<td><small>${circuitText}</small></td>` : ''}
${lineItems.some(l => l.location_street) ? `<td><small>${locationText}</small></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');
}
}
let currentYamlTemplate = null;
async function viewYamlContent(yamlFilename) {
try {
const response = await fetch(`/api/v1/supplier-invoices/templates/invoice2data/${yamlFilename}/content`);
if (!response.ok) {
throw new Error('Kunne ikke hente YAML indhold');
}
const data = await response.json();
document.getElementById('viewYamlTemplateName').textContent = yamlFilename + '.yml';
document.getElementById('yamlContent').querySelector('code').textContent = data.content;
const modal = new bootstrap.Modal(document.getElementById('viewYamlModal'));
modal.show();
} catch (error) {
console.error('Failed to load YAML content:', error);
alert('❌ Kunne ikke hente YAML indhold');
}
}
function editYamlCategory(yamlFilename, currentCategory) {
currentYamlTemplate = yamlFilename;
document.getElementById('yamlTemplateName').textContent = yamlFilename + '.yml';
document.getElementById('yamlCategorySelect').value = currentCategory;
const modal = new bootstrap.Modal(document.getElementById('editYamlCategoryModal'));
modal.show();
}
async function saveYamlCategory() {
const newCategory = document.getElementById('yamlCategorySelect').value;
if (!currentYamlTemplate) {
alert('Ingen template valgt');
return;
}
try {
const response = await fetch(`/api/v1/supplier-invoices/templates/invoice2data/${currentYamlTemplate}/category`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ category: newCategory })
});
if (response.ok) {
alert('✅ Kategori opdateret i YAML fil');
bootstrap.Modal.getInstance(document.getElementById('editYamlCategoryModal')).hide();
await loadTemplates(); // Reload to show new category
} else {
const error = await response.json();
throw new Error(error.detail || 'Opdatering fejlede');
}
} catch (error) {
console.error('Category update failed:', error);
alert('❌ Kunne ikke opdatere kategori: ' + error.message);
}
}
</script>
</body>
</html>