Remove decorative icons and update CORS configuration

app/upadaj/colors/page.tsx

@@ -0,0 +1,390 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { colorService } from '../../../src/services/api';
+import '../../../src/styles/select.css';
+
+interface Color {
+  id: string;
+  name: string;
+  hex: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export default function ColorsManagement() {
+  const router = useRouter();
+  const [colors, setColors] = useState<Color[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [editingColor, setEditingColor] = useState<Color | null>(null);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // Initialize dark mode - default to true for admin
+  useEffect(() => {
+    setMounted(true);
+    const saved = localStorage.getItem('darkMode');
+    if (saved !== null) {
+      setDarkMode(JSON.parse(saved));
+    } else {
+      // Default to dark mode for admin
+      setDarkMode(true);
+    }
+  }, []);
+
+  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]);
+
+  // Check authentication
+  useEffect(() => {
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+    
+    if (!token || !expiry || Date.now() > parseInt(expiry)) {
+      router.push('/upadaj');
+    }
+  }, [router]);
+
+  // Fetch colors
+  const fetchColors = async () => {
+    try {
+      setLoading(true);
+      const colors = await colorService.getAll();
+      setColors(colors.sort((a: Color, b: Color) => a.name.localeCompare(b.name)));
+    } catch (err) {
+      setError('Greška pri učitavanju boja');
+      console.error('Fetch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchColors();
+  }, []);
+
+
+  const handleSave = async (color: Partial<Color>) => {
+    try {
+      if (color.id) {
+        await colorService.update(color.id, { name: color.name!, hex: color.hex! });
+      } else {
+        await colorService.create({ name: color.name!, hex: color.hex! });
+      }
+      
+      setEditingColor(null);
+      setShowAddForm(false);
+      fetchColors();
+    } catch (err) {
+      setError('Greška pri čuvanju boje');
+      console.error('Save error:', err);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Da li ste sigurni da želite obrisati ovu boju?')) {
+      return;
+    }
+
+    try {
+      await colorService.delete(id);
+      fetchColors();
+    } catch (err) {
+      setError('Greška pri brisanju boje');
+      console.error('Delete error:', err);
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('tokenExpiry');
+    router.push('/upadaj');
+  };
+
+  if (loading) {
+    return <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+      <div className="text-gray-600 dark:text-gray-400">Učitavanje...</div>
+    </div>;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
+      <div className="flex">
+        {/* Sidebar */}
+        <div className="w-64 bg-white dark:bg-gray-800 shadow-lg h-screen">
+          <div className="p-6">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Admin Panel</h2>
+            <nav className="space-y-2">
+              <a
+                href="/upadaj/dashboard"
+                className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+              >
+                Filamenti
+              </a>
+              <a
+                href="/upadaj/colors"
+                className="block px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded"
+              >
+                Boje
+              </a>
+            </nav>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex-1">
+          <header className="bg-white dark:bg-gray-800 shadow transition-colors">
+            <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">Upravljanje bojama</h1>
+                <div className="flex gap-4">
+                  {!showAddForm && !editingColor && (
+                    <button
+                      onClick={() => setShowAddForm(true)}
+                      className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+                    >
+                      Dodaj novu boju
+                    </button>
+                  )}
+                  <button
+                    onClick={() => router.push('/')}
+                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                  >
+                    Nazad na sajt
+                  </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 ? 'Svetla' : 'Tamna'}
+                    </button>
+                  )}
+                  <button
+                    onClick={handleLogout}
+                    className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                  >
+                    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 Form (stays at top) */}
+            {showAddForm && (
+              <ColorForm
+                color={{}}
+                onSave={handleSave}
+                onCancel={() => {
+                  setShowAddForm(false);
+                }}
+              />
+            )}
+
+            {/* Search Bar */}
+            <div className="mb-4">
+              <div className="relative">
+                <input
+                  type="text"
+                  placeholder="Pretraži boje..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full px-4 py-2 pl-10 pr-4 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500"
+                />
+                <svg className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+              </div>
+            </div>
+
+            {/* Colors Table */}
+            <div className="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow">
+              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead className="bg-gray-50 dark:bg-gray-700">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Boja</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Naziv</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Hex kod</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Akcije</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                  {colors
+                    .filter(color => 
+                      color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                      color.hex.toLowerCase().includes(searchTerm.toLowerCase())
+                    )
+                    .map((color) => (
+                    <tr key={color.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div 
+                          className="w-10 h-10 rounded border-2 border-gray-300 dark:border-gray-600" 
+                          style={{ backgroundColor: color.hex }}
+                        />
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{color.name}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{color.hex}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                        <button
+                          onClick={() => setEditingColor(color)}
+                          className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 mr-3"
+                        >
+                          Izmeni
+                        </button>
+                        <button
+                          onClick={() => handleDelete(color.id)}
+                          className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                        >
+                          Obriši
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </main>
+        </div>
+      </div>
+      
+      {/* Edit Modal */}
+      {editingColor && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-auto">
+            <div className="p-6">
+              <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">Izmeni boju</h3>
+              <ColorForm
+                color={editingColor}
+                onSave={(color) => {
+                  handleSave(color);
+                  setEditingColor(null);
+                }}
+                onCancel={() => setEditingColor(null)}
+                isModal={true}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Color Form Component
+function ColorForm({ 
+  color, 
+  onSave, 
+  onCancel,
+  isModal = false
+}: { 
+  color: Partial<Color>, 
+  onSave: (color: Partial<Color>) => void,
+  onCancel: () => void,
+  isModal?: boolean
+}) {
+  const [formData, setFormData] = useState({
+    name: color.name || '',
+    hex: color.hex || '#000000',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave({
+      ...color,
+      ...formData
+    });
+  };
+
+  return (
+    <div className={isModal ? "" : "mb-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow transition-colors"}>
+      {!isModal && (
+        <h2 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
+          {color.id ? 'Izmeni boju' : 'Dodaj novu boju'}
+        </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 text-gray-700 dark:text-gray-300">Naziv boje</label>
+          <input
+            type="text"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            required
+            placeholder="npr. Crvena"
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Hex kod boje</label>
+          <div className="flex gap-2 items-center">
+            <input
+              type="color"
+              name="hex"
+              value={formData.hex}
+              onChange={handleChange}
+              className="w-12 h-12 p-1 border-2 border-gray-300 dark:border-gray-600 rounded-md cursor-pointer"
+              style={{ backgroundColor: formData.hex }}
+            />
+            <input
+              type="text"
+              name="hex"
+              value={formData.hex}
+              onChange={handleChange}
+              required
+              pattern="^#[0-9A-Fa-f]{6}$"
+              placeholder="#000000"
+              className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        <div className="md:col-span-2 flex justify-end gap-4 mt-4">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors"
+          >
+            Otkaži
+          </button>
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            Sačuvaj
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

app/upadaj/dashboard/page.tsx

@@ -0,0 +1,597 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { filamentService, colorService } from '../../../src/services/api';
+import { Filament } from '../../../src/types/filament';
+import '../../../src/styles/select.css';
+
+interface FilamentWithId extends Filament {
+  id: string;
+  createdAt?: string;
+  updatedAt?: string;
+  bojaHex?: 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);
+  const [darkMode, setDarkMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  // Initialize dark mode - default to true for admin
+  useEffect(() => {
+    setMounted(true);
+    const saved = localStorage.getItem('darkMode');
+    if (saved !== null) {
+      setDarkMode(JSON.parse(saved));
+    } else {
+      // Default to dark mode for admin
+      setDarkMode(true);
+    }
+  }, []);
+
+  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]);
+
+  // Check authentication
+  useEffect(() => {
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+    
+    if (!token || !expiry || Date.now() > parseInt(expiry)) {
+      router.push('/upadaj');
+    }
+  }, [router]);
+
+  // Fetch filaments
+  const fetchFilaments = async () => {
+    try {
+      setLoading(true);
+      const filaments = await filamentService.getAll();
+      setFilaments(filaments);
+    } catch (err) {
+      setError('Greška pri učitavanju filamenata');
+      console.error('Fetch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchFilaments();
+  }, []);
+
+
+  const handleSave = async (filament: Partial<FilamentWithId>) => {
+    try {
+      if (filament.id) {
+        await filamentService.update(filament.id, filament);
+      } else {
+        await filamentService.create(filament);
+      }
+      
+      setEditingFilament(null);
+      setShowAddForm(false);
+      fetchFilaments();
+    } catch (err) {
+      setError('Greška pri čuvanju filamenata');
+      console.error('Save error:', err);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Da li ste sigurni da želite obrisati ovaj filament?')) {
+      return;
+    }
+
+    try {
+      await filamentService.delete(id);
+      fetchFilaments();
+    } catch (err) {
+      setError('Greška pri brisanju filamenata');
+      console.error('Delete error:', err);
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('tokenExpiry');
+    router.push('/upadaj');
+  };
+
+  if (loading) {
+    return <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+      <div className="text-gray-600 dark:text-gray-400">Učitavanje...</div>
+    </div>;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
+      <div className="flex relative">
+        {/* Mobile menu button */}
+        <button
+          onClick={() => setSidebarOpen(!sidebarOpen)}
+          className="lg:hidden fixed top-4 left-4 z-50 p-2 bg-white dark:bg-gray-800 rounded-md shadow-lg"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sidebarOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
+          </svg>
+        </button>
+
+        {/* Sidebar */}
+        <div className={`${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0 transition-transform duration-300 fixed lg:static w-64 bg-white dark:bg-gray-800 shadow-lg h-screen z-40`}>
+          <div className="p-6">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Admin Panel</h2>
+            <nav className="space-y-2">
+              <a
+                href="/upadaj/dashboard"
+                className="block px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded"
+              >
+                Filamenti
+              </a>
+              <a
+                href="/upadaj/colors"
+                className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+              >
+                Boje
+              </a>
+            </nav>
+          </div>
+        </div>
+
+        {/* Overlay for mobile */}
+        {sidebarOpen && (
+          <div 
+            className="lg:hidden fixed inset-0 bg-black bg-opacity-50 z-30"
+            onClick={() => setSidebarOpen(false)}
+          />
+        )}
+
+        {/* Main Content */}
+        <div className="flex-1 lg:ml-0">
+          <header className="bg-white dark:bg-gray-800 shadow transition-colors">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 lg:py-6">
+              <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+                <h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white ml-12 lg:ml-0">Admin Dashboard</h1>
+                <div className="flex flex-wrap gap-2 sm:gap-4 w-full sm:w-auto">
+                  {!showAddForm && !editingFilament && (
+                    <button
+                      onClick={() => setShowAddForm(true)}
+                      className="flex-1 sm:flex-initial px-3 sm:px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 text-sm sm:text-base"
+                    >
+                      Dodaj novi
+                    </button>
+                  )}
+                  <button
+                    onClick={() => router.push('/')}
+                    className="flex-1 sm:flex-initial px-3 sm:px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm sm:text-base"
+                  >
+                    Nazad na sajt
+                  </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 ? 'Svetla' : 'Tamna'}
+                    </button>
+                  )}
+                  <button
+                    onClick={handleLogout}
+                    className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                  >
+                    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) && (
+          <div className="mb-8">
+            <FilamentForm
+              key={editingFilament?.id || 'new'}
+              filament={editingFilament || {}}
+              filaments={filaments}
+              onSave={handleSave}
+              onCancel={() => {
+                setEditingFilament(null);
+                setShowAddForm(false);
+              }}
+            />
+          </div>
+        )}
+
+        {/* Filaments Table */}
+        <div className="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-700">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Brand</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tip</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Finish</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Boja</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Refill</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Vakum</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Otvoreno</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Količina</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cena</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Akcije</th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+              {filaments.map((filament) => (
+                <tr key={filament.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.brand}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.tip}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.finish}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    <div className="flex items-center gap-2">
+                      <span>{filament.boja}</span>
+                      {filament.bojaHex && (
+                        <div 
+                          className="w-4 h-4 rounded border border-gray-300 dark:border-gray-600" 
+                          style={{ backgroundColor: filament.bojaHex }}
+                          title={filament.bojaHex}
+                        />
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.refill}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.vakum}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.otvoreno}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.kolicina}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.cena}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                    <button
+                      onClick={() => {
+                        console.log('Editing filament:', filament);
+                        setEditingFilament(filament);
+                        setShowAddForm(false);
+                      }}
+                      className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 mr-3"
+                    >
+                      Izmeni
+                    </button>
+                    <button
+                      onClick={() => handleDelete(filament.id)}
+                      className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                    >
+                      Obriši
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Filament Form Component
+function FilamentForm({ 
+  filament, 
+  filaments,
+  onSave, 
+  onCancel 
+}: { 
+  filament: Partial<FilamentWithId>, 
+  filaments: FilamentWithId[],
+  onSave: (filament: Partial<FilamentWithId>) => void,
+  onCancel: () => void 
+}) {
+  const [formData, setFormData] = useState({
+    brand: filament.brand || '',
+    tip: filament.tip || '',
+    finish: filament.finish || '',
+    boja: filament.boja || '',
+    bojaHex: filament.bojaHex || '',
+    refill: filament.refill || '',
+    vakum: filament.vakum || '',
+    otvoreno: filament.otvoreno || '',
+    kolicina: filament.kolicina || '',
+    cena: filament.cena || '',
+  });
+
+  const [availableColors, setAvailableColors] = useState<Array<{id: string, name: string, hex: string}>>([]);
+
+  // Load colors from API
+  useEffect(() => {
+    const loadColors = async () => {
+      try {
+        const colors = await colorService.getAll();
+        setAvailableColors(colors.sort((a: any, b: any) => a.name.localeCompare(b.name)));
+      } catch (error) {
+        console.error('Error loading colors:', error);
+        // Fallback to colors from existing filaments
+        const existingColors = [...new Set(filaments.map(f => f.boja).filter(Boolean))];
+        const colorObjects = existingColors.map((color, idx) => ({
+          id: `existing-${idx}`,
+          name: color,
+          hex: filaments.find(f => f.boja === color)?.bojaHex || '#000000'
+        }));
+        setAvailableColors(colorObjects.sort((a, b) => a.name.localeCompare(b.name)));
+      }
+    };
+
+    loadColors();
+    
+    // Reload colors when window gets focus (in case user added colors in another tab)
+    const handleFocus = () => loadColors();
+    window.addEventListener('focus', handleFocus);
+    
+    return () => window.removeEventListener('focus', handleFocus);
+  }, [filaments]);
+
+  // Update form when filament prop changes
+  useEffect(() => {
+    setFormData({
+      brand: filament.brand || '',
+      tip: filament.tip || '',
+      finish: filament.finish || '',
+      boja: filament.boja || '',
+      bojaHex: filament.bojaHex || '',
+      refill: filament.refill || '',
+      vakum: filament.vakum || '',
+      otvoreno: filament.otvoreno || '',
+      kolicina: filament.kolicina || '',
+      cena: filament.cena || '',
+    });
+  }, [filament]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target;
+    
+    if (type === 'checkbox') {
+      const checked = (e.target as HTMLInputElement).checked;
+      if (name === 'vakum') {
+        setFormData({
+          ...formData,
+          [name]: checked ? 'vakuum' : ''
+        });
+      } else if (name === 'otvoreno') {
+        setFormData({
+          ...formData,
+          [name]: checked ? 'otvorena' : ''
+        });
+      } else if (name === 'refill') {
+        setFormData({
+          ...formData,
+          [name]: checked ? 'Da' : ''
+        });
+      }
+    } else {
+      setFormData({
+        ...formData,
+        [name]: 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-lg shadow transition-colors">
+      <h2 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
+        {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 text-gray-700 dark:text-gray-300">Brand</label>
+          <select
+            name="brand"
+            value={formData.brand}
+            onChange={handleChange}
+            required
+            className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Izaberi brand</option>
+            <option value="Bambu Lab">Bambu Lab</option>
+            <option value="PolyMaker">PolyMaker</option>
+            <option value="Prusament">Prusament</option>
+            <option value="SUNLU">SUNLU</option>
+            <option value="eSUN">eSUN</option>
+            <option value="ELEGOO">ELEGOO</option>
+            <option value="GEEETECH">GEEETECH</option>
+            <option value="Creality">Creality</option>
+          </select>
+        </div>
+        
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Tip</label>
+          <select
+            name="tip"
+            value={formData.tip}
+            onChange={handleChange}
+            required
+            className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <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>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Finish</label>
+          <select
+            name="finish"
+            value={formData.finish}
+            onChange={handleChange}
+            required
+            className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Izaberi finish</option>
+            <option value="Basic">Basic</option>
+            <option value="Matte">Matte</option>
+            <option value="Silk">Silk</option>
+            <option value="Glow">Glow</option>
+            <option value="Wood">Wood</option>
+            <option value="CF">CF</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Boja</label>
+          <select
+            name="boja"
+            value={formData.boja}
+            onChange={(e) => {
+              const selectedColor = availableColors.find(c => c.name === e.target.value);
+              setFormData({
+                ...formData,
+                boja: e.target.value,
+                bojaHex: selectedColor?.hex || formData.bojaHex
+              });
+            }}
+            required
+            className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Izaberite boju</option>
+            {availableColors.map(color => (
+              <option key={color.id} value={color.name}>
+                {color.name}
+              </option>
+            ))}
+            <option value="custom">Druga boja...</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
+            {formData.boja && formData.boja !== 'custom' ? `Hex kod za ${formData.boja}` : 'Hex kod boje'}
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              type="color"
+              name="bojaHex"
+              value={formData.bojaHex || '#000000'}
+              onChange={handleChange}
+              disabled={formData.boja && formData.boja !== 'custom' && availableColors.some(c => c.name === formData.boja)}
+              className="w-full h-10 px-1 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            />
+            {formData.bojaHex && (
+              <span className="text-sm text-gray-600 dark:text-gray-400">{formData.bojaHex}</span>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Količina</label>
+          <input
+            type="number"
+            name="kolicina"
+            value={formData.kolicina}
+            onChange={handleChange}
+            min="0"
+            step="1"
+            placeholder="0"
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        {/* Cena and Checkboxes on same line */}
+        <div className="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena</label>
+            <input
+              type="text"
+              name="cena"
+              value={formData.cena}
+              onChange={handleChange}
+              placeholder="npr. 2500"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          
+          {/* Checkboxes grouped together horizontally */}
+          <div className="flex items-end gap-6">
+            <label className="flex items-center space-x-2 text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">
+              <input
+                type="checkbox"
+                name="refill"
+                checked={formData.refill.toLowerCase() === 'da'}
+                onChange={handleChange}
+                className="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              />
+              <span>Refill</span>
+            </label>
+
+            <label className="flex items-center space-x-2 text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">
+              <input
+                type="checkbox"
+                name="vakum"
+                checked={formData.vakum.toLowerCase().includes('vakuum')}
+                onChange={handleChange}
+                className="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              />
+              <span>Vakuum</span>
+            </label>
+
+            <label className="flex items-center space-x-2 text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">
+              <input
+                type="checkbox"
+                name="otvoreno"
+                checked={formData.otvoreno.toLowerCase().includes('otvorena')}
+                onChange={handleChange}
+                className="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              />
+              <span>Otvoreno</span>
+            </label>
+          </div>
+        </div>
+
+        <div className="md:col-span-2 flex justify-end gap-4 mt-4">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors"
+          >
+            Otkaži
+          </button>
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            Sačuvaj
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

app/upadaj/page.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { authService } from '../../src/services/api';
+
+export default function AdminLogin() {
+  const router = useRouter();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  // Set dark mode by default
+  useEffect(() => {
+    document.documentElement.classList.add('dark');
+  }, []);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const response = await authService.login(username, password);
+
+      // Store token in localStorage
+      localStorage.setItem('authToken', response.token);
+      localStorage.setItem('tokenExpiry', String(Date.now() + 24 * 60 * 60 * 1000)); // 24 hours
+
+      // Redirect to admin dashboard
+      router.push('/upadaj/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>
+  );
+}