add from v002

001.FRONTEND/src/pages/kupci/svi.astro

@@ -0,0 +1,97 @@
+---
+// src/pages/kupci/svi.astro
+import Layout from "../../layouts/Layout.astro";
+import AkcijePanel from "../../components/AkcijePanel.astro";
+import WelcomeHeader from "../../components/WelcomeHeader.astro";
+
+// Importiranje nove funkcije
+import { fetchKupciData } from "../../lib/api";
+import { getStatusColorClass } from "../../utils/ui";
+
+// 1. DOHVAT PODATAKA (Koristimo novu funkciju)
+const { kupci } = await fetchKupciData();
+
+// 2. LOGIKA STATISTIKE
+const aktivniKupci = kupci.filter(k => k.aktivno === true).length;
+const brojPravnih = kupci.filter(k => k.tip === 'pravno').length;
+---
+
+<Layout title="Partneri i Kupci | Servislog">
+  <div class="w-full space-y-10">
+
+    <WelcomeHeader textH1="Baza" textH1dodatno="Partnera" podnaslov="Pregled klijenata, kontakata i strojne flote" />
+
+    <div class="grid md:grid-cols-10 gap-8 items-start mb-10 px-2">
+      
+      <div class="md:col-span-7 space-y-6">
+        <div class="flex justify-between items-center px-4">
+          <h2 class="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight italic">Popis klijenata</h2>
+          <div class="flex items-center gap-4">
+            <span class="text-[10px] font-bold uppercase text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-1 rounded border border-emerald-200/50 italic">Aktivni: {aktivniKupci}</span>
+            <span class="text-[10px] font-bold uppercase text-blue-600 bg-blue-50 dark:bg-blue-900/20 px-2 py-1 rounded border border-blue-200/50 italic">Tvrtke: {brojPravnih}</span>
+          </div>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 rounded-[3rem] border border-gray-100 dark:border-gray-700 shadow-2xl shadow-blue-500/5 overflow-hidden">
+          <div id="kupci-list">
+            {kupci.length > 0 ? kupci.map((k) => (
+              <a 
+                href={`/kupci/${k.id}`}
+                class="kupac-item flex items-center justify-between p-8 hover:bg-blue-50/30 dark:hover:bg-gray-700/30 border-b border-gray-50 dark:border-gray-700 last:border-0 group transition-all"
+              >
+                <div class="flex items-center gap-6 text-left">
+                  <div class="w-14 h-14 rounded-2xl bg-gray-50 dark:bg-gray-900 flex items-center justify-center text-gray-400 group-hover:bg-blue-600 group-hover:text-white transition-all shadow-sm">
+                    <i class={`fa-solid ${k.tip === 'pravno' ? 'fa-building-shield' : 'fa-user-gear'} text-xl`}></i>
+                  </div>
+                  
+                  <div class="flex flex-col">
+                    <div class="flex items-center gap-3">
+                      <span class="font-black text-gray-900 dark:text-white text-xl uppercase tracking-tighter italic group-hover:text-blue-600 transition-colors leading-none">
+                        {k.naziv}
+                      </span>
+                      <span class="text-[10px] font-black bg-gray-100 dark:bg-gray-900 px-2 py-0.5 rounded border border-gray-200 dark:border-gray-700 uppercase tracking-widest text-gray-500">
+                        {k.grad}
+                      </span>
+                    </div>
+                    
+                    <span class="text-gray-400 text-[10px] font-black uppercase tracking-widest mt-2">
+                        OIB: <span class="text-gray-900 dark:text-gray-200">{k.oib}</span>
+                        <span class="text-blue-600/30 mx-1">•</span> 
+                        Kontakt: {k.telefon}
+                    </span>
+                  </div>
+                </div>
+                
+                <div class="flex items-center gap-8">
+                  <div class="hidden lg:flex flex-col items-end text-right">
+                    <span class="text-[8px] font-black uppercase text-gray-400 tracking-[0.2em]">Oprema u sustavu</span>
+                    <span class="text-xs font-black uppercase italic dark:text-gray-300">
+                        {k.broj_strojeva} Jedinica
+                    </span>
+                  </div>
+                  <i class="fa-solid fa-arrow-right-long text-gray-200 group-hover:text-blue-600 group-hover:translate-x-2 transition-all"></i>
+                </div>
+              </a>
+            )) : (
+              <div class="p-24 text-center">
+                <i class="fa-solid fa-users-viewfinder text-4xl text-gray-100 dark:text-gray-700 mb-4 block"></i>
+                <p class="italic text-gray-400 text-[10px] uppercase tracking-widest">Nema kupaca u bazi</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div class="md:col-span-3">
+        <AkcijePanel tip="dashboard" />
+      </div>
+
+    </div>
+  </div>
+</Layout>
+
+<script>
+  import { initFilters } from "../../scripts/filters";
+  initFilters();
+  document.addEventListener('astro:after-swap', initFilters);
+</script>