Move dashboard to root level route

- Dashboard now accessible at /dashboard instead of /upadaj/dashboard
- Updated all navigation links to use new /dashboard route
- Login page still at /upadaj, redirects to /dashboard on success
- Colors and requests remain under /upadaj prefix
- Updated test files to reference new dashboard path

.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
-# The actual values come from Amplify Environment Variables
-NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+# Production Environment Configuration
+NODE_ENV=production
+
+# 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
-terraform/*.tfstate.*
+*.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,259 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Filamenteka is a 3D printing filament inventory management system for tracking Bambu Lab filaments. It consists of:
+- **Frontend**: Next.js app with React, TypeScript, and Tailwind CSS (static export)
+- **Backend**: Node.js API server with PostgreSQL database
+- **Infrastructure**: AWS (Amplify for frontend, EC2 for API, RDS for database)
+
+## 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
+
+## 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
+npm run test:watch       # Run Jest in watch mode
+
+# Security & Quality
+npm run security:check   # Check for credential leaks (scripts/security/security-check.js)
+npm run test:build       # Test if build succeeds without creating files
+./scripts/pre-commit.sh  # Runs security, build, and test checks (triggered by husky)
+
+# Database Migrations
+npm run migrate          # Run pending migrations locally
+npm run migrate:clear    # Clear migration history (development only)
+scripts/update-db-via-aws.sh  # Run migrations on production RDS via EC2
+
+# Deployment
+scripts/deploy-api-update.sh  # Deploy API to EC2 via AWS SSM (recommended)
+scripts/deploy-frontend.sh    # Manual frontend deployment helper
+```
+
+## Architecture
+
+### Frontend Structure (Next.js App Router)
+- `/app` - Next.js 13+ app directory structure
+  - `/page.tsx` - Public filament inventory table
+  - `/upadaj` - Admin panel (password protected)
+    - `/page.tsx` - Admin login
+    - `/dashboard/page.tsx` - Filament CRUD operations
+    - `/colors/page.tsx` - Color management
+    - `/requests/page.tsx` - Customer color requests
+- `/src` - Source files
+  - `/components` - React components
+  - `/services/api.ts` - Axios instance with auth interceptors
+  - `/data` - Color definitions (bambuLabColors.ts, bambuLabColorsComplete.ts)
+  - `/types` - TypeScript type definitions
+
+### API Structure
+- `/api` - Node.js Express server (runs on EC2, port 80)
+  - `/server.js` - Main Express server with all routes inline
+  - Database: PostgreSQL on AWS RDS
+  - Endpoints: `/api/login`, `/api/filaments`, `/api/colors`, `/api/sale/bulk`, `/api/color-requests`
+
+### Key Components
+- `FilamentTableV2` - Main inventory display with sorting/filtering
+- `SaleManager` - Bulk sale management interface
+- `ColorCell` - Smart color rendering with gradient support
+- `EnhancedFilters` - Advanced filtering system
+- `ColorRequestForm` - Customer color request form
+- `ColorRequestModal` - Modal for color requests
+
+### Data Models
+
+#### Filament Schema (PostgreSQL)
+```sql
+filaments: {
+  id: UUID,
+  tip: VARCHAR(50),        # Material type (PLA, PETG, ABS)
+  finish: VARCHAR(50),     # Finish type (Basic, Matte, Silk)
+  boja: VARCHAR(100),      # Color name
+  refill: INTEGER,         # Refill spool count
+  spulna: INTEGER,         # Regular spool count
+  kolicina: INTEGER,       # Total quantity (refill + spulna)
+  cena: VARCHAR(50),       # Price
+  sale_active: BOOLEAN,    # Sale status
+  sale_percentage: INTEGER,# Sale discount
+  sale_end_date: TIMESTAMP # Sale expiry
+}
+```
+
+#### Color Schema
+```sql
+colors: {
+  id: UUID,
+  name: VARCHAR(100),      # 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,
+  color_name: VARCHAR(255), # Requested color name
+  message: TEXT,            # Customer message
+  contact_name: VARCHAR(255), # Customer name (required)
+  contact_phone: VARCHAR(50), # Customer phone (required)
+  status: VARCHAR(20),      # Status: pending, reviewed, fulfilled
+  created_at: TIMESTAMP
+}
+```
+
+## Deployment
+
+### Frontend (AWS Amplify)
+- Automatic deployment on push to main branch
+- Build output: Static files in `/out` directory
+- Config: `amplify.yml`, `next.config.js` (output: 'export')
+- Security check runs during build (amplify.yml preBuild phase)
+
+### API Server (EC2)
+- Deployment via `scripts/deploy-api-update.sh` (uses AWS SSM to push updates)
+- Instance ID: `i-03956ecf32292d7d9`
+- Server IP: `3.71.161.51`
+- Domain: `api.filamenteka.rs`
+- Service: `node-api` (systemd)
+- Deploy script pulls from GitHub main branch and restarts service
+- IMPORTANT: When deploying API, remember to build for AMD64 Linux (not ARM macOS)
+
+### Database (RDS PostgreSQL)
+- Host: `filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com`
+- User: `filamenteka_admin`
+- Database: `filamenteka`
+- Migrations in `/database/migrations/`
+- Schema in `/database/schema.sql`
+- Use `scripts/update-db-via-aws.sh` for running migrations on production
+
+## Important Patterns
+
+### API Communication
+- All API calls organized in service modules (`src/services/api.ts`)
+- Services: `authService`, `colorService`, `filamentService`, `colorRequestService`
+- Axios instance with interceptors for automatic auth token injection
+- Auth token stored in localStorage with 24h expiry
+- Automatic redirect on 401/403 in admin routes (via response interceptor)
+- Cache busting on filament fetches with timestamp query param
+
+### Color Management
+- Frontend color mappings in `src/data/bambuLabColors.ts` and `bambuLabColorsComplete.ts`
+- Database color definitions in `colors` table with pricing (cena_refill, cena_spulna)
+- ColorMapping interface supports both solid colors (hex string) and gradients (hex array)
+- Automatic row coloring via ColorCell component based on filament.boja
+- Special handling for gradient filaments (e.g., Cotton Candy Cloud)
+- Foreign key constraint: filaments.boja → colors.name (ON UPDATE CASCADE)
+
+### State Management
+- React hooks for local component state
+- No global state management library
+- Data fetching in components with useEffect
+- Service layer handles all API interactions
+
+### Testing
+- Jest + React Testing Library
+- Tests in `__tests__/` directory
+- Config: `jest.config.js`, `jest.setup.js`
+- Coverage goal: >80%
+- Run with `npm test` or `npm run test:watch`
+- Tests include: component tests, API integration tests, data consistency checks
+
+## Environment Variables
+
+```bash
+# Frontend (.env.local)
+NEXT_PUBLIC_API_URL=https://api.filamenteka.rs/api
+
+# API Server (.env in /api directory)
+DATABASE_URL=postgresql://filamenteka_admin:PASSWORD@filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com:5432/filamenteka
+JWT_SECRET=...
+ADMIN_PASSWORD=...
+NODE_ENV=production
+PORT=80
+```
+
+## Security Considerations
+
+- **Authentication**: JWT tokens with 24h expiry (hardcoded admin user for now)
+- **Password**: Stored in environment variable ADMIN_PASSWORD (bcrypt ready for multi-user)
+- **SQL Injection**: Prevented via parameterized queries in all database operations
+- **Credential Leak Detection**: Pre-commit hook runs `scripts/security/security-check.js`
+- **CORS**: Currently allows all origins (origin: true) - consider hardening for production
+- **Auth Interceptors**: Automatic 401/403 handling with redirect to login
+- **Pre-commit Checks**: Husky runs `scripts/pre-commit.sh` which executes:
+  1. Author mention check (blocks commits with attribution)
+  2. Security check (credential leaks)
+  3. Build test (ensures code compiles)
+  4. Unit tests (Jest with --passWithNoTests)
+
+## Development Workflows
+
+### Adding New Colors
+1. Add color to database via admin panel (`/upadaj/colors`) OR via migration
+2. Update frontend color mappings in `src/data/bambuLabColors.ts`:
+   ```typescript
+   'Color Name': { hex: '#HEXCODE' }  // Solid color
+   'Gradient Name': { hex: ['#HEX1', '#HEX2'], isGradient: true }  // Gradient
+   ```
+3. Color names must match exactly between database and filament.boja
+
+### Database Migrations
+When modifying the database:
+1. Create migration file in `/database/migrations/` with sequential numbering (e.g., `019_add_new_feature.sql`)
+2. Test locally first with `npm run migrate`
+3. Run migration on production:
+   - Use `scripts/update-db-via-aws.sh` for remote execution via EC2
+   - Or SSH to EC2 and run migration directly
+4. Update corresponding TypeScript types in `/src/types/`
+
+Important database constraints:
+- `filaments.boja` has foreign key to `colors.name` (ON UPDATE CASCADE)
+- `filaments.kolicina` has check constraint: `kolicina = refill + spulna`
+- Always update `colors` table first before adding filaments with new colors
+
+### API Deployment Workflow
+1. Make changes to `/api/server.js`
+2. Commit and push to main branch
+3. Run `./scripts/deploy-api-update.sh` (uses AWS SSM to pull from GitHub and restart)
+4. Verify deployment: `curl https://api.filamenteka.rs/` should return `{"status":"ok"}`
+
+### Frontend Deployment Workflow
+1. Make changes to app/components/pages
+2. Test locally: `npm run dev`
+3. Run pre-commit checks: `./scripts/pre-commit.sh`
+4. Commit and push to main branch
+5. AWS Amplify automatically builds and deploys (monitors main branch)
+
+## Infrastructure
+
+### Terraform (IaC)
+Infrastructure as Code in `/terraform/`:
+- **VPC**: `vpc.tf` - Network setup with subnets and routing
+- **EC2**: `ec2-api.tf` - API server instance (i-03956ecf32292d7d9)
+- **RDS**: `rds.tf` - PostgreSQL database
+- **ALB**: `alb.tf` - Application Load Balancer
+- **ECR**: `ecr.tf` - Docker image registry
+- **CloudFront**: `cloudfront-frontend.tf` - Frontend CDN distribution
+- **Cloudflare**: `cloudflare-api.tf` - DNS integration for api.filamenteka.rs
+- **Configuration**: `variables.tf`, `outputs.tf`, `main.tf`
+
+### Current Stack
+- **Frontend**: AWS CloudFront + S3 (static Next.js export)
+- **API**: EC2 instance running Node.js/Express with systemd service
+- **Database**: AWS RDS PostgreSQL (eu-central-1)
+- **DNS**: Cloudflare for api.filamenteka.rs
+- **Deployment**: AWS Amplify for frontend, SSM for API updates

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
-- **Backend**: API routes for Confluence integration
-- **Infrastructure**: AWS Amplify (Frankfurt region)
+- **Frontend**: Next.js + React + TypeScript + Tailwind CSS
+- **Backend**: Node.js API server (Express)
+- **Database**: PostgreSQL (AWS RDS)
+- **Infrastructure**: AWS Amplify (Frontend), EC2 (API), RDS (Database)
 - **IaC**: Terraform
 
 ## Prerequisites
 
 - Node.js 18+ and npm
-- AWS Account
-- Terraform 1.0+
+- PostgreSQL (for local development)
+- 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:
-1. Go to https://id.atlassian.com/manage-profile/security/api-tokens
-2. Create a new API token
-3. Note your Confluence domain and the page ID containing your filament table
+Create a `.env.local` file for local development:
+
+```bash
+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:
-- **Brand** - Manufacturer (e.g., BambuLab)
+The filament table displays these columns:
 - **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
-- **Vakum** - Vacuum sealed status
-- **Otvoreno** - Opened status
-- **Količina** - Quantity
-- **Cena** - Price
+- **Refill** - Number of refill spools
+- **Spulna** - Number of regular spools
+- **Količina** - Total quantity (refill + spulna)
+- **Cena** - Price per unit
+- **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', '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', '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', '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('Refil');
+    expect(adminContent).toContain('Špulna');
+    expect(adminContent).toContain('Ukupna količina');
+  });
+
+  it('should have number input for quantity', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', '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', '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', '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,390 @@
+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;
+
+    // Check if sale fields are provided in the request
+    const hasSaleFields = 'sale_percentage' in req.body || 'sale_active' in req.body ||
+                          'sale_start_date' in req.body || 'sale_end_date' in req.body;
+
+    let result;
+    if (hasSaleFields) {
+      // Update with sale fields if they are provided
+      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]
+      );
+    } else {
+      // Update without touching sale fields if they are not provided
+      result = await pool.query(
+        `UPDATE filaments
+         SET tip = $1, finish = $2, boja = $3, boja_hex = $4,
+             refill = $5, spulna = $6, kolicina = $7, cena = $8,
+             updated_at = CURRENT_TIMESTAMP
+         WHERE id = $9 RETURNING *`,
+        [tip, finish, boja, boja_hex, refillNum, spulnaNum, kolicina, cena, 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">
-      <body>{children}</body>
+    <html lang="sr" suppressHydrationWarning>
+      <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,22 @@
 '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 ColorRequestModal from '../src/components/ColorRequestModal';
 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 [showColorRequestModal, setShowColorRequestModal] = useState(false);
+  // Removed V1/V2 toggle - now only using V2
 
   // Initialize dark mode from localStorage after mounting
   useEffect(() => {
@@ -39,17 +44,21 @@ export default function Home() {
       setLoading(true);
       setError(null);
       
-      // Use API if available, fallback to static JSON
-      const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-      const url = apiUrl ? `${apiUrl}/filaments` : '/data.json';
-      console.log('Fetching from:', url);
-      console.log('API URL configured:', apiUrl);
-      const response = await axios.get(url);
-      console.log('Response data:', response.data);
-      setFilaments(response.data);
-      setLastUpdate(new Date());
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Greška pri učitavanju filamenata');
+      const filamentsData = await filamentService.getAll();
+      setFilaments(filamentsData);
+    } catch (err: any) {
+      console.error('API Error:', err);
+      
+      // More descriptive error messages
+      if (err.code === 'ERR_NETWORK') {
+        setError('Network Error - Unable to connect to API');
+      } else if (err.response) {
+        setError(`Server error: ${err.response.status} - ${err.response.statusText}`);
+      } 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 +67,57 @@ export default function Home() {
   useEffect(() => {
     fetchFilaments();
     
-    // Refresh every 5 minutes
-    const interval = setInterval(fetchFilaments, 5 * 60 * 1000);
+    // Auto-refresh data every 30 seconds to stay in sync
+    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">
-        <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">
-              Filamenteka
-            </h1>
-            <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>
-              )}
-              <button
-                onClick={fetchFilaments}
-                disabled={loading}
-                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
-              >
-                {loading ? 'Ažuriranje...' : 'Osveži'}
-              </button>
-              {mounted && (
+      <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-3 sm:py-4">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-0">
+            <div className="flex-1 flex flex-col sm:flex-row justify-center items-center gap-1 sm:gap-3 text-sm sm:text-lg">
+              <span className="text-blue-700 dark:text-blue-300 font-medium animate-pulse text-center">
+                Kupovina po gramu dostupna
+              </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={() => 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"
+                  onClick={() => {
+                    setDarkMode(!darkMode);
+                    trackEvent('UI', 'Dark Mode Toggle', darkMode ? 'Light' : 'Dark');
+                  }}
+                  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"
                   title={darkMode ? 'Svetla tema' : 'Tamna tema'}
                 >
                   {darkMode ? '☀️' : '🌙'}
                 </button>
+              ) : (
+                <div className="w-10 h-10" />
               )}
             </div>
           </div>
@@ -100,13 +125,153 @@ 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 */}
+        <div className="flex justify-center mb-8">
+          <button
+            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:+381631031048"
+            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 63 103 1048
+          </a>
+          
+          <button
+            onClick={() => {
+              setShowColorRequestModal(true);
+              trackEvent('Navigation', 'Request Color', 'Homepage');
+            }}
+            className="inline-flex items-center gap-2 px-6 py-3 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-5 h-5" 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>
+            Zatraži Novu Boju
+          </button>
+        </div>
+        
+        <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;
+          })()}
+        />
+
+        {/* Pricing Information */}
+        <div className="mb-6 space-y-4">
+          {/* Reusable Spool Price Notice */}
+          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+            <div className="flex items-center justify-center gap-2">
+              <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span className="text-blue-800 dark:text-blue-200 font-medium">
+                Cena višekratne špulne: 499 RSD
+              </span>
+            </div>
+          </div>
+
+          {/* Selling by Grams Notice */}
+          <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+            <div className="flex flex-col items-center gap-3 text-center">
+              <div className="flex items-center justify-center gap-2">
+                <svg className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
+                </svg>
+                <span className="text-green-800 dark:text-green-200 font-semibold">
+                  Prodaja filamenta na grame - idealno za testiranje materijala ili manje projekte
+                </span>
+              </div>
+              <div className="flex flex-wrap justify-center gap-4 text-sm">
+                <span className="text-green-700 dark:text-green-300 font-medium">50gr - 299 RSD</span>
+                <span className="text-gray-400 dark:text-gray-600">•</span>
+                <span className="text-green-700 dark:text-green-300 font-medium">100gr - 499 RSD</span>
+                <span className="text-gray-400 dark:text-gray-600">•</span>
+                <span className="text-green-700 dark:text-green-300 font-medium">200gr - 949 RSD</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <FilamentTableV2 
+          key={resetKey}
           filaments={filaments} 
-          loading={loading} 
-          error={error || undefined} 
         />
       </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 justify-center items-center gap-6">
+            <div className="text-center">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Kontakt</h3>
+              <a
+                href="tel:+381631031048"
+                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 63 103 1048
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
+      
+      {/* Color Request Modal */}
+      <ColorRequestModal 
+        isOpen={showColorRequestModal}
+        onClose={() => setShowColorRequestModal(false)}
+      />
     </div>
   );
 }

app/upadaj/colors/page.tsx

@@ -0,0 +1,556 @@
+'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 { BulkPriceEditor } from '@/src/components/BulkPriceEditor';
+import '@/src/styles/select.css';
+
+interface Color {
+  id: string;
+  name: string;
+  hex: string;
+  cena_refill?: number;
+  cena_spulna?: number;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export default function 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(() => {
+    // Wait for component to mount to avoid SSR issues with localStorage
+    if (!mounted) return;
+
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+
+    if (!token || !expiry || Date.now() > parseInt(expiry)) {
+      window.location.href = '/upadaj';
+    }
+  }, [mounted]);
+
+  // 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="/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 flex-wrap">
+                  {!showAddForm && !editingColor && (
+                    <button
+                      onClick={() => setShowAddForm(true)}
+                      className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+                    >
+                      Dodaj novu boju
+                    </button>
+                  )}
+                  <BulkPriceEditor colors={colors} onUpdate={fetchColors} />
+                  {selectedColors.size > 0 && (
+                    <button
+                      onClick={handleBulkDelete}
+                      className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                    >
+                      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`, {
-        username,
-        password
-      });
+      const response = await authService.login(username, password);
 
       // Store token in localStorage
-      localStorage.setItem('authToken', response.data.token);
-      localStorage.setItem('tokenExpiry', String(Date.now() + response.data.expiresIn * 1000));
+      localStorage.setItem('authToken', response.token);
+      localStorage.setItem('tokenExpiry', String(Date.now() + 24 * 60 * 60 * 1000)); // 24 hours
 
-      // Redirect to admin dashboard
-      router.push('/admin/dashboard');
-    } catch (err) {
+      // Track successful login
+      trackEvent('Admin', 'Login', 'Success');
+
+      // Redirect to admin dashboard using window.location for static export
+      window.location.href = '/dashboard';
+    } 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>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
+        <div className="flex flex-col items-center">
+          <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)) {
+      window.location.href = '/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="/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/migrations/019_add_new_bambu_colors_2025.sql

@@ -0,0 +1,77 @@
+-- Migration: Add new Bambu Lab PLA Matte and PLA Wood colors (2025)
+-- This migration adds the new color offerings from Bambu Lab
+
+-- Add new PLA Matte colors to the colors table
+INSERT INTO colors (name, hex) VALUES
+    ('Matte Apple Green', '#C6E188'),
+    ('Matte Bone White', '#C8C5B6'),
+    ('Matte Caramel', '#A4845C'),
+    ('Matte Dark Blue', '#042F56'),
+    ('Matte Dark Brown', '#7D6556'),
+    ('Matte Dark Chocolate', '#4A3729'),
+    ('Matte Dark Green', '#68724D'),
+    ('Matte Dark Red', '#BB3D43'),
+    ('Matte Grass Green', '#7CB342'),
+    ('Matte Ice Blue', '#A3D8E1'),
+    ('Matte Lemon Yellow', '#F7D959'),
+    ('Matte Lilac Purple', '#AE96D4'),
+    ('Matte Plum', '#851A52'),
+    ('Matte Sakura Pink', '#E8AFCF'),
+    ('Matte Sky Blue', '#73B2E5'),
+    ('Matte Terracotta', '#A25A37')
+ON CONFLICT (name)
+DO UPDATE SET hex = EXCLUDED.hex;
+
+-- Add new PLA Wood colors to the colors table
+INSERT INTO colors (name, hex) VALUES
+    ('Ochre Yellow', '#BC8B39'),
+    ('White Oak', '#D2CCA2'),
+    ('Clay Brown', '#8E621A')
+ON CONFLICT (name)
+DO UPDATE SET hex = EXCLUDED.hex;
+
+-- Add PLA Matte filaments (all Refill only - 1 refill each, 0 spool)
+INSERT INTO filaments (tip, finish, boja, refill, spulna, kolicina, cena)
+SELECT
+    'PLA' as tip,
+    'Matte' as finish,
+    c.name as boja,
+    1 as refill,
+    0 as spulna,
+    1 as kolicina,
+    '3499' as cena
+FROM colors c
+WHERE c.name IN (
+    'Matte Apple Green', 'Matte Bone White', 'Matte Caramel',
+    'Matte Dark Blue', 'Matte Dark Brown', 'Matte Dark Chocolate',
+    'Matte Dark Green', 'Matte Dark Red', 'Matte Grass Green',
+    'Matte Ice Blue', 'Matte Lemon Yellow', 'Matte Lilac Purple',
+    'Matte Plum', 'Matte Sakura Pink', 'Matte Sky Blue', 'Matte Terracotta'
+)
+AND NOT EXISTS (
+    SELECT 1 FROM filaments f
+    WHERE f.tip = 'PLA'
+    AND f.finish = 'Matte'
+    AND f.boja = c.name
+);
+
+-- Add PLA Wood filaments (all Spool only - 0 refill, 1 spool each)
+INSERT INTO filaments (tip, finish, boja, refill, spulna, kolicina, cena)
+SELECT
+    'PLA' as tip,
+    'Wood' as finish,
+    c.name as boja,
+    0 as refill,
+    1 as spulna,
+    1 as kolicina,
+    '3999' as cena
+FROM colors c
+WHERE c.name IN (
+    'Ochre Yellow', 'White Oak', 'Clay Brown'
+)
+AND NOT EXISTS (
+    SELECT 1 FROM filaments f
+    WHERE f.tip = 'PLA'
+    AND f.finish = 'Wood'
+    AND f.boja = c.name
+);

database/migrations/020_add_missing_colors_2025.sql

@@ -0,0 +1,102 @@
+-- Migration: Add missing Bambu Lab colors (2025)
+-- Created: 2025-11-13
+-- Description: Adds missing color definitions from Bambu Lab catalog
+
+INSERT INTO colors (name, hex, cena_refill, cena_spulna) VALUES
+-- Basic/Matte Colors
+('Clear Black', '#1a1a1a', 3499, 3999),
+('Transparent', '#f0f0f0', 3499, 3999),
+('Brick Red', '#8b2e2e', 3499, 3999),
+('Titan Gray', '#5c6670', 3499, 3999),
+('Indigo Blue', '#4b0082', 3499, 3999),
+('Malachite Green', '#0bda51', 3499, 3999),
+('Violet Purple', '#8f00ff', 3499, 3999),
+('Iris Purple', '#5d3fd3', 3499, 3999),
+('Royal Blue', '#4169e1', 3499, 3999),
+('Lava Gray', '#4a4a4a', 3499, 3999),
+('Burgundy Red', '#800020', 3499, 3999),
+('Matcha Green', '#8db255', 3499, 3999),
+('Light Cyan', '#e0ffff', 3499, 3999),
+
+-- Glow Colors
+('Blaze', '#ff6347', 3499, 3999),
+('Glow Blue', '#00d4ff', 3499, 3999),
+('Glow Pink', '#ff69b4', 3499, 3999),
+('Glow Yellow', '#ffff00', 3499, 3999),
+('Glow Orange', '#ff8c00', 3499, 3999),
+('Nebulane', '#9b59b6', 3499, 3999),
+
+-- Metallic Colors
+('IronGray Metallic', '#71797e', 3499, 3999),
+('Copper Brown Metallic', '#b87333', 3499, 3999),
+('Iridium Gold Metallic', '#d4af37', 3499, 3999),
+('Oxide Green Metallic', '#6b8e23', 3499, 3999),
+('Cobalt Blue Metallic', '#0047ab', 3499, 3999),
+
+-- Marble Colors
+('White Marble', '#f5f5f5', 3499, 3999),
+('Red Granite', '#8b4513', 3499, 3999),
+
+-- Sparkle Colors
+('Classic Gold Sparkle', '#ffd700', 3499, 3999),
+('Onyx Black Sparkle', '#0f0f0f', 3499, 3999),
+('Crimson Red Sparkle', '#dc143c', 3499, 3999),
+('Royal Purple Sparkle', '#7851a9', 3499, 3999),
+('Slate Gray Sparkle', '#708090', 3499, 3999),
+('Alpine Green Sparkle', '#2e8b57', 3499, 3999),
+
+-- Gradient Colors
+('South Beach', '#ff69b4', 3499, 3999),
+('Dawn Radiance', '#ff7f50', 3499, 3999),
+('Blue Hawaii', '#1e90ff', 3499, 3999),
+('Gilded Rose', '#ff1493', 3499, 3999),
+('Midnight Blaze', '#191970', 3499, 3999),
+('Neon City', '#00ffff', 3499, 3999),
+('Velvet Eclipse', '#8b008b', 3499, 3999),
+('Solar Breeze', '#ffb347', 3499, 3999),
+('Arctic Whisper', '#b0e0e6', 3499, 3999),
+('Ocean to Meadow', '#40e0d0', 3499, 3999),
+('Dusk Glare', '#ff6347', 3499, 3999),
+('Mint Lime', '#98fb98', 3499, 3999),
+('Pink Citrus', '#ff69b4', 3499, 3999),
+('Blueberry Bubblegum', '#7b68ee', 3499, 3999),
+('Cotton Candy Cloud', '#ffb6c1', 3499, 3999),
+
+-- Pastel/Light Colors
+('Lavender', '#e6e6fa', 3499, 3999),
+('Ice Blue', '#d0e7ff', 3499, 3999),
+('Mellow Yellow', '#fff44f', 3499, 3999),
+('Teal', '#008080', 3499, 3999),
+
+-- ABS Colors
+('ABS Azure', '#007fff', 3499, 3999),
+('ABS Olive', '#808000', 3499, 3999),
+('ABS Blue', '#0000ff', 3499, 3999),
+('ABS Tangerine Yellow', '#ffcc00', 3499, 3999),
+('ABS Navy Blue', '#000080', 3499, 3999),
+('ABS Orange', '#ff8800', 3499, 3999),
+('ABS Bambu Green', '#00c853', 3499, 3999),
+('ABS Red', '#ff0000', 3499, 3999),
+('ABS White', '#ffffff', 3499, 3999),
+('ABS Black', '#000000', 3499, 3999),
+('ABS Silver', '#c0c0c0', 3499, 3999),
+
+-- Translucent Colors
+('Translucent Gray', '#9e9e9e', 3499, 3999),
+('Translucent Brown', '#8b4513', 3499, 3999),
+('Translucent Purple', '#9370db', 3499, 3999),
+('Translucent Orange', '#ffa500', 3499, 3999),
+('Translucent Olive', '#6b8e23', 3499, 3999),
+('Translucent Pink', '#ffb6c1', 3499, 3999),
+('Translucent Light Blue', '#add8e6', 3499, 3999),
+('Translucent Tea', '#d2b48c', 3499, 3999),
+
+-- Additional Colors
+('Mint', '#98ff98', 3499, 3999),
+('Champagne', '#f7e7ce', 3499, 3999),
+('Baby Blue', '#89cff0', 3499, 3999),
+('Cream', '#fffdd0', 3499, 3999),
+('Peanut Brown', '#b86f52', 3499, 3999),
+('Matte Ivory', '#fffff0', 3499, 3999)
+
+ON CONFLICT (name) DO NOTHING;

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

@@ -3,13 +3,13 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "./scripts/kill-dev.sh && next dev",
     "build": "next build",
     "start": "next start",
     "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-missing-colors.js

@@ -0,0 +1,92 @@
+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 }
+});
+
+const missingColors = [
+  // PLA Matte - New colors with correct hex codes
+  { name: "Matte Dark Chocolate", hex: "#4A3729", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Dark Brown", hex: "#7D6556", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Terracotta", hex: "#A25A37", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Caramel", hex: "#A4845C", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Dark Blue", hex: "#042F56", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Sky Blue", hex: "#73B2E5", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Ice Blue", hex: "#A3D8E1", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Dark Green", hex: "#68724D", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Grass Green", hex: "#61C680", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Apple Green", hex: "#C6E188", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Dark Red", hex: "#BB3D43", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Plum", hex: "#851A52", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Lilac Purple", hex: "#AE96D4", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Sakura Pink", hex: "#E8AFCF", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Lemon Yellow", hex: "#F7D959", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Bone White", hex: "#C8C5B6", cena_refill: 3499, cena_spulna: 3999 },
+
+  // PLA Wood colors
+  { name: "Ochre Yellow", hex: "#BC8B39", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "White Oak", hex: "#D2CCA2", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Clay Brown", hex: "#8E621A", cena_refill: 3499, cena_spulna: 3999 }
+];
+
+async function addMissingColors() {
+  try {
+    console.log('🎨 Adding missing colors to database...\n');
+
+    let added = 0;
+    let updated = 0;
+    let skipped = 0;
+
+    for (const color of missingColors) {
+      try {
+        // Check if color already exists
+        const existingColor = await pool.query(
+          'SELECT * FROM colors WHERE name = $1',
+          [color.name]
+        );
+
+        if (existingColor.rows.length > 0) {
+          // Update existing color with correct hex code
+          const existing = existingColor.rows[0];
+          if (existing.hex !== color.hex) {
+            await pool.query(
+              'UPDATE colors SET hex = $1, cena_refill = $2, cena_spulna = $3 WHERE name = $4',
+              [color.hex, color.cena_refill, color.cena_spulna, color.name]
+            );
+            console.log(`✅ Updated: ${color.name} (${existing.hex} → ${color.hex})`);
+            updated++;
+          } else {
+            console.log(`⏭️  Skipped: ${color.name} (already exists with correct hex)`);
+            skipped++;
+          }
+        } else {
+          // Insert new color
+          await pool.query(
+            'INSERT INTO colors (name, hex, cena_refill, cena_spulna) VALUES ($1, $2, $3, $4)',
+            [color.name, color.hex, color.cena_refill, color.cena_spulna]
+          );
+          console.log(`✅ Added: ${color.name} (${color.hex})`);
+          added++;
+        }
+      } catch (error) {
+        console.error(`❌ Error with ${color.name}:`, error.message);
+      }
+    }
+
+    console.log(`\n📊 Summary:`);
+    console.log(`   Added: ${added}`);
+    console.log(`   Updated: ${updated}`);
+    console.log(`   Skipped: ${skipped}`);
+    console.log(`   Total: ${missingColors.length}`);
+
+  } catch (error) {
+    console.error('❌ Failed to add colors:', error.message);
+  } finally {
+    await pool.end();
+  }
+}
+
+addMissingColors();

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/deploy-frontend.sh

@@ -0,0 +1,97 @@
+#!/bin/bash
+
+# Frontend deployment script for CloudFront + S3
+# This script builds the Next.js app and deploys it to S3 + CloudFront
+
+set -e
+
+echo "🚀 Starting frontend deployment..."
+
+# Colors for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+# Configuration
+S3_BUCKET="filamenteka-frontend"
+REGION="eu-central-1"
+
+# Get CloudFront distribution ID from terraform output
+echo -e "${BLUE}📋 Getting CloudFront distribution ID...${NC}"
+DISTRIBUTION_ID=$(terraform -chdir=terraform output -raw cloudfront_distribution_id 2>/dev/null || terraform output -raw cloudfront_distribution_id)
+
+if [ -z "$DISTRIBUTION_ID" ]; then
+    echo -e "${RED}❌ Could not get CloudFront distribution ID${NC}"
+    exit 1
+fi
+
+echo -e "${GREEN}✓ Distribution ID: $DISTRIBUTION_ID${NC}"
+
+# Build the Next.js app
+echo -e "${BLUE}🔨 Building Next.js app...${NC}"
+npm run build
+
+if [ ! -d "out" ]; then
+    echo -e "${RED}❌ Build failed - 'out' directory not found${NC}"
+    exit 1
+fi
+
+echo -e "${GREEN}✓ Build completed${NC}"
+
+# Upload to S3 with proper cache headers
+echo -e "${BLUE}📤 Uploading to S3 with optimized cache headers...${NC}"
+
+# First, delete old files
+echo -e "${BLUE}  🗑️  Cleaning old files...${NC}"
+aws s3 sync out/ s3://$S3_BUCKET/ \
+  --region $REGION \
+  --delete \
+  --exclude "*"
+
+# Upload HTML files with no-cache (always revalidate)
+echo -e "${BLUE}  📄 Uploading HTML files (no-cache)...${NC}"
+aws s3 sync out/ s3://$S3_BUCKET/ \
+  --region $REGION \
+  --exclude "*" \
+  --include "*.html" \
+  --cache-control "public, max-age=0, must-revalidate" \
+  --content-type "text/html"
+
+# Upload _next static assets with long-term cache (immutable, 1 year)
+echo -e "${BLUE}  🎨 Uploading Next.js static assets (1 year cache)...${NC}"
+aws s3 sync out/_next/ s3://$S3_BUCKET/_next/ \
+  --region $REGION \
+  --cache-control "public, max-age=31536000, immutable"
+
+# Upload other static assets with moderate cache (1 day)
+echo -e "${BLUE}  📦 Uploading other assets (1 day cache)...${NC}"
+aws s3 sync out/ s3://$S3_BUCKET/ \
+  --region $REGION \
+  --exclude "*" \
+  --exclude "*.html" \
+  --exclude "_next/*" \
+  --include "*" \
+  --cache-control "public, max-age=86400"
+
+echo -e "${GREEN}✓ All files uploaded to S3 with optimized cache headers${NC}"
+
+# Invalidate CloudFront cache
+echo -e "${BLUE}🔄 Invalidating CloudFront cache...${NC}"
+INVALIDATION_ID=$(aws cloudfront create-invalidation \
+  --distribution-id $DISTRIBUTION_ID \
+  --paths "/*" \
+  --query 'Invalidation.Id' \
+  --output text)
+
+echo -e "${GREEN}✓ CloudFront invalidation created: $INVALIDATION_ID${NC}"
+
+# Get CloudFront URL
+CF_URL=$(terraform -chdir=terraform output -raw cloudfront_domain_name 2>/dev/null || terraform output -raw cloudfront_domain_name)
+
+echo ""
+echo -e "${GREEN}✅ Deployment complete!${NC}"
+echo -e "${BLUE}🌐 CloudFront URL: https://$CF_URL${NC}"
+echo -e "${BLUE}🌐 Custom Domain: https://filamenteka.rs (after DNS update)${NC}"
+echo ""
+echo -e "${BLUE}ℹ️  Note: CloudFront cache invalidation may take 5-10 minutes to propagate globally.${NC}"

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/kill-dev.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Kill any processes running on ports 3000 and 3001
+echo "🔍 Checking for processes on ports 3000 and 3001..."
+PIDS=$(lsof -ti:3000,3001 2>/dev/null)
+if [ -n "$PIDS" ]; then
+  echo "$PIDS" | xargs kill -9 2>/dev/null
+  echo "✅ Killed processes on ports 3000/3001"
+else
+  echo "ℹ️  No processes found on ports 3000/3001"
+fi
+
+# Kill any old Next.js dev server processes (but not the current script)
+echo "🔍 Checking for Next.js dev processes..."
+OLD_PIDS=$(ps aux | grep -i "next dev" | grep -v grep | grep -v "kill-dev.sh" | awk '{print $2}')
+if [ -n "$OLD_PIDS" ]; then
+  echo "$OLD_PIDS" | xargs kill -9 2>/dev/null
+  echo "✅ Killed Next.js dev processes"
+else
+  echo "ℹ️  No Next.js dev processes found"
+fi
+
+# Give it a moment to clean up
+sleep 0.5
+
+echo "✨ Ready to start fresh dev server!"

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!"

scripts/verify-color-consistency.js

@@ -0,0 +1,77 @@
+// Verification script to check consistency between frontend colors and migration
+const fs = require('fs');
+const path = require('path');
+
+console.log('Verifying color consistency between frontend and backend...\n');
+
+// Read frontend color definitions
+const frontendFile = fs.readFileSync(
+  path.join(__dirname, '../src/data/bambuLabColors.ts'),
+  'utf8'
+);
+
+// Read migration file
+const migrationFile = fs.readFileSync(
+  path.join(__dirname, '../database/migrations/019_add_new_bambu_colors_2025.sql'),
+  'utf8'
+);
+
+// Extract colors from frontend (looking for pattern: 'ColorName': { hex: '#HEXCODE' })
+const frontendColorRegex = /'([^']+)':\s*\{\s*hex:\s*'(#[A-F0-9]{6})'/gi;
+const frontendColors = {};
+let match;
+while ((match = frontendColorRegex.exec(frontendFile)) !== null) {
+  frontendColors[match[1]] = match[2];
+}
+
+// Extract new Matte colors from migration
+const migrationColorRegex = /\('([^']+)',\s*'(#[A-F0-9]{6})'\)/gi;
+const migrationColors = {};
+while ((match = migrationColorRegex.exec(migrationFile)) !== null) {
+  migrationColors[match[1]] = match[2];
+}
+
+console.log('New colors added in migration 019:');
+console.log('='.repeat(60));
+
+let hasErrors = false;
+
+// Check each migration color exists in frontend with same hex code
+Object.keys(migrationColors).forEach(colorName => {
+  const migrationHex = migrationColors[colorName];
+  const frontendHex = frontendColors[colorName];
+
+  if (!frontendHex) {
+    console.log(`❌ ERROR: '${colorName}' missing in frontend`);
+    hasErrors = true;
+  } else if (frontendHex !== migrationHex) {
+    console.log(`❌ ERROR: '${colorName}' hex mismatch:`);
+    console.log(`   Frontend: ${frontendHex}`);
+    console.log(`   Migration: ${migrationHex}`);
+    hasErrors = true;
+  } else {
+    console.log(`✓ ${colorName}: ${frontendHex}`);
+  }
+});
+
+// Check if PLA Wood colors exist in frontend
+console.log('\nPLA Wood colors (should already exist in frontend):');
+console.log('='.repeat(60));
+const woodColors = ['Ochre Yellow', 'White Oak', 'Clay Brown'];
+woodColors.forEach(colorName => {
+  if (frontendColors[colorName]) {
+    console.log(`✓ ${colorName}: ${frontendColors[colorName]}`);
+  } else {
+    console.log(`❌ ERROR: '${colorName}' missing in frontend`);
+    hasErrors = true;
+  }
+});
+
+console.log('\n' + '='.repeat(60));
+if (hasErrors) {
+  console.log('❌ VERIFICATION FAILED: Inconsistencies detected');
+  process.exit(1);
+} else {
+  console.log('✓ VERIFICATION PASSED: All colors are consistent');
+  process.exit(0);
+}

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

@@ -0,0 +1,363 @@
+import React, { useState, useMemo } from 'react';
+import { filamentService, colorService } from '@/src/services/api';
+import { Filament } from '@/src/types/filament';
+
+interface BulkFilamentPriceEditorProps {
+  filaments: Array<Filament & { id: string }>;
+  onUpdate: () => void;
+}
+
+export function BulkFilamentPriceEditor({ filaments, onUpdate }: BulkFilamentPriceEditorProps) {
+  const [showModal, setShowModal] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // Filters
+  const [selectedMaterial, setSelectedMaterial] = useState<string>('');
+  const [selectedFinish, setSelectedFinish] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // Price inputs
+  const [newRefillPrice, setNewRefillPrice] = useState<string>('');
+  const [newSpoolPrice, setNewSpoolPrice] = useState<string>('');
+
+  // Get unique materials and finishes
+  const materials = useMemo(() =>
+    [...new Set(filaments.map(f => f.tip))].sort(),
+    [filaments]
+  );
+
+  const finishes = useMemo(() =>
+    [...new Set(filaments.map(f => f.finish))].sort(),
+    [filaments]
+  );
+
+  // Filter filaments based on selections
+  const filteredFilaments = useMemo(() => {
+    return filaments.filter(f => {
+      const matchesMaterial = !selectedMaterial || f.tip === selectedMaterial;
+      const matchesFinish = !selectedFinish || f.finish === selectedFinish;
+      const matchesSearch = !searchTerm ||
+        f.boja.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        f.tip.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        f.finish.toLowerCase().includes(searchTerm.toLowerCase());
+
+      return matchesMaterial && matchesFinish && matchesSearch;
+    });
+  }, [filaments, selectedMaterial, selectedFinish, searchTerm]);
+
+  // Group filaments by color (since multiple filaments can have same color)
+  const colorGroups = useMemo(() => {
+    const groups = new Map<string, Array<Filament & { id: string }>>();
+    filteredFilaments.forEach(f => {
+      const existing = groups.get(f.boja) || [];
+      existing.push(f);
+      groups.set(f.boja, existing);
+    });
+    return Array.from(groups.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+  }, [filteredFilaments]);
+
+  const handleApplyPrices = async () => {
+    const refillPrice = parseInt(newRefillPrice);
+    const spoolPrice = parseInt(newSpoolPrice);
+
+    if (isNaN(refillPrice) && isNaN(spoolPrice)) {
+      alert('Molimo unesite bar jednu cenu (refill ili spulna)');
+      return;
+    }
+
+    if ((refillPrice && refillPrice < 0) || (spoolPrice && spoolPrice < 0)) {
+      alert('Cena ne može biti negativna');
+      return;
+    }
+
+    if (filteredFilaments.length === 0) {
+      alert('Nema filamenata koji odgovaraju filterima');
+      return;
+    }
+
+    const confirmMsg = `Želite da promenite cene za ${filteredFilaments.length} filament(a)?
+${selectedMaterial ? `\nMaterijal: ${selectedMaterial}` : ''}
+${selectedFinish ? `\nFiniš: ${selectedFinish}` : ''}
+${!isNaN(refillPrice) ? `\nRefill cena: ${refillPrice}` : ''}
+${!isNaN(spoolPrice) ? `\nSpulna cena: ${spoolPrice}` : ''}`;
+
+    if (!confirm(confirmMsg)) {
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Update each filament
+      await Promise.all(
+        filteredFilaments.map(async (filament) => {
+          // Parse current prices
+          const prices = filament.cena.split('/');
+          const currentRefillPrice = parseInt(prices[0]) || 3499;
+          const currentSpoolPrice = prices.length > 1 ? parseInt(prices[1]) || 3999 : 3999;
+
+          // Use new prices if provided, otherwise keep current
+          const finalRefillPrice = !isNaN(refillPrice) ? refillPrice : currentRefillPrice;
+          const finalSpoolPrice = !isNaN(spoolPrice) ? spoolPrice : currentSpoolPrice;
+
+          // Build price string based on quantities
+          let priceString = '';
+          if (filament.refill > 0 && filament.spulna > 0) {
+            priceString = `${finalRefillPrice}/${finalSpoolPrice}`;
+          } else if (filament.refill > 0) {
+            priceString = String(finalRefillPrice);
+          } else if (filament.spulna > 0) {
+            priceString = String(finalSpoolPrice);
+          } else {
+            priceString = `${finalRefillPrice}/${finalSpoolPrice}`;
+          }
+
+          return filamentService.update(filament.id, {
+            tip: filament.tip,
+            finish: filament.finish,
+            boja: filament.boja,
+            boja_hex: filament.boja_hex,
+            refill: filament.refill,
+            spulna: filament.spulna,
+            cena: priceString
+          });
+        })
+      );
+
+      alert(`Uspešno ažurirano ${filteredFilaments.length} filament(a)!`);
+      setNewRefillPrice('');
+      setNewSpoolPrice('');
+      onUpdate();
+      setShowModal(false);
+    } catch (error) {
+      console.error('Error updating prices:', error);
+      alert('Greška pri ažuriranju cena');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const resetFilters = () => {
+    setSelectedMaterial('');
+    setSelectedFinish('');
+    setSearchTerm('');
+    setNewRefillPrice('');
+    setNewSpoolPrice('');
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setShowModal(true)}
+        className="flex-1 sm:flex-initial px-3 sm:px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 text-sm sm:text-base"
+      >
+        Masovno editovanje cena
+      </button>
+
+      {showModal && (
+        <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 p-6 max-w-5xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+                Masovno editovanje cena
+              </h2>
+              <button
+                onClick={() => setShowModal(false)}
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-2xl"
+              >
+                ✕
+              </button>
+            </div>
+
+            {/* Filters */}
+            <div className="mb-4 p-4 bg-gray-100 dark:bg-gray-700 rounded space-y-3">
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Filteri:</h3>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Materijal
+                  </label>
+                  <select
+                    value={selectedMaterial}
+                    onChange={(e) => setSelectedMaterial(e.target.value)}
+                    className="w-full px-3 py-2 border rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+                  >
+                    <option value="">Svi materijali</option>
+                    {materials.map(m => (
+                      <option key={m} value={m}>{m}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Finiš
+                  </label>
+                  <select
+                    value={selectedFinish}
+                    onChange={(e) => setSelectedFinish(e.target.value)}
+                    className="w-full px-3 py-2 border rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+                  >
+                    <option value="">Svi finiševi</option>
+                    {finishes.map(f => (
+                      <option key={f} value={f}>{f}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Pretraga
+                  </label>
+                  <input
+                    type="text"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    placeholder="Pretraži boju, tip, finiš..."
+                    className="w-full px-3 py-2 border rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+                  />
+                </div>
+              </div>
+
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Prikazano: {filteredFilaments.length} filament(a)
+              </p>
+            </div>
+
+            {/* Price inputs */}
+            <div className="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded">
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-3">
+                Nove cene za filtrirane filamente:
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Refill cena
+                  </label>
+                  <input
+                    type="number"
+                    value={newRefillPrice}
+                    onChange={(e) => setNewRefillPrice(e.target.value)}
+                    placeholder="Npr. 3499"
+                    className="w-full px-3 py-2 border rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Spulna cena
+                  </label>
+                  <input
+                    type="number"
+                    value={newSpoolPrice}
+                    onChange={(e) => setNewSpoolPrice(e.target.value)}
+                    placeholder="Npr. 3999"
+                    className="w-full px-3 py-2 border rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+                  />
+                </div>
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mt-2">
+                Napomena: Možete promeniti samo refill, samo spulna, ili obe cene. Prazna polja će zadržati postojeće cene.
+              </p>
+            </div>
+
+            {/* Preview */}
+            <div className="flex-1 overflow-y-auto mb-4">
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
+                Pregled filamenata ({colorGroups.length} boja):
+              </h3>
+              {colorGroups.length === 0 ? (
+                <p className="text-gray-500 dark:text-gray-400 text-center py-8">
+                  Nema filamenata koji odgovaraju filterima
+                </p>
+              ) : (
+                <table className="w-full text-sm">
+                  <thead className="bg-gray-100 dark:bg-gray-700 sticky top-0">
+                    <tr>
+                      <th className="px-3 py-2 text-left text-gray-900 dark:text-white">Boja</th>
+                      <th className="px-3 py-2 text-left text-gray-900 dark:text-white">Tip</th>
+                      <th className="px-3 py-2 text-left text-gray-900 dark:text-white">Finiš</th>
+                      <th className="px-3 py-2 text-left text-gray-900 dark:text-white">Refill</th>
+                      <th className="px-3 py-2 text-left text-gray-900 dark:text-white">Spulna</th>
+                      <th className="px-3 py-2 text-left text-gray-900 dark:text-white">Trenutna cena</th>
+                      <th className="px-3 py-2 text-left text-gray-900 dark:text-white">Nova cena</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {colorGroups.map(([color, filamentGroup]) =>
+                      filamentGroup.map((f, idx) => {
+                        const prices = f.cena.split('/');
+                        const currentRefillPrice = parseInt(prices[0]) || 3499;
+                        const currentSpoolPrice = prices.length > 1 ? parseInt(prices[1]) || 3999 : 3999;
+
+                        const refillPrice = parseInt(newRefillPrice);
+                        const spoolPrice = parseInt(newSpoolPrice);
+
+                        const finalRefillPrice = !isNaN(refillPrice) ? refillPrice : currentRefillPrice;
+                        const finalSpoolPrice = !isNaN(spoolPrice) ? spoolPrice : currentSpoolPrice;
+
+                        let newPriceString = '';
+                        if (f.refill > 0 && f.spulna > 0) {
+                          newPriceString = `${finalRefillPrice}/${finalSpoolPrice}`;
+                        } else if (f.refill > 0) {
+                          newPriceString = String(finalRefillPrice);
+                        } else if (f.spulna > 0) {
+                          newPriceString = String(finalSpoolPrice);
+                        }
+
+                        const priceChanged = newPriceString !== f.cena;
+
+                        return (
+                          <tr
+                            key={`${f.id}-${idx}`}
+                            className={`border-b dark:border-gray-700 ${priceChanged ? 'bg-yellow-50 dark:bg-yellow-900/20' : ''}`}
+                          >
+                            <td className="px-3 py-2 text-gray-900 dark:text-white">{f.boja}</td>
+                            <td className="px-3 py-2 text-gray-700 dark:text-gray-300">{f.tip}</td>
+                            <td className="px-3 py-2 text-gray-700 dark:text-gray-300">{f.finish}</td>
+                            <td className="px-3 py-2 text-gray-700 dark:text-gray-300">{f.refill}</td>
+                            <td className="px-3 py-2 text-gray-700 dark:text-gray-300">{f.spulna}</td>
+                            <td className="px-3 py-2 text-gray-700 dark:text-gray-300">{f.cena}</td>
+                            <td className={`px-3 py-2 font-semibold ${priceChanged ? 'text-green-600 dark:text-green-400' : 'text-gray-700 dark:text-gray-300'}`}>
+                              {newPriceString || f.cena}
+                            </td>
+                          </tr>
+                        );
+                      })
+                    )}
+                  </tbody>
+                </table>
+              )}
+            </div>
+
+            {/* Actions */}
+            <div className="flex justify-between gap-4 pt-4 border-t dark:border-gray-700">
+              <button
+                onClick={resetFilters}
+                disabled={loading}
+                className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400 disabled:opacity-50"
+              >
+                Resetuj filtere
+              </button>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setShowModal(false)}
+                  disabled={loading}
+                  className="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50"
+                >
+                  Zatvori
+                </button>
+                <button
+                  onClick={handleApplyPrices}
+                  disabled={loading || filteredFilaments.length === 0}
+                  className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
+                >
+                  {loading ? 'Čuvanje...' : `Primeni cene (${filteredFilaments.length})`}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

src/components/BulkPriceEditor.tsx

@@ -0,0 +1,288 @@
+import React, { useState, useEffect } from 'react';
+import { colorService } from '@/src/services/api';
+
+interface Color {
+  id: string;
+  name: string;
+  hex: string;
+  cena_refill?: number;
+  cena_spulna?: number;
+}
+
+interface BulkPriceEditorProps {
+  colors: Color[];
+  onUpdate: () => void;
+}
+
+export function BulkPriceEditor({ colors, onUpdate }: BulkPriceEditorProps) {
+  const [showModal, setShowModal] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [priceChanges, setPriceChanges] = useState<Record<string, { cena_refill?: number; cena_spulna?: number }>>({});
+  const [globalRefillPrice, setGlobalRefillPrice] = useState<string>('');
+  const [globalSpulnaPrice, setGlobalSpulnaPrice] = useState<string>('');
+
+  // Filter colors based on search
+  const filteredColors = colors.filter(color =>
+    color.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Apply global price to all filtered colors
+  const applyGlobalRefillPrice = () => {
+    if (!globalRefillPrice) return;
+    const price = parseInt(globalRefillPrice);
+    if (isNaN(price) || price < 0) return;
+
+    const updates: Record<string, { cena_refill?: number; cena_spulna?: number }> = { ...priceChanges };
+    filteredColors.forEach(color => {
+      updates[color.id] = {
+        ...updates[color.id],
+        cena_refill: price
+      };
+    });
+    setPriceChanges(updates);
+  };
+
+  const applyGlobalSpulnaPrice = () => {
+    if (!globalSpulnaPrice) return;
+    const price = parseInt(globalSpulnaPrice);
+    if (isNaN(price) || price < 0) return;
+
+    const updates: Record<string, { cena_refill?: number; cena_spulna?: number }> = { ...priceChanges };
+    filteredColors.forEach(color => {
+      updates[color.id] = {
+        ...updates[color.id],
+        cena_spulna: price
+      };
+    });
+    setPriceChanges(updates);
+  };
+
+  // Update individual color price
+  const updatePrice = (colorId: string, field: 'cena_refill' | 'cena_spulna', value: string) => {
+    const price = parseInt(value);
+    if (value === '' || (price >= 0 && !isNaN(price))) {
+      setPriceChanges(prev => ({
+        ...prev,
+        [colorId]: {
+          ...prev[colorId],
+          [field]: value === '' ? undefined : price
+        }
+      }));
+    }
+  };
+
+  // Get effective price (with changes or original)
+  const getEffectivePrice = (color: Color, field: 'cena_refill' | 'cena_spulna'): number => {
+    return priceChanges[color.id]?.[field] ?? color[field] ?? (field === 'cena_refill' ? 3499 : 3999);
+  };
+
+  // Save all changes
+  const handleSave = async () => {
+    const colorUpdates = Object.entries(priceChanges).filter(([_, changes]) =>
+      changes.cena_refill !== undefined || changes.cena_spulna !== undefined
+    );
+
+    if (colorUpdates.length === 0) {
+      alert('Nema promena za čuvanje');
+      return;
+    }
+
+    if (!confirm(`Želite da sačuvate promene za ${colorUpdates.length} boja?`)) {
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Update each color individually
+      await Promise.all(
+        colorUpdates.map(([colorId, changes]) => {
+          const color = colors.find(c => c.id === colorId);
+          if (!color) return Promise.resolve();
+
+          return colorService.update(colorId, {
+            name: color.name,
+            hex: color.hex,
+            cena_refill: changes.cena_refill ?? color.cena_refill,
+            cena_spulna: changes.cena_spulna ?? color.cena_spulna
+          });
+        })
+      );
+
+      alert(`Uspešno ažurirano ${colorUpdates.length} boja!`);
+      setPriceChanges({});
+      setGlobalRefillPrice('');
+      setGlobalSpulnaPrice('');
+      setSearchTerm('');
+      onUpdate();
+      setShowModal(false);
+    } catch (error) {
+      console.error('Error updating prices:', error);
+      alert('Greška pri ažuriranju cena');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setShowModal(true)}
+        className="px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600"
+      >
+        Masovno editovanje cena
+      </button>
+
+      {showModal && (
+        <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 p-6 max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+                Masovno editovanje cena
+              </h2>
+              <button
+                onClick={() => setShowModal(false)}
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              >
+                ✕
+              </button>
+            </div>
+
+            {/* Global price controls */}
+            <div className="mb-4 p-4 bg-gray-100 dark:bg-gray-700 rounded">
+              <h3 className="font-semibold mb-2 text-gray-900 dark:text-white">Primeni na sve prikazane boje:</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="flex gap-2">
+                  <input
+                    type="number"
+                    value={globalRefillPrice}
+                    onChange={(e) => setGlobalRefillPrice(e.target.value)}
+                    placeholder="Refill cena"
+                    className="flex-1 px-3 py-2 border rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+                  />
+                  <button
+                    onClick={applyGlobalRefillPrice}
+                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                  >
+                    Primeni refill
+                  </button>
+                </div>
+                <div className="flex gap-2">
+                  <input
+                    type="number"
+                    value={globalSpulnaPrice}
+                    onChange={(e) => setGlobalSpulnaPrice(e.target.value)}
+                    placeholder="Spulna cena"
+                    className="flex-1 px-3 py-2 border rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+                  />
+                  <button
+                    onClick={applyGlobalSpulnaPrice}
+                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                  >
+                    Primeni spulna
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Search */}
+            <div className="mb-4">
+              <input
+                type="text"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                placeholder="Pretraži boje..."
+                className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              />
+              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                Prikazano: {filteredColors.length} od {colors.length} boja
+                {Object.keys(priceChanges).length > 0 && ` · ${Object.keys(priceChanges).length} promena`}
+              </p>
+            </div>
+
+            {/* Color list */}
+            <div className="flex-1 overflow-y-auto mb-4">
+              <table className="w-full">
+                <thead className="bg-gray-100 dark:bg-gray-700 sticky top-0">
+                  <tr>
+                    <th className="px-4 py-2 text-left text-gray-900 dark:text-white">Boja</th>
+                    <th className="px-4 py-2 text-left text-gray-900 dark:text-white">Refill cena</th>
+                    <th className="px-4 py-2 text-left text-gray-900 dark:text-white">Spulna cena</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredColors.map(color => {
+                    const hasChanges = priceChanges[color.id] !== undefined;
+                    return (
+                      <tr
+                        key={color.id}
+                        className={`border-b dark:border-gray-700 ${hasChanges ? 'bg-yellow-50 dark:bg-yellow-900/20' : ''}`}
+                      >
+                        <td className="px-4 py-2">
+                          <div className="flex items-center gap-2">
+                            <div
+                              className="w-6 h-6 rounded border border-gray-300"
+                              style={{ backgroundColor: color.hex }}
+                            />
+                            <span className="text-gray-900 dark:text-white">{color.name}</span>
+                          </div>
+                        </td>
+                        <td className="px-4 py-2">
+                          <input
+                            type="number"
+                            value={getEffectivePrice(color, 'cena_refill')}
+                            onChange={(e) => updatePrice(color.id, 'cena_refill', e.target.value)}
+                            className="w-full px-2 py-1 border rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+                          />
+                        </td>
+                        <td className="px-4 py-2">
+                          <input
+                            type="number"
+                            value={getEffectivePrice(color, 'cena_spulna')}
+                            onChange={(e) => updatePrice(color.id, 'cena_spulna', e.target.value)}
+                            className="w-full px-2 py-1 border rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+                          />
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Actions */}
+            <div className="flex justify-between gap-4">
+              <button
+                onClick={() => {
+                  setPriceChanges({});
+                  setGlobalRefillPrice('');
+                  setGlobalSpulnaPrice('');
+                }}
+                disabled={loading || Object.keys(priceChanges).length === 0}
+                className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400 disabled:opacity-50"
+              >
+                Poništi promene
+              </button>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setShowModal(false)}
+                  disabled={loading}
+                  className="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50"
+                >
+                  Zatvori
+                </button>
+                <button
+                  onClick={handleSave}
+                  disabled={loading || Object.keys(priceChanges).length === 0}
+                  className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
+                >
+                  {loading ? 'Čuvanje...' : `Sačuvaj promene (${Object.keys(priceChanges).length})`}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

src/components/ColorRequestForm.tsx

@@ -0,0 +1,190 @@
+'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: '',
+    user_phone: '',
+    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: '',
+        user_phone: '',
+        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 *
+            </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-blue-500 appearance-none"
+              placeholder="Za obaveštenja o statusu"
+            />
+          </div>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-4">
+          <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-blue-500 appearance-none"
+              placeholder="063 123 4567"
+            />
+          </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>
+    </>
+  );
+}