Fix production environment variables

- Remove old Confluence variables
- Add NEXT_PUBLIC_API_URL for API access

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/admin/dashboard/page.tsx

@@ -0,0 +1,386 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import axios from 'axios';
+import { Filament } from '../../../src/types/filament';
+
+interface FilamentWithId extends Filament {
+  id: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export default function AdminDashboard() {
+  const router = useRouter();
+  const [filaments, setFilaments] = useState<FilamentWithId[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [editingFilament, setEditingFilament] = useState<FilamentWithId | null>(null);
+  const [showAddForm, setShowAddForm] = useState(false);
+
+  // Check authentication
+  useEffect(() => {
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+    
+    if (!token || !expiry || Date.now() > parseInt(expiry)) {
+      router.push('/admin');
+    }
+  }, [router]);
+
+  // Fetch filaments
+  const fetchFilaments = async () => {
+    try {
+      setLoading(true);
+      const response = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/filaments`);
+      setFilaments(response.data);
+    } catch (err) {
+      setError('Greška pri učitavanju filamenata');
+      console.error('Fetch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchFilaments();
+  }, []);
+
+  const getAuthHeaders = () => ({
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem('authToken')}`
+    }
+  });
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Da li ste sigurni da želite obrisati ovaj filament?')) return;
+
+    try {
+      await axios.delete(`${process.env.NEXT_PUBLIC_API_URL}/filaments/${id}`, getAuthHeaders());
+      await fetchFilaments();
+    } catch (err) {
+      alert('Greška pri brisanju filamenta');
+      console.error('Delete error:', err);
+    }
+  };
+
+  const handleSave = async (filament: Partial<FilamentWithId>) => {
+    try {
+      if (filament.id) {
+        // Update existing
+        await axios.put(
+          `${process.env.NEXT_PUBLIC_API_URL}/filaments/${filament.id}`,
+          filament,
+          getAuthHeaders()
+        );
+      } else {
+        // Create new
+        await axios.post(
+          `${process.env.NEXT_PUBLIC_API_URL}/filaments`,
+          filament,
+          getAuthHeaders()
+        );
+      }
+      
+      setEditingFilament(null);
+      setShowAddForm(false);
+      await fetchFilaments();
+    } catch (err) {
+      alert('Greška pri čuvanju filamenta');
+      console.error('Save error:', err);
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('tokenExpiry');
+    router.push('/admin');
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <header className="bg-white dark:bg-gray-800 shadow">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="flex justify-between items-center">
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              Admin Dashboard
+            </h1>
+            <div className="flex gap-4">
+              <button
+                onClick={() => setShowAddForm(true)}
+                className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+              >
+                Dodaj novi filament
+              </button>
+              <button
+                onClick={handleLogout}
+                className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+              >
+                Odjava
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {error && (
+          <div className="mb-4 p-4 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded">
+            {error}
+          </div>
+        )}
+
+        {/* Add/Edit Form */}
+        {(showAddForm || editingFilament) && (
+          <FilamentForm
+            filament={editingFilament || {}}
+            onSave={handleSave}
+            onCancel={() => {
+              setEditingFilament(null);
+              setShowAddForm(false);
+            }}
+          />
+        )}
+
+        {/* Filaments Table */}
+        <div className="overflow-x-auto">
+          <table className="min-w-full bg-white dark:bg-gray-800 shadow rounded">
+            <thead>
+              <tr className="bg-gray-100 dark:bg-gray-700">
+                <th className="px-4 py-2 text-left">Brand</th>
+                <th className="px-4 py-2 text-left">Tip</th>
+                <th className="px-4 py-2 text-left">Finish</th>
+                <th className="px-4 py-2 text-left">Boja</th>
+                <th className="px-4 py-2 text-left">Refill</th>
+                <th className="px-4 py-2 text-left">Vakum</th>
+                <th className="px-4 py-2 text-left">Otvoreno</th>
+                <th className="px-4 py-2 text-left">Količina</th>
+                <th className="px-4 py-2 text-left">Cena</th>
+                <th className="px-4 py-2 text-left">Akcije</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filaments.map((filament) => (
+                <tr key={filament.id} className="border-t dark:border-gray-700">
+                  <td className="px-4 py-2">{filament.brand}</td>
+                  <td className="px-4 py-2">{filament.tip}</td>
+                  <td className="px-4 py-2">{filament.finish}</td>
+                  <td className="px-4 py-2">{filament.boja}</td>
+                  <td className="px-4 py-2">{filament.refill}</td>
+                  <td className="px-4 py-2">{filament.vakum}</td>
+                  <td className="px-4 py-2">{filament.otvoreno}</td>
+                  <td className="px-4 py-2">{filament.kolicina}</td>
+                  <td className="px-4 py-2">{filament.cena}</td>
+                  <td className="px-4 py-2">
+                    <button
+                      onClick={() => setEditingFilament(filament)}
+                      className="text-blue-600 hover:text-blue-800 mr-2"
+                    >
+                      Izmeni
+                    </button>
+                    <button
+                      onClick={() => handleDelete(filament.id)}
+                      className="text-red-600 hover:text-red-800"
+                    >
+                      Obriši
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+// Filament Form Component
+function FilamentForm({ 
+  filament, 
+  onSave, 
+  onCancel 
+}: { 
+  filament: Partial<FilamentWithId>, 
+  onSave: (filament: Partial<FilamentWithId>) => void,
+  onCancel: () => void 
+}) {
+  const [formData, setFormData] = useState({
+    brand: filament.brand || '',
+    tip: filament.tip || '',
+    finish: filament.finish || '',
+    boja: filament.boja || '',
+    refill: filament.refill || '',
+    vakum: filament.vakum || '',
+    otvoreno: filament.otvoreno || '',
+    kolicina: filament.kolicina || '',
+    cena: filament.cena || '',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave({
+      ...filament,
+      ...formData
+    });
+  };
+
+  return (
+    <div className="mb-8 p-6 bg-white dark:bg-gray-800 rounded shadow">
+      <h2 className="text-xl font-bold mb-4">
+        {filament.id ? 'Izmeni filament' : 'Dodaj novi filament'}
+      </h2>
+      <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium mb-1">Brand</label>
+          <input
+            type="text"
+            name="brand"
+            value={formData.brand}
+            onChange={handleChange}
+            required
+            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+          />
+        </div>
+        
+        <div>
+          <label className="block text-sm font-medium mb-1">Tip</label>
+          <select
+            name="tip"
+            value={formData.tip}
+            onChange={handleChange}
+            required
+            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+          >
+            <option value="">Izaberi tip</option>
+            <option value="PLA">PLA</option>
+            <option value="PETG">PETG</option>
+            <option value="ABS">ABS</option>
+            <option value="TPU">TPU</option>
+            <option value="Silk PLA">Silk PLA</option>
+            <option value="PLA Matte">PLA Matte</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Finish</label>
+          <select
+            name="finish"
+            value={formData.finish}
+            onChange={handleChange}
+            required
+            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+          >
+            <option value="">Izaberi finish</option>
+            <option value="Basic">Basic</option>
+            <option value="Matte">Matte</option>
+            <option value="Silk">Silk</option>
+            <option value="Metal">Metal</option>
+            <option value="Glow">Glow</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Boja</label>
+          <input
+            type="text"
+            name="boja"
+            value={formData.boja}
+            onChange={handleChange}
+            required
+            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Refill</label>
+          <select
+            name="refill"
+            value={formData.refill}
+            onChange={handleChange}
+            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+          >
+            <option value="">Ne</option>
+            <option value="Da">Da</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Vakum</label>
+          <input
+            type="text"
+            name="vakum"
+            value={formData.vakum}
+            onChange={handleChange}
+            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Otvoreno</label>
+          <input
+            type="text"
+            name="otvoreno"
+            value={formData.otvoreno}
+            onChange={handleChange}
+            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Količina</label>
+          <input
+            type="text"
+            name="kolicina"
+            value={formData.kolicina}
+            onChange={handleChange}
+            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Cena</label>
+          <input
+            type="text"
+            name="cena"
+            value={formData.cena}
+            onChange={handleChange}
+            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+          />
+        </div>
+
+        <div className="md:col-span-2 flex gap-4">
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Sačuvaj
+          </button>
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+          >
+            Otkaži
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

app/admin/page.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import axios from 'axios';
+
+export default function AdminLogin() {
+  const router = useRouter();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const response = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
+        username,
+        password
+      });
+
+      // Store token in localStorage
+      localStorage.setItem('authToken', response.data.token);
+      localStorage.setItem('tokenExpiry', String(Date.now() + response.data.expiresIn * 1000));
+
+      // Redirect to admin dashboard
+      router.push('/admin/dashboard');
+    } catch (err) {
+      setError('Neispravno korisničko ime ili lozinka');
+      console.error('Login error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
+            Admin Prijava
+          </h2>
+          <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
+            Prijavite se za upravljanje filamentima
+          </p>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleLogin}>
+          {error && (
+            <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+              <p className="text-sm text-red-800 dark:text-red-400">{error}</p>
+            </div>
+          )}
+          <div className="rounded-md shadow-sm -space-y-px">
+            <div>
+              <label htmlFor="username" className="sr-only">
+                Korisničko ime
+              </label>
+              <input
+                id="username"
+                name="username"
+                type="text"
+                autoComplete="username"
+                required
+                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-800"
+                placeholder="Korisničko ime"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="sr-only">
+                Lozinka
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-800"
+                placeholder="Lozinka"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? 'Prijavljivanje...' : 'Prijavite se'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -10,31 +10,42 @@ export default function Home() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
-  const [darkMode, setDarkMode] = useState(() => {
-    if (typeof window !== 'undefined') {
-      const saved = localStorage.getItem('darkMode');
-      return saved ? JSON.parse(saved) : false;
-    }
-    return false;
-  });
+  const [darkMode, setDarkMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
+  // Initialize dark mode from localStorage after mounting
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('darkMode', JSON.stringify(darkMode));
-      if (darkMode) {
-        document.documentElement.classList.add('dark');
-      } else {
-        document.documentElement.classList.remove('dark');
-      }
+    setMounted(true);
+    const saved = localStorage.getItem('darkMode');
+    if (saved) {
+      setDarkMode(JSON.parse(saved));
     }
-  }, [darkMode]);
+  }, []);
+
+  // Update dark mode
+  useEffect(() => {
+    if (!mounted) return;
+    
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [darkMode, mounted]);
 
   const fetchFilaments = async () => {
     try {
       setLoading(true);
       setError(null);
       
-      const response = await axios.get('/data.json');
+      // Use API if available, fallback to static JSON
+      const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+      const url = apiUrl ? `${apiUrl}/filaments` : '/data.json';
+      console.log('Fetching from:', url);
+      console.log('API URL configured:', apiUrl);
+      const response = await axios.get(url);
+      console.log('Response data:', response.data);
       setFilaments(response.data);
       setLastUpdate(new Date());
     } catch (err) {
@@ -74,13 +85,15 @@ export default function Home() {
               >
                 {loading ? 'Ažuriranje...' : 'Osveži'}
               </button>
-              <button
-                onClick={() => setDarkMode(!darkMode)}
-                className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-                title={darkMode ? 'Svetla tema' : 'Tamna tema'}
-              >
-                {darkMode ? '☀️' : '🌙'}
-              </button>
+              {mounted && (
+                <button
+                  onClick={() => setDarkMode(!darkMode)}
+                  className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                  title={darkMode ? 'Svetla tema' : 'Tamna tema'}
+                >
+                  {darkMode ? '☀️' : '🌙'}
+                </button>
+              )}
             </div>
           </div>
         </div>