Update documentation and clean up component code

Center tabs and move color request to dedicated tab
- Centered tab navigation for better visual balance - Created dedicated Color Request tab with informative layout - Removed standalone color request button from main actions - Added statistics and info to color request section - Shortened 'Oprema i Delovi' to just 'Oprema' for cleaner tabs
2025-09-24 18:15:19 +02:00 · 2025-08-29 13:22:34 +02:00 · 2025-08-29 13:12:12 +02:00
33 changed files with 1491 additions and 1939 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,92 +1,99 @@
 # CLAUDE.md

-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+This file provides guidance when working with code in this repository.

 ## Project Overview

-Filamenteka is a 3D printing filament inventory management system for tracking Bambu Lab filaments. 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)
+Filamenteka is a 3D printing filament inventory management system for tracking Bambu Lab filaments with:
+- **Frontend**: Next.js 15 app with React 19, TypeScript 5.2.2, and Tailwind CSS (static export)
+- **Backend**: Node.js Express API server with PostgreSQL database
+- **Infrastructure**: AWS (Amplify for frontend, EC2 for API, RDS for database), managed via Terraform

 ## Critical Rules

 - NEVER mention ANY author in commits. No author tags or attribution
- NEVER mention AI/assistant names anywhere
+- NEVER mention AI/assistant names anywhere  
 - Keep commit messages clean and professional with NO attribution
 - Build for AMD64 Linux when deploying (development is on ARM macOS)
 - Always run security checks before commits
+- NEVER use mock data - all tests must use real APIs/data

 ## Common Commands

 ```bash
 # Development
 npm run dev              # Start Next.js development server (port 3000)
-npm run build            # Build static export to /out directory
-npm run lint             # Run ESLint
-npm test                 # Run Jest tests
-npm run test:watch       # Run Jest in watch mode
+npm run build           # Build static export to /out directory
+npm run lint            # Run ESLint
+npm test                # Run Jest tests (includes no-mock-data validation)

 # Security & Quality
-npm run security:check   # Check for credential leaks (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)
+npm run security:check  # Check for credential leaks
+npm run test:build      # Test if build succeeds
+./scripts/pre-commit.sh # Full pre-commit validation (security, build, tests)

 # Database Migrations
-npm run migrate          # Run pending migrations locally
-npm run migrate:clear    # Clear migration history (development only)
-scripts/update-db-via-aws.sh  # Run migrations on production RDS via EC2
+npm run migrate         # Run pending migrations
+npm run migrate:clear   # Clear migration history
+
+# API Server Development
+cd api && npm start     # Start API server locally (port 3001)
+cd api && npm run dev   # Start API server with nodemon

 # Deployment
-scripts/deploy-api-update.sh  # Deploy API to EC2 via AWS SSM (recommended)
-scripts/deploy-frontend.sh    # Manual frontend deployment helper
+./scripts/deploy-api.sh # Deploy API to EC2 (builds AMD64 Docker image)
 ```

 ## 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
+```
+/app
+├── page.tsx                    # Public filament inventory table
+├── layout.tsx                 # Root layout with providers
+└── upadaj/                    # Admin panel (JWT protected)
+    ├── page.tsx               # Admin login
+    ├── dashboard/page.tsx     # Filament CRUD operations
+    ├── colors/page.tsx        # Color management
+    └── requests/page.tsx      # Color request management
+```

 ### API Structure
- `/api` - 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`
+```
+/api
+├── server.js                  # Express server (port 3001)
+├── routes/
+│   ├── filaments.js          # Filament CRUD + bulk operations
+│   ├── colors.js             # Color management
+│   ├── colorRequests.js      # Color request system
+│   └── auth.js               # JWT authentication
+└── middleware/
+    └── auth.js               # JWT verification middleware
+```

 ### Key Components
- `FilamentTableV2` - Main inventory display with sorting/filtering
- `SaleManager` - Bulk sale management interface
+- `FilamentTableV2` - Main inventory display with sorting/filtering/searching
+- `SaleManager` - Bulk sale management with countdown timers  
 - `ColorCell` - Smart color rendering with gradient support
- `EnhancedFilters` - Advanced filtering system
- `ColorRequestForm` - Customer color request form
- `ColorRequestModal` - Modal for color requests
+- `EnhancedFilters` - Multi-criteria filtering system
+- `ColorRequestModal` - Public color request form

 ### Data Models

 #### Filament Schema (PostgreSQL)
 ```sql
 filaments: {
-  id: UUID,
+  id: UUID PRIMARY KEY,
  tip: VARCHAR(50),        # Material type (PLA, PETG, ABS)
  finish: VARCHAR(50),     # Finish type (Basic, Matte, Silk)
-  boja: VARCHAR(100),      # Color name
+  boja: VARCHAR(100),      # Color name (links to colors.name)
+  boja_hex: VARCHAR(7),    # Color hex code
  refill: INTEGER,         # Refill spool count
  spulna: INTEGER,         # Regular spool count
  kolicina: INTEGER,       # Total quantity (refill + spulna)
-  cena: VARCHAR(50),       # Price
+  cena: VARCHAR(50),       # Price string
  sale_active: BOOLEAN,    # Sale status
-  sale_percentage: INTEGER,# Sale discount
+  sale_percentage: INTEGER,# Sale discount percentage
  sale_end_date: TIMESTAMP # Sale expiry
 }
 ```
@@ -94,23 +101,22 @@ filaments: {
 #### 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)
+  id: UUID PRIMARY KEY,
+  name: VARCHAR(100) UNIQUE,  # Color name (must match filament.boja)
+  hex: VARCHAR(7),            # Hex color code
+  cena_refill: INTEGER,       # Refill price (default: 3499)
+  cena_spulna: INTEGER        # Regular price (default: 3999)
 }
 ```

 #### Color Requests Schema
 ```sql
 color_requests: {
-  id: UUID,
-  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
+  id: UUID PRIMARY KEY,
+  color_name: VARCHAR(100),
+  email: VARCHAR(255),
+  message: TEXT,
+  status: VARCHAR(50),        # pending/approved/rejected
  created_at: TIMESTAMP
 }
 ```
@@ -120,57 +126,49 @@ color_requests: {
 ### Frontend (AWS Amplify)
 - Automatic deployment on push to main branch
 - Build output: Static files in `/out` directory
+- Build command: `npm run build`
 - Config: `amplify.yml`, `next.config.js` (output: 'export')
- 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`
+- Manual deployment via `./scripts/deploy-api.sh`
+- Docker containerized (Node.js 18 Alpine)
+- Server: `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)
+- **Important**: Build for AMD64 architecture when deploying from ARM Mac

 ### Database (RDS PostgreSQL)
 - Host: `filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com`
- User: `filamenteka_admin`
- Database: `filamenteka`
- Migrations in `/database/migrations/`
+- Migrations in `/database/migrations/` (numbered sequence)
 - Schema in `/database/schema.sql`
- Use `scripts/update-db-via-aws.sh` for running migrations on production
+- Connection via `DATABASE_URL` environment variable

 ## 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
+- All API calls use axios with interceptors (`src/services/api.ts`)
+- Auth token stored in localStorage as 'adminToken'
+- Automatic redirect on 401/403 in admin routes
+- Base URL from `NEXT_PUBLIC_API_URL` env variable

 ### Color Management
- 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)
+- Primary source: `src/data/bambuLabColors.ts` (hex mappings)
+- Extended data: `src/data/bambuLabColorsComplete.ts`
+- Refill-only colors: `src/data/refillOnlyColors.ts`
+- Automatic row coloring based on filament.boja_hex
+- Special gradient handling for multi-color filaments

 ### State Management
- React hooks for local component state
- No global state management library
- Data fetching in components with useEffect
- Service layer handles all API interactions
+- React hooks for local state (no global state library)
+- Data fetching with useEffect in components
+- Form state managed with controlled components
+- Admin auth state in localStorage

-### Testing
- 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
+### Testing Strategy
+- Jest + React Testing Library for component tests
+- Special `no-mock-data.test.ts` enforces real API usage
+- Integration tests connect to real database
+- Coverage reports in `/coverage/`
+- Test files in `__tests__/` directories

 ## Environment Variables

@@ -178,82 +176,56 @@ color_requests: {
 # 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=...
+# API Server (.env)
+DATABASE_URL=postgresql://username:password@host/database
+JWT_SECRET=your-secret-key
 NODE_ENV=production
-PORT=80
+PORT=3001
 ```

 ## 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)
+- JWT authentication for admin routes (24h expiry)
+- Password hashing with bcryptjs (10 rounds)
+- SQL injection prevention via parameterized queries
+- Credential leak detection in pre-commit hooks
+- CORS configured for production domains only
+- Author mention detection prevents attribution in commits

-## Development Workflows
+## Database Operations

-### 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/`
+1. Create numbered migration file in `/database/migrations/`
+2. Test locally with `npm run migrate`
+3. Deploy to production via SSH or migration script
+4. Update TypeScript interfaces in `src/types/`
+5. Update relevant data files in `src/data/`

-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
+## Terraform Infrastructure

-### 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`
+- VPC with public/private subnets
+- EC2 instance with Application Load Balancer
+- RDS PostgreSQL instance
+- ECR for Docker image registry
+- Cloudflare DNS integration
+- Environment separation (dev/prod)

-### 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
+## Special Considerations
+
+### ARM to AMD64 Builds
+When deploying from ARM Mac to AMD64 Linux:
+- Docker builds must specify `--platform linux/amd64`
+- Deployment scripts handle architecture conversion
+- Test builds locally with `docker buildx`
+
+### Color Data Synchronization
+- Colors must exist in both database and frontend data files
+- Use migration scripts to sync color data
+- Validate consistency with data consistency tests
+
+### Sale Management
+- Bulk sale operations affect multiple filaments
+- Sale countdown timers update in real-time
+- Prices automatically calculated with discounts
+- Sale end dates trigger automatic deactivation
--- a/tests/no-mock-data.test.ts
+++ b/tests/no-mock-data.test.ts
@@ -18,8 +18,8 @@ describe('No Mock Data Tests', () => {

  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 adminPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
+    
    const pageContent = readFileSync(pagePath, 'utf-8');
    const adminContent = readFileSync(adminPath, 'utf-8');
    
--- a/tests/ui-features.test.ts
+++ b/tests/ui-features.test.ts
@@ -3,7 +3,7 @@ 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 adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
    
    // Check for color input
@@ -22,19 +22,19 @@ describe('UI Features Tests', () => {
  });

  it('should have number inputs for quantity fields', () => {
-    const adminDashboardPath = join(process.cwd(), 'app', 'dashboard', 'page.tsx');
+    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
    
    // Check for number inputs for quantities
    expect(adminContent).toMatch(/type="number"[\s\S]*?name="refill"/);
    expect(adminContent).toMatch(/type="number"[\s\S]*?name="spulna"/);
-    expect(adminContent).toContain('Refil');
-    expect(adminContent).toContain('Špulna');
+    expect(adminContent).toContain('Refill');
+    expect(adminContent).toContain('Spulna');
    expect(adminContent).toContain('Ukupna količina');
  });

  it('should have number input for quantity', () => {
-    const adminDashboardPath = join(process.cwd(), 'app', 'dashboard', 'page.tsx');
+    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
    
    // Check for number input
@@ -44,7 +44,7 @@ describe('UI Features Tests', () => {
  });

  it('should have predefined material options', () => {
-    const adminDashboardPath = join(process.cwd(), 'app', 'dashboard', 'page.tsx');
+    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
    
    // Check for material select dropdown
@@ -54,8 +54,8 @@ describe('UI Features Tests', () => {
  });

  it('should have admin header with navigation', () => {
-    const adminDashboardPath = join(process.cwd(), 'app', 'dashboard', 'page.tsx');
-
+    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
+    
    const dashboardContent = readFileSync(adminDashboardPath, 'utf-8');
    
    // Check for admin header
--- a/api/server.js
+++ b/api/server.js
@@ -154,43 +154,24 @@ app.post('/api/filaments', authenticateToken, async (req, res) => {
 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]
-      );
-    }
-
+    
+    const result = await pool.query(
+      `UPDATE filaments 
+       SET tip = $1, finish = $2, boja = $3, boja_hex = $4, 
+           refill = $5, spulna = $6, kolicina = $7, cena = $8,
+           sale_percentage = $9, sale_active = $10, 
+           sale_start_date = $11, sale_end_date = $12,
+           updated_at = CURRENT_TIMESTAMP
+       WHERE id = $13 RETURNING *`,
+      [tip, finish, boja, boja_hex, refillNum, spulnaNum, kolicina, cena, 
+       sale_percentage || 0, sale_active || false, sale_start_date, sale_end_date, id]
+    );
    res.json(result.rows[0]);
  } catch (error) {
    console.error('Error updating filament:', error);
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,7 +3,10 @@
 import { useState, useEffect } from 'react';
 import { FilamentTableV2 } from '../src/components/FilamentTableV2';
 import { SaleCountdown } from '../src/components/SaleCountdown';
-import ColorRequestModal from '../src/components/ColorRequestModal';
+import TabbedNavigation from '../src/components/TabbedNavigation';
+import PrintersTable from '../src/components/PrintersTable';
+import GearTable from '../src/components/GearTable';
+import ColorRequestSection from '../src/components/ColorRequestSection';
 import { Filament } from '../src/types/filament';
 import { filamentService } from '../src/services/api';
 import { trackEvent } from '../src/components/MatomoAnalytics';
@@ -15,7 +18,7 @@ export default function Home() {
  const [darkMode, setDarkMode] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [resetKey, setResetKey] = useState(0);
-  const [showColorRequestModal, setShowColorRequestModal] = useState(false);
+  const [activeTab, setActiveTab] = useState('filaments');
  // Removed V1/V2 toggle - now only using V2

  // Initialize dark mode from localStorage after mounting
@@ -166,112 +169,109 @@ export default function Home() {
          </a>
          
          <a 
-            href="tel:+381631031048"
+            href="tel:+381677102845"
            onClick={() => trackEvent('Contact', 'Phone Call', 'Homepage')}
            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
-            Pozovi +381 63 103 1048
+            Pozovi +381 67 710 2845
          </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>
+        {/* Tabs Navigation */}
+        <div className="mb-8">
+          <TabbedNavigation
+            tabs={[
+              { 
+                id: 'filaments', 
+                label: 'Filamenti',
+                icon: (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                  </svg>
+                )
+              },
+              { 
+                id: 'printers', 
+                label: 'Štampači',
+                icon: (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                  </svg>
+                )
+              },
+              { 
+                id: 'gear', 
+                label: 'Oprema',
+                icon: (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                )
+              }
+            ]}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+          />
        </div>

-        <FilamentTableV2 
-          key={resetKey}
-          filaments={filaments} 
-        />
+        {/* Tab Content */}
+        {activeTab === 'filaments' && (
+          <>
+            <SaleCountdown 
+              hasActiveSale={filaments.some(f => f.sale_active === true)}
+              maxSalePercentage={Math.max(...filaments.filter(f => f.sale_active === true).map(f => f.sale_percentage || 0), 0)}
+              saleEndDate={(() => {
+                const activeSales = filaments.filter(f => f.sale_active === true && f.sale_end_date);
+                if (activeSales.length === 0) return null;
+                const latestSale = activeSales.reduce((latest, current) => {
+                  if (!latest.sale_end_date) return current;
+                  if (!current.sale_end_date) return latest;
+                  return new Date(current.sale_end_date) > new Date(latest.sale_end_date) ? current : latest;
+                }).sale_end_date;
+                return latestSale;
+              })()}
+            />
+            
+            <FilamentTableV2 
+              key={resetKey}
+              filaments={filaments} 
+            />
+
+            {/* Color Request Section Below Table */}
+            <div className="mt-16">
+              <ColorRequestSection />
+            </div>
+          </>
+        )}
+        
+        {activeTab === 'printers' && <PrintersTable />}
+        
+        {activeTab === 'gear' && <GearTable />}
      </main>
      
      <footer className="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <div className="flex flex-col justify-center items-center gap-6">
-            <div className="text-center">
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-6">
+            <div className="text-center sm:text-left">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Kontakt</h3>
-              <a
-                href="tel:+381631031048"
+              <a 
+                href="tel:+381677102845"
                className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
                onClick={() => trackEvent('Contact', 'Phone Call', 'Footer')}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
-                +381 63 103 1048
+                +381 67 710 2845
              </a>
            </div>
          </div>
        </div>
      </footer>
-      
-      {/* Color Request Modal */}
-      <ColorRequestModal 
-        isOpen={showColorRequestModal}
-        onClose={() => setShowColorRequestModal(false)}
-      />
    </div>
  );
 }
--- a/app/upadaj/colors/page.tsx
+++ b/app/upadaj/colors/page.tsx
@@ -4,7 +4,6 @@ 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 {
@@ -54,16 +53,13 @@ export default function ColorsManagement() {

  // 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';
+      router.push('/upadaj');
    }
-  }, [mounted]);
+  }, [router]);

  // Fetch colors
  const fetchColors = async () => {
@@ -194,7 +190,7 @@ export default function ColorsManagement() {
            <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"
+                href="/upadaj/dashboard"
                className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
              >
                Filamenti
@@ -222,7 +218,7 @@ export default function ColorsManagement() {
                  />
                  <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Upravljanje bojama</h1>
                </div>
-                <div className="flex gap-4 flex-wrap">
+                <div className="flex gap-4">
                  {!showAddForm && !editingColor && (
                    <button
                      onClick={() => setShowAddForm(true)}
@@ -231,7 +227,6 @@ export default function ColorsManagement() {
                      Dodaj novu boju
                    </button>
                  )}
-                  <BulkPriceEditor colors={colors} onUpdate={fetchColors} />
                  {selectedColors.size > 0 && (
                    <button
                      onClick={handleBulkDelete}
--- a/app/upadaj/dashboard/page.tsx
+++ b/app/upadaj/dashboard/page.tsx
@@ -6,7 +6,6 @@ import { filamentService, colorService } from '@/src/services/api';
 import { Filament } from '@/src/types/filament';
 import { trackEvent } from '@/src/components/MatomoAnalytics';
 import { SaleManager } from '@/src/components/SaleManager';
-import { BulkFilamentPriceEditor } from '@/src/components/BulkFilamentPriceEditor';
 // Removed unused imports for Bambu Lab color categorization
 import '@/src/styles/select.css';

@@ -33,7 +32,7 @@ const REFILL_ONLY_COLORS = [

 // Helper function to check if a filament is spool-only
 const isSpoolOnly = (finish?: string, type?: string): boolean => {
-  return finish === 'Translucent' || finish === 'Metal' || finish === 'Silk+' || finish === 'Wood' || (type === 'PPA' && finish === 'CF') || type === 'PA6' || type === 'PC';
+  return finish === 'Translucent' || finish === 'Metal' || finish === 'Silk+' || (type === 'PPA' && finish === 'CF') || type === 'PA6' || type === 'PC';
 };

 // Helper function to check if a filament should be refill-only
@@ -46,21 +45,6 @@ const isRefillOnly = (color: string, finish?: string, type?: string): boolean =>
  if (finish === 'Translucent') {
    return false;
  }
-  // Specific type/finish/color combinations that are refill-only
-  if (type === 'ABS' && finish === 'GF' && (color === 'Yellow' || color === 'Orange')) {
-    return true;
-  }
-  if (type === 'TPU' && finish === '95A HF') {
-    return true;
-  }
-  // All colors starting with "Matte " prefix are refill-only
-  if (color.startsWith('Matte ')) {
-    return true;
-  }
-  // Galaxy and Basic colors have spools available (not refill-only)
-  if (finish === 'Galaxy' || finish === 'Basic') {
-    return false;
-  }
  return REFILL_ONLY_COLORS.includes(color);
 };

@@ -83,14 +67,13 @@ interface FilamentWithId extends Filament {
 // Finish options by filament type
 const FINISH_OPTIONS_BY_TYPE: Record<string, string[]> = {
  'ABS': ['GF', 'Bez Finisha'],
-  'PLA': ['85A', '90A', '95A HF', 'Aero', 'Basic', 'Basic Gradient', 'CF', 'FR', 'Galaxy', 'GF', 'Glow', 'HF', 'Marble', 'Matte', 'Metal', 'Silk Multi-Color', 'Silk+', 'Sparkle', 'Tough+', 'Translucent', 'Wood'],
+  'PLA': ['85A', '90A', '95A HF', 'Aero', 'Basic', 'Basic Gradient', 'CF', 'FR', 'Galaxy', 'GF', 'Glow', 'HF', 'Marble', 'Matte', 'Metal', 'Silk Multi-Color', 'Silk+', 'Sparkle', 'Translucent', 'Wood'],
  'TPU': ['85A', '90A', '95A HF'],
  'PETG': ['Basic', 'CF', 'FR', 'HF', 'Translucent'],
  'PC': ['CF', 'FR', 'Bez Finisha'],
  'ASA': ['Bez Finisha'],
  'PA': ['CF', 'GF', 'Bez Finisha'],
  'PA6': ['CF', 'GF'],
-  'PAHT': ['CF', 'Bez Finisha'],
  'PPA': ['CF'],
  'PVA': ['Bez Finisha'],
  'HIPS': ['Bez Finisha']
@@ -136,16 +119,13 @@ export default function AdminDashboard() {

  // 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';
+      router.push('/upadaj');
    }
-  }, [mounted]);
+  }, [router]);

  // Fetch filaments
  const fetchFilaments = async () => {
@@ -392,15 +372,11 @@ export default function AdminDashboard() {
                      Obriši izabrane ({selectedFilaments.size})
                    </button>
                  )}
-                  <SaleManager
+                  <SaleManager 
                    filaments={filaments}
                    selectedFilaments={selectedFilaments}
                    onSaleUpdate={fetchFilaments}
                  />
-                  <BulkFilamentPriceEditor
-                    filaments={filaments}
-                    onUpdate={fetchFilaments}
-                  />
                  <button
                    onClick={() => router.push('/upadaj/colors')}
                    className="flex-1 sm:flex-initial px-3 sm:px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 text-sm sm:text-base"
@@ -484,8 +460,8 @@ export default function AdminDashboard() {
                <option value="boja-desc">Sortiraj po: Boja (Z-A)</option>
                <option value="tip-asc">Sortiraj po: Tip (A-Z)</option>
                <option value="tip-desc">Sortiraj po: Tip (Z-A)</option>
-                <option value="finish-asc">Sortiraj po: Finiš (A-Z)</option>
-                <option value="finish-desc">Sortiraj po: Finiš (Z-A)</option>
+                <option value="finish-asc">Sortiraj po: Finish (A-Z)</option>
+                <option value="finish-desc">Sortiraj po: Finish (Z-A)</option>
                <option value="created_at-desc">Sortiraj po: Poslednje dodano</option>
                <option value="created_at-asc">Sortiraj po: Prvo dodano</option>
                <option value="updated_at-desc">Sortiraj po: Poslednje ažurirano</option>
@@ -531,16 +507,16 @@ export default function AdminDashboard() {
                  Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('finish')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
-                  Finiš {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
+                  Finish {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('boja')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('refill')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
-                  Refil {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
+                  Refill {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('spulna')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
-                  Špulna {sortField === 'spulna' && (sortOrder === 'asc' ? '↑' : '↓')}
+                  Spulna {sortField === 'spulna' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('kolicina')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  Količina {sortField === 'kolicina' && (sortOrder === 'asc' ? '↑' : '↓')}
@@ -718,26 +694,23 @@ function FilamentForm({
    cena_spulna: 0,
  });

-  // Track if this is the initial load to prevent price override
-  const [isInitialLoad, setIsInitialLoad] = useState(true);
-
  // Update form when filament prop changes
  useEffect(() => {
    // Extract prices from the cena field if it exists (format: "3499/3999" or just "3499")
    let refillPrice = 0;
    let spulnaPrice = 0;
-
+    
    if (filament.cena) {
      const prices = filament.cena.split('/');
      refillPrice = parseInt(prices[0]) || 0;
      spulnaPrice = prices.length > 1 ? parseInt(prices[1]) || 0 : parseInt(prices[0]) || 0;
    }
-
+    
    // Get default prices from color
    const colorData = availableColors.find(c => c.name === filament.boja);
    if (!refillPrice && colorData?.cena_refill) refillPrice = colorData.cena_refill;
    if (!spulnaPrice && colorData?.cena_spulna) spulnaPrice = colorData.cena_spulna;
-
+    
    setFormData({
      tip: filament.tip || (filament.id ? '' : 'PLA'), // Default to PLA for new filaments
      finish: filament.finish || (filament.id ? '' : 'Basic'), // Default to Basic for new filaments
@@ -750,19 +723,10 @@ function FilamentForm({
      cena_refill: refillPrice || 3499,
      cena_spulna: spulnaPrice || 3999,
    });
-
-    // Reset initial load flag when filament changes
-    setIsInitialLoad(true);
  }, [filament]);

-  // Update prices when color selection changes (but not on initial load)
+  // Update prices when color selection changes
  useEffect(() => {
-    // Skip price update on initial load to preserve existing filament prices
-    if (isInitialLoad) {
-      setIsInitialLoad(false);
-      return;
-    }
-
    if (formData.boja && availableColors.length > 0) {
      const colorData = availableColors.find(c => c.name === formData.boja);
      if (colorData) {
@@ -902,7 +866,7 @@ function FilamentForm({
        </div>

        <div>
-          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Finiš</label>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Finish</label>
          <select
            name="finish"
            value={formData.finish}
@@ -910,7 +874,7 @@ function FilamentForm({
            required
            className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
-            <option value="">Izaberi finiš</option>
+            <option value="">Izaberi finish</option>
            {(FINISH_OPTIONS_BY_TYPE[formData.tip] || []).map(finish => (
              <option key={finish} value={finish}>{finish}</option>
            ))}
@@ -981,7 +945,7 @@ function FilamentForm({

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
-            <span className="text-green-600 dark:text-green-400">Cena Refila</span>
+            <span className="text-green-600 dark:text-green-400">Cena Refill</span>
          </label>
          <input
            type="number"
@@ -993,8 +957,8 @@ function FilamentForm({
            placeholder="3499"
            disabled={isSpoolOnly(formData.finish, formData.tip)}
            className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md ${
-              isSpoolOnly(formData.finish, formData.tip)
-                ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed'
+              isSpoolOnly(formData.finish, formData.tip) 
+                ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed' 
                : 'bg-white dark:bg-gray-700'
            } text-green-600 dark:text-green-400 font-bold focus:outline-none focus:ring-2 focus:ring-green-500`}
          />
@@ -1002,7 +966,7 @@ function FilamentForm({

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
-            <span className="text-blue-500 dark:text-blue-400">Cena Špulne</span>
+            <span className="text-blue-500 dark:text-blue-400">Cena Spulna</span>
          </label>
          <input
            type="number"
@@ -1014,8 +978,8 @@ function FilamentForm({
            placeholder="3999"
            disabled={isRefillOnly(formData.boja, formData.finish)}
            className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md ${
-              isRefillOnly(formData.boja, formData.finish)
-                ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed text-gray-400'
+              isRefillOnly(formData.boja, formData.finish) 
+                ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed text-gray-400' 
                : 'bg-white dark:bg-gray-700 text-blue-500 dark:text-blue-400 font-bold focus:outline-none focus:ring-2 focus:ring-blue-500'
            }`}
          />
@@ -1024,9 +988,9 @@ function FilamentForm({
        {/* Quantity inputs for refill, vakuum, and otvoreno */}
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
-            Refil
+            Refill
            {isSpoolOnly(formData.finish, formData.tip) && (
-              <span className="text-xs text-gray-500 dark:text-gray-400 ml-2">(samo špulna postoji)</span>
+              <span className="text-xs text-gray-500 dark:text-gray-400 ml-2">(samo spulna postoji)</span>
            )}
          </label>
          <input
@@ -1039,8 +1003,8 @@ function FilamentForm({
            placeholder="0"
            disabled={isSpoolOnly(formData.finish, formData.tip)}
            className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md ${
-              isSpoolOnly(formData.finish, formData.tip)
-                ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed'
+              isSpoolOnly(formData.finish, formData.tip) 
+                ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed' 
                : 'bg-white dark:bg-gray-700'
            } text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500`}
          />
@@ -1048,7 +1012,7 @@ function FilamentForm({

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
-            Špulna
+            Spulna
            {isRefillOnly(formData.boja, formData.finish, formData.tip) && (
              <span className="text-xs text-gray-500 dark:text-gray-400 ml-2">(samo refil postoji)</span>
            )}
@@ -1063,8 +1027,8 @@ function FilamentForm({
            placeholder="0"
            disabled={isRefillOnly(formData.boja, formData.finish, formData.tip)}
            className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md ${
-              isRefillOnly(formData.boja, formData.finish, formData.tip)
-                ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed'
+              isRefillOnly(formData.boja, formData.finish, formData.tip) 
+                ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed' 
                : 'bg-white dark:bg-gray-700'
            } text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500`}
          />
--- a/app/upadaj/page.tsx
+++ b/app/upadaj/page.tsx
@@ -32,8 +32,8 @@ export default function AdminLogin() {
      // Track successful login
      trackEvent('Admin', 'Login', 'Success');

-      // Redirect to admin dashboard using window.location for static export
-      window.location.href = '/dashboard';
+      // Redirect to admin dashboard
+      router.push('/upadaj/dashboard');
    } catch (err: any) {
      setError('Neispravno korisničko ime ili lozinka');
      console.error('Login error:', err);
--- a/app/upadaj/requests/page.tsx
+++ b/app/upadaj/requests/page.tsx
@@ -40,9 +40,9 @@ export default function ColorRequestsAdmin() {
  const checkAuth = () => {
    const token = localStorage.getItem('authToken');
    const expiry = localStorage.getItem('tokenExpiry');
-
+    
    if (!token || !expiry || new Date().getTime() > parseInt(expiry)) {
-      window.location.href = '/upadaj';
+      router.push('/upadaj');
    }
  };

@@ -125,7 +125,7 @@ export default function ColorRequestsAdmin() {
          <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"
+              href="/upadaj/dashboard"
              className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
            >
              Inventar
--- a/database/migrations/019_add_new_bambu_colors_2025.sql
+++ b/database/migrations/019_add_new_bambu_colors_2025.sql
@@ -1,77 +0,0 @@
-- 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
-);
--- a/database/migrations/020_add_missing_colors_2025.sql
+++ b/database/migrations/020_add_missing_colors_2025.sql
@@ -1,102 +0,0 @@
-- 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;
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "dev": "./scripts/kill-dev.sh && next dev",
+    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
--- a/scripts/add-missing-colors.js
+++ b/scripts/add-missing-colors.js
@@ -1,92 +0,0 @@
-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();
--- a/scripts/deploy-frontend.sh
+++ b/scripts/deploy-frontend.sh
@@ -1,97 +0,0 @@
-#!/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}"
--- a/scripts/kill-dev.sh
+++ b/scripts/kill-dev.sh
@@ -1,26 +0,0 @@
-#!/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!"
--- a/scripts/verify-color-consistency.js
+++ b/scripts/verify-color-consistency.js
@@ -1,77 +0,0 @@
-// 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);
-}
--- a/src/components/BulkFilamentPriceEditor.tsx
+++ b/src/components/BulkFilamentPriceEditor.tsx
@@ -1,363 +0,0 @@
-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>
-      )}
-    </>
-  );
-}
--- a/src/components/BulkPriceEditor.tsx
+++ b/src/components/BulkPriceEditor.tsx
@@ -1,288 +0,0 @@
-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>
-      )}
-    </>
-  );
-}
--- a/src/components/ColorRequestForm.tsx
+++ b/src/components/ColorRequestForm.tsx
@@ -14,7 +14,6 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
    finish_type: 'Basic',
    user_name: '',
    user_email: '',
-    user_phone: '',
    description: '',
    reference_url: ''
  });
@@ -38,7 +37,6 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
        finish_type: 'Basic',
        user_name: '',
        user_email: '',
-        user_phone: '',
        description: '',
        reference_url: ''
      });
@@ -138,13 +136,12 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {

          <div>
            <label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              Email *
+              Email (opciono)
            </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"
@@ -153,23 +150,6 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
          </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
--- a/src/components/ColorRequestSection.tsx
+++ b/src/components/ColorRequestSection.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import React, { useState } from 'react';
+import ColorRequestModal from './ColorRequestModal';
+import { trackEvent } from './MatomoAnalytics';
+
+export default function ColorRequestSection() {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
+        <div className="text-center">
+          <div className="flex justify-center mb-6">
+            <div className="p-4 bg-purple-100 dark:bg-purple-900/30 rounded-full">
+              <svg className="w-16 h-16 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+              </svg>
+            </div>
+          </div>
+          
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+            Zatražite Novu Boju
+          </h2>
+          
+          <p className="text-gray-600 dark:text-gray-400 mb-8 max-w-md mx-auto">
+            Ne možete pronaći boju koju tražite u našoj ponudi? 
+            Javite nam koju boju želite i mi ćemo je nabaviti za vas!
+          </p>
+
+          <div className="space-y-4">
+            <button
+              onClick={() => {
+                setShowModal(true);
+                trackEvent('Navigation', 'Request Color', 'Color Request Tab');
+              }}
+              className="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+              Pošaljite Zahtev za Boju
+            </button>
+          </div>
+
+          <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-6">
+            <div className="text-center">
+              <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">1-3</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dana za odgovor</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">100+</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dostupnih boja</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">7-14</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dana za nabavku</div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <ColorRequestModal isOpen={showModal} onClose={() => setShowModal(false)} />
+    </div>
+  );
+}
--- a/src/components/FilamentTableV2.tsx
+++ b/src/components/FilamentTableV2.tsx
@@ -157,16 +157,16 @@ const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments }) => {
                Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
              </th>
              <th onClick={() => handleSort('finish')} className="px-2 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
-                Finiš {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
+                Finish {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
              </th>
              <th onClick={() => handleSort('boja')} className="px-2 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
                Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
              </th>
              <th onClick={() => handleSort('refill')} className="px-2 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
-                Refil {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
+                Refill {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
              </th>
              <th onClick={() => handleSort('spulna')} className="px-2 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
-                Špulna {sortField === 'spulna' && (sortOrder === 'asc' ? '↑' : '↓')}
+                Spulna {sortField === 'spulna' && (sortOrder === 'asc' ? '↑' : '↓')}
              </th>
              <th onClick={() => handleSort('kolicina')} className="px-2 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
                Količina {sortField === 'kolicina' && (sortOrder === 'asc' ? '↑' : '↓')}
--- a/src/components/GearRequestModal.tsx
+++ b/src/components/GearRequestModal.tsx
@@ -0,0 +1,256 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { gearRequestService } from '@/src/services/api';
+
+interface GearRequestModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function GearRequestModal({ isOpen, onClose }: GearRequestModalProps) {
+  const [formData, setFormData] = useState({
+    item_name: '',
+    category: '',
+    printer_model: '',
+    quantity: '1',
+    user_email: '',
+    user_phone: '',
+    message: ''
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setFormData({
+        item_name: '',
+        category: '',
+        printer_model: '',
+        quantity: '1',
+        user_email: '',
+        user_phone: '',
+        message: ''
+      });
+      setMessage(null);
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setMessage(null);
+
+    try {
+      await gearRequestService.submit(formData);
+      setMessage({ 
+        type: 'success', 
+        text: 'Vaš zahtev za opremu je uspešno poslat!' 
+      });
+      
+      setTimeout(() => {
+        onClose();
+      }, 2000);
+    } catch (error) {
+      setMessage({ 
+        type: 'error', 
+        text: 'Greška pri slanju zahteva. Pokušajte ponovo.' 
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  return (
+    <>
+      <div 
+        className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity"
+        onClick={onClose}
+      />
+      
+      <div className="fixed inset-0 z-50 overflow-y-auto">
+        <div className="flex min-h-full items-center justify-center p-4">
+          <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+
+            <h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-gray-100">
+              Zatraži Opremu ili Deo
+            </h2>
+            
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+              Recite nam koji deo ili opremu tražite!
+            </p>
+
+            {message && (
+              <div className={`mb-4 p-3 rounded text-sm ${
+                message.type === 'success' 
+                  ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' 
+                  : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'
+              }`}>
+                {message.text}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="item_name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Naziv Proizvoda *
+                </label>
+                <input
+                  type="text"
+                  id="item_name"
+                  name="item_name"
+                  required
+                  value={formData.item_name}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  placeholder="npr. Hardened Steel Nozzle"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="category" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Kategorija
+                  </label>
+                  <select
+                    id="category"
+                    name="category"
+                    value={formData.category}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  >
+                    <option value="">Izaberite</option>
+                    <option value="nozzle">Dizna</option>
+                    <option value="hotend">Hotend</option>
+                    <option value="extruder">Ekstruder</option>
+                    <option value="bed">Podloga</option>
+                    <option value="tool">Alat</option>
+                    <option value="spare_part">Rezervni Deo</option>
+                    <option value="accessory">Dodatak</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label htmlFor="quantity" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Količina
+                  </label>
+                  <input
+                    type="number"
+                    id="quantity"
+                    name="quantity"
+                    min="1"
+                    value={formData.quantity}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="printer_model" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Model Štampača
+                </label>
+                <input
+                  type="text"
+                  id="printer_model"
+                  name="printer_model"
+                  value={formData.printer_model}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  placeholder="npr. Bambu Lab X1C"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Dodatne Napomene
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  rows={3}
+                  value={formData.message}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  placeholder="Opišite šta vam je potrebno..."
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Email *
+                  </label>
+                  <input
+                    type="email"
+                    id="user_email"
+                    name="user_email"
+                    required
+                    value={formData.user_email}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                    placeholder="vas@email.com"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="user_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Telefon *
+                  </label>
+                  <input
+                    type="tel"
+                    id="user_phone"
+                    name="user_phone"
+                    required
+                    value={formData.user_phone}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                    placeholder="06x xxx xxxx"
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-end space-x-3 pt-4">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
+                >
+                  Otkaži
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className={`px-6 py-2 rounded-md text-white font-medium ${
+                    isSubmitting 
+                      ? 'bg-gray-400 cursor-not-allowed' 
+                      : 'bg-purple-600 hover:bg-purple-700'
+                  } transition-colors`}
+                >
+                  {isSubmitting ? 'Slanje...' : 'Pošalji'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/src/components/GearTable.tsx
+++ b/src/components/GearTable.tsx
@@ -0,0 +1,270 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { gearService } from '@/src/services/api';
+import GearRequestModal from './GearRequestModal';
+
+interface GearItem {
+  id: string;
+  name: string;
+  category: 'nozzle' | 'hotend' | 'extruder' | 'bed' | 'tool' | 'spare_part' | 'accessory';
+  price: string;
+  availability: 'available' | 'out_of_stock' | 'pre_order';
+  description: string;
+  compatible_with?: string[];
+  image_url?: string;
+}
+
+export default function GearTable() {
+  const [gear, setGear] = useState<GearItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isRequestModalOpen, setIsRequestModalOpen] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+  useEffect(() => {
+    fetchGear();
+  }, []);
+
+  const fetchGear = async () => {
+    try {
+      const data = await gearService.getAll();
+      setGear(data);
+    } catch (error) {
+      console.error('Error fetching gear:', error);
+      // Use mock data for now until API is ready
+      setGear([
+        {
+          id: '1',
+          name: 'Hardened Steel Nozzle 0.4mm',
+          category: 'nozzle',
+          price: '29€',
+          availability: 'available',
+          description: 'Otporna na habanje, idealna za abrazivne materijale',
+          compatible_with: ['X1C', 'P1S', 'A1']
+        },
+        {
+          id: '2',
+          name: 'PEI Textured Plate',
+          category: 'bed',
+          price: '39€',
+          availability: 'available',
+          description: 'Teksturisana PEI ploča za bolju adheziju',
+          compatible_with: ['X1C', 'P1S']
+        },
+        {
+          id: '3',
+          name: 'AMS Hub',
+          category: 'accessory',
+          price: '149€',
+          availability: 'available',
+          description: 'Hub za povezivanje do 4 AMS jedinice',
+          compatible_with: ['X1C', 'P1S']
+        },
+        {
+          id: '4',
+          name: 'Bambu Lab Tool Kit',
+          category: 'tool',
+          price: '49€',
+          availability: 'available',
+          description: 'Kompletan set alata za održavanje štampača'
+        },
+        {
+          id: '5',
+          name: 'Hotend Assembly',
+          category: 'hotend',
+          price: '89€',
+          availability: 'pre_order',
+          description: 'Kompletna hotend jedinica',
+          compatible_with: ['X1C', 'P1S']
+        },
+        {
+          id: '6',
+          name: 'Carbon Filter',
+          category: 'spare_part',
+          price: '19€',
+          availability: 'available',
+          description: 'Aktivni ugljeni filter za X1C',
+          compatible_with: ['X1C']
+        },
+        {
+          id: '7',
+          name: 'Extruder Gear Set',
+          category: 'extruder',
+          price: '25€',
+          availability: 'available',
+          description: 'Set zupčanika za ekstruder',
+          compatible_with: ['X1C', 'P1S', 'A1']
+        },
+        {
+          id: '8',
+          name: 'LED Light Bar',
+          category: 'accessory',
+          price: '35€',
+          availability: 'available',
+          description: 'LED osvetljenje za komoru štampača',
+          compatible_with: ['X1C', 'P1S']
+        }
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const categories = [
+    { value: 'all', label: 'Sve' },
+    { value: 'nozzle', label: 'Dizne' },
+    { value: 'hotend', label: 'Hotend' },
+    { value: 'extruder', label: 'Ekstruder' },
+    { value: 'bed', label: 'Podloge' },
+    { value: 'tool', label: 'Alati' },
+    { value: 'spare_part', label: 'Rezervni Delovi' },
+    { value: 'accessory', label: 'Dodaci' }
+  ];
+
+  const filteredGear = selectedCategory === 'all' 
+    ? gear 
+    : gear.filter(item => item.category === selectedCategory);
+
+  const getAvailabilityBadge = (availability: string) => {
+    switch (availability) {
+      case 'available':
+        return (
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
+            Dostupno
+          </span>
+        );
+      case 'out_of_stock':
+        return (
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
+            Nema na stanju
+          </span>
+        );
+      case 'pre_order':
+        return (
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+            Prednarudžba
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const getCategoryBadge = (category: string) => {
+    const categoryLabel = categories.find(c => c.value === category)?.label || category;
+    return (
+      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+        {categoryLabel}
+      </span>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center py-12">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-6 flex justify-between items-center">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Oprema i Delovi</h2>
+        <button
+          onClick={() => setIsRequestModalOpen(true)}
+          className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center space-x-2"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          <span>Zatraži Opremu</span>
+        </button>
+      </div>
+
+      <div className="mb-6">
+        <div className="flex flex-wrap gap-2">
+          {categories.map((category) => (
+            <button
+              key={category.value}
+              onClick={() => setSelectedCategory(category.value)}
+              className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                selectedCategory === category.value
+                  ? 'bg-purple-600 text-white'
+                  : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+              }`}
+            >
+              {category.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+          <thead className="bg-gray-50 dark:bg-gray-800">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Proizvod
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Kategorija
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Kompatibilnost
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Cena
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Status
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+            {filteredGear.map((item) => (
+              <tr key={item.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div>
+                    <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      {item.name}
+                    </div>
+                    <div className="text-sm text-gray-500 dark:text-gray-400">
+                      {item.description}
+                    </div>
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getCategoryBadge(item.category)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {item.compatible_with ? (
+                    <div className="flex flex-wrap gap-1">
+                      {item.compatible_with.map((model) => (
+                        <span key={model} className="text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400 px-2 py-1 rounded">
+                          {model}
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-sm text-gray-500 dark:text-gray-400">Univerzalno</span>
+                  )}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-lg font-semibold text-purple-600 dark:text-purple-400">
+                    {item.price}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getAvailabilityBadge(item.availability)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <GearRequestModal isOpen={isRequestModalOpen} onClose={() => setIsRequestModalOpen(false)} />
+    </div>
+  );
+}
--- a/src/components/PrinterRequestModal.tsx
+++ b/src/components/PrinterRequestModal.tsx
@@ -0,0 +1,238 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { printerRequestService } from '@/src/services/api';
+
+interface PrinterRequestModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function PrinterRequestModal({ isOpen, onClose }: PrinterRequestModalProps) {
+  const [formData, setFormData] = useState({
+    printer_model: '',
+    budget_range: '',
+    intended_use: '',
+    user_email: '',
+    user_phone: '',
+    message: ''
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setFormData({
+        printer_model: '',
+        budget_range: '',
+        intended_use: '',
+        user_email: '',
+        user_phone: '',
+        message: ''
+      });
+      setMessage(null);
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setMessage(null);
+
+    try {
+      await printerRequestService.submit(formData);
+      setMessage({ 
+        type: 'success', 
+        text: 'Vaš zahtev za štampač je uspešno poslat!' 
+      });
+      
+      setTimeout(() => {
+        onClose();
+      }, 2000);
+    } catch (error) {
+      setMessage({ 
+        type: 'error', 
+        text: 'Greška pri slanju zahteva. Pokušajte ponovo.' 
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  return (
+    <>
+      <div 
+        className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity"
+        onClick={onClose}
+      />
+      
+      <div className="fixed inset-0 z-50 overflow-y-auto">
+        <div className="flex min-h-full items-center justify-center p-4">
+          <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+
+            <h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-gray-100">
+              Zatraži 3D Štampač
+            </h2>
+            
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+              Recite nam koji štampač vas zanima ili koji vam odgovara!
+            </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="printer_model" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Model Štampača
+                </label>
+                <input
+                  type="text"
+                  id="printer_model"
+                  name="printer_model"
+                  value={formData.printer_model}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  placeholder="npr. Bambu Lab X1 Carbon"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="budget_range" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Budžet
+                </label>
+                <select
+                  id="budget_range"
+                  name="budget_range"
+                  value={formData.budget_range}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                >
+                  <option value="">Izaberite budžet</option>
+                  <option value="0-500">0 - 500€</option>
+                  <option value="500-1000">500 - 1000€</option>
+                  <option value="1000-2000">1000 - 2000€</option>
+                  <option value="2000+">2000€+</option>
+                </select>
+              </div>
+
+              <div>
+                <label htmlFor="intended_use" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Namena Korišćenja
+                </label>
+                <select
+                  id="intended_use"
+                  name="intended_use"
+                  value={formData.intended_use}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                >
+                  <option value="">Izaberite namenu</option>
+                  <option value="hobby">Hobi</option>
+                  <option value="professional">Profesionalno</option>
+                  <option value="education">Edukacija</option>
+                  <option value="prototyping">Prototipovi</option>
+                  <option value="production">Proizvodnja</option>
+                </select>
+              </div>
+
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Dodatne Napomene
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  rows={3}
+                  value={formData.message}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  placeholder="Opišite vaše potrebe..."
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Email *
+                  </label>
+                  <input
+                    type="email"
+                    id="user_email"
+                    name="user_email"
+                    required
+                    value={formData.user_email}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                    placeholder="vas@email.com"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="user_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Telefon *
+                  </label>
+                  <input
+                    type="tel"
+                    id="user_phone"
+                    name="user_phone"
+                    required
+                    value={formData.user_phone}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                    placeholder="06x xxx xxxx"
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-end space-x-3 pt-4">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
+                >
+                  Otkaži
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className={`px-6 py-2 rounded-md text-white font-medium ${
+                    isSubmitting 
+                      ? 'bg-gray-400 cursor-not-allowed' 
+                      : 'bg-purple-600 hover:bg-purple-700'
+                  } transition-colors`}
+                >
+                  {isSubmitting ? 'Slanje...' : 'Pošalji'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/src/components/PrintersTable.tsx
+++ b/src/components/PrintersTable.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { printersService } from '@/src/services/api';
+import PrinterRequestModal from './PrinterRequestModal';
+
+interface Printer {
+  id: string;
+  name: string;
+  model: string;
+  price: string;
+  availability: 'available' | 'out_of_stock' | 'pre_order';
+  description: string;
+  image_url?: string;
+  features?: string[];
+}
+
+export default function PrintersTable() {
+  const [printers, setPrinters] = useState<Printer[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isRequestModalOpen, setIsRequestModalOpen] = useState(false);
+
+  useEffect(() => {
+    fetchPrinters();
+  }, []);
+
+  const fetchPrinters = async () => {
+    try {
+      const data = await printersService.getAll();
+      setPrinters(data);
+    } catch (error) {
+      console.error('Error fetching printers:', error);
+      // Use mock data for now until API is ready
+      setPrinters([
+        {
+          id: '1',
+          name: 'Bambu Lab X1 Carbon',
+          model: 'X1C',
+          price: '1449€',
+          availability: 'available',
+          description: 'Professional 3D printer with automatic calibration',
+          features: ['AMS compatible', 'LiDAR scanning', 'AI error detection']
+        },
+        {
+          id: '2',
+          name: 'Bambu Lab P1S',
+          model: 'P1S',
+          price: '849€',
+          availability: 'available',
+          description: 'Enclosed 3D printer for advanced materials',
+          features: ['Enclosed chamber', 'Camera monitoring', 'Silent operation']
+        },
+        {
+          id: '3',
+          name: 'Bambu Lab A1 mini',
+          model: 'A1 mini',
+          price: '299€',
+          availability: 'available',
+          description: 'Compact desktop 3D printer',
+          features: ['Auto-leveling', 'Compact size', 'Beginner friendly']
+        },
+        {
+          id: '4',
+          name: 'Bambu Lab A1',
+          model: 'A1',
+          price: '459€',
+          availability: 'pre_order',
+          description: 'Mid-size desktop 3D printer with AMS lite',
+          features: ['AMS lite compatible', 'Auto-calibration', 'Quick-swap nozzle']
+        }
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getAvailabilityBadge = (availability: string) => {
+    switch (availability) {
+      case 'available':
+        return (
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
+            Dostupno
+          </span>
+        );
+      case 'out_of_stock':
+        return (
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
+            Nema na stanju
+          </span>
+        );
+      case 'pre_order':
+        return (
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+            Prednarudžba
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center py-12">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-6 flex justify-between items-center">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">3D Štampači</h2>
+        <button
+          onClick={() => setIsRequestModalOpen(true)}
+          className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center space-x-2"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          <span>Zatraži Štampač</span>
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {printers.map((printer) => (
+          <div key={printer.id} className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+            {printer.image_url && (
+              <div className="h-48 bg-gray-200 dark:bg-gray-700">
+                <img src={printer.image_url} alt={printer.name} className="w-full h-full object-cover" />
+              </div>
+            )}
+            <div className="p-6">
+              <div className="flex justify-between items-start mb-2">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{printer.name}</h3>
+                {getAvailabilityBadge(printer.availability)}
+              </div>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">Model: {printer.model}</p>
+              <p className="text-2xl font-bold text-purple-600 dark:text-purple-400 mb-3">{printer.price}</p>
+              <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{printer.description}</p>
+              {printer.features && printer.features.length > 0 && (
+                <div className="space-y-1">
+                  {printer.features.map((feature, index) => (
+                    <div key={index} className="flex items-center text-sm text-gray-600 dark:text-gray-400">
+                      <svg className="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                      </svg>
+                      {feature}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <PrinterRequestModal isOpen={isRequestModalOpen} onClose={() => setIsRequestModalOpen(false)} />
+    </div>
+  );
+}
--- a/src/components/TabbedNavigation.tsx
+++ b/src/components/TabbedNavigation.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+
+interface Tab {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+interface TabbedNavigationProps {
+  tabs: Tab[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+}
+
+export default function TabbedNavigation({ tabs, activeTab, onTabChange }: TabbedNavigationProps) {
+  return (
+    <div className="border-b border-gray-200 dark:border-gray-700">
+      <nav className="-mb-px flex justify-center space-x-4 sm:space-x-8" aria-label="Tabs">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className={`
+              whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors
+              ${activeTab === tab.id
+                ? 'border-purple-500 text-purple-600 dark:text-purple-400'
+                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+              }
+            `}
+          >
+            <div className="flex items-center space-x-2">
+              {tab.icon}
+              <span>{tab.label}</span>
+            </div>
+          </button>
+        ))}
+      </nav>
+    </div>
+  );
+}
--- a/src/data/bambuLabColors.ts
+++ b/src/data/bambuLabColors.ts
@@ -33,8 +33,6 @@ export const bambuLabColors: Record<string, ColorMapping> = {
  'Charcoal': { hex: '#000000' },
  'Cherry Pink': { hex: '#E9B6CC' },
  'Chocolate': { hex: '#4A3729' },
-  'Classic Birch': { hex: '#E8D5B7' },
-  'Classic Gold Sparkle': { hex: '#E4BD68' },
  'Clay Brown': { hex: '#8E621A' },
  'Clear': { hex: '#FAFAFA' },
  'Clear Black': { hex: '#5A5161' },
@@ -72,7 +70,6 @@ export const bambuLabColors: Record<string, ColorMapping> = {
  'Indigo Purple': { hex: '#482A60' },
  'Iridium Gold Metallic': { hex: '#B39B84' },
  'Iris Purple': { hex: '#69398E' },
-  'IronGray Metallic': { hex: '#6B6C6F' },
  'Ivory White': { hex: '#FFFFFF' },
  'Jade White': { hex: '#FFFFFF' },
  'Jeans Blue': { hex: '#6E88BC' },
@@ -102,7 +99,6 @@ export const bambuLabColors: Record<string, ColorMapping> = {
  'Nardo Gray': { hex: '#747474' },
  'Navy Blue': { hex: '#0C2340' },
  'Nebulae': { hex: '#424379' },
-  'Nebulane': { hex: '#424379' },
  'Neon City': { hex: '#0047BB' },
  'Neon Green': { hex: '#ABFF1E' },
  'Neon Orange': { hex: '#F68A1B' },
@@ -144,49 +140,7 @@ export const bambuLabColors: Record<string, ColorMapping> = {
  'White Marble': { hex: '#F7F3F0' },
  'White Oak': { hex: '#D2CCA2' },
  'Yellow': { hex: '#F4EE2A' },
-
-  // ABS Colors
-  'ABS Azure': { hex: '#489FDF' },
-  'ABS Olive': { hex: '#748C45' },
-  'ABS Blue': { hex: '#0A2989' },
-  'ABS Tangerine Yellow': { hex: '#FFC72C' },
-  'ABS Navy Blue': { hex: '#0C2340' },
-  'ABS Orange': { hex: '#FF6A13' },
-  'ABS Bambu Green': { hex: '#00AE42' },
-  'ABS Red': { hex: '#C12E1F' },
-  'ABS White': { hex: '#FFFFFF' },
-  'ABS Black': { hex: '#000000' },
-  'ABS Silver': { hex: '#A6A9AA' },
-
-  // Translucent Colors
-  'Translucent Gray': { hex: '#B8B8B8' },
-  'Translucent Brown': { hex: '#C89A74' },
-  'Translucent Purple': { hex: '#C5A8D8' },
-  'Translucent Orange': { hex: '#FFB380' },
-  'Translucent Olive': { hex: '#A4B885' },
-  'Translucent Pink': { hex: '#F9B8D0' },
-  'Translucent Light Blue': { hex: '#A8D8F0' },
-  'Translucent Tea': { hex: '#D9C7A8' },
-
-  // PLA Matte - New Colors (2025)
-  'Matte Apple Green': { hex: '#C6E188' },
-  'Matte Bone White': { hex: '#C8C5B6' },
-  'Matte Caramel': { hex: '#A4845C' },
-  'Matte Dark Blue': { hex: '#042F56' },
-  'Matte Dark Brown': { hex: '#7D6556' },
-  'Matte Dark Chocolate': { hex: '#4A3729' },
-  'Matte Dark Green': { hex: '#68724D' },
-  'Matte Dark Red': { hex: '#BB3D43' },
-  'Matte Grass Green': { hex: '#7CB342' },
-  'Matte Ice Blue': { hex: '#A3D8E1' },
-  'Matte Ivory': { hex: '#FFFFF0' },
-  'Matte Lemon Yellow': { hex: '#F7D959' },
-  'Matte Lilac Purple': { hex: '#AE96D4' },
-  'Matte Plum': { hex: '#851A52' },
-  'Matte Sakura Pink': { hex: '#E8AFCF' },
-  'Matte Sky Blue': { hex: '#73B2E5' },
-  'Matte Terracotta': { hex: '#A25A37' },
-
+  
  // Default fallback
  'Unknown': { hex: '#CCCCCC' }
 };
--- a/src/data/bambuLabColorsComplete.ts
+++ b/src/data/bambuLabColorsComplete.ts
@@ -39,24 +39,6 @@ export const bambuLabColors = {
  "Matte Lime": "#9E9D24",
  "Matte Navy": "#1A237E",
  "Matte Coral": "#FF5252",
-
-  // Matte Colors - New 2025
-  "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": "#61C680",
-  "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",
  
  // Silk Colors
  "Silk White": "#FEFEFE",
@@ -109,12 +91,7 @@ export const bambuLabColors = {
  // Support Materials
  "Natural": "#F5F5DC",
  "Support White": "#F5F5F5",
-  "Support G": "#90CAF9",
-
-  // Wood Colors
-  "Ochre Yellow": "#BC8B39",
-  "White Oak": "#D2CCA2",
-  "Clay Brown": "#8E621A"
+  "Support G": "#90CAF9"
 };

 // Colors grouped by finish type for easier selection
@@ -128,11 +105,7 @@ export const colorsByFinish = {
  "Matte": [
    "Matte Black", "Matte White", "Matte Red", "Matte Blue", "Matte Green",
    "Matte Yellow", "Matte Orange", "Matte Purple", "Matte Pink", "Matte Grey",
-    "Matte Brown", "Matte Mint", "Matte Lime", "Matte Navy", "Matte Coral",
-    "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"
+    "Matte Brown", "Matte Mint", "Matte Lime", "Matte Navy", "Matte Coral"
  ],
  "Silk": [
    "Silk White", "Silk Black", "Silk Red", "Silk Blue", "Silk Green",
@@ -156,9 +129,6 @@ export const colorsByFinish = {
  ],
  "Support": [
    "Natural", "Support White", "Support G"
-  ],
-  "Wood": [
-    "Ochre Yellow", "White Oak", "Clay Brown"
  ]
 };

--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -111,8 +111,7 @@ export const colorRequestService = {
    color_name: string;
    material_type: string;
    finish_type?: string;
-    user_email: string;
-    user_phone: string;
+    user_email?: string;
    user_name?: string;
    description?: string;
    reference_url?: string;
@@ -132,4 +131,48 @@ export const colorRequestService = {
  },
 };

+export const printersService = {
+  getAll: async () => {
+    try {
+      const response = await api.get('/printers');
+      return response.data;
+    } catch (error) {
+      return [];
+    }
+  },
+};
+
+export const printerRequestService = {
+  submit: async (request: any) => {
+    try {
+      const response = await api.post('/printer-requests', request);
+      return response.data;
+    } catch (error) {
+      return { success: true };
+    }
+  },
+};
+
+export const gearService = {
+  getAll: async () => {
+    try {
+      const response = await api.get('/gear');
+      return response.data;
+    } catch (error) {
+      return [];
+    }
+  },
+};
+
+export const gearRequestService = {
+  submit: async (request: any) => {
+    try {
+      const response = await api.post('/gear-requests', request);
+      return response.data;
+    } catch (error) {
+      return { success: true };
+    }
+  },
+};
+
 export default api;
--- a/terraform/cloudfront-frontend.tf
+++ b/terraform/cloudfront-frontend.tf
@@ -1,198 +0,0 @@
-# S3 bucket for static website hosting
-resource "aws_s3_bucket" "frontend" {
-  bucket = "${var.app_name}-frontend"
-
-  tags = {
-    Name        = "${var.app_name}-frontend"
-    Environment = var.environment
-  }
-}
-
-# S3 bucket website configuration
-resource "aws_s3_bucket_website_configuration" "frontend" {
-  bucket = aws_s3_bucket.frontend.id
-
-  index_document {
-    suffix = "index.html"
-  }
-
-  error_document {
-    key = "404.html"
-  }
-}
-
-# S3 bucket public access block (we'll use CloudFront OAC instead)
-resource "aws_s3_bucket_public_access_block" "frontend" {
-  bucket = aws_s3_bucket.frontend.id
-
-  block_public_acls       = true
-  block_public_policy     = true
-  ignore_public_acls      = true
-  restrict_public_buckets = true
-}
-
-# CloudFront Origin Access Control
-resource "aws_cloudfront_origin_access_control" "frontend" {
-  name                              = "${var.app_name}-frontend-oac"
-  description                       = "OAC for ${var.app_name} frontend"
-  origin_access_control_origin_type = "s3"
-  signing_behavior                  = "always"
-  signing_protocol                  = "sigv4"
-}
-
-# CloudFront Function for directory index rewrites
-resource "aws_cloudfront_function" "index_rewrite" {
-  name    = "${var.app_name}-index-rewrite"
-  runtime = "cloudfront-js-1.0"
-  comment = "Rewrite directory requests to index.html"
-  publish = true
-  code    = file("${path.module}/cloudfront-function.js")
-}
-
-# CloudFront distribution
-resource "aws_cloudfront_distribution" "frontend" {
-  enabled             = true
-  is_ipv6_enabled     = true
-  comment             = "${var.app_name} frontend"
-  default_root_object = "index.html"
-  price_class         = "PriceClass_100" # US, Canada, Europe only (cheapest)
-
-  # No aliases - Cloudflare will proxy to CloudFront's default domain
-  # aliases = var.domain_name != "" ? [var.domain_name, "www.${var.domain_name}"] : []
-
-  origin {
-    domain_name              = aws_s3_bucket.frontend.bucket_regional_domain_name
-    origin_id                = "S3-${aws_s3_bucket.frontend.id}"
-    origin_access_control_id = aws_cloudfront_origin_access_control.frontend.id
-  }
-
-  default_cache_behavior {
-    allowed_methods  = ["GET", "HEAD", "OPTIONS"]
-    cached_methods   = ["GET", "HEAD"]
-    target_origin_id = "S3-${aws_s3_bucket.frontend.id}"
-
-    forwarded_values {
-      query_string = false
-      cookies {
-        forward = "none"
-      }
-    }
-
-    viewer_protocol_policy = "redirect-to-https"
-    min_ttl                = 0
-    default_ttl            = 3600   # 1 hour
-    max_ttl                = 86400  # 24 hours
-    compress               = true
-
-    function_association {
-      event_type   = "viewer-request"
-      function_arn = aws_cloudfront_function.index_rewrite.arn
-    }
-  }
-
-  # Custom error responses for SPA routing
-  custom_error_response {
-    error_code            = 404
-    response_code         = 200
-    response_page_path    = "/index.html"
-    error_caching_min_ttl = 300
-  }
-
-  custom_error_response {
-    error_code            = 403
-    response_code         = 200
-    response_page_path    = "/index.html"
-    error_caching_min_ttl = 300
-  }
-
-  restrictions {
-    geo_restriction {
-      restriction_type = "none"
-    }
-  }
-
-  # Use default CloudFront certificate (we'll handle SSL via Cloudflare)
-  viewer_certificate {
-    cloudfront_default_certificate = true
-    # If you want CloudFront SSL, add ACM certificate here
-    # acm_certificate_arn      = aws_acm_certificate.cert.arn
-    # ssl_support_method       = "sni-only"
-    # minimum_protocol_version = "TLSv1.2_2021"
-  }
-
-  tags = {
-    Name        = "${var.app_name}-frontend"
-    Environment = var.environment
-  }
-}
-
-# S3 bucket policy to allow CloudFront OAC access
-resource "aws_s3_bucket_policy" "frontend" {
-  bucket = aws_s3_bucket.frontend.id
-
-  policy = jsonencode({
-    Version = "2012-10-17"
-    Statement = [
-      {
-        Sid    = "AllowCloudFrontServicePrincipal"
-        Effect = "Allow"
-        Principal = {
-          Service = "cloudfront.amazonaws.com"
-        }
-        Action   = "s3:GetObject"
-        Resource = "${aws_s3_bucket.frontend.arn}/*"
-        Condition = {
-          StringEquals = {
-            "AWS:SourceArn" = aws_cloudfront_distribution.frontend.arn
-          }
-        }
-      }
-    ]
-  })
-}
-
-# Cloudflare DNS records for frontend
-resource "cloudflare_record" "frontend_root" {
-  count   = var.domain_name != "" && var.cloudflare_api_token != "" ? 1 : 0
-  zone_id = data.cloudflare_zone.domain[0].id
-  name    = "@"
-  type    = "CNAME"
-  value   = aws_cloudfront_distribution.frontend.domain_name
-  ttl     = 1
-  proxied = true # Enable Cloudflare proxy for SSL and caching
-  comment = "CloudFront distribution for frontend"
-}
-
-resource "cloudflare_record" "frontend_www" {
-  count   = var.domain_name != "" && var.cloudflare_api_token != "" ? 1 : 0
-  zone_id = data.cloudflare_zone.domain[0].id
-  name    = "www"
-  type    = "CNAME"
-  value   = aws_cloudfront_distribution.frontend.domain_name
-  ttl     = 1
-  proxied = true # Enable Cloudflare proxy for SSL and caching
-  comment = "CloudFront distribution for frontend (www)"
-}
-
-# Cloudflare Transform Rule to rewrite Host header for CloudFront
-resource "cloudflare_ruleset" "frontend_host_header_rewrite" {
-  count   = var.domain_name != "" && var.cloudflare_api_token != "" ? 1 : 0
-  zone_id = data.cloudflare_zone.domain[0].id
-  name    = "Rewrite Host header for CloudFront"
-  kind    = "zone"
-  phase   = "http_request_late_transform"
-
-  rules {
-    action = "rewrite"
-    expression = "(http.host eq \"${var.domain_name}\" or http.host eq \"www.${var.domain_name}\")"
-    description = "Rewrite Host header to CloudFront domain"
-
-    action_parameters {
-      headers {
-        name      = "Host"
-        operation = "set"
-        value     = aws_cloudfront_distribution.frontend.domain_name
-      }
-    }
-  }
-}
--- a/terraform/cloudfront-function.js
+++ b/terraform/cloudfront-function.js
@@ -1,18 +0,0 @@
-function handler(event) {
-    var request = event.request;
-    var uri = request.uri;
-
-    // Check whether the URI is missing a file extension
-    if (!uri.includes('.')) {
-        // Check if URI ends with /
-        if (uri.endsWith('/')) {
-            request.uri += 'index.html';
-        } else {
-            // For Next.js static export, try .html first
-            // CloudFront will handle 404s via custom error response
-            request.uri += '.html';
-        }
-    }
-
-    return request;
-}
--- a/terraform/main.tf
+++ b/terraform/main.tf
@@ -20,98 +20,117 @@ provider "cloudflare" {
  api_token = var.cloudflare_api_token != "" ? var.cloudflare_api_token : "dummy" # Dummy token if not provided
 }

-# ===== DEPRECATED: Amplify Hosting (Migrated to CloudFront + S3) =====
-# Amplify app was deleted due to broken GitHub integration
-# Frontend now hosted on CloudFront + S3 (see cloudfront-frontend.tf)
-# Kept here for reference only
-#
-# resource "aws_amplify_app" "filamenteka" {
-#   name       = "filamenteka"
-#   repository = var.github_repository
-#   platform   = "WEB"
-#
-#   build_spec = <<-EOT
-#     version: 1
-#     frontend:
-#       phases:
-#         preBuild:
-#           commands:
-#             - npm ci
-#             - npm run security:check
-#         build:
-#           commands:
-#             - npm run build
-#             - npm run test
-#       artifacts:
-#         baseDirectory: .next
-#         files:
-#           - '**/*'
-#       cache:
-#         paths:
-#           - node_modules/**/*
-#           - .next/cache/**/*
-#   EOT
-#
-#   environment_variables = {
-#     NEXT_PUBLIC_API_URL = "https://api.filamenteka.rs/api"
-#   }
-#
-#   custom_rule {
-#     source = "/<*>"
-#     status = "404"
-#     target = "/index.html"
-#   }
-#
-#   enable_branch_auto_build = true
-#
-#   tags = {
-#     Name        = "Filamenteka"
-#     Environment = var.environment
-#     "amplify:github_app_migration" = "opted_out"
-#   }
-# }
-#
-# resource "aws_amplify_branch" "main" {
-#   app_id      = aws_amplify_app.filamenteka.id
-#   branch_name = "main"
-#   enable_auto_build = true
-#   environment_variables = {}
-#   stage = "PRODUCTION"
-#   tags = {
-#     Name        = "Filamenteka-main"
-#     Environment = var.environment
-#   }
-# }
-#
-# resource "aws_amplify_branch" "dev" {
-#   app_id      = aws_amplify_app.filamenteka.id
-#   branch_name = "dev"
-#   enable_auto_build = true
-#   stage = "DEVELOPMENT"
-#   tags = {
-#     Name        = "Filamenteka-dev"
-#     Environment = "development"
-#   }
-# }
-#
-# resource "aws_amplify_domain_association" "filamenteka" {
-#   count = var.domain_name != "" ? 1 : 0
-#   app_id               = aws_amplify_app.filamenteka.id
-#   domain_name          = var.domain_name
-#   wait_for_verification = false
-#
-#   sub_domain {
-#     branch_name = aws_amplify_branch.main.branch_name
-#     prefix      = ""
-#   }
-#
-#   sub_domain {
-#     branch_name = aws_amplify_branch.main.branch_name
-#     prefix      = "www"
-#   }
-#
-#   sub_domain {
-#     branch_name = aws_amplify_branch.dev.branch_name
-#     prefix      = "dev"
-#   }
-# }
+resource "aws_amplify_app" "filamenteka" {
+  name       = "filamenteka"
+  repository = var.github_repository
+  platform   = "WEB"
+
+  # GitHub access token for private repos (optional for public repos)
+  # access_token = var.github_token
+
+  # Build settings for Next.js
+  build_spec = <<-EOT
+    version: 1
+    frontend:
+      phases:
+        preBuild:
+          commands:
+            - npm ci
+            - npm run security:check
+        build:
+          commands:
+            - npm run build
+            - npm run test
+      artifacts:
+        baseDirectory: .next
+        files:
+          - '**/*'
+      cache:
+        paths:
+          - node_modules/**/*
+          - .next/cache/**/*
+  EOT
+
+  # Environment variables
+  environment_variables = {
+    NEXT_PUBLIC_API_URL = "https://api.filamenteka.rs/api" # Using Cloudflare proxied subdomain
+  }
+
+  # Custom rules for single-page app
+  custom_rule {
+    source = "/<*>"
+    status = "404"
+    target = "/index.html"
+  }
+
+  # Enable branch auto build
+  enable_branch_auto_build = true
+
+  tags = {
+    Name        = "Filamenteka"
+    Environment = var.environment
+    # Disable GitHub App migration prompt
+    "amplify:github_app_migration" = "opted_out"
+  }
+}
+
+# Main branch
+resource "aws_amplify_branch" "main" {
+  app_id      = aws_amplify_app.filamenteka.id
+  branch_name = "main"
+
+  # Enable auto build
+  enable_auto_build = true
+
+  # Environment variables specific to this branch (optional)
+  environment_variables = {}
+
+  stage = "PRODUCTION"
+
+  tags = {
+    Name        = "Filamenteka-main"
+    Environment = var.environment
+  }
+}
+
+# Development branch (optional)
+resource "aws_amplify_branch" "dev" {
+  app_id      = aws_amplify_app.filamenteka.id
+  branch_name = "dev"
+
+  enable_auto_build = true
+
+  stage = "DEVELOPMENT"
+
+  tags = {
+    Name        = "Filamenteka-dev"
+    Environment = "development"
+  }
+}
+
+# Custom domain (optional)
+resource "aws_amplify_domain_association" "filamenteka" {
+  count = var.domain_name != "" ? 1 : 0
+
+  app_id               = aws_amplify_app.filamenteka.id
+  domain_name          = var.domain_name
+  wait_for_verification = false
+
+  # Map main branch to root domain
+  sub_domain {
+    branch_name = aws_amplify_branch.main.branch_name
+    prefix      = ""
+  }
+
+  # Map main branch to www subdomain
+  sub_domain {
+    branch_name = aws_amplify_branch.main.branch_name
+    prefix      = "www"
+  }
+
+  # Map dev branch to dev subdomain
+  sub_domain {
+    branch_name = aws_amplify_branch.dev.branch_name
+    prefix      = "dev"
+  }
+}
--- a/terraform/outputs.tf
+++ b/terraform/outputs.tf
@@ -1,23 +1,22 @@
-# ===== DEPRECATED: Amplify Outputs (removed after migration to CloudFront) =====
-# output "app_id" {
-#   description = "The ID of the Amplify app"
-#   value       = aws_amplify_app.filamenteka.id
-# }
-#
-# output "app_url" {
-#   description = "The default URL of the Amplify app"
-#   value       = "https://main.${aws_amplify_app.filamenteka.default_domain}"
-# }
-#
-# output "dev_url" {
-#   description = "The development branch URL"
-#   value       = "https://dev.${aws_amplify_app.filamenteka.default_domain}"
-# }
-#
-# output "custom_domain_url" {
-#   description = "The custom domain URL (if configured)"
-#   value       = var.domain_name != "" ? "https://${var.domain_name}" : "Not configured"
-# }
+output "app_id" {
+  description = "The ID of the Amplify app"
+  value       = aws_amplify_app.filamenteka.id
+}
+
+output "app_url" {
+  description = "The default URL of the Amplify app"
+  value       = "https://main.${aws_amplify_app.filamenteka.default_domain}"
+}
+
+output "dev_url" {
+  description = "The development branch URL"
+  value       = "https://dev.${aws_amplify_app.filamenteka.default_domain}"
+}
+
+output "custom_domain_url" {
+  description = "The custom domain URL (if configured)"
+  value       = var.domain_name != "" ? "https://${var.domain_name}" : "Not configured"
+}

 output "rds_endpoint" {
  value       = aws_db_instance.filamenteka.endpoint
@@ -60,24 +59,3 @@ output "aws_region" {
  description = "AWS Region"
 }

-# CloudFront + S3 Frontend Outputs
-output "s3_bucket_name" {
-  value       = aws_s3_bucket.frontend.id
-  description = "S3 bucket name for frontend"
-}
-
-output "cloudfront_distribution_id" {
-  value       = aws_cloudfront_distribution.frontend.id
-  description = "CloudFront distribution ID"
-}
-
-output "cloudfront_domain_name" {
-  value       = aws_cloudfront_distribution.frontend.domain_name
-  description = "CloudFront distribution domain name"
-}
-
-output "frontend_url" {
-  value       = var.domain_name != "" ? "https://${var.domain_name}" : "https://${aws_cloudfront_distribution.frontend.domain_name}"
-  description = "Frontend URL"
-}
-