+ {eventInfo.event.title}
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+export default Calendar;
diff --git a/frontend/src/components/DewarDetails.tsx b/frontend/src/components/DewarDetails.tsx
new file mode 100644
index 0000000..a5471c1
--- /dev/null
+++ b/frontend/src/components/DewarDetails.tsx
@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { Box, Typography, TextField, Button, Select, MenuItem, Snackbar } from '@mui/material';
+import QRCode from 'react-qr-code';
+import { Dewar, ContactPerson, Address } from '../types.ts';
+
+interface DewarDetailsProps {
+ dewar: Dewar | null;
+ trackingNumber: string;
+ setTrackingNumber: React.DispatchBeamline Calendar
+
+
+ )}
+ Event Details
+Beamline: {eventDetails.beamline}
+Shift: {eventDetails.beamtime_shift}
+ +Select Dewars
+-
+ {shipments.map(dewar => (
+
- + handleDewarSelection(dewar.id)} + /> + + + ))} +
User Information
+ +
+
+
+
+
+ 
+
+
+ Heidi v2
+
+
+
+
+
+
+
+ {pages.map((page) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ {selectedPage === 'Shipments' && (
+
+
+ );
+};
+
+export default ResponsiveAppBar;
diff --git a/frontend/src/components/ShipmentDetails.tsx b/frontend/src/components/ShipmentDetails.tsx
new file mode 100644
index 0000000..7f9577f
--- /dev/null
+++ b/frontend/src/components/ShipmentDetails.tsx
@@ -0,0 +1,308 @@
+import React from 'react';
+import { Box, Typography, Button, Stack, TextField } from '@mui/material';
+import ShipmentForm from './ShipmentForm.tsx';
+import DewarDetails from './DewarDetails.tsx';
+import { Shipment, Dewar, ContactPerson, Proposal, Address } from '../types.ts';
+import { SxProps } from '@mui/system';
+import QRCode from 'react-qr-code';
+import bottleGrey from '../assets/icons/bottle-svgrepo-com-grey.svg';
+import bottleYellow from '../assets/icons/bottle-svgrepo-com-yellow.svg';
+import bottleGreen from '../assets/icons/bottle-svgrepo-com-green.svg';
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import AirplanemodeActiveIcon from "@mui/icons-material/AirplanemodeActive";
+import StoreIcon from "@mui/icons-material/Store";
+import DeleteIcon from "@mui/icons-material/Delete"; // Import delete icon
+
+interface ShipmentDetailsProps {
+ selectedShipment: Shipment | null;
+ setSelectedDewar: React.Dispatch