Major frontend and admin improvements

Frontend changes:
- Removed brand filter and column from table
- Removed inventory summary grid
- Removed stanje (state) and težina (weight) columns
- Reorganized filters: Material → Finish → Color
- Updated EnhancedFilters component with new filter structure
- Removed legend section for storage conditions

Admin dashboard changes:
- Removed sidebar navigation (Boje option)
- Made dashboard full screen
- Removed brand column from table
- Removed brand field from add/edit form
- Updated all boolean columns to use checkmark/X icons
- Made color tiles 40% bigger
- Added sortable columns functionality
- Auto-fill price: 3499 for refill, 3999 for regular

Other improvements:
- Added BackToTop button component on all pages
- Fixed Next.js dialog backdrop CSS error
- Updated tests to match new UI structure
- Removed obsolete FilamentTable.tsx component
- Ensured proper synchronization between admin and frontend

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

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

__tests__/ui-features.test.ts

@@ -13,12 +13,12 @@ describe('UI Features Tests', () => {
   });
 
   it('should display color hex in frontend table', () => {
-    const filamentTablePath = join(process.cwd(), 'src', 'components', 'FilamentTable.tsx');
+    const filamentTablePath = join(process.cwd(), 'src', 'components', 'FilamentTableV2.tsx');
     const tableContent = readFileSync(filamentTablePath, 'utf-8');
     
-    // Check for color hex display
+    // Check for color display
-    expect(tableContent).toContain('filament.bojaHex');
+    expect(tableContent).toContain('ColorSwatch');
-    expect(tableContent).toContain('backgroundColor: filament.bojaHex');
+    expect(tableContent).toContain('color.hex');
   });
 
   it('should have checkboxes for boolean fields', () => {
@@ -41,28 +41,25 @@ describe('UI Features Tests', () => {
     expect(adminContent).toContain('step="1"');
   });
 
-  it('should have predefined brand options', () => {
+  it('should have predefined material options', () => {
     const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
     const adminContent = readFileSync(adminDashboardPath, 'utf-8');
     
-    // Check for brand select dropdown
+    // Check for material select dropdown
-    expect(adminContent).toContain('<option value="Bambu Lab">Bambu Lab</option>');
+    expect(adminContent).toContain('<option value="PLA">PLA</option>');
-    expect(adminContent).toContain('<option value="PolyMaker">PolyMaker</option>');
+    expect(adminContent).toContain('<option value="PETG">PETG</option>');
-    expect(adminContent).toContain('<option value="Prusament">Prusament</option>');
+    expect(adminContent).toContain('<option value="ABS">ABS</option>');
   });
 
-  it('should have sidebar navigation in admin', () => {
+  it('should have admin header with navigation', () => {
     const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
-    const colorsPagePath = join(process.cwd(), 'app', 'upadaj', 'colors', 'page.tsx');
     
     const dashboardContent = readFileSync(adminDashboardPath, 'utf-8');
-    const colorsContent = readFileSync(colorsPagePath, 'utf-8');
     
-    // Check for sidebar
+    // Check for admin header
-    expect(dashboardContent).toContain('href="/upadaj/dashboard"');
+    expect(dashboardContent).toContain('Admin Dashboard');
-    expect(dashboardContent).toContain('href="/upadaj/colors"');
+    expect(dashboardContent).toContain('Nazad na sajt');
-    expect(colorsContent).toContain('href="/upadaj/dashboard"');
+    expect(dashboardContent).toContain('Odjava');
-    expect(colorsContent).toContain('href="/upadaj/colors"');
   });
 
   it('should have Safari-specific select styling', () => {

app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next'
 import '../src/styles/index.css'
+import { BackToTop } from '../src/components/BackToTop'
 
 export const metadata: Metadata = {
   title: 'Filamenteka',
@@ -42,7 +43,10 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body suppressHydrationWarning>{children}</body>
+      <body suppressHydrationWarning>
+        {children}
+        <BackToTop />
+      </body>
     </html>
   )
 }

app/upadaj/colors/page.tsx

@@ -250,14 +250,20 @@ export default function ColorsManagement() {
                         <button
                           onClick={() => setEditingColor(color)}
                           className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 mr-3"
+                          title="Izmeni"
                         >
-                          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-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                          title="Obriši"
                         >
-                          Obriši
+                          <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>

app/upadaj/dashboard/page.tsx

@@ -23,7 +23,8 @@ export default function AdminDashboard() {
   const [showAddForm, setShowAddForm] = useState(false);
   const [darkMode, setDarkMode] = useState(false);
   const [mounted, setMounted] = useState(false);
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sortField, setSortField] = useState<string>('');
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
 
   // Initialize dark mode - default to true for admin
   useEffect(() => {
@@ -76,6 +77,34 @@ export default function AdminDashboard() {
     fetchFilaments();
   }, []);
 
+  // Sorting logic
+  const handleSort = (field: string) => {
+    if (sortField === field) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortOrder('asc');
+    }
+  };
+
+  const sortedFilaments = [...filaments].sort((a, b) => {
+    if (!sortField) return 0;
+    
+    let aVal = a[sortField as keyof FilamentWithId];
+    let bVal = b[sortField as keyof FilamentWithId];
+    
+    // Handle null/undefined values
+    if (aVal === null || aVal === undefined) aVal = '';
+    if (bVal === null || bVal === undefined) bVal = '';
+    
+    // Convert to strings for comparison
+    aVal = String(aVal).toLowerCase();
+    bVal = String(bVal).toLowerCase();
+    
+    if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
+    if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
+    return 0;
+  });
 
   const handleSave = async (filament: Partial<FilamentWithId>) => {
     try {
@@ -122,52 +151,12 @@ export default function AdminDashboard() {
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
-      <div className="flex relative">
+      {/* Main Content - Full Screen */}
-        {/* Mobile menu button */}
+      <div className="w-full">
-        <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>
+                <h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white">Admin Dashboard</h1>
                 <div className="flex flex-wrap gap-2 sm:gap-4 w-full sm:w-auto">
                   {!showAddForm && !editingFilament && (
                     <button
@@ -231,39 +220,71 @@ export default function AdminDashboard() {
           <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 onClick={() => handleSort('tip')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tip</th>
+                  Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
-                <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>
-                <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 onClick={() => handleSort('finish')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Refill</th>
+                  Finish {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
-                <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>
-                <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 onClick={() => handleSort('boja')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
-                <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>
+                  Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
-                <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>
+                <th onClick={() => handleSort('refill')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                  Refill {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
+                </th>
+                <th onClick={() => handleSort('vakum')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                  Vakuum {sortField === 'vakum' && (sortOrder === 'asc' ? '↑' : '↓')}
+                </th>
+                <th onClick={() => handleSort('otvoreno')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                  Otvoreno {sortField === 'otvoreno' && (sortOrder === 'asc' ? '↑' : '↓')}
+                </th>
+                <th onClick={() => handleSort('kolicina')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                  Količina {sortField === 'kolicina' && (sortOrder === 'asc' ? '↑' : '↓')}
+                </th>
+                <th onClick={() => handleSort('cena')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                  Cena {sortField === 'cena' && (sortOrder === 'asc' ? '↑' : '↓')}
+                </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) => (
+              {sortedFilaments.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" 
+                          className="w-7 h-7 rounded border border-gray-300 dark:border-gray-600" 
                           style={{ backgroundColor: filament.bojaHex }}
                           title={filament.bojaHex}
                         />
                       )}
+                      <span>{filament.boja}</span>
                     </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">
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.vakum}</td>
+                    {filament.refill?.toLowerCase() === 'da' ? (
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.otvoreno}</td>
+                      <span className="text-green-600 dark:text-green-400 text-lg">✓</span>
+                    ) : (
+                      <span className="text-red-600 dark:text-red-400 text-lg">✗</span>
+                    )}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {filament.vakum?.toLowerCase().includes('vakuum') ? (
+                      <span className="text-green-600 dark:text-green-400 text-lg">✓</span>
+                    ) : (
+                      <span className="text-red-600 dark:text-red-400 text-lg">✗</span>
+                    )}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {filament.otvoreno?.toLowerCase().includes('otvorena') ? (
+                      <span className="text-green-600 dark:text-green-400 text-lg">✓</span>
+                    ) : (
+                      <span className="text-red-600 dark:text-red-400 text-lg">✗</span>
+                    )}
+                  </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">
@@ -274,14 +295,20 @@ export default function AdminDashboard() {
                         setShowAddForm(false);
                       }}
                       className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 mr-3"
+                      title="Izmeni"
                     >
-                      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(filament.id)}
                       className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                      title="Obriši"
                     >
-                      Obriši
+                      <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>
@@ -292,7 +319,6 @@ export default function AdminDashboard() {
           </main>
       </div>
     </div>
-    </div>
   );
 }
 
@@ -309,7 +335,7 @@ function FilamentForm({
   onCancel: () => void 
 }) {
   const [formData, setFormData] = useState({
-    brand: filament.brand || '',
+    brand: filament.brand || 'Bambu Lab', // Use existing brand or default to Bambu Lab
     tip: filament.tip || '',
     finish: filament.finish || '',
     boja: filament.boja || '',
@@ -318,7 +344,7 @@ function FilamentForm({
     vakum: filament.vakum || '',
     otvoreno: filament.otvoreno || '',
     kolicina: filament.kolicina || '',
-    cena: filament.cena || '',
+    cena: filament.cena || (filament.id ? '' : '3999'), // Default price for new filaments
   });
 
   const [availableColors, setAvailableColors] = useState<Array<{id: string, name: string, hex: string}>>([]);
@@ -385,7 +411,9 @@ function FilamentForm({
       } else if (name === 'refill') {
         setFormData({
           ...formData,
-          [name]: checked ? 'Da' : ''
+          [name]: checked ? 'Da' : '',
+          // Auto-fill price based on refill status if this is a new filament
+          ...(filament.id ? {} : { cena: checked ? '3499' : '3999' })
         });
       }
     } else {
@@ -410,27 +438,6 @@ function FilamentForm({
         {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
@@ -465,7 +472,6 @@ function FilamentForm({
             <option value="Sparkle">Sparkle</option>
             <option value="Glow">Glow</option>
             <option value="Transparent">Transparent</option>
-            <option value="Support">Support</option>
           </select>
         </div>
 

src/components/BackToTop.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+
+export const BackToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.pageYOffset > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('scroll', toggleVisibility);
+
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-8 right-8 z-50 p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all duration-300 transform hover:scale-110"
+          aria-label="Back to top"
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 10l7-7m0 0l7 7m-7-7v18"
+            />
+          </svg>
+        </button>
+      )}
+    </>
+  );
+};

src/components/ColorSwatch.tsx

@@ -16,7 +16,7 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
   className = ''
 }) => {
   const sizeClasses = {
-    sm: 'w-6 h-6',
+    sm: 'w-7 h-7',
     md: 'w-8 h-8',
     lg: 'w-10 h-10'
   };
@@ -63,12 +63,12 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
   return (
     <div className={`flex items-center gap-2 ${className}`}>
       <div 
-        className={`${sizeClasses[size]} rounded-full border-2 ${isLight ? 'border-gray-300' : 'border-gray-700'} shadow-sm`}
+        className={`${sizeClasses[size]} rounded border border-gray-300 dark:border-gray-600`}
         style={{ backgroundColor }}
         title={name}
       >
         {name.toLowerCase().includes('transparent') && (
-          <div className="w-full h-full rounded-full bg-gradient-to-br from-gray-200 to-gray-300 opacity-50" />
+          <div className="w-full h-full rounded bg-gradient-to-br from-gray-200 to-gray-300 opacity-50" />
         )}
       </div>
       {showLabel && (

src/components/EnhancedFilters.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 
 interface EnhancedFiltersProps {
   filters: {
-    brand: string;
     material: string;
+    finish: string;
+    color: string;
     storageCondition: string;
     isRefill: boolean | null;
-    color: string;
   };
   onFilterChange: (filters: any) => void;
   uniqueValues: {
-    brands: string[];
     materials: string[];
+    finishes: string[];
     colors: string[];
   };
 }
@@ -22,32 +22,13 @@ export const EnhancedFilters: React.FC<EnhancedFiltersProps> = ({
   uniqueValues 
 }) => {
   // Check if any filters are active
-  const hasActiveFilters = filters.brand || filters.material || filters.color || 
+  const hasActiveFilters = filters.material || filters.finish || filters.color || 
                           filters.storageCondition || filters.isRefill !== null;
 
   return (
     <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
       {/* Filters Grid */}
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 max-w-6xl mx-auto">
-        {/* Brand Filter */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-            Brend
-          </label>
-          <select
-            value={filters.brand}
-            onChange={(e) => onFilterChange({ ...filters, brand: e.target.value })}
-            className="custom-select w-full px-3 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"
-          >
-            <option value="">Svi brendovi</option>
-            {uniqueValues.brands.map(brand => (
-              <option key={brand} value={brand}>{brand}</option>
-            ))}
-          </select>
-        </div>
-
         {/* Material Filter */}
         <div>
           <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -77,6 +58,25 @@ export const EnhancedFilters: React.FC<EnhancedFiltersProps> = ({
           </select>
         </div>
 
+        {/* Finish Filter */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Finish
+          </label>
+          <select
+            value={filters.finish}
+            onChange={(e) => onFilterChange({ ...filters, finish: e.target.value })}
+            className="custom-select w-full px-3 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"
+          >
+            <option value="">Svi finish tipovi</option>
+            {uniqueValues.finishes.map(finish => (
+              <option key={finish} value={finish}>{finish}</option>
+            ))}
+          </select>
+        </div>
+
         {/* Color Filter */}
         <div>
           <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -144,11 +144,11 @@ export const EnhancedFilters: React.FC<EnhancedFiltersProps> = ({
             {hasActiveFilters && (
               <button
                 onClick={() => onFilterChange({
-                  brand: '',
                   material: '',
+                  finish: '',
+                  color: '',
                   storageCondition: '',
-                  isRefill: null,
+                  isRefill: null
-                  color: ''
                 })}
                 className="flex items-center gap-1.5 ml-6 px-3 py-1.5 text-sm font-medium text-white bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 rounded-md transition-all duration-200 transform hover:scale-105 shadow-sm hover:shadow-md"
                 title="Reset sve filtere"

src/components/FilamentTable.tsx

@@ -1,311 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Filament } from '../types/filament';
-import { ColorCell } from './ColorCell';
-import { getFilamentColor, getColorStyle, getContrastColor } from '../data/bambuLabColors';
-import '../styles/select.css';
-
-interface FilamentTableProps {
-  filaments: Filament[];
-  loading?: boolean;
-  error?: string;
-}
-
-export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading, error }) => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [sortField, setSortField] = useState<keyof Filament>('boja');
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
-  
-  // Filter states
-  const [filterBrand, setFilterBrand] = useState('');
-  const [filterTip, setFilterTip] = useState('');
-  const [filterFinish, setFilterFinish] = useState('');
-  const [filterStatus, setFilterStatus] = useState('');
-
-  // Get unique values for filters
-  const uniqueBrands = useMemo(() => [...new Set(filaments.map(f => f.brand))].sort(), [filaments]);
-  const uniqueTips = useMemo(() => [...new Set(filaments.map(f => f.tip))].sort(), [filaments]);
-  const uniqueFinishes = useMemo(() => [...new Set(filaments.map(f => f.finish))].sort(), [filaments]);
-
-  const filteredAndSortedFilaments = useMemo(() => {
-    let filtered = filaments.filter(filament => {
-      // Search filter
-      const matchesSearch = Object.values(filament).some(value =>
-        value.toLowerCase().includes(searchTerm.toLowerCase())
-      );
-      
-      // Brand filter
-      const matchesBrand = !filterBrand || filament.brand === filterBrand;
-      
-      // Type filter
-      const matchesTip = !filterTip || filament.tip === filterTip;
-      
-      // Finish filter
-      const matchesFinish = !filterFinish || filament.finish === filterFinish;
-      
-      // Status filter
-      let matchesStatus = true;
-      if (filterStatus) {
-        if (filterStatus === 'new') {
-          matchesStatus = filament.vakum.toLowerCase().includes('vakuum') && !filament.otvoreno;
-        } else if (filterStatus === 'opened') {
-          matchesStatus = filament.otvoreno.toLowerCase().includes('otvorena');
-        } else if (filterStatus === 'refill') {
-          matchesStatus = filament.refill.toLowerCase() === 'da';
-        }
-      }
-      
-      return matchesSearch && matchesBrand && matchesTip && matchesFinish && matchesStatus;
-    });
-
-    filtered.sort((a, b) => {
-      const aValue = a[sortField] || '';
-      const bValue = b[sortField] || '';
-      
-      if (sortOrder === 'asc') {
-        return aValue.localeCompare(bValue);
-      } else {
-        return bValue.localeCompare(aValue);
-      }
-    });
-
-    return filtered;
-  }, [filaments, searchTerm, sortField, sortOrder, filterBrand, filterTip, filterFinish, filterStatus]);
-
-  const handleSort = (field: keyof Filament) => {
-    if (sortField === field) {
-      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortField(field);
-      setSortOrder('asc');
-    }
-  };
-
-  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 dark:border-gray-100"></div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <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>
-    );
-  }
-
-  return (
-    <div className="w-full">
-      <div className="space-y-4 mb-4">
-        {/* Search Bar */}
-        <div>
-          <input
-            type="text"
-            placeholder="Pretraži filamente..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            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>
-
-        {/* Filter Row */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          {/* Brand Filter */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              Brend
-            </label>
-            <select
-              value={filterBrand}
-              onChange={(e) => setFilterBrand(e.target.value)}
-              className="custom-select w-full px-3 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"
-            >
-              <option value="">Svi brendovi</option>
-              {uniqueBrands.map(brand => (
-                <option key={brand} value={brand}>{brand}</option>
-              ))}
-            </select>
-          </div>
-
-          {/* Type Filter */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              Tip
-            </label>
-            <select
-              value={filterTip}
-              onChange={(e) => setFilterTip(e.target.value)}
-              className="custom-select w-full px-3 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"
-            >
-              <option value="">Svi tipovi</option>
-              {uniqueTips.map(tip => (
-                <option key={tip} value={tip}>{tip}</option>
-              ))}
-            </select>
-          </div>
-
-          {/* Finish Filter */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              Završna obrada
-            </label>
-            <select
-              value={filterFinish}
-              onChange={(e) => setFilterFinish(e.target.value)}
-              className="custom-select w-full px-3 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"
-            >
-              <option value="">Sve obrade</option>
-              {uniqueFinishes.map(finish => (
-                <option key={finish} value={finish}>{finish}</option>
-              ))}
-            </select>
-          </div>
-
-          {/* Status Filter */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              Status
-            </label>
-            <select
-              value={filterStatus}
-              onChange={(e) => setFilterStatus(e.target.value)}
-              className="custom-select w-full px-3 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"
-            >
-              <option value="">Svi statusi</option>
-              <option value="new">Novi (vakuum)</option>
-              <option value="opened">Otvoreni</option>
-              <option value="refill">Refill</option>
-            </select>
-          </div>
-        </div>
-
-        {/* Clear Filters Button */}
-        {(filterBrand || filterTip || filterFinish || filterStatus) && (
-          <button
-            onClick={() => {
-              setFilterBrand('');
-              setFilterTip('');
-              setFilterFinish('');
-              setFilterStatus('');
-            }}
-            className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
-          >
-            Obriši filtere
-          </button>
-        )}
-      </div>
-      
-      <div className="overflow-x-auto">
-        <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 dark:bg-gray-700">
-              <th 
-                className="px-4 py-2 border-b border-r 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')}
-              >
-                Brend {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')}
-              </th>
-              <th 
-                className="px-4 py-2 border-b border-r 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 border-r 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')}
-              >
-                Završna obrada {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
-              </th>
-              <th 
-                className="px-4 py-2 border-b border-r 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 border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
-                onClick={() => handleSort('refill')}
-              >
-                Refill {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
-              </th>
-              <th 
-                className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
-                onClick={() => handleSort('vakum')}
-              >
-                Vakum {sortField === 'vakum' && (sortOrder === 'asc' ? '↑' : '↓')}
-              </th>
-              <th 
-                className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
-                onClick={() => handleSort('otvoreno')}
-              >
-                Otvoreno {sortField === 'otvoreno' && (sortOrder === 'asc' ? '↑' : '↓')}
-              </th>
-              <th 
-                className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
-                onClick={() => handleSort('kolicina')}
-              >
-                Količina {sortField === 'kolicina' && (sortOrder === 'asc' ? '↑' : '↓')}
-              </th>
-              <th 
-                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('cena')}
-              >
-                Cena {sortField === 'cena' && (sortOrder === 'asc' ? '↑' : '↓')}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {filteredAndSortedFilaments.map((filament, index) => {
-              const colorMapping = getFilamentColor(filament.boja);
-              const cellStyle = getColorStyle(colorMapping);
-              const textColor = Array.isArray(colorMapping.hex) 
-                ? '#000000' 
-                : getContrastColor(colorMapping.hex);
-              
-              return (
-                <tr 
-                  key={index} 
-                  className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors bg-white dark:bg-gray-800"
-                >
-                  <td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.brand}</td>
-                  <td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.tip}</td>
-                  <td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.finish}</td>
-                  <td 
-                    className="px-4 py-2 border-b border-r dark:border-gray-700"
-                    style={{
-                      ...cellStyle,
-                      color: textColor
-                    }}
-                  >
-                    <div className="flex items-center gap-2">
-                      <ColorCell colorName={filament.boja} />
-                      {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-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.refill}</td>
-                  <td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.vakum}</td>
-                  <td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.otvoreno}</td>
-                  <td className="px-4 py-2 border-b border-r dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.kolicina}</td>
-                  <td className="px-4 py-2 border-b dark:border-gray-700 text-gray-900 dark:text-gray-100">{filament.cena}</td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-      
-      <div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
-        Prikazano {filteredAndSortedFilaments.length} od {filaments.length} filamenata
-      </div>
-    </div>
-  );
-};

src/components/FilamentTableV2.tsx

@@ -18,11 +18,11 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
   const [sortField, setSortField] = useState<string>('color.name');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
   const [filters, setFilters] = useState({
-    brand: '',
     material: '',
+    finish: '',
+    color: '',
     storageCondition: '',
-    isRefill: null as boolean | null,
+    isRefill: null as boolean | null
-    color: ''
   });
 
   // Convert legacy filaments to V2 format for display
@@ -78,8 +78,8 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
 
   // Get unique values for filters
   const uniqueValues = useMemo(() => ({
-    brands: [...new Set(normalizedFilaments.map(f => f.brand))].sort(),
     materials: [...new Set(normalizedFilaments.map(f => f.material.base))].sort(),
+    finishes: [...new Set(normalizedFilaments.map(f => f.material.modifier).filter(Boolean))].sort() as string[],
     colors: [...new Set(normalizedFilaments.map(f => f.color.name))].sort()
   }), [normalizedFilaments]);
 
@@ -98,15 +98,13 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
         false; // SKU removed
       
       // Other filters
-      const matchesBrand = !filters.brand || filament.brand === filters.brand;
+      const matchesMaterial = !filters.material || filament.material.base === filters.material;
-      const matchesMaterial = !filters.material || 
+      const matchesFinish = !filters.finish || filament.material.modifier === filters.finish;
-        filament.material.base === filters.material ||
-        `${filament.material.base}-${filament.material.modifier}` === filters.material;
       const matchesStorage = !filters.storageCondition || filament.condition.storageCondition === filters.storageCondition;
       const matchesRefill = filters.isRefill === null || filament.condition.isRefill === filters.isRefill;
       const matchesColor = !filters.color || filament.color.name === filters.color;
       
-      return matchesSearch && matchesBrand && matchesMaterial && matchesStorage && matchesRefill && matchesColor;
+      return matchesSearch && matchesMaterial && matchesFinish && matchesStorage && matchesRefill && matchesColor;
     });
 
     // Sort
@@ -138,29 +136,6 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
     }
   };
 
-  // Inventory summary
-  const inventorySummary = useMemo(() => {
-    const summary = {
-      totalSpools: 0,
-      availableSpools: 0,
-      vacuumCount: 0,
-      openedCount: 0,
-      refillCount: 0
-    };
-
-    normalizedFilaments.forEach(f => {
-      summary.totalSpools += f.inventory.total;
-      summary.availableSpools += f.inventory.available;
-      summary.vacuumCount += f.inventory.locations.vacuum;
-      summary.openedCount += f.inventory.locations.opened;
-      
-      if (f.condition.isRefill) {
-        summary.refillCount += f.inventory.total;
-      }
-    });
-
-    return summary;
-  }, [normalizedFilaments]);
 
   if (loading) {
     return <div className="text-center py-8">Učitavanje...</div>;
@@ -172,29 +147,6 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
 
   return (
     <div className="space-y-6">
-      {/* Inventory Summary */}
-      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-        <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
-          <div className="text-sm text-gray-500 dark:text-gray-400">Ukupno filamenta</div>
-          <div className="text-2xl font-bold text-gray-900 dark:text-white">{inventorySummary.totalSpools}</div>
-        </div>
-        <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
-          <div className="text-sm text-gray-500 dark:text-gray-400">Dostupno</div>
-          <div className="text-2xl font-bold text-green-600 dark:text-green-400">{inventorySummary.availableSpools}</div>
-        </div>
-        <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
-          <div className="text-sm text-gray-500 dark:text-gray-400">Vakum</div>
-          <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{inventorySummary.vacuumCount}</div>
-        </div>
-        <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
-          <div className="text-sm text-gray-500 dark:text-gray-400">Otvoreno</div>
-          <div className="text-2xl font-bold text-orange-600 dark:text-orange-400">{inventorySummary.openedCount}</div>
-        </div>
-        <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
-          <div className="text-sm text-gray-500 dark:text-gray-400">Refill</div>
-          <div className="text-2xl font-bold text-purple-600 dark:text-purple-400">{inventorySummary.refillCount}</div>
-        </div>
-      </div>
 
       {/* Search Bar */}
       <div className="relative">
@@ -217,45 +169,18 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
         uniqueValues={uniqueValues}
       />
 
-      {/* Icon Legend */}
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
-        <h3 className="text-base font-medium text-gray-700 dark:text-gray-300 mb-3 text-center">Legenda stanja:</h3>
-        <div className="flex justify-center gap-8">
-          <div className="flex items-center gap-3">
-            <div className="transform scale-125">
-              <InventoryBadge type="vacuum" count={1} />
-            </div>
-            <span className="text-gray-600 dark:text-gray-400 text-[15px]">Vakuum pakovanje</span>
-          </div>
-          <div className="flex items-center gap-3">
-            <div className="transform scale-125">
-              <InventoryBadge type="opened" count={1} />
-            </div>
-            <span className="text-gray-600 dark:text-gray-400 text-[15px]">Otvoreno</span>
-          </div>
-        </div>
-      </div>
 
       {/* 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-900">
             <tr>
-              <th onClick={() => handleSort('brand')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
-                Brend
-              </th>
               <th onClick={() => handleSort('material.base')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
                 Materijal
               </th>
               <th onClick={() => handleSort('color.name')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
                 Boja
               </th>
-              <th onClick={() => handleSort('inventory.total')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
-                Stanje
-              </th>
-              <th onClick={() => handleSort('weight.value')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
-                Težina
-              </th>
               <th onClick={() => handleSort('pricing.purchasePrice')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
                 Cena
               </th>
@@ -267,31 +192,12 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
           <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
             {filteredAndSortedFilaments.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 font-medium text-gray-900 dark:text-white">
-                  {filament.brand}
-                </td>
                 <td className="px-6 py-4 whitespace-nowrap">
                   <MaterialBadge base={filament.material.base} modifier={filament.material.modifier} />
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap">
                   <ColorSwatch name={filament.color.name} hex={filament.color.hex} size="sm" />
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="flex gap-2">
-                    {filament.inventory.locations.vacuum > 0 && (
-                      <InventoryBadge type="vacuum" count={filament.inventory.locations.vacuum} />
-                    )}
-                    {filament.inventory.locations.opened > 0 && (
-                      <InventoryBadge type="opened" count={filament.inventory.locations.opened} />
-                    )}
-                    {filament.inventory.locations.printer > 0 && (
-                      <InventoryBadge type="printer" count={filament.inventory.locations.printer} />
-                    )}
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
-                  {filament.weight.value}{filament.weight.unit}
-                </td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                   {(() => {
                     // PLA Basic and Matte pricing logic

src/styles/index.css

@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Next.js error overlay styles */
+[data-nextjs-dialog-backdrop] {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
 /* Prevent white flash on admin pages */
 @layer base {
   html {