added contacts and addresses manager

frontend/src/App.tsx

@@ -1,25 +1,53 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import ResponsiveAppBar from './components/ResponsiveAppBar';
 import ShipmentView from './pages/ShipmentView';
-import HomePage from './pages/HomeView'; // Assuming this is a default export
+import HomePage from './pages/HomeView';
 import ResultsView from './pages/ResultsView';
 import PlanningView from './pages/PlanningView';
-import ContactsManager from './pages/ContactsManagerView';
+import Modal from './components/Modal';
 import AddressManager from './pages/AddressManagerView';
+import ContactsManager from './pages/ContactsManagerView';
 
 const App: React.FC = () => {
+    const [openAddressManager, setOpenAddressManager] = useState(false);
+    const [openContactsManager, setOpenContactsManager] = useState(false);
+
+    const handleOpenAddressManager = () => {
+        setOpenAddressManager(true);
+    };
+
+    const handleCloseAddressManager = () => {
+        setOpenAddressManager(false);
+    };
+
+    const handleOpenContactsManager = () => {
+        setOpenContactsManager(true);
+    };
+
+    const handleCloseContactsManager = () => {
+        setOpenContactsManager(false);
+    };
+
     return (
         <Router>
-            <ResponsiveAppBar />
+            <ResponsiveAppBar
+                onOpenAddressManager={handleOpenAddressManager}
+                onOpenContactsManager={handleOpenContactsManager}
+            />
             <Routes>
                 <Route path="/" element={<HomePage />} />
                 <Route path="/shipments" element={<ShipmentView />} />
                 <Route path="/planning" element={<PlanningView />} />
                 <Route path="/results" element={<ResultsView />} />
-                <Route path="/contacts_manager" element={<ContactsManager />} />
-                <Route path="/addresses_manager" element={<AddressManager />} />
+                {/* Other routes as necessary */}
             </Routes>
+            <Modal open={openAddressManager} onClose={handleCloseAddressManager} title="Address Management">
+                <AddressManager />
+            </Modal>
+            <Modal open={openContactsManager} onClose={handleCloseContactsManager} title="Contacts Management">
+                <ContactsManager />
+            </Modal>
         </Router>
     );
 };