Refactor to multi-category catalog with polished light mode

- Restructure from single filament table to multi-category product catalog
  (filamenti, stampaci, ploce, mlaznice, delovi, oprema)
- Add shared layout components (SiteHeader, SiteFooter, CategoryNav, Breadcrumb)
- Add reusable UI primitives (Badge, Button, Card, Modal, PriceDisplay, EmptyState)
- Add catalog components (CatalogPage, ProductTable, ProductGrid, FilamentCard, ProductCard)
- Add admin dashboard with sidebar navigation and category management
- Add product API endpoints and database migrations
- Add SEO pages (politika-privatnosti, uslovi-koriscenja, robots.txt, sitemap.xml)
- Fix light mode: gradient text contrast, category nav accessibility,
  surface tokens, card shadows, CTA section theming

app/upadaj/dashboard/boje/page.tsx

@@ -0,0 +1,448 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+import { colorService } from '@/src/services/api';
+import { bambuLabColors, getColorHex } from '@/src/data/bambuLabColorsComplete';
+import { BulkPriceEditor } from '@/src/components/BulkPriceEditor';
+import '@/src/styles/select.css';
+
+interface Color {
+  id: string;
+  name: string;
+  hex: string;
+  cena_refill?: number;
+  cena_spulna?: number;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export default function BojePage() {
+  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 [searchTerm, setSearchTerm] = useState('');
+  const [selectedColors, setSelectedColors] = useState<Set<string>>(new Set());
+
+  // 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('Greska pri ucitavanju 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!,
+          cena_refill: color.cena_refill,
+          cena_spulna: color.cena_spulna
+        });
+      } else {
+        await colorService.create({
+          name: color.name!,
+          hex: color.hex!,
+          cena_refill: color.cena_refill,
+          cena_spulna: color.cena_spulna
+        });
+      }
+
+      setEditingColor(null);
+      setShowAddForm(false);
+      fetchColors();
+    } catch (err) {
+      setError('Greska pri cuvanju boje');
+      console.error('Save error:', err);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Da li ste sigurni da zelite obrisati ovu boju?')) {
+      return;
+    }
+
+    try {
+      await colorService.delete(id);
+      fetchColors();
+    } catch (err) {
+      setError('Greska pri brisanju boje');
+      console.error('Delete error:', err);
+    }
+  };
+
+  const handleBulkDelete = async () => {
+    if (selectedColors.size === 0) {
+      setError('Molimo izaberite boje za brisanje');
+      return;
+    }
+
+    if (!confirm(`Da li ste sigurni da zelite obrisati ${selectedColors.size} boja?`)) {
+      return;
+    }
+
+    try {
+      await Promise.all(Array.from(selectedColors).map(id => colorService.delete(id)));
+      setSelectedColors(new Set());
+      fetchColors();
+    } catch (err) {
+      setError('Greska pri brisanju boja');
+      console.error('Bulk delete error:', err);
+    }
+  };
+
+  const toggleColorSelection = (colorId: string) => {
+    const newSelection = new Set(selectedColors);
+    if (newSelection.has(colorId)) {
+      newSelection.delete(colorId);
+    } else {
+      newSelection.add(colorId);
+    }
+    setSelectedColors(newSelection);
+  };
+
+  const toggleSelectAll = () => {
+    const filteredColors = colors.filter(color =>
+      color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      color.hex.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    const allFilteredSelected = filteredColors.every(c => selectedColors.has(c.id));
+
+    if (allFilteredSelected) {
+      setSelectedColors(new Set());
+    } else {
+      setSelectedColors(new Set(filteredColors.map(c => c.id)));
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-white/40">Ucitavanje...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-white">Upravljanje bojama</h1>
+          <p className="text-white/40 mt-1">{colors.length} boja ukupno</p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {!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>
+          )}
+          <BulkPriceEditor colors={colors} onUpdate={fetchColors} />
+          {selectedColors.size > 0 && (
+            <button
+              onClick={handleBulkDelete}
+              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+            >
+              Obrisi izabrane ({selectedColors.size})
+            </button>
+          )}
+        </div>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-900/20 text-red-400 rounded">
+          {error}
+        </div>
+      )}
+
+      {/* Add Form */}
+      {showAddForm && (
+        <ColorForm
+          color={{}}
+          onSave={handleSave}
+          onCancel={() => {
+            setShowAddForm(false);
+          }}
+        />
+      )}
+
+      {/* Search Bar */}
+      <div className="relative">
+        <input
+          type="text"
+          placeholder="Pretrazi boje..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="w-full px-4 py-2 pl-10 pr-4 text-white/60 bg-white/[0.04] border border-white/[0.08] rounded-2xl focus:outline-none focus:border-blue-500"
+        />
+        <svg className="absolute left-3 top-2.5 h-5 w-5 text-white/40" 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>
+
+      {/* Colors Table */}
+      <div className="overflow-x-auto bg-white/[0.04] rounded-2xl shadow">
+        <table className="min-w-full divide-y divide-white/[0.06]">
+          <thead className="bg-white/[0.06]">
+            <tr>
+              <th className="px-6 py-3 text-left">
+                <input
+                  type="checkbox"
+                  checked={(() => {
+                    const filtered = colors.filter(color =>
+                      color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                      color.hex.toLowerCase().includes(searchTerm.toLowerCase())
+                    );
+                    return filtered.length > 0 && filtered.every(c => selectedColors.has(c.id));
+                  })()}
+                  onChange={toggleSelectAll}
+                  className="w-4 h-4 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-white/[0.06] dark:border-white/[0.08]"
+                />
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Boja</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Naziv</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Hex kod</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Cena Refil</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Cena Spulna</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-white/60 uppercase tracking-wider">Akcije</th>
+            </tr>
+          </thead>
+          <tbody className="bg-white/[0.04] divide-y divide-white/[0.06]">
+            {colors
+              .filter(color =>
+                color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                color.hex.toLowerCase().includes(searchTerm.toLowerCase())
+              )
+              .map((color) => (
+              <tr key={color.id} className="hover:bg-white/[0.06]">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <input
+                    type="checkbox"
+                    checked={selectedColors.has(color.id)}
+                    onChange={() => toggleColorSelection(color.id)}
+                    className="w-4 h-4 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-white/[0.06] dark:border-white/[0.08]"
+                  />
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div
+                    className="w-10 h-10 rounded border-2 border-white/[0.08]"
+                    style={{ backgroundColor: color.hex }}
+                  />
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-white/90">{color.name}</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-white/90">{color.hex}</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-400">
+                  {(color.cena_refill || 3499).toLocaleString('sr-RS')} RSD
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-400">
+                  {(color.cena_spulna || 3999).toLocaleString('sr-RS')} RSD
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                  <button
+                    onClick={() => setEditingColor(color)}
+                    className="text-blue-400 hover:text-blue-300 mr-3"
+                    title="Izmeni"
+                  >
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => handleDelete(color.id)}
+                    className="text-red-400 hover:text-red-300"
+                    title="Obrisi"
+                  >
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </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/[0.04] rounded-2xl 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-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',
+    cena_refill: color.cena_refill || 3499,
+    cena_spulna: color.cena_spulna || 3999,
+  });
+
+  const isBambuLabColor = !!(formData.name && Object.prototype.hasOwnProperty.call(bambuLabColors, formData.name));
+  const bambuHex = formData.name ? getColorHex(formData.name) : null;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value, type } = e.target;
+    setFormData({
+      ...formData,
+      [name]: type === 'number' ? parseInt(value) || 0 : value
+    });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const hexToSave = isBambuLabColor && bambuHex ? bambuHex : formData.hex;
+    onSave({
+      ...color,
+      name: formData.name,
+      hex: hexToSave,
+      cena_refill: formData.cena_refill,
+      cena_spulna: formData.cena_spulna
+    });
+  };
+
+  return (
+    <div className={isModal ? "" : "p-6 bg-white/[0.04] rounded-2xl shadow"}>
+      {!isModal && (
+        <h2 className="text-xl font-bold mb-4 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-white/60">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-white/[0.08] rounded-md bg-white/[0.06] text-white/90 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-white/60">Hex kod boje</label>
+          <div className="flex gap-2 items-center">
+            <input
+              type="color"
+              name="hex"
+              value={isBambuLabColor && bambuHex ? bambuHex : formData.hex}
+              onChange={handleChange}
+              disabled={isBambuLabColor}
+              className={`w-12 h-12 p-1 border-2 border-white/[0.08] rounded-md ${isBambuLabColor ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
+              style={{ backgroundColor: isBambuLabColor && bambuHex ? bambuHex : formData.hex }}
+            />
+            <input
+              type="text"
+              name="hex"
+              value={isBambuLabColor && bambuHex ? bambuHex : formData.hex}
+              onChange={handleChange}
+              required
+              readOnly={isBambuLabColor}
+              pattern="^#[0-9A-Fa-f]{6}$"
+              placeholder="#000000"
+              className={`flex-1 px-3 py-2 border border-white/[0.08] rounded-md bg-white/[0.06] text-white/90 focus:outline-none focus:ring-2 focus:ring-blue-500 ${isBambuLabColor ? 'bg-[#060a14] cursor-not-allowed' : ''}`}
+            />
+          </div>
+          {isBambuLabColor && (
+            <p className="text-xs text-white/40 mt-1">
+              Bambu Lab predefinisana boja - hex kod se ne moze menjati
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-white/60">Cena Refil</label>
+          <input
+            type="number"
+            name="cena_refill"
+            value={formData.cena_refill}
+            onChange={handleChange}
+            required
+            min="0"
+            step="1"
+            placeholder="3499"
+            className="w-full px-3 py-2 border border-white/[0.08] rounded-md bg-white/[0.06] text-white/90 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-white/60">Cena Spulna</label>
+          <input
+            type="number"
+            name="cena_spulna"
+            value={formData.cena_spulna}
+            onChange={handleChange}
+            required
+            min="0"
+            step="1"
+            placeholder="3999"
+            className="w-full px-3 py-2 border border-white/[0.08] rounded-md bg-white/[0.06] text-white/90 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </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-white/[0.08] text-white/70 rounded-xl hover:bg-white/[0.12] transition-colors"
+          >
+            Otkazi
+          </button>
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            Sacuvaj
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}