Add Phone field (7 digits) to both registration forms

Maps to API 'Phone' field, validated to exactly 7 digits

app/register/owner/page.js

@@ -29,6 +29,7 @@ export default function OwnerRegisterPage() {
     email: '',
     phone: '',
     whatsapp: '',
+    phone2: '',
     nationalNumber: '',
     password: '',
     confirmPassword: '',
@@ -130,6 +131,7 @@ export default function OwnerRegisterPage() {
       email: formData.email,
       phoneNumber: formData.phone || '',
       whatsAppNumber: formData.whatsapp,
+      phone: formData.phone2,
       nationalNumber: formData.nationalNumber,
       password: formData.password,
       ownerType: formData.ownerType,
@@ -360,6 +362,20 @@ export default function OwnerRegisterPage() {
                     {errors.whatsapp && <p className="text-red-500 text-sm mt-1">{errors.whatsapp}</p>}
                   </motion.div>
 
+                  <motion.div variants={fadeInUp}>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">رقم الهاتف (7 أرقام) <span className="text-red-500">*</span></label>
+                    <div className="relative group">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <Phone className={`w-5 h-5 ${errors.phone2 ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'}`} />
+                      </div>
+                      <input type="tel" value={formData.phone2}
+                        onChange={(e) => { setFormData({...formData, phone2: e.target.value}); setErrors({...errors, phone2: null}); }}
+                        className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.phone2 ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أدخل رقم الهاتف" maxLength={7} />
+                    </div>
+                    {errors.phone2 && <p className="text-red-500 text-sm mt-1">{errors.phone2}</p>}
+                  </motion.div>
+
                   <motion.div variants={fadeInUp}>
                     <label className="block text-sm font-medium text-gray-300 mb-2">الرقم الوطني <span className="text-red-500">*</span></label>
                     <div className="relative group">

app/register/tenant/page.js

@@ -29,6 +29,7 @@ export default function TenantRegisterPage() {
     email: '',
     phone: '',
     whatsapp: '',
+    phone2: '',
     nationalNumber: '',
     password: '',
     confirmPassword: '',
@@ -83,6 +84,7 @@ export default function TenantRegisterPage() {
     else if (formData.password.length < 6) newErrors.password = 'كلمة المرور يجب أن تكون 6 أحرف على الأقل';
 
     if (!formData.whatsapp) newErrors.whatsapp = 'رقم الواتساب مطلوب';
+    if (!formData.phone2 || formData.phone2.length !== 7) newErrors.phone2 = 'رقم الهاتف يجب أن يكون 7 أرقام';
     if (!formData.nationalNumber) newErrors.nationalNumber = 'الرقم الوطني مطلوب';
     if (formData.password !== formData.confirmPassword) newErrors.confirmPassword = 'كلمات المرور غير متطابقة';
 
@@ -130,6 +132,7 @@ export default function TenantRegisterPage() {
       email: formData.email,
       phoneNumber: formData.phone,
       whatsAppNumber: formData.whatsapp,
+      phone: formData.phone2,
       nationalNumber: formData.nationalNumber,
       password: formData.password,
       customerType: formData.customerType,
@@ -358,6 +361,20 @@ export default function TenantRegisterPage() {
                     {errors.whatsapp && <p className="text-red-500 text-sm mt-1">{errors.whatsapp}</p>}
                   </motion.div>
 
+                  <motion.div variants={fadeInUp}>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">رقم الهاتف (7 أرقام) <span className="text-red-500">*</span></label>
+                    <div className="relative group">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <Phone className={`w-5 h-5 ${errors.phone2 ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type="tel" value={formData.phone2}
+                        onChange={(e) => { setFormData({...formData, phone2: e.target.value}); setErrors({...errors, phone2: null}); }}
+                        className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.phone2 ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أدخل رقم الهاتف" maxLength={7} />
+                    </div>
+                    {errors.phone2 && <p className="text-red-500 text-sm mt-1">{errors.phone2}</p>}
+                  </motion.div>
+
                   <motion.div variants={fadeInUp}>
                     <label className="block text-sm font-medium text-gray-300 mb-2">الرقم الوطني <span className="text-red-500">*</span></label>
                     <div className="relative group">