updates on the api integration and the design changes on the whole website

src/App.js

@@ -15,6 +15,28 @@ import useInactivityLogout from 'hooks/useInactivityLogout';
 // auth-provider
 // import { JWTProvider as AuthProvider } from 'contexts/JWTContext';
 
+// Defined at module scope, not inside App(), so it keeps a stable component
+// identity across App re-renders — nesting it inside App() meant every App
+// render created a brand-new AppContent function, which React treats as a
+// different component type and remounts (dropping Routes/Snackbar state and
+// re-running the FCM setup effect) on every re-render.
+const AppContent = () => {
+  useInactivityLogout();
+
+  useEffect(() => {
+    generateToken();
+    const unsubscribe = initFirebaseNotificationListener();
+    return () => unsubscribe?.();
+  }, []);
+
+  return (
+    <>
+      <Routes />
+      <Snackbar />
+    </>
+  );
+};
+
 // ==============================|| APP - THEME, ROUTER, LOCAL  ||============================== //
 
 const App = () => {
@@ -25,22 +47,6 @@ const App = () => {
     }
   }, [navigate]);
 
-  const AppContent = () => {
-    useInactivityLogout();
-
-    useEffect(() => {
-      generateToken();
-      initFirebaseNotificationListener();
-    }, []);
-
-    return (
-      <>
-        <Routes />
-        <Snackbar />
-      </>
-    );
-  };
-
   return (
     <>
       <ThemeCustomization>