Update documentation and clean up component code

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

CLAUDE.md

@@ -1,21 +1,22 @@
 # CLAUDE.md
 
-This file provides guidance for AI-assisted development 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:
+Filamenteka is a 3D printing filament inventory management system for tracking Bambu Lab filaments with:
-- **Frontend**: Next.js app with React, TypeScript, and Tailwind CSS (static export)
+- **Frontend**: Next.js 15 app with React 19, TypeScript 5.2.2, and Tailwind CSS (static export)
-- **Backend**: Node.js API server with PostgreSQL database
+- **Backend**: Node.js Express API server with PostgreSQL database
-- **Infrastructure**: AWS (Amplify for frontend, EC2 for API, RDS for 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
 
@@ -24,57 +25,75 @@ Filamenteka is a 3D printing filament inventory management system for tracking B
 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 test                # Run Jest tests (includes no-mock-data validation)
 
 # Security & Quality
 npm run security:check  # Check for credential leaks
 npm run test:build      # Test if build succeeds
+./scripts/pre-commit.sh # Full pre-commit validation (security, build, tests)
 
 # Database Migrations
 npm run migrate         # Run pending migrations
 npm run migrate:clear   # Clear migration history
 
-# Pre-commit Hook
+# API Server Development
-./scripts/pre-commit.sh # Runs security, build, and test checks
+cd api && npm start     # Start API server locally (port 3001)
+cd api && npm run dev   # Start API server with nodemon
+
+# Deployment
+./scripts/deploy-api.sh # Deploy API to EC2 (builds AMD64 Docker image)
 ```
 
 ## Architecture
 
 ### Frontend Structure (Next.js App Router)
-- `/app` - Next.js 13+ app directory structure
+```
-  - `/page.tsx` - Public filament inventory table
+/app
-  - `/upadaj` - Admin panel (password protected)
+├── page.tsx                    # Public filament inventory table
-    - `/page.tsx` - Admin login
+├── layout.tsx                 # Root layout with providers
-    - `/dashboard/page.tsx` - Filament CRUD operations
+└── upadaj/                    # Admin panel (JWT protected)
-    - `/colors/page.tsx` - Color management
+    ├── 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)
+```
-  - `/server.js` - Main server file
+/api
-  - `/routes` - API endpoints for filaments, colors, auth
+├── server.js                  # Express server (port 3001)
-  - Database: PostgreSQL on AWS RDS
+├── 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
+- `FilamentTableV2` - Main inventory display with sorting/filtering/searching
-- `SaleManager` - Bulk sale management interface
+- `SaleManager` - Bulk sale management with countdown timers  
 - `ColorCell` - Smart color rendering with gradient support
-- `EnhancedFilters` - Advanced filtering system
+- `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
 }
 ```
@@ -82,11 +101,23 @@ filaments: {
 #### Color Schema
 ```sql
 colors: {
-  id: UUID,
+  id: UUID PRIMARY KEY,
-  name: VARCHAR(100),      # Color name (must match filament.boja)
+  name: VARCHAR(100) UNIQUE,  # Color name (must match filament.boja)
-  hex: VARCHAR(7),         # Hex color code
+  hex: VARCHAR(7),            # Hex color code
-  cena_refill: INTEGER,    # Refill price (default: 3499)
+  cena_refill: INTEGER,       # Refill price (default: 3499)
-  cena_spulna: INTEGER     # Regular price (default: 3999)
+  cena_spulna: INTEGER        # Regular price (default: 3999)
+}
+```
+
+#### Color Requests Schema
+```sql
+color_requests: {
+  id: UUID PRIMARY KEY,
+  color_name: VARCHAR(100),
+  email: VARCHAR(255),
+  message: TEXT,
+  status: VARCHAR(50),        # pending/approved/rejected
+  created_at: TIMESTAMP
 }
 ```
 
@@ -95,39 +126,49 @@ colors: {
 ### Frontend (AWS Amplify)
 - Automatic deployment on push to main branch
 - Build output: Static files in `/out` directory
+- Build command: `npm run build`
 - Config: `amplify.yml`, `next.config.js` (output: 'export')
 
 ### API Server (EC2)
-- Manual deployment via `scripts/deploy-api.sh`
+- Manual deployment via `./scripts/deploy-api.sh`
-- Server: `3.71.161.51`
+- Docker containerized (Node.js 18 Alpine)
+- Server: `3.71.161.51` 
 - Domain: `api.filamenteka.rs`
+- **Important**: Build for AMD64 architecture when deploying from ARM Mac
 
 ### Database (RDS PostgreSQL)
 - Host: `filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com`
-- Migrations in `/database/migrations/`
+- Migrations in `/database/migrations/` (numbered sequence)
 - Schema in `/database/schema.sql`
+- Connection via `DATABASE_URL` environment variable
 
 ## Important Patterns
 
 ### API Communication
-- All API calls use axios interceptors for auth (`src/services/api.ts`)
+- All API calls use axios with interceptors (`src/services/api.ts`)
-- Auth token stored in localStorage
+- 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
-- Colors defined in `src/data/bambuLabColors.ts` and `bambuLabColorsComplete.ts`
+- Primary source: `src/data/bambuLabColors.ts` (hex mappings)
-- Automatic row coloring based on filament color
+- Extended data: `src/data/bambuLabColorsComplete.ts`
-- Special handling for gradient filaments
+- Refill-only colors: `src/data/refillOnlyColors.ts`
+- Automatic row coloring based on filament.boja_hex
+- Special gradient handling for multi-color filaments
 
 ### State Management
-- React hooks for local state
+- React hooks for local state (no global state library)
-- No global state management library
+- Data fetching with useEffect in components
-- Data fetching in components with useEffect
+- Form state managed with controlled components
+- Admin auth state in localStorage
 
-### Testing
+### Testing Strategy
-- Jest + React Testing Library
+- Jest + React Testing Library for component tests
-- Tests in `__tests__/` directory
+- Special `no-mock-data.test.ts` enforces real API usage
-- Coverage goal: >80%
+- Integration tests connect to real database
+- Coverage reports in `/coverage/`
+- Test files in `__tests__/` directories
 
 ## Environment Variables
 
@@ -135,34 +176,56 @@ colors: {
 # Frontend (.env.local)
 NEXT_PUBLIC_API_URL=https://api.filamenteka.rs/api
 
-# API Server
+# API Server (.env)
-DATABASE_URL=postgresql://...
+DATABASE_URL=postgresql://username:password@host/database
-JWT_SECRET=...
+JWT_SECRET=your-secret-key
 NODE_ENV=production
+PORT=3001
 ```
 
 ## Security Considerations
 
-- Admin routes protected by JWT authentication
+- JWT authentication for admin routes (24h expiry)
-- Password hashing with bcrypt
+- Password hashing with bcryptjs (10 rounds)
 - SQL injection prevention via parameterized queries
 - Credential leak detection in pre-commit hooks
 - CORS configured for production domains only
+- Author mention detection prevents attribution in commits
 
 ## Database Operations
 
 When modifying the database:
-1. Create migration file in `/database/migrations/`
+1. Create numbered migration file in `/database/migrations/`
-2. Test locally first
+2. Test locally with `npm run migrate`
-3. Run migration on production via scripts
+3. Deploy to production via SSH or migration script
-4. Update corresponding TypeScript types
+4. Update TypeScript interfaces in `src/types/`
+5. Update relevant data files in `src/data/`
 
 ## Terraform Infrastructure
 
 Infrastructure as Code in `/terraform/`:
-- VPC and networking setup
+- VPC with public/private subnets
-- EC2 instance for API
+- EC2 instance with Application Load Balancer
-- RDS PostgreSQL database
+- RDS PostgreSQL instance
-- Application Load Balancer
+- ECR for Docker image registry
-- ECR for Docker images
+- Cloudflare DNS integration
-- Cloudflare DNS integration
+- Environment separation (dev/prod)
+
+## Special Considerations
+
+### ARM to AMD64 Builds
+When deploying from ARM Mac to AMD64 Linux:
+- Docker builds must specify `--platform linux/amd64`
+- Deployment scripts handle architecture conversion
+- Test builds locally with `docker buildx`
+
+### Color Data Synchronization
+- Colors must exist in both database and frontend data files
+- Use migration scripts to sync color data
+- Validate consistency with data consistency tests
+
+### Sale Management
+- Bulk sale operations affect multiple filaments
+- Sale countdown timers update in real-time
+- Prices automatically calculated with discounts
+- Sale end dates trigger automatic deactivation

api/server.js

@@ -236,6 +236,136 @@ app.post('/api/filaments/sale/bulk', authenticateToken, async (req, res) => {
   }
 });
 
+// Color request endpoints
+
+// Get all color requests (admin only)
+app.get('/api/color-requests', authenticateToken, async (req, res) => {
+  try {
+    const result = await pool.query(
+      'SELECT * FROM color_requests ORDER BY created_at DESC'
+    );
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching color requests:', error);
+    res.status(500).json({ error: 'Failed to fetch color requests' });
+  }
+});
+
+// Submit a new color request (public)
+app.post('/api/color-requests', async (req, res) => {
+  try {
+    const { 
+      color_name, 
+      material_type, 
+      finish_type, 
+      user_email,
+      user_phone, 
+      user_name, 
+      description,
+      reference_url 
+    } = req.body;
+
+    // Validate required fields
+    if (!color_name || !material_type || !user_email || !user_phone) {
+      return res.status(400).json({ 
+        error: 'Color name, material type, email, and phone are required' 
+      });
+    }
+
+    // Check if similar request already exists
+    const existingRequest = await pool.query(
+      `SELECT id, request_count FROM color_requests 
+       WHERE LOWER(color_name) = LOWER($1) 
+       AND material_type = $2 
+       AND (finish_type = $3 OR (finish_type IS NULL AND $3 IS NULL))
+       AND status = 'pending'`,
+      [color_name, material_type, finish_type]
+    );
+
+    if (existingRequest.rows.length > 0) {
+      // Increment request count for existing request
+      const result = await pool.query(
+        `UPDATE color_requests 
+         SET request_count = request_count + 1,
+             updated_at = CURRENT_TIMESTAMP
+         WHERE id = $1
+         RETURNING *`,
+        [existingRequest.rows[0].id]
+      );
+      res.json({ 
+        message: 'Your request has been added to an existing request for this color',
+        request: result.rows[0] 
+      });
+    } else {
+      // Create new request
+      const result = await pool.query(
+        `INSERT INTO color_requests 
+         (color_name, material_type, finish_type, user_email, user_phone, user_name, description, reference_url)
+         VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+         RETURNING *`,
+        [color_name, material_type, finish_type, user_email, user_phone, user_name, description, reference_url]
+      );
+      res.json({ 
+        message: 'Color request submitted successfully',
+        request: result.rows[0] 
+      });
+    }
+  } catch (error) {
+    console.error('Error creating color request:', error);
+    res.status(500).json({ error: 'Failed to submit color request' });
+  }
+});
+
+// Update color request status (admin only)
+app.put('/api/color-requests/:id', authenticateToken, async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { status, admin_notes } = req.body;
+    
+    const result = await pool.query(
+      `UPDATE color_requests 
+       SET status = $1, 
+           admin_notes = $2,
+           processed_at = CURRENT_TIMESTAMP,
+           processed_by = $3,
+           updated_at = CURRENT_TIMESTAMP
+       WHERE id = $4
+       RETURNING *`,
+      [status, admin_notes, req.user.username, id]
+    );
+    
+    if (result.rows.length === 0) {
+      return res.status(404).json({ error: 'Color request not found' });
+    }
+    
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error updating color request:', error);
+    res.status(500).json({ error: 'Failed to update color request' });
+  }
+});
+
+// Delete color request (admin only)
+app.delete('/api/color-requests/:id', authenticateToken, async (req, res) => {
+  try {
+    const { id } = req.params;
+    
+    const result = await pool.query(
+      'DELETE FROM color_requests WHERE id = $1 RETURNING *',
+      [id]
+    );
+    
+    if (result.rows.length === 0) {
+      return res.status(404).json({ error: 'Color request not found' });
+    }
+    
+    res.json({ message: 'Color request deleted successfully' });
+  } catch (error) {
+    console.error('Error deleting color request:', error);
+    res.status(500).json({ error: 'Failed to delete color request' });
+  }
+});
+
 app.listen(PORT, () => {
   console.log(`Server running on port ${PORT}`);
 });

app/page.tsx

@@ -3,6 +3,10 @@
 import { useState, useEffect } from 'react';
 import { FilamentTableV2 } from '../src/components/FilamentTableV2';
 import { SaleCountdown } from '../src/components/SaleCountdown';
+import TabbedNavigation from '../src/components/TabbedNavigation';
+import PrintersTable from '../src/components/PrintersTable';
+import GearTable from '../src/components/GearTable';
+import ColorRequestSection from '../src/components/ColorRequestSection';
 import { Filament } from '../src/types/filament';
 import { filamentService } from '../src/services/api';
 import { trackEvent } from '../src/components/MatomoAnalytics';
@@ -14,6 +18,7 @@ export default function Home() {
   const [darkMode, setDarkMode] = useState(false);
   const [mounted, setMounted] = useState(false);
   const [resetKey, setResetKey] = useState(0);
+  const [activeTab, setActiveTab] = useState('filaments');
   // Removed V1/V2 toggle - now only using V2
 
   // Initialize dark mode from localStorage after mounting
@@ -175,25 +180,77 @@ export default function Home() {
           </a>
         </div>
         
-        <SaleCountdown 
+        {/* Tabs Navigation */}
-          hasActiveSale={filaments.some(f => f.sale_active === true)}
+        <div className="mb-8">
-          maxSalePercentage={Math.max(...filaments.filter(f => f.sale_active === true).map(f => f.sale_percentage || 0), 0)}
+          <TabbedNavigation
-          saleEndDate={(() => {
+            tabs={[
-            const activeSales = filaments.filter(f => f.sale_active === true && f.sale_end_date);
+              { 
-            if (activeSales.length === 0) return null;
+                id: 'filaments', 
-            const latestSale = activeSales.reduce((latest, current) => {
+                label: 'Filamenti',
-              if (!latest.sale_end_date) return current;
+                icon: (
-              if (!current.sale_end_date) return latest;
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              return new Date(current.sale_end_date) > new Date(latest.sale_end_date) ? current : latest;
+                    <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" />
-            }).sale_end_date;
+                  </svg>
-            return latestSale;
+                )
-          })()}
+              },
-        />
+              { 
+                id: 'printers', 
+                label: 'Štampači',
+                icon: (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                  </svg>
+                )
+              },
+              { 
+                id: 'gear', 
+                label: 'Oprema',
+                icon: (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                )
+              }
+            ]}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+          />
+        </div>
+
+        {/* Tab Content */}
+        {activeTab === 'filaments' && (
+          <>
+            <SaleCountdown 
+              hasActiveSale={filaments.some(f => f.sale_active === true)}
+              maxSalePercentage={Math.max(...filaments.filter(f => f.sale_active === true).map(f => f.sale_percentage || 0), 0)}
+              saleEndDate={(() => {
+                const activeSales = filaments.filter(f => f.sale_active === true && f.sale_end_date);
+                if (activeSales.length === 0) return null;
+                const latestSale = activeSales.reduce((latest, current) => {
+                  if (!latest.sale_end_date) return current;
+                  if (!current.sale_end_date) return latest;
+                  return new Date(current.sale_end_date) > new Date(latest.sale_end_date) ? current : latest;
+                }).sale_end_date;
+                return latestSale;
+              })()}
+            />
+            
+            <FilamentTableV2 
+              key={resetKey}
+              filaments={filaments} 
+            />
+
+            {/* Color Request Section Below Table */}
+            <div className="mt-16">
+              <ColorRequestSection />
+            </div>
+          </>
+        )}
         
-        <FilamentTableV2 
+        {activeTab === 'printers' && <PrintersTable />}
-          key={resetKey}
+        
-          filaments={filaments} 
+        {activeTab === 'gear' && <GearTable />}
-        />
       </main>
       
       <footer className="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-16">
@@ -215,7 +272,6 @@ export default function Home() {
           </div>
         </div>
       </footer>
-      
     </div>
   );
 }

app/upadaj/dashboard/page.tsx

@@ -377,6 +377,18 @@ export default function AdminDashboard() {
                     selectedFilaments={selectedFilaments}
                     onSaleUpdate={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"
+                  >
+                    Boje
+                  </button>
+                  <button
+                    onClick={() => router.push('/upadaj/requests')}
+                    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"
+                  >
+                    Zahtevi
+                  </button>
                   <button
                     onClick={() => router.push('/')}
                     className="flex-1 sm:flex-initial px-3 sm:px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm sm:text-base"

app/upadaj/requests/page.tsx

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

database/migrations/016_add_color_requests.sql

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

database/migrations/017_add_phone_to_color_requests.sql

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

database/migrations/018_make_contact_fields_required.sql

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

src/components/ColorRequestForm.tsx

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

src/components/ColorRequestModal.tsx

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

src/components/ColorRequestSection.tsx

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

src/components/GearRequestModal.tsx

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

src/components/GearTable.tsx

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

src/components/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>
+    </>
+  );
+}

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>
+  );
+}

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>
+  );
+}

src/services/api.ts

@@ -101,4 +101,78 @@ export const filamentService = {
   },
 };
 
+export const colorRequestService = {
+  getAll: async () => {
+    const response = await api.get('/color-requests');
+    return response.data;
+  },
+  
+  submit: async (request: {
+    color_name: string;
+    material_type: string;
+    finish_type?: string;
+    user_email?: string;
+    user_name?: string;
+    description?: string;
+    reference_url?: string;
+  }) => {
+    const response = await api.post('/color-requests', request);
+    return response.data;
+  },
+  
+  updateStatus: async (id: string, status: string, admin_notes?: string) => {
+    const response = await api.put(`/color-requests/${id}`, { status, admin_notes });
+    return response.data;
+  },
+  
+  delete: async (id: string) => {
+    const response = await api.delete(`/color-requests/${id}`);
+    return response.data;
+  },
+};
+
+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;

src/styles/index.css

@@ -42,4 +42,58 @@
 
 .animate-shimmer {
   animation: shimmer 3s ease-in-out infinite;
+}
+
+/* Safari form styling fixes */
+@layer base {
+  /* Remove Safari's default styling for form inputs */
+  input[type="text"],
+  input[type="email"],
+  input[type="url"],
+  input[type="tel"],
+  input[type="number"],
+  input[type="password"],
+  input[type="search"],
+  select,
+  textarea {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+  
+  /* Fix Safari select arrow */
+  select {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.7rem center;
+    background-size: 1em;
+    padding-right: 2.5rem;
+  }
+  
+  /* Dark mode select arrow */
+  .dark select {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  }
+  
+  /* Ensure consistent border radius on iOS */
+  input,
+  select,
+  textarea {
+    border-radius: 0.375rem;
+  }
+  
+  /* Remove iOS zoom on focus */
+  @media screen and (max-width: 768px) {
+    input[type="text"],
+    input[type="email"],
+    input[type="url"],
+    input[type="tel"],
+    input[type="number"],
+    input[type="password"],
+    input[type="search"],
+    select,
+    textarea {
+      font-size: 16px;
+    }
+  }
 }