Connected frontend shipments to backend

frontend/src/App.tsx

@@ -1,11 +1,22 @@
 import React from 'react';
-import ResponsiveAppBar from './components/ResponsiveAppBar.tsx';
+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 ResultsView from './pages/ResultsView';
+import PlanningView from './pages/PlanningView';
 
 const App: React.FC = () => {
     return (
-        <div>
+        <Router>
             <ResponsiveAppBar />
-        </div>
+            <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/shipments" element={<ShipmentView />} />
+                <Route path="/planning" element={<PlanningView />} />
+                <Route path="/results" element={<ResultsView />} />
+            </Routes>
+        </Router>
     );
 };