Frontend Next.js Application

clients/frontend/
├── src/
│   ├── app/                          # App Router pages and layouts
│   │   ├── (auth)/                    # Authentication group routes
│   │   │   ├── login/                  # Login page
│   │   │   │   └── page.tsx
│   │   │   ├── signup/                 # Signup page
│   │   │   │   └── page.tsx
│   │   │   └── layout.tsx
│   │   ├── (dashboard)/                # Main application group
│   │   │   ├── leagues/                 # League management
│   │   │   │   ├── page.tsx             # Leagues list
│   │   │   │   ├── [id]/                # Individual league
│   │   │   │   │   └── page.tsx
│   │   │   │   └── layout.tsx
│   │   │   ├── documents/               # Document processing
│   │   │   │   ├── page.tsx
│   │   │   │   └── [id]/                # Document detail
│   │   │   │       └── page.tsx
│   │   │   ├── contracts/               # Contract generation
│   │   │   │   ├── page.tsx
│   │   │   │   └── [id]/                # Contract editor
│   │   │   │       └── page.tsx
│   │   │   ├── analytics/               # Analytics dashboard
│   │   │   │   └── page.tsx
│   │   │   └── layout.tsx               # Dashboard layout
│   │   ├── api/                         # API routes (Backend For You)
│   │   │   ├── auth/                    # Auth API handlers
│   │   │   │   └── route.ts
│   │   │   ├── leagues/                 # League API
│   │   │   │   └── route.ts
│   │   │   └── webhooks/                # Webhook handlers
│   │   │       └── route.ts
│   │   ├── globals.css                  # Global styles
│   │   ├── layout.tsx                   # Root layout
│   │   ├── loading.tsx                  # Global loading UI
│   │   ├── not-found.tsx                # 404 page
│   │   ├── page.tsx                     # Homepage
│   │   └── providers.tsx                 # Context providers
│   ├── components/                      # Reusable React components
│   │   ├── ui/                          # shadcn/ui components
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   ├── table.tsx
│   │   │   └── ... (full shadcn/ui set)
│   │   ├── leagues/                      # League-specific components
│   │   │   ├── league-card.tsx
│   │   │   ├── league-filters.tsx
│   │   │   └── league-list.tsx
│   │   ├── documents/                    # Document components
│   │   │   ├── document-uploader.tsx
│   │   │   ├── document-viewer.tsx
│   │   │   └── processing-status.tsx
│   │   ├── contracts/                    # Contract components
│   │   │   ├── contract-editor.tsx
│   │   │   └── signature-canvas.tsx
│   │   ├── analytics/                    # Analytics components
│   │   │   ├── metrics-card.tsx
│   │   │   └── trend-chart.tsx
│   │   └── shared/                       # Shared utilities
│   │       ├── header.tsx
│   │       ├── sidebar.tsx
│   │       └── modal.tsx
│   ├── lib/                              # Library functions and hooks
│   │   ├── api/                          # API clients and types
│   │   │   ├── client.ts                 # Axios instance
│   │   │   ├── leagues.ts                # League API functions
│   │   │   └── types.ts                  # API response types
│   │   ├── auth/                         # Authentication utilities
│   │   │   └── config.ts                 # NextAuth configuration
│   │   ├── hooks/                        # Custom React hooks
│   │   │   ├── use-league-analysis.ts
│   │   │   ├── use-web-socket.ts
│   │   │   └── use-local-storage.ts
│   │   ├── utils/                        # Utility functions
│   │   │   ├── cn.ts                     # ClassName utility
│   │   │   ├── formatters.ts             # Data formatting
│   │   │   └── validators.ts             # Client-side validation
│   │   └── validations/                   # Zod schemas for forms
│   │       └── league.ts
│   ├── styles/                           # Global styles and themes
│   │   └── globals.css
│   └── types/                            # Global TypeScript types
│       ├── api.ts                        # API types
│       ├── components.ts                 # Component props
│       └── schemas.ts                    # Backend schema types
├── public/                               # Static assets
│   ├── images/                           # Images and icons
│   └── fonts/                            # Custom fonts
├── tests/                                # Test files
│   ├── unit/                             # Unit tests (Vitest)
│   │   └── components/
│   ├── integration/                      # Integration tests
│   └── e2e/                              # End-to-end tests (Playwright)
├── .env.local                            # Local environment variables
├── .env.example                          # Environment template
├── next.config.js                        # Next.js configuration
├── tailwind.config.js                    # Tailwind CSS configuration
├── tsconfig.json                         # TypeScript configuration
├── eslint.config.js                      # ESLint configuration
├── prettier.config.js                    # Prettier configuration
├── package.json                          # Dependencies and scripts
└── README.md                             # Project documentation

import { Suspense } from 'react';
import { LeagueList } from '@/components/leagues/league-list';
import { LeagueFilters } from '@/components/leagues/league-filters';
import { LeaguesSkeleton } from '@/components/leagues/leagues-skeleton';
import { Search, Filter, Plus } from 'lucide-react';
 
export const metadata = {
  title: 'Leagues | AltSportsLeagues',
  description: 'Manage and analyze sports league partnerships across global markets'
};
 
export default function LeaguesPage() {
  return (
    <div className="container mx-auto py-8 px-4">
      {/* Header Section */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-8 gap-4">
        <div className="flex-1 min-w-0">
          <h1 className="text-3xl font-bold tracking-tight">
            League Partnership Pipeline
          </h1>
          <p className="text-muted-foreground mt-2">
            Discover, analyze, and manage sports league partnership opportunities
          </p>
        </div>
        
        {/* Action Buttons */}
        <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
          <LeagueFilters />
          <Button size="sm" className="gap-2">
            <Plus className="h-4 w-4" />
            Add League
          </Button>
        </div>
      </div>
 
      {/* Search and Filters */}
      <Card className="mb-6">
        <CardContent className="p-6">
          <div className="flex flex-col lg:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search leagues by name, sport, or location..."
                className="pl-10"
              />
            </div>
            <div className="flex gap-2">
              <Button variant="outline" size="sm">
                <Filter className="h-4 w-4 mr-2" />
                Filters
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
 
      {/* League List */}
      <Suspense key="leagues" fallback={<LeaguesSkeleton />}>
        <LeagueList />
      </Suspense>
    </div>
  );
}

import { useQuery, useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
import { useSession } from 'next-auth/react';
import { apiClient } from './client';
import type { League, LeagueFilters, LeagueAnalysisRequest, LeagueAnalysisResult } from '@/types/league';
 
// Query keys for cache invalidation
export const leagueKeys = {
  all: ['leagues'] as const,
  lists: () => [...leagueKeys.all, 'list'] as const,
  list: (filters: Partial<LeagueFilters>) => [...leagueKeys.lists(), { filters: JSON.stringify(filters) }] as const,
  details: () => [...leagueKeys.all, 'detail'] as const,
  detail: (id: string) => [...leagueKeys.details(), id] as const,
  analysis: (leagueId: string) => [...leagueKeys.detail(leagueId), 'analysis'] as const,
};
 
// Fetch leagues with filters
export function useLeagues(filters: Partial<LeagueFilters> = {}) {
  const { data: session } = useSession();
  
  return useQuery({
    queryKey: leagueKeys.list(filters),
    queryFn: async () => {
      const response = await apiClient.get<League[]>('/leagues', {
        params: filters,
        headers: {
          Authorization: `Bearer ${session?.accessToken}`,
        },
      });
      return response.data;
    },
    staleTime: 5 * 60 * 1000, // 5 minutes stale time
    placeholderData: [], // Empty array as placeholder
    select: (data) => data, // Can transform data here
  });
}
 
// Fetch single league with suspense
export function useLeague(id: string) {
  return useSuspenseQuery({
    queryKey: leagueKeys.detail(id),
    queryFn: async () => {
      const response = await apiClient.get<League>(`/leagues/${id}`);
      return response.data;
    },
    enabled: !!id && id !== 'new', // Don't fetch for new league creation
  });
}
 
// Analyze league mutation with optimistic updates
export function useAnalyzeLeague() {
  const queryClient = useQueryClient();
  const { data: session } = useSession();
 
  return useMutation({
    mutationFn: async (request: LeagueAnalysisRequest) => {
      const response = await apiClient.post<LeagueAnalysisResult>(
        `/leagues/${request.league_id}/analysis`,
        request,
        {
          headers: {
            Authorization: `Bearer ${session?.accessToken}`,
          },
        }
      );
      return response.data;
    },
    onMutate: async (newAnalysis: LeagueAnalysisRequest) {
      // Cancel outgoing refetches
      await queryClient.cancelQueries({ queryKey: leagueKeys.detail(newAnalysis.league_id) });
 
      // Snapshot previous value
      const previousLeague = queryClient.getQueryData<League>(leagueKeys.detail(newAnalysis.league_id));
 
      // Optimistically update to loading state
      queryClient.setQueryData(leagueKeys.detail(newAnalysis.league_id), (old: League | undefined) => ({
        ...old!,
        isAnalyzing: true,
        analysisStatus: 'pending',
      }));
 
      // Return context with undo function
      return { previousLeague };
    },
    onError: (err, newAnalysis, context) => {
      // Rollback on error
      if (context?.previousLeague) {
        queryClient.setQueryData(leagueKeys.detail(newAnalysis.league_id), context.previousLeague);
      }
    },
    onSuccess: (result, newAnalysis) => {
      // Update the league with analysis results
      queryClient.setQueryData(leagueKeys.detail(newAnalysis.league_id), (old: League | undefined) => ({
        ...old!,
        analysis: result,
        lastAnalyzed: new Date().toISOString(),
        analysisStatus: 'completed',
        isAnalyzing: false,
      }));
 
      // Invalidate and refetch other queries
      queryClient.invalidateQueries({ queryKey: leagueKeys.lists() });
    },
    onSettled: (data, error, variables) => {
      // Always remove loading state
      queryClient.setQueryData(leagueKeys.detail(variables.league_id), (old: League | undefined) => ({
        ...old!,
        isAnalyzing: false,
        analysisStatus: data ? 'completed' : 'failed',
      }));
    },
  });
}
 
// Infinite query for paginated leagues
export function useInfiniteLeagues(filters: Partial<LeagueFilters> = {}) {
  return useInfiniteQuery({
    queryKey: leagueKeys.list(filters),
    queryFn: async ({ pageParam = 1 }) => {
      const response = await apiClient.get<League[]>('/leagues', {
        params: { ...filters, page: pageParam, limit: 20 },
      });
      return response.data;
    },
    getNextPageParam: (lastPage, pages) => {
      return lastPage.length === 20 ? pages.length + 1 : undefined;
    },
    initialPageParam: 1,
  });
}

'use client';
 
import { useState } from 'react';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { useAnalyzeLeague } from '@/lib/api/leagues';
import { League } from '@/types/league';
import { 
  TrendingUp, 
  Calendar, 
  MapPin, 
  Users, 
  DollarSign, 
  Loader2, 
  AlertCircle 
} from 'lucide-react';
import { cn } from '@/lib/utils';
 
interface LeagueCardProps {
  league: League;
  onSelect: (league: League) => void;
}
 
export function LeagueCard({ league, onSelect }: LeagueCardProps) {
  const [isExpanded, setIsExpanded] = useState(false);
  const analyzeLeague = useAnalyzeLeague();
 
  const handleAnalyze = () => {
    analyzeLeague.mutate({
      league_id: league.id,
      analysis_type: 'partnership',
      include_financials: true,
      include_market_data: true,
    });
  };
 
  const getTierVariant = (tier: string) => {
    if (tier.startsWith('tier_1')) return 'default' as const;
    if (tier.startsWith('tier_2')) return 'secondary' as const;
    if (tier.startsWith('tier_3')) return 'outline' as const;
    return 'ghost' as const;
  };
 
  const getTierColor = (tier: string) => {
    switch (getTierVariant(tier)) {
      case 'default': return 'bg-primary text-primary-foreground';
      case 'secondary': return 'bg-secondary text-secondary-foreground';
      case 'outline': return 'bg-muted text-muted-foreground';
      default: return 'bg-accent text-accent-foreground';
    }
  };
 
  return (
    <Card 
      className={cn(
        "w-full group cursor-pointer transition-all duration-200 hover:shadow-lg hover:-translate-y-1",
        "border-border hover:border-primary/50",
        league.isAnalyzing && "animate-pulse"
      )}
      onClick={() => onSelect(league)}
    >
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div className="space-y-1">
            <CardTitle className="text-lg font-semibold leading-tight">
              {league.name}
            </CardTitle>
            <CardDescription className="text-sm text-muted-foreground">
              {league.sport} • {league.level}
            </CardDescription>
          </div>
          <Badge 
            variant={getTierVariant(league.tier)} 
            className={getTierColor(league.tier)}
          >
            {league.tier.replace('_', ' ').toUpperCase()}
          </Badge>
        </div>
      </CardHeader>
 
      <CardContent className="pb-4">
        <div className="space-y-3 text-sm">
          <div className="flex items-center gap-2">
            <MapPin className="h-4 w-4 text-muted-foreground" />
            <span>{league.primary_location}</span>
          </div>
          
          {league.member_count && (
            <div className="flex items-center gap-2">
              <Users className="h-4 w-4 text-muted-foreground" />
              <span>{league.member_count.toLocaleString()} members</span>
            </div>
          )}
 
          {league.founded_year && (
            <div className="flex items-center gap-2">
              <Calendar className="h-4 w-4 text-muted-foreground" />
              <span>Founded {league.founded_year}</span>
            </div>
          )}
 
          {league.analysis && (
            <div className="space-y-1">
              <div className="flex items-center gap-2">
                <TrendingUp className={cn(
                  "h-4 w-4",
                  league.analysis.opportunity_score > 70 ? "text-green-600" : "text-amber-600"
                )} />
                <span className="font-semibold">
                  Score: {league.analysis.opportunity_score}/100
                </span>
              </div>
              {league.analysis.summary && (
                <p className="text-xs text-muted-foreground mt-1">
                  {league.analysis.summary.substring(0, 100)}...
                </p>
              )}
            </div>
          )}
        </div>
      </CardContent>
 
      <CardFooter className="pt-4 border-t">
        <div className="flex items-center justify-between w-full">
          <Button
            variant="ghost"
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              setIsExpanded(!isExpanded);
            }}
            className="h-8 px-2 text-xs"
          >
            {isExpanded ? 'Show Less' : 'Show More'}
          </Button>
          
          <Button
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              handleAnalyze();
            }}
            disabled={analyzeLeague.isPending}
            className="h-8 px-3"
          >
            {analyzeLeague.isPending ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Analyzing...
              </>
            ) : league.analysis ? (
              <>
                <TrendingUp className="h-4 w-4 mr-2" />
                Re-analyze
              </>
            ) : (
              <>
                <TrendingUp className="h-4 w-4 mr-2" />
                Analyze
              </>
            )}
          </Button>
        </div>
        
        {isExpanded && league.analysis && (
          <div className="mt-3 pt-3 border-t text-xs text-muted-foreground">
            <p><strong>Recommendations:</strong></p>
            <ul className="list-disc list-inside space-y-1 mt-1">
              {league.analysis.recommendations.slice(0, 3).map((rec, index) => (
                <li key={index}>{rec}</li>
              ))}
              {league.analysis.recommendations.length > 3 && (
                <li>... and {league.analysis.recommendations.length - 3} more</li>
              )}
            </ul>
          </div>
        )}
      </CardFooter>
    </Card>
  );
}

import NextAuth, { NextAuthOptions } from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import GoogleProvider from 'next-auth/providers/google';
import { apiClient } from '@/lib/api/client';
import { User } from '@/types/user';
 
// Extend the built-in session types
declare module 'next-auth' {
  interface Session {
    user: {
      id: string;
      email: string;
      name: string;
      role: string;
      accessToken: string;
    };
  }
 
  interface User {
    id: string;
    email: string;
    name: string;
    role: string;
    accessToken: string;
  }
}
 
export const authOptions: NextAuthOptions = {
  providers: [
    // Email & Password Provider
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          throw new Error('Missing credentials');
        }
 
        try {
          const response = await apiClient.post<{
            user: User;
            access_token: string;
          }>('/auth/login', {
            email: credentials.email,
            password: credentials.password,
          });
 
          if (response.data) {
            return {
              id: response.data.user.id,
              email: response.data.user.email,
              name: response.data.user.name,
              role: response.data.user.role,
              accessToken: response.data.access_token,
            };
          }
          return null;
        } catch (error) {
          console.error('Authentication error:', error);
          return null;
        }
      },
    }),
 
    // Google OAuth Provider
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
      authorization: {
        params: {
          scope: 'openid email profile',
          access_type: 'offline',
          prompt: 'consent',
        },
      },
    }),
  ],
 
  // Database adapter for production (optional)
  // adapter: PrismaAdapter(prisma),
 
  callbacks: {
    async jwt({ token, user, account }) {
      // Initial sign in
      if (user) {
        token.accessToken = user.accessToken as string;
        token.role = user.role as string;
      }
 
      // Return previous token if already signed in
      return token;
    },
 
    async session({ session, token }) {
      if (token) {
        session.user.id = token.sub as string;
        session.user.accessToken = token.accessToken as string;
        session.user.role = token.role as string;
      }
      return session;
    },
  },
 
  pages: {
    signIn: '/login',
    signOut: '/logout',
    error: '/auth/error',
  },
 
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
 
  // Security options
  secret: process.env.NEXTAUTH_SECRET!,
  debug: process.env.NODE_ENV === 'development',
};

import NextAuth from 'next-auth';
import { authOptions } from '@/lib/auth/config';
 
const handler = NextAuth(authOptions);
 
export { handler as GET, handler as POST };

import axios, { AxiosInstance, AxiosRequestConfig, AxiosError } from 'axios';
import { getSession } from 'next-auth/react';
import { toast } from 'sonner';
 
class ApiClient {
  private client: AxiosInstance;
 
  constructor(baseURL: string) {
    this.client = axios.create({
      baseURL,
      timeout: 30_000, // 30 seconds
      headers: {
        'Content-Type': 'application/json',
      },
    });
 
    // Request interceptor for authentication
    this.client.interceptors.request.use(
      async (config) => {
        const session = await getSession();
        if (session?.user?.accessToken) {
          config.headers.Authorization = `Bearer ${session.user.accessToken}`;
        }
        return config;
      },
      (error) => {
        return Promise.reject(error);
      }
    );
 
    // Response interceptor for error handling
    this.client.interceptors.response.use(
      (response) => {
        // Handle successful responses
        if (response.status >= 200 && response.status < 300) {
          return response.data;
        }
        return Promise.reject(new Error(`HTTP error! status: ${response.status}`));
      },
      async (error: AxiosError) => {
        const originalRequest = error.config as AxiosRequestConfig & { _retry?: boolean };
 
        // Handle 401 Unauthorized (token expired)
        if (error.response?.status === 401 && !originalRequest._retry) {
          originalRequest._retry = true;
          
          try {
            const session = await getSession();
            if (session?.user?.accessToken) {
              originalRequest.headers.Authorization = `Bearer ${session.user.accessToken}`;
              return this.client(originalRequest);
            }
          } catch (refreshError) {
            // Refresh failed, redirect to login
            if (typeof window !== 'undefined') {
              window.location.href = '/login?error=session_expired';
            }
            return Promise.reject(refreshError);
          }
        }
 
        // Handle 429 Too Many Requests
        if (error.response?.status === 429) {
          toast.error('Rate limit exceeded. Please try again in a moment.');
          return Promise.reject(error);
        }
 
        // Handle 403 Forbidden
        if (error.response?.status === 403) {
          toast.error('Access denied. Insufficient permissions.');
          return Promise.reject(error);
        }
 
        // Handle other errors
        if (error.response?.status >= 400 && error.response?.status < 500) {
          toast.error(error.response.data?.message || 'Request failed');
        } else if (error.response?.status >= 500) {
          toast.error('Server error. Please try again later.');
        }
 
        return Promise.reject(error);
      }
    );
  }
 
  get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return this.client.get<T>(url, config);
  }
 
  post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
    return this.client.post<T>(url, data, config);
  }
 
  put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
    return this.client.put<T>(url, data, config);
  }
 
  delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return this.client.delete<T>(url, config);
  }
}
 
export const apiClient = new ApiClient(
  process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api'
);

// src/app/providers.tsx
'use client';
 
import { 
  QueryClient, 
  QueryClientProvider, 
  useQueryErrorResetBoundary 
} from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { ErrorBoundary } from 'react-error-boundary';
import { useState } from 'react';
 
export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 5 * 60 * 1000, // 5 minutes
            cacheTime: 10 * 60 * 1000, // 10 minutes
            refetchOnWindowFocus: false, // Don't refetch on focus
            retry: (failureCount, error) => {
              // Don't retry 4xx errors
              if (error.response?.status >= 400 && error.response?.status < 500) {
                return false;
              }
              return failureCount < 3; // Retry up to 3 times
            },
            retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
          },
          mutations: {
            retry: false, // Don't retry mutations
          },
        },
      })
  );
 
  return (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary
        fallbackRender={({ error, resetErrorBoundary }) => (
          <div className="container mx-auto px-4 py-8">
            <Card>
              <CardContent className="pt-6">
                <div className="space-y-4">
                  <h2 className="text-2xl font-bold">Something went wrong</h2>
                  <p className="text-muted-foreground">
                    An unexpected error occurred. Please try again.
                  </p>
                  <div className="flex gap-2">
                    <Button onClick={() => resetErrorBoundary()}>
                      Try Again
                    </Button>
                    <Button variant="outline" onClick={() => window.location.reload()}>
                      Reload Page
                    </Button>
                  </div>
                  <details className="mt-4 text-sm text-muted-foreground">
                    <summary>Details</summary>
                    <pre className="mt-2 p-2 bg-muted rounded text-xs overflow-auto">
                      {error.message}
                    </pre>
                  </details>
                </div>
              </CardContent>
            </Card>
          </div>
        )}
        onReset={() => {
          queryClient.reset();
        }}
      >
        {children}
        {process.env.NODE_ENV === 'development' && <ReactQueryDevtools initialIsOpen={false} />}
      </ErrorBoundary>
    </QueryClientProvider>
  );
}

// src/lib/store/ui-store.ts
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { StateCreator } from 'zustand';
 
interface UIState {
  // Theme management
  theme: 'light' | 'dark' | 'system';
  setTheme: (theme: 'light' | 'dark' | 'system') => void;
  
  // Sidebar and layout
  sidebarCollapsed: boolean;
  toggleSidebar: () => void;
  
  // Recently viewed items
  recentlyViewed: string[];
  addRecentlyViewed: (id: string, type: 'league' | 'document' | 'contract') => void;
  
  // Temporary selections
  selectedLeagueId: string | null;
  setSelectedLeague: (id: string | null) => void;
  
  // Notification preferences
  notificationsEnabled: boolean;
  setNotificationsEnabled: (enabled: boolean) => void;
}
 
const createUIStore: StateCreator<UIState> = (set, get) => ({
  theme: 'system',
  sidebarCollapsed: false,
  recentlyViewed: [],
  selectedLeagueId: null,
 
  setTheme: (theme) => set({ theme }),
  
  toggleSidebar: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
  
  addRecentlyViewed: (id, type) =>
    set((state) => {
      const key = `${type}-${id}`;
      const viewed = state.recentlyViewed.filter((item) => item !== key);
      return {
        recentlyViewed: [key, ...viewed].slice(0, 10), // Keep last 10
      };
    }),
 
  setSelectedLeague: (id) => set({ selectedLeagueId: id }),
 
  notificationsEnabled: true,
  setNotificationsEnabled: (enabled) => set({ notificationsEnabled: enabled }),
});
 
export const useUIStore = create<UIState>()(
  persist(createUIStore, {
    name: 'altsports-ui-storage',
    storage: createJSONStorage(() => localStorage),
    partialize: (state) => ({
      theme: state.theme,
      sidebarCollapsed: state.sidebarCollapsed,
      notificationsEnabled: state.notificationsEnabled,
    }), // Don't persist temporary selections
  })
);

// Optimized image usage
import Image from 'next/image';
 
function LeagueLogo({ src, alt, priority = false }: { src: string; alt: string; priority?: boolean }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={120}
      height={60}
      priority={priority} // Only for above-the-fold images
      placeholder="blur" // Show blur while loading
      blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAA==" // Small blur
      className="rounded-lg object-cover"
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      onError={(e) => {
        // Fallback to placeholder
        e.currentTarget.src = '/placeholder-league-logo.svg';
      }}
    />
  );
}

// Dynamic import for heavy chart component
import dynamic from 'next/dynamic';
 
const AdvancedLeagueChart = dynamic(() => import('@/components/charts/advanced-league-chart'), {
  loading: () => (
    <div className="flex items-center justify-center p-8">
      <Loader2 className="h-8 w-8 animate-spin text-primary mr-2" />
      Loading analytics...
    </div>
  ),
  ssr: false, // Render only on client
});
 
// Usage in component
function LeagueAnalytics({ leagueId }: { leagueId: string }) {
  return (
    <div className="mt-6">
      <AdvancedLeagueChart leagueId={leagueId} />
    </div>
  );
}

// app/leagues/[id]/page.tsx - Server Component
import { notFound } from 'next/navigation';
import { apiClient } from '@/lib/api/client';
import { LeagueCard } from '@/components/leagues/league-card';
import { LeagueActions } from '@/components/leagues/league-actions';
 
interface LeaguePageProps {
  params: { id: string };
}
 
async function getLeague(id: string) {
  try {
    const response = await apiClient.get(`/leagues/${id}`);
    return response;
  } catch (error) {
    console.error('Failed to fetch league:', error);
    return null;
  }
}
 
export default async function LeaguePage({ params }: LeaguePageProps) {
  const leagueData = await getLeague(params.id);
 
  if (!leagueData) {
    notFound();
  }
 
  const league = leagueData;
 
  return (
    <div className="container mx-auto py-8 px-4">
      <div className="mb-8">
        <LeagueCard league={league} onSelect={() => {}} />
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2">
          {/* Main content */}
          <LeagueActions league={league} />
        </div>
        
        <div className="space-y-6">
          {/* Sidebar content */}
          <RecentActivity leagueId={league.id} />
        </div>
      </div>
    </div>
  );
}

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { LeagueCard } from '@/components/leagues/league-card';
import { useAnalyzeLeague } from '@/lib/api/leagues';
 
vi.mock('@/lib/api/leagues', () => ({
  useAnalyzeLeague: vi.fn(),
}));
 
const mockLeague = {
  id: '1',
  name: 'Test League',
  sport: 'Football',
  tier: 'tier_2',
  primary_location: 'New York, NY',
  member_count: 12,
  founded_year: 2015,
  analysis: {
    opportunity_score: 75,
    summary: 'Promising league with strong growth potential',
    recommendations: ['Target technology partners', 'Enhance digital presence'],
  },
};
 
vi.mocked(useAnalyzeLeague).mockReturnValue({
  mutate: vi.fn(),
  isPending: false,
} as any);
 
describe('LeagueCard', () => {
  let queryClient: QueryClient;
 
  beforeEach(() => {
    queryClient = new QueryClient({
      defaultOptions: {
        queries: { retry: false },
      },
    });
  });
 
  it('renders league information correctly', () => {
    render(
      <QueryClientProvider client={queryClient}>
        <LeagueCard league={mockLeague} onSelect={() => {}} />
      </QueryClientProvider>
    );
 
    expect(screen.getByText('Test League')).toBeInTheDocument();
    expect(screen.getByText('Football')).toBeInTheDocument();
    expect(screen.getByText('tier_2')).toBeInTheDocument();
    expect(screen.getByText('New York, NY')).toBeInTheDocument();
  });
 
  it('expands to show more details', async () => {
    render(
      <QueryClientProvider client={queryClient}>
        <LeagueCard league={mockLeague} onSelect={() => {}} />
      </QueryClientProvider>
    );
 
    const showMoreButton = screen.getByRole('button', { name: /Show More/i });
    fireEvent.click(showMoreButton);
 
    await waitFor(() => {
      expect(screen.getByText('12 members')).toBeInTheDocument();
      expect(screen.getByText('Founded 2015')).toBeInTheDocument();
      expect(screen.getByText('Score: 75/100')).toBeInTheDocument();
    });
  });
 
  it('shows analyzing state during mutation', () => {
    vi.mocked(useAnalyzeLeague).mockReturnValue({
      mutate: vi.fn(),
      isPending: true,
    } as any);
 
    render(
      <QueryClientProvider client={queryClient}>
        <LeagueCard league={mockLeague} onSelect={() => {}} />
      </QueryClientProvider>
    );
 
    const analyzeButton = screen.getByRole('button', { name: /Analyzing.../i });
    expect(analyzeButton).toBeInTheDocument();
    expect(analyzeButton).toBeDisabled();
  });
 
  it('handles analyze click correctly', () => {
    const mockMutate = vi.fn();
    vi.mocked(useAnalyzeLeague).mockReturnValue({
      mutate: mockMutate,
      isPending: false,
    } as any);
 
    render(
      <QueryClientProvider client={queryClient}>
        <LeagueCard league={mockLeague} onSelect={() => {}} />
      </QueryClientProvider>
    );
 
    const analyzeButton = screen.getByRole('button', { name: /Analyze/i });
    fireEvent.click(analyzeButton);
 
    expect(mockMutate).toHaveBeenCalledWith({
      league_id: '1',
      analysis_type: 'partnership',
      include_financials: true,
      include_market_data: true,
    });
  });
});

import { test, expect } from '@playwright/test';
import { faker } from '@faker-js/faker';
 
test.describe('League Management Workflow', () => {
  test('complete league analysis workflow', async ({ page }) => {
    // Arrange: Setup test data
    const testEmail = faker.internet.email();
    const testPassword = faker.internet.password();
 
    // Act: Login as test user
    await page.goto('/login');
    await page.fill('input[name=email]', testEmail);
    await page.fill('input[name=password]', testPassword);
    await page.click('button[type=submit]');
    
    // Assert: Redirected to dashboard
    await expect(page).toHaveURL(/dashboard/);
 
    // Act: Navigate to leagues page
    await page.click('text=Leagues');
    await expect(page).toHaveURL(/leagues/);
 
    // Act: Add new league
    await page.click('text=Add League');
    await expect(page).toHaveURL(/leagues\/new/);
 
    // Act: Fill league form
    await page.fill('input[name=league_name]', 'Test Integration League');
    await page.fill('input[name=website_url]', 'https://testleague.com');
    await page.fill('input[name=contact_email]', 'contact@testleague.com');
    await page.selectOption('select[name=sport_bucket]', 'team');
    await page.click('button:has-text("Create League")');
 
    // Assert: League created successfully
    await expect(page.locator('text=Test Integration League')).toBeVisible();
    await expect(page).toHaveURL(/leagues\/[a-f0-9-]+/);
 
    // Act: Analyze the league
    await page.click('button:has-text("Analyze")');
    
    // Assert: Analysis in progress
    await expect(page.locator('text=Analyzing...')).toBeVisible({ timeout: 15000 });
    
    // Act: Wait for analysis completion
    await page.waitForSelector('text=Score:', { timeout: 30000 });
 
    // Assert: Analysis results displayed
    await expect(page.locator('text=Score:')).toBeVisible();
    await expect(page.locator('text=Test Integration League')).toBeVisible();
  });
 
  test('search and filter leagues', async ({ page }) => {
    // Act: Navigate to leagues
    await page.goto('/leagues');
    
    // Assert: Leagues page loaded
    await expect(page.locator('h1')).toContainText('Leagues');
 
    // Act: Search for a league
    await page.fill('input[placeholder*="Search leagues"]', 'Premier');
    
    // Assert: Search results filtered
    await expect(page.locator('text=Premier')).toBeVisible({ timeout: 5000 });
    
    // Act: Apply filter (e.g., sport = soccer)
    await page.click('button:has-text("Filters")');
    await page.selectOption('select[name=sport]', 'soccer');
    await page.click('button:has-text("Apply Filters")');
    
    // Assert: Filtered results shown
    await expect(page.locator('text=Soccer')).toBeVisible();
  });
 
  test('user authentication flow', async ({ page }) => {
    // Act: Go to homepage
    await page.goto('/');
    
    // Assert: Not authenticated
    await expect(page.locator('text=Sign In')).toBeVisible();
 
    // Act: Navigate to login
    await page.click('text=Sign In');
    await expect(page).toHaveURL(/login/);
 
    // Act: Submit login form with invalid credentials
    await page.fill('input[name=email]', 'invalid@example.com');
    await page.fill('input[name=password]', 'wrongpassword');
    await page.click('button[type=submit]');
    
    // Assert: Error message shown
    await expect(page.locator('text=Invalid credentials')).toBeVisible();
 
    // Act: Try Google OAuth (mocked in test environment)
    await page.click('button:has-text("Continue with Google")');
    
    // Assert: Redirect to dashboard after successful auth
    await expect(page).toHaveURL(/dashboard/);
    await expect(page.locator('text=Dashboard')).toBeVisible();
  });
});

/** @type {import('next').NextConfig} */
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: [
      "default-src 'self'",
      "script-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.googleapis.com https://unpkg.com https://esm.sh",
      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
      "img-src 'self' data: https: blob:",
      "font-src 'self' https://fonts.gstatic.com",
      "connect-src 'self' https://api.altsportsleagues.ai wss://ws.altsportsleagues.ai https://*.googleapis.com",
      "frame-src 'self' https://*.google.com",
      "object-src 'none'",
    ].join('; '),
  },
  {
    key: 'X-Frame-Options',
    value: 'DENY',
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff',
  },
  {
    key: 'Referrer-Policy',
    value: 'strict-origin-when-cross-origin',
  },
  {
    key: 'Permissions-Policy',
    value: 'camera=(), microphone=(), geolocation=()',
  },
];
 
const nextConfig = {
  headers: async () => [
    {
      source: '/:path*',
      headers: securityHeaders,
    },
  ],
 
  // Other configurations
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  eslint: {
    ignoreDuringBuilds: false,
  },
  typescript: {
    ignoreBuildErrors: false,
  },
};
 
module.exports = nextConfig;

import { z } from 'zod';
 
export const leagueSchema = z.object({
  league_name: z
    .string()
    .min(3, 'League name must be at least 3 characters')
    .max(200, 'League name cannot exceed 200 characters')
    .regex(/^[A-Za-z\s\.\,\-\'\(\)]+$/, 'League name contains invalid characters'),
  website_url: z
    .string()
    .url('Please enter a valid URL')
    .optional()
    .or(z.literal('')),
  contact_email: z
    .string()
    .email('Please enter a valid email address')
    .optional()
    .or(z.literal('')),
  sport_bucket: z.enum(['combat', 'large_field', 'team', 'racing', 'other']),
  primary_location: z
    .string()
    .min(2, 'Location must be at least 2 characters')
    .max(100, 'Location cannot exceed 100 characters'),
});
 
export type LeagueFormData = z.infer<typeof leagueSchema>;

{
  "version": 2,
  "name": "altsportsleagues-frontend",
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  
  "env": {
    "NEXT_PUBLIC_API_URL": "@altsports-api-url",
    "NEXTAUTH_SECRET": "@nextauth-secret",
    "NEXTAUTH_URL": "@nextauth-url",
    "GOOGLE_CLIENT_ID": "@google-client-id",
    "GOOGLE_CLIENT_SECRET": "@google-client-secret"
  },
  
  "regions": ["iad1", "sfo1"],
  
  "functions": {
    "app/api/**/*.ts": {
      "maxDuration": 30,
      "memory": 1024,
      "maxInstances": 10
    }
  },
  
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    }
  ],
  
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "http://localhost:8000/api/$1"
    }
  ]
}

// src/app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';
import type { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    default: 'AltSportsLeagues.ai',
    template: '%s | AltSportsLeagues.ai',
  },
  description: 'AI-powered sports league partnership intelligence',
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className="bg-background text-foreground">
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';
 
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: process.env.NODE_ENV === 'development' ? 1.0 : 0.2,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  
  // Performance monitoring
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.reactRouterV6Instrumentation(
        useEffect,
        useLocation,
        useNavigationType
      ),
    }),
    new Sentry.Replay(),
  ],
  
  // Session grouping
  beforeSendTransaction: (transaction) => {
    const session = useSession();
    if (session.data?.user?.id) {
      transaction.setTag('user_id', session.data.user.id);
    }
    return transaction;
  },
});