Dashboard de Apostas Esportivas com React

// src/types/betting.ts
export interface OddsData {
  gameId: string;
  homeTeam: string;
  awayTeam: string;
  commenceTime: string;
  bookmaker: string;
  oddHome: number;
  oddAway: number;
  oddDraw: number;
  collectedAt: string;
}

export interface Arbitrage {
  gameId: string;
  homeTeam: string;
  awayTeam: string;
  book1: string;
  book2: string;
  book3?: string;
  oddHome: number;
  oddAway: number;
  oddDraw: number;
  profit: number; // percentual de lucro garantido
}

export interface StatsCard {
  label: string;
  value: string | number;
  change?: number; // variação percentual
  trend: 'up' | 'down' | 'neutral';
}

// src/hooks/useOddsHistory.ts
import { useState, useEffect, useCallback } from 'react';
import { OddsData } from '../types/betting';
import { fetchOdds } from '../services/oddsApi';

export function useOddsHistory(gameId: string, intervalMs = 300000) {
  const [history, setHistory] = useState<OddsData[]>([]);
  const [loading, setLoading] = useState(true);

  const poll = useCallback(async () => {
    try {
      const data = await fetchOdds(gameId);
      setHistory(prev => [...prev, ...data]);
    } catch (err) {
      console.error('Erro ao buscar odds:', err);
    } finally {
      setLoading(false);
    }
  }, [gameId]);

  useEffect(() => {
    poll();
    const timer = setInterval(poll, intervalMs);
    return () => clearInterval(timer);
  }, [poll, intervalMs]);

  const chartData = {
    labels: [...new Set(history.map(h => 
      new Date(h.collectedAt).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
    ))],
    datasets: Object.entries(
      history.reduce((acc, h) => {
        if (!acc[h.bookmaker]) acc[h.bookmaker] = [];
        acc[h.bookmaker].push(h.oddHome);
        return acc;
      }, {} as Record<string, number[]>)
    ).map(([bookmaker, odds], i) => ({
      label: bookmaker,
      data: odds,
      borderColor: ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6'][i % 5],
      tension: 0.3,
      pointRadius: 2,
    })),
  };

  return { history, chartData, loading };
}

// src/components/OddsChart.tsx
import { Line } from 'react-chartjs-2';
import {
  Chart as ChartJS, CategoryScale, LinearScale,
  PointElement, LineElement, Title, Tooltip, Legend,
} from 'chart.js';

ChartJS.register(
  CategoryScale, LinearScale, PointElement,
  LineElement, Title, Tooltip, Legend
);

interface OddsChartProps {
  chartData: {
    labels: string[];
    datasets: Array<{
      label: string;
      data: number[];
      borderColor: string;
      tension: number;
      pointRadius: number;
    }>;
  };
  title: string;
}

export function OddsChart({ chartData, title }: OddsChartProps) {
  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { position: 'top' as const, labels: { color: '#a3a3a3' } },
      title: { display: true, text: title, color: '#e5e5e5', font: { size: 16 } },
      tooltip: {
        callbacks: {
          label: (ctx: any) => `${ctx.dataset.label}: ${ctx.parsed.y.toFixed(2)}`,
        },
      },
    },
    scales: {
      x: { ticks: { color: '#737373' }, grid: { color: '#262626' } },
      y: {
        ticks: { color: '#737373', callback: (v: any) => v.toFixed(2) },
        grid: { color: '#262626' },
      },
    },
  };

  return (
    <div className="bg-neutral-900 rounded-xl p-6 h-[400px]">
      <Line data={chartData} options={options} />
    </div>
  );
}

// src/hooks/useArbitrages.ts
import { useMemo } from 'react';
import { OddsData, Arbitrage } from '../types/betting';

export function useArbitrages(oddsData: OddsData[]): Arbitrage[] {
  return useMemo(() => {
    const byGame = new Map<string, OddsData[]>();
    oddsData.forEach(o => {
      const list = byGame.get(o.gameId) || [];
      list.push(o);
      byGame.set(o.gameId, list);
    });

    const arbitrages: Arbitrage[] = [];

    for (const [gameId, odds] of byGame) {
      const bestHome = odds.reduce((best, o) =>
        o.oddHome > best.oddHome ? o : best, odds[0]);
      const bestAway = odds.reduce((best, o) =>
        o.oddAway > best.oddAway ? o : best, odds[0]);
      const bestDraw = odds.reduce((best, o) =>
        o.oddDraw > best.oddDraw ? o : best, odds[0]);

      const impliedProb = (1 / bestHome.oddHome)
        + (1 / bestAway.oddAway)
        + (1 / bestDraw.oddDraw);

      if (impliedProb < 1) {
        const profit = ((1 / impliedProb) - 1) * 100;
        arbitrages.push({
          gameId,
          homeTeam: bestHome.homeTeam,
          awayTeam: bestHome.awayTeam,
          book1: bestHome.bookmaker,
          book2: bestAway.bookmaker,
          book3: bestDraw.bookmaker,
          oddHome: bestHome.oddHome,
          oddAway: bestAway.oddAway,
          oddDraw: bestDraw.oddDraw,
          profit: Math.round(profit * 100) / 100,
        });
      }
    }

    return arbitrages.sort((a, b) => b.profit - a.profit);
  }, [oddsData]);
}

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'Betting Dashboard',
        short_name: 'BetDash',
        description: 'Dashboard de odds em tempo real',
        theme_color: '#0a0a0a',
        background_color: '#0a0a0a',
        display: 'standalone',
        icons: [
          { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
          { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
        ],
      },
    }),
  ],
});