Edit payments
This commit is contained in:
Rahaf
@ -1,162 +1,28 @@
|
|||||||
// 'use client';
|
|
||||||
|
|
||||||
// import { useEffect, useState, useCallback } from 'react';
|
|
||||||
// import { useRouter } from 'next/navigation';
|
|
||||||
// import { motion } from 'framer-motion';
|
|
||||||
// import { CreditCard, Loader2, Home, Calendar, Check, X, Clock } from 'lucide-react';
|
|
||||||
// import toast, { Toaster } from 'react-hot-toast';
|
|
||||||
// import AuthService from '@/app/services/AuthService';
|
|
||||||
// import { getUserReservations, payDeposit } from '@/app/utils/api';
|
|
||||||
|
|
||||||
// const STATUS_MAP = ['pending', 'ownerConfirmed', 'depositPaid', 'depositConfirmed', 'completed', 'cancelled'];
|
|
||||||
|
|
||||||
// const STATUS_CONFIG = {
|
|
||||||
// pending: { label: 'قيد الانتظار', color: 'bg-yellow-100 text-yellow-800 border-yellow-300', depositPaid: false },
|
|
||||||
// ownerConfirmed: { label: 'مؤكد من المالك', color: 'bg-blue-100 text-blue-800 border-blue-300', depositPaid: false },
|
|
||||||
// depositPaid: { label: 'تم دفع السلفة', color: 'bg-orange-100 text-orange-800 border-orange-300', depositPaid: true },
|
|
||||||
// depositConfirmed: { label: 'تم تأكيد الدفع', color: 'bg-green-100 text-green-800 border-green-300', depositPaid: true },
|
|
||||||
// completed: { label: 'منتهي', color: 'bg-teal-100 text-teal-800 border-teal-300', depositPaid: true },
|
|
||||||
// cancelled: { label: 'ملغي', color: 'bg-red-100 text-red-800 border-red-300', depositPaid: false },
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export default function PaymentsPage() {
|
|
||||||
// const router = useRouter();
|
|
||||||
// const [reservations, setReservations] = useState([]);
|
|
||||||
// const [loading, setLoading] = useState(true);
|
|
||||||
// const [payingId, setPayingId] = useState(null);
|
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// // Admin check removed
|
|
||||||
// // if (AuthService.isAdmin()) {
|
|
||||||
// // router.push('/');
|
|
||||||
// // return;
|
|
||||||
// // }
|
|
||||||
// loadReservations();
|
|
||||||
// }, [router]);
|
|
||||||
|
|
||||||
// const loadReservations = useCallback(async () => {
|
|
||||||
// try {
|
|
||||||
// const data = await getUserReservations();
|
|
||||||
// setReservations(Array.isArray(data) ? data : []);
|
|
||||||
// } catch (err) {
|
|
||||||
// console.error(err);
|
|
||||||
// toast.error('فشل تحميل المدفوعات');
|
|
||||||
// } finally {
|
|
||||||
// setLoading(false);
|
|
||||||
// }
|
|
||||||
// }, []);
|
|
||||||
|
|
||||||
// const handlePayDeposit = async (reservation) => {
|
|
||||||
// setPayingId(reservation.id);
|
|
||||||
// try {
|
|
||||||
// await payDeposit({ reservationId: reservation.id });
|
|
||||||
// toast.success('تم دفع السلفة بنجاح!');
|
|
||||||
// loadReservations();
|
|
||||||
// } catch (err) {
|
|
||||||
// toast.error(err?.message || 'فشل عملية الدفع');
|
|
||||||
// } finally {
|
|
||||||
// setPayingId(null);
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const formatCurrency = (v) => (v ?? 0).toLocaleString() + ' ل.س';
|
|
||||||
|
|
||||||
// if (loading) {
|
|
||||||
// return (
|
|
||||||
// <div className="min-h-screen bg-gray-50 flex items-center justify-center" dir="rtl">
|
|
||||||
// <Loader2 className="w-12 h-12 text-amber-500 animate-spin" />
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const canPay = (status) => STATUS_MAP[status] === 'pending' || STATUS_MAP[status] === 'ownerConfirmed';
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
|
|
||||||
// <Toaster position="top-center" reverseOrder={false} />
|
|
||||||
// <div className="container mx-auto px-4 max-w-4xl">
|
|
||||||
// <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
|
|
||||||
// <h1 className="text-3xl font-bold text-gray-900 mb-2">المدفوعات</h1>
|
|
||||||
// <p className="text-gray-600">إدارة مدفوعات الحجوزات والدفعات المقدمة</p>
|
|
||||||
// </motion.div>
|
|
||||||
|
|
||||||
// {reservations.length === 0 ? (
|
|
||||||
// <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
|
|
||||||
// className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300">
|
|
||||||
// <CreditCard className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
||||||
// <h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد معاملات مالية</h3>
|
|
||||||
// <p className="text-gray-500">ستظهر هنا مدفوعاتك للحجوزات</p>
|
|
||||||
// </motion.div>
|
|
||||||
// ) : (
|
|
||||||
// <div className="space-y-4">
|
|
||||||
// {reservations.map((r, i) => {
|
|
||||||
// const statusKey = STATUS_MAP[r.status] || 'pending';
|
|
||||||
// const cfg = STATUS_CONFIG[statusKey];
|
|
||||||
// const amount = r.depositAmount || r.totalPrice || 0;
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <motion.div key={r.id || i} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
|
|
||||||
// className="bg-white rounded-2xl shadow-sm border border-gray-200 p-5 hover:shadow-md transition-all">
|
|
||||||
// <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
||||||
// <div className="flex items-start gap-3">
|
|
||||||
// <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
|
|
||||||
// <Home className="w-5 h-5 text-amber-600" />
|
|
||||||
// </div>
|
|
||||||
// <div>
|
|
||||||
// <h3 className="font-bold text-gray-900">
|
|
||||||
// {r.propertyAddress || r._prop?.address || `عقار #${r.propertyId || r.id}`}
|
|
||||||
// </h3>
|
|
||||||
// <p className="text-sm text-gray-500 mt-1">حجز #{r.id}</p>
|
|
||||||
// <div className="flex items-center gap-3 mt-1 text-xs text-gray-400">
|
|
||||||
// <span className="flex items-center gap-1"><Calendar className="w-3 h-3" /> {new Date(r.startDate).toLocaleDateString('ar')}</span>
|
|
||||||
// <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {new Date(r.endDate).toLocaleDateString('ar')}</span>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// <div className="text-right w-full md:w-auto">
|
|
||||||
// <div className="text-xl font-bold text-amber-600">{formatCurrency(amount)}</div>
|
|
||||||
// <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium border ${cfg.color}`}>
|
|
||||||
// {cfg.depositPaid ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
|
|
||||||
// {cfg.label}
|
|
||||||
// </span>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
|
|
||||||
// {canPay(r.status) && (
|
|
||||||
// <div className="mt-4 pt-4 border-t border-gray-100 flex justify-end">
|
|
||||||
// <button onClick={() => handlePayDeposit(r)} disabled={payingId === r.id}
|
|
||||||
// className="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white px-6 py-2.5 rounded-xl text-sm font-medium transition">
|
|
||||||
// {payingId === r.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <CreditCard className="w-4 h-4" />}
|
|
||||||
// {payingId === r.id ? 'جاري الدفع...' : 'دفع السلفة'}
|
|
||||||
// </button>
|
|
||||||
// </div>
|
|
||||||
// )}
|
|
||||||
// </motion.div>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
// </div>
|
|
||||||
// )}
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect, useState, useCallback } from 'react';
|
import { useEffect, useState, useCallback } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { CreditCard, Loader2, Home, Calendar, Check, X, Clock, LogIn, Lock } from 'lucide-react';
|
import {
|
||||||
|
Home,
|
||||||
|
MapPin,
|
||||||
|
Phone,
|
||||||
|
ShieldCheck,
|
||||||
|
CreditCard,
|
||||||
|
Banknote,
|
||||||
|
Building,
|
||||||
|
ArrowLeftRight,
|
||||||
|
Loader2,
|
||||||
|
Check,
|
||||||
|
X,
|
||||||
|
Calendar,
|
||||||
|
Clock,
|
||||||
|
LogIn,
|
||||||
|
Lock,
|
||||||
|
Info,
|
||||||
|
Landmark,
|
||||||
|
Wallet,
|
||||||
|
} from 'lucide-react';
|
||||||
import toast, { Toaster } from 'react-hot-toast';
|
import toast, { Toaster } from 'react-hot-toast';
|
||||||
import AuthService from '@/app/services/AuthService';
|
import AuthService from '@/app/services/AuthService';
|
||||||
import { payDeposit } from '@/app/utils/api';
|
import { payDeposit } from '@/app/utils/api';
|
||||||
@ -164,20 +30,62 @@ import { payDeposit } from '@/app/utils/api';
|
|||||||
const STATUS_MAP = ['pending', 'ownerConfirmed', 'depositPaid', 'depositConfirmed', 'completed', 'cancelled'];
|
const STATUS_MAP = ['pending', 'ownerConfirmed', 'depositPaid', 'depositConfirmed', 'completed', 'cancelled'];
|
||||||
|
|
||||||
const STATUS_CONFIG = {
|
const STATUS_CONFIG = {
|
||||||
pending: { label: 'قيد الانتظار', color: 'bg-yellow-100 text-yellow-800 border-yellow-300', depositPaid: false },
|
pending: { label: 'قيد الانتظار', color: 'bg-yellow-100 text-yellow-800 border-yellow-300', icon: Clock },
|
||||||
ownerConfirmed: { label: 'مؤكد من المالك', color: 'bg-blue-100 text-blue-800 border-blue-300', depositPaid: false },
|
ownerConfirmed: { label: 'مؤكد من المالك', color: 'bg-blue-100 text-blue-800 border-blue-300', icon: ShieldCheck },
|
||||||
depositPaid: { label: 'تم دفع السلفة', color: 'bg-orange-100 text-orange-800 border-orange-300', depositPaid: true },
|
depositPaid: { label: 'تم دفع السلفة', color: 'bg-orange-100 text-orange-800 border-orange-300', icon: Wallet },
|
||||||
depositConfirmed: { label: 'تم تأكيد الدفع', color: 'bg-green-100 text-green-800 border-green-300', depositPaid: true },
|
depositConfirmed: { label: 'تم تأكيد الدفع', color: 'bg-green-100 text-green-800 border-green-300', icon: Check },
|
||||||
completed: { label: 'منتهي', color: 'bg-teal-100 text-teal-800 border-teal-300', depositPaid: true },
|
completed: { label: 'منتهي', color: 'bg-teal-100 text-teal-800 border-teal-300', icon: Check },
|
||||||
cancelled: { label: 'ملغي', color: 'bg-red-100 text-red-800 border-red-300', depositPaid: false },
|
cancelled: { label: 'ملغي', color: 'bg-red-100 text-red-800 border-red-300', icon: X },
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const PAYMENT_METHODS = [
|
||||||
|
{
|
||||||
|
id: 'cash',
|
||||||
|
label: 'الدفع النقدي',
|
||||||
|
desc: 'ادفع الآن عبر شام كاش مع تأكيد تلقائي للحجز',
|
||||||
|
icon: Banknote,
|
||||||
|
active: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'office',
|
||||||
|
label: 'نقداً',
|
||||||
|
desc: 'ادفع في مكتب المنصة. يتم التأكيد لاحقاً',
|
||||||
|
icon: Building,
|
||||||
|
active: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'transfer',
|
||||||
|
label: 'تحويل داخلي',
|
||||||
|
desc: 'حول من حساب داخلي ثم أرسل المرجع',
|
||||||
|
icon: ArrowLeftRight,
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'electronic',
|
||||||
|
label: 'دفع إلكتروني',
|
||||||
|
desc: 'سيتم تفعيل الدفع الإلكتروني والتحويل لاحقاً',
|
||||||
|
icon: CreditCard,
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function formatCurrency(v, sign = 'ل.س') {
|
||||||
|
return `${sign} ${Number(v ?? 0).toLocaleString()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(date) {
|
||||||
|
if (!date) return '';
|
||||||
|
const d = new Date(date);
|
||||||
|
if (Number.isNaN(d.getTime())) return '';
|
||||||
|
return d.toLocaleDateString('en-GB');
|
||||||
|
}
|
||||||
|
|
||||||
export default function PaymentsPage() {
|
export default function PaymentsPage() {
|
||||||
const router = useRouter();
|
|
||||||
const [reservations, setReservations] = useState([]);
|
const [reservations, setReservations] = useState([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [payingId, setPayingId] = useState(null);
|
const [payingId, setPayingId] = useState(null);
|
||||||
const [isGuest, setIsGuest] = useState(null);
|
const [isGuest, setIsGuest] = useState(null);
|
||||||
|
const [selectedPayment, setSelectedPayment] = useState('cash');
|
||||||
|
|
||||||
const getAuthToken = () => {
|
const getAuthToken = () => {
|
||||||
if (typeof window === 'undefined') return '';
|
if (typeof window === 'undefined') return '';
|
||||||
@ -214,10 +122,11 @@ export default function PaymentsPage() {
|
|||||||
const reservation = deposit?.reservation || {};
|
const reservation = deposit?.reservation || {};
|
||||||
const transaction = deposit?.transaction || {};
|
const transaction = deposit?.transaction || {};
|
||||||
const currency = item?.currency || {};
|
const currency = item?.currency || {};
|
||||||
|
const propertyInfo = reservation?.propertyInformation || {};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id: reservation.id ?? deposit.reservationId ?? deposit?.reservation?.id ?? item?.reservationId ?? deposit?.id,
|
id: deposit.id ?? reservation.id ?? item?.id,
|
||||||
reservationId: reservation.id ?? deposit.reservationId ?? item?.reservationId ?? deposit?.id,
|
reservationId: reservation.id ?? deposit.reservationId ?? item?.reservationId,
|
||||||
status: reservation.status ?? 0,
|
status: reservation.status ?? 0,
|
||||||
startDate: reservation.startDate,
|
startDate: reservation.startDate,
|
||||||
endDate: reservation.endDate,
|
endDate: reservation.endDate,
|
||||||
@ -226,7 +135,11 @@ export default function PaymentsPage() {
|
|||||||
currencySign: currency.sign || 'ل.س',
|
currencySign: currency.sign || 'ل.س',
|
||||||
currencyName: currency.name || '',
|
currencyName: currency.name || '',
|
||||||
currencyRate: currency.rate,
|
currencyRate: currency.rate,
|
||||||
|
propertyName: propertyInfo.name || propertyInfo.address || reservation.propertyName || `عقار #${reservation.id || ''}`,
|
||||||
|
propertyAddress: propertyInfo.address || reservation.propertyAddress || '',
|
||||||
|
propertyCity: propertyInfo.city || reservation.city || '',
|
||||||
_deposit: deposit,
|
_deposit: deposit,
|
||||||
|
_reservation: reservation,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -262,14 +175,7 @@ export default function PaymentsPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatCurrency = (v, sign = 'ل.س') => `${sign} ${Number(v ?? 0).toLocaleString()}`;
|
const canPay = (status) => STATUS_MAP[status] === 'ownerConfirmed';
|
||||||
|
|
||||||
const formatDate = (date) => {
|
|
||||||
if (!date) return '';
|
|
||||||
const d = new Date(date);
|
|
||||||
if (Number.isNaN(d.getTime())) return '';
|
|
||||||
return d.toLocaleDateString('en-GB');
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
@ -306,18 +212,83 @@ export default function PaymentsPage() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const canPay = (status) => STATUS_MAP[status] === 'pending' || STATUS_MAP[status] === 'ownerConfirmed';
|
const payables = reservations.filter((r) => canPay(r.status));
|
||||||
|
const others = reservations.filter((r) => !canPay(r.status));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 py-8" dir="rtl">
|
<div className="min-h-screen bg-gray-50 py-8" dir="rtl">
|
||||||
<Toaster position="top-center" reverseOrder={false} />
|
<Toaster position="top-center" reverseOrder={false} />
|
||||||
<div className="container mx-auto px-4 max-w-4xl">
|
<div className="container mx-auto px-4 max-w-4xl">
|
||||||
<motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: -20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="mb-8"
|
||||||
|
>
|
||||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">المدفوعات</h1>
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">المدفوعات</h1>
|
||||||
<p className="text-gray-600">إدارة مدفوعات الحجوزات والدفعات المقدمة</p>
|
<p className="text-gray-600">إدارة مدفوعات الحجوزات والدفعات المقدمة</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{reservations.length === 0 ? (
|
{payables.length > 0 && (
|
||||||
|
<div className="space-y-6 mb-10">
|
||||||
|
<h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
|
||||||
|
<Wallet className="w-5 h-5 text-amber-500" />
|
||||||
|
المدفوعات المطلوبة
|
||||||
|
</h2>
|
||||||
|
{payables.map((r, i) => (
|
||||||
|
<PaymentCard
|
||||||
|
key={r.id || i}
|
||||||
|
reservation={r}
|
||||||
|
payingId={payingId}
|
||||||
|
selectedPayment={selectedPayment}
|
||||||
|
onSelectPayment={setSelectedPayment}
|
||||||
|
onPay={handlePayDeposit}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{others.length > 0 && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
|
||||||
|
<Clock className="w-5 h-5 text-gray-500" />
|
||||||
|
الحجوزات السابقة
|
||||||
|
</h2>
|
||||||
|
{others.map((r, i) => {
|
||||||
|
const statusKey = STATUS_MAP[r.status] || 'pending';
|
||||||
|
const cfg = STATUS_CONFIG[statusKey];
|
||||||
|
const Icon = cfg.icon;
|
||||||
|
const amount = r.depositAmount || r.totalPrice || 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={r.id || i}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="bg-white rounded-2xl shadow-sm border border-gray-200 p-5"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between gap-3 mb-3">
|
||||||
|
<span className="text-sm font-medium text-gray-400">#{r.reservationId || r.id}</span>
|
||||||
|
<span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium border ${cfg.color}`}>
|
||||||
|
<Icon className="w-3 h-3" />
|
||||||
|
{cfg.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
{formatDate(r.startDate)} - {formatDate(r.endDate)}
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-bold text-gray-900">
|
||||||
|
{formatCurrency(amount, r.currencySign)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{reservations.length === 0 && (
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
@ -327,87 +298,225 @@ export default function PaymentsPage() {
|
|||||||
<h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد معاملات مالية</h3>
|
<h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد معاملات مالية</h3>
|
||||||
<p className="text-gray-500">ستظهر هنا مدفوعاتك للحجوزات</p>
|
<p className="text-gray-500">ستظهر هنا مدفوعاتك للحجوزات</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : (
|
|
||||||
<div className="space-y-4">
|
|
||||||
{reservations.map((r, i) => {
|
|
||||||
const statusKey = STATUS_MAP[r.status] || 'pending';
|
|
||||||
const cfg = STATUS_CONFIG[statusKey];
|
|
||||||
const amount = r.depositAmount || r.totalPrice || 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
key={r.id || i}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
className="bg-white rounded-2xl shadow-sm border border-gray-200 p-5 hover:shadow-md transition-all"
|
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<div className="flex items-center justify-between gap-3">
|
|
||||||
<span className="text-sm font-medium text-gray-400">#{r.reservationId || r.id}</span>
|
|
||||||
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium border ${cfg.color}`}>
|
|
||||||
{cfg.depositPaid ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
|
|
||||||
{cfg.label}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start justify-between gap-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
|
|
||||||
<Home className="w-5 h-5 text-amber-600" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-sm text-gray-500">Reservation</div>
|
|
||||||
<div className="font-bold text-gray-900">#{r.reservationId || r.id}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-xs text-gray-400 mb-1">{r.currencyName}</div>
|
|
||||||
<div className="text-2xl md:text-3xl font-bold text-gray-900">
|
|
||||||
{formatCurrency(amount, r.currencySign)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t border-gray-100 pt-4">
|
|
||||||
<div className="flex items-center justify-between text-sm text-gray-700">
|
|
||||||
<span className="flex items-center gap-2">
|
|
||||||
<Calendar className="w-4 h-4 text-gray-400" />
|
|
||||||
الفترة
|
|
||||||
</span>
|
|
||||||
<span className="font-medium">
|
|
||||||
{formatDate(r.startDate)} - {formatDate(r.endDate)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between text-sm text-gray-700 mt-3">
|
|
||||||
<span className="flex items-center gap-2">
|
|
||||||
<Clock className="w-4 h-4 text-gray-400" />
|
|
||||||
Reservation
|
|
||||||
</span>
|
|
||||||
<span className="font-medium">#{r.reservationId || r.id}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{canPay(r.status) && (
|
|
||||||
<div className="pt-2 flex justify-end">
|
|
||||||
<button
|
|
||||||
onClick={() => handlePayDeposit(r)}
|
|
||||||
disabled={payingId === r.id}
|
|
||||||
className="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white px-6 py-2.5 rounded-xl text-sm font-medium transition"
|
|
||||||
>
|
|
||||||
{payingId === r.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <CreditCard className="w-4 h-4" />}
|
|
||||||
{payingId === r.id ? 'جاري الدفع...' : 'دفع السلفة'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function PaymentCard({ reservation, payingId, selectedPayment, onSelectPayment, onPay }) {
|
||||||
|
const r = reservation;
|
||||||
|
const amount = r.depositAmount || r.totalPrice || 0;
|
||||||
|
const [showCashDialog, setShowCashDialog] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="bg-white rounded-3xl shadow-md border border-gray-200 overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Property details */}
|
||||||
|
<div className="p-6 border-b border-gray-100">
|
||||||
|
<div className="flex items-start gap-4 mb-4">
|
||||||
|
<div className="w-14 h-14 bg-amber-100 rounded-2xl flex items-center justify-center shrink-0">
|
||||||
|
<Home className="w-7 h-7 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 mb-1">
|
||||||
|
{r.propertyName}
|
||||||
|
</h3>
|
||||||
|
{(r.propertyAddress || r.propertyCity) && (
|
||||||
|
<p className="text-sm text-gray-500 flex items-center gap-1">
|
||||||
|
<MapPin className="w-3.5 h-3.5" />
|
||||||
|
{[r.propertyCity, r.propertyAddress].filter(Boolean).join(' - ')}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-600">
|
||||||
|
<span className="flex items-center gap-1.5">
|
||||||
|
<Calendar className="w-4 h-4 text-gray-400" />
|
||||||
|
{formatDate(r.startDate)} - {formatDate(r.endDate)}
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1.5">
|
||||||
|
<Clock className="w-4 h-4 text-gray-400" />
|
||||||
|
#{r.reservationId || r.id}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Deposit amount */}
|
||||||
|
<div className="px-6 py-5 border-b border-gray-100">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-sm text-gray-500 mb-1">مبلغ التأمين (الرعبون)</p>
|
||||||
|
<p className="text-4xl font-bold text-amber-600">
|
||||||
|
{formatCurrency(amount, r.currencySign)}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-400 mt-2">
|
||||||
|
يتم دفع التأمين إلى المنصة وليس إلى المالك
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Payment methods note */}
|
||||||
|
<div className="px-6 py-4 bg-amber-50 border-b border-amber-100">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Info className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
|
||||||
|
<p className="text-sm text-amber-800 leading-relaxed">
|
||||||
|
الدفع النقدي فقط هو المتاح. سيتم تفعيل الدفع الإلكتروني والتحويل لاحقاً.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Payment method options */}
|
||||||
|
<div className="px-6 py-5 border-b border-gray-100">
|
||||||
|
<p className="text-sm font-bold text-gray-700 mb-3">طريقة الدفع</p>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
|
{PAYMENT_METHODS.map((method) => {
|
||||||
|
const isSelected = selectedPayment === method.id;
|
||||||
|
const Icon = method.icon;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={method.id}
|
||||||
|
type="button"
|
||||||
|
disabled={!method.active}
|
||||||
|
onClick={() => method.active && onSelectPayment(method.id)}
|
||||||
|
className={`relative flex items-start gap-3 p-4 rounded-2xl border-2 text-right transition-all ${
|
||||||
|
!method.active
|
||||||
|
? 'border-gray-100 bg-gray-50 opacity-50 cursor-not-allowed'
|
||||||
|
: isSelected
|
||||||
|
? 'border-amber-500 bg-amber-50 shadow-sm'
|
||||||
|
: 'border-gray-200 bg-white hover:border-amber-300 cursor-pointer'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${
|
||||||
|
isSelected ? 'bg-amber-500 text-white' : 'bg-gray-100 text-gray-500'
|
||||||
|
}`}>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className={`text-sm font-bold ${isSelected ? 'text-amber-900' : 'text-gray-800'}`}>
|
||||||
|
{method.label}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500 mt-0.5 leading-relaxed">
|
||||||
|
{method.desc}
|
||||||
|
</p>
|
||||||
|
{!method.active && (
|
||||||
|
<span className="inline-block mt-1 text-[10px] font-medium text-gray-400 bg-gray-200 px-2 py-0.5 rounded-full">
|
||||||
|
غير متاح
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{isSelected && (
|
||||||
|
<div className="absolute top-2 left-2 w-5 h-5 bg-amber-500 rounded-full flex items-center justify-center">
|
||||||
|
<Check className="w-3 h-3 text-white" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pay button */}
|
||||||
|
<div className="px-6 py-5 border-b border-gray-100">
|
||||||
|
<motion.button
|
||||||
|
type="button"
|
||||||
|
onClick={() => onPay(r)}
|
||||||
|
disabled={payingId === r.id}
|
||||||
|
whileHover={{ scale: 1.01 }}
|
||||||
|
whileTap={{ scale: 0.99 }}
|
||||||
|
className="w-full bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white font-bold py-4 px-6 rounded-2xl text-lg transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-3"
|
||||||
|
>
|
||||||
|
{payingId === r.id ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-5 h-5 animate-spin" />
|
||||||
|
جاري الدفع...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Banknote className="w-5 h-5" />
|
||||||
|
دفع التأمين ({formatCurrency(amount, r.currencySign)})
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cash pay button */}
|
||||||
|
<div className="px-6 py-4 border-b border-gray-100">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowCashDialog(true)}
|
||||||
|
className="w-full bg-white border-2 border-amber-200 hover:border-amber-400 text-amber-700 font-bold py-3 px-6 rounded-2xl text-base transition-all flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<Building className="w-5 h-5" />
|
||||||
|
سأدفع نقداً
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cash payment dialog */}
|
||||||
|
{showCashDialog && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 py-8">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
className="w-full max-w-md rounded-3xl bg-white p-8 shadow-2xl border border-gray-200 text-center"
|
||||||
|
>
|
||||||
|
<div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-5">
|
||||||
|
<Clock className="w-8 h-8 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 mb-3">الدفع النقدي قيد الانتظار</h3>
|
||||||
|
<p className="text-gray-600 leading-relaxed mb-6">
|
||||||
|
اذهب إلى موقع المنصة وادفع العربون.
|
||||||
|
<br />
|
||||||
|
ستقوم المنصة بتأكيد الدفع بعد استلام المبلغ.
|
||||||
|
</p>
|
||||||
|
<div className="bg-gray-50 rounded-2xl p-4 mb-6 text-right">
|
||||||
|
<p className="text-sm font-bold text-gray-800 mb-1">موقع المنصة</p>
|
||||||
|
<p className="text-sm text-gray-600">مكتب المنصة: أبو رمانة، شارع المالكي، دمشق</p>
|
||||||
|
<p className="text-sm text-gray-600 flex items-center gap-1 mt-1" dir="ltr">
|
||||||
|
<Phone className="w-3.5 h-3.5" />
|
||||||
|
+963567823411
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowCashDialog(false)}
|
||||||
|
className="w-full px-5 py-3 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors font-medium"
|
||||||
|
>
|
||||||
|
إغلاق
|
||||||
|
</button>
|
||||||
|
<Link
|
||||||
|
href="/reservations"
|
||||||
|
className="w-full px-5 py-3 rounded-xl bg-amber-500 text-white font-semibold text-center hover:bg-amber-600 transition-colors"
|
||||||
|
>
|
||||||
|
حجوزاتي
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Platform location */}
|
||||||
|
<div className="px-6 py-5 bg-gray-50">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Landmark className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-bold text-gray-800 mb-1">موقع الدفع النقدي</p>
|
||||||
|
<p className="text-sm text-gray-600 leading-relaxed">
|
||||||
|
مكتب المنصة: أبو رمانة، شارع المالكي، دمشق
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-600 flex items-center gap-1 mt-1">
|
||||||
|
<Phone className="w-3.5 h-3.5" />
|
||||||
|
<span dir="ltr">+963567823411</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user