ArenaHub - Painel Administrativo (Frontend)

O ArenaHub é uma plataforma B2B (SaaS) premium projetada para revolucionar a gestão de arenas esportivas (Padel, Beach Tennis, Futebol). Este repositório contém o Painel Administrativo Web, a interface Single Page Application (SPA) onde o dono da arena gerencia toda sua operação.

Diferente de agendas comuns, o ArenaHub resolve as "dores reais" do proprietário de um complexo esportivo:

• Otimização de ocupação com recursos de Matchmaking (Partidas Abertas).
• CRM com Nivelamento Técnico de jogadores.
• Gestão centralizada de faturamento (Quadras + Consumo de Bar/PDV no mesmo ticket).

🛠️ Tecnologias Utilizadas

A stack foi escolhida com foco em produtividade, performance e manutenibilidade para escalar rapidamente:

• Core: React 18, TypeScript
• Build Tool: Vite (Builds extremamente rápidos)
• Roteamento: React Router DOM
• Estilização: Tailwind CSS v3
• Componentes UI: shadcn/ui (Componentes acessíveis e customizáveis)
• Ícones: Lucide React
• Estado do Servidor: TanStack Query v5 (Gerenciamento impecável de cache e loading states)
• Autenticação: Clerk (Proteção Enterprise-grade)
• Requisições HTTP: Axios

📂 Arquitetura Orientada a Funcionalidades (Feature-Based)

Diferente de estruturas agrupadas por tipo de arquivo, este projeto encapsula a lógica de negócio em Features. Cada feature funciona como um módulo quase independente.

src/
├── app/                  # Ponto de entrada (App.tsx, roteamento global)
├── components/           # Componentes UI GLOBAIS e genéricos (Botões, Inputs, Cards)
├── features/             # 🌟 O NÚCLEO DA APLICAÇÃO
│   ├── auth/             # Autenticação (Login, Registro, Profile)
│   ├── analytics/        # Telas de relatórios financeiros e de ocupação
│   ├── courts/           # Gestão de quadras e status de manutenção
│   ├── customers/        # Base de clientes com classificação de nível técnico
│   ├── dashboard/        # Tela principal consolidada e agenda imediata
│   ├── reservations/     # Fluxo crítico: Reservas, Matchmaking e Consumo
│   ├── settings/         # Configuração da Arena e Grade de Horários
│   └── team/             # Controle de acesso de funcionários
├── lib/                  # Utilitários globais (axios instance, tailwind merge)
└── providers/            # React Contexts

🚀 Como Executar Localmente

1. Dependências

Certifique-se de ter o Node.js v20+ instalado.

npm install

2. Variáveis de Ambiente

Crie um arquivo .env na raiz baseando-se no ambiente de produção:

VITE_API_URL=http://localhost:3000/api

3. Iniciar o Servidor

npm run dev

Acesse http://localhost:5173 no seu navegador. O servidor de desenvolvimento suporta Hot Module Replacement (HMR).

💅 Padrões Adotados

• Mobile-First Real: Tabelas extensas (como a agenda) possuem scroll horizontal estilizado, garantindo que o gestor possa operar a arena 100% pelo smartphone.
• Temas: Suporte arquitetural para Light/Dark mode via ThemeProvider.
• Experiência Premium: Uso de micro-interações e badges de destaque (como o indicador visual de PARTIDA ABERTA).

🌍 Processo de Deploy

A aplicação foi desenhada para hospedagem serverless/edge. O deploy é otimizado para a plataforma Vercel:

1. Conecte este repositório à Vercel.
2. Defina o Framework Preset como Vite.
3. Configure as variáveis de ambiente necessárias (VITE_API_URL).
4. Os deploys automáticos ocorrerão a cada push na branch principal.