Added payments button

app/payments/page.js

@@ -154,8 +154,9 @@
 
 import { useEffect, useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { motion } from 'framer-motion';
-import { CreditCard, Loader2, Home, Calendar, Check, X, Clock } from 'lucide-react';
+import { CreditCard, Loader2, Home, Calendar, Check, X, Clock, LogIn, Lock } from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
 import AuthService from '@/app/services/AuthService';
 import { payDeposit } from '@/app/utils/api';
@@ -176,6 +177,7 @@ export default function PaymentsPage() {
   const [reservations, setReservations] = useState([]);
   const [loading, setLoading] = useState(true);
   const [payingId, setPayingId] = useState(null);
+  const [isGuest, setIsGuest] = useState(null);
 
   const getAuthToken = () => {
     if (typeof window === 'undefined') return '';
@@ -238,13 +240,14 @@ export default function PaymentsPage() {
   }, []);
 
   useEffect(() => {
-    // Admin check removed
-    // if (AuthService.isAdmin()) {
-    //   router.push('/');
-    //   return;
-    // }
+    if (AuthService.isGuest()) {
+      setIsGuest(true);
+      setLoading(false);
+      return;
+    }
+    setIsGuest(false);
     loadReservations();
-  }, [router, loadReservations]);
+  }, [loadReservations]);
 
   const handlePayDeposit = async (reservation) => {
     setPayingId(reservation.id);
@@ -276,6 +279,33 @@ export default function PaymentsPage() {
     );
   }
 
+  if (isGuest) {
+    return (
+      <div className="min-h-screen bg-gradient-to-b from-amber-50/50 to-white flex items-center justify-center p-4" dir="rtl">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          className="bg-white rounded-3xl shadow-xl border border-gray-200 p-10 max-w-md w-full text-center"
+        >
+          <div className="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6">
+            <Lock className="w-10 h-10 text-amber-600" />
+          </div>
+          <h2 className="text-2xl font-bold text-gray-900 mb-3">المدفوعات</h2>
+          <p className="text-gray-600 leading-relaxed mb-8">
+            دفعاتك مرتبطة بحاسبك لذلك يرجى تسجيل الدخول أولاً
+          </p>
+          <Link
+            href="/login"
+            className="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-8 py-3 rounded-2xl text-lg font-semibold transition shadow-lg shadow-amber-200"
+          >
+            <LogIn className="w-5 h-5" />
+            تسجيل الدخول
+          </Link>
+        </motion.div>
+      </div>
+    );
+  }
+
   const canPay = (status) => STATUS_MAP[status] === 'pending' || STATUS_MAP[status] === 'ownerConfirmed';
 
   return (