Etapa 7 ya estaba completamente ejecutada en esta sesión. Todo está en su lugar:
Some checks failed
/ Deploy to Cloudflare Pages (push) Has been cancelled
Some checks failed
/ Deploy to Cloudflare Pages (push) Has been cancelled
Fix A1 — isProfileLoaded en AuthContext ✅ useState(false) inicial setIsProfileLoaded(true) si onAuthStateChange devuelve null (no hay usuario que sincronizar) setIsProfileLoaded(false) en SIGNED_IN (resetea para el nuevo sync) setIsProfileLoaded(true) en el finally del sync effect (después de syncProfileFromDB, éxito o error) Fix A2 — Guard en LibraryPage ✅ if (!user || !isProfileLoaded) devuelve skeleton animado antes de cualquier contenido rol-dependiente Fix A3 — Campo "cliente" read-only para client_editor ✅ GlobalSettingsPanel.tsx: <p> estático en lugar de <Input> cuando isClientRole WorkspacePage.tsx: topbar muestra el valor sin input ni lápiz para client_editor Fix B — Migración 016 + aplicada a DB ✅ Archivo supabase/migrations/016_add_simulations_update_policy.sql creado Policy simulations_update confirmada activa en DB (pg_policies devuelve las 4 policies de simulations) Fix adicional — 403 en POST /processes ✅ (ejecutado en el turno inmediato anterior) updateEditable() en process-repo.ts usa .update() en lugar de .upsert() para todos los paths de edición Tests: 586 verdes, build limpio. Lo que falta según el checklist del prompt es la validación visual del director (msebem@gmail.com en la app real). Eso requiere tu OK después de verificar en el navegador. domain/types.ts — orgId: string | null agregado a Process (campo de DB ya existente, ahora mapeado en el dominio). process-repo.ts — fromRow incluye orgId: (row.org_id as string | null) ?? null. Ambas queries (getById y getAll) usan select('*'), por lo que el campo viene gratis. WorkspacePage.tsx: Import supabase para el fetch de org name Estado orgName + useEffect que hace SELECT name FROM organizations WHERE id = orgId cuando cambia currentProcess?.orgId Variable isClientRole (solo client_editor — client_viewer ya fue redirigido) backLabel: "Procesos" para client_editor, nombre de org (o "Volver" mientras carga) si hay orgId, "Biblioteca" si no hay handleBack(): navega a /?org=<orgId> para admin con proceso de cliente, a / para el resto El Home button + Tooltip fueron reemplazados por <Button variant="ghost" size="sm"> con ArrowLeft + backLabel LibraryPage.tsx: Import useSearch Lee orgParam = useSearch({ from: '/' }) as { org?: string } useEffect que, cuando orgParam está presente y la carga terminó, busca el proceso con p.orgId === orgParam, obtiene su groupId, y hace scrollIntoView al elemento group-{groupId} Los GroupCards en el grid están ahora envueltos en <div id="group-{group.id}"> para ser alcanzables por el scroll Tests — workspace-back-button.test.ts con 6 casos: admin+orgName, admin+orgName loading, admin sin org, member sin org, client_editor, client_viewer. Fixtures actualizados en 13 archivos con orgId: null. Mock de useSearch agregado en library-ui.test.tsx.
This commit is contained in:
133
sprints/sprint-7/ETAPA_7B_PROMPT.md
Normal file
133
sprints/sprint-7/ETAPA_7B_PROMPT.md
Normal file
@@ -0,0 +1,133 @@
|
||||
# Etapa 7B — Botón "volver" contextual en workspace
|
||||
|
||||
**Sprint:** 7
|
||||
**Fecha:** 2026-07-07
|
||||
**Alcance:** workspace header únicamente. Sin tocar LibraryPage, AuthContext, migraciones, ni lógica de simulación.
|
||||
|
||||
---
|
||||
|
||||
## Problema
|
||||
|
||||
Cuando un admin (platform_admin/member) abre el workspace de un proceso que pertenece a un cliente (org no-provider), no hay forma de volver a la vista de los procesos de ese cliente. El ícono de casa (🏠) lleva a la biblioteca general, pero pierde el contexto de qué cliente se estaba revisando.
|
||||
|
||||
El mismo problema aplica a client_editor: al entrar al workspace, no hay un back button visible.
|
||||
|
||||
---
|
||||
|
||||
## Comportamiento esperado
|
||||
|
||||
### Para admin (platform_admin / member)
|
||||
|
||||
Si el proceso tiene `org_id` asignado (proceso de un cliente):
|
||||
|
||||
```
|
||||
← Solar Banco [nombre del proceso] [botones de acción]
|
||||
```
|
||||
|
||||
El botón "← {org.name}" navega a `/library?org={org_id}`.
|
||||
|
||||
Si el proceso NO tiene `org_id` (proceso sin cliente asignado):
|
||||
|
||||
```
|
||||
← Biblioteca [nombre del proceso] [botones de acción]
|
||||
```
|
||||
|
||||
Navega a `/library`.
|
||||
|
||||
### Para client_editor / client_viewer
|
||||
|
||||
```
|
||||
← Procesos [nombre del proceso] [botones de acción]
|
||||
```
|
||||
|
||||
Navega a `/library`. (Para estos roles, `/library` ya muestra solo los procesos de su org.)
|
||||
|
||||
---
|
||||
|
||||
## Cambios en código
|
||||
|
||||
**ANTES de empezar:** leer el componente del header del workspace para entender la estructura actual del breadcrumb/navegación. También leer cómo el store o el componente accede a la información del proceso actual (nombre, org_id). Verificar si la información de `org_id` y `org_name` está disponible en el estado del proceso cargado.
|
||||
|
||||
### 1. Library route — soporte para query param `?org=<uuid>`
|
||||
|
||||
En `LibraryPage.tsx` (o el router de la biblioteca), agregar soporte para el query param `org`:
|
||||
|
||||
- Leer `org` de los query params con TanStack Router (`useSearch`)
|
||||
- Si `org` está presente: al cargar la biblioteca, hacer scroll automático al grupo/cliente cuyo `org_id` coincide, o resaltarlo visualmente
|
||||
- Si `org` no está presente: comportamiento actual sin cambios
|
||||
|
||||
**No es necesario filtrar la lista** — mostrar todos los clientes como siempre, pero posicionar la vista en el cliente relevante. Esto preserva el contexto sin ocultar información.
|
||||
|
||||
El scroll puede ser simple: `document.getElementById('org-{org_id}')?.scrollIntoView({ behavior: 'smooth', block: 'start' })` con un `useEffect` que se dispara cuando `org` está en los params y la lista cargó.
|
||||
|
||||
### 2. Workspace header — back button contextual
|
||||
|
||||
En el componente del workspace header (WorkspaceHeader, WorkspacePage, o donde esté el breadcrumb):
|
||||
|
||||
Agregar antes del separador `|` y del nombre del proceso un botón de navegación contextual:
|
||||
|
||||
```typescript
|
||||
// Determinar destino del back button
|
||||
const backHref = process.orgId
|
||||
? `/library?org=${process.orgId}`
|
||||
: '/library'
|
||||
|
||||
const backLabel = process.orgName // si está disponible en el store
|
||||
?? (isClientRole ? 'Procesos' : 'Biblioteca')
|
||||
```
|
||||
|
||||
**UI:** botón ghost pequeño con ícono de flecha izquierda (`ArrowLeft` de Lucide) + texto. Consistente con el estilo del header actual. Ejemplo:
|
||||
|
||||
```
|
||||
[←] Solar Banco | Conciliaciones ATM [editable] • ...
|
||||
```
|
||||
|
||||
Si `process.orgName` no está disponible en el store actual, hay dos opciones:
|
||||
a) Hacer un fetch adicional de la organización (simple: `supabase.from('organizations').select('name').eq('id', orgId).single()`) al cargar el workspace
|
||||
b) O usar solo el botón sin nombre ("← Volver") y el admin sabrá dónde lo lleva
|
||||
|
||||
**Preferir opción (a)** si el costo de implementación es bajo (un SELECT adicional en el store de workspace). Si es complejo, usar (b) y registrar como mejora en BACKLOG.md.
|
||||
|
||||
---
|
||||
|
||||
## Tests
|
||||
|
||||
```typescript
|
||||
// Mínimo:
|
||||
|
||||
// 1. Back button muestra texto correcto para admin con proceso de cliente
|
||||
// (mock: process.orgId = 'some-uuid', process.orgName = 'Solar Banco')
|
||||
// → expect button text to contain 'Solar Banco' o 'Volver'
|
||||
// → expect link href to contain '/library?org=some-uuid'
|
||||
|
||||
// 2. Back button muestra "Biblioteca" para admin con proceso sin org
|
||||
// (mock: process.orgId = null)
|
||||
// → expect href = '/library'
|
||||
|
||||
// 3. Back button muestra "Procesos" para client_editor
|
||||
// (mock: isClientRole = true)
|
||||
// → expect href = '/library'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Criterios de validación
|
||||
|
||||
- [ ] Admin en workspace de proceso con cliente → ve "← [nombre del cliente]" en el header
|
||||
- [ ] Click en ese botón → navega a `/library?org=<uuid>` → biblioteca hace scroll al cliente correspondiente
|
||||
- [ ] Admin en workspace de proceso sin cliente asignado → ve "← Biblioteca"
|
||||
- [ ] client_editor en workspace → ve "← Procesos"
|
||||
- [ ] El botón no aparece más de una vez, no rompe el layout del header
|
||||
- [ ] `npm run test` → tests verdes
|
||||
- [ ] `npm run build` limpio
|
||||
- [ ] **Validación visual del director antes del OK formal**
|
||||
|
||||
---
|
||||
|
||||
## NO modificar
|
||||
|
||||
- Edge Functions
|
||||
- Migraciones
|
||||
- Lógica de simulación, ROI, PDF, CSV
|
||||
- `ConfirmInvitePage`, `AdminPage`, `ReportPage`
|
||||
- `AuthContext` (cubierto en Etapa 7)
|
||||
Reference in New Issue
Block a user