# Frontend Redesign — Design System Unificado Monetarie **Data:** 2026-02-09 **Status:** IMPLEMENTADO E DEPLOYED (cdef60b) **Benchmark:** Portal Owem (app.owem.com.br) **Escopo:** Internet Banking (53 views) + Merchant Portal (55 views) + Admin Console (52 views) ### Implementation Status (2026-02-09) - Phase 1 (Design System): DONE — tokens.css, useTheme, 6 shared components - Phase 2 (Layout Rewrites): DONE — all 3 apps using FlxSidebar + FlxHeader + FlxBottomNav - Phase 3 (New Views): DONE — 12 new views (6 banking + 6 merchant) - Phase 4 (Admin Enhanced): DONE — Chart.js dashboard + alert cards - Phase 5 (Admin CRUD): PARTIAL — charts done, CRUD taxas/limites/MEDs TODO - Post-redesign fixes: DONE — i18n, merchant auth, sidebar bug, admin design overhaul, Inter font - All 3 frontends live: ib-dev, merchant-dev, coreadmin-dev .fluxiq.com.br --- ## 1. Contexto e Motivação Análise comparativa detalhada entre o portal do parceiro Owem e os 3 frontends Monetarie revelou oportunidades de melhoria significativas no layout, UX e funcionalidades, mantendo a superioridade técnica e de conformidade BCB que já possuímos. ### O que o Owem faz melhor (adotar): - Dark/Light theme toggle nativo - Sidebar icon-first compacta - Home com grid de Acesso Rápido - Drawers laterais para ações rápidas - Mascaramento de saldo com eye toggle - Breadcrumbs em toda página - MEDs (Mecanismo Especial de Devolução) com workflow visual - Limites com granularidade diurno/noturno - Taxas transparentes por canal - Dashboard analítico com conversão QR - Reenvio de webhooks em massa ### O que o Monetarie já é superior (manter): - 148 views total (vs ~13 do Owem) - Multi-canal: PIX + TED + Boleto + Transferências - Onboarding completo (9 etapas) - Hub de segurança com 2FA - Sistema de comprovantes/recibos - Favorecidos com histórico - Agendamento de PIX e transferências - Admin console dedicado (52 views) - i18n (PT-BR, EN-US, ZH-CN) - Conformidade BCB (COSIF, DICT, partições) --- ## 2. Design System — `@monetarie/design-tokens` ### 2.1 Paleta de Cores ```css /* Brand */ --flx-navy: #1E3A5F; --flx-navy-dark: #0c1f36; --flx-navy-darker: #0a1628; --flx-teal: #2EC4B6; --flx-teal-dark: #22A89D; --flx-teal-light: #5DD9CD; /* Semantic */ --flx-success: #22C55E; --flx-success-light: #dcfce7; --flx-danger: #EF4444; --flx-danger-light: #fee2e2; --flx-warning: #F59E0B; --flx-warning-light: #fef3c7; --flx-info: #3B82F6; --flx-info-light: #dbeafe; /* Dark Theme */ --flx-dark-bg: #0f172a; --flx-dark-surface: #1e293b; --flx-dark-surface-2: #334155; --flx-dark-border: #475569; --flx-dark-text: #f1f5f9; --flx-dark-text-secondary: #94a3b8; --flx-dark-text-muted: #64748b; /* Light Theme */ --flx-light-bg: #f8fafc; --flx-light-surface: #ffffff; --flx-light-surface-2: #f1f5f9; --flx-light-border: #e2e8f0; --flx-light-text: #0f172a; --flx-light-text-secondary: #475569; --flx-light-text-muted: #94a3b8; ``` ### 2.2 Tipografia ```css --flx-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --flx-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; /* Scale */ --flx-text-xs: 0.75rem; /* 12px — badges, timestamps */ --flx-text-sm: 0.8125rem; /* 13px — labels, captions */ --flx-text-base: 0.875rem; /* 14px — body text */ --flx-text-md: 1rem; /* 16px — prominent text */ --flx-text-lg: 1.125rem; /* 18px — section titles */ --flx-text-xl: 1.375rem; /* 22px — page titles */ --flx-text-2xl: 1.625rem; /* 26px — hero values */ --flx-text-3xl: 2rem; /* 32px — large headings */ ``` ### 2.3 Espaçamento ```css --flx-space-xs: 0.25rem; /* 4px */ --flx-space-sm: 0.5rem; /* 8px */ --flx-space-md: 0.75rem; /* 12px */ --flx-space-lg: 1rem; /* 16px */ --flx-space-xl: 1.5rem; /* 24px */ --flx-space-2xl: 2rem; /* 32px */ --flx-space-3xl: 3rem; /* 48px */ ``` ### 2.4 Sombras e Bordas ```css --flx-shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --flx-shadow-md: 0 4px 12px rgba(0,0,0,0.1); --flx-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --flx-shadow-xl: 0 16px 48px rgba(0,0,0,0.16); --flx-radius-sm: 0.375rem; /* 6px */ --flx-radius-md: 0.5rem; /* 8px */ --flx-radius-lg: 0.75rem; /* 12px */ --flx-radius-xl: 1rem; /* 16px */ ``` ### 2.5 Transições ```css --flx-transition-fast: 0.15s ease; --flx-transition-normal: 0.2s ease; --flx-transition-slow: 0.3s ease; --flx-transition-spring: 0.3s cubic-bezier(0.4, 0, 0.2, 1); ``` --- ## 3. Componentes Compartilhados ### 3.1 Layout Shell (comum aos 3 apps) ``` ┌─────────────────────────────────────────────────────┐ │ [≡] Breadcrumbs R$ ●●●●● [👁] [🌙] [🔔] [👤] │ ← Header (60px) ├──────┬──────────────────────────────────────────────┤ │ 🏠 │ │ │ 📊 │ │ │ 🔍 │ Main Content Area │ │ 📒 │ │ │ 🔗 │ │ │ ⚠️ │ │ │ ⚙️ │ │ │ │ │ │ 👤 │ │ │ → │ │ ├──────┴──────────────────────────────────────────────┤ │ [🏠] [📊] [💸] [⚙️] ← Mobile Bottom Nav (somente <768px) │ └─────────────────────────────────────────────────────┘ ``` **Sidebar (64px colapsada → 240px expandida):** - Logo Monetarie (ícone compacto) no topo - Ícones Lucide (20px) centralizados quando colapsada - Labels aparecem com animação ao expandir (hover ou pin) - Tooltip no ícone quando colapsada - Separadores entre seções - User info + logout no rodapé - Active state: bg teal com opacity (#2EC4B6/15%) + borda esquerda teal 3px **Header (60px, sticky):** - Esquerda: Hamburguer (mobile) + Breadcrumbs - Centro: (vazio — limpo) - Direita: Saldo mascarado + Eye toggle + Theme toggle + Notificações + Perfil - Background: surface (adapta ao tema) - Border-bottom: 1px solid border-color ### 3.2 Financial Cards (Home) ``` ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ Entradas (mês) │ │ Saldo disponível│ │ Saídas (mês) │ │ R$ ●●●●●● │ │ R$ ●●●●●● │ │ R$ ●●●●●● │ │ [+] │ │ [$] │ │ [-] │ └─────────────────┘ └─────────────────┘ └─────────────────┘ ``` - Borda esquerda colorida (verde=entradas, azul=saldo, vermelho=saídas) - Ícone no canto com background circular (8px radius) - Valores mascarados por padrão (R$ ●●●●●●) - Eye toggle global no header revela todos - Hover: translateY(-2px) + shadow-md ### 3.3 Quick Access Grid ``` ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ ↙ │ │ 🔲 │ │ ↗ │ │ 🔍 │ │ 📊 │ │ 🔗 │ │Rec.│ │QR │ │Saq.│ │Busc│ │Dash│ │Webhk│ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ ``` - Grid responsivo: 6 colunas (desktop) → 3 (tablet) → 2 (mobile) - Cards com ícone (32px) + label (0.8125rem) - Hover: border teal + shadow-sm - Itens "coming soon": opacity 0.4, cursor default, badge "Em breve" - Badge "Novo" para funcionalidades recém-lançadas ### 3.4 Drawers de Ação Rápida - Slide-in da direita (400px largura, 100vh altura) - Background overlay com blur - Header: Ícone + Título + Subtítulo - Body: Formulário compacto - Footer: Botão de ação primário (full-width) - Close: X no canto + click no overlay - Animação: slide 0.3s ease-out **Drawers disponíveis:** - Receber PIX (chave + valor + toggle "sem valor") - Pagar QR Code (código EMV + valor) - Transferência rápida (chave + valor + descrição) ### 3.5 Stepper de Transação ``` ● Detalhes ─── ● Confirmação ─── ● Resultado ``` - 3 etapas padrão para todas as transações - Step ativo: teal preenchido - Step completo: verde com check - Step futuro: cinza outline - Barra de progresso entre steps - Botão "Voltar" em cada etapa ### 3.6 DataTable Padronizado - Striped rows (alternância de background) - Status badges com cores semânticas (Tag PrimeVue) - Ações em coluna fixa à direita (botões icon-only) - Toolbar: Busca + Filtros + Colunas + Ação primária - Paginação: "Mostrando X a Y de Z" + page buttons + items por página - Empty state: Ícone + título + descrição + CTA - Loading: Skeleton rows - Filtros: Chips removíveis (como Owem faz com data) --- ## 4. Internet Banking — Redesign Detalhado ### 4.1 Páginas existentes (mantidas, redesenhadas) | Rota | Mudança | |------|---------| | `/login` | Manter dark theme, adicionar theme toggle | | `/dashboard` | **Transformar completamente** — cards financeiros + acesso rápido + transações | | `/pix/*` (11 views) | Manter, adicionar drawer para Receber/Pagar | | `/transfer/*` (6 views) | Manter, adicionar drawer para envio rápido | | `/payments/*` (2 views) | Manter | | `/statement` | Manter, melhorar com filtros chips + breadcrumbs | | `/receipts/*` | Manter | | `/security/*` (4 views) | Manter | | `/settings/*` (3 views) | Manter, adicionar theme toggle | | `/api-keys/*` (4 views) | Manter | | `/onboarding/*` (9 views) | Manter | ### 4.2 Novas páginas | Rota | Funcionalidade | Inspiração | |------|---------------|------------| | `/dashboard/analytics` | Dashboard analítico — Entradas/Saídas/Estornos/Resultado, taxa conversão QR, filtros por data, tabs (Visão Geral / Por Razão) | Owem `/dashboard` | | `/meds` | MEDs — 4 cards status (Total, Aguardando Defesa, Análise Jurídica, Fechado), lista filtrada, botão "Como se defender" | Owem `/meds` | | `/fees` | Taxas — tabela por canal (PIX Recebido, QR Code, PIX Enviado) com % + fixa + faixa de volume. Somente leitura. Link para compliance | Owem `/fees` | | `/limits` | Limites — tabela por canal com Diário/Diurno/Noturno/Por Transação. Regras especiais de saque. Horários diurno/noturno | Owem `/limits` | | `/ledger` | Ledger completo — E2E ID, Tipo, Motivo, Status, Valor Bruto, Taxa, Valor Líquido, Datas. Filtros avançados | Owem `/ledger` | | `/transaction-search` | Busca por E2E ID, Entry ID, External ID — campo único com detalhes expandidos | Owem `/transaction-search` | ### 4.3 Layout do novo Dashboard ```vue ``` --- ## 5. Merchant Portal — Redesign Detalhado ### 5.1 Páginas existentes (mantidas, redesenhadas) Todas as 49 views existentes mantidas. Layout atualizado para o design system unificado: - Auth (9 views): manter com tema dark no login - Accounts (7), Documents (7), Development (7): redesenhar com novo layout - PIX, Cards (4), Settings, KYC, etc.: atualizar componentes ### 5.2 Novas páginas | Rota | Funcionalidade | |------|---------------| | `/dashboard/analytics` | Dashboard analítico (igual IB, contexto merchant) | | `/meds` | MEDs — visualização e defesa | | `/fees` | Taxas do merchant (somente leitura) | | `/limits` | Limites do merchant (somente leitura) | | `/ledger` | Ledger completo com Bruto/Taxa/Líquido | | `/transaction-search` | Busca por E2E/Entry/External ID | ### 5.3 Home do Merchant (novo) Mesmo padrão do IB, adaptado para contexto merchant: - Nome da empresa + CNPJ + conta - Cards financeiros - Acesso rápido com items relevantes ao merchant (API Keys, Webhooks, Contas Virtuais, Documentos, etc.) - Últimas transações --- ## 6. Admin Console — Redesign Detalhado ### 6.1 Melhorias no Dashboard - **Gráficos reais**: Volume de transações (line chart), receita por canal (bar chart), tendência mensal - **Taxa de conversão QR**: Gauge/donut (como Owem) - **Alertas**: MEDs pendentes, KYC pendente, webhooks falhando - **Manter**: Stat cards com gradients, timeline, provider status ### 6.2 Novas funcionalidades | Rota | Funcionalidade | |------|---------------| | `/dashboard/meds` | MEDs management (admin) — definir status, atribuir analista, defesas | | `/dashboard/fees/*` | CRUD de taxas por merchant | | `/dashboard/limits/*` | CRUD de limites por merchant | | Bulk actions | Seleção múltipla + exportação CSV em todas DataTables | | Webhook retry | Reenvio de webhooks falhados para merchants | ### 6.3 Melhorias de layout - Mesmo shell do IB/Merchant (consistência) - Merchant switcher com busca - Breadcrumbs em toda página - Dark theme como padrão --- ## 7. Implementação — Fases ### Fase 1: Design System (packages/shared/theme/) — DONE (b9a0f98) - [x] Criar tokens CSS centralizados (`packages/shared/src/theme/tokens.css`) - [x] Implementar theme toggle (dark/light) (`useTheme` composable + `[data-theme]` selector) - [x] Criar componentes base: FlxSidebar, FlxHeader, FlxFinancialCard, FlxQuickAction, FlxDrawer, FlxBottomNav - [ ] Configurar PrimeVue Aura preset customizado (deferred — using CSS overrides instead) ### Fase 2: Layout Shell (aplicar nos 3 apps) — DONE (b9a0f98) - [x] Nova sidebar icon-first (FlxSidebar — 64px collapsed → 240px expanded) - [x] Novo header com saldo mascarado + breadcrumbs + theme toggle (FlxHeader) - [x] Mobile bottom nav (FlxBottomNav — 5 items, hidden on desktop) - [x] Responsive breakpoints padronizados (768px mobile, 1024px tablet) ### Fase 3: IB — Novas páginas + Redesign dashboard — DONE (b9a0f98) - [x] Novo Dashboard com acesso rápido (FlxFinancialCard + FlxQuickAction + FlxDrawer) - [x] Dashboard Analítico (DashboardAnalyticsView — 4 cards + CSS bar chart + channel table) - [x] Drawer (Receber PIX placeholder no dashboard) - [x] MEDs, Taxas, Limites, Ledger, Transaction Search (6 new views + routes) - [ ] Breadcrumbs em todas as views (deferred — FlxHeader has breadcrumb support) ### Fase 4: Merchant — Novas páginas + Redesign dashboard — DONE (b9a0f98) - [x] Novo Home com acesso rápido (FlxFinancialCard + FlxQuickAction) - [x] Dashboard Analítico (DashboardAnalyticsView) - [x] MEDs, Taxas, Limites, Ledger, Transaction Search (6 new views + routes) - [ ] Drawers de ação rápida (deferred — drawer component exists, not wired to merchant actions) ### Fase 5: Admin — Melhorias + Novas funcionalidades — PARTIAL (b9a0f98) - [x] Gráficos reais no dashboard (Chart.js Line/Bar/Doughnut via vue-chartjs) - [x] Alert cards (Pending MEDs, Pending KYC, Failed Webhooks) - [ ] CRUD de taxas e limites (future — admin CRUD not yet built) - [ ] MEDs management (future — admin MEDs not yet built) - [ ] Bulk actions + export CSV (future) - [ ] Webhook retry (future) ### Fase 6: Polish e Deploy - [ ] Testes responsivos (mobile, tablet, desktop) - [ ] Acessibilidade (ARIA, keyboard navigation) - [ ] Performance (lazy loading, virtual scroll) - [ ] Deploy via Cloud Build --- ## 8. Referências Visuais ### Owem (benchmark) - Login: Split-panel dark, tipografia bold, toggle tema - Home: Cards financeiros + grid acesso rápido + tabela transações - Dashboard: Cards Entradas/Saídas/Estornos/Resultado + análise comparativa + conversão QR - Ledger: Tabela com Bruto/Taxa/Líquido - Limites: Diário/Diurno/Noturno + regras especiais - Taxas: %/fixa por canal com faixa de volume - MEDs: Cards de status + workflow - Sidebar: Icon-only compacta com expand ### Monetarie (manter/elevar) - Login dark com orbs animados (IB) — manter - Login split-panel (Admin) — manter - Stepper PIX (IB) — elevar com 3 etapas visuais - Gradient balance card (IB) — evoluir para 3 cards financeiros - DataTable padrão (Admin) — adicionar filtros chips + bulk actions - Security hub (IB) — manter como diferencial - Onboarding 9 steps (IB) — manter como diferencial --- ## 9. Métricas de Sucesso - **Design score**: Elevar de 6.5/10 (merchant) para 8.5+/10 - **Feature parity com Owem**: 100% (tudo que Owem tem + mais) - **Tempo de navegação**: Reduzir em 30% com acesso rápido + drawers - **Consistência visual**: Score 9/10 (design system unificado nos 3 apps) - **Dark mode**: Funcional em 100% das views - **Acessibilidade**: WCAG AA compliance