add from v002

2026-05-20 21:24:00 +02:00
parent 1a6ba86d0b
commit 83fb8c69bb
98 changed files with 10878 additions and 0 deletions
--- a/001.FRONTEND/.gitignore
+++ b/001.FRONTEND/.gitignore
@@ -0,0 +1,24 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
--- a/001.FRONTEND/.vscode/extensions.json
+++ b/001.FRONTEND/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
--- a/001.FRONTEND/.vscode/launch.json
+++ b/001.FRONTEND/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/001.FRONTEND/README.md
+++ b/001.FRONTEND/README.md
@@ -0,0 +1,46 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src
+│   ├── assets
+│   │   └── astro.svg
+│   ├── components
+│   │   └── Welcome.astro
+│   ├── layouts
+│   │   └── Layout.astro
+│   └── pages
+│       └── index.astro
+└── package.json
+```
+
+To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
--- a/001.FRONTEND/astro.config.mjs
+++ b/001.FRONTEND/astro.config.mjs
@@ -0,0 +1,25 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import node from '@astrojs/node';
+
+import tailwindcss from '@tailwindcss/vite';
+
+// https://astro.build/config
+export default defineConfig({
+  // Ovo omogućuje dinamičke rute bez getStaticPaths
+  output: 'server',
+
+  adapter: node({
+    mode: 'standalone'
+  }),
+
+  image: {
+    // Dodaj domene s kojih Astro smije povlačiti i optimizirati slike
+    domains: ['localhost', '127.0.0.1'], 
+  },
+
+  vite: {
+    plugins: [tailwindcss()]
+  }
+});
--- a/001.FRONTEND/package-lock.json
+++ b/001.FRONTEND/package-lock.json
--- a/001.FRONTEND/package.json
+++ b/001.FRONTEND/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "poslovanje",
+  "type": "module",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/node": "^10.0.6",
+    "@tailwindcss/vite": "^4.2.4",
+    "astro": "^6.1.9",
+    "flowbite": "^4.0.1",
+    "photoswipe": "^5.4.4",
+    "tailwindcss": "^4.2.4"
+  }
+}
--- a/001.FRONTEND/src/assets/astro.svg
+++ b/001.FRONTEND/src/assets/astro.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>
--- a/001.FRONTEND/src/assets/background.svg
+++ b/001.FRONTEND/src/assets/background.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>
--- a/001.FRONTEND/src/components/AkcijePanel.astro
+++ b/001.FRONTEND/src/components/AkcijePanel.astro
@@ -0,0 +1,169 @@
+---
+// src/components/AkcijePanel.astro
+
+import Button from './Button.astro';
+
+interface Props {
+  tip: 'dashboard' | 'radni-nalog' | 'stroj' | 'vlasnik';
+  podaci: any;
+}
+
+const { tip, podaci } = Astro.props;
+
+// Pomoćna funkcija za formatiranje datuma
+const formatDate = (date: string) => 
+  new Date(date).toLocaleDateString('hr-HR', { day: '2-digit', month: '2-digit', year: 'numeric' });
+---
+
+<aside class="space-y-6">
+  <!-- SEKCIJA 1: GLAVNE AKCIJE (Uvijek vidljivo) -->
+
+    <div class="grid gap-3">
+      {tip === 'dashboard' && (
+        <>
+          <div class="space-y-6">
+            <h2 class="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight italic px-4">
+              Upravljanje
+            </h2>
+            
+            <div class="flex flex-col gap-4">
+              <a href="/operativa/radni-nalozi/novi" class="group bg-blue-600 text-white p-6 rounded-[2rem] flex items-center gap-4 hover:bg-blue-700 transition-all shadow-xl shadow-blue-500/20 active:scale-95">
+                <div class="bg-white text-blue-600 w-12 h-12 rounded-2xl flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform shrink-0">
+                  <i class="fa-solid fa-plus text-xl"></i>
+                </div>
+                <div class="flex flex-col text-left">
+                  <span class="font-black uppercase text-xs tracking-widest leading-none">Novi nalog</span>
+                  <span class="text-[10px] opacity-70 mt-1 italic font-bold uppercase">Inicijaliziraj nalog</span>
+                </div>
+              </a>
+
+              <a href="/fleet/vozila" class="group bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-[2rem] flex items-center gap-4 hover:border-blue-600 border border-gray-100 dark:border-gray-700 transition-all shadow-sm active:scale-95">
+                <div class="bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 w-12 h-12 rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform shrink-0">
+                  <i class="fa-solid fa-truck-pickup text-xl"></i>
+                </div>
+                <div class="flex flex-col text-left">
+                  <span class="font-black uppercase text-xs tracking-widest dark:text-white leading-none">Vozni park</span>
+                  <span class="text-[10px] text-gray-400 mt-1 italic font-bold uppercase tracking-tighter">Status flote</span>
+                </div>
+              </a>
+
+              <a href="/kupci/svi" class="group bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-[2rem] flex items-center gap-4 hover:border-indigo-600 border border-gray-100 dark:border-gray-700 transition-all shadow-sm active:scale-95">
+                <div class="bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 w-12 h-12 rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform shrink-0">
+                  <i class="fa-solid fa-address-book text-xl"></i>
+                </div>
+                <div class="flex flex-col text-left">
+                  <span class="font-black uppercase text-xs tracking-widest dark:text-white leading-none">Klijenti</span>
+                  <span class="text-[10px] text-gray-400 mt-1 italic font-bold uppercase tracking-tighter">Baza partnera</span>
+                </div>
+              </a>
+
+              <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700">
+                  <Button variant="primary" class="w-full justify-center gap-2 !rounded-2xl py-4 uppercase font-black italic tracking-widest">
+                      <i class="fa-solid fa-print"></i> Ispis naloga
+                  </Button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      {tip === 'radni-nalog' && (
+        <>
+          <button class="w-full py-4 bg-blue-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20">
+            <i class="fa-solid fa-check-double mr-2"></i> Završi nalog
+          </button>
+          <button class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-gray-200 transition-all">
+            <i class="fa-solid fa-print mr-2"></i> Ispis (PDF)
+          </button>
+        </>
+      )}
+
+      {tip === 'stroj' && (
+        <>
+          <button class="w-full py-4 bg-green-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-green-700 transition-all shadow-lg shadow-green-500/20">
+            <i class="fa-solid fa-plus mr-2"></i> Novi Radni Nalog
+          </button>
+          <button class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest">
+            <i class="fa-solid fa-file-contract mr-2"></i> Atesti i Dokumenti
+          </button>
+        </>
+      )}
+
+      {tip === 'vlasnik' && (
+        <>
+          <!-- AKCIJE ZA KUPCA -->
+          <div class="bg-white dark:bg-gray-800 rounded-[2.5rem] p-6 shadow-xl border border-gray-100 dark:border-gray-700 mb-6">
+            <label class="text-[9px] font-black uppercase text-indigo-600 block mb-4 tracking-[0.2em] italic">Upravljanje klijentom</label>
+            <div class="grid gap-3">
+              <Button class="w-full py-4 bg-indigo-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-500/20">
+                <i class="fa-solid fa-pen-to-square mr-2"></i> Uredi podatke
+              </Button>
+              <a href={`tel:${podaci.telefon}`} class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-gray-200 transition-all text-center no-underline">
+                <i class="fa-solid fa-phone mr-2"></i> Nazovi klijenta
+              </a>
+            </div>
+          </div>
+
+          <!-- DETALJI TVRTKE (Metadata preseljena s glavnog ekrana) -->
+          <div class="bg-indigo-50/50 dark:bg-indigo-900/10 rounded-[2.5rem] p-6 border border-dashed border-indigo-200 dark:border-indigo-800">
+            <label class="text-[9px] font-black uppercase text-indigo-400 block mb-4 tracking-[0.2em] italic">Podaci o tvrtki</label>
+            <div class="space-y-4">
+              <div class="flex flex-col border-b border-indigo-100/50 dark:border-indigo-900/30 pb-2">
+                <span class="text-[9px] font-bold text-gray-400 uppercase">OIB</span>
+                <span class="text-sm font-black dark:text-gray-200 tracking-tighter">{podaci.oib}</span>
+              </div>
+              <div class="flex flex-col border-b border-indigo-100/50 dark:border-indigo-900/30 pb-2">
+                <span class="text-[9px] font-bold text-gray-400 uppercase">Adresa</span>
+                <span class="text-sm font-black dark:text-gray-200 leading-tight">{podaci.adresa}, {podaci.grad}</span>
+              </div>
+              <div class="flex flex-col">
+                <span class="text-[9px] font-bold text-gray-400 uppercase">Email</span>
+                <span class="text-sm font-black text-indigo-600 truncate">{podaci.email}</span>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+ 
+
+  <!-- SEKCIJA 2: KONTEKSTUALNI DETALJI (Ovdje selimo manje bitne stvari) -->
+  <div class="bg-gray-50 dark:bg-gray-900/40 rounded-[2.5rem] p-6 border border-dashed border-gray-200 dark:border-gray-700">
+    <label class="text-[9px] font-black uppercase text-gray-400 block mb-4 tracking-[0.2em] italic">Informacije sustava</label>
+    
+    <div class="space-y-4">
+      {tip === 'radni-nalog' && (
+        <>
+          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
+            <span class="text-[10px] font-bold text-gray-400 uppercase">Prioritet</span>
+            <span class="text-xs font-black text-red-500 uppercase italic">Visok</span>
+          </div>
+          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
+            <span class="text-[10px] font-bold text-gray-400 uppercase">Izradio</span>
+            <span class="text-xs font-black dark:text-gray-200">Admin Sustava</span>
+          </div>
+          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
+            <span class="text-[10px] font-bold text-gray-400 uppercase">Ažurirano</span>
+            <span class="text-xs font-black dark:text-gray-200">{formatDate(podaci.datum_azuriranja)}</span>
+          </div>
+        </>
+      )}
+
+      {tip === 'stroj' && (
+        <>
+          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
+            <span class="text-[10px] font-bold text-gray-400 uppercase">Zadnji Atest</span>
+            <span class="text-xs font-black text-green-500 italic">{formatDate(podaci.datum_zadnjeg_atesta)}</span>
+          </div>
+          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
+            <span class="text-[10px] font-bold text-gray-400 uppercase">Godina Proizv.</span>
+            <span class="text-xs font-black dark:text-gray-200">{podaci.godina_proizvodnje}</span>
+          </div>
+          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
+            <span class="text-[10px] font-bold text-gray-400 uppercase">Sustav ID</span>
+            <span class="text-xs font-black dark:text-gray-200">#{podaci.id}</span>
+          </div>
+        </>
+      )}
+    </div>
+  </div>
+</aside>
--- a/001.FRONTEND/src/components/Button.astro
+++ b/001.FRONTEND/src/components/Button.astro
@@ -0,0 +1,30 @@
+---
+// src/components/Button.astro
+interface Props {
+  type?: "button" | "submit";
+  variant?: "primary" | "danger" | "outline";
+  id?: string;
+  class?: string;
+}
+
+const { type = "button", variant = "primary", id, class: className } = Astro.props;
+
+const variants = {
+  primary: "bg-blue-600 hover:bg-blue-700 text-white shadow-blue-500/20",
+  danger: "bg-red-600 hover:bg-red-700 text-white shadow-red-500/20",
+  outline: "bg-transparent border-2 border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 shadow-none"
+};
+---
+
+<button 
+  type={type} 
+  id={id} 
+  class:list={[
+    "inline-flex items-center justify-center gap-4 px-10 py-6 rounded-[2rem] font-black uppercase text-xs tracking-[0.4em] transition-all active:scale-[0.98] shadow-2xl",
+    variants[variant],
+    className
+  ]}
+>
+  <slot name="icon" />
+  <slot />
+</button>
--- a/001.FRONTEND/src/components/Gallery.astro
+++ b/001.FRONTEND/src/components/Gallery.astro
@@ -0,0 +1,77 @@
+---
+// src/components/Gallery.astro
+import { Image } from 'astro:assets';
+import 'photoswipe/style.css';
+
+interface Props {
+  // Prilagođeno tvom serializeru: 'url' je zapravo 'slika' u JSON-u
+  images: {
+    slika: string;
+    opis?: string;
+    width?: number;
+    height?: number;
+  }[];
+  galleryId: string;
+}
+
+const { images = [], galleryId } = Astro.props;
+
+// Filtriramo važeće slike (pazimo na naziv polja 'slika' iz serializera)
+const validImages = images.filter(img => img && img.slika);
+---
+
+<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id={galleryId}>
+  {validImages.map((img) => (
+    <a 
+      href={img.slika} 
+      data-pswp-width={img.width || 1600} 
+      data-pswp-height={img.height || 1200} 
+      target="_blank"
+      class="group relative block aspect-square overflow-hidden rounded-[2rem] bg-gray-100 dark:bg-gray-800 border border-gray-100 dark:border-gray-700 shadow-sm"
+    >
+      <Image 
+        src={img.slika} 
+        alt={img.opis || "Detalj kvara"} 
+        width={400} 
+        height={400} 
+        class="object-cover h-full w-full transition-transform duration-500 group-hover:scale-110"
+      />
+      
+      <!-- Overlay s opisom ako postoji -->
+      <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center text-white p-4 text-center">
+        <i class="fa-solid fa-expand text-xl mb-2"></i>
+        {img.opis && <span class="text-[10px] font-black uppercase tracking-widest">{img.opis}</span>}
+      </div>
+    </a>
+  ))}
+</div>
+
+{validImages.length === 0 && (
+  <div class="p-12 border-2 border-dashed border-gray-100 dark:border-gray-800 rounded-[2rem] text-center">
+    <i class="fa-solid fa-images text-gray-200 dark:text-gray-700 text-3xl mb-3"></i>
+    <p class="text-gray-400 text-xs font-medium italic">Nema priložene foto dokumentacije.</p>
+  </div>
+)}
+
+<script>
+  import PhotoSwipeLightbox from 'photoswipe/lightbox';
+
+  const initPhotoSwipe = () => {
+    // Hvata sve galerije, neovisno o prefiksu, važno je da imaju ID
+    const lightboxes = document.querySelectorAll('.grid[id]');
+    lightboxes.forEach((el) => {
+      const lightbox = new PhotoSwipeLightbox({
+        gallery: `#${el.id}`,
+        children: 'a',
+        pswpModule: () => import('photoswipe'),
+        // Dodajemo opciju za kretanje kotačićem miša
+        wheelToZoom: true
+      });
+      lightbox.init();
+    });
+  };
+
+  // Inicijalizacija pri učitavanju i pri Astro navigaciji (View Transitions)
+  initPhotoSwipe();
+  document.addEventListener('astro:after-swap', initPhotoSwipe);
+</script>
--- a/001.FRONTEND/src/components/GenericKarticaItem.astro
+++ b/001.FRONTEND/src/components/GenericKarticaItem.astro
@@ -0,0 +1,114 @@
+---
+// src/components/GenericKarticaItem.astro
+import { getStatusColorClass } from "../utils/ui";
+
+interface Props {
+  href: string;
+  status: string;
+  statusBojaClass?: string;
+  ikona: string;
+  naslov: string;
+  subNaslov?: string;
+  metaTekst: string;
+  statusPrikaz: string;
+  bojaTeme?: "blue" | "indigo" | "emerald" | "red"; // Podrška za teme
+}
+
+const { 
+  href, 
+  status, 
+  statusBojaClass, 
+  ikona, 
+  naslov, 
+  subNaslov, 
+  metaTekst, 
+  statusPrikaz,
+  bojaTeme = "blue" 
+} = Astro.props;
+
+// Mapiranje tema na Tailwind klase
+const themes = {
+  blue: {
+    hover: "hover:bg-blue-50/30 dark:hover:bg-blue-900/10",
+    text: "group-hover:text-blue-600 dark:group-hover:text-blue-400",
+    iconBg: "group-hover:bg-blue-600",
+    arrow: "group-hover:text-blue-600"
+  },
+  indigo: {
+    hover: "hover:bg-indigo-50/30 dark:hover:bg-indigo-900/10",
+    text: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400",
+    iconBg: "group-hover:bg-indigo-600",
+    arrow: "group-hover:text-indigo-600"
+  },
+  emerald: {
+    hover: "hover:bg-emerald-50/30 dark:hover:bg-emerald-900/10",
+    text: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400",
+    iconBg: "group-hover:bg-emerald-600",
+    arrow: "group-hover:text-emerald-400"
+  }
+};
+
+const activeTheme = themes[bojaTeme] || themes.blue;
+const resolvedStatusColor = statusBojaClass || getStatusColorClass(status);
+---
+
+<a 
+  href={href} 
+  class:list={[
+    "nalog-item flex items-center justify-between p-8 border-b border-gray-50 dark:border-gray-700 last:border-0 group transition-all duration-300",
+    activeTheme.hover
+  ]}
+  data-status={status}
+>
+  <div class="flex items-center gap-6 text-left">
+    <!-- Ikona s dinamičkom bojom na hoveru -->
+    <div class:list={[
+      "w-14 h-14 rounded-2xl flex items-center justify-center text-xl shadow-inner transition-all duration-300 bg-gray-50 dark:bg-gray-900 text-gray-400 group-hover:text-white",
+      activeTheme.iconBg
+    ]}>
+      <i class:list={["fa-solid", ikona, status === 'u_radu' ? 'animate-pulse' : '']}></i>
+    </div>
+    
+    <div class="flex flex-col">
+      <div class="flex items-center gap-3">
+        <span class:list={[
+          "font-black text-gray-900 dark:text-white text-xl uppercase tracking-tighter italic transition-colors leading-none",
+          activeTheme.text
+        ]}>
+          {naslov}
+        </span>
+        {subNaslov && (
+          <span class="text-[10px] font-black bg-gray-900 text-white px-2 py-0.5 rounded border border-gray-700 uppercase tracking-[0.2em]">
+            {subNaslov}
+          </span>
+        )}
+      </div>
+      
+      <span class="text-gray-400 text-[10px] font-black uppercase tracking-widest mt-2 italic leading-none">
+          {metaTekst}
+      </span>
+    </div>
+  </div>
+  
+  <div class="flex items-center gap-8">
+    <!-- Status indikator desno -->
+    <div class="hidden lg:flex flex-col items-end text-right">
+      <div class="flex items-center gap-2 mb-1">
+        <div class:list={["w-2 h-2 rounded-full", resolvedStatusColor]}></div>
+        <span class="text-[8px] font-black uppercase text-gray-400 tracking-[0.2em]">Status</span>
+      </div>
+      <span class:list={[
+        "text-xs font-black uppercase italic transition-colors",
+        status === 'zavrseno' || status === 'naplaceno' || status === 'aktivan' ? 'text-emerald-500' : activeTheme.text
+      ]}>
+          {statusPrikaz}
+      </span>
+    </div>
+    
+    <!-- Strelica -->
+    <i class:list={[
+      "fa-solid fa-arrow-right-long text-gray-200 group-hover:translate-x-2 transition-all duration-300",
+      activeTheme.arrow
+    ]}></i>
+  </div>
+</a>
--- a/001.FRONTEND/src/components/Kalendar/Kalendar.astro
+++ b/001.FRONTEND/src/components/Kalendar/Kalendar.astro
@@ -0,0 +1,152 @@
+---
+// src/components/Kalendar.astro
+import { fetchCalendarEvents } from "../../lib/api";
+import { getStatusColorClass } from "../../utils/ui";
+
+// 1. Dohvat podataka s Django API-ja kroz tvoj centralizirani lib
+const apiEvents = await fetchCalendarEvents();
+
+// 2. Grupiranje događaja po datumu (YYYY-MM-DD)
+const eventsByDate = apiEvents.reduce((acc, event) => {
+  const dateKey = new Date(event.start).toISOString().split('T')[0];
+  if (!acc[dateKey]) acc[dateKey] = [];
+  acc[dateKey].push(event);
+  return acc;
+}, {});
+
+// Postavke za trenutni prikaz (Svibanj 2026)
+const daysInMonth = 31;
+const firstDayOffset = 5; // Petak
+const currentYearMonth = "2026-05";
+---
+
+<div class="w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-2xl rounded-[3rem] border border-gray-100 dark:border-gray-700 overflow-hidden font-sans transition-all">
+  
+  <div class="flex justify-between items-center bg-gray-50/50 dark:bg-gray-900/50 px-8 py-6 border-b border-gray-100 dark:border-gray-700">
+    <button class="text-gray-400 hover:text-blue-600 transition-colors text-2xl font-black">&lsaquo;</button>
+    <div class="text-center">
+      <h2 class="text-xl font-black uppercase tracking-tighter italic leading-none">Svibanj 2026</h2>
+      <span class="text-[10px] text-blue-600 font-bold uppercase tracking-[0.2em] mt-1 italic">Raspored servisa</span>
+    </div>
+    <button class="text-gray-400 hover:text-blue-600 transition-colors text-2xl font-black">&rsaquo;</button>
+  </div>
+
+  <div id="calendar-body">
+    <div class="grid grid-cols-7 text-center text-[10px] text-gray-400 dark:text-gray-500 uppercase font-black tracking-[0.2em] py-4 border-b border-gray-50 dark:border-gray-700/50">
+      <div>Ned</div><div>Pon</div><div>Uto</div><div>Sri</div><div>Čet</div><div>Pet</div><div>Sub</div>
+    </div>
+
+    <div class="grid grid-cols-7 text-center" id="days-grid">
+      {Array.from({ length: firstDayOffset }).map(() => (
+        <div class="py-6 border-b border-r border-gray-50 dark:border-gray-700/10 opacity-0"></div>
+      ))}
+
+      {Array.from({ length: daysInMonth }).map((_, i) => {
+        const day = i + 1;
+        const dateKey = `${currentYearMonth}-${day.toString().padStart(2, '0')}`;
+        const dayEvents = eventsByDate[dateKey] || [];
+        
+        return (
+          <div 
+            class="day-cell py-6 relative cursor-pointer hover:bg-blue-50/50 dark:hover:bg-gray-700/30 transition-all border-b border-r border-gray-50 dark:border-gray-700/30 group"
+            data-day={day}
+            data-events={JSON.stringify(dayEvents)}
+          >
+            <span class={`text-3xl font-black italic tracking-tighter transition-colors ${dayEvents.length > 0 ? 'text-gray-900 dark:text-white' : 'text-gray-300 dark:text-gray-600'} group-hover:text-blue-600`}>
+              {day.toString().padStart(2, '0')}
+            </span>
+            
+            <div class="flex justify-center gap-1 mt-1 h-1.5">
+              {dayEvents.map(event => (
+                <div class={`w-1.5 h-1.5 rounded-full ${getStatusColorClass(event.tip)}`}></div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+
+      <div id="event-panel" class="hidden col-span-7 bg-blue-600 text-white p-8 relative overflow-visible shadow-2xl">
+        <div class="absolute -top-2 left-0 w-full h-2">
+          <div id="panel-arrow" class="absolute w-0 h-0 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent border-b-[12px] border-b-blue-600 transition-all duration-300"></div>
+        </div>
+        <div id="event-list" class="flex flex-col gap-6 w-full">
+           </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  function formatStatusLocal(status) {
+    const map = { 'u_radu': 'U radu', 'planirano': 'Planirano', 'zavrseno': 'Završeno', 'servis': 'Na servisu' };
+    return map[status] || status;
+  }
+
+  function initKalendar() {
+    const grid = document.getElementById('days-grid');
+    const panel = document.getElementById('event-panel');
+    const arrow = document.getElementById('panel-arrow');
+    const eventList = document.getElementById('event-list');
+    const dayCells = document.querySelectorAll('.day-cell');
+
+    if (!grid || !panel) return;
+
+    dayCells.forEach(cell => {
+      cell.addEventListener('click', () => {
+        const eventsData = JSON.parse(cell.getAttribute('data-events') || '[]');
+        
+        if (eventsData.length > 0) {
+          const allItems = Array.from(grid.children);
+          const index = allItems.indexOf(cell);
+          
+          // 1. Pozicioniranje strelice (Matematički precizno)
+          const colIndex = index % 7;
+          const percentage = (colIndex * (100 / 7)) + (100 / 7 / 2);
+          arrow.style.left = `calc(${percentage}% - 12px)`;
+
+          // 2. Injekcija panela na kraj tjedna
+          const rowEndIndex = Math.floor(index / 7) * 7 + 6;
+          const targetCell = allItems[Math.min(rowEndIndex, allItems.length - 1)];
+
+          // 3. Generiranje liste (text-left poravnanje)
+          eventList.innerHTML = eventsData.map(ev => `
+            <div class="flex items-start gap-5 border-b border-white/20 pb-6 last:border-0 last:pb-0 group/item">
+              <a href="/operativa/radni-nalozi/${ev.radni_nalog}" class="bg-white/10 hover:bg-white hover:text-blue-600 text-white p-4 rounded-2xl transition-all shadow-lg shrink-0 group-hover/item:scale-105 active:scale-95">
+                <i class="fa-solid ${ev.je_radni_nalog ? 'fa-file-signature' : 'fa-wrench'} text-2xl"></i>
+              </a>
+              <div class="flex flex-col flex-1 text-left">
+                <div class="flex flex-wrap justify-between items-start gap-2">
+                  <a href="/operativa/radni-nalozi/${ev.radni_nalog}" class="hover:underline">
+                    <span class="font-black uppercase text-2xl tracking-tighter italic leading-none">${ev.title}</span>
+                  </a>
+                  <span class="text-[10px] font-black bg-white/20 px-3 py-1 rounded-full uppercase tracking-widest border border-white/10">
+                    ${formatStatusLocal(ev.tip)}
+                  </span>
+                </div>
+                <p class="text-sm opacity-90 font-medium mt-2 leading-relaxed max-w-2xl text-left w-full">
+                  ${ev.opis}
+                </p>
+                <div class="mt-4 flex flex-wrap gap-3">
+                   <span class="text-[10px] font-black uppercase tracking-widest bg-black/30 px-3 py-1.5 rounded-lg flex items-center gap-2">
+                     <i class="fa-solid fa-user-gear opacity-50"></i> ${ev.izvrsitelj_ime}
+                   </span>
+                   <span class="text-[10px] font-black uppercase tracking-widest bg-black/30 px-3 py-1.5 rounded-lg flex items-center gap-2">
+                     <i class="fa-solid fa-clock opacity-50"></i> ${new Date(ev.start).toLocaleTimeString('hr-HR', {hour: '2-digit', minute:'2-digit'})} h
+                   </span>
+                </div>
+              </div>
+            </div>
+          `).join('');
+
+          targetCell.after(panel);
+          panel.classList.remove('hidden');
+        } else {
+          panel.classList.add('hidden');
+        }
+      });
+    });
+  }
+
+  initKalendar();
+  document.addEventListener('astro:after-swap', initKalendar);
+</script>
--- a/001.FRONTEND/src/components/ListaStrojeva.astro
+++ b/001.FRONTEND/src/components/ListaStrojeva.astro
@@ -0,0 +1,59 @@
+---
+// src/components/ListaStrojeva.astro
+import NaslovList from "./NaslovList.astro";
+import GenericKarticaItem from "./GenericKarticaItem.astro";
+import { getStatusColorClass, formatStatus } from "../utils/ui";
+
+interface Props {
+  strojevi: any[];
+  naslov?: string;
+  prikaziNaslov?: boolean;
+}
+
+const { 
+  strojevi = [], 
+  naslov = "Tehničke jedinice",
+  prikaziNaslov = true 
+} = Astro.props;
+
+// Statistika za NaslovList (npr. koliko ih je aktivno ili na servisu ako imaš te podatke)
+const ukupnoStrojeva = strojevi.length;
+// Pretpostavljamo da strojevi imaju status, ako nemaju, možemo staviti fiksne labele
+const uRadu = strojevi.filter(s => s.status === 'u_radu').length;
+---
+
+<div class="space-y-6">
+  
+  {prikaziNaslov && (
+    <NaslovList 
+      naslov={naslov} 
+      ukupno={ukupnoStrojeva}
+      label1="Ukupno"
+      count1={ukupnoStrojeva}
+      label2="Aktivno"
+      count2={uRadu}
+    />
+  )}
+
+  <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="strojevi-list">
+      {strojevi.length > 0 ? strojevi.map((s) => (
+        <GenericKarticaItem 
+          href={`/fleet/strojevi/${s.id}`}
+          status={s.status || 'aktivan'}
+          statusBojaClass={getStatusColorClass(s.status || 'aktivan')}
+          ikona="fa-screwdriver-wrench"
+          naslov={s.naziv}
+          subNaslov={s.serijski_broj}
+          metaTekst={`${s.vlasnik_naziv} | Radni sati: ${parseFloat(s.radni_sati || 0).toLocaleString('hr-HR')} h`}
+          statusPrikaz={formatStatus(s.status || 'aktivan')}
+        />
+      )) : (
+        <div class="p-20 text-center italic text-gray-400 text-[10px] uppercase tracking-widest leading-none">
+          <i class="fa-solid fa-box-open text-3xl text-gray-100 dark:text-gray-700 mb-4 block"></i>
+          Nema dostupnih tehničkih jedinica
+        </div>
+      )}
+    </div>
+  </div>
+</div>
--- a/001.FRONTEND/src/components/LoginForm.astro
+++ b/001.FRONTEND/src/components/LoginForm.astro
@@ -0,0 +1,103 @@
+---
+// src/components/LoginForm.astro
+import Button from "./Button.astro";
+---
+
+<div class="max-w-md mx-auto w-full p-10 bg-white dark:bg-gray-900 rounded-[3rem] border border-gray-100 dark:border-gray-800 shadow-2xl shadow-blue-500/10">
+    <div class="mb-10 text-center sm:text-left">
+        <div class="inline-flex w-14 h-14 bg-blue-600 rounded-2xl items-center justify-center shadow-lg shadow-blue-500/20 mb-6 rotate-3 sm:-ml-2">
+            <i class="fa-solid fa-lock text-white text-xl"></i>
+        </div>
+        <h2 class="text-4xl font-black text-gray-900 dark:text-white uppercase tracking-tighter italic leading-none">Prijava</h2>
+        <p class="text-gray-500 dark:text-gray-400 text-[10px] font-black uppercase tracking-[0.2em] mt-3 opacity-70 italic">
+            ServisLog <span class="text-blue-600">/</span> Terminal
+        </p>
+    </div>
+
+    <form id="login-form" class="space-y-6">
+        <div>
+            <label for="email" class="block text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 mb-2 ml-4 italic">Korisnički E-mail</label>
+            <input 
+                type="email" 
+                id="email" 
+                name="email" 
+                required 
+                class="w-full px-6 py-4 bg-gray-50 dark:bg-gray-800 border-2 border-transparent focus:border-blue-600 rounded-2xl outline-none transition-all text-gray-900 dark:text-white font-bold italic shadow-inner"
+                placeholder="serviser@tvrtka.hr"
+            />
+        </div>
+
+        <div>
+            <label for="password" class="block text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 mb-2 ml-4 italic">Lozinka</label>
+            <input 
+                type="password" 
+                id="password" 
+                name="password" 
+                required 
+                class="w-full px-6 py-4 bg-gray-50 dark:bg-gray-800 border-2 border-transparent focus:border-blue-600 rounded-2xl outline-none transition-all text-gray-900 dark:text-white font-bold tracking-[0.3em] shadow-inner"
+                placeholder="••••••••"
+            />
+        </div>
+
+        <div class="pt-2">
+            <Button 
+                type="submit" 
+                id="login-btn"
+                variant="primary"
+                class="w-full !py-5 italic"
+            >
+                <i class="fa-solid fa-bolt" slot="icon"></i>
+                Pokreni Sustav
+            </Button>
+        </div>
+    </form>
+</div>
+
+<script>
+    import { login } from "../lib/api";
+
+    const loginForm = document.querySelector('#login-form') as HTMLFormElement;
+    const btn = document.querySelector('#login-btn') as HTMLButtonElement;
+
+    loginForm?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        if (!btn) return;
+
+        // Pohranjujemo originalni sadržaj (ikonu + tekst)
+        const originalContent = btn.innerHTML;
+        
+        // Vizualni feedback (Loading stanje)
+        btn.disabled = true;
+        btn.innerHTML = '<i class="fa-solid fa-circle-notch animate-spin mr-3"></i> AUTENTIFIKACIJA...';
+
+        const formData = new FormData(loginForm);
+        const email = formData.get('email') as string;
+        const password = formData.get('password') as string;
+
+        try {
+            const result = await login(email, password);
+
+            if (result.success) {
+                sessionStorage.setItem('pending_toast', JSON.stringify({
+                    type: 'success',
+                    message: 'Pristup odobren. Dobrodošli u sustav.'
+                }));
+                window.location.href = '/';
+            } else {
+                // Poziv tvog global-toast sustava
+                // @ts-ignore
+                window.showToast?.(result.error || "Pristup odbijen: Neispravni podaci.", "error");
+                
+                // Vraćanje gumba u normalu
+                btn.disabled = false;
+                btn.innerHTML = originalContent;
+            }
+        } catch (err) {
+             // @ts-ignore
+            window.showToast?.("Sustav nedostupan. Provjerite vezu.", "error");
+            btn.disabled = false;
+            btn.innerHTML = originalContent;
+        }
+    });
+</script>
--- a/001.FRONTEND/src/components/NaslovList.astro
+++ b/001.FRONTEND/src/components/NaslovList.astro
@@ -0,0 +1,59 @@
+---
+// src/components/NaslovList.astro
+interface Props {
+  naslov: string;
+  ukupno: number;
+  label1: string;
+  count1: number;
+  filter1: string; 
+  label2: string;
+  count2: number;
+  filter2: string;
+  label3?: string;
+  count3?: number;
+  filter3?: string;
+}
+
+const { naslov, ukupno, label1, count1, filter1, label2, count2, filter2, label3, count3, filter3 } = Astro.props;
+---
+
+<div class="flex flex-row justify-between items-center w-full min-h-[40px]">
+  
+  <h2 id="filter-title" class="p-0 m-0 text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight italic leading-none">
+    {naslov}
+  </h2>
+  
+  <div class="flex flex-wrap justify-end items-center gap-2 lg:gap-3">
+    <div 
+      class="stat-card flex items-center gap-2 px-2.5 py-1.5 bg-emerald-50 dark:bg-emerald-900/20 rounded-xl border border-emerald-100 dark:border-emerald-800/50 cursor-pointer transition-all active:scale-95 hover:border-emerald-400"
+      data-filter={filter1}
+    >
+      <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
+      <span class="text-[9px] lg:text-[10px] font-black uppercase text-emerald-700 dark:text-emerald-400 whitespace-nowrap">
+        {label1}: {count1}
+      </span>
+    </div>
+    
+    <div 
+      class="stat-card flex items-center gap-2 px-2.5 py-1.5 bg-red-50 dark:bg-red-900/20 rounded-xl border border-red-100 dark:border-red-800/50 cursor-pointer transition-all active:scale-95 hover:border-red-400"
+      data-filter={filter2}
+    >
+      <div class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
+      <span class="text-[9px] lg:text-[10px] font-black uppercase text-red-700 dark:text-red-400 whitespace-nowrap">
+        {label2}: {count2}
+      </span>
+    </div>
+    
+    {label3 && count3 !== undefined && filter3 && (
+      <div 
+        class="stat-card flex items-center gap-2 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-900/20 rounded-xl border border-gray-100 dark:border-gray-800/50 cursor-pointer transition-all active:scale-95 hover:border-gray-400"
+        data-filter={filter3}
+      >
+        <div class="w-2 h-2 rounded-full bg-gray-400"></div>
+        <span class="text-[9px] lg:text-[10px] font-black uppercase text-gray-700 dark:text-gray-400 whitespace-nowrap">
+          {label3}: {count3}
+        </span>
+      </div>
+    )}
+  </div>
+</div>
--- a/001.FRONTEND/src/components/Navbar.astro
+++ b/001.FRONTEND/src/components/Navbar.astro
@@ -0,0 +1,107 @@
+---
+// src/components/Navbar.astro
+import site from "../data/site.json";
+
+const currentPath = Astro.url.pathname;
+---
+
+<nav class="sticky top-0 z-[100] w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-100 dark:border-gray-800">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex justify-between h-20 items-center">
+      
+      <!-- LOGO SEKCIJA -->
+      <div class="flex items-center">
+        <a href="/" class="flex items-center gap-3 group">
+          <div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20 group-hover:rotate-6 transition-transform duration-300">
+            <i class="fa-solid fa-screwdriver-wrench text-white text-lg"></i>
+          </div>
+          <span class="text-xl font-black tracking-tighter text-gray-900 dark:text-white uppercase">
+            {site.title.split(' ')[0]}<span class="text-blue-600">{site.title.split(' ')[1] || ''}</span>
+          </span>
+        </a>
+      </div>
+
+
+      <!-- MOBILE MENU GUMB -->
+      <div class="md:hidden flex items-center">
+        <button 
+          id="mobile-menu-button" 
+          type="button"
+          class="w-12 h-12 flex items-center justify-center rounded-2xl bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 active:scale-90 transition-all border border-gray-100 dark:border-gray-700"
+        >
+          <i class="fa-solid fa-bars-staggered text-xl"></i>
+        </button>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- LEBDEĆI MOBILNI IZBORNIK (Transparentan) -->
+  <div 
+    id="mobile-menu" 
+    class="hidden absolute top-[calc(100%+0.5rem)] left-4 right-4 
+           bg-white/90 dark:bg-gray-900/90 backdrop-blur-xl 
+           border border-white/20 dark:border-gray-800/50 
+           p-4 rounded-[2.5rem] shadow-2xl z-[100] 
+           transition-all animate-in fade-in slide-in-from-top-4"
+  >
+    <div class="flex flex-col gap-2">
+      {site.navigation.map((item) => (
+        <a
+          href={item.url}
+          class="flex items-center justify-between px-6 py-4 rounded-[1.8rem] font-black text-[11px] uppercase tracking-widest text-gray-600 dark:text-gray-300 hover:bg-blue-600 hover:text-white transition-all duration-300 group"
+        >
+          {item.name}
+          <i class="fa-solid fa-chevron-right text-[10px] opacity-30 group-hover:translate-x-1 group-hover:opacity-100 transition-all"></i>
+        </a>
+      ))}
+      <hr class="my-2 border-gray-100/50 dark:border-gray-800/50" />
+      <a href="/operativa/radni-nalozi/novi" class="w-full bg-blue-600 text-white p-5 rounded-[1.8rem] font-black uppercase text-[11px] tracking-[0.2em] text-center shadow-lg shadow-blue-500/40 active:scale-95 transition-all">
+        <i class="fa-solid fa-plus mr-2"></i> Novi nalog
+      </a>
+    </div>
+  </div>
+</nav>
+
+<script>
+  function setupNavbar() {
+    const btn = document.getElementById('mobile-menu-button');
+    const menu = document.getElementById('mobile-menu');
+
+    if (btn && menu) {
+      // Re-inicijalizacija gumba za Astro View Transitions
+      const newBtn = btn.cloneNode(true) as HTMLButtonElement;
+      btn.parentNode?.replaceChild(newBtn, btn);
+
+      newBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        menu.classList.toggle('hidden');
+      });
+
+      // Zatvori menu na klik izvan njega
+      document.addEventListener('click', (e) => {
+        if (!menu.contains(e.target as Node) && !newBtn.contains(e.target as Node)) {
+          menu.classList.add('hidden');
+        }
+      });
+
+      // Zatvori nakon odabira linka
+      menu.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', () => menu.classList.add('hidden'));
+      });
+    }
+  }
+
+  // Logout funkcija
+  const logout = () => {
+    sessionStorage.removeItem('user_session');
+    window.location.href = '/login';
+  };
+
+  document.getElementById('logout-btn')?.addEventListener('click', logout);
+  document.getElementById('logout-mobile')?.addEventListener('click', logout);
+
+  setupNavbar();
+  document.addEventListener('astro:after-swap', setupNavbar);
+
+</script>
--- a/001.FRONTEND/src/components/RadniNalogLista.astro
+++ b/001.FRONTEND/src/components/RadniNalogLista.astro
@@ -0,0 +1,94 @@
+---
+// src/components/RadniNalogLista.astro
+import { fetchDashboardData } from "../lib/api";
+import { getStatusColorClass, formatStatus } from "../utils/ui";
+import NaslovList from "./NaslovList.astro";
+import GenericKarticaItem from "./GenericKarticaItem.astro";
+
+interface Props {
+  limit?: number;
+  naslov?: string;
+  prikaziNaslov?: boolean;
+}
+
+const { 
+  limit = 0, 
+  naslov = "Zadnje aktivnosti", 
+  prikaziNaslov = true,
+} = Astro.props;
+
+// 1. Dohvat filtera iz URL-a (npr. ?status=u_radu)
+const statusFilter = Astro.url.searchParams.get('status');
+
+// 2. Dohvat podataka s API-ja
+const { nalozi = [] } = await fetchDashboardData();
+
+// 3. Logika filtriranja (Serverska strana)
+let filtriraniNalozi = nalozi;
+
+if (statusFilter) {
+  filtriraniNalozi = nalozi.filter(n => n.status === statusFilter);
+}
+
+// 4. Izračun brojeva za NaslovList (uvijek se računa iz originalne liste nalozi)
+const planiranoCount = nalozi.filter(n => n.status === 'planirano').length;
+const uRaduCount = nalozi.filter(n => n.status === 'u_radu').length;
+
+// 5. Primjena limita na prikaz (npr. top 5 nalozi)
+const prikazaniNalozi = limit > 0 ? filtriraniNalozi.slice(0, limit) : filtriraniNalozi;
+
+// Dinamički naslov ovisno o filteru
+const prikazaniNaslov = statusFilter 
+  ? `Filtrirano: ${formatStatus(statusFilter)}` 
+  : naslov;
+---
+
+<div class="space-y-6">
+  {prikaziNaslov && (
+    <NaslovList 
+      naslov={prikazaniNaslov} 
+      ukupno={filtriraniNalozi.length}
+      label1="Planirano"
+      count1={planiranoCount}
+      filter1="planirano"
+      label2="U radu"
+      count2={uRaduCount}
+      filter2="u_radu"
+    />
+  )}
+
+  <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="nalozi-list">
+      {prikazaniNalozi.length > 0 ? (
+        prikazaniNalozi.map((n) => (
+          <GenericKarticaItem 
+            href={`/operativa/radni-nalozi/${n.id}`}
+            status={n.status}
+            statusBojaClass={getStatusColorClass(n.status)}
+            ikona={n.status === 'u_radu' ? 'fa-screwdriver-wrench' : 'fa-file-invoice'}
+            naslov={`#${n.broj_naloga}`}
+            subNaslov={formatStatus(n.status)}
+            metaTekst={`${n.klijent_naziv} | ${n.vozilo_naziv} | ${n.stroj_naziv}`}
+            statusPrikaz={formatStatus(n.status)}
+            bojaTeme={n.boja_teme || 'blue'}
+          />
+        ))
+      ) : (
+        <div class="p-20 text-center uppercase font-black opacity-20 italic">
+          Nema zapisa za odabrani status
+        </div>
+      )}
+    </div>
+  </div>
+</div>
+
+<script>
+  // Ponovno inicijaliziramo klijentsku skriptu za klikove na kartice filtera
+  import { initFilters } from "../scripts/filters.js";
+  
+  // Prvo pokretanje
+  initFilters();
+
+  // Podrška za Astro View Transitions (ako ih koristiš)
+  document.addEventListener('astro:after-swap', initFilters);
+</script>
--- a/001.FRONTEND/src/components/StatsGrid.astro
+++ b/001.FRONTEND/src/components/StatsGrid.astro
@@ -0,0 +1,48 @@
+---
+// src/components/StatsGrid.astro
+interface Props {
+  label: string;
+  value: string | number;
+  icon: string;
+  variant?: 'blue' | 'yellow' | 'emerald' | 'gray';
+  animate?: boolean;
+  filterValue?: string; // NOVO: npr. 'u_radu', 'planirano'...
+  class?: string;
+}
+
+const { 
+  label, 
+  value, 
+  icon, 
+  variant = 'blue', 
+  animate = false,
+  filterValue = "", 
+  class: className = "" 
+} = Astro.props;
+
+const themes = {
+  blue: { container: "border-gray-100 dark:border-gray-700", iconBg: "bg-blue-50 dark:bg-blue-900/30", iconColor: "text-blue-600 dark:text-blue-400", labelColor: "text-gray-400" },
+  yellow: { container: "border-yellow-500/20 border-2", iconBg: "bg-yellow-500", iconColor: "text-white", labelColor: "text-yellow-600" },
+  emerald: { container: "border-gray-100 dark:border-gray-700", iconBg: "bg-emerald-50 dark:bg-emerald-900/30", iconColor: "text-emerald-600 dark:text-emerald-400", labelColor: "text-gray-400" },
+  gray: { container: "border-gray-100 dark:border-gray-700", iconBg: "bg-gray-100 dark:bg-gray-800", iconColor: "text-gray-500", labelColor: "text-gray-400" }
+};
+
+const theme = themes[variant];
+---
+
+<div 
+  class={`stat-card bg-white dark:bg-gray-800 p-3 sm:p-6 rounded-2xl sm:rounded-[2.5rem] shadow-sm border flex flex-row items-center justify-center gap-2 sm:gap-5 cursor-pointer hover:scale-[1.02] active:scale-95 transition-all ${theme.container} ${className}`}
+>
+  <div class={`p-1.5 sm:p-4 rounded-lg sm:rounded-2xl w-7 h-7 sm:w-16 sm:h-16 flex items-center justify-center flex-none ${theme.iconBg} ${theme.iconColor} ${animate ? 'animate-pulse' : ''}`}>
+    <i class={`fa-solid ${icon} text-xs sm:text-2xl`}></i>
+  </div>
+
+  <div class="flex flex-col justify-center">
+    <h3 class="text-sm sm:text-4xl font-black text-gray-900 dark:text-white leading-none tracking-tighter">
+      {value}
+    </h3>
+    <p class={`text-[6px] sm:text-xs font-black uppercase tracking-widest mt-0.5 sm:mt-1 ${theme.labelColor}`}>
+      {label}
+    </p>
+  </div>
+</div>
--- a/001.FRONTEND/src/components/Toast.astro
+++ b/001.FRONTEND/src/components/Toast.astro
@@ -0,0 +1,73 @@
+---
+// src/components/Toast.astro
+---
+<div id="global-toast" class="fixed bottom-0 left-0 w-full z-[999] hidden transition-all duration-500 transform translate-y-full">
+  <div id="toast-bg" class="px-6 py-6 flex items-center shadow-[0_-10px_40px_rgba(0,0,0,0.2)] border-t">
+    <div class="max-w-7xl mx-auto w-full flex items-center gap-6">
+      <!-- Icon Container -->
+      <div id="toast-icon-wrapper" class="w-14 h-14 bg-white/20 rounded-[1.2rem] flex items-center justify-center shadow-inner">
+        <i id="toast-icon" class="fa-solid text-2xl"></i>
+      </div>
+      
+      <!-- Text Content -->
+      <div class="flex flex-col">
+        <span id="toast-label" class="text-[10px] font-black uppercase tracking-[0.3em] opacity-70 leading-none italic"></span>
+        <p id="toast-message" class="text-lg font-black uppercase tracking-tight mt-1 italic leading-none text-white"></p>
+      </div>
+
+      <!-- Close Button -->
+      <button id="close-toast" class="ml-auto w-10 h-10 hover:bg-white/10 rounded-xl transition-colors text-white">
+        <i class="fa-solid fa-xmark"></i>
+      </button>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Logika koja se može pozvati s bilo koje stranice
+  window.showToast = (message, type = 'success') => {
+    const toast = document.getElementById('global-toast');
+    const bg = document.getElementById('toast-bg');
+    const icon = document.getElementById('toast-icon');
+    const label = document.getElementById('toast-label');
+    const msg = document.getElementById('toast-message');
+
+    if (!toast || !bg || !icon || !label || !msg) return;
+
+    // Konfiguracija tema
+    const themes = {
+      success: { bg: 'bg-emerald-600', border: 'border-emerald-500', icon: 'fa-check-double', label: 'Sustav Potvrđuje' },
+      error: { bg: 'bg-red-600', border: 'border-red-500', icon: 'fa-circle-exclamation', label: 'Sustav Odbija' },
+      warning: { bg: 'bg-orange-500', border: 'border-orange-400', icon: 'fa-triangle-exclamation', label: 'Sustav Upozorava' }
+    };
+
+    const theme = themes[type] || themes.success;
+
+    // Primjena stilova
+    bg.className = `${theme.bg} ${theme.border} text-white px-6 py-6 flex items-center shadow-2xl border-t`;
+    icon.className = `fa-solid ${theme.icon} text-2xl text-white`;
+    label.innerText = theme.label;
+    msg.innerText = message;
+
+    // Animacija ulaska
+    toast.classList.remove('hidden', 'translate-y-full');
+    
+    // Auto-hide nakon 5s
+    setTimeout(() => {
+      toast.classList.add('translate-y-full');
+    }, 5000);
+  };
+
+  // Zatvaranje na gumb
+  document.getElementById('close-toast')?.addEventListener('click', () => {
+    document.getElementById('global-toast')?.classList.add('translate-y-full');
+  });
+
+  // Provjera SessionStorage-a (za poruke nakon redirecta)
+  const pending = sessionStorage.getItem('pending_toast');
+  if (pending) {
+    const { type, message } = JSON.parse(pending);
+    window.showToast(message, type);
+    sessionStorage.removeItem('pending_toast');
+  }
+</script>
--- a/001.FRONTEND/src/components/WelcomeHeader.astro
+++ b/001.FRONTEND/src/components/WelcomeHeader.astro
@@ -0,0 +1,36 @@
+---
+// src/components/WelcomeHeader.astro
+import site from "../data/site.json";
+
+const currentPath = Astro.url.pathname.replace(/\/$/, "") || "/";
+const currentPageData = site.navigation.find(item => item.url === currentPath);
+
+console.log("Current Path:", currentPath);
+
+const {
+  welcomeHeaderTextH1 = "Dobrodošli",
+  welcomeHeaderTextH1dodatno = "",
+  welcomeHeaderPodnaslov = "Pregled sustava",
+  welcomeHeaderPovratniURL = "",
+  welcomeHeaderDisplay = true
+} = currentPageData || {};
+---
+
+{welcomeHeaderDisplay && (
+  <header class="mb-12 px-2">
+    {welcomeHeaderPovratniURL && (
+      <a href={welcomeHeaderPovratniURL} class="text-blue-600 text-[10px] font-black uppercase tracking-widest no-underline flex items-center gap-2 mb-6 hover:opacity-70 transition-opacity italic">
+        <i class="fa-solid fa-arrow-left text-[8px]"></i> Povratak
+      </a>
+    )}
+
+    <div class="text-left">
+        <h1 class="text-4xl sm:text-6xl font-black text-gray-900 dark:text-white uppercase tracking-tighter leading-none italic">
+          {welcomeHeaderTextH1} <span class="text-blue-600"> {welcomeHeaderTextH1dodatno}</span>
+        </h1>
+        <p class="text-gray-500 dark:text-gray-400 mt-4 font-medium italic text-lg leading-tight">
+          {welcomeHeaderPodnaslov}
+        </p>
+      </div>
+  </header>
+)}
--- a/001.FRONTEND/src/data/site.json
+++ b/001.FRONTEND/src/data/site.json
@@ -0,0 +1,97 @@
+{
+  "title": "ServisLog",
+  "description": "Profesionalni sustav za upravljanje servisnim operacijama",
+  "url": "https://servislog.hr",
+  "author": "Servis tim",
+  "theme": {
+    "mode": "dark",
+    "color": "blue"
+  },
+  "navigation": [
+    {
+      "name": "Dashboard",
+      "url": "/",
+      "icon": "fa-chart-line",
+      "welcomeHeaderDisplay": true,
+      "welcomeHeaderTextH1": "Kontrolna",
+      "welcomeHeaderTextH1dodatno": " ploča",
+      "welcomeHeaderPodnaslov": "Pregled ključnih informacija u stvarnom vremenu",
+      "welcomeHeaderPovratniURL": ""
+    },
+    {
+      "name": "Radni nalozi",
+      "url": "/operativa/radni-nalozi",
+      "icon": "fa-file-signature",
+      "welcomeHeaderDisplay": true,
+      "welcomeHeaderTextH1": "Radni",
+      "welcomeHeaderTextH1dodatno": " nalozi",
+      "welcomeHeaderPodnaslov": "Pregled ključnih informacija u stvarnom vremenu",
+      "welcomeHeaderPovratniURL": "/"
+    },
+    {
+      "name": "Vozni Park",
+      "url": "/fleet/vozila",
+      "icon": "fa-truck-pickup",
+      "welcomeHeaderDisplay": true,
+      "welcomeHeaderTextH1": "Vozni",
+      "welcomeHeaderTextH1dodatno": " park",
+      "welcomeHeaderPodnaslov": "Sustavna evidencija i nadzor mobilnih resursa",
+      "welcomeHeaderPovratniURL": "/"
+    },
+    {
+      "name": "Registrirani strojevi",
+      "url": "/fleet/strojevi",
+      "icon": "fa-truck-pickup",
+      "welcomeHeaderDisplay": true,
+      "welcomeHeaderTextH1": "Vozni",
+      "welcomeHeaderTextH1dodatno": " park",
+      "welcomeHeaderPodnaslov": "Sustavna evidencija i nadzor mobilnih resursa",
+      "welcomeHeaderPovratniURL": "/"
+    },
+    {
+      "name": "Klijenti",
+      "url": "/kupci/svi",
+      "icon": "fa-address-book",
+      "welcomeHeaderDisplay": true,
+      "welcomeHeaderTextH1": "Pregled",
+      "welcomeHeaderTextH1dodatno": "klijenata",
+      "welcomeHeaderPodnaslov": "Upravljanje bazom korisnika i partnera",
+      "welcomeHeaderPovratniURL": "/"
+    },
+    {
+      "name": "Kalendar",
+      "url": "/kalendar-dogadaja",
+      "icon": "fa-calendar-days",
+      "welcomeHeaderDisplay": true, 
+      "welcomeHeaderTextH1": "Kalendar",
+      "welcomeHeaderTextH1dodatno": "događaja",
+      "welcomeHeaderPodnaslov": "Pregled operacija u stvarnom vremenu",
+      "welcomeHeaderPovratniURL": "/" 
+    },
+    {
+      "name": "Login",
+      "url": "/login",
+      "icon": "fa-calendar-days",
+      "welcomeHeaderDisplay": false,
+      "welcomeHeaderTextH1": "Prijava",
+      "welcomeHeaderTextH1dodatno": " korisnika",
+      "welcomeHeaderPodnaslov": "Pristup sustavu za ovlaštene korisnike",
+      "welcomeHeaderPovratniURL": ""
+    },
+    {
+      "name": "Novi Radni Nalog",
+      "url": "/operativa/radni-nalozi/novi",
+      "icon": "fa-calendar-days",
+      "welcomeHeaderDisplay": true,
+      "welcomeHeaderTextH1": "Novi",
+      "welcomeHeaderTextH1dodatno": " Radni nalog",
+      "welcomeHeaderPodnaslov": "Otvaranje novog servisnog ili radnog naloga u sustavu",
+      "welcomeHeaderPovratniURL": "/operativa/radni-nalozi"
+    }
+  ],
+  "api_endpoints": {
+    "base": "PUBLIC_API_URL",
+    "auth": "/token/",
+    "me": "/users/me/"
+  }
+}
--- a/001.FRONTEND/src/layouts/Layout.astro
+++ b/001.FRONTEND/src/layouts/Layout.astro
@@ -0,0 +1,67 @@
+---
+// src/layouts/Layout.astro
+import Nav from "../components/Navbar.astro";
+import Toast from '../components/Toast.astro';
+import site from "../data/site.json";
+import "../styles/global.css";
+
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const { 
+  title = site.title, 
+  description = site.description 
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang="hr" class="scroll-smooth">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <meta name="description" content={description} />
+    
+    <title>{title} | {site.title}</title>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  </head>
+  
+  <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white antialiased min-h-screen flex flex-col">
+    
+    <Nav />
+
+    <main class="flex-grow w-full max-w-7xl mx-auto pt-24 pb-12 px-4 sm:px-6 lg:px-8">
+      <slot />
+    </main>
+
+    <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-6 text-center text-sm text-gray-500">
+      &copy; {new Date().getFullYear()} {site.title}. Sva prava pridržana.
+    </footer>
+
+    <Toast />
+
+    <script is:inline src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
+  </body>
+</html>
+
+<style is:global>
+  /* Integracija Tailwinda unutar Layouta */
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  body {
+    font-family: 'Inter', system-ui, sans-serif;
+  }
+
+  /* Osigurava da Dark Mode radi ispravno s Flowbite-om */
+  .dark {
+    color-scheme: dark;
+  }
+</style>
--- a/001.FRONTEND/src/pages/fleet/strojevi/[id].astro
+++ b/001.FRONTEND/src/pages/fleet/strojevi/[id].astro
@@ -0,0 +1,163 @@
+---
+// src/pages/fleet/strojevi/[id].astro
+import Layout from "../../../layouts/Layout.astro";
+import Button from "../../../components/Button.astro";
+import AkcijePanel from "../../../components/AkcijePanel.astro";
+
+// Importiranje utilitija
+const { id } = Astro.params;
+const API_BASE = import.meta.env.PUBLIC_API_URL;
+
+let stroj = null;
+
+try {
+  // Dohvaćamo točno određeni stroj
+  const res = await fetch(`${API_BASE}/fleet/strojevi/${id}/?t=${Date.now()}`);
+  if (res.ok) stroj = await res.json();
+} catch (e) {
+  console.error("Greška pri dohvatu detalja stroja:", e);
+}
+
+if (!stroj) return Astro.redirect("/404");
+
+// Logika za Atest status (npr. ako je unutar 30 dana ili prošao)
+const atestDate = stroj.datum_zadnjeg_atesta ? new Date(stroj.datum_zadnjeg_atesta) : null;
+const isAtestExpired = atestDate && atestDate < new Date();
+---
+
+<Layout title={`Stroj | ${stroj.naziv}`}>
+  <div class="w-full space-y-10">
+    
+    <header class="px-2 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+      <div class="space-y-4">
+        <a href="/fleet/strojevi" class="text-blue-600 text-[10px] font-black uppercase tracking-[0.3em] hover:underline flex items-center gap-2 no-underline mb-4">
+          <i class="fa-solid fa-arrow-left text-[8px]"></i> Povratak u park
+        </a>
+        <div class="flex items-center gap-4">
+            <h1 class="text-4xl sm:text-6xl font-black text-gray-900 dark:text-white uppercase tracking-tighter leading-none italic">
+              {stroj.naziv}
+            </h1>
+            <div class="hidden sm:block px-4 py-1.5 bg-blue-600 text-white rounded-full text-[10px] font-black uppercase tracking-widest italic">
+                {stroj.tip_human_readable}
+            </div>
+        </div>
+        <p class="text-gray-500 dark:text-gray-400 font-medium italic">
+          Vlasnik: <a href={`/kupci/${stroj.vlasnik}`} class="text-blue-600 underline font-bold">{stroj.vlasnik_naziv}</a>
+        </p>
+      </div>
+
+      <div class="flex items-center gap-3 px-6 py-4 bg-white dark:bg-gray-800 rounded-[2rem] border border-gray-100 dark:border-gray-700 shadow-xl">
+        <div class="flex flex-col items-end">
+            <span class="text-[8px] font-black uppercase text-gray-400 tracking-widest">Serijski broj</span>
+            <span class="text-xl font-black text-gray-900 dark:text-white tracking-tighter italic">{stroj.serijski_broj}</span>
+        </div>
+        <div class="w-px h-8 bg-gray-100 dark:bg-gray-700 mx-2"></div>
+        <i class="fa-solid fa-barcode text-gray-200 text-2xl"></i>
+      </div>
+    </header>
+
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 px-2">
+        <div class="bg-white dark:bg-gray-800 p-8 rounded-[2.5rem] border border-gray-100 dark:border-gray-700 shadow-sm relative overflow-hidden group">
+            <i class="fa-solid fa-calendar absolute -right-4 -bottom-4 text-6xl opacity-5 group-hover:rotate-12 transition-transform"></i>
+            <span class="text-[9px] font-black uppercase text-gray-400 block mb-2 tracking-widest">Godište</span>
+            <span class="text-4xl font-black dark:text-white italic tracking-tighter">{stroj.godina_proizvodnje || 'N/A'}</span>
+        </div>
+        
+        <div class="bg-white dark:bg-gray-800 p-8 rounded-[2.5rem] border border-gray-100 dark:border-gray-700 shadow-sm relative overflow-hidden group">
+            <i class="fa-solid fa-gauge-high absolute -right-4 -bottom-4 text-6xl opacity-5 group-hover:rotate-12 transition-transform"></i>
+            <span class="text-[9px] font-black uppercase text-gray-400 block mb-2 tracking-widest">Radni sati</span>
+            <div class="flex items-baseline gap-2">
+                <span class="text-4xl font-black dark:text-white italic tracking-tighter">{parseFloat(stroj.radni_sati).toLocaleString('hr-HR')}</span>
+                <span class="text-xs font-black text-blue-600 uppercase">H</span>
+            </div>
+        </div>
+
+        <div class={`p-8 rounded-[2.5rem] border relative overflow-hidden group ${isAtestExpired ? 'bg-red-50 border-red-100 dark:bg-red-900/10 dark:border-red-900/20' : 'bg-emerald-50 border-emerald-100 dark:bg-emerald-900/10 dark:border-emerald-900/20'}`}>
+            <i class="fa-solid fa-shield-check absolute -right-4 -bottom-4 text-6xl opacity-10 group-hover:rotate-12 transition-transform"></i>
+            <span class={`text-[9px] font-black uppercase block mb-2 tracking-widest ${isAtestExpired ? 'text-red-600' : 'text-emerald-600'}`}>Zadnji atest</span>
+            <span class={`text-2xl font-black italic tracking-tighter ${isAtestExpired ? 'text-red-600' : 'text-emerald-600'}`}>
+                {stroj.datum_zadnjeg_atesta ? new Date(stroj.datum_zadnjeg_atesta).toLocaleDateString('hr-HR') : 'Nema podataka'}
+            </span>
+        </div>
+
+        <div class="bg-gray-900 dark:bg-black p-8 rounded-[2.5rem] text-white relative overflow-hidden group shadow-2xl">
+            <i class="fa-solid fa-industry absolute -right-4 -bottom-4 text-6xl opacity-20 group-hover:rotate-12 transition-transform"></i>
+            <span class="text-[9px] font-black uppercase text-gray-400 block mb-2 tracking-widest">Proizvođač</span>
+            <span class="text-2xl font-black italic tracking-tighter block uppercase">{stroj.marka}</span>
+        </div>
+    </div>
+
+    <div class="grid md:grid-cols-10 gap-8 items-start px-2">
+      
+      <div class="md:col-span-7 space-y-8">
+        <div class="bg-white dark:bg-gray-800 rounded-[3.5rem] p-10 md:p-16 border border-gray-100 dark:border-gray-700 shadow-2xl shadow-blue-500/5 relative overflow-hidden">
+          <div class="grid sm:grid-cols-2 gap-12 items-center">
+            <div class="space-y-8">
+                <div>
+                    <label class="text-[10px] font-black uppercase tracking-[0.3em] text-blue-600 block mb-4 italic">Tehnička Specifikacija</label>
+                    <div class="space-y-4">
+                        <div class="flex justify-between border-b border-gray-50 dark:border-gray-700 pb-2">
+                            <span class="text-xs font-bold text-gray-400 uppercase italic">Model</span>
+                            <span class="text-sm font-black dark:text-white uppercase">{stroj.model_stroja}</span>
+                        </div>
+                        <div class="flex justify-between border-b border-gray-50 dark:border-gray-700 pb-2">
+                            <span class="text-xs font-bold text-gray-400 uppercase italic">Tip jedinice</span>
+                            <span class="text-sm font-black dark:text-white uppercase">{stroj.tip_human_readable}</span>
+                        </div>
+                        <div class="flex justify-between border-b border-gray-50 dark:border-gray-700 pb-2">
+                            <span class="text-xs font-bold text-gray-400 uppercase italic">Registracija</span>
+                            <span class="text-sm font-black dark:text-white uppercase">{stroj.registracija || 'NIJE REGISTRIRAN'}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pt-6">
+                    <Button variant="primary" class="!rounded-2xl py-4 w-full justify-center font-black uppercase italic tracking-widest">
+                        <i class="fa-solid fa-wrench mr-2"></i> Otvori servisni nalog
+                    </Button>
+                </div>
+            </div>
+
+            <div class="relative group">
+                <div class="absolute inset-0 bg-blue-600 rounded-[2.5rem] rotate-3 opacity-10 group-hover:rotate-0 transition-transform duration-500"></div>
+                <div class="relative aspect-square bg-gray-100 dark:bg-gray-900 rounded-[2.5rem] overflow-hidden border border-gray-100 dark:border-gray-700">
+                    <img 
+                        src="http://googleusercontent.com/image_collection/image_retrieval/5305205557646734227" 
+                        alt={stroj.naziv} 
+                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 grayscale hover:grayscale-0"
+                    />
+                </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-gray-50 dark:bg-gray-900/50 rounded-[2.5rem] p-10 border border-dashed border-gray-200 dark:border-gray-700">
+            <h3 class="text-sm font-black uppercase tracking-[0.2em] mb-4 dark:text-white italic">Status održavanja</h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed italic">
+                Ovaj stroj ({stroj.naziv}) je zadnji put atestiran {stroj.datum_zadnjeg_atesta}. Prema servisnom planu, toranjske dizalice zahtijevaju periodični pregled svakih 12 mjeseci. Trenutni radni sati ({stroj.radni_sati} h) sugeriraju potrebu za redovnim podmazivanjem sklopova.
+            </p>
+        </div>
+      </div>
+
+      <div class="md:col-span-3">
+        <AkcijePanel tip="stroj" podaci={stroj} />
+        
+        <!-- <div class="mt-8 bg-blue-600 rounded-[2.5rem] p-8 text-white shadow-2xl relative overflow-hidden group">
+            <i class="fa-solid fa-file-pdf absolute -right-4 -top-4 text-7xl opacity-10"></i>
+            <h4 class="text-sm font-black uppercase tracking-widest italic mb-4">Dokumentacija</h4>
+            <div class="space-y-3 relative z-10">
+                <button class="w-full text-left bg-white/10 hover:bg-white/20 p-4 rounded-xl border border-white/10 transition-all">
+                    <span class="text-[9px] font-black uppercase block opacity-70">Atestni list</span>
+                    <span class="text-xs font-bold italic">Preuzmi PDF</span>
+                </button>
+                <button class="w-full text-left bg-white/10 hover:bg-white/20 p-4 rounded-xl border border-white/10 transition-all">
+                    <span class="text-[9px] font-black uppercase block opacity-70">Tehnički podaci</span>
+                    <span class="text-xs font-bold italic">Otvori specifikaciju</span>
+                </button>
+            </div>
+        </div> -->
+      </div>
+
+    </div>
+  </div>
+</Layout>
--- a/001.FRONTEND/src/pages/fleet/strojevi/index.astro
+++ b/001.FRONTEND/src/pages/fleet/strojevi/index.astro
@@ -0,0 +1,101 @@
+---
+// src/pages/fleet/strojevi/index.astro
+import Layout from "../../../layouts/Layout.astro";
+import AkcijePanel from "../../../components/AkcijePanel.astro";
+import WelcomeHeader from "../../../components/WelcomeHeader.astro";
+import NaslovList from "../../../components/NaslovList.astro";
+import GenericKarticaItem from "../../../components/GenericKarticaItem.astro";
+
+// Importiranje utilitija
+import { fetchStrojeviData, fetchCurrentUser } from "../../../lib/api"; 
+import { getStatusColorClass, formatStatus } from "../../../utils/ui";
+
+// 1. DOHVAT FILTERA IZ URL-a
+const url = new URL(Astro.request.url);
+const vlasnikId = url.searchParams.get('vlasnik');
+
+// 2. DOHVAT PODATAKA (Paralelno)
+const [{ strojevi }, user] = await Promise.all([
+  fetchStrojeviData(vlasnikId),
+  fetchCurrentUser()
+]);
+
+// 3. LOGIKA ZA DINAMIČKE INFORMACIJE
+const imeKupca = strojevi.length > 0 && vlasnikId ? strojevi[0].vlasnik_naziv : null;
+const imeKorisnika = user?.first_name || "Serviser";
+const ulogaKorisnika = user?.is_serviser ? "Tehnička Služba" : "Logistika";
+
+let dinamickiPodnaslov = "Pregled kompletne strojne flote i dizalica";
+if (vlasnikId && imeKupca) {
+    dinamickiPodnaslov = `Prikaz strojeva dodijeljenih klijentu: ${imeKupca}`;
+}
+---
+
+<Layout title="Strojni park | Upravljanje">
+  <div class="w-full space-y-10">
+    
+    <!-- 1. WELCOME HEADER -->
+    <WelcomeHeader 
+      textH1="Strojni park" 
+      ime={imeKorisnika} 
+      uloga={ulogaKorisnika}
+      podnaslov={dinamickiPodnaslov}
+    />
+
+    <div class="grid md:grid-cols-10 gap-8 items-start mb-10 px-2">
+      
+      <div class="md:col-span-7 space-y-6">
+        
+        <!-- 2. NASLOV LISTE S GUMBOM ZA RESET FILTRA -->
+        <div class="space-y-2">
+            <NaslovList 
+                naslov={vlasnikId ? "Filtrirani strojevi" : "Tehničke jedinice"}
+                ukupno={strojevi.length}
+                label1="Ukupno"
+                count1={strojevi.length}
+                label2="Na terenu"
+                count2={strojevi.length} // Ovdje možeš dodati filter za npr. 'u_radu'
+            />
+            
+            {vlasnikId && (
+              <div class="px-6">
+                <a href="/fleet/strojevi" class="text-[9px] font-black text-red-500 uppercase tracking-widest hover:text-red-600 transition-colors flex items-center gap-2 italic">
+                    <i class="fa-solid fa-circle-xmark"></i> Ukloni filter klijenta
+                </a>
+              </div>
+            )}
+        </div>
+
+        <!-- 3. GENERIČKA LISTA STROJEVA -->
+        <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="strojevi-list">
+            {strojevi.length > 0 ? strojevi.map((s) => (
+              <GenericKarticaItem 
+                bojaTeme="indigo"
+                href={`/fleet/strojevi/${s.id}`}
+                ikona="fa-screwdriver-wrench"
+                naslov={s.naziv}
+                subNaslov={s.serijski_broj}
+                metaTekst={`${s.vlasnik_naziv} | Radni sati: ${s.radni_sati}h`}
+                status={s.status || 'planirano'} 
+                statusPrikaz={formatStatus(s.status || 'planirano')}
+                statusBojaClass={getStatusColorClass(s.status || 'planirano')}
+              />
+            )) : (
+              <div class="p-24 text-center">
+                <i class="fa-solid fa-box-open text-4xl text-gray-100 dark:text-gray-700 mb-4 block"></i>
+                <p class="italic text-gray-400 text-[10px] uppercase tracking-widest leading-none">Nema strojeva u bazi podataka</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <!-- DESNI PANEL -->
+      <div class="md:col-span-3">
+        <AkcijePanel tip="fleet" />
+      </div>
+
+    </div>
+  </div>
+</Layout>
--- a/001.FRONTEND/src/pages/fleet/vozila/index.astro
+++ b/001.FRONTEND/src/pages/fleet/vozila/index.astro
@@ -0,0 +1,95 @@
+---
+// src/pages/fleet/vozila/index.astro
+import Layout from "../../../layouts/Layout.astro";
+import Button from "../../../components/Button.astro";
+import AkcijePanel from "../../../components/AkcijePanel.astro";
+import WelcomeHeader from "../../../components/WelcomeHeader.astro"; // Importamo novi header
+import NaslovList from "../../../components/NaslovList.astro";
+import GenericKarticaItem from "../../../components/GenericKarticaItem.astro";
+
+// Importiranje utilitija
+import { fetchDashboardData, fetchCurrentUser } from "../../../lib/api";
+import { getStatusColorClass } from "../../../utils/ui";
+
+// 1. DOHVAT PODATAKA
+// Paralelno dohvaćamo podatke o vozilima i trenutnom korisniku za Header
+const [dashboardData, user] = await Promise.all([
+  fetchDashboardData(),
+  fetchCurrentUser()
+]);
+
+const vozila = dashboardData?.vozila || [];
+
+// 2. LOGIKA STATISTIKE
+const aktivnaVozila = vozila.filter(v => v.status === 'aktivan').length;
+const naServisu = vozila.filter(v => v.status === 'servis').length;
+const neaktivnaVozila = vozila.filter(v => v.status === 'neaktivan').length;
+
+// Podaci za WelcomeHeader
+const imeKorisnika = user?.first_name || "Serviser";
+// const ulogaKorisnika = user?.is_serviser ? "Terenski Tehničar" : "Logistika";
+---
+
+<Layout title="Vozni park | Flota">
+  <div class="w-full space-y-10">
+    
+    <!-- WELCOME HEADER -->
+    <WelcomeHeader />
+
+    <!-- LISTA VOZILA +  -->
+    <div class="grid md:grid-cols-10 gap-8 items-start mb-10 px-2">
+      
+      <!-- LIJEVI STUPAC: POPIS -->
+      <div class="md:col-span-7 space-y-6">
+        <NaslovList 
+          naslov="Aktivna Flota" 
+          ukupno={vozila.length}
+          label1="Spremni"
+          filter1="planirano"
+          count1={aktivnaVozila}
+          label2="Servis"
+          count2={naServisu}
+          filter2="u_radu"
+          label3="Neaktivni"
+          count3={neaktivnaVozila}
+          filter3="neaktivan"
+        />
+
+        <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="vozila-list">
+            {vozila.length > 0 ? vozila.map((v) => (
+              <GenericKarticaItem 
+                href={`/fleet/vozila/${v.id}`}
+                status={v.status}
+                statusBojaClass={getStatusColorClass(v.status)}
+                ikona={v.status === 'aktivan' ? 'fa-truck' : 'fa-screwdriver-wrench'}
+                naslov={v.naziv}
+                subNaslov={v.registracija}
+                metaTekst={`Prijavljeno: ${v.trenutni_kilometri.toLocaleString()} KM | Lokacija: Baza`}
+                statusPrikaz={v.status_prikaz}
+              />
+            )) : (
+              <div class="p-24 text-center">
+                <i class="fa-solid fa-truck-dash text-4xl text-gray-100 dark:text-gray-700 mb-4 block"></i>
+                <p class="italic text-gray-400 text-[10px] uppercase tracking-widest leading-none">Baza podataka je prazna</p>
+                <Button variant="outline" class="mt-6" id="btn-dodaj-prvo">Dodaj prvo vozilo</Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <!-- DESNI PANEL - AKCIJE -->
+      <div class="md:col-span-3">
+        <AkcijePanel />
+      </div>
+
+    </div>
+  </div>
+</Layout>
+
+<script>
+  import { initFilters } from "../../../scripts/filters";
+  initFilters();
+  document.addEventListener('astro:after-swap', initFilters);
+</script>
--- a/001.FRONTEND/src/pages/index.astro
+++ b/001.FRONTEND/src/pages/index.astro
@@ -0,0 +1,90 @@
+---
+// src/pages/index.astro
+import Layout from "../layouts/Layout.astro";
+import WelcomeHeader from "../components/WelcomeHeader.astro";
+import AkcijePanel from "../components/AkcijePanel.astro";
+import RadniNalogLista from "../components/RadniNalogLista.astro";
+import StatsGrid from "../components/StatsGrid.astro";
+import Kalendar from "../components/Kalendar/Kalendar.astro";
+
+// API i Utils
+import { fetchDashboardData, fetchCurrentUser } from "../lib/api";
+
+// 1. Dohvat podataka (paralelno radi brzine)
+const [data, user] = await Promise.all([
+  fetchDashboardData(),
+  fetchCurrentUser()
+]);
+
+const nalozi = data?.nalozi || [];
+const imeKorisnika = user?.first_name || "Kolega";
+
+// 2. Kalkulacija statistike samo za StatsGrid (ostalo ide u RadniNalogLista)
+const naloziURadu = nalozi.filter(n => n.status === 'u_radu').length;
+const planiraniNalozi = nalozi.filter(n => n.status === 'planirano').length;
+const zavrseniNalozi = nalozi.filter(n => n.status === 'zavrseno' || n.status === 'naplaceno').length;
+---
+
+<Layout title="Dashboard | ServisLog">
+  <div class="w-full space-y-5">
+    
+    <!-- WELCOME HEADER -->
+    <WelcomeHeader />
+
+    <!-- STATS GRID -->
+    <div class="grid grid-cols-3 gap-2 sm:gap-6 px-2">
+      <StatsGrid 
+        label="Planirano" 
+        value={planiraniNalozi} 
+        icon="fa-calendar-check" 
+        variant="blue"
+        filterValue="planirano"
+      />
+      <StatsGrid 
+        label="U radu" 
+        value={naloziURadu} 
+        icon="fa-screwdriver-wrench" 
+        variant="yellow" 
+        animate={true}
+        filterValue="u_radu"
+      />
+      <StatsGrid 
+        label="Gotovo" 
+        value={zavrseniNalozi} 
+        icon="fa-circle-check" 
+        variant="emerald"
+        filterValue="zavrseno"
+      />  
+    </div>
+
+    <!-- RADNI NALOZI LISTA + AKCIJE PANEL -->
+    <div class="grid md:grid-cols-10 gap-8 items-start px-2 pb-10">
+      
+      <div class="md:col-span-7 space-y-8">
+        <RadniNalogLista 
+          limit={5} 
+          naslov="Zadnje aktivnosti" 
+          prikaziNaslov={true}
+        />
+      </div>
+
+      <div class="md:col-span-3 sticky top-28">
+        <AkcijePanel tip="dashboard" />
+      </div>
+
+    </div>
+  </div>
+  <div>
+    <Kalendar />
+  </div>
+</Layout>
+
+<script>
+  import { initFilters } from "../scripts/filters.js";
+  
+  // Inicijalizacija filtera za StatsGrid klikove
+  initFilters();
+
+  // Re-inicijalizacija kod navigacije (Astro View Transitions)
+  document.addEventListener('astro:after-swap', initFilters);
+</script>
--- a/001.FRONTEND/src/pages/kalendar-dogadaja.astro
+++ b/001.FRONTEND/src/pages/kalendar-dogadaja.astro
@@ -0,0 +1,25 @@
+---
+// src/pages/kalendar-dogadaja.astro
+import Layout from "../layouts/Layout.astro";
+import WelcomeHeader from "../components/WelcomeHeader.astro";
+import Kalendar from "../components/Kalendar/Kalendar.astro";
+
+// API i Utils
+import { fetchCurrentUser } from "../lib/api";
+
+// 1. Dohvaćamo samo korisnika za pozdrav u headeru
+const user = await fetchCurrentUser();
+const imeKorisnika = user?.first_name || "Kolega";
+---
+
+<Layout title="Kalendar | ServisLog">
+  <div class="w-full space-y-10">
+
+    <WelcomeHeader ime={imeKorisnika} />
+    
+    <div class="grid grid-cols-1 gap-2 sm:gap-6 px-2">
+      <Kalendar />
+    </div>
+
+  </div>
+</Layout>
--- a/001.FRONTEND/src/pages/kupci/[id].astro
+++ b/001.FRONTEND/src/pages/kupci/[id].astro
@@ -0,0 +1,131 @@
+---
+// src/pages/kupci/[id].astro
+import Layout from "../../layouts/Layout.astro";
+import AkcijePanel from "../../components/AkcijePanel.astro";
+import ListaStrojeva from "../../components/ListaStrojeva.astro";
+import { fetchStrojeviData, fetchRadniNalozi, fetchKupacDetalji, routes } from "../../lib/api";
+
+const { id } = Astro.params;
+
+// 1. Paralelno dohvaćanje podataka (brže renderiranje)
+// Koristimo status 'u_radu' jer smo utvrdili da Django ne prepoznaje 'otvoreno'
+const [strojeviData, kupac, nalozi] = await Promise.all([
+    fetchStrojeviData(id),
+    fetchKupacDetalji(id),
+    fetchRadniNalozi({ klijent: id, status: 'u_radu' })
+]);
+
+const strojevi = strojeviData?.strojevi || [];
+
+// 2. Sigurnosni redirect ako kupac ne postoji
+if (!kupac) return Astro.redirect("/404");
+---
+
+<Layout title={`Klijent | ${kupac.naziv}`}>
+  <div class="w-full space-y-10">
+    
+    <!-- 1. HEADER (Brutalistički stil) -->
+    <header class="px-2 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+      <div class="space-y-4">
+        <a href="/kupci/svi" class="text-indigo-600 text-[10px] font-black uppercase tracking-[0.3em] hover:underline flex items-center gap-2 no-underline mb-4">
+          <i class="fa-solid fa-arrow-left text-[8px]"></i> Povratak klijentima
+        </a>
+        <div class="flex items-center gap-4">
+            <h1 class="text-4xl sm:text-6xl font-black text-gray-900 dark:text-white uppercase tracking-tighter leading-none italic">
+              {kupac.naziv}
+            </h1>
+            <div class="hidden sm:block px-4 py-1.5 bg-indigo-600 text-white rounded-full text-[10px] font-black uppercase tracking-widest italic">
+                {kupac.tip || 'Partner'}
+            </div>
+        </div>
+        <p class="text-gray-500 dark:text-gray-400 font-medium italic">
+          Glavno sjedište: <span class="text-indigo-600 font-bold">{kupac.grad}, {kupac.adresa}</span>
+        </p>
+      </div>
+
+      <!-- OIB Info box -->
+      <div class="flex items-center gap-3 px-6 py-4 bg-white dark:bg-gray-800 rounded-[2rem] border border-gray-100 dark:border-gray-700 shadow-xl">
+        <div class="flex flex-col items-end">
+            <span class="text-[8px] font-black uppercase text-gray-400 tracking-widest">Porezni broj</span>
+            <span class="text-xl font-black text-gray-900 dark:text-white tracking-tighter italic">OIB: {kupac.oib}</span>
+        </div>
+        <div class="w-px h-8 bg-gray-100 dark:bg-gray-700 mx-2"></div>
+        <i class="fa-solid fa-address-card text-gray-200 text-2xl"></i>
+      </div>
+    </header>
+
+    <!-- 2. QUICK STATS (Brojači) -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 px-2">
+        <div class="bg-white dark:bg-gray-800 p-8 rounded-[2.5rem] border border-gray-100 dark:border-gray-700 shadow-sm relative overflow-hidden group">
+            <i class="fa-solid fa-crane absolute -right-4 -bottom-4 text-6xl opacity-5 group-hover:rotate-12 transition-transform"></i>
+            <span class="text-[9px] font-black uppercase text-gray-400 block mb-2 tracking-widest italic">Strojni Park</span>
+            <div class="flex items-baseline gap-2">
+                <span class="text-4xl font-black dark:text-white italic tracking-tighter">{strojevi.length}</span>
+                <span class="text-xs font-black text-indigo-600 uppercase">Jedinica</span>
+            </div>
+        </div>
+        
+        <!-- Poveznica na filtriranu listu naloga -->
+        <a 
+          href={routes.radniNalozi(id, 'u_radu')} 
+          class="bg-white dark:bg-gray-800 p-8 rounded-[2.5rem] border border-gray-100 dark:border-gray-700 shadow-sm relative overflow-hidden group hover:border-indigo-500 transition-all no-underline block"
+        >
+            <i class="fa-solid fa-file-invoice absolute -right-4 -bottom-4 text-6xl opacity-5 group-hover:rotate-12 transition-transform text-indigo-600"></i>
+            <span class="text-[9px] font-black uppercase text-gray-400 block mb-2 tracking-widest italic group-hover:text-indigo-600 transition-colors">
+              Otvoreni radni Nalozi
+            </span>
+            <div class="flex items-baseline gap-2">
+                <span class="text-4xl font-black dark:text-white italic tracking-tighter">
+                  {String(nalozi?.length || 0)}
+                </span>
+                <i class="fa-solid fa-arrow-up-right-from-square text-[10px] text-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity ml-2"></i>
+            </div>
+        </a>
+    </div>
+
+    <!-- 3. MAIN CONTENT (Lista strojeva) -->
+    <div class="grid md:grid-cols-10 gap-8 items-start px-2">
+      <div class="md:col-span-7 space-y-12">
+        <div class="bg-white dark:bg-gray-800 rounded-[3.5rem] p-4 md:p-8 border border-gray-100 dark:border-gray-700 shadow-2xl shadow-indigo-500/5">
+            <ListaStrojeva 
+              strojevi={strojevi} 
+              naslov={`Operativna flota klijenta`} 
+              prikaziVlasnika={false} 
+              bojaTeme="indigo" 
+            />
+        </div>
+        
+        <div class="px-8 py-10 bg-gray-50 dark:bg-gray-900/50 rounded-[2.5rem] border border-dashed border-gray-200 dark:border-gray-700 flex justify-between items-center group">
+            <div class="space-y-1">
+                <h3 class="text-sm font-black uppercase dark:text-white italic tracking-widest">Napredna analitika voznog parka</h3>
+                <p class="text-xs text-gray-500 italic">Pristupite detaljnim izvještajima i povijesti strojeva.</p>
+            </div>
+            <a href={`/fleet/strojevi?vlasnik=${id}`} class="bg-indigo-600 text-white p-4 rounded-2xl hover:bg-indigo-700 transition-all shadow-xl shadow-indigo-500/20">
+                <i class="fa-solid fa-arrow-right-long text-xl"></i>
+            </a>
+        </div>
+      </div>
+
+      <!-- 4. RIGHT PANEL (Akcije i Detalji) -->
+      <div class="md:col-span-3">
+        <!-- AkcijePanel sada prima garantirani 'kupac' objekt -->
+        <AkcijePanel tip="vlasnik" podaci={kupac} />
+        
+        <div class="mt-8 bg-indigo-600 rounded-[2.5rem] p-8 text-white shadow-2xl relative overflow-hidden group">
+            <i class="fa-solid fa-comments-dollar absolute -right-4 -top-4 text-7xl opacity-10"></i>
+            <h4 class="text-sm font-black uppercase tracking-widest italic mb-4">Naplata i Ugovori</h4>
+            <div class="space-y-3 relative z-10">
+                <button class="w-full text-left bg-white/10 hover:bg-white/20 p-4 rounded-xl border border-white/10 transition-all">
+                    <span class="text-[9px] font-black uppercase block opacity-70">Uvjeti plaćanja</span>
+                    <span class="text-xs font-bold italic">30 dana (valuta)</span>
+                </button>
+                <button class="w-full text-left bg-white/10 hover:bg-white/20 p-4 rounded-xl border border-white/10 transition-all">
+                    <span class="text-[9px] font-black uppercase block opacity-70">Dokumentacija</span>
+                    <span class="text-xs font-bold italic">Preuzmi PDF</span>
+                </button>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</Layout>
--- a/001.FRONTEND/src/pages/kupci/svi.astro
+++ b/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>
--- a/001.FRONTEND/src/pages/login.astro
+++ b/001.FRONTEND/src/pages/login.astro
@@ -0,0 +1,18 @@
+---
+// src/pages/login.astro
+import Layout from "../layouts/Layout.astro";
+import LoginForm from "../components/LoginForm.astro";
+import WelcomeHeader from "../components/WelcomeHeader.astro";
+---
+
+<Layout title="Prijava u sustav">
+  <div class="flex items-center justify-center bg-gray-50 dark:bg-gray-950 px-4">
+    
+    <!-- WELCOME HEADER -->
+    <WelcomeHeader />
+    
+    <!-- LOGIN FORM -->
+    <LoginForm />
+
+  </div>
+</Layout>
--- a/001.FRONTEND/src/pages/operativa/radni-nalozi/[id].astro
+++ b/001.FRONTEND/src/pages/operativa/radni-nalozi/[id].astro
@@ -0,0 +1,181 @@
+---
+// src/pages/operativa/radni-nalozi/[id].astro
+import Layout from "../../../layouts/Layout.astro";
+import AkcijePanel from "../../../components/AkcijePanel.astro";
+import Gallery from "../../../components/Gallery.astro";
+
+// Utiliti za vizualni prikaz
+import { getStatusColorClass } from "../../../utils/ui";
+
+const { id } = Astro.params;
+const API_BASE = import.meta.env.PUBLIC_API_URL;
+
+let nalog = null;
+
+try {
+  // Dohvaćamo detaljne podatke (RadniNalogDetaljiSerializer)
+  const res = await fetch(`${API_BASE}/operativa/radni-nalozi/${id}/?t=${Date.now()}`);
+  if (res.ok) nalog = await res.json();
+} catch (e) {
+  console.error("Greška pri dohvatu detalja naloga:", e);
+}
+
+if (!nalog) return Astro.redirect("/404");
+
+// Priprema datuma za prikaz
+const datumKreiranja = new Date(nalog.datum_kreiranja).toLocaleDateString('hr-HR', {
+  day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit'
+});
+---
+
+<Layout title={`Nalog #${nalog.broj_naloga}`}>
+  <div class="w-full space-y-10 pb-20">
+    
+    <!-- 1. HEADER SEKCIJA -->
+    <header class="px-2 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+      <div>
+        <a href="/" class="text-blue-600 text-[10px] font-black uppercase tracking-[0.3em] hover:underline flex items-center gap-2 mb-6 no-underline">
+          <i class="fa-solid fa-arrow-left text-[8px]"></i> Povratak na dashboard
+        </a>
+        <h1 class="text-4xl md:text-6xl font-black text-gray-900 dark:text-white uppercase tracking-tighter leading-none">
+          Radni nalog <span class="text-blue-600">#{nalog.broj_naloga}</span>
+        </h1>
+        <div class="flex flex-wrap items-center gap-4 mt-4">
+            <p class="text-gray-500 dark:text-gray-400 font-medium italic text-sm">
+                Otvoreno: {datumKreiranja}h
+            </p>
+            <span class="hidden sm:block text-gray-300 dark:text-gray-700">|</span>
+            <p class="text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-widest">
+                <i class="fa-solid fa-user-gear mr-1"></i> {nalog.izvrsitelj_ime || 'Nedodijeljeno'}
+            </p>
+        </div>
+      </div>
+
+      <!-- Status Badge -->
+      <div class="flex items-center gap-3 px-6 py-3 bg-white dark:bg-gray-800 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-xl">
+        <div class:list={[
+            "w-3 h-3 rounded-full", 
+            getStatusColorClass(nalog.status),
+            {"animate-pulse": nalog.status === 'u_radu'}
+        ]}></div>
+        <span class="font-black uppercase text-xs tracking-widest text-gray-700 dark:text-gray-200">
+          {nalog.status_display}
+        </span>
+      </div>
+    </header>
+
+    <!-- 2. GLAVNI SADRŽAJ (Grid 10 stupaca) -->
+    <div class="grid md:grid-cols-10 gap-8 items-start px-2">
+      
+      <div class="md:col-span-7 space-y-8">
+        
+        <!-- Kartica: Opis kvara -->
+        <div class="bg-white dark:bg-gray-800 rounded-[3rem] p-10 md:p-16 border border-gray-100 dark:border-gray-700 shadow-2xl shadow-blue-500/5 relative overflow-hidden">
+          <label class="text-[10px] font-black uppercase tracking-[0.3em] text-blue-600 block mb-6 italic">Opis kvara / Zadatak</label>
+          <p class="text-2xl md:text-3xl font-medium text-gray-700 dark:text-gray-200 italic leading-tight tracking-tight">
+            "{nalog.opis_kvara}"
+          </p>
+        </div>
+
+        <!-- Grid: Stroj i Klijent -->
+        <div class="grid sm:grid-cols-2 gap-6">
+            <!-- STROJ (Tehnički podaci) -->
+            <div class="bg-gray-900 rounded-[2.5rem] p-8 text-white shadow-xl relative overflow-hidden group">
+                <i class="fa-solid fa-screwdriver-wrench absolute -right-4 -bottom-4 text-8xl opacity-10 -rotate-12 group-hover:rotate-0 transition-transform duration-700"></i>
+                <label class="text-[9px] font-black uppercase text-gray-500 block mb-4 italic tracking-widest">Stroj na popravku</label>
+                <h3 class="text-2xl font-black uppercase tracking-tighter italic leading-none mb-2">{nalog.stroj.naziv}</h3>
+                <span class="inline-block bg-blue-600 text-white px-3 py-1 rounded font-black text-[10px] tracking-widest uppercase mb-4">
+                    SN: {nalog.stroj?serijski_broj}
+                </span>
+                <div class="space-y-1">
+                    <p class="text-xs text-gray-400 font-medium uppercase">Radni sati: <span class="text-white font-black">{nalog.stroj.radni_sati} h</span></p>
+                    <p class="text-xs text-gray-400 font-medium uppercase">Lokacija: <span class="text-white font-black">{nalog.stroj.lokacija || 'Teren'}</span></p>
+                </div>
+            </div>
+
+            <!-- KLIJENT (Kontakt podaci) -->
+            <div class="bg-white dark:bg-gray-800 rounded-[2.5rem] p-8 border border-gray-100 dark:border-gray-700 shadow-sm">
+                <label class="text-[9px] font-black uppercase text-gray-400 block mb-4 italic tracking-widest">Klijent / Vlasnik</label>
+                <h3 class="text-2xl font-black uppercase tracking-tighter italic dark:text-white leading-none mb-2">{nalog.klijent.naziv}</h3>
+                <p class="text-sm text-gray-500 font-medium">{nalog.klijent.grad} <span class="mx-1 text-blue-500">•</span> OIB: {nalog.klijent.oib}</p>
+                
+                <div class="mt-6 flex flex-wrap gap-4">
+                    <a href={`tel:${nalog.klijent.telefon}`} class="flex items-center gap-2 text-blue-600 font-black text-[10px] uppercase no-underline hover:opacity-70 transition-opacity">
+                        <div class="w-7 h-7 rounded-full bg-blue-50 flex items-center justify-center"><i class="fa-solid fa-phone"></i></div> Nazovi
+                    </a>
+                    <a href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(nalog.klijent.adresa + ' ' + nalog.klijent.grad)}`} target="_blank" class="flex items-center gap-2 text-gray-500 font-black text-[10px] uppercase no-underline hover:opacity-70 transition-opacity">
+                        <div class="w-7 h-7 rounded-full bg-gray-50 flex items-center justify-center"><i class="fa-solid fa-location-dot"></i></div> Navigacija
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Kartica: Logistika (Vozilo) -->
+        {nalog.vozilo ? (
+        <div class="bg-blue-50 dark:bg-blue-900/10 rounded-[2.5rem] p-8 border border-blue-100 dark:border-blue-900/30 flex flex-col sm:flex-row justify-between items-center gap-6">
+            <div class="text-center sm:text-left">
+                <label class="text-[9px] font-black uppercase text-blue-400 block mb-2 italic tracking-widest">Servisno Vozilo</label>
+                <h3 class="text-xl font-black uppercase dark:text-white leading-tight">{nalog.vozilo.naziv}</h3>
+                <span class="text-sm font-bold text-blue-600">{nalog.vozilo.registracija}</span>
+            </div>
+            <div class="px-6 py-2 bg-white dark:bg-gray-800 rounded-2xl border border-blue-100 dark:border-blue-900/20 shadow-sm text-center">
+                <p class="text-[10px] text-gray-400 uppercase font-black mb-1">Početni KM</p>
+                <p class="text-lg font-black text-blue-600 leading-none">
+                    {nalog.vozilo.trenutni_kilometri?.toLocaleString() || '0'} km
+                </p>
+            </div>
+        </div>
+        ) : (
+        <div class="bg-gray-50 dark:bg-gray-900/30 rounded-[2.5rem] p-8 border border-dashed border-gray-200 dark:border-gray-800 flex items-center gap-4 opacity-60">
+            <i class="fa-solid fa-walking text-gray-400"></i>
+            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 italic">Radni nalog bez zaduženog vozila</p>
+        </div>
+        )}
+
+        <!-- SEKCIJA: GALERIJA (PhotoSwipe) -->
+        <div class="space-y-6">
+            <div class="flex items-center justify-between px-2">
+                <label class="text-[10px] font-black uppercase tracking-[0.3em] text-gray-400 italic">Foto dokumentacija terena</label>
+                <span class="text-[10px] font-black bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full text-gray-500">
+                    {nalog.slike?.length || 0} SLIKA
+                </span>
+            </div>
+            
+            <Gallery 
+                images={nalog.slike} 
+                galleryId={`gallery-rn-${nalog.id}`} 
+            />
+        </div>
+
+      </div>
+
+      <!-- DESNI PANEL (3 Stupca) -->
+      <div class="md:col-span-3 space-y-6 sticky top-10">
+        <!-- Komponenta za gumbe (Završi, Odgodi, Print...) -->
+        <AkcijePanel tip="radni-nalog" podaci={nalog} />
+        
+        <!-- Dodatni info o ažuriranju -->
+        <div class="bg-white dark:bg-gray-800 rounded-[2rem] p-6 border border-gray-100 dark:border-gray-700 shadow-sm">
+            <h4 class="text-[9px] font-black uppercase text-gray-400 mb-4 tracking-widest">Zadnja aktivnost</h4>
+            <div class="flex items-center gap-3">
+                <div class="w-8 h-8 rounded-xl bg-green-50 dark:bg-green-900/20 flex items-center justify-center text-green-600">
+                    <i class="fa-solid fa-clock-rotate-left text-xs"></i>
+                </div>
+                <div>
+                    <p class="text-[10px] text-gray-400 uppercase font-bold leading-none mb-1">Ažurirano</p>
+                    <p class="text-xs font-black dark:text-gray-200 leading-none">
+                        {new Date(nalog.datum_azuriranja).toLocaleDateString('hr-HR')} u {new Date(nalog.datum_azuriranja).toLocaleTimeString('hr-HR', {hour:'2-digit', minute:'2-digit'})}h
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- QR Kod ili ID -->
+        <div class="text-center p-6 border-2 border-dashed border-gray-100 dark:border-gray-800 rounded-[2rem]">
+            <p class="text-[8px] font-black text-gray-300 uppercase tracking-[0.4em]">Sistemski ID: {nalog.id}</p>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</Layout>
--- a/001.FRONTEND/src/pages/operativa/radni-nalozi/index.astro
+++ b/001.FRONTEND/src/pages/operativa/radni-nalozi/index.astro
@@ -0,0 +1,66 @@
+---
+// src/pages/operativa/radni-nalozi/index.astro
+import Layout from "../../../layouts/Layout.astro";
+import Button from "../../../components/Button.astro";
+import AkcijePanel from "../../../components/AkcijePanel.astro";
+import RadniNalogLista from "../../../components/RadniNalogLista.astro";
+import WelcomeHeader from "../../../components/WelcomeHeader.astro";
+import NaslovList from "../../../components/NaslovList.astro";
+
+// 1. DOHVAT PODATAKA
+import { fetchRadniNalozi, fetchCurrentUser } from "../../../lib/api";
+import { formatStatus, getStatusColorClass } from "../../../utils/ui";
+import site from "../../../data/site.json";
+
+// Paralelno dohvaćamo naloge i podatke o trenutnom korisniku
+const klijentId = Astro.url.searchParams.get('klijent');
+const statusParam = Astro.url.searchParams.get('status');
+
+const [nalozi, user] = await Promise.all([
+  fetchRadniNalozi({ klijent: klijentId, status: statusParam }),
+  fetchCurrentUser()
+]);
+
+// 2. LOGIKA ZA HEADER I BROJAČE
+const uRadu = nalozi.filter(n => n.status === 'u_radu').length;
+const planirano = nalozi.filter(n => n.status === 'planirano').length;
+const siteWelcomeHeader = site.navigation.find(({name}) => name === "Kalendar");
+
+// Podaci za WelcomeHeader
+const imeKorisnika = user?.first_name || "Serviser";
+---
+
+<Layout title="Radni nalozi | Arhiva">
+  <div class="w-full space-y-10">
+    
+    <!-- WELCOME HEADER -->
+    <WelcomeHeader />
+
+    <div class="grid md:grid-cols-10 gap-8 items-start mb-10 px-2">
+      
+      <div class="md:col-span-7 space-y-6">
+
+        <!-- 3. LISTA NALOGA -->
+        <!-- Postavljamo prikaziNaslov={false} jer smo naslov već ispisali iznad preko NaslovList -->
+        <RadniNalogLista 
+          limit={7} 
+          statusFilter={statusParam as any} 
+          prikaziNaslov={true} 
+        />
+      </div>
+
+      <!-- DESNI PANEL - AKCIJE -->
+      <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>
--- a/001.FRONTEND/src/pages/operativa/radni-nalozi/novi.astro
+++ b/001.FRONTEND/src/pages/operativa/radni-nalozi/novi.astro
@@ -0,0 +1,213 @@
+---
+// src/pages/operativa/radni-nalozi/novi.astro
+import Layout from "../../../layouts/Layout.astro";
+import Button from "../../../components/Button.astro";
+import { fetchKupciData, fetchStrojeviData } from "../../../lib/api";
+import WelcomeHeader from "../../../components/WelcomeHeader.astro";
+
+// 1. DOHVAT PODATAKA NA SERVERU
+const { kupci } = await fetchKupciData();
+const { strojevi } = await fetchStrojeviData();
+---
+
+<Layout title="Novi Radni Nalog">
+  <div class="max-w-3xl mx-auto space-y-8 px-2 py-10">
+    
+    <WelcomeHeader />
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6 border-b border-gray-100 dark:border-gray-700 pb-6 px-2">
+      <div class="space-y-2">
+        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 italic">Broj Naloga</label>
+        <div id="broj-naloga-display" class="w-full bg-gray-100 dark:bg-gray-900/50 border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-2xl p-5 font-black text-lg text-gray-400 flex items-center gap-3">
+          <i class="fa-solid fa-barcode opacity-30"></i>
+          <span id="broj-text">AUTO-GENERIRANO</span>
+        </div>
+        <p class="text-[9px] text-gray-400 ml-1 italic">* Broj će biti dodijeljen nakon spremanja</p>
+      </div>
+
+      <div class="space-y-2">
+        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 italic">Datum Kreiranja</label>
+        <div class="w-full bg-gray-50 dark:bg-gray-900 border-2 border-transparent rounded-2xl p-5 font-bold text-lg dark:text-white flex items-center gap-3">
+          <i class="fa-solid fa-calendar-day text-indigo-600"></i>
+          {new Date().toLocaleDateString('hr-HR')}
+        </div>
+      </div>
+    </div>
+
+    <form id="novi-nalog-form" class="space-y-6">
+      
+      <div class="bg-white dark:bg-gray-800 p-8 rounded-[3rem] border border-gray-100 dark:border-gray-700 shadow-xl space-y-6">
+        
+        <div class="space-y-2">
+          <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 italic">Odabir Klijenta *</label>
+          <select name="klijent" required class="w-full bg-gray-50 dark:bg-gray-900 border-2 border-transparent focus:border-indigo-600 rounded-2xl p-5 font-bold text-lg appearance-none cursor-pointer transition-colors dark:text-white">
+            <option value="">-- Odaberi klijenta --</option>
+            {kupci.map(k => <option value={k.id}>{k.naziv}</option>)}
+          </select>
+        </div>
+
+        <div class="space-y-2">
+          <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 italic">Odabir Stroja *</label>
+          <div class="custom-select-container relative w-full">
+            <div id="stroj-trigger" class="w-full bg-gray-50 dark:bg-gray-900 border-2 border-transparent p-5 font-bold text-lg rounded-2xl cursor-pointer flex justify-between items-center dark:text-white">
+              <span id="selected-stroj-label">-- Prvo odaberi klijenta --</span>
+              <i class="fa-solid fa-chevron-down text-xs"></i>
+            </div>
+
+            <input type="hidden" name="stroj" id="real-stroj-input" required />
+
+            <div id="stroj-options" class="hidden absolute z-50 w-full mt-2 bg-gray-900 border border-gray-700 rounded-2xl shadow-2xl overflow-hidden max-h-60 overflow-y-auto">
+              {strojevi.map(s => (
+                <div 
+                  class="stroj-opt p-4 hover:bg-indigo-600 cursor-pointer transition-colors text-white font-bold italic border-b border-gray-800 last:border-0 hidden" 
+                  data-value={s.id}
+                  data-vlasnik={s.vlasnik}
+                >
+                  {s.naziv} ({s.registracija || s.serijski_broj})
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-white dark:bg-gray-800 p-8 rounded-[3rem] border border-gray-100 dark:border-gray-700 shadow-xl space-y-6">
+        <div class="space-y-2">
+          <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 italic">Opis problema / Radova *</label>
+          <textarea name="opis_kvara" required rows="4" class="w-full bg-gray-50 dark:bg-gray-900 border-none rounded-3xl p-6 font-medium italic text-lg focus:ring-2 focus:ring-indigo-600 transition-all dark:text-white" placeholder="Što treba napraviti?"></textarea>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-2">
+            <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 italic">Trenutni Radni Sati</label>
+            <input type="number" name="radni_sati" step="0.1" class="w-full bg-gray-50 dark:bg-gray-900 border-none rounded-2xl p-5 font-black text-2xl text-indigo-600 focus:ring-2 focus:ring-indigo-600 transition-all" placeholder="0.0">
+          </div>
+          
+          <div class="space-y-2">
+             <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 italic block">Prioritet zahvata</label>
+             <div class="flex gap-3 mt-2">
+                <input type="checkbox" name="hitno" value="true" id="hitno" class="hidden peer">
+                <label for="hitno" class="flex-1 text-center py-4 bg-gray-50 dark:bg-gray-900 rounded-2xl text-[10px] font-black uppercase peer-checked:bg-red-600 peer-checked:text-white cursor-pointer transition-all border-2 border-transparent peer-checked:border-red-700 dark:text-gray-400">
+                    <i class="fa-solid fa-triangle-exclamation mr-2"></i> Hitno
+                </label>
+             </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-indigo-600 p-8 rounded-[3rem] shadow-xl text-white group relative overflow-hidden">
+        <i class="fa-solid fa-camera absolute -right-4 -top-4 text-7xl opacity-10 group-hover:rotate-12 transition-transform duration-500"></i>
+        <label class="text-[10px] font-black uppercase tracking-[0.2em] mb-4 block opacity-70 italic">Slike kvara/terena (opcionalno)</label>
+        <input type="file" name="slike" multiple accept="image/*" class="w-full text-xs file:mr-4 file:py-3 file:px-6 file:rounded-full file:border-0 file:text-[10px] file:font-black file:uppercase file:bg-white file:text-indigo-600 hover:file:bg-indigo-50 cursor-pointer transition-all" />
+      </div>
+
+      <div class="pt-4">
+        <Button 
+          type="submit" 
+          id="submit-btn" 
+          variant="primary" 
+          class="w-full py-8 text-xl shadow-2xl shadow-indigo-500/20"
+        >
+          Kreiraj i pokreni nalog <i class="fa-solid fa-bolt ml-2"></i>
+        </Button>
+      </div>
+
+    </form>
+  </div>
+</Layout>
+
+<script>
+  import { createNalog, fetchSljedeciBrojNaloga } from "../../../lib/api";
+
+  const form = document.getElementById('novi-nalog-form') as HTMLFormElement;
+  const klijentSelect = form.querySelector('select[name="klijent"]') as HTMLSelectElement;
+  const trigger = document.getElementById('stroj-trigger');
+  const optionsList = document.getElementById('stroj-options');
+  const label = document.getElementById('selected-stroj-label');
+  const realInput = document.getElementById('real-stroj-input') as HTMLInputElement;
+  const strojOptions = document.querySelectorAll('.stroj-opt');
+
+  // Funkcija za inicijalizaciju broja naloga na klijentu
+  async function initBrojNaloga() {
+    const displayElement = document.getElementById('broj-text');
+    if (displayElement) {
+      const data = await fetchSljedeciBrojNaloga();
+      displayElement.textContent = data.broj_naloga;
+    }
+  }
+
+  // Pozivamo funkciju čim se skripta učita
+  initBrojNaloga();
+
+  // 1. DROPDOWN LOGIKA
+  trigger?.addEventListener('click', () => {
+    optionsList?.classList.toggle('hidden');
+    trigger.classList.toggle('border-indigo-600');
+  });
+
+  strojOptions.forEach(opt => {
+    opt.addEventListener('click', () => {
+        let val = opt.getAttribute('data-value');
+        if (val) val = val.replace(/['"]+/g, '').trim();
+        
+        if (label && realInput && optionsList) {
+          label.textContent = opt.textContent;
+          realInput.value = val || "";
+          optionsList.classList.add('hidden');
+        }
+    });
+  });
+
+  // 2. FILTRIRANJE STROJEVA
+  klijentSelect?.addEventListener('change', (e) => {
+    const klijentId = (e.target as HTMLSelectElement).value;
+    if (label && realInput) {
+      label.textContent = klijentId ? "-- Odaberi stroj --" : "-- Prvo odaberi klijenta --";
+      realInput.value = "";
+    }
+    strojOptions.forEach(item => {
+      const vlasnikId = item.getAttribute('data-vlasnik');
+      if (vlasnikId == klijentId) item.classList.remove('hidden');
+      else item.classList.add('hidden');
+    });
+  });
+
+  // 3. SLANJE NA API
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const btn = document.getElementById('submit-btn');
+    if (!btn) return;
+
+    btn.setAttribute('disabled', 'true');
+    const originalContent = btn.innerHTML;
+    btn.innerHTML = '<i class="fa-solid fa-circle-notch animate-spin mr-2"></i> Sinkronizacija...';
+
+    const formData = new FormData(form);
+
+    // Brišemo broj_naloga kako bi backend aktivirao save() logiku
+    formData.delete('broj_naloga');
+
+    // Dodavanje izvrsitelja iz localStorage
+    const userString = localStorage.getItem('user_info');
+    if (userString) {
+        const user = JSON.parse(userString);
+        formData.append('izvrsitelj', user.id);
+    }
+
+    const nalog = await createNalog(formData);
+
+    if (nalog && nalog.id) {
+      window.location.href = `/operativa/radni-nalozi/${nalog.id}`;
+    } else {
+      btn.removeAttribute('disabled');
+      btn.innerHTML = originalContent;
+    }
+  });
+
+  document.addEventListener('click', (e) => {
+    if (trigger && optionsList && !trigger.contains(e.target as Node) && !optionsList.contains(e.target as Node)) {
+      optionsList.classList.add('hidden');
+      trigger.classList.remove('border-indigo-600');
+    }
+  });
+</script>
--- a/001.FRONTEND/src/scripts/filters.js
+++ b/001.FRONTEND/src/scripts/filters.js
@@ -0,0 +1,70 @@
+// // src/scripts/filters.js
+
+// Upravlja sa item.style.display na osnovu aktivnog filtera i data-status atributa
+// Također upravlja sa stilovima kartica (ring, border) i naslovom filtera
+// export function initFilters() {
+//     const cards = document.querySelectorAll('.stat-card');
+//     const items = document.querySelectorAll('.nalog-item');
+//     const title = document.getElementById('filter-title');
+//     let activeFilter = null;
+
+//     cards.forEach(card => {
+//         card.addEventListener('click', () => {
+//             const filter = card.getAttribute('data-filter');
+
+//             if (activeFilter === filter) {
+//                 activeFilter = null;
+//                 items.forEach(item => item.style.display = 'flex');
+//                 cards.forEach(c => c.classList.remove('ring-4', 'ring-blue-600/20', 'border-blue-600'));
+//                 if (title) title.innerText = "Zadnje aktivnosti";
+//             } else {
+//                 activeFilter = filter;
+//                 cards.forEach(c => c.classList.remove('ring-4', 'ring-blue-600/20', 'border-blue-600'));
+//                 card.classList.add('ring-4', 'ring-blue-600/20', 'border-blue-600');
+                
+//                 if (title) title.innerText = `Filtrirano: ${filter.replace('_', ' ')}`;
+
+//                 items.forEach(item => {
+//                     const status = item.getAttribute('data-status');
+//                     item.style.display = (status === filter) ? 'flex' : 'none';
+//                 });
+//             }
+//         });
+//     });
+// }
+
+
+
+// src/scripts/filters.js
+
+export function initFilters() {
+    const cards = document.querySelectorAll('.stat-card');
+    
+    // Dohvaćamo trenutni aktivni filter iz URL-a
+    const urlParams = new URLSearchParams(window.location.search);
+    const currentActiveFilter = urlParams.get('status');
+
+    cards.forEach(card => {
+        const filterValue = card.getAttribute('data-filter');
+
+        // Dodaj vizualno aktivno stanje ako se URL podudara s gumbom
+        if (currentActiveFilter === filterValue) {
+            card.classList.add('ring-4', 'ring-blue-600/20', 'border-blue-600');
+        }
+
+        card.addEventListener('click', () => {
+            const newParams = new URLSearchParams(window.location.search);
+
+            if (currentActiveFilter === filterValue) {
+                // Ako kliknemo na već aktivni filter, poništavamo ga
+                newParams.delete('status');
+            } else {
+                // Inače postavljamo novi filter
+                newParams.set('status', filterValue);
+            }
+
+            // Osvježi stranicu s novim parametrom - to okida novi API request na serveru
+            window.location.search = newParams.toString();
+        });
+    });
+}
--- a/001.FRONTEND/src/styles/global.css
+++ b/001.FRONTEND/src/styles/global.css
@@ -0,0 +1 @@
+@import "tailwindcss";
--- a/001.FRONTEND/src/utils/ui.js
+++ b/001.FRONTEND/src/utils/ui.js
@@ -0,0 +1,111 @@
+// src/utils/ui.js
+
+/**
+ * Vraća set Tailwind klasa za specifičnu temu
+ * @param {string} tema - 'indigo', 'blue', 'emerald', 'amber', 'red'
+ */
+export function getThemeClasses(tema = "indigo") {
+  const themes = {
+    indigo: {
+      bg: "bg-indigo-50",
+      bgDark: "dark:bg-indigo-900/20",
+      text: "text-indigo-600",
+      textDark: "dark:text-indigo-400",
+      border: "border-indigo-100",
+      borderDark: "dark:border-indigo-900/30",
+      shadow: "shadow-indigo-500/5",
+      hover: "hover:bg-indigo-50/30 dark:hover:bg-indigo-900/10",
+      icon: "group-hover:bg-indigo-600 group-hover:text-white"
+    },
+    blue: {
+      bg: "bg-blue-50",
+      bgDark: "dark:bg-blue-900/20",
+      text: "text-blue-600",
+      textDark: "dark:text-blue-400",
+      border: "border-blue-100",
+      borderDark: "dark:border-blue-900/30",
+      shadow: "shadow-blue-500/5",
+      hover: "hover:bg-blue-50/30 dark:hover:bg-blue-900/10",
+      icon: "group-hover:bg-blue-600 group-hover:text-white"
+    },
+    emerald: {
+      bg: "bg-emerald-50",
+      bgDark: "dark:bg-emerald-900/20",
+      text: "text-emerald-600",
+      textDark: "dark:text-emerald-400",
+      border: "border-emerald-100",
+      borderDark: "dark:border-emerald-900/30",
+      shadow: "shadow-emerald-500/5",
+      hover: "hover:bg-emerald-50/30 dark:hover:bg-emerald-900/10",
+      icon: "group-hover:bg-emerald-600 group-hover:text-white"
+    },
+    amber: {
+      bg: "bg-amber-50",
+      bgDark: "dark:bg-amber-900/20",
+      text: "text-amber-600",
+      textDark: "dark:text-amber-400",
+      border: "border-amber-100",
+      borderDark: "dark:border-amber-900/30",
+      shadow: "shadow-amber-500/5",
+      hover: "hover:bg-amber-50/30 dark:hover:bg-amber-900/10",
+      icon: "group-hover:bg-amber-600 group-hover:text-white"
+    },
+    red: {
+      bg: "bg-red-50",
+      bgDark: "dark:bg-red-900/20",
+      text: "text-red-600",
+      textDark: "dark:text-red-400",
+      border: "border-red-100",
+      borderDark: "dark:border-red-900/30",
+      shadow: "shadow-red-500/5",
+      hover: "hover:bg-red-50/30 dark:hover:bg-red-900/10",
+      icon: "group-hover:bg-red-600 group-hover:text-white"
+    }
+  };
+
+  return themes[tema] || themes.indigo;
+}
+
+/**
+ * Određuje boju kružića i animaciju na temelju statusa (Vozila + Radni Nalozi)
+ */
+export function getStatusColorClass(status) {
+    // 1. Provjera postoji li status. Ako ne, vrati sivu boju.
+    if (!status) return 'bg-gray-400';
+    
+    // 2. Siguran poziv toLowerCase()
+    const s = String(status).toLowerCase();
+    
+    switch (s) {
+        case 'u_radu': return 'bg-yellow-500 animate-pulse';
+        case 'planirano': 
+        case 'aktivan': return 'bg-blue-500';
+        case 'zavrseno': return 'bg-emerald-500';
+        case 'naplaceno': return 'bg-gray-500 opacity-50';
+        case 'servis':
+        case 'hitno': return 'bg-red-500 animate-pulse';
+        default: return 'bg-gray-400';
+    }
+}
+
+/**
+ * Pretvara tehnički status u ljudima čitljiv format
+ * Dodana provjera da spriječi toLowerCase error
+ */
+export function formatStatus(status) {
+    // Provjera ako je status prazan
+    if (!status) return 'Nepoznato';
+
+    const labels = {
+        'planirano': 'Planirano',
+        'u_radu': 'U radu',
+        'zavrseno': 'Završeno',
+        'naplaceno': 'Naplaćeno',
+        'aktivan': 'Aktivan',
+        'servis': 'Na servisu',
+        'hitno': 'HITNO'
+    };
+
+    const s = String(status).toLowerCase();
+    return labels[s] || s;
+}
--- a/001.FRONTEND/tailwind.config.mjs
+++ b/001.FRONTEND/tailwind.config.mjs
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}',
+    './node_modules/flowbite/**/*.js' // Ovo omogućuje Flowbite stilove
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('flowbite/plugin') // Registrira Flowbite kao plugin
+  ],
+}
--- a/001.FRONTEND/tsconfig.json
+++ b/001.FRONTEND/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>