Frontend mostly finished

rise-dc-app/src/App.tsx

@@ -11,6 +11,8 @@ import InstructionPage from "./pages/cookbook/InstructionPage";
 import RecipeComplete from "./scheduling_components/pages/RecipeComplete";
 import GroceryList from "./pages/cookbook/GroceryList";
 import GroceryShopping from "./pages/cookbook/GroceryShopping";
+import StaffHome from "./pages/StaffHome";
+import EditParticipant from "./pages/EditParticipant";
 
 function App() {
   return (
@@ -37,6 +39,9 @@ function App() {
           element={<RecipeComplete />}
         />
         <Route path="/scheduler" element={<Scheduler />} />
+
+        <Route path="/staff-home" element={<StaffHome />} />
+        <Route path="/edit-participant" element={<EditParticipant />} />
       </Routes>
     </Router>
   );

rise-dc-app/src/pages/EditParticipant.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import { Box } from "@mui/material";
+import back from "../scheduling_components/icon_components/back.png";
+import { useNavigate } from "react-router-dom";
+import styles from "../scheduling_components/PlanYourDay.module.css";
+import EventSelectionModal from "../scheduling_components/EventSelectionModal";
+import EventCard from "../scheduling_components/EventCard";
+
+type EventData = {
+  name: string;
+  startTime: { hour: number; minute: number; period: "AM" | "PM" };
+  endTime: { hour: number; minute: number; period: "AM" | "PM" };
+};
+
+export default function EditParticipant() {
+  const [events, setEvents] = useState<EventData[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const navigate = useNavigate();
+
+  const openPlanner = () => {
+    setIsModalOpen(true);
+  };
+
+  const closePlanner = () => {
+    setIsModalOpen(false);
+  };
+
+  const addEvent = (event: {
+    name: string;
+    startTime: { hour: number; minute: number; period: "AM" | "PM" };
+    endTime: { hour: number; minute: number; period: "AM" | "PM" };
+    steps?: any[];
+  }) => {
+    setEvents((prev) => {
+      const newEvents = [
+        ...prev,
+        {
+          name: event.name,
+          startTime: event.startTime,
+          endTime: event.endTime,
+        },
+      ];
+      // Sort by start time (from teammate's code)
+      newEvents.sort((a, b) => {
+        const aHour24 =
+          a.startTime.period === "PM" && a.startTime.hour !== 12
+            ? a.startTime.hour + 12
+            : a.startTime.hour === 12 && a.startTime.period === "AM"
+              ? 0
+              : a.startTime.hour;
+        const bHour24 =
+          b.startTime.period === "PM" && b.startTime.hour !== 12
+            ? b.startTime.hour + 12
+            : b.startTime.hour === 12 && b.startTime.period === "AM"
+              ? 0
+              : b.startTime.hour;
+        if (aHour24 !== bHour24) return aHour24 - bHour24;
+        return a.startTime.minute - b.startTime.minute;
+      });
+      return newEvents;
+    });
+    setIsModalOpen(false); // close modal after adding
+  };
+
+  return (
+    <div style={{ color: "black" }}>
+      <div className={styles.container}></div>
+
+      <div className="mt-0 pt-0">
+        <div className="flex justify-center">
+          <div className={styles.backButton}>
+            <Box
+              component="img"
+              src={back}
+              alt="Back"
+              onClick={() => navigate("/")}
+            />
+          </div>
+
+            <div className="flex max-w-100 text-center pt-3 pr-15 pb-4 pl-15 items-center justify-center bg-[#0C77D9] rounded-b-xl pointer-events-none">
+                <p className="text-white font-light text-[1.2rem]">[Name Here]</p>
+            </div>
+        </div>
+
+        <div className="events-container w-full flex flex-col items-center">
+            {events.map((event, idx) => (
+              <div key={idx} className="event-card-main">
+                <EventCard
+                  name={event.name}
+                  startTime={event.startTime}
+                  endTime={event.endTime}
+                  color={"#fffef2ff"}
+                />
+              </div>
+            ))}
+        </div>
+
+      <EventSelectionModal
+        key={isModalOpen ? "custom" : "normal"}
+        isOpen={isModalOpen}
+        onClose={closePlanner}
+        onEventCreated={addEvent}
+        initialStep="SELECT_EVENT"
+      />
+
+      </div>
+    </div>
+  );
+}

rise-dc-app/src/pages/StaffHome.tsx

@@ -0,0 +1,22 @@
+
+export default function StaffHome() {
+    return (
+        <div className="flex flex-col py-10 items-center justify-center mt-0 pt-0">
+
+            <div className="flex max-w-100 text-center pt-3 pr-15 pb-4 pl-15 items-center justify-center bg-[#0C77D9] rounded-b-xl pointer-events-none">
+                <p className="text-white font-light text-[1.2rem]">Participants</p>
+            </div>
+
+            <h1 className="pt-30 text-3xl">Choose a Participant</h1>
+
+            <select className="w-[90%] max-w-md p-3 rounded-lg bg-white shadow-lg border border-gray-300 focus:outline-none mt-10">
+                <option>Select a participant</option>
+                <option>example 1</option>
+                <option>example 2</option>
+                <option>example 3</option>
+            </select>
+
+        </div>
+
+    );
+}