# Jornada do Cliente — UI (Fase B) Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Entregar a aba "Jornada do Cliente" no menu Captain — 3 tabs (Regras, Configurações, Histórico) — consumindo o backend de lifecycle automation já shippado em `enterprise/app/models/captain/lifecycle/` e `enterprise/app/services/captain/lifecycle/`. **Architecture:** REST endpoints novos em `enterprise/app/controllers/api/v1/accounts/captain/` (3 controllers + extensão do `UnitsController` pra concierge config), jbuilder views, Pundit policies, clientes API Vue + Pinia stores via `storeFactory`, rota-pai com `TabBar` + 3 children routes, páginas Vue em `components-next` seguindo o padrão de `captain/reservations`. Multilíngue obrigatório (en + pt_BR). **Tech Stack:** Rails 7.1 + Pundit + jbuilder, Vue 3 ` ``` - [ ] **Step 3: Stubs dos 3 filhos** Criar `Rules.vue`, `Settings.vue`, `History.vue` com o mesmo esqueleto mínimo: ```vue ``` (Ajustar o `t(...)` pra `SETTINGS` e `HISTORY` nos respectivos.) - [ ] **Step 4: Registrar rotas** Em `app/javascript/dashboard/routes/dashboard/captain/captain.routes.js`, adicionar imports no topo: ```javascript import LifecycleIndex from './lifecycle/Index.vue'; import LifecycleRules from './lifecycle/Rules.vue'; import LifecycleSettings from './lifecycle/Settings.vue'; import LifecycleHistory from './lifecycle/History.vue'; ``` E adicionar ao array `routes` (após a entrada de `captain_reservations_index`): ```javascript { path: frontendURL('accounts/:accountId/captain/lifecycle'), component: LifecycleIndex, meta, redirect: { name: 'captain_lifecycle_rules' }, children: [ { path: 'rules', component: LifecycleRules, name: 'captain_lifecycle_rules', meta, }, { path: 'settings', component: LifecycleSettings, name: 'captain_lifecycle_settings', meta, }, { path: 'history', component: LifecycleHistory, name: 'captain_lifecycle_history', meta, }, ], }, ``` - [ ] **Step 5: Subir dev e testar navegação** ```bash pnpm run dev ``` Abrir `http://localhost:3000/app/accounts//captain/lifecycle` → deve redirecionar pra `/rules`, exibir TabBar com 3 abas e clicar em cada uma navega entre stubs. Verificar console sem erros. - [ ] **Step 6: Commit** ```bash git add app/javascript/dashboard/routes/dashboard/captain/lifecycle \ app/javascript/dashboard/routes/dashboard/captain/captain.routes.js git commit -m "feat(lifecycle): parent view with TabBar + 3 stub children routes" ``` --- ## Task 12: Sidebar — entrada "Jornada do Cliente" **Files:** - Modify: `app/javascript/dashboard/components-next/sidebar/Sidebar.vue` - [ ] **Step 1: Adicionar entrada no grupo Captain** Localizar o bloco que contém `CAPTAIN_RESERVATIONS` (linha ~406). Adicionar **antes** dele: ```javascript { name: 'Lifecycle', label: t('SIDEBAR.CAPTAIN_LIFECYCLE'), activeOn: [ 'captain_lifecycle_rules', 'captain_lifecycle_settings', 'captain_lifecycle_history', ], to: accountScopedRoute('captain_lifecycle_rules'), }, ``` - [ ] **Step 2: Recarregar dev e verificar sidebar** Abrir o app, expandir menu Captain no sidebar — deve aparecer "Jornada do Cliente" e levar pra `/rules`. - [ ] **Step 3: Commit** ```bash git add app/javascript/dashboard/components-next/sidebar/Sidebar.vue git commit -m "feat(lifecycle): sidebar entry for Jornada do Cliente" ``` --- ## Task 13: Tab Histórico — tabela + modal preview **Files:** - Modify: `app/javascript/dashboard/routes/dashboard/captain/lifecycle/History.vue` (implementação completa) - Create: `app/javascript/dashboard/routes/dashboard/captain/lifecycle/components/DeliveryPreviewModal.vue` - [ ] **Step 1: DeliveryPreviewModal.vue** ```vue ``` - [ ] **Step 2: History.vue implementação** ```vue ``` - [ ] **Step 3: Testar manualmente** Ainda com `pnpm run dev` rodando, navegar até `/captain/lifecycle/history`. Sem dados deve mostrar empty state. Via console Rails (`bundle exec rails console`), criar uma `Captain::Lifecycle::Delivery` de teste. Recarregar e ver entrada; clicar em "Preview" abre modal com `rendered_body`. - [ ] **Step 4: Eslint** ```bash pnpm run eslint app/javascript/dashboard/routes/dashboard/captain/lifecycle/History.vue \ app/javascript/dashboard/routes/dashboard/captain/lifecycle/components/DeliveryPreviewModal.vue ``` - [ ] **Step 5: Commit** ```bash git add app/javascript/dashboard/routes/dashboard/captain/lifecycle/History.vue \ app/javascript/dashboard/routes/dashboard/captain/lifecycle/components/DeliveryPreviewModal.vue git commit -m "feat(lifecycle): history tab with paginated list and preview modal" ``` --- ## Task 14: Tab Configurações — guards form + Sofia por unidade **Files:** - Modify: `app/javascript/dashboard/routes/dashboard/captain/lifecycle/Settings.vue` - Create: `app/javascript/dashboard/routes/dashboard/captain/lifecycle/components/ConciergeUnitCard.vue` - [ ] **Step 1: ConciergeUnitCard.vue** ```vue