From 6b0d458df72ce30c0eb7d504d1d956794b7f9264 Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 12:32:16 -0400
Subject: [PATCH 01/12] Allow organizers to add/remove participants after event
 ends
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Organizers can now manage their roster on past events — claim empty
slots, remove participants, and use the join button. Non-organizers
still see "Registration Closed" as before. Also allows registered
participants (not just organizers) to claim spots for guests via
updated RLS policy.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/ParticipantListItem.tsx        |   2 +-
 src/lib/utils.ts                              |   6 +-
 src/pages/EventDetailPage.tsx                 |  12 +-
 src/pages/__tests__/EventDetailPage.test.tsx  | 123 +++++++++++++++++-
 src/pages/__tests__/canUserClaimSpot.test.ts  |   8 +-
 ...0000_allow_participants_to_claim_spots.sql |  24 ++++
 6 files changed, 159 insertions(+), 16 deletions(-)
 create mode 100644 supabase/migrations/20260310000000_allow_participants_to_claim_spots.sql

diff --git a/src/components/ParticipantListItem.tsx b/src/components/ParticipantListItem.tsx
index 9a48877..5783b9f 100644
--- a/src/components/ParticipantListItem.tsx
+++ b/src/components/ParticipantListItem.tsx
@@ -134,7 +134,7 @@ export function ParticipantListItem({
                     )}
                   </Button>
                 )}
-                {!isOrganizerItem && !isArchived && (
+                {!isOrganizerItem && (!isArchived || isOrganizer) && (
                   <Button
                     size="icon"
                     variant="outline"
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 0e3effe..92b759b 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -104,14 +104,14 @@ export function getUserDisplayName(user: User | null, fallback = 'User'): string
 
 export function canUserClaimSpot({
   hasUser,
-  isOrganizer,
+  isRegistered,
   isFirstEmptySlot,
   showGuestRegistration,
 }: {
   hasUser: boolean;
-  isOrganizer: boolean;
+  isRegistered: boolean;
   isFirstEmptySlot: boolean;
   showGuestRegistration: boolean;
 }): boolean {
-  return hasUser && isOrganizer && isFirstEmptySlot && showGuestRegistration;
+  return hasUser && isRegistered && isFirstEmptySlot && showGuestRegistration;
 }
diff --git a/src/pages/EventDetailPage.tsx b/src/pages/EventDetailPage.tsx
index 2a7dd5a..afb3254 100644
--- a/src/pages/EventDetailPage.tsx
+++ b/src/pages/EventDetailPage.tsx
@@ -962,10 +962,10 @@ export function EventDetailPage() {
                   for (let slotNum = firstEmptySlot; slotNum <= event.max_participants; slotNum++) {
                     const isFirstEmptySlot = slotNum === firstEmptySlot;
                     const canClaimSpot =
-                      !isArchived &&
+                      (!isArchived || isOrganizer) &&
                       canUserClaimSpot({
                         hasUser: !!user,
-                        isOrganizer,
+                        isRegistered: !!userRegistration,
                         isFirstEmptySlot,
                         showGuestRegistration,
                       });
@@ -1011,7 +1011,7 @@ export function EventDetailPage() {
       >
         <Button
           onClick={() => {
-            if (isEventCompleted(event.datetime, event.end_datetime)) return;
+            if (isEventCompleted(event.datetime, event.end_datetime) && !isOrganizer) return;
             if (isEventFull && !userRegistration) return;
             if (showRegistrationForm) {
               openSignupDrawer();
@@ -1022,12 +1022,12 @@ export function EventDetailPage() {
             }
           }}
           disabled={
-            isEventCompleted(event.datetime, event.end_datetime) ||
+            (isEventCompleted(event.datetime, event.end_datetime) && !isOrganizer) ||
             submitting ||
             (isEventFull && !userRegistration)
           }
           className={`w-full text-white shadow-lg drop-shadow-md ${
-            isEventCompleted(event.datetime, event.end_datetime) ||
+            (isEventCompleted(event.datetime, event.end_datetime) && !isOrganizer) ||
             (isEventFull && !userRegistration)
               ? 'bg-muted-foreground'
               : userRegistration && !showRegistrationForm
@@ -1036,7 +1036,7 @@ export function EventDetailPage() {
           }`}
           size="default"
         >
-          {isEventCompleted(event.datetime, event.end_datetime) ? (
+          {isEventCompleted(event.datetime, event.end_datetime) && !isOrganizer ? (
             <>
               <UserX className="h-5 w-5 mr-2" />
               Registration Closed
diff --git a/src/pages/__tests__/EventDetailPage.test.tsx b/src/pages/__tests__/EventDetailPage.test.tsx
index 7d95a5d..06f4b42 100644
--- a/src/pages/__tests__/EventDetailPage.test.tsx
+++ b/src/pages/__tests__/EventDetailPage.test.tsx
@@ -146,7 +146,7 @@ describe('EventDetailPage - Claim button visibility', () => {
     });
   });
 
-  it('shows Claim button when user is the event organizer', async () => {
+  it('shows Claim button when user is registered for the event', async () => {
     mockUseAuth.mockReturnValue({
       user: { id: 'organizer-123' } as User,
       session: null,
@@ -163,6 +163,15 @@ describe('EventDetailPage - Claim button visibility', () => {
       resetPasswordForEmail: vi.fn(),
       updatePassword: vi.fn(),
     });
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([
+      {
+        id: 'p-1',
+        name: 'Organizer',
+        user_id: 'organizer-123',
+        event_id: 'test-event-id',
+        payment_status: 'pending',
+      },
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
 
     render(<EventDetailPage />);
 
@@ -173,7 +182,7 @@ describe('EventDetailPage - Claim button visibility', () => {
     expect(screen.getAllByRole('button', { name: /claim/i }).length).toBeGreaterThan(0);
   });
 
-  it('hides Claim button when user is not the event organizer', async () => {
+  it('hides Claim button when user is not registered for the event', async () => {
     mockUseAuth.mockReturnValue({
       user: { id: 'user-456' } as User,
       session: null,
@@ -228,6 +237,116 @@ describe('EventDetailPage - Claim button visibility', () => {
   });
 });
 
+describe('EventDetailPage - Organizer on past events', () => {
+  const pastEvent = {
+    ...mockEvent,
+    datetime: '2024-01-01T10:00:00Z',
+    end_datetime: '2024-01-01T12:00:00Z',
+  };
+
+  const mockAuthReturn = {
+    user: { id: 'organizer-123' } as User,
+    session: null,
+    loading: false,
+    signIn: vi.fn(),
+    signUp: vi.fn(),
+    signInWithGoogle: vi.fn(),
+    signInWithGoogleIdToken: vi.fn(),
+    signOut: vi.fn(),
+    isAdmin: false,
+    isImpersonating: false,
+    impersonate: vi.fn(),
+    stopImpersonating: vi.fn(),
+    resetPasswordForEmail: vi.fn(),
+    updatePassword: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockLabelService.getLabelsByEventId.mockResolvedValue([]);
+    mockParticipantService.getPaymentSummary.mockResolvedValue({
+      total: 0,
+      paid: 0,
+      pending: 0,
+      waived: 0,
+    });
+    mockUseFeatureFlag.mockImplementation((flag: string) => {
+      if (flag === 'guest_registration') return true;
+      return false;
+    });
+  });
+
+  it('shows Claim button for registered organizer on a past event', async () => {
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventById.mockResolvedValue(pastEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([
+      {
+        id: 'p-1',
+        name: 'Organizer',
+        user_id: 'organizer-123',
+        event_id: 'test-event-id',
+        payment_status: 'pending',
+      },
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    expect(screen.getAllByRole('button', { name: /claim/i }).length).toBeGreaterThan(0);
+  });
+
+  it('hides Claim button for non-organizer on a past event', async () => {
+    mockUseAuth.mockReturnValue({
+      ...mockAuthReturn,
+      user: { id: 'user-456' } as User,
+    });
+    mockEventService.getEventById.mockResolvedValue(pastEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([]);
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByRole('button', { name: /claim/i })).not.toBeInTheDocument();
+  });
+
+  it('does not show Registration Closed for organizer on a past event', async () => {
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventById.mockResolvedValue(pastEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([]);
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByText('Registration Closed')).not.toBeInTheDocument();
+  });
+
+  it('shows Registration Closed for non-organizer on a past event', async () => {
+    mockUseAuth.mockReturnValue({
+      ...mockAuthReturn,
+      user: { id: 'user-456' } as User,
+    });
+    mockEventService.getEventById.mockResolvedValue(pastEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([]);
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Registration Closed')).toBeInTheDocument();
+  });
+});
+
 describe('EventDetailPage - Cost breakdown recalculation', () => {
   const mockAuthReturn = {
     user: { id: 'organizer-123' } as User,
diff --git a/src/pages/__tests__/canUserClaimSpot.test.ts b/src/pages/__tests__/canUserClaimSpot.test.ts
index b0bd2e4..f9fb659 100644
--- a/src/pages/__tests__/canUserClaimSpot.test.ts
+++ b/src/pages/__tests__/canUserClaimSpot.test.ts
@@ -4,12 +4,12 @@ import { canUserClaimSpot } from '@/lib/utils';
 describe('canUserClaimSpot', () => {
   const baseArgs = {
     hasUser: true,
-    isOrganizer: true,
+    isRegistered: true,
     isFirstEmptySlot: true,
     showGuestRegistration: true,
   };
 
-  it('returns true when organizer views first empty slot with guest registration enabled', () => {
+  it('returns true when registered user views first empty slot with guest registration enabled', () => {
     expect(canUserClaimSpot(baseArgs)).toBe(true);
   });
 
@@ -17,8 +17,8 @@ describe('canUserClaimSpot', () => {
     expect(canUserClaimSpot({ ...baseArgs, hasUser: false })).toBe(false);
   });
 
-  it('returns false when user is not the organizer', () => {
-    expect(canUserClaimSpot({ ...baseArgs, isOrganizer: false })).toBe(false);
+  it('returns false when user is not registered for the event', () => {
+    expect(canUserClaimSpot({ ...baseArgs, isRegistered: false })).toBe(false);
   });
 
   it('returns false for non-first empty slots', () => {
diff --git a/supabase/migrations/20260310000000_allow_participants_to_claim_spots.sql b/supabase/migrations/20260310000000_allow_participants_to_claim_spots.sql
new file mode 100644
index 0000000..e58b22b
--- /dev/null
+++ b/supabase/migrations/20260310000000_allow_participants_to_claim_spots.sql
@@ -0,0 +1,24 @@
+-- Allow any registered participant (not just organizers) to claim spots for guests
+DROP POLICY "Event organizers can claim spots for others" ON "public"."participants";
+
+CREATE POLICY "Registered participants can claim spots for others"
+ON "public"."participants"
+FOR INSERT
+WITH CHECK (
+  claimed_by_user_id = auth.uid()
+  AND (
+    -- Event organizer can always claim
+    EXISTS (
+      SELECT 1 FROM events
+      WHERE events.id = participants.event_id
+      AND events.organizer_id = auth.uid()
+    )
+    OR
+    -- Any registered participant can claim
+    EXISTS (
+      SELECT 1 FROM participants AS p
+      WHERE p.event_id = participants.event_id
+      AND p.user_id = auth.uid()
+    )
+  )
+);

From 21f3746469242a79888de54ccfb18ba52eeebd03 Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 12:48:46 -0400
Subject: [PATCH 02/12] Keep past paid events active until all participants
 have paid

An event is now only fully archived when it's past AND all payments
are settled. This lets organizers continue managing the roster
(add/remove participants) until the event is financially closed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/EventDetailPage.tsx                |  9 ++-
 src/pages/__tests__/EventDetailPage.test.tsx | 68 ++++++++++++++++++++
 2 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/src/pages/EventDetailPage.tsx b/src/pages/EventDetailPage.tsx
index afb3254..f57decc 100644
--- a/src/pages/EventDetailPage.tsx
+++ b/src/pages/EventDetailPage.tsx
@@ -129,9 +129,12 @@ export function EventDetailPage() {
   // Check if current user is the organizer
   const isOrganizer = event?.organizer_id === user?.id;
 
-  // Archived (completed) events are always treated as paid for payment tracking
-  const isArchived = event ? isEventCompleted(event.datetime, event.end_datetime) : false;
-  const effectiveIsPaid = isArchived || (event?.is_paid ?? true);
+  // Event is past its end time
+  const isEventPast = event ? isEventCompleted(event.datetime, event.end_datetime) : false;
+  // Event is fully archived only when past AND all participants have settled payment
+  const allPaid = paymentSummary.total === 0 || paymentSummary.pending === 0;
+  const isArchived = isEventPast && (!event?.is_paid || allPaid);
+  const effectiveIsPaid = isEventPast || (event?.is_paid ?? true);
 
   // Check if event is at full capacity
   const isEventFull =
diff --git a/src/pages/__tests__/EventDetailPage.test.tsx b/src/pages/__tests__/EventDetailPage.test.tsx
index 06f4b42..3e693fd 100644
--- a/src/pages/__tests__/EventDetailPage.test.tsx
+++ b/src/pages/__tests__/EventDetailPage.test.tsx
@@ -345,6 +345,74 @@ describe('EventDetailPage - Organizer on past events', () => {
 
     expect(screen.getByText('Registration Closed')).toBeInTheDocument();
   });
+
+  it('treats past paid event with unpaid participants as active for organizer', async () => {
+    const pastPaidEvent = { ...pastEvent, is_paid: true };
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventById.mockResolvedValue(pastPaidEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([
+      {
+        id: 'p-1',
+        name: 'Organizer',
+        user_id: 'organizer-123',
+        event_id: 'test-event-id',
+        payment_status: 'pending',
+      },
+      {
+        id: 'p-2',
+        name: 'Player',
+        user_id: 'user-456',
+        event_id: 'test-event-id',
+        payment_status: 'pending',
+      },
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummary.mockResolvedValue({
+      total: 2,
+      paid: 0,
+      pending: 2,
+      waived: 0,
+    });
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    // Event is not archived — claim buttons and join button should be active
+    expect(screen.getAllByRole('button', { name: /claim/i }).length).toBeGreaterThan(0);
+    expect(screen.queryByText('Registration Closed')).not.toBeInTheDocument();
+  });
+
+  it('treats past paid event with all paid participants as archived', async () => {
+    const pastPaidEvent = { ...pastEvent, is_paid: true };
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventById.mockResolvedValue(pastPaidEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([
+      {
+        id: 'p-1',
+        name: 'Organizer',
+        user_id: 'organizer-123',
+        event_id: 'test-event-id',
+        payment_status: 'paid',
+      },
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummary.mockResolvedValue({
+      total: 1,
+      paid: 1,
+      pending: 0,
+      waived: 0,
+    });
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    // Event is archived — organizer bypass still applies for claim/join
+    expect(screen.queryByText('Registration Closed')).not.toBeInTheDocument();
+  });
 });
 
 describe('EventDetailPage - Cost breakdown recalculation', () => {

From 8e7234fbd0cf800fe3585c7859bad988b8ae80c9 Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 12:50:29 -0400
Subject: [PATCH 03/12] Keep unsettled paid events in Organizing tab instead of
 Archive

Past paid events with pending payments now stay in the Organizing
tab so organizers can track outstanding payments. They only move
to Archive once all participants have paid.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/EventsPage.tsx | 41 ++++++++++++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx
index 51fe531..a20261f 100644
--- a/src/pages/EventsPage.tsx
+++ b/src/pages/EventsPage.tsx
@@ -52,7 +52,26 @@ export function EventsPage() {
   const loadOrganizingEventsCallback = useCallback(async () => {
     if (!user) return [];
     const allEvents = await eventService.getEventsByOrganizer(user.id);
-    return allEvents.filter((event) => !isEventCompleted(event.datetime, event.end_datetime));
+    const activeEvents = allEvents.filter(
+      (event) => !isEventCompleted(event.datetime, event.end_datetime)
+    );
+    const pastEvents = allEvents.filter((event) =>
+      isEventCompleted(event.datetime, event.end_datetime)
+    );
+
+    // Past paid events with unpaid participants stay in Organizing
+    const pastPaidEventIds = pastEvents.filter((e) => e.is_paid).map((e) => e.id);
+    if (pastPaidEventIds.length > 0) {
+      const summaries = await participantService.getPaymentSummariesBatch(pastPaidEventIds);
+      const unsettledPastEvents = pastEvents.filter((event) => {
+        if (!event.is_paid) return false;
+        const summary = summaries.get(event.id);
+        return summary && summary.pending > 0;
+      });
+      return [...activeEvents, ...unsettledPastEvents];
+    }
+
+    return activeEvents;
   }, [user]);
 
   const loadJoinedEventsCallback = useCallback(async () => {
@@ -64,20 +83,26 @@ export function EventsPage() {
   const loadArchivedEventsCallback = useCallback(async () => {
     if (!user) return [];
     const allEvents = await eventService.getEventsByOrganizer(user.id);
-    const archived = allEvents.filter((event) =>
+    const pastEvents = allEvents.filter((event) =>
       isEventCompleted(event.datetime, event.end_datetime)
     );
 
-    // Fetch payment summaries for archived events
-    if (archived.length > 0) {
-      const eventIds = archived.map((e) => e.id);
+    // Fetch payment summaries for past events
+    if (pastEvents.length > 0) {
+      const eventIds = pastEvents.map((e) => e.id);
       const summaries = await participantService.getPaymentSummariesBatch(eventIds);
       setPaymentSummaries(summaries);
-    } else {
-      setPaymentSummaries(new Map());
+
+      // Only archive events that are fully settled (or not paid events)
+      return pastEvents.filter((event) => {
+        if (!event.is_paid) return true;
+        const summary = summaries.get(event.id);
+        return !summary || summary.pending === 0;
+      });
     }
 
-    return archived;
+    setPaymentSummaries(new Map());
+    return pastEvents;
   }, [user]);
 
   useEffect(() => {

From e0f6d4dcf67840ece3ac8658cc45bdf6cd9e72fb Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 12:51:39 -0400
Subject: [PATCH 04/12] Apply same unsettled payment logic to group event list

Past paid events with pending payments stay in the Active filter
on the group detail page, matching the Organizing tab behavior.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/GroupDetailPage.tsx | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/pages/GroupDetailPage.tsx b/src/pages/GroupDetailPage.tsx
index 4be47a8..1094978 100644
--- a/src/pages/GroupDetailPage.tsx
+++ b/src/pages/GroupDetailPage.tsx
@@ -12,7 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { groupService, eventService, type Group } from '@/services';
+import { groupService, eventService, participantService, type Group } from '@/services';
 import { useFeatureFlag } from '@/hooks/useFeatureFlags';
 import { errorHandler } from '@/lib/errorHandler';
 import { useLoadingState } from '@/hooks/useLoadingState';
@@ -36,6 +36,7 @@ export function GroupDetailPage() {
   const [eventFilter, setEventFilter] = useState<'active' | 'archived'>('active');
   const [duplicatingEvent, setDuplicatingEvent] = useState<GroupEvent | null>(null);
   const [duplicatingEventId, setDuplicatingEventId] = useState<string | null>(null);
+  const [unsettledEventIds, setUnsettledEventIds] = useState<Set<string>>(new Set());
   const isEventDuplicationEnabled = useFeatureFlag('event_duplication');
   const loadingRef = useRef(false);
   const hasLoadedRef = useRef(false);
@@ -76,7 +77,30 @@ export function GroupDetailPage() {
 
   const loadEventsCallback = useCallback(async () => {
     if (!groupId) return [];
-    return await groupService.getGroupEvents(groupId);
+    const allEvents = await groupService.getGroupEvents(groupId);
+
+    // Identify past paid events with unsettled payments
+    const pastPaidEvents = allEvents.filter(
+      (e) => e.is_paid && isEventCompleted(e.datetime, e.end_datetime)
+    );
+    if (pastPaidEvents.length > 0) {
+      const summaries = await participantService.getPaymentSummariesBatch(
+        pastPaidEvents.map((e) => e.id)
+      );
+      const unsettled = new Set(
+        pastPaidEvents
+          .filter((e) => {
+            const summary = summaries.get(e.id);
+            return summary && summary.pending > 0;
+          })
+          .map((e) => e.id)
+      );
+      setUnsettledEventIds(unsettled);
+    } else {
+      setUnsettledEventIds(new Set());
+    }
+
+    return allEvents;
   }, [groupId]);
 
   const handleInvite = useCallback(async () => {
@@ -281,8 +305,8 @@ export function GroupDetailPage() {
           ) : !events ||
             events.filter((e) =>
               eventFilter === 'active'
-                ? !isEventCompleted(e.datetime, e.end_datetime)
-                : isEventCompleted(e.datetime, e.end_datetime)
+                ? !isEventCompleted(e.datetime, e.end_datetime) || unsettledEventIds.has(e.id)
+                : isEventCompleted(e.datetime, e.end_datetime) && !unsettledEventIds.has(e.id)
             ).length === 0 ? (
             <div className="p-6 text-center">
               <Calendar className="h-12 w-12 mx-auto text-muted-foreground mb-3" />

From 0981633ef2242e4c8a907422fe6ebe1a8dd13ce6 Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 12:54:25 -0400
Subject: [PATCH 05/12] Revert canUserClaimSpot isRegistered refactor and RLS
 migration

These changes belong in a separate PR for allowing registered
participants to claim spots for guests.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/utils.ts                              |  6 ++---
 src/pages/EventDetailPage.tsx                 |  2 +-
 src/pages/__tests__/EventDetailPage.test.tsx  | 13 ++--------
 src/pages/__tests__/canUserClaimSpot.test.ts  |  8 +++----
 ...0000_allow_participants_to_claim_spots.sql | 24 -------------------
 5 files changed, 10 insertions(+), 43 deletions(-)
 delete mode 100644 supabase/migrations/20260310000000_allow_participants_to_claim_spots.sql

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 92b759b..0e3effe 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -104,14 +104,14 @@ export function getUserDisplayName(user: User | null, fallback = 'User'): string
 
 export function canUserClaimSpot({
   hasUser,
-  isRegistered,
+  isOrganizer,
   isFirstEmptySlot,
   showGuestRegistration,
 }: {
   hasUser: boolean;
-  isRegistered: boolean;
+  isOrganizer: boolean;
   isFirstEmptySlot: boolean;
   showGuestRegistration: boolean;
 }): boolean {
-  return hasUser && isRegistered && isFirstEmptySlot && showGuestRegistration;
+  return hasUser && isOrganizer && isFirstEmptySlot && showGuestRegistration;
 }
diff --git a/src/pages/EventDetailPage.tsx b/src/pages/EventDetailPage.tsx
index f57decc..587aa2b 100644
--- a/src/pages/EventDetailPage.tsx
+++ b/src/pages/EventDetailPage.tsx
@@ -968,7 +968,7 @@ export function EventDetailPage() {
                       (!isArchived || isOrganizer) &&
                       canUserClaimSpot({
                         hasUser: !!user,
-                        isRegistered: !!userRegistration,
+                        isOrganizer,
                         isFirstEmptySlot,
                         showGuestRegistration,
                       });
diff --git a/src/pages/__tests__/EventDetailPage.test.tsx b/src/pages/__tests__/EventDetailPage.test.tsx
index 3e693fd..8030f5c 100644
--- a/src/pages/__tests__/EventDetailPage.test.tsx
+++ b/src/pages/__tests__/EventDetailPage.test.tsx
@@ -146,7 +146,7 @@ describe('EventDetailPage - Claim button visibility', () => {
     });
   });
 
-  it('shows Claim button when user is registered for the event', async () => {
+  it('shows Claim button when user is the event organizer', async () => {
     mockUseAuth.mockReturnValue({
       user: { id: 'organizer-123' } as User,
       session: null,
@@ -163,15 +163,6 @@ describe('EventDetailPage - Claim button visibility', () => {
       resetPasswordForEmail: vi.fn(),
       updatePassword: vi.fn(),
     });
-    mockParticipantService.getParticipantsByEventId.mockResolvedValue([
-      {
-        id: 'p-1',
-        name: 'Organizer',
-        user_id: 'organizer-123',
-        event_id: 'test-event-id',
-        payment_status: 'pending',
-      },
-    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
 
     render(<EventDetailPage />);
 
@@ -182,7 +173,7 @@ describe('EventDetailPage - Claim button visibility', () => {
     expect(screen.getAllByRole('button', { name: /claim/i }).length).toBeGreaterThan(0);
   });
 
-  it('hides Claim button when user is not registered for the event', async () => {
+  it('hides Claim button when user is not the event organizer', async () => {
     mockUseAuth.mockReturnValue({
       user: { id: 'user-456' } as User,
       session: null,
diff --git a/src/pages/__tests__/canUserClaimSpot.test.ts b/src/pages/__tests__/canUserClaimSpot.test.ts
index f9fb659..b0bd2e4 100644
--- a/src/pages/__tests__/canUserClaimSpot.test.ts
+++ b/src/pages/__tests__/canUserClaimSpot.test.ts
@@ -4,12 +4,12 @@ import { canUserClaimSpot } from '@/lib/utils';
 describe('canUserClaimSpot', () => {
   const baseArgs = {
     hasUser: true,
-    isRegistered: true,
+    isOrganizer: true,
     isFirstEmptySlot: true,
     showGuestRegistration: true,
   };
 
-  it('returns true when registered user views first empty slot with guest registration enabled', () => {
+  it('returns true when organizer views first empty slot with guest registration enabled', () => {
     expect(canUserClaimSpot(baseArgs)).toBe(true);
   });
 
@@ -17,8 +17,8 @@ describe('canUserClaimSpot', () => {
     expect(canUserClaimSpot({ ...baseArgs, hasUser: false })).toBe(false);
   });
 
-  it('returns false when user is not registered for the event', () => {
-    expect(canUserClaimSpot({ ...baseArgs, isRegistered: false })).toBe(false);
+  it('returns false when user is not the organizer', () => {
+    expect(canUserClaimSpot({ ...baseArgs, isOrganizer: false })).toBe(false);
   });
 
   it('returns false for non-first empty slots', () => {
diff --git a/supabase/migrations/20260310000000_allow_participants_to_claim_spots.sql b/supabase/migrations/20260310000000_allow_participants_to_claim_spots.sql
deleted file mode 100644
index e58b22b..0000000
--- a/supabase/migrations/20260310000000_allow_participants_to_claim_spots.sql
+++ /dev/null
@@ -1,24 +0,0 @@
--- Allow any registered participant (not just organizers) to claim spots for guests
-DROP POLICY "Event organizers can claim spots for others" ON "public"."participants";
-
-CREATE POLICY "Registered participants can claim spots for others"
-ON "public"."participants"
-FOR INSERT
-WITH CHECK (
-  claimed_by_user_id = auth.uid()
-  AND (
-    -- Event organizer can always claim
-    EXISTS (
-      SELECT 1 FROM events
-      WHERE events.id = participants.event_id
-      AND events.organizer_id = auth.uid()
-    )
-    OR
-    -- Any registered participant can claim
-    EXISTS (
-      SELECT 1 FROM participants AS p
-      WHERE p.event_id = participants.event_id
-      AND p.user_id = auth.uid()
-    )
-  )
-);

From 009a16680726a33557cdac8a3c20e6c5c29c437d Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 13:10:44 -0400
Subject: [PATCH 06/12] Add integration tests for unsettled payment filtering
 and fix group filter bug

Tests verify that past paid events with pending payments stay in Active/Organizing
views and only move to Archive once fully settled. Also fixes a bug where the
GroupDetailPage render filter wasn't applying unsettled payment logic (only the
empty-state check was updated).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/GroupDetailPage.tsx                |  31 +--
 src/pages/__tests__/EventsPage.test.tsx      | 237 +++++++++++++++++++
 src/pages/__tests__/GroupDetailPage.test.tsx | 236 ++++++++++++++++++
 3 files changed, 485 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/__tests__/EventsPage.test.tsx
 create mode 100644 src/pages/__tests__/GroupDetailPage.test.tsx

diff --git a/src/pages/GroupDetailPage.tsx b/src/pages/GroupDetailPage.tsx
index 1094978..ae116d6 100644
--- a/src/pages/GroupDetailPage.tsx
+++ b/src/pages/GroupDetailPage.tsx
@@ -23,6 +23,7 @@ import { DuplicateEventDrawer } from '@/components/DuplicateEventDrawer';
 
 interface GroupEvent extends Tables<'events'> {
   participant_count?: number;
+  _unsettled?: boolean;
 }
 
 export function GroupDetailPage() {
@@ -36,7 +37,6 @@ export function GroupDetailPage() {
   const [eventFilter, setEventFilter] = useState<'active' | 'archived'>('active');
   const [duplicatingEvent, setDuplicatingEvent] = useState<GroupEvent | null>(null);
   const [duplicatingEventId, setDuplicatingEventId] = useState<string | null>(null);
-  const [unsettledEventIds, setUnsettledEventIds] = useState<Set<string>>(new Set());
   const isEventDuplicationEnabled = useFeatureFlag('event_duplication');
   const loadingRef = useRef(false);
   const hasLoadedRef = useRef(false);
@@ -75,11 +75,11 @@ export function GroupDetailPage() {
     }
   }, [groupId, navigate, user?.id]);
 
-  const loadEventsCallback = useCallback(async () => {
+  const loadEventsCallback = useCallback(async (): Promise<GroupEvent[]> => {
     if (!groupId) return [];
-    const allEvents = await groupService.getGroupEvents(groupId);
+    const allEvents: GroupEvent[] = await groupService.getGroupEvents(groupId);
 
-    // Identify past paid events with unsettled payments
+    // Mark past paid events with unsettled payments
     const pastPaidEvents = allEvents.filter(
       (e) => e.is_paid && isEventCompleted(e.datetime, e.end_datetime)
     );
@@ -87,17 +87,10 @@ export function GroupDetailPage() {
       const summaries = await participantService.getPaymentSummariesBatch(
         pastPaidEvents.map((e) => e.id)
       );
-      const unsettled = new Set(
-        pastPaidEvents
-          .filter((e) => {
-            const summary = summaries.get(e.id);
-            return summary && summary.pending > 0;
-          })
-          .map((e) => e.id)
-      );
-      setUnsettledEventIds(unsettled);
-    } else {
-      setUnsettledEventIds(new Set());
+      for (const event of pastPaidEvents) {
+        const summary = summaries.get(event.id);
+        event._unsettled = !!(summary && summary.pending > 0);
+      }
     }
 
     return allEvents;
@@ -305,8 +298,8 @@ export function GroupDetailPage() {
           ) : !events ||
             events.filter((e) =>
               eventFilter === 'active'
-                ? !isEventCompleted(e.datetime, e.end_datetime) || unsettledEventIds.has(e.id)
-                : isEventCompleted(e.datetime, e.end_datetime) && !unsettledEventIds.has(e.id)
+                ? !isEventCompleted(e.datetime, e.end_datetime) || !!e._unsettled
+                : isEventCompleted(e.datetime, e.end_datetime) && !e._unsettled
             ).length === 0 ? (
             <div className="p-6 text-center">
               <Calendar className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
@@ -324,8 +317,8 @@ export function GroupDetailPage() {
               {events
                 .filter((e) =>
                   eventFilter === 'active'
-                    ? !isEventCompleted(e.datetime, e.end_datetime)
-                    : isEventCompleted(e.datetime, e.end_datetime)
+                    ? !isEventCompleted(e.datetime, e.end_datetime) || !!e._unsettled
+                    : isEventCompleted(e.datetime, e.end_datetime) && !e._unsettled
                 )
                 .map((event) => (
                   <div key={event.id} className="relative">
diff --git a/src/pages/__tests__/EventsPage.test.tsx b/src/pages/__tests__/EventsPage.test.tsx
new file mode 100644
index 0000000..111030d
--- /dev/null
+++ b/src/pages/__tests__/EventsPage.test.tsx
@@ -0,0 +1,237 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { User } from '@supabase/supabase-js';
+import { useAuth } from '@/hooks/useAuth';
+
+// Mock react-router-dom
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Mock useAuth
+vi.mock('@/hooks/useAuth', () => ({
+  useAuth: vi.fn(() => ({
+    user: { id: 'organizer-123' },
+    loading: false,
+    isAdmin: false,
+    isImpersonating: false,
+    impersonate: vi.fn(),
+    stopImpersonating: vi.fn(),
+  })),
+  AuthProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+const mockUseAuth = vi.mocked(useAuth);
+
+// Mock useFeatureFlags
+vi.mock('@/hooks/useFeatureFlags', () => ({
+  useFeatureFlag: vi.fn(() => false),
+  FeatureFlagsProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+// Mock services
+vi.mock('@/services', () => ({
+  eventService: {
+    getEventsByOrganizer: vi.fn(),
+    getEventsByParticipant: vi.fn(),
+  },
+  participantService: {
+    getPaymentSummariesBatch: vi.fn(),
+  },
+  pushSubscriptionService: {
+    isSupported: vi.fn(() => false),
+    isConfigured: vi.fn(() => false),
+    isSubscribed: vi.fn(() => Promise.resolve(false)),
+    getSubscriptions: vi.fn(() => Promise.resolve([])),
+  },
+  notificationService: {
+    getNotifications: vi.fn(() => Promise.resolve([])),
+    getUnreadCount: vi.fn(() => Promise.resolve(0)),
+    subscribeToNotifications: vi.fn(() => vi.fn()),
+  },
+  notificationPreferenceService: {
+    getPreferences: vi.fn(() => Promise.resolve(null)),
+  },
+}));
+
+// Mock error handler
+vi.mock('@/lib/errorHandler', () => ({
+  logError: vi.fn(),
+  errorHandler: {
+    handle: vi.fn(),
+    success: vi.fn(),
+    info: vi.fn(),
+  },
+}));
+
+import { render } from '@/test/utils/test-utils';
+import { EventsPage } from '../EventsPage';
+import { eventService, participantService } from '@/services';
+
+const mockEventService = vi.mocked(eventService);
+const mockParticipantService = vi.mocked(participantService);
+
+const mockAuthReturn = {
+  user: { id: 'organizer-123' } as User,
+  session: null,
+  loading: false,
+  signIn: vi.fn(),
+  signUp: vi.fn(),
+  signInWithGoogle: vi.fn(),
+  signInWithGoogleIdToken: vi.fn(),
+  signOut: vi.fn(),
+  isAdmin: false,
+  isImpersonating: false,
+  impersonate: vi.fn(),
+  stopImpersonating: vi.fn(),
+  resetPasswordForEmail: vi.fn(),
+  updatePassword: vi.fn(),
+};
+
+const futureEvent = {
+  id: 'future-event',
+  name: 'Future Event',
+  datetime: '2027-06-01T10:00:00Z',
+  end_datetime: null,
+  organizer_id: 'organizer-123',
+  is_paid: false,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: null,
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2026-01-01T00:00:00Z',
+  participant_count: 3,
+};
+
+const pastPaidUnsettled = {
+  id: 'past-unsettled',
+  name: 'Past Unsettled Event',
+  datetime: '2024-01-01T10:00:00Z',
+  end_datetime: '2024-01-01T12:00:00Z',
+  organizer_id: 'organizer-123',
+  is_paid: true,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: null,
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2024-01-01T00:00:00Z',
+  participant_count: 4,
+};
+
+const pastPaidSettled = {
+  id: 'past-settled',
+  name: 'Past Settled Event',
+  datetime: '2024-02-01T10:00:00Z',
+  end_datetime: '2024-02-01T12:00:00Z',
+  organizer_id: 'organizer-123',
+  is_paid: true,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: null,
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2024-02-01T00:00:00Z',
+  participant_count: 2,
+};
+
+const pastFreeEvent = {
+  id: 'past-free',
+  name: 'Past Free Event',
+  datetime: '2024-03-01T10:00:00Z',
+  end_datetime: '2024-03-01T12:00:00Z',
+  organizer_id: 'organizer-123',
+  is_paid: false,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: null,
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2024-03-01T00:00:00Z',
+  participant_count: 5,
+};
+
+describe('EventsPage - Unsettled payment tab placement', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventsByParticipant.mockResolvedValue([]);
+  });
+
+  it('shows past paid event with unpaid participants in Organizing tab', async () => {
+    const allEvents = [futureEvent, pastPaidUnsettled, pastPaidSettled, pastFreeEvent];
+    mockEventService.getEventsByOrganizer.mockResolvedValue(allEvents as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([
+        ['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }],
+        ['past-settled', { total: 2, paid: 2, pending: 0, waived: 0 }],
+      ])
+    );
+
+    render(<EventsPage />);
+
+    // Click Organizing tab
+    const organizingTab = await screen.findByRole('tab', { name: /organizing/i });
+    await userEvent.click(organizingTab);
+
+    // Unsettled past event should be in Organizing
+    await waitFor(() => {
+      expect(screen.getByText('Past Unsettled Event')).toBeInTheDocument();
+    });
+    // Future event should also be in Organizing
+    expect(screen.getByText('Future Event')).toBeInTheDocument();
+  });
+
+  it('shows past paid event with all paid participants in Archive tab', async () => {
+    const allEvents = [futureEvent, pastPaidUnsettled, pastPaidSettled, pastFreeEvent];
+    mockEventService.getEventsByOrganizer.mockResolvedValue(allEvents as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([
+        ['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }],
+        ['past-settled', { total: 2, paid: 2, pending: 0, waived: 0 }],
+      ])
+    );
+
+    render(<EventsPage />);
+
+    // Click Archive tab
+    const archiveTab = await screen.findByRole('tab', { name: /archive/i });
+    await userEvent.click(archiveTab);
+
+    // Settled event should be in Archive
+    await waitFor(() => {
+      expect(screen.getByText('Past Settled Event')).toBeInTheDocument();
+    });
+    // Free past event should also be in Archive
+    expect(screen.getByText('Past Free Event')).toBeInTheDocument();
+    // Unsettled event should NOT be in Archive
+    expect(screen.queryByText('Past Unsettled Event')).not.toBeInTheDocument();
+  });
+
+  it('does not show unsettled past event in Archive tab', async () => {
+    const allEvents = [pastPaidUnsettled];
+    mockEventService.getEventsByOrganizer.mockResolvedValue(allEvents as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }]])
+    );
+
+    render(<EventsPage />);
+
+    const archiveTab = await screen.findByRole('tab', { name: /archive/i });
+    await userEvent.click(archiveTab);
+
+    await waitFor(() => {
+      expect(screen.getByText('No Archived Events')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/pages/__tests__/GroupDetailPage.test.tsx b/src/pages/__tests__/GroupDetailPage.test.tsx
new file mode 100644
index 0000000..5053cde
--- /dev/null
+++ b/src/pages/__tests__/GroupDetailPage.test.tsx
@@ -0,0 +1,236 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import type { User } from '@supabase/supabase-js';
+import { useAuth } from '@/hooks/useAuth';
+
+// Mock react-router-dom
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+    useParams: () => ({ groupId: 'test-group-id' }),
+  };
+});
+
+// Mock useAuth
+vi.mock('@/hooks/useAuth', () => ({
+  useAuth: vi.fn(() => ({
+    user: { id: 'organizer-123' },
+    loading: false,
+    isAdmin: false,
+    isImpersonating: false,
+    impersonate: vi.fn(),
+    stopImpersonating: vi.fn(),
+  })),
+  AuthProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+const mockUseAuth = vi.mocked(useAuth);
+
+// Mock useFeatureFlags
+vi.mock('@/hooks/useFeatureFlags', () => ({
+  useFeatureFlag: vi.fn(() => false),
+  FeatureFlagsProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+// Mock services
+vi.mock('@/services', () => ({
+  groupService: {
+    getGroupById: vi.fn(),
+    getGroupParticipants: vi.fn(),
+    getGroupEvents: vi.fn(),
+    isGroupAdmin: vi.fn(),
+  },
+  eventService: {
+    duplicateEvent: vi.fn(),
+  },
+  participantService: {
+    getPaymentSummariesBatch: vi.fn(),
+  },
+  pushSubscriptionService: {
+    isSupported: vi.fn(() => false),
+    isConfigured: vi.fn(() => false),
+    isSubscribed: vi.fn(() => Promise.resolve(false)),
+    getSubscriptions: vi.fn(() => Promise.resolve([])),
+  },
+  notificationService: {
+    getNotifications: vi.fn(() => Promise.resolve([])),
+    getUnreadCount: vi.fn(() => Promise.resolve(0)),
+    subscribeToNotifications: vi.fn(() => vi.fn()),
+  },
+  notificationPreferenceService: {
+    getPreferences: vi.fn(() => Promise.resolve(null)),
+  },
+}));
+
+// Mock error handler
+vi.mock('@/lib/errorHandler', () => ({
+  logError: vi.fn(),
+  errorHandler: {
+    handle: vi.fn(),
+    success: vi.fn(),
+    info: vi.fn(),
+  },
+}));
+
+import { render } from '@/test/utils/test-utils';
+import { GroupDetailPage } from '../GroupDetailPage';
+import { groupService, participantService } from '@/services';
+
+const mockGroupService = vi.mocked(groupService);
+const mockParticipantService = vi.mocked(participantService);
+
+const mockAuthReturn = {
+  user: { id: 'organizer-123' } as User,
+  session: null,
+  loading: false,
+  signIn: vi.fn(),
+  signUp: vi.fn(),
+  signInWithGoogle: vi.fn(),
+  signInWithGoogleIdToken: vi.fn(),
+  signOut: vi.fn(),
+  isAdmin: false,
+  isImpersonating: false,
+  impersonate: vi.fn(),
+  stopImpersonating: vi.fn(),
+  resetPasswordForEmail: vi.fn(),
+  updatePassword: vi.fn(),
+};
+
+const mockGroup = {
+  id: 'test-group-id',
+  name: 'Test Group',
+  description: 'A test group',
+  owner_id: 'organizer-123',
+  created_at: '2026-01-01T00:00:00Z',
+  invite_code: 'abc123',
+};
+
+const futureEvent = {
+  id: 'future-event',
+  name: 'Future Group Event',
+  datetime: '2027-06-01T10:00:00Z',
+  end_datetime: null,
+  organizer_id: 'organizer-123',
+  is_paid: false,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: 'test-group-id',
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2026-01-01T00:00:00Z',
+  participant_count: 3,
+};
+
+const pastPaidUnsettled = {
+  id: 'past-unsettled',
+  name: 'Past Unsettled Group Event',
+  datetime: '2024-01-01T10:00:00Z',
+  end_datetime: '2024-01-01T12:00:00Z',
+  organizer_id: 'organizer-123',
+  is_paid: true,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: 'test-group-id',
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2024-01-01T00:00:00Z',
+  participant_count: 4,
+};
+
+const pastPaidSettled = {
+  id: 'past-settled',
+  name: 'Past Settled Group Event',
+  datetime: '2024-02-01T10:00:00Z',
+  end_datetime: '2024-02-01T12:00:00Z',
+  organizer_id: 'organizer-123',
+  is_paid: true,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: 'test-group-id',
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2024-02-01T00:00:00Z',
+  participant_count: 2,
+};
+
+describe('GroupDetailPage - Unsettled payment filter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockGroupService.getGroupById.mockResolvedValue(mockGroup as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockGroupService.getGroupParticipants.mockResolvedValue([]);
+    mockGroupService.isGroupAdmin.mockResolvedValue(true);
+  });
+
+  it('shows past paid event with unpaid participants in Active filter', async () => {
+    const allEvents = [futureEvent, pastPaidUnsettled, pastPaidSettled];
+    mockGroupService.getGroupEvents.mockResolvedValue(allEvents as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([
+        ['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }],
+        ['past-settled', { total: 2, paid: 2, pending: 0, waived: 0 }],
+      ])
+    );
+
+    render(<GroupDetailPage />);
+
+    // Wait for group to load first
+    await waitFor(() => {
+      expect(screen.getByText('Test Group')).toBeInTheDocument();
+    });
+
+    // Wait for events to load — getGroupEvents is called, data should render
+    await waitFor(() => {
+      expect(mockGroupService.getGroupEvents).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Past Unsettled Group Event')).toBeInTheDocument();
+    });
+    // Future event should also be in Active
+    expect(screen.getByText('Future Group Event')).toBeInTheDocument();
+    // Settled past event should NOT be in Active
+    expect(screen.queryByText('Past Settled Group Event')).not.toBeInTheDocument();
+  });
+
+  it('excludes settled past event from Active filter', async () => {
+    const allEvents = [futureEvent, pastPaidUnsettled, pastPaidSettled];
+    mockGroupService.getGroupEvents.mockResolvedValue(allEvents as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([
+        ['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }],
+        ['past-settled', { total: 2, paid: 2, pending: 0, waived: 0 }],
+      ])
+    );
+
+    render(<GroupDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Future Group Event')).toBeInTheDocument();
+    });
+
+    // Settled past event should NOT appear in Active view
+    expect(screen.queryByText('Past Settled Group Event')).not.toBeInTheDocument();
+    // Unsettled past event should appear in Active view
+    expect(screen.getByText('Past Unsettled Group Event')).toBeInTheDocument();
+  });
+
+  it('shows only the unsettled event in Active when all others are settled', async () => {
+    // Only unsettled event — should show in Active, not be empty
+    mockGroupService.getGroupEvents.mockResolvedValue([pastPaidUnsettled] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }]])
+    );
+
+    render(<GroupDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Past Unsettled Group Event')).toBeInTheDocument();
+    });
+  });
+});

From 0d291c1c91ed5c7e5ca8db139bd628ca037aea0f Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 13:20:32 -0400
Subject: [PATCH 07/12] Fix organizer bypass on fully archived events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Organizers could still add/remove participants on past events where all
payments were settled. Now the bottom button, claim spots, and remove
button all use isArchived directly — which already accounts for payment
status. No special organizer bypass needed since isArchived is false
when payments are still pending.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/ParticipantListItem.tsx       |  2 +-
 src/pages/EventDetailPage.tsx                | 15 +++-----
 src/pages/__tests__/EventDetailPage.test.tsx | 36 ++++++++++++++++----
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/components/ParticipantListItem.tsx b/src/components/ParticipantListItem.tsx
index 5783b9f..9a48877 100644
--- a/src/components/ParticipantListItem.tsx
+++ b/src/components/ParticipantListItem.tsx
@@ -134,7 +134,7 @@ export function ParticipantListItem({
                     )}
                   </Button>
                 )}
-                {!isOrganizerItem && (!isArchived || isOrganizer) && (
+                {!isOrganizerItem && !isArchived && (
                   <Button
                     size="icon"
                     variant="outline"
diff --git a/src/pages/EventDetailPage.tsx b/src/pages/EventDetailPage.tsx
index 587aa2b..5005319 100644
--- a/src/pages/EventDetailPage.tsx
+++ b/src/pages/EventDetailPage.tsx
@@ -965,7 +965,7 @@ export function EventDetailPage() {
                   for (let slotNum = firstEmptySlot; slotNum <= event.max_participants; slotNum++) {
                     const isFirstEmptySlot = slotNum === firstEmptySlot;
                     const canClaimSpot =
-                      (!isArchived || isOrganizer) &&
+                      !isArchived &&
                       canUserClaimSpot({
                         hasUser: !!user,
                         isOrganizer,
@@ -1014,7 +1014,7 @@ export function EventDetailPage() {
       >
         <Button
           onClick={() => {
-            if (isEventCompleted(event.datetime, event.end_datetime) && !isOrganizer) return;
+            if (isArchived) return;
             if (isEventFull && !userRegistration) return;
             if (showRegistrationForm) {
               openSignupDrawer();
@@ -1024,14 +1024,9 @@ export function EventDetailPage() {
               handleDirectJoin();
             }
           }}
-          disabled={
-            (isEventCompleted(event.datetime, event.end_datetime) && !isOrganizer) ||
-            submitting ||
-            (isEventFull && !userRegistration)
-          }
+          disabled={isArchived || submitting || (isEventFull && !userRegistration)}
           className={`w-full text-white shadow-lg drop-shadow-md ${
-            (isEventCompleted(event.datetime, event.end_datetime) && !isOrganizer) ||
-            (isEventFull && !userRegistration)
+            isArchived || (isEventFull && !userRegistration)
               ? 'bg-muted-foreground'
               : userRegistration && !showRegistrationForm
                 ? 'bg-destructive hover:bg-destructive/90'
@@ -1039,7 +1034,7 @@ export function EventDetailPage() {
           }`}
           size="default"
         >
-          {isEventCompleted(event.datetime, event.end_datetime) && !isOrganizer ? (
+          {isArchived ? (
             <>
               <UserX className="h-5 w-5 mr-2" />
               Registration Closed
diff --git a/src/pages/__tests__/EventDetailPage.test.tsx b/src/pages/__tests__/EventDetailPage.test.tsx
index 8030f5c..cdd8aba 100644
--- a/src/pages/__tests__/EventDetailPage.test.tsx
+++ b/src/pages/__tests__/EventDetailPage.test.tsx
@@ -267,9 +267,10 @@ describe('EventDetailPage - Organizer on past events', () => {
     });
   });
 
-  it('shows Claim button for registered organizer on a past event', async () => {
+  it('shows Claim button for organizer on a past paid event with pending payments', async () => {
+    const pastPaidEvent = { ...pastEvent, is_paid: true };
     mockUseAuth.mockReturnValue(mockAuthReturn);
-    mockEventService.getEventById.mockResolvedValue(pastEvent);
+    mockEventService.getEventById.mockResolvedValue(pastPaidEvent);
     mockParticipantService.getParticipantsByEventId.mockResolvedValue([
       {
         id: 'p-1',
@@ -279,6 +280,12 @@ describe('EventDetailPage - Organizer on past events', () => {
         payment_status: 'pending',
       },
     ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummary.mockResolvedValue({
+      total: 1,
+      paid: 0,
+      pending: 1,
+      waived: 0,
+    });
 
     render(<EventDetailPage />);
 
@@ -306,10 +313,25 @@ describe('EventDetailPage - Organizer on past events', () => {
     expect(screen.queryByRole('button', { name: /claim/i })).not.toBeInTheDocument();
   });
 
-  it('does not show Registration Closed for organizer on a past event', async () => {
+  it('does not show Registration Closed for organizer on a past paid event with pending payments', async () => {
+    const pastPaidEvent = { ...pastEvent, is_paid: true };
     mockUseAuth.mockReturnValue(mockAuthReturn);
-    mockEventService.getEventById.mockResolvedValue(pastEvent);
-    mockParticipantService.getParticipantsByEventId.mockResolvedValue([]);
+    mockEventService.getEventById.mockResolvedValue(pastPaidEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([
+      {
+        id: 'p-1',
+        name: 'Player',
+        user_id: 'user-456',
+        event_id: 'test-event-id',
+        payment_status: 'pending',
+      },
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummary.mockResolvedValue({
+      total: 1,
+      paid: 0,
+      pending: 1,
+      waived: 0,
+    });
 
     render(<EventDetailPage />);
 
@@ -401,8 +423,8 @@ describe('EventDetailPage - Organizer on past events', () => {
       expect(screen.getByText('Test Event')).toBeInTheDocument();
     });
 
-    // Event is archived — organizer bypass still applies for claim/join
-    expect(screen.queryByText('Registration Closed')).not.toBeInTheDocument();
+    // Event is archived — all paid, so Registration Closed for everyone
+    expect(screen.getByText('Registration Closed')).toBeInTheDocument();
   });
 });
 

From fdacfc29a74d44b9c0f1c2a72ad36502bad5fbf4 Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 14:21:10 -0400
Subject: [PATCH 08/12] Block non-organizers from joining past events with
 unsettled payments

isArchived alone isn't sufficient since it's false for past paid events
with pending payments. Non-organizers must also be blocked when the event
is past, regardless of payment status. Only organizers should be able to
manage participants on unsettled past events.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/EventDetailPage.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/pages/EventDetailPage.tsx b/src/pages/EventDetailPage.tsx
index 5005319..06e8ead 100644
--- a/src/pages/EventDetailPage.tsx
+++ b/src/pages/EventDetailPage.tsx
@@ -1014,7 +1014,7 @@ export function EventDetailPage() {
       >
         <Button
           onClick={() => {
-            if (isArchived) return;
+            if (isArchived || (isEventPast && !isOrganizer)) return;
             if (isEventFull && !userRegistration) return;
             if (showRegistrationForm) {
               openSignupDrawer();
@@ -1024,9 +1024,14 @@ export function EventDetailPage() {
               handleDirectJoin();
             }
           }}
-          disabled={isArchived || submitting || (isEventFull && !userRegistration)}
+          disabled={
+            isArchived ||
+            (isEventPast && !isOrganizer) ||
+            submitting ||
+            (isEventFull && !userRegistration)
+          }
           className={`w-full text-white shadow-lg drop-shadow-md ${
-            isArchived || (isEventFull && !userRegistration)
+            isArchived || (isEventPast && !isOrganizer) || (isEventFull && !userRegistration)
               ? 'bg-muted-foreground'
               : userRegistration && !showRegistrationForm
                 ? 'bg-destructive hover:bg-destructive/90'
@@ -1034,7 +1039,7 @@ export function EventDetailPage() {
           }`}
           size="default"
         >
-          {isArchived ? (
+          {isArchived || (isEventPast && !isOrganizer) ? (
             <>
               <UserX className="h-5 w-5 mr-2" />
               Registration Closed

From cb3b731eb680cf7e78bf45b19f3d29daafe53c6b Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 14:27:32 -0400
Subject: [PATCH 09/12] Show unsettled events based on user role and own
 payment status

- Organizers/admins: past paid events stay active while any participant
  has pending payments (existing behavior)
- Non-organizer participants: past paid events stay active only while
  their own payment is pending
- Added getMyPaymentStatusBatch to participantService for efficient
  per-user payment status lookup
- Fixed allPaid edge case: zero participants no longer counts as
  "all paid", so organizers can add participants to empty past paid events

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/EventDetailPage.tsx      |  2 +-
 src/pages/EventsPage.tsx           | 22 +++++++++++++++++++++-
 src/pages/GroupDetailPage.tsx      | 25 ++++++++++++++++++-------
 src/services/participantService.ts | 30 ++++++++++++++++++++++++++++++
 4 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/src/pages/EventDetailPage.tsx b/src/pages/EventDetailPage.tsx
index 06e8ead..5a49b9d 100644
--- a/src/pages/EventDetailPage.tsx
+++ b/src/pages/EventDetailPage.tsx
@@ -132,7 +132,7 @@ export function EventDetailPage() {
   // Event is past its end time
   const isEventPast = event ? isEventCompleted(event.datetime, event.end_datetime) : false;
   // Event is fully archived only when past AND all participants have settled payment
-  const allPaid = paymentSummary.total === 0 || paymentSummary.pending === 0;
+  const allPaid = paymentSummary.total > 0 && paymentSummary.pending === 0;
   const isArchived = isEventPast && (!event?.is_paid || allPaid);
   const effectiveIsPaid = isEventPast || (event?.is_paid ?? true);
 
diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx
index a20261f..6b39d54 100644
--- a/src/pages/EventsPage.tsx
+++ b/src/pages/EventsPage.tsx
@@ -77,7 +77,27 @@ export function EventsPage() {
   const loadJoinedEventsCallback = useCallback(async () => {
     if (!user) return [];
     const allEvents = await eventService.getEventsByParticipant(user.id);
-    return allEvents.filter((event) => !isEventCompleted(event.datetime, event.end_datetime));
+    const activeEvents = allEvents.filter(
+      (event) => !isEventCompleted(event.datetime, event.end_datetime)
+    );
+    const pastPaidEvents = allEvents.filter(
+      (event) => isEventCompleted(event.datetime, event.end_datetime) && event.is_paid
+    );
+
+    // Past paid events where the user hasn't paid stay in Joined
+    if (pastPaidEvents.length > 0) {
+      const myStatuses = await participantService.getMyPaymentStatusBatch(
+        user.id,
+        pastPaidEvents.map((e) => e.id)
+      );
+      const unsettledForMe = pastPaidEvents.filter((event) => {
+        const status = myStatuses.get(event.id);
+        return status === 'pending';
+      });
+      return [...activeEvents, ...unsettledForMe];
+    }
+
+    return activeEvents;
   }, [user]);
 
   const loadArchivedEventsCallback = useCallback(async () => {
diff --git a/src/pages/GroupDetailPage.tsx b/src/pages/GroupDetailPage.tsx
index ae116d6..96b3a15 100644
--- a/src/pages/GroupDetailPage.tsx
+++ b/src/pages/GroupDetailPage.tsx
@@ -40,6 +40,7 @@ export function GroupDetailPage() {
   const isEventDuplicationEnabled = useFeatureFlag('event_duplication');
   const loadingRef = useRef(false);
   const hasLoadedRef = useRef(false);
+  const isAdminRef = useRef(false);
   const {
     isLoading: eventsLoading,
     data: events,
@@ -62,6 +63,7 @@ export function GroupDetailPage() {
       // Check if current user is admin or owner
       if (user?.id) {
         const adminStatus = await groupService.isGroupAdmin(groupId, user.id);
+        isAdminRef.current = adminStatus;
         setIsAdmin(adminStatus);
       }
       return true;
@@ -84,17 +86,26 @@ export function GroupDetailPage() {
       (e) => e.is_paid && isEventCompleted(e.datetime, e.end_datetime)
     );
     if (pastPaidEvents.length > 0) {
-      const summaries = await participantService.getPaymentSummariesBatch(
-        pastPaidEvents.map((e) => e.id)
-      );
-      for (const event of pastPaidEvents) {
-        const summary = summaries.get(event.id);
-        event._unsettled = !!(summary && summary.pending > 0);
+      const pastPaidIds = pastPaidEvents.map((e) => e.id);
+
+      if (isAdminRef.current) {
+        // Admins: event is unsettled if any participant has pending payments
+        const summaries = await participantService.getPaymentSummariesBatch(pastPaidIds);
+        for (const event of pastPaidEvents) {
+          const summary = summaries.get(event.id);
+          event._unsettled = !!(summary && summary.pending > 0);
+        }
+      } else if (user?.id) {
+        // Non-admins: event is unsettled only if their own payment is pending
+        const myStatuses = await participantService.getMyPaymentStatusBatch(user.id, pastPaidIds);
+        for (const event of pastPaidEvents) {
+          event._unsettled = myStatuses.get(event.id) === 'pending';
+        }
       }
     }
 
     return allEvents;
-  }, [groupId]);
+  }, [groupId, user?.id]);
 
   const handleInvite = useCallback(async () => {
     if (!group) return;
diff --git a/src/services/participantService.ts b/src/services/participantService.ts
index 2fc2873..be77a3b 100644
--- a/src/services/participantService.ts
+++ b/src/services/participantService.ts
@@ -762,6 +762,36 @@ export const participantService = {
     return summaryMap;
   },
 
+  /**
+   * Returns the current user's payment status for each of the given events.
+   * Only returns entries where the user is a participant.
+   * @param userId - UUID of the user
+   * @param eventIds - Array of event IDs to check
+   * @returns Map of event ID to payment_status
+   */
+  async getMyPaymentStatusBatch(
+    userId: string,
+    eventIds: string[]
+  ): Promise<Map<string, 'pending' | 'paid' | 'waived'>> {
+    if (eventIds.length === 0) return new Map();
+
+    const { data, error } = await supabase
+      .from('participants')
+      .select('event_id, payment_status')
+      .eq('user_id', userId)
+      .in('event_id', eventIds);
+
+    throwIfSupabaseError({ data, error });
+
+    const result = new Map<string, 'pending' | 'paid' | 'waived'>();
+    if (data) {
+      for (const p of data) {
+        result.set(p.event_id, (p.payment_status as 'pending' | 'paid' | 'waived') || 'pending');
+      }
+    }
+    return result;
+  },
+
   /**
    * Creates multiple participants in batch, typically for adding group members to an event.
    * Handles duplicates gracefully by tracking them separately.

From 969063aac1ee7114b79a34901d5e03cb70c54029 Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 14:29:46 -0400
Subject: [PATCH 10/12] Extract duplicated filter and registration-closed logic
 into variables

- GroupDetailPage: compute filteredEvents once instead of filtering twice
- EventDetailPage: extract isRegistrationClosed to replace 4 repeated
  instances of isArchived || (isEventPast && !isOrganizer)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/EventDetailPage.tsx | 15 ++++------
 src/pages/GroupDetailPage.tsx | 55 ++++++++++++++++++-----------------
 2 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/pages/EventDetailPage.tsx b/src/pages/EventDetailPage.tsx
index 5a49b9d..0cc0a32 100644
--- a/src/pages/EventDetailPage.tsx
+++ b/src/pages/EventDetailPage.tsx
@@ -134,6 +134,8 @@ export function EventDetailPage() {
   // Event is fully archived only when past AND all participants have settled payment
   const allPaid = paymentSummary.total > 0 && paymentSummary.pending === 0;
   const isArchived = isEventPast && (!event?.is_paid || allPaid);
+  // Registration is closed for non-organizers on past events, or for everyone on archived events
+  const isRegistrationClosed = isArchived || (isEventPast && !isOrganizer);
   const effectiveIsPaid = isEventPast || (event?.is_paid ?? true);
 
   // Check if event is at full capacity
@@ -1014,7 +1016,7 @@ export function EventDetailPage() {
       >
         <Button
           onClick={() => {
-            if (isArchived || (isEventPast && !isOrganizer)) return;
+            if (isRegistrationClosed) return;
             if (isEventFull && !userRegistration) return;
             if (showRegistrationForm) {
               openSignupDrawer();
@@ -1024,14 +1026,9 @@ export function EventDetailPage() {
               handleDirectJoin();
             }
           }}
-          disabled={
-            isArchived ||
-            (isEventPast && !isOrganizer) ||
-            submitting ||
-            (isEventFull && !userRegistration)
-          }
+          disabled={isRegistrationClosed || submitting || (isEventFull && !userRegistration)}
           className={`w-full text-white shadow-lg drop-shadow-md ${
-            isArchived || (isEventPast && !isOrganizer) || (isEventFull && !userRegistration)
+            isRegistrationClosed || (isEventFull && !userRegistration)
               ? 'bg-muted-foreground'
               : userRegistration && !showRegistrationForm
                 ? 'bg-destructive hover:bg-destructive/90'
@@ -1039,7 +1036,7 @@ export function EventDetailPage() {
           }`}
           size="default"
         >
-          {isArchived || (isEventPast && !isOrganizer) ? (
+          {isRegistrationClosed ? (
             <>
               <UserX className="h-5 w-5 mr-2" />
               Registration Closed
diff --git a/src/pages/GroupDetailPage.tsx b/src/pages/GroupDetailPage.tsx
index 96b3a15..0cbca3e 100644
--- a/src/pages/GroupDetailPage.tsx
+++ b/src/pages/GroupDetailPage.tsx
@@ -304,34 +304,34 @@ export function GroupDetailPage() {
             </Select>
           </div>
 
-          {eventsLoading ? (
-            <EventListSkeleton count={3} />
-          ) : !events ||
-            events.filter((e) =>
+          {(() => {
+            if (eventsLoading) return <EventListSkeleton count={3} />;
+
+            const filteredEvents = (events || []).filter((e) =>
               eventFilter === 'active'
                 ? !isEventCompleted(e.datetime, e.end_datetime) || !!e._unsettled
                 : isEventCompleted(e.datetime, e.end_datetime) && !e._unsettled
-            ).length === 0 ? (
-            <div className="p-6 text-center">
-              <Calendar className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
-              <h3 className="text-base font-medium mb-2">
-                {eventFilter === 'active' ? 'No Active Events' : 'No Archived Events'}
-              </h3>
-              <p className="text-xs text-muted-foreground">
-                {eventFilter === 'active'
-                  ? 'Create your first event for this group'
-                  : 'Completed events will appear here'}
-              </p>
-            </div>
-          ) : (
-            <div className="divide-y">
-              {events
-                .filter((e) =>
-                  eventFilter === 'active'
-                    ? !isEventCompleted(e.datetime, e.end_datetime) || !!e._unsettled
-                    : isEventCompleted(e.datetime, e.end_datetime) && !e._unsettled
-                )
-                .map((event) => (
+            );
+
+            if (filteredEvents.length === 0) {
+              return (
+                <div className="p-6 text-center">
+                  <Calendar className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
+                  <h3 className="text-base font-medium mb-2">
+                    {eventFilter === 'active' ? 'No Active Events' : 'No Archived Events'}
+                  </h3>
+                  <p className="text-xs text-muted-foreground">
+                    {eventFilter === 'active'
+                      ? 'Create your first event for this group'
+                      : 'Completed events will appear here'}
+                  </p>
+                </div>
+              );
+            }
+
+            return (
+              <div className="divide-y">
+                {filteredEvents.map((event) => (
                   <div key={event.id} className="relative">
                     <button
                       onClick={() => navigate(`/signup/${event.id}`)}
@@ -384,8 +384,9 @@ export function GroupDetailPage() {
                     )}
                   </div>
                 ))}
-            </div>
-          )}
+              </div>
+            );
+          })()}
         </div>
       </div>
 

From 44f4248270eace8cac52033756c4fa5d7d48397f Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 14:31:14 -0400
Subject: [PATCH 11/12] Add tests for non-organizer participant payment-aware
 filtering

- EventsPage Joined tab: past paid event stays when user has pending
  payment, hidden when paid, past free events always hidden
- GroupDetailPage non-admin: past paid event stays in Active when user
  has pending payment, hidden when paid

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/__tests__/EventsPage.test.tsx      | 57 ++++++++++++++++++++
 src/pages/__tests__/GroupDetailPage.test.tsx | 44 +++++++++++++++
 2 files changed, 101 insertions(+)

diff --git a/src/pages/__tests__/EventsPage.test.tsx b/src/pages/__tests__/EventsPage.test.tsx
index 111030d..d750ad6 100644
--- a/src/pages/__tests__/EventsPage.test.tsx
+++ b/src/pages/__tests__/EventsPage.test.tsx
@@ -42,6 +42,7 @@ vi.mock('@/services', () => ({
   },
   participantService: {
     getPaymentSummariesBatch: vi.fn(),
+    getMyPaymentStatusBatch: vi.fn(),
   },
   pushSubscriptionService: {
     isSupported: vi.fn(() => false),
@@ -235,3 +236,59 @@ describe('EventsPage - Unsettled payment tab placement', () => {
     });
   });
 });
+
+describe('EventsPage - Joined tab: participant payment-aware filtering', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventsByOrganizer.mockResolvedValue([]);
+  });
+
+  it('shows past paid event in Joined tab when participant has pending payment', async () => {
+    mockEventService.getEventsByParticipant.mockResolvedValue([
+      futureEvent,
+      pastPaidUnsettled,
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getMyPaymentStatusBatch.mockResolvedValue(
+      new Map([['past-unsettled', 'pending']])
+    );
+
+    render(<EventsPage />);
+
+    // Joined tab is the default
+    await waitFor(() => {
+      expect(screen.getByText('Future Event')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Past Unsettled Event')).toBeInTheDocument();
+  });
+
+  it('hides past paid event from Joined tab when participant has paid', async () => {
+    mockEventService.getEventsByParticipant.mockResolvedValue([
+      futureEvent,
+      pastPaidSettled,
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getMyPaymentStatusBatch.mockResolvedValue(
+      new Map([['past-settled', 'paid']])
+    );
+
+    render(<EventsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Future Event')).toBeInTheDocument();
+    });
+    // Settled event should NOT appear in Joined
+    expect(screen.queryByText('Past Settled Event')).not.toBeInTheDocument();
+  });
+
+  it('hides past free event from Joined tab', async () => {
+    mockEventService.getEventsByParticipant.mockResolvedValue([futureEvent, pastFreeEvent] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+
+    render(<EventsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Future Event')).toBeInTheDocument();
+    });
+    // Past free event should NOT appear in Joined
+    expect(screen.queryByText('Past Free Event')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/pages/__tests__/GroupDetailPage.test.tsx b/src/pages/__tests__/GroupDetailPage.test.tsx
index 5053cde..f709f62 100644
--- a/src/pages/__tests__/GroupDetailPage.test.tsx
+++ b/src/pages/__tests__/GroupDetailPage.test.tsx
@@ -47,6 +47,7 @@ vi.mock('@/services', () => ({
   },
   participantService: {
     getPaymentSummariesBatch: vi.fn(),
+    getMyPaymentStatusBatch: vi.fn(),
   },
   pushSubscriptionService: {
     isSupported: vi.fn(() => false),
@@ -234,3 +235,46 @@ describe('GroupDetailPage - Unsettled payment filter', () => {
     });
   });
 });
+
+describe('GroupDetailPage - Non-admin participant payment filtering', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockGroupService.getGroupById.mockResolvedValue(mockGroup as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockGroupService.getGroupParticipants.mockResolvedValue([]);
+    mockGroupService.isGroupAdmin.mockResolvedValue(false); // Non-admin
+  });
+
+  it('shows past paid event in Active when participant has pending payment', async () => {
+    mockGroupService.getGroupEvents.mockResolvedValue([futureEvent, pastPaidUnsettled] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getMyPaymentStatusBatch.mockResolvedValue(
+      new Map([['past-unsettled', 'pending']])
+    );
+
+    render(<GroupDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Group')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Past Unsettled Group Event')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Future Group Event')).toBeInTheDocument();
+  });
+
+  it('hides past paid event from Active when participant has paid', async () => {
+    mockGroupService.getGroupEvents.mockResolvedValue([futureEvent, pastPaidSettled] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getMyPaymentStatusBatch.mockResolvedValue(
+      new Map([['past-settled', 'paid']])
+    );
+
+    render(<GroupDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Future Group Event')).toBeInTheDocument();
+    });
+    // Settled event should NOT appear in Active for non-admin
+    expect(screen.queryByText('Past Settled Group Event')).not.toBeInTheDocument();
+  });
+});

From ec78497217d9e56dd3d0daaca6fdd33de571e56c Mon Sep 17 00:00:00 2001
From: Michael Chu <mchchu88@gmail.com>
Date: Mon, 9 Mar 2026 14:39:28 -0400
Subject: [PATCH 12/12] Show unpaid indicator on events kept active due to
 pending payment

Adds an amber Clock icon with "Unpaid" label on event cards in the
Joined tab and GroupDetailPage Active filter when the event is past
but kept active because the participant hasn't paid yet.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/EventsPage.tsx      | 31 ++++++++++++++++++++++++-------
 src/pages/GroupDetailPage.tsx |  8 +++++++-
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx
index 6b39d54..d4fee35 100644
--- a/src/pages/EventsPage.tsx
+++ b/src/pages/EventsPage.tsx
@@ -46,6 +46,7 @@ export function EventsPage() {
   const [duplicatingEventId, setDuplicatingEventId] = useState<string | null>(null);
   const [paymentFilter, setPaymentFilter] = useState<PaymentFilter>('all');
   const [paymentSummaries, setPaymentSummaries] = useState<Map<string, PaymentSummary>>(new Map());
+  const unsettledJoinedIdsRef = useRef<Set<string>>(new Set());
   const isEventDuplicationEnabled = useFeatureFlag('event_duplication');
   const hasLoadedRef = useRef(false);
 
@@ -94,9 +95,11 @@ export function EventsPage() {
         const status = myStatuses.get(event.id);
         return status === 'pending';
       });
+      unsettledJoinedIdsRef.current = new Set(unsettledForMe.map((e) => e.id));
       return [...activeEvents, ...unsettledForMe];
     }
 
+    unsettledJoinedIdsRef.current = new Set();
     return activeEvents;
   }, [user]);
 
@@ -211,7 +214,8 @@ export function EventsPage() {
     isLoading: boolean,
     showDuplicate: boolean,
     emptyState?: { title: string; description: string; icon?: React.ReactNode },
-    showPaymentStatus?: boolean
+    showPaymentStatus?: boolean,
+    showUserUnpaid?: Set<string>
   ) => {
     if (isLoading) {
       return <EventListSkeleton count={3} />;
@@ -293,6 +297,12 @@ export function EventsPage() {
                         )}
                       </div>
                     )}
+                    {showUserUnpaid?.has(event.id) && (
+                      <div className="flex items-center gap-1 text-amber-600">
+                        <Clock className="h-3 w-3" />
+                        <span className="font-medium">Unpaid</span>
+                      </div>
+                    )}
                     <div className="flex items-center gap-1 text-muted-foreground">
                       <Users className="h-3 w-3" />
                       <span className="font-medium">{event.participant_count || 0}</span>
@@ -345,12 +355,19 @@ export function EventsPage() {
           </div>
         </div>
         <TabsContent value="joined" className="p-3 space-y-3 mt-0">
-          {renderEventList(joinedEvents, isLoadingJoined, false, {
-            title: 'Welcome to Roster!',
-            description:
-              'Join an event using a link from your organizer, or create your own with the button below.',
-            icon: <span>🎉</span>,
-          })}
+          {renderEventList(
+            joinedEvents,
+            isLoadingJoined,
+            false,
+            {
+              title: 'Welcome to Roster!',
+              description:
+                'Join an event using a link from your organizer, or create your own with the button below.',
+              icon: <span>🎉</span>,
+            },
+            false,
+            unsettledJoinedIdsRef.current
+          )}
           {(!joinedEvents || joinedEvents.length === 0) && !isLoadingJoined && (
             <Alert className="border-violet-500/30 bg-violet-500/10 [&>svg]:text-violet-500">
               <Lightbulb className="h-4 w-4 text-violet-500" />
diff --git a/src/pages/GroupDetailPage.tsx b/src/pages/GroupDetailPage.tsx
index 0cbca3e..b8e606d 100644
--- a/src/pages/GroupDetailPage.tsx
+++ b/src/pages/GroupDetailPage.tsx
@@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { useAuth } from '@/hooks/useAuth';
-import { Calendar, Users, Plus, UsersRound, Share2, Edit, Copy } from 'lucide-react';
+import { Calendar, Users, Plus, UsersRound, Share2, Edit, Copy, Clock } from 'lucide-react';
 import { TopNav } from '@/components/TopNav';
 import {
   Select,
@@ -351,6 +351,12 @@ export function GroupDetailPage() {
                             </div>
                           )}
                           <div className="flex items-center gap-3">
+                            {event._unsettled && !isAdmin && (
+                              <div className="flex items-center gap-1 text-amber-600">
+                                <Clock className="h-3 w-3" />
+                                <span className="font-medium">Unpaid</span>
+                              </div>
+                            )}
                             <div className="flex items-center gap-1">
                               <Users className="h-3 w-3" />
                               <span>{event.participant_count || 0} registered</span>