core/dashboard

Dashboard - Core Platform

Painel administrativo DevOps desenvolvido com React + TypeScript + Vite integrado ao Appwrite Cloud para autenticação, database e realtime.

🎯 Visão Geral

Dashboard para gerenciamento de:

• Servidores: Monitoramento de status, IP e região
• Repositórios GitHub: Acompanhamento de commits e status
• Audit Logs: Logs de eventos em tempo real
• Contas Cloudflare: Gerenciamento de integrações

🛠 Stack Tecnológica

• Framework: React 18
• Build Tool: Vite 5
• Linguagem: TypeScript 5
• Roteamento: React Router DOM 7
• Estilização: Tailwind CSS 3
• Backend: Appwrite Cloud SDK
• Ícones: Lucide React
• Linting: ESLint 8

📦 Instalação

# Na raiz do projeto
cd dashboard

# Instalar dependências
npm install

⚙️ Configuração

Variáveis de Ambiente

O dashboard lê variáveis do arquivo .env na raíz do monorepo (não nesta pasta).

Variáveis necessárias (todas com prefixo VITE_):

VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=seu_project_id
VITE_APPWRITE_DATABASE_ID=seu_database_id
VITE_APPWRITE_COLLECTION_SERVERS_ID=servers
VITE_APPWRITE_COLLECTION_GITHUB_REPOS_ID=github_repos
VITE_APPWRITE_COLLECTION_AUDIT_LOGS_ID=audit_logs
VITE_APPWRITE_COLLECTION_CLOUDFLARE_ACCOUNTS_ID=cloud_accounts

⚠️ Importante: O Vite só expõe variáveis com prefixo VITE_ para o browser.

Configuração do Appwrite

Veja o README principal para instruções completas de setup do Appwrite Cloud.

🏃 Scripts

Comando	Descrição
npm run dev	Inicia dev server (porta 5173)
npm run build	Gera build de produção em dist/
npm run preview	Testa build localmente
npm run lint	Executa ESLint

Executar em Desenvolvimento

npm run dev

Acesse: http://localhost:5173

Login: Use credenciais criadas no Appwrite Auth (ex: admin@test.com)

📁 Estrutura de Pastas

dashboard/
├── public/              # Arquivos estáticos
│   └── vite.svg
├── src/
│   ├── components/      # Componentes reutilizáveis
│   │   ├── Header.tsx
│   │   ├── Overview.tsx
│   │   ├── ServerList.tsx
│   │   ├── GitHubRepos.tsx
│   │   ├── Terminal.tsx
│   │   └── ...
│   ├── pages/           # Páginas/rotas
│   │   ├── Login.tsx
│   │   ├── Dashboard.tsx
│   │   └── ...
│   ├── lib/             # Utilitários e SDK
│   │   └── appwrite.ts  # Inicialização SDK Appwrite
│   ├── App.tsx          # Componente raiz + rotas
│   ├── main.tsx         # Entry point
│   └── index.css        # Tailwind + estilos globais
├── index.html           # Template HTML
├── vite.config.ts       # Configuração Vite
├── tailwind.config.js   # Configuração Tailwind
├── tsconfig.json        # Configuração TypeScript
└── package.json         # Dependências e scripts

🔑 Funcionalidades

Autenticação

• Login com Email/Password via Appwrite Auth
• Session management com account.createEmailPasswordSession
• Logout com account.deleteSession('current')
• Proteção de rotas com verificação de sessão

Database Queries

Consulta coleções Appwrite usando o SDK:

import { databases } from './lib/appwrite';

// Listar servidores
const servers = await databases.listDocuments(
  import.meta.env.VITE_APPWRITE_DATABASE_ID,
  import.meta.env.VITE_APPWRITE_COLLECTION_SERVERS_ID
);

Realtime Subscriptions

Terminal assina eventos da coleção audit_logs:

import { client } from './lib/appwrite';

client.subscribe(
  `databases.${databaseId}.collections.${auditLogsId}.documents`,
  (response) => {
    console.log('Novo log:', response.payload);
  }
);

🎨 Componentes Principais

Componente	Descrição
Header	Barra superior com navegação e logout
Overview	Widgets com métricas de servidores, repos e logs
ServerList	Tabela de servidores com status online/offline
GitHubRepos	Lista de repositórios GitHub integrados
Terminal	Console com logs em tempo real (Realtime)

🧪 Testes

Linting

npm run lint

Configuração ESLint em .eslintrc.cjs:

• Parser: @typescript-eslint/parser
• Plugins: React Hooks, React Refresh
• Regras: React 18.2+ (sem import React necessário)

Build de Produção

npm run build

Saída:

• dist/index.html
• dist/assets/index-[hash].js
• dist/assets/index-[hash].css

Otimizações:

• Tree-shaking
• Minificação
• Code splitting
• Hashing de assets

🚀 Deploy

Vercel (Recomendado)

npm run build
# Ou conecte o repo no painel Vercel

Configuração Vercel:

• Build Command: npm run build
• Output Directory: dist
• Environment Variables: Adicione todas as VITE_*

Netlify

npm run build
# Arraste a pasta dist/ no painel Netlify

netlify.toml (opcional):

[build]
  command = "npm run build"
  publish = "dist"

Cloudflare Pages

npm run build
# Upload via Wrangler ou painel

⚠️ Importante: Configure as variáveis de ambiente VITE_* no painel do provider!

🔧 Troubleshooting

"import.meta.env.VITE_APPWRITE_PROJECT_ID is undefined"

Causa: Arquivo .env não está na raiz do monorepo ou variável não tem prefixo VITE_

Solução:

# Verifique se o .env existe na raiz (não em dashboard/)
cat ../.env

# Certifique-se que as variáveis começam com VITE_
grep VITE_ ../.env

Erro de CORS no Appwrite

Solução:

1. Appwrite Console → Settings → Platforms
2. Add Platform → Web
3. Hostname: localhost (dev) e seu domínio (produção)

TypeScript errors no build

# Verificar erros
npx tsc --noEmit

# Atualizar tipos se necessário
npm install --save-dev @types/react@latest @types/react-dom@latest

📚 Recursos

• Appwrite React SDK
• Vite Guide
• React Documentation
• Tailwind CSS

---

Para configuração completa e setup do Appwrite, veja o README principal.