code clean up for inspections run

frontend/src/manager-components/inspection_run/DrivingInstructionsBox.jsx

@@ -3,7 +3,9 @@ import { Accordion, AccordionSummary, AccordionDetails, List, ListItem, Typograp
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 
-
+/* Helps display the itinerary on the side of the map modal
+Inputs: Itinerary (list of locations), legDurations (time for each location)
+Output: list of locations and the journey time */
 const DrivingInstructionsBox = ({ itinerary,  legDurations }) => {
   return (
     <Accordion defaultExpanded sx={{ width: "30%" }}>
@@ -23,7 +25,7 @@ const DrivingInstructionsBox = ({ itinerary,  legDurations }) => {
             <ListItem>
               <Typography variant="body1">{place}</Typography>
             </ListItem>
-            {index < itinerary.length - 1 && ( // Add the arrow and divider only between items
+            {index < itinerary.length - 1 && (
               <>
                 <Divider
                   sx={{

frontend/src/manager-components/inspection_run/InspectionRun.jsx

@@ -5,7 +5,6 @@ import {
   Table,
   TableBody,
   TableCell,
-  TableContainer,
   TableHead,
   TableRow,
   tableCellClasses,
@@ -16,6 +15,14 @@ import { styled } from "@mui/material/styles";
 import NavigationMenu from "../navigation_menu/NavigationMenus";
 import MapComponent from "./MapNav";
 
+/* Shows the inspection runs that a property manager might have. 
+
+Shows the name of the manager, location of inspection, date and time, duration and button to show route
+
+Route is not shown if only one inspection 
+
+Allows input of origin and destination in map modal
+*/
 const InspectionRun = () => {
   const [activeSection, setActiveSection] = useState("inspection");
   const [inspectionsData, setInspectionsData] = useState([]);
@@ -108,7 +115,8 @@ const InspectionRun = () => {
   const fullAddress = (number, name, type, suburb, state) => {
     return `${number} ${name} ${type}, ${suburb}, ${state}`;
   };
-
+
+// handles showing routes
   const handleShowRoute = (propertyManagerId) => {
     setSelectedPropertyManagerId(propertyManagerId);
     // Filter inspections based on the selected property manager ID
@@ -127,6 +135,7 @@ const InspectionRun = () => {
     }
 
   };
+  // if only one property address
   const isShowRouteDisabled = (propertyManagerId) => {
     const filteredInspections = inspectionsData.filter(
       (inspection) =>
@@ -162,7 +171,7 @@ const InspectionRun = () => {
       setMapData({ origin, destination, waypoints });
     }
   };
-
+// handling for map modal
   const handleCloseModal = () => {
     setOpenModal(false); // Close the modal when user clicks outside or on close button
   };
@@ -313,7 +322,7 @@ const InspectionRun = () => {
             value={selectedOrigin}
             onChange={(e) => setSelectedOrigin(e.target.value)}
             style={{
-              width: "100%", // Full width on smaller screens
+              width: "100%",
               padding: "8px",
               fontSize: "1rem",
             }}
@@ -378,7 +387,7 @@ const InspectionRun = () => {
         <Button
           variant="contained"
           onClick={handleSaveRoute}
-          style={{ marginTop: '20px', width: "100%" }} // Full width button
+          style={{ marginTop: '20px', width: "100%" }} 
         >
           Show Route on Map
         </Button>
@@ -387,7 +396,7 @@ const InspectionRun = () => {
         origin={mapData.origin}
         destination={mapData.destination}
         waypoints={mapData.waypoints}
-        style={{ flex: 1, minHeight: "300px" }} // Ensuring the map takes space
+        style={{ flex: 1, minHeight: "300px" }} 
       />
     </div>
   </Box>

frontend/src/manager-components/inspection_run/MapNav.jsx

@@ -9,9 +9,10 @@ import DrivingInstructionsBox from "./DrivingInstructionsBox";
 const ACCESS_TOKEN =
   "pk.eyJ1IjoicGRldjAwMTAiLCJhIjoiY2x6ajVxNG1nMG4xOTJucTE1MHY4bDF2bCJ9.HfHy4wIk1KMg658ISOLoRQ";
 
+// to allow conversion of string address to coords for placing markers
 const geocodingClient = mbxGeocoding({ accessToken: ACCESS_TOKEN });
 
-// Updated getCoordinates function to return index along with coordinates
+// getCoordinates function to return index along with coordinates
 const getCoordinates = async (addresses) => {
   try {
     const coordinatePromises = addresses.map((address, index) =>
@@ -41,8 +42,7 @@ const getCoordinates = async (addresses) => {
   }
 };
 
-// New optimizeRoute function to reorder coordinates
-// Updated optimizeRoute function to retain addresses
+// optimizeRoute function to retain addresses
 const optimizeRoute = async (coords) => {
   const coordinatesStr = coords.map((c) => c.coordinates.join(",")).join(";");
   const url = `https://api.mapbox.com/optimized-trips/v1/mapbox/driving/${coordinatesStr}?access_token=${ACCESS_TOKEN}&source=first&destination=last`;
@@ -65,12 +65,15 @@ const optimizeRoute = async (coords) => {
   return coords; // Return original if optimization fails
 };
 
+/* Renders Map on the screen 
+Inputs: Origin (property), Destination (property), and list of waypoints (properties)
+Output: A map with markers on each location */
 const MapComponent = ({ origin, destination, waypoints }) => {
   const [coords, setCoords] = useState([]);
   const [itinerary, setItinerary] = useState([]); // State for the itinerary
   const [legDurations, setLegDurations] = useState([]); // State for the leg durations
 
-  // Updated useEffect to fetch and optimize coordinates
+  // useEffect to fetch and optimize coordinates
   useEffect(() => {
     const fetchAndOptimizeCoordinates = async () => {
       const rawCoords = await getCoordinates([origin, ...waypoints, destination]);