I hope everything work. Cross fingers.

src/api/queries.ts

@@ -41,6 +41,44 @@ export const createUser = (
     })
     .then((res) => res.data);
 
+export const createPassenger = (
+  passenger: {
+    fields: {
+      "First Name": string;
+      "Last Name": string;
+      Relationship:
+        | "Mother"
+        | "Father"
+        | "Step-mother"
+        | "Step-father"
+        | "Legal Guardian"
+        | "Spouse"
+        | "Family Member"
+        | "Other Caregiver";
+      "Date of Birth": Date | string;
+      Diagnoses?: (string | undefined)[];
+      Gender: "Male" | "Female" | "Other";
+      Street: string;
+      City: string;
+      State: string;
+      Zip: string;
+      Country: string;
+      "Cell Phone": string;
+      Email: string;
+      Waiver: boolean;
+    };
+  },
+  userId: string,
+  token?: string | null,
+): Promise<PassengerData> =>
+  axios
+    .post(`${process.env.VITE_HOST}/passenger/${userId}`, passenger, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+    .then((res) => res.data);
+
 export const linkUser = (
   airtableRecordId: string,
   token?: string | null,

src/pages/PassengersPage/PassengersPage.module.css

@@ -29,6 +29,8 @@
   font-weight: 700;
   color: var(--miracle-color-dark);
   margin-top: 2rem;
+  display: flex;
+  align-items: center;
 }
 
 .description {
@@ -43,8 +45,14 @@
   justify-content: space-evenly;
   justify-content: flex-start;
   margin-top: 2rem;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .passengerCard {
   margin-right: 3rem;
 }
+
+.plusButton {
+  margin-left: 0.5rem;
+}

src/pages/PassengersPage/PassengersPage.tsx

@@ -1,6 +1,7 @@
 import styles from "./PassengersPage.module.css";
 import PatientCard from "./components/PatientCard/PatientCard";
 import PassengerCard from "./components/PassengerCard/PassengerCard";
+import PlusButton from "./components/AddPassengerModal/PlusButton";
 import { getAccompanyingPassengers, getPassengers } from "../../api/queries";
 import { useUserContext } from "../../context/User.context";
 import { useNavigationContext } from "../../context/Navigation.context";
@@ -9,7 +10,6 @@ import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "@clerk/clerk-react";
 import { useEffect } from "react";
 import type { PassengerData } from "../../interfaces/passenger.interface";
-import PlusButton from "./components/AddPassengerModal/PlusButton";
 
 const PassengersPage = () => {
   const { getToken } = useAuth();
@@ -65,9 +65,13 @@ const PassengersPage = () => {
           </div>
         </div>
         <div className={styles.passengerSection}>
-          <div className={styles.passengerSectionHeader}> 
-            <h3 className={styles.subheader}>Companion Information</h3>
-            <PlusButton /> 
+          <div className={styles.passengerSectionHeader}>
+            <h3 className={styles.subheader}>
+              Companion Information
+              <div className={styles.plusButton}>
+                <PlusButton />
+              </div>{" "}
+            </h3>
           </div>
           <h5 className={styles.description}>
             Companions of {passengerData["First Name"]}

src/pages/PassengersPage/components/AddPassengerModal/AddPassengerModal.definitions.ts

@@ -10,8 +10,8 @@ export type FormData = {
     | "Spouse"
     | "Family Member"
     | "Other Caregiver";
-  "Date of Birth": Date;
-  Diagnoses?: string[];
+  "Date of Birth": Date | string;
+  Diagnoses?: (string | undefined)[];
   Gender: "Male" | "Female" | "Other";
   Street: string;
   City: string;

src/pages/PassengersPage/components/AddPassengerModal/AddPassengerModal.module.css

@@ -1,3 +1,13 @@
-/* .plus-button {
-  size: 10px;
-} */
+.inputList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.errorMessage {
+  color: red;
+  margin-top: 0.2rem;
+  text-align: center;
+  font-size: medium;
+}