Add non-interactive Participants table for check-ins (#335)

* Add `Participant` model for check-in information

* Design non-interactive Participants table

- Include non-interactive version of Participants table showing check-in
  information including UID, name, role, status, and action
- Still need to add filtering, sorting, pagination, and preferences

* Refactoring `ParticipantsTable` for upcoming Modal

Author: taesungh

apps/api/src/admin/participant_manager.py

@@ -1,17 +1,25 @@
 from logging import getLogger
-from typing import Optional
+from typing import Any, Optional
 
 from auth.user_identity import User, utc_now
 from services import mongodb_handler
 from services.mongodb_handler import Collection
-from utils.user_record import Role, Status
+from utils.user_record import Role, Status, UserRecord
 
 log = getLogger(__name__)
 
 
-async def get_attending_applicants() -> list[dict[str, object]]:
+class Participant(UserRecord):
+    """Participants attending the event."""
+
+    first_name: str
+    last_name: str
+    status: Status
+
+
+async def get_attending_applicants() -> list[Participant]:
     """Fetch all applicants who have a status of ATTENDING"""
-    records = await mongodb_handler.retrieve(
+    records: list[dict[str, Any]] = await mongodb_handler.retrieve(
         Collection.USERS,
         {"role": Role.APPLICANT, "status": Status.ATTENDING},
         [
@@ -23,7 +31,7 @@ async def get_attending_applicants() -> list[dict[str, object]]:
         ],
     )
 
-    return records
+    return [Participant(**user, **user["application_data"]) for user in records]
 
 
 async def check_in_applicant(uid: str, associate: User) -> None:

apps/api/src/routers/admin.py

@@ -7,6 +7,7 @@
 from pydantic import BaseModel, EmailStr, Field, TypeAdapter, ValidationError
 
 from admin import participant_manager, summary_handler
+from admin.participant_manager import Participant
 from auth.authorization import require_role
 from auth.user_identity import User, utc_now
 from models.ApplicationData import Decision, Review
@@ -244,9 +245,9 @@ async def waitlist_release(uid: str) -> None:
     log.info(f"Accepted {uid} off the waitlist and sent email.")
 
 
-@router.get("/attending", dependencies=[Depends(require_checkin_associate)])
-async def attending() -> list[dict[str, object]]:
-    """Get list of attending participants."""
+@router.get("/participants", dependencies=[Depends(require_checkin_associate)])
+async def participants() -> list[Participant]:
+    """Get list of participants."""
     # TODO: non-hackers
     return await participant_manager.get_attending_applicants()
 

apps/site/src/app/admin/participants/Participants.tsx

@@ -1,5 +1,18 @@
+"use client";
+
+import useParticipants from "@/lib/admin/useParticipants";
+
+import ParticipantsTable from "./components/ParticipantsTable";
+
 function Participants() {
-	return <></>;
+	const { participants, loading } = useParticipants();
+
+	return (
+		<>
+			<ParticipantsTable participants={participants} loading={loading} />;
+			{/* TODO: modal */}
+		</>
+	);
 }
 
 export default Participants;

apps/site/src/app/admin/participants/components/ParticipantAction.tsx

@@ -0,0 +1,14 @@
+import Button from "@cloudscape-design/components/button";
+
+import { Participant } from "@/lib/admin/useParticipants";
+
+function ParticipantAction({ _id }: Participant) {
+	// TODO: waitlist promotion
+	return (
+		<Button variant="inline-link" ariaLabel={`Check in ${_id}`}>
+			Check In
+		</Button>
+	);
+}
+
+export default ParticipantAction;

apps/site/src/app/admin/participants/components/ParticipantsTable.tsx

@@ -0,0 +1,92 @@
+import Box from "@cloudscape-design/components/box";
+import Header from "@cloudscape-design/components/header";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+import Table from "@cloudscape-design/components/table";
+import TextFilter from "@cloudscape-design/components/text-filter";
+
+import ApplicantStatus from "@/app/admin/applicants/components/ApplicantStatus";
+import { Participant } from "@/lib/admin/useParticipants";
+
+import ParticipantAction from "./ParticipantAction";
+import RoleBadge from "./RoleBadge";
+
+interface ParticipantsTableProps {
+	participants: Participant[];
+	loading: boolean;
+}
+
+function ParticipantsTable({ participants, loading }: ParticipantsTableProps) {
+	// TODO: sorting
+	// TODO: search functionality
+	// TODO: role and status filters
+
+	const emptyMessage = (
+		<Box margin={{ vertical: "xs" }} textAlign="center" color="inherit">
+			<SpaceBetween size="m">
+				<b>No participants</b>
+			</SpaceBetween>
+		</Box>
+	);
+
+	return (
+		<Table
+			// TODO: aria labels
+			columnDefinitions={[
+				{
+					id: "uid",
+					header: "UID",
+					cell: (item) => item._id,
+					sortingField: "uid",
+					isRowHeader: true,
+				},
+				{
+					id: "firstName",
+					header: "First name",
+					cell: (item) => item.first_name,
+					sortingField: "firstName",
+				},
+				{
+					id: "lastName",
+					header: "Last name",
+					cell: (item) => item.last_name,
+					sortingField: "lastName",
+				},
+				{
+					id: "role",
+					header: "Role",
+					cell: RoleBadge,
+					sortingField: "role",
+				},
+				{
+					id: "status",
+					header: "Status",
+					cell: ApplicantStatus,
+					sortingField: "status",
+				},
+				{
+					id: "action",
+					header: "Action",
+					cell: ParticipantAction,
+				},
+			]}
+			header={
+				<Header counter={`(${participants.length})`}>Participants</Header>
+			}
+			items={participants}
+			loading={loading}
+			loadingText="Loading participants"
+			resizableColumns
+			variant="full-page"
+			stickyColumns={{ first: 1, last: 0 }}
+			trackBy="_id"
+			empty={emptyMessage}
+			filter={
+				<TextFilter filteringPlaceholder="Find participants" filteringText="" />
+			}
+			// TODO: pagination
+			// TODO: collection preferences
+		/>
+	);
+}
+
+export default ParticipantsTable;

apps/site/src/app/admin/participants/components/RoleBadge.tsx

@@ -0,0 +1,10 @@
+import Badge from "@cloudscape-design/components/badge";
+
+import { Participant } from "@/lib/admin/useParticipants";
+
+function RoleBadge({ role }: Participant) {
+	// TODO: custom colors
+	return <Badge>{role}</Badge>;
+}
+
+export default RoleBadge;

apps/site/src/lib/admin/useParticipants.ts

@@ -0,0 +1,41 @@
+import axios from "axios";
+import useSWR from "swr";
+
+import { Status, Uid } from "@/lib/admin/useApplicant";
+
+const enum Role {
+	Director = "director",
+	Organizer = "organizer",
+	CheckInLead = "checkin_lead",
+	Applicant = "applicant",
+	Mentor = "mentor",
+	Volunteer = "volunteer",
+	Sponsor = "sponsor",
+	Judge = "judge",
+	WorkshopLead = "workshop_lead",
+}
+
+export interface Participant {
+	_id: Uid;
+	first_name: string;
+	last_name: string;
+	role: Role;
+	status: Status;
+}
+
+const fetcher = async (url: string) => {
+	const res = await axios.get<Participant[]>(url);
+	return res.data;
+};
+
+function useParticipants() {
+	const { data, error, isLoading } = useSWR<Participant[]>(
+		"/api/admin/participants",
+		fetcher,
+	);
+
+	// TODO: implement check-in mutation
+	return { participants: data ?? [], loading: isLoading, error };
+}
+
+export default useParticipants;