wip

apps/website/app/teams/page.tsx

@@ -2,12 +2,21 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import TeamCard from '@/components/teams/TeamCard';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import Card from '@/components/ui/Card';
 import CreateTeamForm from '@/components/teams/CreateTeamForm';
-import { getAllTeams, getTeamMembers, type Team } from '@/lib/racingLegacyFacade';
+import TeamLadderRow from '@/components/teams/TeamLadderRow';
+import { getGetAllTeamsQuery, getGetTeamMembersQuery, getDriverStats } from '@/lib/di-container';
+import type { Team } from '@gridpilot/racing';
+
+type TeamLadderItem = {
+  team: Team;
+  memberCount: number;
+  rating: number | null;
+  totalWins: number;
+  totalRaces: number;
+};
 
 export default function TeamsPage() {
   const router = useRouter();
@@ -15,25 +24,72 @@ export default function TeamsPage() {
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [memberFilter, setMemberFilter] = useState('all');
+  const [memberCounts, setMemberCounts] = useState<Record<string, number>>({});
+  const [teamStats, setTeamStats] = useState<Record<string, Omit<TeamLadderItem, 'team' | 'memberCount'>>>({});
+
+  const loadTeams = async () => {
+    const allTeamsQuery = getGetAllTeamsQuery();
+    const teamMembersQuery = getGetTeamMembersQuery();
+
+    const allTeams = await allTeamsQuery.execute();
+    setTeams(allTeams);
+
+    const counts: Record<string, number> = {};
+    const stats: Record<string, Omit<TeamLadderItem, 'team' | 'memberCount'>> = {};
+
+    await Promise.all(
+      allTeams.map(async (team) => {
+        const memberships = await teamMembersQuery.execute({ teamId: team.id });
+        counts[team.id] = memberships.length;
+
+        const memberDriverIds = memberships.map((m) => m.driverId);
+
+        let ratingSum = 0;
+        let ratingCount = 0;
+        let totalWins = 0;
+        let totalRaces = 0;
+
+        for (const driverId of memberDriverIds) {
+          const statsForDriver = getDriverStats(driverId);
+          if (!statsForDriver) continue;
+
+          if (typeof statsForDriver.rating === 'number') {
+            ratingSum += statsForDriver.rating;
+            ratingCount += 1;
+          }
+
+          totalWins += statsForDriver.wins ?? 0;
+          totalRaces += statsForDriver.totalRaces ?? 0;
+        }
+
+        const averageRating =
+          ratingCount > 0 ? ratingSum / ratingCount : null;
+
+        stats[team.id] = {
+          rating: averageRating,
+          totalWins,
+          totalRaces,
+        };
+      }),
+    );
+
+    setMemberCounts(counts);
+    setTeamStats(stats);
+  };
 
   useEffect(() => {
-    loadTeams();
+    void loadTeams();
   }, []);
 
-  const loadTeams = () => {
-    const allTeams = getAllTeams();
-    setTeams(allTeams);
-  };
-
   const handleCreateSuccess = (teamId: string) => {
     setShowCreateForm(false);
-    loadTeams();
+    void loadTeams();
     router.push(`/teams/${teamId}`);
   };
 
   const filteredTeams = teams.filter((team) => {
-    const memberCount = getTeamMembers(team.id).length;
-    
+    const memberCount = memberCounts[team.id] ?? 0;
+
     const matchesSearch = team.name.toLowerCase().includes(searchQuery.toLowerCase());
     const matchesMemberCount =
       memberFilter === 'all' ||
@@ -44,6 +100,30 @@ export default function TeamsPage() {
     return matchesSearch && matchesMemberCount;
   });
 
+  const sortedTeams = [...filteredTeams].sort((a, b) => {
+    const statsA = teamStats[a.id];
+    const statsB = teamStats[b.id];
+
+    const ratingA = statsA?.rating ?? null;
+    const ratingB = statsB?.rating ?? null;
+
+    const ratingValA = ratingA === null ? Number.NEGATIVE_INFINITY : ratingA;
+    const ratingValB = ratingB === null ? Number.NEGATIVE_INFINITY : ratingB;
+
+    if (ratingValA !== ratingValB) {
+      return ratingValB - ratingValA;
+    }
+
+    const winsA = statsA?.totalWins ?? 0;
+    const winsB = statsB?.totalWins ?? 0;
+
+    if (winsA !== winsB) {
+      return winsB - winsA;
+    }
+
+    return a.name.localeCompare(b.name);
+  });
+
   const handleTeamClick = (teamId: string) => {
     router.push(`/teams/${teamId}`);
   };
@@ -118,27 +198,54 @@ export default function TeamsPage() {
         </div>
       </Card>
 
-      <div className="mb-4">
+      <div className="mb-4 flex items-center justify-between">
         <p className="text-sm text-gray-400">
-          {filteredTeams.length} {filteredTeams.length === 1 ? 'team' : 'teams'} found
+          {sortedTeams.length} {sortedTeams.length === 1 ? 'team' : 'teams'} found
         </p>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {filteredTeams.map((team) => {
-          const memberCount = getTeamMembers(team.id).length;
-          return (
-            <TeamCard
-              key={team.id}
-              id={team.id}
-              name={team.name}
-              memberCount={memberCount}
-              leagues={team.leagues}
-              onClick={() => handleTeamClick(team.id)}
-            />
-          );
-        })}
-      </div>
+      {sortedTeams.length > 0 && (
+        <Card>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-charcoal-outline">
+                  <th className="text-left py-3 px-4 font-semibold text-gray-400">#</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-400">Team</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-400">Rating</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-400">Wins</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-400">Races</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-400">Members</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sortedTeams.map((team, index) => {
+                  const memberCount = memberCounts[team.id] ?? 0;
+                  const statsForTeam = teamStats[team.id];
+
+                  const rating = statsForTeam?.rating ?? null;
+                  const totalWins = statsForTeam?.totalWins ?? 0;
+                  const totalRaces = statsForTeam?.totalRaces ?? 0;
+                  const rank = index + 1;
+
+                  return (
+                    <TeamLadderRow
+                      key={team.id}
+                      rank={rank}
+                      teamId={team.id}
+                      teamName={team.name}
+                      memberCount={memberCount}
+                      teamRating={rating}
+                      totalWins={totalWins}
+                      totalRaces={totalRaces}
+                    />
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+      )}
 
       {filteredTeams.length === 0 && (
         <Card className="text-center py-12">