wip league admin tools

apps/website/app/leagues/[id]/roster/admin/RosterAdminPage.test.tsx

@@ -0,0 +1,179 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import type { Mocked } from 'vitest';
+
+import type { LeagueAdminRosterJoinRequestViewModel } from '@/lib/view-models/LeagueAdminRosterJoinRequestViewModel';
+import type { LeagueAdminRosterMemberViewModel } from '@/lib/view-models/LeagueAdminRosterMemberViewModel';
+import { RosterAdminPage } from './RosterAdminPage';
+
+type RosterAdminLeagueService = {
+  getAdminRosterJoinRequests(leagueId: string): Promise<LeagueAdminRosterJoinRequestViewModel[]>;
+  getAdminRosterMembers(leagueId: string): Promise<LeagueAdminRosterMemberViewModel[]>;
+  approveJoinRequest(leagueId: string, joinRequestId: string): Promise<{ success: boolean }>;
+  rejectJoinRequest(leagueId: string, joinRequestId: string): Promise<{ success: boolean }>;
+  updateMemberRole(leagueId: string, driverId: string, role: string): Promise<{ success: boolean }>;
+  removeMember(leagueId: string, driverId: string): Promise<{ success: boolean }>;
+};
+
+let mockLeagueService: Mocked<RosterAdminLeagueService>;
+
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ id: 'league-1' }),
+}));
+
+vi.mock('@/lib/services/ServiceProvider', async (importOriginal) => {
+  const actual = (await importOriginal()) as object;
+  return {
+    ...actual,
+    useServices: () => ({
+      leagueService: mockLeagueService,
+    }),
+  };
+});
+
+function makeJoinRequest(overrides: Partial<LeagueAdminRosterJoinRequestViewModel> = {}): LeagueAdminRosterJoinRequestViewModel {
+  return {
+    id: 'jr-1',
+    leagueId: 'league-1',
+    driverId: 'driver-1',
+    driverName: 'Driver One',
+    requestedAtIso: '2025-01-01T00:00:00.000Z',
+    message: 'Please let me in',
+    ...overrides,
+  };
+}
+
+function makeMember(overrides: Partial<LeagueAdminRosterMemberViewModel> = {}): LeagueAdminRosterMemberViewModel {
+  return {
+    driverId: 'driver-10',
+    driverName: 'Member Ten',
+    role: 'member',
+    joinedAtIso: '2025-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+describe('RosterAdminPage', () => {
+  beforeEach(() => {
+    mockLeagueService = {
+      getAdminRosterJoinRequests: vi.fn(),
+      getAdminRosterMembers: vi.fn(),
+      approveJoinRequest: vi.fn(),
+      rejectJoinRequest: vi.fn(),
+      updateMemberRole: vi.fn(),
+      removeMember: vi.fn(),
+    } as any;
+  });
+
+  it('renders join requests + members from service ViewModels', async () => {
+    const joinRequests: LeagueAdminRosterJoinRequestViewModel[] = [
+      makeJoinRequest({ id: 'jr-1', driverName: 'Driver One' }),
+      makeJoinRequest({ id: 'jr-2', driverName: 'Driver Two', driverId: 'driver-2' }),
+    ];
+
+    const members: LeagueAdminRosterMemberViewModel[] = [
+      makeMember({ driverId: 'driver-10', driverName: 'Member Ten', role: 'member' }),
+      makeMember({ driverId: 'driver-11', driverName: 'Member Eleven', role: 'admin' }),
+    ];
+
+    mockLeagueService.getAdminRosterJoinRequests.mockResolvedValue(joinRequests);
+    mockLeagueService.getAdminRosterMembers.mockResolvedValue(members);
+
+    render(<RosterAdminPage />);
+
+    expect(await screen.findByText('Roster Admin')).toBeInTheDocument();
+
+    expect(await screen.findByText('Driver One')).toBeInTheDocument();
+    expect(screen.getByText('Driver Two')).toBeInTheDocument();
+
+    expect(await screen.findByText('Member Ten')).toBeInTheDocument();
+    expect(screen.getByText('Member Eleven')).toBeInTheDocument();
+  });
+
+  it('approves a join request and removes it from the pending list', async () => {
+    mockLeagueService.getAdminRosterJoinRequests.mockResolvedValue([makeJoinRequest({ id: 'jr-1', driverName: 'Driver One' })]);
+    mockLeagueService.getAdminRosterMembers.mockResolvedValue([makeMember({ driverId: 'driver-10', driverName: 'Member Ten' })]);
+    mockLeagueService.approveJoinRequest.mockResolvedValue({ success: true } as any);
+
+    render(<RosterAdminPage />);
+
+    expect(await screen.findByText('Driver One')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('join-request-jr-1-approve'));
+
+    await waitFor(() => {
+      expect(mockLeagueService.approveJoinRequest).toHaveBeenCalledWith('league-1', 'jr-1');
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Driver One')).not.toBeInTheDocument();
+    });
+  });
+
+  it('rejects a join request and removes it from the pending list', async () => {
+    mockLeagueService.getAdminRosterJoinRequests.mockResolvedValue([makeJoinRequest({ id: 'jr-2', driverName: 'Driver Two' })]);
+    mockLeagueService.getAdminRosterMembers.mockResolvedValue([makeMember({ driverId: 'driver-10', driverName: 'Member Ten' })]);
+    mockLeagueService.rejectJoinRequest.mockResolvedValue({ success: true } as any);
+
+    render(<RosterAdminPage />);
+
+    expect(await screen.findByText('Driver Two')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('join-request-jr-2-reject'));
+
+    await waitFor(() => {
+      expect(mockLeagueService.rejectJoinRequest).toHaveBeenCalledWith('league-1', 'jr-2');
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Driver Two')).not.toBeInTheDocument();
+    });
+  });
+
+  it('changes a member role via service and updates the displayed role', async () => {
+    mockLeagueService.getAdminRosterJoinRequests.mockResolvedValue([]);
+    mockLeagueService.getAdminRosterMembers.mockResolvedValue([
+      makeMember({ driverId: 'driver-11', driverName: 'Member Eleven', role: 'member' }),
+    ]);
+    mockLeagueService.updateMemberRole.mockResolvedValue({ success: true } as any);
+
+    render(<RosterAdminPage />);
+
+    expect(await screen.findByText('Member Eleven')).toBeInTheDocument();
+
+    const roleSelect = screen.getByLabelText('Role for Member Eleven') as HTMLSelectElement;
+    expect(roleSelect.value).toBe('member');
+
+    fireEvent.change(roleSelect, { target: { value: 'admin' } });
+
+    await waitFor(() => {
+      expect(mockLeagueService.updateMemberRole).toHaveBeenCalledWith('league-1', 'driver-11', 'admin');
+    });
+
+    await waitFor(() => {
+      expect((screen.getByLabelText('Role for Member Eleven') as HTMLSelectElement).value).toBe('admin');
+    });
+  });
+
+  it('removes a member via service and removes them from the list', async () => {
+    mockLeagueService.getAdminRosterJoinRequests.mockResolvedValue([]);
+    mockLeagueService.getAdminRosterMembers.mockResolvedValue([
+      makeMember({ driverId: 'driver-12', driverName: 'Member Twelve', role: 'member' }),
+    ]);
+    mockLeagueService.removeMember.mockResolvedValue({ success: true } as any);
+
+    render(<RosterAdminPage />);
+
+    expect(await screen.findByText('Member Twelve')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('member-driver-12-remove'));
+
+    await waitFor(() => {
+      expect(mockLeagueService.removeMember).toHaveBeenCalledWith('league-1', 'driver-12');
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Member Twelve')).not.toBeInTheDocument();
+    });
+  });
+});

apps/website/app/leagues/[id]/roster/admin/RosterAdminPage.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import Card from '@/components/ui/Card';
+import type { LeagueAdminRosterJoinRequestViewModel } from '@/lib/view-models/LeagueAdminRosterJoinRequestViewModel';
+import type { LeagueAdminRosterMemberViewModel } from '@/lib/view-models/LeagueAdminRosterMemberViewModel';
+import type { MembershipRole } from '@/lib/types/MembershipRole';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { useParams } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+
+const ROLE_OPTIONS: MembershipRole[] = ['owner', 'admin', 'steward', 'member'];
+
+export function RosterAdminPage() {
+  const params = useParams();
+  const leagueId = params.id as string;
+
+  const { leagueService } = useServices();
+
+  const [loading, setLoading] = useState(true);
+  const [joinRequests, setJoinRequests] = useState<LeagueAdminRosterJoinRequestViewModel[]>([]);
+  const [members, setMembers] = useState<LeagueAdminRosterMemberViewModel[]>([]);
+
+  const loadRoster = async () => {
+    setLoading(true);
+    try {
+      const [requestsVm, membersVm] = await Promise.all([
+        leagueService.getAdminRosterJoinRequests(leagueId),
+        leagueService.getAdminRosterMembers(leagueId),
+      ]);
+      setJoinRequests(requestsVm);
+      setMembers(membersVm);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void loadRoster();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [leagueId]);
+
+  const pendingCountLabel = useMemo(() => {
+    return joinRequests.length === 1 ? '1 request' : `${joinRequests.length} requests`;
+  }, [joinRequests.length]);
+
+  const handleApprove = async (joinRequestId: string) => {
+    await leagueService.approveJoinRequest(leagueId, joinRequestId);
+    setJoinRequests((prev) => prev.filter((r) => r.id !== joinRequestId));
+  };
+
+  const handleReject = async (joinRequestId: string) => {
+    await leagueService.rejectJoinRequest(leagueId, joinRequestId);
+    setJoinRequests((prev) => prev.filter((r) => r.id !== joinRequestId));
+  };
+
+  const handleRoleChange = async (driverId: string, newRole: MembershipRole) => {
+    setMembers((prev) => prev.map((m) => (m.driverId === driverId ? { ...m, role: newRole } : m)));
+    const result = await leagueService.updateMemberRole(leagueId, driverId, newRole);
+    if (!result.success) {
+      await loadRoster();
+    }
+  };
+
+  const handleRemove = async (driverId: string) => {
+    await leagueService.removeMember(leagueId, driverId);
+    setMembers((prev) => prev.filter((m) => m.driverId !== driverId));
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <div className="space-y-4">
+          <div>
+            <h1 className="text-2xl font-bold text-white">Roster Admin</h1>
+            <p className="text-sm text-gray-400">Manage join requests and member roles.</p>
+          </div>
+
+          <div className="border-t border-charcoal-outline pt-4 space-y-3">
+            <div className="flex items-center justify-between gap-3">
+              <h2 className="text-lg font-semibold text-white">Pending join requests</h2>
+              <p className="text-xs text-gray-500">{pendingCountLabel}</p>
+            </div>
+
+            {loading ? (
+              <div className="py-4 text-sm text-gray-400">Loading…</div>
+            ) : joinRequests.length ? (
+              <div className="space-y-2">
+                {joinRequests.map((req) => (
+                  <div
+                    key={req.id}
+                    className="flex items-center justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
+                  >
+                    <div className="min-w-0">
+                      <p className="text-white font-medium truncate">{req.driverName}</p>
+                      <p className="text-xs text-gray-400 truncate">{req.requestedAtIso}</p>
+                      {req.message ? <p className="text-xs text-gray-500 truncate">{req.message}</p> : null}
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <button
+                        type="button"
+                        data-testid={`join-request-${req.id}-approve`}
+                        onClick={() => handleApprove(req.id)}
+                        className="px-3 py-1.5 rounded bg-primary-blue text-white"
+                      >
+                        Approve
+                      </button>
+                      <button
+                        type="button"
+                        data-testid={`join-request-${req.id}-reject`}
+                        onClick={() => handleReject(req.id)}
+                        className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
+                      >
+                        Reject
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="py-4 text-sm text-gray-500">No pending join requests.</div>
+            )}
+          </div>
+
+          <div className="border-t border-charcoal-outline pt-4 space-y-3">
+            <h2 className="text-lg font-semibold text-white">Members</h2>
+
+            {loading ? (
+              <div className="py-4 text-sm text-gray-400">Loading…</div>
+            ) : members.length ? (
+              <div className="space-y-2">
+                {members.map((member) => (
+                  <div
+                    key={member.driverId}
+                    className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
+                  >
+                    <div className="min-w-0">
+                      <p className="text-white font-medium truncate">{member.driverName}</p>
+                      <p className="text-xs text-gray-400 truncate">{member.joinedAtIso}</p>
+                    </div>
+
+                    <div className="flex flex-col md:flex-row md:items-center gap-2">
+                      <label className="text-xs text-gray-400" htmlFor={`role-${member.driverId}`}>
+                        Role for {member.driverName}
+                      </label>
+                      <select
+                        id={`role-${member.driverId}`}
+                        aria-label={`Role for ${member.driverName}`}
+                        value={member.role}
+                        onChange={(e) => handleRoleChange(member.driverId, e.target.value as MembershipRole)}
+                        className="bg-iron-gray text-white px-3 py-2 rounded"
+                      >
+                        {ROLE_OPTIONS.map((role) => (
+                          <option key={role} value={role}>
+                            {role}
+                          </option>
+                        ))}
+                      </select>
+
+                      <button
+                        type="button"
+                        data-testid={`member-${member.driverId}-remove`}
+                        onClick={() => handleRemove(member.driverId)}
+                        className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="py-4 text-sm text-gray-500">No members found.</div>
+            )}
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

apps/website/app/leagues/[id]/roster/admin/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { RosterAdminPage } from './RosterAdminPage';
+
+export default function LeagueRosterAdminPage() {
+  return <RosterAdminPage />;
+}