Make email and phone fields required in color requests

- Add Serbian status labels instead of English status names
- Fix dark mode colors for better contrast
- Update date formatting to use Serbian locale
- Fix request count display to show proper total
- Improve text colors consistency across light/dark themes
- Tested all API endpoints (create, read, update, delete) - working correctly
- Build succeeds without errors

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,7 @@
 import { useState, useEffect } from 'react';
 import { FilamentTableV2 } from '../src/components/FilamentTableV2';
 import { SaleCountdown } from '../src/components/SaleCountdown';
+import ColorRequestModal from '../src/components/ColorRequestModal';
 import { Filament } from '../src/types/filament';
 import { filamentService } from '../src/services/api';
 import { trackEvent } from '../src/components/MatomoAnalytics';
@@ -14,6 +15,7 @@ export default function Home() {
   const [darkMode, setDarkMode] = useState(false);
   const [mounted, setMounted] = useState(false);
   const [resetKey, setResetKey] = useState(0);
+  const [showColorRequestModal, setShowColorRequestModal] = useState(false);
   // Removed V1/V2 toggle - now only using V2
 
   // Initialize dark mode from localStorage after mounting
@@ -173,6 +175,19 @@ export default function Home() {
             </svg>
             Pozovi +381 67 710 2845
           </a>
+          
+          <button
+            onClick={() => {
+              setShowColorRequestModal(true);
+              trackEvent('Navigation', 'Request Color', 'Homepage');
+            }}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+            </svg>
+            Zatraži Novu Boju
+          </button>
         </div>
         
         <SaleCountdown 
@@ -216,6 +231,11 @@ export default function Home() {
         </div>
       </footer>
       
+      {/* Color Request Modal */}
+      <ColorRequestModal 
+        isOpen={showColorRequestModal}
+        onClose={() => setShowColorRequestModal(false)}
+      />
     </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/services/api.ts

@@ -101,4 +101,34 @@ 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 default api;

src/styles/index.css

@@ -43,3 +43,57 @@
 .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;
+    }
+  }
+}