# Admin Metronic en cd-frontend-dev — qué puede editar el dev frontend

> ⚠️ **PARCIALMENTE OUTDATED**: este doc cubre la extensión inicial del 2026-05-13 (9 módulos admin). Para el scope vigente con 12+ módulos y los items adicionales (clients/support/tokko/cd-base apps/faqs), consultar **[`scope-completo.md`](scope-completo.md)** que es el source of truth canónico desde 2026-05-16.
>
> Este doc se mantiene como referencia de las decisiones de seguridad iniciales y el razonamiento de por qué algunos paths NO se montaron.

> **Audiencia**: devs frontend (Maxi, futuros) que trabajan en `cd-frontend-dev` con docker compose.
> **Extensión vigente desde**: 2026-05-13
> **Source of truth backend**: `app/` sigue siendo readonly desde el repo frontend.

---

## Qué cambió

Hasta 2026-05-12, el repo `cd-frontend-dev` solo permitía editar el **frontend público** (vistas de demos welcome/about/contact, headers/footers/partials del front, CSS de demos y skins).

A partir del **2026-05-13**, el scope se extendió para incluir también el **admin Metronic**: layout del backoffice, pantallas de auth, forms del admin general, CRUDs de cada módulo, y CSS específicos del admin.

Esto permite al dev frontend ajustar el panel administrativo (typos, mobile responsive, dark mode polish, alineaciones, etc.) sin necesidad de tocar backend PHP.

---

## Mapa de lo editable

### 1. Layout admin Metronic (chrome del backoffice)

```
resources/views/layout/demo1/
├── master.blade.php             ← Layout raíz del admin (incluye head, scripts globales)
├── _master.blade.php            ← Wrapper de la grilla
├── _content.blade.php           ← Contenedor del page content
├── _header.blade.php            ← Topbar (logo + nav + user menu)
├── _footer.blade.php            ← Footer del admin
├── _scrolltop.blade.php         ← Botón scroll-to-top
├── aside/
│   ├── _base.blade.php          ← Sidebar wrapper
│   └── _menu.blade.php          ← Items del sidebar (renderea config/demo1/menu.php)
├── header/
│   ├── _base.blade.php          ← Componente header top
│   ├── _menu.blade.php          ← Menú horizontal opcional
│   ├── _mega-menu.blade.php     ← Mega-menu dropdown (si aplica)
│   └── __topbar.blade.php       ← Topbar con search/notifs/user
├── page-title/
│   ├── _default.blade.php       ← Title del breadcrumb por página
│   └── _select.blade.php        ← Variante con select
└── toolbars/
    └── _toolbar-1.blade.php     ← Toolbar de acciones bajo el header
```

**Qué podés ajustar**:
- Colores, tipografías, paddings, márgenes
- Iconos (FontAwesome / Bootstrap Icons / Keenicons)
- Estructura HTML (siempre que el blade siga renderizando el contenido)
- Responsive breakpoints (Bootstrap classes)
- Animaciones / transitions CSS

**Qué NO podés ajustar** (vive en cd-system backend):
- `config/demo1/menu.php` — items del sidebar (qué links aparecen)
- Rutas del admin (`routes/`)
- Lógica de autorización (`app/Http/Middleware/`)

### 2. Pantallas de autenticación

```
resources/views/auth/
├── layout.blade.php             ← Layout común (sin sidebar) para auth pages
├── login.blade.php              ← Login form
├── register.blade.php           ← Registro
├── forgot-password.blade.php    ← Solicitud reset
├── reset-password.blade.php     ← Form de reset
├── verify-email.blade.php       ← Pantalla post-registro
└── confirm-password.blade.php   ← Confirmación re-auth para acciones sensibles
```

**Casos comunes para Maxi**:
- Mejorar visual del login (issue #7 menciona logo borroso, hover brusco)
- Cartel intermedio post-login → spinner inline
- Reset/forgot UI polish
- Mobile responsive

**Lo que NO se toca**:
- Validación de credenciales (`AuthenticatedSessionController`)
- Flow OAuth Google (`app/Modules/Clients/Controllers/`)

### 3. Views del admin general (scope quirúrgico)

```
resources/views/admin/
├── site-data/                   ✅ Tabs editar welcome/about/contact + globales
│   ├── welcome/{demo-X}.blade.php
│   ├── about/{demo-X}.blade.php
│   ├── contact/{demo-X}.blade.php
│   └── index.blade.php          ← Tabs orchestrator
├── content-import/index.blade.php  ✅ UI drag-drop del JSON import
├── onboarding/                  ✅ Wizard de brand kit (colors, fonts, logos)
└── partials/                    ✅ Shared admin partials
```

**Excluidos explícitamente del scope FE** (viven solo en cd-system):

```
resources/views/admin/
├── form-reseller/               ❌ UI del programa Reseller — comercial, Coke maneja
├── project-setup/               ❌ UI de provisioning con endpoints sensibles
│                                   (/migrate-seed, /run-provision) — DevOps
└── qa-checklist.blade.php       ❌ Herramienta interna QA
```

**Casos comunes para el dev FE**:
- Forms del backoffice (campos, labels, validación visual)
- Estados visuales (alerts, badges, progress bars)
- Mobile de los wizards (issue #7 menciona desfases mobile en Mi sitio/Marca)

### 4. CRUDs de cada módulo (Metronic tables + forms)

```
resources/views/modules/
├── blog/admin/             ← Lista + form de Posts/Categorías
├── products/admin/         ← Productos con Stripe integration UI
├── services/admin/         ← Services + ServiceCategories
├── gallery/admin/          ← Galería + tags
├── projects/admin/         ← Projects + categorías + tags + before/after pairs
├── team-members/admin/     ← Equipo + categorías
├── references/admin/       ← Testimonios + categorías
├── menu/admin/             ← Menú gastronómico (productos, cartas, categorías)
└── testimonials/admin/     ← Reviews + categorías
```

**Casos comunes**:
- Polish de tablas (DataTables / paginación)
- Form fields (text/textarea/select/file upload)
- Modales (delete confirmation, quick edit)
- Estados vacíos
- Búsqueda + filtros UX

### 5. CSS específicos del admin

```
public/template/css/
├── admin-brand.css         ← Colores corporativos del admin (var --primary, --secondary)
├── admin-components.css    ← Componentes custom del admin (cards, status badges, etc.)
├── cd-system-base.css      ← Base styles cross-cutting
├── custom.css              ← Overrides ad-hoc
└── modules/                ← CSS específicos por módulo (gallery.css, menu.css, etc.)
```

**Casos comunes**:
- Cambiar paleta del admin (no del front público — eso es skin-*.css)
- Custom Metronic component overrides
- Module-specific styling

---

## Qué NO se sincroniza (sigue siendo backend exclusivo)

❌ `app/` — controllers, models, services, console commands
❌ `config/` — configs PHP (incluye menu items del sidebar)
❌ `database/` — migrations, seeders, schemas
❌ `routes/` — rutas del sitio
❌ `tests/` — testing
❌ `vendor/`, `node_modules/` — dependencies
❌ Otros CSS (theme.css, theme-elements.css, fonts/, keenicons/, etc.) — assets del template Metronic original
❌ `admin/form-reseller/` — UI comercial del programa partners
❌ `admin/project-setup/` — UI de provisioning con endpoints sensibles
❌ `admin/qa-checklist.blade.php` — herramienta interna de QA

**Razón**: estos requieren entender PHP/Laravel/MySQL y tocarlos sin contexto puede romper producción.

---

## Seguridad — qué garantías hay

### Lo que NO pasa (asegurado por diseño)

| Riesgo | Mitigación |
|--------|-----------|
| Secrets `.env` en la imagen Docker | `.dockerignore` excluye `.env`, `.env.local` |
| Tokens producción en `config:cache` bakeado | Dockerfile NO corre `config:cache` durante build |
| Configs con valores hardcoded | `config/services.php` y similares usan `env()` calls — la imagen solo tiene placeholders/defaults DEV LOCAL |
| Tokens producción accesibles desde repo FE | El repo `cd-frontend-dev` **nunca recibe** archivos de `config/`, `app/`, `routes/`, `database/`, `tests/` |
| Endpoints sensibles del provisioning expuestos | `admin/project-setup/` (que tiene los fetch a `/migrate-seed`, `/run-provision`) NO se sincroniza |
| Form del programa Reseller editable | `admin/form-reseller/` NO se sincroniza |

### Lo que sí puede ver el dev FE (aceptado)

- **Estructura del codebase**: vía `docker compose exec app ls -la` puede explorar `app/`, `config/`, etc. Estos archivos existen dentro del container pero **no son editables** (no están montados como volume).
- **Valores DEV LOCAL del .env**: el entrypoint genera un `.env` en el container con credenciales DEV (`DB_HOST=db`, `DB_USERNAME=laravel`, etc.). Estos NO son secrets de producción.
- **Estructura de tablas**: vía `docker compose exec app mysql ...` puede ver schema. Pero la DB local viene vacía/seeded con data de demo, no clientes reales.

### Principio operativo

> **El dev frontend trabaja en un sandbox aislado**. Su container nunca tiene secrets de producción ni acceso a tenants reales. Lo peor que puede pasar al hacer un PR malicioso (intencional o no) es romper visualmente el admin — que Coke revisa antes de mergear vía el flujo de PRs.

---

## Workflow operativo

### Para Maxi (dev frontend)

```bash
# 1. Pull cambios
cd cd-frontend-dev && git pull

# 2. Levantar docker
make up

# 3. Editar archivos visuales (cualquiera de los path editables arriba)

# 4. Validar en http://localhost:8080
#    Admin: http://localhost:8080/login → admin@bewpro.com (password en logs)

# 5. Switch entre demos
make demo DEMO=demo-construction
make demo DEMO=demo-accounting-2

# 6. Commit + push branch + PR
git checkout -b fix/admin-login-typo
git add .
git commit -m "fix(auth/login): corregir typo + mejorar hover botón"
git push origin fix/admin-login-typo
gh pr create
```

### Sync automático

Tras merge a `cd-frontend-dev/main`:
1. **Workflow inverso** (cd-frontend-dev → cd-system) abre PR en cd-system con los cambios.
2. **Coke revisa** el PR en cd-system y mergea.
3. CI deploy automático a VPS1.
4. Workflow forward (cd-system/cd-system → cd-frontend-dev) propaga cualquier cambio externo de vuelta para mantener sincronía.

Esto es **bidireccional** — los cambios fluyen en ambas direcciones sin loops infinitos (cada workflow skipea commits que vienen del otro lado).

---

## Capacidad ampliada — antes vs ahora

| Categoría | Pre 2026-05-13 | Post 2026-05-13 |
|-----------|----------------|------------------|
| Demos públicos (welcome/about/contact) | ✅ | ✅ |
| Headers/footers/partials front | ✅ | ✅ |
| Components compartidos | ✅ | ✅ |
| Legal pages públicas | ✅ | ✅ |
| Módulos /frontend/ | ✅ | ✅ |
| **Layout admin Metronic** | ❌ | ✅ NUEVO |
| **Auth pages** | ❌ | ✅ NUEVO |
| **Admin views generales** | ❌ | ✅ NUEVO |
| **CRUDs de módulos** | ❌ | ✅ NUEVO |
| **CSS admin Metronic** | ❌ | ✅ NUEVO |
| Backend PHP / routes / configs | ❌ | ❌ (sigue cd-system only) |

---

## Referencias

- [Guía de uso](guia-de-uso.md) — setup docker, comandos diarios
- [Anatomía de un demo](anatomia-de-un-demo.md) — qué archivos componen un demo público
- [Sync architecture](sync-architecture.md) — detalle técnico bidireccional
- [Workflow PRs + Issues](workflow-prs-issues.md) — cómo se gestionan contribuciones
- [Estándar de demo](../product-readiness/estandar-demo.md) — fuente de verdad técnica