criação do website

2026-05-05 17:12:06 +01:00
parent 9c36b714f1
commit 732e7276b7
46 changed files with 9844 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -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?
--- a/docs/01-project-plan.md
+++ b/docs/01-project-plan.md
@@ -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 |
--- a/docs/02-tech-stack.md
+++ b/docs/02-tech-stack.md
@@ -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
+```
--- a/docs/03-architecture.md
+++ b/docs/03-architecture.md
@@ -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();
+    }
+  }
+}
+```
--- a/docs/04-design-system.md
+++ b/docs/04-design-system.md
@@ -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
--- a/docs/05-features.md
+++ b/docs/05-features.md
@@ -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.
--- a/docs/06-agent-handoff.md
+++ b/docs/06-agent-handoff.md
@@ -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)
--- a/docs/07-progress-tracker.md
+++ b/docs/07-progress-tracker.md
@@ -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 |
--- a/docs/08-firebase-schema.md
+++ b/docs/08-firebase-schema.md
@@ -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()
+  })
+}
+```
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -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,
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@@ -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>
--- a/mockup/index.html
+++ b/mockup/index.html
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -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"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -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>
--- a/src/App.css
+++ b/src/App.css
@@ -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);
+  }
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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;
--- a/src/assets/hero.png
+++ b/src/assets/hero.png
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -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>
--- a/src/assets/vite.svg
+++ b/src/assets/vite.svg
--- a/src/components/clubs/ClubCard.tsx
+++ b/src/components/clubs/ClubCard.tsx
@@ -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;
--- a/src/components/games/GameCard.tsx
+++ b/src/components/games/GameCard.tsx
@@ -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;
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -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;
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -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;
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -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;
--- a/src/hooks/useClubs.ts
+++ b/src/hooks/useClubs.ts
@@ -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 };
+}
--- a/src/hooks/useGames.ts
+++ b/src/hooks/useGames.ts
@@ -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 };
+}
--- a/src/hooks/useMatches.ts
+++ b/src/hooks/useMatches.ts
@@ -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 };
+}
--- a/src/hooks/useStandings.ts
+++ b/src/hooks/useStandings.ts
@@ -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 };
+}
--- a/src/index.css
+++ b/src/index.css
@@ -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;
+  }
+}
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -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;
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -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>,
+)
--- a/src/pages/Clubs.tsx
+++ b/src/pages/Clubs.tsx
@@ -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;
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -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;
--- a/src/pages/Games.tsx
+++ b/src/pages/Games.tsx
@@ -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;
--- a/src/pages/LiveEditor.tsx
+++ b/src/pages/LiveEditor.tsx
@@ -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;
--- a/src/pages/LiveGames.tsx
+++ b/src/pages/LiveGames.tsx
@@ -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;
--- a/src/pages/Standings.tsx
+++ b/src/pages/Standings.tsx
@@ -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;
--- a/src/types/database.ts
+++ b/src/types/database.ts
@@ -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';
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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: [],
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -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"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -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"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@@ -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>