Merge pull request #31 from ChangePlusPlusVandy/passenger-card

Passenger card

src/pages/PassengersPage/PassengersPage.module.css

@@ -36,32 +36,15 @@
   color: var(--miracle-color-medium-dark);
   margin-top: 0.5rem;
 }
-table {
-  table-layout: fixed;
-  margin-top: 1rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.tableHead {
-  border: none;
-  font-size: 1rem;
-}
 
-tr {
+.passengersContainer {
   display: flex;
-  border: 1px solid gray;
-  margin-bottom: 1rem;
-}
-
-th,
-td {
-  flex: 1;
-  padding: 1rem;
-  text-align: center;
+  flex-direction: row;
+  justify-content: space-evenly;
+  justify-content: flex-start;
+  margin-top: 2rem;
 }
 
-th {
-  font-weight: 500;
-  color: var(--miracle-color-gray);
+.passengerCard {
+  margin-right: 3rem;
 }

src/pages/PassengersPage/PassengersPage.tsx

@@ -1,5 +1,6 @@
 import styles from "./PassengersPage.module.css";
 import PatientCard from "./components/PatientCard/PatientCard";
+import PassengerCard from "./components/PassengerCard/PassengerCard";
 import { createTestPassengerData } from "../../util/test-data.util";
 import { useMemo } from "react";
 import type { PassengerData } from "../../interfaces/passenger.interface";
@@ -65,24 +66,13 @@ const PassengersPage = () => {
           <h5 className={styles.description}>
             Companions of {generalInfo["First Name"]}
           </h5>
-          <table>
-            <tr className={styles.tableHead}>
-              <th>Name</th>
-              <th>Relationship</th>
-              <th>Notes</th>
-            </tr>
-            {generalInfo.Passengers.map((passenger, index) => (
-              <tr key={index}>
-                <td>{passenger}</td>
-                <td>{index % 2 == 1 ? "Mother" : "Brother"}</td>
-                <td>
-                  {index % 2 == 1
-                    ? "Helps with medication"
-                    : "Likes to fly window seat"}
-                </td>
-              </tr>
+          <div className={styles.passengersContainer}>
+            {generalInfo.Passengers.map((index) => (
+              <div className={styles.passengerCard} key={index}>
+                <PassengerCard passenger={createTestPassengerData()} />
+              </div>
             ))}
-          </table>
+          </div>
         </div>
       </div>
     </>

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

@@ -0,0 +1,5 @@
+import type { PassengerData } from "../../../../interfaces/passenger.interface";
+
+export interface PassengerCardProps {
+  passenger: PassengerData;
+}

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

@@ -0,0 +1,50 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 15rem;
+  height: 15rem;
+  padding: 2rem;
+  border: 0.05rem solid var(--miracle-color-gray);
+  border-radius: 1rem;
+  background: var(--passenger-card-gradient);
+}
+.container:hover {
+  background: var(--passenger-card-gradient-hover);
+  cursor: pointer;
+}
+.line {
+  width: 25%;
+  height: 0.05rem;
+  background: var(--miracle-color-gray);
+  margin: 0.5rem 0;
+}
+
+.name {
+  font-size: 1.5rem;
+  font-weight: 300;
+  color: var(--miracle-color-dark);
+  margin-top: 1rem;
+}
+
+.relationship {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: var(--miracle-color-medium);
+}
+
+.birthContainer {
+  display: flex;
+  flex-direction: column;
+  margin-top: 3rem;
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: 300;
+  color: var(--miracle-color-medium);
+}
+
+.birth {
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}

src/pages/PassengersPage/components/PassengerCard/PassengerCard.tsx

@@ -0,0 +1,34 @@
+import styles from "./PassengerCard.module.css";
+import PassengerDetailsModal from "../PassengerDetailsModal/PassengerDetailsModal";
+import { useState } from "react";
+import type { PassengerCardProps } from "./PassengerCard.definitions";
+
+const PassengerCard = ({ passenger }: PassengerCardProps) => {
+  const [modal, setModal] = useState(false);
+
+  const name = passenger["Full Name"];
+  const relationship = "Mother";
+  const birth = passenger["Date of Birth"].split("T")[0];
+
+  return (
+    <>
+      {modal && (
+        <PassengerDetailsModal
+          passenger={passenger}
+          onClose={() => setModal(false)}
+        />
+      )}
+      <div className={styles.container} onClick={() => setModal(true)}>
+        <div className={styles.line} />
+        <div className={styles.name}>{name}</div>
+        <div className={styles.relationship}>{relationship}</div>
+        <div className={styles.birthContainer}>
+          <p className={styles.title}>Date of Birth</p>
+          <span className={styles.birth}>{birth}</span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PassengerCard;

src/pages/PassengersPage/components/PassengerCard/tests/PassengerCard.test.tsx

@@ -0,0 +1,19 @@
+import { createTestPassengerData } from "../../../../../util/test-data.util";
+import PassengerCard from "../PassengerCard";
+import { render } from "@testing-library/react";
+
+describe("Passenger Card", () => {
+  it("should render correctly", () => {
+    const mockProps = {
+      passenger: createTestPassengerData(),
+    };
+
+    const component = render(<PassengerCard {...mockProps} />);
+    expect(component).toBeTruthy();
+
+    expect(component.getByText(mockProps.passenger["Full Name"])).toBeTruthy();
+    expect(
+      component.getByText(mockProps.passenger["Date of Birth"].split("T")[0]),
+    ).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,6 @@
+import type { PassengerData } from "../../../../interfaces/passenger.interface";
+
+export interface PassengerDetailsModalProps {
+  passenger: PassengerData;
+  onClose: () => void;
+}

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

@@ -0,0 +1,30 @@
+.passengerText {
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--miracle-color-gray);
+}
+
+.passengerLabel {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--miracle-color-medium);
+  margin-bottom: 0.5rem;
+}
+
+.passengerGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.marginBottom {
+  margin-bottom: 1rem;
+}
+
+.passengerRow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2rem; /* Adjust the value as needed */
+}

src/pages/PassengersPage/components/PassengerDetailsModal/PassengerDetailsModal.tsx

@@ -0,0 +1,73 @@
+import styles from "./PassengerDetailsModal.module.css";
+import Modal from "../../../../components/Modal/Modal";
+import type { PassengerDetailsModalProps } from "./PassengerDetailsModal.definitions";
+
+const PassengerDetailsModal = ({
+  passenger,
+  onClose,
+}: PassengerDetailsModalProps) => {
+  return (
+    <>
+      <Modal
+        body={
+          <>
+            <div className={`${styles.passengerRow} ${styles.marginBottom}`}>
+              <div>
+                <span className={styles.passengerLabel}>Gender</span>{" "}
+                <span className={styles.passengerText}>
+                  {passenger["Gender"]}
+                </span>
+              </div>
+              <div>
+                <span className={styles.passengerLabel}>DOB</span>{" "}
+                <span className={styles.passengerText}>
+                  {passenger["Date of Birth"].split("T")[0]}{" "}
+                </span>
+              </div>
+            </div>
+            {/* make another passenger group for address where each line of the address is separated */}
+            <div className={styles.passengerGroup}>
+              <span className={styles.passengerLabel}>Address</span>{" "}
+              <span className={styles.passengerText}>
+                {passenger["Street"]}
+              </span>
+              <span className={styles.passengerText}>
+                {passenger["Country"]}
+              </span>
+            </div>
+            <div className={styles.passengerGroup}>
+              <span className={styles.passengerLabel}>Military</span>{" "}
+              <span className={styles.passengerText}>
+                {passenger["Military Service"]}
+              </span>
+            </div>
+            <div className={styles.passengerRow}>
+              <div className={styles.passengerGroup}>
+                <span className={styles.passengerLabel}># of Flight Legs</span>{" "}
+                <span className={styles.passengerText}>
+                  {passenger["# of Flight Legs"]}
+                </span>
+              </div>
+              <div className={styles.passengerGroup}>
+                <span className={styles.passengerLabel}>
+                  # of Booked Flight Requests
+                </span>{" "}
+                <span className={styles.passengerText}>
+                  {passenger["# of Booked Flight Requests"]}
+                </span>
+              </div>
+            </div>
+            <div className={styles.passengerGroup}>
+              <span className={styles.passengerLabel}>Notes</span>
+              <span className={styles.passengerText}>Notes go here</span>
+            </div>
+          </>
+        }
+        header={passenger["Full Name"]}
+        action={onClose}
+      />
+    </>
+  );
+};
+
+export default PassengerDetailsModal;

src/pages/PassengersPage/components/PassengerDetailsModal/tests/PassengerDetailsModal.test.tsx

@@ -0,0 +1,30 @@
+import { createTestPassengerData } from "../../../../../util/test-data.util";
+import PassengerDetailsModal from "../PassengerDetailsModal";
+import { render, fireEvent } from "@testing-library/react";
+
+describe("PassengerDetailsModal", () => {
+  const mockOnClose = jest.fn();
+  const mockPatient = createTestPassengerData();
+
+  it("renders patient details correctly", () => {
+    const { getByText } = render(
+      <PassengerDetailsModal passenger={mockPatient} onClose={mockOnClose} />,
+    );
+
+    expect(getByText("Gender")).toBeTruthy();
+    expect(getByText(mockPatient.Gender)).toBeTruthy();
+    expect(getByText("DOB")).toBeTruthy();
+    expect(getByText(mockPatient["Date of Birth"].split("T")[0])).toBeTruthy();
+    // Add similar checks for other fields
+  });
+
+  it("calls onClose when the modal action is triggered", () => {
+    const component = render(
+      <PassengerDetailsModal passenger={mockPatient} onClose={mockOnClose} />,
+    );
+
+    fireEvent.click(component.getByTestId("modal-close")); // Assuming the action triggers on a button click
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+});