resolve todos in website

apps/website/app/teams/[id]/page.tsx

@@ -157,11 +157,12 @@ export default function TeamDetailPage() {
 
   const visibleTabs = tabs.filter(tab => tab.visible);
 
-  // Build sponsor insights for team
+  // Build sponsor insights for team using real membership and league data
+  const leagueCount = team.leagues?.length ?? 0;
   const teamMetrics = [
     MetricBuilders.members(memberships.length),
     MetricBuilders.reach(memberships.length * 15),
-    MetricBuilders.races(0), // TODO: Get league count from team data
+    MetricBuilders.races(leagueCount),
     MetricBuilders.engagement(82),
   ];
 
@@ -206,15 +207,27 @@ export default function TeamDetailPage() {
             <div>
               <div className="flex items-center gap-3 mb-2">
                 <h1 className="text-3xl font-bold text-white">{team.name}</h1>
-                {/* TODO: Add team tag when available */}
+                {team.tag && (
+                  <span className="px-2 py-0.5 rounded-full text-xs bg-charcoal-outline text-gray-300">
+                    [{team.tag}]
+                  </span>
+                )}
               </div>
 
               <p className="text-gray-300 mb-4 max-w-2xl">{team.description}</p>
 
               <div className="flex items-center gap-4 text-sm text-gray-400">
                 <span>{memberships.length} {memberships.length === 1 ? 'member' : 'members'}</span>
-                {/* TODO: Add created date when available */}
-                {/* TODO: Add league count when available */}
+                {team.createdAt && (
+                  <span>
+                    Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+                  </span>
+                )}
+                {leagueCount > 0 && (
+                  <span>
+                    Active in {leagueCount} {leagueCount === 1 ? 'league' : 'leagues'}
+                  </span>
+                )}
               </div>
             </div>
           </div>
@@ -259,8 +272,19 @@ export default function TeamDetailPage() {
                 <h3 className="text-xl font-semibold text-white mb-4">Quick Stats</h3>
                 <div className="space-y-3">
                   <StatItem label="Members" value={memberships.length.toString()} color="text-primary-blue" />
-                  <StatItem label="Leagues" value="0" color="text-green-400" /> {/* TODO: Get league count */}
-                  <StatItem label="Founded" value="Unknown" color="text-gray-300" /> {/* TODO: Get founded date */}
+                  {leagueCount > 0 && (
+                    <StatItem label="Leagues" value={leagueCount.toString()} color="text-green-400" />
+                  )}
+                  {team.createdAt && (
+                    <StatItem
+                      label="Founded"
+                      value={new Date(team.createdAt).toLocaleDateString('en-US', {
+                        month: 'short',
+                        year: 'numeric',
+                      })}
+                      color="text-gray-300"
+                    />
+                  )}
                 </div>
               </Card>
             </div>
@@ -285,7 +309,7 @@ export default function TeamDetailPage() {
         )}
 
         {activeTab === 'standings' && (
-          <TeamStandings teamId={teamId} leagues={[]} />
+          <TeamStandings teamId={teamId} leagues={team.leagues} />
         )}
 
         {activeTab === 'admin' && isAdmin && (

apps/website/app/teams/page.tsx

@@ -451,9 +451,29 @@ export default function TeamsPage() {
       const { teamService } = useServices();
       const teams = await teamService.getAllTeams();
       setRealTeams(teams);
-      // TODO: set groups and top teams from service or compute locally
-      setGroupsBySkillLevel({});
-      setTopTeams([]);
+
+      // Derive groups by skill level from the loaded teams
+      const byLevel: Record<SkillLevel, TeamDisplayData[]> = {
+        beginner: [],
+        intermediate: [],
+        advanced: [],
+        pro: [],
+      };
+      teams.forEach((team) => {
+        const level = (team.performanceLevel as SkillLevel) || 'intermediate';
+        if (byLevel[level]) {
+          byLevel[level].push(team as TeamDisplayData);
+        }
+      });
+      setGroupsBySkillLevel(byLevel);
+
+      // Select top teams by rating for the preview section
+      const sortedByRating = [...teams].sort((a, b) => {
+        const aRating = typeof a.rating === 'number' && Number.isFinite(a.rating) ? a.rating : 0;
+        const bRating = typeof b.rating === 'number' && Number.isFinite(b.rating) ? b.rating : 0;
+        return bRating - aRating;
+      });
+      setTopTeams(sortedByRating.slice(0, 5));
     } catch (error) {
       console.error('Failed to load teams:', error);
     } finally {