Dasko/GoNtech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Artikli: šifre, tip i jedinica mere; magacin UI; servis predračun

Browse Source 
Šifre artikala:
- Kôd kategorije kao prefiks auto-šifre (PREFIKS-NNNN), otporno na brisanje (max+1)
- Tip artikla (proizvod/usluga/trošak) i jedinica mere
- Arhiviranje artikala umesto brisanja kad su već u prometu

Magacin:
- Paginacija 50 po stranici
- Klikabilna šifra (vodi na karticu), opisniji placeholder pretrage
- Ispravka: pretraga više ne okida animaciju redova (globalni htmx listener
  umesto hx-on atributa koji se ne okida u ovoj htmx verziji)
- Dugmad akcija ne prelamaju tekst; uklonjen content-visibility (secanje pri skrolu)

Servis: predračun (nova stranica i ruta)
This commit is contained in:
Dalibor Marković
2026-06-20 18:40:01 +02:00
parent a8f368ca06
commit b0250b2917
24 changed files with 930 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/stranice/kategorije.html
+16 -1
View File
@@ -47,6 +47,12 @@
<input type="text" name="naziv" placeholder="npr. Memorija, Diskovi, Kablovi..."
style="width:100%;">
</div>
<div>
<label class="polje-labela">Kôd (prefiks šifre)</label>
<input type="text" name="kod" placeholder="npr. MEM (daje šifre MEM-0001)"
maxlength="10" style="width:100%;text-transform:uppercase;">
<div class="pomocni-tekst" style="margin-top:4px;">Samo slova i brojevi. Prazno = šifre kreću sa ART-.</div>
</div>
<div>
<label class="polje-labela">Opis</label>
<input type="text" name="opis" placeholder="Kratak opis kategorije..."
@@ -76,7 +82,10 @@
{{range .Kategorije}}
<div class="kat-red animiraj" style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:0.5px solid var(--ivica);">
<div style="flex:1;">
<div style="font-size:14px;color:var(--tekst-glavni);">{{.Naziv}}</div>
<div style="font-size:14px;color:var(--tekst-glavni);">
{{.Naziv}}
{{if .Kod}}<span style="font-size:11px;font-family:monospace;color:var(--tekst-sporedni);background:var(--pozadina);border:0.5px solid var(--ivica);border-radius:4px;padding:1px 6px;margin-left:6px;">{{.Kod}}</span>{{end}}
</div>
{{if .Opis}}
<div style="font-size:12px;color:var(--tekst-sporedni);margin-top:2px;">{{.Opis}}</div>
{{end}}
@@ -98,6 +107,12 @@
<input type="text" name="naziv" value="{{.Naziv}}" required
style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;">
</div>
<div>
<label class="polje-labela">Kôd (prefiks šifre)</label>
<input type="text" name="kod" value="{{.Kod}}" maxlength="10"
placeholder="npr. MEM"
style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;text-transform:uppercase;">
</div>
<div>
<label class="polje-labela">Opis</label>
<input type="text" name="opis" value="{{.Opis}}"
web/templates/stranice/magacin.html
+62 -9
View File
@@ -11,6 +11,15 @@
{{if .Obrisan}}
<div class="poruka-uspeh">Artikal je uspešno obrisan.</div>
{{end}}
{{if .Arhiviran}}
<div class="poruka-uspeh">Artikal je u prometu pa je arhiviran umesto obrisan. Možete ga pronaći među arhiviranim artiklima.</div>
{{end}}
{{if .Vracen}}
<div class="poruka-uspeh">Artikal je vraćen u aktivnu listu.</div>
{{end}}
{{if .Greska}}
<div class="poruka-greska">Operacija nije uspela. Pokušajte ponovo.</div>
{{end}}
{{if .Premesten}}
<div class="poruka-uspeh">Artikal je premešten u drugu kategoriju.</div>
{{end}}
@@ -26,10 +35,10 @@
</div>
<!-- pretraga i filteri — interaktivna pretraga (hx-trigger) -->
<form method="GET" action="/magacin" class="kolona" style="gap:10px;"
<form method="GET" action="/magacin" class="kolona" style="gap:10px;" id="magacin-filteri"
hx-get="/magacin" hx-target="#magacin-rezultati" hx-select="#magacin-rezultati" hx-swap="innerHTML" hx-push-url="true">
<input type="text" name="pretraga" value="{{.Filter.Pretraga}}"
placeholder="Pretraži artikle..."
placeholder="Pretraži po nazivu, šifri, barkodu, lokaciji..."
style="width:100%;"
hx-trigger="keyup changed delay:300ms, search"
hx-get="/magacin" hx-target="#magacin-rezultati" hx-select="#magacin-rezultati" hx-swap="innerHTML" hx-push-url="true">
@@ -48,6 +57,12 @@
hx-get="/magacin" hx-target="#magacin-rezultati" hx-select="#magacin-rezultati" hx-swap="innerHTML" hx-push-url="true">
Samo kritični
</label>
<label style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--tekst-sporedni);cursor:pointer;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;background:var(--kartica);white-space:nowrap;">
<input type="checkbox" name="arhivirani" value="1" {{if .PrikazArhivirani}}checked{{end}}
hx-trigger="change"
hx-get="/magacin" hx-target="#magacin-rezultati" hx-select="#magacin-rezultati" hx-swap="innerHTML" hx-push-url="true">
Arhivirani
</label>
<button type="submit" class="btn-primarno">
Traži
</button>
@@ -63,6 +78,7 @@
<table class="magacin-tabela tabela">
<thead>
<tr style="border-bottom:0.5px solid var(--ivica);">
<th style="padding:12px 16px;text-align:left;font-size:12px;font-weight:500;color:var(--tekst-jak);">Šifra</th>
<th style="padding:12px 16px;text-align:left;font-size:12px;font-weight:500;color:var(--tekst-jak);">Naziv</th>
<th style="padding:12px 16px;text-align:left;font-size:12px;font-weight:500;color:var(--tekst-jak);">Kategorija</th>
<th style="padding:12px 16px;text-align:center;font-size:12px;font-weight:500;color:var(--tekst-jak);">Količina</th>
@@ -74,14 +90,19 @@
<tbody>
{{range .Artikli}}
<tr class="animiraj red-tabele">
<td style="padding:12px 16px;font-size:14px;color:var(--tekst-glavni);">{{.Naziv}}</td>
<td style="padding:12px 16px;font-size:13px;font-family:monospace;white-space:nowrap;">{{if .Sifra}}<a href="/magacin/kartica/{{.ID}}" class="link-naziv" style="color:var(--tekst-sporedni);">{{.Sifra}}</a>{{else}}—{{end}}</td>
<td style="padding:12px 16px;font-size:14px;"><a href="/magacin/kartica/{{.ID}}" class="link-naziv" style="color:var(--tekst-glavni);font-weight:500;">{{.Naziv}}</a></td>
<td style="padding:12px 16px;font-size:13px;color:var(--tekst-sporedni);">
{{if .KategorijaNaziv}}{{.KategorijaNaziv}}{{else}}—{{end}}
</td>
<td style="padding:12px 16px;text-align:center;">
{{if .PratiLager}}
<span style="font-size:14px;font-weight:500;color:{{if .KriticnaZaliha}}#dc2626{{else}}#16a34a{{end}};">
{{.Kolicina}}
</span>
{{else}}
<span style="font-size:12px;color:var(--tekst-sporedni);">{{if eq .Tip "usluga"}}usluga{{else}}trošak{{end}}</span>
{{end}}
</td>
<td style="padding:12px 16px;text-align:right;font-size:14px;color:var(--tekst-glavni);">{{printf "%.0f" .ProdajnaCena}} din</td>
<td style="padding:12px 16px;font-size:13px;color:var(--tekst-sporedni);">
@@ -89,9 +110,6 @@
</td>
<td style="padding:12px 16px;text-align:center;">
<div style="display:flex;align-items:center;justify-content:center;gap:8px;">
<a href="/magacin/kartica/{{.ID}}" class="btn-sekundarno-malo">
Kartica
</a>
{{if index $.Dozvole "artikal.izmeni"}}
<a href="/magacin/izmeni/{{.ID}}" class="btn-primarno-malo">
Izmeni
@@ -102,11 +120,18 @@
{{template "premestiMeni" (dict "ID" .ID "Kategorije" $.Kategorije "Prefiks" "tab")}}
{{end}}{{end}}
{{if index $.Dozvole "artikal.obrisi"}}
{{if $.PrikazArhivirani}}
<a href="/magacin/vrati/{{.ID}}" class="btn-sekundarno-malo"
data-potvrda="Vratiti ovaj artikal u aktivnu listu?">
Vrati
</a>
{{else}}
<a href="/magacin/obrisi/{{.ID}}" class="btn-obrisi-malo"
data-potvrda="Da li ste sigurni da želite da obrišete ovaj artikal?">
Obriši
</a>
{{end}}
{{end}}
</div>
</td>
</tr>
@@ -128,13 +153,15 @@
<div class="kartica magacin-kartica animiraj">
<div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;flex-wrap:wrap;">
<div>
<div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">{{.Naziv}}</div>
<a href="/magacin/kartica/{{.ID}}" class="link-naziv" style="display:inline-block;font-size:15px;font-weight:500;color:var(--tekst-glavni);">{{.Naziv}}</a>
{{if .Sifra}}
<div style="font-size:12px;font-family:monospace;color:var(--tekst-sporedni);margin-top:2px;">{{.Sifra}}</div>
{{end}}
{{if .KategorijaNaziv}}
<div style="font-size:12px;color:var(--tekst-sporedni);margin-top:2px;">{{.KategorijaNaziv}}</div>
{{end}}
</div>
<div style="display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;">
<a href="/magacin/kartica/{{.ID}}" class="btn-sekundarno-malo">Kartica</a>
{{if index $.Dozvole "artikal.izmeni"}}
<a href="/magacin/izmeni/{{.ID}}" class="btn-primarno-malo">Izmeni</a>
{{template "promeniCenuMeni" (dict "ID" .ID "Cena" .ProdajnaCena)}}
@@ -143,17 +170,29 @@
{{template "premestiMeni" (dict "ID" .ID "Kategorije" $.Kategorije "Prefiks" "kart")}}
{{end}}{{end}}
{{if index $.Dozvole "artikal.obrisi"}}
{{if $.PrikazArhivirani}}
<a href="/magacin/vrati/{{.ID}}" class="btn-sekundarno-malo"
data-potvrda="Vratiti ovaj artikal u aktivnu listu?">
Vrati
</a>
{{else}}
<a href="/magacin/obrisi/{{.ID}}" class="btn-obrisi-malo"
data-potvrda="Da li ste sigurni da želite da obrišete ovaj artikal?">
Obriši
</a>
{{end}}
{{end}}
</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:10px;">
<div class="pomocni-tekst">
{{if .PratiLager}}
<span style="color:var(--tekst-glavni);font-weight:500;">Količina:</span>
<span style="font-weight:500;color:{{if .KriticnaZaliha}}#dc2626{{else}}#16a34a{{end}};">{{.Kolicina}}</span>
<span style="font-weight:500;color:{{if .KriticnaZaliha}}#dc2626{{else}}#16a34a{{end}};">{{.Kolicina}} {{.JedinicaMere}}</span>
{{else}}
<span style="color:var(--tekst-glavni);font-weight:500;">Tip:</span>
<span style="color:var(--tekst-sporedni);">{{if eq .Tip "usluga"}}usluga{{else}}trošak{{end}}</span>
{{end}}
</div>
<div class="pomocni-tekst">
<span style="color:var(--tekst-glavni);font-weight:500;">Cena:</span> {{printf "%.0f" .ProdajnaCena}} din
@@ -190,6 +229,20 @@
</div><!-- kraj #magacin-rezultati -->
</div>
<script>
// Gasi stagger animaciju redova pri pretrazi/filtriranju (ali NE pri paginaciji).
// hx-on atribut ne radi pouzdano u ovoj htmx verziji, pa koristimo globalni listener:
// kada zahtev kreće sa elementa unutar #magacin-filteri, dodamo .bez-anim na kontejner
// rezultata. Pošto se menja samo innerHTML kontejnera, klasa ostaje i kroz naredne zamene.
document.body.addEventListener('htmx:beforeRequest', function (e) {
var elt = e.detail && e.detail.elt;
if (elt && elt.closest && elt.closest('#magacin-filteri')) {
var rez = document.getElementById('magacin-rezultati');
if (rez) rez.classList.add('bez-anim');
}
});
</script>
{{end}}
{{/* padajući meni za premeštanje artikla — prima dict {ID, Kategorije}; koristi se i u tabeli i u mobilnoj kartici */}}
web/templates/stranice/magacin_forma.html
+62 -6
View File
@@ -29,8 +29,8 @@
<div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
<div>
<label class="polje-labela">Šifra artikla</label>
<input type="text" name="sifra" value="{{.Artikal.Sifra}}"
placeholder="npr. ART-00001"
<input type="text" name="sifra" id="sifra-input" value="{{.Artikal.Sifra}}"
placeholder="npr. KOMP-0001"
style="width:100%;font-family:monospace;">
<div style="font-size:11px;color:var(--tekst-slabi);margin-top:4px;">Ako ostaviš prazno, šifra se automatski dodeljuje.</div>
</div>
@@ -53,6 +53,32 @@
style="width:100%;">
</div>
<!-- tip i jedinica mere -->
<div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
<div>
<label class="polje-labela">Tip artikla</label>
<select name="tip" id="tip-artikla" style="width:100%;">
<option value="proizvod" {{if eq .Artikal.Tip "proizvod"}}selected{{end}}>Proizvod (prati lager)</option>
<option value="usluga" {{if eq .Artikal.Tip "usluga"}}selected{{end}}>Usluga</option>
<option value="trosak" {{if eq .Artikal.Tip "trosak"}}selected{{end}}>Trošak</option>
</select>
</div>
<div>
<label class="polje-labela">Jedinica mere</label>
{{$jm := .Artikal.JedinicaMere}}
<select name="jedinica_mere" style="width:100%;">
<option value="kom" {{if eq $jm "kom"}}selected{{end}}>kom</option>
<option value="sat" {{if eq $jm "sat"}}selected{{end}}>sat</option>
<option value="set" {{if eq $jm "set"}}selected{{end}}>set</option>
<option value="m" {{if eq $jm "m"}}selected{{end}}>m</option>
<option value="m2" {{if eq $jm "m2"}}selected{{end}}>m²</option>
<option value="l" {{if eq $jm "l"}}selected{{end}}>l</option>
<option value="kg" {{if eq $jm "kg"}}selected{{end}}>kg</option>
<option value="pak" {{if eq $jm "pak"}}selected{{end}}>pak</option>
</select>
</div>
</div>
<!-- kategorija -->
<div>
<label class="polje-labela">Kategorija</label>
@@ -72,8 +98,8 @@
style="width:100%;resize:vertical;">{{.Artikal.Opis}}</textarea>
</div>
<!-- količina i minimum -->
<div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
<!-- količina i minimum (samo za proizvode) -->
<div class="forma-grid-2" data-lager style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
<div>
<label class="polje-labela">Količina na stanju</label>
<input type="number" name="kolicina" value="{{.Artikal.Kolicina}}" min="0" style="width:100%;">
@@ -102,8 +128,8 @@
placeholder="prazno = po kategoriji / globalna">
</div>
<!-- lokacija -->
<div>
<!-- lokacija (samo za proizvode) -->
<div data-lager>
<label class="polje-labela">Lokacija u magacinu</label>
<input type="text" name="lokacija" value="{{.Artikal.Lokacija}}"
placeholder="npr. Polica A3, Kutija 2..."
@@ -130,4 +156,34 @@
</form>
</div>
</div>
<script>
(function () {
// sakrivanje polja lagera za usluge i troškove
var tip = document.getElementById('tip-artikla');
var lager = document.querySelectorAll('[data-lager]');
function azurirajLager() {
var prati = tip.value === 'proizvod';
lager.forEach(function (el) { el.style.display = prati ? '' : 'none'; });
}
tip.addEventListener('change', azurirajLager);
azurirajLager();
// auto-predlog šifre pri promeni kategorije (samo za nov artikal i ako šifra nije ručno menjana)
var kat = document.querySelector('select[name="kategorija_id"]');
var sifra = document.getElementById('sifra-input');
var jeIzmena = {{if .Izmena}}true{{else}}false{{end}};
if (sifra) {
sifra.addEventListener('input', function () { sifra.dataset.rucno = '1'; });
}
if (kat && sifra && !jeIzmena) {
kat.addEventListener('change', function () {
if (sifra.dataset.rucno === '1' && sifra.value !== '') return;
fetch('/magacin/sledeca-sifra?kategorija=' + encodeURIComponent(kat.value))
.then(function (r) { return r.ok ? r.text() : ''; })
.then(function (t) { if (t) sifra.value = t; });
});
}
})();
</script>
{{end}}
web/templates/stranice/podesavanja_servis.html
+12
View File
@@ -33,6 +33,18 @@
</div>
</div>
<div style="max-width:280px;">
<label for="predracun_rok_dana" class="polje-labela">
Rok važenja predračuna (dana)
</label>
<input type="number" id="predracun_rok_dana" name="predracun_rok_dana"
min="1" max="90" value="{{.PredracunRokDana}}"
style="width:100%;">
<div class="pomocni-tekst" style="margin-top:6px;">
Koliko dana važi predračun od dana izdavanja. Štampa se na dokumentu kao „Važi do".
</div>
</div>
</div>
<div style="display:flex;justify-content:flex-end;margin-top:20px;">
web/templates/stranice/prodaja_stampa.html
+1 -1
View File
@@ -81,7 +81,7 @@
{{range .Stavke}}
<tr>
<td>{{.ArtikalNaziv}}</td>
<td>{{.Kolicina}}</td>
<td>{{.Kolicina}} {{.JedinicaMere}}</td>
<td>{{printf "%.2f" .CenaPoKomadu}} din</td>
<td>{{printf "%.2f" .Ukupno}} din</td>
</tr>
web/templates/stranice/servis_detalji.html
+3
View File
@@ -61,6 +61,9 @@
<a href="/servis/{{.Nalog.ID}}/stampa" target="_blank" class="btn-sekundarno">
Radni nalog
</a>
<a href="/servis/{{.Nalog.ID}}/predracun" target="_blank" class="btn-sekundarno">
Predračun
</a>
{{end}}
{{if or (eq .Nalog.Status "Završeno") (eq .Nalog.Status "Preuzeto")}}
<a href="/servis/{{.Nalog.ID}}/otpremnica" target="_blank" class="btn-sekundarno">
web/templates/stranice/servis_predracun.html
+263
View File
@@ -0,0 +1,263 @@
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Predračun — {{.Nalog.BrojNaloga}}</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-size: 13px; color: #111; background: #fff; }
.strana { max-width: 780px; margin: 0 auto; padding: 32px 40px; }
/* zaglavlje */
.zaglavlje { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #111; gap: 20px; }
.firma-naziv { font-size: 20px; font-weight: 700; }
.firma-info { font-size: 11px; color: #555; margin-top: 4px; line-height: 1.7; }
.dok-naslov { text-align: right; }
.dok-tip { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #555; margin-bottom: 4px; }
.dok-broj { font-size: 22px; font-weight: 700; font-family: monospace; }
.dok-datum { font-size: 12px; color: #555; margin-top: 6px; }
/* strane */
.strane-blok { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.strana-kartica { padding: 12px 14px; border: 0.5px solid #ddd; border-radius: 6px; }
.strana-tip { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: #888; margin-bottom: 6px; }
.strana-naziv { font-size: 14px; font-weight: 600; }
.strana-info { font-size: 12px; color: #555; margin-top: 3px; line-height: 1.6; }
/* odeljci */
.odeljak { margin-bottom: 18px; }
.odeljak-naslov { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: #555; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 0.5px solid #ccc; }
/* podaci */
.podaci-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.polje-labela { font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.polje-vrednost { font-size: 13px; font-weight: 500; }
.polje-vrednost-mono { font-family: monospace; font-size: 13px; font-weight: 500; }
.polje-tekst { font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.prazno { color: #aaa; font-style: italic; }
/* tabela delova */
.tabela { width: 100%; border-collapse: collapse; margin-top: 6px; }
.tabela th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #555; padding: 6px 8px; border-bottom: 1.5px solid #111; text-align: left; }
.tabela th.desno { text-align: right; }
.tabela td { padding: 7px 8px; border-bottom: 0.5px solid #ddd; font-size: 13px; vertical-align: middle; }
.tabela td.desno { text-align: right; }
.tabela .ukupno-red td { font-weight: 600; border-top: 1.5px solid #111; border-bottom: none; background: #fafafa; }
/* iznos procene */
.naplata-blok { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1.5px solid #111; border-radius: 6px; margin-top: 12px; }
.naplata-labela { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.naplata-iznos { font-size: 22px; font-weight: 700; }
/* rok važenja */
.rok-blok { padding: 10px 14px; border: 0.5px solid #fcd34d; background: #fffbeb; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; }
.rok-tekst { font-size: 12px; color: #92400e; font-weight: 500; }
.rok-datum { font-size: 15px; font-weight: 700; color: #92400e; }
/* potpisi */
.potpisi { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; padding-top: 16px; border-top: 0.5px solid #ccc; }
.potpis-linija { border-top: 1px solid #888; margin-top: 44px; padding-top: 6px; font-size: 11px; color: #555; text-align: center; }
/* napomena na dnu */
.napomena-dno { margin-top: 20px; padding: 10px 14px; background: #f9fafb; border-left: 3px solid #ddd; font-size: 12px; color: #555; line-height: 1.6; }
@media print {
body { font-size: 12px; }
.strana { padding: 16px 20px; max-width: 100%; }
.dugme-stampa { display: none !important; }
@page { size: A4; margin: 12mm 14mm; }
}
.dugme-stampa { position: fixed; bottom: 24px; right: 24px; background: #111; color: #fff; border: none; padding: 12px 22px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.dugme-stampa:hover { background: #333; }
</style>
</head>
<body>
<div class="strana">
<!-- zaglavlje -->
<div class="zaglavlje">
<div>
<div class="firma-naziv">{{if .NazivFirme}}{{.NazivFirme}}{{else}}— naziv firme —{{end}}</div>
<div class="firma-info">
{{if .Podnazlov}}{{.Podnazlov}}<br>{{end}}
{{if .Adresa}}{{.Adresa}}<br>{{end}}
{{if .Telefon}}Tel: {{.Telefon}}<br>{{end}}
{{if .PIB}}PIB: {{.PIB}}{{end}}
</div>
</div>
<div style="display:flex;align-items:flex-start;gap:14px;">
<div class="dok-naslov">
<div class="dok-tip">Predračun / Ponuda</div>
<div class="dok-broj">{{.Nalog.BrojNaloga}}</div>
<div class="dok-datum">Datum izdavanja: {{.DatumIzdavanja.Format "02.01.2006."}}</div>
<div class="dok-datum">Važi do: {{.VaziDo.Format "02.01.2006."}}</div>
</div>
{{if .QRKod}}
<img src="data:image/png;base64,{{.QRKod}}" width="76" height="76"
alt="QR {{.Nalog.BrojNaloga}}"
style="image-rendering:pixelated;border:1px solid #ddd;border-radius:4px;flex-shrink:0;">
{{end}}
</div>
</div>
<!-- izdavalac i klijent -->
<div class="strane-blok">
<div class="strana-kartica">
<div class="strana-tip">Izdaje</div>
<div class="strana-naziv">{{if .NazivFirme}}{{.NazivFirme}}{{else}}—{{end}}</div>
<div class="strana-info">
{{if .Adresa}}{{.Adresa}}<br>{{end}}
{{if .Telefon}}{{.Telefon}}{{end}}
</div>
</div>
<div class="strana-kartica">
<div class="strana-tip">Za klijenta</div>
{{if .KlijentNaziv}}
<div class="strana-naziv">{{.KlijentNaziv}}</div>
<div class="strana-info">
{{if .Klijent}}
{{if .Klijent.Telefon}}Tel: {{.Klijent.Telefon}}<br>{{end}}
{{if .Klijent.Email}}{{.Klijent.Email}}<br>{{end}}
{{if .Klijent.Mesto}}{{.Klijent.Mesto}}{{end}}
{{end}}
</div>
{{else}}
<div class="strana-naziv prazno">— klijent nije naveden —</div>
{{end}}
</div>
</div>
<!-- uređaj na servisu -->
<div class="odeljak">
<div class="odeljak-naslov">Uređaj na servisu</div>
<div class="podaci-grid" style="margin-bottom:10px;">
<div>
<div class="polje-labela">Naziv uređaja</div>
<div class="polje-vrednost">{{.Nalog.Uredjaj}}</div>
</div>
<div>
<div class="polje-labela">Serijski broj</div>
<div class="polje-vrednost-mono">{{if .Nalog.SerijskiBroj}}{{.Nalog.SerijskiBroj}}{{else}}<span class="prazno">—</span>{{end}}</div>
</div>
{{if .TehnicarNaziv}}
<div>
<div class="polje-labela">Tehničar</div>
<div class="polje-vrednost">{{.TehnicarNaziv}}</div>
</div>
{{end}}
</div>
</div>
<!-- opis kvara -->
<div class="odeljak">
<div class="odeljak-naslov">Utvrđeni kvar</div>
<div class="polje-tekst">{{if .Nalog.OpisKvara}}{{.Nalog.OpisKvara}}{{else}}<span class="prazno">—</span>{{end}}</div>
</div>
<!-- predloženi delovi -->
{{if .ServisniDelovi}}
<div class="odeljak">
<div class="odeljak-naslov">Predloženi delovi i materijal</div>
<table class="tabela">
<thead>
<tr>
<th>Artikal</th>
<th class="desno" style="width:70px;">Kol.</th>
<th class="desno" style="width:120px;">Cena/kom</th>
<th class="desno" style="width:120px;">Ukupno</th>
</tr>
</thead>
<tbody>
{{range .ServisniDelovi}}
<tr>
<td>{{.ArtikalNaziv}}</td>
<td class="desno">{{.Kolicina}}</td>
<td class="desno">{{printf "%.2f" .CenaKomada}} din</td>
<td class="desno">{{printf "%.2f" .Ukupno}} din</td>
</tr>
{{end}}
<tr class="ukupno-red">
<td colspan="3">Ukupno delovi</td>
<td class="desno">{{printf "%.2f" .UkupnoDelovi}} din</td>
</tr>
</tbody>
</table>
</div>
{{end}}
<!-- procena troška -->
{{if .ImaCenuRada}}
<div class="odeljak">
<div class="odeljak-naslov">Procena troška</div>
<table class="tabela" style="margin-bottom:10px;">
<tbody>
{{if .CenaRaspon}}
<tr>
<td>Cena rada (procena)</td>
<td class="desno" style="width:200px;">{{printf "%.2f" .CenaRadaOd}} – {{printf "%.2f" .CenaRadaDo}} din</td>
</tr>
{{else}}
<tr>
<td>Cena rada</td>
<td class="desno" style="width:200px;">{{printf "%.2f" .CenaRada}} din</td>
</tr>
{{end}}
{{if gt .UkupnoDelovi 0.0}}
<tr>
<td>Predloženi delovi i materijal</td>
<td class="desno">{{printf "%.2f" .UkupnoDelovi}} din</td>
</tr>
{{end}}
</tbody>
</table>
<div class="naplata-blok">
<div class="naplata-labela">Procena ukupnog troška:</div>
{{if .CenaRaspon}}
<div class="naplata-iznos">{{printf "%.2f" .UkupnoOd}} – {{printf "%.2f" .UkupnoDo}} din</div>
{{else}}
<div class="naplata-iznos">{{printf "%.2f" .Ukupno}} din</div>
{{end}}
</div>
</div>
{{else}}
<div class="odeljak">
<div class="napomena-dno">Procena troška još nije utvrđena.</div>
</div>
{{end}}
<!-- rok važenja -->
<div class="odeljak">
<div class="rok-blok">
<div class="rok-tekst">Ova ponuda važi do:</div>
<div class="rok-datum">{{.VaziDo.Format "02.01.2006."}}</div>
</div>
</div>
{{if .Nalog.Napomena}}
<div class="napomena-dno"><strong>Napomena:</strong> {{.Nalog.Napomena}}</div>
{{end}}
<div class="napomena-dno">
Ovo je predračun (ponuda) i ne predstavlja fiskalni dokument. Navedene cene su procena na osnovu
utvrđenog kvara; konačan iznos može odstupati ako se tokom servisa otkriju dodatni kvarovi.
Servis se započinje nakon saglasnosti klijenta.
</div>
<!-- potpisi -->
<div class="potpisi">
<div>
<div class="potpis-linija">Ponudu izdao (firma)</div>
</div>
<div>
<div class="potpis-linija">Saglasan sa ponudom (klijent)</div>
</div>
</div>
</div>
<button class="dugme-stampa" onclick="window.print()">Štampaj</button>
</body>
</html>