Servis: radni nalog za servisera, hover napomena, responsive popravke
- Nalepnica: uklonjen QR (ostaje na uređaju u servisu, klijent nema šta da skenira);
oslobođen prostor iskorišćen za telefon klijenta i datume (prijem + rok)
- Radni nalog: obrisani „servis_stampa" i „servis_predracun"; nov interni
„servis_radni_nalog" (ruta /servis/{id}/radni-nalog) sa podacima samo za
servisera, bez cena, sa barkodom i praznim poljima (dijagnoza, urađen rad, potpis)
- Forma „Izmeni nalog": kartice „Serviser" i „Avans i napomena" spojene u jednu
„Serviser, avans i napomena"
- Servis kanban: dugme uz SN broj otvara internu napomenu (hover na desktopu,
tap→focus na mobilnom); okidač na omotaču da napomena ne treperi
- Detalji naloga (responsive): forme „Dodaj rad/deo" izvučene iz inline grid-a u
klase + @media (2 kolone na telefonu); tabele radova/delova u tabela-skrol
This commit is contained in:
@@ -48,8 +48,25 @@
|
||||
{{range $.Nalozi}}
|
||||
{{if eq .Status $status}}
|
||||
<a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/servis/{{.ID}}" class="kartica kanban-karta">
|
||||
<div style="font-size:14px;font-weight:500;color:var(--sb-akcent);font-family:monospace;">
|
||||
{{.BrojNaloga}}
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<span style="font-size:14px;font-weight:500;color:var(--sb-akcent);font-family:monospace;">{{.BrojNaloga}}</span>
|
||||
{{if .Napomena}}
|
||||
<!-- dugme uz SN broj otvara internu napomenu (hover na desktopu, tap→focus na mobilnom);
|
||||
onclick sprečava da klik na dugme otvori sam nalog (kartica je hx-boost link) -->
|
||||
<span class="napomena-omot">
|
||||
<button type="button" class="napomena-dugme" aria-label="Interna napomena"
|
||||
onclick="event.preventDefault();event.stopPropagation();">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="8" y1="13" x2="16" y2="13"/>
|
||||
<line x1="8" y1="17" x2="13" y2="17"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="karta-napomena">{{.Napomena}}</div>
|
||||
</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<div style="font-size:13px;color:var(--tekst-glavni);margin-top:4px;">{{.Uredjaj}}</div>
|
||||
{{if .KlijentNaziv}}
|
||||
|
||||
@@ -47,14 +47,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
{{if not (or (eq .Nalog.Status "Završeno") (eq .Nalog.Status "Preuzeto"))}}
|
||||
<a href="/servis/{{.Nalog.ID}}/stampa" target="_blank" class="btn-sekundarno">
|
||||
<a href="/servis/{{.Nalog.ID}}/radni-nalog" 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">
|
||||
Otpremnica
|
||||
@@ -263,7 +258,7 @@
|
||||
{{if index .Dozvole "servis.izmeni"}}
|
||||
<form method="POST" action="/servis/{{.Nalog.ID}}/radovi" style="margin-bottom:16px;" data-refresh="#radovi-spisak">
|
||||
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
||||
<div style="display:grid;grid-template-columns:1fr 80px 120px auto;gap:10px;align-items:flex-end;">
|
||||
<div class="detalji-forma-rad">
|
||||
<div>
|
||||
<label style="font-size:12px;color:var(--tekst-sporedni);display:block;margin-bottom:4px;">Usluga</label>
|
||||
<select name="usluga_id" id="rad-usluga" style="width:100%;" required>
|
||||
@@ -289,6 +284,7 @@
|
||||
<!-- lista radova -->
|
||||
<div id="radovi-spisak">
|
||||
{{if .ServisniRadovi}}
|
||||
<div class="tabela-skrol">
|
||||
<table class="tabela">
|
||||
<thead>
|
||||
<tr style="border-bottom:0.5px solid var(--ivica);">
|
||||
@@ -322,6 +318,7 @@
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{else}}
|
||||
<div style="font-size:13px;color:var(--tekst-sporedni);text-align:center;padding:16px 0;">
|
||||
Nema unetih radova. Dodaj uslugu iz cenovnika.
|
||||
@@ -344,7 +341,7 @@
|
||||
<label style="font-size:12px;color:var(--tekst-sporedni);display:block;margin-bottom:4px;">Kategorija</label>
|
||||
<select id="deo-kategorija" style="width:100%;"></select>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 70px 80px 120px auto;gap:10px;align-items:flex-end;">
|
||||
<div class="detalji-forma-deo">
|
||||
<div>
|
||||
<label style="font-size:12px;color:var(--tekst-sporedni);display:block;margin-bottom:4px;">Artikal</label>
|
||||
<select name="artikal_id" id="deo-artikal" style="width:100%;" required>
|
||||
@@ -373,6 +370,7 @@
|
||||
<!-- lista delova -->
|
||||
<div id="delovi-spisak">
|
||||
{{if .ServisniDelovi}}
|
||||
<div class="tabela-skrol">
|
||||
<table class="tabela">
|
||||
<thead>
|
||||
<tr style="border-bottom:0.5px solid var(--ivica);">
|
||||
@@ -412,6 +410,7 @@
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{else}}
|
||||
<div style="font-size:13px;color:var(--tekst-sporedni);text-align:center;padding:16px 0;">
|
||||
Nema ugrađenih delova za ovaj nalog.
|
||||
|
||||
@@ -98,22 +98,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== KARTICA: TEHNIČAR (izmena) / KLIJENT I TEHNIČAR (novi) ===================== -->
|
||||
{{if .Izmena}}
|
||||
<!-- pri izmeni klijent se ne menja (vezan pri prijemu) — ostaje samo serviser -->
|
||||
<div class="kartica forma-kartica animiraj" style="margin-bottom:20px;">
|
||||
<div class="sekcija-naslov">Serviser</div>
|
||||
<div>
|
||||
<label class="polje-labela">Serviser</label>
|
||||
<select name="tehnicar_id" style="width:100%;">
|
||||
<option value="">— nedodeljen —</option>
|
||||
{{range .Tehnicari}}
|
||||
<option value="{{.ID}}"{{if eq .ID $.Nalog.TehnicarIDVrednost}}selected{{end}}>{{.KorisnickoIme}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<!-- ===================== KARTICA: KLIJENT I SERVISER (samo novi nalog) ===================== -->
|
||||
{{if not .Izmena}}
|
||||
<div class="kartica forma-kartica animiraj" x-data="klijentNalog" style="margin-bottom:20px;">
|
||||
<div class="sekcija-naslov">Klijent</div>
|
||||
<div class="kolona" style="gap:12px;">
|
||||
@@ -269,11 +255,23 @@
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<!-- ===================== KARTICA: AVANS, GARANCIJA I NAPOMENA ===================== -->
|
||||
<!-- ===================== KARTICA: SERVISER, AVANS I NAPOMENA ===================== -->
|
||||
<div class="kartica forma-kartica animiraj" style="margin-bottom:20px;">
|
||||
<div class="sekcija-naslov">{{if .Izmena}}Avans, garancija i napomena{{else}}Avans i napomena{{end}}</div>
|
||||
<div class="sekcija-naslov">{{if .Izmena}}Serviser, avans i napomena{{else}}Avans i napomena{{end}}</div>
|
||||
<!-- cena rada se računa iz radova (usluga) u detaljima naloga; ovde samo avans -->
|
||||
<div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;">
|
||||
{{if .Izmena}}
|
||||
<!-- pri izmeni klijent se ne menja (vezan pri prijemu) — ostaje samo serviser -->
|
||||
<div>
|
||||
<label class="polje-labela">Serviser</label>
|
||||
<select name="tehnicar_id" style="width:100%;">
|
||||
<option value="">— nedodeljen —</option>
|
||||
{{range .Tehnicari}}
|
||||
<option value="{{.ID}}"{{if eq .ID $.Nalog.TehnicarIDVrednost}}selected{{end}}>{{.KorisnickoIme}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
{{end}}
|
||||
<div>
|
||||
<label class="polje-labela">{{if .Izmena}}Avans{{else}}Avans / kapara{{end}}</label>
|
||||
<input type="number" name="avans" min="0" step="0.01"
|
||||
|
||||
@@ -29,17 +29,18 @@
|
||||
.barkod { flex: 0 0 auto; text-align: center; }
|
||||
.barkod img { display: block; width: 100%; height: 9mm; object-fit: fill; }
|
||||
|
||||
.donji-red { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3mm; }
|
||||
.donji-red { flex: 1; min-width: 0; display: flex; align-items: stretch; }
|
||||
|
||||
.podaci { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.5mm; }
|
||||
.podaci { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.2mm; }
|
||||
.broj { font-family: monospace; font-size: 14pt; font-weight: 700; line-height: 1.1; }
|
||||
.red { font-size: 8pt; line-height: 1.25; }
|
||||
.red .labela { color: #777; text-transform: uppercase; letter-spacing: .3px; font-size: 6.5pt; }
|
||||
.red { font-size: 8pt; line-height: 1.25; display: flex; gap: 2mm; }
|
||||
.red .labela { color: #777; text-transform: uppercase; letter-spacing: .3px; font-size: 6.5pt; flex: 0 0 14mm; align-self: center; }
|
||||
.red .vrednost { font-weight: 600; word-break: break-word; }
|
||||
.prazno { color: #aaa; font-style: italic; font-weight: 400; }
|
||||
|
||||
.qr { flex: 0 0 auto; }
|
||||
.qr img { display: block; width: 22mm; height: 22mm; }
|
||||
.datumi { display: flex; gap: 5mm; font-size: 8pt; }
|
||||
.datumi .stavka { display: flex; gap: 1.5mm; align-items: baseline; }
|
||||
.datumi .labela { color: #777; text-transform: uppercase; letter-spacing: .3px; font-size: 6.5pt; }
|
||||
.datumi .vrednost { font-weight: 600; }
|
||||
|
||||
@page { size: 70mm 40mm; margin: 0; }
|
||||
@media print {
|
||||
@@ -60,14 +61,27 @@
|
||||
<div class="labela">Klijent</div>
|
||||
<div class="vrednost">{{if .KlijentNaziv}}{{.KlijentNaziv}}{{else}}<span class="prazno">—</span>{{end}}</div>
|
||||
</div>
|
||||
<div class="red">
|
||||
<div class="labela">Telefon</div>
|
||||
<div class="vrednost">{{if .Telefon}}{{telefon .Telefon}}{{else}}<span class="prazno">—</span>{{end}}</div>
|
||||
</div>
|
||||
<div class="red">
|
||||
<div class="labela">Uređaj</div>
|
||||
<div class="vrednost">{{if .Nalog.Uredjaj}}{{.Nalog.Uredjaj}}{{else}}<span class="prazno">—</span>{{end}}</div>
|
||||
</div>
|
||||
<div class="datumi">
|
||||
<div class="stavka">
|
||||
<span class="labela">Primljen</span>
|
||||
<span class="vrednost">{{.DatumPrijema}}</span>
|
||||
</div>
|
||||
{{if .PredvidjenRok}}
|
||||
<div class="stavka">
|
||||
<span class="labela">Rok</span>
|
||||
<span class="vrednost">{{.PredvidjenRok}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{if .QRKod}}
|
||||
<div class="qr"><img src="data:image/png;base64,{{.QRKod}}" alt="QR"></div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<script>window.addEventListener('load', function(){ window.print(); });</script>
|
||||
|
||||
@@ -1,263 +0,0 @@
|
||||
<!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 .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 .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: {{telefon .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">Serviser</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">{{dinari .CenaKomada}} din</td>
|
||||
<td class="desno">{{dinari .Ukupno}} din</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
<tr class="ukupno-red">
|
||||
<td colspan="3">Ukupno delovi</td>
|
||||
<td class="desno">{{dinari .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;">{{dinari .CenaRadaOd}} – {{dinari .CenaRadaDo}} din</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td>Cena rada</td>
|
||||
<td class="desno" style="width:200px;">{{dinari .CenaRada}} din</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
{{if gt .UkupnoDelovi 0.0}}
|
||||
<tr>
|
||||
<td>Predloženi delovi i materijal</td>
|
||||
<td class="desno">{{dinari .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">{{dinari .UkupnoOd}} – {{dinari .UkupnoDo}} din</div>
|
||||
{{else}}
|
||||
<div class="naplata-iznos">{{dinari .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>
|
||||
+61
-105
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Servisni nalog {{.Nalog.BrojNaloga}}</title>
|
||||
<title>Radni nalog {{.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; }
|
||||
@@ -11,15 +11,18 @@
|
||||
.strana { max-width: 780px; margin: 0 auto; padding: 32px 40px; }
|
||||
|
||||
/* zaglavlje */
|
||||
.zaglavlje { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 2px solid #111; }
|
||||
.firma-naziv { font-size: 20px; font-weight: 700; }
|
||||
.firma-info { font-size: 11px; color: #555; margin-top: 4px; line-height: 1.6; }
|
||||
.nalog-broj { text-align: right; }
|
||||
.nalog-broj-vrednost { font-size: 22px; font-weight: 700; font-family: monospace; }
|
||||
.nalog-naslov { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
|
||||
.zaglavlje { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid #111; gap: 20px; }
|
||||
.firma-naziv { font-size: 16px; font-weight: 700; }
|
||||
.firma-podnaslov { font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
|
||||
.nalog-desno { text-align: right; }
|
||||
.nalog-naslov { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; }
|
||||
.nalog-broj { font-size: 22px; font-weight: 700; font-family: monospace; }
|
||||
.status { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1.5px solid #111; }
|
||||
.barkod { margin-top: 8px; }
|
||||
.barkod img { display: block; height: 11mm; width: 52mm; object-fit: fill; margin-left: auto; }
|
||||
|
||||
/* odeljci */
|
||||
.odeljak { margin-bottom: 20px; }
|
||||
.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; }
|
||||
|
||||
/* grid sa podacima */
|
||||
@@ -27,76 +30,60 @@
|
||||
.podaci-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.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; }
|
||||
.polje-vrednost-mono { font-family: monospace; font-size: 14px; font-weight: 600; }
|
||||
.polje-tekst { font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
|
||||
.prazno { color: #aaa; font-style: italic; }
|
||||
|
||||
/* status bedž */
|
||||
.status { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1.5px solid #111; }
|
||||
/* istaknut PIN/lozinka — serviseru treba pristup */
|
||||
.pin-blok { display: inline-block; padding: 4px 12px; background: #fef9c3; border: 1px solid #facc15; border-radius: 6px; }
|
||||
|
||||
/* tabela delova */
|
||||
.tabela { width: 100%; border-collapse: collapse; margin-top: 8px; }
|
||||
/* tabela delova bez cena */
|
||||
.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 { padding: 7px 8px; border-bottom: 0.5px solid #ddd; font-size: 13px; }
|
||||
.tabela td.desno { text-align: right; }
|
||||
.tabela .ukupno-red td { font-weight: 600; border-top: 1.5px solid #111; border-bottom: none; }
|
||||
|
||||
/* cene */
|
||||
.cene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
||||
.cena-blok { padding: 10px; border: 0.5px solid #ddd; border-radius: 6px; }
|
||||
.cena-labela { font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
|
||||
.cena-vrednost { font-size: 16px; font-weight: 700; }
|
||||
.cena-konacna { border-color: #111; }
|
||||
/* prazni okviri za rukom upisivanje */
|
||||
.upis-okvir { border: 0.5px solid #bbb; border-radius: 6px; padding: 10px 12px; min-height: 70px; background:
|
||||
repeating-linear-gradient(to bottom, transparent, transparent 27px, #eee 27px, #eee 28px); }
|
||||
.upis-veliki { min-height: 110px; }
|
||||
.upis-labela { font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
|
||||
|
||||
/* potpisi */
|
||||
.potpisi { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; padding-top: 16px; border-top: 0.5px solid #ccc; }
|
||||
.potpis-linija { border-top: 1px solid #888; margin-top: 40px; padding-top: 6px; font-size: 11px; color: #555; }
|
||||
/* zavrsetak — vreme i potpis */
|
||||
.zavrsetak { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; padding-top: 16px; border-top: 0.5px solid #ccc; }
|
||||
.linija { border-top: 1px solid #888; margin-top: 40px; padding-top: 6px; font-size: 11px; color: #555; }
|
||||
|
||||
/* štampa */
|
||||
@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; }
|
||||
|
||||
.prazno { color: #aaa; font-style: italic; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="strana">
|
||||
|
||||
<!-- zaglavlje firme i broj naloga -->
|
||||
<!-- 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 .Telefon}}<br>{{end}}
|
||||
{{if .PIB}}PIB: {{.PIB}}{{end}}
|
||||
</div>
|
||||
<div class="firma-podnaslov">Radni nalog — interni</div>
|
||||
</div>
|
||||
<div class="nalog-broj">
|
||||
<div style="display:flex;align-items:flex-start;gap:14px;justify-content:flex-end;">
|
||||
<div>
|
||||
<div class="nalog-naslov">Servisni nalog</div>
|
||||
<div class="nalog-broj-vrednost">{{.Nalog.BrojNaloga}}</div>
|
||||
<div style="margin-top:6px;"><span class="status">{{.Nalog.Status}}</span></div>
|
||||
</div>
|
||||
{{if .QRKod}}
|
||||
<img src="data:image/png;base64,{{.QRKod}}" width="80" height="80"
|
||||
alt="QR {{.Nalog.BrojNaloga}}"
|
||||
style="image-rendering:pixelated;border:1px solid #ddd;border-radius:4px;">
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="nalog-desno">
|
||||
<div class="nalog-naslov">Broj naloga</div>
|
||||
<div class="nalog-broj">{{.Nalog.BrojNaloga}}</div>
|
||||
<div><span class="status">{{.Nalog.Status}}</span></div>
|
||||
{{if .Barkod}}
|
||||
<div class="barkod"><img src="data:image/png;base64,{{.Barkod}}" alt="Barkod {{.Nalog.BrojNaloga}}"></div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- datumi i klijent -->
|
||||
<!-- osnovni podaci -->
|
||||
<div class="odeljak">
|
||||
<div class="odeljak-naslov">Osnovni podaci</div>
|
||||
<div class="podaci-grid">
|
||||
@@ -104,26 +91,26 @@
|
||||
<div class="polje-labela">Datum prijema</div>
|
||||
<div class="polje-vrednost">{{.Nalog.DatumPrijema.Format "02.01.2006. u 15:04"}}</div>
|
||||
</div>
|
||||
{{if .Nalog.DatumZavrsetka}}
|
||||
{{if .Nalog.PredvidjenDatum}}
|
||||
<div>
|
||||
<div class="polje-labela">Datum završetka</div>
|
||||
<div class="polje-vrednost">{{.Nalog.DatumZavrsetka.Format "02.01.2006."}}</div>
|
||||
<div class="polje-labela">Predviđen rok</div>
|
||||
<div class="polje-vrednost">{{.Nalog.PredvidjenDatum.Format "02.01.2006."}}</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .Nalog.GarancijaDo}}
|
||||
{{if .TehnicarNaziv}}
|
||||
<div>
|
||||
<div class="polje-labela">Garancija do</div>
|
||||
<div class="polje-vrednost">{{.Nalog.GarancijaDo.Format "02.01.2006."}}</div>
|
||||
<div class="polje-labela">Serviser</div>
|
||||
<div class="polje-vrednost">{{.TehnicarNaziv}}</div>
|
||||
</div>
|
||||
{{end}}
|
||||
<div>
|
||||
<div class="polje-labela">Klijent</div>
|
||||
<div class="polje-vrednost">{{if .KlijentNaziv}}{{.KlijentNaziv}}{{else}}<span class="prazno">—</span>{{end}}</div>
|
||||
</div>
|
||||
{{if .TehnicarNaziv}}
|
||||
{{if .KlijentTelefon}}
|
||||
<div>
|
||||
<div class="polje-labela">Serviser</div>
|
||||
<div class="polje-vrednost">{{.TehnicarNaziv}}</div>
|
||||
<div class="polje-labela">Telefon klijenta</div>
|
||||
<div class="polje-vrednost">{{telefon .KlijentTelefon}}</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
@@ -144,12 +131,12 @@
|
||||
{{if .Nalog.PinUredjaja}}
|
||||
<div>
|
||||
<div class="polje-labela">PIN / lozinka</div>
|
||||
<div class="polje-vrednost-mono">{{.Nalog.PinUredjaja}}</div>
|
||||
<div class="pin-blok polje-vrednost-mono">{{.Nalog.PinUredjaja}}</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div style="margin-bottom:10px;">
|
||||
<div class="polje-labela">Opis kvara</div>
|
||||
<div class="polje-labela">Prijavljen kvar</div>
|
||||
<div class="polje-tekst">{{if .Nalog.OpisKvara}}{{.Nalog.OpisKvara}}{{else}}<span class="prazno">—</span>{{end}}</div>
|
||||
</div>
|
||||
{{if .Nalog.TrazeneNadogradnje}}
|
||||
@@ -176,17 +163,15 @@
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- ugrađeni delovi -->
|
||||
<!-- rezervisani/ugrađeni delovi — bez cena -->
|
||||
{{if .ServisniDelovi}}
|
||||
<div class="odeljak">
|
||||
<div class="odeljak-naslov">Ugrađeni delovi</div>
|
||||
<div class="odeljak-naslov">Delovi na nalogu</div>
|
||||
<table class="tabela">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artikal</th>
|
||||
<th class="desno" style="width:80px;">Kol.</th>
|
||||
<th class="desno" style="width:130px;">Cena/kom</th>
|
||||
<th class="desno" style="width:130px;">Ukupno</th>
|
||||
<th class="desno" style="width:90px;">Količina</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -194,62 +179,33 @@
|
||||
<tr>
|
||||
<td>{{.ArtikalNaziv}}</td>
|
||||
<td class="desno">{{.Kolicina}}</td>
|
||||
<td class="desno">{{dinari .CenaKomada}} din</td>
|
||||
<td class="desno">{{dinari .Ukupno}} din</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
<tr class="ukupno-red">
|
||||
<td colspan="3">Ukupno delovi</td>
|
||||
<td class="desno">{{dinari .UkupnoDelovi}} din</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<!-- cene -->
|
||||
<!-- prazna polja za servisera -->
|
||||
<div class="odeljak">
|
||||
<div class="odeljak-naslov">Cene usluge</div>
|
||||
<div class="cene-grid">
|
||||
<div class="cena-blok">
|
||||
<div class="cena-labela">Procena od</div>
|
||||
<div class="cena-vrednost">{{if .Nalog.CenaOd}}{{.Nalog.CenaOdStr}} din{{else}}—{{end}}</div>
|
||||
</div>
|
||||
<div class="cena-blok">
|
||||
<div class="cena-labela">Procena do</div>
|
||||
<div class="cena-vrednost">{{if .Nalog.CenaDo}}{{.Nalog.CenaDoStr}} din{{else}}—{{end}}</div>
|
||||
</div>
|
||||
<div class="cena-blok">
|
||||
<div class="cena-labela">Avans</div>
|
||||
<div class="cena-vrednost">{{if .Nalog.Avans}}{{.Nalog.AvansStr}} din{{else}}—{{end}}</div>
|
||||
</div>
|
||||
<div class="cena-blok cena-konacna">
|
||||
<div class="cena-labela">Cena rada</div>
|
||||
<div class="cena-vrednost">{{if .Nalog.CenaKonacna}}{{.Nalog.CenaKonacnaStr}} din{{else}}—{{end}}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{if .Nalog.PreostaloZaNaplatu}}
|
||||
<div style="margin-top:10px;padding:10px 14px;background:#f0fdf4;border:1px solid #86efac;border-radius:6px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:12px;color:#15803d;font-weight:500;">Preostalo za naplatu:</span>
|
||||
<span style="font-size:18px;font-weight:700;color:#15803d;">{{.Nalog.PreostaloZaNaplatuStr}} din</span>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="upis-labela">Dijagnoza / utvrđen kvar</div>
|
||||
<div class="upis-okvir upis-veliki"></div>
|
||||
</div>
|
||||
|
||||
{{if .Nalog.Napomena}}
|
||||
<div class="odeljak">
|
||||
<div class="odeljak-naslov">Napomena</div>
|
||||
<div class="polje-tekst" style="color:#555;">{{.Nalog.Napomena}}</div>
|
||||
<div class="upis-labela">Urađen rad</div>
|
||||
<div class="upis-okvir upis-veliki"></div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<!-- potpisi -->
|
||||
<div class="potpisi">
|
||||
<!-- vreme i potpis -->
|
||||
<div class="zavrsetak">
|
||||
<div>
|
||||
<div class="potpis-linija">Predao klijent</div>
|
||||
<div class="polje-labela">Datum završetka / utrošeno vreme</div>
|
||||
<div class="linija"> </div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="potpis-linija">Primio serviser</div>
|
||||
<div class="polje-labela">Potpis servisera</div>
|
||||
<div class="linija"> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user