"use client"; import Link from "next/link"; import { useEffect, useMemo, useRef, useState } from "react"; import { useRooSports } from "@/components/app-provider"; import type { ChildProfile, SportsEvent } from "@/lib/demo-data"; import { getPublicChildDisplay } from "@/lib/privacy"; const sportDetails: Record< SportsEvent["sport"], { icon: string; surface: string; accent: string } > = { Soccer: { icon: "sports_soccer", surface: "bg-[#d8eaf2]", accent: "bg-[#b7d8e7]", }, Basketball: { icon: "sports_basketball", surface: "bg-[#f7e5b7]", accent: "bg-[#efd17f]", }, "Touch Rugby": { icon: "sports_rugby", surface: "bg-[#d6e9dd]", accent: "bg-[#b8d9c5]", }, }; function PlayerFilterMenu({ value, onChange, childrenProfiles, }: { value: string; onChange: (value: string) => void; childrenProfiles: ChildProfile[]; }) { const [open, setOpen] = useState(false); const rootRef = useRef(null); const options = useMemo( () => [ { id: "all", label: "Everyone" }, ...childrenProfiles.map((child) => ({ id: child.id, label: getPublicChildDisplay(child), })), ], [childrenProfiles], ); const selectedLabel = options.find((option) => option.id === value)?.label || "Everyone"; useEffect(() => { if (!open) return; const onPointerDown = (event: MouseEvent) => { if (!rootRef.current?.contains(event.target as Node)) setOpen(false); }; const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") setOpen(false); }; window.addEventListener("mousedown", onPointerDown); window.addEventListener("keydown", onKeyDown); return () => { window.removeEventListener("mousedown", onPointerDown); window.removeEventListener("keydown", onKeyDown); }; }, [open]); return (

Showing

{open ? (
{options.map((option) => { const selected = option.id === value; return ( ); })}
) : null}
); } export default function MyEventsPage() { const { bookings, children, role, user, getLiveEvent } = useRooSports(); const [childFilter, setChildFilter] = useState("all"); const scheduledBookings = useMemo( () => bookings.flatMap((booking) => { if (booking.status !== "confirmed") return []; const event = getLiveEvent(booking.eventId); return event ? [{ booking, event }] : []; }), [bookings, getLiveEvent], ); const filteredBookings = useMemo(() => { if (role !== "parent" || childFilter === "all") return scheduledBookings; return scheduledBookings.filter(({ booking }) => booking.participantId === childFilter); }, [childFilter, role, scheduledBookings]); const nextEvent = filteredBookings[0]?.event; const showChildFilter = role === "parent" && children.length > 0 && scheduledBookings.length > 0; return (

Your schedule

My events,
minus the admin.

Every booking, venue and start time in one calm place, ready when your week gets busy.

event_available {filteredBookings.length === 0 ? childFilter === "all" ? "Your week is currently open" : "No activities for this player" : `${filteredBookings.length} upcoming ${filteredBookings.length === 1 ? "activity" : "activities"}`}
{scheduledBookings.length === 0 ? (

Your next move

Nothing booked yet.

When you reserve an activity, the time, venue and player details will appear here automatically.

Browse nearby sessions arrow_forward
) : (

Coming up

Your booked activities

Find another arrow_forward
{filteredBookings.length === 0 ? (

No activities for this player

Choose another player, or book a new session.

) : (
{filteredBookings.map(({ booking, event }) => { const child = children.find((item) => item.id === booking.participantId); const participant = role === "parent" ? child ? getPublicChildDisplay(child) : "Athlete" : user ? `${user.firstName} (me)` : "Me"; const details = sportDetails[event.sport]; const [, day = "", month = ""] = event.dateLabel.split(" "); return (
{day} {month}
Confirmed {participant}

{event.title}

schedule {event.time} location_on {event.venue}
Details arrow_forward
); })}
)}
)}
); }