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>
     );
 };

frontend/src/components/Modal.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
+
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({ open, onClose, title, children }) => {
+    return (
+        <Dialog open={open} onClose={onClose} fullWidth maxWidth="md">
+            <DialogTitle>{title}</DialogTitle>
+            <DialogContent>
+                {children}
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} color="primary">
+                    Close
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default Modal;

frontend/src/components/ResponsiveAppBar.tsx

@@ -11,11 +11,15 @@ import Container from '@mui/material/Container';
 import Avatar from '@mui/material/Avatar';
 import Tooltip from '@mui/material/Tooltip';
 import { Button } from '@mui/material';
-import { Link } from 'react-router-dom'; // Import Link for navigation
+import { Link } from 'react-router-dom';
 import logo from '../assets/icons/psi_01_sn.svg';
 import '../App.css';
 
-// Page definitions for navigation
+interface ResponsiveAppBarProps {
+    onOpenAddressManager: () => void;
+    onOpenContactsManager: () => void;
+}
+
 const pages = [
     { name: 'Home', path: '/' },
     { name: 'Shipments', path: '/shipments' },
@@ -23,15 +27,14 @@ const pages = [
     { name: 'Results', path: '/results' }
 ];
 
-// User menu items
 const userMenuItems = [
-    { name: 'My Contacts', path: '/contacts_manager' },
-    { name: 'My Addresses', path: '/addresses_manager' },
+    { name: 'My Contacts', action: 'contacts' },
+    { name: 'My Addresses', action: 'addresses' },
     { name: 'DUO', path: '/duo' },
     { name: 'Logout', path: '/logout' }
 ];
 
-const ResponsiveAppBar: React.FC = () => {
+const ResponsiveAppBar: React.FC<ResponsiveAppBarProps> = ({ onOpenAddressManager, onOpenContactsManager }) => {
     const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
     const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
 
@@ -51,12 +54,20 @@ const ResponsiveAppBar: React.FC = () => {
         setAnchorElUser(null);
     };
 
+    const handleMenuItemClick = (action: string) => {
+        if (action === 'contacts') {
+            onOpenContactsManager();
+        } else if (action === 'addresses') {
+            onOpenAddressManager();
+        }
+        handleCloseUserMenu();
+    };
+
     return (
         <div>
             <AppBar position="static" sx={{ backgroundColor: '#2F4858' }}>
                 <Container maxWidth="xl">
                     <Toolbar disableGutters>
-                        {/* Logo and Title */}
                         <Link to="/" style={{ textDecoration: 'none' }}>
                             <img src={logo} height="50px" alt="PSI logo" />
                         </Link>
@@ -77,7 +88,6 @@ const ResponsiveAppBar: React.FC = () => {
                             Heidi v2
                         </Typography>
 
-                        {/* Mobile Menu */}
                         <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
                             <IconButton
                                 size="large"
@@ -112,12 +122,11 @@ const ResponsiveAppBar: React.FC = () => {
                             </Menu>
                         </Box>
 
-                        {/* Desktop Menu */}
                         <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
                             {pages.map((page) => (
                                 <Button
                                     key={page.name}
-                                    component={Link} // Make button a Link
+                                    component={Link}
                                     to={page.path}
                                     sx={{ my: 2, color: 'white', display: 'block', fontSize: '1rem', padding: '12px 24px' }}
                                 >
@@ -126,7 +135,6 @@ const ResponsiveAppBar: React.FC = () => {
                             ))}
                         </Box>
 
-                        {/* User Settings Menu */}
                         <Box sx={{ flexGrow: 0 }}>
                             <Tooltip title="Open settings">
                                 <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
@@ -149,13 +157,19 @@ const ResponsiveAppBar: React.FC = () => {
                                 open={Boolean(anchorElUser)}
                                 onClose={handleCloseUserMenu}
                             >
-                                {userMenuItems.map((item) => (
-                                    <MenuItem key={item.name} onClick={handleCloseUserMenu}>
-                                        <Link to={item.path} style={{ textDecoration: 'none', color: 'inherit' }}>
+                                {userMenuItems.map((item) =>
+                                    item.action ? (
+                                        <MenuItem key={item.name} onClick={() => handleMenuItemClick(item.action)}>
                                             {item.name}
-                                        </Link>
-                                    </MenuItem>
-                                ))}
+                                        </MenuItem>
+                                    ) : (
+                                        <MenuItem key={item.name} onClick={handleCloseUserMenu}>
+                                            <Link to={item.path} style={{ textDecoration: 'none', color: 'inherit' }}>
+                                                {item.name}
+                                            </Link>
+                                        </MenuItem>
+                                    )
+                                )}
                             </Menu>
                         </Box>
                     </Toolbar>