add jsdoc

client/src/Components/MonitorDetailsControlHeader/index.jsx

@@ -11,7 +11,20 @@ import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
 import { usePauseMonitor } from "../../Hooks/useMonitorControls";
-import { useEffect } from "react";
+
+/**
+ * MonitorDetailsControlHeader component displays the control header for monitor details.
+ * It includes status display, pause/resume button, and a configure button for admins.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.path - The base path for navigation
+ * @param {boolean} [props.isLoading=false] - Flag indicating if the data is loading
+ * @param {boolean} [props.isAdmin=false] - Flag indicating if the user is an admin
+ * @param {Object} props.monitor - The monitor object containing details
+ * @param {Function} props.triggerUpdate - Function to trigger an update
+ * @returns {JSX.Element} The rendered component
+ */
 const MonitorDetailsControlHeader = ({
 	path,
 	isLoading = false,

client/src/Components/MonitorDetailsControlHeader/status.jsx

@@ -9,6 +9,18 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
 
+/**
+ * Status component displays the status information of a monitor.
+ * It includes the monitor's name, URL, and check interval.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {Object} props.monitor - The monitor object containing details
+ * @param {string} props.monitor.name - The name of the monitor
+ * @param {string} props.monitor.url - The URL of the monitor
+ * @param {number} props.monitor.interval - The interval at which the monitor checks
+ * @returns {JSX.Element} The rendered component
+ */
 const Status = ({ monitor }) => {
 	const theme = useTheme();
 	const { statusColor, determineState } = useUtils();