# Follow-ups de UX de la PWA (#225) — 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:** Resolver los 3 follow-ups de UX del issue #225: eliminar la duplicación de acciones (FAB único, fuera QuickActionRow), dar una entrada visible a Ajustes de empresa (en Perfil, solo admin), y documentar que el recibo es claro por diseño.

**Architecture:** Cambios solo en la PWA (Vue 3). Item 2 = **remociones** (quitar `<QuickActionRow>` de los 3 homes + borrar el componente); el FAB (`BottomNav.fabActions`) ya cubre todo lo necesario (verificado en el spec) → sin tocar `fabActions`. Item 1 = una fila `RouterLink` admin-gated en `ProfileView`. Item 3 = un comentario en `PaymentReceipt.vue` (sin cambio visual).

**Tech Stack:** Vue 3 `<script setup>`, Tailwind v4, Vite. **No hay tests JS de la PWA** → verificación = `npm run build` sin errores + grep + revisión; validación final en dispositivo por el usuario.

**Spec:** `docs/superpowers/specs/2026-08-01-pwa-ux-followups-design.md`

**Gotchas (memoria):**
- Commits desde WSL (`/var/www/html/credify`); NO stage `.claude/`. (credify-wsl-workflow)
- Deploy full (assets): al final build + ship de `public/build`/`public/pwa-sw.js`. (credify-prod-vm)
- `$()`/loops dentro de `wsl bash -lc "..."` se mutilan → usar comandos simples.

---

## File Structure

```
resources/js/pwa/
  components/home/AdminHome.vue         MODIFY  quitar QuickActionRow (import + element + arrays + ICONs muertos)
  components/home/SupervisorHome.vue    MODIFY  idem
  components/home/CollectorHome.vue     MODIFY  idem
  components/dashboard/QuickActionRow.vue DELETE
  views/ProfileView.vue                 MODIFY  fila "Configuración de Empresa" (admin) -> /pwa/company-settings
  components/payments/PaymentReceipt.vue MODIFY  comentario "claro por diseño"
CHANGELOG.md                            MODIFY
```

---

### Task 1: FAB único — eliminar `QuickActionRow` (item 2)

Los 3 homes usan el patrón idéntico: `<QuickActionRow :primary="primaryActions" :more="moreActions" />`, un `import QuickActionRow from '../dashboard/QuickActionRow.vue'`, y `const primaryActions = [...]` + `const moreActions = [...]` (que referencian constantes `ICON_*`).

**Files:**
- Modify: `resources/js/pwa/components/home/AdminHome.vue` (usage línea 3, import 62, arrays 80-89)
- Modify: `resources/js/pwa/components/home/SupervisorHome.vue` (usage 3, import 75, arrays 111-119)
- Modify: `resources/js/pwa/components/home/CollectorHome.vue` (usage 4, import 93, arrays 152-160)
- Delete: `resources/js/pwa/components/dashboard/QuickActionRow.vue`

- [ ] **Step 1: Quitar QuickActionRow de los 3 homes**

En **cada uno** de `AdminHome.vue`, `SupervisorHome.vue`, `CollectorHome.vue`:
1. Borra la línea del template `<QuickActionRow :primary="primaryActions" :more="moreActions" />`.
2. Borra la línea de import `import QuickActionRow from '../dashboard/QuickActionRow.vue'`.
3. Borra los bloques `const primaryActions = [ … ]` y `const moreActions = [ … ]`.
4. Borra las constantes `ICON_*` que **solo** usaban esos arrays. Para cada `ICON_…` que aparecía en los arrays borrados, busca dentro del MISMO archivo si sigue usándose en otro lado (`grep` del nombre); si ya no se usa, borra su `const ICON_… = ...`. Si aún se usa (p. ej. en una sección del home), déjala.

Lee cada archivo antes de editar. No toques el resto del home (KpiCarousel, DashboardHeader, secciones del rol permanecen).

- [ ] **Step 2: Borrar el componente**

```bash
wsl bash -lc "cd /var/www/html/credify && git rm resources/js/pwa/components/dashboard/QuickActionRow.vue"
```

- [ ] **Step 3: Verificar build + que no quedan referencias**

```bash
wsl bash -lc "cd /var/www/html/credify && npm run build 2>&1 | grep -iE 'error|built in' | tail -3"
wsl bash -lc "cd /var/www/html/credify && grep -rn 'QuickActionRow\|primaryActions\|moreActions' resources/js/pwa || echo 'OK: sin referencias a QuickActionRow/primaryActions/moreActions'"
```
Expected: build sin errores; **cero** referencias residuales (ni import, ni element, ni arrays). Si el build reporta warnings de variables/ICONs sin uso, límpialos.

- [ ] **Step 4: Commit**

```bash
wsl bash -lc "cd /var/www/html/credify && git add resources/js/pwa/components/home resources/js/pwa/components/dashboard/QuickActionRow.vue && git commit -m 'refactor(pwa): FAB como superficie unica de acciones — eliminar QuickActionRow (#225)'"
```

---

### Task 2: Entrada a Ajustes de empresa en Perfil (item 1)

La lista de acciones de `ProfileView.vue` es un `<div class="space-y-2">` (líneas ~100-122) con dos filas: "Limpiar datos locales" y "Cerrar Sesión". Se añade arriba una fila admin-gated hacia `/pwa/company-settings`, con el mismo patrón de fila (`pwa-card`, `card-press`).

**Files:**
- Modify: `resources/js/pwa/views/ProfileView.vue`

- [ ] **Step 1: Añadir la fila (admin)**

Dentro del `<div class="space-y-2">` de Actions, como **primer** hijo (antes del botón "Limpiar datos locales"), añade:

```vue
                <RouterLink
                    v-if="authStore.isAdmin"
                    to="/pwa/company-settings"
                    class="w-full flex items-center justify-between rounded-2xl px-4 py-4 card-press pwa-card"
                >
                    <span class="text-slate-700 dark:text-slate-300 text-sm font-medium">Configuración de Empresa</span>
                    <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </RouterLink>
```

Notas:
- `authStore` ya se usa en `ProfileView.vue` (badge de rol, logout). Usa la MISMA referencia del store que ya existe en el `<script setup>`; si se llama distinto (p. ej. `auth`), ajústalo. Getter: `.isAdmin`.
- `RouterLink` es global (Vue Router) — no requiere import. Si prefieres, puedes usar un `<button @click="router.push('/pwa/company-settings')">` con el mismo markup, pero `RouterLink` es lo más simple.

- [ ] **Step 2: Verificar build**

```bash
wsl bash -lc "cd /var/www/html/credify && npm run build 2>&1 | grep -iE 'error|built in' | tail -2"
wsl bash -lc "cd /var/www/html/credify && grep -n 'company-settings' resources/js/pwa/views/ProfileView.vue"
```
Expected: build OK; el grep muestra la nueva ruta en ProfileView.

- [ ] **Step 3: Commit**

```bash
wsl bash -lc "cd /var/www/html/credify && git add resources/js/pwa/views/ProfileView.vue && git commit -m 'feat(pwa): entrada a Ajustes de empresa en Perfil (solo admin) (#225)'"
```

---

### Task 3: Recibo claro por diseño + CHANGELOG (item 3)

**Files:**
- Modify: `resources/js/pwa/components/payments/PaymentReceipt.vue`
- Modify: `CHANGELOG.md`

- [ ] **Step 1: Comentario en PaymentReceipt**

Justo antes del contenedor `<div class="relative bg-white rounded-2xl …">` (dentro del slot de `BaseSheet`, ~línea 3), añade un comentario Vue:

```vue
        <!-- Tema CLARO intencional: el recibo es un documento imprimible/compartible con el
             cliente (ver @media print más abajo). NO migrar a dark — se vería mal en papel/WhatsApp.
             Decisión issue #225. -->
```

Y opcionalmente, junto a la regla `@media print` del `<style>` (~línea 265-272), un comentario `/* Recibo claro por diseño — issue #225 */`.

- [ ] **Step 2: CHANGELOG**

Bajo `## [Sin publicar]` → `### Cambiado` (o `### Corregido`; usa la que ya exista), añade: mejoras de UX de la PWA (#225) — **FAB como superficie única de acciones** (se elimina el `QuickActionRow` duplicado de los 3 homes; todo lo necesario ya está en el FAB o en las tabs), **entrada a Ajustes de empresa** en Perfil (solo admin; la ruta estaba huérfana), y se documenta que el **recibo de pago es claro por diseño** (documento imprimible/compartible). Ref al spec.

- [ ] **Step 3: Verificar build + commit**

```bash
wsl bash -lc "cd /var/www/html/credify && npm run build 2>&1 | grep -iE 'error|built in' | tail -2"
wsl bash -lc "cd /var/www/html/credify && git add resources/js/pwa/components/payments/PaymentReceipt.vue CHANGELOG.md && git commit -m 'docs(pwa): recibo claro by-design + CHANGELOG follow-ups UX (#225)'"
```
Expected: build OK.

---

## Verificación holística (controller)

- `npm run build` sin errores; `grep -rn 'QuickActionRow' resources/js` → **cero**.
- Revisión: los 3 homes renderizan bien sin la grilla (KPIs + secciones intactos); la fila "Configuración de Empresa" aparece **solo** para admin en Perfil y navega a la vista; el recibo sin cambios visuales.
- Validación final en dispositivo por el usuario (admin entra a settings desde Perfil; el FAB es el único menú de acciones; recibo igual).
- Cerrar los 3 checkboxes del issue #225 al desplegar.

## Deploy (post-merge, flujo — **full**: build + assets)
Cambia el bundle de la PWA → tras merge a `main` y realineo de `dev`: `npm run build` en WSL → scp de `build`+`pwa-sw.js` a prod + swap atómico → `git pull` + `optimize` + reload php-fpm → validación en dispositivo. Ver [[credify-prod-vm]].

---

## Self-Review (cobertura vs. spec)

- **Item 2 — FAB único (quitar QuickActionRow de 3 homes + borrar componente, sin tocar fabActions):** Task 1. ✅
- **Item 1 — entrada a settings en Perfil, admin-gated:** Task 2 (RouterLink `v-if="authStore.isAdmin"` → `/pwa/company-settings`). ✅
- **Item 3 — recibo claro by-design (solo comentario):** Task 3 Step 1. ✅
- **No tocar backend/rutas/fabActions:** ningún task lo hace (la ruta ya existe; el FAB no cambia). ✅
- **CHANGELOG + cerrar #225:** Task 3 Step 2 + verificación holística. ✅
- **Verificación build + device (sin tests JS):** cada task build + holística. ✅
- **Deploy full:** sección Deploy. ✅

**Placeholder scan:** Task 1 son remociones precisas (import/element/arrays citados con línea + regla para ICONs muertos); Task 2 con el markup exacto de la fila; Task 3 con el comentario exacto. Sin placeholders.

**Consistencia:** `authStore.isAdmin` (getter existente en `stores/auth.js`), ruta `/pwa/company-settings` (existente con `meta.roles:['admin']`), patrón de fila `pwa-card`/`card-press` (idéntico a las filas existentes de ProfileView). ✅