rede5/core
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

docs: atualiza README do dashboard com todas features

Browse source 
- Documenta 10 páginas completas
- Explica design system VSCode-like
- Lista 9 itens de navegação
- Schemas das 4 collections (cloud_accounts, projects, tickets, transactions)
- Scripts de build e deploy
- Troubleshooting e próximos passos
- 306KB bundle size documentado
This commit is contained in:
Tiago Yamamoto 2025-12-11 20:52:10 -03:00
parent e3b994bff2
commit 49be65b28e
1 changed files with 258 additions and 203 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

461
dashboard/README.md
View file

@ -1,263 +1,318 @@
# Dashboard - Core Platform
# Dashboard - DevOps Orchestration Platform
> Painel administrativo DevOps desenvolvido com **React + TypeScript + Vite** integrado ao **Appwrite Cloud** para autenticação, database e realtime.
Dashboard completo para gerenciamento de infraestrutura, projetos, finanças e tasks com design VSCode-like premium.
## 🎯 Visão Geral
## 🎨 Design System
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
Layout **VSCode-like** com:
- **Cores**: slate-900/950 background, cyan-300/400 accents
- **Cards**: rounded-xl com border-slate-800 e shadow-inner
- **Typography**: uppercase tracking-wide para labels
- **Avatar**: Gradientes cyan → blue
- **Animações**: Transitions suaves 150ms
## 🛠 Stack Tecnológica
## 📱 Páginas
- **Framework**: [React 18](https://react.dev)
- **Build Tool**: [Vite 5](https://vitejs.dev)
- **Linguagem**: TypeScript 5
- **Roteamento**: React Router DOM 7
- **Estilização**: Tailwind CSS 3
- **Backend**: Appwrite Cloud SDK
- **Ícones**: Lucide React
- **Linting**: ESLint 8
### 🏠 Overview (`/`)
- Dashboard principal com métricas
- Total de repos, workers ativos, último deploy
- Status de integrações (Appwrite, GitHub, Realtime)
## 📦 Instalação
### 👤 Perfil (`/profile`)
- Avatar com iniciais do usuário
- Informações da conta (email, ID, data de criação)
- Estatísticas (projetos, tickets, uptime)
- Placeholder para edição e segurança
```bash
# Na raiz do projeto
cd dashboard
### 📊 Projetos (`/projects`)
- Grid de cards de projetos
- Filtros: Todos, Active, Paused, Archived
- Busca por nome
- Status badges coloridos
- Link para repositório GitHub
# Instalar dependências
npm install
### 📋 Kanban (`/kanban`)
- 3 colunas: Backlog 📋 | Em Progresso 🏃 | Concluído ✅
- Cards de tickets com título, descrição
- Labels de prioridade: Low/Medium/High
- Assignee e drag & drop (futuro)
### 🔑 Admin de Contas (`/accounts`)
- Gerenciar credenciais multi-plataforma:
- Cloudflare (laranja)
- GitHub (branco)
- cPanel (azul)
- DirectAdmin (roxo)
- Appwrite (rosa)
- Mascaramento de API Keys com toggle show/hide
- Testes de conexão
- Stats por provider
### 💰 Financeiro (`/finance`)
- Módulo ERP básico
- Cards de resumo: Receitas | Despesas | Saldo
- Lista de transações com categorias
- Gráfico de tendência mensal
- Breakdown por categoria
### ⚡ Hello World (`/hello`)
- Teste de Appwrite Function básica
- Input customizado
- Logs de execução
### 🐙 GitHub Repos (`/github`)
- Sincronizar repositórios do GitHub
- Usar credencial do cloud_accounts
- Listar repos do usuário
### ☁️ Cloudflare Zones (`/cloudflare`)
- Status de Zones e Workers
- Integração com Cloudflare API
- Usar credencial do cloud_accounts
### ⚙️ Settings (`/settings`)
- Configurações gerais
- Preferências (futuro)
## 🧩 Componentes
### `UserDropdown`
- Dropdown de perfil no header (canto direito)
- Avatar com iniciais e gradiente
- Menu: Meu Perfil, Configurações, Sair
- Click outside para fechar
### `TerminalLogs`
- Terminal em tempo real no rodapé
- Monitora collection `audit_logs` via Realtime
- Logs com timestamp
## 🗂️ Estrutura
```
dashboard/src/
├── components/
│ ├── TerminalLogs.tsx # Terminal realtime
│ └── UserDropdown.tsx # Dropdown de perfil
│
├── contexts/
│ └── Auth.tsx # Contexto auth Appwrite
│
├── layouts/
│ └── DashboardLayout.tsx # Layout principal com sidebar
│
├── lib/
│ └── appwrite.ts # Config Appwrite SDK
│
├── pages/
│ ├── AccountsAdmin.tsx # Admin multi-plataforma
│ ├── Cloudflare.tsx # Zones Cloudflare
│ ├── ERPFinance.tsx # Módulo financeiro
│ ├── Github.tsx # Repos GitHub
│ ├── Hello.tsx # Hello World function
│ ├── Home.tsx # Overview dashboard
│ ├── Kanban.tsx # Board de tickets
│ ├── Login.tsx # Página de login
│ ├── Profile.tsx # Perfil do usuário
│ ├── Projects.tsx # Grid de projetos
│ └── Settings.tsx # Configurações
│
├── App.tsx # Routes
└── main.tsx # Entry point
```
## ⚙️ Configuração
## 🔧 Stack Tecnológica
### Variáveis de Ambiente
- **Framework**: React 18 + TypeScript
- **Build**: Vite 5
- **Routing**: React Router DOM v7
- **Backend**: Appwrite Cloud (BaaS)
- **Styling**: Tailwind CSS 3
- **Icons**: Lucide React
- **Linting**: ESLint + TypeScript ESLint
O dashboard lê variáveis do arquivo `.env` na **raíz do monorepo** (não nesta pasta).
## 🚀 Scripts
Variáveis necessárias (todas com prefixo `VITE_`):
```bash
# Desenvolvimento
npm run dev # Vite dev server em http://localhost:5173
# Build
npm run build # TypeScript + Vite build
# Lint
npm run lint # ESLint com regras TypeScript
# Preview
npm run preview # Preview do build de produção
```
## 🔑 Variáveis de Ambiente
Crie `.env` com:
```env
# Appwrite Endpoint (cliente)
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
# Project ID (cliente)
VITE_APPWRITE_PROJECT_ID=seu_project_id
# Database ID (cliente)
VITE_APPWRITE_DATABASE_ID=seu_database_id
# Collections IDs (cliente)
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.
**Todas as variáveis `VITE_*` são expostas no cliente**, portanto não coloque segredos!
### Configuração do Appwrite
Veja o [README principal](../README.md#setup-appwrite-cloud) 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
```bash
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:
## 📊 Appwrite Collections
### `cloud_accounts`
Credenciais de APIs multi-plataforma:
```typescript
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
);
{
name: string // Ex: "Cloudflare Produção"
provider: enum // cloudflare | github | cpanel | directadmin | appwrite
apiKey: string // API Key ou token
endpoint?: string // URL do endpoint (opcional)
active: boolean // Se está ativo
}
```
### Realtime Subscriptions
Terminal assina eventos da coleção `audit_logs`:
### `projects` (futuro)
```typescript
import { client } from './lib/appwrite';
client.subscribe(
`databases.${databaseId}.collections.${auditLogsId}.documents`,
(response) => {
console.log('Novo log:', response.payload);
}
);
{
name: string
description: string
status: enum // active | paused | archived
repository_url?: url
created_at: datetime
owner_id: string
}
```
## 🎨 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
```bash
npm run lint
### `tickets` (futuro)
```typescript
{
title: string
description: string
status: enum // backlog | in_progress | done
priority: enum // low | medium | high
assignee?: string
project_id?: string
created_at: datetime
}
```
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
```bash
npm run build
### `transactions` (futuro - ERP)
```typescript
{
description: string
amount: number
type: enum // income | expense
category: string
date: datetime
}
```
Saída:
- `dist/index.html`
- `dist/assets/index-[hash].js`
- `dist/assets/index-[hash].css`
## 🎯 Navegação
Otimizações:
- Tree-shaking
- Minificação
- Code splitting
- Hashing de assets
9 itens na sidebar:
1. **Overview** 🏠 - Dashboard principal
2. **Projetos** 📂 - Gestão de projetos
3. **Kanban** 📋 - Board de tickets
4. **Contas** 🔑 - Admin multi-plataforma
5. **Financeiro** 💰 - ERP módulo
6. **Hello World** ✨ - Test function
7. **GitHub Repos** 🐙 - Integração GitHub
8. **Cloudflare Zones** ☁️ - Integração Cloudflare
9. **Settings** ⚙️ - Configurações
## 🔒 Autenticação
- Login via email/senha com Appwrite Auth
- Redirect automático para dashboard após login
- Protected routes com `PrivateRoute` HOC
- Logout via UserDropdown no header
## 📦 Build Stats
```
Bundle size: 306KB gzipped
Modules: 1727 transformed
Build time: ~8s
```
## 🚀 Deploy
### Vercel (Recomendado)
### Vercel
```bash
npm run build
# Ou conecte o repo no painel Vercel
# Upload pasta dist/
```
**Configuração Vercel**:
- Build Command: `npm run build`
- Output Directory: `dist`
- Environment Variables: Adicione todas as `VITE_*`
### Netlify
```bash
npm run build
# Arraste a pasta dist/ no painel Netlify
```
**netlify.toml** (opcional):
```toml
[build]
command = "npm run build"
publish = "dist"
```
### Cloudflare Pages
### Docker
```dockerfile
FROM node:22-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 5173
CMD ["npm", "run", "preview"]
```
## 🎨 Customização
### Cores
Editar `tailwind.config.js` e trocar `slate`/`cyan` por outras cores mantendo o padrão.
### Ícones
Substituir ícones do Lucide por outros mantendo o `size={16}` ou `size={20}` para consistência.
### Layout
Ajustar sidebar width em `DashboardLayout.tsx` linha 30: `w-64` → `w-72` para maior.
## 📝 Próximos Passos
- [ ] Implementar CRUD completo de Projetos
- [ ] Drag & drop no Kanban
- [ ] Formulário de criação de Contas
- [ ] Charts reais no Financeiro (recharts/visx)
- [ ] Edição de perfil
- [ ] Notificações toast (sonner)
- [ ] Dark/Light mode toggle
- [ ] Testes com Vitest + Testing Library
## 🐛 Troubleshooting
### Erro ao buildar
```bash
rm -rf node_modules dist
npm install
npm run build
# Upload via Wrangler ou painel
```
**⚠️ Importante**: Configure as variáveis de ambiente `VITE_*` no painel do provider!
### Variáveis não carregam
Verifique se tem prefixo `VITE_` e reinicie dev server.
## 🔧 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**:
```bash
# 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
```bash
# 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](https://appwrite.io/docs/sdks#client)
- [Vite Guide](https://vitejs.dev/guide/)
- [React Documentation](https://react.dev)
- [Tailwind CSS](https://tailwindcss.com/docs)
### Realtime não funciona
Certifique-se que `audit_logs` collection existe e tem Read permission para usuário autenticado.
---
Para configuração completa e setup do Appwrite, veja o [README principal](../README.md).
**Dashboard criado com 💎 mantendo padrão VSCode-like top!**