# Monetarie NPC Backoffice Dashboard - Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Build a professional Vue 3 dashboard with authentication, multi-language support, system health monitoring, SISBAJUD order management, and SERENA AI chat support.

**Architecture:** Feature-based Vue 3 application with Vuetify 3 for UI, Pinia for state management, and vue-i18n for internationalization. All data is mocked. Three-column layout with collapsible sidebars.

**Tech Stack:** Vue 3, Vite, TypeScript, Vuetify 3, Pinia, Vue Router 4, vue-i18n 9, VitePress

---

## Phase 1: Project Initialization (Sequential)

### Task 1.1: Initialize Vue Project

**Files:**
- Create: `package.json`
- Create: `vite.config.ts`
- Create: `tsconfig.json`
- Create: `src/main.ts`
- Create: `src/App.vue`
- Create: `index.html`

**Step 1: Create Vue project with Vite**

Run:
```bash
npm create vite@latest . -- --template vue-ts
```

Expected: Project scaffolded with Vue 3 + TypeScript

**Step 2: Install core dependencies**

Run:
```bash
npm install vuetify@^3 @mdi/font pinia vue-router@4 vue-i18n@9
npm install -D sass vite-plugin-vuetify @types/node
```

Expected: All dependencies installed

**Step 3: Commit initial setup**

```bash
git add -A
git commit -m "chore: initialize Vue 3 project with Vite and TypeScript"
```

---

### Task 1.2: Configure Vuetify

**Files:**
- Create: `src/plugins/vuetify.ts`
- Modify: `src/main.ts`

**Step 1: Create Vuetify plugin configuration**

Create `src/plugins/vuetify.ts`:
```typescript
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FFC107',
          serena: '#7C4DFF'
        }
      }
    }
  },
  defaults: {
    VBtn: {
      variant: 'flat'
    },
    VCard: {
      elevation: 2
    }
  }
})
```

**Step 2: Update vite.config.ts**

Replace `vite.config.ts`:
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
```

**Step 3: Update main.ts to use Vuetify**

Replace `src/main.ts`:
```typescript
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import vuetify from './plugins/vuetify'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())
app.use(vuetify)

app.mount('#app')
```

**Step 4: Commit Vuetify setup**

```bash
git add -A
git commit -m "feat: configure Vuetify 3 with custom theme"
```

---

### Task 1.3: Configure Vue Router

**Files:**
- Create: `src/router/index.ts`
- Modify: `src/main.ts`

**Step 1: Create router configuration**

Create `src/router/index.ts`:
```typescript
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/features/auth/views/LoginView.vue'),
    meta: { requiresAuth: false }
  },
  {
    path: '/',
    name: 'dashboard',
    component: () => import('@/features/dashboard/views/DashboardView.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/accounts/:action',
    name: 'accounts',
    component: () => import('@/features/accounts/views/AccountsView.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/settings/:section',
    name: 'settings',
    component: () => import('@/features/settings/views/SettingsView.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/'
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
```

**Step 2: Add router to main.ts**

Update `src/main.ts`:
```typescript
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import vuetify from './plugins/vuetify'
import router from './router'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(vuetify)

app.mount('#app')
```

**Step 3: Commit router setup**

```bash
git add -A
git commit -m "feat: configure Vue Router with route definitions"
```

---

### Task 1.4: Configure vue-i18n

**Files:**
- Create: `src/i18n/index.ts`
- Create: `src/i18n/locales/pt-BR.ts`
- Create: `src/i18n/locales/en.ts`
- Create: `src/i18n/locales/zh-CN.ts`
- Modify: `src/main.ts`

**Step 1: Create Portuguese translations**

Create `src/i18n/locales/pt-BR.ts`:
```typescript
export default {
  common: {
    search: 'Pesquisar',
    notifications: 'Notificações',
    logout: 'Sair',
    changeAvatar: 'Alterar avatar',
    language: 'Idioma',
    save: 'Salvar',
    cancel: 'Cancelar',
    confirm: 'Confirmar',
    delete: 'Excluir',
    edit: 'Editar',
    create: 'Criar',
    close: 'Fechar',
    back: 'Voltar',
    loading: 'Carregando...',
    noData: 'Nenhum dado encontrado',
    actions: 'Ações'
  },
  auth: {
    title: 'Entrar',
    email: 'E-mail',
    password: 'Senha',
    submit: 'Entrar',
    invalidCredentials: 'Credenciais inválidas',
    welcomeBack: 'Bem-vindo de volta'
  },
  dashboard: {
    title: 'Dashboard',
    health: 'Saúde dos Sistemas',
    online: 'Online',
    offline: 'Offline',
    lastCheck: 'Última verificação',
    sisbajudOrders: 'SISBAJUD – Ordens',
    orderId: 'ID',
    orderType: 'Tipo',
    orderAccount: 'Conta',
    orderValue: 'Valor',
    orderStatus: 'Status',
    orderDate: 'Data',
    pending: 'Pendente',
    executed: 'Executado',
    rejected: 'Rejeitado'
  },
  sidebar: {
    accounts: 'Contas',
    accountsCreate: 'Criar',
    accountsEdit: 'Editar',
    accountsClose: 'Encerrar',
    settings: 'Configurações',
    users: 'Usuários',
    collapse: 'Recolher',
    expand: 'Expandir'
  },
  rightPanel: {
    rssFeed: 'Feed de Notícias',
    pendingNotifications: 'Notificações Pendentes',
    viewMore: 'Ver mais',
    markAsRead: 'Marcar como lido',
    highPriority: 'Alta prioridade',
    mediumPriority: 'Média prioridade',
    lowPriority: 'Baixa prioridade'
  },
  serena: {
    title: 'SERENA',
    placeholder: 'Digite sua mensagem...',
    greeting: 'Olá! Sou a SERENA, sua assistente virtual. Como posso ajudar?',
    fallback: 'Entendi! Vou encaminhar para um atendente.',
    tooltip: 'Fale com a SERENA'
  },
  accounts: {
    title: 'Contas',
    create: {
      title: 'Criar Conta',
      accountHolder: 'Titular da Conta',
      accountType: 'Tipo de Conta',
      branch: 'Agência',
      accountNumber: 'Número da Conta',
      initialBalance: 'Saldo Inicial',
      success: 'Conta criada com sucesso'
    },
    edit: {
      title: 'Editar Conta',
      success: 'Conta atualizada com sucesso'
    },
    close: {
      title: 'Encerrar Conta',
      warning: 'Esta ação não pode ser desfeita',
      reason: 'Motivo do encerramento',
      success: 'Conta encerrada com sucesso'
    }
  },
  settings: {
    title: 'Configurações',
    spb: {
      title: 'SPB - Sistema de Pagamentos Brasileiro',
      endpoint: 'Endpoint',
      timeout: 'Timeout (ms)',
      retries: 'Tentativas'
    },
    spi: {
      title: 'SPI - Sistema de Pagamentos Instantâneos',
      endpoint: 'Endpoint',
      pixKey: 'Chave PIX padrão'
    },
    sta: {
      title: 'STA - Sistema de Transferência de Arquivos',
      endpoint: 'Endpoint',
      schedule: 'Agendamento'
    },
    nuclea: {
      title: 'NUCLEA',
      endpoint: 'Endpoint',
      certificate: 'Certificado'
    },
    sisbajud: {
      title: 'SISBAJUD',
      endpoint: 'Endpoint',
      courtId: 'ID do Tribunal'
    },
    users: {
      title: 'Usuários',
      name: 'Nome',
      email: 'E-mail',
      role: 'Perfil',
      status: 'Status',
      active: 'Ativo',
      inactive: 'Inativo',
      admin: 'Administrador',
      user: 'Usuário'
    }
  }
}
```

**Step 2: Create English translations**

Create `src/i18n/locales/en.ts`:
```typescript
export default {
  common: {
    search: 'Search',
    notifications: 'Notifications',
    logout: 'Logout',
    changeAvatar: 'Change avatar',
    language: 'Language',
    save: 'Save',
    cancel: 'Cancel',
    confirm: 'Confirm',
    delete: 'Delete',
    edit: 'Edit',
    create: 'Create',
    close: 'Close',
    back: 'Back',
    loading: 'Loading...',
    noData: 'No data found',
    actions: 'Actions'
  },
  auth: {
    title: 'Sign In',
    email: 'Email',
    password: 'Password',
    submit: 'Sign In',
    invalidCredentials: 'Invalid credentials',
    welcomeBack: 'Welcome back'
  },
  dashboard: {
    title: 'Dashboard',
    health: 'System Health',
    online: 'Online',
    offline: 'Offline',
    lastCheck: 'Last check',
    sisbajudOrders: 'SISBAJUD – Orders',
    orderId: 'ID',
    orderType: 'Type',
    orderAccount: 'Account',
    orderValue: 'Value',
    orderStatus: 'Status',
    orderDate: 'Date',
    pending: 'Pending',
    executed: 'Executed',
    rejected: 'Rejected'
  },
  sidebar: {
    accounts: 'Accounts',
    accountsCreate: 'Create',
    accountsEdit: 'Edit',
    accountsClose: 'Close',
    settings: 'Settings',
    users: 'Users',
    collapse: 'Collapse',
    expand: 'Expand'
  },
  rightPanel: {
    rssFeed: 'News Feed',
    pendingNotifications: 'Pending Notifications',
    viewMore: 'View more',
    markAsRead: 'Mark as read',
    highPriority: 'High priority',
    mediumPriority: 'Medium priority',
    lowPriority: 'Low priority'
  },
  serena: {
    title: 'SERENA',
    placeholder: 'Type your message...',
    greeting: 'Hello! I am SERENA, your virtual assistant. How can I help you?',
    fallback: 'Got it! I will forward this to an attendant.',
    tooltip: 'Talk to SERENA'
  },
  accounts: {
    title: 'Accounts',
    create: {
      title: 'Create Account',
      accountHolder: 'Account Holder',
      accountType: 'Account Type',
      branch: 'Branch',
      accountNumber: 'Account Number',
      initialBalance: 'Initial Balance',
      success: 'Account created successfully'
    },
    edit: {
      title: 'Edit Account',
      success: 'Account updated successfully'
    },
    close: {
      title: 'Close Account',
      warning: 'This action cannot be undone',
      reason: 'Reason for closing',
      success: 'Account closed successfully'
    }
  },
  settings: {
    title: 'Settings',
    spb: {
      title: 'SPB - Brazilian Payment System',
      endpoint: 'Endpoint',
      timeout: 'Timeout (ms)',
      retries: 'Retries'
    },
    spi: {
      title: 'SPI - Instant Payment System',
      endpoint: 'Endpoint',
      pixKey: 'Default PIX Key'
    },
    sta: {
      title: 'STA - File Transfer System',
      endpoint: 'Endpoint',
      schedule: 'Schedule'
    },
    nuclea: {
      title: 'NUCLEA',
      endpoint: 'Endpoint',
      certificate: 'Certificate'
    },
    sisbajud: {
      title: 'SISBAJUD',
      endpoint: 'Endpoint',
      courtId: 'Court ID'
    },
    users: {
      title: 'Users',
      name: 'Name',
      email: 'Email',
      role: 'Role',
      status: 'Status',
      active: 'Active',
      inactive: 'Inactive',
      admin: 'Administrator',
      user: 'User'
    }
  }
}
```

**Step 3: Create Chinese translations**

Create `src/i18n/locales/zh-CN.ts`:
```typescript
export default {
  common: {
    search: '搜索',
    notifications: '通知',
    logout: '退出',
    changeAvatar: '更换头像',
    language: '语言',
    save: '保存',
    cancel: '取消',
    confirm: '确认',
    delete: '删除',
    edit: '编辑',
    create: '创建',
    close: '关闭',
    back: '返回',
    loading: '加载中...',
    noData: '暂无数据',
    actions: '操作'
  },
  auth: {
    title: '登录',
    email: '邮箱',
    password: '密码',
    submit: '登录',
    invalidCredentials: '凭据无效',
    welcomeBack: '欢迎回来'
  },
  dashboard: {
    title: '仪表板',
    health: '系统健康',
    online: '在线',
    offline: '离线',
    lastCheck: '最后检查',
    sisbajudOrders: 'SISBAJUD – 订单',
    orderId: 'ID',
    orderType: '类型',
    orderAccount: '账户',
    orderValue: '金额',
    orderStatus: '状态',
    orderDate: '日期',
    pending: '待处理',
    executed: '已执行',
    rejected: '已拒绝'
  },
  sidebar: {
    accounts: '账户',
    accountsCreate: '创建',
    accountsEdit: '编辑',
    accountsClose: '关闭',
    settings: '设置',
    users: '用户',
    collapse: '收起',
    expand: '展开'
  },
  rightPanel: {
    rssFeed: '新闻动态',
    pendingNotifications: '待处理通知',
    viewMore: '查看更多',
    markAsRead: '标记为已读',
    highPriority: '高优先级',
    mediumPriority: '中优先级',
    lowPriority: '低优先级'
  },
  serena: {
    title: 'SERENA',
    placeholder: '输入您的消息...',
    greeting: '您好！我是SERENA，您的虚拟助手。有什么可以帮您的吗？',
    fallback: '明白了！我会转接给客服人员。',
    tooltip: '与SERENA交谈'
  },
  accounts: {
    title: '账户',
    create: {
      title: '创建账户',
      accountHolder: '账户持有人',
      accountType: '账户类型',
      branch: '分行',
      accountNumber: '账号',
      initialBalance: '初始余额',
      success: '账户创建成功'
    },
    edit: {
      title: '编辑账户',
      success: '账户更新成功'
    },
    close: {
      title: '关闭账户',
      warning: '此操作无法撤销',
      reason: '关闭原因',
      success: '账户关闭成功'
    }
  },
  settings: {
    title: '设置',
    spb: {
      title: 'SPB - 巴西支付系统',
      endpoint: '端点',
      timeout: '超时 (毫秒)',
      retries: '重试次数'
    },
    spi: {
      title: 'SPI - 即时支付系统',
      endpoint: '端点',
      pixKey: '默认PIX密钥'
    },
    sta: {
      title: 'STA - 文件传输系统',
      endpoint: '端点',
      schedule: '计划'
    },
    nuclea: {
      title: 'NUCLEA',
      endpoint: '端点',
      certificate: '证书'
    },
    sisbajud: {
      title: 'SISBAJUD',
      endpoint: '端点',
      courtId: '法院ID'
    },
    users: {
      title: '用户',
      name: '姓名',
      email: '邮箱',
      role: '角色',
      status: '状态',
      active: '活跃',
      inactive: '未活跃',
      admin: '管理员',
      user: '用户'
    }
  }
}
```

**Step 4: Create i18n setup**

Create `src/i18n/index.ts`:
```typescript
import { createI18n } from 'vue-i18n'
import ptBR from './locales/pt-BR'
import en from './locales/en'
import zhCN from './locales/zh-CN'

const savedLocale = localStorage.getItem('locale') || 'pt-BR'

const i18n = createI18n({
  legacy: false,
  locale: savedLocale,
  fallbackLocale: 'pt-BR',
  messages: {
    'pt-BR': ptBR,
    'en': en,
    'zh-CN': zhCN
  }
})

export default i18n

export const availableLocales = [
  { code: 'pt-BR', name: 'Português', flag: '🇧🇷' },
  { code: 'en', name: 'English', flag: '🇺🇸' },
  { code: 'zh-CN', name: '简体中文', flag: '🇨🇳' }
]

export function setLocale(locale: string) {
  i18n.global.locale.value = locale
  localStorage.setItem('locale', locale)
  document.documentElement.setAttribute('lang', locale)
}
```

**Step 5: Add i18n to main.ts**

Update `src/main.ts`:
```typescript
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import vuetify from './plugins/vuetify'
import router from './router'
import i18n from './i18n'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(i18n)
app.use(vuetify)

app.mount('#app')
```

**Step 6: Commit i18n setup**

```bash
git add -A
git commit -m "feat: configure vue-i18n with PT-BR, EN, ZH-CN translations"
```

---

## Phase 2: Mock Data & Stores (Can run in parallel)

### Task 2.1: Create Mock Data Files

**Files:**
- Create: `src/mocks/users.ts`
- Create: `src/mocks/health.ts`
- Create: `src/mocks/sisbajud.ts`
- Create: `src/mocks/rss.ts`
- Create: `src/mocks/notifications.ts`
- Create: `src/mocks/serena.ts`

**Step 1: Create users mock**

Create `src/mocks/users.ts`:
```typescript
export interface User {
  id: string
  name: string
  email: string
  password: string
  avatar: string
  role: 'admin' | 'user'
}

export const mockUsers: User[] = [
  {
    id: '1',
    name: 'Felipe Santiago',
    email: 'admin@monetarie_npc.com.br',
    password: 'admin123',
    avatar: '',
    role: 'admin'
  },
  {
    id: '2',
    name: 'Maria Silva',
    email: 'maria@monetarie_npc.com.br',
    password: 'user123',
    avatar: '',
    role: 'user'
  }
]

export function findUserByCredentials(email: string, password: string): User | undefined {
  return mockUsers.find(u => u.email === email && u.password === password)
}
```

**Step 2: Create health mock**

Create `src/mocks/health.ts`:
```typescript
export interface HealthStatus {
  id: string
  name: string
  status: 'online' | 'offline'
  lastCheck: string
}

export const mockHealthStatus: HealthStatus[] = [
  { id: 'spb', name: 'SPB', status: 'online', lastCheck: new Date().toISOString() },
  { id: 'spi', name: 'SPI', status: 'online', lastCheck: new Date().toISOString() },
  { id: 'sta', name: 'STA', status: 'offline', lastCheck: new Date(Date.now() - 900000).toISOString() },
  { id: 'nuclea', name: 'NUCLEA', status: 'online', lastCheck: new Date().toISOString() }
]
```

**Step 3: Create SISBAJUD mock**

Create `src/mocks/sisbajud.ts`:
```typescript
export interface SisbajudOrder {
  id: string
  type: 'Bloqueio' | 'Desbloqueio' | 'Transferência'
  account: string
  value: number
  status: 'Pendente' | 'Executado' | 'Rejeitado'
  date: string
}

export const mockSisbajudOrders: SisbajudOrder[] = [
  { id: '2024-001', type: 'Bloqueio', account: '****1234', value: 15000.00, status: 'Pendente', date: '2024-02-03' },
  { id: '2024-002', type: 'Desbloqueio', account: '****5678', value: 8500.00, status: 'Executado', date: '2024-02-02' },
  { id: '2024-003', type: 'Transferência', account: '****9012', value: 25000.00, status: 'Pendente', date: '2024-02-01' },
  { id: '2024-004', type: 'Bloqueio', account: '****3456', value: 50000.00, status: 'Executado', date: '2024-01-31' },
  { id: '2024-005', type: 'Bloqueio', account: '****7890', value: 12000.00, status: 'Rejeitado', date: '2024-01-30' },
  { id: '2024-006', type: 'Transferência', account: '****2345', value: 75000.00, status: 'Pendente', date: '2024-01-29' },
  { id: '2024-007', type: 'Desbloqueio', account: '****6789', value: 30000.00, status: 'Executado', date: '2024-01-28' },
  { id: '2024-008', type: 'Bloqueio', account: '****0123', value: 5000.00, status: 'Pendente', date: '2024-01-27' }
]
```

**Step 4: Create RSS mock**

Create `src/mocks/rss.ts`:
```typescript
export interface RssFeedItem {
  id: number
  title: string
  source: string
  date: string
  url: string
}

export const mockRssFeed: RssFeedItem[] = [
  { id: 1, title: 'BCB anuncia novas regras para PIX', source: 'Banco Central', date: '2024-02-03', url: '#' },
  { id: 2, title: 'Manutenção programada SPI - 05/02', source: 'Sistema', date: '2024-02-02', url: '#' },
  { id: 3, title: 'Atualização Nuclea v2.5 disponível', source: 'Nuclea', date: '2024-02-01', url: '#' },
  { id: 4, title: 'Novo certificado digital requerido', source: 'Segurança', date: '2024-01-31', url: '#' },
  { id: 5, title: 'Relatório mensal de transações', source: 'Relatórios', date: '2024-01-30', url: '#' }
]
```

**Step 5: Create notifications mock**

Create `src/mocks/notifications.ts`:
```typescript
export interface PendingNotification {
  id: number
  type: 'approval' | 'review' | 'alert'
  title: string
  entity: string
  priority: 'high' | 'medium' | 'low'
  read: boolean
  createdAt: string
}

export const mockPendingNotifications: PendingNotification[] = [
  { id: 1, type: 'approval', title: 'Conta aguardando aprovação', entity: 'João Silva', priority: 'high', read: false, createdAt: '2024-02-03T10:30:00' },
  { id: 2, type: 'review', title: 'Ordem SISBAJUD para revisão', entity: '#2024-003', priority: 'medium', read: false, createdAt: '2024-02-03T09:15:00' },
  { id: 3, type: 'alert', title: 'STA offline há 15 minutos', entity: 'Sistema', priority: 'high', read: false, createdAt: '2024-02-03T10:15:00' },
  { id: 4, type: 'approval', title: 'Transferência aguardando', entity: 'R$ 75.000,00', priority: 'medium', read: false, createdAt: '2024-02-02T16:45:00' },
  { id: 5, type: 'review', title: 'Documentação pendente', entity: 'Maria Santos', priority: 'low', read: true, createdAt: '2024-02-02T14:20:00' }
]
```

**Step 6: Create SERENA mock**

Create `src/mocks/serena.ts`:
```typescript
export interface ChatMessage {
  id: number
  role: 'user' | 'assistant'
  content: string
  timestamp: string
}

export interface SerenResponse {
  keywords: string[]
  response: string
}

export const serenaResponses: SerenResponse[] = [
  {
    keywords: ['pix', 'transferência', 'transferir'],
    response: 'Para realizar uma transferência PIX, acesse o menu Contas e selecione a opção de transferência. Precisa de mais detalhes?'
  },
  {
    keywords: ['conta', 'abrir', 'criar', 'nova'],
    response: 'Para criar uma nova conta, vá em Contas > Criar. Você precisará dos documentos do titular. Posso ajudar com algo mais?'
  },
  {
    keywords: ['bloqueio', 'bloquear', 'sisbajud'],
    response: 'As ordens de bloqueio SISBAJUD são processadas automaticamente. Você pode verificar o status no painel SISBAJUD – Ordens.'
  },
  {
    keywords: ['saldo', 'extrato', 'consulta'],
    response: 'Para consultar saldo ou extrato, acesse Contas > Editar e selecione a conta desejada.'
  },
  {
    keywords: ['erro', 'problema', 'falha'],
    response: 'Sinto muito pelo inconveniente. Pode me descrever o erro com mais detalhes para que eu possa ajudar melhor?'
  },
  {
    keywords: ['ajuda', 'help', 'suporte'],
    response: 'Estou aqui para ajudar! Você pode me perguntar sobre: PIX, contas, transferências, bloqueios SISBAJUD, ou configurações do sistema.'
  }
]

export function getSerenaResponse(message: string): string {
  const lowerMessage = message.toLowerCase()

  for (const item of serenaResponses) {
    if (item.keywords.some(keyword => lowerMessage.includes(keyword))) {
      return item.response
    }
  }

  return '' // Will use fallback from i18n
}
```

**Step 7: Commit mock data**

```bash
git add -A
git commit -m "feat: add mock data for users, health, sisbajud, rss, notifications, serena"
```

---

### Task 2.2: Create Pinia Stores

**Files:**
- Create: `src/stores/auth.ts`
- Create: `src/stores/sidebar.ts`
- Create: `src/stores/dashboard.ts`
- Create: `src/stores/notifications.ts`
- Create: `src/stores/serena.ts`

**Step 1: Create auth store**

Create `src/stores/auth.ts`:
```typescript
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { findUserByCredentials, type User } from '@/mocks/users'

export const useAuthStore = defineStore('auth', () => {
  const user = ref<User | null>(null)
  const isAuthenticated = computed(() => user.value !== null)

  function init() {
    const savedUser = localStorage.getItem('user')
    if (savedUser) {
      user.value = JSON.parse(savedUser)
    }
  }

  function login(email: string, password: string): boolean {
    const foundUser = findUserByCredentials(email, password)
    if (foundUser) {
      const { password: _, ...userWithoutPassword } = foundUser
      user.value = foundUser
      localStorage.setItem('user', JSON.stringify(userWithoutPassword))
      return true
    }
    return false
  }

  function logout() {
    user.value = null
    localStorage.removeItem('user')
  }

  function updateAvatar(avatar: string) {
    if (user.value) {
      user.value.avatar = avatar
      localStorage.setItem('user', JSON.stringify(user.value))
    }
  }

  init()

  return {
    user,
    isAuthenticated,
    login,
    logout,
    updateAvatar
  }
})
```

**Step 2: Create sidebar store**

Create `src/stores/sidebar.ts`:
```typescript
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useSidebarStore = defineStore('sidebar', () => {
  const leftCollapsed = ref(localStorage.getItem('leftSidebarCollapsed') === 'true')
  const rightCollapsed = ref(localStorage.getItem('rightSidebarCollapsed') === 'true')

  function toggleLeft() {
    leftCollapsed.value = !leftCollapsed.value
    localStorage.setItem('leftSidebarCollapsed', String(leftCollapsed.value))
  }

  function toggleRight() {
    rightCollapsed.value = !rightCollapsed.value
    localStorage.setItem('rightSidebarCollapsed', String(rightCollapsed.value))
  }

  function setLeft(collapsed: boolean) {
    leftCollapsed.value = collapsed
    localStorage.setItem('leftSidebarCollapsed', String(collapsed))
  }

  function setRight(collapsed: boolean) {
    rightCollapsed.value = collapsed
    localStorage.setItem('rightSidebarCollapsed', String(collapsed))
  }

  return {
    leftCollapsed,
    rightCollapsed,
    toggleLeft,
    toggleRight,
    setLeft,
    setRight
  }
})
```

**Step 3: Create dashboard store**

Create `src/stores/dashboard.ts`:
```typescript
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { mockHealthStatus, type HealthStatus } from '@/mocks/health'
import { mockSisbajudOrders, type SisbajudOrder } from '@/mocks/sisbajud'
import { mockRssFeed, type RssFeedItem } from '@/mocks/rss'

export const useDashboardStore = defineStore('dashboard', () => {
  const healthStatus = ref<HealthStatus[]>([...mockHealthStatus])
  const sisbajudOrders = ref<SisbajudOrder[]>([...mockSisbajudOrders])
  const rssFeed = ref<RssFeedItem[]>([...mockRssFeed])

  function refreshHealth() {
    // Simulate random status changes
    healthStatus.value = healthStatus.value.map(h => ({
      ...h,
      lastCheck: new Date().toISOString()
    }))
  }

  return {
    healthStatus,
    sisbajudOrders,
    rssFeed,
    refreshHealth
  }
})
```

**Step 4: Create notifications store**

Create `src/stores/notifications.ts`:
```typescript
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { mockPendingNotifications, type PendingNotification } from '@/mocks/notifications'

export const useNotificationsStore = defineStore('notifications', () => {
  const notifications = ref<PendingNotification[]>([...mockPendingNotifications])

  const unreadCount = computed(() =>
    notifications.value.filter(n => !n.read).length
  )

  const pendingNotifications = computed(() =>
    notifications.value.filter(n => !n.read)
  )

  function markAsRead(id: number) {
    const notification = notifications.value.find(n => n.id === id)
    if (notification) {
      notification.read = true
    }
  }

  function markAllAsRead() {
    notifications.value.forEach(n => n.read = true)
  }

  return {
    notifications,
    unreadCount,
    pendingNotifications,
    markAsRead,
    markAllAsRead
  }
})
```

**Step 5: Create SERENA store**

Create `src/stores/serena.ts`:
```typescript
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { getSerenaResponse, type ChatMessage } from '@/mocks/serena'

export const useSerenaStore = defineStore('serena', () => {
  const isOpen = ref(false)
  const isTyping = ref(false)
  const messages = ref<ChatMessage[]>([])

  function init() {
    const savedMessages = localStorage.getItem('serenaMessages')
    if (savedMessages) {
      messages.value = JSON.parse(savedMessages)
    }
  }

  function open() {
    isOpen.value = true
  }

  function close() {
    isOpen.value = false
  }

  function toggle() {
    isOpen.value = !isOpen.value
  }

  async function sendMessage(content: string, fallbackMessage: string) {
    const userMessage: ChatMessage = {
      id: Date.now(),
      role: 'user',
      content,
      timestamp: new Date().toISOString()
    }
    messages.value.push(userMessage)
    saveMessages()

    isTyping.value = true

    // Simulate typing delay
    await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000))

    const response = getSerenaResponse(content) || fallbackMessage

    const assistantMessage: ChatMessage = {
      id: Date.now() + 1,
      role: 'assistant',
      content: response,
      timestamp: new Date().toISOString()
    }
    messages.value.push(assistantMessage)
    saveMessages()

    isTyping.value = false
  }

  function saveMessages() {
    localStorage.setItem('serenaMessages', JSON.stringify(messages.value))
  }

  function clearHistory() {
    messages.value = []
    localStorage.removeItem('serenaMessages')
  }

  init()

  return {
    isOpen,
    isTyping,
    messages,
    open,
    close,
    toggle,
    sendMessage,
    clearHistory
  }
})
```

**Step 6: Commit stores**

```bash
git add -A
git commit -m "feat: create Pinia stores for auth, sidebar, dashboard, notifications, serena"
```

---

## Phase 3: Layout Components (Can run in parallel)

### Task 3.1: Create App Layout Shell

**Files:**
- Create: `src/layouts/AppLayout.vue`
- Modify: `src/App.vue`

**Step 1: Create AppLayout component**

Create `src/layouts/AppLayout.vue`:
```vue
<template>
  <v-app>
    <TopBar v-if="showLayout" />
    <LeftSidebar v-if="showLayout" />
    <RightPanel v-if="showLayout" />

    <v-main>
      <v-container fluid class="pa-6">
        <router-view />
      </v-container>
    </v-main>

    <SerenaChat v-if="showLayout" />
  </v-app>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import TopBar from '@/shared/components/TopBar.vue'
import LeftSidebar from '@/shared/components/LeftSidebar.vue'
import RightPanel from '@/shared/components/RightPanel.vue'
import SerenaChat from '@/features/serena/components/SerenaChat.vue'

const route = useRoute()

const showLayout = computed(() => route.meta.requiresAuth !== false)
</script>
```

**Step 2: Update App.vue**

Replace `src/App.vue`:
```vue
<template>
  <AppLayout />
</template>

<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue'
</script>

<style>
html, body {
  overflow-y: auto;
}
</style>
```

**Step 3: Commit layout shell**

```bash
git add -A
git commit -m "feat: create AppLayout shell component"
```

---

### Task 3.2: Create TopBar Component

**Files:**
- Create: `src/shared/components/TopBar.vue`

**Step 1: Create TopBar component**

Create `src/shared/components/TopBar.vue`:
```vue
<template>
  <v-app-bar elevation="1" color="white">
    <v-app-bar-nav-icon @click="sidebarStore.toggleLeft" />

    <v-spacer />

    <v-text-field
      v-model="searchQuery"
      :placeholder="t('common.search')"
      prepend-inner-icon="mdi-magnify"
      variant="outlined"
      density="compact"
      hide-details
      single-line
      class="search-field"
      style="max-width: 40%"
    />

    <v-spacer />

    <v-btn icon @click="notificationsMenu = true">
      <v-badge
        :content="notificationsStore.unreadCount"
        :model-value="notificationsStore.unreadCount > 0"
        color="error"
      >
        <v-icon>mdi-bell-outline</v-icon>
      </v-badge>
    </v-btn>

    <v-menu v-model="notificationsMenu" :close-on-content-click="false" location="bottom end">
      <template #activator="{ props }">
        <span v-bind="props" />
      </template>
      <v-card min-width="300" max-width="400">
        <v-card-title class="text-subtitle-1">
          {{ t('common.notifications') }}
        </v-card-title>
        <v-divider />
        <v-list density="compact" max-height="300" class="overflow-y-auto">
          <v-list-item
            v-for="notif in notificationsStore.pendingNotifications.slice(0, 5)"
            :key="notif.id"
            @click="notificationsStore.markAsRead(notif.id)"
          >
            <template #prepend>
              <v-icon :color="getPriorityColor(notif.priority)" size="small">
                mdi-circle
              </v-icon>
            </template>
            <v-list-item-title class="text-body-2">{{ notif.title }}</v-list-item-title>
            <v-list-item-subtitle class="text-caption">{{ notif.entity }}</v-list-item-subtitle>
          </v-list-item>
          <v-list-item v-if="notificationsStore.pendingNotifications.length === 0">
            <v-list-item-title class="text-body-2 text-center text-grey">
              {{ t('common.noData') }}
            </v-list-item-title>
          </v-list-item>
        </v-list>
      </v-card>
    </v-menu>

    <v-menu location="bottom end">
      <template #activator="{ props }">
        <v-btn v-bind="props" variant="text" class="ml-2">
          <v-avatar size="32" color="primary" class="mr-2">
            <v-img v-if="authStore.user?.avatar" :src="authStore.user.avatar" />
            <span v-else class="text-white text-body-2">
              {{ authStore.user?.name?.charAt(0).toUpperCase() }}
            </span>
          </v-avatar>
          <span class="d-none d-sm-inline">{{ authStore.user?.name }}</span>
          <v-icon end>mdi-chevron-down</v-icon>
        </v-btn>
      </template>
      <v-list density="compact">
        <v-list-item @click="showAvatarDialog = true">
          <template #prepend>
            <v-icon>mdi-account-circle-outline</v-icon>
          </template>
          <v-list-item-title>{{ t('common.changeAvatar') }}</v-list-item-title>
        </v-list-item>
        <v-divider />
        <v-list-subheader>{{ t('common.language') }}</v-list-subheader>
        <v-list-item
          v-for="loc in availableLocales"
          :key="loc.code"
          :active="locale === loc.code"
          @click="changeLocale(loc.code)"
        >
          <v-list-item-title>{{ loc.flag }} {{ loc.name }}</v-list-item-title>
        </v-list-item>
        <v-divider />
        <v-list-item @click="handleLogout" class="text-error">
          <template #prepend>
            <v-icon color="error">mdi-logout</v-icon>
          </template>
          <v-list-item-title>{{ t('common.logout') }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>

    <v-btn icon class="d-md-none" @click="sidebarStore.toggleRight">
      <v-icon>mdi-menu-open</v-icon>
    </v-btn>
  </v-app-bar>

  <v-dialog v-model="showAvatarDialog" max-width="400">
    <v-card>
      <v-card-title>{{ t('common.changeAvatar') }}</v-card-title>
      <v-card-text>
        <v-text-field
          v-model="newAvatarUrl"
          label="Avatar URL"
          placeholder="https://example.com/avatar.jpg"
          variant="outlined"
        />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn @click="showAvatarDialog = false">{{ t('common.cancel') }}</v-btn>
        <v-btn color="primary" @click="updateAvatar">{{ t('common.save') }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAuthStore } from '@/stores/auth'
import { useSidebarStore } from '@/stores/sidebar'
import { useNotificationsStore } from '@/stores/notifications'
import { availableLocales, setLocale } from '@/i18n'

const { t, locale } = useI18n()
const router = useRouter()
const authStore = useAuthStore()
const sidebarStore = useSidebarStore()
const notificationsStore = useNotificationsStore()

const searchQuery = ref('')
const notificationsMenu = ref(false)
const showAvatarDialog = ref(false)
const newAvatarUrl = ref('')

function getPriorityColor(priority: string): string {
  switch (priority) {
    case 'high': return 'error'
    case 'medium': return 'warning'
    default: return 'grey'
  }
}

function changeLocale(code: string) {
  setLocale(code)
}

function updateAvatar() {
  if (newAvatarUrl.value) {
    authStore.updateAvatar(newAvatarUrl.value)
  }
  showAvatarDialog.value = false
  newAvatarUrl.value = ''
}

function handleLogout() {
  authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.search-field {
  flex-grow: 0;
}
</style>
```

**Step 2: Commit TopBar**

```bash
git add -A
git commit -m "feat: create TopBar component with search, notifications, user menu"
```

---

### Task 3.3: Create Left Sidebar Component

**Files:**
- Create: `src/shared/components/LeftSidebar.vue`

**Step 1: Create LeftSidebar component**

Create `src/shared/components/LeftSidebar.vue`:
```vue
<template>
  <v-navigation-drawer
    v-model="drawer"
    :rail="sidebarStore.leftCollapsed"
    permanent
    @update:rail="sidebarStore.setLeft"
  >
    <v-list density="compact" nav>
      <v-list-subheader v-if="!sidebarStore.leftCollapsed">
        {{ t('sidebar.accounts') }}
      </v-list-subheader>

      <v-list-item
        v-for="item in accountsMenu"
        :key="item.route"
        :to="item.route"
        :title="item.title"
        :prepend-icon="item.icon"
        :active="route.path === item.route"
        color="primary"
      />

      <v-divider class="my-2" />

      <v-list-subheader v-if="!sidebarStore.leftCollapsed">
        {{ t('sidebar.settings') }}
      </v-list-subheader>

      <v-list-item
        v-for="item in settingsMenu"
        :key="item.route"
        :to="item.route"
        :title="item.title"
        :prepend-icon="item.icon"
        :active="route.path === item.route"
        color="primary"
      />
    </v-list>

    <template #append>
      <div class="pa-2">
        <v-btn
          block
          variant="text"
          :icon="sidebarStore.leftCollapsed"
          @click="sidebarStore.toggleLeft"
        >
          <v-icon>
            {{ sidebarStore.leftCollapsed ? 'mdi-chevron-right' : 'mdi-chevron-left' }}
          </v-icon>
          <span v-if="!sidebarStore.leftCollapsed" class="ml-2">
            {{ t('sidebar.collapse') }}
          </span>
        </v-btn>
      </div>
    </template>
  </v-navigation-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useSidebarStore } from '@/stores/sidebar'

const { t } = useI18n()
const route = useRoute()
const sidebarStore = useSidebarStore()

const drawer = ref(true)

const accountsMenu = computed(() => [
  { title: t('sidebar.accountsCreate'), icon: 'mdi-plus-circle-outline', route: '/accounts/create' },
  { title: t('sidebar.accountsEdit'), icon: 'mdi-pencil-outline', route: '/accounts/edit' },
  { title: t('sidebar.accountsClose'), icon: 'mdi-close-circle-outline', route: '/accounts/close' }
])

const settingsMenu = computed(() => [
  { title: 'SPB', icon: 'mdi-bank-outline', route: '/settings/spb' },
  { title: 'SPI', icon: 'mdi-flash-outline', route: '/settings/spi' },
  { title: 'STA', icon: 'mdi-file-sync-outline', route: '/settings/sta' },
  { title: 'Nuclea', icon: 'mdi-atom', route: '/settings/nuclea' },
  { title: 'SISBAJUD', icon: 'mdi-gavel', route: '/settings/sisbajud' },
  { title: t('sidebar.users'), icon: 'mdi-account-group-outline', route: '/settings/users' }
])
</script>
```

**Step 2: Commit LeftSidebar**

```bash
git add -A
git commit -m "feat: create LeftSidebar with accounts and settings navigation"
```

---

### Task 3.4: Create Right Panel Component

**Files:**
- Create: `src/shared/components/RightPanel.vue`

**Step 1: Create RightPanel component**

Create `src/shared/components/RightPanel.vue`:
```vue
<template>
  <v-navigation-drawer
    v-model="drawer"
    location="right"
    :width="280"
    :permanent="!mobile"
    :temporary="mobile"
    :model-value="!sidebarStore.rightCollapsed"
    @update:model-value="handleDrawerUpdate"
  >
    <v-list density="compact">
      <v-list-subheader>
        <v-icon size="small" class="mr-1">mdi-rss</v-icon>
        {{ t('rightPanel.rssFeed') }}
      </v-list-subheader>

      <v-list-item
        v-for="item in dashboardStore.rssFeed"
        :key="item.id"
        :href="item.url"
        target="_blank"
        class="mb-1"
      >
        <v-list-item-title class="text-body-2 text-wrap">
          {{ item.title }}
        </v-list-item-title>
        <v-list-item-subtitle class="text-caption">
          {{ item.source }} • {{ formatDate(item.date) }}
        </v-list-item-subtitle>
      </v-list-item>

      <v-list-item>
        <v-btn variant="text" size="small" color="primary" block>
          {{ t('rightPanel.viewMore') }}
        </v-btn>
      </v-list-item>
    </v-list>

    <v-divider class="my-2" />

    <v-list density="compact">
      <v-list-subheader>
        <v-icon size="small" class="mr-1">mdi-bell-outline</v-icon>
        {{ t('rightPanel.pendingNotifications') }}
        <v-chip v-if="notificationsStore.unreadCount > 0" size="x-small" color="error" class="ml-2">
          {{ notificationsStore.unreadCount }}
        </v-chip>
      </v-list-subheader>

      <v-list-item
        v-for="notif in notificationsStore.pendingNotifications"
        :key="notif.id"
        @click="notificationsStore.markAsRead(notif.id)"
        class="mb-1"
      >
        <template #prepend>
          <v-icon :color="getPriorityColor(notif.priority)" size="x-small">
            mdi-circle
          </v-icon>
        </template>
        <v-list-item-title class="text-body-2">
          {{ notif.title }}
        </v-list-item-title>
        <v-list-item-subtitle class="text-caption">
          {{ notif.entity }}
        </v-list-item-subtitle>
        <template #append>
          <v-tooltip :text="t('rightPanel.markAsRead')" location="left">
            <template #activator="{ props }">
              <v-btn
                v-bind="props"
                icon
                size="x-small"
                variant="text"
                @click.stop="notificationsStore.markAsRead(notif.id)"
              >
                <v-icon size="small">mdi-check</v-icon>
              </v-btn>
            </template>
          </v-tooltip>
        </template>
      </v-list-item>

      <v-list-item v-if="notificationsStore.pendingNotifications.length === 0">
        <v-list-item-title class="text-body-2 text-center text-grey">
          {{ t('common.noData') }}
        </v-list-item-title>
      </v-list-item>
    </v-list>

    <template #append>
      <div class="pa-2">
        <v-btn
          block
          variant="text"
          @click="sidebarStore.toggleRight"
        >
          <v-icon>mdi-chevron-right</v-icon>
          <span class="ml-2">{{ t('sidebar.collapse') }}</span>
        </v-btn>
      </div>
    </template>
  </v-navigation-drawer>

  <v-btn
    v-if="sidebarStore.rightCollapsed && !mobile"
    icon
    size="small"
    class="right-panel-toggle"
    @click="sidebarStore.toggleRight"
  >
    <v-icon>mdi-chevron-left</v-icon>
  </v-btn>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useDisplay } from 'vuetify'
import { useI18n } from 'vue-i18n'
import { useSidebarStore } from '@/stores/sidebar'
import { useDashboardStore } from '@/stores/dashboard'
import { useNotificationsStore } from '@/stores/notifications'

const { t } = useI18n()
const { mobile } = useDisplay()
const sidebarStore = useSidebarStore()
const dashboardStore = useDashboardStore()
const notificationsStore = useNotificationsStore()

const drawer = ref(true)

function handleDrawerUpdate(value: boolean) {
  sidebarStore.setRight(!value)
}

function getPriorityColor(priority: string): string {
  switch (priority) {
    case 'high': return 'error'
    case 'medium': return 'warning'
    default: return 'grey'
  }
}

function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
  return date.toLocaleDateString()
}
</script>

<style scoped>
.right-panel-toggle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  border-radius: 8px 0 0 8px;
}
</style>
```

**Step 2: Commit RightPanel**

```bash
git add -A
git commit -m "feat: create RightPanel with RSS feed and pending notifications"
```

---

## Phase 4: Feature Views (Can run in parallel)

### Task 4.1: Create Login View

**Files:**
- Create: `src/features/auth/views/LoginView.vue`

**Step 1: Create LoginView component**

Create `src/features/auth/views/LoginView.vue`:
```vue
<template>
  <v-container class="fill-height" fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="4">
        <v-card elevation="8" class="pa-4">
          <v-card-title class="text-center pb-0">
            <div class="text-h4 font-weight-bold text-primary">MONETARIE_NPC</div>
            <div class="text-subtitle-1 text-grey">BACKOFFICE</div>
          </v-card-title>

          <v-card-text class="pt-6">
            <v-form ref="formRef" @submit.prevent="handleLogin">
              <v-text-field
                v-model="email"
                :label="t('auth.email')"
                :rules="[rules.required, rules.email]"
                type="email"
                prepend-inner-icon="mdi-email-outline"
                variant="outlined"
                class="mb-4"
              />

              <v-text-field
                v-model="password"
                :label="t('auth.password')"
                :rules="[rules.required]"
                :type="showPassword ? 'text' : 'password'"
                prepend-inner-icon="mdi-lock-outline"
                :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
                @click:append-inner="showPassword = !showPassword"
                variant="outlined"
                class="mb-4"
              />

              <v-alert
                v-if="error"
                type="error"
                variant="tonal"
                class="mb-4"
              >
                {{ t('auth.invalidCredentials') }}
              </v-alert>

              <v-btn
                type="submit"
                color="primary"
                size="large"
                block
                :loading="loading"
              >
                {{ t('auth.submit') }}
              </v-btn>
            </v-form>
          </v-card-text>

          <v-card-actions class="justify-center pt-0">
            <v-btn-toggle
              v-model="selectedLocale"
              mandatory
              variant="text"
              density="compact"
            >
              <v-btn
                v-for="loc in availableLocales"
                :key="loc.code"
                :value="loc.code"
                size="small"
              >
                {{ loc.flag }} {{ loc.code.split('-')[0].toUpperCase() }}
              </v-btn>
            </v-btn-toggle>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAuthStore } from '@/stores/auth'
import { availableLocales, setLocale } from '@/i18n'

const { t, locale } = useI18n()
const router = useRouter()
const authStore = useAuthStore()

const formRef = ref()
const email = ref('')
const password = ref('')
const showPassword = ref(false)
const loading = ref(false)
const error = ref(false)
const selectedLocale = ref(locale.value)

const rules = {
  required: (v: string) => !!v || 'Required',
  email: (v: string) => /.+@.+\..+/.test(v) || 'Invalid email'
}

watch(selectedLocale, (newLocale) => {
  setLocale(newLocale)
})

async function handleLogin() {
  const { valid } = await formRef.value.validate()
  if (!valid) return

  loading.value = true
  error.value = false

  // Simulate network delay
  await new Promise(resolve => setTimeout(resolve, 500))

  const success = authStore.login(email.value, password.value)

  if (success) {
    router.push('/')
  } else {
    error.value = true
  }

  loading.value = false
}
</script>
```

**Step 2: Commit LoginView**

```bash
git add -A
git commit -m "feat: create LoginView with email/password authentication"
```

---

### Task 4.2: Create Dashboard View

**Files:**
- Create: `src/features/dashboard/views/DashboardView.vue`
- Create: `src/features/dashboard/components/HealthPanel.vue`
- Create: `src/features/dashboard/components/SisbajudOrdersPanel.vue`

**Step 1: Create HealthPanel component**

Create `src/features/dashboard/components/HealthPanel.vue`:
```vue
<template>
  <v-card>
    <v-card-title class="d-flex align-center">
      <v-icon class="mr-2">mdi-heart-pulse</v-icon>
      {{ t('dashboard.health') }}
      <v-spacer />
      <v-btn icon size="small" variant="text" @click="dashboardStore.refreshHealth">
        <v-icon>mdi-refresh</v-icon>
      </v-btn>
    </v-card-title>
    <v-card-text>
      <div class="d-flex flex-wrap gap-4 justify-center">
        <v-chip
          v-for="system in dashboardStore.healthStatus"
          :key="system.id"
          :color="system.status === 'online' ? 'success' : 'error'"
          :variant="system.status === 'online' ? 'flat' : 'elevated'"
          :class="{ 'pulse-animation': system.status === 'offline' }"
          size="large"
          :to="`/settings/${system.id}`"
          link
        >
          <v-icon start>
            {{ system.status === 'online' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
          </v-icon>
          {{ system.name }}
          <v-tooltip activator="parent" location="bottom">
            {{ t('dashboard.lastCheck') }}: {{ formatTime(system.lastCheck) }}
          </v-tooltip>
        </v-chip>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useDashboardStore } from '@/stores/dashboard'

const { t } = useI18n()
const dashboardStore = useDashboardStore()

function formatTime(isoString: string): string {
  return new Date(isoString).toLocaleTimeString()
}
</script>

<style scoped>
.pulse-animation {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
  }
}
</style>
```

**Step 2: Create SisbajudOrdersPanel component**

Create `src/features/dashboard/components/SisbajudOrdersPanel.vue`:
```vue
<template>
  <v-card>
    <v-card-title class="d-flex align-center">
      <v-icon class="mr-2">mdi-gavel</v-icon>
      {{ t('dashboard.sisbajudOrders') }}
    </v-card-title>
    <v-card-text class="pa-0">
      <v-data-table
        :headers="headers"
        :items="dashboardStore.sisbajudOrders"
        :items-per-page="5"
        class="elevation-0"
      >
        <template #item.value="{ item }">
          {{ formatCurrency(item.value) }}
        </template>
        <template #item.status="{ item }">
          <v-chip
            :color="getStatusColor(item.status)"
            size="small"
            variant="tonal"
          >
            {{ getStatusText(item.status) }}
          </v-chip>
        </template>
        <template #item.date="{ item }">
          {{ formatDate(item.date) }}
        </template>
      </v-data-table>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useDashboardStore } from '@/stores/dashboard'

const { t } = useI18n()
const dashboardStore = useDashboardStore()

const headers = computed(() => [
  { title: t('dashboard.orderId'), key: 'id', sortable: true },
  { title: t('dashboard.orderType'), key: 'type', sortable: true },
  { title: t('dashboard.orderAccount'), key: 'account', sortable: false },
  { title: t('dashboard.orderValue'), key: 'value', sortable: true },
  { title: t('dashboard.orderStatus'), key: 'status', sortable: true },
  { title: t('dashboard.orderDate'), key: 'date', sortable: true }
])

function getStatusColor(status: string): string {
  switch (status) {
    case 'Pendente': return 'warning'
    case 'Executado': return 'success'
    case 'Rejeitado': return 'error'
    default: return 'grey'
  }
}

function getStatusText(status: string): string {
  switch (status) {
    case 'Pendente': return t('dashboard.pending')
    case 'Executado': return t('dashboard.executed')
    case 'Rejeitado': return t('dashboard.rejected')
    default: return status
  }
}

function formatCurrency(value: number): string {
  return new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL'
  }).format(value)
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString()
}
</script>
```

**Step 3: Create DashboardView component**

Create `src/features/dashboard/views/DashboardView.vue`:
```vue
<template>
  <div>
    <h1 class="text-h4 mb-6">{{ t('dashboard.title') }}</h1>

    <v-row>
      <v-col cols="12">
        <HealthPanel />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12">
        <SisbajudOrdersPanel />
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import HealthPanel from '../components/HealthPanel.vue'
import SisbajudOrdersPanel from '../components/SisbajudOrdersPanel.vue'

const { t } = useI18n()
</script>
```

**Step 4: Commit Dashboard**

```bash
git add -A
git commit -m "feat: create DashboardView with Health and SISBAJUD Orders panels"
```

---

### Task 4.3: Create Accounts Views

**Files:**
- Create: `src/features/accounts/views/AccountsView.vue`

**Step 1: Create AccountsView component**

Create `src/features/accounts/views/AccountsView.vue`:
```vue
<template>
  <div>
    <h1 class="text-h4 mb-6">{{ pageTitle }}</h1>

    <v-card>
      <v-card-text>
        <v-form v-if="action === 'create' || action === 'edit'">
          <v-row>
            <v-col cols="12" md="6">
              <v-text-field
                v-model="form.accountHolder"
                :label="t('accounts.create.accountHolder')"
                variant="outlined"
              />
            </v-col>
            <v-col cols="12" md="6">
              <v-select
                v-model="form.accountType"
                :label="t('accounts.create.accountType')"
                :items="['Corrente', 'Poupança', 'Salário']"
                variant="outlined"
              />
            </v-col>
            <v-col cols="12" md="4">
              <v-text-field
                v-model="form.branch"
                :label="t('accounts.create.branch')"
                variant="outlined"
              />
            </v-col>
            <v-col cols="12" md="4">
              <v-text-field
                v-model="form.accountNumber"
                :label="t('accounts.create.accountNumber')"
                variant="outlined"
              />
            </v-col>
            <v-col cols="12" md="4">
              <v-text-field
                v-model="form.initialBalance"
                :label="t('accounts.create.initialBalance')"
                type="number"
                prefix="R$"
                variant="outlined"
              />
            </v-col>
          </v-row>
        </v-form>

        <div v-else-if="action === 'close'">
          <v-alert type="warning" variant="tonal" class="mb-4">
            {{ t('accounts.close.warning') }}
          </v-alert>
          <v-select
            v-model="selectedAccount"
            label="Conta"
            :items="['****1234 - João Silva', '****5678 - Maria Santos', '****9012 - Pedro Costa']"
            variant="outlined"
            class="mb-4"
          />
          <v-textarea
            v-model="closeReason"
            :label="t('accounts.close.reason')"
            variant="outlined"
            rows="3"
          />
        </div>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="$router.push('/')">
          {{ t('common.cancel') }}
        </v-btn>
        <v-btn
          :color="action === 'close' ? 'error' : 'primary'"
          @click="handleSubmit"
        >
          {{ action === 'close' ? t('common.confirm') : t('common.save') }}
        </v-btn>
      </v-card-actions>
    </v-card>

    <v-snackbar v-model="showSnackbar" color="success">
      {{ snackbarMessage }}
    </v-snackbar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const route = useRoute()

const action = computed(() => route.params.action as string)

const pageTitle = computed(() => {
  switch (action.value) {
    case 'create': return t('accounts.create.title')
    case 'edit': return t('accounts.edit.title')
    case 'close': return t('accounts.close.title')
    default: return t('accounts.title')
  }
})

const form = ref({
  accountHolder: '',
  accountType: '',
  branch: '',
  accountNumber: '',
  initialBalance: ''
})

const selectedAccount = ref('')
const closeReason = ref('')
const showSnackbar = ref(false)
const snackbarMessage = ref('')

function handleSubmit() {
  switch (action.value) {
    case 'create':
      snackbarMessage.value = t('accounts.create.success')
      break
    case 'edit':
      snackbarMessage.value = t('accounts.edit.success')
      break
    case 'close':
      snackbarMessage.value = t('accounts.close.success')
      break
  }
  showSnackbar.value = true

  // Reset form
  form.value = {
    accountHolder: '',
    accountType: '',
    branch: '',
    accountNumber: '',
    initialBalance: ''
  }
  selectedAccount.value = ''
  closeReason.value = ''
}
</script>
```

**Step 2: Commit AccountsView**

```bash
git add -A
git commit -m "feat: create AccountsView for create, edit, close operations"
```

---

### Task 4.4: Create Settings Views

**Files:**
- Create: `src/features/settings/views/SettingsView.vue`

**Step 1: Create SettingsView component**

Create `src/features/settings/views/SettingsView.vue`:
```vue
<template>
  <div>
    <h1 class="text-h4 mb-6">{{ pageTitle }}</h1>

    <v-card v-if="section !== 'users'">
      <v-card-text>
        <v-form>
          <v-row>
            <v-col cols="12">
              <v-text-field
                v-model="config.endpoint"
                :label="t(`settings.${section}.endpoint`)"
                variant="outlined"
                readonly
              />
            </v-col>

            <template v-if="section === 'spb'">
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="config.timeout"
                  :label="t('settings.spb.timeout')"
                  type="number"
                  variant="outlined"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="config.retries"
                  :label="t('settings.spb.retries')"
                  type="number"
                  variant="outlined"
                />
              </v-col>
            </template>

            <template v-if="section === 'spi'">
              <v-col cols="12">
                <v-text-field
                  v-model="config.pixKey"
                  :label="t('settings.spi.pixKey')"
                  variant="outlined"
                />
              </v-col>
            </template>

            <template v-if="section === 'sta'">
              <v-col cols="12">
                <v-text-field
                  v-model="config.schedule"
                  :label="t('settings.sta.schedule')"
                  variant="outlined"
                />
              </v-col>
            </template>

            <template v-if="section === 'nuclea'">
              <v-col cols="12">
                <v-text-field
                  v-model="config.certificate"
                  :label="t('settings.nuclea.certificate')"
                  variant="outlined"
                  readonly
                />
              </v-col>
            </template>

            <template v-if="section === 'sisbajud'">
              <v-col cols="12">
                <v-text-field
                  v-model="config.courtId"
                  :label="t('settings.sisbajud.courtId')"
                  variant="outlined"
                />
              </v-col>
            </template>
          </v-row>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn color="primary" @click="handleSave">
          {{ t('common.save') }}
        </v-btn>
      </v-card-actions>
    </v-card>

    <v-card v-else>
      <v-card-text class="pa-0">
        <v-data-table
          :headers="userHeaders"
          :items="users"
          class="elevation-0"
        >
          <template #item.status="{ item }">
            <v-chip
              :color="item.status === 'active' ? 'success' : 'grey'"
              size="small"
              variant="tonal"
            >
              {{ item.status === 'active' ? t('settings.users.active') : t('settings.users.inactive') }}
            </v-chip>
          </template>
          <template #item.role="{ item }">
            {{ item.role === 'admin' ? t('settings.users.admin') : t('settings.users.user') }}
          </template>
          <template #item.actions>
            <v-btn icon size="small" variant="text">
              <v-icon>mdi-pencil</v-icon>
            </v-btn>
          </template>
        </v-data-table>
      </v-card-text>
    </v-card>

    <v-snackbar v-model="showSnackbar" color="success">
      {{ t('common.save') }} - OK
    </v-snackbar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const route = useRoute()

const section = computed(() => route.params.section as string)

const pageTitle = computed(() => {
  if (section.value === 'users') return t('settings.users.title')
  return t(`settings.${section.value}.title`)
})

const config = ref({
  endpoint: '',
  timeout: 30000,
  retries: 3,
  pixKey: '',
  schedule: '',
  certificate: '',
  courtId: ''
})

const showSnackbar = ref(false)

// Mock config data
const mockConfigs: Record<string, any> = {
  spb: { endpoint: 'https://api.bcb.gov.br/spb/v1', timeout: 30000, retries: 3 },
  spi: { endpoint: 'https://api.bcb.gov.br/spi/v2', pixKey: 'default@monetarie_npc.com.br' },
  sta: { endpoint: 'https://sta.bcb.gov.br/v1', schedule: '0 */6 * * *' },
  nuclea: { endpoint: 'https://api.nuclea.com.br/v1', certificate: 'CN=Monetarie NPC,O=Monetarie NPC LTDA' },
  sisbajud: { endpoint: 'https://sisbajud.cnj.jus.br/api', courtId: 'TJSP-001' }
}

watch(section, (newSection) => {
  if (mockConfigs[newSection]) {
    config.value = { ...config.value, ...mockConfigs[newSection] }
  }
}, { immediate: true })

const userHeaders = computed(() => [
  { title: t('settings.users.name'), key: 'name' },
  { title: t('settings.users.email'), key: 'email' },
  { title: t('settings.users.role'), key: 'role' },
  { title: t('settings.users.status'), key: 'status' },
  { title: t('common.actions'), key: 'actions', sortable: false }
])

const users = ref([
  { id: 1, name: 'Felipe Santiago', email: 'admin@monetarie_npc.com.br', role: 'admin', status: 'active' },
  { id: 2, name: 'Maria Silva', email: 'maria@monetarie_npc.com.br', role: 'user', status: 'active' },
  { id: 3, name: 'João Santos', email: 'joao@monetarie_npc.com.br', role: 'user', status: 'inactive' }
])

function handleSave() {
  showSnackbar.value = true
}
</script>
```

**Step 2: Commit SettingsView**

```bash
git add -A
git commit -m "feat: create SettingsView for SPB, SPI, STA, Nuclea, SISBAJUD, Users"
```

---

### Task 4.5: Create SERENA Chat Component

**Files:**
- Create: `src/features/serena/components/SerenaChat.vue`

**Step 1: Create SerenaChat component**

Create `src/features/serena/components/SerenaChat.vue`:
```vue
<template>
  <div class="serena-container">
    <!-- Floating Button -->
    <v-btn
      v-if="!serenaStore.isOpen"
      class="serena-fab"
      color="serena"
      size="large"
      icon
      @click="serenaStore.open"
    >
      <span class="text-h5 font-weight-bold">S</span>
      <v-tooltip activator="parent" location="left">
        {{ t('serena.tooltip') }}
      </v-tooltip>
    </v-btn>

    <!-- Chat Window -->
    <v-card
      v-if="serenaStore.isOpen"
      class="serena-chat"
      elevation="8"
    >
      <v-card-title class="bg-serena text-white d-flex align-center py-2">
        <v-icon class="mr-2">mdi-robot-happy-outline</v-icon>
        {{ t('serena.title') }}
        <v-spacer />
        <v-btn icon size="small" variant="text" color="white" @click="serenaStore.close">
          <v-icon>mdi-minus</v-icon>
        </v-btn>
        <v-btn icon size="small" variant="text" color="white" @click="serenaStore.close">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-card-title>

      <v-card-text class="chat-messages pa-3" ref="messagesContainer">
        <!-- Greeting -->
        <div v-if="serenaStore.messages.length === 0" class="message assistant">
          <v-avatar color="serena" size="32" class="mr-2">
            <span class="text-white text-body-2">S</span>
          </v-avatar>
          <div class="message-content">
            {{ t('serena.greeting') }}
          </div>
        </div>

        <!-- Messages -->
        <div
          v-for="msg in serenaStore.messages"
          :key="msg.id"
          :class="['message', msg.role]"
        >
          <v-avatar
            v-if="msg.role === 'assistant'"
            color="serena"
            size="32"
            class="mr-2"
          >
            <span class="text-white text-body-2">S</span>
          </v-avatar>
          <div class="message-content">
            {{ msg.content }}
          </div>
          <v-avatar
            v-if="msg.role === 'user'"
            color="primary"
            size="32"
            class="ml-2"
          >
            <span class="text-white text-body-2">
              {{ authStore.user?.name?.charAt(0) || 'U' }}
            </span>
          </v-avatar>
        </div>

        <!-- Typing Indicator -->
        <div v-if="serenaStore.isTyping" class="message assistant">
          <v-avatar color="serena" size="32" class="mr-2">
            <span class="text-white text-body-2">S</span>
          </v-avatar>
          <div class="message-content typing">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </div>
        </div>
      </v-card-text>

      <v-divider />

      <v-card-actions class="pa-2">
        <v-text-field
          v-model="messageInput"
          :placeholder="t('serena.placeholder')"
          variant="outlined"
          density="compact"
          hide-details
          @keyup.enter="sendMessage"
          class="flex-grow-1"
        />
        <v-btn
          icon
          color="serena"
          :disabled="!messageInput.trim() || serenaStore.isTyping"
          @click="sendMessage"
        >
          <v-icon>mdi-send</v-icon>
        </v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { useSerenaStore } from '@/stores/serena'
import { useAuthStore } from '@/stores/auth'

const { t } = useI18n()
const serenaStore = useSerenaStore()
const authStore = useAuthStore()

const messageInput = ref('')
const messagesContainer = ref<HTMLElement>()

async function sendMessage() {
  if (!messageInput.value.trim() || serenaStore.isTyping) return

  const message = messageInput.value
  messageInput.value = ''

  await serenaStore.sendMessage(message, t('serena.fallback'))

  nextTick(() => {
    scrollToBottom()
  })
}

function scrollToBottom() {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

watch(() => serenaStore.messages.length, () => {
  nextTick(() => scrollToBottom())
})
</script>

<style scoped>
.serena-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}

.serena-fab {
  animation: pulse-serena 2s infinite;
}

@keyframes pulse-serena {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(124, 77, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(124, 77, 255, 0);
  }
}

.serena-chat {
  width: 360px;
  height: 480px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  display: flex;
  align-items: flex-start;
}

.message.user {
  flex-direction: row-reverse;
}

.message-content {
  background: #f5f5f5;
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 80%;
  word-wrap: break-word;
}

.message.user .message-content {
  background: #e3f2fd;
}

.typing {
  display: flex;
  gap: 4px;
  padding: 12px;
}

.typing .dot {
  width: 8px;
  height: 8px;
  background: #9e9e9e;
  border-radius: 50%;
  animation: typing-dot 1.4s infinite ease-in-out both;
}

.typing .dot:nth-child(1) { animation-delay: -0.32s; }
.typing .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing-dot {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}
</style>
```

**Step 2: Commit SerenaChat**

```bash
git add -A
git commit -m "feat: create SERENA floating chat support agent"
```

---

## Phase 5: Router Guards & Final Setup

### Task 5.1: Add Router Guards

**Files:**
- Modify: `src/router/index.ts`

**Step 1: Add navigation guards**

Update `src/router/index.ts`:
```typescript
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const routes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/features/auth/views/LoginView.vue'),
    meta: { requiresAuth: false }
  },
  {
    path: '/',
    name: 'dashboard',
    component: () => import('@/features/dashboard/views/DashboardView.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/accounts/:action',
    name: 'accounts',
    component: () => import('@/features/accounts/views/AccountsView.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/settings/:section',
    name: 'settings',
    component: () => import('@/features/settings/views/SettingsView.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/'
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore()

  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    next('/login')
  } else if (to.path === '/login' && authStore.isAuthenticated) {
    next('/')
  } else {
    next()
  }
})

export default router
```

**Step 2: Commit router guards**

```bash
git add -A
git commit -m "feat: add authentication route guards"
```

---

### Task 5.2: Create CLAUDE.md

**Files:**
- Create: `CLAUDE.md`

**Step 1: Create CLAUDE.md**

Create `CLAUDE.md`:
```markdown
# CLAUDE.md - Development Tracking

## Project Overview

**Monetarie NPC Backoffice** - A professional Vue 3 dashboard for managing financial systems integration with Brazilian payment infrastructure (SPB, SPI, SISBAJUD).

## Tech Stack

- **Framework:** Vue 3.x with Composition API
- **Build Tool:** Vite 5.x
- **Language:** TypeScript 5.x
- **UI Library:** Vuetify 3.x (Material Design)
- **State Management:** Pinia 2.x
- **Routing:** Vue Router 4.x
- **Internationalization:** vue-i18n 9.x (PT-BR, EN, ZH-CN)
- **Documentation:** VitePress 1.x

## Architecture

Feature-based architecture with the following structure:

```
src/
├── features/        # Feature modules (auth, dashboard, accounts, settings, serena)
├── shared/          # Shared components and utilities
├── layouts/         # Layout components
├── stores/          # Pinia stores
├── i18n/            # Internationalization
├── mocks/           # Mock data
└── router/          # Vue Router configuration
```

## Key Decisions

1. **Mock-only authentication** - No real backend, credentials are hardcoded
2. **Feature-based structure** - Each feature is self-contained
3. **Portuguese as default** - PT-BR is the primary language
4. **LocalStorage persistence** - User session and preferences persist

## Mock Credentials

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

## Available Commands

```bash
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run docs:dev     # Start VitePress documentation
npm run docs:build   # Build documentation
```

## Current Status

- [x] Project initialization
- [x] Vuetify configuration
- [x] Vue Router setup
- [x] vue-i18n setup (3 languages)
- [x] Mock data files
- [x] Pinia stores
- [x] Layout components (TopBar, LeftSidebar, RightPanel)
- [x] Authentication (LoginView)
- [x] Dashboard (HealthPanel, SisbajudOrdersPanel)
- [x] Accounts views
- [x] Settings views
- [x] SERENA chat agent
- [x] Route guards
- [ ] VitePress documentation
- [ ] README.md
- [ ] Production optimizations
```

**Step 2: Commit CLAUDE.md**

```bash
git add CLAUDE.md
git commit -m "docs: add CLAUDE.md development tracking file"
```

---

### Task 5.3: Create README.md

**Files:**
- Create: `README.md`

**Step 1: Create professional README**

Create `README.md`:
```markdown
<div align="center">

# Monetarie NPC Backoffice

**Professional dashboard for Brazilian financial systems integration**

[![Vue](https://img.shields.io/badge/Vue-3.x-4FC08D?style=flat-square&logo=vue.js)](https://vuejs.org/)
[![Vuetify](https://img.shields.io/badge/Vuetify-3.x-1867C0?style=flat-square&logo=vuetify)](https://vuetifyjs.com/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Vite-5.x-646CFF?style=flat-square&logo=vite)](https://vitejs.dev/)

[Português](#português) • [English](#english) • [中文](#中文)

</div>

---

## Português

### Sobre

O Monetarie NPC Backoffice é um painel de controle profissional para gerenciamento de integrações com sistemas financeiros brasileiros, incluindo SPB, SPI, STA, Nuclea e SISBAJUD.

### Funcionalidades

- 🔐 **Autenticação** - Login seguro com controle de sessão
- 📊 **Dashboard** - Monitoramento de saúde dos sistemas em tempo real
- ⚖️ **SISBAJUD** - Gestão de ordens judiciais (bloqueios, desbloqueios, transferências)
- 👥 **Contas** - Criar, editar e encerrar contas
- ⚙️ **Configurações** - Parâmetros dos sistemas SPB, SPI, STA, Nuclea, SISBAJUD
- 🤖 **SERENA** - Assistente virtual de suporte
- 🌐 **Multi-idioma** - Português, Inglês e Chinês Simplificado

### Instalação

```bash
# Clonar o repositório
git clone https://github.com/seu-usuario/monetarie_npc-backoffice.git
cd monetarie_npc-backoffice

# Instalar dependências
npm install

# Iniciar servidor de desenvolvimento
npm run dev
```

### Credenciais de Demonstração

- **Email:** admin@monetarie_npc.com.br
- **Senha:** admin123

---

## English

### About

Monetarie NPC Backoffice is a professional dashboard for managing integrations with Brazilian financial systems, including SPB, SPI, STA, Nuclea, and SISBAJUD.

### Features

- 🔐 **Authentication** - Secure login with session control
- 📊 **Dashboard** - Real-time system health monitoring
- ⚖️ **SISBAJUD** - Judicial order management (blocks, unblocks, transfers)
- 👥 **Accounts** - Create, edit, and close accounts
- ⚙️ **Settings** - SPB, SPI, STA, Nuclea, SISBAJUD system parameters
- 🤖 **SERENA** - Virtual support assistant
- 🌐 **Multi-language** - Portuguese, English, and Simplified Chinese

### Installation

```bash
# Clone the repository
git clone https://github.com/your-username/monetarie_npc-backoffice.git
cd monetarie_npc-backoffice

# Install dependencies
npm install

# Start development server
npm run dev
```

### Demo Credentials

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

---

## 中文

### 关于

Monetarie NPC Backoffice 是一个专业的仪表板，用于管理与巴西金融系统的集成，包括 SPB、SPI、STA、Nuclea 和 SISBAJUD。

### 功能特点

- 🔐 **身份验证** - 安全登录与会话控制
- 📊 **仪表板** - 实时系统健康监控
- ⚖️ **SISBAJUD** - 司法命令管理（冻结、解冻、转账）
- 👥 **账户** - 创建、编辑和关闭账户
- ⚙️ **设置** - SPB、SPI、STA、Nuclea、SISBAJUD 系统参数
- 🤖 **SERENA** - 虚拟支持助手
- 🌐 **多语言** - 葡萄牙语、英语和简体中文

### 安装

```bash
# 克隆仓库
git clone https://github.com/your-username/monetarie_npc-backoffice.git
cd monetarie_npc-backoffice

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

### 演示凭据

- **邮箱:** admin@monetarie_npc.com.br
- **密码:** admin123

---

## Project Structure

```
monetarie_npc-backoffice/
├── src/
│   ├── features/           # Feature modules
│   │   ├── auth/           # Authentication
│   │   ├── dashboard/      # Dashboard & monitoring
│   │   ├── accounts/       # Account management
│   │   ├── settings/       # System settings
│   │   └── serena/         # AI support chat
│   ├── shared/             # Shared components
│   ├── layouts/            # Layout components
│   ├── stores/             # Pinia stores
│   ├── i18n/               # Internationalization
│   ├── mocks/              # Mock data
│   └── router/             # Vue Router
├── docs/                   # VitePress documentation
├── CLAUDE.md               # Development tracking
└── README.md               # This file
```

## Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Start development server |
| `npm run build` | Build for production |
| `npm run preview` | Preview production build |
| `npm run docs:dev` | Start documentation server |
| `npm run docs:build` | Build documentation |

## Tech Stack

| Technology | Purpose |
|------------|---------|
| Vue 3 | Frontend framework |
| Vuetify 3 | UI component library |
| Pinia | State management |
| Vue Router | Routing |
| vue-i18n | Internationalization |
| TypeScript | Type safety |
| Vite | Build tool |
| VitePress | Documentation |

## License

MIT License - see [LICENSE](LICENSE) for details.

---

<div align="center">

**Built with ❤️ for the Brazilian financial sector**

</div>
```

**Step 2: Commit README**

```bash
git add README.md
git commit -m "docs: add professional multi-language README.md"
```

---

### Task 5.4: Setup VitePress Documentation

**Files:**
- Create: `docs/.vitepress/config.ts`
- Create: `docs/index.md`
- Create: `docs/guide/getting-started.md`
- Modify: `package.json` (add docs scripts)

**Step 1: Create VitePress config**

Create `docs/.vitepress/config.ts`:
```typescript
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'Monetarie NPC Backoffice',
  description: 'Documentation for Monetarie NPC Backoffice Dashboard',

  locales: {
    root: {
      label: 'Português',
      lang: 'pt-BR',
      themeConfig: {
        nav: [
          { text: 'Guia', link: '/guide/getting-started' },
          { text: 'API', link: '/api/stores' }
        ],
        sidebar: [
          {
            text: 'Introdução',
            items: [
              { text: 'Começando', link: '/guide/getting-started' },
              { text: 'Autenticação', link: '/guide/authentication' },
              { text: 'Funcionalidades', link: '/guide/features' }
            ]
          }
        ]
      }
    },
    en: {
      label: 'English',
      lang: 'en',
      link: '/en/',
      themeConfig: {
        nav: [
          { text: 'Guide', link: '/en/guide/getting-started' },
          { text: 'API', link: '/en/api/stores' }
        ]
      }
    }
  },

  themeConfig: {
    logo: '/logo.svg',
    socialLinks: [
      { icon: 'github', link: 'https://github.com/your-username/monetarie_npc-backoffice' }
    ],
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2024 Monetarie NPC'
    }
  }
})
```

**Step 2: Create docs index**

Create `docs/index.md`:
```markdown
---
layout: home

hero:
  name: Monetarie NPC Backoffice
  text: Dashboard Profissional
  tagline: Gerenciamento de integrações com sistemas financeiros brasileiros
  actions:
    - theme: brand
      text: Começar
      link: /guide/getting-started
    - theme: alt
      text: Ver no GitHub
      link: https://github.com/your-username/monetarie_npc-backoffice

features:
  - icon: 🔐
    title: Autenticação Segura
    details: Sistema de login com controle de sessão e persistência
  - icon: 📊
    title: Monitoramento em Tempo Real
    details: Acompanhe a saúde dos sistemas SPB, SPI, STA e Nuclea
  - icon: ⚖️
    title: Gestão SISBAJUD
    details: Gerencie ordens judiciais de bloqueio, desbloqueio e transferência
  - icon: 🤖
    title: Assistente SERENA
    details: Suporte virtual inteligente para suas dúvidas
---
```

**Step 3: Create getting started guide**

Create `docs/guide/getting-started.md`:
```markdown
# Começando

## Pré-requisitos

- Node.js 18.x ou superior
- npm 9.x ou superior

## Instalação

1. Clone o repositório:

\`\`\`bash
git clone https://github.com/your-username/monetarie_npc-backoffice.git
cd monetarie_npc-backoffice
\`\`\`

2. Instale as dependências:

\`\`\`bash
npm install
\`\`\`

3. Inicie o servidor de desenvolvimento:

\`\`\`bash
npm run dev
\`\`\`

4. Acesse `http://localhost:5173` no navegador.

## Credenciais de Demonstração

| Campo | Valor |
|-------|-------|
| Email | admin@monetarie_npc.com.br |
| Senha | admin123 |

## Estrutura do Projeto

\`\`\`
src/
├── features/      # Módulos de funcionalidades
├── shared/        # Componentes compartilhados
├── layouts/       # Layouts da aplicação
├── stores/        # Stores Pinia
├── i18n/          # Internacionalização
├── mocks/         # Dados mockados
└── router/        # Configuração de rotas
\`\`\`

## Próximos Passos

- [Autenticação](/guide/authentication) - Entenda o fluxo de login
- [Funcionalidades](/guide/features) - Explore os recursos disponíveis
```

**Step 4: Add docs scripts to package.json**

After npm install, add to `package.json` scripts section:
```json
{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  }
}
```

**Step 5: Commit VitePress setup**

```bash
git add -A
git commit -m "docs: setup VitePress documentation site"
```

---

## Execution Summary

### Parallelizable Tasks

The following task groups can be executed in parallel:

**Group A (Phase 2):**
- Task 2.1: Create Mock Data Files
- Task 2.2: Create Pinia Stores

**Group B (Phase 3):**
- Task 3.1: Create App Layout Shell
- Task 3.2: Create TopBar Component
- Task 3.3: Create Left Sidebar Component
- Task 3.4: Create Right Panel Component

**Group C (Phase 4):**
- Task 4.1: Create Login View
- Task 4.2: Create Dashboard View
- Task 4.3: Create Accounts Views
- Task 4.4: Create Settings Views
- Task 4.5: Create SERENA Chat Component

### Sequential Dependencies

1. Phase 1 (Tasks 1.1-1.4) must complete before Phase 2-4
2. Phase 5 (Tasks 5.1-5.4) must complete after Phase 4

### Total Tasks: 17

### Estimated Commits: 17