Added proptypes and jsdocs

Client/src/Components/Check/Check.jsx

@@ -12,6 +12,7 @@ import { useTheme } from "@emotion/react";
  * @param {Object} props - The properties that define the `Check` component.
  * @param {string} props.text - The text to be displayed as the label next to the check icon.
  * @param {'info' | 'error' | 'success'} [props.variant='info'] - The variant of the check component, affecting its styling.
+ * @param {boolean} [props.outlined] - Whether the check icon should be outlined or not.
  *
  * @example
  * // To use this component, import it and use it in your JSX like this:
@@ -47,6 +48,7 @@ const Check = ({ text, variant = "info", outlined = false }) => {
 Check.propTypes = {
   text: PropTypes.string.isRequired,
   variant: PropTypes.oneOf(["info", "error", "success"]),
+  outlined: PropTypes.bool,
 };
 
 export default Check;

Client/src/Components/Fallback/index.jsx

@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Stack, Typography } from "@mui/material";
 import Skeleton from "../../assets/Images/create-placeholder.svg?react";
@@ -6,6 +7,17 @@ import Check from "../Check/Check";
 import { useNavigate } from "react-router-dom";
 import "./index.css";
 
+/**
+ * Fallback component to display a fallback UI with a title, a list of checks, and a navigation button.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.title - The title to be displayed in the fallback UI.
+ * @param {Array<string>} props.checks - An array of strings representing the checks to display.
+ * @param {string} [props.link="/"] - The link to navigate to.
+ *
+ * @returns {JSX.Element} The rendered fallback UI.
+ */
+
 const Fallback = ({ title, checks, link = "/" }) => {
   const theme = useTheme();
   const navigate = useNavigate();
@@ -17,10 +29,7 @@ const Fallback = ({ title, checks, link = "/" }) => {
     >
       <Skeleton />
       <Stack gap={theme.gap.small}>
-        <Typography
-          component="h1"
-          marginY={theme.gap.medium}
-        >
+        <Typography component="h1" marginY={theme.gap.medium}>
           A {title} is used to:
         </Typography>
         {checks.map((check, index) => (
@@ -41,4 +50,10 @@ const Fallback = ({ title, checks, link = "/" }) => {
   );
 };
 
+Fallback.propTypes = {
+  title: PropTypes.string.isRequired,
+  checks: PropTypes.arrayOf(PropTypes.string).isRequired,
+  link: PropTypes.string,
+};
+
 export default Fallback;