website refactor

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

@@ -1,6 +1,5 @@
 'use client';
 
-import Card from '@/components/ui/Card';
 import type { MembershipRole } from '@/lib/types/MembershipRole';
 import { useParams } from 'next/navigation';
 import { useMemo } from 'react';
@@ -12,6 +11,7 @@ import {
   useUpdateMemberRole,
   useRemoveMember,
 } from "@/lib/hooks/league/useLeagueRosterAdmin";
+import { RosterAdminTemplate } from '@/templates/RosterAdminTemplate';
 
 const ROLE_OPTIONS: MembershipRole[] = ['owner', 'admin', 'steward', 'member'];
 
@@ -72,114 +72,16 @@ export function RosterAdminPage() {
   };
 
   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.driver as any)?.name || 'Unknown'}</p>
-                      <p className="text-xs text-gray-400 truncate">{req.requestedAt}</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.driver.name}</p>
-                      <p className="text-xs text-gray-400 truncate">{member.joinedAt}</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.driver.name}
-                      </label>
-                      <select
-                        id={`role-${member.driverId}`}
-                        aria-label={`Role for ${member.driver.name}`}
-                        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>
+    <RosterAdminTemplate
+      joinRequests={joinRequests}
+      members={members}
+      loading={loading}
+      pendingCountLabel={pendingCountLabel}
+      onApprove={handleApprove}
+      onReject={handleReject}
+      onRoleChange={handleRoleChange}
+      onRemove={handleRemove}
+      roleOptions={ROLE_OPTIONS}
+    />
   );
 }