# Monetarie NPC Backoffice - Dashboard Design

**Date:** 2025-02-03
**Status:** Approved

## Overview

A professional Vue 3 dashboard for Monetarie NPC Backoffice featuring multi-language support, system health monitoring, SISBAJUD order management, and an AI support agent (SERENA).

## Tech Stack

| Technology | Version | Purpose |
|------------|---------|---------|
| Vue | 3.x | Frontend framework |
| Vite | 5.x | Build tool |
| TypeScript | 5.x | Type safety |
| Vuetify | 3.x | UI components |
| Pinia | 2.x | State management |
| Vue Router | 4.x | Routing |
| vue-i18n | 9.x | Internationalization |
| VitePress | 1.x | Documentation |

## Architecture

### Project Structure

```
monetarie_npc-backoffice/
├── src/
│   ├── features/
│   │   ├── auth/           # Login screen
│   │   ├── dashboard/      # Main dashboard, Health, SISBAJUD
│   │   ├── accounts/       # Create, Edit, Close accounts
│   │   ├── settings/       # SPB, SPI, STA, Nuclea, SISBAJUD, Users
│   │   └── serena/         # Support chat agent
│   ├── shared/             # Shared components, composables, utils
│   ├── layouts/            # AppLayout (topbar, sidebars)
│   ├── stores/             # Pinia stores
│   ├── i18n/               # Internationalization setup
│   ├── mocks/              # Mock data files
│   └── router/             # Vue Router config
├── docs/                   # VitePress documentation
├── CLAUDE.md               # Development tracking
└── README.md               # Professional project readme
```

## Layout Structure

```
┌─────────────────────────────────────────────────────────────────┐
│  TOPBAR                                                         │
│  [☰]        [        Search (40%)        ]    [🔔] [User ▼]    │
├────────┬────────────────────────────────────────────┬───────────┤
│  LEFT  │              MAIN CONTENT                  │   RIGHT   │
│  MENU  │                                            │   PANEL   │
│        │  ┌─────────────────────────────────┐       │           │
│ Accounts│  │  Health Panel                   │       │  RSS Feed │
│  Create │  │  [SPB] [SPI] [STA] [NUCLEA]    │       │           │
│  Edit   │  └─────────────────────────────────┘       │  ──────── │
│  Close  │                                            │           │
│        │  ┌─────────────────────────────────┐       │  Pending  │
│ Settings│  │  SISBAJUD – Orders              │       │  Notifs   │
│  SPB   │  │  • Order list with pagination   │       │           │
│  SPI   │  └─────────────────────────────────┘       │           │
│  ...   │                                            │           │
│  [«]   │                                    [SERENA]│     [»]   │
└────────┴────────────────────────────────────────────┴───────────┘
```

### Sidebar Behavior

- **Left sidebar:** Uses Vuetify `v-navigation-drawer` with `rail` prop for icon-only collapsed mode
- **Right panel:** Fully hidden when collapsed, toggle button remains visible
- **Persistence:** Collapse states stored in localStorage via Pinia

## Authentication

### Login Screen

- Centered card with logo, email/password fields
- Language switcher (PT-BR | EN | 中文)
- Password visibility toggle

### Mock Credentials

- Email: `admin@monetarie_npc.com.br`
- Password: `admin123`

### User Object

```typescript
interface User {
  id: string;
  name: string;
  email: string;
  avatar: string;
  role: 'admin' | 'user';
}
```

### Auth Flow

1. Validate credentials against mock data
2. Set `isAuthenticated = true` in auth store
3. Store user in localStorage for persistence
4. Redirect to dashboard
5. Route guard protects all routes except `/login`

## Dashboard Components

### Health Panel

Displays system status with color-coded badges.

```typescript
interface HealthStatus {
  id: string;        // 'spb' | 'spi' | 'sta' | 'nuclea'
  name: string;
  status: 'online' | 'offline';
  lastCheck: string; // ISO date
}
```

- Green badge = online
- Red badge with pulse animation = offline
- Click navigates to Settings page for that system

### SISBAJUD Orders Panel

Data table with judicial orders.

```typescript
interface SisbajudOrder {
  id: string;
  type: 'Bloqueio' | 'Desbloqueio' | 'Transferência';
  account: string;   // Masked account number
  value: number;
  status: 'Pendente' | 'Executado' | 'Rejeitado';
  date: string;      // ISO date
}
```

- Paginated table with 10 items per page
- Status badges with color coding
- Sortable columns

## Right Sidebar

### RSS Feed

```typescript
interface RssFeedItem {
  id: number;
  title: string;
  source: string;
  date: string;
  url: string;
}
```

### Pending Notifications

```typescript
interface PendingNotification {
  id: number;
  type: 'approval' | 'review' | 'alert';
  title: string;
  entity: string;
  priority: 'high' | 'medium' | 'low';
}
```

- Priority dots: high (red), medium (yellow), low (gray)
- Counter syncs with topbar notification bell

## SERENA Support Agent

### Floating Button

- 56px circular button, bottom-right corner
- Purple/brand gradient background
- "S" letter centered
- Pulse animation when new message

### Chat Window

- 360px × 480px dimensions
- Header with minimize/close buttons
- Message history with user/bot distinction
- Input field with send button
- Typing indicator animation

### Mock Responses

Keyword-based responses for: PIX, conta, bloqueio, saldo, transferência
Fallback: "Entendi! Vou encaminhar para um atendente."

## Internationalization

### Languages

| Code | Language | Status |
|------|----------|--------|
| pt-BR | Português (Brasil) | Default |
| en | English | Secondary |
| zh-CN | 简体中文 | Secondary |

### File Structure

```
src/i18n/
├── index.ts
└── locales/
    ├── pt-BR.ts
    ├── en.ts
    └── zh-CN.ts
```

### Translation Keys

Organized by feature: `common`, `auth`, `dashboard`, `accounts`, `settings`, `serena`

## Navigation Menu Structure

### Accounts (Contas)

- Create (Criar)
- Edit (Editar)
- Close (Encerrar)

### Settings (Configurações)

- SPB
- SPI
- STA
- Nuclea
- SISBAJUD
- Users (Usuários)

## User Dropdown Menu

- Change avatar (Alterar avatar)
- Language selector
- Logout (Sair)

## Mock Data

All data is mocked and stored in `/src/mocks/`:

- `users.ts` - User credentials and profiles
- `health.ts` - System health statuses
- `sisbajud.ts` - SISBAJUD orders
- `rss.ts` - RSS feed items
- `notifications.ts` - Pending notifications
- `serena.ts` - Chat responses

## Documentation

### VitePress Structure

- Getting Started guide
- Authentication documentation
- Features overview
- Component API reference
- Store documentation

### CLAUDE.md

Development tracking file with:
- Project overview
- Tech stack decisions
- Current status
- Available commands

### README.md

Professional readme with:
- Project badges
- Screenshots section
- Installation instructions
- Available scripts
- Project structure
- Contributing guidelines
- License