Servis novi nalog: kartice, izbor/kreiranje klijenta, novi broj naloga

- Forma naloga razdvojena u zasebne kartice (Uređaj, Klijent, Status i datumi, Cene/Napomena)
- Nova kartica Klijent: radio fizičko/pravno, živa pretraga postojećih (Alpine, CSP-safe) po punom imenu/imenu/prezimenu odnosno nazivu firme; izbor postojećeg ili unos novog
- Enter u pretrazi bez izbora popunjava polja novog klijenta (ime/prezime ili naziv firme)
- SacuvajNalog/SacuvajIzmenaNaloga: helper mozdaKreirajKlijenta kreira novog klijenta iz forme kada nije izabran postojeći
- Broj naloga: format SN-MMGG-NNN sa mesečnim resetom brojača (001-999)
- Dodat CSRF token u formu naloga (POST je ranije vraćao 403)
- Šablonski helper json za ugradnju liste klijenata u Alpine

internal/db/sqlite/servis.go

@@ -30,11 +30,15 @@ func NoviServisRepo(db *sql.DB) *ServisRepo {
 	return &ServisRepo{db: db}
 }
 
-// SledeciBroj generiše sledeći broj naloga u formatu SN-GGGG-NNNN
+// SledeciBroj generiše sledeći broj naloga u formatu SN-MMGG-NNN
+// (MM mesec, GG dvocifrena godina); brojač NNN se resetuje svakog meseca
 func (r *ServisRepo) SledeciBroj(ctx context.Context) (string, error) {
-	godina := time.Now().Year()
+	sada := time.Now()
-	uzorak := fmt.Sprintf("SN-%d-%%", godina)
+	// prefiks "SN-MMGG-" je dug 8 karaktera, pa brojač počinje od 9. karaktera
+	prefiks := fmt.Sprintf("SN-%02d%02d-", int(sada.Month()), sada.Year()%100)
+	uzorak := prefiks + "%"
 
+	// COALESCE(MAX, 0)+1 → prvi nalog u mesecu dobija 001
 	var sledeci int
 	err := r.db.QueryRowContext(ctx, `
 		SELECT COALESCE(MAX(CAST(SUBSTR(broj_naloga, 9) AS INTEGER)), 0) + 1
@@ -44,7 +48,7 @@ func (r *ServisRepo) SledeciBroj(ctx context.Context) (string, error) {
 		return "", fmt.Errorf("ntech: ServisRepo.SledeciBroj: %w", err)
 	}
 
-	return fmt.Sprintf("SN-%d-%04d", godina, sledeci), nil
+	return fmt.Sprintf("%s%03d", prefiks, sledeci), nil
 }
 
 // Lista vraća listu servisnih naloga sa imenom klijenta, opcionim filterima

internal/handler/kes.go

@@ -1,6 +1,7 @@
 package handler
 
 import (
+	"encoding/json"
 	"fmt"
 	"html/template"
 	"io/fs"
@@ -65,6 +66,15 @@ var sablonskeFunkcije = template.FuncMap{
 	},
 	// telefon formatira srpski broj telefona radi lakšeg čitanja: "0641234567" → "064 123 4567"
 	"telefon": formatirajTelefon,
+	// json serijalizuje vrednost u JSON za ugradnju u <script> (npr. Alpine x-data);
+	// template.JS sprečava da html/template dodatno escapuje rezultat
+	"json": func(v any) (template.JS, error) {
+		b, err := json.Marshal(v)
+		if err != nil {
+			return "", fmt.Errorf("ntech: json helper: %w", err)
+		}
+		return template.JS(b), nil
+	},
 	// statusPre vraća true ako je `a` pre `b` u redosledu statusa
 	"statusPre": func(a, b string, statusi []string) bool {
 		ia, ib := -1, -1

internal/handler/servis.go

@@ -1,6 +1,7 @@
 package handler
 
 import (
+	"context"
 	"encoding/base64"
 	"log/slog"
 	"net/http"
@@ -162,6 +163,26 @@ func (h *Handler) SacuvajNalog(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	// ako nije izabran postojeći klijent, eventualno kreiraj novog iz polja forme
+	if greska := h.mozdaKreirajKlijenta(r.Context(), r, &nalog); greska != "" {
+		podesavanja, _ := sqlite.DohvatiSvaPodesavanja(r.Context(), h.DB)
+		klijenti, _ := h.KlijentiRepo.Lista(r.Context(), "")
+		tehnicari, _ := h.KorisniciRepo.Lista(r.Context())
+		ps := h.popuniPodaciStranice(r, podesavanja)
+		ps.Stranica = "servis"
+		ps.NaslovStranice = "Novi nalog"
+		h.renderujFormuNaloga(w, PodaciFormeNaloga{
+			PodaciStranice: ps,
+			Nalog:          nalog,
+			Klijenti:       klijenti,
+			Tehnicari:      tehnicari,
+			SviStatusi:     model.SviStatusi,
+			Greska:         greska,
+			Izmena:         false,
+		})
+		return
+	}
+
 	id, err := h.ServisRepo.Kreiraj(r.Context(), &nalog)
 	if err != nil {
 		slog.Error("greška pri čuvanju naloga", "error", err)
@@ -272,6 +293,27 @@ func (h *Handler) SacuvajIzmenaNaloga(w http.ResponseWriter, r *http.Request) {
 	}
 
 	nalog.ID = id
+
+	// ako nije izabran postojeći klijent, eventualno kreiraj novog iz polja forme
+	if greska := h.mozdaKreirajKlijenta(r.Context(), r, &nalog); greska != "" {
+		podesavanja, _ := sqlite.DohvatiSvaPodesavanja(r.Context(), h.DB)
+		klijenti, _ := h.KlijentiRepo.Lista(r.Context(), "")
+		tehnicari, _ := h.KorisniciRepo.Lista(r.Context())
+		ps := h.popuniPodaciStranice(r, podesavanja)
+		ps.Stranica = "servis"
+		ps.NaslovStranice = "Izmeni nalog"
+		h.renderujFormuNaloga(w, PodaciFormeNaloga{
+			PodaciStranice: ps,
+			Nalog:          nalog,
+			Klijenti:       klijenti,
+			Tehnicari:      tehnicari,
+			SviStatusi:     model.SviStatusi,
+			Greska:         greska,
+			Izmena:         true,
+		})
+		return
+	}
+
 	if err := h.ServisRepo.Izmeni(r.Context(), &nalog); err != nil {
 		slog.Error("greška pri čuvanju izmene naloga", "error", err)
 		podesavanja, _ := sqlite.DohvatiSvaPodesavanja(r.Context(), h.DB)
@@ -548,6 +590,56 @@ func parseFormuNaloga(r *http.Request) (model.ServisniNalog, string) {
 	return nalog, ""
 }
 
+// mozdaKreirajKlijenta kreira novog klijenta iz polja forme naloga kada nije
+// izabran postojeći (klijent_id prazno), a uneto je ime (fizičko) ili naziv firme
+// (pravno). Klijent je opcioni — ako nema dovoljno podataka, nalog ostaje bez njega.
+// Vraća srpsku poruku o grešci za prikaz, ili prazan string ako je sve u redu.
+func (h *Handler) mozdaKreirajKlijenta(ctx context.Context, r *http.Request, nalog *model.ServisniNalog) string {
+	if nalog.KlijentID != nil {
+		return "" // izabran postojeći klijent — ništa ne kreiramo
+	}
+
+	tip := r.FormValue("tip")
+	if tip != "fizicko" && tip != "pravno" {
+		tip = "fizicko"
+	}
+	ime := strings.TrimSpace(r.FormValue("ime"))
+	nazivFirme := strings.TrimSpace(r.FormValue("naziv_firme"))
+
+	// bez minimalnih podataka nalog ostaje bez klijenta
+	if tip == "fizicko" && ime == "" {
+		return ""
+	}
+	if tip == "pravno" && nazivFirme == "" {
+		return ""
+	}
+
+	email := strings.TrimSpace(r.FormValue("email"))
+	if email != "" && !strings.Contains(email, "@") {
+		return "Adresa e-pošte nije ispravna."
+	}
+
+	klijent := model.Klijent{
+		Tip:        tip,
+		Ime:        ime,
+		Prezime:    strings.TrimSpace(r.FormValue("prezime")),
+		JMBG:       strings.TrimSpace(r.FormValue("jmbg")),
+		NazivFirme: nazivFirme,
+		PIB:        strings.TrimSpace(r.FormValue("pib")),
+		Telefon:    strings.TrimSpace(r.FormValue("telefon")),
+		Email:      email,
+		Mesto:      strings.TrimSpace(r.FormValue("mesto")),
+	}
+
+	id, err := h.KlijentiRepo.Kreiraj(ctx, &klijent)
+	if err != nil {
+		slog.Error("greška pri kreiranju klijenta iz naloga", "error", err)
+		return "Došlo je do greške pri čuvanju klijenta. Pokušajte ponovo."
+	}
+	nalog.KlijentID = &id
+	return ""
+}
+
 // defaultGarancija vraća datum garancije na osnovu datuma prijema i podešavanja;
 // vraća nil ako je rok 0 ili podešavanje nedostaje
 func defaultGarancija(datumPrijema time.Time, podesavanja map[string]string) *time.Time {

web/static/js/ntech.js

@@ -191,6 +191,105 @@ document.addEventListener('alpine:init', () => {
         }
     }))
 
+    // forma servisnog naloga — izbor postojećeg ili unos novog klijenta.
+    // Pisano CSP-safe (bez složenih izraza u atributima): uslovi idu kroz metode/gettere.
+    Alpine.data('klijentNalog', () => ({
+        klijenti: [],
+        tip: 'fizicko',
+        pretraga: '',
+        izabrani: null,
+        izabraniId: 0,
+        prikaziListu: false,
+        // polja novog klijenta (vezana x-model-om na inpute)
+        noviIme: '',
+        noviPrezime: '',
+        noviNaziv: '',
+        init() {
+            this.klijenti = window.__klijentiNaloga || []
+            // kod izmene naloga pretpopuni već vezanog klijenta
+            const id = window.__izabraniKlijentId || 0
+            if (id) {
+                const k = this.klijenti.find(x => x.ID === id)
+                if (k) {
+                    this.izabrani = k
+                    this.izabraniId = k.ID
+                    this.tip = k.Tip || 'fizicko'
+                }
+            }
+        },
+        get nijeIzabran() {
+            return !this.izabrani
+        },
+        get vrednostKlijentId() {
+            return this.izabraniId || ''
+        },
+        // filtrira klijente po tipu i početnim karakterima unosa (najviše 8)
+        get filtrirani() {
+            const q = this.pretraga.trim().toLowerCase()
+            const tip = this.tip
+            return this.klijenti.filter(k => {
+                if ((k.Tip || 'fizicko') !== tip) return false
+                if (q === '') return true
+                // za fizičko proveravamo i puno ime ("Ivan Lazić") da bi radio unos
+                // tipa "Ivan L", a i samo ime ili samo prezime zasebno
+                const punoIme = ((k.Ime || '') + ' ' + (k.Prezime || '')).trim()
+                const polja = (tip === 'pravno') ? [k.NazivFirme] : [punoIme, k.Ime, k.Prezime]
+                return polja.some(p => (p || '').toLowerCase().startsWith(q))
+            }).slice(0, 8)
+        },
+        jeTip(t) {
+            return this.tip === t
+        },
+        klasaTip(t) {
+            return this.tip === t ? 'tip-opcija-akt' : ''
+        },
+        naziv(k) {
+            if (!k) return ''
+            return (k.Tip === 'pravno')
+                ? (k.NazivFirme || '')
+                : ((k.Ime || '') + ' ' + (k.Prezime || '')).trim()
+        },
+        detalj(k) {
+            if (!k) return ''
+            const d = []
+            if (k.Mesto) d.push(k.Mesto)
+            if (k.Telefon) d.push(k.Telefon)
+            return d.join(' · ')
+        },
+        izaberi(k) {
+            this.izabrani = k
+            this.izabraniId = k.ID
+            this.pretraga = ''
+            this.prikaziListu = false
+        },
+        ocisti() {
+            this.izabrani = null
+            this.izabraniId = 0
+        },
+        // Enter u pretrazi kad ništa nije izabrano → priprema unos novog klijenta:
+        // prvu reč upisuje kao ime, ostatak kao prezime (za firmu ceo tekst kao naziv)
+        potvrdiNovog() {
+            const q = this.pretraga.trim()
+            this.prikaziListu = false
+            if (!q) return
+            if (this.tip === 'pravno') {
+                this.noviNaziv = q
+            } else {
+                const delovi = q.split(/\s+/)
+                this.noviIme = delovi[0] || ''
+                this.noviPrezime = delovi.slice(1).join(' ')
+            }
+        },
+        promeniTip(t) {
+            this.tip = t
+            this.ocisti()
+            this.pretraga = ''
+            this.noviIme = ''
+            this.noviPrezime = ''
+            this.noviNaziv = ''
+        }
+    }))
+
     // forma za nabavku
     Alpine.data('nabavkaForma', () => ({
         stavke: [{artikal_id: '', kolicina: 1, cena: 0, marza: 0, prodajna: 0}],

web/templates/stranice/servis_forma.html

@@ -5,12 +5,30 @@
 {{define "sadrzaj"}}
 <div style="width:100%;">
 
+    <!-- podaci za Alpine: lista klijenata i eventualno već vezani klijent (kod izmene) -->
+    <script>
+        window.__klijentiNaloga = {{json .Klijenti}};
+        window.__izabraniKlijentId = {{.Nalog.KlijentIDVrednost}};
+    </script>
+
     <!-- nazad dugme -->
     <a href="/servis" class="nazad-link">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
         Nazad na servis
     </a>
 
+    {{if .Greska}}
+    <div class="poruka-greska greska-animacija" style="margin-bottom:16px;">{{.Greska}}</div>
+    {{end}}
+
+    <form method="POST" action="{{if .Izmena}}/servis/izmeni/{{.Nalog.ID}}{{else}}/servis/novi{{end}}">
+
+        <!-- broj naloga ide kao hidden — server ga je generisao, vraćamo ga pri POST-u -->
+        <input type="hidden" name="broj_naloga" value="{{.Nalog.BrojNaloga}}">
+        <!-- CSRF token — bez njega middleware odbija POST sa 403 -->
+        <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
+
+        <!-- ===================== KARTICA: UREĐAJ ===================== -->
         <div class="kartica forma-kartica animiraj">
             <div style="display:flex;justify-content:space-between;align-items:center;margin:-16px -16px 20px -16px;padding:12px 16px;background:var(--pozadina);border-radius:12px 12px 0 0;flex-wrap:wrap;gap:10px;">
                 <span style="font-size:15px;font-weight:600;color:var(--tekst-glavni);">
@@ -21,19 +39,6 @@
                 </span>
             </div>
 
-        {{if .Greska}}
-        <div class="poruka-greska greska-animacija">{{.Greska}}</div>
-        {{end}}
-
-        <form method="POST" action="{{if .Izmena}}/servis/izmeni/{{.Nalog.ID}}{{else}}/servis/novi{{end}}">
-
-            <!-- broj naloga ide kao hidden — server ga je generisao, vraćamo ga pri POST-u -->
-            <input type="hidden" name="broj_naloga" value="{{.Nalog.BrojNaloga}}">
-
-            <div class="kolona" style="gap:20px;">
-
-                <!-- uređaj -->
-                <div>
             <div class="sekcija-naslov">Uređaj</div>
             <div class="kolona" style="gap:12px;">
                 <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
@@ -83,22 +88,118 @@
             </div>
         </div>
 
-                <!-- klijent i tehničar -->
+        <!-- ===================== KARTICA: KLIJENT I TEHNIČAR ===================== -->
+        <div class="kartica forma-kartica animiraj" x-data="klijentNalog">
+            <div class="sekcija-naslov">Klijent</div>
+            <div class="kolona" style="gap:12px;">
+
+                <!-- tip klijenta: fizičko / pravno -->
+                <div style="display:flex;gap:10px;flex-wrap:wrap;">
+                    <label class="tip-opcija" :class="klasaTip('fizicko')">
+                        <input type="radio" name="tip" value="fizicko" :checked="jeTip('fizicko')"
+                            @change="promeniTip('fizicko')" style="accent-color:var(--akcentna);">
+                        Fizičko lice
+                    </label>
+                    <label class="tip-opcija" :class="klasaTip('pravno')">
+                        <input type="radio" name="tip" value="pravno" :checked="jeTip('pravno')"
+                            @change="promeniTip('pravno')" style="accent-color:var(--akcentna);">
+                        Pravno lice (firma)
+                    </label>
+                </div>
+
+                <!-- vezani klijent_id: prazno ako se kreira novi -->
+                <input type="hidden" name="klijent_id" :value="vrednostKlijentId">
+
+                <!-- prikaz izabranog postojećeg klijenta -->
+                <template x-if="izabrani">
+                    <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--pozadina);border:1px solid var(--ivica);border-radius:10px;">
                         <div>
-                    <div class="sekcija-naslov">Klijent i tehničar</div>
+                            <div style="font-weight:600;color:var(--tekst-glavni);" x-text="naziv(izabrani)"></div>
+                            <div style="font-size:12px;color:var(--tekst-sporedni);"
+                                x-text="detalj(izabrani)"></div>
+                        </div>
+                        <button type="button" class="btn-sekundarno" @click="ocisti()" style="padding:4px 10px;">Promeni</button>
+                    </div>
+                </template>
+
+                <!-- pretraga postojećeg (kad nijedan nije izabran) -->
+                <div x-show="nijeIzabran" style="position:relative;" @click.outside="prikaziListu=false">
+                    <label class="polje-labela">Pretraži postojećeg klijenta</label>
+                    <input type="text" x-model="pretraga" autocomplete="off"
+                        @focus="prikaziListu=true" @input="prikaziListu=true"
+                        @keydown.enter.prevent="potvrdiNovog()"
+                        placeholder="Ukucajte početak imena ili naziva..." style="width:100%;">
+                    <div x-show="prikaziListu && filtrirani.length" x-cloak
+                        style="position:absolute;z-index:30;left:0;right:0;margin-top:4px;background:var(--pozadina-kartica,var(--pozadina));border:1px solid var(--ivica);border-radius:10px;max-height:240px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.14);">
+                        <template x-for="k in filtrirani" :key="k.ID">
+                            <div @click="izaberi(k)" class="klijent-stavka"
+                                style="padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--ivica);">
+                                <div style="font-weight:500;color:var(--tekst-glavni);" x-text="naziv(k)"></div>
+                                <div style="font-size:12px;color:var(--tekst-sporedni);"
+                                    x-text="detalj(k)"></div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+
+                <!-- polja za NOVOG klijenta (kad nijedan postojeći nije izabran) -->
+                <div x-show="nijeIzabran" class="kolona" style="gap:12px;">
+                    <div style="font-size:12px;color:var(--tekst-sporedni);">
+                        Ako klijent ne postoji, popunite polja — biće sačuvan zajedno sa nalogom.
+                    </div>
+
+                    <!-- fizičko lice -->
+                    <template x-if="tip==='fizicko'">
+                        <div class="kolona" style="gap:12px;">
                             <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                                 <div>
-                            <label class="polje-labela">Klijent</label>
+                                    <label class="polje-labela">Ime</label>
-                            <select name="klijent_id" style="width:100%;">
+                                    <input type="text" name="ime" x-model="noviIme" style="width:100%;">
-                                <option value="">— bez klijenta —</option>
-                                {{range .Klijenti}}
-                                <option value="{{.ID}}"
-                                    {{if eq .ID $.Nalog.KlijentIDVrednost}}selected{{end}}>
-                                    {{.PunoIme}}
-                                </option>
-                                {{end}}
-                            </select>
                                 </div>
+                                <div>
+                                    <label class="polje-labela">Prezime</label>
+                                    <input type="text" name="prezime" x-model="noviPrezime" style="width:100%;">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="polje-labela">JMBG</label>
+                                <input type="text" name="jmbg" style="width:100%;">
+                            </div>
+                        </div>
+                    </template>
+
+                    <!-- pravno lice -->
+                    <template x-if="tip==='pravno'">
+                        <div class="kolona" style="gap:12px;">
+                            <div>
+                                <label class="polje-labela">Naziv firme</label>
+                                <input type="text" name="naziv_firme" x-model="noviNaziv" style="width:100%;">
+                            </div>
+                            <div>
+                                <label class="polje-labela">PIB</label>
+                                <input type="text" name="pib" style="width:100%;">
+                            </div>
+                        </div>
+                    </template>
+
+                    <!-- zajednička polja -->
+                    <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+                        <div>
+                            <label class="polje-labela">Telefon</label>
+                            <input type="text" name="telefon" style="width:100%;">
+                        </div>
+                        <div>
+                            <label class="polje-labela">Mesto</label>
+                            <input type="text" name="mesto" style="width:100%;">
+                        </div>
+                    </div>
+                    <div>
+                        <label class="polje-labela">E-pošta</label>
+                        <input type="text" name="email" style="width:100%;">
+                    </div>
+                </div>
+
+                <!-- tehničar -->
                 <div>
                     <label class="polje-labela">Tehničar</label>
                     <select name="tehnicar_id" style="width:100%;">
@@ -114,8 +215,8 @@
             </div>
         </div>
 
-                <!-- status i datumi -->
+        <!-- ===================== KARTICA: STATUS I DATUMI ===================== -->
-                <div>
+        <div class="kartica forma-kartica animiraj">
             <div class="sekcija-naslov">Status i datumi</div>
             <div class="kolona" style="gap:12px;">
                 <div>
@@ -162,8 +263,8 @@
             </div>
         </div>
 
-                <!-- cene -->
+        <!-- ===================== KARTICA: CENE I NAPOMENA ===================== -->
-                <div>
+        <div class="kartica forma-kartica animiraj">
             <div class="sekcija-naslov">Cene (din)</div>
             <div class="forma-grid-4" style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;">
                 <div>
@@ -191,10 +292,7 @@
                         placeholder="0" style="width:100%;">
                 </div>
             </div>
-                </div>
+            <div style="margin-top:16px;">
-
-                <!-- napomena -->
-                <div>
                 <label class="polje-labela">Napomena</label>
                 <textarea name="napomena" rows="2"
                     placeholder="Interna napomena o nalogu..."
@@ -202,17 +300,29 @@
             </div>
 
             <!-- dugmad -->
-                <div style="display:flex;justify-content:flex-end;gap:10px;margin-top:6px;">
+            <div style="display:flex;justify-content:flex-end;gap:10px;margin-top:18px;">
                 <a href="/servis" class="btn-sekundarno">Odustani</a>
                 <button type="submit" class="btn-primarno">
                     {{if .Izmena}}Sačuvaj izmene{{else}}Sačuvaj nalog{{end}}
                 </button>
             </div>
-
         </div>
+
     </form>
 </div>
-</div>
+
+<style>
+    .tip-opcija {
+        display: flex; align-items: center; gap: 8px;
+        padding: 8px 14px; border: 1px solid var(--ivica); border-radius: 10px;
+        cursor: pointer; font-size: 14px; color: var(--tekst-glavni); user-select: none;
+    }
+    .tip-opcija-akt { border-color: var(--akcentna); background: var(--pozadina); }
+    .klijent-stavka:last-child { border-bottom: none; }
+    .klijent-stavka:hover { background: var(--pozadina); }
+    [x-cloak] { display: none !important; }
+</style>
+
 <script>
     function toggleGarancija(chk) {
         var input = document.getElementById('garancija_do_input');