Add color request feature with modal and Safari styling fixes

- Implement color request modal popup instead of separate page
- Add Serbian translations throughout
- Fix Safari form styling issues with custom CSS
- Add 'Other' option to material and finish dropdowns
- Create admin panel for managing color requests
- Add database migration for color_requests table
- Implement API endpoints for color request management

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,213 @@
+'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: ''
+  });
+  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: ''
+      });
+      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 (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-purple-500 appearance-none"
+                  placeholder="Za obaveštenja o statusu"
+                />
+              </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

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