Fix post-login: re-read user role on every route change

- ClientLayout: separated user loading into useEffect with pathname dependency
- Homepage: same fix - re-read user from JWT on route change
- Fixes issue where navbar/dashboard links didn't appear until page reload

app/ClientLayout.js

@@ -57,7 +57,17 @@ export default function ClientLayout({ children }) {
     setCurrentLanguage(savedLanguage);
     i18n.changeLanguage(savedLanguage);
 
-    // Load user from JWT via AuthService
+    if (savedLanguage === "ar") {
+      document.documentElement.dir = "rtl";
+      document.documentElement.lang = "ar";
+    } else {
+      document.documentElement.dir = "ltr";
+      document.documentElement.lang = "en";
+    }
+  }, [i18n]);
+
+  // Re-read user from JWT on every route change (handles post-login)
+  useEffect(() => {
     const authUser = AuthService.getUser();
     if (authUser) {
       setUser({
@@ -71,15 +81,7 @@ export default function ClientLayout({ children }) {
     } else {
       setUser(null);
     }
-
+  }, [pathname]);
-    if (savedLanguage === "ar") {
-      document.documentElement.dir = "rtl";
-      document.documentElement.lang = "ar";
-    } else {
-      document.documentElement.dir = "ltr";
-      document.documentElement.lang = "en";
-    }
-  }, [i18n]);
 
   useEffect(() => {
     const handleClickOutside = (event) => {

app/page.js

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
+import { usePathname } from 'next/navigation';
 import {
   ShieldCheck,
   Lock,
@@ -96,11 +97,12 @@ export default function HomePage() {
   const [user, setUser] = useState(null);
   const [showUserMenu, setShowUserMenu] = useState(false);
   const menuRef = useRef(null);
+  const pathname = usePathname();
 
   const [allProperties, setAllProperties] = useState([]);
   const [loading, setLoading] = useState(true);
 
-  // Fetch properties from API on mount
+  // Re-read user from JWT on every route change
   useEffect(() => {
     const authUser = AuthService.getUser();
     if (authUser) {
@@ -109,7 +111,13 @@ export default function HomePage() {
         email: authUser.email,
         role: AuthService.isOwner() ? 'owner' : 'customer',
       });
+    } else {
+      setUser(null);
     }
+  }, [pathname]);
+
+  // Fetch properties from API on mount
+  useEffect(() => {
 
     async function fetchProperties() {
       try {