Update documentation and clean up component code

- Centered tab navigation for better visual balance
- Created dedicated Color Request tab with informative layout
- Removed standalone color request button from main actions
- Added statistics and info to color request section
- Shortened 'Oprema i Delovi' to just 'Oprema' for cleaner tabs

.env.development

@@ -0,0 +1,13 @@
+# Development Environment Configuration
+NODE_ENV=development
+
+# API Configuration
+NEXT_PUBLIC_API_URL=https://api.filamenteka.rs/api
+
+# AWS Configuration (for reference - no longer used)
+# AWS_REGION=eu-central-1
+# DYNAMODB_TABLE_NAME=filamenteka-filaments-dev
+
+# Admin credentials (development)
+# Username: admin
+# Password: admin123

.env.production

@@ -1,3 +1,10 @@
-# This file is for Amplify to know which env vars to expose to Next.js
+# Production Environment Configuration
-# The actual values come from Amplify Environment Variables
+NODE_ENV=production
-NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+
+# API Configuration
+NEXT_PUBLIC_API_URL=https://api.filamenteka.rs/api
+
+# Matomo Analytics Configuration
+NEXT_PUBLIC_MATOMO_URL=https://analytics.demirix.dev
+NEXT_PUBLIC_MATOMO_SITE_ID=7
+

.gitignore

@@ -38,8 +38,8 @@ lerna-debug.log*
 
 # Terraform
 terraform/.terraform/
-terraform/*.tfstate
+*.tfstate
-terraform/*.tfstate.*
+*.tfstate.*
 terraform/*.tfvars
 terraform/.terraform.lock.hcl
 terraform/crash.log
@@ -49,3 +49,12 @@ terraform/override.tf
 terraform/override.tf.json
 terraform/*_override.tf
 terraform/*_override.tf.json
+
+# Temporary scripts
+force-*.sh
+quick-fix-*.sh
+temp-*.sh
+
+# Lambda packages
+lambda/*.zip
+lambda/**/node_modules/

CLAUDE.md

@@ -0,0 +1,231 @@
+# CLAUDE.md
+
+This file provides guidance when working with code in this repository.
+
+## Project Overview
+
+Filamenteka is a 3D printing filament inventory management system for tracking Bambu Lab filaments with:
+- **Frontend**: Next.js 15 app with React 19, TypeScript 5.2.2, and Tailwind CSS (static export)
+- **Backend**: Node.js Express API server with PostgreSQL database
+- **Infrastructure**: AWS (Amplify for frontend, EC2 for API, RDS for database), managed via Terraform
+
+## Critical Rules
+
+- NEVER mention ANY author in commits. No author tags or attribution
+- NEVER mention AI/assistant names anywhere  
+- Keep commit messages clean and professional with NO attribution
+- Build for AMD64 Linux when deploying (development is on ARM macOS)
+- Always run security checks before commits
+- NEVER use mock data - all tests must use real APIs/data
+
+## Common Commands
+
+```bash
+# Development
+npm run dev              # Start Next.js development server (port 3000)
+npm run build           # Build static export to /out directory
+npm run lint            # Run ESLint
+npm test                # Run Jest tests (includes no-mock-data validation)
+
+# Security & Quality
+npm run security:check  # Check for credential leaks
+npm run test:build      # Test if build succeeds
+./scripts/pre-commit.sh # Full pre-commit validation (security, build, tests)
+
+# Database Migrations
+npm run migrate         # Run pending migrations
+npm run migrate:clear   # Clear migration history
+
+# API Server Development
+cd api && npm start     # Start API server locally (port 3001)
+cd api && npm run dev   # Start API server with nodemon
+
+# Deployment
+./scripts/deploy-api.sh # Deploy API to EC2 (builds AMD64 Docker image)
+```
+
+## Architecture
+
+### Frontend Structure (Next.js App Router)
+```
+/app
+├── page.tsx                    # Public filament inventory table
+├── layout.tsx                 # Root layout with providers
+└── upadaj/                    # Admin panel (JWT protected)
+    ├── page.tsx               # Admin login
+    ├── dashboard/page.tsx     # Filament CRUD operations
+    ├── colors/page.tsx        # Color management
+    └── requests/page.tsx      # Color request management
+```
+
+### API Structure
+```
+/api
+├── server.js                  # Express server (port 3001)
+├── routes/
+│   ├── filaments.js          # Filament CRUD + bulk operations
+│   ├── colors.js             # Color management
+│   ├── colorRequests.js      # Color request system
+│   └── auth.js               # JWT authentication
+└── middleware/
+    └── auth.js               # JWT verification middleware
+```
+
+### Key Components
+- `FilamentTableV2` - Main inventory display with sorting/filtering/searching
+- `SaleManager` - Bulk sale management with countdown timers  
+- `ColorCell` - Smart color rendering with gradient support
+- `EnhancedFilters` - Multi-criteria filtering system
+- `ColorRequestModal` - Public color request form
+
+### Data Models
+
+#### Filament Schema (PostgreSQL)
+```sql
+filaments: {
+  id: UUID PRIMARY KEY,
+  tip: VARCHAR(50),        # Material type (PLA, PETG, ABS)
+  finish: VARCHAR(50),     # Finish type (Basic, Matte, Silk)
+  boja: VARCHAR(100),      # Color name (links to colors.name)
+  boja_hex: VARCHAR(7),    # Color hex code
+  refill: INTEGER,         # Refill spool count
+  spulna: INTEGER,         # Regular spool count
+  kolicina: INTEGER,       # Total quantity (refill + spulna)
+  cena: VARCHAR(50),       # Price string
+  sale_active: BOOLEAN,    # Sale status
+  sale_percentage: INTEGER,# Sale discount percentage
+  sale_end_date: TIMESTAMP # Sale expiry
+}
+```
+
+#### Color Schema
+```sql
+colors: {
+  id: UUID PRIMARY KEY,
+  name: VARCHAR(100) UNIQUE,  # Color name (must match filament.boja)
+  hex: VARCHAR(7),            # Hex color code
+  cena_refill: INTEGER,       # Refill price (default: 3499)
+  cena_spulna: INTEGER        # Regular price (default: 3999)
+}
+```
+
+#### Color Requests Schema
+```sql
+color_requests: {
+  id: UUID PRIMARY KEY,
+  color_name: VARCHAR(100),
+  email: VARCHAR(255),
+  message: TEXT,
+  status: VARCHAR(50),        # pending/approved/rejected
+  created_at: TIMESTAMP
+}
+```
+
+## Deployment
+
+### Frontend (AWS Amplify)
+- Automatic deployment on push to main branch
+- Build output: Static files in `/out` directory
+- Build command: `npm run build`
+- Config: `amplify.yml`, `next.config.js` (output: 'export')
+
+### API Server (EC2)
+- Manual deployment via `./scripts/deploy-api.sh`
+- Docker containerized (Node.js 18 Alpine)
+- Server: `3.71.161.51` 
+- Domain: `api.filamenteka.rs`
+- **Important**: Build for AMD64 architecture when deploying from ARM Mac
+
+### Database (RDS PostgreSQL)
+- Host: `filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com`
+- Migrations in `/database/migrations/` (numbered sequence)
+- Schema in `/database/schema.sql`
+- Connection via `DATABASE_URL` environment variable
+
+## Important Patterns
+
+### API Communication
+- All API calls use axios with interceptors (`src/services/api.ts`)
+- Auth token stored in localStorage as 'adminToken'
+- Automatic redirect on 401/403 in admin routes
+- Base URL from `NEXT_PUBLIC_API_URL` env variable
+
+### Color Management
+- Primary source: `src/data/bambuLabColors.ts` (hex mappings)
+- Extended data: `src/data/bambuLabColorsComplete.ts`
+- Refill-only colors: `src/data/refillOnlyColors.ts`
+- Automatic row coloring based on filament.boja_hex
+- Special gradient handling for multi-color filaments
+
+### State Management
+- React hooks for local state (no global state library)
+- Data fetching with useEffect in components
+- Form state managed with controlled components
+- Admin auth state in localStorage
+
+### Testing Strategy
+- Jest + React Testing Library for component tests
+- Special `no-mock-data.test.ts` enforces real API usage
+- Integration tests connect to real database
+- Coverage reports in `/coverage/`
+- Test files in `__tests__/` directories
+
+## Environment Variables
+
+```bash
+# Frontend (.env.local)
+NEXT_PUBLIC_API_URL=https://api.filamenteka.rs/api
+
+# API Server (.env)
+DATABASE_URL=postgresql://username:password@host/database
+JWT_SECRET=your-secret-key
+NODE_ENV=production
+PORT=3001
+```
+
+## Security Considerations
+
+- JWT authentication for admin routes (24h expiry)
+- Password hashing with bcryptjs (10 rounds)
+- SQL injection prevention via parameterized queries
+- Credential leak detection in pre-commit hooks
+- CORS configured for production domains only
+- Author mention detection prevents attribution in commits
+
+## Database Operations
+
+When modifying the database:
+1. Create numbered migration file in `/database/migrations/`
+2. Test locally with `npm run migrate`
+3. Deploy to production via SSH or migration script
+4. Update TypeScript interfaces in `src/types/`
+5. Update relevant data files in `src/data/`
+
+## Terraform Infrastructure
+
+Infrastructure as Code in `/terraform/`:
+- VPC with public/private subnets
+- EC2 instance with Application Load Balancer
+- RDS PostgreSQL instance
+- ECR for Docker image registry
+- Cloudflare DNS integration
+- Environment separation (dev/prod)
+
+## Special Considerations
+
+### ARM to AMD64 Builds
+When deploying from ARM Mac to AMD64 Linux:
+- Docker builds must specify `--platform linux/amd64`
+- Deployment scripts handle architecture conversion
+- Test builds locally with `docker buildx`
+
+### Color Data Synchronization
+- Colors must exist in both database and frontend data files
+- Use migration scripts to sync color data
+- Validate consistency with data consistency tests
+
+### Sale Management
+- Bulk sale operations affect multiple filaments
+- Sale countdown timers update in real-time
+- Prices automatically calculated with discounts
+- Sale end dates trigger automatic deactivation

README.md

@@ -1,30 +1,33 @@
 # Filamenteka
 
-A web application for tracking Bambu Lab filament inventory with automatic color coding, synced from Confluence documentation.
+A web application for tracking Bambu Lab filament inventory with automatic color coding.
 
 ## Features
 
 - 🎨 **Automatic Color Coding** - Table rows are automatically colored based on filament colors
-- 🔄 **Confluence Sync** - Pulls filament data from Confluence table every 5 minutes
 - 🔍 **Search & Filter** - Quick search across all filament properties
 - 📊 **Sortable Columns** - Click headers to sort by any column
 - 🌈 **Gradient Support** - Special handling for gradient filaments like Cotton Candy Cloud
 - 📱 **Responsive Design** - Works on desktop and mobile devices
+- 💰 **Sale Management** - Bulk sale pricing with countdown timers
+- 🔐 **Admin Panel** - Protected dashboard for inventory management
+- 📦 **Spool Types** - Support for both regular and refill spools
 
 ## Technology Stack
 
-- **Frontend**: React + TypeScript + Tailwind CSS
+- **Frontend**: Next.js + React + TypeScript + Tailwind CSS
-- **Backend**: API routes for Confluence integration
+- **Backend**: Node.js API server (Express)
-- **Infrastructure**: AWS Amplify (Frankfurt region)
+- **Database**: PostgreSQL (AWS RDS)
+- **Infrastructure**: AWS Amplify (Frontend), EC2 (API), RDS (Database)
 - **IaC**: Terraform
 
 ## Prerequisites
 
 - Node.js 18+ and npm
-- AWS Account
+- PostgreSQL (for local development)
-- Terraform 1.0+
+- AWS Account (for deployment)
+- Terraform 1.0+ (for infrastructure)
 - GitHub account
-- Confluence account with API access
 
 ## Setup Instructions
 
@@ -41,12 +44,13 @@ cd filamenteka
 npm install
 ```
 
-### 3. Configure Confluence Access
+### 3. Environment Setup
 
-Create a Confluence API token:
+Create a `.env.local` file for local development:
-1. Go to https://id.atlassian.com/manage-profile/security/api-tokens
+
-2. Create a new API token
+```bash
-3. Note your Confluence domain and the page ID containing your filament table
+NEXT_PUBLIC_API_URL=http://localhost:4000/api
+```
 
 ### 4. Deploy with Terraform
 
@@ -60,41 +64,35 @@ terraform plan
 terraform apply
 ```
 
-### 5. Environment Variables
-
-The following environment variables are needed:
-- `CONFLUENCE_API_URL` - Your Confluence instance URL (e.g., https://your-domain.atlassian.net)
-- `CONFLUENCE_TOKEN` - Your Confluence API token
-- `CONFLUENCE_PAGE_ID` - The ID of the Confluence page containing the filament table
-
 ## Local Development
 
 ```bash
-# Create .env file for local development
-cat > .env << EOF
-CONFLUENCE_API_URL=https://your-domain.atlassian.net
-CONFLUENCE_TOKEN=your_api_token
-CONFLUENCE_PAGE_ID=your_page_id
-EOF
-
 # Run development server
 npm run dev
+
+# Run tests
+npm test
+
+# Run linting
+npm run lint
+
+# Check for security issues
+npm run security:check
 ```
 
-Visit http://localhost:5173 to see the app.
+Visit http://localhost:3000 to see the app.
 
 ## Table Format
 
-Your Confluence table should have these columns:
+The filament table displays these columns:
-- **Brand** - Manufacturer (e.g., BambuLab)
 - **Tip** - Material type (e.g., PLA, PETG, ABS)
 - **Finish** - Finish type (e.g., Basic, Matte, Silk)
 - **Boja** - Color name (e.g., Mistletoe Green, Hot Pink)
-- **Refill** - Whether it's a refill spool
+- **Refill** - Number of refill spools
-- **Vakum** - Vacuum sealed status
+- **Spulna** - Number of regular spools
-- **Otvoreno** - Opened status
+- **Količina** - Total quantity (refill + spulna)
-- **Količina** - Quantity
+- **Cena** - Price per unit
-- **Cena** - Price
+- **Sale** - Active sale percentage and end date
 
 ## Color Mapping
 
@@ -118,9 +116,19 @@ git push origin main
 
 Amplify will automatically build and deploy your changes.
 
+## Admin Panel
+
+Access the admin panel at `/upadaj` for:
+- Managing filament inventory
+- Adding/editing/deleting filaments
+- Managing color definitions and pricing
+- Bulk sale management
+
 ## Adding New Colors
 
-To add new color mappings, edit `src/data/bambuLabColors.ts`:
+Colors can be managed through:
+1. **Admin Panel**: Navigate to `/upadaj/colors` to add colors via UI
+2. **Code**: Edit `src/data/bambuLabColors.ts` for frontend color display:
 
 ```typescript
 export const bambuLabColors: Record<string, ColorMapping> = {
@@ -129,18 +137,47 @@ export const bambuLabColors: Record<string, ColorMapping> = {
 };
 ```
 
+## Database Migrations
+
+Run database migrations:
+
+```bash
+# Run all pending migrations
+npm run migrate
+
+# Clear migration history (development only)
+npm run migrate:clear
+```
+
+## API Deployment
+
+Deploy API server updates:
+
+```bash
+# Use the deployment script
+./scripts/deploy-api.sh
+
+# Or deploy manually to EC2 instance
+```
+
 ## Troubleshooting
 
-### Confluence Connection Issues
-- Verify your API token is valid
-- Check the page ID is correct
-- Ensure your Confluence user has read access to the page
-
 ### Color Not Showing
-- Check if the color name in Confluence matches exactly
+- Check if the color name matches exactly in the database
+- Ensure color exists in `colors` table
 - Add the color mapping to `bambuLabColors.ts`
 - Colors are case-insensitive but spelling must match
 
+### Build Errors
+- Run `npm run test:build` to verify build succeeds
+- Check TypeScript errors with `npx tsc --noEmit`
+- Ensure all environment variables are set
+
+### Database Connection Issues
+- Verify PostgreSQL is running
+- Check connection string in environment variables
+- Ensure database migrations have been run
+
 ## License
 
 MIT

__tests__/api-integration.test.ts

@@ -0,0 +1,156 @@
+import axios from 'axios';
+
+const API_URL = 'https://api.filamenteka.rs/api';
+const TEST_TIMEOUT = 30000; // 30 seconds
+
+describe.skip('API Integration Tests - Skipped (requires production API)', () => {
+  let authToken: string;
+  let createdFilamentId: string;
+
+  beforeAll(async () => {
+    // Login to get auth token
+    const loginResponse = await axios.post(`${API_URL}/login`, {
+      username: 'admin',
+      password: 'admin123'
+    });
+    authToken = loginResponse.data.token;
+  }, TEST_TIMEOUT);
+
+  afterAll(async () => {
+    // Clean up any test filaments that might have been left behind
+    if (createdFilamentId) {
+      try {
+        await axios.delete(
+          `${API_URL}/filaments/${createdFilamentId}`,
+          {
+            headers: {
+              'Authorization': `Bearer ${authToken}`
+            }
+          }
+        );
+      } catch (error) {
+        // Ignore errors - filament might already be deleted
+      }
+    }
+  }, TEST_TIMEOUT);
+
+  describe('Filament CRUD Operations', () => {
+    it('should create a new filament', async () => {
+      const newFilament = {
+        tip: 'PLA',
+        finish: 'Basic',
+        boja: 'Black',
+        boja_hex: '#000000',
+        refill: 2,
+        spulna: 1,
+        cena: '3999'
+      };
+
+      const response = await axios.post(
+        `${API_URL}/filaments`,
+        newFilament,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+      expect(response.data).toHaveProperty('id');
+      expect(response.data.tip).toBe('PLA');
+      expect(response.data.boja).toBe('Black');
+      
+      // Store ID for cleanup
+      createdFilamentId = response.data.id;
+    }, TEST_TIMEOUT);
+
+    it('should retrieve all filaments including the created one', async () => {
+      const response = await axios.get(`${API_URL}/filaments`);
+
+      expect(response.status).toBe(200);
+      expect(Array.isArray(response.data)).toBe(true);
+      
+      // Find our created filament
+      const ourFilament = response.data.find((f: any) => f.id === createdFilamentId);
+      expect(ourFilament).toBeDefined();
+      expect(ourFilament.boja).toBe('Black');
+    }, TEST_TIMEOUT);
+
+    it('should update the created filament', async () => {
+      const updateData = {
+        tip: 'PETG',
+        finish: 'Silk',
+        boja: 'Blue',
+        boja_hex: '#1E88E5',
+        refill: 3,
+        spulna: 2,
+        cena: '4500'
+      };
+
+      const response = await axios.put(
+        `${API_URL}/filaments/${createdFilamentId}`,
+        updateData,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+      expect(response.data.tip).toBe('PETG');
+      expect(response.data.boja).toBe('Blue');
+      expect(response.data.cena).toBe('4500');
+    }, TEST_TIMEOUT);
+
+    it('should delete the created filament', async () => {
+      const response = await axios.delete(
+        `${API_URL}/filaments/${createdFilamentId}`,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+
+      // Verify it's deleted
+      const getResponse = await axios.get(`${API_URL}/filaments`);
+      const deletedFilament = getResponse.data.find((f: any) => f.id === createdFilamentId);
+      expect(deletedFilament).toBeUndefined();
+    }, TEST_TIMEOUT);
+  });
+
+  describe('Error Handling', () => {
+    it('should return 401 for unauthorized requests', async () => {
+      await expect(
+        axios.post(`${API_URL}/filaments`, {}, {
+          headers: { 'Content-Type': 'application/json' }
+        })
+      ).rejects.toMatchObject({
+        response: { status: 401 }
+      });
+    });
+
+    it('should handle invalid data gracefully', async () => {
+      await expect(
+        axios.post(
+          `${API_URL}/filaments`,
+          { invalid: 'data' },
+          {
+            headers: {
+              'Authorization': `Bearer ${authToken}`,
+              'Content-Type': 'application/json'
+            }
+          }
+        )
+      ).rejects.toMatchObject({
+        response: { status: 500 }
+      });
+    });
+  });
+});

__tests__/api.test.ts

@@ -0,0 +1,230 @@
+import axios from 'axios';
+import api, { authService, colorService, filamentService } from '../src/services/api';
+
+// Get the mock axios instance that was created
+const mockAxiosInstance = (axios.create as jest.Mock).mock.results[0].value;
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+};
+(global as any).localStorage = localStorageMock;
+
+// Mock window.location
+const mockLocation = {
+  pathname: '/',
+  href: '',
+};
+
+// Only define location if it doesn't exist or is configurable
+if (!Object.getOwnPropertyDescriptor(window, 'location') || 
+    Object.getOwnPropertyDescriptor(window, 'location')?.configurable) {
+  Object.defineProperty(window, 'location', {
+    value: mockLocation,
+    configurable: true,
+    writable: true
+  });
+} else {
+  // If location exists and is not configurable, we'll work with the existing object
+  Object.assign(window.location, mockLocation);
+}
+
+describe('API Service Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    
+    // Clear localStorage mocks
+    localStorageMock.getItem.mockClear();
+    localStorageMock.removeItem.mockClear();
+    localStorageMock.setItem.mockClear();
+    
+    // Reset window location
+    mockLocation.pathname = '/';
+    mockLocation.href = '';
+  });
+
+  describe('Auth Service', () => {
+    it('should login successfully', async () => {
+      const mockResponse = { data: { token: 'test-token', user: 'admin' } };
+      mockAxiosInstance.post.mockResolvedValue(mockResponse);
+
+      const result = await authService.login('admin', 'password123');
+
+      expect(mockAxiosInstance.post).toHaveBeenCalledWith('/login', {
+        username: 'admin',
+        password: 'password123'
+      });
+      expect(result).toEqual(mockResponse.data);
+    });
+
+    it('should handle login failure', async () => {
+      const error = new Error('Invalid credentials');
+      mockAxiosInstance.post.mockRejectedValue(error);
+
+      await expect(authService.login('admin', 'wrong')).rejects.toThrow('Invalid credentials');
+    });
+  });
+
+  describe('Color Service', () => {
+    it('should get all colors', async () => {
+      const mockColors = [
+        { id: '1', name: 'Red', hex: '#FF0000' },
+        { id: '2', name: 'Blue', hex: '#0000FF' }
+      ];
+      mockAxiosInstance.get.mockResolvedValue({ data: mockColors });
+
+      const result = await colorService.getAll();
+
+      expect(mockAxiosInstance.get).toHaveBeenCalledWith('/colors');
+      expect(result).toEqual(mockColors);
+    });
+
+    it('should create a color', async () => {
+      const newColor = { name: 'Green', hex: '#00FF00', cena_refill: 100, cena_spulna: 150 };
+      const mockResponse = { id: '3', ...newColor };
+      mockAxiosInstance.post.mockResolvedValue({ data: mockResponse });
+
+      const result = await colorService.create(newColor);
+
+      expect(mockAxiosInstance.post).toHaveBeenCalledWith('/colors', newColor);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should update a color', async () => {
+      const colorId = '1';
+      const updateData = { name: 'Dark Red', hex: '#8B0000' };
+      const mockResponse = { id: colorId, ...updateData };
+      mockAxiosInstance.put.mockResolvedValue({ data: mockResponse });
+
+      const result = await colorService.update(colorId, updateData);
+
+      expect(mockAxiosInstance.put).toHaveBeenCalledWith(`/colors/${colorId}`, updateData);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should delete a color', async () => {
+      const colorId = '1';
+      const mockResponse = { success: true };
+      mockAxiosInstance.delete.mockResolvedValue({ data: mockResponse });
+
+      const result = await colorService.delete(colorId);
+
+      expect(mockAxiosInstance.delete).toHaveBeenCalledWith(`/colors/${colorId}`);
+      expect(result).toEqual(mockResponse);
+    });
+  });
+
+  describe('Filament Service', () => {
+    it('should get all filaments with cache buster', async () => {
+      const mockFilaments = [
+        { id: '1', tip: 'PLA', boja: 'Red' },
+        { id: '2', tip: 'PETG', boja: 'Blue' }
+      ];
+      mockAxiosInstance.get.mockResolvedValue({ data: mockFilaments });
+
+      // Mock Date.now()
+      const originalDateNow = Date.now;
+      const mockTimestamp = 1234567890;
+      Date.now = jest.fn(() => mockTimestamp);
+
+      const result = await filamentService.getAll();
+
+      expect(mockAxiosInstance.get).toHaveBeenCalledWith(`/filaments?_t=${mockTimestamp}`);
+      expect(result).toEqual(mockFilaments);
+
+      // Restore Date.now
+      Date.now = originalDateNow;
+    });
+
+    it('should create a filament', async () => {
+      const newFilament = {
+        tip: 'ABS',
+        finish: 'Matte',
+        boja: 'Black',
+        boja_hex: '#000000'
+      };
+      const mockResponse = { id: '3', ...newFilament };
+      mockAxiosInstance.post.mockResolvedValue({ data: mockResponse });
+
+      const result = await filamentService.create(newFilament);
+
+      expect(mockAxiosInstance.post).toHaveBeenCalledWith('/filaments', newFilament);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should update a filament', async () => {
+      const filamentId = '1';
+      const updateData = {
+        tip: 'PLA+',
+        finish: 'Silk',
+        cena: '4500'
+      };
+      const mockResponse = { id: filamentId, ...updateData };
+      mockAxiosInstance.put.mockResolvedValue({ data: mockResponse });
+
+      const result = await filamentService.update(filamentId, updateData);
+
+      expect(mockAxiosInstance.put).toHaveBeenCalledWith(`/filaments/${filamentId}`, updateData);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should delete a filament', async () => {
+      const filamentId = '1';
+      const mockResponse = { success: true };
+      mockAxiosInstance.delete.mockResolvedValue({ data: mockResponse });
+
+      const result = await filamentService.delete(filamentId);
+
+      expect(mockAxiosInstance.delete).toHaveBeenCalledWith(`/filaments/${filamentId}`);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should update bulk sale', async () => {
+      const saleData = {
+        filamentIds: ['1', '2', '3'],
+        salePercentage: 20,
+        saleStartDate: '2024-01-01',
+        saleEndDate: '2024-01-31',
+        enableSale: true
+      };
+      const mockResponse = { updated: 3, success: true };
+      mockAxiosInstance.post.mockResolvedValue({ data: mockResponse });
+
+      const result = await filamentService.updateBulkSale(saleData);
+
+      expect(mockAxiosInstance.post).toHaveBeenCalledWith('/filaments/sale/bulk', saleData);
+      expect(result).toEqual(mockResponse);
+    });
+  });
+
+  describe('Interceptors', () => {
+    it('should have interceptors configured', () => {
+      expect(mockAxiosInstance.interceptors).toBeDefined();
+      expect(mockAxiosInstance.interceptors.request).toBeDefined();
+      expect(mockAxiosInstance.interceptors.response).toBeDefined();
+    });
+
+    it('should have request interceptor set up', () => {
+      const mockRequestUse = mockAxiosInstance.interceptors.request.use;
+      expect(mockRequestUse).toBeDefined();
+    });
+
+    it('should have response interceptor set up', () => {
+      const mockResponseUse = mockAxiosInstance.interceptors.response.use;
+      expect(mockResponseUse).toBeDefined();
+    });
+  });
+
+  describe('API configuration', () => {
+    it('should export the configured axios instance', () => {
+      expect(api).toBe(mockAxiosInstance);
+    });
+
+    it('should have axios instance defined', () => {
+      expect(mockAxiosInstance).toBeDefined();
+    });
+  });
+});

__tests__/color-management.test.ts

@@ -0,0 +1,154 @@
+import axios from 'axios';
+
+const API_URL = 'https://api.filamenteka.rs/api';
+const TEST_TIMEOUT = 30000;
+
+describe.skip('Color Management Tests - Skipped: API endpoints not deployed', () => {
+  let authToken: string;
+  let createdColorId: string;
+
+  beforeAll(async () => {
+    // Login to get auth token
+    const loginResponse = await axios.post(`${API_URL}/login`, {
+      username: 'admin',
+      password: 'admin123'
+    });
+    authToken = loginResponse.data.token;
+  }, TEST_TIMEOUT);
+
+  afterAll(async () => {
+    // Clean up any test colors that might have been left behind
+    if (createdColorId) {
+      try {
+        await axios.delete(
+          `${API_URL}/colors/${createdColorId}`,
+          {
+            headers: {
+              'Authorization': `Bearer ${authToken}`
+            }
+          }
+        );
+      } catch (error) {
+        // Ignore errors - color might already be deleted
+      }
+    }
+  }, TEST_TIMEOUT);
+
+  describe('Color CRUD Operations', () => {
+    it('should create a new color with "Test" prefix', async () => {
+      const testColor = {
+        name: 'Test Color ' + Date.now(), // Unique name to avoid conflicts
+        hex: '#FF00FF'
+      };
+
+      const response = await axios.post(
+        `${API_URL}/colors`,
+        testColor,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+      expect(response.data).toHaveProperty('id');
+      expect(response.data.name).toBe(testColor.name);
+      expect(response.data.hex).toBe(testColor.hex);
+      
+      // Store ID for cleanup
+      createdColorId = response.data.id;
+    }, TEST_TIMEOUT);
+
+    it('should retrieve the created test color', async () => {
+      const response = await axios.get(`${API_URL}/colors`);
+
+      expect(response.status).toBe(200);
+      expect(Array.isArray(response.data)).toBe(true);
+      
+      // Find our created color
+      const ourColor = response.data.find((c: any) => c.id === createdColorId);
+      expect(ourColor).toBeDefined();
+      expect(ourColor.name).toContain('Test Color');
+    }, TEST_TIMEOUT);
+
+    it('should update the test color', async () => {
+      const updateData = {
+        name: 'Test Color Updated ' + Date.now(),
+        hex: '#00FF00'
+      };
+
+      const response = await axios.put(
+        `${API_URL}/colors/${createdColorId}`,
+        updateData,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+      expect(response.data.name).toBe(updateData.name);
+      expect(response.data.hex).toBe(updateData.hex);
+    }, TEST_TIMEOUT);
+
+    it('should delete the test color', async () => {
+      const response = await axios.delete(
+        `${API_URL}/colors/${createdColorId}`,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+
+      // Verify it's deleted
+      const getResponse = await axios.get(`${API_URL}/colors`);
+      const deletedColor = getResponse.data.find((c: any) => c.id === createdColorId);
+      expect(deletedColor).toBeUndefined();
+
+      // Clear the ID since it's deleted
+      createdColorId = '';
+    }, TEST_TIMEOUT);
+  });
+
+  describe('Cleanup Test Colors', () => {
+    it('should clean up any colors starting with "Test"', async () => {
+      // Get all colors
+      const response = await axios.get(`${API_URL}/colors`);
+      const testColors = response.data.filter((c: any) => 
+        c.name.startsWith('Test') || c.name.toLowerCase().includes('test')
+      );
+
+      // Delete each test color
+      for (const color of testColors) {
+        try {
+          await axios.delete(
+            `${API_URL}/colors/${color.id}`,
+            {
+              headers: {
+                'Authorization': `Bearer ${authToken}`
+              }
+            }
+          );
+          console.log(`Cleaned up test color: ${color.name}`);
+        } catch (error) {
+          console.error(`Failed to clean up color ${color.name}:`, error.message);
+        }
+      }
+
+      // Verify cleanup
+      const verifyResponse = await axios.get(`${API_URL}/colors`);
+      const remainingTestColors = verifyResponse.data.filter((c: any) => 
+        c.name.startsWith('Test') || c.name.toLowerCase().includes('test')
+      );
+      
+      expect(remainingTestColors.length).toBe(0);
+    }, TEST_TIMEOUT);
+  });
+});

__tests__/components/BackToTop.test.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import { BackToTop } from '@/src/components/BackToTop';
+
+// Mock window properties
+global.scrollTo = jest.fn();
+Object.defineProperty(window, 'pageYOffset', {
+  writable: true,
+  configurable: true,
+  value: 0,
+});
+
+describe('BackToTop', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.pageYOffset = 0;
+  });
+
+  it('does not render button when at top of page', () => {
+    const { container } = render(<BackToTop />);
+    const button = container.querySelector('button');
+    expect(button).not.toBeInTheDocument();
+  });
+
+  it('renders button when scrolled down', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Simulate scroll down
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('hides button when scrolled back up', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Scroll down first
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    expect(container.querySelector('button')).toBeInTheDocument();
+    
+    // Scroll back up
+    act(() => {
+      window.pageYOffset = 100;
+      fireEvent.scroll(window);
+    });
+    
+    expect(container.querySelector('button')).not.toBeInTheDocument();
+  });
+
+  it('scrolls to top when clicked', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    fireEvent.click(button!);
+    
+    expect(global.scrollTo).toHaveBeenCalledWith({
+      top: 0,
+      behavior: 'smooth'
+    });
+  });
+
+  it('has correct styling when visible', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    
+    expect(button).toHaveClass('fixed');
+    expect(button).toHaveClass('bottom-8');
+    expect(button).toHaveClass('right-8');
+    expect(button).toHaveClass('bg-blue-600');
+    expect(button).toHaveClass('text-white');
+    expect(button).toHaveClass('rounded-full');
+    expect(button).toHaveClass('shadow-lg');
+  });
+
+  it('has hover effect', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('hover:bg-blue-700');
+    expect(button).toHaveClass('hover:scale-110');
+  });
+
+  it('contains arrow icon', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const svg = container.querySelector('svg');
+    
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveClass('w-6');
+    expect(svg).toHaveClass('h-6');
+  });
+
+  it('has aria-label for accessibility', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    expect(button).toHaveAttribute('aria-label', 'Back to top');
+  });
+
+  it('cleans up scroll listener on unmount', () => {
+    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+    const { unmount } = render(<BackToTop />);
+    
+    unmount();
+    
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+    removeEventListenerSpy.mockRestore();
+  });
+});

__tests__/components/ColorCell.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ColorCell } from '@/src/components/ColorCell';
+
+// Mock the bambuLabColors module
+jest.mock('@/src/data/bambuLabColors', () => ({
+  getFilamentColor: jest.fn((colorName) => {
+    const colors = {
+      'Black': { hex: '#000000' },
+      'Red': { hex: '#FF0000' },
+      'Blue': { hex: '#0000FF' },
+      'Rainbow': { hex: ['#FF0000', '#00FF00'], isGradient: true }
+    };
+    return colors[colorName] || { hex: '#CCCCCC' };
+  }),
+  getColorStyle: jest.fn((colorMapping) => {
+    if (colorMapping.isGradient && Array.isArray(colorMapping.hex)) {
+      return {
+        background: `linear-gradient(90deg, ${colorMapping.hex[0]} 0%, ${colorMapping.hex[1]} 100%)`
+      };
+    }
+    return {
+      backgroundColor: Array.isArray(colorMapping.hex) ? colorMapping.hex[0] : colorMapping.hex
+    };
+  })
+}));
+
+describe('ColorCell', () => {
+  it('renders color name', () => {
+    const { getByText } = render(<ColorCell colorName="Black" />);
+    expect(getByText('Black')).toBeInTheDocument();
+  });
+
+  it('renders color swatch with correct style', () => {
+    const { container } = render(<ColorCell colorName="Red" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveStyle({ backgroundColor: '#FF0000' });
+  });
+
+  it('renders with correct dimensions', () => {
+    const { container } = render(<ColorCell colorName="Blue" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveClass('w-6');
+    expect(colorDiv).toHaveClass('h-6');
+  });
+
+  it('has rounded corners and border', () => {
+    const { container } = render(<ColorCell colorName="Black" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveClass('rounded');
+    expect(colorDiv).toHaveClass('border');
+    expect(colorDiv).toHaveClass('border-gray-300');
+  });
+
+  it('renders gradient colors', () => {
+    const { container } = render(<ColorCell colorName="Rainbow" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveStyle({ 
+      background: 'linear-gradient(90deg, #FF0000 0%, #00FF00 100%)' 
+    });
+  });
+
+  it('has title attribute with hex value', () => {
+    const { container } = render(<ColorCell colorName="Black" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveAttribute('title', '#000000');
+  });
+
+  it('has title attribute with gradient hex values', () => {
+    const { container } = render(<ColorCell colorName="Rainbow" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveAttribute('title', '#FF0000 - #00FF00');
+  });
+
+  it('renders with flex layout', () => {
+    const { container } = render(<ColorCell colorName="Black" />);
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass('flex');
+    expect(wrapper).toHaveClass('items-center');
+    expect(wrapper).toHaveClass('gap-2');
+  });
+});

__tests__/components/MaterialBadge.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MaterialBadge } from '@/src/components/MaterialBadge';
+
+describe('MaterialBadge', () => {
+  describe('Material type badges', () => {
+    it('renders PLA badge with correct style', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" />);
+      const badge = getByText('PLA');
+      expect(badge).toHaveClass('bg-green-100');
+      expect(badge).toHaveClass('text-green-800');
+    });
+
+    it('renders PETG badge with correct style', () => {
+      const { getByText } = render(<MaterialBadge base="PETG" />);
+      const badge = getByText('PETG');
+      expect(badge).toHaveClass('bg-blue-100');
+      expect(badge).toHaveClass('text-blue-800');
+    });
+
+    it('renders ABS badge with correct style', () => {
+      const { getByText } = render(<MaterialBadge base="ABS" />);
+      const badge = getByText('ABS');
+      expect(badge).toHaveClass('bg-red-100');
+      expect(badge).toHaveClass('text-red-800');
+    });
+
+    it('renders TPU badge with correct style', () => {
+      const { getByText } = render(<MaterialBadge base="TPU" />);
+      const badge = getByText('TPU');
+      expect(badge).toHaveClass('bg-purple-100');
+      expect(badge).toHaveClass('text-purple-800');
+    });
+  });
+
+  describe('Unknown material type', () => {
+    it('renders unknown material with default style', () => {
+      const { getByText } = render(<MaterialBadge base="UNKNOWN" />);
+      const badge = getByText('UNKNOWN');
+      expect(badge).toHaveClass('bg-gray-100');
+      expect(badge).toHaveClass('text-gray-800');
+    });
+  });
+
+  describe('With modifier', () => {
+    it('renders base and modifier', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" modifier="Silk" />);
+      expect(getByText('PLA')).toBeInTheDocument();
+      expect(getByText('Silk')).toBeInTheDocument();
+    });
+
+    it('renders modifier with correct style', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" modifier="Matte" />);
+      const modifier = getByText('Matte');
+      expect(modifier).toHaveClass('bg-gray-100');
+      expect(modifier).toHaveClass('text-gray-800');
+    });
+  });
+
+  describe('Common styles', () => {
+    it('has correct padding and shape', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" />);
+      const badge = getByText('PLA');
+      expect(badge).toHaveClass('px-2.5');
+      expect(badge).toHaveClass('py-0.5');
+      expect(badge).toHaveClass('rounded-full');
+    });
+
+    it('has correct text size', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" />);
+      const badge = getByText('PLA');
+      expect(badge).toHaveClass('text-xs');
+    });
+
+    it('has correct font weight', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" />);
+      const badge = getByText('PLA');
+      expect(badge).toHaveClass('font-medium');
+    });
+
+    it('accepts custom className', () => {
+      const { container } = render(<MaterialBadge base="PLA" className="custom-class" />);
+      const wrapper = container.firstChild;
+      expect(wrapper).toHaveClass('custom-class');
+    });
+  });
+});

__tests__/data-consistency.test.ts

@@ -0,0 +1,229 @@
+import { Filament } from '../src/types/filament';
+import { Pool } from 'pg';
+
+describe('Data Structure Consistency Tests', () => {
+  const connectionString = "postgresql://filamenteka_admin:onrBjiAjHKQXBAJSVWU2t2kQ7HDil9re@filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com:5432/filamenteka";
+  
+  // Admin panel expected structure (source of truth)
+  const ADMIN_STRUCTURE = {
+    fields: [
+      'id',
+      'tip',
+      'finish', 
+      'boja',
+      'boja_hex', // Now using snake_case consistently
+      'refill',
+      'spulna',  // Frontend still uses spulna
+      'kolicina',
+      'cena',
+      'created_at',
+      'updated_at'
+    ],
+    requiredFields: ['tip', 'finish', 'boja'],
+    excludedFields: ['brand'], // Should NOT exist
+    fieldTypes: {
+      tip: 'string',
+      finish: 'string',
+      boja: 'string',
+      boja_hex: 'string',
+      refill: 'number',
+      spulna: 'number',
+      kolicina: 'number',
+      cena: 'string'
+    }
+  };
+
+  // Database expected structure
+  const DB_STRUCTURE = {
+    columns: [
+      'id',
+      'tip',
+      'finish',
+      'boja',
+      'boja_hex', // Database uses snake_case
+      'refill',
+      'spulna',
+      'kolicina',
+      'cena',
+      'created_at',
+      'updated_at'
+    ],
+    excludedColumns: ['brand'],
+    columnTypes: {
+      id: 'uuid',
+      tip: 'character varying',
+      finish: 'character varying',
+      boja: 'character varying',
+      boja_hex: 'character varying',
+      refill: 'integer',
+      spulna: 'integer',
+      kolicina: 'integer',
+      cena: 'character varying',
+      created_at: 'timestamp with time zone',
+      updated_at: 'timestamp with time zone'
+    }
+  };
+
+  describe('Admin Panel Structure', () => {
+    it('should have correct TypeScript interface', () => {
+      // Check Filament interface matches admin structure
+      const filamentKeys: (keyof Filament)[] = [
+        'id', 'tip', 'finish', 'boja', 'boja_hex',
+        'refill', 'spulna', 'kolicina', 'cena',
+        'status', 'createdAt', 'updatedAt'
+      ];
+      
+      // Should not have brand
+      expect(filamentKeys).not.toContain('brand');
+      
+      // Should have all required fields
+      ADMIN_STRUCTURE.requiredFields.forEach(field => {
+        expect(filamentKeys).toContain(field);
+      });
+    });
+
+    it('should have consistent form fields in admin dashboard', () => {
+      const formFields = [
+        'tip', 'finish', 'boja', 'boja_hex', 
+        'refill', 'spulna', 'kolicina', 'cena'
+      ];
+      
+      // Check all form fields are in admin structure
+      formFields.forEach(field => {
+        expect(ADMIN_STRUCTURE.fields).toContain(field);
+      });
+      
+      // Should not have brand in form
+      expect(formFields).not.toContain('brand');
+    });
+  });
+
+  describe('Database Schema Consistency', () => {
+    let pool: Pool;
+
+    beforeAll(() => {
+      pool = new Pool({
+        connectionString,
+        ssl: { rejectUnauthorized: false }
+      });
+    });
+
+    afterAll(async () => {
+      await pool.end();
+    });
+
+    it('should have correct columns in database', async () => {
+      const result = await pool.query(`
+        SELECT column_name, data_type 
+        FROM information_schema.columns 
+        WHERE table_name = 'filaments' 
+        ORDER BY ordinal_position
+      `);
+      
+      const columns = result.rows.map(row => row.column_name);
+      const columnTypes = result.rows.reduce((acc, row) => {
+        acc[row.column_name] = row.data_type;
+        return acc;
+      }, {} as Record<string, string>);
+
+      // Check all expected columns exist
+      DB_STRUCTURE.columns.forEach(col => {
+        expect(columns).toContain(col);
+      });
+
+      // Check no excluded columns exist
+      DB_STRUCTURE.excludedColumns.forEach(col => {
+        expect(columns).not.toContain(col);
+      });
+
+      // Check column types match
+      Object.entries(DB_STRUCTURE.columnTypes).forEach(([col, type]) => {
+        expect(columnTypes[col]).toBe(type);
+      });
+    });
+
+    it('should not have brand column', async () => {
+      const result = await pool.query(`
+        SELECT COUNT(*) as count
+        FROM information_schema.columns 
+        WHERE table_name = 'filaments' AND column_name = 'brand'
+      `);
+      
+      expect(parseInt(result.rows[0].count)).toBe(0);
+    });
+  });
+
+  describe('Frontend Consistency', () => {
+    it('should transform fields correctly between admin and database', () => {
+      // All fields now use snake_case consistently
+      const snakeCaseFields = {
+        'boja_hex': 'boja_hex',
+        'created_at': 'created_at',
+        'updated_at': 'updated_at'
+      };
+
+      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, 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('number');
+        expect(DB_STRUCTURE.columnTypes[field]).toBe('integer');
+      });
+    });
+  });
+
+  describe('API Consistency', () => {
+    it('should handle requests without brand field', () => {
+      const validRequest = {
+        tip: 'PLA',
+        finish: 'Basic',
+        boja: 'Black',
+        boja_hex: '#000000',
+        refill: '2',
+        spulna: '1 spulna',
+        kolicina: '3',
+        cena: '3999'
+      };
+
+      // Should not have brand
+      expect(validRequest).not.toHaveProperty('brand');
+      
+      // Should have all required fields
+      expect(validRequest).toHaveProperty('tip');
+      expect(validRequest).toHaveProperty('finish');
+      expect(validRequest).toHaveProperty('boja');
+    });
+  });
+
+  describe('Data Flow Consistency', () => {
+    it('should maintain consistent data flow: Admin → API → Database', () => {
+      // Admin form data
+      const adminData = {
+        tip: 'PLA',
+        finish: 'Basic',
+        boja: 'Black',
+        boja_hex: '#000000',
+        refill: '2',
+        spulna: '1 spulna',
+        kolicina: '3',
+        cena: '3999'
+      };
+
+      // No transformation needed - using boja_hex consistently
+      const apiData = adminData;
+
+      // Database expected data
+      expect(apiData).toHaveProperty('boja_hex');
+      // No longer have bojaHex field
+      expect(apiData).not.toHaveProperty('brand');
+    });
+  });
+});

__tests__/data/bambuLabColors.test.ts

@@ -0,0 +1,100 @@
+import { bambuLabColors, getFilamentColor, getColorStyle, ColorMapping } from '@/src/data/bambuLabColors';
+
+describe('Bambu Lab Colors Data', () => {
+  describe('bambuLabColors', () => {
+    it('should have color definitions', () => {
+      expect(Object.keys(bambuLabColors).length).toBeGreaterThan(0);
+    });
+
+    it('should have correct structure for each color', () => {
+      Object.entries(bambuLabColors).forEach(([colorName, colorMapping]) => {
+        expect(colorMapping).toHaveProperty('hex');
+        expect(colorMapping.hex).toBeDefined();
+      });
+    });
+
+    it('should have known colors', () => {
+      expect(bambuLabColors).toHaveProperty('Black');
+      expect(bambuLabColors).toHaveProperty('White');
+      expect(bambuLabColors).toHaveProperty('Red');
+      expect(bambuLabColors).toHaveProperty('Blue');
+      expect(bambuLabColors).toHaveProperty('Green');
+    });
+
+    it('should have valid hex colors', () => {
+      Object.entries(bambuLabColors).forEach(([colorName, colorMapping]) => {
+        if (typeof colorMapping.hex === 'string') {
+          expect(colorMapping.hex).toMatch(/^#[0-9A-Fa-f]{6}$/);
+        } else if (Array.isArray(colorMapping.hex)) {
+          colorMapping.hex.forEach(hex => {
+            expect(hex).toMatch(/^#[0-9A-Fa-f]{6}$/);
+          });
+        }
+      });
+    });
+
+    it('should have Unknown fallback color', () => {
+      expect(bambuLabColors).toHaveProperty('Unknown');
+      expect(bambuLabColors.Unknown.hex).toBe('#CCCCCC');
+    });
+  });
+
+  describe('getFilamentColor', () => {
+    it('should return exact match', () => {
+      const result = getFilamentColor('Black');
+      expect(result).toEqual(bambuLabColors['Black']);
+    });
+
+    it('should return case-insensitive match', () => {
+      const result = getFilamentColor('black');
+      expect(result).toEqual(bambuLabColors['Black']);
+    });
+
+    it('should return partial match', () => {
+      const result = getFilamentColor('PLA Black');
+      expect(result).toEqual(bambuLabColors['Black']);
+    });
+
+    it('should return default color for non-existent color', () => {
+      const result = getFilamentColor('NonExistentColor');
+      expect(result).toBeDefined();
+      expect(result).toHaveProperty('hex');
+    });
+
+    it('should handle empty string', () => {
+      const result = getFilamentColor('');
+      expect(result).toBeDefined(); 
+      expect(result).toHaveProperty('hex');
+    });
+  });
+
+  describe('getColorStyle', () => {
+    it('should return backgroundColor for single hex color', () => {
+      const colorMapping: ColorMapping = { hex: '#FF0000' };
+      const result = getColorStyle(colorMapping);
+      expect(result).toEqual({ backgroundColor: '#FF0000' });
+    });
+
+    it('should return backgroundColor for hex array without gradient', () => {
+      const colorMapping: ColorMapping = { hex: ['#FF0000', '#00FF00'] };
+      const result = getColorStyle(colorMapping);
+      expect(result).toEqual({ backgroundColor: '#FF0000' });
+    });
+
+    it('should return gradient for isGradient true', () => {
+      const colorMapping: ColorMapping = { hex: ['#FF0000', '#00FF00'], isGradient: true };
+      const result = getColorStyle(colorMapping);
+      expect(result).toEqual({
+        background: 'linear-gradient(90deg, #FF0000 0%, #00FF00 100%)'
+      });
+    });
+
+    it('should handle gradient with more than 2 colors', () => {
+      const colorMapping: ColorMapping = { hex: ['#FF0000', '#00FF00', '#0000FF'], isGradient: true };
+      const result = getColorStyle(colorMapping);
+      expect(result).toEqual({
+        background: 'linear-gradient(90deg, #FF0000 0%, #00FF00 100%)'
+      });
+    });
+  });
+});

__tests__/data/bambuLabColorsComplete.test.ts

@@ -0,0 +1,68 @@
+import { bambuLabColors, colorsByFinish, getColorHex, getColorsForFinish } from '@/src/data/bambuLabColorsComplete';
+
+describe('Bambu Lab Colors Complete Data', () => {
+  it('should have color definitions', () => {
+    expect(bambuLabColors).toBeDefined();
+    expect(typeof bambuLabColors).toBe('object');
+    expect(Object.keys(bambuLabColors).length).toBeGreaterThan(0);
+  });
+
+  it('should have basic colors', () => {
+    expect(bambuLabColors).toHaveProperty('Black');
+    expect(bambuLabColors).toHaveProperty('White');
+    expect(bambuLabColors).toHaveProperty('Red');
+    expect(bambuLabColors).toHaveProperty('Blue');
+  });
+
+  it('should have matte colors', () => {
+    expect(bambuLabColors).toHaveProperty('Matte Black');
+    expect(bambuLabColors).toHaveProperty('Matte White');
+    expect(bambuLabColors).toHaveProperty('Matte Red');
+  });
+
+  it('should have silk colors', () => {
+    expect(bambuLabColors).toHaveProperty('Silk White');
+    expect(bambuLabColors).toHaveProperty('Silk Black');
+    expect(bambuLabColors).toHaveProperty('Silk Gold');
+  });
+
+  it('should have valid hex colors', () => {
+    Object.entries(bambuLabColors).forEach(([colorName, hex]) => {
+      expect(hex).toMatch(/^#[0-9A-Fa-f]{6}$/);
+    });
+  });
+
+  it('should have colorsByFinish defined', () => {
+    expect(colorsByFinish).toBeDefined();
+    expect(typeof colorsByFinish).toBe('object');
+  });
+
+  it('should have finish categories', () => {
+    expect(colorsByFinish).toHaveProperty('Basic');
+    expect(colorsByFinish).toHaveProperty('Matte');
+    expect(colorsByFinish).toHaveProperty('Silk');
+    expect(colorsByFinish).toHaveProperty('Metal');
+    expect(colorsByFinish).toHaveProperty('Sparkle');
+    expect(colorsByFinish).toHaveProperty('Glow');
+    expect(colorsByFinish).toHaveProperty('Transparent');
+    expect(colorsByFinish).toHaveProperty('Support');
+  });
+
+  it('should return valid hex for getColorHex', () => {
+    const hex = getColorHex('Black');
+    expect(hex).toBe('#000000');
+    
+    const unknownHex = getColorHex('Unknown Color');
+    expect(unknownHex).toBe('#000000');
+  });
+
+  it('should return colors for finish', () => {
+    const basicColors = getColorsForFinish('Basic');
+    expect(Array.isArray(basicColors)).toBe(true);
+    expect(basicColors.length).toBeGreaterThan(0);
+    
+    const unknownFinish = getColorsForFinish('Unknown');
+    expect(Array.isArray(unknownFinish)).toBe(true);
+    expect(unknownFinish.length).toBe(0);
+  });
+});

__tests__/filament-crud.test.ts

@@ -0,0 +1,200 @@
+// Mock axios before importing services
+jest.mock('axios', () => ({
+  create: jest.fn(() => ({
+    interceptors: {
+      request: { use: jest.fn() },
+      response: { use: jest.fn() }
+    },
+    get: jest.fn(),
+    post: jest.fn(),
+    put: jest.fn(),
+    delete: jest.fn()
+  }))
+}));
+
+import { filamentService, authService } from '../src/services/api';
+
+describe('Filament CRUD Operations', () => {
+  let authToken: string;
+
+  beforeAll(async () => {
+    // Mock successful login
+    jest.spyOn(authService, 'login').mockResolvedValue({ token: 'test-token' });
+    const loginResponse = await authService.login('admin', 'admin123');
+    authToken = loginResponse.token;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Create Filament', () => {
+    it('should create a new filament without brand field', async () => {
+      const newFilament = {
+        tip: 'PLA',
+        finish: 'Basic',
+        boja: 'Black',
+        boja_hex: '#000000',
+        refill: '2',
+        spulna: '1 spulna',
+        kolicina: '3',
+        cena: '3999'
+      };
+
+      const mockResponse = {
+        id: '123',
+        ...newFilament,
+        boja_hex: '#000000',
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString()
+      };
+
+      jest.spyOn(filamentService, 'create').mockResolvedValue(mockResponse);
+
+      const result = await filamentService.create(newFilament);
+
+      expect(result).toEqual(mockResponse);
+      expect(filamentService.create).toHaveBeenCalledWith(newFilament);
+      
+      // Verify no brand field was sent
+      const callArg = (filamentService.create as jest.Mock).mock.calls[0][0];
+      expect(callArg).not.toHaveProperty('brand');
+    });
+
+    it('should use boja_hex field directly', async () => {
+      const filamentWithHex = {
+        tip: 'PETG',
+        finish: 'Silk',
+        boja: 'Red',
+        boja_hex: '#FF0000',
+        refill: 'Ne',
+        spulna: 'Ne',
+        kolicina: '1',
+        cena: '4500'
+      };
+
+      // Spy on the actual implementation
+      const createSpy = jest.spyOn(filamentService, 'create');
+      
+      // We can't test the actual transformation without a real axios call,
+      // but we can verify the method is called correctly
+      await expect(async () => {
+        await filamentService.create(filamentWithHex);
+      }).not.toThrow();
+
+      expect(createSpy).toHaveBeenCalledWith(filamentWithHex);
+    });
+  });
+
+  describe('Update Filament', () => {
+    it('should update a filament without brand field', async () => {
+      const filamentId = '123';
+      const updateData = {
+        tip: 'ABS',
+        finish: 'Matte',
+        boja: 'Blue',
+        boja_hex: '#0000FF',
+        refill: '1',
+        spulna: '2 spulna',
+        kolicina: '4',
+        cena: '5000'
+      };
+
+      const mockResponse = {
+        id: filamentId,
+        ...updateData,
+        boja_hex: '#0000FF',
+        updated_at: new Date().toISOString()
+      };
+
+      jest.spyOn(filamentService, 'update').mockResolvedValue(mockResponse);
+
+      const result = await filamentService.update(filamentId, updateData);
+
+      expect(result).toEqual(mockResponse);
+      expect(filamentService.update).toHaveBeenCalledWith(filamentId, updateData);
+      
+      // Verify no brand field was sent
+      const callArgs = (filamentService.update as jest.Mock).mock.calls[0];
+      expect(callArgs[1]).not.toHaveProperty('brand');
+    });
+  });
+
+  describe('Delete Filament', () => {
+    it('should delete a filament by ID', async () => {
+      const filamentId = '123';
+      const mockResponse = { success: true };
+
+      jest.spyOn(filamentService, 'delete').mockResolvedValue(mockResponse);
+
+      const result = await filamentService.delete(filamentId);
+
+      expect(result).toEqual(mockResponse);
+      expect(filamentService.delete).toHaveBeenCalledWith(filamentId);
+    });
+  });
+
+  describe('Get All Filaments', () => {
+    it('should retrieve all filaments with boja_hex field', async () => {
+      const mockFilaments = [
+        {
+          id: '1',
+          tip: 'PLA',
+          finish: 'Basic',
+          boja: 'Black',
+          boja_hex: '#000000',
+          refill: '2',
+          spulna: '1 spulna',
+          kolicina: '3',
+          cena: '3999'
+        },
+        {
+          id: '2',
+          tip: 'PETG',
+          finish: 'Silk',
+          boja: 'Red',
+          boja_hex: '#FF0000',
+          refill: 'Ne',
+          spulna: 'Ne',
+          kolicina: '1',
+          cena: '4500'
+        }
+      ];
+
+      // No transformation needed anymore - we use boja_hex directly
+      const expectedFilaments = mockFilaments;
+
+      jest.spyOn(filamentService, 'getAll').mockResolvedValue(expectedFilaments);
+
+      const result = await filamentService.getAll();
+
+      expect(result).toEqual(expectedFilaments);
+      expect(result[0]).toHaveProperty('boja_hex', '#000000');
+      expect(result[1]).toHaveProperty('boja_hex', '#FF0000');
+    });
+  });
+
+  describe('Quantity Calculations', () => {
+    it('should correctly calculate total quantity from refill and spulna', () => {
+      const testCases = [
+        { refill: '2', spulna: '1 spulna', expected: 3 },
+        { refill: 'Ne', spulna: '3 spulna', expected: 3 },
+        { refill: '1', spulna: 'Ne', expected: 1 },
+        { refill: 'Da', spulna: 'spulna', expected: 2 }
+      ];
+
+      testCases.forEach(({ refill, spulna, expected }) => {
+        // Parse refill
+        const refillCount = parseInt(refill) || (refill?.toLowerCase() === 'da' ? 1 : 0);
+        
+        // Parse spulna
+        const vakuumMatch = spulna?.match(/^(\d+)\s*spulna/);
+        const vakuumCount = vakuumMatch ? parseInt(vakuumMatch[1]) : (spulna?.toLowerCase().includes('spulna') ? 1 : 0);
+        
+        const total = refillCount + vakuumCount;
+        
+        expect(total).toBe(expected);
+      });
+    });
+  });
+});

__tests__/no-mock-data.test.ts

@@ -0,0 +1,29 @@
+import { readFileSync, existsSync } from 'fs';
+import { join } from 'path';
+
+describe('No Mock Data Tests', () => {
+  it('should not have data.json in public folder', () => {
+    const dataJsonPath = join(process.cwd(), 'public', 'data.json');
+    expect(existsSync(dataJsonPath)).toBe(false);
+  });
+
+  it('should not have fallback to data.json in page.tsx', () => {
+    const pagePath = join(process.cwd(), 'app', 'page.tsx');
+    const pageContent = readFileSync(pagePath, 'utf-8');
+    
+    expect(pageContent).not.toContain('data.json');
+    expect(pageContent).not.toContain("'/data.json'");
+    expect(pageContent).toContain('filamentService');
+  });
+
+  it('should use API service in all components', () => {
+    const pagePath = join(process.cwd(), 'app', 'page.tsx');
+    const adminPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
+    
+    const pageContent = readFileSync(pagePath, 'utf-8');
+    const adminContent = readFileSync(adminPath, 'utf-8');
+    
+    expect(pageContent).toContain('filamentService');
+    expect(adminContent).toContain('filamentService');
+  });
+});

__tests__/security.test.ts

@@ -1,65 +0,0 @@
-// Mock Next.js server components
-jest.mock('next/server', () => ({
-  NextResponse: {
-    json: (data: any, init?: ResponseInit) => ({
-      json: async () => data,
-      ...init
-    })
-  }
-}));
-
-// Mock confluence module
-jest.mock('../src/server/confluence', () => ({
-  fetchFromConfluence: jest.fn()
-}));
-
-import { GET } from '../app/api/filaments/route';
-import { fetchFromConfluence } from '../src/server/confluence';
-
-describe('API Security Tests', () => {
-  const originalEnv = process.env;
-
-  beforeEach(() => {
-    jest.resetModules();
-    process.env = { ...originalEnv };
-  });
-
-  afterEach(() => {
-    process.env = originalEnv;
-  });
-
-  it('should not expose credentials in error responses', async () => {
-    // Simulate missing environment variables
-    delete process.env.CONFLUENCE_TOKEN;
-    
-    const response = await GET();
-    const data = await response.json();
-    
-    // Check that response doesn't contain sensitive information
-    expect(JSON.stringify(data)).not.toContain('ATATT');
-    expect(JSON.stringify(data)).not.toContain('token');
-    expect(JSON.stringify(data)).not.toContain('password');
-    expect(data.error).toBe('Server configuration error');
-  });
-
-  it('should not expose internal error details', async () => {
-    // Set valid environment
-    process.env.CONFLUENCE_API_URL = 'https://test.atlassian.net';
-    process.env.CONFLUENCE_TOKEN = 'test-token';
-    process.env.CONFLUENCE_PAGE_ID = 'test-page';
-    
-    // Mock fetchFromConfluence to throw an error
-    const mockFetchFromConfluence = fetchFromConfluence as jest.MockedFunction<typeof fetchFromConfluence>;
-    mockFetchFromConfluence.mockRejectedValueOnce(new Error('Internal database error with sensitive details'));
-    
-    const response = await GET();
-    const data = await response.json();
-    
-    // Should get generic error, not specific details
-    expect(data.error).toBe('Failed to fetch filaments');
-    expect(data).not.toHaveProperty('stack');
-    expect(data).not.toHaveProperty('message');
-    expect(JSON.stringify(data)).not.toContain('Internal database error');
-    expect(JSON.stringify(data)).not.toContain('sensitive details');
-  });
-});

__tests__/ui-features.test.ts

@@ -0,0 +1,76 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+describe('UI Features Tests', () => {
+  it('should have color hex input in admin form', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
+    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
+    
+    // Check for color input
+    expect(adminContent).toContain('type="color"');
+    expect(adminContent).toContain('boja_hex');
+    expect(adminContent).toContain('Hex kod boje');
+  });
+
+  it('should display color hex in frontend table', () => {
+    const filamentTablePath = join(process.cwd(), 'src', 'components', 'FilamentTableV2.tsx');
+    const tableContent = readFileSync(filamentTablePath, 'utf-8');
+    
+    // Check for color display
+    expect(tableContent).toContain('backgroundColor: filament.boja_hex');
+    expect(tableContent).toContain('boja_hex');
+  });
+
+  it('should have number inputs for quantity fields', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
+    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
+    
+    // Check for number inputs for quantities
+    expect(adminContent).toMatch(/type="number"[\s\S]*?name="refill"/);
+    expect(adminContent).toMatch(/type="number"[\s\S]*?name="spulna"/);
+    expect(adminContent).toContain('Refill');
+    expect(adminContent).toContain('Spulna');
+    expect(adminContent).toContain('Ukupna količina');
+  });
+
+  it('should have number input for quantity', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
+    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
+    
+    // Check for number input
+    expect(adminContent).toMatch(/type="number"[\s\S]*?name="kolicina"/);
+    expect(adminContent).toContain('min="0"');
+    expect(adminContent).toContain('step="1"');
+  });
+
+  it('should have predefined material options', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
+    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
+    
+    // Check for material select dropdown
+    expect(adminContent).toContain('<option value="PLA">PLA</option>');
+    expect(adminContent).toContain('<option value="PETG">PETG</option>');
+    expect(adminContent).toContain('<option value="ABS">ABS</option>');
+  });
+
+  it('should have admin header with navigation', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
+    
+    const dashboardContent = readFileSync(adminDashboardPath, 'utf-8');
+    
+    // Check for admin header
+    expect(dashboardContent).toContain('Admin');
+    expect(dashboardContent).toContain('Nazad na sajt');
+    expect(dashboardContent).toContain('Odjava');
+  });
+
+  it('should have Safari-specific select styling', () => {
+    const selectCssPath = join(process.cwd(), 'src', 'styles', 'select.css');
+    const selectContent = readFileSync(selectCssPath, 'utf-8');
+    
+    // Check for Safari fixes
+    expect(selectContent).toContain('-webkit-appearance: none !important');
+    expect(selectContent).toContain('@supports (-webkit-appearance: none)');
+    expect(selectContent).toContain('-webkit-min-device-pixel-ratio');
+  });
+});

amplify.yml

@@ -5,11 +5,8 @@ frontend:
       commands:
         - npm ci
         - npm run security:check
-        # Print env vars for debugging (without exposing values)
-        - env | grep CONFLUENCE | sed 's/=.*/=***/'
     build:
       commands:
-        - npx tsx scripts/fetch-data.js
         - npm run build
   artifacts:
     baseDirectory: out

api/.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+npm-debug.log
+.env
+.env.example
+README.md
+.git
+.gitignore

api/.env.example

@@ -0,0 +1,14 @@
+# Database connection
+DATABASE_URL=postgresql://username:password@localhost:5432/filamenteka
+
+# JWT Secret
+JWT_SECRET=your-secret-key-here
+
+# Admin password
+ADMIN_PASSWORD=your-admin-password
+
+# Server port
+PORT=4000
+
+# Environment
+NODE_ENV=development

api/Dockerfile

@@ -0,0 +1,18 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy application files
+COPY . .
+
+# Expose port
+EXPOSE 80
+
+# Start the application
+CMD ["node", "server.js"]

api/migrate.js

@@ -0,0 +1,93 @@
+const { Pool } = require('pg');
+const fs = require('fs');
+const path = require('path');
+require('dotenv').config();
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: process.env.DATABASE_URL?.includes('amazonaws.com') ? { rejectUnauthorized: false } : false
+});
+
+async function migrate() {
+  try {
+    // Read schema file
+    const schemaPath = path.join(__dirname, '..', 'database', 'schema.sql');
+    const schema = fs.readFileSync(schemaPath, 'utf8');
+    
+    // Execute schema
+    await pool.query(schema);
+    
+    console.log('Database migration completed successfully');
+    
+    // Run additional migrations
+    const migrationsPath = path.join(__dirname, '..', 'database', 'migrations');
+    if (fs.existsSync(migrationsPath)) {
+      const migrationFiles = fs.readdirSync(migrationsPath)
+        .filter(file => file.endsWith('.sql'))
+        .sort();
+        
+      for (const file of migrationFiles) {
+        console.log(`Running migration: ${file}`);
+        const migrationSQL = fs.readFileSync(path.join(migrationsPath, file), 'utf8');
+        try {
+          await pool.query(migrationSQL);
+          console.log(`✓ Migration ${file} completed`);
+        } catch (err) {
+          console.log(`⚠ Migration ${file} skipped:`, err.message);
+        }
+      }
+    }
+    
+    // Import legacy data if available
+    try {
+      const dataPath = path.join(__dirname, '..', 'data.json');
+      if (fs.existsSync(dataPath)) {
+        const legacyData = JSON.parse(fs.readFileSync(dataPath, 'utf8'));
+        
+        // Import colors
+        const colors = new Set();
+        legacyData.forEach(item => {
+          if (item.boja) colors.add(item.boja);
+        });
+        
+        for (const color of colors) {
+          const hex = legacyData.find(item => item.boja === color)?.bojaHex || '#000000';
+          await pool.query(
+            'INSERT INTO colors (name, hex) VALUES ($1, $2) ON CONFLICT (name) DO UPDATE SET hex = $2',
+            [color, hex]
+          );
+        }
+        
+        // Import filaments
+        for (const item of legacyData) {
+          await pool.query(
+            `INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena) 
+             VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
+            [
+              item.tip,
+              item.finish,
+              item.boja,
+              item.bojaHex,
+              item.refill,
+              item.vakum,
+              item.otvoreno,
+              item.kolicina || 1,
+              item.cena
+            ]
+          );
+        }
+        
+        console.log('Legacy data imported successfully');
+      }
+    } catch (error) {
+      console.error('Error importing legacy data:', error);
+    }
+    
+    process.exit(0);
+  } catch (error) {
+    console.error('Migration failed:', error);
+    process.exit(1);
+  }
+}
+
+migrate();

api/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "filamenteka-api",
+  "version": "1.0.0",
+  "description": "API backend for Filamenteka",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js",
+    "migrate": "node migrate.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "pg": "^8.11.3",
+    "cors": "^2.8.5",
+    "bcryptjs": "^2.4.3",
+    "jsonwebtoken": "^9.0.2",
+    "dotenv": "^16.3.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2"
+  }
+}

api/routes/admin-migrate.js

@@ -0,0 +1,63 @@
+const express = require('express');
+const router = express.Router();
+const { authenticate } = require('../middleware/auth');
+
+// Temporary migration endpoint - remove after use
+router.post('/add-basic-refills', authenticate, async (req, res) => {
+  const pool = req.app.locals.pool;
+  
+  try {
+    // First, let's insert filaments for all existing colors
+    const result = await pool.query(`
+      INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
+      SELECT 
+          'PLA' as tip,
+          'Basic' as finish,
+          c.name as boja,
+          c.hex as boja_hex,
+          '1' as refill,
+          '0 vakuum' as vakum,
+          '0 otvorena' as otvoreno,
+          1 as kolicina,
+          '3999' as cena
+      FROM colors c
+      WHERE NOT EXISTS (
+          -- Only insert if this exact combination doesn't already exist
+          SELECT 1 FROM filaments f 
+          WHERE f.tip = 'PLA' 
+          AND f.finish = 'Basic' 
+          AND f.boja = c.name
+      )
+    `);
+    
+    // Update any existing PLA Basic filaments to have at least 1 refill
+    const updateResult = await pool.query(`
+      UPDATE filaments
+      SET refill = '1'
+      WHERE tip = 'PLA' 
+      AND finish = 'Basic'
+      AND (refill IS NULL OR refill = '0' OR refill = '')
+    `);
+    
+    // Show summary
+    const summary = await pool.query(`
+      SELECT COUNT(*) as count 
+      FROM filaments 
+      WHERE tip = 'PLA' 
+      AND finish = 'Basic' 
+      AND refill = '1'
+    `);
+    
+    res.json({
+      success: true,
+      inserted: result.rowCount,
+      updated: updateResult.rowCount,
+      total: summary.rows[0].count
+    });
+  } catch (error) {
+    console.error('Migration error:', error);
+    res.status(500).json({ error: 'Migration failed', details: error.message });
+  }
+});
+
+module.exports = router;

api/scripts/add-basic-refills.js

@@ -0,0 +1,65 @@
+const { Pool } = require('pg');
+require('dotenv').config();
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: process.env.DATABASE_URL?.includes('amazonaws.com') ? { rejectUnauthorized: false } : false
+});
+
+async function addBasicRefills() {
+  try {
+    // First, let's insert filaments for all existing colors
+    const result = await pool.query(`
+      INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
+      SELECT 
+          'PLA' as tip,
+          'Basic' as finish,
+          c.name as boja,
+          c.hex as boja_hex,
+          '1' as refill,
+          '0 vakuum' as vakum,
+          '0 otvorena' as otvoreno,
+          1 as kolicina,
+          '3999' as cena
+      FROM colors c
+      WHERE NOT EXISTS (
+          -- Only insert if this exact combination doesn't already exist
+          SELECT 1 FROM filaments f 
+          WHERE f.tip = 'PLA' 
+          AND f.finish = 'Basic' 
+          AND f.boja = c.name
+      )
+    `);
+    
+    console.log(`Inserted ${result.rowCount} new PLA Basic filaments with 1 refill each`);
+    
+    // Update any existing PLA Basic filaments to have at least 1 refill
+    const updateResult = await pool.query(`
+      UPDATE filaments
+      SET refill = '1'
+      WHERE tip = 'PLA' 
+      AND finish = 'Basic'
+      AND (refill IS NULL OR refill = '0' OR refill = '')
+    `);
+    
+    console.log(`Updated ${updateResult.rowCount} existing PLA Basic filaments to have 1 refill`);
+    
+    // Show summary
+    const summary = await pool.query(`
+      SELECT COUNT(*) as count 
+      FROM filaments 
+      WHERE tip = 'PLA' 
+      AND finish = 'Basic' 
+      AND refill = '1'
+    `);
+    
+    console.log(`\nTotal PLA Basic filaments with 1 refill: ${summary.rows[0].count}`);
+    
+    process.exit(0);
+  } catch (error) {
+    console.error('Error adding basic refills:', error);
+    process.exit(1);
+  }
+}
+
+addBasicRefills();

api/scripts/add-refills.js

@@ -0,0 +1,73 @@
+const { Pool } = require('pg');
+const path = require('path');
+require('dotenv').config({ path: path.join(__dirname, '../.env') });
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: process.env.DATABASE_URL?.includes('amazonaws.com') ? { rejectUnauthorized: false } : false
+});
+
+async function addRefills() {
+  try {
+    console.log('Adding 1 refill for each color as PLA Basic filaments...\n');
+    
+    // First, get all colors
+    const colorsResult = await pool.query('SELECT name, hex FROM colors ORDER BY name');
+    console.log(`Found ${colorsResult.rows.length} colors in database:`);
+    colorsResult.rows.forEach(color => {
+      console.log(`  - ${color.name} (${color.hex})`);
+    });
+    console.log('');
+    
+    let inserted = 0;
+    let updated = 0;
+    
+    for (const color of colorsResult.rows) {
+      // Check if PLA Basic already exists for this color
+      const existing = await pool.query(
+        'SELECT id, refill FROM filaments WHERE tip = $1 AND finish = $2 AND boja = $3',
+        ['PLA', 'Basic', color.name]
+      );
+      
+      if (existing.rows.length === 0) {
+        // Insert new filament
+        await pool.query(
+          `INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena) 
+           VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
+          ['PLA', 'Basic', color.name, color.hex, '1', '0 vakuum', '0 otvorena', 1, '3999']
+        );
+        console.log(`✓ Added PLA Basic ${color.name}`);
+        inserted++;
+      } else if (!existing.rows[0].refill || existing.rows[0].refill === '0') {
+        // Update existing to have 1 refill
+        await pool.query(
+          'UPDATE filaments SET refill = $1 WHERE id = $2',
+          ['1', existing.rows[0].id]
+        );
+        console.log(`✓ Updated PLA Basic ${color.name} to have 1 refill`);
+        updated++;
+      } else {
+        console.log(`- PLA Basic ${color.name} already has ${existing.rows[0].refill} refill(s)`);
+      }
+    }
+    
+    console.log(`\nSummary:`);
+    console.log(`- Inserted ${inserted} new PLA Basic filaments`);
+    console.log(`- Updated ${updated} existing filaments to have 1 refill`);
+    console.log(`- Total colors processed: ${colorsResult.rows.length}`);
+    
+    // Show final state
+    const finalCount = await pool.query(
+      "SELECT COUNT(*) as count FROM filaments WHERE tip = 'PLA' AND finish = 'Basic' AND refill = '1'"
+    );
+    console.log(`- Total PLA Basic filaments with 1 refill: ${finalCount.rows[0].count}`);
+    
+    await pool.end();
+    process.exit(0);
+  } catch (error) {
+    console.error('Error:', error);
+    process.exit(1);
+  }
+}
+
+addRefills();

api/server.js

@@ -0,0 +1,371 @@
+const express = require('express');
+const { Pool } = require('pg');
+const cors = require('cors');
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+require('dotenv').config();
+
+const app = express();
+const PORT = process.env.PORT || 80;
+
+// PostgreSQL connection
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: process.env.DATABASE_URL?.includes('amazonaws.com') ? { rejectUnauthorized: false } : false
+});
+
+// Middleware
+app.use(cors({
+  origin: true, // Allow all origins in development
+  credentials: true,
+  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+  allowedHeaders: ['Content-Type', 'Authorization'],
+  exposedHeaders: ['Content-Length', 'Content-Type'],
+  maxAge: 86400
+}));
+app.use(express.json());
+
+// Handle preflight requests
+app.options('*', cors());
+
+// Health check route
+app.get('/', (req, res) => {
+  res.json({ status: 'ok', service: 'Filamenteka API' });
+});
+
+// JWT middleware
+const authenticateToken = (req, res, next) => {
+  const authHeader = req.headers['authorization'];
+  const token = authHeader && authHeader.split(' ')[1];
+  
+  if (!token) {
+    return res.status(401).json({ error: 'Unauthorized' });
+  }
+  
+  jwt.verify(token, process.env.JWT_SECRET || 'your-secret-key', (err, user) => {
+    if (err) {
+      console.error('JWT verification error:', err);
+      return res.status(403).json({ error: 'Invalid token' });
+    }
+    req.user = user;
+    next();
+  });
+};
+
+// Auth endpoints
+app.post('/api/login', async (req, res) => {
+  const { username, password } = req.body;
+  
+  // For now, simple hardcoded admin check
+  if (username === 'admin' && password === process.env.ADMIN_PASSWORD) {
+    const token = jwt.sign({ username }, process.env.JWT_SECRET || 'your-secret-key', { expiresIn: '24h' });
+    res.json({ token });
+  } else {
+    res.status(401).json({ error: 'Invalid credentials' });
+  }
+});
+
+// Colors endpoints
+app.get('/api/colors', async (req, res) => {
+  try {
+    const result = await pool.query('SELECT * FROM colors ORDER BY name');
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching colors:', error);
+    res.status(500).json({ error: 'Failed to fetch colors' });
+  }
+});
+
+app.post('/api/colors', authenticateToken, async (req, res) => {
+  const { name, hex, cena_refill, cena_spulna } = req.body;
+  
+  try {
+    const result = await pool.query(
+      'INSERT INTO colors (name, hex, cena_refill, cena_spulna) VALUES ($1, $2, $3, $4) RETURNING *',
+      [name, hex, cena_refill || 3499, cena_spulna || 3999]
+    );
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error creating color:', error);
+    res.status(500).json({ error: 'Failed to create color' });
+  }
+});
+
+app.put('/api/colors/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  const { name, hex, cena_refill, cena_spulna } = req.body;
+  
+  try {
+    const result = await pool.query(
+      'UPDATE colors SET name = $1, hex = $2, cena_refill = $3, cena_spulna = $4, updated_at = CURRENT_TIMESTAMP WHERE id = $5 RETURNING *',
+      [name, hex, cena_refill || 3499, cena_spulna || 3999, id]
+    );
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error updating color:', error);
+    res.status(500).json({ error: 'Failed to update color' });
+  }
+});
+
+app.delete('/api/colors/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  
+  try {
+    await pool.query('DELETE FROM colors WHERE id = $1', [id]);
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting color:', error);
+    res.status(500).json({ error: 'Failed to delete color' });
+  }
+});
+
+// Filaments endpoints (PUBLIC - no auth required)
+app.get('/api/filaments', async (req, res) => {
+  try {
+    const result = await pool.query('SELECT * FROM filaments ORDER BY created_at DESC');
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching filaments:', error);
+    res.status(500).json({ error: 'Failed to fetch filaments' });
+  }
+});
+
+app.post('/api/filaments', authenticateToken, async (req, res) => {
+  const { tip, finish, boja, boja_hex, refill, spulna, cena } = req.body;
+  
+  try {
+    // Ensure refill and spulna are numbers
+    const refillNum = parseInt(refill) || 0;
+    const spulnaNum = parseInt(spulna) || 0;
+    const kolicina = refillNum + spulnaNum;
+    
+    const result = await pool.query(
+      `INSERT INTO filaments (tip, finish, boja, boja_hex, refill, spulna, kolicina, cena) 
+       VALUES ($1, $2, $3, $4, $5, $6, $7, $8) RETURNING *`,
+      [tip, finish, boja, boja_hex, refillNum, spulnaNum, kolicina, cena]
+    );
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error creating filament:', error);
+    res.status(500).json({ error: 'Failed to create filament' });
+  }
+});
+
+app.put('/api/filaments/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  const { tip, finish, boja, boja_hex, refill, spulna, cena, sale_percentage, sale_active, sale_start_date, sale_end_date } = req.body;
+  
+  try {
+    // Ensure refill and spulna are numbers
+    const refillNum = parseInt(refill) || 0;
+    const spulnaNum = parseInt(spulna) || 0;
+    const kolicina = refillNum + spulnaNum;
+    
+    const result = await pool.query(
+      `UPDATE filaments 
+       SET tip = $1, finish = $2, boja = $3, boja_hex = $4, 
+           refill = $5, spulna = $6, kolicina = $7, cena = $8,
+           sale_percentage = $9, sale_active = $10, 
+           sale_start_date = $11, sale_end_date = $12,
+           updated_at = CURRENT_TIMESTAMP
+       WHERE id = $13 RETURNING *`,
+      [tip, finish, boja, boja_hex, refillNum, spulnaNum, kolicina, cena, 
+       sale_percentage || 0, sale_active || false, sale_start_date, sale_end_date, id]
+    );
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error updating filament:', error);
+    res.status(500).json({ error: 'Failed to update filament' });
+  }
+});
+
+app.delete('/api/filaments/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  
+  try {
+    await pool.query('DELETE FROM filaments WHERE id = $1', [id]);
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting filament:', error);
+    res.status(500).json({ error: 'Failed to delete filament' });
+  }
+});
+
+// Bulk sale update endpoint
+app.post('/api/filaments/sale/bulk', authenticateToken, async (req, res) => {
+  const { filamentIds, salePercentage, saleStartDate, saleEndDate, enableSale } = req.body;
+  
+  try {
+    let query;
+    let params;
+    
+    if (filamentIds && filamentIds.length > 0) {
+      // Update specific filaments
+      query = `
+        UPDATE filaments 
+        SET sale_percentage = $1, 
+            sale_active = $2,
+            sale_start_date = $3,
+            sale_end_date = $4,
+            updated_at = CURRENT_TIMESTAMP
+        WHERE id = ANY($5) 
+        RETURNING *`;
+      params = [salePercentage || 0, enableSale || false, saleStartDate, saleEndDate, filamentIds];
+    } else {
+      // Update all filaments
+      query = `
+        UPDATE filaments 
+        SET sale_percentage = $1, 
+            sale_active = $2,
+            sale_start_date = $3,
+            sale_end_date = $4,
+            updated_at = CURRENT_TIMESTAMP
+        RETURNING *`;
+      params = [salePercentage || 0, enableSale || false, saleStartDate, saleEndDate];
+    }
+    
+    const result = await pool.query(query, params);
+    res.json({ 
+      success: true, 
+      updatedCount: result.rowCount,
+      updatedFilaments: result.rows 
+    });
+  } catch (error) {
+    console.error('Error updating sale:', error);
+    res.status(500).json({ error: 'Failed to update sale' });
+  }
+});
+
+// Color request endpoints
+
+// Get all color requests (admin only)
+app.get('/api/color-requests', authenticateToken, async (req, res) => {
+  try {
+    const result = await pool.query(
+      'SELECT * FROM color_requests ORDER BY created_at DESC'
+    );
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching color requests:', error);
+    res.status(500).json({ error: 'Failed to fetch color requests' });
+  }
+});
+
+// Submit a new color request (public)
+app.post('/api/color-requests', async (req, res) => {
+  try {
+    const { 
+      color_name, 
+      material_type, 
+      finish_type, 
+      user_email,
+      user_phone, 
+      user_name, 
+      description,
+      reference_url 
+    } = req.body;
+
+    // Validate required fields
+    if (!color_name || !material_type || !user_email || !user_phone) {
+      return res.status(400).json({ 
+        error: 'Color name, material type, email, and phone are required' 
+      });
+    }
+
+    // Check if similar request already exists
+    const existingRequest = await pool.query(
+      `SELECT id, request_count FROM color_requests 
+       WHERE LOWER(color_name) = LOWER($1) 
+       AND material_type = $2 
+       AND (finish_type = $3 OR (finish_type IS NULL AND $3 IS NULL))
+       AND status = 'pending'`,
+      [color_name, material_type, finish_type]
+    );
+
+    if (existingRequest.rows.length > 0) {
+      // Increment request count for existing request
+      const result = await pool.query(
+        `UPDATE color_requests 
+         SET request_count = request_count + 1,
+             updated_at = CURRENT_TIMESTAMP
+         WHERE id = $1
+         RETURNING *`,
+        [existingRequest.rows[0].id]
+      );
+      res.json({ 
+        message: 'Your request has been added to an existing request for this color',
+        request: result.rows[0] 
+      });
+    } else {
+      // Create new request
+      const result = await pool.query(
+        `INSERT INTO color_requests 
+         (color_name, material_type, finish_type, user_email, user_phone, user_name, description, reference_url)
+         VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+         RETURNING *`,
+        [color_name, material_type, finish_type, user_email, user_phone, user_name, description, reference_url]
+      );
+      res.json({ 
+        message: 'Color request submitted successfully',
+        request: result.rows[0] 
+      });
+    }
+  } catch (error) {
+    console.error('Error creating color request:', error);
+    res.status(500).json({ error: 'Failed to submit color request' });
+  }
+});
+
+// Update color request status (admin only)
+app.put('/api/color-requests/:id', authenticateToken, async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { status, admin_notes } = req.body;
+    
+    const result = await pool.query(
+      `UPDATE color_requests 
+       SET status = $1, 
+           admin_notes = $2,
+           processed_at = CURRENT_TIMESTAMP,
+           processed_by = $3,
+           updated_at = CURRENT_TIMESTAMP
+       WHERE id = $4
+       RETURNING *`,
+      [status, admin_notes, req.user.username, id]
+    );
+    
+    if (result.rows.length === 0) {
+      return res.status(404).json({ error: 'Color request not found' });
+    }
+    
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error updating color request:', error);
+    res.status(500).json({ error: 'Failed to update color request' });
+  }
+});
+
+// Delete color request (admin only)
+app.delete('/api/color-requests/:id', authenticateToken, async (req, res) => {
+  try {
+    const { id } = req.params;
+    
+    const result = await pool.query(
+      'DELETE FROM color_requests WHERE id = $1 RETURNING *',
+      [id]
+    );
+    
+    if (result.rows.length === 0) {
+      return res.status(404).json({ error: 'Color request not found' });
+    }
+    
+    res.json({ message: 'Color request deleted successfully' });
+  } catch (error) {
+    console.error('Error deleting color request:', error);
+    res.status(500).json({ error: 'Failed to delete color request' });
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+});

api/vercel.json

@@ -0,0 +1,18 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "server.js",
+      "use": "@vercel/node"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "server.js"
+    }
+  ],
+  "env": {
+    "NODE_TLS_REJECT_UNAUTHORIZED": "0"
+  }
+}

app/admin/dashboard/page.tsx

@@ -1,386 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import axios from 'axios';
-import { Filament } from '../../../src/types/filament';
-
-interface FilamentWithId extends Filament {
-  id: string;
-  createdAt?: string;
-  updatedAt?: string;
-}
-
-export default function AdminDashboard() {
-  const router = useRouter();
-  const [filaments, setFilaments] = useState<FilamentWithId[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [editingFilament, setEditingFilament] = useState<FilamentWithId | null>(null);
-  const [showAddForm, setShowAddForm] = useState(false);
-
-  // Check authentication
-  useEffect(() => {
-    const token = localStorage.getItem('authToken');
-    const expiry = localStorage.getItem('tokenExpiry');
-    
-    if (!token || !expiry || Date.now() > parseInt(expiry)) {
-      router.push('/admin');
-    }
-  }, [router]);
-
-  // Fetch filaments
-  const fetchFilaments = async () => {
-    try {
-      setLoading(true);
-      const response = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/filaments`);
-      setFilaments(response.data);
-    } catch (err) {
-      setError('Greška pri učitavanju filamenata');
-      console.error('Fetch error:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchFilaments();
-  }, []);
-
-  const getAuthHeaders = () => ({
-    headers: {
-      Authorization: `Bearer ${localStorage.getItem('authToken')}`
-    }
-  });
-
-  const handleDelete = async (id: string) => {
-    if (!confirm('Da li ste sigurni da želite obrisati ovaj filament?')) return;
-
-    try {
-      await axios.delete(`${process.env.NEXT_PUBLIC_API_URL}/filaments/${id}`, getAuthHeaders());
-      await fetchFilaments();
-    } catch (err) {
-      alert('Greška pri brisanju filamenta');
-      console.error('Delete error:', err);
-    }
-  };
-
-  const handleSave = async (filament: Partial<FilamentWithId>) => {
-    try {
-      if (filament.id) {
-        // Update existing
-        await axios.put(
-          `${process.env.NEXT_PUBLIC_API_URL}/filaments/${filament.id}`,
-          filament,
-          getAuthHeaders()
-        );
-      } else {
-        // Create new
-        await axios.post(
-          `${process.env.NEXT_PUBLIC_API_URL}/filaments`,
-          filament,
-          getAuthHeaders()
-        );
-      }
-      
-      setEditingFilament(null);
-      setShowAddForm(false);
-      await fetchFilaments();
-    } catch (err) {
-      alert('Greška pri čuvanju filamenta');
-      console.error('Save error:', err);
-    }
-  };
-
-  const handleLogout = () => {
-    localStorage.removeItem('authToken');
-    localStorage.removeItem('tokenExpiry');
-    router.push('/admin');
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <header className="bg-white dark:bg-gray-800 shadow">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex justify-between items-center">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-              Admin Dashboard
-            </h1>
-            <div className="flex gap-4">
-              <button
-                onClick={() => setShowAddForm(true)}
-                className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
-              >
-                Dodaj novi filament
-              </button>
-              <button
-                onClick={handleLogout}
-                className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
-              >
-                Odjava
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {error && (
-          <div className="mb-4 p-4 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded">
-            {error}
-          </div>
-        )}
-
-        {/* Add/Edit Form */}
-        {(showAddForm || editingFilament) && (
-          <FilamentForm
-            filament={editingFilament || {}}
-            onSave={handleSave}
-            onCancel={() => {
-              setEditingFilament(null);
-              setShowAddForm(false);
-            }}
-          />
-        )}
-
-        {/* Filaments Table */}
-        <div className="overflow-x-auto">
-          <table className="min-w-full bg-white dark:bg-gray-800 shadow rounded">
-            <thead>
-              <tr className="bg-gray-100 dark:bg-gray-700">
-                <th className="px-4 py-2 text-left">Brand</th>
-                <th className="px-4 py-2 text-left">Tip</th>
-                <th className="px-4 py-2 text-left">Finish</th>
-                <th className="px-4 py-2 text-left">Boja</th>
-                <th className="px-4 py-2 text-left">Refill</th>
-                <th className="px-4 py-2 text-left">Vakum</th>
-                <th className="px-4 py-2 text-left">Otvoreno</th>
-                <th className="px-4 py-2 text-left">Količina</th>
-                <th className="px-4 py-2 text-left">Cena</th>
-                <th className="px-4 py-2 text-left">Akcije</th>
-              </tr>
-            </thead>
-            <tbody>
-              {filaments.map((filament) => (
-                <tr key={filament.id} className="border-t dark:border-gray-700">
-                  <td className="px-4 py-2">{filament.brand}</td>
-                  <td className="px-4 py-2">{filament.tip}</td>
-                  <td className="px-4 py-2">{filament.finish}</td>
-                  <td className="px-4 py-2">{filament.boja}</td>
-                  <td className="px-4 py-2">{filament.refill}</td>
-                  <td className="px-4 py-2">{filament.vakum}</td>
-                  <td className="px-4 py-2">{filament.otvoreno}</td>
-                  <td className="px-4 py-2">{filament.kolicina}</td>
-                  <td className="px-4 py-2">{filament.cena}</td>
-                  <td className="px-4 py-2">
-                    <button
-                      onClick={() => setEditingFilament(filament)}
-                      className="text-blue-600 hover:text-blue-800 mr-2"
-                    >
-                      Izmeni
-                    </button>
-                    <button
-                      onClick={() => handleDelete(filament.id)}
-                      className="text-red-600 hover:text-red-800"
-                    >
-                      Obriši
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </main>
-    </div>
-  );
-}
-
-// Filament Form Component
-function FilamentForm({ 
-  filament, 
-  onSave, 
-  onCancel 
-}: { 
-  filament: Partial<FilamentWithId>, 
-  onSave: (filament: Partial<FilamentWithId>) => void,
-  onCancel: () => void 
-}) {
-  const [formData, setFormData] = useState({
-    brand: filament.brand || '',
-    tip: filament.tip || '',
-    finish: filament.finish || '',
-    boja: filament.boja || '',
-    refill: filament.refill || '',
-    vakum: filament.vakum || '',
-    otvoreno: filament.otvoreno || '',
-    kolicina: filament.kolicina || '',
-    cena: filament.cena || '',
-  });
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
-    });
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onSave({
-      ...filament,
-      ...formData
-    });
-  };
-
-  return (
-    <div className="mb-8 p-6 bg-white dark:bg-gray-800 rounded shadow">
-      <h2 className="text-xl font-bold mb-4">
-        {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">Brand</label>
-          <input
-            type="text"
-            name="brand"
-            value={formData.brand}
-            onChange={handleChange}
-            required
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-        
-        <div>
-          <label className="block text-sm font-medium mb-1">Tip</label>
-          <select
-            name="tip"
-            value={formData.tip}
-            onChange={handleChange}
-            required
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          >
-            <option value="">Izaberi tip</option>
-            <option value="PLA">PLA</option>
-            <option value="PETG">PETG</option>
-            <option value="ABS">ABS</option>
-            <option value="TPU">TPU</option>
-            <option value="Silk PLA">Silk PLA</option>
-            <option value="PLA Matte">PLA Matte</option>
-          </select>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Finish</label>
-          <select
-            name="finish"
-            value={formData.finish}
-            onChange={handleChange}
-            required
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          >
-            <option value="">Izaberi finish</option>
-            <option value="Basic">Basic</option>
-            <option value="Matte">Matte</option>
-            <option value="Silk">Silk</option>
-            <option value="Metal">Metal</option>
-            <option value="Glow">Glow</option>
-          </select>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Boja</label>
-          <input
-            type="text"
-            name="boja"
-            value={formData.boja}
-            onChange={handleChange}
-            required
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Refill</label>
-          <select
-            name="refill"
-            value={formData.refill}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          >
-            <option value="">Ne</option>
-            <option value="Da">Da</option>
-          </select>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Vakum</label>
-          <input
-            type="text"
-            name="vakum"
-            value={formData.vakum}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Otvoreno</label>
-          <input
-            type="text"
-            name="otvoreno"
-            value={formData.otvoreno}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Količina</label>
-          <input
-            type="text"
-            name="kolicina"
-            value={formData.kolicina}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Cena</label>
-          <input
-            type="text"
-            name="cena"
-            value={formData.cena}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-
-        <div className="md:col-span-2 flex gap-4">
-          <button
-            type="submit"
-            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-          >
-            Sačuvaj
-          </button>
-          <button
-            type="button"
-            onClick={onCancel}
-            className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
-          >
-            Otkaži
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}

app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next'
 import '../src/styles/index.css'
+import { BackToTop } from '../src/components/BackToTop'
+import { MatomoAnalytics } from '../src/components/MatomoAnalytics'
 
 export const metadata: Metadata = {
   title: 'Filamenteka',
@@ -12,8 +14,46 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="sr">
+    <html lang="sr" suppressHydrationWarning>
-      <body>{children}</body>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                document.documentElement.classList.add('no-transitions');
+                // Apply dark mode immediately for admin pages
+                if (window.location.pathname.startsWith('/upadaj')) {
+                  document.documentElement.classList.add('dark');
+                } else {
+                  // For non-admin pages, check localStorage
+                  try {
+                    const darkMode = localStorage.getItem('darkMode');
+                    if (darkMode === 'true') {
+                      document.documentElement.classList.add('dark');
+                    }
+                  } catch (e) {}
+                }
+                // Remove no-transitions class after a short delay
+                window.addEventListener('load', function() {
+                  setTimeout(function() {
+                    document.documentElement.classList.remove('no-transitions');
+                  }, 100);
+                });
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body suppressHydrationWarning>
+        {children}
+        <BackToTop />
+        {process.env.NEXT_PUBLIC_MATOMO_URL && process.env.NEXT_PUBLIC_MATOMO_SITE_ID && (
+          <MatomoAnalytics 
+            matomoUrl={process.env.NEXT_PUBLIC_MATOMO_URL}
+            siteId={process.env.NEXT_PUBLIC_MATOMO_SITE_ID}
+          />
+        )}
+      </body>
     </html>
   )
 }

app/page.tsx

@@ -1,17 +1,25 @@
 'use client'
 
 import { useState, useEffect } from 'react';
-import { FilamentTable } from '../src/components/FilamentTable';
+import { FilamentTableV2 } from '../src/components/FilamentTableV2';
+import { SaleCountdown } from '../src/components/SaleCountdown';
+import TabbedNavigation from '../src/components/TabbedNavigation';
+import PrintersTable from '../src/components/PrintersTable';
+import GearTable from '../src/components/GearTable';
+import ColorRequestSection from '../src/components/ColorRequestSection';
 import { Filament } from '../src/types/filament';
-import axios from 'axios';
+import { filamentService } from '../src/services/api';
+import { trackEvent } from '../src/components/MatomoAnalytics';
 
 export default function Home() {
   const [filaments, setFilaments] = useState<Filament[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
   const [darkMode, setDarkMode] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const [resetKey, setResetKey] = useState(0);
+  const [activeTab, setActiveTab] = useState('filaments');
+  // Removed V1/V2 toggle - now only using V2
 
   // Initialize dark mode from localStorage after mounting
   useEffect(() => {
@@ -39,17 +47,21 @@ export default function Home() {
       setLoading(true);
       setError(null);
       
-      // Use API if available, fallback to static JSON
+      const filamentsData = await filamentService.getAll();
-      const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+      setFilaments(filamentsData);
-      const url = apiUrl ? `${apiUrl}/filaments` : '/data.json';
+    } catch (err: any) {
-      console.log('Fetching from:', url);
+      console.error('API Error:', err);
-      console.log('API URL configured:', apiUrl);
+      
-      const response = await axios.get(url);
+      // More descriptive error messages
-      console.log('Response data:', response.data);
+      if (err.code === 'ERR_NETWORK') {
-      setFilaments(response.data);
+        setError('Network Error - Unable to connect to API');
-      setLastUpdate(new Date());
+      } else if (err.response) {
-    } catch (err) {
+        setError(`Server error: ${err.response.status} - ${err.response.statusText}`);
-      setError(err instanceof Error ? err.message : 'Greška pri učitavanju filamenata');
+      } else if (err.request) {
+        setError('No response from server - check if API is running');
+      } else {
+        setError(err.message || 'Greška pri učitavanju filamenata');
+      }
     } finally {
       setLoading(false);
     }
@@ -58,41 +70,57 @@ export default function Home() {
   useEffect(() => {
     fetchFilaments();
     
-    // Refresh every 5 minutes
+    // Auto-refresh data every 30 seconds to stay in sync
-    const interval = setInterval(fetchFilaments, 5 * 60 * 1000);
+    const interval = setInterval(() => {
+      fetchFilaments();
+    }, 30000);
     
-    return () => clearInterval(interval);
+    // Also refresh when window regains focus
+    const handleFocus = () => {
+      fetchFilaments();
+    };
+    window.addEventListener('focus', handleFocus);
+    
+    return () => {
+      clearInterval(interval);
+      window.removeEventListener('focus', handleFocus);
+    };
   }, []);
 
+  const handleLogoClick = () => {
+    setResetKey(prev => prev + 1);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   return (
     <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">
+      <header className="bg-gradient-to-r from-blue-50 to-orange-50 dark:from-gray-800 dark:to-gray-900 shadow-lg transition-all duration-300">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
-          <div className="flex justify-between items-center">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-0">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            <div className="flex-1 flex flex-col sm:flex-row justify-center items-center gap-1 sm:gap-3 text-sm sm:text-lg">
-              Filamenteka
+              <span className="text-blue-700 dark:text-blue-300 font-medium animate-pulse text-center">
-            </h1>
+                Kupovina po gramu dostupna
-            <div className="flex items-center gap-4">
-              {lastUpdate && (
-                <span className="text-sm text-gray-500 dark:text-gray-400">
-                  Poslednje ažuriranje: {lastUpdate.toLocaleTimeString('sr-RS')}
               </span>
-              )}
+              <span className="hidden sm:inline text-gray-400 dark:text-gray-600">•</span>
+              <span className="text-orange-700 dark:text-orange-300 font-medium animate-pulse text-center">
+                Popust za 5+ komada
+              </span>
+            </div>
+            
+            <div className="flex-shrink-0">
+              {mounted ? (
                 <button
-                onClick={fetchFilaments}
+                  onClick={() => {
-                disabled={loading}
+                    setDarkMode(!darkMode);
-                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+                    trackEvent('UI', 'Dark Mode Toggle', darkMode ? 'Light' : 'Dark');
-              >
+                  }}
-                {loading ? 'Ažuriranje...' : 'Osveži'}
+                  className="p-2 bg-white/50 dark:bg-gray-700/50 backdrop-blur text-gray-800 dark:text-gray-200 rounded-full hover:bg-white/80 dark:hover:bg-gray-600/80 transition-all duration-200 shadow-md"
-              </button>
-              {mounted && (
-                <button
-                  onClick={() => setDarkMode(!darkMode)}
-                  className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
                   title={darkMode ? 'Svetla tema' : 'Tamna tema'}
                 >
                   {darkMode ? '☀️' : '🌙'}
                 </button>
+              ) : (
+                <div className="w-10 h-10" />
               )}
             </div>
           </div>
@@ -100,13 +128,150 @@ export default function Home() {
       </header>
       
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <FilamentTable 
+        {/* Logo centered above content */}
-          filaments={filaments} 
+        <div className="flex justify-center mb-8">
-          loading={loading} 
+          <button
-          error={error || undefined} 
+            onClick={handleLogoClick}
+            className="group transition-transform duration-200"
+            title="Klikni za reset"
+          >
+            {/* Using next/image would cause preload, so we use regular img with loading="lazy" */}
+            <img 
+              src="/logo.png" 
+              alt="Filamenteka" 
+              loading="lazy"
+              decoding="async"
+              className="h-36 sm:h-44 md:h-52 w-auto drop-shadow-lg group-hover:drop-shadow-2xl transition-all duration-200"
+              onError={(e) => {
+                const target = e.currentTarget as HTMLImageElement;
+                target.style.display = 'none';
+              }}
             />
+          </button>
+        </div>
+        
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row justify-center items-center gap-4 mb-8">
+          <a 
+            href="https://www.kupujemprodajem.com/kompjuteri-desktop/3d-stampaci-i-oprema/originalni-bambu-lab-filamenti-na-stanju/oglas/182256246"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => trackEvent('External Link', 'Kupujem Prodajem', 'Homepage')}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Kupi na Kupujem Prodajem
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+          </a>
+          
+          <a 
+            href="tel:+381677102845"
+            onClick={() => trackEvent('Contact', 'Phone Call', 'Homepage')}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+            </svg>
+            Pozovi +381 67 710 2845
+          </a>
+        </div>
+        
+        {/* Tabs Navigation */}
+        <div className="mb-8">
+          <TabbedNavigation
+            tabs={[
+              { 
+                id: 'filaments', 
+                label: 'Filamenti',
+                icon: (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                  </svg>
+                )
+              },
+              { 
+                id: 'printers', 
+                label: 'Štampači',
+                icon: (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                  </svg>
+                )
+              },
+              { 
+                id: 'gear', 
+                label: 'Oprema',
+                icon: (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                )
+              }
+            ]}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+          />
+        </div>
+
+        {/* Tab Content */}
+        {activeTab === 'filaments' && (
+          <>
+            <SaleCountdown 
+              hasActiveSale={filaments.some(f => f.sale_active === true)}
+              maxSalePercentage={Math.max(...filaments.filter(f => f.sale_active === true).map(f => f.sale_percentage || 0), 0)}
+              saleEndDate={(() => {
+                const activeSales = filaments.filter(f => f.sale_active === true && f.sale_end_date);
+                if (activeSales.length === 0) return null;
+                const latestSale = activeSales.reduce((latest, current) => {
+                  if (!latest.sale_end_date) return current;
+                  if (!current.sale_end_date) return latest;
+                  return new Date(current.sale_end_date) > new Date(latest.sale_end_date) ? current : latest;
+                }).sale_end_date;
+                return latestSale;
+              })()}
+            />
+            
+            <FilamentTableV2 
+              key={resetKey}
+              filaments={filaments} 
+            />
+
+            {/* Color Request Section Below Table */}
+            <div className="mt-16">
+              <ColorRequestSection />
+            </div>
+          </>
+        )}
+        
+        {activeTab === 'printers' && <PrintersTable />}
+        
+        {activeTab === 'gear' && <GearTable />}
       </main>
       
+      <footer className="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-6">
+            <div className="text-center sm:text-left">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Kontakt</h3>
+              <a 
+                href="tel:+381677102845"
+                className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+                onClick={() => trackEvent('Contact', 'Phone Call', 'Footer')}
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                </svg>
+                +381 67 710 2845
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }

app/upadaj/colors/page.tsx

@@ -0,0 +1,551 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { colorService } from '@/src/services/api';
+import { bambuLabColors, getColorHex } from '@/src/data/bambuLabColorsComplete';
+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 ColorsManagement() {
+  const router = useRouter();
+  const [colors, setColors] = useState<Color[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [editingColor, setEditingColor] = useState<Color | null>(null);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedColors, setSelectedColors] = useState<Set<string>>(new Set());
+
+  // Initialize dark mode - default to true for admin
+  useEffect(() => {
+    setMounted(true);
+    const saved = localStorage.getItem('darkMode');
+    if (saved !== null) {
+      setDarkMode(JSON.parse(saved));
+    } else {
+      // Default to dark mode for admin
+      setDarkMode(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [darkMode, mounted]);
+
+  // Check authentication
+  useEffect(() => {
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+    
+    if (!token || !expiry || Date.now() > parseInt(expiry)) {
+      router.push('/upadaj');
+    }
+  }, [router]);
+
+  // Fetch colors
+  const fetchColors = async () => {
+    try {
+      setLoading(true);
+      const colors = await colorService.getAll();
+      setColors(colors.sort((a: Color, b: Color) => a.name.localeCompare(b.name)));
+    } catch (err) {
+      setError('Greška pri učitavanju boja');
+      console.error('Fetch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchColors();
+  }, []);
+
+
+  const handleSave = async (color: Partial<Color>) => {
+    try {
+      if (color.id) {
+        await colorService.update(color.id, { 
+          name: color.name!, 
+          hex: color.hex!,
+          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('Greška pri čuvanju boje');
+      console.error('Save error:', err);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Da li ste sigurni da želite obrisati ovu boju?')) {
+      return;
+    }
+
+    try {
+      await colorService.delete(id);
+      fetchColors();
+    } catch (err) {
+      setError('Greška pri brisanju boje');
+      console.error('Delete error:', err);
+    }
+  };
+
+  const handleBulkDelete = async () => {
+    if (selectedColors.size === 0) {
+      setError('Molimo izaberite boje za brisanje');
+      return;
+    }
+
+    if (!confirm(`Da li ste sigurni da želite obrisati ${selectedColors.size} boja?`)) {
+      return;
+    }
+
+    try {
+      // Delete all selected colors
+      await Promise.all(Array.from(selectedColors).map(id => colorService.delete(id)));
+      setSelectedColors(new Set());
+      fetchColors();
+    } catch (err) {
+      setError('Greška 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) {
+      // Deselect all
+      setSelectedColors(new Set());
+    } else {
+      // Select all filtered
+      setSelectedColors(new Set(filteredColors.map(c => c.id)));
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('tokenExpiry');
+    router.push('/upadaj');
+  };
+
+  if (loading) {
+    return <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+      <div className="text-gray-600 dark:text-gray-400">Učitavanje...</div>
+    </div>;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
+      <div className="flex">
+        {/* Sidebar */}
+        <div className="w-64 bg-white dark:bg-gray-800 shadow-lg h-screen">
+          <div className="p-6">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Admin Panel</h2>
+            <nav className="space-y-2">
+              <a
+                href="/upadaj/dashboard"
+                className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+              >
+                Filamenti
+              </a>
+              <a
+                href="/upadaj/colors"
+                className="block px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded"
+              >
+                Boje
+              </a>
+            </nav>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex-1">
+          <header className="bg-white dark:bg-gray-800 shadow transition-colors">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-4">
+                  <img 
+                    src="/logo.png" 
+                    alt="Filamenteka" 
+                    className="h-20 sm:h-32 w-auto drop-shadow-lg"
+                  />
+                  <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Upravljanje bojama</h1>
+                </div>
+                <div className="flex gap-4">
+                  {!showAddForm && !editingColor && (
+                    <button
+                      onClick={() => setShowAddForm(true)}
+                      className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+                    >
+                      Dodaj novu boju
+                    </button>
+                  )}
+                  {selectedColors.size > 0 && (
+                    <button
+                      onClick={handleBulkDelete}
+                      className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                    >
+                      Obriši izabrane ({selectedColors.size})
+                    </button>
+                  )}
+                  <button
+                    onClick={() => router.push('/')}
+                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                  >
+                    Nazad na sajt
+                  </button>
+                  {mounted && (
+                    <button
+                      onClick={() => setDarkMode(!darkMode)}
+                      className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                      title={darkMode ? 'Svetla tema' : 'Tamna tema'}
+                    >
+                      {darkMode ? '☀️' : '🌙'}
+                    </button>
+                  )}
+                  <button
+                    onClick={handleLogout}
+                    className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                  >
+                    Odjava
+                  </button>
+                </div>
+              </div>
+            </div>
+          </header>
+
+          <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            {error && (
+              <div className="mb-4 p-4 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded">
+                {error}
+              </div>
+            )}
+
+            {/* Add Form (stays at top) */}
+            {showAddForm && (
+              <ColorForm
+                color={{}}
+                onSave={handleSave}
+                onCancel={() => {
+                  setShowAddForm(false);
+                }}
+              />
+            )}
+
+            {/* Search Bar */}
+            <div className="mb-4">
+              <div className="relative">
+                <input
+                  type="text"
+                  placeholder="Pretraži boje..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full px-4 py-2 pl-10 pr-4 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500"
+                />
+                <svg className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+              </div>
+            </div>
+
+            {/* Colors Table */}
+            <div className="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow">
+              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead className="bg-gray-50 dark:bg-gray-700">
+                  <tr>
+                    <th className="px-6 py-3 text-left">
+                      <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-gray-700 dark:border-gray-600"
+                      />
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Boja</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Naziv</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Hex kod</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cena Refil</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cena Spulna</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Akcije</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                  {colors
+                    .filter(color => 
+                      color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                      color.hex.toLowerCase().includes(searchTerm.toLowerCase())
+                    )
+                    .map((color) => (
+                    <tr key={color.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <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-gray-700 dark:border-gray-600"
+                        />
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div 
+                          className="w-10 h-10 rounded border-2 border-gray-300 dark:border-gray-600" 
+                          style={{ backgroundColor: color.hex }}
+                        />
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{color.name}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{color.hex}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600 dark: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-500 dark: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-600 dark:text-blue-400 hover:text-blue-900 dark: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-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                          title="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>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </main>
+        </div>
+      </div>
+      
+      {/* Edit Modal */}
+      {editingColor && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-auto">
+            <div className="p-6">
+              <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">Izmeni boju</h3>
+              <ColorForm
+                color={editingColor}
+                onSave={(color) => {
+                  handleSave(color);
+                  setEditingColor(null);
+                }}
+                onCancel={() => setEditingColor(null)}
+                isModal={true}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Color Form Component
+function ColorForm({ 
+  color, 
+  onSave, 
+  onCancel,
+  isModal = false
+}: { 
+  color: Partial<Color>, 
+  onSave: (color: Partial<Color>) => void,
+  onCancel: () => void,
+  isModal?: boolean
+}) {
+  const [formData, setFormData] = useState({
+    name: color.name || '',
+    hex: color.hex || '#000000',
+    cena_refill: color.cena_refill || 3499,
+    cena_spulna: color.cena_spulna || 3999,
+  });
+  
+  // Check if this is a Bambu Lab predefined color
+  const isBambuLabColor = !!(formData.name && bambuLabColors.hasOwnProperty(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();
+    // Use Bambu Lab hex if it's a predefined color
+    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 ? "" : "mb-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow transition-colors"}>
+      {!isModal && (
+        <h2 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
+          {color.id ? 'Izmeni boju' : 'Dodaj novu boju'}
+        </h2>
+      )}
+      <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Naziv boje</label>
+          <input
+            type="text"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            required
+            placeholder="npr. Crvena"
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Hex kod boje</label>
+          <div className="flex gap-2 items-center">
+            <input
+              type="color"
+              name="hex"
+              value={isBambuLabColor && bambuHex ? bambuHex : formData.hex}
+              onChange={handleChange}
+              disabled={isBambuLabColor}
+              className={`w-12 h-12 p-1 border-2 border-gray-300 dark:border-gray-600 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-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 ${isBambuLabColor ? 'bg-gray-100 dark:bg-gray-900 cursor-not-allowed' : ''}`}
+            />
+          </div>
+          {isBambuLabColor && (
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              Bambu Lab predefinisana boja - hex kod se ne može menjati
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">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-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">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-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div className="md:col-span-2 flex justify-end gap-4 mt-4">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors"
+          >
+            Otkaži
+          </button>
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            Sačuvaj
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

app/upadaj/page.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import axios from 'axios';
+import { authService } from '@/src/services/api';
+import { trackEvent } from '@/src/components/MatomoAnalytics';
 
 export default function AdminLogin() {
   const router = useRouter();
@@ -11,26 +12,32 @@ export default function AdminLogin() {
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
 
+  // Set dark mode by default
+  useEffect(() => {
+    document.documentElement.classList.add('dark');
+  }, []);
+
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
     setLoading(true);
 
     try {
-      const response = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
+      const response = await authService.login(username, password);
-        username,
-        password
-      });
 
       // Store token in localStorage
-      localStorage.setItem('authToken', response.data.token);
+      localStorage.setItem('authToken', response.token);
-      localStorage.setItem('tokenExpiry', String(Date.now() + response.data.expiresIn * 1000));
+      localStorage.setItem('tokenExpiry', String(Date.now() + 24 * 60 * 60 * 1000)); // 24 hours
+
+      // Track successful login
+      trackEvent('Admin', 'Login', 'Success');
 
       // Redirect to admin dashboard
-      router.push('/admin/dashboard');
+      router.push('/upadaj/dashboard');
-    } catch (err) {
+    } catch (err: any) {
       setError('Neispravno korisničko ime ili lozinka');
       console.error('Login error:', err);
+      trackEvent('Admin', 'Login', 'Failed');
     } finally {
       setLoading(false);
     }
@@ -39,8 +46,13 @@ export default function AdminLogin() {
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
-        <div>
+        <div className="flex flex-col items-center">
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
+          <img 
+            src="/logo.png" 
+            alt="Filamenteka" 
+            className="h-40 w-auto mb-6 drop-shadow-lg"
+          />
+          <h2 className="text-center text-3xl font-extrabold text-gray-900 dark:text-white">
             Admin Prijava
           </h2>
           <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">

app/upadaj/requests/page.tsx

@@ -0,0 +1,360 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { colorRequestService } from '@/src/services/api';
+import Link from 'next/link';
+
+interface ColorRequest {
+  id: string;
+  color_name: string;
+  material_type: string;
+  finish_type: string;
+  user_email: string;
+  user_phone: string;
+  user_name: string;
+  description: string;
+  reference_url: string;
+  status: 'pending' | 'approved' | 'rejected' | 'completed';
+  admin_notes: string;
+  request_count: number;
+  created_at: string;
+  updated_at: string;
+  processed_at: string;
+  processed_by: string;
+}
+
+export default function ColorRequestsAdmin() {
+  const [requests, setRequests] = useState<ColorRequest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editForm, setEditForm] = useState({ status: '', admin_notes: '' });
+  const router = useRouter();
+
+  useEffect(() => {
+    checkAuth();
+    fetchRequests();
+  }, []);
+
+  const checkAuth = () => {
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+    
+    if (!token || !expiry || new Date().getTime() > parseInt(expiry)) {
+      router.push('/upadaj');
+    }
+  };
+
+  const fetchRequests = async () => {
+    try {
+      const data = await colorRequestService.getAll();
+      setRequests(data);
+    } catch (error) {
+      setError('Failed to fetch color requests');
+      console.error('Error:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleStatusUpdate = async (id: string) => {
+    try {
+      await colorRequestService.updateStatus(id, editForm.status, editForm.admin_notes);
+      await fetchRequests();
+      setEditingId(null);
+      setEditForm({ status: '', admin_notes: '' });
+    } catch (error) {
+      setError('Failed to update request');
+      console.error('Error:', error);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Are you sure you want to delete this request?')) return;
+    
+    try {
+      await colorRequestService.delete(id);
+      await fetchRequests();
+    } catch (error) {
+      setError('Failed to delete request');
+      console.error('Error:', error);
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    const colors = {
+      pending: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300',
+      approved: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
+      rejected: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300',
+      completed: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300'
+    };
+    return colors[status as keyof typeof colors] || 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300';
+  };
+
+  const getStatusLabel = (status: string) => {
+    const labels = {
+      pending: 'Na čekanju',
+      approved: 'Odobreno',
+      rejected: 'Odbijeno',
+      completed: 'Završeno'
+    };
+    return labels[status as keyof typeof labels] || status;
+  };
+
+  const formatDate = (dateString: string) => {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    const month = date.toLocaleDateString('sr-RS', { month: 'short' });
+    const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1);
+    return `${capitalizedMonth} ${date.getDate()}, ${date.getFullYear()}`;
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+        <div className="text-gray-500 dark:text-gray-400">Učitavanje zahteva za boje...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">Zahtevi za Boje</h1>
+          <div className="space-x-4">
+            <Link
+              href="/upadaj/dashboard"
+              className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+            >
+              Inventar
+            </Link>
+            <Link
+              href="/upadaj/colors"
+              className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+            >
+              Boje
+            </Link>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-4 bg-red-100 text-red-700 rounded">
+            {error}
+          </div>
+        )}
+
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-100 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Boja
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Materijal/Finiš
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Broj Zahteva
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Korisnik
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Status
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Datum
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Akcije
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {requests.map((request) => (
+                  <tr key={request.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                    <td className="px-4 py-3">
+                      <div>
+                        <div className="font-medium text-gray-900 dark:text-gray-100">{request.color_name}</div>
+                        {request.description && (
+                          <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">{request.description}</div>
+                        )}
+                        {request.reference_url && (
+                          <a 
+                            href={request.reference_url} 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                          >
+                            Pogledaj referencu
+                          </a>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="text-sm">
+                        <div className="text-gray-900 dark:text-gray-100">{request.material_type}</div>
+                        {request.finish_type && (
+                          <div className="text-gray-500 dark:text-gray-400">{request.finish_type}</div>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300">
+                        {request.request_count || 1} {(request.request_count || 1) === 1 ? 'zahtev' : 'zahteva'}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="text-sm">
+                        {request.user_email ? (
+                          <a href={`mailto:${request.user_email}`} className="text-blue-600 dark:text-blue-400 hover:underline">
+                            {request.user_email}
+                          </a>
+                        ) : (
+                          <span className="text-gray-400 dark:text-gray-500">Anonimno</span>
+                        )}
+                        {request.user_phone && (
+                          <div className="mt-1">
+                            <a href={`tel:${request.user_phone}`} className="text-blue-600 dark:text-blue-400 hover:underline">
+                              {request.user_phone}
+                            </a>
+                          </div>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3">
+                      {editingId === request.id ? (
+                        <div className="space-y-2">
+                          <select
+                            value={editForm.status}
+                            onChange={(e) => setEditForm({ ...editForm, status: e.target.value })}
+                            className="text-sm border rounded px-2 py-1"
+                          >
+                            <option value="">Izaberi status</option>
+                            <option value="pending">Na čekanju</option>
+                            <option value="approved">Odobreno</option>
+                            <option value="rejected">Odbijeno</option>
+                            <option value="completed">Završeno</option>
+                          </select>
+                          <textarea
+                            placeholder="Napomene..."
+                            value={editForm.admin_notes}
+                            onChange={(e) => setEditForm({ ...editForm, admin_notes: e.target.value })}
+                            className="text-sm border rounded px-2 py-1 w-full"
+                            rows={2}
+                          />
+                        </div>
+                      ) : (
+                        <div>
+                          <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusBadge(request.status)}`}>
+                            {getStatusLabel(request.status)}
+                          </span>
+                          {request.admin_notes && (
+                            <div className="text-xs text-gray-500 mt-1">{request.admin_notes}</div>
+                          )}
+                          {request.processed_by && (
+                            <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                              od {request.processed_by}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="text-sm text-gray-600 dark:text-gray-400">
+                        {formatDate(request.created_at)}
+                      </div>
+                      {request.processed_at && (
+                        <div className="text-xs text-gray-500 dark:text-gray-500">
+                          Obrađeno: {formatDate(request.processed_at)}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      {editingId === request.id ? (
+                        <div className="space-x-2">
+                          <button
+                            onClick={() => handleStatusUpdate(request.id)}
+                            className="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 text-sm"
+                          >
+                            Sačuvaj
+                          </button>
+                          <button
+                            onClick={() => {
+                              setEditingId(null);
+                              setEditForm({ status: '', admin_notes: '' });
+                            }}
+                            className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 text-sm"
+                          >
+                            Otkaži
+                          </button>
+                        </div>
+                      ) : (
+                        <div className="space-x-2">
+                          <button
+                            onClick={() => {
+                              setEditingId(request.id);
+                              setEditForm({ 
+                                status: request.status, 
+                                admin_notes: request.admin_notes || '' 
+                              });
+                            }}
+                            className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-sm"
+                          >
+                            Izmeni
+                          </button>
+                          <button
+                            onClick={() => handleDelete(request.id)}
+                            className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 text-sm"
+                          >
+                            Obriši
+                          </button>
+                        </div>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          
+          {requests.length === 0 && (
+            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+              Nema zahteva za boje
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 grid grid-cols-1 md:grid-cols-4 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 Zahteva</div>
+            <div className="text-2xl font-bold text-gray-800 dark:text-gray-100">
+              {requests.length}
+            </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">Na Čekanju</div>
+            <div className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">
+              {requests.filter(r => r.status === 'pending').length}
+            </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">Odobreno</div>
+            <div className="text-2xl font-bold text-green-600 dark:text-green-400">
+              {requests.filter(r => r.status === 'approved').length}
+            </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">Završeno</div>
+            <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+              {requests.filter(r => r.status === 'completed').length}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

config/environments.js

@@ -0,0 +1,19 @@
+// Environment configuration
+const environments = {
+  development: {
+    name: 'development',
+    apiUrl: process.env.NEXT_PUBLIC_API_URL || 'https://api.filamenteka.rs/api'
+  },
+  production: {
+    name: 'production',
+    apiUrl: process.env.NEXT_PUBLIC_API_URL
+  }
+};
+
+const currentEnv = process.env.NODE_ENV || 'development';
+
+module.exports = {
+  env: environments[currentEnv] || environments.development,
+  isDev: currentEnv === 'development',
+  isProd: currentEnv === 'production'
+};

database/migrations/002_add_new_finishes.sql

@@ -0,0 +1,71 @@
+-- Migration: Add documentation for new finish types
+-- Date: 2025-06-20
+-- Description: Document all available finish types for filaments
+
+-- The finish column already supports VARCHAR(50) which is sufficient
+-- This migration serves as documentation for available finish values
+
+-- Standard finishes:
+-- 'Basic' - Standard finish
+-- 'Matte' - Matte/non-glossy finish
+-- 'Silk' - Silk/shiny finish
+-- 'Silk+' - Enhanced silk finish
+-- 'Translucent' - Semi-transparent finish
+-- 'Silk Multi-Color' - Multi-color silk finish
+-- 'Basic Gradient' - Gradient color transition
+-- 'Sparkle' - Sparkle/glitter finish
+-- 'Metal' - Metallic finish
+-- 'Marble' - Marble-like texture
+-- 'Galaxy' - Galaxy/space-like finish
+-- 'Glow' - Glow-in-the-dark
+-- 'Wood' - Wood-filled composite
+
+-- Technical materials:
+-- 'CF' - Carbon Fiber reinforced
+-- 'GF' - Glass Fiber reinforced
+-- 'GF Aero' - Glass Fiber Aerospace grade
+-- 'FR' - Flame Retardant
+-- 'HF' - High Flow
+
+-- TPU/Flexible grades:
+-- '95A HF' - Shore 95A High Flow
+-- '90A' - Shore 90A hardness
+-- '85A' - Shore 85A hardness
+
+-- Optional: Create a finish_types table for validation (not enforced by FK to allow flexibility)
+CREATE TABLE IF NOT EXISTS finish_types (
+  id SERIAL PRIMARY KEY,
+  code VARCHAR(50) NOT NULL UNIQUE,
+  name VARCHAR(100) NOT NULL,
+  category VARCHAR(50),
+  description TEXT,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Insert all finish types for reference
+INSERT INTO finish_types (code, name, category, description) VALUES
+  ('Basic', 'Basic', 'Standard', 'Standard filament finish'),
+  ('Matte', 'Matte', 'Standard', 'Non-glossy matte finish'),
+  ('Silk', 'Silk', 'Standard', 'Shiny silk-like finish'),
+  ('Silk+', 'Silk Plus', 'Standard', 'Enhanced silk finish with extra shine'),
+  ('Translucent', 'Translucent', 'Standard', 'Semi-transparent finish'),
+  ('Silk Multi-Color', 'Silk Multi-Color', 'Special', 'Multi-color silk finish'),
+  ('Basic Gradient', 'Basic Gradient', 'Special', 'Gradient color transition'),
+  ('Sparkle', 'Sparkle', 'Special', 'Contains glitter particles'),
+  ('Metal', 'Metal', 'Special', 'Metallic appearance'),
+  ('Marble', 'Marble', 'Special', 'Marble-like texture and appearance'),
+  ('Galaxy', 'Galaxy', 'Special', 'Space/galaxy-like appearance'),
+  ('Glow', 'Glow', 'Special', 'Glow-in-the-dark properties'),
+  ('Wood', 'Wood', 'Composite', 'Wood-filled composite'),
+  ('CF', 'Carbon Fiber', 'Technical', 'Carbon fiber reinforced'),
+  ('GF', 'Glass Fiber', 'Technical', 'Glass fiber reinforced'),
+  ('GF Aero', 'Glass Fiber Aero', 'Technical', 'Aerospace grade glass fiber'),
+  ('FR', 'Flame Retardant', 'Technical', 'Flame retardant properties'),
+  ('HF', 'High Flow', 'Technical', 'High flow for detailed prints'),
+  ('95A HF', '95A High Flow', 'Flexible', 'Shore 95A hardness with high flow'),
+  ('90A', '90A', 'Flexible', 'Shore 90A hardness TPU'),
+  ('85A', '85A', 'Flexible', 'Shore 85A hardness TPU')
+ON CONFLICT (code) DO NOTHING;
+
+-- Add index for finish column if not exists
+CREATE INDEX IF NOT EXISTS idx_filaments_finish ON filaments(finish);

database/migrations/003_add_bambu_lab_colors.sql

@@ -0,0 +1,99 @@
+-- Migration: Add all Bambu Lab predefined colors
+-- Date: 2025-06-20
+-- Description: Import comprehensive Bambu Lab color palette
+
+-- Insert all Bambu Lab colors
+INSERT INTO colors (name, hex) VALUES
+  -- Basic Colors
+  ('Black', '#1A1A1A'),
+  ('White', '#FFFFFF'),
+  ('Red', '#E53935'),
+  ('Blue', '#1E88E5'),
+  ('Green', '#43A047'),
+  ('Yellow', '#FDD835'),
+  ('Orange', '#FB8C00'),
+  ('Purple', '#8E24AA'),
+  ('Pink', '#EC407A'),
+  ('Grey', '#757575'),
+  ('Brown', '#6D4C41'),
+  ('Light Blue', '#64B5F6'),
+  ('Light Green', '#81C784'),
+  ('Mint Green', '#4DB6AC'),
+  ('Lime Green', '#C0CA33'),
+  ('Sky Blue', '#81D4FA'),
+  ('Navy Blue', '#283593'),
+  ('Magenta', '#E91E63'),
+  ('Violet', '#7B1FA2'),
+  ('Beige', '#F5DEB3'),
+  ('Ivory', '#FFFFF0'),
+  
+  -- Matte Colors
+  ('Matte Black', '#212121'),
+  ('Matte White', '#FAFAFA'),
+  ('Matte Red', '#C62828'),
+  ('Matte Blue', '#1565C0'),
+  ('Matte Green', '#2E7D32'),
+  ('Matte Yellow', '#F9A825'),
+  ('Matte Orange', '#EF6C00'),
+  ('Matte Purple', '#6A1B9A'),
+  ('Matte Pink', '#D81B60'),
+  ('Matte Grey', '#616161'),
+  ('Matte Brown', '#4E342E'),
+  ('Matte Mint', '#26A69A'),
+  ('Matte Lime', '#9E9D24'),
+  ('Matte Navy', '#1A237E'),
+  ('Matte Coral', '#FF5252'),
+  
+  -- Silk Colors
+  ('Silk White', '#FEFEFE'),
+  ('Silk Black', '#0A0A0A'),
+  ('Silk Red', '#F44336'),
+  ('Silk Blue', '#2196F3'),
+  ('Silk Green', '#4CAF50'),
+  ('Silk Gold', '#FFD54F'),
+  ('Silk Silver', '#CFD8DC'),
+  ('Silk Purple', '#9C27B0'),
+  ('Silk Pink', '#F06292'),
+  ('Silk Orange', '#FF9800'),
+  ('Silk Bronze', '#A1887F'),
+  ('Silk Copper', '#BF6F3F'),
+  ('Silk Jade', '#00897B'),
+  ('Silk Rose Gold', '#E8A09A'),
+  ('Silk Pearl', '#F8F8FF'),
+  ('Silk Ruby', '#E91E63'),
+  ('Silk Sapphire', '#1976D2'),
+  ('Silk Emerald', '#00695C'),
+  
+  -- Metal Colors
+  ('Metal Grey', '#9E9E9E'),
+  ('Metal Silver', '#B0BEC5'),
+  ('Metal Gold', '#D4AF37'),
+  ('Metal Copper', '#B87333'),
+  ('Metal Bronze', '#CD7F32'),
+  
+  -- Sparkle Colors
+  ('Sparkle Red', '#EF5350'),
+  ('Sparkle Blue', '#42A5F5'),
+  ('Sparkle Green', '#66BB6A'),
+  ('Sparkle Purple', '#AB47BC'),
+  ('Sparkle Gold', '#FFCA28'),
+  ('Sparkle Silver', '#E0E0E0'),
+  
+  -- Glow Colors
+  ('Glow in the Dark Green', '#C8E6C9'),
+  ('Glow in the Dark Blue', '#BBDEFB'),
+  
+  -- Transparent Colors
+  ('Clear', '#FFFFFF'),
+  ('Transparent Red', '#EF5350'),
+  ('Transparent Blue', '#42A5F5'),
+  ('Transparent Green', '#66BB6A'),
+  ('Transparent Yellow', '#FFEE58'),
+  ('Transparent Orange', '#FFA726'),
+  ('Transparent Purple', '#AB47BC'),
+  
+  -- Support Materials
+  ('Natural', '#F5F5DC'),
+  ('Support White', '#F5F5F5'),
+  ('Support G', '#90CAF9')
+ON CONFLICT (name) DO UPDATE SET hex = EXCLUDED.hex;

database/migrations/004_remove_brand_column.sql

@@ -0,0 +1,2 @@
+-- Migration to remove brand column from filaments table
+ALTER TABLE filaments DROP COLUMN IF EXISTS brand CASCADE;

database/migrations/005_remove_serbian_colors.sql

@@ -0,0 +1,2 @@
+-- Migration to remove Serbian colors from boje table
+DELETE FROM boje WHERE name IN ('Bela', 'Crna', 'Crvena', 'Plava', 'Zelena', 'Žuta', 'Narandžasta', 'Ljubičasta', 'Siva', 'Braon');

database/migrations/006_add_basic_refill_filaments.sql

@@ -0,0 +1,29 @@
+-- Add 1 refill filament for each color as user owns all basic colors
+-- This creates PLA Basic filaments with 1 refill for each color in the database
+
+-- First, let's insert filaments for all existing colors
+INSERT INTO filaments (tip, finish, boja, boja_hex, refill, spulna, kolicina, cena)
+SELECT 
+    'PLA' as tip,
+    'Basic' as finish,
+    c.name as boja,
+    c.hex as boja_hex,
+    1 as refill,
+    0 as spulna,
+    1 as kolicina,
+    '3999' as cena
+FROM colors c
+WHERE NOT EXISTS (
+    -- Only insert if this exact combination doesn't already exist
+    SELECT 1 FROM filaments f 
+    WHERE f.tip = 'PLA' 
+    AND f.finish = 'Basic' 
+    AND f.boja = c.name
+);
+
+-- Update any existing PLA Basic filaments to have at least 1 refill
+UPDATE filaments
+SET refill = '1'
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND (refill IS NULL OR refill = '0' OR refill = '');

database/migrations/007_remove_otvoreno_column.sql

@@ -0,0 +1,2 @@
+-- Remove otvoreno column from filaments table
+ALTER TABLE filaments DROP COLUMN IF EXISTS otvoreno;

database/migrations/008_update_vakum_to_spulna.sql

@@ -0,0 +1,5 @@
+-- Rename vakum column to spulna
+ALTER TABLE filaments RENAME COLUMN vakum TO spulna;
+
+-- Update existing data to use 'spulna' instead of 'vakuum'
+UPDATE filaments SET spulna = REPLACE(spulna, 'vakuum', 'spulna') WHERE spulna LIKE '%vakuum%';

database/migrations/009_update_refill_only_colors.sql

@@ -0,0 +1,48 @@
+-- Update spulna to '0' for colors that only come as refills
+UPDATE filaments 
+SET spulna = '0' 
+WHERE boja IN (
+  'Beige',
+  'Light Gray',
+  'Yellow',
+  'Orange',
+  'Gold',
+  'Bright Green',
+  'Pink',
+  'Magenta',
+  'Maroon Red',
+  'Purple',
+  'Turquoise',
+  'Cobalt Blue',
+  'Brown',
+  'Bronze',
+  'Silver',
+  'Blue Grey',
+  'Dark Gray'
+);
+
+-- Also update their quantity to be based only on refill count
+UPDATE filaments 
+SET kolicina = CASE 
+  WHEN refill ~ '^\d+$' THEN CAST(refill AS INTEGER)
+  ELSE 0
+END
+WHERE boja IN (
+  'Beige',
+  'Light Gray',
+  'Yellow',
+  'Orange',
+  'Gold',
+  'Bright Green',
+  'Pink',
+  'Magenta',
+  'Maroon Red',
+  'Purple',
+  'Turquoise',
+  'Cobalt Blue',
+  'Brown',
+  'Bronze',
+  'Silver',
+  'Blue Grey',
+  'Dark Gray'
+);

database/migrations/010_fix_quantity_calculations.sql

@@ -0,0 +1,43 @@
+-- Fix quantity calculations to be the sum of refill + spulna counts
+UPDATE filaments 
+SET kolicina = 
+  COALESCE(
+    CASE 
+      WHEN refill ~ '^\d+$' THEN CAST(refill AS INTEGER)
+      ELSE 0
+    END, 0
+  ) + 
+  COALESCE(
+    CASE 
+      WHEN spulna ~ '^(\d+)\s*spuln' THEN 
+        CAST(SUBSTRING(spulna FROM '^(\d+)\s*spuln') AS INTEGER)
+      ELSE 0
+    END, 0
+  );
+
+-- Specifically fix refill-only colors to ensure quantity matches refill count
+UPDATE filaments 
+SET kolicina = 
+  CASE 
+    WHEN refill ~ '^\d+$' THEN CAST(refill AS INTEGER)
+    ELSE 0
+  END
+WHERE boja IN (
+  'Beige',
+  'Light Gray',
+  'Yellow',
+  'Orange',
+  'Gold',
+  'Bright Green',
+  'Pink',
+  'Magenta',
+  'Maroon Red',
+  'Purple',
+  'Turquoise',
+  'Cobalt Blue',
+  'Brown',
+  'Bronze',
+  'Silver',
+  'Blue Grey',
+  'Dark Gray'
+);

database/migrations/011_standardize_data_types.sql

@@ -0,0 +1,36 @@
+-- Standardize data types for refill and spulna columns
+-- First, convert existing string values to integers
+
+-- Create temporary columns
+ALTER TABLE filaments ADD COLUMN refill_new INTEGER DEFAULT 0;
+ALTER TABLE filaments ADD COLUMN spulna_new INTEGER DEFAULT 0;
+
+-- Convert refill values
+UPDATE filaments 
+SET refill_new = CASE 
+  WHEN refill ~ '^\d+$' THEN CAST(refill AS INTEGER)
+  WHEN LOWER(refill) = 'da' THEN 1
+  ELSE 0
+END;
+
+-- Convert spulna values (extract number from "X spulna" format)
+UPDATE filaments 
+SET spulna_new = CASE 
+  WHEN spulna ~ '^(\d+)\s*spuln' THEN 
+    CAST(SUBSTRING(spulna FROM '^(\d+)\s*spuln') AS INTEGER)
+  WHEN spulna ~ '^\d+$' THEN CAST(spulna AS INTEGER)
+  ELSE 0
+END;
+
+-- Drop old columns and rename new ones
+ALTER TABLE filaments DROP COLUMN refill;
+ALTER TABLE filaments DROP COLUMN spulna;
+ALTER TABLE filaments RENAME COLUMN refill_new TO refill;
+ALTER TABLE filaments RENAME COLUMN spulna_new TO spulna;
+
+-- Update kolicina to ensure it matches refill + spulna
+UPDATE filaments SET kolicina = refill + spulna;
+
+-- Add check constraint to ensure kolicina is always the sum of refill and spulna
+ALTER TABLE filaments ADD CONSTRAINT check_kolicina 
+  CHECK (kolicina = refill + spulna);

database/migrations/012_add_color_prices.sql

@@ -0,0 +1,7 @@
+-- Add price fields to colors table
+ALTER TABLE colors 
+ADD COLUMN cena_refill INTEGER DEFAULT 3499,
+ADD COLUMN cena_spulna INTEGER DEFAULT 3999;
+
+-- Update existing colors with default prices
+UPDATE colors SET cena_refill = 3499, cena_spulna = 3999;

database/migrations/013_add_pla_basic_colors.sql

@@ -0,0 +1,96 @@
+-- Migration: Add specific PLA Basic colors
+-- This migration adds the specific set of colors for PLA Basic filaments
+
+-- First, let's add any missing colors to the colors table
+INSERT INTO colors (name, hex) VALUES 
+    ('Jade White', '#FFFFFF'),
+    ('Beige', '#F7E6DE'),
+    ('Light Gray', '#D0D2D4'),
+    ('Yellow', '#F4EE2A'),
+    ('Sunflower Yellow', '#FEC601'),
+    ('Pumpkin Orange', '#FF8E16'),
+    ('Orange', '#FF6A13'),
+    ('Gold', '#E4BD68'),
+    ('Bright Green', '#BDCF00'),
+    ('Bambu Green', '#16C344'),
+    ('Mistletoe Green', '#3F8E43'),
+    ('Pink', '#F55A74'),
+    ('Hot Pink', '#F5547D'),
+    ('Magenta', '#EC008C'),
+    ('Red', '#C12E1F'),
+    ('Maroon Red', '#832140'),
+    ('Purple', '#5E43B7'),
+    ('Indigo Purple', '#482A60'),
+    ('Turquoise', '#00B1B7'),
+    ('Cyan', '#0086D6'),
+    ('Cobalt Blue', '#0055B8'),
+    ('Blue', '#0A2989'),
+    ('Brown', '#9D432C'),
+    ('Cocoa Brown', '#6F5034'),
+    ('Bronze', '#847D48'),
+    ('Gray', '#8E9089'),
+    ('Silver', '#A6A9AA'),
+    ('Blue Grey', '#5B6579'),
+    ('Dark Gray', '#555555'),
+    ('Black', '#000000'),
+    ('Latte Brown', '#D3B7A7')
+ON CONFLICT (name) 
+DO UPDATE SET hex = EXCLUDED.hex;
+
+-- Now add PLA Basic filaments for each of these colors
+-- We'll add them with 1 refill and 1 spool each
+INSERT INTO filaments (tip, finish, boja, boja_hex, refill, spulna, kolicina, cena)
+SELECT 
+    'PLA' as tip,
+    'Basic' as finish,
+    c.name as boja,
+    c.hex as boja_hex,
+    1 as refill,
+    1 as spulna,
+    2 as kolicina,
+    '3499/3999' as cena
+FROM colors c
+WHERE c.name IN (
+    'Jade White', 'Beige', 'Light Gray', 'Yellow', 'Sunflower Yellow',
+    'Pumpkin Orange', 'Orange', 'Gold', 'Bright Green', 'Bambu Green',
+    'Mistletoe Green', 'Pink', 'Hot Pink', 'Magenta', 'Red',
+    'Maroon Red', 'Purple', 'Indigo Purple', 'Turquoise', 'Cyan',
+    'Cobalt Blue', 'Blue', 'Brown', 'Cocoa Brown', 'Bronze',
+    'Gray', 'Silver', 'Blue Grey', 'Dark Gray', 'Black', 'Latte Brown'
+)
+AND NOT EXISTS (
+    SELECT 1 FROM filaments f 
+    WHERE f.tip = 'PLA' 
+    AND f.finish = 'Basic' 
+    AND f.boja = c.name
+);
+
+-- Update any existing PLA Basic filaments to ensure they have correct inventory
+UPDATE filaments 
+SET refill = 1, spulna = 1, kolicina = 2, cena = '3499/3999'
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND boja IN (
+    'Jade White', 'Beige', 'Light Gray', 'Yellow', 'Sunflower Yellow',
+    'Pumpkin Orange', 'Orange', 'Gold', 'Bright Green', 'Bambu Green',
+    'Mistletoe Green', 'Pink', 'Hot Pink', 'Magenta', 'Red',
+    'Maroon Red', 'Purple', 'Indigo Purple', 'Turquoise', 'Cyan',
+    'Cobalt Blue', 'Blue', 'Brown', 'Cocoa Brown', 'Bronze',
+    'Gray', 'Silver', 'Blue Grey', 'Dark Gray', 'Black', 'Latte Brown'
+);
+
+-- Zero out ALL other filaments (not PLA Basic with these specific colors)
+UPDATE filaments 
+SET refill = 0, spulna = 0, kolicina = 0
+WHERE NOT (
+    tip = 'PLA' 
+    AND finish = 'Basic'
+    AND boja IN (
+        'Jade White', 'Beige', 'Light Gray', 'Yellow', 'Sunflower Yellow',
+        'Pumpkin Orange', 'Orange', 'Gold', 'Bright Green', 'Bambu Green',
+        'Mistletoe Green', 'Pink', 'Hot Pink', 'Magenta', 'Red',
+        'Maroon Red', 'Purple', 'Indigo Purple', 'Turquoise', 'Cyan',
+        'Cobalt Blue', 'Blue', 'Brown', 'Cocoa Brown', 'Bronze',
+        'Gray', 'Silver', 'Blue Grey', 'Dark Gray', 'Black', 'Latte Brown'
+    )
+);

database/migrations/014_add_sale_fields.sql

@@ -0,0 +1,10 @@
+-- Add sale fields to filaments table
+ALTER TABLE filaments 
+ADD COLUMN IF NOT EXISTS sale_percentage INTEGER DEFAULT 0 CHECK (sale_percentage >= 0 AND sale_percentage <= 100),
+ADD COLUMN IF NOT EXISTS sale_active BOOLEAN DEFAULT FALSE,
+ADD COLUMN IF NOT EXISTS sale_start_date TIMESTAMP WITH TIME ZONE,
+ADD COLUMN IF NOT EXISTS sale_end_date TIMESTAMP WITH TIME ZONE;
+
+-- Add indexes for better performance
+CREATE INDEX IF NOT EXISTS idx_filaments_sale_active ON filaments(sale_active) WHERE sale_active = TRUE;
+CREATE INDEX IF NOT EXISTS idx_filaments_sale_dates ON filaments(sale_start_date, sale_end_date) WHERE sale_active = TRUE;

database/migrations/015_fix_refill_only_colors.sql

@@ -0,0 +1,83 @@
+-- Migration: Fix refill-only colors to have 0 spools instead of 1
+-- These colors should only be available as refills, not as regular spools
+
+-- First, add Nardo Gray to colors table if it doesn't exist
+INSERT INTO colors (name, hex) VALUES 
+    ('Nardo Gray', '#747474')
+ON CONFLICT (name) DO NOTHING;
+
+-- Update all refill-only colors to have spulna = 0
+-- This ensures they can only be purchased as refills
+UPDATE filaments 
+SET 
+    spulna = 0,
+    kolicina = refill  -- Total quantity should equal refill count only
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND boja IN (
+    -- Colors specified by user as refill-only
+    'Nardo Gray',
+    'Blue Grey',     -- Note: Database uses "Blue Grey" not "Blue Gray"
+    'Light Gray',
+    'Brown',
+    'Beige',
+    'Bronze',
+    'Purple',
+    'Cobalt Blue',
+    'Turquoise',
+    'Bright Green',
+    'Yellow',
+    'Gold',
+    'Orange',
+    'Maroon Red'
+);
+
+-- Also handle any existing entries with alternate spellings
+UPDATE filaments 
+SET 
+    spulna = 0,
+    kolicina = refill
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND (
+    boja = 'Blue Gray'  -- Handle alternate spelling if it exists
+);
+
+-- Ensure these colors maintain their refill-only status
+-- even if they don't exist yet (for future inserts)
+INSERT INTO filaments (tip, finish, boja, boja_hex, refill, spulna, kolicina, cena)
+SELECT 
+    'PLA' as tip,
+    'Basic' as finish,
+    c.name as boja,
+    c.hex as boja_hex,
+    0 as refill,      -- Start with 0 refills
+    0 as spulna,      -- Always 0 spools for refill-only
+    0 as kolicina,    -- Total is 0
+    '3499' as cena    -- Refill price only
+FROM colors c
+WHERE c.name IN (
+    'Nardo Gray',
+    'Blue Grey',
+    'Light Gray', 
+    'Brown',
+    'Beige',
+    'Bronze',
+    'Purple',
+    'Cobalt Blue',
+    'Turquoise',
+    'Bright Green',
+    'Yellow',
+    'Gold',
+    'Orange',
+    'Maroon Red'
+)
+AND NOT EXISTS (
+    SELECT 1 FROM filaments f 
+    WHERE f.tip = 'PLA' 
+    AND f.finish = 'Basic' 
+    AND f.boja = c.name
+);
+
+-- Add a comment to track which colors are refill-only
+COMMENT ON TABLE filaments IS 'Filament inventory. Note: The following PLA Basic colors are refill-only (spulna must always be 0): Nardo Gray, Blue Grey, Light Gray, Brown, Beige, Bronze, Purple, Cobalt Blue, Turquoise, Bright Green, Yellow, Gold, Orange, Maroon Red';

database/migrations/016_add_color_requests.sql

@@ -0,0 +1,35 @@
+-- Migration: Add color requests feature
+-- Allows users to request new colors and admins to view/manage requests
+
+-- Create color_requests table
+CREATE TABLE IF NOT EXISTS color_requests (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    color_name VARCHAR(100) NOT NULL,
+    material_type VARCHAR(50) NOT NULL,
+    finish_type VARCHAR(50),
+    user_email VARCHAR(255),
+    user_name VARCHAR(100),
+    description TEXT,
+    reference_url VARCHAR(500),
+    status VARCHAR(20) DEFAULT 'pending' CHECK (status IN ('pending', 'approved', 'rejected', 'completed')),
+    admin_notes TEXT,
+    request_count INTEGER DEFAULT 1,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    processed_at TIMESTAMP WITH TIME ZONE,
+    processed_by VARCHAR(100)
+);
+
+-- Create indexes for better performance
+CREATE INDEX idx_color_requests_status ON color_requests(status);
+CREATE INDEX idx_color_requests_created_at ON color_requests(created_at DESC);
+CREATE INDEX idx_color_requests_color_name ON color_requests(LOWER(color_name));
+
+-- Apply updated_at trigger to color_requests table
+CREATE TRIGGER update_color_requests_updated_at BEFORE UPDATE
+    ON color_requests FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Add comment to describe the table
+COMMENT ON TABLE color_requests IS 'User requests for new filament colors to be added to inventory';
+COMMENT ON COLUMN color_requests.status IS 'Request status: pending (new), approved (will be ordered), rejected (won''t be added), completed (added to inventory)';
+COMMENT ON COLUMN color_requests.request_count IS 'Number of users who have requested this same color';

database/migrations/017_add_phone_to_color_requests.sql

@@ -0,0 +1,8 @@
+-- Migration: Add phone field to color_requests table
+-- Allows users to provide phone number for contact
+
+ALTER TABLE color_requests 
+ADD COLUMN IF NOT EXISTS user_phone VARCHAR(50);
+
+-- Add comment to describe the new column
+COMMENT ON COLUMN color_requests.user_phone IS 'User phone number for contact (optional)';

database/migrations/018_make_contact_fields_required.sql

@@ -0,0 +1,22 @@
+-- Migration: Make email and phone fields required in color_requests table
+-- These fields are now mandatory for all color requests
+
+-- First, update any existing NULL values to prevent constraint violation
+UPDATE color_requests 
+SET user_email = 'unknown@example.com' 
+WHERE user_email IS NULL;
+
+UPDATE color_requests 
+SET user_phone = 'unknown' 
+WHERE user_phone IS NULL;
+
+-- Now add NOT NULL constraints
+ALTER TABLE color_requests 
+ALTER COLUMN user_email SET NOT NULL;
+
+ALTER TABLE color_requests 
+ALTER COLUMN user_phone SET NOT NULL;
+
+-- Update comments to reflect the requirement
+COMMENT ON COLUMN color_requests.user_email IS 'User email address for contact (required)';
+COMMENT ON COLUMN color_requests.user_phone IS 'User phone number for contact (required)';

database/schema.sql

@@ -0,0 +1,56 @@
+-- Filamenteka PostgreSQL Schema
+
+-- Enable UUID extension
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
+
+-- Colors table
+CREATE TABLE colors (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  name VARCHAR(100) NOT NULL UNIQUE,
+  hex VARCHAR(7) NOT NULL,
+  cena_refill INTEGER DEFAULT 3499,
+  cena_spulna INTEGER DEFAULT 3999,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Filaments table
+CREATE TABLE filaments (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  tip VARCHAR(50) NOT NULL,
+  finish VARCHAR(50) NOT NULL,
+  boja VARCHAR(100) NOT NULL,
+  boja_hex VARCHAR(7),
+  refill INTEGER DEFAULT 0,
+  spulna INTEGER DEFAULT 0,
+  kolicina INTEGER DEFAULT 0,
+  cena VARCHAR(50),
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_color FOREIGN KEY (boja) REFERENCES colors(name) ON UPDATE CASCADE,
+  CONSTRAINT check_kolicina CHECK (kolicina = refill + spulna)
+);
+
+-- Create indexes for better performance
+CREATE INDEX idx_filaments_tip ON filaments(tip);
+CREATE INDEX idx_filaments_boja ON filaments(boja);
+CREATE INDEX idx_filaments_created_at ON filaments(created_at);
+
+-- Create updated_at trigger function
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = CURRENT_TIMESTAMP;
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+-- Apply trigger to filaments table
+CREATE TRIGGER update_filaments_updated_at BEFORE UPDATE
+    ON filaments FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Apply trigger to colors table
+CREATE TRIGGER update_colors_updated_at BEFORE UPDATE
+    ON colors FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Default colors are now inserted by Bambu Lab colors migration

jest.setup.js

@@ -1 +1,24 @@
 import '@testing-library/jest-dom'
+
+// Add TextEncoder/TextDecoder globals for Node.js environment
+const { TextEncoder, TextDecoder } = require('util');
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
+
+// Mock axios globally
+jest.mock('axios', () => ({
+  create: jest.fn(() => ({
+    get: jest.fn(),
+    post: jest.fn(),
+    put: jest.fn(),
+    delete: jest.fn(),
+    interceptors: {
+      request: {
+        use: jest.fn()
+      },
+      response: {
+        use: jest.fn()
+      }
+    }
+  }))
+}))

lambda/auth/index.js

@@ -1,110 +0,0 @@
-const jwt = require('jsonwebtoken');
-const bcrypt = require('bcryptjs');
-
-const JWT_SECRET = process.env.JWT_SECRET;
-const ADMIN_USERNAME = process.env.ADMIN_USERNAME;
-const ADMIN_PASSWORD_HASH = process.env.ADMIN_PASSWORD_HASH;
-
-// CORS headers
-const headers = {
-  'Content-Type': 'application/json',
-  'Access-Control-Allow-Origin': process.env.CORS_ORIGIN || '*',
-  'Access-Control-Allow-Headers': 'Content-Type,Authorization',
-  'Access-Control-Allow-Methods': 'POST,OPTIONS'
-};
-
-// Helper function to create response
-const createResponse = (statusCode, body) => ({
-  statusCode,
-  headers,
-  body: JSON.stringify(body)
-});
-
-// Login handler
-const login = async (event) => {
-  try {
-    const { username, password } = JSON.parse(event.body);
-
-    // Validate credentials
-    if (username !== ADMIN_USERNAME) {
-      return createResponse(401, { error: 'Invalid credentials' });
-    }
-
-    // Compare password with hash
-    const isValid = await bcrypt.compare(password, ADMIN_PASSWORD_HASH);
-    if (!isValid) {
-      return createResponse(401, { error: 'Invalid credentials' });
-    }
-
-    // Generate JWT token
-    const token = jwt.sign(
-      { username, role: 'admin' },
-      JWT_SECRET,
-      { expiresIn: '24h' }
-    );
-
-    return createResponse(200, {
-      token,
-      expiresIn: 86400 // 24 hours in seconds
-    });
-  } catch (error) {
-    console.error('Login error:', error);
-    return createResponse(500, { error: 'Authentication failed' });
-  }
-};
-
-// Verify token (for Lambda authorizer)
-const verifyToken = async (event) => {
-  try {
-    const token = event.authorizationToken?.replace('Bearer ', '');
-    
-    if (!token) {
-      throw new Error('Unauthorized');
-    }
-
-    const decoded = jwt.verify(token, JWT_SECRET);
-    
-    return {
-      principalId: decoded.username,
-      policyDocument: {
-        Version: '2012-10-17',
-        Statement: [
-          {
-            Action: 'execute-api:Invoke',
-            Effect: 'Allow',
-            Resource: event.methodArn
-          }
-        ]
-      },
-      context: {
-        username: decoded.username,
-        role: decoded.role
-      }
-    };
-  } catch (error) {
-    console.error('Token verification error:', error);
-    throw new Error('Unauthorized');
-  }
-};
-
-// Main handler
-exports.handler = async (event) => {
-  const { httpMethod, resource } = event;
-
-  // Handle CORS preflight
-  if (httpMethod === 'OPTIONS') {
-    return createResponse(200, {});
-  }
-
-  // Handle login
-  if (resource === '/auth/login' && httpMethod === 'POST') {
-    return login(event);
-  }
-
-  // Handle token verification (for Lambda authorizer)
-  if (event.type === 'TOKEN') {
-    return verifyToken(event);
-  }
-
-  return createResponse(404, { error: 'Not found' });
-};

lambda/auth/package-lock.json

@@ -1,161 +0,0 @@
-{
-  "name": "auth-api",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "auth-api",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "bcryptjs": "^2.4.3",
-        "jsonwebtoken": "^9.0.2"
-      }
-    },
-    "node_modules/bcryptjs": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
-      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
-      "license": "MIT"
-    },
-    "node_modules/buffer-equal-constant-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/ecdsa-sig-formatter": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/jsonwebtoken": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
-      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
-      "license": "MIT",
-      "dependencies": {
-        "jws": "^3.2.2",
-        "lodash.includes": "^4.3.0",
-        "lodash.isboolean": "^3.0.3",
-        "lodash.isinteger": "^4.0.4",
-        "lodash.isnumber": "^3.0.3",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.isstring": "^4.0.1",
-        "lodash.once": "^4.0.0",
-        "ms": "^2.1.1",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": ">=12",
-        "npm": ">=6"
-      }
-    },
-    "node_modules/jwa": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
-      "integrity": "sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==",
-      "license": "MIT",
-      "dependencies": {
-        "buffer-equal-constant-time": "^1.0.1",
-        "ecdsa-sig-formatter": "1.0.11",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/jws": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
-      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-      "license": "MIT",
-      "dependencies": {
-        "jwa": "^1.4.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/lodash.includes": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isboolean": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isinteger": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isnumber": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.once": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "license": "MIT"
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    }
-  }
-}

lambda/auth/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "auth-api",
-  "version": "1.0.0",
-  "description": "Lambda function for authentication",
-  "main": "index.js",
-  "dependencies": {
-    "bcryptjs": "^2.4.3",
-    "jsonwebtoken": "^9.0.2"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs"
-}

lambda/filaments/index.js

@@ -1,232 +0,0 @@
-const AWS = require('aws-sdk');
-const dynamodb = new AWS.DynamoDB.DocumentClient();
-const { v4: uuidv4 } = require('uuid');
-
-const TABLE_NAME = process.env.TABLE_NAME;
-
-// CORS headers
-const headers = {
-  'Content-Type': 'application/json',
-  'Access-Control-Allow-Origin': process.env.CORS_ORIGIN || '*',
-  'Access-Control-Allow-Headers': 'Content-Type,Authorization',
-  'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE,OPTIONS'
-};
-
-// Helper function to create response
-const createResponse = (statusCode, body) => ({
-  statusCode,
-  headers,
-  body: JSON.stringify(body)
-});
-
-// GET all filaments or filter by query params
-const getFilaments = async (event) => {
-  try {
-    const queryParams = event.queryStringParameters || {};
-    
-    let params = {
-      TableName: TABLE_NAME
-    };
-
-    // If filtering by brand, type, or status, use the appropriate index
-    if (queryParams.brand) {
-      params = {
-        ...params,
-        IndexName: 'brand-index',
-        KeyConditionExpression: 'brand = :brand',
-        ExpressionAttributeValues: {
-          ':brand': queryParams.brand
-        }
-      };
-      const result = await dynamodb.query(params).promise();
-      return createResponse(200, result.Items);
-    } else if (queryParams.tip) {
-      params = {
-        ...params,
-        IndexName: 'tip-index',
-        KeyConditionExpression: 'tip = :tip',
-        ExpressionAttributeValues: {
-          ':tip': queryParams.tip
-        }
-      };
-      const result = await dynamodb.query(params).promise();
-      return createResponse(200, result.Items);
-    } else if (queryParams.status) {
-      params = {
-        ...params,
-        IndexName: 'status-index',
-        KeyConditionExpression: 'status = :status',
-        ExpressionAttributeValues: {
-          ':status': queryParams.status
-        }
-      };
-      const result = await dynamodb.query(params).promise();
-      return createResponse(200, result.Items);
-    }
-
-    // Get all items
-    const result = await dynamodb.scan(params).promise();
-    return createResponse(200, result.Items);
-  } catch (error) {
-    console.error('Error getting filaments:', error);
-    return createResponse(500, { error: 'Failed to fetch filaments' });
-  }
-};
-
-// GET single filament by ID
-const getFilament = async (event) => {
-  try {
-    const { id } = event.pathParameters;
-    
-    const params = {
-      TableName: TABLE_NAME,
-      Key: { id }
-    };
-
-    const result = await dynamodb.get(params).promise();
-    
-    if (!result.Item) {
-      return createResponse(404, { error: 'Filament not found' });
-    }
-
-    return createResponse(200, result.Item);
-  } catch (error) {
-    console.error('Error getting filament:', error);
-    return createResponse(500, { error: 'Failed to fetch filament' });
-  }
-};
-
-// POST - Create new filament
-const createFilament = async (event) => {
-  try {
-    const body = JSON.parse(event.body);
-    const timestamp = new Date().toISOString();
-    
-    // Determine status based on vakum and otvoreno fields
-    let status = 'new';
-    if (body.otvoreno && body.otvoreno.toLowerCase().includes('otvorena')) {
-      status = 'opened';
-    } else if (body.refill && body.refill.toLowerCase() === 'da') {
-      status = 'refill';
-    }
-    
-    const item = {
-      id: uuidv4(),
-      ...body,
-      status,
-      createdAt: timestamp,
-      updatedAt: timestamp
-    };
-
-    const params = {
-      TableName: TABLE_NAME,
-      Item: item
-    };
-
-    await dynamodb.put(params).promise();
-    return createResponse(201, item);
-  } catch (error) {
-    console.error('Error creating filament:', error);
-    return createResponse(500, { error: 'Failed to create filament' });
-  }
-};
-
-// PUT - Update filament
-const updateFilament = async (event) => {
-  try {
-    const { id } = event.pathParameters;
-    const body = JSON.parse(event.body);
-    const timestamp = new Date().toISOString();
-    
-    // Determine status based on vakum and otvoreno fields
-    let status = 'new';
-    if (body.otvoreno && body.otvoreno.toLowerCase().includes('otvorena')) {
-      status = 'opened';
-    } else if (body.refill && body.refill.toLowerCase() === 'da') {
-      status = 'refill';
-    }
-
-    const params = {
-      TableName: TABLE_NAME,
-      Key: { id },
-      UpdateExpression: `SET 
-        brand = :brand,
-        tip = :tip,
-        finish = :finish,
-        boja = :boja,
-        refill = :refill,
-        vakum = :vakum,
-        otvoreno = :otvoreno,
-        kolicina = :kolicina,
-        cena = :cena,
-        #status = :status,
-        updatedAt = :updatedAt`,
-      ExpressionAttributeNames: {
-        '#status': 'status'
-      },
-      ExpressionAttributeValues: {
-        ':brand': body.brand,
-        ':tip': body.tip,
-        ':finish': body.finish,
-        ':boja': body.boja,
-        ':refill': body.refill,
-        ':vakum': body.vakum,
-        ':otvoreno': body.otvoreno,
-        ':kolicina': body.kolicina,
-        ':cena': body.cena,
-        ':status': status,
-        ':updatedAt': timestamp
-      },
-      ReturnValues: 'ALL_NEW'
-    };
-
-    const result = await dynamodb.update(params).promise();
-    return createResponse(200, result.Attributes);
-  } catch (error) {
-    console.error('Error updating filament:', error);
-    return createResponse(500, { error: 'Failed to update filament' });
-  }
-};
-
-// DELETE filament
-const deleteFilament = async (event) => {
-  try {
-    const { id } = event.pathParameters;
-    
-    const params = {
-      TableName: TABLE_NAME,
-      Key: { id }
-    };
-
-    await dynamodb.delete(params).promise();
-    return createResponse(200, { message: 'Filament deleted successfully' });
-  } catch (error) {
-    console.error('Error deleting filament:', error);
-    return createResponse(500, { error: 'Failed to delete filament' });
-  }
-};
-
-// Main handler
-exports.handler = async (event) => {
-  const { httpMethod, resource } = event;
-
-  // Handle CORS preflight
-  if (httpMethod === 'OPTIONS') {
-    return createResponse(200, {});
-  }
-
-  // Route requests
-  if (resource === '/filaments' && httpMethod === 'GET') {
-    return getFilaments(event);
-  } else if (resource === '/filaments' && httpMethod === 'POST') {
-    return createFilament(event);
-  } else if (resource === '/filaments/{id}' && httpMethod === 'GET') {
-    return getFilament(event);
-  } else if (resource === '/filaments/{id}' && httpMethod === 'PUT') {
-    return updateFilament(event);
-  } else if (resource === '/filaments/{id}' && httpMethod === 'DELETE') {
-    return deleteFilament(event);
-  }
-
-  return createResponse(404, { error: 'Not found' });
-};

lambda/filaments/package-lock.json

@@ -1,593 +0,0 @@
-{
-  "name": "filaments-api",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "filaments-api",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "aws-sdk": "^2.1692.0",
-        "uuid": "^9.0.1"
-      }
-    },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
-      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
-      "license": "MIT",
-      "dependencies": {
-        "possible-typed-array-names": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/aws-sdk": {
-      "version": "2.1692.0",
-      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1692.0.tgz",
-      "integrity": "sha512-x511uiJ/57FIsbgUe5csJ13k3uzu25uWQE+XqfBis/sB0SFoiElJWXRkgEAUh0U6n40eT3ay5Ue4oPkRMu1LYw==",
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "buffer": "4.9.2",
-        "events": "1.1.1",
-        "ieee754": "1.1.13",
-        "jmespath": "0.16.0",
-        "querystring": "0.2.0",
-        "sax": "1.2.1",
-        "url": "0.10.3",
-        "util": "^0.12.4",
-        "uuid": "8.0.0",
-        "xml2js": "0.6.2"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/aws-sdk/node_modules/uuid": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.0.0.tgz",
-      "integrity": "sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==",
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/buffer": {
-      "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
-      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
-      "license": "MIT",
-      "dependencies": {
-        "base64-js": "^1.0.2",
-        "ieee754": "^1.1.4",
-        "isarray": "^1.0.0"
-      }
-    },
-    "node_modules/call-bind": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.0",
-        "es-define-property": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/events": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-      "integrity": "sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
-    "node_modules/for-each": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
-      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
-      "license": "MIT",
-      "dependencies": {
-        "is-callable": "^1.2.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "function-bind": "^1.1.2",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "math-intrinsics": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
-      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "license": "MIT",
-      "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "license": "MIT",
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/ieee754": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
-    "node_modules/is-arguments": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
-      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-callable": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-generator-function": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
-      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.0",
-        "has-tostringtag": "^1.0.2",
-        "safe-regex-test": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-regex": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
-      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "gopd": "^1.2.0",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
-      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
-      "license": "MIT",
-      "dependencies": {
-        "which-typed-array": "^1.1.16"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "license": "MIT"
-    },
-    "node_modules/jmespath": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
-      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/possible-typed-array-names": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
-      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==",
-      "license": "MIT"
-    },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==",
-      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
-    "node_modules/safe-regex-test": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
-      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "is-regex": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/sax": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
-      "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==",
-      "license": "ISC"
-    },
-    "node_modules/set-function-length": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "license": "MIT",
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/url": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-      "integrity": "sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==",
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
-    "node_modules/util": {
-      "version": "0.12.5",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
-      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "is-arguments": "^1.0.4",
-        "is-generator-function": "^1.0.7",
-        "is-typed-array": "^1.1.3",
-        "which-typed-array": "^1.1.2"
-      }
-    },
-    "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/which-typed-array": {
-      "version": "1.1.19",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
-      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
-      "license": "MIT",
-      "dependencies": {
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "for-each": "^0.3.5",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/xml2js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
-      "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
-      "license": "MIT",
-      "dependencies": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~11.0.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/xmlbuilder": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      }
-    }
-  }
-}

lambda/filaments/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "filaments-api",
-  "version": "1.0.0",
-  "description": "Lambda function for filaments CRUD operations",
-  "main": "index.js",
-  "dependencies": {
-    "aws-sdk": "^2.1692.0",
-    "uuid": "^9.0.1"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs"
-}

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   output: 'export',
+  images: {
+    unoptimized: true,
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -9,7 +9,7 @@
     "lint": "next lint",
     "test": "jest",
     "test:watch": "jest --watch",
-    "security:check": "node scripts/security-check.js",
+    "security:check": "node scripts/security/security-check.js",
     "test:build": "node scripts/test-build.js",
     "prepare": "husky",
     "migrate": "cd scripts && npm install && npm run migrate",
@@ -21,6 +21,7 @@
     "bcryptjs": "^3.0.2",
     "cheerio": "^1.1.0",
     "next": "^15.3.4",
+    "pg": "^8.16.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

public/data.json

@@ -1,167 +0,0 @@
-[
-  {
-    "brand": "Bambu Lab",
-    "tip": "PLA",
-    "finish": "Basic",
-    "boja": "Lavender Purple",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2500"
-  },
-  {
-    "brand": "Bambu Lab",
-    "tip": "PLA",
-    "finish": "Matte",
-    "boja": "Charcoal Black",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "otvorena",
-    "kolicina": "0.8kg",
-    "cena": "2800"
-  },
-  {
-    "brand": "Bambu Lab",
-    "tip": "PETG",
-    "finish": "Basic",
-    "boja": "Transparent",
-    "refill": "Da",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "3200"
-  },
-  {
-    "brand": "Azure Film",
-    "tip": "PLA",
-    "finish": "Basic",
-    "boja": "White",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2200"
-  },
-  {
-    "brand": "Azure Film",
-    "tip": "PETG",
-    "finish": "Basic",
-    "boja": "Orange",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "otvorena",
-    "kolicina": "0.5kg",
-    "cena": "2600"
-  },
-  {
-    "brand": "Bambu Lab",
-    "tip": "Silk PLA",
-    "finish": "Silk",
-    "boja": "Gold",
-    "refill": "Da",
-    "vakum": "",
-    "otvoreno": "",
-    "kolicina": "0.5kg",
-    "cena": "3500"
-  },
-  {
-    "brand": "Bambu Lab",
-    "tip": "PLA Matte",
-    "finish": "Matte",
-    "boja": "Forest Green",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2800"
-  },
-  {
-    "brand": "PanaChroma",
-    "tip": "PLA",
-    "finish": "Basic",
-    "boja": "Red",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2300"
-  },
-  {
-    "brand": "PanaChroma",
-    "tip": "PETG",
-    "finish": "Basic",
-    "boja": "Blue",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "otvorena",
-    "kolicina": "0.75kg",
-    "cena": "2700"
-  },
-  {
-    "brand": "Fiberlogy",
-    "tip": "PLA",
-    "finish": "Basic",
-    "boja": "Gray",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "0.85kg",
-    "cena": "2400"
-  },
-  {
-    "brand": "Fiberlogy",
-    "tip": "ABS",
-    "finish": "Basic",
-    "boja": "Black",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2900"
-  },
-  {
-    "brand": "Fiberlogy",
-    "tip": "TPU",
-    "finish": "Basic",
-    "boja": "Lime Green",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "otvorena",
-    "kolicina": "0.3kg",
-    "cena": "4500"
-  },
-  {
-    "brand": "Azure Film",
-    "tip": "PLA",
-    "finish": "Silk",
-    "boja": "Silver",
-    "refill": "Da",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2800"
-  },
-  {
-    "brand": "Bambu Lab",
-    "tip": "PLA",
-    "finish": "Basic",
-    "boja": "Jade White",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "otvorena",
-    "kolicina": "0.5kg",
-    "cena": "2500"
-  },
-  {
-    "brand": "PanaChroma",
-    "tip": "Silk PLA",
-    "finish": "Silk",
-    "boja": "Copper",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "3200"
-  }
-]

scripts/README.md

@@ -1,84 +0,0 @@
-# Data Migration Scripts
-
-This directory contains scripts for migrating filament data from Confluence to DynamoDB.
-
-## Prerequisites
-
-1. AWS credentials configured (either via AWS CLI or environment variables)
-2. DynamoDB table created via Terraform
-3. Confluence API credentials (if migrating from Confluence)
-
-## Setup
-
-```bash
-cd scripts
-npm install
-```
-
-## Configuration
-
-Create a `.env.local` file in the project root with:
-
-```env
-# AWS Configuration
-AWS_REGION=eu-central-1
-DYNAMODB_TABLE_NAME=filamenteka-filaments
-
-# Confluence Configuration (optional)
-CONFLUENCE_API_URL=https://your-domain.atlassian.net
-CONFLUENCE_TOKEN=your-email:your-api-token
-CONFLUENCE_PAGE_ID=your-page-id
-```
-
-## Usage
-
-### Migrate from local data (data.json)
-
-```bash
-npm run migrate
-```
-
-### Clear existing data and migrate
-
-```bash
-npm run migrate:clear
-```
-
-### Manual execution
-
-```bash
-# Migrate without clearing
-node migrate-with-parser.js
-
-# Clear existing data first
-node migrate-with-parser.js --clear
-```
-
-## What the script does
-
-1. **Checks for Confluence credentials**
-   - If found: Fetches data from Confluence page
-   - If not found: Uses local `public/data.json` file
-
-2. **Parses the data**
-   - Extracts filament information from HTML table (Confluence)
-   - Or reads JSON directly (local file)
-
-3. **Prepares data for DynamoDB**
-   - Generates unique IDs for each filament
-   - Adds timestamps (createdAt, updatedAt)
-
-4. **Writes to DynamoDB**
-   - Writes in batches of 25 items (DynamoDB limit)
-   - Shows progress during migration
-
-5. **Verifies the migration**
-   - Counts total items in DynamoDB
-   - Shows a sample item for verification
-
-## Troubleshooting
-
-- **Table not found**: Make sure you've run `terraform apply` first
-- **Access denied**: Check your AWS credentials and permissions
-- **Confluence errors**: Verify your API token and page ID
-- **Empty migration**: Check that the Confluence page has a table with the expected format

scripts/add-basic-refills.sh

@@ -0,0 +1,74 @@
+#!/bin/bash
+# Script to add 1 refill for each color in the database
+# Run this on the API server or container with database access
+
+# Create temporary Node.js script
+cat > /tmp/add-refills.js << 'EOF'
+const { Pool } = require('pg');
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: process.env.DATABASE_URL?.includes('amazonaws.com') ? { rejectUnauthorized: false } : false
+});
+
+async function addRefills() {
+  try {
+    console.log('Adding 1 refill for each color as PLA Basic filaments...\n');
+    
+    // First, get all colors
+    const colorsResult = await pool.query('SELECT name, hex FROM colors ORDER BY name');
+    console.log(`Found ${colorsResult.rows.length} colors in database\n`);
+    
+    let inserted = 0;
+    let updated = 0;
+    
+    for (const color of colorsResult.rows) {
+      // Check if PLA Basic already exists for this color
+      const existing = await pool.query(
+        'SELECT id, refill FROM filaments WHERE tip = $1 AND finish = $2 AND boja = $3',
+        ['PLA', 'Basic', color.name]
+      );
+      
+      if (existing.rows.length === 0) {
+        // Insert new filament
+        await pool.query(
+          `INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena) 
+           VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
+          ['PLA', 'Basic', color.name, color.hex, '1', '0 vakuum', '0 otvorena', 1, '3999']
+        );
+        console.log(`✓ Added PLA Basic ${color.name}`);
+        inserted++;
+      } else if (!existing.rows[0].refill || existing.rows[0].refill === '0') {
+        // Update existing to have 1 refill
+        await pool.query(
+          'UPDATE filaments SET refill = $1 WHERE id = $2',
+          ['1', existing.rows[0].id]
+        );
+        console.log(`✓ Updated PLA Basic ${color.name} to have 1 refill`);
+        updated++;
+      } else {
+        console.log(`- PLA Basic ${color.name} already has ${existing.rows[0].refill} refill(s)`);
+      }
+    }
+    
+    console.log(`\nSummary:`);
+    console.log(`- Inserted ${inserted} new PLA Basic filaments`);
+    console.log(`- Updated ${updated} existing filaments to have 1 refill`);
+    console.log(`- Total colors processed: ${colorsResult.rows.length}`);
+    
+    await pool.end();
+    process.exit(0);
+  } catch (error) {
+    console.error('Error:', error);
+    process.exit(1);
+  }
+}
+
+addRefills();
+EOF
+
+# Run the script
+cd /app && node /tmp/add-refills.js
+
+# Clean up
+rm /tmp/add-refills.js

scripts/add-pla-basic-colors.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+
+# Script to add specific PLA Basic colors to production database
+
+echo "🎨 Adding PLA Basic colors to production database..."
+
+# Get the RDS endpoint from terraform output
+DB_HOST=$(cat terraform-outputs.json | grep -A1 "rds_endpoint" | grep "value" | cut -d'"' -f4 | cut -d':' -f1)
+
+if [ -z "$DB_HOST" ]; then
+    echo "❌ Could not find RDS endpoint in terraform-outputs.json"
+    exit 1
+fi
+
+echo "📍 Database host: $DB_HOST"
+
+# Execute the migration
+echo "🚀 Running migration..."
+aws ssm send-command \
+    --document-name "AWS-RunShellScript" \
+    --targets "Key=tag:Name,Values=filamenteka-api-instance" \
+    --parameters commands="[\"PGPASSWORD=\$DB_PASSWORD psql -h $DB_HOST -U filamenteka -d filamenteka -f /tmp/add_pla_colors.sql\"]" \
+    --region eu-central-1 \
+    --query "Command.CommandId" \
+    --output text > /tmp/command-id.txt
+
+COMMAND_ID=$(cat /tmp/command-id.txt)
+echo "⏳ Command ID: $COMMAND_ID"
+
+# Wait for command to complete
+echo "⏳ Waiting for migration to complete..."
+sleep 5
+
+# Check command status
+aws ssm get-command-invocation \
+    --command-id "$COMMAND_ID" \
+    --instance-id $(aws ec2 describe-instances --filters "Name=tag:Name,Values=filamenteka-api-instance" --query "Reservations[0].Instances[0].InstanceId" --output text --region eu-central-1) \
+    --region eu-central-1 \
+    --query "Status" \
+    --output text
+
+echo "✅ Migration completed!"
+echo ""
+echo "📝 Summary of changes:"
+echo "- Added 30 specific PLA Basic colors"
+echo "- Each color has 1 refill AND 1 spool (total quantity: 2)"
+echo "- Price set to 3499/3999 RSD"
+echo "- Zeroed out ALL other filaments (they won't show in the table)"
+
+# Cleanup
+rm -f /tmp/command-id.txt

scripts/check-db.js

@@ -0,0 +1,62 @@
+const { Pool } = require('pg');
+
+const connectionString = "postgresql://filamenteka_admin:onrBjiAjHKQXBAJSVWU2t2kQ7HDil9re@filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com:5432/filamenteka";
+
+const pool = new Pool({
+  connectionString,
+  ssl: { rejectUnauthorized: false }
+});
+
+async function checkDatabase() {
+  try {
+    console.log('🔍 Checking database schema...\n');
+    
+    // Check columns
+    const columnsResult = await pool.query(`
+      SELECT column_name, data_type, is_nullable, column_default
+      FROM information_schema.columns 
+      WHERE table_name = 'filaments' 
+      ORDER BY ordinal_position
+    `);
+    
+    console.log('Filaments table columns:');
+    console.table(columnsResult.rows);
+    
+    // Check if brand column exists
+    const brandExists = columnsResult.rows.some(col => col.column_name === 'brand');
+    console.log(`\n✅ Brand column exists: ${brandExists}`);
+    
+    // Get sample data
+    const sampleResult = await pool.query('SELECT * FROM filaments LIMIT 1');
+    console.log('\nSample filament data:');
+    console.log(sampleResult.rows[0] || 'No data in table');
+    
+    // Test insert without brand
+    console.log('\n🧪 Testing INSERT without brand field...');
+    try {
+      const testInsert = await pool.query(`
+        INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
+        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
+        RETURNING *
+      `, ['TEST_PLA', 'Basic', 'Test Color', '#FF0000', 'Ne', 'Ne', 'Ne', '1', '3999']);
+      
+      console.log('✅ INSERT successful! Created filament:');
+      console.log(testInsert.rows[0]);
+      
+      // Clean up test data
+      await pool.query('DELETE FROM filaments WHERE id = $1', [testInsert.rows[0].id]);
+      console.log('🧹 Test data cleaned up');
+      
+    } catch (insertError) {
+      console.log('❌ INSERT failed:', insertError.message);
+      console.log('This means the database still expects the brand column!');
+    }
+    
+  } catch (error) {
+    console.error('Database check failed:', error.message);
+  } finally {
+    await pool.end();
+  }
+}
+
+checkDatabase();

scripts/deploy-api-update.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+echo "Deploying API update to EC2 instance..."
+
+# Get instance ID
+INSTANCE_ID="i-03956ecf32292d7d9"
+
+# Create update script
+cat > /tmp/update-api.sh << 'EOF'
+#!/bin/bash
+cd /home/ubuntu/filamenteka-api
+
+# Backup current server.js
+cp server.js server.js.backup
+
+# Download the updated server.js from GitHub
+curl -o server.js https://raw.githubusercontent.com/daxdax89/Filamenteka/sale/api/server.js
+
+# Restart the service
+sudo systemctl restart node-api
+
+echo "API server updated and restarted"
+EOF
+
+# Send command to EC2 instance
+aws ssm send-command \
+    --region eu-central-1 \
+    --instance-ids "$INSTANCE_ID" \
+    --document-name "AWS-RunShellScript" \
+    --parameters "commands=[
+        'cd /home/ubuntu/filamenteka-api',
+        'cp server.js server.js.backup',
+        'curl -o server.js https://raw.githubusercontent.com/daxdax89/Filamenteka/sale/api/server.js',
+        'sudo systemctl restart node-api',
+        'sudo systemctl status node-api'
+    ]" \
+    --output json
+
+echo "Command sent. Check AWS Systems Manager for execution status."

scripts/deploy-api.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# Simple deployment script for API server
+# This updates the API server code on EC2
+
+API_SERVER_IP="3.71.161.51"
+API_SERVER_URL="https://api.filamenteka.rs"
+
+echo "🚀 Deploying API server updates..."
+
+# Create a temporary deployment package
+echo "📦 Creating deployment package..."
+mkdir -p tmp-deploy
+cp -r api/* tmp-deploy/
+cp package.json tmp-deploy/
+cp package-lock.json tmp-deploy/
+
+# Create tarball
+tar -czf api-deploy.tar.gz -C tmp-deploy .
+rm -rf tmp-deploy
+
+echo "📤 Package created: api-deploy.tar.gz"
+echo ""
+echo "⚠️  Manual deployment required:"
+echo "1. Copy api-deploy.tar.gz to your server"
+echo "2. SSH into the server at $API_SERVER_IP"
+echo "3. Extract and restart the API service:"
+echo "   tar -xzf api-deploy.tar.gz"
+echo "   npm install --production"
+echo "   sudo systemctl restart node-api"
+echo ""
+echo "4. Run database migration if needed:"
+echo "   psql -U filamenteka_admin -d filamenteka < database/migrations/004_remove_brand_column.sql"
+
+# Cleanup
+rm -f api-deploy.tar.gz
+
+echo ""
+echo "✅ Deployment package instructions complete!"

scripts/fetch-data.js

@@ -1,36 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { fetchFromConfluence } = require('../src/server/confluence.ts');
-
-async function fetchData() {
-  console.log('Fetching data from Confluence...');
-  
-  const env = {
-    CONFLUENCE_API_URL: process.env.CONFLUENCE_API_URL,
-    CONFLUENCE_TOKEN: process.env.CONFLUENCE_TOKEN,
-    CONFLUENCE_PAGE_ID: process.env.CONFLUENCE_PAGE_ID
-  };
-
-  try {
-    const data = await fetchFromConfluence(env);
-    
-    // Create public directory if it doesn't exist
-    const publicDir = path.join(__dirname, '..', 'public');
-    if (!fs.existsSync(publicDir)) {
-      fs.mkdirSync(publicDir, { recursive: true });
-    }
-    
-    // Write data to public directory
-    fs.writeFileSync(
-      path.join(publicDir, 'data.json'),
-      JSON.stringify(data, null, 2)
-    );
-    
-    console.log(`✅ Fetched ${data.length} filaments`);
-  } catch (error) {
-    console.error('❌ Failed to fetch data:', error.message);
-    process.exit(1);
-  }
-}
-
-fetchData();

scripts/fix-refill-only-colors.sh

@@ -0,0 +1,66 @@
+#!/bin/bash
+
+# Script to fix refill-only colors that incorrectly have spool availability
+# These colors should have spulna = 0 (no regular spools available)
+
+echo "🔧 Fixing refill-only colors to have 0 spools..."
+
+# Colors that should be refill-only
+REFILL_ONLY_COLORS=(
+    "Nardo Gray"
+    "Blue Grey"
+    "Light Gray"
+    "Brown"
+    "Beige"
+    "Bronze"
+    "Purple"
+    "Cobalt Blue"
+    "Turquoise"
+    "Bright Green"
+    "Yellow"
+    "Gold"
+    "Orange"
+    "Maroon Red"
+)
+
+# Database connection details
+DB_HOST="filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com"
+DB_NAME="filamenteka"
+DB_USER="filamenteka_admin"
+DB_PASSWORD="onrBjiAjHKQXBAJSVWU2t2kQ7HDil9re"
+
+echo "📊 Current status of refill-only colors:"
+PGPASSWORD=$DB_PASSWORD psql -h $DB_HOST -U $DB_USER -d $DB_NAME -c "
+SELECT boja, refill, spulna, kolicina 
+FROM filaments 
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND boja IN (
+    'Nardo Gray', 'Blue Grey', 'Light Gray', 'Brown', 'Beige',
+    'Bronze', 'Purple', 'Cobalt Blue', 'Turquoise', 'Bright Green',
+    'Yellow', 'Gold', 'Orange', 'Maroon Red'
+)
+ORDER BY boja;"
+
+echo ""
+echo "🔄 Applying fix..."
+
+# Apply the migration
+PGPASSWORD=$DB_PASSWORD psql -h $DB_HOST -U $DB_USER -d $DB_NAME < database/migrations/015_fix_refill_only_colors.sql
+
+echo ""
+echo "✅ Fix applied! New status:"
+PGPASSWORD=$DB_PASSWORD psql -h $DB_HOST -U $DB_USER -d $DB_NAME -c "
+SELECT boja, refill, spulna, kolicina 
+FROM filaments 
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND boja IN (
+    'Nardo Gray', 'Blue Grey', 'Light Gray', 'Brown', 'Beige',
+    'Bronze', 'Purple', 'Cobalt Blue', 'Turquoise', 'Bright Green',
+    'Yellow', 'Gold', 'Orange', 'Maroon Red'
+)
+ORDER BY boja;"
+
+echo ""
+echo "🎉 Refill-only colors have been fixed!"

scripts/migrate-confluence-to-dynamo.js

@@ -1,194 +0,0 @@
-#!/usr/bin/env node
-
-require('dotenv').config({ path: '.env.local' });
-const axios = require('axios');
-const AWS = require('aws-sdk');
-const { v4: uuidv4 } = require('uuid');
-
-// Configure AWS
-AWS.config.update({
-  region: process.env.AWS_REGION || 'eu-central-1'
-});
-
-const dynamodb = new AWS.DynamoDB.DocumentClient();
-const TABLE_NAME = process.env.DYNAMODB_TABLE_NAME || 'filamenteka-filaments';
-
-// Confluence configuration
-const CONFLUENCE_API_URL = process.env.CONFLUENCE_API_URL;
-const CONFLUENCE_TOKEN = process.env.CONFLUENCE_TOKEN;
-const CONFLUENCE_PAGE_ID = process.env.CONFLUENCE_PAGE_ID;
-
-async function fetchConfluenceData() {
-  try {
-    console.log('Fetching data from Confluence...');
-    
-    const response = await axios.get(
-      `${CONFLUENCE_API_URL}/wiki/rest/api/content/${CONFLUENCE_PAGE_ID}?expand=body.storage`,
-      {
-        headers: {
-          'Authorization': `Basic ${Buffer.from(CONFLUENCE_TOKEN).toString('base64')}`,
-          'Accept': 'application/json'
-        }
-      }
-    );
-
-    const htmlContent = response.data.body.storage.value;
-    return parseConfluenceTable(htmlContent);
-  } catch (error) {
-    console.error('Error fetching from Confluence:', error.message);
-    throw error;
-  }
-}
-
-function parseConfluenceTable(html) {
-  // Simple HTML table parser - in production, use a proper HTML parser like cheerio
-  const rows = [];
-  const tableRegex = /<tr[^>]*>(.*?)<\/tr>/gs;
-  const cellRegex = /<t[dh][^>]*>(.*?)<\/t[dh]>/gs;
-  
-  let match;
-  let isHeader = true;
-  
-  while ((match = tableRegex.exec(html)) !== null) {
-    const rowHtml = match[1];
-    const cells = [];
-    let cellMatch;
-    
-    while ((cellMatch = cellRegex.exec(rowHtml)) !== null) {
-      // Remove HTML tags from cell content
-      const cellContent = cellMatch[1]
-        .replace(/<[^>]*>/g, '')
-        .replace(/&nbsp;/g, ' ')
-        .replace(/&amp;/g, '&')
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-        .trim();
-      cells.push(cellContent);
-    }
-    
-    if (!isHeader && cells.length > 0) {
-      rows.push(cells);
-    }
-    isHeader = false;
-  }
-  
-  // Map rows to filament objects
-  return rows.map(row => ({
-    brand: row[0] || '',
-    tip: row[1] || '',
-    finish: row[2] || '',
-    boja: row[3] || '',
-    refill: row[4] || '',
-    vakum: row[5] || '',
-    otvoreno: row[6] || '',
-    kolicina: row[7] || '',
-    cena: row[8] || ''
-  }));
-}
-
-async function migrateToLocalJSON() {
-  try {
-    console.log('Migrating to local JSON file for testing...');
-    
-    // For now, use the mock data we created
-    const fs = require('fs');
-    const data = JSON.parse(fs.readFileSync('./public/data.json', 'utf8'));
-    
-    const filaments = data.map(item => ({
-      id: uuidv4(),
-      ...item,
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString()
-    }));
-    
-    console.log(`Found ${filaments.length} filaments to migrate`);
-    return filaments;
-  } catch (error) {
-    console.error('Error reading local data:', error);
-    throw error;
-  }
-}
-
-async function migrateToDynamoDB(filaments) {
-  console.log(`Migrating ${filaments.length} filaments to DynamoDB...`);
-  
-  // Check if table exists
-  try {
-    const dynamo = new AWS.DynamoDB();
-    await dynamo.describeTable({ TableName: TABLE_NAME }).promise();
-    console.log(`Table ${TABLE_NAME} exists`);
-  } catch (error) {
-    if (error.code === 'ResourceNotFoundException') {
-      console.error(`Table ${TABLE_NAME} does not exist. Please run Terraform first.`);
-      process.exit(1);
-    }
-    throw error;
-  }
-  
-  // Batch write items
-  const chunks = [];
-  for (let i = 0; i < filaments.length; i += 25) {
-    chunks.push(filaments.slice(i, i + 25));
-  }
-  
-  for (const chunk of chunks) {
-    const params = {
-      RequestItems: {
-        [TABLE_NAME]: chunk.map(item => ({
-          PutRequest: { Item: item }
-        }))
-      }
-    };
-    
-    try {
-      await dynamodb.batchWrite(params).promise();
-      console.log(`Migrated ${chunk.length} items`);
-    } catch (error) {
-      console.error('Error writing batch:', error);
-      throw error;
-    }
-  }
-  
-  console.log('Migration completed successfully!');
-}
-
-async function main() {
-  try {
-    let filaments;
-    
-    if (CONFLUENCE_API_URL && CONFLUENCE_TOKEN && CONFLUENCE_PAGE_ID) {
-      // Fetch from Confluence
-      const confluenceData = await fetchConfluenceData();
-      filaments = confluenceData.map(item => ({
-        id: uuidv4(),
-        ...item,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString()
-      }));
-    } else {
-      console.log('Confluence credentials not found, using local data...');
-      filaments = await migrateToLocalJSON();
-    }
-    
-    // Migrate to DynamoDB
-    await migrateToDynamoDB(filaments);
-    
-    // Verify migration
-    const params = {
-      TableName: TABLE_NAME,
-      Select: 'COUNT'
-    };
-    
-    const result = await dynamodb.scan(params).promise();
-    console.log(`\nVerification: ${result.Count} items in DynamoDB`);
-    
-  } catch (error) {
-    console.error('Migration failed:', error);
-    process.exit(1);
-  }
-}
-
-// Run migration
-if (require.main === module) {
-  main();
-}

scripts/migrate-with-parser.js

@@ -1,241 +0,0 @@
-#!/usr/bin/env node
-
-require('dotenv').config({ path: '.env.local' });
-const axios = require('axios');
-const AWS = require('aws-sdk');
-const { v4: uuidv4 } = require('uuid');
-const cheerio = require('cheerio');
-
-// Configure AWS
-AWS.config.update({
-  region: process.env.AWS_REGION || 'eu-central-1'
-});
-
-const dynamodb = new AWS.DynamoDB.DocumentClient();
-const TABLE_NAME = process.env.DYNAMODB_TABLE_NAME || 'filamenteka-filaments';
-
-// Confluence configuration
-const CONFLUENCE_API_URL = process.env.CONFLUENCE_API_URL;
-const CONFLUENCE_TOKEN = process.env.CONFLUENCE_TOKEN;
-const CONFLUENCE_PAGE_ID = process.env.CONFLUENCE_PAGE_ID;
-
-async function fetchConfluenceData() {
-  try {
-    console.log('Fetching data from Confluence...');
-    
-    const response = await axios.get(
-      `${CONFLUENCE_API_URL}/wiki/rest/api/content/${CONFLUENCE_PAGE_ID}?expand=body.storage`,
-      {
-        headers: {
-          'Authorization': `Basic ${Buffer.from(CONFLUENCE_TOKEN).toString('base64')}`,
-          'Accept': 'application/json'
-        }
-      }
-    );
-
-    const htmlContent = response.data.body.storage.value;
-    return parseConfluenceTable(htmlContent);
-  } catch (error) {
-    console.error('Error fetching from Confluence:', error.message);
-    throw error;
-  }
-}
-
-function parseConfluenceTable(html) {
-  const $ = cheerio.load(html);
-  const filaments = [];
-  
-  // Find the table and iterate through rows
-  $('table').find('tr').each((index, row) => {
-    // Skip header row
-    if (index === 0) return;
-    
-    const cells = $(row).find('td');
-    if (cells.length >= 9) {
-      const filament = {
-        brand: $(cells[0]).text().trim(),
-        tip: $(cells[1]).text().trim(),
-        finish: $(cells[2]).text().trim(),
-        boja: $(cells[3]).text().trim(),
-        refill: $(cells[4]).text().trim(),
-        vakum: $(cells[5]).text().trim(),
-        otvoreno: $(cells[6]).text().trim(),
-        kolicina: $(cells[7]).text().trim(),
-        cena: $(cells[8]).text().trim()
-      };
-      
-      // Only add if row has valid data
-      if (filament.brand || filament.boja) {
-        filaments.push(filament);
-      }
-    }
-  });
-  
-  return filaments;
-}
-
-async function clearDynamoTable() {
-  console.log('Clearing existing data from DynamoDB...');
-  
-  // Scan all items
-  const scanParams = {
-    TableName: TABLE_NAME,
-    ProjectionExpression: 'id'
-  };
-  
-  try {
-    const scanResult = await dynamodb.scan(scanParams).promise();
-    
-    if (scanResult.Items.length === 0) {
-      console.log('Table is already empty');
-      return;
-    }
-    
-    // Delete in batches
-    const deleteRequests = scanResult.Items.map(item => ({
-      DeleteRequest: { Key: { id: item.id } }
-    }));
-    
-    // DynamoDB batchWrite supports max 25 items
-    for (let i = 0; i < deleteRequests.length; i += 25) {
-      const batch = deleteRequests.slice(i, i + 25);
-      const params = {
-        RequestItems: {
-          [TABLE_NAME]: batch
-        }
-      };
-      
-      await dynamodb.batchWrite(params).promise();
-      console.log(`Deleted ${batch.length} items`);
-    }
-    
-    console.log('Table cleared successfully');
-  } catch (error) {
-    console.error('Error clearing table:', error);
-    throw error;
-  }
-}
-
-async function migrateToDynamoDB(filaments) {
-  console.log(`Migrating ${filaments.length} filaments to DynamoDB...`);
-  
-  // Check if table exists
-  try {
-    const dynamo = new AWS.DynamoDB();
-    await dynamo.describeTable({ TableName: TABLE_NAME }).promise();
-    console.log(`Table ${TABLE_NAME} exists`);
-  } catch (error) {
-    if (error.code === 'ResourceNotFoundException') {
-      console.error(`Table ${TABLE_NAME} does not exist. Please run Terraform first.`);
-      process.exit(1);
-    }
-    throw error;
-  }
-  
-  // Add IDs and timestamps
-  const itemsToInsert = filaments.map(item => ({
-    id: uuidv4(),
-    ...item,
-    createdAt: new Date().toISOString(),
-    updatedAt: new Date().toISOString()
-  }));
-  
-  // Batch write items (max 25 per batch)
-  const chunks = [];
-  for (let i = 0; i < itemsToInsert.length; i += 25) {
-    chunks.push(itemsToInsert.slice(i, i + 25));
-  }
-  
-  let totalMigrated = 0;
-  for (const chunk of chunks) {
-    const params = {
-      RequestItems: {
-        [TABLE_NAME]: chunk.map(item => ({
-          PutRequest: { Item: item }
-        }))
-      }
-    };
-    
-    try {
-      await dynamodb.batchWrite(params).promise();
-      totalMigrated += chunk.length;
-      console.log(`Migrated ${totalMigrated}/${itemsToInsert.length} items`);
-    } catch (error) {
-      console.error('Error writing batch:', error);
-      throw error;
-    }
-  }
-  
-  console.log('Migration completed successfully!');
-  return totalMigrated;
-}
-
-async function main() {
-  try {
-    let filaments;
-    
-    // Check for --clear flag
-    const shouldClear = process.argv.includes('--clear');
-    
-    if (shouldClear) {
-      await clearDynamoTable();
-    }
-    
-    if (CONFLUENCE_API_URL && CONFLUENCE_TOKEN && CONFLUENCE_PAGE_ID) {
-      // Fetch from Confluence
-      console.log('Using Confluence as data source');
-      filaments = await fetchConfluenceData();
-    } else {
-      console.log('Confluence credentials not found, using local mock data...');
-      const fs = require('fs');
-      const data = JSON.parse(fs.readFileSync('../public/data.json', 'utf8'));
-      filaments = data;
-    }
-    
-    console.log(`Found ${filaments.length} filaments to migrate`);
-    
-    // Show sample data
-    if (filaments.length > 0) {
-      console.log('\nSample data:');
-      console.log(JSON.stringify(filaments[0], null, 2));
-    }
-    
-    // Migrate to DynamoDB
-    const migrated = await migrateToDynamoDB(filaments);
-    
-    // Verify migration
-    const params = {
-      TableName: TABLE_NAME,
-      Select: 'COUNT'
-    };
-    
-    const result = await dynamodb.scan(params).promise();
-    console.log(`\nVerification: ${result.Count} total items now in DynamoDB`);
-    
-    // Show sample from DynamoDB
-    const sampleParams = {
-      TableName: TABLE_NAME,
-      Limit: 1
-    };
-    
-    const sampleResult = await dynamodb.scan(sampleParams).promise();
-    if (sampleResult.Items.length > 0) {
-      console.log('\nSample from DynamoDB:');
-      console.log(JSON.stringify(sampleResult.Items[0], null, 2));
-    }
-    
-  } catch (error) {
-    console.error('Migration failed:', error);
-    process.exit(1);
-  }
-}
-
-// Run migration
-if (require.main === module) {
-  console.log('Confluence to DynamoDB Migration Tool');
-  console.log('=====================================');
-  console.log('Usage: node migrate-with-parser.js [--clear]');
-  console.log('  --clear: Clear existing data before migration\n');
-  
-  main();
-}

scripts/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "filamenteka-scripts",
-  "version": "1.0.0",
-  "description": "Migration and utility scripts for Filamenteka",
-  "scripts": {
-    "migrate": "node migrate-with-parser.js",
-    "migrate:clear": "node migrate-with-parser.js --clear"
-  },
-  "dependencies": {
-    "aws-sdk": "^2.1472.0",
-    "axios": "^1.6.2",
-    "cheerio": "^1.0.0-rc.12",
-    "dotenv": "^16.3.1",
-    "uuid": "^9.0.1"
-  }
-}

scripts/pre-commit.sh

@@ -2,6 +2,12 @@
 
 echo "🔍 Running pre-commit checks..."
 
+# Check for forbidden author mentions
+/Users/dax/Documents/GitHub/Filamenteka/.git/hooks/pre-commit-author-check
+if [ $? -ne 0 ]; then
+    exit 1
+fi
+
 # Run security check
 echo "🔐 Checking for credential leaks..."
 npm run security:check

scripts/run-migration.js

@@ -0,0 +1,57 @@
+const { Pool } = require('pg');
+const fs = require('fs');
+const path = require('path');
+
+// Parse connection string from environment or command line
+const connectionString = process.env.DATABASE_URL || process.argv[2];
+
+if (!connectionString) {
+  console.error('Please provide DATABASE_URL as environment variable or command line argument');
+  console.error('Example: node run-migration.js "postgresql://user:pass@host:port/db"');
+  process.exit(1);
+}
+
+const pool = new Pool({
+  connectionString,
+  ssl: {
+    rejectUnauthorized: false // For AWS RDS
+  }
+});
+
+async function runMigration() {
+  try {
+    // Read the migration file
+    const migrationPath = path.join(__dirname, '../database/migrations/004_remove_brand_column.sql');
+    const migrationSQL = fs.readFileSync(migrationPath, 'utf8');
+    
+    console.log('Running migration: 004_remove_brand_column.sql');
+    console.log('SQL:', migrationSQL);
+    
+    // Execute the migration
+    await pool.query(migrationSQL);
+    
+    console.log('✅ Migration completed successfully!');
+    
+    // Verify the column was removed
+    const result = await pool.query(`
+      SELECT column_name 
+      FROM information_schema.columns 
+      WHERE table_name = 'filaments' 
+      AND column_name = 'brand'
+    `);
+    
+    if (result.rows.length === 0) {
+      console.log('✅ Verified: brand column has been removed');
+    } else {
+      console.log('⚠️  Warning: brand column still exists');
+    }
+    
+  } catch (error) {
+    console.error('❌ Migration failed:', error.message);
+    process.exit(1);
+  } finally {
+    await pool.end();
+  }
+}
+
+runMigration();

scripts/run-specific-migration.js

@@ -0,0 +1,37 @@
+const { Pool } = require('pg');
+
+// Parse connection string from environment or command line
+const connectionString = process.env.DATABASE_URL || process.argv[2];
+const migrationSQL = process.argv[3];
+
+if (!connectionString || !migrationSQL) {
+  console.error('Usage: node run-specific-migration.js "postgresql://..." "SQL"');
+  process.exit(1);
+}
+
+const pool = new Pool({
+  connectionString,
+  ssl: {
+    rejectUnauthorized: false // For AWS RDS
+  }
+});
+
+async function runMigration() {
+  try {
+    console.log('Running migration SQL:', migrationSQL);
+    
+    // Execute the migration
+    const result = await pool.query(migrationSQL);
+    
+    console.log('✅ Migration completed successfully!');
+    console.log('Rows affected:', result.rowCount);
+    
+  } catch (error) {
+    console.error('❌ Migration failed:', error.message);
+    process.exit(1);
+  } finally {
+    await pool.end();
+  }
+}
+
+runMigration();

scripts/security/security-check.js

@@ -16,12 +16,14 @@ const excludePatterns = [
   /node_modules/,
   /\.git/,
   /\.next/,
+  /\.claude/,
   /dist/,
   /build/,
   /out/,
   /terraform\.tfvars$/,
   /\.env/,
   /security-check\.js$/,
+  /__tests__/,  // Exclude test files which may contain test credentials
 ];
 
 function scanFile(filePath) {
@@ -33,7 +35,12 @@ function scanFile(filePath) {
     if (matches) {
       matches.forEach(match => {
         // Only flag if it's not a placeholder or example
-        if (!match.includes('example') && !match.includes('YOUR_') && !match.includes('xxx')) {
+        if (!match.includes('example') && 
+            !match.includes('YOUR_') && 
+            !match.includes('xxx') &&
+            !match.includes('your-password') &&
+            !match.includes('process.env') &&
+            !match.includes('<set-in-environment>')) {
           issues.push({
             file: filePath,
             pattern: pattern.source,

scripts/update-api-server.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+# Script to update API server via GitHub
+# Since we can't SSH directly, we'll use the API server to pull latest code
+
+echo "🚀 Updating API server with latest code..."
+
+# Create a deployment trigger endpoint
+curl -X POST https://api.filamenteka.rs/deploy \
+  -H "Content-Type: application/json" \
+  -H "X-Deploy-Secret: ${DEPLOY_SECRET}" \
+  -d '{"action": "pull_latest"}' \
+  2>/dev/null || echo "Deploy endpoint not available"
+
+echo ""
+echo "⚠️  Manual update required:"
+echo "The API server needs to be updated with the latest code that removes brand references."
+echo ""
+echo "The server file api/server.js needs these changes:"
+echo "1. Remove 'brand' from the INSERT statement on line ~115"
+echo "2. Remove 'brand' from the UPDATE statement on line ~140"
+echo "3. Remove 'brand' from the destructuring on lines ~111 and ~136"
+echo ""
+echo "Current server expects: (brand, tip, finish, boja, ...)"
+echo "Should be: (tip, finish, boja, ...)"

scripts/update-db-via-aws.sh

@@ -0,0 +1,88 @@
+#!/bin/bash
+# Script to update database via AWS
+
+# Get RDS endpoint from AWS
+echo "Getting RDS instance information..."
+RDS_ENDPOINT=$(aws rds describe-db-instances --db-instance-identifier filamenteka --query 'DBInstances[0].Endpoint.Address' --output text)
+RDS_PORT=$(aws rds describe-db-instances --db-instance-identifier filamenteka --query 'DBInstances[0].Endpoint.Port' --output text)
+
+# Get database credentials from Secrets Manager
+echo "Getting database credentials from AWS Secrets Manager..."
+DB_CREDS=$(aws secretsmanager get-secret-value --secret-id filamenteka-db-credentials --query 'SecretString' --output text)
+DB_USER=$(echo $DB_CREDS | jq -r '.username')
+DB_PASS=$(echo $DB_CREDS | jq -r '.password')
+DB_NAME=$(echo $DB_CREDS | jq -r '.database')
+
+# Construct database URL
+DATABASE_URL="postgresql://${DB_USER}:${DB_PASS}@${RDS_ENDPOINT}:${RDS_PORT}/${DB_NAME}"
+
+echo "Connecting to database..."
+echo ""
+
+# Run the SQL script
+psql "$DATABASE_URL" << 'EOF'
+-- Add 1 refill for each color as PLA Basic filaments
+
+-- First show what colors we have
+\echo 'Existing colors:'
+SELECT name, hex FROM colors ORDER BY name;
+\echo ''
+
+-- Insert PLA Basic filaments with 1 refill for each color that doesn't already have one
+\echo 'Adding PLA Basic filaments with 1 refill for each color...'
+INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
+SELECT 
+    'PLA' as tip,
+    'Basic' as finish,
+    c.name as boja,
+    c.hex as boja_hex,
+    '1' as refill,
+    '0 vakuum' as vakum,
+    '0 otvorena' as otvoreno,
+    1 as kolicina,
+    '3999' as cena
+FROM colors c
+WHERE NOT EXISTS (
+    SELECT 1 FROM filaments f 
+    WHERE f.tip = 'PLA' 
+    AND f.finish = 'Basic' 
+    AND f.boja = c.name
+)
+ON CONFLICT DO NOTHING;
+
+-- Update any existing PLA Basic filaments to have 1 refill if they don't have any
+UPDATE filaments
+SET refill = '1'
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND (refill IS NULL OR refill = '0' OR refill = '');
+
+-- Show summary
+\echo ''
+\echo 'Summary:'
+SELECT 
+    'Total PLA Basic filaments with refills' as description,
+    COUNT(*) as count 
+FROM filaments 
+WHERE tip = 'PLA' 
+AND finish = 'Basic' 
+AND refill = '1';
+
+-- Show all PLA Basic filaments
+\echo ''
+\echo 'All PLA Basic filaments:'
+SELECT 
+    boja as color,
+    refill,
+    vakum as vacuum,
+    otvoreno as opened,
+    kolicina as quantity,
+    cena as price
+FROM filaments 
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+ORDER BY boja;
+EOF
+
+echo ""
+echo "Database update completed!"

src/components/AnimatedLogo.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+
+const logoVariants = [
+  { emoji: '🎨', rotation: 360, scale: 1.2 },
+  { emoji: '🌈', rotation: -360, scale: 1.1 },
+  { emoji: '🎯', rotation: 720, scale: 1.3 },
+  { emoji: '✨', rotation: -720, scale: 1.0 },
+  { emoji: '🔄', rotation: 360, scale: 1.2 },
+  { emoji: '🎪', rotation: -360, scale: 1.1 },
+  { emoji: '🌀', rotation: 1080, scale: 1.2 },
+  { emoji: '💫', rotation: -1080, scale: 1.0 },
+  { emoji: '🖨️', rotation: 360, scale: 1.2 },
+  { emoji: '🧵', rotation: -360, scale: 1.1 },
+  { emoji: '🎭', rotation: 720, scale: 1.2 },
+  { emoji: '🎲', rotation: -720, scale: 1.3 },
+  { emoji: '🔮', rotation: 360, scale: 1.1 },
+  { emoji: '💎', rotation: -360, scale: 1.2 },
+  { emoji: '🌟', rotation: 1440, scale: 1.0 },
+];
+
+export const AnimatedLogo: React.FC = () => {
+  const [currentLogo, setCurrentLogo] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsAnimating(true);
+      setTimeout(() => {
+        setCurrentLogo((prev) => (prev + 1) % logoVariants.length);
+        setIsAnimating(false);
+      }, 500);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const logo = logoVariants[currentLogo];
+
+  return (
+    <span 
+      className="inline-block text-4xl transition-all duration-700 ease-in-out"
+      style={{
+        transform: isAnimating 
+          ? `rotate(${logo.rotation}deg) scale(0)` 
+          : `rotate(0deg) scale(${logo.scale})`,
+        opacity: isAnimating ? 0 : 1,
+      }}
+    >
+      {logo.emoji}
+    </span>
+  );
+};

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/ColorRequestForm.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import React, { useState } from 'react';
+import { colorRequestService } from '@/src/services/api';
+
+interface ColorRequestFormProps {
+  onSuccess?: () => void;
+}
+
+export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
+  const [formData, setFormData] = useState({
+    color_name: '',
+    material_type: 'PLA',
+    finish_type: 'Basic',
+    user_name: '',
+    user_email: '',
+    description: '',
+    reference_url: ''
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setMessage(null);
+
+    try {
+      const response = await colorRequestService.submit(formData);
+      setMessage({ 
+        type: 'success', 
+        text: 'Vaš zahtev je uspešno poslat!' 
+      });
+      setFormData({
+        color_name: '',
+        material_type: 'PLA',
+        finish_type: 'Basic',
+        user_name: '',
+        user_email: '',
+        description: '',
+        reference_url: ''
+      });
+      if (onSuccess) onSuccess();
+    } catch (error) {
+      setMessage({ 
+        type: 'error', 
+        text: 'Greška pri slanju zahteva. Pokušajte ponovo.' 
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+      <h2 className="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-100">Zatraži Novu Boju</h2>
+      
+      {message && (
+        <div className={`mb-4 p-4 rounded ${
+          message.type === 'success' 
+            ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' 
+            : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'
+        }`}>
+          {message.text}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="grid md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="color_name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Naziv Boje *
+            </label>
+            <input
+              type="text"
+              id="color_name"
+              name="color_name"
+              required
+              value={formData.color_name}
+              onChange={handleChange}
+              className="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 appearance-none"
+              placeholder="npr. Sunset Orange"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="material_type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Tip Materijala *
+            </label>
+            <select
+              id="material_type"
+              name="material_type"
+              required
+              value={formData.material_type}
+              onChange={handleChange}
+              className="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 appearance-none"
+            >
+              <option value="PLA">PLA</option>
+              <option value="PETG">PETG</option>
+              <option value="ABS">ABS</option>
+              <option value="TPU">TPU</option>
+              <option value="PLA-CF">PLA-CF</option>
+              <option value="PETG-CF">PETG-CF</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="finish_type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Tip Finiša
+            </label>
+            <select
+              id="finish_type"
+              name="finish_type"
+              value={formData.finish_type}
+              onChange={handleChange}
+              className="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 appearance-none"
+            >
+              <option value="Basic">Basic</option>
+              <option value="Matte">Matte</option>
+              <option value="Silk">Silk</option>
+              <option value="Metal">Metal</option>
+              <option value="Sparkle">Sparkle</option>
+              <option value="Glow">Glow</option>
+              <option value="Transparent">Transparent</option>
+            </select>
+          </div>
+
+          <div>
+            <label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Email (opciono)
+            </label>
+            <input
+              type="email"
+              id="user_email"
+              name="user_email"
+              value={formData.user_email}
+              onChange={handleChange}
+              className="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 appearance-none"
+              placeholder="Za obaveštenja o statusu"
+            />
+          </div>
+        </div>
+
+
+        <div className="flex justify-end">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className={`px-6 py-2 rounded-md text-white font-medium ${
+              isSubmitting 
+                ? 'bg-gray-400 cursor-not-allowed' 
+                : 'bg-purple-600 hover:bg-purple-700'
+            } transition-colors`}
+          >
+            {isSubmitting ? 'Slanje...' : 'Pošalji Zahtev'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/components/ColorRequestModal.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { colorRequestService } from '@/src/services/api';
+
+interface ColorRequestModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function ColorRequestModal({ isOpen, onClose }: ColorRequestModalProps) {
+  const [formData, setFormData] = useState({
+    color_name: '',
+    material_type: 'PLA',
+    finish_type: 'Basic',
+    user_email: '',
+    user_phone: ''
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      // Reset form when modal closes
+      setFormData({
+        color_name: '',
+        material_type: 'PLA',
+        finish_type: 'Basic',
+        user_email: '',
+        user_phone: ''
+      });
+      setMessage(null);
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setMessage(null);
+
+    try {
+      await colorRequestService.submit(formData);
+      setMessage({ 
+        type: 'success', 
+        text: 'Vaš zahtev je uspešno poslat!' 
+      });
+      
+      // Close modal after 2 seconds on success
+      setTimeout(() => {
+        onClose();
+      }, 2000);
+    } catch (error) {
+      setMessage({ 
+        type: 'error', 
+        text: 'Greška pri slanju zahteva. Pokušajte ponovo.' 
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div 
+        className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity"
+        onClick={onClose}
+      />
+      
+      {/* Modal */}
+      <div className="fixed inset-0 z-50 overflow-y-auto">
+        <div className="flex min-h-full items-center justify-center p-4">
+          <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
+            {/* Close button */}
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+
+            <h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-gray-100">
+              Zatraži Novu Boju
+            </h2>
+            
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+              Ne možete pronaći boju koju tražite? Javite nam!
+            </p>
+
+            {message && (
+              <div className={`mb-4 p-3 rounded text-sm ${
+                message.type === 'success' 
+                  ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' 
+                  : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'
+              }`}>
+                {message.text}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="color_name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Naziv Boje *
+                </label>
+                <input
+                  type="text"
+                  id="color_name"
+                  name="color_name"
+                  required
+                  value={formData.color_name}
+                  onChange={handleChange}
+                  className="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-purple-500 appearance-none"
+                  placeholder="npr. Sunset Orange"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="material_type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Materijal *
+                  </label>
+                  <select
+                    id="material_type"
+                    name="material_type"
+                    required
+                    value={formData.material_type}
+                    onChange={handleChange}
+                    className="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-purple-500 appearance-none"
+                  >
+                    <option value="PLA">PLA</option>
+                    <option value="PETG">PETG</option>
+                    <option value="ABS">ABS</option>
+                    <option value="TPU">TPU</option>
+                    <option value="PLA-CF">PLA-CF</option>
+                    <option value="PETG-CF">PETG-CF</option>
+                    <option value="Other">Ostalo</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label htmlFor="finish_type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Finiš
+                  </label>
+                  <select
+                    id="finish_type"
+                    name="finish_type"
+                    value={formData.finish_type}
+                    onChange={handleChange}
+                    className="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-purple-500 appearance-none"
+                  >
+                    <option value="Basic">Basic</option>
+                    <option value="Matte">Matte</option>
+                    <option value="Silk">Silk</option>
+                    <option value="Metal">Metal</option>
+                    <option value="Sparkle">Sparkle</option>
+                    <option value="Glow">Glow</option>
+                    <option value="Transparent">Transparent</option>
+                    <option value="Other">Ostalo</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Email *
+                </label>
+                <input
+                  type="email"
+                  id="user_email"
+                  name="user_email"
+                  required
+                  value={formData.user_email}
+                  onChange={handleChange}
+                  className="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-purple-500 appearance-none"
+                  placeholder="Za obaveštenja o statusu"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="user_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Telefon *
+                </label>
+                <input
+                  type="tel"
+                  id="user_phone"
+                  name="user_phone"
+                  required
+                  value={formData.user_phone}
+                  onChange={handleChange}
+                  className="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-purple-500 appearance-none"
+                  placeholder="Za kontakt"
+                />
+              </div>
+
+              <div className="flex justify-end space-x-3 pt-4">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
+                >
+                  Otkaži
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className={`px-6 py-2 rounded-md text-white font-medium ${
+                    isSubmitting 
+                      ? 'bg-gray-400 cursor-not-allowed' 
+                      : 'bg-purple-600 hover:bg-purple-700'
+                  } transition-colors`}
+                >
+                  {isSubmitting ? 'Slanje...' : 'Pošalji'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/ColorRequestSection.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import React, { useState } from 'react';
+import ColorRequestModal from './ColorRequestModal';
+import { trackEvent } from './MatomoAnalytics';
+
+export default function ColorRequestSection() {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
+        <div className="text-center">
+          <div className="flex justify-center mb-6">
+            <div className="p-4 bg-purple-100 dark:bg-purple-900/30 rounded-full">
+              <svg className="w-16 h-16 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+              </svg>
+            </div>
+          </div>
+          
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+            Zatražite Novu Boju
+          </h2>
+          
+          <p className="text-gray-600 dark:text-gray-400 mb-8 max-w-md mx-auto">
+            Ne možete pronaći boju koju tražite u našoj ponudi? 
+            Javite nam koju boju želite i mi ćemo je nabaviti za vas!
+          </p>
+
+          <div className="space-y-4">
+            <button
+              onClick={() => {
+                setShowModal(true);
+                trackEvent('Navigation', 'Request Color', 'Color Request Tab');
+              }}
+              className="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+              Pošaljite Zahtev za Boju
+            </button>
+          </div>
+
+          <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-6">
+            <div className="text-center">
+              <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">1-3</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dana za odgovor</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">100+</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dostupnih boja</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">7-14</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dana za nabavku</div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <ColorRequestModal isOpen={showModal} onClose={() => setShowModal(false)} />
+    </div>
+  );
+}

src/components/ColorSwatch.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+interface ColorSwatchProps {
+  name: string;
+  hex?: string;
+  size?: 'sm' | 'md' | 'lg';
+  showLabel?: boolean;
+  className?: string;
+}
+
+export const ColorSwatch: React.FC<ColorSwatchProps> = ({ 
+  name, 
+  hex, 
+  size = 'md', 
+  showLabel = true,
+  className = ''
+}) => {
+  const sizeClasses = {
+    sm: 'w-7 h-7',
+    md: 'w-8 h-8',
+    lg: 'w-10 h-10'
+  };
+
+  // Default color mappings if hex is not provided
+  const defaultColors: Record<string, string> = {
+    'Black': '#000000',
+    'White': '#FFFFFF',
+    'Gray': '#808080',
+    'Red': '#FF0000',
+    'Blue': '#0000FF',
+    'Green': '#00FF00',
+    'Yellow': '#FFFF00',
+    'Transparent': 'rgba(255, 255, 255, 0.1)'
+  };
+
+  const getColorFromName = (colorName: string): string => {
+    // Check exact match first
+    if (defaultColors[colorName]) return defaultColors[colorName];
+    
+    // Check if color name contains a known color
+    const lowerName = colorName.toLowerCase();
+    for (const [key, value] of Object.entries(defaultColors)) {
+      if (lowerName.includes(key.toLowerCase())) {
+        return value;
+      }
+    }
+    
+    // Generate a color from the name hash
+    let hash = 0;
+    for (let i = 0; i < colorName.length; i++) {
+      hash = colorName.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const hue = hash % 360;
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+
+  const backgroundColor = hex || getColorFromName(name);
+  const isLight = backgroundColor.startsWith('#') && 
+    parseInt(backgroundColor.slice(1, 3), 16) > 200 &&
+    parseInt(backgroundColor.slice(3, 5), 16) > 200 &&
+    parseInt(backgroundColor.slice(5, 7), 16) > 200;
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <div 
+        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 bg-gradient-to-br from-gray-200 to-gray-300 opacity-50" />
+        )}
+      </div>
+      {showLabel && (
+        <span className="text-sm text-gray-700 dark:text-gray-300">{name}</span>
+      )}
+    </div>
+  );
+};

src/components/EnhancedFilters.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import '@/src/styles/select.css';
+import { trackEvent } from './MatomoAnalytics';
+
+interface EnhancedFiltersProps {
+  filters: {
+    material: string;
+    finish: string;
+    color: string;
+  };
+  onFilterChange: (filters: any) => void;
+  uniqueValues: {
+    materials: string[];
+    finishes: string[];
+    colors: string[];
+  };
+}
+
+export const EnhancedFilters: React.FC<EnhancedFiltersProps> = ({ 
+  filters, 
+  onFilterChange, 
+  uniqueValues 
+}) => {
+  // Check if any filters are active
+  const hasActiveFilters = filters.material || filters.finish || filters.color;
+
+  return (
+    <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+      {/* Filters Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
+        {/* Material Filter */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Materijal
+          </label>
+          <select
+            value={filters.material}
+            onChange={(e) => {
+              onFilterChange({ ...filters, material: e.target.value });
+              trackEvent('Filter', 'Material', e.target.value || 'All');
+            }}
+            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 materijali</option>
+            <option value="ABS">ABS</option>
+            <option value="ASA">ASA</option>
+            <option value="PA6">PA6</option>
+            <option value="PAHT">PAHT</option>
+            <option value="PC">PC</option>
+            <option value="PET">PET</option>
+            <option value="PETG">PETG</option>
+            <option value="PLA">PLA</option>
+            <option value="PPA">PPA</option>
+            <option value="PPS">PPS</option>
+            <option value="TPU">TPU</option>
+          </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 });
+              trackEvent('Filter', 'Finish', e.target.value || 'All');
+            }}
+            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>
+            <option value="85A">85A</option>
+            <option value="90A">90A</option>
+            <option value="95A HF">95A HF</option>
+            <option value="Aero">Aero</option>
+            <option value="Basic">Basic</option>
+            <option value="Basic Gradient">Basic Gradient</option>
+            <option value="CF">CF</option>
+            <option value="FR">FR</option>
+            <option value="Galaxy">Galaxy</option>
+            <option value="GF">GF</option>
+            <option value="Glow">Glow</option>
+            <option value="HF">HF</option>
+            <option value="Marble">Marble</option>
+            <option value="Matte">Matte</option>
+            <option value="Metal">Metal</option>
+            <option value="Silk Multi-Color">Silk Multi-Color</option>
+            <option value="Silk+">Silk+</option>
+            <option value="Sparkle">Sparkle</option>
+            <option value="Translucent">Translucent</option>
+            <option value="Wood">Wood</option>
+          </select>
+        </div>
+
+        {/* Color Filter */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Boja
+          </label>
+          <select
+            value={filters.color}
+            onChange={(e) => {
+              onFilterChange({ ...filters, color: e.target.value });
+              trackEvent('Filter', 'Color', e.target.value || 'All');
+            }}
+            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 boje</option>
+            {uniqueValues.colors.map(color => (
+              <option key={color} value={color}>{color}</option>
+            ))}
+          </select>
+        </div>
+
+      </div>
+
+      {/* Reset button - only show when filters are active */}
+      {hasActiveFilters && (
+        <div className="mt-4 text-center">
+          <button
+            onClick={() => {
+              onFilterChange({
+                material: '',
+                finish: '',
+                color: ''
+              });
+              trackEvent('Filter', 'Reset', 'All Filters');
+            }}
+            className="px-4 py-2 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-colors"
+          >
+            Reset filtere
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/FilamentTable.tsx

@@ -1,302 +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
-                    }}
-                  >
-                    <ColorCell colorName={filament.boja} />
-                  </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

@@ -0,0 +1,300 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { Filament } from '@/src/types/filament';
+import { EnhancedFilters } from './EnhancedFilters';
+import { colorService } from '@/src/services/api';
+import { trackEvent } from './MatomoAnalytics';
+
+interface FilamentTableV2Props {
+  filaments: Filament[];
+}
+
+const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortField, setSortField] = useState<string>('boja');
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
+  const [availableColors, setAvailableColors] = useState<Array<{id: string, name: string, hex: string, cena_refill?: number, cena_spulna?: number}> | null>(null);
+  
+  const [filters, setFilters] = useState({
+    material: '',
+    finish: '',
+    color: ''
+  });
+
+  // Fetch all available colors from API
+  useEffect(() => {
+    const fetchColors = async () => {
+      try {
+        const colors = await colorService.getAll();
+        setAvailableColors(colors);
+      } catch (error) {
+        console.error('Error fetching colors:', error);
+      }
+    };
+
+    fetchColors();
+  }, []);
+
+  // Use filaments directly since they're already in the correct format
+  const normalizedFilaments = useMemo(() => {
+    return filaments;
+  }, [filaments]);
+
+  // Get unique values for filters (only from filaments with inventory)
+  const uniqueValues = useMemo(() => {
+    const filamentsWithInventory = normalizedFilaments.filter(f => f.kolicina > 0);
+    return {
+      materials: [...new Set(filamentsWithInventory.map(f => f.tip))].sort(),
+      finishes: [...new Set(filamentsWithInventory.map(f => f.finish))].sort(),
+      colors: [...new Set(filamentsWithInventory.map(f => f.boja))].sort()
+    };
+  }, [normalizedFilaments]);
+
+  // Filter and sort filaments
+  const filteredAndSortedFilaments = useMemo(() => {
+    let filtered = normalizedFilaments.filter(filament => {
+      // First, filter out filaments with zero inventory
+      if (filament.kolicina === 0) {
+        return false;
+      }
+      
+      // Search filter
+      const searchLower = searchTerm.toLowerCase();
+      const matchesSearch = 
+        filament.tip.toLowerCase().includes(searchLower) ||
+        filament.finish.toLowerCase().includes(searchLower) ||
+        filament.boja.toLowerCase().includes(searchLower) ||
+        filament.cena.toLowerCase().includes(searchLower);
+      
+      // Other filters
+      const matchesMaterial = !filters.material || filament.tip === filters.material;
+      const matchesFinish = !filters.finish || filament.finish === filters.finish;
+      const matchesColor = !filters.color || filament.boja === filters.color;
+      
+      return matchesSearch && matchesMaterial && matchesFinish && matchesColor;
+    });
+
+    // Sort
+    if (sortField) {
+      filtered.sort((a, b) => {
+        let aVal: any = a[sortField as keyof typeof a];
+        let bVal: any = b[sortField as keyof typeof b];
+        
+        // Handle numeric values
+        if (sortField === 'kolicina' || sortField === 'cena') {
+          aVal = parseFloat(String(aVal)) || 0;
+          bVal = parseFloat(String(bVal)) || 0;
+        }
+        
+        // Handle spulna (extract numbers)
+        else if (sortField === 'spulna') {
+          const aMatch = String(aVal).match(/^(\d+)/);
+          const bMatch = String(bVal).match(/^(\d+)/);
+          aVal = aMatch ? parseInt(aMatch[1]) : 0;
+          bVal = bMatch ? parseInt(bMatch[1]) : 0;
+        }
+        
+        // String comparison for other fields
+        else {
+          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;
+      });
+    }
+
+    return filtered;
+  }, [normalizedFilaments, searchTerm, filters, sortField, sortOrder]);
+
+  const handleSort = (field: string) => {
+    if (sortField === field) {
+      setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortOrder('asc');
+    }
+    trackEvent('Table', 'Sort', field);
+  };
+
+  return (
+    <div className="space-y-6">
+
+      {/* Search Bar */}
+      <div className="relative">
+        <input
+          type="text"
+          placeholder="Pretraži po materijalu, boji..."
+          value={searchTerm}
+          onChange={(e) => {
+            setSearchTerm(e.target.value);
+            if (e.target.value) {
+              trackEvent('Search', 'Filament Search', e.target.value);
+            }
+          }}
+          className="w-full px-4 py-2 pl-10 pr-4 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500"
+        />
+        <svg className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+      </div>
+
+      {/* Enhanced Filters */}
+      <EnhancedFilters 
+        filters={filters}
+        onFilterChange={setFilters}
+        uniqueValues={uniqueValues}
+      />
+
+
+      {/* 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('tip')} className="px-2 sm: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">
+                Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
+              </th>
+              <th onClick={() => handleSort('finish')} className="px-2 sm: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">
+                Finish {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
+              </th>
+              <th onClick={() => handleSort('boja')} className="px-2 sm: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 {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
+              </th>
+              <th onClick={() => handleSort('refill')} className="px-2 sm: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">
+                Refill {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
+              </th>
+              <th onClick={() => handleSort('spulna')} className="px-2 sm: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">
+                Spulna {sortField === 'spulna' && (sortOrder === 'asc' ? '↑' : '↓')}
+              </th>
+              <th onClick={() => handleSort('kolicina')} className="px-2 sm: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">
+                Količina {sortField === 'kolicina' && (sortOrder === 'asc' ? '↑' : '↓')}
+              </th>
+              <th onClick={() => handleSort('cena')} className="px-2 sm: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 {sortField === 'cena' && (sortOrder === 'asc' ? '↑' : '↓')}
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+            {filteredAndSortedFilaments.map(filament => {
+              return (
+                <tr key={filament.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                  <td className="px-2 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {filament.tip}
+                  </td>
+                  <td className="px-2 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {filament.finish}
+                  </td>
+                  <td className="px-2 sm:px-6 py-4 whitespace-nowrap">
+                    <div className="flex items-center gap-1 sm:gap-2">
+                      {filament.boja_hex && (
+                        <div 
+                          className="w-5 h-5 sm:w-7 sm:h-7 rounded border border-gray-300 dark:border-gray-600" 
+                          style={{ backgroundColor: filament.boja_hex }}
+                          title={filament.boja_hex}
+                        />
+                      )}
+                      <span className="text-xs sm:text-sm text-gray-900 dark:text-gray-100">{filament.boja}</span>
+                    </div>
+                  </td>
+                  <td className="px-2 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {filament.refill > 0 ? (
+                      <span className="text-green-600 dark:text-green-400 font-bold">{filament.refill}</span>
+                    ) : (
+                      <span className="text-gray-400 dark:text-gray-500">0</span>
+                    )}
+                  </td>
+                  <td className="px-2 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {filament.spulna > 0 ? (
+                      <span className="text-blue-500 dark:text-blue-400 font-bold">{filament.spulna}</span>
+                    ) : (
+                      <span className="text-gray-400 dark:text-gray-500">0</span>
+                    )}
+                  </td>
+                  <td className="px-2 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    {filament.kolicina}
+                  </td>
+                  <td className="px-2 sm:px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900 dark:text-white">
+                    {(() => {
+                      // First check if filament has custom prices stored
+                      const hasRefill = filament.refill > 0;
+                      const hasSpool = filament.spulna > 0;
+                      
+                      if (!hasRefill && !hasSpool) return '-';
+                      
+                      // Parse prices from the cena field if available (format: "3499" or "3499/3999")
+                      let refillPrice = 3499;
+                      let spoolPrice = 3999;
+                      
+                      if (filament.cena) {
+                        const prices = filament.cena.split('/');
+                        if (prices.length === 1) {
+                          // Single price - use for whatever is in stock
+                          refillPrice = parseInt(prices[0]) || 3499;
+                          spoolPrice = parseInt(prices[0]) || 3999;
+                        } else if (prices.length === 2) {
+                          // Two prices - refill/spool format
+                          refillPrice = parseInt(prices[0]) || 3499;
+                          spoolPrice = parseInt(prices[1]) || 3999;
+                        }
+                      } else {
+                        // Fallback to color defaults if no custom price
+                        const colorData = availableColors?.find(c => c.name === filament.boja);
+                        refillPrice = colorData?.cena_refill || 3499;
+                        spoolPrice = colorData?.cena_spulna || 3999;
+                      }
+                      
+                      // Calculate sale prices if applicable
+                      const saleActive = filament.sale_active && filament.sale_percentage;
+                      const saleRefillPrice = saleActive ? Math.round(refillPrice * (1 - filament.sale_percentage! / 100)) : refillPrice;
+                      const saleSpoolPrice = saleActive ? Math.round(spoolPrice * (1 - filament.sale_percentage! / 100)) : spoolPrice;
+                      
+                      return (
+                        <>
+                          {hasRefill && (
+                            <span className={saleActive ? "line-through text-gray-500 dark:text-gray-400" : "text-green-600 dark:text-green-400"}>
+                              {refillPrice.toLocaleString('sr-RS')}
+                            </span>
+                          )}
+                          {hasRefill && saleActive && (
+                            <span className="text-green-600 dark:text-green-400 font-bold ml-1">
+                              {saleRefillPrice.toLocaleString('sr-RS')}
+                            </span>
+                          )}
+                          {hasRefill && hasSpool && <span className="mx-1">/</span>}
+                          {hasSpool && (
+                            <span className={saleActive ? "line-through text-gray-500 dark:text-gray-400" : "text-blue-500 dark:text-blue-400"}>
+                              {spoolPrice.toLocaleString('sr-RS')}
+                            </span>
+                          )}
+                          {hasSpool && saleActive && (
+                            <span className="text-blue-500 dark:text-blue-400 font-bold ml-1">
+                              {saleSpoolPrice.toLocaleString('sr-RS')}
+                            </span>
+                          )}
+                          <span className="ml-1 text-gray-600 dark:text-gray-400">RSD</span>
+                          {saleActive && (
+                            <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
+                              -{filament.sale_percentage}%
+                            </span>
+                          )}
+                        </>
+                      );
+                    })()}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="text-sm text-gray-500 dark:text-gray-400 text-center">
+        Prikazano {filteredAndSortedFilaments.length} filamenata
+      </div>
+    </div>
+  );
+};
+
+export { FilamentTableV2 };

src/components/GearRequestModal.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { gearRequestService } from '@/src/services/api';
+
+interface GearRequestModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function GearRequestModal({ isOpen, onClose }: GearRequestModalProps) {
+  const [formData, setFormData] = useState({
+    item_name: '',
+    category: '',
+    printer_model: '',
+    quantity: '1',
+    user_email: '',
+    user_phone: '',
+    message: ''
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setFormData({
+        item_name: '',
+        category: '',
+        printer_model: '',
+        quantity: '1',
+        user_email: '',
+        user_phone: '',
+        message: ''
+      });
+      setMessage(null);
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setMessage(null);
+
+    try {
+      await gearRequestService.submit(formData);
+      setMessage({ 
+        type: 'success', 
+        text: 'Vaš zahtev za opremu je uspešno poslat!' 
+      });
+      
+      setTimeout(() => {
+        onClose();
+      }, 2000);
+    } catch (error) {
+      setMessage({ 
+        type: 'error', 
+        text: 'Greška pri slanju zahteva. Pokušajte ponovo.' 
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  return (
+    <>
+      <div 
+        className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity"
+        onClick={onClose}
+      />
+      
+      <div className="fixed inset-0 z-50 overflow-y-auto">
+        <div className="flex min-h-full items-center justify-center p-4">
+          <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+
+            <h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-gray-100">
+              Zatraži Opremu ili Deo
+            </h2>
+            
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+              Recite nam koji deo ili opremu tražite!
+            </p>
+
+            {message && (
+              <div className={`mb-4 p-3 rounded text-sm ${
+                message.type === 'success' 
+                  ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' 
+                  : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'
+              }`}>
+                {message.text}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="item_name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Naziv Proizvoda *
+                </label>
+                <input
+                  type="text"
+                  id="item_name"
+                  name="item_name"
+                  required
+                  value={formData.item_name}
+                  onChange={handleChange}
+                  className="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-purple-500"
+                  placeholder="npr. Hardened Steel Nozzle"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="category" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Kategorija
+                  </label>
+                  <select
+                    id="category"
+                    name="category"
+                    value={formData.category}
+                    onChange={handleChange}
+                    className="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-purple-500"
+                  >
+                    <option value="">Izaberite</option>
+                    <option value="nozzle">Dizna</option>
+                    <option value="hotend">Hotend</option>
+                    <option value="extruder">Ekstruder</option>
+                    <option value="bed">Podloga</option>
+                    <option value="tool">Alat</option>
+                    <option value="spare_part">Rezervni Deo</option>
+                    <option value="accessory">Dodatak</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label htmlFor="quantity" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Količina
+                  </label>
+                  <input
+                    type="number"
+                    id="quantity"
+                    name="quantity"
+                    min="1"
+                    value={formData.quantity}
+                    onChange={handleChange}
+                    className="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-purple-500"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="printer_model" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Model Štampača
+                </label>
+                <input
+                  type="text"
+                  id="printer_model"
+                  name="printer_model"
+                  value={formData.printer_model}
+                  onChange={handleChange}
+                  className="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-purple-500"
+                  placeholder="npr. Bambu Lab X1C"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Dodatne Napomene
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  rows={3}
+                  value={formData.message}
+                  onChange={handleChange}
+                  className="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-purple-500"
+                  placeholder="Opišite šta vam je potrebno..."
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Email *
+                  </label>
+                  <input
+                    type="email"
+                    id="user_email"
+                    name="user_email"
+                    required
+                    value={formData.user_email}
+                    onChange={handleChange}
+                    className="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-purple-500"
+                    placeholder="vas@email.com"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="user_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Telefon *
+                  </label>
+                  <input
+                    type="tel"
+                    id="user_phone"
+                    name="user_phone"
+                    required
+                    value={formData.user_phone}
+                    onChange={handleChange}
+                    className="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-purple-500"
+                    placeholder="06x xxx xxxx"
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-end space-x-3 pt-4">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
+                >
+                  Otkaži
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className={`px-6 py-2 rounded-md text-white font-medium ${
+                    isSubmitting 
+                      ? 'bg-gray-400 cursor-not-allowed' 
+                      : 'bg-purple-600 hover:bg-purple-700'
+                  } transition-colors`}
+                >
+                  {isSubmitting ? 'Slanje...' : 'Pošalji'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/GearTable.tsx

@@ -0,0 +1,270 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { gearService } from '@/src/services/api';
+import GearRequestModal from './GearRequestModal';
+
+interface GearItem {
+  id: string;
+  name: string;
+  category: 'nozzle' | 'hotend' | 'extruder' | 'bed' | 'tool' | 'spare_part' | 'accessory';
+  price: string;
+  availability: 'available' | 'out_of_stock' | 'pre_order';
+  description: string;
+  compatible_with?: string[];
+  image_url?: string;
+}
+
+export default function GearTable() {
+  const [gear, setGear] = useState<GearItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isRequestModalOpen, setIsRequestModalOpen] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+  useEffect(() => {
+    fetchGear();
+  }, []);
+
+  const fetchGear = async () => {
+    try {
+      const data = await gearService.getAll();
+      setGear(data);
+    } catch (error) {
+      console.error('Error fetching gear:', error);
+      // Use mock data for now until API is ready
+      setGear([
+        {
+          id: '1',
+          name: 'Hardened Steel Nozzle 0.4mm',
+          category: 'nozzle',
+          price: '29€',
+          availability: 'available',
+          description: 'Otporna na habanje, idealna za abrazivne materijale',
+          compatible_with: ['X1C', 'P1S', 'A1']
+        },
+        {
+          id: '2',
+          name: 'PEI Textured Plate',
+          category: 'bed',
+          price: '39€',
+          availability: 'available',
+          description: 'Teksturisana PEI ploča za bolju adheziju',
+          compatible_with: ['X1C', 'P1S']
+        },
+        {
+          id: '3',
+          name: 'AMS Hub',
+          category: 'accessory',
+          price: '149€',
+          availability: 'available',
+          description: 'Hub za povezivanje do 4 AMS jedinice',
+          compatible_with: ['X1C', 'P1S']
+        },
+        {
+          id: '4',
+          name: 'Bambu Lab Tool Kit',
+          category: 'tool',
+          price: '49€',
+          availability: 'available',
+          description: 'Kompletan set alata za održavanje štampača'
+        },
+        {
+          id: '5',
+          name: 'Hotend Assembly',
+          category: 'hotend',
+          price: '89€',
+          availability: 'pre_order',
+          description: 'Kompletna hotend jedinica',
+          compatible_with: ['X1C', 'P1S']
+        },
+        {
+          id: '6',
+          name: 'Carbon Filter',
+          category: 'spare_part',
+          price: '19€',
+          availability: 'available',
+          description: 'Aktivni ugljeni filter za X1C',
+          compatible_with: ['X1C']
+        },
+        {
+          id: '7',
+          name: 'Extruder Gear Set',
+          category: 'extruder',
+          price: '25€',
+          availability: 'available',
+          description: 'Set zupčanika za ekstruder',
+          compatible_with: ['X1C', 'P1S', 'A1']
+        },
+        {
+          id: '8',
+          name: 'LED Light Bar',
+          category: 'accessory',
+          price: '35€',
+          availability: 'available',
+          description: 'LED osvetljenje za komoru štampača',
+          compatible_with: ['X1C', 'P1S']
+        }
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const categories = [
+    { value: 'all', label: 'Sve' },
+    { value: 'nozzle', label: 'Dizne' },
+    { value: 'hotend', label: 'Hotend' },
+    { value: 'extruder', label: 'Ekstruder' },
+    { value: 'bed', label: 'Podloge' },
+    { value: 'tool', label: 'Alati' },
+    { value: 'spare_part', label: 'Rezervni Delovi' },
+    { value: 'accessory', label: 'Dodaci' }
+  ];
+
+  const filteredGear = selectedCategory === 'all' 
+    ? gear 
+    : gear.filter(item => item.category === selectedCategory);
+
+  const getAvailabilityBadge = (availability: string) => {
+    switch (availability) {
+      case 'available':
+        return (
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
+            Dostupno
+          </span>
+        );
+      case 'out_of_stock':
+        return (
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
+            Nema na stanju
+          </span>
+        );
+      case 'pre_order':
+        return (
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+            Prednarudžba
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const getCategoryBadge = (category: string) => {
+    const categoryLabel = categories.find(c => c.value === category)?.label || category;
+    return (
+      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+        {categoryLabel}
+      </span>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center py-12">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-6 flex justify-between items-center">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Oprema i Delovi</h2>
+        <button
+          onClick={() => setIsRequestModalOpen(true)}
+          className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center space-x-2"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          <span>Zatraži Opremu</span>
+        </button>
+      </div>
+
+      <div className="mb-6">
+        <div className="flex flex-wrap gap-2">
+          {categories.map((category) => (
+            <button
+              key={category.value}
+              onClick={() => setSelectedCategory(category.value)}
+              className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                selectedCategory === category.value
+                  ? 'bg-purple-600 text-white'
+                  : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+              }`}
+            >
+              {category.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+          <thead className="bg-gray-50 dark:bg-gray-800">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Proizvod
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Kategorija
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Kompatibilnost
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Cena
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Status
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+            {filteredGear.map((item) => (
+              <tr key={item.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div>
+                    <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      {item.name}
+                    </div>
+                    <div className="text-sm text-gray-500 dark:text-gray-400">
+                      {item.description}
+                    </div>
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getCategoryBadge(item.category)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {item.compatible_with ? (
+                    <div className="flex flex-wrap gap-1">
+                      {item.compatible_with.map((model) => (
+                        <span key={model} className="text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400 px-2 py-1 rounded">
+                          {model}
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-sm text-gray-500 dark:text-gray-400">Univerzalno</span>
+                  )}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-lg font-semibold text-purple-600 dark:text-purple-400">
+                    {item.price}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getAvailabilityBadge(item.availability)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <GearRequestModal isOpen={isRequestModalOpen} onClose={() => setIsRequestModalOpen(false)} />
+    </div>
+  );
+}

src/components/InventoryBadge.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+interface InventoryBadgeProps {
+  type: 'vacuum' | 'opened' | 'printer' | 'total' | 'available';
+  count: number;
+  className?: string;
+}
+
+export const InventoryBadge: React.FC<InventoryBadgeProps> = ({ type, count, className = '' }) => {
+  if (count === 0) return null;
+
+  const getIcon = () => {
+    switch (type) {
+      case 'vacuum':
+        return (
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+              d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+          </svg>
+        );
+      case 'opened':
+        return (
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+          </svg>
+        );
+      case 'printer':
+        return (
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+              d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+          </svg>
+        );
+      case 'total':
+        return (
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+              d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+          </svg>
+        );
+      case 'available':
+        return (
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        );
+    }
+  };
+
+  const getColor = () => {
+    switch (type) {
+      case 'vacuum':
+        return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+      case 'opened':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+      case 'printer':
+        return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
+      case 'total':
+        return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
+      case 'available':
+        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+    }
+  };
+
+  const getLabel = () => {
+    switch (type) {
+      case 'vacuum':
+        return 'Vakuum';
+      case 'opened':
+        return 'Otvoreno';
+      case 'printer':
+        return 'U printeru';
+      case 'total':
+        return 'Ukupno';
+      case 'available':
+        return 'Dostupno';
+    }
+  };
+
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getColor()} ${className}`}>
+      {getIcon()}
+      <span>{count}</span>
+      <span className="sr-only">{getLabel()}</span>
+    </span>
+  );
+};