CC2 R3 frontend: login.html + admin_users.html (M1+M2+M10 UI)

- static/login.html: dark Palantir-style login with PGŽ branding, Prijava se / Zaboravljena lozinka, demo account quick-fills, GDPR cookie banner, autostore tokens (local/session) - static/admin_users.html: full user-management admin panel: - Collapsible left sidebar (Pregled, Korisnici, Tenanti, Audit log, Sigurnost, GDPR, links to ERP/CRM) - Users table with filters (q, tenant, role, status, limit) - + Dodaj korisnika modal (CRUD via /api/admin/users/*) - Suspend / unsuspend / reset-password / delete actions - Audit log viewer + Security KPIs + GDPR queue - Self-service: change pwd, export data (Art. 20), erasure request (Art. 17) - pgz_sport_api.py: /login and /admin/users URL routes - auth/seed_demo.py: added tajnik@atletski.pgz.hr/Atl2026!, admin@ak-kvarner.hr/Kvarner2026! demo users 5/5 live tests pass: login JWT, /me, /admin/users, /gdpr/consent, /gdpr/export Note: existing admin.html (CC4 ERP/OCR work) preserved intact; admin_users.html is dedicated user-mgmt page linked from sidebar.
2026-05-05 00:20:03 +02:00
parent cef4d2575b
commit 8fe2478b84
17 changed files with 10013 additions and 37 deletions
@@ -0,0 +1,386 @@
+<!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 € (&lt;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,'&quot;')}</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>