Added sidebar

2026-03-30 19:26:03 +03:00
parent 891756e092
commit d22248248d
6 changed files with 597 additions and 0 deletions
--- a/app/payments/page.js
+++ b/app/payments/page.js
@ -0,0 +1,96 @@
+'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>
+  );
+}