feat: implement onboarding flow & create league

app/(dashboard)/dashboard/page.tsx

@@ -6,11 +6,13 @@ import {
   CalendarToday as CalendarIcon,
   ArrowForward as ArrowForwardIcon,
 } from "@mui/icons-material";
+import OnboardingFlow from "@/components/features/onboarding/OnboardingFlow";
 import CreateTeamForm from "@/components/features/team/CreateTeamForm";
 import TeamCard from "@/components/features/dashboard/TeamCard";
 import { getUserMode } from "@/lib/utils/league-mode";
 import { getDashboardData } from "@/lib/actions/team-context";
 import { requireUserId } from "@/lib/auth/session";
+import { formatSport } from "@/lib/utils/validation";
 
 export default async function DashboardPage() {
   const userId = await requireUserId();
@@ -23,34 +25,7 @@ export default async function DashboardPage() {
   if (teams.length === 0 && userMode.leagues.length === 0) {
     return (
       <Container maxWidth="md">
-        <Box
-          sx={{
-            minHeight: "80vh",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            py: 4,
-          }}
-        >
-          <Typography
-            variant="h4"
-            component="h1"
-            gutterBottom
-            sx={{ textAlign: "center", mb: 2 }}
-          >
-            Welcome to OpenLeague
-          </Typography>
-          <Typography
-            variant="body1"
-            color="text.secondary"
-            sx={{ textAlign: "center", mb: 4, maxWidth: 500 }}
-          >
-            Get started by creating your first team. You&apos;ll be able to manage
-            your roster, schedule events, and track attendance all in one place.
-          </Typography>
-          <CreateTeamForm />
-        </Box>
+        <OnboardingFlow />
       </Container>
     );
   }
@@ -88,7 +63,7 @@ export default async function DashboardPage() {
                           {league.name}
                         </Typography>
                         <Typography variant="body2" color="text.secondary">
-                          {league.sport}
+                          {formatSport(league.sport)}
                         </Typography>
                         <Chip
                           label="League Admin"

app/(dashboard)/league/[leagueId]/schedule/page.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import LeagueCalendar from "@/components/features/calendar/LeagueCalendar";
 import { getLeagueScheduleData } from "@/lib/actions/league-context";
+import { formatSport } from "@/lib/utils/validation";
 
 interface LeagueSchedulePageProps {
   params: Promise<{ leagueId: string }>;
@@ -33,7 +34,7 @@ export default async function LeagueSchedulePage({ params }: LeagueSchedulePageP
               League Schedule
             </Typography>
             <Typography variant="body2" color="text.secondary">
-              {data.league.name} • {data.league.sport}
+              {data.league.name} • {formatSport(data.league.sport)}
             </Typography>
           </Box>
 

components/features/admin/TeamPermissionManager.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
+import { formatSport } from "@/lib/utils/validation";
 import {
     Box,
     Card,
@@ -288,7 +289,7 @@ export const TeamPermissionManager: React.FC<TeamPermissionManagerProps> = ({
                                         {team.name}
                                     </Typography>
                                     <Chip
-                                        label={`${team.sport} - ${team.season}`}
+                                        label={`${formatSport(team.sport)} - ${team.season}`}
                                         size="small"
                                         variant="outlined"
                                     />

components/features/dashboard/DashboardShell.tsx

@@ -59,6 +59,7 @@ export default function DashboardShell({ isLeagueMode, children }: DashboardShel
             priority
             sx={{
               p: 2,
+              color: "primary.main",
               transition: "transform 0.2s ease-in-out",
               "&:hover": { transform: "scale(1.02)" },
             }}

components/features/dashboard/LeagueDashboard.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React from 'react';
+import { formatSport } from "@/lib/utils/validation";
 import {
   Box,
   Card,
@@ -128,7 +129,7 @@ export default function LeagueDashboard({ league }: LeagueDashboardProps) {
           mb: 2,
           flexWrap: 'wrap'
         }}>
-          <Chip label={league.sport} color="primary" size="small" />
+          <Chip label={formatSport(league.sport)} color="primary" size="small" />
           <Typography variant="body2" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
             Created {formatDistanceToNow(new Date(league.createdAt))} ago
           </Typography>

components/features/dashboard/LeagueOverviewCard.tsx

@@ -10,6 +10,7 @@ import {
   Button,
   Avatar,
 } from "@mui/material";
+import { formatSport } from "@/lib/utils/validation";
 import {
   People as PeopleIcon,
   Event as EventIcon,
@@ -115,7 +116,7 @@ export default function LeagueOverviewCard({
             <Box display="flex" alignItems="center" gap={1} mb={1}>
               <Chip
                 icon={<SportsIcon />}
-                label={league.sport}
+                label={formatSport(league.sport)}
                 size="small"
                 variant="outlined"
               />

components/features/dashboard/TeamCard.tsx

@@ -1,15 +1,16 @@
 "use client";
 
-import { 
-  Card, 
-  CardContent, 
+import {
+  Card,
+  CardContent,
   CardActions,
-  Typography, 
-  Chip, 
-  Box, 
+  Typography,
+  Chip,
+  Box,
   Button,
   Avatar,
 } from "@mui/material";
+import { formatSport } from "@/lib/utils/validation";
 import {
   People as PeopleIcon,
   Event as EventIcon,
@@ -41,11 +42,11 @@ type TeamCardProps = {
   showStats?: boolean;
 };
 
-export default function TeamCard({ 
-  team, 
-  role, 
+export default function TeamCard({
+  team,
+  role,
   showLeagueInfo = false,
-  showStats = false 
+  showStats = false
 }: TeamCardProps) {
   const router = useRouter();
 
@@ -67,8 +68,8 @@ export default function TeamCard({
   };
 
   return (
-    <Card 
-      sx={{ 
+    <Card
+      sx={{
         height: '100%',
         transition: 'all 0.2s ease-in-out',
         '&:hover': {
@@ -80,10 +81,10 @@ export default function TeamCard({
       <CardContent>
         {/* Team Header */}
         <Box display="flex" alignItems="flex-start" gap={2} mb={2}>
-          <Avatar 
-            sx={{ 
-              width: 40, 
-              height: 40, 
+          <Avatar
+            sx={{
+              width: 40,
+              height: 40,
               bgcolor: 'primary.main',
               fontSize: '0.875rem',
               fontWeight: 'bold'
@@ -96,35 +97,35 @@ export default function TeamCard({
               {team.name}
             </Typography>
             <Box display="flex" alignItems="center" gap={1} mb={1}>
-              <Chip 
+              <Chip
                 icon={<SportsIcon />}
-                label={team.sport} 
-                size="small" 
-                variant="outlined" 
+                label={formatSport(team.sport)}
+                size="small"
+                variant="outlined"
               />
               <Typography variant="body2" color="text.secondary">
                 {team.season}
               </Typography>
             </Box>
           </Box>
         </Box>
-        
+
         {/* League and Division Info - Only shown in league mode */}
         {showLeagueInfo && (team.league || team.division) && (
           <Box sx={{ mb: 2 }}>
             {team.league && (
-              <Chip 
-                label={team.league.name} 
-                size="small" 
+              <Chip
+                label={team.league.name}
+                size="small"
                 variant="outlined"
                 color="primary"
                 sx={{ mr: 1, mb: 0.5 }}
               />
             )}
             {team.division && (
-              <Chip 
-                label={`Division: ${team.division.name}`} 
-                size="small" 
+              <Chip
+                label={`Division: ${team.division.name}`}
+                size="small"
                 variant="outlined"
                 color="secondary"
                 sx={{ mb: 0.5 }}
@@ -135,8 +136,8 @@ export default function TeamCard({
 
         {/* Team Stats */}
         {showStats && team._count && (
-          <Box 
-            sx={{ 
+          <Box
+            sx={{
               display: 'grid',
               gridTemplateColumns: 'repeat(2, 1fr)',
               gap: 2,

components/features/navigation/LeagueContextSwitcher.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState } from 'react';
+import { formatSport } from "@/lib/utils/validation";
 import {
   Box,
   Button,
@@ -92,7 +93,7 @@ const LeagueContextSwitcher = React.memo(function LeagueContextSwitcher({
               </ListItemIcon>
               <ListItemText
                 primary={league.name}
-                secondary={league.sport}
+                secondary={formatSport(league.sport)}
                 primaryTypographyProps={{
                   sx: { fontSize: { xs: '0.875rem', sm: '1rem' } }
                 }}
@@ -135,7 +136,7 @@ const LeagueContextSwitcher = React.memo(function LeagueContextSwitcher({
             color="text.secondary"
             sx={{ fontSize: { xs: '0.7rem', sm: '0.75rem' } }}
           >
-            {currentLeague?.sport}
+            {currentLeague ? formatSport(currentLeague.sport) : ''}
           </Typography>
         </Box>
       </Button>
@@ -168,7 +169,7 @@ const LeagueContextSwitcher = React.memo(function LeagueContextSwitcher({
             </ListItemIcon>
             <ListItemText
               primary={league.name}
-              secondary={league.sport}
+              secondary={formatSport(league.sport)}
               primaryTypographyProps={{
                 sx: { fontSize: { xs: '0.875rem', sm: '1rem' } }
               }}