criação do website
This commit is contained in:
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
105
docs/01-project-plan.md
Normal file
105
docs/01-project-plan.md
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
# 01 — Plano do Projeto
|
||||||
|
|
||||||
|
## Objetivo
|
||||||
|
|
||||||
|
Criar um **website de administração** que sirva de backend para uma aplicação de liga de futebol. A aplicação cliente já está desenvolvida e lê dados em tempo real da Firebase. Este dashboard é o único ponto de escrita.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Problema a Resolver
|
||||||
|
|
||||||
|
A aplicação cliente mostra dados em tempo real mas não tem interface de edição. É necessário um painel de administração que permita:
|
||||||
|
- Atualizar resultados durante os jogos (em tempo real)
|
||||||
|
- Gerir toda a estrutura da liga (clubes, jogadores, jornadas)
|
||||||
|
- Manter estatísticas atualizadas automaticamente
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Âmbito do Projeto
|
||||||
|
|
||||||
|
### In Scope
|
||||||
|
- Dashboard de administração web (SPA)
|
||||||
|
- Autenticação segura (apenas administradores)
|
||||||
|
- CRUD completo de jogos, clubes, jogadores
|
||||||
|
- Atualização de resultados em tempo real (live)
|
||||||
|
- Gestão de jornadas e classificação
|
||||||
|
- Estatísticas automáticas (calculadas a partir dos resultados)
|
||||||
|
- Interface responsiva (desktop-first, mas funcional em tablet)
|
||||||
|
|
||||||
|
### Out of Scope
|
||||||
|
- Aplicação cliente (já existe)
|
||||||
|
- API REST separada (Firebase é o backend direto)
|
||||||
|
- App móvel de administração
|
||||||
|
- Sistema de utilizadores múltiplos com permissões granulares (v1)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Fases de Desenvolvimento
|
||||||
|
|
||||||
|
### Fase 0 — Planeamento e Design (ATUAL)
|
||||||
|
- [x] Definição de requisitos
|
||||||
|
- [x] Stack tecnológica
|
||||||
|
- [x] Arquitetura do sistema
|
||||||
|
- [x] Design system
|
||||||
|
- [x] Firebase schema
|
||||||
|
- [x] Mockup interativo
|
||||||
|
- [ ] Review e aprovação
|
||||||
|
|
||||||
|
### Fase 1 — Setup e Fundação
|
||||||
|
**Estimativa:** 1-2 sessões
|
||||||
|
- [ ] Inicializar projeto Vite + React + TypeScript
|
||||||
|
- [ ] Configurar Firebase SDK
|
||||||
|
- [ ] Configurar React Router
|
||||||
|
- [ ] Implementar autenticação Firebase Auth
|
||||||
|
- [ ] Layout base (sidebar + header + content area)
|
||||||
|
- [ ] Design system (cores, tipografia, componentes base)
|
||||||
|
|
||||||
|
### Fase 2 — Módulo de Jogos (Core)
|
||||||
|
**Estimativa:** 2-3 sessões
|
||||||
|
- [ ] Listagem de jogos por jornada
|
||||||
|
- [ ] Criação de jogo
|
||||||
|
- [ ] **Live Score Editor** — atualização em tempo real
|
||||||
|
- [ ] Finalizar jogo (resultado final)
|
||||||
|
- [ ] Histórico de jogos
|
||||||
|
|
||||||
|
### Fase 3 — Módulo de Gestão
|
||||||
|
**Estimativa:** 2 sessões
|
||||||
|
- [ ] CRUD de Clubes
|
||||||
|
- [ ] CRUD de Jogadores (com clube associado)
|
||||||
|
- [ ] Gestão de Jornadas
|
||||||
|
- [ ] Classificação (calculada automaticamente)
|
||||||
|
|
||||||
|
### Fase 4 — Estatísticas e Extras
|
||||||
|
**Estimativa:** 1-2 sessões
|
||||||
|
- [ ] Artilheiros (golos por jogador)
|
||||||
|
- [ ] Assistências
|
||||||
|
- [ ] Cartões (amarelos/vermelhos)
|
||||||
|
- [ ] Dashboard overview com métricas
|
||||||
|
|
||||||
|
### Fase 5 — Polish e Deploy
|
||||||
|
**Estimativa:** 1 sessão
|
||||||
|
- [ ] Testes e bug fixes
|
||||||
|
- [ ] Otimização de performance
|
||||||
|
- [ ] Deploy (Firebase Hosting)
|
||||||
|
- [ ] Configuração de domínio
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Critérios de Sucesso
|
||||||
|
|
||||||
|
1. Administrador consegue atualizar um resultado em menos de 10 segundos
|
||||||
|
2. A alteração aparece na app cliente em menos de 2 segundos (Firebase real-time)
|
||||||
|
3. Zero inconsistências na classificação (calculada automaticamente)
|
||||||
|
4. Interface funcional em desktop e tablet
|
||||||
|
5. Acesso protegido por autenticação
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Riscos e Mitigações
|
||||||
|
|
||||||
|
| Risco | Probabilidade | Mitigação |
|
||||||
|
|---|---|---|
|
||||||
|
| Schema Firebase incompatível com app cliente | Alta | Documentar schema existente antes de escrever |
|
||||||
|
| Conflitos de escrita simultânea | Baixa | Usar Firebase transactions |
|
||||||
|
| Performance com muitos listeners real-time | Média | Limitar listeners ativos, usar pagination |
|
||||||
|
| Segurança (acesso não autorizado) | Alta | Firebase Security Rules rigorosas |
|
||||||
164
docs/02-tech-stack.md
Normal file
164
docs/02-tech-stack.md
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
# 02 — Stack Tecnológica
|
||||||
|
|
||||||
|
## Decisão Final
|
||||||
|
|
||||||
|
| Camada | Tecnologia | Versão |
|
||||||
|
|---|---|---|
|
||||||
|
| Framework | React | 18+ |
|
||||||
|
| Build Tool | Vite | 5+ |
|
||||||
|
| Linguagem | TypeScript | 5+ |
|
||||||
|
| Routing | React Router | v6 |
|
||||||
|
| Estado Global | Zustand | 4+ |
|
||||||
|
| Base de Dados | Firebase Firestore | SDK v10 |
|
||||||
|
| Autenticação | Firebase Auth | SDK v10 |
|
||||||
|
| Hosting | Firebase Hosting | — |
|
||||||
|
| Styling | Tailwind CSS | v3 |
|
||||||
|
| Componentes UI | shadcn/ui | latest |
|
||||||
|
| Ícones | Lucide React | latest |
|
||||||
|
| Formulários | React Hook Form + Zod | latest |
|
||||||
|
| Notificações | Sonner (toast) | latest |
|
||||||
|
| Data/Hora | date-fns | latest |
|
||||||
|
| Testes | Vitest + Testing Library | latest |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Justificação das Escolhas
|
||||||
|
|
||||||
|
### React + Vite + TypeScript
|
||||||
|
- React é o mais familiar e com maior ecossistema
|
||||||
|
- Vite oferece HMR instantâneo, essencial para desenvolvimento rápido
|
||||||
|
- TypeScript previne erros em runtime, especialmente importante com o schema Firebase
|
||||||
|
|
||||||
|
### Firebase SDK v10 (Modular)
|
||||||
|
- Já é a base de dados usada pela app cliente — **obrigatório** para compatibilidade
|
||||||
|
- SDK v10 modular tem bundle size menor
|
||||||
|
- Firestore real-time listeners são nativos — zero configuração extra para real-time
|
||||||
|
|
||||||
|
### Zustand (em vez de Redux/Context)
|
||||||
|
- Muito mais simples que Redux para este tamanho de projeto
|
||||||
|
- Funciona bem com Firebase listeners
|
||||||
|
- Boilerplate mínimo
|
||||||
|
|
||||||
|
### Tailwind CSS + shadcn/ui
|
||||||
|
- Tailwind permite customização total sem CSS files separados
|
||||||
|
- shadcn/ui oferece componentes acessíveis (Radix UI) com design neutro que se adapta ao nosso design system
|
||||||
|
- shadcn copia o código para o projeto — sem vendor lock-in
|
||||||
|
|
||||||
|
### React Hook Form + Zod
|
||||||
|
- Formulários performantes (sem re-renders desnecessários)
|
||||||
|
- Zod faz validação e inferência de tipos em simultâneo
|
||||||
|
- Schema Zod pode espelhar o schema Firebase
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Estrutura de Ficheiros do Projeto
|
||||||
|
|
||||||
|
```
|
||||||
|
football-admin/
|
||||||
|
├── public/
|
||||||
|
│ └── favicon.svg
|
||||||
|
├── src/
|
||||||
|
│ ├── app/
|
||||||
|
│ │ ├── App.tsx # Router principal
|
||||||
|
│ │ └── routes.tsx # Definição de rotas
|
||||||
|
│ ├── components/
|
||||||
|
│ │ ├── ui/ # shadcn/ui components
|
||||||
|
│ │ ├── layout/
|
||||||
|
│ │ │ ├── Sidebar.tsx
|
||||||
|
│ │ │ ├── Header.tsx
|
||||||
|
│ │ │ └── Layout.tsx
|
||||||
|
│ │ ├── games/
|
||||||
|
│ │ │ ├── GameCard.tsx
|
||||||
|
│ │ │ ├── LiveScoreEditor.tsx
|
||||||
|
│ │ │ └── GameForm.tsx
|
||||||
|
│ │ ├── clubs/
|
||||||
|
│ │ ├── players/
|
||||||
|
│ │ └── shared/
|
||||||
|
│ │ ├── DataTable.tsx
|
||||||
|
│ │ ├── ConfirmDialog.tsx
|
||||||
|
│ │ └── LoadingSpinner.tsx
|
||||||
|
│ ├── pages/
|
||||||
|
│ │ ├── Dashboard.tsx
|
||||||
|
│ │ ├── Games.tsx
|
||||||
|
│ │ ├── LiveGame.tsx
|
||||||
|
│ │ ├── Clubs.tsx
|
||||||
|
│ │ ├── Players.tsx
|
||||||
|
│ │ ├── Standings.tsx
|
||||||
|
│ │ ├── Scorers.tsx
|
||||||
|
│ │ └── Login.tsx
|
||||||
|
│ ├── hooks/
|
||||||
|
│ │ ├── useGames.ts
|
||||||
|
│ │ ├── useClubs.ts
|
||||||
|
│ │ ├── usePlayers.ts
|
||||||
|
│ │ └── useAuth.ts
|
||||||
|
│ ├── store/
|
||||||
|
│ │ ├── authStore.ts
|
||||||
|
│ │ └── leagueStore.ts
|
||||||
|
│ ├── lib/
|
||||||
|
│ │ ├── firebase.ts # Firebase config e inicialização
|
||||||
|
│ │ ├── firestore.ts # Helpers de Firestore
|
||||||
|
│ │ └── utils.ts
|
||||||
|
│ ├── types/
|
||||||
|
│ │ └── index.ts # Todos os tipos TypeScript
|
||||||
|
│ └── main.tsx
|
||||||
|
├── .env.local # Firebase config (não commitar)
|
||||||
|
├── .env.example
|
||||||
|
├── firebase.json
|
||||||
|
├── firestore.rules
|
||||||
|
├── vite.config.ts
|
||||||
|
├── tailwind.config.ts
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Variáveis de Ambiente
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# .env.local (copiar de .env.example)
|
||||||
|
VITE_FIREBASE_API_KEY=
|
||||||
|
VITE_FIREBASE_AUTH_DOMAIN=
|
||||||
|
VITE_FIREBASE_PROJECT_ID=
|
||||||
|
VITE_FIREBASE_STORAGE_BUCKET=
|
||||||
|
VITE_FIREBASE_MESSAGING_SENDER_ID=
|
||||||
|
VITE_FIREBASE_APP_ID=
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Scripts NPM
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test": "vitest",
|
||||||
|
"deploy": "npm run build && firebase deploy"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Comandos de Setup
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. Criar projeto
|
||||||
|
npm create vite@latest football-admin -- --template react-ts
|
||||||
|
cd football-admin
|
||||||
|
|
||||||
|
# 2. Instalar dependências
|
||||||
|
npm install firebase react-router-dom zustand react-hook-form zod @hookform/resolvers date-fns sonner lucide-react
|
||||||
|
|
||||||
|
# 3. Instalar Tailwind
|
||||||
|
npm install -D tailwindcss postcss autoprefixer
|
||||||
|
npx tailwindcss init -p
|
||||||
|
|
||||||
|
# 4. Instalar shadcn/ui
|
||||||
|
npx shadcn@latest init
|
||||||
|
|
||||||
|
# 5. Adicionar componentes shadcn necessários
|
||||||
|
npx shadcn@latest add button input label card badge dialog table tabs select
|
||||||
|
```
|
||||||
207
docs/03-architecture.md
Normal file
207
docs/03-architecture.md
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
# 03 — Arquitetura do Sistema
|
||||||
|
|
||||||
|
## Diagrama de Arquitetura
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ FIREBASE │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────┐ ┌──────────────┐ ┌───────────────┐ │
|
||||||
|
│ │ Firestore │ │ Auth │ │ Hosting │ │
|
||||||
|
│ │ (Database) │ │ (Admin only)│ │ (Deploy) │ │
|
||||||
|
│ └──────┬──────┘ └──────────────┘ └───────────────┘ │
|
||||||
|
│ │ │
|
||||||
|
└──────────┼────────────────────────────────────────────────── ┘
|
||||||
|
│ Real-time listeners
|
||||||
|
┌──────┴──────────────────────────┐
|
||||||
|
│ │
|
||||||
|
▼ ▼
|
||||||
|
┌──────────────────┐ ┌──────────────────────┐
|
||||||
|
│ ADMIN DASHBOARD │ │ APLICAÇÃO CLIENTE │
|
||||||
|
│ (Este projeto) │ │ (Já desenvolvida) │
|
||||||
|
│ │ │ │
|
||||||
|
│ - Escreve dados │ │ - Lê dados │
|
||||||
|
│ - Autenticado │ │ - Sem autenticação │
|
||||||
|
│ - React SPA │ │ - Apenas leitura │
|
||||||
|
└──────────────────┘ └──────────────────────┘
|
||||||
|
▲ WRITE ▲ READ
|
||||||
|
│ │
|
||||||
|
└────────── Firebase ────────┘
|
||||||
|
(fonte única de verdade)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Fluxo de Dados
|
||||||
|
|
||||||
|
### Atualização de Resultado em Tempo Real
|
||||||
|
|
||||||
|
```
|
||||||
|
Admin clica "+1 Golo" no Live Score Editor
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
React Hook Form / estado local atualiza
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Firebase transaction (atómica):
|
||||||
|
- Atualiza game.score
|
||||||
|
- Cria evento no subcollection game.events
|
||||||
|
- Atualiza stats do jogador (se golo com autor)
|
||||||
|
- Recalcula standings
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Firebase Firestore (source of truth)
|
||||||
|
│
|
||||||
|
├──▶ Admin Dashboard: listener onSnapshot atualiza UI
|
||||||
|
│
|
||||||
|
└──▶ App Cliente: listener onSnapshot recebe atualização
|
||||||
|
(< 2 segundos latência)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Fluxo de Autenticação
|
||||||
|
|
||||||
|
```
|
||||||
|
Utilizador acede ao site
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Firebase Auth verifica sessão
|
||||||
|
│
|
||||||
|
├── Não autenticado ──▶ Redireciona para /login
|
||||||
|
│
|
||||||
|
└── Autenticado ──▶ Verifica role em Firestore
|
||||||
|
│
|
||||||
|
├── role: "admin" ──▶ Acesso total
|
||||||
|
│
|
||||||
|
└── outros ──▶ Redireciona para /login
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Arquitetura de Componentes
|
||||||
|
|
||||||
|
```
|
||||||
|
App
|
||||||
|
├── AuthProvider (contexto de autenticação)
|
||||||
|
│ └── Router
|
||||||
|
│ ├── /login → LoginPage
|
||||||
|
│ └── ProtectedRoute (requer auth)
|
||||||
|
│ └── Layout
|
||||||
|
│ ├── Sidebar
|
||||||
|
│ ├── Header
|
||||||
|
│ └── Outlet (conteúdo da página)
|
||||||
|
│ ├── /dashboard → DashboardPage
|
||||||
|
│ ├── /games → GamesPage
|
||||||
|
│ │ └── /games/:id/live → LiveGamePage ⭐
|
||||||
|
│ ├── /clubs → ClubsPage
|
||||||
|
│ │ └── /clubs/:id → ClubDetailPage
|
||||||
|
│ ├── /players → PlayersPage
|
||||||
|
│ ├── /standings → StandingsPage
|
||||||
|
│ └── /scorers → ScorersPage
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Gestão de Estado
|
||||||
|
|
||||||
|
### Zustand Stores
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// authStore — autenticação
|
||||||
|
{
|
||||||
|
user: FirebaseUser | null,
|
||||||
|
isAdmin: boolean,
|
||||||
|
loading: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
// leagueStore — dados da liga (cache local)
|
||||||
|
{
|
||||||
|
clubs: Club[],
|
||||||
|
players: Player[],
|
||||||
|
currentSeason: string,
|
||||||
|
activeGameId: string | null // jogo a decorrer
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Firebase Hooks (React Query pattern)
|
||||||
|
|
||||||
|
Cada módulo tem um hook custom que:
|
||||||
|
1. Subscreve ao Firestore com `onSnapshot`
|
||||||
|
2. Guarda dados no estado local do hook
|
||||||
|
3. Expõe funções de mutação (create, update, delete)
|
||||||
|
4. Faz cleanup do listener no unmount
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Exemplo
|
||||||
|
function useGames(jornadaId?: string) {
|
||||||
|
const [games, setGames] = useState<Game[]>([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const q = jornadaId
|
||||||
|
? query(gamesRef, where("jornadaId", "==", jornadaId))
|
||||||
|
: gamesRef
|
||||||
|
|
||||||
|
const unsubscribe = onSnapshot(q, (snapshot) => {
|
||||||
|
setGames(snapshot.docs.map(d => ({ id: d.id, ...d.data() })))
|
||||||
|
setLoading(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => unsubscribe() // cleanup
|
||||||
|
}, [jornadaId])
|
||||||
|
|
||||||
|
return { games, loading }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Firebase Security Rules
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
rules_version = '2';
|
||||||
|
service cloud.firestore {
|
||||||
|
match /databases/{database}/documents {
|
||||||
|
|
||||||
|
// Função helper: verifica se é admin
|
||||||
|
function isAdmin() {
|
||||||
|
return request.auth != null &&
|
||||||
|
get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == "admin";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Jogos: leitura pública, escrita apenas admin
|
||||||
|
match /games/{gameId} {
|
||||||
|
allow read: if true;
|
||||||
|
allow write: if isAdmin();
|
||||||
|
|
||||||
|
match /events/{eventId} {
|
||||||
|
allow read: if true;
|
||||||
|
allow write: if isAdmin();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clubes: leitura pública, escrita apenas admin
|
||||||
|
match /clubs/{clubId} {
|
||||||
|
allow read: if true;
|
||||||
|
allow write: if isAdmin();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Jogadores: leitura pública, escrita apenas admin
|
||||||
|
match /players/{playerId} {
|
||||||
|
allow read: if true;
|
||||||
|
allow write: if isAdmin();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Standings: leitura pública, escrita apenas admin
|
||||||
|
match /standings/{doc} {
|
||||||
|
allow read: if true;
|
||||||
|
allow write: if isAdmin();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utilizadores: apenas o próprio ou admin
|
||||||
|
match /users/{userId} {
|
||||||
|
allow read: if request.auth.uid == userId || isAdmin();
|
||||||
|
allow write: if isAdmin();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
184
docs/04-design-system.md
Normal file
184
docs/04-design-system.md
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
# 04 — Design System
|
||||||
|
|
||||||
|
## Conceito Visual
|
||||||
|
|
||||||
|
**"Control Room"** — Um dashboard de administração que transmite profissionalismo e controlo. Inspirado em interfaces de broadcasting desportivo e software de gestão profissional. Dark theme como padrão (ambiente de trabalho, ecrãs durante os jogos).
|
||||||
|
|
||||||
|
**Palavras-chave:** Preciso. Funcional. Desportivo. Autoritativo.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Paleta de Cores
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
/* Backgrounds */
|
||||||
|
--bg-base: #0a0e1a; /* Azul noite — fundo principal */
|
||||||
|
--bg-surface: #111827; /* Cards e painéis */
|
||||||
|
--bg-elevated: #1a2235; /* Elementos elevados */
|
||||||
|
--bg-overlay: #243047; /* Hover states, dropdowns */
|
||||||
|
|
||||||
|
/* Brand */
|
||||||
|
--brand-primary: #22c55e; /* Verde campo — ação principal */
|
||||||
|
--brand-accent: #3b82f6; /* Azul — informação, links */
|
||||||
|
--brand-danger: #ef4444; /* Vermelho — perigo, cartões vermelhos */
|
||||||
|
--brand-warning: #f59e0b; /* Amarelo — cartões amarelos */
|
||||||
|
|
||||||
|
/* Texto */
|
||||||
|
--text-primary: #f9fafb; /* Texto principal */
|
||||||
|
--text-secondary: #9ca3af; /* Texto secundário */
|
||||||
|
--text-muted: #4b5563; /* Texto inativo */
|
||||||
|
|
||||||
|
/* Bordas */
|
||||||
|
--border: #1e2d45; /* Bordas subtis */
|
||||||
|
--border-active: #22c55e; /* Borda ativa */
|
||||||
|
|
||||||
|
/* Estados */
|
||||||
|
--live-pulse: #ef4444; /* Indicador LIVE */
|
||||||
|
--success: #22c55e;
|
||||||
|
--error: #ef4444;
|
||||||
|
--warning: #f59e0b;
|
||||||
|
--info: #3b82f6;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tipografia
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Display / Headings — Força e presença */
|
||||||
|
--font-display: 'Bebas Neue', 'Impact', sans-serif;
|
||||||
|
|
||||||
|
/* Interface / Corpo — Legibilidade técnica */
|
||||||
|
--font-body: 'IBM Plex Sans', 'Menlo', monospace-adjacent, sans-serif;
|
||||||
|
|
||||||
|
/* Dados / Números — Clareza em scoreboards */
|
||||||
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Escala tipográfica:**
|
||||||
|
```
|
||||||
|
xs: 11px — Labels, metadados
|
||||||
|
sm: 13px — Texto secundário
|
||||||
|
base: 15px — Corpo de texto
|
||||||
|
lg: 17px — Subtítulos
|
||||||
|
xl: 20px — Títulos de secção
|
||||||
|
2xl: 24px — Títulos de página
|
||||||
|
3xl: 32px — Scores (Bebas Neue)
|
||||||
|
4xl: 48px — Score principal live
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Componentes Base
|
||||||
|
|
||||||
|
### Scoreboard (Live)
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ ● LIVE 75' │
|
||||||
|
│ │
|
||||||
|
│ FC Porto 2 — 1 SLB │
|
||||||
|
│ (crest) [grande] (crest)│
|
||||||
|
│ │
|
||||||
|
│ [−] [+] [−] [+] │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
- Números do score em Bebas Neue 64px
|
||||||
|
- Indicador LIVE com pulse animation (vermelho)
|
||||||
|
- Botões +/- grandes (acessíveis em tablet)
|
||||||
|
|
||||||
|
### Game Card
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ Jornada 15 • Sáb 15 Mar • 20:30 │
|
||||||
|
│ │
|
||||||
|
│ FC Porto — Benfica │
|
||||||
|
│ │
|
||||||
|
│ [Iniciar Jogo] [Editar] │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Status Badges
|
||||||
|
- `AGENDADO` — cinza
|
||||||
|
- `A DECORRER` — verde com pulse
|
||||||
|
- `INTERVALO` — amarelo
|
||||||
|
- `TERMINADO` — azul
|
||||||
|
- `ADIADO` — laranja
|
||||||
|
|
||||||
|
### Sidebar
|
||||||
|
```
|
||||||
|
┌─────────┐
|
||||||
|
│ ⚽ ADM │
|
||||||
|
├─────────┤
|
||||||
|
│ Dashboard│
|
||||||
|
│ Jogos │ ← item ativo tem barra verde à esquerda
|
||||||
|
│ Clubes │
|
||||||
|
│ Jogadores│
|
||||||
|
│ Classif. │
|
||||||
|
│ Artilh. │
|
||||||
|
├─────────┤
|
||||||
|
│ Settings │
|
||||||
|
│ Logout │
|
||||||
|
└─────────┘
|
||||||
|
```
|
||||||
|
Largura: 240px desktop, colapsável para 60px (ícones apenas)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Layout
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────────────────────────────────┐
|
||||||
|
│ HEADER (64px) │
|
||||||
|
│ [☰ Logo] Jornada atual: 15/34 [● LIVE: Porto-B] │
|
||||||
|
├───────────┬──────────────────────────────────────────┤
|
||||||
|
│ │ │
|
||||||
|
│ SIDEBAR │ CONTENT AREA │
|
||||||
|
│ (240px) │ (flex 1) │
|
||||||
|
│ │ │
|
||||||
|
│ │ │
|
||||||
|
│ │ │
|
||||||
|
└───────────┴──────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Animações e Microinterações
|
||||||
|
|
||||||
|
| Elemento | Animação | Duração |
|
||||||
|
|---|---|---|
|
||||||
|
| Indicador LIVE | Pulse (scale + opacity) | 1.5s infinite |
|
||||||
|
| Score update | Flash verde → normal | 600ms |
|
||||||
|
| Sidebar item hover | Translate X 4px | 150ms |
|
||||||
|
| Card hover | BoxShadow + Y -2px | 200ms |
|
||||||
|
| Toast notifications | Slide in from right | 300ms |
|
||||||
|
| Página load | Fade in staggered | 400ms |
|
||||||
|
| Botão click | Scale 0.96 | 100ms |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Responsividade
|
||||||
|
|
||||||
|
| Breakpoint | Layout |
|
||||||
|
|---|---|
|
||||||
|
| `< 768px` (mobile) | Sidebar escondida (drawer), conteúdo full-width |
|
||||||
|
| `768px-1024px` (tablet) | Sidebar colapsada (ícones), otimizado para live scoring |
|
||||||
|
| `> 1024px` (desktop) | Layout completo |
|
||||||
|
|
||||||
|
**Nota:** O Live Score Editor deve ser especialmente otimizado para tablet — é o mais provável de ser usado durante os jogos.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ícones
|
||||||
|
|
||||||
|
Usar **Lucide React** exclusivamente. Ícones principais:
|
||||||
|
- `Trophy` — classificação
|
||||||
|
- `Users` — clubes
|
||||||
|
- `User` — jogadores
|
||||||
|
- `Calendar` — jornadas
|
||||||
|
- `BarChart` — estatísticas
|
||||||
|
- `Zap` — live/em tempo real
|
||||||
|
- `Plus` / `Minus` — adicionar/remover golos
|
||||||
|
- `Flag` — cartões
|
||||||
|
- `Clock` — tempo de jogo
|
||||||
214
docs/05-features.md
Normal file
214
docs/05-features.md
Normal file
@@ -0,0 +1,214 @@
|
|||||||
|
# 05 — Funcionalidades Detalhadas
|
||||||
|
|
||||||
|
## Módulo 1: Dashboard (Visão Geral)
|
||||||
|
|
||||||
|
**Rota:** `/dashboard`
|
||||||
|
**Prioridade:** Alta
|
||||||
|
|
||||||
|
### O que mostra:
|
||||||
|
- **Cartão de jogo LIVE** (se houver jogo a decorrer) com link rápido para Live Editor
|
||||||
|
- **Próximos jogos** (2-3 próximas partidas)
|
||||||
|
- **Últimos resultados** (2-3 jogos recentes)
|
||||||
|
- **Métricas rápidas:** Total de jogos, golos marcados, jornada atual
|
||||||
|
- **Top 3 artilheiros**
|
||||||
|
- **Top 3 da classificação**
|
||||||
|
|
||||||
|
### Comportamento:
|
||||||
|
- Se houver jogo LIVE, o cartão aparece em destaque no topo com pulse animation
|
||||||
|
- Dados atualizados em tempo real via Firestore listeners
|
||||||
|
- Links diretos para edição de cada entidade
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Módulo 2: Gestão de Jogos
|
||||||
|
|
||||||
|
**Rota:** `/games`
|
||||||
|
**Prioridade:** Crítica
|
||||||
|
|
||||||
|
### Lista de Jogos (`/games`)
|
||||||
|
- Filtro por jornada (dropdown ou tabs)
|
||||||
|
- Filtro por estado: Todos / Agendados / Terminados / Live
|
||||||
|
- Cards de jogo com: clubes, data/hora, resultado (se existir), estado
|
||||||
|
- Botão "Novo Jogo"
|
||||||
|
- Botão "Iniciar" (para jogos agendados)
|
||||||
|
- Botão "Live" (para jogos a decorrer — destaque verde)
|
||||||
|
|
||||||
|
### Criar/Editar Jogo (`/games/new` e `/games/:id/edit`)
|
||||||
|
**Campos:**
|
||||||
|
- Jornada (select)
|
||||||
|
- Data e hora
|
||||||
|
- Clube casa (select com crest)
|
||||||
|
- Clube fora (select com crest)
|
||||||
|
- Local/estádio
|
||||||
|
- Estado (agendado/adiado)
|
||||||
|
|
||||||
|
### Live Score Editor (`/games/:id/live`) ⭐ FUNCIONALIDADE CORE
|
||||||
|
**Este é o ecrã mais importante do projeto.**
|
||||||
|
|
||||||
|
#### Layout do ecrã:
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────┐
|
||||||
|
│ ● LIVE • Jornada 15 • [Pausar] [Terminar] │
|
||||||
|
├─────────────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ FC PORTO 2 — 1 BENFICA │
|
||||||
|
│ (grande, Bebas Neue) │
|
||||||
|
│ │
|
||||||
|
│ [−] [+Golo] [+Outro] [+Golo] [+] │
|
||||||
|
│ │
|
||||||
|
├─────────────────────────────────────────────────┤
|
||||||
|
│ EVENTOS DO JOGO [+ Evento] │
|
||||||
|
│ ┌────────────────────────────────────────────┐ │
|
||||||
|
│ │ ⚽ 23' — Mehdi Taremi (FC Porto) │ │
|
||||||
|
│ │ 🟨 31' — João Mário (Benfica) │ │
|
||||||
|
│ │ ⚽ 67' — Gonçalo Ramos (Benfica) │ │
|
||||||
|
│ │ ⚽ 71' — Evanilson (FC Porto) │ │
|
||||||
|
│ └────────────────────────────────────────────┘ │
|
||||||
|
└─────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Funcionalidades:
|
||||||
|
- **Cronómetro:** Inicia ao clicar "Iniciar Jogo", mostra minuto atual
|
||||||
|
- **Botões de golo:** `+Golo` abre modal para selecionar jogador + minuto
|
||||||
|
- **Outros eventos:** Cartão amarelo, cartão vermelho, substituição
|
||||||
|
- **Desfazer:** Botão de undo no último evento (até 30 segundos)
|
||||||
|
- **Intervalo:** Pausa o cronómetro, muda estado para "Intervalo"
|
||||||
|
- **Terminar:** Confirma resultado final, fecha o jogo
|
||||||
|
|
||||||
|
#### Modal de Golo:
|
||||||
|
- Selecionar jogador (do clube que marcou, lista filtrada)
|
||||||
|
- Minuto (pré-preenchido com minuto atual, editável)
|
||||||
|
- Tipo: Golo normal / Penálti / Autogolo
|
||||||
|
- Assistência (opcional, select com jogadores)
|
||||||
|
- Botão "Confirmar Golo" → Firestore transaction
|
||||||
|
|
||||||
|
#### Firestore Transaction no Golo:
|
||||||
|
```
|
||||||
|
1. Adicionar evento ao subcollection games/:id/events
|
||||||
|
2. Incrementar game.score.home ou game.score.away
|
||||||
|
3. Incrementar player.stats.goals
|
||||||
|
4. Se assistência: incrementar player.stats.assists
|
||||||
|
5. Recalcular standings para ambos os clubes
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Módulo 3: Clubes
|
||||||
|
|
||||||
|
**Rota:** `/clubs`
|
||||||
|
**Prioridade:** Média
|
||||||
|
|
||||||
|
### Lista de Clubes
|
||||||
|
- Grid de cards com: escudo, nome, cidade, nº de jogadores
|
||||||
|
- Barra de pesquisa
|
||||||
|
- Botão "Novo Clube"
|
||||||
|
|
||||||
|
### Criar/Editar Clube
|
||||||
|
**Campos:**
|
||||||
|
- Nome do clube
|
||||||
|
- Abreviatura (3 letras, ex: "FCP")
|
||||||
|
- Cidade
|
||||||
|
- Estádio
|
||||||
|
- Cores (principal + secundária — color pickers)
|
||||||
|
- Escudo (upload de imagem — Firebase Storage)
|
||||||
|
- Ano de fundação
|
||||||
|
|
||||||
|
### Detalhe do Clube (`/clubs/:id`)
|
||||||
|
- Info do clube
|
||||||
|
- Lista de jogadores do clube (com link para edição)
|
||||||
|
- Estatísticas: jogos, vitórias, empates, derrotas, golos
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Módulo 4: Jogadores
|
||||||
|
|
||||||
|
**Rota:** `/players`
|
||||||
|
**Prioridade:** Média
|
||||||
|
|
||||||
|
### Lista de Jogadores
|
||||||
|
- Tabela com: foto, nome, clube (badge), posição, nº camisola, golos, assistências
|
||||||
|
- Filtro por clube
|
||||||
|
- Filtro por posição (GR, DEF, MED, ATA)
|
||||||
|
- Barra de pesquisa
|
||||||
|
- Botão "Novo Jogador"
|
||||||
|
|
||||||
|
### Criar/Editar Jogador
|
||||||
|
**Campos:**
|
||||||
|
- Nome completo
|
||||||
|
- Nome curto (para scoreboards)
|
||||||
|
- Data de nascimento
|
||||||
|
- Nacionalidade
|
||||||
|
- Clube (select)
|
||||||
|
- Posição (GR / DEF / MED / ATA)
|
||||||
|
- Número de camisola
|
||||||
|
- Foto (upload — Firebase Storage)
|
||||||
|
- Estado (ativo / lesionado / suspenso)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Módulo 5: Classificação
|
||||||
|
|
||||||
|
**Rota:** `/standings`
|
||||||
|
**Prioridade:** Alta
|
||||||
|
|
||||||
|
### Tabela de Classificação
|
||||||
|
- Posição, clube (escudo + nome), J, V, E, D, GM, GS, DG, Pts
|
||||||
|
- Linha a separar lugares de Champions/Europa/Descida (configurável)
|
||||||
|
- Atualização em tempo real
|
||||||
|
- Possibilidade de **editar manualmente** (override) um valor (com confirmação)
|
||||||
|
|
||||||
|
### Recálculo Automático
|
||||||
|
A classificação é recalculada automaticamente sempre que um jogo é finalizado. Pode também ser acionado manualmente por "Recalcular Classificação".
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Módulo 6: Artilheiros / Estatísticas
|
||||||
|
|
||||||
|
**Rota:** `/scorers`
|
||||||
|
**Prioridade:** Média
|
||||||
|
|
||||||
|
### Artilheiros
|
||||||
|
- Posição, jogador (foto + nome), clube, golos, assistências
|
||||||
|
- Filtro por tipo (golos / assistências / cartões)
|
||||||
|
|
||||||
|
### Cartões
|
||||||
|
- Tabela de jogadores com mais cartões (amarelos e vermelhos)
|
||||||
|
- Destaque para jogadores suspensos
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Módulo 7: Jornadas
|
||||||
|
|
||||||
|
**Rota:** `/rounds`
|
||||||
|
**Prioridade:** Média
|
||||||
|
|
||||||
|
### Gestão de Jornadas
|
||||||
|
- Lista de jornadas (1 a N)
|
||||||
|
- Criar nova jornada
|
||||||
|
- Ver jogos de cada jornada
|
||||||
|
- Marcar jornada como atual
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Funcionalidades Transversais
|
||||||
|
|
||||||
|
### Autenticação
|
||||||
|
- Login com email/password (Firebase Auth)
|
||||||
|
- Proteção de todas as rotas (exceto `/login`)
|
||||||
|
- Sessão persistente
|
||||||
|
- Logout
|
||||||
|
|
||||||
|
### Notificações (Toast)
|
||||||
|
- Sucesso ao guardar dados
|
||||||
|
- Erro com mensagem descritiva
|
||||||
|
- Confirmação de ações destrutivas (modal de confirmação)
|
||||||
|
|
||||||
|
### Confirmação de Ações Destrutivas
|
||||||
|
Sempre que o admin vai:
|
||||||
|
- Apagar um jogo, clube ou jogador
|
||||||
|
- Terminar um jogo
|
||||||
|
- Fazer override na classificação
|
||||||
|
→ Aparece modal de confirmação com texto descritivo do que vai acontecer
|
||||||
|
|
||||||
|
### Auditoria (Nice to Have — v2)
|
||||||
|
Guardar log de todas as alterações: quem fez, o quê, quando.
|
||||||
135
docs/06-agent-handoff.md
Normal file
135
docs/06-agent-handoff.md
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
# 06 — Guia de Agent Handoff
|
||||||
|
|
||||||
|
> Este documento existe para garantir que qualquer sessão de desenvolvimento pode ser retomada sem perda de contexto.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Para o Agente que está a Retomar
|
||||||
|
|
||||||
|
### Passo 1: Lê o estado atual
|
||||||
|
Abre `docs/07-progress-tracker.md` e identifica:
|
||||||
|
- O que está feito ✅
|
||||||
|
- O que está em progresso 🔄
|
||||||
|
- O que é o próximo passo ⏭️
|
||||||
|
|
||||||
|
### Passo 2: Entende o contexto
|
||||||
|
- **O projeto é:** Painel de administração para gerir uma liga de futebol
|
||||||
|
- **A app cliente:** Já existe, só lê dados da Firebase
|
||||||
|
- **Este site:** É o único que escreve na Firebase
|
||||||
|
- **A funcionalidade mais importante:** Live Score Editor (atualização de resultados em tempo real)
|
||||||
|
|
||||||
|
### Passo 3: Verifica a estrutura de ficheiros
|
||||||
|
Confirma que a estrutura em `docs/02-tech-stack.md` foi seguida. Se houver desvios, atualiza a documentação.
|
||||||
|
|
||||||
|
### Passo 4: Atualiza o progress tracker
|
||||||
|
Ao terminar a sessão, atualiza `docs/07-progress-tracker.md` com o que foi feito.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Princípios de Desenvolvimento a Seguir
|
||||||
|
|
||||||
|
### 1. Firebase primeiro
|
||||||
|
- Antes de criar qualquer componente de UI, confirma o schema Firebase em `docs/08-firebase-schema.md`
|
||||||
|
- Qualquer alteração ao schema deve ser documentada imediatamente
|
||||||
|
- Usar sempre TypeScript types que espelhem o schema
|
||||||
|
|
||||||
|
### 2. Real-time por defeito
|
||||||
|
- Usar `onSnapshot` em vez de `getDoc` sempre que possível
|
||||||
|
- O utilizador nunca deve precisar de fazer refresh manual
|
||||||
|
|
||||||
|
### 3. Transações para operações compostas
|
||||||
|
- Sempre que uma ação modifica múltiplos documentos (ex: marcar golo), usar `runTransaction`
|
||||||
|
- Nunca fazer writes paralelos sem transação — risco de inconsistência
|
||||||
|
|
||||||
|
### 4. UX do Live Editor é sagrada
|
||||||
|
- O Live Score Editor deve funcionar com latência mínima
|
||||||
|
- Botões grandes (min 48px de toque)
|
||||||
|
- Feedback visual imediato (antes mesmo da Firebase confirmar)
|
||||||
|
- Otimistic updates: atualiza UI localmente, reverte se Firebase falhar
|
||||||
|
|
||||||
|
### 5. Não breaking changes no schema
|
||||||
|
- A app cliente já está a ler dados. Qualquer alteração ao schema pode quebrar a app cliente.
|
||||||
|
- Adicionar campos novos é seguro (additive changes)
|
||||||
|
- Renomear ou remover campos exige coordenação com a app cliente
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Convenções de Código
|
||||||
|
|
||||||
|
### Nomeação
|
||||||
|
```
|
||||||
|
Ficheiros: PascalCase para componentes (GameCard.tsx)
|
||||||
|
camelCase para hooks, utils, stores (useGames.ts)
|
||||||
|
Variáveis: camelCase
|
||||||
|
Constantes: UPPER_SNAKE_CASE
|
||||||
|
Types/Types: PascalCase (Game, Club, Player)
|
||||||
|
Firestore: camelCase nas keys (homeScore, awayScore)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Estrutura de um Hook Firebase
|
||||||
|
```typescript
|
||||||
|
// Padrão obrigatório para todos os hooks de dados
|
||||||
|
export function useGames(options?: { jornadaId?: string }) {
|
||||||
|
const [games, setGames] = useState<Game[]>([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [error, setError] = useState<Error | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const unsubscribe = onSnapshot(query,
|
||||||
|
(snap) => {
|
||||||
|
setGames(snap.docs.map(parseGame))
|
||||||
|
setLoading(false)
|
||||||
|
},
|
||||||
|
(err) => {
|
||||||
|
setError(err)
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
return unsubscribe // cleanup obrigatório
|
||||||
|
}, [options?.jornadaId])
|
||||||
|
|
||||||
|
// Funções de mutação
|
||||||
|
const createGame = async (data: CreateGameInput) => { ... }
|
||||||
|
const updateGame = async (id: string, data: Partial<Game>) => { ... }
|
||||||
|
const deleteGame = async (id: string) => { ... }
|
||||||
|
|
||||||
|
return { games, loading, error, createGame, updateGame, deleteGame }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Commits (se usar Git)
|
||||||
|
```
|
||||||
|
feat: adicionar live score editor
|
||||||
|
fix: corrigir cálculo de standings após golo
|
||||||
|
docs: atualizar schema Firebase
|
||||||
|
style: ajustar layout do sidebar
|
||||||
|
refactor: extrair lógica de golo para hook
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Perguntas Frequentes
|
||||||
|
|
||||||
|
**Q: Onde está o schema da Firebase?**
|
||||||
|
A: `docs/08-firebase-schema.md`
|
||||||
|
|
||||||
|
**Q: Qual o design system a seguir?**
|
||||||
|
A: `docs/04-design-system.md` — usa as CSS variables definidas lá
|
||||||
|
|
||||||
|
**Q: Posso mudar a stack tecnológica?**
|
||||||
|
A: Não sem atualizar `docs/02-tech-stack.md` e ter uma boa razão documentada
|
||||||
|
|
||||||
|
**Q: A app cliente vai quebrar se eu alterar o schema?**
|
||||||
|
A: Possivelmente. Adicionar campos novos é seguro. Remover/renomear requer coordenação.
|
||||||
|
|
||||||
|
**Q: Como sei se o Live Editor está a funcionar?**
|
||||||
|
A: Abre a app cliente em paralelo. A alteração deve aparecer em menos de 2 segundos.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Contactos / Dependências Externas
|
||||||
|
|
||||||
|
- **Firebase Project:** [preencher com o project ID]
|
||||||
|
- **Firebase Console:** https://console.firebase.google.com
|
||||||
|
- **App Cliente:** [link para o repositório ou descrição]
|
||||||
|
- **Design Mockup:** `mockup/index.html` (abrir no browser)
|
||||||
141
docs/07-progress-tracker.md
Normal file
141
docs/07-progress-tracker.md
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
# 07 — Progress Tracker
|
||||||
|
|
||||||
|
> Atualizar este ficheiro no início e fim de cada sessão de desenvolvimento.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Estado Geral
|
||||||
|
|
||||||
|
| Fase | Estado | Progresso |
|
||||||
|
|---|---|---|
|
||||||
|
| Fase 0: Planeamento | ✅ Completo | 100% |
|
||||||
|
| Fase 1: Setup e Fundação | ✅ Completo | 100% |
|
||||||
|
| Fase 2: Módulo de Jogos (Live) | 🔄 Em Progresso | 0% |
|
||||||
|
| Fase 3: Módulo de Gestão | ⏳ Pendente | 0% |
|
||||||
|
| Fase 4: Estatísticas | ⏳ Pendente | 0% |
|
||||||
|
| Fase 5: Polish e Deploy | ⏳ Pendente | 0% |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Próximo Passo Imediato
|
||||||
|
|
||||||
|
**⏭️ Fase 1 — Setup inicial do projeto**
|
||||||
|
|
||||||
|
1. `npm create vite@latest football-admin -- --template react-ts`
|
||||||
|
2. Instalar dependências (ver `docs/02-tech-stack.md`)
|
||||||
|
3. Configurar Firebase (criar `.env.local` com as credenciais)
|
||||||
|
4. Implementar autenticação básica
|
||||||
|
5. Criar layout base (sidebar + header)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Log de Sessões
|
||||||
|
|
||||||
|
### Sessão 1 — [Data]
|
||||||
|
**O que foi feito:**
|
||||||
|
- [x] Planeamento completo do projeto
|
||||||
|
- [x] Documentação: project plan, tech stack, arquitetura, design system, features, handoff guide, progress tracker, firebase schema
|
||||||
|
- [x] Mockup interativo (HTML)
|
||||||
|
- [x] Criação do zip com toda a documentação
|
||||||
|
|
||||||
|
**Próxima sessão deve começar em:**
|
||||||
|
- Fase 1: Setup do projeto
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Checklist Detalhada
|
||||||
|
|
||||||
|
### Fase 1: Setup e Fundação
|
||||||
|
- [ ] Projeto Vite criado
|
||||||
|
- [ ] TypeScript configurado
|
||||||
|
- [ ] Firebase SDK instalado e configurado
|
||||||
|
- [ ] `.env.local` com credenciais Firebase
|
||||||
|
- [ ] React Router configurado
|
||||||
|
- [ ] Zustand store inicial (auth)
|
||||||
|
- [ ] Firebase Auth implementado
|
||||||
|
- [ ] Página de login
|
||||||
|
- [ ] Hook useAuth
|
||||||
|
- [ ] ProtectedRoute component
|
||||||
|
- [ ] Redirect lógica
|
||||||
|
- [ ] Layout base
|
||||||
|
- [ ] Sidebar component
|
||||||
|
- [ ] Header component
|
||||||
|
- [ ] Layout wrapper component
|
||||||
|
- [ ] Design tokens (CSS variables)
|
||||||
|
- [ ] Tailwind configurado com tema custom
|
||||||
|
- [ ] shadcn/ui configurado
|
||||||
|
- [ ] Rota `/dashboard` funcional (placeholder)
|
||||||
|
|
||||||
|
### Fase 2: Módulo de Jogos
|
||||||
|
- [ ] Firebase hook `useGames`
|
||||||
|
- [ ] Página `/games` — listagem
|
||||||
|
- [ ] Filtro por jornada
|
||||||
|
- [ ] Filtro por estado
|
||||||
|
- [ ] Game cards
|
||||||
|
- [ ] Formulário criar jogo (`/games/new`)
|
||||||
|
- [ ] Formulário editar jogo (`/games/:id/edit`)
|
||||||
|
- [ ] **Live Score Editor** (`/games/:id/live`) ⭐
|
||||||
|
- [ ] Layout do ecrã
|
||||||
|
- [ ] Cronómetro
|
||||||
|
- [ ] Botões de golo (casa e fora)
|
||||||
|
- [ ] Modal de golo (jogador + minuto + tipo)
|
||||||
|
- [ ] Modal de cartão
|
||||||
|
- [ ] Lista de eventos
|
||||||
|
- [ ] Botão intervalo
|
||||||
|
- [ ] Botão terminar jogo
|
||||||
|
- [ ] Firebase transaction para golo
|
||||||
|
- [ ] Recálculo automático de standings
|
||||||
|
- [ ] Optimistic updates
|
||||||
|
- [ ] Undo último evento (30s)
|
||||||
|
|
||||||
|
### Fase 3: Módulo de Gestão
|
||||||
|
- [ ] Firebase hook `useClubs`
|
||||||
|
- [ ] Página `/clubs` — listagem
|
||||||
|
- [ ] Formulário criar/editar clube
|
||||||
|
- [ ] Detalhe do clube (`/clubs/:id`)
|
||||||
|
- [ ] Firebase hook `usePlayers`
|
||||||
|
- [ ] Página `/players` — listagem + filtros
|
||||||
|
- [ ] Formulário criar/editar jogador
|
||||||
|
- [ ] Gestão de jornadas (`/rounds`)
|
||||||
|
- [ ] Classificação (`/standings`)
|
||||||
|
- [ ] Tabela completa
|
||||||
|
- [ ] Edição manual
|
||||||
|
- [ ] Recalcular manualmente
|
||||||
|
|
||||||
|
### Fase 4: Estatísticas
|
||||||
|
- [ ] Artilheiros (`/scorers`)
|
||||||
|
- [ ] Tabela de cartões
|
||||||
|
- [ ] Dashboard overview
|
||||||
|
- [ ] Widget jogo live
|
||||||
|
- [ ] Próximos jogos
|
||||||
|
- [ ] Últimos resultados
|
||||||
|
- [ ] Métricas rápidas
|
||||||
|
|
||||||
|
### Fase 5: Polish e Deploy
|
||||||
|
- [ ] Testes (hooks críticos)
|
||||||
|
- [ ] Error boundaries
|
||||||
|
- [ ] Loading states em todos os componentes
|
||||||
|
- [ ] Empty states em todas as listas
|
||||||
|
- [ ] Responsividade (tablet para Live Editor)
|
||||||
|
- [ ] Firebase Security Rules finais
|
||||||
|
- [ ] `firebase.json` configurado
|
||||||
|
- [ ] `npm run deploy` funcional
|
||||||
|
- [ ] Domínio configurado (se aplicável)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Problemas Conhecidos / Technical Debt
|
||||||
|
|
||||||
|
*Nenhum ainda — projeto em fase de planeamento*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Decisões Tomadas e Razões
|
||||||
|
|
||||||
|
| Decisão | Razão |
|
||||||
|
|---|---|
|
||||||
|
| Firebase como único backend | App cliente já usa Firebase; consistência |
|
||||||
|
| Dark theme como padrão | Usado durante jogos (ambientes escuros) |
|
||||||
|
| Optimistic updates no Live Editor | UX responsiva sem esperar pela Firebase |
|
||||||
|
| shadcn/ui em vez de Material/Chakra | Mais customizável, sem vendor lock-in |
|
||||||
|
| Zustand em vez de Redux | Menor complexidade para este tamanho |
|
||||||
340
docs/08-firebase-schema.md
Normal file
340
docs/08-firebase-schema.md
Normal file
@@ -0,0 +1,340 @@
|
|||||||
|
# 08 — Firebase Schema (Firestore)
|
||||||
|
|
||||||
|
> ⚠️ CRÍTICO: Este schema deve ser compatível com o que a app cliente já lê.
|
||||||
|
> Antes de desenvolver, confirmar com o utilizador se este schema corresponde ao que já existe na Firebase.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Coleções Principais
|
||||||
|
|
||||||
|
```
|
||||||
|
firestore/
|
||||||
|
├── users/ # Utilizadores admin
|
||||||
|
├── clubs/ # Clubes da liga
|
||||||
|
├── players/ # Jogadores
|
||||||
|
├── seasons/ # Temporadas
|
||||||
|
├── rounds/ # Jornadas
|
||||||
|
├── games/ # Jogos
|
||||||
|
│ └── {gameId}/
|
||||||
|
│ └── events/ # Eventos do jogo (subcollection)
|
||||||
|
└── standings/ # Classificação
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Schema Detalhado
|
||||||
|
|
||||||
|
### `users/{userId}`
|
||||||
|
```typescript
|
||||||
|
type User = {
|
||||||
|
uid: string; // Firebase Auth UID
|
||||||
|
email: string;
|
||||||
|
displayName: string;
|
||||||
|
role: "admin" | "viewer";
|
||||||
|
createdAt: Timestamp;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `clubs/{clubId}`
|
||||||
|
```typescript
|
||||||
|
type Club = {
|
||||||
|
id: string; // auto-generated
|
||||||
|
name: string; // "FC Porto"
|
||||||
|
shortName: string; // "FCP"
|
||||||
|
city: string; // "Porto"
|
||||||
|
stadium: string; // "Estádio do Dragão"
|
||||||
|
primaryColor: string; // "#004899" (hex)
|
||||||
|
secondaryColor: string; // "#FFFFFF" (hex)
|
||||||
|
crestUrl: string; // Firebase Storage URL
|
||||||
|
foundedYear: number; // 1893
|
||||||
|
active: boolean;
|
||||||
|
createdAt: Timestamp;
|
||||||
|
updatedAt: Timestamp;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `players/{playerId}`
|
||||||
|
```typescript
|
||||||
|
type Player = {
|
||||||
|
id: string;
|
||||||
|
clubId: string; // ref to clubs/{clubId}
|
||||||
|
name: string; // "Mehdi Taremi"
|
||||||
|
shortName: string; // "Taremi"
|
||||||
|
nationality: string; // "Iran"
|
||||||
|
dateOfBirth: Timestamp;
|
||||||
|
position: "GK" | "DEF" | "MID" | "FWD";
|
||||||
|
jerseyNumber: number;
|
||||||
|
photoUrl: string; // Firebase Storage URL
|
||||||
|
status: "active" | "injured" | "suspended" | "inactive";
|
||||||
|
|
||||||
|
// Estatísticas (atualizadas a cada evento)
|
||||||
|
stats: {
|
||||||
|
goals: number;
|
||||||
|
assists: number;
|
||||||
|
yellowCards: number;
|
||||||
|
redCards: number;
|
||||||
|
gamesPlayed: number;
|
||||||
|
minutesPlayed: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
createdAt: Timestamp;
|
||||||
|
updatedAt: Timestamp;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `seasons/{seasonId}`
|
||||||
|
```typescript
|
||||||
|
type Season = {
|
||||||
|
id: string;
|
||||||
|
name: string; // "2024/2025"
|
||||||
|
startDate: Timestamp;
|
||||||
|
endDate: Timestamp;
|
||||||
|
active: boolean; // apenas uma temporada ativa de cada vez
|
||||||
|
totalRounds: number; // 34
|
||||||
|
currentRound: number; // 15
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `rounds/{roundId}`
|
||||||
|
```typescript
|
||||||
|
type Round = {
|
||||||
|
id: string;
|
||||||
|
seasonId: string;
|
||||||
|
number: number; // 15
|
||||||
|
name: string; // "Jornada 15"
|
||||||
|
startDate: Timestamp;
|
||||||
|
endDate: Timestamp;
|
||||||
|
status: "upcoming" | "active" | "completed";
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `games/{gameId}`
|
||||||
|
```typescript
|
||||||
|
type Game = {
|
||||||
|
id: string;
|
||||||
|
seasonId: string;
|
||||||
|
roundId: string;
|
||||||
|
roundNumber: number; // desnormalizado para queries mais simples
|
||||||
|
|
||||||
|
homeClubId: string;
|
||||||
|
awayClubId: string;
|
||||||
|
|
||||||
|
// Desnormalizado para evitar joins no cliente
|
||||||
|
homeClubName: string;
|
||||||
|
awayClubName: string;
|
||||||
|
homeClubShortName: string;
|
||||||
|
awayClubShortName: string;
|
||||||
|
homeClubCrestUrl: string;
|
||||||
|
awayClubCrestUrl: string;
|
||||||
|
|
||||||
|
scheduledAt: Timestamp; // data e hora agendada
|
||||||
|
startedAt: Timestamp | null;
|
||||||
|
endedAt: Timestamp | null;
|
||||||
|
|
||||||
|
status: "scheduled" | "live" | "halftime" | "finished" | "postponed" | "cancelled";
|
||||||
|
|
||||||
|
score: {
|
||||||
|
home: number; // 0
|
||||||
|
away: number; // 0
|
||||||
|
};
|
||||||
|
|
||||||
|
currentMinute: number | null; // minuto atual do jogo (se live)
|
||||||
|
|
||||||
|
venue: string; // nome do estádio
|
||||||
|
|
||||||
|
createdAt: Timestamp;
|
||||||
|
updatedAt: Timestamp;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `games/{gameId}/events/{eventId}` (subcollection)
|
||||||
|
```typescript
|
||||||
|
type GameEvent = {
|
||||||
|
id: string;
|
||||||
|
gameId: string;
|
||||||
|
|
||||||
|
type: "goal" | "yellow_card" | "red_card" | "substitution" | "penalty_missed" | "own_goal";
|
||||||
|
|
||||||
|
minute: number; // 23
|
||||||
|
extraTime: number | null; // minutos de compensação (ex: 90+3 → minute:90, extraTime:3)
|
||||||
|
|
||||||
|
// Para golos e cartões
|
||||||
|
playerId: string | null;
|
||||||
|
playerName: string | null; // desnormalizado
|
||||||
|
clubId: string;
|
||||||
|
|
||||||
|
// Específico de golos
|
||||||
|
goalType: "normal" | "penalty" | "free_kick" | "header" | null;
|
||||||
|
assistPlayerId: string | null;
|
||||||
|
assistPlayerName: string | null;
|
||||||
|
|
||||||
|
// Específico de substituições
|
||||||
|
playerOutId: string | null;
|
||||||
|
playerInId: string | null;
|
||||||
|
playerOutName: string | null;
|
||||||
|
playerInName: string | null;
|
||||||
|
|
||||||
|
createdAt: Timestamp;
|
||||||
|
createdBy: string; // userId do admin que registou
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `standings/{seasonId}`
|
||||||
|
```typescript
|
||||||
|
type Standings = {
|
||||||
|
seasonId: string;
|
||||||
|
updatedAt: Timestamp;
|
||||||
|
|
||||||
|
table: StandingsEntry[]; // ordenado por pontos
|
||||||
|
}
|
||||||
|
|
||||||
|
type StandingsEntry = {
|
||||||
|
position: number;
|
||||||
|
clubId: string;
|
||||||
|
clubName: string; // desnormalizado
|
||||||
|
clubShortName: string;
|
||||||
|
clubCrestUrl: string;
|
||||||
|
|
||||||
|
played: number;
|
||||||
|
won: number;
|
||||||
|
drawn: number;
|
||||||
|
lost: number;
|
||||||
|
goalsFor: number;
|
||||||
|
goalsAgainst: number;
|
||||||
|
goalDifference: number; // calculado: goalsFor - goalsAgainst
|
||||||
|
points: number; // calculado: won*3 + drawn*1
|
||||||
|
|
||||||
|
// Últimos 5 jogos (para a app cliente mostrar forma)
|
||||||
|
form: ("W" | "D" | "L")[]; // ["W", "W", "D", "L", "W"]
|
||||||
|
|
||||||
|
// Override manual (admin pode forçar um valor)
|
||||||
|
manualOverride: boolean;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Queries Mais Usadas
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Jogos de uma jornada
|
||||||
|
query(collection(db, "games"),
|
||||||
|
where("roundId", "==", roundId),
|
||||||
|
orderBy("scheduledAt")
|
||||||
|
)
|
||||||
|
|
||||||
|
// Jogo live atual
|
||||||
|
query(collection(db, "games"),
|
||||||
|
where("status", "==", "live"),
|
||||||
|
limit(1)
|
||||||
|
)
|
||||||
|
|
||||||
|
// Eventos de um jogo (ordenados)
|
||||||
|
query(collection(db, "games", gameId, "events"),
|
||||||
|
orderBy("minute"),
|
||||||
|
orderBy("createdAt")
|
||||||
|
)
|
||||||
|
|
||||||
|
// Jogadores de um clube
|
||||||
|
query(collection(db, "players"),
|
||||||
|
where("clubId", "==", clubId),
|
||||||
|
where("status", "==", "active"),
|
||||||
|
orderBy("jerseyNumber")
|
||||||
|
)
|
||||||
|
|
||||||
|
// Top artilheiros
|
||||||
|
query(collection(db, "players"),
|
||||||
|
orderBy("stats.goals", "desc"),
|
||||||
|
limit(20)
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Índices Firestore Necessários
|
||||||
|
|
||||||
|
```
|
||||||
|
// firestore.indexes.json
|
||||||
|
{
|
||||||
|
"indexes": [
|
||||||
|
{
|
||||||
|
"collectionGroup": "games",
|
||||||
|
"queryScope": "COLLECTION",
|
||||||
|
"fields": [
|
||||||
|
{ "fieldPath": "roundId", "order": "ASCENDING" },
|
||||||
|
{ "fieldPath": "scheduledAt", "order": "ASCENDING" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"collectionGroup": "players",
|
||||||
|
"queryScope": "COLLECTION",
|
||||||
|
"fields": [
|
||||||
|
{ "fieldPath": "clubId", "order": "ASCENDING" },
|
||||||
|
{ "fieldPath": "stats.goals", "order": "DESCENDING" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"collectionGroup": "players",
|
||||||
|
"queryScope": "COLLECTION",
|
||||||
|
"fields": [
|
||||||
|
{ "fieldPath": "clubId", "order": "ASCENDING" },
|
||||||
|
{ "fieldPath": "jerseyNumber", "order": "ASCENDING" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Algoritmo de Recálculo de Standings
|
||||||
|
|
||||||
|
Chamado após cada jogo finalizado ou manualmente:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
async function recalculateStandings(seasonId: string, db: Firestore) {
|
||||||
|
// 1. Buscar todos os jogos terminados da temporada
|
||||||
|
const games = await getDocs(query(
|
||||||
|
collection(db, "games"),
|
||||||
|
where("seasonId", "==", seasonId),
|
||||||
|
where("status", "==", "finished")
|
||||||
|
))
|
||||||
|
|
||||||
|
// 2. Inicializar stats por clube
|
||||||
|
const stats: Record<string, StandingsEntry> = {}
|
||||||
|
|
||||||
|
// 3. Iterar todos os jogos e acumular stats
|
||||||
|
for (const game of games.docs) {
|
||||||
|
const { homeClubId, awayClubId, score } = game.data()
|
||||||
|
// ... calcular vitória/empate/derrota, golos, etc.
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Ordenar: pontos DESC, goalDifference DESC, goalsFor DESC
|
||||||
|
const table = Object.values(stats).sort((a, b) =>
|
||||||
|
b.points - a.points ||
|
||||||
|
b.goalDifference - a.goalDifference ||
|
||||||
|
b.goalsFor - a.goalsFor
|
||||||
|
).map((entry, i) => ({ ...entry, position: i + 1 }))
|
||||||
|
|
||||||
|
// 5. Atualizar documento de standings
|
||||||
|
await setDoc(doc(db, "standings", seasonId), {
|
||||||
|
seasonId,
|
||||||
|
table,
|
||||||
|
updatedAt: serverTimestamp()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
22
eslint.config.js
Normal file
22
eslint.config.js
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>VdcScore Live Editor</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1632
mockup/index.html
Normal file
1632
mockup/index.html
Normal file
File diff suppressed because it is too large
Load Diff
4854
package-lock.json
generated
Normal file
4854
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
44
package.json
Normal file
44
package.json
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
{
|
||||||
|
"name": "init-vite",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@hookform/resolvers": "^5.2.2",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"date-fns": "^4.1.0",
|
||||||
|
"firebase": "^12.12.1",
|
||||||
|
"lucide-react": "^1.14.0",
|
||||||
|
"react": "^19.2.5",
|
||||||
|
"react-dom": "^19.2.5",
|
||||||
|
"react-hook-form": "^7.75.0",
|
||||||
|
"react-router-dom": "^7.15.0",
|
||||||
|
"sonner": "^2.0.7",
|
||||||
|
"tailwind-merge": "^3.5.0",
|
||||||
|
"zod": "^4.4.3",
|
||||||
|
"zustand": "^5.0.13"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^10.0.1",
|
||||||
|
"@types/node": "^24.12.2",
|
||||||
|
"@types/react": "^19.2.14",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
|
"autoprefixer": "^10.5.0",
|
||||||
|
"eslint": "^10.2.1",
|
||||||
|
"eslint-plugin-react-hooks": "^7.1.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.5.2",
|
||||||
|
"globals": "^17.5.0",
|
||||||
|
"postcss": "^8.5.14",
|
||||||
|
"tailwindcss": "^3.4.19",
|
||||||
|
"typescript": "~6.0.2",
|
||||||
|
"typescript-eslint": "^8.58.2",
|
||||||
|
"vite": "^8.0.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
public/icons.svg
Normal file
24
public/icons.svg
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
184
src/App.css
Normal file
184
src/App.css
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
.counter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.base,
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
inset-inline: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
width: 170px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework {
|
||||||
|
z-index: 1;
|
||||||
|
top: 34px;
|
||||||
|
height: 28px;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||||
|
scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vite {
|
||||||
|
z-index: 0;
|
||||||
|
top: 107px;
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||||
|
scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 32px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 32px 0 0;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-h);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--social-bg);
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.button-icon {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
flex: 1 1 calc(50% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer {
|
||||||
|
height: 88px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticks {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4.5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
39
src/App.tsx
Normal file
39
src/App.tsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||||
|
import Layout from './components/layout/Layout';
|
||||||
|
import Dashboard from './pages/Dashboard';
|
||||||
|
import Clubs from './pages/Clubs';
|
||||||
|
import Standings from './pages/Standings';
|
||||||
|
import Games from './pages/Games';
|
||||||
|
import LiveEditor from './pages/LiveEditor';
|
||||||
|
import LiveGames from './pages/LiveGames';
|
||||||
|
|
||||||
|
// Placeholder components for other pages
|
||||||
|
const Placeholder = ({ title }: { title: string }) => (
|
||||||
|
<div className="p-20 text-center text-text-muted border border-dashed border-border rounded-2xl">
|
||||||
|
<h2 className="text-2xl uppercase">{title}</h2>
|
||||||
|
<p>Esta funcionalidade será implementada brevemente.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Layout />}>
|
||||||
|
<Route index element={<Dashboard />} />
|
||||||
|
<Route path="games" element={<Games />} />
|
||||||
|
<Route path="games/live" element={<LiveGames />} />
|
||||||
|
<Route path="games/live-editor/:escalao/:jornada/:matchId" element={<LiveEditor />} />
|
||||||
|
<Route path="standings" element={<Standings />} />
|
||||||
|
<Route path="clubs" element={<Clubs />} />
|
||||||
|
<Route path="players" element={<Placeholder title="Jogadores" />} />
|
||||||
|
<Route path="scorers" element={<Placeholder title="Artilheiros" />} />
|
||||||
|
<Route path="news" element={<Placeholder title="Notícias" />} />
|
||||||
|
<Route path="settings" element={<Placeholder title="Definições" />} />
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
1
src/assets/vite.svg
Normal file
1
src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
66
src/components/clubs/ClubCard.tsx
Normal file
66
src/components/clubs/ClubCard.tsx
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { Club } from '../../types/database';
|
||||||
|
import { MapPin, Trophy } from 'lucide-react';
|
||||||
|
|
||||||
|
interface ClubCardProps {
|
||||||
|
club: Club;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ClubCard: React.FC<ClubCardProps> = ({ club }) => {
|
||||||
|
return (
|
||||||
|
<div className="card group">
|
||||||
|
<div className="h-24 bg-bg-elevated relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-brand-primary/10 to-transparent"></div>
|
||||||
|
<div className="absolute -bottom-6 -right-6 opacity-10 group-hover:scale-110 transition-transform duration-500">
|
||||||
|
<Trophy size={80} className="text-brand-primary" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 pt-0 -mt-10 relative z-10 flex flex-col items-center text-center">
|
||||||
|
<div className="w-20 h-20 bg-bg-surface rounded-xl border-4 border-bg-base overflow-hidden flex items-center justify-center p-2 shadow-xl mb-4 group-hover:border-brand-primary/50 transition-colors">
|
||||||
|
{club.imagem ? (
|
||||||
|
<img
|
||||||
|
src={club.imagem}
|
||||||
|
alt={club.nome}
|
||||||
|
className="w-full h-full object-contain"
|
||||||
|
onError={(e) => {
|
||||||
|
(e.target as HTMLImageElement).src = 'https://via.placeholder.com/150?text=Logo';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Trophy className="text-text-muted" size={32} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-xl mb-1 group-hover:text-brand-primary transition-colors">{club.nome}</h3>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1.5 text-text-secondary text-sm mb-4">
|
||||||
|
<MapPin size={14} className="text-brand-accent" />
|
||||||
|
<span>{club.campo || 'Estádio não definido'}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4 w-full border-t border-border mt-4 pt-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-text-muted uppercase font-bold tracking-widest">Fundação</p>
|
||||||
|
<p className="text-sm font-mono">{club.ano_fundacao || '---'}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-text-muted uppercase font-bold tracking-widest">Presidente</p>
|
||||||
|
<p className="text-sm truncate w-full" title={club.presidente}>{club.presidente || '---'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 bg-bg-overlay/30 flex gap-2">
|
||||||
|
<button className="flex-1 bg-bg-elevated hover:bg-bg-overlay text-xs font-bold py-2 rounded transition-colors border border-border">
|
||||||
|
DETALHES
|
||||||
|
</button>
|
||||||
|
<button className="flex-1 bg-brand-primary/10 hover:bg-brand-primary/20 text-brand-primary text-xs font-bold py-2 rounded transition-colors border border-brand-primary/20">
|
||||||
|
EDITAR
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ClubCard;
|
||||||
88
src/components/games/GameCard.tsx
Normal file
88
src/components/games/GameCard.tsx
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { Match } from '../../types/database';
|
||||||
|
import { Calendar, Clock, MapPin, Zap } from 'lucide-react';
|
||||||
|
|
||||||
|
interface GameCardProps {
|
||||||
|
match: Match;
|
||||||
|
}
|
||||||
|
|
||||||
|
const GameCard: React.FC<GameCardProps> = ({ match }) => {
|
||||||
|
// Nota: Precisamos confirmar se existe um campo "status" ou "isLive" na Firebase
|
||||||
|
const isLive = !match.played && (match as any).isLive;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`card overflow-hidden ${isLive ? 'border-brand-primary border-2' : ''}`}>
|
||||||
|
<div className="bg-bg-elevated px-4 py-2 flex justify-between items-center border-b border-border">
|
||||||
|
<div className="flex items-center gap-2 text-text-secondary">
|
||||||
|
<Calendar size={14} />
|
||||||
|
<span className="text-xs font-mono">{match.data}</span>
|
||||||
|
</div>
|
||||||
|
{isLive ? (
|
||||||
|
<div className="flex items-center gap-1.5 bg-brand-primary/10 px-2 py-0.5 rounded-full">
|
||||||
|
<span className="w-1.5 h-1.5 bg-brand-primary rounded-full animate-pulse"></span>
|
||||||
|
<span className="text-[10px] font-bold text-brand-primary uppercase tracking-tighter">LIVE</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<span className={`status-badge ${match.played ? 'bg-brand-accent/20 text-brand-accent' : 'bg-text-muted/20 text-text-muted'}`}>
|
||||||
|
{match.played ? 'Terminado' : 'Agendado'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex items-center justify-between gap-4">
|
||||||
|
{/* Home Team */}
|
||||||
|
<div className="flex-1 flex flex-col items-center text-center gap-2">
|
||||||
|
<img src={match.logo_casa} alt="" className="w-12 h-12 object-contain" />
|
||||||
|
<span className="text-sm font-semibold truncate w-full">{match.home_nome}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Score */}
|
||||||
|
<div className="flex flex-col items-center gap-1">
|
||||||
|
<div className="font-display text-4xl tracking-tighter flex items-center gap-3">
|
||||||
|
<span className={match.played || isLive ? 'text-text-primary' : 'text-text-muted'}>
|
||||||
|
{match.home_golos ?? 0}
|
||||||
|
</span>
|
||||||
|
<span className="text-text-muted opacity-30 text-2xl">—</span>
|
||||||
|
<span className={match.played || isLive ? 'text-text-primary' : 'text-text-muted'}>
|
||||||
|
{match.away_golos ?? 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{isLive && <span className="text-[10px] font-mono text-brand-primary animate-pulse">75'</span>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Away Team */}
|
||||||
|
<div className="flex-1 flex flex-col items-center text-center gap-2">
|
||||||
|
<img src={match.logo_fora} alt="" className="w-12 h-12 object-contain" />
|
||||||
|
<span className="text-sm font-semibold truncate w-full">{match.away_nome}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 flex items-center justify-center gap-4 text-text-secondary text-xs">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Clock size={12} />
|
||||||
|
<span>{match.hora}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<MapPin size={12} />
|
||||||
|
<span className="truncate max-w-[100px]">{match.campo || 'N/D'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-bg-overlay/20 flex gap-2">
|
||||||
|
<button className="flex-1 bg-bg-elevated hover:bg-bg-overlay text-[10px] font-bold py-2 rounded transition-colors border border-border uppercase">
|
||||||
|
Ver Detalhes
|
||||||
|
</button>
|
||||||
|
{!match.played && (
|
||||||
|
<button className="flex-1 bg-brand-primary hover:bg-green-600 text-bg-base text-[10px] font-bold py-2 rounded transition-all uppercase flex items-center justify-center gap-1">
|
||||||
|
<Zap size={12} fill="currentColor" />
|
||||||
|
<span>Live Editor</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GameCard;
|
||||||
43
src/components/layout/Header.tsx
Normal file
43
src/components/layout/Header.tsx
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Bell, Search, User as UserIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
return (
|
||||||
|
<header className="h-16 border-b border-border bg-bg-surface/50 backdrop-blur-md sticky top-0 z-10 flex items-center justify-between px-8">
|
||||||
|
<div className="flex items-center gap-4 flex-1">
|
||||||
|
<div className="relative max-w-md w-full group">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted group-focus-within:text-brand-primary transition-colors" size={18} />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Pesquisar..."
|
||||||
|
className="w-full bg-bg-base border border-border rounded-full py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-brand-primary transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-brand-primary animate-pulse"></div>
|
||||||
|
<span className="text-xs font-semibold text-brand-primary uppercase tracking-widest">Sistema Online</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="text-text-secondary hover:text-text-primary transition-colors relative">
|
||||||
|
<Bell size={20} />
|
||||||
|
<span className="absolute -top-1 -right-1 w-2 h-2 bg-brand-danger rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 pl-6 border-l border-border">
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-sm font-semibold">Admin</p>
|
||||||
|
<p className="text-xs text-text-secondary">Administrador</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-10 h-10 rounded-full bg-bg-elevated border border-border flex items-center justify-center text-brand-primary">
|
||||||
|
<UserIcon size={20} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
29
src/components/layout/Layout.tsx
Normal file
29
src/components/layout/Layout.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import Sidebar from './Sidebar';
|
||||||
|
import Header from './Header';
|
||||||
|
import { Toaster } from 'sonner';
|
||||||
|
|
||||||
|
const Layout = () => {
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen bg-bg-base text-text-primary">
|
||||||
|
<Sidebar />
|
||||||
|
<div className="flex-1 flex flex-col min-w-0">
|
||||||
|
<Header />
|
||||||
|
<main className="flex-1 p-8 overflow-auto">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<Toaster
|
||||||
|
theme="dark"
|
||||||
|
position="top-right"
|
||||||
|
toastOptions={{
|
||||||
|
style: { background: '#1a2235', borderColor: '#1e2d45', color: '#f9fafb' }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
70
src/components/layout/Sidebar.tsx
Normal file
70
src/components/layout/Sidebar.tsx
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { NavLink } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
|
Trophy,
|
||||||
|
Users,
|
||||||
|
User,
|
||||||
|
Calendar,
|
||||||
|
BarChart,
|
||||||
|
Settings,
|
||||||
|
LogOut,
|
||||||
|
Zap
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
const Sidebar = () => {
|
||||||
|
const menuItems = [
|
||||||
|
{ icon: LayoutDashboard, label: 'Dashboard', path: '/' },
|
||||||
|
{ icon: Zap, label: 'Jogos Live', path: '/games/live' },
|
||||||
|
{ icon: Calendar, label: 'Jornadas', path: '/games' },
|
||||||
|
{ icon: Trophy, label: 'Classificação', path: '/standings' },
|
||||||
|
{ icon: Users, label: 'Clubes', path: '/clubs' },
|
||||||
|
{ icon: User, label: 'Jogadores', path: '/players' },
|
||||||
|
{ icon: BarChart, label: 'Artilheiros', path: '/scorers' },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="w-60 bg-bg-surface border-r border-border flex flex-col h-screen sticky top-0">
|
||||||
|
<div className="p-6 flex items-center gap-3 border-b border-border">
|
||||||
|
<div className="bg-brand-primary p-2 rounded-lg">
|
||||||
|
<Zap className="text-bg-base fill-bg-base" size={24} />
|
||||||
|
</div>
|
||||||
|
<span className="font-display text-2xl tracking-wider">⚽ ADM</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="flex-1 py-6 px-3 space-y-1">
|
||||||
|
{menuItems.map((item) => (
|
||||||
|
<NavLink
|
||||||
|
key={item.path}
|
||||||
|
to={item.path}
|
||||||
|
className={({ isActive }) => `
|
||||||
|
flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 group
|
||||||
|
${isActive
|
||||||
|
? 'bg-brand-primary/10 text-brand-primary border-l-4 border-brand-primary rounded-l-none'
|
||||||
|
: 'text-text-secondary hover:bg-bg-overlay hover:text-text-primary'}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<item.icon size={20} className="shrink-0" />
|
||||||
|
<span className="font-medium text-sm">{item.label}</span>
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="p-4 border-t border-border space-y-1">
|
||||||
|
<NavLink
|
||||||
|
to="/settings"
|
||||||
|
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-bg-overlay hover:text-text-primary transition-all"
|
||||||
|
>
|
||||||
|
<Settings size={20} />
|
||||||
|
<span className="font-medium text-sm">Definições</span>
|
||||||
|
</NavLink>
|
||||||
|
<button className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-brand-danger hover:bg-brand-danger/10 transition-all">
|
||||||
|
<LogOut size={20} />
|
||||||
|
<span className="font-medium text-sm">Sair</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
38
src/hooks/useClubs.ts
Normal file
38
src/hooks/useClubs.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { ref, onValue, off } from 'firebase/database';
|
||||||
|
import { db } from '../lib/firebase';
|
||||||
|
import type { Club } from '../types/database';
|
||||||
|
|
||||||
|
export function useClubs() {
|
||||||
|
const [clubs, setClubs] = useState<Club[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const clubsRef = ref(db, 'clubes');
|
||||||
|
|
||||||
|
const unsubscribe = onValue(clubsRef, (snapshot) => {
|
||||||
|
const data = snapshot.val();
|
||||||
|
if (data) {
|
||||||
|
// Se os dados forem um objeto, transformamos em array
|
||||||
|
const clubsList: Club[] = Object.entries(data).map(([key, value]: [string, any]) => ({
|
||||||
|
...value,
|
||||||
|
// Se o id não estiver no objeto, usamos a key
|
||||||
|
id: value.id !== undefined ? value.id : (isNaN(Number(key)) ? key : Number(key))
|
||||||
|
}));
|
||||||
|
setClubs(clubsList);
|
||||||
|
} else {
|
||||||
|
setClubs([]);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}, (err) => {
|
||||||
|
console.error("Erro ao carregar clubes:", err);
|
||||||
|
setError(err);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => unsubscribe();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return { clubs, loading, error };
|
||||||
|
}
|
||||||
50
src/hooks/useGames.ts
Normal file
50
src/hooks/useGames.ts
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { ref, onValue } from 'firebase/database';
|
||||||
|
import { db } from '../lib/firebase';
|
||||||
|
import { Match, Escalao } from '../types/database';
|
||||||
|
|
||||||
|
export function useGames(escalao: Escalao, jornadaId?: string) {
|
||||||
|
const [matches, setMatches] = useState<Match[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// O caminho detetado no Android: jornadas/{escalao}/{num_jornada}
|
||||||
|
const path = jornadaId
|
||||||
|
? `jornadas/${escalao}/${jornadaId}`
|
||||||
|
: `jornadas/${escalao}`;
|
||||||
|
|
||||||
|
const gamesRef = ref(db, path);
|
||||||
|
|
||||||
|
const unsubscribe = onValue(gamesRef, (snapshot) => {
|
||||||
|
const data = snapshot.val();
|
||||||
|
const loadedMatches: Match[] = [];
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
if (jornadaId) {
|
||||||
|
// Se pedimos uma jornada específica
|
||||||
|
Object.entries(data).forEach(([key, value]: [string, any]) => {
|
||||||
|
loadedMatches.push({ ...value, id: key });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Se pedimos todas (para histórico/overview)
|
||||||
|
Object.entries(data).forEach(([jornadaKey, jornadaData]: [string, any]) => {
|
||||||
|
Object.entries(jornadaData).forEach(([matchKey, matchData]: [string, any]) => {
|
||||||
|
loadedMatches.push({ ...matchData, id: matchKey, jornadaId: jornadaKey });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setMatches(loadedMatches);
|
||||||
|
setLoading(false);
|
||||||
|
}, (err) => {
|
||||||
|
setError(err);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => unsubscribe();
|
||||||
|
}, [escalao, jornadaId]);
|
||||||
|
|
||||||
|
return { matches, loading, error };
|
||||||
|
}
|
||||||
38
src/hooks/useMatches.ts
Normal file
38
src/hooks/useMatches.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { ref, onValue } from 'firebase/database';
|
||||||
|
import { db } from '../lib/firebase';
|
||||||
|
import type { Match, Escalao } from '../types/database';
|
||||||
|
|
||||||
|
export function useMatches(escalao: Escalao, jornada: number) {
|
||||||
|
const [matches, setMatches] = useState<Match[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Referência para jornadas/[escalao]/[numero_jornada]
|
||||||
|
const matchesRef = ref(db, `jornadas/${escalao}/${jornada}`);
|
||||||
|
|
||||||
|
const unsubscribe = onValue(matchesRef, (snapshot) => {
|
||||||
|
const data = snapshot.val();
|
||||||
|
if (data) {
|
||||||
|
// Converte o objeto { "id": matchData } num array de Match
|
||||||
|
const matchesList: Match[] = Object.entries(data).map(([id, matchData]: [string, any]) => ({
|
||||||
|
id,
|
||||||
|
...matchData,
|
||||||
|
jornadaId: jornada.toString()
|
||||||
|
}));
|
||||||
|
setMatches(matchesList);
|
||||||
|
} else {
|
||||||
|
setMatches([]);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}, (err) => {
|
||||||
|
setError(err);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => unsubscribe();
|
||||||
|
}, [escalao, jornada]);
|
||||||
|
|
||||||
|
return { matches, loading, error };
|
||||||
|
}
|
||||||
32
src/hooks/useStandings.ts
Normal file
32
src/hooks/useStandings.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { ref, onValue } from 'firebase/database';
|
||||||
|
import { db } from '../lib/firebase';
|
||||||
|
import type { StandingItem, Escalao } from '../types/database';
|
||||||
|
|
||||||
|
export function useStandings(escalao: Escalao) {
|
||||||
|
const [standings, setStandings] = useState<StandingItem[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const standingsRef = ref(db, `classificacoes/${escalao}`);
|
||||||
|
|
||||||
|
const unsubscribe = onValue(standingsRef, (snapshot) => {
|
||||||
|
const data = snapshot.val();
|
||||||
|
if (data) {
|
||||||
|
// Os dados já vêm como array no JSON fornecido
|
||||||
|
setStandings(Array.isArray(data) ? data : Object.values(data));
|
||||||
|
} else {
|
||||||
|
setStandings([]);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}, (err) => {
|
||||||
|
setError(err);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => unsubscribe();
|
||||||
|
}, [escalao]);
|
||||||
|
|
||||||
|
return { standings, loading, error };
|
||||||
|
}
|
||||||
49
src/index.css
Normal file
49
src/index.css
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||||
|
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--bg-base: #0a0e1a;
|
||||||
|
--bg-surface: #111827;
|
||||||
|
--bg-elevated: #1a2235;
|
||||||
|
--bg-overlay: #243047;
|
||||||
|
|
||||||
|
--brand-primary: #22c55e;
|
||||||
|
--brand-accent: #3b82f6;
|
||||||
|
--brand-danger: #ef4444;
|
||||||
|
--brand-warning: #f59e0b;
|
||||||
|
|
||||||
|
--text-primary: #f9fafb;
|
||||||
|
--text-secondary: #9ca3af;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
|
||||||
|
--border: #1e2d45;
|
||||||
|
--border-active: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-bg-base text-text-primary font-body antialiased;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
@apply font-display tracking-wide;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.btn-primary {
|
||||||
|
@apply bg-brand-primary hover:bg-green-600 text-bg-base font-semibold py-2 px-4 rounded transition-all active:scale-95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
@apply bg-bg-surface border border-border rounded-lg overflow-hidden shadow-lg hover:border-border-active transition-colors duration-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge {
|
||||||
|
@apply px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wider;
|
||||||
|
}
|
||||||
|
}
|
||||||
24
src/lib/firebase.ts
Normal file
24
src/lib/firebase.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { initializeApp } from "firebase/app";
|
||||||
|
import { getDatabase } from "firebase/database";
|
||||||
|
import { getAuth } from "firebase/auth";
|
||||||
|
import { getStorage } from "firebase/storage";
|
||||||
|
|
||||||
|
const firebaseConfig = {
|
||||||
|
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
|
||||||
|
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
|
||||||
|
databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
|
||||||
|
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
|
||||||
|
storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
|
||||||
|
messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
|
||||||
|
appId: import.meta.env.VITE_FIREBASE_APP_ID
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize Firebase
|
||||||
|
const app = initializeApp(firebaseConfig);
|
||||||
|
|
||||||
|
// Initialize Services
|
||||||
|
export const db = getDatabase(app);
|
||||||
|
export const auth = getAuth(app);
|
||||||
|
export const storage = getStorage(app);
|
||||||
|
|
||||||
|
export default app;
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
69
src/pages/Clubs.tsx
Normal file
69
src/pages/Clubs.tsx
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useClubs } from '../hooks/useClubs';
|
||||||
|
import ClubCard from '../components/clubs/ClubCard';
|
||||||
|
import { Search, Loader2, Plus } from 'lucide-react';
|
||||||
|
|
||||||
|
const Clubs = () => {
|
||||||
|
const { clubs, loading, error } = useClubs();
|
||||||
|
const [searchTerm, setSearchTerm] = React.useState('');
|
||||||
|
|
||||||
|
const filteredClubs = clubs.filter(club =>
|
||||||
|
club.nome.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-4xl">CLUBES</h1>
|
||||||
|
<p className="text-text-secondary mt-1">Gestão de equipas participantes na liga.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="btn-primary flex items-center gap-2 self-start">
|
||||||
|
<Plus size={20} />
|
||||||
|
<span>Novo Clube</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 bg-bg-surface p-4 rounded-xl border border-border">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" size={18} />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Pesquisar por nome do clube..."
|
||||||
|
className="w-full bg-bg-base border border-border rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:border-brand-primary transition-all"
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-text-secondary">
|
||||||
|
Total: <span className="text-text-primary font-mono">{clubs.length}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-64 text-brand-primary">
|
||||||
|
<Loader2 className="animate-spin mb-4" size={48} />
|
||||||
|
<p className="text-text-secondary font-medium">A carregar clubes da Firebase...</p>
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="bg-brand-danger/10 border border-brand-danger/20 p-6 rounded-xl text-center">
|
||||||
|
<p className="text-brand-danger font-semibold">Erro ao carregar dados!</p>
|
||||||
|
<p className="text-text-secondary text-sm mt-1">{error.message}</p>
|
||||||
|
</div>
|
||||||
|
) : filteredClubs.length === 0 ? (
|
||||||
|
<div className="text-center py-20 bg-bg-surface rounded-xl border border-dashed border-border">
|
||||||
|
<p className="text-text-muted">Nenhum clube encontrado.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||||
|
{filteredClubs.map((club) => (
|
||||||
|
<ClubCard key={club.id} club={club} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Clubs;
|
||||||
159
src/pages/Dashboard.tsx
Normal file
159
src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { ref, onValue } from 'firebase/database';
|
||||||
|
import { db } from '../lib/firebase';
|
||||||
|
import {
|
||||||
|
Users,
|
||||||
|
Zap,
|
||||||
|
Calendar,
|
||||||
|
TrendingUp,
|
||||||
|
ArrowUpRight,
|
||||||
|
Loader2
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Dashboard = () => {
|
||||||
|
const [stats, setStats] = useState({
|
||||||
|
clubs: 0,
|
||||||
|
liveGames: 0,
|
||||||
|
upcoming: 0
|
||||||
|
});
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const dbRef = ref(db);
|
||||||
|
const unsubscribe = onValue(dbRef, (snapshot) => {
|
||||||
|
const data = snapshot.val();
|
||||||
|
if (data) {
|
||||||
|
let clubsCount = 0;
|
||||||
|
let liveCount = 0;
|
||||||
|
let upcomingCount = 0;
|
||||||
|
|
||||||
|
if (data.clubes) {
|
||||||
|
clubsCount = Object.keys(data.clubes).length - (data.clubes[0] === null ? 1 : 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.jornadas) {
|
||||||
|
Object.values(data.jornadas).forEach((escalao: any) => {
|
||||||
|
if (Array.isArray(escalao)) {
|
||||||
|
escalao.forEach((jornada: any) => {
|
||||||
|
if (jornada) {
|
||||||
|
Object.values(jornada).forEach((match: any) => {
|
||||||
|
if (match.isLive) liveCount++;
|
||||||
|
if (!match.played && !match.isLive) upcomingCount++;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setStats({
|
||||||
|
clubs: clubsCount,
|
||||||
|
liveGames: liveCount,
|
||||||
|
upcoming: upcomingCount
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => unsubscribe();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center h-96 text-brand-primary">
|
||||||
|
<Loader2 className="animate-spin mb-4" size={48} />
|
||||||
|
<p className="text-text-secondary">A carregar estatísticas...</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8 animate-in fade-in duration-700">
|
||||||
|
<header>
|
||||||
|
<h1 className="text-4xl font-display font-black uppercase tracking-tight">Painel de Controlo</h1>
|
||||||
|
<p className="text-text-secondary mt-1">Bem-vindo ao VdcScore Live Score Admin.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<StatCard
|
||||||
|
icon={Users}
|
||||||
|
label="Clubes Ativos"
|
||||||
|
value={stats.clubs.toString()}
|
||||||
|
color="text-brand-primary"
|
||||||
|
link="/clubs"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
icon={Zap}
|
||||||
|
label="Jogos em Direto"
|
||||||
|
value={stats.liveGames.toString()}
|
||||||
|
color="text-brand-primary"
|
||||||
|
link="/games/live"
|
||||||
|
isLive={stats.liveGames > 0}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
icon={Calendar}
|
||||||
|
label="Próximos Jogos"
|
||||||
|
value={stats.upcoming.toString()}
|
||||||
|
color="text-text-primary"
|
||||||
|
link="/games"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
<div className="card p-8 space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="text-xl font-bold uppercase flex items-center gap-2">
|
||||||
|
<TrendingUp size={20} className="text-brand-primary" />
|
||||||
|
Atividade Recente
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<ActivityItem text="Nova classificação atualizada para Juniores" time="Há 2 horas" />
|
||||||
|
<ActivityItem text="Bagunte F.C. atualizou o plantel" time="Há 5 horas" />
|
||||||
|
<ActivityItem text="Resultados da 12ª Jornada validados" time="Há 1 dia" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card p-8 bg-brand-primary/5 border-brand-primary/20 flex flex-col justify-between">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-2xl font-display font-black uppercase leading-none">Pronto para o Direto?</h3>
|
||||||
|
<p className="text-text-secondary">Podes iniciar um acompanhamento em tempo real de qualquer jogo das jornadas. Os utilizadores da app receberão as notificações instantaneamente.</p>
|
||||||
|
</div>
|
||||||
|
<Link to="/games" className="btn btn-primary mt-8 flex items-center justify-center gap-2">
|
||||||
|
GERIR JORNADAS <ArrowUpRight size={18} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const StatCard = ({ icon: Icon, label, value, color, link, isLive }: any) => (
|
||||||
|
<Link to={link} className="card p-6 group hover:scale-[1.02] transition-all">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className={`p-3 rounded-xl bg-bg-elevated group-hover:bg-brand-primary/10 transition-colors ${color}`}>
|
||||||
|
<Icon size={24} />
|
||||||
|
</div>
|
||||||
|
{isLive && (
|
||||||
|
<span className="flex h-3 w-3 relative">
|
||||||
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-primary opacity-75"></span>
|
||||||
|
<span className="relative inline-flex rounded-full h-3 w-3 bg-brand-primary"></span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="mt-6">
|
||||||
|
<p className="text-text-muted text-sm font-medium uppercase tracking-wider">{label}</p>
|
||||||
|
<h4 className="text-4xl font-display font-black mt-1">{value}</h4>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ActivityItem = ({ text, time }: { text: string, time: string }) => (
|
||||||
|
<div className="flex items-center justify-between p-3 rounded-lg bg-bg-overlay/50 border border-border/50">
|
||||||
|
<span className="text-sm font-medium">{text}</span>
|
||||||
|
<span className="text-[10px] uppercase text-text-muted font-bold">{time}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Dashboard;
|
||||||
154
src/pages/Games.tsx
Normal file
154
src/pages/Games.tsx
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useMatches } from '../hooks/useMatches';
|
||||||
|
import type { Escalao, Match } from '../types/database';
|
||||||
|
import { Loader2, Calendar, MapPin, Clock, ChevronLeft, ChevronRight, Zap } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Games = () => {
|
||||||
|
const [escalao, setEscalao] = useState<Escalao>('seniores');
|
||||||
|
const [jornada, setJornada] = useState(1);
|
||||||
|
const { matches, loading, error } = useMatches(escalao, jornada);
|
||||||
|
|
||||||
|
const nextJornada = () => setJornada(prev => prev + 1);
|
||||||
|
const prevJornada = () => setJornada(prev => Math.max(1, prev - 1));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-4xl uppercase">Jornadas</h1>
|
||||||
|
<p className="text-text-secondary mt-1">Gestão de resultados e calendário.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex bg-bg-surface p-1 rounded-lg border border-border">
|
||||||
|
<button
|
||||||
|
onClick={() => { setEscalao('seniores'); setJornada(1); }}
|
||||||
|
className={`px-6 py-2 rounded-md text-sm font-bold transition-all ${escalao === 'seniores' ? 'bg-brand-primary text-bg-base' : 'text-text-secondary hover:text-text-primary'}`}
|
||||||
|
>
|
||||||
|
SENIORES
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => { setEscalao('juniores'); setJornada(1); }}
|
||||||
|
className={`px-6 py-2 rounded-md text-sm font-bold transition-all ${escalao === 'juniores' ? 'bg-brand-primary text-bg-base' : 'text-text-secondary hover:text-text-primary'}`}
|
||||||
|
>
|
||||||
|
JUNIORES
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-center gap-6 bg-bg-surface p-4 rounded-xl border border-border shadow-inner">
|
||||||
|
<button onClick={prevJornada} disabled={jornada === 1} className="p-2 hover:bg-bg-elevated rounded-full transition-colors disabled:opacity-30">
|
||||||
|
<ChevronLeft size={32} />
|
||||||
|
</button>
|
||||||
|
<div className="text-center min-w-[150px]">
|
||||||
|
<span className="text-[10px] uppercase tracking-[0.2em] text-text-muted block mb-1">Rodada</span>
|
||||||
|
<h2 className="text-3xl font-display font-black text-brand-primary">{jornada}ª</h2>
|
||||||
|
</div>
|
||||||
|
<button onClick={nextJornada} className="p-2 hover:bg-bg-elevated rounded-full transition-colors">
|
||||||
|
<ChevronRight size={32} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-64 text-brand-primary">
|
||||||
|
<Loader2 className="animate-spin mb-4" size={48} />
|
||||||
|
<p className="text-text-secondary font-medium">A carregar jogos...</p>
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="p-20 text-center text-brand-danger bg-brand-danger/5 rounded-xl border border-brand-danger/20">
|
||||||
|
<p>Erro ao carregar os jogos desta jornada.</p>
|
||||||
|
</div>
|
||||||
|
) : matches.length === 0 ? (
|
||||||
|
<div className="p-20 text-center text-text-muted bg-bg-surface rounded-xl border border-dashed border-border">
|
||||||
|
<Calendar size={48} className="mx-auto mb-4 opacity-20" />
|
||||||
|
<p>Não foram encontrados jogos para esta jornada.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
|
||||||
|
{matches.map((match) => (
|
||||||
|
<MatchCard key={match.id} match={match} escalao={escalao} jornada={jornada} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const MatchCard = ({ match, escalao, jornada }: { match: Match, escalao: Escalao, jornada: number }) => {
|
||||||
|
return (
|
||||||
|
<div className={`card group relative overflow-hidden transition-all hover:border-brand-primary/50 ${match.isLive ? 'ring-1 ring-brand-primary ring-offset-2 ring-offset-bg-base' : ''}`}>
|
||||||
|
{match.isLive && (
|
||||||
|
<div className="absolute top-0 right-0 bg-brand-primary text-bg-base text-[10px] font-bold px-3 py-1 flex items-center gap-1 animate-pulse rounded-bl-lg z-10">
|
||||||
|
<Zap size={10} fill="currentColor" /> DIRETO
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="p-6 space-y-6">
|
||||||
|
<div className="flex items-center justify-between gap-4">
|
||||||
|
{/* Team A */}
|
||||||
|
<div className="flex-1 flex flex-col items-center text-center gap-3">
|
||||||
|
<div className="w-16 h-16 flex items-center justify-center p-2 bg-bg-elevated rounded-2xl group-hover:bg-bg-overlay transition-colors">
|
||||||
|
<img src={match.home_logo} alt="" className="w-full h-full object-contain" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-bold uppercase leading-tight line-clamp-2 h-10 flex items-center justify-center">
|
||||||
|
{match.home_nome}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Score */}
|
||||||
|
<div className="flex flex-col items-center justify-center min-w-[120px]">
|
||||||
|
{match.played || match.isLive ? (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-5xl font-display font-black">{match.home_golos}</span>
|
||||||
|
<span className="text-2xl text-text-muted">:</span>
|
||||||
|
<span className="text-5xl font-display font-black">{match.away_golos}</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-bg-elevated px-4 py-2 rounded-lg border border-border font-mono text-sm font-bold">
|
||||||
|
VS
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!match.played && !match.isLive && (
|
||||||
|
<span className="text-[10px] text-text-muted mt-2 font-mono uppercase tracking-widest">{match.hora}</span>
|
||||||
|
)}
|
||||||
|
{match.played && (
|
||||||
|
<span className="text-[10px] text-brand-primary mt-2 font-bold uppercase tracking-widest bg-brand-primary/10 px-2 py-0.5 rounded">Finalizado</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Team B */}
|
||||||
|
<div className="flex-1 flex flex-col items-center text-center gap-3">
|
||||||
|
<div className="w-16 h-16 flex items-center justify-center p-2 bg-bg-elevated rounded-2xl group-hover:bg-bg-overlay transition-colors">
|
||||||
|
<img src={match.away_logo} alt="" className="w-full h-full object-contain" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-bold uppercase leading-tight line-clamp-2 h-10 flex items-center justify-center">
|
||||||
|
{match.away_nome}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-center justify-between pt-4 border-t border-border/50 gap-4">
|
||||||
|
<div className="flex items-center gap-4 text-xs text-text-muted">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<Calendar size={14} className="text-brand-primary" />
|
||||||
|
{new Date(match.data).toLocaleDateString('pt-PT')}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<MapPin size={14} className="text-brand-primary" />
|
||||||
|
{match.campo || 'N/A'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
to={`/games/live-editor/${escalao}/${jornada}/${match.id}`}
|
||||||
|
className="btn btn-primary py-2 px-4 text-xs flex items-center gap-2 group-hover:scale-105 transition-transform"
|
||||||
|
>
|
||||||
|
<Zap size={14} /> {match.isLive ? 'GERIR DIRETO' : 'EDITAR JOGO'}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Games;
|
||||||
204
src/pages/LiveEditor.tsx
Normal file
204
src/pages/LiveEditor.tsx
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
|
import { ref, onValue, update } from 'firebase/database';
|
||||||
|
import { db } from '../lib/firebase';
|
||||||
|
import type { Match, Escalao } from '../types/database';
|
||||||
|
import { Loader2, ChevronLeft, Save, Zap, CheckCircle2, History, XCircle } from 'lucide-react';
|
||||||
|
|
||||||
|
const LiveEditor = () => {
|
||||||
|
const { escalao, jornada, matchId } = useParams<{ escalao: Escalao; jornada: string; matchId: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const [match, setMatch] = useState<Match | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!escalao || !jornada || !matchId) return;
|
||||||
|
|
||||||
|
const matchRef = ref(db, `jornadas/${escalao}/${jornada}/${matchId}`);
|
||||||
|
const unsubscribe = onValue(matchRef, (snapshot) => {
|
||||||
|
const data = snapshot.val();
|
||||||
|
if (data) {
|
||||||
|
setMatch({ id: matchId, ...data });
|
||||||
|
} else {
|
||||||
|
setError('Jogo não encontrado.');
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => unsubscribe();
|
||||||
|
}, [escalao, jornada, matchId]);
|
||||||
|
|
||||||
|
const handleUpdateScore = async (side: 'home' | 'away', delta: number) => {
|
||||||
|
if (!match || !escalao || !jornada || !matchId) return;
|
||||||
|
|
||||||
|
const newScore = Math.max(0, (side === 'home' ? match.home_golos : match.away_golos) + delta);
|
||||||
|
const updates: any = {};
|
||||||
|
updates[`jornadas/${escalao}/${jornada}/${matchId}/${side}_golos`] = newScore;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await update(ref(db), updates);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erro ao atualizar score:', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleStatus = async (field: 'isLive' | 'played') => {
|
||||||
|
if (!match || !escalao || !jornada || !matchId) return;
|
||||||
|
|
||||||
|
const updates: any = {};
|
||||||
|
const newValue = !match[field];
|
||||||
|
updates[`jornadas/${escalao}/${jornada}/${matchId}/${field}`] = newValue;
|
||||||
|
|
||||||
|
// Se marcarmos como Live, garantimos que played é false
|
||||||
|
if (field === 'isLive' && newValue === true) {
|
||||||
|
updates[`jornadas/${escalao}/${jornada}/${matchId}/played`] = false;
|
||||||
|
}
|
||||||
|
// Se marcarmos como Played, paramos o Live
|
||||||
|
if (field === 'played' && newValue === true) {
|
||||||
|
updates[`jornadas/${escalao}/${jornada}/${matchId}/isLive`] = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await update(ref(db), updates);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erro ao atualizar status:', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center h-screen text-brand-primary">
|
||||||
|
<Loader2 className="animate-spin mb-4" size={48} />
|
||||||
|
<p className="text-text-secondary">A carregar editor...</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !match) {
|
||||||
|
return (
|
||||||
|
<div className="p-20 text-center text-brand-danger">
|
||||||
|
<XCircle size={64} className="mx-auto mb-4 opacity-20" />
|
||||||
|
<p className="text-2xl font-display uppercase">{error || 'Jogo não encontrado'}</p>
|
||||||
|
<button onClick={() => navigate('/games')} className="btn btn-primary mt-6">VOLTAR AOS JOGOS</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto space-y-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/games')}
|
||||||
|
className="flex items-center gap-2 text-text-secondary hover:text-brand-primary transition-colors font-bold uppercase text-xs"
|
||||||
|
>
|
||||||
|
<ChevronLeft size={16} /> Voltar
|
||||||
|
</button>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-[10px] uppercase tracking-widest text-text-muted px-3 py-1 bg-bg-surface border border-border rounded-full">
|
||||||
|
ID: {match.id}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Editor Card */}
|
||||||
|
<div className="card overflow-hidden">
|
||||||
|
{/* Status Bar */}
|
||||||
|
<div className={`p-4 flex items-center justify-center gap-6 border-b border-border ${match.isLive ? 'bg-brand-primary/10' : 'bg-bg-surface'}`}>
|
||||||
|
<button
|
||||||
|
onClick={() => handleToggleStatus('isLive')}
|
||||||
|
className={`flex items-center gap-2 px-4 py-2 rounded-full text-xs font-bold transition-all ${match.isLive ? 'bg-brand-primary text-bg-base animate-pulse' : 'bg-bg-elevated text-text-muted hover:text-text-primary'}`}
|
||||||
|
>
|
||||||
|
<Zap size={14} fill={match.isLive ? 'currentColor' : 'none'} /> {match.isLive ? 'DIRETO ATIVO' : 'INICIAR DIRETO'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => handleToggleStatus('played')}
|
||||||
|
className={`flex items-center gap-2 px-4 py-2 rounded-full text-xs font-bold transition-all ${match.played ? 'bg-brand-secondary text-bg-base' : 'bg-bg-elevated text-text-muted hover:text-text-primary'}`}
|
||||||
|
>
|
||||||
|
<CheckCircle2 size={14} /> {match.played ? 'FINALIZADO' : 'MARCAR COMO FINALIZADO'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-8 md:p-12 space-y-12">
|
||||||
|
{/* Teams and Scores */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 items-center gap-8 md:gap-4">
|
||||||
|
{/* Home Team */}
|
||||||
|
<div className="flex flex-col items-center gap-6">
|
||||||
|
<div className="w-24 h-24 p-4 bg-bg-elevated rounded-3xl shadow-xl">
|
||||||
|
<img src={match.home_logo} alt="" className="w-full h-full object-contain" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-black uppercase text-center min-h-[3.5rem] flex items-center">{match.home_nome}</h3>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
<div className="text-7xl font-display font-black text-white">{match.home_golos}</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button onClick={() => handleUpdateScore('home', -1)} className="w-12 h-12 rounded-xl bg-bg-elevated hover:bg-brand-danger/20 hover:text-brand-danger text-2xl font-bold transition-all">-</button>
|
||||||
|
<button onClick={() => handleUpdateScore('home', 1)} className="w-12 h-12 rounded-xl bg-brand-primary text-bg-base text-2xl font-bold shadow-lg shadow-brand-primary/20 hover:scale-105 active:scale-95 transition-all">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* VS Divider */}
|
||||||
|
<div className="flex flex-col items-center justify-center">
|
||||||
|
<div className="w-px h-16 bg-border hidden md:block mb-4"></div>
|
||||||
|
<div className="text-text-muted font-display text-2xl italic">VS</div>
|
||||||
|
<div className="w-px h-16 bg-border hidden md:block mt-4"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Away Team */}
|
||||||
|
<div className="flex flex-col items-center gap-6">
|
||||||
|
<div className="w-24 h-24 p-4 bg-bg-elevated rounded-3xl shadow-xl">
|
||||||
|
<img src={match.away_logo} alt="" className="w-full h-full object-contain" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-black uppercase text-center min-h-[3.5rem] flex items-center">{match.away_nome}</h3>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
<div className="text-7xl font-display font-black text-white">{match.away_golos}</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button onClick={() => handleUpdateScore('away', -1)} className="w-12 h-12 rounded-xl bg-bg-elevated hover:bg-brand-danger/20 hover:text-brand-danger text-2xl font-bold transition-all">-</button>
|
||||||
|
<button onClick={() => handleUpdateScore('away', 1)} className="w-12 h-12 rounded-xl bg-brand-primary text-bg-base text-2xl font-bold shadow-lg shadow-brand-primary/20 hover:scale-105 active:scale-95 transition-all">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info Section */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-8 border-t border-border">
|
||||||
|
<div className="p-4 bg-bg-surface rounded-xl border border-border flex items-center gap-4">
|
||||||
|
<div className="p-3 bg-brand-primary/10 rounded-lg text-brand-primary"><History size={24} /></div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] uppercase tracking-widest text-text-muted">Data e Hora</p>
|
||||||
|
<p className="font-bold">{new Date(match.data).toLocaleDateString('pt-PT')} - {match.hora}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 bg-bg-surface rounded-xl border border-border flex items-center gap-4">
|
||||||
|
<div className="p-3 bg-brand-primary/10 rounded-lg text-brand-primary"><History size={24} /></div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] uppercase tracking-widest text-text-muted">Local / Campo</p>
|
||||||
|
<p className="font-bold">{match.campo || 'Não definido'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-brand-secondary/10 p-6 rounded-2xl border border-brand-secondary/20 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-brand-secondary/20 rounded-full flex items-center justify-center text-brand-secondary">
|
||||||
|
<CheckCircle2 size={24} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-bold text-brand-secondary">As alterações são automáticas!</p>
|
||||||
|
<p className="text-sm text-text-secondary">Qualquer golo que alteres aqui será refletido imediatamente na App Android.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LiveEditor;
|
||||||
116
src/pages/LiveGames.tsx
Normal file
116
src/pages/LiveGames.tsx
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { ref, onValue } from 'firebase/database';
|
||||||
|
import { db } from '../lib/firebase';
|
||||||
|
import type { Match } from '../types/database';
|
||||||
|
import { Loader2, Zap, Timer } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const LiveGames = () => {
|
||||||
|
const [liveMatches, setLiveMatches] = useState<(Match & { escalao: string, jornadaId: string })[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const jornadasRef = ref(db, 'jornadas');
|
||||||
|
|
||||||
|
const unsubscribe = onValue(jornadasRef, (snapshot) => {
|
||||||
|
const data = snapshot.val();
|
||||||
|
const allLive: (Match & { escalao: string, jornadaId: string })[] = [];
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
Object.entries(data).forEach(([escalao, jornadas]: [string, any]) => {
|
||||||
|
if (!Array.isArray(jornadas)) return;
|
||||||
|
|
||||||
|
jornadas.forEach((jornadaData, jornadaIdx) => {
|
||||||
|
if (!jornadaData) return;
|
||||||
|
|
||||||
|
Object.entries(jornadaData).forEach(([matchId, match]: [string, any]) => {
|
||||||
|
if (match.isLive) {
|
||||||
|
allLive.push({
|
||||||
|
id: matchId,
|
||||||
|
...match,
|
||||||
|
escalao,
|
||||||
|
jornadaId: jornadaIdx.toString()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setLiveMatches(allLive);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => unsubscribe();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-4xl uppercase flex items-center gap-3">
|
||||||
|
<Zap className="text-brand-primary animate-pulse" size={32} fill="currentColor" />
|
||||||
|
Jogos em Direto
|
||||||
|
</h1>
|
||||||
|
<p className="text-text-secondary mt-1">Jogos a decorrer neste momento.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-64 text-brand-primary">
|
||||||
|
<Loader2 className="animate-spin mb-4" size={48} />
|
||||||
|
<p className="text-text-secondary font-medium">A procurar jogos em direto...</p>
|
||||||
|
</div>
|
||||||
|
) : liveMatches.length === 0 ? (
|
||||||
|
<div className="p-20 text-center text-text-muted bg-bg-surface rounded-2xl border border-dashed border-border">
|
||||||
|
<div className="w-20 h-20 bg-bg-elevated rounded-full flex items-center justify-center mx-auto mb-6 opacity-20">
|
||||||
|
<Timer size={40} />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-text-primary mb-2">Sem jogos em direto</h3>
|
||||||
|
<p className="max-w-md mx-auto">Não existem jogos marcados como "Em Direto" neste momento. Vai às Jornadas para iniciar um acompanhamento em tempo real.</p>
|
||||||
|
<Link to="/games" className="btn btn-primary mt-8 inline-block">IR PARA JORNADAS</Link>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{liveMatches.map((match) => (
|
||||||
|
<Link
|
||||||
|
key={match.id}
|
||||||
|
to={`/games/live-editor/${match.escalao}/${match.jornadaId}/${match.id}`}
|
||||||
|
className="card group hover:border-brand-primary transition-all overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="bg-brand-primary/10 p-3 flex justify-between items-center px-6">
|
||||||
|
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-brand-primary">
|
||||||
|
{match.escalao} - Jornada {match.jornadaId}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 bg-brand-primary rounded-full animate-ping"></div>
|
||||||
|
<span className="text-[10px] font-bold text-brand-primary uppercase">Direto</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-8 flex items-center justify-between gap-4">
|
||||||
|
<div className="flex-1 flex flex-col items-center gap-3 text-center">
|
||||||
|
<img src={match.home_logo} className="w-12 h-12 object-contain" alt="" />
|
||||||
|
<span className="text-xs font-bold uppercase">{match.home_nome}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<span className="text-4xl font-display font-black">{match.home_golos}</span>
|
||||||
|
<span className="text-xl text-text-muted">:</span>
|
||||||
|
<span className="text-4xl font-display font-black">{match.away_golos}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 flex flex-col items-center gap-3 text-center">
|
||||||
|
<img src={match.away_logo} className="w-12 h-12 object-contain" alt="" />
|
||||||
|
<span className="text-xs font-bold uppercase">{match.away_nome}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LiveGames;
|
||||||
103
src/pages/Standings.tsx
Normal file
103
src/pages/Standings.tsx
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { useStandings } from '../hooks/useStandings';
|
||||||
|
import { Loader2 } from 'lucide-react';
|
||||||
|
import type { Escalao } from '../types/database';
|
||||||
|
|
||||||
|
const Standings = () => {
|
||||||
|
const [escalao, setEscalao] = useState<Escalao>('seniores');
|
||||||
|
const { standings, loading, error } = useStandings(escalao);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-4xl uppercase">Classificação</h1>
|
||||||
|
<p className="text-text-secondary mt-1">Tabela classificativa em tempo real.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex bg-bg-surface p-1 rounded-lg border border-border">
|
||||||
|
<button
|
||||||
|
onClick={() => setEscalao('seniores')}
|
||||||
|
className={`px-6 py-2 rounded-md text-sm font-bold transition-all ${escalao === 'seniores' ? 'bg-brand-primary text-bg-base' : 'text-text-secondary hover:text-text-primary'}`}
|
||||||
|
>
|
||||||
|
SENIORES
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setEscalao('juniores')}
|
||||||
|
className={`px-6 py-2 rounded-md text-sm font-bold transition-all ${escalao === 'juniores' ? 'bg-brand-primary text-bg-base' : 'text-text-secondary hover:text-text-primary'}`}
|
||||||
|
>
|
||||||
|
JUNIORES
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card overflow-hidden">
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-96 text-brand-primary">
|
||||||
|
<Loader2 className="animate-spin mb-4" size={48} />
|
||||||
|
<p className="text-text-secondary font-medium">A carregar tabela...</p>
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="p-20 text-center text-brand-danger">
|
||||||
|
<p>Erro ao carregar classificações.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-bg-elevated/50 text-[10px] uppercase tracking-widest text-text-muted border-b border-border">
|
||||||
|
<th className="px-6 py-4 font-bold w-16">Pos</th>
|
||||||
|
<th className="px-6 py-4 font-bold">Clube</th>
|
||||||
|
<th className="px-4 py-4 font-bold text-center">J</th>
|
||||||
|
<th className="px-4 py-4 font-bold text-center">V</th>
|
||||||
|
<th className="px-4 py-4 font-bold text-center">E</th>
|
||||||
|
<th className="px-4 py-4 font-bold text-center">D</th>
|
||||||
|
<th className="px-4 py-4 font-bold text-center">GM</th>
|
||||||
|
<th className="px-4 py-4 font-bold text-center">GS</th>
|
||||||
|
<th className="px-4 py-4 font-bold text-center">DG</th>
|
||||||
|
<th className="px-6 py-4 font-bold text-right bg-brand-primary/5 text-brand-primary">Pts</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-border">
|
||||||
|
{standings.map((item) => (
|
||||||
|
<tr key={item.team_id} className="hover:bg-bg-overlay/20 transition-colors group">
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className={`
|
||||||
|
w-8 h-8 rounded-full flex items-center justify-center font-mono text-sm font-bold
|
||||||
|
${item.posicao === 1 ? 'bg-brand-primary text-bg-base' : 'bg-bg-elevated text-text-secondary'}
|
||||||
|
`}>
|
||||||
|
{item.posicao}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<img src={item.imagem} alt="" className="w-8 h-8 object-contain" />
|
||||||
|
<span className="font-semibold text-sm group-hover:text-brand-primary transition-colors">{item.nome}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-4 text-center font-mono text-sm">{item.jogos}</td>
|
||||||
|
<td className="px-4 py-4 text-center font-mono text-sm text-brand-primary">{item.vitorias}</td>
|
||||||
|
<td className="px-4 py-4 text-center font-mono text-sm text-text-muted">{item.empates}</td>
|
||||||
|
<td className="px-4 py-4 text-center font-mono text-sm text-brand-danger">{item.derrotas}</td>
|
||||||
|
<td className="px-4 py-4 text-center font-mono text-xs text-text-secondary">{item.golos_marcados}</td>
|
||||||
|
<td className="px-4 py-4 text-center font-mono text-xs text-text-secondary">{item.golos_sofridos}</td>
|
||||||
|
<td className="px-4 py-4 text-center font-mono text-sm">
|
||||||
|
<span className={item.diferenca_golos > 0 ? 'text-brand-primary' : item.diferenca_golos < 0 ? 'text-brand-danger' : ''}>
|
||||||
|
{item.diferenca_golos > 0 ? '+' : ''}{item.diferenca_golos}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-right font-display text-2xl bg-brand-primary/5 text-brand-primary">
|
||||||
|
{item.pontos}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Standings;
|
||||||
55
src/types/database.ts
Normal file
55
src/types/database.ts
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
export interface Player {
|
||||||
|
id: number;
|
||||||
|
nome: string;
|
||||||
|
foto: string;
|
||||||
|
data_nascimento: string;
|
||||||
|
naturalidade: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Club {
|
||||||
|
id: number;
|
||||||
|
nome: string;
|
||||||
|
imagem: string;
|
||||||
|
campo?: string;
|
||||||
|
ano_fundacao?: number;
|
||||||
|
morada?: string;
|
||||||
|
presidente?: string;
|
||||||
|
jogadores?: {
|
||||||
|
seniores?: Player[];
|
||||||
|
juniores?: Player[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StandingItem {
|
||||||
|
posicao: number;
|
||||||
|
nome: string;
|
||||||
|
imagem: string;
|
||||||
|
pontos: number;
|
||||||
|
jogos: number;
|
||||||
|
vitorias: number;
|
||||||
|
empates: number;
|
||||||
|
derrotas: number;
|
||||||
|
golos_marcados: number;
|
||||||
|
golos_sofridos: number;
|
||||||
|
diferenca_golos: number;
|
||||||
|
team_id: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Match {
|
||||||
|
id: string;
|
||||||
|
home_nome: string;
|
||||||
|
away_nome: string;
|
||||||
|
home_golos: number;
|
||||||
|
away_golos: number;
|
||||||
|
data: string;
|
||||||
|
hora: string;
|
||||||
|
home_logo: string;
|
||||||
|
away_logo: string;
|
||||||
|
campo?: string;
|
||||||
|
played: boolean;
|
||||||
|
isLive?: boolean;
|
||||||
|
matchReportUrl?: string;
|
||||||
|
jornadaId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Escalao = 'seniores' | 'juniores';
|
||||||
49
tailwind.config.js
Normal file
49
tailwind.config.js
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
bg: {
|
||||||
|
base: '#0a0e1a',
|
||||||
|
surface: '#111827',
|
||||||
|
elevated: '#1a2235',
|
||||||
|
overlay: '#243047',
|
||||||
|
},
|
||||||
|
brand: {
|
||||||
|
primary: '#22c55e',
|
||||||
|
accent: '#3b82f6',
|
||||||
|
danger: '#ef4444',
|
||||||
|
warning: '#f59e0b',
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
primary: '#f9fafb',
|
||||||
|
secondary: '#9ca3af',
|
||||||
|
muted: '#4b5563',
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
DEFAULT: '#1e2d45',
|
||||||
|
active: '#22c55e',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
display: ['Bebas Neue', 'Impact', 'sans-serif'],
|
||||||
|
body: ['IBM Plex Sans', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||||
|
mono: ['JetBrains Mono', 'monospace'],
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'live-pulse': 'pulse-custom 1.5s infinite',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
'pulse-custom': {
|
||||||
|
'0%, 100%': { opacity: 1, transform: 'scale(1)' },
|
||||||
|
'50%': { opacity: 0.5, transform: 'scale(0.95)' },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
25
tsconfig.app.json
Normal file
25
tsconfig.app.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023", "DOM"],
|
||||||
|
"module": "esnext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "esnext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user