Add enums, AuthService, and integrate backend registration endpoints

- Add separate enum files: BuildingType, PropertyStatus, BookingStatus, CommissionType, IdentityType, UserRole, City, LoginMethod, OwnerType, CustomerType
- Add AuthService (addToken/getToken/deleteToken)
- Update api.js: use AuthService, add Owner/Add and Customer/Add endpoints
- Update login page to use AuthService for token storage
- Rewrite owner register: 3-step flow with OwnerType dropdown, backend integration, OTP verification
- Rewrite tenant register: 2-step flow with CustomerType dropdown, backend integration, OTP verification
- Update homepage and property detail to use enums instead of hardcoded maps
- Update AddPropertyForm to import from enums directly
- Add console logs and status toasts linked to API response messages

app/components/admin/AddPropertyForm.js

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { useProperties } from '@/app/contexts/PropertyContext';
-import { COMMISSION_TYPE, CITIES } from '@/app/utils/constants';
+import { CommissionType, City, CitiesList } from '@/app/enums';
 import { X, MapPin, Home, DollarSign, Percent } from 'lucide-react';
 
 export default function AddPropertyForm({ onClose, onSuccess }) {
@@ -25,7 +25,7 @@ export default function AddPropertyForm({ onClose, onSuccess }) {
     
     dailyPrice: 0,
     commissionRate: 5,
-    commissionType: COMMISSION_TYPE.FROM_OWNER,
+    commissionType: CommissionType.FROM_OWNER,
     
     securityDeposit: 0,
     
@@ -86,11 +86,11 @@ export default function AddPropertyForm({ onClose, onSuccess }) {
     const commission = (dailyPrice * commissionRate) / 100;
     
     switch(commissionType) {
-      case COMMISSION_TYPE.FROM_TENANT:
+      case CommissionType.FROM_TENANT:
         return dailyPrice + commission;
-      case COMMISSION_TYPE.FROM_OWNER:
+      case CommissionType.FROM_OWNER:
         return dailyPrice;
-      case COMMISSION_TYPE.FROM_BOTH:
+      case CommissionType.FROM_BOTH:
         return dailyPrice + (commission / 2);
       default:
         return dailyPrice;
@@ -232,8 +232,8 @@ export default function AddPropertyForm({ onClose, onSuccess }) {
                     <input
                       type="radio"
                       name="commissionType"
-                      value={COMMISSION_TYPE.FROM_OWNER}
-                      checked={formData.commissionType === COMMISSION_TYPE.FROM_OWNER}
+                      value={CommissionType.FROM_OWNER}
+                      checked={formData.commissionType === CommissionType.FROM_OWNER}
                       onChange={(e) => setFormData({...formData, commissionType: e.target.value})}
                     />
                     <span>من المالك</span>
@@ -242,8 +242,8 @@ export default function AddPropertyForm({ onClose, onSuccess }) {
                     <input
                       type="radio"
                       name="commissionType"
-                      value={COMMISSION_TYPE.FROM_TENANT}
-                      checked={formData.commissionType === COMMISSION_TYPE.FROM_TENANT}
+                      value={CommissionType.FROM_TENANT}
+                      checked={formData.commissionType === CommissionType.FROM_TENANT}
                       onChange={(e) => setFormData({...formData, commissionType: e.target.value})}
                     />
                     <span>من المستأجر</span>
@@ -252,8 +252,8 @@ export default function AddPropertyForm({ onClose, onSuccess }) {
                     <input
                       type="radio"
                       name="commissionType"
-                      value={COMMISSION_TYPE.FROM_BOTH}
-                      checked={formData.commissionType === COMMISSION_TYPE.FROM_BOTH}
+                      value={CommissionType.FROM_BOTH}
+                      checked={formData.commissionType === CommissionType.FROM_BOTH}
                       onChange={(e) => setFormData({...formData, commissionType: e.target.value})}
                     />
                     <span>من الاثنين</span>

app/enums/BookingStatus.js

@@ -0,0 +1,38 @@
+/**
+ * BookingStatus Enum
+ * Backend values are strings
+ * Used in: Reservation workflow
+ */
+const BookingStatus = Object.freeze({
+  PENDING: 'pending',
+  OWNER_APPROVED: 'owner_approved',
+  ADMIN_APPROVED: 'admin_approved',
+  ACTIVE: 'active',
+  COMPLETED: 'completed',
+  REJECTED: 'rejected',
+  CANCELLED: 'cancelled',
+});
+
+// Map status → Arabic label
+const BookingStatusLabels = Object.freeze({
+  [BookingStatus.PENDING]: 'بانتظار الموافقة',
+  [BookingStatus.OWNER_APPROVED]: 'موافقة المالك',
+  [BookingStatus.ADMIN_APPROVED]: 'موافقة الإدارة',
+  [BookingStatus.ACTIVE]: 'إيجار نشط',
+  [BookingStatus.COMPLETED]: 'منتهي',
+  [BookingStatus.REJECTED]: 'مرفوض',
+  [BookingStatus.CANCELLED]: 'ملغي',
+});
+
+// Map status → color class (Tailwind bg)
+const BookingStatusColors = Object.freeze({
+  [BookingStatus.PENDING]: 'yellow',
+  [BookingStatus.OWNER_APPROVED]: 'blue',
+  [BookingStatus.ADMIN_APPROVED]: 'green',
+  [BookingStatus.ACTIVE]: 'purple',
+  [BookingStatus.COMPLETED]: 'gray',
+  [BookingStatus.REJECTED]: 'red',
+  [BookingStatus.CANCELLED]: 'red',
+});
+
+export { BookingStatus, BookingStatusLabels, BookingStatusColors };

app/enums/BuildingType.js

@@ -0,0 +1,33 @@
+/**
+ * BuildingType Enum
+ * Backend values are numeric (0, 1, 2)
+ * Used in: PropertyInformation.buildingType
+ */
+const BuildingType = Object.freeze({
+  APARTMENT: 0,
+  VILLA: 1,
+  HOUSE: 2,
+});
+
+// Map numeric value → Arabic label
+const BuildingTypeLabels = Object.freeze({
+  [BuildingType.APARTMENT]: 'شقة',
+  [BuildingType.VILLA]: 'فيلا',
+  [BuildingType.HOUSE]: 'بيت',
+});
+
+// Map numeric value → English key (for UI filters)
+const BuildingTypeKeys = Object.freeze({
+  [BuildingType.APARTMENT]: 'apartment',
+  [BuildingType.VILLA]: 'villa',
+  [BuildingType.HOUSE]: 'house',
+});
+
+// Reverse map: English key → numeric value
+const BuildingTypeByKey = Object.freeze({
+  apartment: BuildingType.APARTMENT,
+  villa: BuildingType.VILLA,
+  house: BuildingType.HOUSE,
+});
+
+export { BuildingType, BuildingTypeLabels, BuildingTypeKeys, BuildingTypeByKey };

app/enums/City.js

@@ -0,0 +1,38 @@
+/**
+ * City Enum
+ * Syrian cities used in property locations
+ * Used in: Property search filters, location display
+ */
+const City = Object.freeze({
+  DAMASCUS: 'دمشق',
+  ALEPPO: 'حلب',
+  HOMS: 'حمص',
+  LATAKIA: 'اللاذقية',
+  DARAA: 'درعا',
+  TARTOUS: 'طرطوس',
+  SUWEIDA: 'السويداء',
+  DEIR_EZZOR: 'دير الزور',
+  RAQQA: 'الرقة',
+  IDLIB: 'إدلب',
+  HASAKAH: 'الحسكة',
+  QAMISHLI: 'القامشلي',
+  RURAL_DAMASCUS: 'ريف دمشق',
+});
+
+// All cities as a flat array
+const CitiesList = Object.freeze(Object.values(City));
+
+/**
+ * Extract city name from a full address string
+ * @param {string} address
+ * @returns {string}
+ */
+function extractCity(address) {
+  if (!address) return '';
+  for (const city of CitiesList) {
+    if (address.includes(city)) return city;
+  }
+  return '';
+}
+
+export { City, CitiesList, extractCity };

app/enums/CommissionType.js

@@ -0,0 +1,19 @@
+/**
+ * CommissionType Enum
+ * Defines who pays the platform commission
+ * Used in: Property pricing, booking financials
+ */
+const CommissionType = Object.freeze({
+  FROM_OWNER: 'from_owner',
+  FROM_TENANT: 'from_tenant',
+  FROM_BOTH: 'from_both',
+});
+
+// Map type → Arabic label
+const CommissionTypeLabels = Object.freeze({
+  [CommissionType.FROM_OWNER]: 'من المالك',
+  [CommissionType.FROM_TENANT]: 'من المستأجر',
+  [CommissionType.FROM_BOTH]: 'من الاثنين',
+});
+
+export { CommissionType, CommissionTypeLabels };

app/enums/CustomerType.js

@@ -0,0 +1,17 @@
+/**
+ * CustomerType Enum
+ * Backend values for customer sub-types
+ * Used in: Customer registration (Customer/Add)
+ */
+const CustomerType = Object.freeze({
+  PERSONAL: 'Personal',
+  FAMILY: 'Family',
+});
+
+// Map value → Arabic label
+const CustomerTypeLabels = Object.freeze({
+  [CustomerType.PERSONAL]: 'شخصي',
+  [CustomerType.FAMILY]: 'عائلي',
+});
+
+export { CustomerType, CustomerTypeLabels };

app/enums/IdentityType.js

@@ -0,0 +1,23 @@
+/**
+ * IdentityType Enum
+ * Tenant identity document type
+ * Used in: Property booking, allowedIdentities filter
+ */
+const IdentityType = Object.freeze({
+  SYRIAN: 'syrian',
+  PASSPORT: 'passport',
+});
+
+// Map type → Arabic label
+const IdentityTypeLabels = Object.freeze({
+  [IdentityType.SYRIAN]: 'هوية سورية',
+  [IdentityType.PASSPORT]: 'جواز سفر',
+});
+
+// Map type → flag emoji
+const IdentityTypeFlags = Object.freeze({
+  [IdentityType.SYRIAN]: '🇸🇾',
+  [IdentityType.PASSPORT]: '🛂',
+});
+
+export { IdentityType, IdentityTypeLabels, IdentityTypeFlags };

app/enums/LoginMethod.js

@@ -0,0 +1,11 @@
+/**
+ * LoginMethod Enum
+ * Authentication method type
+ * Used in: Login page, OTP verification
+ */
+const LoginMethod = Object.freeze({
+  EMAIL: 'email',
+  PHONE: 'phone',
+});
+
+export { LoginMethod };

app/enums/OwnerType.js

@@ -0,0 +1,17 @@
+/**
+ * OwnerType Enum
+ * Backend values for owner sub-types
+ * Used in: Owner registration (Owner/Add)
+ */
+const OwnerType = Object.freeze({
+  PERSON: 'peerson',
+  REAL_ESTATE_AGENCY: 'RealEstateAgency',
+});
+
+// Map value → Arabic label
+const OwnerTypeLabels = Object.freeze({
+  [OwnerType.PERSON]: 'شخص',
+  [OwnerType.REAL_ESTATE_AGENCY]: 'وكالة عقارية',
+});
+
+export { OwnerType, OwnerTypeLabels };

app/enums/PropertyStatus.js

@@ -0,0 +1,33 @@
+/**
+ * PropertyStatus Enum
+ * Backend values are numeric (0, 1, 2)
+ * Used in: PropertyInformation.status
+ */
+const PropertyStatus = Object.freeze({
+  AVAILABLE: 0,
+  BOOKED: 1,
+  MAINTENANCE: 2,
+});
+
+// Map numeric value → Arabic label
+const PropertyStatusLabels = Object.freeze({
+  [PropertyStatus.AVAILABLE]: 'متاح',
+  [PropertyStatus.BOOKED]: 'محجوز',
+  [PropertyStatus.MAINTENANCE]: 'صيانة',
+});
+
+// Map numeric value → English key (for UI filters)
+const PropertyStatusKeys = Object.freeze({
+  [PropertyStatus.AVAILABLE]: 'available',
+  [PropertyStatus.BOOKED]: 'booked',
+  [PropertyStatus.MAINTENANCE]: 'maintenance',
+});
+
+// Reverse map: English key → numeric value
+const PropertyStatusByKey = Object.freeze({
+  available: PropertyStatus.AVAILABLE,
+  booked: PropertyStatus.BOOKED,
+  maintenance: PropertyStatus.MAINTENANCE,
+});
+
+export { PropertyStatus, PropertyStatusLabels, PropertyStatusKeys, PropertyStatusByKey };

app/enums/UserRole.js

@@ -0,0 +1,26 @@
+/**
+ * UserRole Enum
+ * User account roles in the system
+ * Used in: JWT payload, registration, routing
+ */
+const UserRole = Object.freeze({
+  OWNER: 'owner',
+  TENANT: 'tenant',
+  ADMIN: 'admin',
+});
+
+// Map role → Arabic label
+const UserRoleLabels = Object.freeze({
+  [UserRole.OWNER]: 'مالك عقار',
+  [UserRole.TENANT]: 'مستأجر',
+  [UserRole.ADMIN]: 'مدير النظام',
+});
+
+// Map role → color theme (used in UI)
+const UserRoleColors = Object.freeze({
+  [UserRole.OWNER]: 'amber',
+  [UserRole.TENANT]: 'blue',
+  [UserRole.ADMIN]: 'red',
+});
+
+export { UserRole, UserRoleLabels, UserRoleColors };

app/enums/index.js

@@ -0,0 +1,15 @@
+/**
+ * Enums Index
+ * Central export for all enum modules
+ */
+
+export { BuildingType, BuildingTypeLabels, BuildingTypeKeys, BuildingTypeByKey } from './BuildingType';
+export { PropertyStatus, PropertyStatusLabels, PropertyStatusKeys, PropertyStatusByKey } from './PropertyStatus';
+export { BookingStatus, BookingStatusLabels, BookingStatusColors } from './BookingStatus';
+export { CommissionType, CommissionTypeLabels } from './CommissionType';
+export { IdentityType, IdentityTypeLabels, IdentityTypeFlags } from './IdentityType';
+export { UserRole, UserRoleLabels, UserRoleColors } from './UserRole';
+export { City, CitiesList, extractCity } from './City';
+export { LoginMethod } from './LoginMethod';
+export { OwnerType, OwnerTypeLabels } from './OwnerType';
+export { CustomerType, CustomerTypeLabels } from './CustomerType';

app/login/page.js

@@ -29,6 +29,7 @@ import {
   isEmail,
   isPhoneNumber,
 } from '../utils/api';
+import AuthService from '../services/AuthService';
 
 export default function LoginPage() {
   const router = useRouter();
@@ -87,10 +88,10 @@ export default function LoginPage() {
       console.log('[Login] Response:', result);
 
       if (result.status === 200) {
-        // Login success — store token
+        // Login success — store token via AuthService
         const token = typeof result.data === 'string' ? result.data : result.data?.token || result.data;
-        localStorage.setItem('token', token);
-        console.log('[Login] Token stored successfully');
+        AuthService.addToken(token);
+        console.log('[Login] Token stored via AuthService');
 
         // Decode token to get user info (basic JWT decode)
         try {
@@ -182,11 +183,11 @@ export default function LoginPage() {
       console.log('[OTP] Verify response:', result);
 
       if (result.ok) {
-        // Verified — store token if returned
+        // Verified — store token if returned via AuthService
         const token = typeof result.data === 'string' ? result.data : result.data?.token || result.data;
         if (token && typeof token === 'string' && token.includes('.')) {
-          localStorage.setItem('token', token);
-          console.log('[OTP] Token stored');
+          AuthService.addToken(token);
+          console.log('[OTP] Token stored via AuthService');
         }
 
         localStorage.setItem('user', JSON.stringify({

app/page.js

@@ -29,6 +29,7 @@ import PropertyMap from './components/home/PropertyMap';
 import Link from 'next/link';
 import Image from 'next/image';
 import { getRentProperties, getSaleProperties } from './utils/api';
+import { BuildingTypeKeys, PropertyStatusKeys, extractCity } from './enums';
 
 // Map API property data to the format the UI expects
 // API returns { propertyInformationId, deposit, monthlyRent, dailyRent, rating, propertyInformation: {...}, ... }
@@ -38,13 +39,8 @@ function mapApiProperty(item, index) {
   const dailyPrice = item.dailyRent ?? item.monthlyRent ?? item.price ?? 0;
   const monthlyPrice = item.monthlyRent ?? 0;
 
-  // BuildingType: 0=Apartment, 1=Villa, 2=House
-  const buildingTypeMap = { 0: 'apartment', 1: 'villa', 2: 'house' };
-  const propType = buildingTypeMap[info.buildingType] ?? buildingTypeMap[item.type] ?? 'apartment';
-
-  // Status: 0=Available, 1=Booked, 2=Maintenance
-  const statusMap = { 0: 'available', 1: 'booked', 2: 'maintenance' };
-  const status = statusMap[info.status] ?? statusMap[item.status] ?? 'available';
+  const propType = BuildingTypeKeys[info.buildingType] ?? BuildingTypeKeys[item.type] ?? 'apartment';
+  const status = PropertyStatusKeys[info.status] ?? PropertyStatusKeys[item.status] ?? 'available';
 
   const features = [];
   if (item.isSmokeAllow) features.push('يسمح بالتدخين');
@@ -86,14 +82,7 @@ function mapApiProperty(item, index) {
   };
 }
 
-function extractCity(address) {
-  if (!address) return '';
-  const cities = ['دمشق', 'حلب', 'حمص', 'اللاذقية', 'درعا', 'طرطوس', 'السويداء', 'دير الزور', 'الرقة', 'إدلب', 'الحسكة', 'القامشلي', 'ريف دمشق'];
-  for (const city of cities) {
-    if (address.includes(city)) return city;
-  }
-  return '';
-}
+// extractCity is now imported from @/app/enums
 
 // Fallback dummy data
 const FALLBACK_PROPERTIES = [

app/property/[id]/page.js

@@ -43,6 +43,7 @@ import {
   ArrowLeft
 } from 'lucide-react';
 import { getRentProperty, getSaleProperty, bookReservation, checkAvailability } from '../../utils/api';
+import { BuildingTypeKeys, PropertyStatusKeys, extractCity } from '../../enums';
 
 // Map API response to the UI format
 function mapApiDetail(item) {
@@ -53,11 +54,8 @@ function mapApiDetail(item) {
   const dailyPrice = item.dailyRent ?? item.monthlyRent ?? item.price ?? 0;
   const monthlyPrice = item.monthlyRent ?? 0;
 
-  const buildingTypeMap = { 0: 'apartment', 1: 'villa', 2: 'house' };
-  const propType = buildingTypeMap[info.buildingType] ?? buildingTypeMap[item.type] ?? 'apartment';
-
-  const statusMap = { 0: 'available', 1: 'booked', 2: 'maintenance' };
-  const status = statusMap[info.status] ?? statusMap[item.status] ?? 'available';
+  const propType = BuildingTypeKeys[info.buildingType] ?? BuildingTypeKeys[item.type] ?? 'apartment';
+  const status = PropertyStatusKeys[info.status] ?? PropertyStatusKeys[item.status] ?? 'available';
 
   const features = [];
   if (item.isSmokeAllow) features.push({ name: 'يسمح بالتدخين', available: true, description: '' });
@@ -122,14 +120,7 @@ function mapApiDetail(item) {
   };
 }
 
-function extractCity(address) {
-  if (!address) return '';
-  const cities = ['دمشق', 'حلب', 'حمص', 'اللاذقية', 'درعا', 'طرطوس', 'السويداء', 'دير الزور', 'الرقة', 'إدلب', 'الحسكة', 'القامشلي', 'ريف دمشق'];
-  for (const city of cities) {
-    if (address.includes(city)) return city;
-  }
-  return '';
-}
+// extractCity is now imported from @/app/enums
 
 // Fallback data (same as before)
 const FALLBACK_PROPERTIES = {

app/register/tenant/page.js

@@ -5,80 +5,59 @@ import { motion } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import {
-  User,
-  Mail,
-  Phone,
-  Lock,
-  Eye,
-  EyeOff,
-  CheckCircle,
-  XCircle,
-  ArrowLeft,
-  Home,
-  Loader2
+  User, Mail, Phone, Lock, Eye, EyeOff,
+  CheckCircle, XCircle, ArrowLeft, Home, Loader2,
+  Shield, KeyRound
 } from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
+import { addCustomer, loginWithEmail, sendEmailOTP, verifyEmail } from '../../utils/api';
+import AuthService from '../../services/AuthService';
+import { CustomerType, CustomerTypeLabels } from '../../enums';
 
 export default function TenantRegisterPage() {
   const router = useRouter();
+  const [step, setStep] = useState(1); // 1=form, 2=OTP
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+
   const [formData, setFormData] = useState({
     name: '',
     email: '',
     phone: '',
     password: '',
     confirmPassword: '',
+    customerType: CustomerType.PERSONAL,
     agreeTerms: false
   });
+
+  const [otpCode, setOtpCode] = useState('');
   const [errors, setErrors] = useState({});
 
-  const validateEmail = (email) => {
-    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return re.test(email);
-  };
-
-  const validatePhone = (phone) => {
-    const re = /^(09|05)[0-9]{8}$/;
-    return re.test(phone);
-  };
+  const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  const validatePhone = (phone) => /^(09|05)[0-9]{8}$/.test(phone);
 
   const validateForm = () => {
     const newErrors = {};
+    if (!formData.name) newErrors.name = 'الاسم الكامل مطلوب';
+    else if (formData.name.length < 3) newErrors.name = 'الاسم يجب أن يكون 3 أحرف على الأقل';
 
-    if (!formData.name) {
-      newErrors.name = 'الاسم الكامل مطلوب';
-    } else if (formData.name.length < 3) {
-      newErrors.name = 'الاسم يجب أن يكون 3 أحرف على الأقل';
-    }
+    if (!formData.email) newErrors.email = 'البريد الإلكتروني مطلوب';
+    else if (!validateEmail(formData.email)) newErrors.email = 'البريد الإلكتروني غير صالح';
 
-    if (!formData.email) {
-      newErrors.email = 'البريد الإلكتروني مطلوب';
-    } else if (!validateEmail(formData.email)) {
-      newErrors.email = 'البريد الإلكتروني غير صالح';
-    }
+    if (!formData.phone) newErrors.phone = 'رقم الهاتف مطلوب';
+    else if (!validatePhone(formData.phone)) newErrors.phone = 'رقم الهاتف غير صالح (يجب أن يبدأ 09 أو 05)';
 
-    if (!formData.phone) {
-      newErrors.phone = 'رقم الهاتف مطلوب';
-    } else if (!validatePhone(formData.phone)) {
-      newErrors.phone = 'رقم الهاتف غير صالح (يجب أن يبدأ 09 أو 05)';
-    }
+    if (!formData.password) newErrors.password = 'كلمة المرور مطلوبة';
+    else if (formData.password.length < 6) newErrors.password = 'كلمة المرور يجب أن تكون 6 أحرف على الأقل';
 
-    if (!formData.password) {
-      newErrors.password = 'كلمة المرور مطلوبة';
-    } else if (formData.password.length < 6) {
-      newErrors.password = 'كلمة المرور يجب أن تكون 6 أحرف على الأقل';
-    }
-
-    if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = 'كلمات المرور غير متطابقة';
-    }
+    if (formData.password !== formData.confirmPassword) newErrors.confirmPassword = 'كلمات المرور غير متطابقة';
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
 
+  // ─── Main signup handler ───
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -86,32 +65,130 @@ export default function TenantRegisterPage() {
       toast.error('يرجى تصحيح الأخطاء في النموذج');
       return;
     }
-
     if (!formData.agreeTerms) {
       toast.error('يجب الموافقة على الشروط والأحكام');
       return;
     }
 
     setIsLoading(true);
+    console.log('[CustomerRegister] Submitting customer registration...');
 
-    setTimeout(() => {
+    const payload = {
+      name: formData.name,
+      email: formData.email,
+      phoneNumber: formData.phone,
+      password: formData.password,
+      customerType: formData.customerType,
+    };
+
+    try {
+      const res = await addCustomer(payload);
+      console.log('[CustomerRegister] addCustomer response:', res);
+
+      if (res.status === 200 || res.ok) {
+        // ── Store temp token for OTP flow ──
+        const tempToken = res.data;
+        if (tempToken) {
+          AuthService.addToken(tempToken);
+          console.log('[CustomerRegister] Temp token stored for OTP');
+        }
+
+        const apiMessage = res.message || res.data?.message;
+        toast.success(apiMessage || 'تم إنشاء الحساب! يرجى التحقق من بريدك الإلكتروني', {
+          duration: 4000,
+        });
+
+        // ── Auto-login to trigger OTP ──
+        console.log('[CustomerRegister] Auto-login to send OTP...');
+        const loginRes = await loginWithEmail(formData.email, formData.password);
+        console.log('[CustomerRegister] login response:', loginRes);
+
+        if (loginRes.status === 206) {
+          // OTP sent — move to OTP step
+          const otpToken = loginRes.data;
+          if (otpToken) {
+            AuthService.addToken(otpToken);
+            console.log('[CustomerRegister] OTP token stored');
+          }
+          const loginMsg = loginRes.message || loginRes.data?.message;
+          toast(loginMsg || 'تم إرسال رمز التحقق إلى بريدك الإلكتروني', { icon: '📧' });
+          setStep(2);
+        } else if (loginRes.status === 200) {
+          // Direct login success (no OTP needed)
+          const loginToken = loginRes.data;
+          if (loginToken) {
+            AuthService.addToken(loginToken);
+          }
+          toast.success(loginRes.message || 'تم تسجيل الدخول بنجاح!');
+          router.push('/');
+        }
+      } else {
+        // Registration failed
+        const errMsg = res.message || res.data?.message || 'فشل في إنشاء الحساب';
+        console.error('[CustomerRegister] Registration failed:', errMsg);
+        toast.error(errMsg);
+      }
+    } catch (err) {
+      console.error('[CustomerRegister] Error:', err);
+      toast.error(err.message || 'حدث خطأ أثناء التسجيل');
+    } finally {
       setIsLoading(false);
-      toast.success('تم إنشاء الحساب بنجاح!', {
-        style: { background: '#dcfce7', color: '#166534' },
-        duration: 3000
-      });
+    }
+  };
 
-      localStorage.setItem('user', JSON.stringify({
-        name: formData.name,
-        email: formData.email,
-        role: 'tenant',
-        avatar: formData.name.charAt(0).toUpperCase()
-      }));
+  // ─── OTP verification handler ───
+  const handleVerifyOTP = async () => {
+    if (!otpCode || otpCode.length < 4) {
+      toast.error('يرجى إدخال رمز التحقق');
+      return;
+    }
 
-      setTimeout(() => {
-        router.push('/');
-      }, 1500);
-    }, 2000);
+    setIsLoading(true);
+    console.log('[CustomerRegister] Verifying OTP:', otpCode);
+
+    try {
+      const res = await verifyEmail(otpCode);
+      console.log('[CustomerRegister] VerifyEmail response:', res);
+
+      if (res.status === 200) {
+        // ── Verified! Remove temp token, redirect to login ──
+        AuthService.deleteToken();
+        console.log('[CustomerRegister] Temp token removed after verification');
+
+        toast.success(res.message || 'تم التحقق من البريد الإلكتروني بنجاح!', {
+          duration: 3000,
+        });
+
+        setTimeout(() => {
+          router.push('/login');
+        }, 1500);
+      } else {
+        const errMsg = res.message || res.data?.message || 'رمز التحقق غير صحيح';
+        console.error('[CustomerRegister] Verification failed:', errMsg);
+        toast.error(errMsg);
+      }
+    } catch (err) {
+      console.error('[CustomerRegister] Verify error:', err);
+      toast.error(err.message || 'حدث خطأ أثناء التحقق');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // ─── Resend OTP ───
+  const handleResendOTP = async () => {
+    setIsLoading(true);
+    console.log('[CustomerRegister] Resending email OTP...');
+
+    try {
+      await sendEmailOTP();
+      toast.success('تم إرسال رمز تحقق جديد');
+    } catch (err) {
+      console.error('[CustomerRegister] Resend OTP error:', err);
+      toast.error('فشل في إرسال الرمز');
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const fadeInUp = {
@@ -121,37 +198,25 @@ export default function TenantRegisterPage() {
   };
 
   const staggerContainer = {
-    animate: {
-      transition: {
-        staggerChildren: 0.1
-      }
-    }
+    animate: { transition: { staggerChildren: 0.1 } }
   };
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4 relative overflow-hidden">
       <Toaster position="top-center" reverseOrder={false} />
 
+      {/* Background blobs */}
       <div className="absolute inset-0 overflow-hidden">
         {[...Array(20)].map((_, i) => (
           <motion.div
             key={i}
             className="absolute rounded-full bg-blue-500/10"
             style={{
-              left: `${Math.random() * 100}%`,
-              top: `${Math.random() * 100}%`,
-              width: Math.random() * 200 + 50,
-              height: Math.random() * 200 + 50,
-            }}
-            animate={{
-              x: [0, Math.random() * 100 - 50, 0],
-              y: [0, Math.random() * 100 - 50, 0],
-            }}
-            transition={{
-              duration: Math.random() * 15 + 15,
-              repeat: Infinity,
-              ease: "linear"
+              left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
+              width: Math.random() * 200 + 50, height: Math.random() * 200 + 50,
             }}
+            animate={{ x: [0, Math.random() * 100 - 50, 0], y: [0, Math.random() * 100 - 50, 0] }}
+            transition={{ duration: Math.random() * 15 + 15, repeat: Infinity, ease: "linear" }}
           />
         ))}
       </div>
@@ -162,45 +227,40 @@ export default function TenantRegisterPage() {
         transition={{ duration: 0.5 }}
         className="relative z-10 w-full max-w-md"
       >
-        <motion.div
-          initial={{ opacity: 0, x: -20 }}
-          animate={{ opacity: 1, x: 0 }}
-          className="absolute -top-16 left-0"
-        >
-          <Link
-            href="/auth/choose-role"
-            className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group"
-          >
-            <motion.div whileHover={{ x: -5 }}>
-              <ArrowLeft className="w-4 h-4" />
-            </motion.div>
+        {/* Back link */}
+        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="absolute -top-16 left-0">
+          <Link href="/auth/choose-role" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
+            <motion.div whileHover={{ x: -5 }}><ArrowLeft className="w-4 h-4" /></motion.div>
             <span>العودة</span>
           </Link>
         </motion.div>
 
+        {/* Progress */}
+        <div className="mb-6 mt-4 flex gap-2">
+          {[1, 2].map((s) => (
+            <motion.div key={s} className={`h-2 flex-1 rounded-full ${step >= s ? 'bg-blue-500' : 'bg-gray-700'}`} animate={{ scaleX: step >= s ? 1 : 0.5 }} />
+          ))}
+        </div>
+
         <div className="bg-white/5 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden">
+          {/* Header */}
           <div className="bg-gradient-to-r from-blue-500 to-blue-600 p-8 text-center relative overflow-hidden">
-            <motion.div
-              initial={{ scale: 0 }}
-              animate={{ scale: 1 }}
-              transition={{ delay: 0.2, type: "spring" }}
-              className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full"
-            />
-            
-            <motion.div
-              initial={{ y: 20, opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
-              className="relative z-10"
-            >
+            <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: "spring" }}
+              className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
+            <motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="relative z-10">
               <motion.div
                 animate={{ rotate: [0, 10, -10, 0] }}
                 transition={{ duration: 2, repeat: Infinity }}
                 className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm"
               >
-                <Home className="w-10 h-10 text-white" />
+                {step === 2 ? <KeyRound className="w-10 h-10 text-white" /> : <Home className="w-10 h-10 text-white" />}
               </motion.div>
-              <h1 className="text-3xl font-bold text-white mb-2">إنشاء حساب مستأجر</h1>
-              <p className="text-blue-100">انضم إلينا وابحث عن منزل أحلامك</p>
+              <h1 className="text-3xl font-bold text-white mb-2">
+                {step === 1 ? 'إنشاء حساب مستأجر' : 'التحقق من البريد'}
+              </h1>
+              <p className="text-blue-100">
+                {step === 1 ? 'انضم إلينا وابحث عن منزل أحلامك' : 'أدخل رمز التحقق المرسل إلى بريدك'}
+              </p>
             </motion.div>
           </div>
 
@@ -209,230 +269,187 @@ export default function TenantRegisterPage() {
               variants={staggerContainer}
               initial="initial"
               animate="animate"
-              onSubmit={handleSubmit}
+              onSubmit={step === 1 ? handleSubmit : (e) => { e.preventDefault(); handleVerifyOTP(); }}
               className="space-y-6"
             >
-              <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">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <User className={`w-5 h-5 ${
-                      errors.name ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'
-                    }`} />
-                  </div>
-                  <input
-                    type="text"
-                    value={formData.name}
-                    onChange={(e) => {
-                      setFormData({...formData, name: e.target.value});
-                      setErrors({...errors, name: 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.name ? 'border-red-500' : 'border-gray-700'
-                    }`}
-                    placeholder="أدخل اسمك الكامل"
-                  />
-                </div>
-                {errors.name && (
-                  <p className="text-red-500 text-sm mt-1">{errors.name}</p>
-                )}
-              </motion.div>
+              {/* ─── STEP 1: Form fields ─── */}
+              {step === 1 && (
+                <>
+                  <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">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <User className={`w-5 h-5 ${errors.name ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type="text" value={formData.name}
+                        onChange={(e) => { setFormData({...formData, name: e.target.value}); setErrors({...errors, name: 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.name ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أدخل اسمك الكامل" />
+                    </div>
+                    {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</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">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <Mail className={`w-5 h-5 ${
-                      errors.email ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'
-                    }`} />
-                  </div>
-                  <input
-                    type="email"
-                    value={formData.email}
-                    onChange={(e) => {
-                      setFormData({...formData, email: e.target.value});
-                      setErrors({...errors, email: 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.email ? 'border-red-500' : 'border-gray-700'
-                    }`}
-                    placeholder="أدخل بريدك الإلكتروني"
-                  />
-                </div>
-                {errors.email && (
-                  <p className="text-red-500 text-sm mt-1">{errors.email}</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">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <Mail className={`w-5 h-5 ${errors.email ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type="email" value={formData.email}
+                        onChange={(e) => { setFormData({...formData, email: e.target.value}); setErrors({...errors, email: 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.email ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أدخل بريدك الإلكتروني" />
+                    </div>
+                    {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</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">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <Phone className={`w-5 h-5 ${
-                      errors.phone ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'
-                    }`} />
-                  </div>
-                  <input
-                    type="tel"
-                    value={formData.phone}
-                    onChange={(e) => {
-                      setFormData({...formData, phone: e.target.value});
-                      setErrors({...errors, phone: 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.phone ? 'border-red-500' : 'border-gray-700'
-                    }`}
-                    placeholder="أدخل رقم هاتفك"
-                  />
-                </div>
-                {errors.phone && (
-                  <p className="text-red-500 text-sm mt-1">{errors.phone}</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">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <Phone className={`w-5 h-5 ${errors.phone ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type="tel" value={formData.phone}
+                        onChange={(e) => { setFormData({...formData, phone: e.target.value}); setErrors({...errors, phone: 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.phone ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أدخل رقم هاتفك" />
+                    </div>
+                    {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</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">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <Lock className={`w-5 h-5 ${
-                      errors.password ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'
-                    }`} />
-                  </div>
-                  <input
-                    type={showPassword ? "text" : "password"}
-                    value={formData.password}
-                    onChange={(e) => {
-                      setFormData({...formData, password: e.target.value});
-                      setErrors({...errors, password: null});
-                    }}
-                    className={`w-full pr-12 pl-12 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.password ? 'border-red-500' : 'border-gray-700'
-                    }`}
-                    placeholder="أدخل كلمة المرور"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute inset-y-0 left-0 pl-3 flex items-center"
-                  >
-                    {showPassword ? (
-                      <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300" />
-                    ) : (
-                      <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300" />
-                    )}
-                  </button>
-                </div>
-                {errors.password && (
-                  <p className="text-red-500 text-sm mt-1">{errors.password}</p>
-                )}
-              </motion.div>
+                  {/* Customer Type */}
+                  <motion.div variants={fadeInUp}>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">نوع العميل <span className="text-red-500">*</span></label>
+                    <select
+                      value={formData.customerType}
+                      onChange={(e) => setFormData({...formData, customerType: e.target.value})}
+                      className="w-full py-3 px-4 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white appearance-none cursor-pointer"
+                    >
+                      {Object.entries(CustomerTypeLabels).map(([value, label]) => (
+                        <option key={value} value={value} className="bg-gray-900 text-white">{label}</option>
+                      ))}
+                    </select>
+                    <p className="text-xs text-gray-500 mt-1">المحدد: {CustomerTypeLabels[formData.customerType]}</p>
+                    <p className="text-xs text-gray-600">[Console] customerType = {formData.customerType}</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">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <Lock className={`w-5 h-5 ${
-                      errors.confirmPassword ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'
-                    }`} />
-                  </div>
-                  <input
-                    type={showConfirmPassword ? "text" : "password"}
-                    value={formData.confirmPassword}
-                    onChange={(e) => {
-                      setFormData({...formData, confirmPassword: e.target.value});
-                      setErrors({...errors, confirmPassword: null});
-                    }}
-                    className={`w-full pr-12 pl-12 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.confirmPassword ? 'border-red-500' : 'border-gray-700'
-                    }`}
-                    placeholder="أعد إدخال كلمة المرور"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    className="absolute inset-y-0 left-0 pl-3 flex items-center"
-                  >
-                    {showConfirmPassword ? (
-                      <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300" />
-                    ) : (
-                      <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300" />
-                    )}
-                  </button>
-                  {formData.confirmPassword && (
-                    <div className="absolute inset-y-0 left-12 flex items-center">
-                      {formData.password === formData.confirmPassword ? (
-                        <CheckCircle className="w-5 h-5 text-green-500" />
-                      ) : (
-                        <XCircle className="w-5 h-5 text-red-500" />
+                  <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">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <Lock className={`w-5 h-5 ${errors.password ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type={showPassword ? "text" : "password"} value={formData.password}
+                        onChange={(e) => { setFormData({...formData, password: e.target.value}); setErrors({...errors, password: null}); }}
+                        className={`w-full pr-12 pl-12 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.password ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أدخل كلمة المرور" />
+                      <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
+                        {showPassword ? <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300" /> : <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300" />}
+                      </button>
+                    </div>
+                    {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</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">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <Lock className={`w-5 h-5 ${errors.confirmPassword ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type={showConfirmPassword ? "text" : "password"} value={formData.confirmPassword}
+                        onChange={(e) => { setFormData({...formData, confirmPassword: e.target.value}); setErrors({...errors, confirmPassword: null}); }}
+                        className={`w-full pr-12 pl-12 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.confirmPassword ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أعد إدخال كلمة المرور" />
+                      <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
+                        {showConfirmPassword ? <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300" /> : <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300" />}
+                      </button>
+                      {formData.confirmPassword && (
+                        <div className="absolute inset-y-0 left-12 flex items-center">
+                          {formData.password === formData.confirmPassword ? <CheckCircle className="w-5 h-5 text-green-500" /> : <XCircle className="w-5 h-5 text-red-500" />}
+                        </div>
                       )}
                     </div>
-                  )}
-                </div>
-                {errors.confirmPassword && (
-                  <p className="text-red-500 text-sm mt-1">{errors.confirmPassword}</p>
-                )}
-              </motion.div>
+                    {errors.confirmPassword && <p className="text-red-500 text-sm mt-1">{errors.confirmPassword}</p>}
+                  </motion.div>
 
-              <motion.div variants={fadeInUp} className="flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  id="terms"
-                  checked={formData.agreeTerms}
-                  onChange={(e) => setFormData({...formData, agreeTerms: e.target.checked})}
-                  className="w-4 h-4 rounded border-gray-600 bg-white/5 text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
-                  required
-                />
-                <label htmlFor="terms" className="text-sm text-gray-300">
-                  أوافق على{' '}
-                  <Link href="/terms" className="text-blue-400 hover:text-blue-300">
-                    شروط الاستخدام
-                  </Link>
-                  {' '}و{' '}
-                  <Link href="/privacy" className="text-blue-400 hover:text-blue-300">
-                    سياسة الخصوصية
-                  </Link>
-                </label>
-              </motion.div>
+                  <motion.div variants={fadeInUp} className="flex items-center gap-2">
+                    <input type="checkbox" id="terms" checked={formData.agreeTerms}
+                      onChange={(e) => setFormData({...formData, agreeTerms: e.target.checked})}
+                      className="w-4 h-4 rounded border-gray-600 bg-white/5 text-blue-500 focus:ring-blue-500 focus:ring-offset-0" required />
+                    <label htmlFor="terms" className="text-sm text-gray-300">
+                      أوافق على <Link href="/terms" className="text-blue-400 hover:text-blue-300">شروط الاستخدام</Link> و <Link href="/privacy" className="text-blue-400 hover:text-blue-300">سياسة الخصوصية</Link>
+                    </label>
+                  </motion.div>
+                </>
+              )}
 
-              <motion.button
-                variants={fadeInUp}
-                type="submit"
-                disabled={isLoading || !formData.agreeTerms}
-                className="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-4 rounded-xl font-bold text-lg hover:from-blue-600 hover:to-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-500/25"
-              >
-                {isLoading ? (
-                  <div className="flex items-center justify-center gap-2">
-                    <Loader2 className="w-5 h-5 animate-spin" />
-                    <span>جاري إنشاء الحساب...</span>
+              {/* ─── STEP 2: OTP ─── */}
+              {step === 2 && (
+                <motion.div variants={fadeInUp} className="space-y-6">
+                  <div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 text-center">
+                    <Shield className="w-10 h-10 text-blue-500 mx-auto mb-2" />
+                    <p className="text-gray-300 text-sm">تم إرسال رمز التحقق إلى</p>
+                    <p className="text-blue-400 font-medium">{formData.email}</p>
                   </div>
-                ) : (
-                  'إنشاء حساب'
-                )}
-              </motion.button>
 
-              <motion.p variants={fadeInUp} className="text-center text-gray-400 mt-4">
-                لديك حساب بالفعل؟{' '}
-                <Link 
-                  href="/login" 
-                  className="text-blue-400 hover:text-blue-300 font-medium transition-colors"
-                >
-                  تسجيل الدخول
-                </Link>
-              </motion.p>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">رمز التحقق <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">
+                        <KeyRound className="w-5 h-5 text-gray-400 group-focus-within:text-blue-500" />
+                      </div>
+                      <input type="text" value={otpCode} maxLength={6}
+                        onChange={(e) => setOtpCode(e.target.value)}
+                        className="w-full pr-12 pl-4 py-3 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 text-center tracking-[0.5em] text-xl transition-all"
+                        placeholder="------" />
+                    </div>
+                  </div>
+
+                  <button type="button" onClick={handleResendOTP} disabled={isLoading}
+                    className="w-full text-center text-blue-400 hover:text-blue-300 text-sm transition-colors disabled:opacity-50">
+                    إعادة إرسال الرمز
+                  </button>
+                </motion.div>
+              )}
+
+              {/* ─── Navigation Buttons ─── */}
+              <motion.div variants={fadeInUp} className="flex gap-3 pt-4">
+                {step === 1 && (
+                  <>
+                    <button type="button" onClick={() => router.push('/auth/choose-role')}
+                      className="flex-1 py-3 px-4 bg-white/5 border border-gray-700 rounded-xl text-gray-300 hover:bg-white/10 transition-colors">إلغاء</button>
+                    <button type="submit" disabled={isLoading}
+                      className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-xl font-medium hover:from-blue-600 hover:to-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                      {isLoading ? (
+                        <div className="flex items-center justify-center gap-2">
+                          <Loader2 className="w-5 h-5 animate-spin" /><span>جاري التسجيل...</span>
+                        </div>
+                      ) : 'إنشاء حساب'}
+                    </button>
+                  </>
+                )}
+                {step === 2 && (
+                  <button type="submit" disabled={isLoading || !otpCode}
+                    className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-xl font-medium hover:from-blue-600 hover:to-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                    {isLoading ? (
+                      <div className="flex items-center justify-center gap-2">
+                        <Loader2 className="w-5 h-5 animate-spin" /><span>جاري التحقق...</span>
+                      </div>
+                    ) : 'تحقق من الرمز'}
+                  </button>
+                )}
+              </motion.div>
+
+              {step === 1 && (
+                <motion.p variants={fadeInUp} className="text-center text-gray-400 mt-4">
+                  لديك حساب بالفعل؟{' '}
+                  <Link href="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">تسجيل الدخول</Link>
+                </motion.p>
+              )}
             </motion.form>
           </div>
         </div>
       </motion.div>
     </div>
   );
-}
+}

app/services/AuthService.js

@@ -0,0 +1,51 @@
+/**
+ * AuthService
+ * Manages authentication tokens securely using localStorage.
+ * 
+ * Methods:
+ *   addToken(token)   — store JWT token
+ *   getToken()        — retrieve JWT token
+ *   deleteToken()     — remove JWT token
+ *
+ * Usage:
+ *   import AuthService from '@/app/services/AuthService';
+ *   AuthService.addToken(token);
+ *   const token = AuthService.getToken();
+ *   AuthService.deleteToken();
+ */
+const TOKEN_KEY = 'auth_token';
+
+const AuthService = Object.freeze({
+  /**
+   * Store token in localStorage
+   * @param {string} token — JWT string
+   */
+  addToken(token) {
+    if (!token || typeof token !== 'string') {
+      console.error('[AuthService] addToken: invalid token', token);
+      return;
+    }
+    localStorage.setItem(TOKEN_KEY, token);
+    console.log('[AuthService] Token stored');
+  },
+
+  /**
+   * Retrieve token from localStorage
+   * @returns {string|null}
+   */
+  getToken() {
+    const token = localStorage.getItem(TOKEN_KEY);
+    console.log('[AuthService] getToken:', token ? '***exists***' : null);
+    return token;
+  },
+
+  /**
+   * Remove token from localStorage
+   */
+  deleteToken() {
+    localStorage.removeItem(TOKEN_KEY);
+    console.log('[AuthService] Token deleted');
+  },
+});
+
+export default AuthService;

app/utils/api.js

@@ -1,7 +1,12 @@
+import AuthService from '../services/AuthService';
+
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://45.93.137.91/api';
 
+/**
+ * Generic API fetch — attaches auth token, unwraps { data } envelope
+ */
 async function apiFetch(endpoint, options = {}) {
-  const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
+  const token = AuthService.getToken();
 
   const headers = {
     'Content-Type': 'application/json',
@@ -9,7 +14,7 @@ async function apiFetch(endpoint, options = {}) {
     ...options.headers,
   };
 
-  console.log('[API] Request:', `${API_BASE}${endpoint}`, options.method || 'GET');
+  console.log('[API] Request:', options.method || 'GET', `${API_BASE}${endpoint}`);
 
   const res = await fetch(`${API_BASE}${endpoint}`, {
     ...options,
@@ -38,7 +43,9 @@ async function apiFetch(endpoint, options = {}) {
   }
 }
 
-// Raw fetch for auth (no token, returns full response for status code handling)
+/**
+ * Auth fetch — no token attached, returns full { status, data, ok } for status-code handling
+ */
 async function authFetch(endpoint, body) {
   console.log('[Auth] Request:', `${API_BASE}${endpoint}`);
 
@@ -61,7 +68,10 @@ async function authFetch(endpoint, body) {
     data = text;
   }
 
-  return { status: res.status, data, ok: res.ok || res.status === 206 };
+  // Build message from response for toast display
+  const message = (typeof data === 'object' && data?.message) ? data.message : null;
+
+  return { status: res.status, data, ok: res.ok || res.status === 206, message };
 }
 
 // ─── Rent Properties ───
@@ -143,9 +153,32 @@ export async function getTerms() {
   return apiFetch('/Terms/GetTerms');
 }
 
-// ─── Auth ───
+// ─── Auth: Registration ───
+
+/**
+ * Register a new owner
+ * @param {Object} data — { name, email, phoneNumber, whatsAppNumber, password, ownerType }
+ * @returns {Promise<{status, data, ok, message}>}
+ */
+export async function addOwner(data) {
+  console.log('[Auth] Registering owner:', data.email);
+  return authFetch('/Owner/Add', data);
+}
+
+/**
+ * Register a new customer/tenant
+ * @param {Object} data — { name, email, phoneNumber, password, customerType }
+ * @returns {Promise<{status, data, ok, message}>}
+ */
+export async function addCustomer(data) {
+  console.log('[Auth] Registering customer:', data.email);
+  return authFetch('/Customer/Add', data);
+}
+
+// ─── Auth: Login ───
 
 export async function loginWithEmail(credential, password) {
+  console.log('[Auth] Login with email:', credential);
   return authFetch('/Auth/LogInWithEmail', {
     credential,
     password,
@@ -155,6 +188,7 @@ export async function loginWithEmail(credential, password) {
 }
 
 export async function loginWithPhone(credential, password) {
+  console.log('[Auth] Login with phone:', credential);
   return authFetch('/Auth/LogInWithPhoneNumber', {
     credential,
     password,
@@ -163,6 +197,8 @@ export async function loginWithPhone(credential, password) {
   });
 }
 
+// ─── Auth: OTP ───
+
 export async function sendEmailOTP() {
   console.log('[Auth] Sending email OTP...');
   return apiFetch('/Auth/SendEmailOTP', { method: 'POST' });
@@ -183,7 +219,8 @@ export async function verifyPhone(code) {
   return authFetch(`/Auth/VerifyPhoneNumber?code=${encodeURIComponent(code)}`, {});
 }
 
-// Helpers
+// ─── Helpers ───
+
 export function isEmail(value) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 }

app/utils/constants.js

@@ -1,41 +1,71 @@
-export const PROPERTY_STATUS = {
-  AVAILABLE: 'available',
-  BOOKED: 'booked',
-  MAINTENANCE: 'maintenance'
-};
+/**
+ * Constants — re-exports from enums for backward compatibility
+ *
+ * New code should import directly from:
+ *   import { BuildingType, BookingStatus, City, ... } from '@/app/enums';
+ *
+ * Old imports from '@/app/utils/constants' continue to work.
+ */
 
-export const BOOKING_STATUS = {
-  PENDING: 'pending',
-  OWNER_APPROVED: 'owner_approved',
-  ADMIN_APPROVED: 'admin_approved',
-  REJECTED: 'rejected',
-  ACTIVE: 'active',
-  COMPLETED: 'completed',
-  CANCELLED: 'cancelled'
-};
+// Re-export all enums
+export {
+  BuildingType,
+  BuildingTypeLabels,
+  BuildingTypeKeys,
+  BuildingTypeByKey,
+} from '../enums/BuildingType';
 
-export const COMMISSION_TYPE = {
-  FROM_OWNER: 'from_owner',
-  FROM_TENANT: 'from_tenant',
-  FROM_BOTH: 'from_both'
-};
+export {
+  PropertyStatus,
+  PropertyStatusLabels,
+  PropertyStatusKeys,
+  PropertyStatusByKey,
+} from '../enums/PropertyStatus';
 
-export const IDENTITY_TYPE = {
-  SYRIAN: 'syrian',
-  PASSPORT: 'passport'
-};
+export {
+  BookingStatus,
+  BookingStatusLabels,
+  BookingStatusColors,
+} from '../enums/BookingStatus';
 
-export const PAYMENT_METHOD = {
+export {
+  CommissionType,
+  CommissionTypeLabels,
+} from '../enums/CommissionType';
+
+export {
+  IdentityType,
+  IdentityTypeLabels,
+  IdentityTypeFlags,
+} from '../enums/IdentityType';
+
+export {
+  UserRole,
+  UserRoleLabels,
+  UserRoleColors,
+} from '../enums/UserRole';
+
+export {
+  City,
+  CitiesList,
+  extractCity,
+} from '../enums/City';
+
+export { LoginMethod } from '../enums/LoginMethod';
+export { OwnerType, OwnerTypeLabels } from '../enums/OwnerType';
+export { CustomerType, CustomerTypeLabels } from '../enums/CustomerType';
+
+// ─── Legacy aliases (keep old imports working) ───
+export const PROPERTY_STATUS = PropertyStatusKeys;
+export const BOOKING_STATUS = BookingStatus;
+export const COMMISSION_TYPE = CommissionType;
+export const IDENTITY_TYPE = IdentityType;
+export const CITIES = City;
+
+// ─── Misc constants ───
+export const PAYMENT_METHOD = Object.freeze({
   CASH: 'cash',
-  ELECTRONIC: 'electronic'
-};
+  ELECTRONIC: 'electronic',
+});
 
-export const CITIES = {
-  DAMASCUS: 'damascus',
-  ALEPPO: 'aleppo',
-  HOMS: 'homs',
-  LATTAKIA: 'latakia',
-  DARAA: 'daraa'
-};
-
-export const DEFAULT_COMMISSION_RATE = 5; 
+export const DEFAULT_COMMISSION_RATE = 5;