Bagres FC

Aplicativo web mobile-first (PWA) para gestão de peladas semanais — lista de presenca, sorteio de times, controle de partidas ao vivo, estatisticas e votacao entre jogadores.

Acesse: https://bagres-fc.vercel.app

---

Stack

Camada	Tecnologia
Frontend	React + Vite (PWA)
Estilo	Tailwind CSS + shadcn/ui
Backend + Banco	Supabase (PostgreSQL + Auth + Storage)
Hospedagem	Vercel
Notificacoes	Web Push + Supabase Edge Functions

---

Rodando localmente

npm install
npm run dev

Crie um arquivo .env na raiz com:

VITE_SUPABASE_URL=sua_url_aqui
VITE_SUPABASE_ANON_KEY=sua_chave_aqui

---

Perfis de Acesso

Perfil	Acesso
Admin	Todas as telas + exclusivas (3A e 6)
Usuario Aprovado	Telas 1, 2, 3B, 4 e 5
Pendente	Somente tela de bloqueio "Aguardando aprovacao"

Todo cadastro novo comeca como Pendente e so recebe acesso apos aprovacao manual do admin via Tela 6.

---

Ciclo Semanal da Rodada

Periodo	Estado
Segunda a Quinta (antes das 14h)	Lista fechada — admin pode abrir manualmente
Quinta as 14h	Lista abre automaticamente; admins entram confirmados primeiro
Quinta as 18h (ou todos pagos)	Lista fecha; times sorteados sao revelados
Segunda	Dia do jogo
Pos-jogo	Admin finaliza a rodada, estatisticas atualizadas, votacao aberta manualmente

---

Telas

Tela 1 — Login / Cadastro

Acesso: Todos

Porta de entrada do app.

• Formulario de login (email + senha)
• Formulario de criacao de conta
• Redirecionamento automatico por perfil:
  • Admin -> painel de controle da rodada
  • Aprovado -> visao do jogador na rodada
  • Pendente -> tela de bloqueio "Aguardando aprovacao"

---

Tela 2 — Perfis e Rodadas

Acesso: Todos os aprovados

Hub de informacoes publicas e historico do grupo.

• Lista de todos os jogadores aprovados com foto, nome e rating atual
• Historico de rodadas passadas
• Detalhes de cada rodada no historico:
  • Artilheiro (maior numero de gols)
  • Garcao (lider de assistencias)
  • Time da Rodada (time com melhor desempenho)

---

Tela 3A — Administracao da Rodada

Acesso: Somente Admin

Painel de controle completo do evento semanal, dividido em tres fases:

Pre-jogo

• Abrir a lista manualmente (disponivel a partir de segunda-feira)
• Gerenciar a lista: remover jogadores, visualizar status de pagamento
• Validar ou rejeitar pagamentos individualmente
• Adicionar convidados (jogadores avulsos) a lista
• Sortear os 4 times manualmente
• Limpar a lista inteira

Durante o jogo

• Botao "Iniciar Jogos"
• Visualizacao dos 4 times sorteados; admin seleciona o confronto ativo
• Interface da partida ativa:
  • Fotos dos jogadores em campo
  • Cronometro da partida
  • Registro de gols e assistencias por jogador especifico
• Marcar o time vitorioso
• Botao "Finalizar Jogo" (zera o cronometro e libera o proximo confronto)

Pos-jogo

• Botao "Finalizar Rodada": encerra o evento e atualiza estatisticas no banco
• Resumo oficial gerado automaticamente: Time da Rodada, Artilheiro e Garcao

---

Tela 3B — Rodada do Jogador

Acesso: Usuarios aprovados

Visao do jogador sobre o evento da semana. O conteudo muda conforme a fase da rodada:

Fase	O que o jogador ve
Antes de quinta as 14h	"Aguardando rodada"
Lista aberta	Botao "Entrar na lista"
Na lista principal	Lista completa + "Confirmar Pagamento" ou "Retirar nome"
Na lista de espera	Lista completa + posicao atual na fila
Quinta as 18h / todos pagos	Times sorteados revelados
Fim da rodada	Resumo oficial (Artilheiro, Garcao, Time da Rodada)

---

Tela 4 — Votacao

Acesso: Todos os aprovados

Sistema de avaliacao entre jogadores para gerar os ratings exibidos na Tela 2.

• Interface para avaliar os colegas apos cada rodada
• Cada usuario vota uma unica vez por ciclo — apos votar a tela fica bloqueada
• Admin pode reabilitar a votacao manualmente quando necessario

---

Tela 5 — Perfil

Acesso: Todos os aprovados

Area pessoal do usuario.

• Estatisticas individuais: gols, assistencias, jogos disputados e times em que atuou
• Edicao de dados pessoais e foto de perfil

---

Tela 6 — Administracao de Usuarios

Acesso: Somente Admin

Backoffice de gestao de pessoas e acessos.

• Lista de contas com status Pendente para Aprovar ou Rejeitar
• Criacao manual de usuarios comuns ou admins
• Edicao e exclusao de contas existentes

---

Banco de Dados

Execute supabase/schema.sql e supabase/functions.sql no SQL Editor do Supabase para criar as tabelas, triggers, RLS e funcoes auxiliares.

Tabelas principais

Tabela	Descricao
profiles	Jogadores (estende auth.users)
rodadas	Rodadas semanais
presencas	Lista de confirmados e fila de espera
times	Times sorteados por rodada
time_jogadores	Relacao jogador <-> time
partidas	Resultados das partidas
eventos	Gols e assistencias por partida
ciclos_votacao	Ciclos de avaliacao
votos	Avaliacoes entre jogadores
push_subscriptions	Assinaturas de push notification

---

Notificacoes Push

O app envia notificacoes via Web Push (PWA) nos seguintes eventos:

• Lista da rodada aberta
• Promocao da lista de espera para a lista principal
• Pagamento confirmado ou rejeitado
• Times sorteados
• Votacao aberta

Edge Function: send-push Secrets necessarios: VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY

---

Deploy

# Frontend
npx vercel --prod

# Edge Function
npx supabase functions deploy send-push --no-verify-jwt

---

Design

Inspirado no Cartola FC — dark mode com sotaque futebolistico.

• Background: #0D0D0D / #111827
• Acento verde (acoes principais): #00C853
• Acento amarelo (destaques): #FFD600
• Danger: #EF4444
• Navegacao por bottom navigation bar fixa
• Cards com rounded-2xl e avatares circulares
• Fonte: Inter / Roboto