# 🎨 AVL Console - Visual Showcase
## 🖥️ Interface do Usuário
### Dashboard Principal
```
┌─────────────────────────────────────────────────────────────────┐
│ 🖥️ AVL Console admin@avila.cloud │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 📊 Dashboard │
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Bancos │ │ Buckets │ │ Storage │ │
│ │ 3 │ │ 15 │ │ 128 GB │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ ┌─────────────┐ ┌─────────────────────────────────────┐ │
│ │ Conexões │ │ Requisições/min │ │
│ │ 42 │ │ 1,250 │ │
│ └─────────────┘ └─────────────────────────────────────┘ │
│ │
│ 📋 Atividade Recente │
│ ──────────────────────────────────────────────── │
│ • user123 criou database "prod" │
│ • api-key-xyz fez upload de 15 arquivos │
│ • Fila "events" processou 50K mensagens │
│ │
│ ✅ Status dos Serviços │
│ ──────────────────────────────────────────────── │
│ • AvilaDB: Operacional │
│ • Storage: Operacional │
│ • Observability: Operacional │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### AvilaDB Explorer
```
┌─────────────────────────────────────────────────────────────────┐
│ 🗄️ AvilaDB Explorer │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Seus Bancos de Dados │
│ ──────────────────────────────────────────────── │
│ ┌─────────────────────────────────────────────────┐ │
│ │ production │ │
│ │ ID: db_prod_001 │ Região: sa-east-1 │ │
│ │ Coleções: 15 │ Tamanho: 2.5 GB │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 📝 Query Editor │
│ ──────────────────────────────────────────────── │
│ ┌─────────────────────────────────────────────────┐ │
│ │ SELECT * FROM users WHERE active = true │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ [▶ Executar Query] │
│ │
│ Resultados │
│ ──────────────────────────────────────────────── │
│ { │
│ "rows": [ │
│ {"id": 1, "name": "Item 1"}, │
│ {"id": 2, "name": "Item 2"} │
│ ], │
│ "count": 2, │
│ "execution_time_ms": 15 │
│ } │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### Storage Browser
```
┌─────────────────────────────────────────────────────────────────┐
│ 💾 Storage Browser │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Seus Buckets │
│ ──────────────────────────────────────────────── │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 📦 user-uploads │ │
│ │ Região: sa-east-1 │ │
│ │ Arquivos: 1,250 │ Tamanho: 5 GB │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 📦 static-assets │ │
│ │ Região: sa-east-1 │ │
│ │ Arquivos: 3,500 │ Tamanho: 15 GB │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 📂 Arquivos │
│ ──────────────────────────────────────────────── │
│ image1.jpg 2.5 MB [Download] │
│ document.pdf 500 KB [Download] │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### Observability Dashboard
```
┌─────────────────────────────────────────────────────────────────┐
│ 📈 Observability │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Métricas em Tempo Real │
│ ──────────────────────────────────────────────── │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ CPU Usage (%) │ │ Memory Usage (%) │ │
│ │ ╱╲ ╱╲ │ │ ╱──╲ │ │
│ │ ╱ ╲╱ ╲ │ │ ╱ ╲ │ │
│ │ ╱ ╲╱ │ │ ╱ ╲╱ │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Request Rate │ │ Error Rate (%) │ │
│ │ ╱╲ ╱╲ │ │ ───── │ │
│ │ ╱ ╲╱ ╲ │ │ ╱ ╲ │ │
│ │ ╱ ╲╱ │ │ ╱ ╲ │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ 📋 Logs Recentes │
│ ──────────────────────────────────────────────── │
│ [INFO] [aviladb] Request processed successfully │
│ [WARN] [storage] High memory usage detected │
│ [ERROR] [gateway] Connection timeout │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### Billing Dashboard
```
┌─────────────────────────────────────────────────────────────────┐
│ 💰 Billing │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ╔═══════════════════════════════════════════════════╗ │
│ ║ Uso do mês atual ║ │
│ ║ R$ 125,50 ║ │
│ ║ Estimativa do mês: R$ 180,00 ║ │
│ ╚═══════════════════════════════════════════════════╝ │
│ │
│ Detalhamento por Serviço │
│ ──────────────────────────────────────────────── │
│ AvilaDB R$ 75,00 │
│ 3 databases, 15M operations │
│ │
│ Storage R$ 35,50 │
│ 128 GB, 50K requests │
│ │
│ Queue R$ 15,00 │
│ 5 topics, 1.2M messages │
│ │
│ 📄 Faturas │
│ ──────────────────────────────────────────────── │
│ Novembro 2024 R$ 125,50 Em aberto │
│ Outubro 2024 R$ 98,30 Paga │
│ │
└─────────────────────────────────────────────────────────────────┘
```
## 🎨 Design System
### Colors
```
Primary: #00d4ff ████ AVL Blue (accent)
Background: #0a0e1a ████ Dark Navy (base)
Surface: #0f1419 ████ Darker Navy (cards)
Border: #1a1f2e ████ Medium Navy (borders)
Text: #e0e6ed ████ Light Gray (text)
Muted: #8b92a0 ████ Gray (secondary text)
Success: #00ff88 ████ Green
Warning: #ffa500 ████ Orange
Error: #ff4444 ████ Red
```
### Typography
```
Font Family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
H1: 2.5rem, bold # Page titles
H2: 1.5rem, bold # Section headers
H3: 1.25rem, bold # Subsection headers
Body: 1rem, normal # Main text
Small: 0.875rem, normal # Secondary text
Code: 'Courier New', mono # Code blocks
```
### Spacing
```
xs: 0.25rem (4px)
sm: 0.5rem (8px)
md: 1rem (16px)
lg: 1.5rem (24px)
xl: 2rem (32px)
2xl: 3rem (48px)
```
### Components
#### Card
```css
background: #0f1419
border: 1px solid #1a1f2e
border-radius: 8px
padding: 1.5rem
transition: transform 0.2s
hover: transform: translateY(-4px)
```
#### Button
```css
background: #00d4ff
color: #0a0e1a
border: none
padding: 0.75rem 1.5rem
border-radius: 4px
font-weight: bold
hover: background: #00b8e6
```
#### Input
```css
background: #0a0e1a
border: 1px solid #1a1f2e
border-radius: 4px
padding: 1rem
color: #e0e6ed
focus: border-color: #00d4ff
```
## 🔄 Real-Time Updates
### WebSocket Flow
```
Client Server
│ │
├──── connect ────────────────>│
│<──── connected ───────────────┤
│ │
├──── subscribe: "metrics" ──>│
│<──── subscribed ──────────────┤
│ │
│<──── update: metrics ─────────┤ (every 5s)
│<──── update: metrics ─────────┤
│<──── update: metrics ─────────┤
│ │
├──── ping ───────────────────>│
│<──── pong ────────────────────┤
│ │
├──── close ───────────────────>│
│<──── closed ───────────────────┤
```
## 📱 Responsive Design
### Desktop (>1024px)
```
┌──────────────────────────────────────────────────────┐
│ Header │
├──────────┬───────────────────────────────────────────┤
│ Sidebar │ Main Content (Dashboard/Explorer/etc) │
│ │ │
│ • Home │ ┌─────┐ ┌─────┐ ┌─────┐ │
│ • DB │ │Card │ │Card │ │Card │ │
│ • Store │ └─────┘ └─────┘ └─────┘ │
│ • Obs │ │
│ • Bill │ ┌──────────────────────────┐ │
│ │ │ Charts / Tables │ │
│ │ └──────────────────────────┘ │
└──────────┴───────────────────────────────────────────┘
```
### Mobile (<768px)
```
┌──────────────────┐
│ ☰ AVL Console │
├──────────────────┤
│ │
│ ┌──────────────┐ │
│ │ Metric Card │ │
│ └──────────────┘ │
│ │
│ ┌──────────────┐ │
│ │ Metric Card │ │
│ └──────────────┘ │
│ │
│ ┌──────────────┐ │
│ │ Content │ │
│ │ │ │
│ └──────────────┘ │
│ │
└──────────────────┘
```
## 🎭 Animations
- **Page Load**: Fade-in (0.3s)
- **Card Hover**: Translate up 4px (0.2s)
- **Button Hover**: Color transition (0.2s)
- **Metric Update**: Number count-up animation
- **Chart Draw**: Animated line drawing
- **Menu Open**: Slide-in from left (0.3s)
## 🌐 Internationalization
### Supported Languages
- 🇧🇷 Português (pt-BR) - Primary
- 🇺🇸 English (en-US) - Secondary
### Example Strings
```json
{
"dashboard": {
"title": {
"pt-BR": "Painel de Controle",
"en-US": "Dashboard"
},
"metrics": {
"databases": {
"pt-BR": "Bancos de Dados",
"en-US": "Databases"
},
"storage": {
"pt-BR": "Armazenamento",
"en-US": "Storage"
}
}
}
}
```
---
**🎨 AVL Console** - Beautiful, Fast, Secure