96 lines
3.3 KiB
JavaScript
96 lines
3.3 KiB
JavaScript
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
import { useRouter } from 'next/navigation';
|
||
|
|
import { CreditCard, Download, Eye } from 'lucide-react';
|
||
|
|
import AuthService from '@/app/services/AuthService';
|
||
|
|
import Link from 'next/link';
|
||
|
|
|
||
|
|
const mockPayments = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
property: 'فيلا فاخرة في المزة',
|
||
|
|
amount: 2500000,
|
||
|
|
date: '2024-03-10',
|
||
|
|
status: 'completed',
|
||
|
|
invoiceId: 'INV-001'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
property: 'شقة حديثة في الشهباء',
|
||
|
|
amount: 750000,
|
||
|
|
date: '2024-03-05',
|
||
|
|
status: 'completed',
|
||
|
|
invoiceId: 'INV-002'
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function PaymentsPage() {
|
||
|
|
const router = useRouter();
|
||
|
|
const [payments, setPayments] = useState([]);
|
||
|
|
const [isLoading, setIsLoading] = useState(true);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (AuthService.isAdmin()) {
|
||
|
|
router.push('/');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setTimeout(() => {
|
||
|
|
setPayments(mockPayments);
|
||
|
|
setIsLoading(false);
|
||
|
|
}, 500);
|
||
|
|
}, [router]);
|
||
|
|
|
||
|
|
const formatCurrency = (amount) => amount?.toLocaleString() + ' ل.س';
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen flex items-center justify-center">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="w-16 h-16 border-4 border-amber-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
||
|
|
<p className="text-gray-600">جاري التحميل...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-50 py-8">
|
||
|
|
<div className="container mx-auto px-4 max-w-4xl">
|
||
|
|
<div className="mb-8">
|
||
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">المدفوعات</h1>
|
||
|
|
<p className="text-gray-600">سجل المعاملات المالية والفواتير</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{payments.length === 0 ? (
|
||
|
|
<div 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>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{payments.map((payment) => (
|
||
|
|
<div key={payment.id} 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>
|
||
|
|
<h3 className="font-bold text-gray-900">{payment.property}</h3>
|
||
|
|
<p className="text-sm text-gray-500 mt-1">رقم الفاتورة: {payment.invoiceId}</p>
|
||
|
|
<p className="text-xs text-gray-400 mt-2">{payment.date}</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-right">
|
||
|
|
<div className="text-xl font-bold text-amber-600">{formatCurrency(payment.amount)}</div>
|
||
|
|
<span className="inline-block px-2 py-1 bg-green-100 text-green-800 rounded-lg text-xs mt-1">
|
||
|
|
مكتمل
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|