-
+ {img && 
}
+
-
- {user && (
-
-
-
- e.stopPropagation()}
- >
+
+ e.stopPropagation()}>
-
@@ -249,182 +157,103 @@ export default function OwnerReservationRequestsPage() {
const [searchTerm, setSearchTerm] = useState('');
useEffect(() => {
- const user = AuthService.getUser();
- if (!user || !AuthService.isOwner()) {
- router.push('/auth/choose-role');
- return;
- }
+ if (!AuthService.getUser() || !AuthService.isOwner()) { router.push('/auth/choose-role'); return; }
loadReservations();
}, [router]);
- const loadReservations = async () => {
+ const loadReservations = useCallback(async () => {
try {
const token = AuthService.getToken();
const res = await fetch(`${API_BASE}/Reservations/GetOwnerResevationRequests`, {
headers: { Authorization: `Bearer ${token}` },
});
-
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const json = await res.json();
-
let list = json.data || json || [];
if (!Array.isArray(list)) list = [];
-
- // Enrich each reservation with property details
- const enriched = await Promise.all(
- list.map(async (r) => {
- if (!r.property && r.propertyId) {
- try {
- const propRes = await getRentProperty(r.propertyId);
- r.property = propRes?.data?.propertyInformation || propRes?.data || propRes || null;
- } catch (e) {
- console.warn('Failed to load property', r.propertyId);
- }
- }
- return r;
- })
- );
-
+ const enriched = await Promise.all(list.map(enrich));
setReservations(enriched);
setFiltered(enriched);
} catch (err) {
- console.error('Failed to load owner reservations:', err);
+ console.error(err);
toast.error('فشل تحميل طلبات الحجز');
}
setLoading(false);
- };
+ }, []);
useEffect(() => {
- let result = reservations;
- if (filterStatus !== 'all') result = result.filter(r => r.status === filterStatus);
+ let r = reservations;
+ if (filterStatus !== 'all') r = r.filter(x => STATUS_MAP[x.status] === filterStatus);
if (searchTerm) {
const q = searchTerm.toLowerCase();
- result = result.filter(r => {
- const addr = (r.property?.address || '').toLowerCase();
- const userName = ((r.user?.name) || (r.user?.email) || '').toLowerCase();
- const sid = String(r.id).toLowerCase();
- return addr.includes(q) || userName.includes(q) || sid.includes(q);
- });
+ r = r.filter(x => pAddr(x._prop).toLowerCase().includes(q) || String(x.id).includes(q));
}
- setFiltered(result);
+ setFiltered(r);
}, [reservations, filterStatus, searchTerm]);
- const handleConfirm = async (reservation) => {
+ const handleConfirm = async (r) => {
try {
- const token = AuthService.getToken();
- const id = typeof reservation.id === 'number' ? reservation.id : parseInt(reservation.id);
- const res = await fetch(`${API_BASE}/Reservations/owner-confirm/${id}`, {
- method: 'PUT',
- headers: { Authorization: `Bearer ${token}` },
- });
-
+ const res = await API(AuthService.getToken(), 'PUT', `/Reservations/owner-confirm/${r.id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
toast.success('تم قبول الحجز بنجاح');
await loadReservations();
- } catch (err) {
- console.error('Failed to confirm:', err);
- toast.error('فشل قبول الحجز');
- }
+ } catch (err) { console.error(err); toast.error('فشل قبول الحجز'); }
};
- const handleReject = async (reservation) => {
+ const handleReject = async (r) => {
if (!confirm('هل أنت متأكد من رفض هذا الحجز؟')) return;
try {
- const token = AuthService.getToken();
- const id = typeof reservation.id === 'number' ? reservation.id : parseInt(reservation.id);
- const res = await fetch(`${API_BASE}/Reservations/reject/${id}`, {
- method: 'PUT',
- headers: { Authorization: `Bearer ${token}` },
- });
-
+ const res = await API(AuthService.getToken(), 'PUT', `/Reservations/reject/${r.id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
toast.success('تم رفض الحجز');
await loadReservations();
- } catch (err) {
- console.error('Failed to reject:', err);
- toast.error('فشل رفض الحجز');
- }
+ } catch (err) { console.error(err); toast.error('فشل رفض الحجز'); }
};
- const statuses = ['all', ...new Set(reservations.map(r => r.status))];
- const statusCounts = {
- all: reservations.length,
- ...Object.fromEntries(
- [...new Set(reservations.map(r => r.status))].map(s => [s, reservations.filter(r => r.status === s).length])
- ),
- };
+ const allStatuses = [...new Set(reservations.map(r => STATUS_MAP[r.status]))];
+ const counts = { all: reservations.length, ...Object.fromEntries(allStatuses.map(s => [s, reservations.filter(r => STATUS_MAP[r.status] === s).length])) };
- if (loading) return setSelected(null)} />
-
+ setSelected(null)} />
+
-
+ {addr &&
-
- )}
+
-
- {reservation.totalPrice?.toLocaleString() || '—'}
-
+ {r.totalPrice?.toLocaleString()??'—'}
السعر الإجمالي
-
- )}
-
+ {(pBeds(p)||pBaths(p)) &&
-
-
-
-
-
- {user.name || user.email || 'مستخدم'}
-
- {user.phoneNumber && <>
- {pBeds(p)>0&&{pBeds(p)} غرف}{pBaths(p)>0&&{pBaths(p)} حمامات}
}
-
من
-
- {new Date(reservation.startDate).toLocaleDateString('ar')}
-
+ من
+ {new Date(r.startDate).toLocaleDateString('ar')}
-
إلى
-
- {new Date(reservation.endDate).toLocaleDateString('ar')}
-
+ إلى
+ {new Date(r.endDate).toLocaleDateString('ar')}
-
);
}
-function DetailsModal({ reservation, isOpen, onClose }) {
- if (!isOpen || !reservation) return null;
- const property = reservation.property || reservation.propertyInformation;
- const user = reservation.user;
-
+function DetailsModal({ r, isOpen, onClose }) {
+ if (!isOpen || !r) return null;
+ const p = r._prop;
return (
-
-
طلب حجز #{reservation.id}
- +طلب حجز #{r.id}
+
- {user && (
-
-
-
-
- )}
-
- {property && (
-
-
- الاسم: {user.name || '—'}
-البريد: {user.email || '—'}
- {user.phoneNumber &&الهاتف: {user.phoneNumber}
} -
-
-
-
- )}
-
+ {p &&
-
- العنوان: {property.address || '—'}
- {property.numberOfBedRooms && ( -
- {property.numberOfBedRooms} غرف
- {property.numberOfBathRooms} حمامات
-
- )}
-
+
+
}
+ العنوان: {pAddr(p)||'—'}
+ {(pBeds(p)||pBaths(p)) &&
+ {pBeds(p)>0&&{pBeds(p)} غرف}
+ {pBaths(p)>0&&{pBaths(p)} حمامات}
+
}
+
-
-
+
-
-
+
-
+
+
-
- تاريخ البداية
-{new Date(reservation.startDate).toLocaleDateString('ar')}
-
-
- تاريخ النهاية
-{new Date(reservation.endDate).toLocaleDateString('ar')}
-
-
- الحالة
-
-
+ تاريخ الإنشاء
-{new Date(reservation.createdAt).toLocaleDateString('ar')}
-تاريخ البداية
{new Date(r.startDate).toLocaleDateString('ar')}
تاريخ النهاية
{new Date(r.endDate).toLocaleDateString('ar')}
الحالة
تاريخ الإنشاء
{new Date(r.createdAt).toLocaleDateString('ar')}
-
-
-
+
-
-
- الإجمالي
- {reservation.totalPrice?.toLocaleString() || '—'}
-
+
+ الإجمالي{r.totalPrice?.toLocaleString()??'—'}
-
-
+
+
-
+
-
diff --git a/app/reservations/page.js b/app/reservations/page.js
index 7686e65..29c1074 100644
--- a/app/reservations/page.js
+++ b/app/reservations/page.js
@@ -4,18 +4,8 @@ import { useState, useEffect, useCallback } from 'react';
import { motion } from 'framer-motion';
import { useRouter } from 'next/navigation';
import {
- Calendar,
- Clock,
- CheckCircle,
- XCircle,
- Eye,
- Loader2,
- Search,
- MapPin,
- DollarSign,
- Home,
- ArrowLeft,
- Building2
+ Calendar, Clock, CheckCircle, XCircle, Eye, Loader2, Search,
+ MapPin, DollarSign, Home, ArrowLeft,
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '../services/AuthService';
@@ -23,91 +13,82 @@ import { getRentProperty } from '../utils/api';
const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api';
-const statusConfig = {
- pending: { label: 'قيد الانتظار', color: 'bg-yellow-100 text-yellow-800', icon: Clock },
- ownerConfirmed: { label: 'مؤكد من المالك', color: 'bg-blue-100 text-blue-800', icon: CheckCircle },
- depositPaid: { label: 'تم دفع السلفة', color: 'bg-indigo-100 text-indigo-800', icon: DollarSign },
+const STATUS_MAP = ['pending','ownerConfirmed','depositPaid','depositConfirmed','completed','cancelled'];
+
+const STATUS_UI = {
+ pending: { label: 'قيد الانتظار', color: 'bg-yellow-100 text-yellow-800', icon: Clock },
+ ownerConfirmed: { label: 'مؤكد من المالك', color: 'bg-blue-100 text-blue-800', icon: CheckCircle },
+ depositPaid: { label: 'تم دفع السلفة', color: 'bg-indigo-100 text-indigo-800', icon: DollarSign },
depositConfirmed: { label: 'مؤكد', color: 'bg-green-100 text-green-800', icon: CheckCircle },
- rejected: { label: 'مرفوض', color: 'bg-red-100 text-red-800', icon: XCircle },
- cancelled: { label: 'ملغي', color: 'bg-gray-100 text-gray-800', icon: XCircle },
- completed: { label: 'منتهي', color: 'bg-green-100 text-green-800', icon: CheckCircle },
+ completed: { label: 'منتهي', color: 'bg-green-100 text-green-800', icon: CheckCircle },
+ cancelled: { label: 'ملغي', color: 'bg-gray-100 text-gray-800', icon: XCircle },
};
-function StatusBadge({ status }) {
- const config = statusConfig[status] || { label: status, color: 'bg-gray-100 text-gray-700', icon: Clock };
- const Icon = config.icon;
+function statusLabel(code) { return STATUS_UI[STATUS_MAP[code]]?.label ?? String(code); }
+function statusColor(code) { return STATUS_UI[STATUS_MAP[code]]?.color ?? 'bg-gray-100 text-gray-700'; }
+function statusIcon(code) { return STATUS_UI[STATUS_MAP[code]]?.icon ?? Clock; }
+
+function StatusBadge({ code }) {
+ const Icon = statusIcon(code);
return (
-
- طلبات الحجز
لديك {reservations.length} طلب
- {Object.entries(statusCounts).map(([status, count]) => (
- setFilterStatus(status)}
- >
- setFilterStatus(s)}>
+
))}
-
{count}
- {status === 'all' ? 'الكل' : (statusConfig[status]?.label || status)}
+ {Object.entries(counts).map(([s, c]) => (
+ {c}
+ {s==='all'?'الكل':(STATUS_UI[s]?.label||s)}
-
-
{filtered.length === 0 ? (
-
) : (
لا توجد طلبات
لم يتم استلام أي طلبات حجز حتى الآن
- {filtered.map((r) => (
-
)}
-
- e.stopPropagation()}
- >
+
+ e.stopPropagation()}>
-
-
@@ -208,129 +149,75 @@ export default function UserReservationsPage() {
const [filterStatus, setFilterStatus] = useState('all');
const [searchTerm, setSearchTerm] = useState('');
- useEffect(() => {
- const user = AuthService.getUser();
- if (!user) {
- router.push('/login');
- return;
- }
- loadReservations();
- }, [router]);
+ useEffect(() => { if (!AuthService.getUser()) { router.push('/login'); return; } loadReservations(); }, [router]);
- const loadReservations = async () => {
+ const loadReservations = useCallback(async () => {
try {
- const token = AuthService.getToken();
const res = await fetch(`${API_BASE}/Reservations/GetUserResevations`, {
- headers: { Authorization: `Bearer ${token}` },
+ headers: { Authorization: `Bearer ${AuthService.getToken()}` },
});
-
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const json = await res.json();
-
let list = json.data || json || [];
if (!Array.isArray(list)) list = [];
-
- // Enrich each reservation with property details
- const enriched = await Promise.all(
- list.map(async (r) => {
- if (!r.property && r.propertyId) {
- try {
- const propRes = await getRentProperty(r.propertyId);
- r.property = propRes?.data?.propertyInformation || propRes?.data || propRes || null;
- } catch (e) {
- console.warn('Failed to load property', r.propertyId);
- }
- }
- return r;
- })
- );
-
+ const enriched = await Promise.all(list.map(enrich));
setReservations(enriched);
setFiltered(enriched);
} catch (err) {
- console.error('Failed to load reservations:', err);
+ console.error(err);
toast.error('فشل تحميل الحجوزات');
setReservations([]);
setFiltered([]);
}
setLoading(false);
- };
+ }, []);
useEffect(() => {
- let result = reservations;
- if (filterStatus !== 'all') result = result.filter(r => r.status === filterStatus);
- if (searchTerm) {
- const q = searchTerm.toLowerCase();
- result = result.filter(r => {
- const addr = (r.property?.address || '').toLowerCase();
- const sid = String(r.id).toLowerCase();
- return addr.includes(q) || sid.includes(q);
- });
- }
- setFiltered(result);
+ let r = reservations;
+ if (filterStatus !== 'all') r = r.filter(x => STATUS_MAP[x.status] === filterStatus);
+ if (searchTerm) { const q = searchTerm.toLowerCase(); r = r.filter(x => propAddr(x._prop).toLowerCase().includes(q) || String(x.id).includes(q)); }
+ setFiltered(r);
}, [reservations, filterStatus, searchTerm]);
- const statuses = ['all', ...new Set(reservations.map(r => r.status))];
- const statusCounts = {
- all: reservations.length,
- ...Object.fromEntries(
- [...new Set(reservations.map(r => r.status))].map(s => [s, reservations.filter(r => r.status === s).length])
- ),
- };
+ const allStatuses = [...new Set(reservations.map(r => STATUS_MAP[r.status]))];
+ const counts = { all: reservations.length, ...Object.fromEntries(allStatuses.map(s => [s, reservations.filter(r => STATUS_MAP[r.status] === s).length])) };
- if (loading) return setSelected(null)} />
-
+ setSelected(null)} />
+ {img && }
+
-
- {property?.images?.length > 0 && (
-
-
@@ -115,83 +96,43 @@ function ReservationCard({ reservation, onViewDetails }) {
);
}
-function DetailsModal({ reservation, isOpen, onClose }) {
- if (!isOpen || !reservation) return null;
- const property = reservation.property || reservation.propertyInformation;
+function DetailsModal({ r, isOpen, onClose }) {
+ if (!isOpen || !r) return null;
+ const p = r._prop;
return (
-
-
-
- {property && (
-
-
- )}
+
-
- {reservation.totalPrice?.toLocaleString() || '—'}
-
+ {r.totalPrice?.toLocaleString() ?? '—'}
السعر الإجمالي
- 
-
- )}
-
+ {(beds||baths) && {beds>0&&{beds} غرف}{baths>0&&{baths} حمامات}
}
-
من
-
- {new Date(reservation.startDate).toLocaleDateString('ar')}
-
+ من
+ {new Date(r.startDate).toLocaleDateString('ar')}
-
إلى
-
- {new Date(reservation.endDate).toLocaleDateString('ar')}
-
+ إلى
+ {new Date(r.endDate).toLocaleDateString('ar')}
-
تفاصيل الحجز
- +رقم الحجز: #{reservation.id}
+رقم الحجز: #{r.id}
- {property && (
-
-
-
-
- )}
-
+ {p &&
-
- العنوان: {property.address || '—'}
- {property.numberOfBedRooms && ( -
- {property.numberOfBedRooms} غرف
- {property.numberOfBathRooms} حمامات
-
- )}
-
+
+
}
+ العنوان: {propAddr(p)||'—'}
+ {(propBeds(p)||propBaths(p)) &&
+ {propBeds(p)>0&&{propBeds(p)} غرف}
+ {propBaths(p)>0&&{propBaths(p)} حمامات}
+
}
+
-
-
+
-
-
+
-
+
+
-
- تاريخ البداية
-{new Date(reservation.startDate).toLocaleDateString('ar')}
-
-
- تاريخ النهاية
-{new Date(reservation.endDate).toLocaleDateString('ar')}
-
-
- الحالة
-
-
+ تاريخ الإنشاء
-{new Date(reservation.createdAt).toLocaleDateString('ar')}
-تاريخ البداية
{new Date(r.startDate).toLocaleDateString('ar')}
تاريخ النهاية
{new Date(r.endDate).toLocaleDateString('ar')}
الحالة
تاريخ الإنشاء
{new Date(r.createdAt).toLocaleDateString('ar')}
-
-
-
+
-
-
- الإجمالي
- {reservation.totalPrice?.toLocaleString() || '—'}
-
+
+ الإجمالي{r.totalPrice?.toLocaleString()??'—'}
-
-
+
+
-
حجوزاتي
لديك {reservations.length} حجز
- {Object.entries(statusCounts).map(([status, count]) => (
- setFilterStatus(status)}
- >
- setFilterStatus(s)}>
+
))}
-
{count}
- {status === 'all' ? 'الكل' : (statusConfig[status]?.label || status)}
+ {Object.entries(counts).map(([s, c]) => (
+ {c}
+ {s==='all'?'الكل':(STATUS_UI[s]?.label||s)}
-
-
{filtered.length === 0 ? (
-
) : (
لا توجد حجوزات
لم تقم بأي حجز حتى الآن
- {filtered.map((r) => (
-
)}