**Commit Message:**

Enhance app with active pgroup handling and token updates

Added active pgroup state management across the app for user-specific settings. Improved token handling with decoding, saving user data, and setting OpenAPI authorization. Updated components, API calls, and forms to support dynamic pgroup selection and user-specific features.

frontend/src/App.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { setUpToken, clearToken } from './utils/auth'; // Import the token utilities
 
 import ResponsiveAppBar from './components/ResponsiveAppBar';
 import ShipmentView from './pages/ShipmentView';
@@ -16,38 +17,77 @@ const App: React.FC = () => {
     const [openAddressManager, setOpenAddressManager] = useState(false);
     const [openContactsManager, setOpenContactsManager] = useState(false);
 
-    const handleOpenAddressManager = () => {
-        setOpenAddressManager(true);
-    };
+    const handleOpenAddressManager = () => setOpenAddressManager(true);
+    const handleCloseAddressManager = () => setOpenAddressManager(false);
+    const handleOpenContactsManager = () => setOpenContactsManager(true);
+    const handleCloseContactsManager = () => setOpenContactsManager(false);
 
-    const handleCloseAddressManager = () => {
-        setOpenAddressManager(false);
-    };
+    const [pgroups, setPgroups] = useState<string[]>([]);
+    const [activePgroup, setActivePgroup] = useState<string>('');
 
-    const handleOpenContactsManager = () => {
-        setOpenContactsManager(true);
-    };
+    // On app load, configure the token
+    useEffect(() => {
+        setUpToken(); // Ensure token is loaded into OpenAPI on app initialization
+    }, []);
 
-    const handleCloseContactsManager = () => {
-        setOpenContactsManager(false);
+    useEffect(() => {
+        const updateStateFromLocalStorage = () => {
+            const user = localStorage.getItem('user');
+            console.log("[DEBUG] User data in localStorage (update):", user); // Debug
+            if (user) {
+                try {
+                    const parsedUser = JSON.parse(user);
+                    if (parsedUser.pgroups && Array.isArray(parsedUser.pgroups)) {
+                        setPgroups(parsedUser.pgroups);
+                        setActivePgroup(parsedUser.pgroups[0] || '');
+                        console.log("[DEBUG] Pgroups updated in state:", parsedUser.pgroups);
+                    } else {
+                        console.warn("[DEBUG] No pgroups found in user data");
+                    }
+                } catch (error) {
+                    console.error("[DEBUG] Error parsing user data:", error);
+                }
+            } else {
+                console.warn("[DEBUG] No user in localStorage");
+            }
+        };
+
+        // Run on component mount
+        updateStateFromLocalStorage();
+
+        // Listen for localStorage changes
+        window.addEventListener('storage', updateStateFromLocalStorage);
+
+        // Cleanup listener on unmount
+        return () => {
+            window.removeEventListener('storage', updateStateFromLocalStorage);
+        };
+    }, []);
+
+    const handlePgroupChange = (newPgroup: string) => {
+        setActivePgroup(newPgroup);
+        console.log(`pgroup changed to: ${newPgroup}`);
     };
 
     return (
         <Router>
             <ResponsiveAppBar
+                activePgroup={activePgroup}
                 onOpenAddressManager={handleOpenAddressManager}
                 onOpenContactsManager={handleOpenContactsManager}
+                pgroups={pgroups || []} // Default to an empty array
+                currentPgroup={activePgroup}
+                onPgroupChange={handlePgroupChange}
             />
             <Routes>
                 <Route path="/login" element={<LoginView />} />
                 <Route path="/" element={<ProtectedRoute element={<HomePage />} />} />
-                <Route path="/shipments" element={<ProtectedRoute element={<ShipmentView />} />} />
+                <Route path="/shipments" element={<ProtectedRoute element={<ShipmentView activePgroup={activePgroup} />} />} />
                 <Route path="/planning" element={<ProtectedRoute element={<PlanningView />} />} />
                 <Route path="/results" element={<ProtectedRoute element={<ResultsView />} />} />
-                {/* Other routes as necessary */}
             </Routes>
             <Modal open={openAddressManager} onClose={handleCloseAddressManager} title="Address Management">
-                <AddressManager />
+                <AddressManager pgroups={pgroups} activePgroup={activePgroup} />
             </Modal>
             <Modal open={openContactsManager} onClose={handleCloseContactsManager} title="Contacts Management">
                 <ContactsManager />