added the elmeent on the nav and fixed the payments transactions

app/ClientLayout.js

@@ -78,7 +78,7 @@ export default function ClientLayout({ children }) {
         name: authUser.name || authUser.email,
         email: authUser.email,
         phone: authUser.phone,
-        role: AuthService.isOwner() ? UserRole.OWNER : UserRole.CUSTOMER,
+        role: AuthService.isOwner() ? UserRole.OWNER : AuthService.isAgent() ? UserRole.AGENT : UserRole.CUSTOMER,
       });
     } else {
       setUser(null);
@@ -135,6 +135,8 @@ export default function ClientLayout({ children }) {
   const isProfilePage = pathname === "/profile";
 
   const isOwner = user?.role === UserRole.OWNER;
+  const isAgent = user?.role === UserRole.AGENT;
+  const isOwnerOrAgent = isOwner || isAgent;
   const isCustomer = user?.role === UserRole.CUSTOMER;
   const isAuthenticated = !!user;
 
@@ -718,7 +720,7 @@ export default function ClientLayout({ children }) {
           </main>
 
           {isAuthenticated && !isAuthPage && (
-            <BottomNav isOwner={isOwner} />
+            <BottomNav isOwner={isOwner} isOwnerOrAgent={isOwnerOrAgent} />
           )}
         </FavoritesProvider>
       </NotificationsProvider>

app/components/BottomNav.js

@@ -1,11 +1,11 @@
 "use client";
 
 import Link from "next/link";
-import { Home, Building, Calendar, Heart, Bell, Settings, CreditCard } from "lucide-react";
+import { Home, Building, Calendar, Heart, Bell, Settings, CreditCard, Briefcase } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { useNotifications } from "@/app/contexts/NotificationsContext";
 
-export default function BottomNav({ isOwner }) {
+export default function BottomNav({ isOwner, isOwnerOrAgent }) {
   const { unreadCount } = useNotifications();
   const [isMounted, setIsMounted] = useState(false);
   const bookingsHref = isOwner ? "/owner/reservations" : "/reservations";
@@ -17,6 +17,7 @@ export default function BottomNav({ isOwner }) {
   const items = [
     { href: "/", label: "الرئيسية", icon: Home },
     { href: "/properties", label: "عقاراتنا", icon: Building },
+    ...(isOwnerOrAgent ? [{ href: "/owner/properties", label: "عقاراتي", icon: Briefcase }] : []),
     { href: bookingsHref, label: "الحجوزات", icon: Calendar },
     { href: "/favorites", label: "المفضلة", icon: Heart },
     { href: "/payments", label: "المدفوعات", icon: CreditCard },

app/enums/UserRole.js

@@ -7,18 +7,21 @@ const UserRole = Object.freeze({
   GUEST: 'guest',
   CUSTOMER: 'customer',
   OWNER: 'owner',
+  AGENT: 'agent',
 });
 
 const UserRoleLabels = Object.freeze({
   [UserRole.GUEST]: 'زائر',
   [UserRole.CUSTOMER]: 'مستأجر',
   [UserRole.OWNER]: 'مالك عقار',
+  [UserRole.AGENT]: 'وسيط عقاري',
 });
 
 const UserRoleColors = Object.freeze({
   [UserRole.GUEST]: 'gray',
   [UserRole.CUSTOMER]: 'blue',
   [UserRole.OWNER]: 'amber',
+  [UserRole.AGENT]: 'purple',
 });
 
 export { UserRole, UserRoleLabels, UserRoleColors };

app/payments/page.js

@@ -159,7 +159,7 @@ import { motion } from 'framer-motion';
 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';
+import { payDeposit, getMyTransaction } from '@/app/utils/api';
 
 const STATUS_MAP = ['pending', 'ownerConfirmed', 'depositPaid', 'depositConfirmed', 'completed', 'cancelled'];
 
@@ -179,35 +179,10 @@ export default function PaymentsPage() {
   const [payingId, setPayingId] = useState(null);
   const [isGuest, setIsGuest] = useState(null);
 
-  const getAuthToken = () => {
-    if (typeof window === 'undefined') return '';
-    return (
-      AuthService?.getToken?.() ||
-      AuthService?.getAccessToken?.() ||
-      localStorage.getItem('token') ||
-      localStorage.getItem('accessToken') ||
-      localStorage.getItem('authToken') ||
-      ''
-    );
-  };
-
   const loadReservations = useCallback(async () => {
     try {
-      const token = getAuthToken();
-
-      const res = await fetch('http://45.93.137.91/api/Customer/GetMyTransaction', {
-        method: 'GET',
-        headers: {
-          ...(token ? { Authorization: `Bearer ${token}` } : {}),
-        },
-      });
-
-      if (!res.ok) {
-        throw new Error('فشل تحميل المدفوعات');
-      }
-
-      const json = await res.json();
-      const items = Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : [];
+      const data = await getMyTransaction();
+      const items = Array.isArray(data) ? data : [];
 
       const mapped = items.map((item) => {
         const deposit = item?.diposit || item?.deposit || {};

app/services/AuthService.js

@@ -126,12 +126,20 @@ const AuthService = Object.freeze({
     return this.getRoles().includes('Owner');
   },
 
+  /**
+   * User has RealEstateAgent role
+   * @returns {boolean}
+   */
+  isAgent() {
+    return this.getRoles().includes('RealEstateAgent');
+  },
+
   /**
    * Authenticated user without Owner role (i.e. customer)
    * @returns {boolean}
    */
   isCustomer() {
-    return this.isAuthenticated() && !this.isOwner();
+    return this.isAuthenticated() && !this.isOwner() && !this.isAgent();
   },
 
   /**

app/utils/api.js

@@ -1032,6 +1032,12 @@ export async function payDeposit(data) {
   });
 }
 
+export async function getMyTransaction() {
+  return apiFetch("/Customer/GetMyTransaction", {
+    method: "GET",
+  });
+}
+
 // ─── Owner Contact & Stats ───
 
 export async function getOwnerContactInformation(propertyInformationId) {