Files

/ Deploy to Cloudflare Pages (push) Has been cancelled

Details

Etapa 7 ya estaba completamente ejecutada en esta sesión. Todo está en su lugar:

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.

2026-07-07 14:12:10 -03:00

4.9 KiB

Raw Blame History

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:

// 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

// 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)

4.9 KiB Raw Blame History