Damir Radulić
a0db65fc31
- New auth.gdpr.me_router prefix /api/users/me with: - GET/POST /gdpr-export → Art.20 JSON download with Content-Disposition - POST /gdpr-erase → Art.17 erasure request - GET /gdpr-consent → consent history for caller - jsonable_encoder fixes datetime serialisation in JSONResponse - admin_users.html: 'Izvezi moje podatke' now POSTs to alias and uses filename from Content-Disposition header - 401 enforced on no-auth, 200 on valid Bearer (verified live)
387 lines
24 KiB
Plaintext
387 lines
24 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="hr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>PGŽ Sport · ERP — OCR + Putni nalozi</title>
|
||
<!--
|
||
erp.html — PGŽ Sport ERP UI (M5 OCR + M6 Putni nalozi)
|
||
Author: dradulic@outlook.com / damir@rinet.one — 2026-05-04
|
||
Real backend: /api/erp/ocr/upload, /parse, /invoices, /putni-nalog
|
||
-->
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%2306080d'/><text x='16' y='23' text-anchor='middle' font-size='18' font-family='monospace' fill='%2300f0ff'>€</text></svg>">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg:#06080d; --bg-2:#0d1117; --bg-3:#161b22; --border:#1f2937;
|
||
--text:#e6edf3; --text-2:#8b949e; --text-3:#6e7681;
|
||
--accent:#00f0ff; --green:#56d364; --yellow:#d29922; --red:#f85149; --purple:#bc8cff;
|
||
}
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; font-size:14px; }
|
||
.app { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
|
||
.sidebar { background:var(--bg-2); border-right:1px solid var(--border); padding:20px 0; }
|
||
.brand { padding:0 20px 18px; border-bottom:1px solid var(--border); margin-bottom:10px; }
|
||
.brand h1 { font-size:16px; font-weight:700; color:var(--accent); font-family:'JetBrains Mono',monospace; }
|
||
.brand .sub { font-size:11px; color:var(--text-3); margin-top:2px; }
|
||
.nav-item { display:flex; gap:10px; padding:10px 20px; cursor:pointer; color:var(--text-2); font-size:13px; border-left:3px solid transparent; align-items:center; }
|
||
.nav-item:hover { background:var(--bg-3); color:var(--text); }
|
||
.nav-item.active { color:var(--accent); background:rgba(0,240,255,.05); border-left-color:var(--accent); }
|
||
.main { padding:24px 30px; overflow-y:auto; }
|
||
.header { display:flex; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:18px; align-items:center; }
|
||
.header h2 { font-size:22px; font-weight:700; }
|
||
.header .meta { color:var(--text-3); font-size:12px; font-family:'JetBrains Mono',monospace; }
|
||
.section { background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:18px; margin-bottom:16px; }
|
||
.section h3 { font-size:14px; font-weight:600; color:var(--accent); margin-bottom:12px; }
|
||
table { width:100%; border-collapse:collapse; font-size:13px; }
|
||
th { text-align:left; padding:8px 10px; color:var(--text-3); font-size:11px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border); }
|
||
td { padding:10px; border-bottom:1px solid var(--border); }
|
||
td.num { font-family:'JetBrains Mono',monospace; text-align:right; }
|
||
tr:hover { background:var(--bg-3); }
|
||
.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
|
||
.badge.green { background:rgba(86,211,100,.15); color:var(--green); }
|
||
.badge.yellow { background:rgba(210,153,34,.15); color:var(--yellow); }
|
||
.badge.red { background:rgba(248,81,73,.15); color:var(--red); }
|
||
.badge.gray { background:rgba(110,118,129,.15); color:var(--text-3); }
|
||
input.fld, select.fld { width:100%; background:var(--bg); border:1px solid var(--border); padding:8px 10px; border-radius:4px; color:var(--text); font-family:inherit; font-size:13px; }
|
||
input.fld:focus, select.fld:focus { outline:none; border-color:var(--accent); }
|
||
label.lbl { font-size:11px; color:var(--text-3); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; }
|
||
.btn { padding:9px 18px; background:var(--accent); color:var(--bg); border:0; border-radius:4px; cursor:pointer; font-weight:600; font-family:inherit; font-size:13px; }
|
||
.btn.sec { background:var(--bg-3); color:var(--text); border:1px solid var(--border); }
|
||
.tab { display:none; }
|
||
.tab.active { display:block; }
|
||
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
|
||
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
|
||
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
|
||
@media(max-width:768px) { .app { grid-template-columns:1fr; } .sidebar { display:none; } .grid2,.grid3 { grid-template-columns:1fr; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<aside class="sidebar">
|
||
<div class="brand"><h1>PGŽ ERP</h1><div class="sub">M5 OCR + M6 Putni nalozi</div></div>
|
||
<div class="nav-item active" data-tab="ocr"><span>📷</span><span>Skeniraj račun</span></div>
|
||
<div class="nav-item" data-tab="invoices"><span>€</span><span>Računi</span></div>
|
||
<div class="nav-item" data-tab="putni"><span>🚗</span><span>Novi putni nalog</span></div>
|
||
<div class="nav-item" data-tab="putni-list"><span>📋</span><span>Lista putnih naloga</span></div>
|
||
</aside>
|
||
<main class="main">
|
||
<div class="header">
|
||
<h2 id="pageTitle">Skeniraj račun (OCR)</h2>
|
||
<span class="meta" id="metaInfo">Tesseract + DeepSeek V3 · /api/erp</span>
|
||
</div>
|
||
|
||
<!-- OCR -->
|
||
<div class="tab active" id="tab-ocr">
|
||
<div class="section">
|
||
<h3>📷 Drag-and-drop OCR (PDF / JPG / PNG)</h3>
|
||
<div id="ocrDrop" style="border:2px dashed var(--border);border-radius:8px;padding:34px;text-align:center;cursor:pointer;background:var(--bg-3)">
|
||
<div style="font-size:36px;color:var(--accent);margin-bottom:6px">⤓</div>
|
||
<div style="font-size:14px;font-weight:600">Povuci datoteku ovdje ili klikni za odabir</div>
|
||
<div style="font-size:11px;color:var(--text-3);margin-top:6px">Tesseract OCR (hrv+eng) + DeepSeek V3 LLM ekstrakcija polja</div>
|
||
<input id="ocrFile" type="file" accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff,.webp" style="display:none">
|
||
</div>
|
||
<div id="ocrStatus" style="margin-top:10px;font-size:12px;color:var(--text-2);min-height:18px"></div>
|
||
|
||
<div id="ocrResult" style="display:none;margin-top:14px;padding:14px;background:var(--bg-3);border-radius:6px;border:1px solid var(--border)">
|
||
<div class="grid2" style="font-size:13px">
|
||
<div><label class="lbl">Izdavatelj</label><input id="oc_vendor_name" class="fld"></div>
|
||
<div><label class="lbl">OIB izdavatelja</label><input id="oc_vendor_oib" class="fld"></div>
|
||
<div><label class="lbl">Broj računa</label><input id="oc_invoice_no" class="fld"></div>
|
||
<div><label class="lbl">Datum</label><input id="oc_invoice_date" type="date" class="fld"></div>
|
||
<div><label class="lbl">Iznos neto (€)</label><input id="oc_amount_net" type="number" step="0.01" class="fld"></div>
|
||
<div><label class="lbl">PDV (€)</label><input id="oc_amount_vat" type="number" step="0.01" class="fld"></div>
|
||
<div><label class="lbl" style="color:var(--accent)">Brutto / UKUPNO (€)</label><input id="oc_amount_gross" type="number" step="0.01" class="fld" style="border-color:var(--accent)"></div>
|
||
<div><label class="lbl">Stopa PDV (%)</label><input id="oc_vat_rate" type="number" step="0.01" class="fld"></div>
|
||
<div><label class="lbl">IBAN</label><input id="oc_iban" class="fld"></div>
|
||
<div><label class="lbl">Valuta</label><select id="oc_currency" class="fld"><option>EUR</option><option>HRK</option></select></div>
|
||
<div><label class="lbl">Vrsta troška</label>
|
||
<select id="oc_kind" class="fld">
|
||
<option value="gorivo">Gorivo</option><option value="cestarina">Cestarina</option>
|
||
<option value="hotel">Hotel</option><option value="restoran">Restoran</option>
|
||
<option value="oprema">Oprema</option><option value="ostalo" selected>Ostalo</option>
|
||
</select>
|
||
</div>
|
||
<div><label class="lbl">Klub</label><select id="oc_klub" class="fld"></select></div>
|
||
</div>
|
||
<div style="margin-top:10px"><label class="lbl">Opis</label><input id="oc_description" class="fld"></div>
|
||
<details style="margin-top:10px"><summary style="cursor:pointer;font-size:12px;color:var(--text-3)">Sirovi OCR tekst (preview)</summary>
|
||
<pre id="oc_raw" style="font-size:11px;background:var(--bg);padding:10px;border-radius:4px;margin-top:6px;max-height:200px;overflow:auto;white-space:pre-wrap"></pre>
|
||
</details>
|
||
<div style="margin-top:14px;display:flex;gap:8px;align-items:center">
|
||
<button id="ocSave" class="btn">💾 Spremi račun</button>
|
||
<button id="ocCancel" class="btn sec">Odustani</button>
|
||
<span id="ocSaveStatus" style="font-size:12px;color:var(--text-3)"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Invoices list -->
|
||
<div class="tab" id="tab-invoices">
|
||
<div class="section">
|
||
<h3>Računi (svi klubovi)</h3>
|
||
<table id="invTable"><thead><tr><th>#</th><th>Vrsta</th><th>Broj</th><th>Dobavljač</th><th>OIB</th><th>Klub</th><th class="num">Brutto</th><th>Status</th><th>Datum</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Putni nalog form -->
|
||
<div class="tab" id="tab-putni">
|
||
<div class="section">
|
||
<h3>🚗 Novi putni nalog (HR pravilnik 2025)</h3>
|
||
<div class="grid3" style="font-size:13px">
|
||
<div><label class="lbl">Klub</label><select id="pn_klub" class="fld"></select></div>
|
||
<div><label class="lbl">Voditelj</label><input id="pn_voditelj" class="fld" placeholder="Ime Prezime"></div>
|
||
<div><label class="lbl">Putnici (zarez)</label><input id="pn_putnici" class="fld"></div>
|
||
<div style="grid-column:span 3"><label class="lbl">Svrha putovanja</label><input id="pn_svrha" class="fld" placeholder="Natjecanje, treninzi, edukacija…"></div>
|
||
<div><label class="lbl">Od grada</label><input id="pn_od" class="fld" value="Rijeka"></div>
|
||
<div><label class="lbl">Do grada</label><input id="pn_do" class="fld"></div>
|
||
<div><label class="lbl">Zemlja</label><input id="pn_country" class="fld" value="Hrvatska"></div>
|
||
<div><label class="lbl">Polazak</label><input id="pn_from" type="datetime-local" class="fld"></div>
|
||
<div><label class="lbl">Povratak</label><input id="pn_to" type="datetime-local" class="fld"></div>
|
||
<div><label class="lbl">Tip vozila</label>
|
||
<select id="pn_vehicle" class="fld">
|
||
<option>vlastiti automobil</option><option>službeno vozilo</option><option>kombi</option><option>autobus</option><option>vlak</option><option>avion</option>
|
||
</select>
|
||
</div>
|
||
<div><label class="lbl">Registracija</label><input id="pn_plate" class="fld"></div>
|
||
<div><label class="lbl">Kilometara</label><input id="pn_km" type="number" step="1" class="fld" value="0"></div>
|
||
<div><label class="lbl">€/km</label><input id="pn_kmrate" type="number" step="0.01" class="fld" value="0.50"></div>
|
||
</div>
|
||
<div id="pn_preview" style="margin-top:14px;padding:12px;background:var(--bg-3);border-radius:6px;border:1px solid var(--border);font-size:13px;color:var(--text-2)">
|
||
Unesi datume za live obračun dnevnica…
|
||
</div>
|
||
<div style="margin-top:12px;display:flex;gap:8px;align-items:center">
|
||
<button id="pnSave" class="btn">📝 Kreiraj putni nalog</button>
|
||
<span id="pnSaveStatus" style="font-size:12px;color:var(--text-3)"></span>
|
||
</div>
|
||
<p style="margin-top:14px;font-size:11px;color:var(--text-3);line-height:1.6">
|
||
<b>HR pravilnik 2025:</b> domaće 26.54 € (>8h), 13.27 € (5–8h), 0 € (<5h). Inozemne dnevnice po zemlji
|
||
(Italija/Austrija 35 €, Slovenija/Mađarska/BiH/Srbija 30 €). Kilometrina vlastitim automobilom 0.50 €/km.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Putni nalozi list -->
|
||
<div class="tab" id="tab-putni-list">
|
||
<div class="section">
|
||
<h3>Lista putnih naloga</h3>
|
||
<table id="pnTable"><thead><tr><th>#</th><th>Klub</th><th>Destinacija</th><th>Polazak</th><th>Povratak</th><th class="num">Dnevnice</th><th class="num">Transport</th><th class="num">Total</th><th>Status</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
const ERP_API = '/api/erp';
|
||
const $ = s => document.querySelector(s);
|
||
const $$ = s => document.querySelectorAll(s);
|
||
const fmt = n => n == null ? '—' : new Intl.NumberFormat('hr-HR').format(n);
|
||
const fmtEur = n => n != null ? '€' + fmt(Math.round(n*100)/100) : '—';
|
||
const fmtDate = d => d ? d.substring(0,10) : '—';
|
||
|
||
function badge(t,c) { return `<span class="badge ${c}">${t||'—'}</span>`; }
|
||
function sBadge(s) {
|
||
if (!s) return badge('—','gray');
|
||
const x = s.toLowerCase();
|
||
if (['paid','approved','active','odobren','zatvoren'].includes(x)) return badge(s,'green');
|
||
if (['pending','draft','submitted','open','unpaid'].includes(x)) return badge(s,'yellow');
|
||
if (['overdue','rejected','cancelled','failed'].includes(x)) return badge(s,'red');
|
||
return badge(s,'gray');
|
||
}
|
||
|
||
async function loadKlubovi() {
|
||
const r = await fetch('/api/klubovi?limit=400').then(r=>r.json()).catch(()=>null);
|
||
if (!r) return;
|
||
const arr = Array.isArray(r) ? r : (r.rows || r.items || []);
|
||
const opts = '<option value="">— odaberi klub —</option>' + arr
|
||
.map(k => ({id: k.id, naziv: (k.naziv || k.klub || k.sport || '#'+k.id).toString().trim()}))
|
||
.filter(k => k.naziv)
|
||
.sort((a,b) => a.naziv.localeCompare(b.naziv,'hr'))
|
||
.map(k => `<option value="${k.id}">${k.naziv.replace(/"/g,'"')}</option>`).join('');
|
||
['oc_klub','pn_klub'].forEach(id => { const e=$('#'+id); if (e) e.innerHTML=opts; });
|
||
}
|
||
|
||
let ocrUploadId = null, ocrParsed = null;
|
||
function ocrSet(m,c) { const e=$('#ocrStatus'); if(e){e.textContent=m||''; e.style.color=c||'var(--text-2)';} }
|
||
|
||
async function ocrHandle(file) {
|
||
if (!file) return;
|
||
ocrSet('⏳ Učitavam datoteku…','var(--yellow)');
|
||
const klubVal = $('#oc_klub')?.value || '';
|
||
const fd = new FormData();
|
||
fd.append('file', file);
|
||
if (klubVal) fd.append('klub_id', klubVal);
|
||
fd.append('tenant_id', 1);
|
||
fd.append('invoice_kind', $('#oc_kind')?.value || 'ostalo');
|
||
let r = await fetch(`${ERP_API}/ocr/upload`, {method:'POST',body:fd});
|
||
if (!r.ok) { ocrSet('❌ Upload pao: '+r.status,'var(--red)'); return; }
|
||
const j = await r.json();
|
||
ocrUploadId = j.upload_id;
|
||
ocrSet(`✓ Uploaded #${ocrUploadId} (${j.size} B). Pokrećem OCR + DeepSeek V3 ekstrakciju…`,'var(--accent)');
|
||
|
||
const fd2 = new FormData();
|
||
fd2.append('upload_id', ocrUploadId);
|
||
fd2.append('use_llm', 'true');
|
||
r = await fetch(`${ERP_API}/ocr/parse`, {method:'POST',body:fd2});
|
||
const p = await r.json();
|
||
if (!p.ok) { ocrSet('❌ '+(p.error||'Parse fail'),'var(--red)'); return; }
|
||
ocrParsed = p.extracted || {};
|
||
$('#oc_vendor_name').value = ocrParsed.vendor_name || '';
|
||
$('#oc_vendor_oib').value = ocrParsed.vendor_oib || '';
|
||
$('#oc_invoice_no').value = ocrParsed.invoice_no || '';
|
||
$('#oc_invoice_date').value = ocrParsed.invoice_date|| '';
|
||
$('#oc_amount_net').value = ocrParsed.amount_net ?? '';
|
||
$('#oc_amount_vat').value = ocrParsed.amount_vat ?? '';
|
||
$('#oc_amount_gross').value = ocrParsed.amount_gross?? '';
|
||
$('#oc_vat_rate').value = ocrParsed.vat_rate ?? '';
|
||
$('#oc_iban').value = ocrParsed.iban || '';
|
||
$('#oc_kind').value = ocrParsed.category || 'ostalo';
|
||
$('#oc_currency').value = ocrParsed.currency || 'EUR';
|
||
$('#oc_description').value = ocrParsed.description|| '';
|
||
$('#oc_raw').textContent = (p.raw_text_preview||'').slice(0,4000);
|
||
$('#ocrResult').style.display = 'block';
|
||
ocrSet(`✓ OCR ${p.ocr_method} (${p.raw_chars} znakova). Provjeri polja → "Spremi račun".`,'var(--green)');
|
||
}
|
||
|
||
function ocrInit() {
|
||
const drop = $('#ocrDrop'), inp = $('#ocrFile');
|
||
drop.addEventListener('click', () => inp.click());
|
||
inp.addEventListener('change', e => { if (e.target.files[0]) ocrHandle(e.target.files[0]); });
|
||
['dragenter','dragover'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.style.borderColor='var(--accent)'; }));
|
||
['dragleave','drop'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.style.borderColor='var(--border)'; }));
|
||
drop.addEventListener('drop', e => { e.preventDefault(); const f = e.dataTransfer.files[0]; if (f) ocrHandle(f); });
|
||
$('#ocCancel').addEventListener('click', () => { $('#ocrResult').style.display='none'; ocrUploadId=null; ocrParsed=null; ocrSet(''); inp.value=''; });
|
||
$('#ocSave').addEventListener('click', async () => {
|
||
const klub = $('#oc_klub').value;
|
||
if (!klub) { $('#ocSaveStatus').textContent = 'Odaberi klub'; return; }
|
||
const body = {
|
||
klub_id: parseInt(klub), tenant_id: 1, upload_id: ocrUploadId,
|
||
invoice_kind: $('#oc_kind').value || 'ostalo',
|
||
invoice_no: $('#oc_invoice_no').value, vendor_name: $('#oc_vendor_name').value,
|
||
vendor_oib: $('#oc_vendor_oib').value, invoice_date: $('#oc_invoice_date').value,
|
||
amount_net: parseFloat($('#oc_amount_net').value)||null,
|
||
amount_vat: parseFloat($('#oc_amount_vat').value)||null,
|
||
amount_gross: parseFloat($('#oc_amount_gross').value),
|
||
vat_rate: parseFloat($('#oc_vat_rate').value)||null,
|
||
iban_to: $('#oc_iban').value || null,
|
||
currency: $('#oc_currency').value || 'EUR',
|
||
category: $('#oc_kind').value || 'ostalo',
|
||
description: $('#oc_description').value || null,
|
||
};
|
||
$('#ocSaveStatus').textContent = '⏳ Spremam…';
|
||
const r = await fetch(`${ERP_API}/invoices`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
|
||
const j = await r.json();
|
||
if (j.ok) {
|
||
$('#ocSaveStatus').textContent = `✓ Spremljen kao #${j.invoice.id}`;
|
||
$('#ocSaveStatus').style.color = 'var(--green)';
|
||
setTimeout(() => { $('#ocrResult').style.display='none'; loadInvoices(); }, 1500);
|
||
} else {
|
||
$('#ocSaveStatus').textContent = '❌ ' + (j.detail||'Greška');
|
||
$('#ocSaveStatus').style.color = 'var(--red)';
|
||
}
|
||
});
|
||
}
|
||
|
||
let pnTimer = null;
|
||
async function pnPreview() {
|
||
const df = $('#pn_from').value, dt = $('#pn_to').value;
|
||
const country = $('#pn_country').value || 'Hrvatska';
|
||
const km = parseFloat($('#pn_km').value || 0);
|
||
const kr = parseFloat($('#pn_kmrate').value || 0.5);
|
||
const tgt = $('#pn_preview');
|
||
if (!df || !dt) { tgt.textContent = 'Unesi datume za live obračun dnevnica…'; return; }
|
||
const r = await fetch(`${ERP_API}/putni-nalog/dnevnice/preview?date_from=${encodeURIComponent(df)}&date_to=${encodeURIComponent(dt)}&country=${encodeURIComponent(country)}&km=${km}&km_rate=${kr}`).then(r=>r.json()).catch(()=>null);
|
||
if (!r || !r.ok) { tgt.textContent='⚠ Neuspješan obračun'; return; }
|
||
const d = r.preview;
|
||
tgt.innerHTML = `
|
||
<div class="grid4">
|
||
<div><div style="color:var(--text-3);font-size:11px">Sati</div><div style="font-size:18px;font-family:'JetBrains Mono'">${d.hours}h</div></div>
|
||
<div><div style="color:var(--text-3);font-size:11px">Pune dnevnice</div><div style="font-size:18px;color:var(--accent);font-family:'JetBrains Mono'">${d.days_full} × €${d.rate_full}</div></div>
|
||
<div><div style="color:var(--text-3);font-size:11px">Pola dnevnica</div><div style="font-size:18px;color:var(--yellow);font-family:'JetBrains Mono'">${d.days_half} × €${d.rate_half}</div></div>
|
||
<div><div style="color:var(--text-3);font-size:11px">Dnevnice ukupno</div><div style="font-size:18px;color:var(--green);font-family:'JetBrains Mono'">€${d.dnevnica_amount_total}</div></div>
|
||
<div><div style="color:var(--text-3);font-size:11px">Kilometara</div><div style="font-size:16px;font-family:'JetBrains Mono'">${d.km_driven} km</div></div>
|
||
<div><div style="color:var(--text-3);font-size:11px">Kilometrina</div><div style="font-size:16px;font-family:'JetBrains Mono'">€${d.km_amount}</div></div>
|
||
<div><div style="color:var(--text-3);font-size:11px">Zemlja</div><div style="font-size:14px;font-family:'JetBrains Mono'">${d.country}</div></div>
|
||
<div><div style="color:var(--text-3);font-size:11px">PROCJENA UKUPNO</div><div style="font-size:22px;color:var(--accent);font-family:'JetBrains Mono';font-weight:700">€${d.total_estimated}</div></div>
|
||
</div>`;
|
||
}
|
||
|
||
function pnInit() {
|
||
['pn_from','pn_to','pn_country','pn_km','pn_kmrate'].forEach(id => {
|
||
const el = $('#'+id); if (el) el.addEventListener('input', () => { clearTimeout(pnTimer); pnTimer = setTimeout(pnPreview, 250); });
|
||
});
|
||
$('#pnSave').addEventListener('click', async () => {
|
||
const klub = $('#pn_klub').value;
|
||
if (!klub) { $('#pnSaveStatus').textContent = 'Odaberi klub'; return; }
|
||
const body = {
|
||
klub_id: parseInt(klub), tenant_id: 1,
|
||
voditelj_ime: $('#pn_voditelj').value,
|
||
putnici: ($('#pn_putnici').value||'').split(',').map(s=>s.trim()).filter(Boolean),
|
||
svrha: $('#pn_svrha').value,
|
||
od_grada: $('#pn_od').value, do_grada: $('#pn_do').value,
|
||
datum_polaska: $('#pn_from').value, datum_povratka: $('#pn_to').value,
|
||
country: $('#pn_country').value,
|
||
vehicle_type: $('#pn_vehicle').value,
|
||
registracija_vozila: $('#pn_plate').value,
|
||
kilometara: parseFloat($('#pn_km').value)||0,
|
||
km_rate: parseFloat($('#pn_kmrate').value)||0.5,
|
||
};
|
||
$('#pnSaveStatus').textContent = '⏳ Spremam…';
|
||
const r = await fetch(`${ERP_API}/putni-nalog`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
|
||
const j = await r.json();
|
||
if (j.ok) {
|
||
$('#pnSaveStatus').innerHTML = `✓ Putni nalog #${j.putni_nalog.id} kreiran (€${j.putni_nalog.cost_total})`;
|
||
$('#pnSaveStatus').style.color = 'var(--green)';
|
||
loadPutni();
|
||
} else {
|
||
$('#pnSaveStatus').textContent = '❌ ' + (j.detail||'Greška');
|
||
$('#pnSaveStatus').style.color = 'var(--red)';
|
||
}
|
||
});
|
||
}
|
||
|
||
async function loadInvoices() {
|
||
const r = await fetch(`${ERP_API}/invoices?limit=50`).then(r=>r.json()).catch(()=>null);
|
||
if (!r || !r.rows) return;
|
||
$('#invTable tbody').innerHTML = r.rows.length ? r.rows.map(i=>`
|
||
<tr><td>${i.id}</td><td>${i.invoice_kind||'—'}</td><td>${i.invoice_no||'—'}</td>
|
||
<td>${i.vendor_name||'—'}</td><td style="font-family:'JetBrains Mono'">${i.vendor_oib||'—'}</td>
|
||
<td>${i.klub_naziv||'—'}</td><td class="num">${fmtEur(i.amount_gross)}</td>
|
||
<td>${sBadge(i.payment_status)}</td><td>${fmtDate(i.invoice_date)}</td></tr>`).join('')
|
||
: '<tr><td colspan="9" style="color:var(--text-3);text-align:center;padding:20px">Nema podataka</td></tr>';
|
||
}
|
||
|
||
async function loadPutni() {
|
||
const r = await fetch(`${ERP_API}/putni-nalog?limit=50`).then(r=>r.json()).catch(()=>null);
|
||
if (!r || !r.rows) return;
|
||
$('#pnTable tbody').innerHTML = r.rows.length ? r.rows.map(p=>`
|
||
<tr><td>${p.id}</td><td>${p.klub_naziv||'—'}</td><td>${p.destination||'—'}</td>
|
||
<td>${fmtDate(p.date_from)}</td><td>${fmtDate(p.date_to)}</td>
|
||
<td class="num">${fmtEur(p.dnevnice_amount)}</td>
|
||
<td class="num">${fmtEur(p.cost_transport)}</td>
|
||
<td class="num"><strong>${fmtEur(p.cost_total)}</strong></td>
|
||
<td>${sBadge(p.status)}</td></tr>`).join('')
|
||
: '<tr><td colspan="9" style="color:var(--text-3);text-align:center;padding:20px">Nema podataka</td></tr>';
|
||
}
|
||
|
||
function activate(name) {
|
||
$$('.nav-item').forEach(n => n.classList.toggle('active', n.dataset.tab === name));
|
||
$$('.tab').forEach(t => t.classList.toggle('active', t.id === 'tab-' + name));
|
||
const titles = {ocr:'Skeniraj račun (OCR)',invoices:'Računi',putni:'Novi putni nalog','putni-list':'Lista putnih naloga'};
|
||
$('#pageTitle').textContent = titles[name] || name;
|
||
if (name === 'invoices') loadInvoices();
|
||
if (name === 'putni-list') loadPutni();
|
||
}
|
||
$$('.nav-item').forEach(n => n.addEventListener('click', () => activate(n.dataset.tab)));
|
||
|
||
(async () => {
|
||
await loadKlubovi();
|
||
ocrInit();
|
||
pnInit();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|