feat: enhance contact phone handling to support multiple numbers and improve form submission

src/components/ContactForm.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState } from "react";
 import { Card, CardHeader, CardContent } from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/Input";
 export default function ContactForm({ initialData = null, onSave, onCancel }) {
 	const [form, setForm] = useState({
 		name: "",
-		phone: "",
+		phones: [""],
 		email: "",
 		company: "",
 		position: "",
@@ -20,6 +20,28 @@ export default function ContactForm({ initialData = null, onSave, onCancel }) {
 	const [loading, setLoading] = useState(false);
 	const [error, setError] = useState(null);
 
+	// Handle initial data with phones
+	React.useEffect(() => {
+		if (initialData) {
+			let phones = [""];
+			if (initialData.phone) {
+				try {
+					// Try to parse as JSON array first
+					const parsed = JSON.parse(initialData.phone);
+					phones = Array.isArray(parsed) ? parsed : [initialData.phone];
+				} catch {
+					// Fall back to comma-separated string
+					phones = initialData.phone.split(',').map(p => p.trim()).filter(p => p);
+				}
+			}
+			setForm(prev => ({
+				...prev,
+				...initialData,
+				phones: phones.length > 0 ? phones : [""]
+			}));
+		}
+	}, [initialData]);
+
 	const isEdit = !!initialData;
 
 	function handleChange(e) {
@@ -30,12 +52,43 @@ export default function ContactForm({ initialData = null, onSave, onCancel }) {
 		}));
 	}
 
+	function handlePhoneChange(index, value) {
+		setForm(prev => ({
+			...prev,
+			phones: prev.phones.map((phone, i) => i === index ? value : phone)
+		}));
+	}
+
+	function addPhone() {
+		setForm(prev => ({
+			...prev,
+			phones: [...prev.phones, ""]
+		}));
+	}
+
+	function removePhone(index) {
+		if (form.phones.length > 1) {
+			setForm(prev => ({
+				...prev,
+				phones: prev.phones.filter((_, i) => i !== index)
+			}));
+		}
+	}
+
 	async function handleSubmit(e) {
 		e.preventDefault();
 		setLoading(true);
 		setError(null);
 
 		try {
+			// Filter out empty phones and prepare data
+			const filteredPhones = form.phones.filter(phone => phone.trim());
+			const submitData = {
+				...form,
+				phone: filteredPhones.length > 1 ? JSON.stringify(filteredPhones) : (filteredPhones[0] || null),
+				phones: undefined // Remove phones array from submission
+			};
+
 			const url = isEdit
 				? `/api/contacts/${initialData.contact_id}`
 				: "/api/contacts";
@@ -44,7 +97,7 @@ export default function ContactForm({ initialData = null, onSave, onCancel }) {
 			const response = await fetch(url, {
 				method,
 				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify(form),
+				body: JSON.stringify(submitData),
 			});
 
 			if (!response.ok) {
@@ -96,13 +149,44 @@ export default function ContactForm({ initialData = null, onSave, onCancel }) {
 							<label className="block text-sm font-medium text-gray-700 mb-2">
 								Telefon
 							</label>
-							<Input
-								type="tel"
-								name="phone"
-								value={form.phone}
-								onChange={handleChange}
-								placeholder="+48 123 456 789"
-							/>
+							<div className="space-y-2">
+								{form.phones.map((phone, index) => (
+									<div key={index} className="flex gap-2">
+										<Input
+											type="tel"
+											value={phone}
+											onChange={(e) => handlePhoneChange(index, e.target.value)}
+											placeholder={index === 0 ? "+48 123 456 789" : "Dodatkowy numer"}
+											className="flex-1"
+										/>
+										{form.phones.length > 1 && (
+											<Button
+												type="button"
+												variant="danger"
+												size="sm"
+												onClick={() => removePhone(index)}
+												className="px-2"
+											>
+												<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+													<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+												</svg>
+											</Button>
+										)}
+									</div>
+								))}
+								<Button
+									type="button"
+									variant="secondary"
+									size="sm"
+									onClick={addPhone}
+									className="w-full"
+								>
+									<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+									</svg>
+									Dodaj kolejny numer
+								</Button>
+							</div>
 						</div>
 
 						<div>