CC2 R4 #4: /api/users/me/gdpr-export alias

- 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)
2026-05-05 00:47:22 +02:00
parent ca92717039
commit a0db65fc31
14 changed files with 4796 additions and 30 deletions
@@ -0,0 +1,761 @@
+<!DOCTYPE html>
+<html lang="hr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>PGŽ Sport · Admin Dashboard</title>
+<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'>A</text></svg>">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<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;
+  --accent-2: #00b8d4;
+  --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;
+  line-height: 1.5;
+}
+.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
+.sidebar {
+  background: var(--bg-2);
+  border-right: 1px solid var(--border);
+  padding: 20px 0;
+  display: flex; flex-direction: column;
+}
+.brand {
+  padding: 0 20px 20px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 12px;
+}
+.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; align-items: center; gap: 10px;
+  padding: 10px 20px; cursor: pointer;
+  color: var(--text-2); font-size: 13px;
+  border-left: 3px solid transparent;
+  transition: all 0.15s;
+}
+.nav-item:hover { background: var(--bg-3); color: var(--text); }
+.nav-item.active {
+  color: var(--accent);
+  background: rgba(0,240,255,0.05);
+  border-left-color: var(--accent);
+}
+.nav-item .icon { font-size: 16px; width: 18px; }
+.tenant-switch {
+  margin: auto 12px 12px;
+  padding: 12px;
+  background: var(--bg-3);
+  border-radius: 6px;
+  border: 1px solid var(--border);
+}
+.tenant-switch label { font-size: 11px; color: var(--text-3); display: block; margin-bottom: 4px; }
+.tenant-switch select {
+  width: 100%;
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 13px;
+}
+.main { padding: 20px 28px; overflow-y: auto; }
+.header {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 20px; padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+}
+.header h2 { font-size: 22px; font-weight: 700; }
+.header .meta { color: var(--text-3); font-size: 12px; font-family: 'JetBrains Mono', monospace; }
+.kpi-grid {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px; margin-bottom: 24px;
+}
+.kpi-card {
+  background: var(--bg-2); border: 1px solid var(--border);
+  border-radius: 8px; padding: 16px;
+  position: relative; overflow: hidden;
+}
+.kpi-card::before {
+  content: ''; position: absolute; top: 0; left: 0;
+  width: 3px; height: 100%; background: var(--accent);
+}
+.kpi-card.green::before { background: var(--green); }
+.kpi-card.yellow::before { background: var(--yellow); }
+.kpi-card.purple::before { background: var(--purple); }
+.kpi-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
+.kpi-value { font-size: 28px; font-weight: 700; color: var(--text); margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
+.kpi-sub { font-size: 11px; color: var(--text-2); margin-top: 4px; }
+.section {
+  background: var(--bg-2); border: 1px solid var(--border);
+  border-radius: 8px; padding: 18px; margin-bottom: 18px;
+}
+.section h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--accent); }
+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: 0.5px; border-bottom: 1px solid var(--border); }
+td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--text); }
+tr:hover { background: var(--bg-3); }
+td.num { font-family: 'JetBrains Mono', monospace; text-align: right; }
+.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
+.badge.green { background: rgba(86,211,100,0.15); color: var(--green); }
+.badge.yellow { background: rgba(210,153,34,0.15); color: var(--yellow); }
+.badge.red { background: rgba(248,81,73,0.15); color: var(--red); }
+.badge.gray { background: rgba(110,118,129,0.15); color: var(--text-3); }
+.search {
+  width: 100%; max-width: 320px;
+  background: var(--bg); border: 1px solid var(--border);
+  padding: 8px 12px; border-radius: 6px;
+  color: var(--text); font-family: inherit; font-size: 13px;
+}
+.search:focus { outline: none; border-color: var(--accent); }
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+.iframe-wrap {
+  background: var(--bg-2); border: 1px solid var(--border);
+  border-radius: 8px; overflow: hidden; height: 600px;
+}
+.iframe-wrap iframe { width: 100%; height: 100%; border: 0; }
+.spinner {
+  display: inline-block; width: 14px; height: 14px;
+  border: 2px solid var(--border); border-top-color: var(--accent);
+  border-radius: 50%; animation: spin 1s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.tenants-grid {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 14px;
+}
+.tenant-card {
+  background: var(--bg-2); border: 1px solid var(--border);
+  border-radius: 8px; padding: 18px;
+}
+.tenant-card .name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
+.tenant-card .slug { font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
+.tenant-card .stats { margin-top: 12px; display: flex; gap: 16px; }
+.tenant-card .stats .stat { font-size: 12px; color: var(--text-2); }
+.tenant-card .stats .stat strong { color: var(--accent); display: block; font-size: 16px; font-family: 'JetBrains Mono', monospace; }
+@media (max-width: 768px) {
+  .app { grid-template-columns: 1fr; }
+  .sidebar { display: none; }
+}
+</style>
+</head>
+<body>
+<div class="app">
+
+  <aside class="sidebar">
+    <div class="brand">
+      <h1>PGŽ SPORT</h1>
+      <div class="sub">Admin Dashboard v1.1</div>
+    </div>
+
+    <div class="nav-item active" data-tab="dashboard">
+      <span class="icon">⊞</span>
+      <span>Dashboard</span>
+    </div>
+    <div class="nav-item" data-tab="erp">
+      <span class="icon">€</span>
+      <span>ERP — Financije</span>
+    </div>
+    <div class="nav-item" data-tab="crm">
+      <span class="icon">◯</span>
+      <span>CRM — Klubovi</span>
+    </div>
+    <div class="nav-item" data-tab="osobe">
+      <span class="icon">⊙</span>
+      <span>Kontakti</span>
+    </div>
+    <div class="nav-item" data-tab="graph3d">
+      <span class="icon">▣</span>
+      <span>3D Graf</span>
+    </div>
+    <div class="nav-item" data-tab="tenants">
+      <span class="icon">⌂</span>
+      <span>Tenants</span>
+    </div>
+    <div class="nav-item" data-tab="reports">
+      <span class="icon">≡</span>
+      <span>Reports</span>
+    </div>
+
+    <div class="tenant-switch">
+      <label>Aktivan tenant</label>
+      <select id="tenantSel"></select>
+    </div>
+  </aside>
+
+  <main class="main">
+    <div class="header">
+      <h2 id="pageTitle">Dashboard</h2>
+      <span class="meta" id="metaInfo">učitavam…</span>
+    </div>
+
+    <!-- DASHBOARD -->
+    <div class="tab-content active" id="tab-dashboard">
+      <div class="kpi-grid" id="kpiGrid"></div>
+      <div class="section">
+        <h3>Top Klubovi (po aktivnosti)</h3>
+        <table id="topKlubovi"><thead><tr><th>Naziv</th><th>Sport</th><th>Grad</th><th class="num">Članovi</th><th class="num">Računi</th></tr></thead><tbody></tbody></table>
+      </div>
+    </div>
+
+    <!-- ERP -->
+    <div class="tab-content" id="tab-erp">
+      <div class="kpi-grid" id="erpKpi"></div>
+
+      <!-- M5: OCR drag-and-drop upload -->
+      <div class="section">
+        <h3>📷 OCR — Skeniraj račun (gorivo, cestarina, hotel…)</h3>
+        <div id="ocrDrop" style="border:2px dashed var(--border);border-radius:8px;padding:30px;text-align:center;cursor:pointer;background:var(--bg-3);transition:.15s">
+          <div style="font-size:32px;color:var(--accent);margin-bottom:6px">⤓</div>
+          <div style="font-size:14px;font-weight:600">Povuci PDF/JPG/PNG ovdje ili klikni za odabir</div>
+          <div style="font-size:11px;color:var(--text-3);margin-top:6px">Tesseract OCR + DeepSeek V3 izvuče izdavatelja, OIB, datum, iznos, PDV, IBAN, stavke</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 style="display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px">
+            <div><label style="font-size:11px;color:var(--text-3)">Izdavatelj</label><input id="oc_vendor_name" class="search" style="max-width:none;width:100%"></div>
+            <div><label style="font-size:11px;color:var(--text-3)">OIB izdavatelja</label><input id="oc_vendor_oib" class="search" style="max-width:none;width:100%"></div>
+            <div><label style="font-size:11px;color:var(--text-3)">Broj računa</label><input id="oc_invoice_no" class="search" style="max-width:none;width:100%"></div>
+            <div><label style="font-size:11px;color:var(--text-3)">Datum</label><input id="oc_invoice_date" type="date" class="search" style="max-width:none;width:100%"></div>
+            <div><label style="font-size:11px;color:var(--text-3)">Iznos neto</label><input id="oc_amount_net" type="number" step="0.01" class="search" style="max-width:none;width:100%"></div>
+            <div><label style="font-size:11px;color:var(--text-3)">PDV</label><input id="oc_amount_vat" type="number" step="0.01" class="search" style="max-width:none;width:100%"></div>
+            <div><label style="font-size:11px;color:var(--text-3)">Brutto (UKUPNO)</label><input id="oc_amount_gross" type="number" step="0.01" class="search" style="max-width:none;width:100%;border-color:var(--accent)"></div>
+            <div><label style="font-size:11px;color:var(--text-3)">Stopa PDV (%)</label><input id="oc_vat_rate" type="number" step="0.01" class="search" style="max-width:none;width:100%"></div>
+            <div><label style="font-size:11px;color:var(--text-3)">IBAN</label><input id="oc_iban" class="search" style="max-width:none;width:100%"></div>
+            <div><label style="font-size:11px;color:var(--text-3)">Vrsta troška</label>
+              <select id="oc_kind" class="search" style="max-width:none;width:100%">
+                <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 style="font-size:11px;color:var(--text-3)">Klub</label>
+              <select id="oc_klub" class="search" style="max-width:none;width:100%"></select>
+            </div>
+            <div><label style="font-size:11px;color:var(--text-3)">Valuta</label>
+              <select id="oc_currency" class="search" style="max-width:none;width:100%"><option>EUR</option><option>HRK</option></select>
+            </div>
+          </div>
+          <div style="margin-top:10px"><label style="font-size:11px;color:var(--text-3)">Opis</label><input id="oc_description" class="search" style="max-width:none;width:100%"></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" style="padding:8px 18px;background:var(--accent);color:var(--bg);border:0;border-radius:4px;cursor:pointer;font-weight:600">💾 Spremi račun</button>
+            <button id="ocCancel" style="padding:8px 14px;background:var(--bg-3);color:var(--text);border:1px solid var(--border);border-radius:4px;cursor:pointer">Odustani</button>
+            <span id="ocSaveStatus" style="font-size:12px;color:var(--text-3)"></span>
+          </div>
+        </div>
+      </div>
+
+      <!-- M6: Putni nalozi creation form -->
+      <div class="section">
+        <h3>🚗 Novi putni nalog (HR pravilnik 2025)</h3>
+        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;font-size:13px">
+          <div><label style="font-size:11px;color:var(--text-3)">Klub</label><select id="pn_klub" class="search" style="max-width:none;width:100%"></select></div>
+          <div><label style="font-size:11px;color:var(--text-3)">Voditelj</label><input id="pn_voditelj" class="search" style="max-width:none;width:100%" placeholder="Ime Prezime"></div>
+          <div><label style="font-size:11px;color:var(--text-3)">Putnici (zarezom razdvojeno)</label><input id="pn_putnici" class="search" style="max-width:none;width:100%"></div>
+          <div><label style="font-size:11px;color:var(--text-3)">Svrha</label><input id="pn_svrha" class="search" style="max-width:none;width:100%" placeholder="Natjecanje, treninzi…"></div>
+          <div><label style="font-size:11px;color:var(--text-3)">Od grada</label><input id="pn_od" class="search" style="max-width:none;width:100%" value="Rijeka"></div>
+          <div><label style="font-size:11px;color:var(--text-3)">Do grada</label><input id="pn_do" class="search" style="max-width:none;width:100%"></div>
+          <div><label style="font-size:11px;color:var(--text-3)">Polazak</label><input id="pn_from" type="datetime-local" class="search" style="max-width:none;width:100%"></div>
+          <div><label style="font-size:11px;color:var(--text-3)">Povratak</label><input id="pn_to" type="datetime-local" class="search" style="max-width:none;width:100%"></div>
+          <div><label style="font-size:11px;color:var(--text-3)">Zemlja</label><input id="pn_country" class="search" style="max-width:none;width:100%" value="Hrvatska"></div>
+          <div><label style="font-size:11px;color:var(--text-3)">Tip vozila</label>
+            <select id="pn_vehicle" class="search" style="max-width:none;width:100%">
+              <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 style="font-size:11px;color:var(--text-3)">Registracija</label><input id="pn_plate" class="search" style="max-width:none;width:100%"></div>
+          <div><label style="font-size:11px;color:var(--text-3)">Kilometara</label><input id="pn_km" type="number" step="1" class="search" style="max-width:none;width:100%" value="0"></div>
+          <div><label style="font-size:11px;color:var(--text-3)">€/km</label><input id="pn_kmrate" type="number" step="0.01" class="search" style="max-width:none;width:100%" 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">
+          <button id="pnSave" style="padding:8px 18px;background:var(--accent);color:var(--bg);border:0;border-radius:4px;cursor:pointer;font-weight:600">📝 Kreiraj putni nalog</button>
+          <span id="pnSaveStatus" style="font-size:12px;color:var(--text-3);align-self:center"></span>
+        </div>
+      </div>
+
+      <div class="section">
+        <h3>Računi</h3>
+        <table id="invTable"><thead><tr><th>Broj</th><th>Dobavljač</th><th>Klub</th><th class="num">Iznos</th><th>Status</th><th>Datum</th></tr></thead><tbody></tbody></table>
+      </div>
+      <div class="section">
+        <h3>Putni nalozi / izdaci</h3>
+        <table id="expTable"><thead><tr><th>Broj</th><th>Klub</th><th>Destinacija</th><th class="num">Iznos</th><th>Status</th><th>Datum</th></tr></thead><tbody></tbody></table>
+      </div>
+    </div>
+
+    <!-- CRM klubovi -->
+    <div class="tab-content" id="tab-crm">
+      <input type="text" class="search" id="klubSearch" placeholder="Traži klub po imenu, OIB-u, gradu, sportu...">
+      <div class="section" style="margin-top: 14px;">
+        <h3>Klubovi</h3>
+        <table id="klubTable"><thead><tr><th>Naziv</th><th>OIB</th><th>Sport</th><th>Grad</th><th>Email</th><th class="num">Članovi</th><th class="num">Računi</th></tr></thead><tbody></tbody></table>
+      </div>
+    </div>
+
+    <!-- Osobe -->
+    <div class="tab-content" id="tab-osobe">
+      <input type="text" class="search" id="osobaSearch" placeholder="Traži po imenu, prezimenu, OIB-u...">
+      <div class="section" style="margin-top: 14px;">
+        <h3>Kontakti / Članovi</h3>
+        <table id="osobeTable"><thead><tr><th>Ime</th><th>Prezime</th><th>OIB</th><th>Klub</th><th>Pozicija</th><th>Email</th><th>Status</th></tr></thead><tbody></tbody></table>
+      </div>
+    </div>
+
+    <!-- 3D Graph -->
+    <div class="tab-content" id="tab-graph3d">
+      <div class="section">
+        <h3>3D Sport Graph</h3>
+        <p style="color: var(--text-3); margin-bottom: 12px;">Interaktivni 3D prikaz svih klubova, saveza i osoba s drill-down na detalje.</p>
+        <div class="iframe-wrap">
+          <iframe id="graph3dIframe" loading="lazy"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tenants -->
+    <div class="tab-content" id="tab-tenants">
+      <div class="section">
+        <h3>Multi-tenant Management</h3>
+        <p style="color: var(--text-3); margin-bottom: 16px;">Tenants u sustavu. Svaki tenant ima vlastiti scope klubova, financija i konfiguracije.</p>
+        <div class="tenants-grid" id="tenantsGrid"></div>
+      </div>
+    </div>
+
+    <!-- Reports -->
+    <div class="tab-content" id="tab-reports">
+      <div class="section">
+        <h3>Top 10 Klubova (po dokumentima i računima)</h3>
+        <table id="repTable"><thead><tr><th>Naziv</th><th>Sport</th><th>Grad</th><th class="num">Računi</th><th class="num">Članovi</th></tr></thead><tbody></tbody></table>
+      </div>
+    </div>
+
+  </main>
+</div>
+
+<script>
+const API = '/admin/api';
+let currentTenant = 1;
+let dashboardData = null;
+let tenantsList = [];
+
+const $ = sel => document.querySelector(sel);
+const $$ = sel => document.querySelectorAll(sel);
+
+async function fetchJSON(url) {
+  try {
+    const r = await fetch(url);
+    if (!r.ok) throw new Error(r.status);
+    return await r.json();
+  } catch (e) { console.error('Fetch fail:', url, e); return null; }
+}
+
+function fmt(n) {
+  if (n == null) return '—';
+  if (typeof n !== 'number') return n;
+  return new Intl.NumberFormat('hr-HR').format(n);
+}
+function fmtEur(n) { return n != null ? '€' + fmt(Math.round(n)) : '—'; }
+function fmtDate(d) { return d ? d.substring(0, 10) : '—'; }
+
+function badge(text, color) { return '<span class="badge ' + color + '">' + (text || '—') + '</span>'; }
+
+function statusBadge(s) {
+  if (!s) return badge('—', 'gray');
+  const s2 = s.toLowerCase();
+  if (['paid', 'approved', 'active', 'completed'].includes(s2)) return badge(s, 'green');
+  if (['pending', 'submitted', 'draft', 'open'].includes(s2)) return badge(s, 'yellow');
+  if (['overdue', 'rejected', 'cancelled', 'failed'].includes(s2)) return badge(s, 'red');
+  return badge(s, 'gray');
+}
+
+async function loadDashboard() {
+  const d = await fetchJSON(`${API}/dashboard?tenant_id=${currentTenant}`);
+  if (!d) return;
+  dashboardData = d;
+  
+  const k = d.kpi;
+  $('#kpiGrid').innerHTML = `
+    <div class="kpi-card"><div class="kpi-label">Klubovi</div><div class="kpi-value">${fmt(k.klubovi_total)}</div><div class="kpi-sub">${fmt(k.klubovi_aktivni_90d)} aktivnih /90d</div></div>
+    <div class="kpi-card green"><div class="kpi-label">Osobe</div><div class="kpi-value">${fmt(k.osobe)}</div><div class="kpi-sub">članovi i kontakti</div></div>
+    <div class="kpi-card yellow"><div class="kpi-label">Računi</div><div class="kpi-value">${fmt(k.invoices)}</div><div class="kpi-sub">${fmtEur(k.invoices_total_eur)}</div></div>
+    <div class="kpi-card purple"><div class="kpi-label">Putni nalozi</div><div class="kpi-value">${fmt(k.expenses)}</div><div class="kpi-sub">${fmtEur(k.expenses_total_eur)}</div></div>
+    <div class="kpi-card"><div class="kpi-label">Aktivnost</div><div class="kpi-value">${fmt(k.activity_30d)}</div><div class="kpi-sub">audit eventova /30d</div></div>
+    <div class="kpi-card green"><div class="kpi-label">Dokumenti</div><div class="kpi-value">${fmt(k.dokumenti_7d)}</div><div class="kpi-sub">novih /7d</div></div>
+  `;
+  
+  // Top klubovi
+  const top = await fetchJSON(`${API}/reports/top_klubovi?tenant_id=${currentTenant}&limit=8`);
+  if (top && top.top_klubovi) {
+    $('#topKlubovi tbody').innerHTML = top.top_klubovi.map(k => `
+      <tr><td>${k.naziv}</td><td>${k.sport || '—'}</td><td>${k.grad || '—'}</td>
+        <td class="num">${fmt(k.clanovi)}</td><td class="num">${fmt(k.invoices)}</td></tr>
+    `).join('');
+  }
+  
+  $('#metaInfo').textContent = `Tenant: ${d.tenant.display_name} · OIB: ${d.tenant.oib || '—'} · ${new Date().toLocaleString('hr-HR')}`;
+}
+
+async function loadERP() {
+  const s = await fetchJSON(`${API}/erp/summary?tenant_id=${currentTenant}`);
+  if (s) {
+    $('#erpKpi').innerHTML = `
+      <div class="kpi-card"><div class="kpi-label">Računi total</div><div class="kpi-value">${fmt(s.invoices.total)}</div><div class="kpi-sub">${fmtEur(s.invoices.sum_total)}</div></div>
+      <div class="kpi-card green"><div class="kpi-label">Plaćeno</div><div class="kpi-value">${fmt(s.invoices.paid)}</div><div class="kpi-sub">${fmtEur(s.invoices.sum_paid)}</div></div>
+      <div class="kpi-card yellow"><div class="kpi-label">Neplaćeno</div><div class="kpi-value">${fmt(s.invoices.pending + s.invoices.overdue + (s.invoices.other||0))}</div><div class="kpi-sub">${fmtEur(s.invoices.sum_unpaid)}</div></div>
+      <div class="kpi-card purple"><div class="kpi-label">Putni nalozi</div><div class="kpi-value">${fmt(s.expenses.total)}</div><div class="kpi-sub">${fmtEur(s.expenses.sum_total)}</div></div>
+      <div class="kpi-card"><div class="kpi-label">Plaćanja /90d</div><div class="kpi-value">${fmt(s.payments_90d.total)}</div><div class="kpi-sub">${fmtEur(s.payments_90d.sum_total)}</div></div>
+      <div class="kpi-card green"><div class="kpi-label">Proračun</div><div class="kpi-value">${fmtEur(s.proracun.sum_planirano)}</div><div class="kpi-sub">${s.proracun.n} godina · izvršeno: ${fmtEur(s.proracun.sum_izvrseno)}</div></div>
+    `;
+  }
+  
+  const inv = await fetchJSON(`${API}/erp/invoices?tenant_id=${currentTenant}&limit=20`);
+  if (inv && inv.invoices) {
+    $('#invTable tbody').innerHTML = inv.invoices.length ? inv.invoices.map(i => `
+      <tr><td>${i.invoice_no || '—'}</td><td>${i.vendor_name || '—'}</td>
+        <td>${i.klub_naziv || '—'}</td><td class="num">${fmtEur(i.amount_gross)}</td>
+        <td>${statusBadge(i.payment_status)}</td><td>${fmtDate(i.invoice_date)}</td></tr>
+    `).join('') : '<tr><td colspan="6" style="color:var(--text-3);text-align:center;padding:20px">Nema podataka</td></tr>';
+  }
+  
+  const exp = await fetchJSON(`${API}/erp/expenses?tenant_id=${currentTenant}&limit=20`);
+  if (exp && exp.expenses) {
+    $('#expTable tbody').innerHTML = exp.expenses.length ? exp.expenses.map(e => `
+      <tr><td>${e.report_no || '—'}</td><td>${e.klub_naziv || '—'}</td>
+        <td>${e.destination || '—'}</td><td class="num">${fmtEur(e.cost_total)}</td>
+        <td>${statusBadge(e.status)}</td><td>${fmtDate(e.created_at)}</td></tr>
+    `).join('') : '<tr><td colspan="6" style="color:var(--text-3);text-align:center;padding:20px">Nema podataka</td></tr>';
+  }
+}
+
+async function loadCRM(q='') {
+  const url = `${API}/crm/klubovi?tenant_id=${currentTenant}&limit=50${q ? '&q=' + encodeURIComponent(q) : ''}`;
+  const d = await fetchJSON(url);
+  if (d && d.klubovi) {
+    $('#klubTable tbody').innerHTML = d.klubovi.map(k => `
+      <tr><td><strong>${k.naziv}</strong></td><td>${k.oib || '—'}</td>
+        <td>${k.sport || '—'}</td><td>${k.grad || '—'}</td>
+        <td>${k.email || '—'}</td><td class="num">${fmt(k.clanovi)}</td>
+        <td class="num">${fmt(k.invoices_count)}</td></tr>
+    `).join('');
+  }
+}
+
+async function loadOsobe(q='') {
+  const url = `${API}/crm/osobe?limit=50${q ? '&q=' + encodeURIComponent(q) : ''}`;
+  const d = await fetchJSON(url);
+  if (d && d.osobe) {
+    $('#osobeTable tbody').innerHTML = d.osobe.map(o => `
+      <tr><td>${o.ime}</td><td><strong>${o.prezime}</strong></td>
+        <td>${o.oib || '—'}</td><td>${o.klub_naziv || '—'}</td>
+        <td>${o.pozicija || '—'}</td><td>${o.email || '—'}</td>
+        <td>${o.aktivan ? badge('Aktivan', 'green') : badge('Neaktivan', 'gray')}</td></tr>
+    `).join('');
+  }
+}
+
+async function loadTenants() {
+  const d = await fetchJSON(`${API}/tenants`);
+  if (d && d.tenants) {
+    $('#tenantsGrid').innerHTML = d.tenants.map(t => `
+      <div class="tenant-card">
+        <div class="name">${t.display_name}</div>
+        <div class="slug">@${t.slug} · ${t.type} · ${t.oib || 'no OIB'}</div>
+        <div class="stats">
+          <div class="stat"><strong>${fmt(t.klubovi_count || 0)}</strong>klubovi</div>
+          <div class="stat"><strong>${statusBadge(t.status).match(/>([^<]+)</)[1]}</strong>status</div>
+        </div>
+      </div>
+    `).join('');
+  }
+}
+
+async function loadReports() {
+  const d = await fetchJSON(`${API}/reports/top_klubovi?tenant_id=${currentTenant}&limit=20`);
+  if (d && d.top_klubovi) {
+    $('#repTable tbody').innerHTML = d.top_klubovi.map(k => `
+      <tr><td>${k.naziv}</td><td>${k.sport || '—'}</td><td>${k.grad || '—'}</td>
+        <td class="num">${fmt(k.invoices)}</td><td class="num">${fmt(k.clanovi)}</td></tr>
+    `).join('');
+  }
+}
+
+function load3D() {
+  const f = $('#graph3dIframe');
+  if (!f.src) f.src = '/3d';
+}
+
+async function loadTenantSelector() {
+  const d = await fetchJSON(`${API}/tenants`);
+  if (d && d.tenants) {
+    tenantsList = d.tenants;
+    $('#tenantSel').innerHTML = d.tenants.map(t =>
+      `<option value="${t.id}" ${t.id === currentTenant ? 'selected' : ''}>${t.display_name}</option>`
+    ).join('');
+  }
+}
+
+function activateTab(name) {
+  $$('.nav-item').forEach(n => n.classList.toggle('active', n.dataset.tab === name));
+  $$('.tab-content').forEach(c => c.classList.toggle('active', c.id === 'tab-' + name));
+  
+  const titles = {
+    dashboard: 'Dashboard',
+    erp: 'ERP — Financije',
+    crm: 'CRM — Klubovi',
+    osobe: 'Kontakti',
+    graph3d: '3D Graf',
+    tenants: 'Multi-tenant',
+    reports: 'Reports'
+  };
+  $('#pageTitle').textContent = titles[name] || name;
+  
+  if (name === 'dashboard') loadDashboard();
+  if (name === 'erp') loadERP();
+  if (name === 'crm') loadCRM();
+  if (name === 'osobe') loadOsobe();
+  if (name === 'graph3d') load3D();
+  if (name === 'tenants') loadTenants();
+  if (name === 'reports') loadReports();
+}
+
+// === M5: OCR upload (drag-and-drop) ===
+const ERP_API = '/api/erp';
+
+async function ocrLoadKlubSelectors() {
+  const sels = [document.getElementById('oc_klub'), document.getElementById('pn_klub')].filter(Boolean);
+  if (!sels.length) return;
+  // Use main API for klubovi list (admin-scoped)
+  const d = await fetch(`/api/klubovi?limit=400`).then(r => r.json()).catch(() => null);
+  if (!d) return;
+  const arr = Array.isArray(d) ? d : (d.rows || d.items || []);
+  const opts = '<option value="">— odaberi klub —</option>' + arr.map(k => `<option value="${k.id}">${k.naziv}</option>`).join('');
+  sels.forEach(s => { if (s) s.innerHTML = opts; });
+}
+
+let ocrParsed = null;
+let ocrUploadId = null;
+
+function ocrSetStatus(msg, color) {
+  const el = document.getElementById('ocrStatus');
+  if (el) { el.textContent = msg || ''; el.style.color = color || 'var(--text-2)'; }
+}
+
+async function ocrHandleFile(file) {
+  if (!file) return;
+  ocrSetStatus('⏳ Učitavam datoteku…', 'var(--yellow)');
+  const klubVal = document.getElementById('oc_klub')?.value || '';
+  const fd = new FormData();
+  fd.append('file', file);
+  if (klubVal) fd.append('klub_id', klubVal);
+  fd.append('tenant_id', currentTenant || 1);
+  fd.append('invoice_kind', document.getElementById('oc_kind')?.value || 'ostalo');
+  let r = await fetch(`${ERP_API}/ocr/upload`, {method: 'POST', body: fd});
+  if (!r.ok) { ocrSetStatus('❌ Upload pao: ' + r.status, 'var(--red)'); return; }
+  const j = await r.json();
+  ocrUploadId = j.upload_id;
+  ocrSetStatus(`✓ Uploaded (id=${ocrUploadId}, ${j.size} B). Pokrećem OCR + LLM 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});
+  if (!r.ok) { ocrSetStatus('❌ Parse pao: ' + r.status, 'var(--red)'); return; }
+  const p = await r.json();
+  if (!p.ok) { ocrSetStatus('❌ ' + (p.error || 'Parse fail'), 'var(--red)'); return; }
+  ocrParsed = p.extracted || {};
+  document.getElementById('oc_vendor_name').value  = ocrParsed.vendor_name  || '';
+  document.getElementById('oc_vendor_oib').value   = ocrParsed.vendor_oib   || '';
+  document.getElementById('oc_invoice_no').value   = ocrParsed.invoice_no   || '';
+  document.getElementById('oc_invoice_date').value = ocrParsed.invoice_date || '';
+  document.getElementById('oc_amount_net').value   = ocrParsed.amount_net   ?? '';
+  document.getElementById('oc_amount_vat').value   = ocrParsed.amount_vat   ?? '';
+  document.getElementById('oc_amount_gross').value = ocrParsed.amount_gross ?? '';
+  document.getElementById('oc_vat_rate').value     = ocrParsed.vat_rate     ?? '';
+  document.getElementById('oc_iban').value         = ocrParsed.iban         || '';
+  document.getElementById('oc_kind').value         = ocrParsed.category     || 'ostalo';
+  document.getElementById('oc_currency').value     = ocrParsed.currency     || 'EUR';
+  document.getElementById('oc_description').value  = ocrParsed.description  || '';
+  document.getElementById('oc_raw').textContent    = (p.raw_text_preview || '').slice(0, 4000);
+  document.getElementById('ocrResult').style.display = 'block';
+  ocrSetStatus(`✓ OCR ${p.ocr_method} (${p.raw_chars} znakova). Provjeri polja i klikni "Spremi račun".`, 'var(--green)');
+}
+
+function ocrInitDrop() {
+  const drop = document.getElementById('ocrDrop');
+  const inp = document.getElementById('ocrFile');
+  if (!drop || !inp) return;
+  drop.addEventListener('click', () => inp.click());
+  inp.addEventListener('change', e => { if (e.target.files[0]) ocrHandleFile(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) ocrHandleFile(f); });
+  document.getElementById('ocCancel')?.addEventListener('click', () => {
+    document.getElementById('ocrResult').style.display = 'none';
+    ocrParsed = null; ocrUploadId = null; ocrSetStatus('');
+    inp.value = '';
+  });
+  document.getElementById('ocSave')?.addEventListener('click', async () => {
+    const klub = document.getElementById('oc_klub').value;
+    if (!klub) { document.getElementById('ocSaveStatus').textContent = 'Odaberi klub'; return; }
+    const body = {
+      klub_id: parseInt(klub),
+      tenant_id: currentTenant || 1,
+      upload_id: ocrUploadId,
+      invoice_kind: document.getElementById('oc_kind').value || 'ostalo',
+      invoice_no: document.getElementById('oc_invoice_no').value,
+      vendor_name: document.getElementById('oc_vendor_name').value,
+      vendor_oib: document.getElementById('oc_vendor_oib').value,
+      invoice_date: document.getElementById('oc_invoice_date').value,
+      amount_net: parseFloat(document.getElementById('oc_amount_net').value) || null,
+      amount_vat: parseFloat(document.getElementById('oc_amount_vat').value) || null,
+      amount_gross: parseFloat(document.getElementById('oc_amount_gross').value),
+      vat_rate: parseFloat(document.getElementById('oc_vat_rate').value) || null,
+      iban_to: document.getElementById('oc_iban').value || null,
+      currency: document.getElementById('oc_currency').value || 'EUR',
+      category: document.getElementById('oc_kind').value || 'ostalo',
+      description: document.getElementById('oc_description').value || null,
+    };
+    document.getElementById('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) {
+      document.getElementById('ocSaveStatus').textContent = `✓ Spremljen kao #${j.invoice.id}`;
+      document.getElementById('ocSaveStatus').style.color = 'var(--green)';
+      setTimeout(() => { document.getElementById('ocrResult').style.display = 'none'; loadERP(); }, 1500);
+    } else {
+      document.getElementById('ocSaveStatus').textContent = '❌ ' + (j.detail || 'Greška');
+      document.getElementById('ocSaveStatus').style.color = 'var(--red)';
+    }
+  });
+}
+
+// === M6: Putni nalog form with live dnevnice preview ===
+let pnPreviewTimer = null;
+async function pnRefreshPreview() {
+  const df = document.getElementById('pn_from')?.value;
+  const dt = document.getElementById('pn_to')?.value;
+  const country = document.getElementById('pn_country')?.value || 'Hrvatska';
+  const km = parseFloat(document.getElementById('pn_km')?.value || 0);
+  const km_rate = parseFloat(document.getElementById('pn_kmrate')?.value || 0.5);
+  const tgt = document.getElementById('pn_preview');
+  if (!df || !dt) { if (tgt) tgt.textContent = 'Unesi datume za live obračun dnevnica…'; return; }
+  const url = `${ERP_API}/putni-nalog/dnevnice/preview?date_from=${encodeURIComponent(df)}&date_to=${encodeURIComponent(dt)}&country=${encodeURIComponent(country)}&km=${km}&km_rate=${km_rate}`;
+  const r = await fetch(url).then(r => r.json()).catch(() => null);
+  if (!r || !r.ok) { tgt.textContent = '⚠ Neuspješan obračun'; return; }
+  const d = r.preview;
+  tgt.innerHTML = `
+    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px">
+      <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:18px;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:18px;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 = document.getElementById(id);
+    if (el) el.addEventListener('input', () => {
+      clearTimeout(pnPreviewTimer);
+      pnPreviewTimer = setTimeout(pnRefreshPreview, 250);
+    });
+  });
+  document.getElementById('pnSave')?.addEventListener('click', async () => {
+    const klub = document.getElementById('pn_klub').value;
+    if (!klub) { document.getElementById('pnSaveStatus').textContent = 'Odaberi klub'; return; }
+    const body = {
+      klub_id: parseInt(klub),
+      tenant_id: currentTenant || 1,
+      voditelj_ime: document.getElementById('pn_voditelj').value,
+      putnici: (document.getElementById('pn_putnici').value || '').split(',').map(s => s.trim()).filter(Boolean),
+      svrha: document.getElementById('pn_svrha').value,
+      od_grada: document.getElementById('pn_od').value,
+      do_grada: document.getElementById('pn_do').value,
+      datum_polaska: document.getElementById('pn_from').value,
+      datum_povratka: document.getElementById('pn_to').value,
+      country: document.getElementById('pn_country').value,
+      vehicle_type: document.getElementById('pn_vehicle').value,
+      registracija_vozila: document.getElementById('pn_plate').value,
+      kilometara: parseFloat(document.getElementById('pn_km').value) || 0,
+      km_rate: parseFloat(document.getElementById('pn_kmrate').value) || 0.5,
+    };
+    document.getElementById('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) {
+      const pn = j.putni_nalog;
+      document.getElementById('pnSaveStatus').innerHTML = `✓ Putni nalog #${pn.id} kreiran (€${pn.cost_total})`;
+      document.getElementById('pnSaveStatus').style.color = 'var(--green)';
+      loadERP();
+    } else {
+      document.getElementById('pnSaveStatus').textContent = '❌ ' + (j.detail || 'Greška');
+      document.getElementById('pnSaveStatus').style.color = 'var(--red)';
+    }
+  });
+}
+
+ocrInitDrop();
+pnInit();
+ocrLoadKlubSelectors();
+
+// Init
+$$('.nav-item').forEach(n => n.addEventListener('click', () => activateTab(n.dataset.tab)));
+
+let searchTimeout;
+$('#klubSearch').addEventListener('input', e => {
+  clearTimeout(searchTimeout);
+  searchTimeout = setTimeout(() => loadCRM(e.target.value), 300);
+});
+$('#osobaSearch').addEventListener('input', e => {
+  clearTimeout(searchTimeout);
+  searchTimeout = setTimeout(() => loadOsobe(e.target.value), 300);
+});
+$('#tenantSel').addEventListener('change', e => {
+  currentTenant = parseInt(e.target.value);
+  activateTab($('.nav-item.active').dataset.tab);
+});
+
+(async () => {
+  await loadTenantSelector();
+  await loadDashboard();
+})();
+</script>
+</body>
+</html>
@@ -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>