From 6d534352b2e5d306a49f3cbf5ce627b7a16437f8 Mon Sep 17 00:00:00 2001
From: DaX <daxdax89@msn.com>
Date: Fri, 29 Aug 2025 12:41:34 +0200
Subject: [PATCH] Add phone field to color request form and database

---
 api/server.js                                 |  9 ++++----
 app/upadaj/requests/page.tsx                  |  8 +++++++
 .../017_add_phone_to_color_requests.sql       |  8 +++++++
 src/components/ColorRequestModal.tsx          | 21 +++++++++++++++++--
 4 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 database/migrations/017_add_phone_to_color_requests.sql

diff --git a/api/server.js b/api/server.js
index 22d6c77..87be374 100644
--- a/api/server.js
+++ b/api/server.js
@@ -258,7 +258,8 @@ app.post('/api/color-requests', async (req, res) => {
       color_name, 
       material_type, 
       finish_type, 
-      user_email, 
+      user_email,
+      user_phone, 
       user_name, 
       description,
       reference_url 
@@ -292,10 +293,10 @@ app.post('/api/color-requests', async (req, res) => {
       // Create new request
       const result = await pool.query(
         `INSERT INTO color_requests 
-         (color_name, material_type, finish_type, user_email, user_name, description, reference_url)
-         VALUES ($1, $2, $3, $4, $5, $6, $7)
+         (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_name, description, reference_url]
+        [color_name, material_type, finish_type, user_email, user_phone, user_name, description, reference_url]
       );
       res.json({ 
         message: 'Color request submitted successfully',
diff --git a/app/upadaj/requests/page.tsx b/app/upadaj/requests/page.tsx
index a5528f4..5be9f53 100644
--- a/app/upadaj/requests/page.tsx
+++ b/app/upadaj/requests/page.tsx
@@ -11,6 +11,7 @@ interface ColorRequest {
   material_type: string;
   finish_type: string;
   user_email: string;
+  user_phone: string;
   user_name: string;
   description: string;
   reference_url: string;
@@ -215,6 +216,13 @@ export default function ColorRequestsAdmin() {
                         ) : (
                           <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">
diff --git a/database/migrations/017_add_phone_to_color_requests.sql b/database/migrations/017_add_phone_to_color_requests.sql
new file mode 100644
index 0000000..73e630e
--- /dev/null
+++ b/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)';
\ No newline at end of file
diff --git a/src/components/ColorRequestModal.tsx b/src/components/ColorRequestModal.tsx
index 961fb58..1a30c17 100644
--- a/src/components/ColorRequestModal.tsx
+++ b/src/components/ColorRequestModal.tsx
@@ -13,7 +13,8 @@ export default function ColorRequestModal({ isOpen, onClose }: ColorRequestModal
     color_name: '',
     material_type: 'PLA',
     finish_type: 'Basic',
-    user_email: ''
+    user_email: '',
+    user_phone: ''
   });
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
@@ -25,7 +26,8 @@ export default function ColorRequestModal({ isOpen, onClose }: ColorRequestModal
         color_name: '',
         material_type: 'PLA',
         finish_type: 'Basic',
-        user_email: ''
+        user_email: '',
+        user_phone: ''
       });
       setMessage(null);
     }
@@ -184,6 +186,21 @@ export default function ColorRequestModal({ isOpen, onClose }: ColorRequestModal
                 />
               </div>
 
+              <div>
+                <label htmlFor="user_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Telefon (opciono)
+                </label>
+                <input
+                  type="tel"
+                  id="user_phone"
+                  name="user_phone"
+                  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"