Remove refresh icon and fix Safari/WebKit runtime errors

- Removed manual refresh button from frontend (kept auto-refresh functionality)
- Fixed WebKit 'object cannot be found' error by replacing absolute positioning with flexbox
- Added lazy loading to images to prevent preload warnings
- Cleaned up unused imports and variables:
  - Removed unused useRef import
  - Removed unused colors state variable and colorService
  - Removed unused ColorSwatch import from FilamentTableV2
  - Removed unused getModifierIcon function from MaterialBadge
- Updated tests to match current implementation
- Improved layout stability for better cross-browser compatibility
- Removed temporary migration scripts

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

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

__tests__/data-consistency.test.ts

@@ -11,13 +11,13 @@ describe('Data Structure Consistency Tests', () => {
       'tip',
       'finish', 
       'boja',
-      'bojaHex', // Frontend uses camelCase
+      'boja_hex', // Now using snake_case consistently
       'refill',
-      'vakum',
+      'spulna',  // Frontend still uses spulna
       'kolicina',
       'cena',
-      'createdAt',
-      'updatedAt'
+      'created_at',
+      'updated_at'
     ],
     requiredFields: ['tip', 'finish', 'boja'],
     excludedFields: ['brand'], // Should NOT exist
@@ -25,10 +25,10 @@ describe('Data Structure Consistency Tests', () => {
       tip: 'string',
       finish: 'string',
       boja: 'string',
-      bojaHex: 'string',
-      refill: 'string',
-      vakum: 'string',
-      kolicina: 'string',
+      boja_hex: 'string',
+      refill: 'number',
+      spulna: 'number',
+      kolicina: 'number',
       cena: 'string'
     }
   };
@@ -42,7 +42,7 @@ describe('Data Structure Consistency Tests', () => {
       'boja',
       'boja_hex', // Database uses snake_case
       'refill',
-      'vakum',
+      'spulna',
       'kolicina',
       'cena',
       'created_at',
@@ -55,8 +55,8 @@ describe('Data Structure Consistency Tests', () => {
       finish: 'character varying',
       boja: 'character varying',
       boja_hex: 'character varying',
-      refill: 'character varying',
-      vakum: 'character varying',
+      refill: 'integer',
+      spulna: 'integer',
       kolicina: 'integer',
       cena: 'character varying',
       created_at: 'timestamp with time zone',
@@ -68,8 +68,8 @@ describe('Data Structure Consistency Tests', () => {
     it('should have correct TypeScript interface', () => {
       // Check Filament interface matches admin structure
       const filamentKeys: (keyof Filament)[] = [
-        'id', 'tip', 'finish', 'boja', 'bojaHex', 'boja_hex',
-        'refill', 'vakum', 'kolicina', 'cena',
+        'id', 'tip', 'finish', 'boja', 'boja_hex',
+        'refill', 'spulna', 'kolicina', 'cena',
         'status', 'createdAt', 'updatedAt'
       ];
       
@@ -84,8 +84,8 @@ describe('Data Structure Consistency Tests', () => {
 
     it('should have consistent form fields in admin dashboard', () => {
       const formFields = [
-        'tip', 'finish', 'boja', 'bojaHex', 
-        'refill', 'vakum', 'kolicina', 'cena'
+        'tip', 'finish', 'boja', 'boja_hex', 
+        'refill', 'spulna', 'kolicina', 'cena'
       ];
       
       // Check all form fields are in admin structure
@@ -155,27 +155,27 @@ describe('Data Structure Consistency Tests', () => {
 
   describe('Frontend Consistency', () => {
     it('should transform fields correctly between admin and database', () => {
-      // Admin uses camelCase, DB uses snake_case
-      const transformations = {
-        'bojaHex': 'boja_hex',
-        'createdAt': 'created_at',
-        'updatedAt': 'updated_at'
+      // All fields now use snake_case consistently
+      const snakeCaseFields = {
+        'boja_hex': 'boja_hex',
+        'created_at': 'created_at',
+        'updated_at': 'updated_at'
       };
 
-      Object.entries(transformations).forEach(([adminField, dbField]) => {
+      Object.entries(snakeCaseFields).forEach(([adminField, dbField]) => {
         expect(ADMIN_STRUCTURE.fields).toContain(adminField);
         expect(DB_STRUCTURE.columns).toContain(dbField);
       });
     });
 
     it('should handle quantity fields correctly', () => {
-      // Admin form shows refill, vakuum as numbers
-      // Database stores them as strings like "2", "1 vakuum"
-      const quantityFields = ['refill', 'vakum'];
+      // Admin form shows refill, spulna as numbers
+      // Database stores them as strings like "2", "1 spulna"
+      const quantityFields = ['refill', 'spulna'];
       
       quantityFields.forEach(field => {
-        expect(ADMIN_STRUCTURE.fieldTypes[field]).toBe('string');
-        expect(DB_STRUCTURE.columnTypes[field]).toBe('character varying');
+        expect(ADMIN_STRUCTURE.fieldTypes[field]).toBe('number');
+        expect(DB_STRUCTURE.columnTypes[field]).toBe('integer');
       });
     });
   });
@@ -188,7 +188,7 @@ describe('Data Structure Consistency Tests', () => {
         boja: 'Black',
         boja_hex: '#000000',
         refill: '2',
-        vakum: '1 vakuum',
+        spulna: '1 spulna',
         kolicina: '3',
         cena: '3999'
       };
@@ -210,23 +210,19 @@ describe('Data Structure Consistency Tests', () => {
         tip: 'PLA',
         finish: 'Basic',
         boja: 'Black',
-        bojaHex: '#000000',
+        boja_hex: '#000000',
         refill: '2',
-        vakum: '1 vakuum',
+        spulna: '1 spulna',
         kolicina: '3',
         cena: '3999'
       };
 
-      // API transformation (in services/api.ts)
-      const apiData = {
-        ...adminData,
-        boja_hex: adminData.bojaHex
-      };
-      delete (apiData as any).bojaHex;
+      // No transformation needed - using boja_hex consistently
+      const apiData = adminData;
 
       // Database expected data
       expect(apiData).toHaveProperty('boja_hex');
-      expect(apiData).not.toHaveProperty('bojaHex');
+      // No longer have bojaHex field
       expect(apiData).not.toHaveProperty('brand');
     });
   });