Artikli: šifre, tip i jedinica mere; magacin UI; servis predračun
Š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:
@@ -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>
|
||||
Reference in New Issue
Block a user