Add Serbian translations and dark mode support

- Translated all UI text to Serbian
- Added dark mode toggle with system preference support
- Fixed text contrast on colored table rows
- Added dark mode styles throughout the app

src/App.tsx

@@ -8,6 +8,19 @@ function App() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+  const [darkMode, setDarkMode] = useState(() => {
+    const saved = localStorage.getItem('darkMode');
+    return saved ? JSON.parse(saved) : false;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [darkMode]);
 
   const fetchFilaments = async () => {
     try {
@@ -18,7 +31,7 @@ function App() {
       setFilaments(response.data);
       setLastUpdate(new Date());
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch filaments');
+      setError(err instanceof Error ? err.message : 'Greška pri učitavanju filamenata');
     } finally {
       setLoading(false);
     }
@@ -34,17 +47,17 @@ function App() {
   }, []);
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
+      <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">
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
               Filamenteka
             </h1>
             <div className="flex items-center gap-4">
               {lastUpdate && (
-                <span className="text-sm text-gray-500">
-                  Last updated: {lastUpdate.toLocaleTimeString()}
+                <span className="text-sm text-gray-500 dark:text-gray-400">
+                  Poslednje ažuriranje: {lastUpdate.toLocaleTimeString('sr-RS')}
                 </span>
               )}
               <button
@@ -52,12 +65,19 @@ function App() {
                 disabled={loading}
                 className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
               >
-                {loading ? 'Refreshing...' : 'Refresh'}
+                {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>
             </div>
           </div>
-          <p className="mt-2 text-gray-600">
-            Bambu Lab filament inventory tracker synced with Confluence
+          <p className="mt-2 text-gray-600 dark:text-gray-400">
+            Bambu Lab praćenje zaliha filamenata sinhronizovano sa Confluence
           </p>
         </div>
       </header>
@@ -70,10 +90,10 @@ function App() {
         />
       </main>
       
-      <footer className="bg-white border-t mt-12">
+      <footer className="bg-white dark:bg-gray-800 border-t dark:border-gray-700 mt-12 transition-colors">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <p className="text-center text-sm text-gray-500">
-            Filamenteka - Automatically color-coded filament tracking
+          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
+            Filamenteka - Automatsko praćenje filamenata sa kodiranjem bojama
           </p>
         </div>
       </footer>

src/components/ColorCell.tsx

@@ -8,18 +8,15 @@ interface ColorCellProps {
 export const ColorCell: React.FC<ColorCellProps> = ({ colorName }) => {
   const colorMapping = getFilamentColor(colorName);
   const style = getColorStyle(colorMapping);
-  const textColor = Array.isArray(colorMapping.hex) 
-    ? '#000000' 
-    : getContrastColor(colorMapping.hex);
 
   return (
     <div className="flex items-center gap-2">
       <div 
-        className="w-6 h-6 rounded border border-gray-300"
+        className="w-6 h-6 rounded border border-gray-300 dark:border-gray-600"
         style={style}
         title={Array.isArray(colorMapping.hex) ? colorMapping.hex.join(' - ') : colorMapping.hex}
       />
-      <span style={{ color: textColor }}>{colorName}</span>
+      <span>{colorName}</span>
     </div>
   );
 };

src/components/FilamentTable.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { Filament } from '../types/filament';
 import { ColorCell } from './ColorCell';
-import { getFilamentColor, getColorStyle } from '../data/bambuLabColors';
+import { getFilamentColor, getColorStyle, getContrastColor } from '../data/bambuLabColors';
 
 interface FilamentTableProps {
   filaments: Filament[];
@@ -47,15 +47,15 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
   if (loading) {
     return (
       <div className="flex justify-center items-center h-64">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-        Error: {error}
+      <div className="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-200 px-4 py-3 rounded">
+        Greška: {error}
       </div>
     );
   }
@@ -65,52 +65,55 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
       <div className="mb-4">
         <input
           type="text"
-          placeholder="Search filaments..."
+          placeholder="Pretraži filamente..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
-          className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
         />
       </div>
       
       <div className="overflow-x-auto">
-        <table className="min-w-full bg-white border border-gray-300">
+        <table className="min-w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700">
           <thead>
-            <tr className="bg-gray-100">
+            <tr className="bg-gray-100 dark:bg-gray-700">
               <th 
-                className="px-4 py-2 border-b cursor-pointer hover:bg-gray-200"
+                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('brand')}
               >
-                Brand {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')}
+                Brend {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
               <th 
-                className="px-4 py-2 border-b cursor-pointer hover:bg-gray-200"
+                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('tip')}
               >
                 Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
               <th 
-                className="px-4 py-2 border-b cursor-pointer hover:bg-gray-200"
+                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('finish')}
               >
-                Finish {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
+                Završna obrada {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
               <th 
-                className="px-4 py-2 border-b cursor-pointer hover:bg-gray-200"
+                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('boja')}
               >
                 Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
-              <th className="px-4 py-2 border-b">Refill</th>
-              <th className="px-4 py-2 border-b">Vakum</th>
-              <th className="px-4 py-2 border-b">Otvoreno</th>
-              <th className="px-4 py-2 border-b">Količina</th>
-              <th className="px-4 py-2 border-b">Cena</th>
+              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Refill</th>
+              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Vakum</th>
+              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Otvoreno</th>
+              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Količina</th>
+              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Cena</th>
             </tr>
           </thead>
           <tbody>
             {filteredAndSortedFilaments.map((filament, index) => {
               const colorMapping = getFilamentColor(filament.boja);
               const rowStyle = getColorStyle(colorMapping);
+              const textColor = Array.isArray(colorMapping.hex) 
+                ? '#000000' 
+                : getContrastColor(colorMapping.hex);
               
               return (
                 <tr 
@@ -118,20 +121,21 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
                   className="hover:opacity-90 transition-opacity"
                   style={{
                     ...rowStyle,
-                    opacity: 0.8
+                    opacity: 0.8,
+                    color: textColor
                   }}
                 >
-                  <td className="px-4 py-2 border-b">{filament.brand}</td>
-                  <td className="px-4 py-2 border-b">{filament.tip}</td>
-                  <td className="px-4 py-2 border-b">{filament.finish}</td>
-                  <td className="px-4 py-2 border-b">
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.brand}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.tip}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.finish}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">
                     <ColorCell colorName={filament.boja} />
                   </td>
-                  <td className="px-4 py-2 border-b">{filament.refill}</td>
-                  <td className="px-4 py-2 border-b">{filament.vakum}</td>
-                  <td className="px-4 py-2 border-b">{filament.otvoreno}</td>
-                  <td className="px-4 py-2 border-b">{filament.kolicina}</td>
-                  <td className="px-4 py-2 border-b">{filament.cena}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.refill}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.vakum}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.otvoreno}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.kolicina}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.cena}</td>
                 </tr>
               );
             })}
@@ -139,8 +143,8 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
         </table>
       </div>
       
-      <div className="mt-4 text-sm text-gray-600">
-        Showing {filteredAndSortedFilaments.length} of {filaments.length} filaments
+      <div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+        Prikazano {filteredAndSortedFilaments.length} od {filaments.length} filamenata
       </div>
     </div>
   );

tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",

vite.config.ts

@@ -2,13 +2,38 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
-  plugins: [react()],
-  server: {
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3000',
-        changeOrigin: true,
-      }
-    }
-  }
+  plugins: [
+    react(),
+    {
+      name: 'mock-api',
+      configureServer(server) {
+        server.middlewares.use('/api/filaments', (req, res) => {
+          res.setHeader('Content-Type', 'application/json')
+          res.end(JSON.stringify([
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Mistletoe Green", refill: "", vakum: "vakuum x1", otvoreno: "otvorena x1", kolicina: "2", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Indigo Purple", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Black", refill: "", vakum: "", otvoreno: "2x otvorena", kolicina: "2", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Black", refill: "Da", vakum: "vakuum", otvoreno: "", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Jade White", refill: "", vakum: "vakuum", otvoreno: "", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Gray", refill: "", vakum: "vakuum", otvoreno: "", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Red", refill: "", vakum: "vakuum", otvoreno: "", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Hot Pink", refill: "", vakum: "vakuum", otvoreno: "", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Cocoa Brown", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "White", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Cotton Candy Cloud", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Sunflower Yellow", refill: "", vakum: "vakuum", otvoreno: "", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Yellow", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Magenta", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Beige", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Basic", boja: "Cyan", refill: "", vakum: "vakuum", otvoreno: "", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Matte", boja: "Scarlet Red", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Matte", boja: "Mandarin Orange", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Matte", boja: "Marine Blue", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Matte", boja: "Charcoal", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" },
+            { brand: "BambuLab", tip: "PLA", finish: "Matte", boja: "Ivory White", refill: "", vakum: "", otvoreno: "otvorena", kolicina: "", cena: "" }
+          ]))
+        })
+      }
+    }
+  ]
 })