# Follow-ups de UX de la PWA (issue #225)

- **Fecha:** 2026-08-01
- **Rama:** `feat/pwa-ux-followups`
- **Estado:** diseño aprobado en brainstorming, pendiente de plan.
- **Motivación:** 3 hallazgos de UX/navegación anotados durante el QA en dispositivo del fix de overlays (issue #225). No son regresiones — son mejoras preexistentes.

## Contexto (arquitectura actual)

- **Nav inferior:** 6 tabs; 4 fijos (Inicio, Cobros, Créditos, Clientes) + 2 según rol. El **Perfil** se accede por el avatar del `DashboardHeader` (no hay tab de perfil).
- **FAB** (`BottomNav.fabActions`): botón "+" flotante con acciones por rol — *creación + módulos sin tab*. Admin: Nuevo Crédito, Nuevo Cliente, Registrar Gasto, Aprobaciones, Morosidad, Socios. Supervisor: los 4 primeros de creación/aprobación. Cobrador: solo los 3 de creación.
- **QuickActionRow** (`components/dashboard/QuickActionRow.vue`): grilla de acciones en cada home (AdminHome/SupervisorHome/CollectorHome), con `primary` (3 inline) + `more` (hoja "Más"). **Solo esos 3 homes lo usan.**
- **`company-settings`** (`/pwa/company-settings`, `meta.roles: ['admin']`): la vista existe pero **está huérfana** — grep en toda la PWA no encuentra ninguna entrada de UI; solo se llega escribiendo la URL.
- **`PaymentReceipt.vue`**: 100% tema claro (`bg-white`, texto gris), sin `dark:`, con una regla `@media print` que fuerza fondo blanco (el recibo se imprime/comparte con el cliente).
- **Roles/permisos:** `stores/auth.js` expone `isAdmin`/`isSupervisor`/`isCollector`, `userRole`, y getters `can*` (permisos del backend). `isAdmin` funciona offline (rol persistido en localStorage).

## Decisiones (del brainstorming)

1. **Punto 2 → FAB como superficie única.** El FAB y el QuickActionRow **duplican** acciones en todos los roles (Nuevo Crédito, Nuevo Cliente, Registrar Gasto, Cartera/mora) → la confusión reportada. Se **elimina el QuickActionRow**; el FAB queda como hub único de acciones.
2. **Punto 1 → entrada a settings en `ProfileView`.** Fila "Configuración de Empresa" gateada por `isAdmin`, → `/pwa/company-settings`.
3. **Punto 3 → recibo se mantiene claro (by-design).** Es un documento imprimible/compartible; el claro es lo correcto. Sin cambio visual; solo un comentario que documente la intención.

## Diseño

### 1. Entrada a Ajustes de empresa (`ProfileView.vue`)
Añadir una **fila pulsable "Configuración de Empresa"** (icono engranaje) en la lista de acciones de `ProfileView.vue` (junto a "Limpiar datos locales" / "Cerrar Sesión"), reutilizando el patrón de fila existente, envuelta en `v-if="authStore.isAdmin"`, que navega a `/pwa/company-settings` (`RouterLink` o `router.push`). Resuelve la ruta huérfana. Solo admin (coherente con `meta.roles: ['admin']`).

### 2. FAB como superficie única (eliminar `QuickActionRow`)
- **Eliminar** el uso de `<QuickActionRow>` en `components/home/AdminHome.vue`, `SupervisorHome.vue`, `CollectorHome.vue`, junto con los arreglos `primary`/`more` (y su import) que lo alimentaban. Los homes quedan **DashboardHeader → KPIs → secciones del rol** (más limpios).
- **Borrar** `components/dashboard/QuickActionRow.vue` (sin uso tras lo anterior).
- **El FAB queda como hub único.** Verificación de que **nada se pierde** (todo lo del QuickActionRow ya es tab o está en el FAB):

  | Ítem del QuickActionRow | ¿Cubierto por? |
  |---|---|
  | Registrar pago → `/pwa/collections` | **Tab** Cobros |
  | Nuevo crédito → `/pwa/credits/new` | **FAB** (todos los roles) |
  | Nuevo cliente → `/pwa/clients/new` | **FAB** (todos los roles) |
  | Registrar gasto → `/pwa/expenses/new` | **FAB** (admin/supervisor/cobrador) |
  | Finanzas/Caja → `/pwa/financials` | **Tab** Finanzas (admin) |
  | Cartera y mora → `/pwa/delinquency` | **FAB** "Morosidad" (admin) / **Tab** Mora (supervisor) |
  | Equipo → `/pwa/team` | **Tab** Equipo (supervisor) |
  | Cobros del día → `/pwa/collections` | **Tab** Cobros |
  | Mi ruta → `/pwa/credits/order` | **Tab** Ruta (cobrador) |

  Conclusión: el FAB actual + las tabs cubren el 100%. **No se requiere cambiar `fabActions`**; el plan igualmente verifica por rol (crear + módulos sin tab) y solo añade un hueco si apareciera. No se duplican tabs en el FAB.

### 3. Recibo — claro por diseño (`PaymentReceipt.vue`)
**Sin cambio visual.** Añadir un comentario en `PaymentReceipt.vue` (cerca del contenedor `bg-white` y/o la regla `@media print`) que explique que el tema claro es **intencional** (documento imprimible/compartible con el cliente) para que no se "corrija" a futuro. El punto se cierra como *by-design*.

## No-objetivos / límites
- **No** rediseñar el FAB ni los homes más allá de quitar el QuickActionRow.
- **No** tocar backend ni rutas (la ruta `company-settings` ya existe con su `meta`).
- **No** oscurecer el recibo (decisión explícita).
- **No** cambiar `fabActions` salvo que la verificación por rol revele un hueco real.

## Riesgos / gotchas
- **Homes vacíos/rotos** tras quitar el QuickActionRow — verificar que cada home renderiza bien sin la grilla (los KPIs + secciones permanecen). Revisar que no queden imports/variables muertas (`primary`/`more`, el import de QuickActionRow).
- **Sin tests JS de la PWA** → `npm run build` + revisión + validación en dispositivo (el usuario).
- **Dark scoped CSS gotcha** (no aplica aquí, pero si se tocaran estilos dark: `:global(html.dark .sel)`). Ver [[credify-pwa-dark-scoped-css]].
- **Deploy full** (assets): cambia el bundle de la PWA → build + ship de `public/build`/`public/pwa-sw.js`. Ver [[credify-prod-vm]].

## Verificación
- `npm run build` sin errores; grep que confirme que `QuickActionRow` ya no se importa/usa en ningún lado.
- Revisión: los 3 homes se ven bien sin la grilla; la fila "Configuración de Empresa" aparece **solo** para admin en Perfil y navega a la vista; el recibo sin cambios.
- Validación final en dispositivo por el usuario (admin: entra a settings desde Perfil; todos: el FAB es el único menú de acciones; recibo igual).
- Cerrar los 3 checkboxes del issue #225.