# Sprint 1.4 · Design del Panel Admin > Especificación visual de las 5 pantallas administrativas. Para que Claude Code construya consistente. ## Filosofía visual **Mantener identidad de Linear/Vercel/Stripe.** Sidebar denso, mucho espacio en blanco, glass cards, mesh gradient sutil de fondo. **Inspiración directa:** - Linear (panel de configuración de proyecto) - Vercel (settings de organización) - Stripe Dashboard (catálogo de productos) --- ## 1 · Layout Admin (`app/Views/layouts/admin.php`) Estructura general (extends del layout base): ``` ┌─────────┬───────────────────────────────────────────────────────┐ │ SIDEBAR │ TOPBAR │ │ (240px) ├───────────────────────────────────────────────────────┤ │ │ │ │ Logo │ MAIN CONTENT │ │ │ │ │ Tenant │ │ │ chip │ │ │ │ │ │ ─── │ │ │ MÓDULOS │ │ │ - X │ │ │ - X │ │ │ ─── │ │ │ ADMIN │ ← sección nueva │ │ - cat. │ │ │ - niv. │ │ │ - prod. │ │ │ - plan. │ │ │ - conf. │ │ │ │ │ │ ─── │ │ │ Usuario │ │ │ Logout │ │ └─────────┴───────────────────────────────────────────────────────┘ ``` **Sidebar nuevo · sección ADMINISTRACIÓN:** ```html
Administración
``` ⚠️ **Iconos:** usar Lucide Icons SVG inline, NO emojis. Los emojis arriba son solo placeholders para que Claude vea la idea. **Item activo:** background `rgba(124,58,237,0.15)`, barra lateral 3px purple, texto purple-soft. **Topbar:** ``` ┌──────────────────────────────────────────────────────────┐ │ Buenas tardes, Andrea 🔍 [+] │ │ Productos > Listado │ └──────────────────────────────────────────────────────────┘ ``` - Greeting Georgia (igual al dashboard) - Breadcrumbs en text-sm color ink-400 - Botón primario contextual a la derecha (ej: "+ Nuevo producto") - Buscador opcional (icono lupa) --- ## 2 · Pantalla de Listado (patrón general) Aplica a Categorías, Niveles, Productos, Planes. ``` ┌──────────────────────────────────────────────────────────┐ │ EYEBROW · ADMINISTRACIÓN │ │ │ │ Productos [+ Nuevo] │ │ Gestiona el catálogo de tu funeraria. │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ 🔍 Buscar... │ │ │ │ Filtros: [Categoría] [Nivel] [Tipo] [Activo] │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ ┌────┬──────────┬──────────┬──────────┬──────┬───┐ │ │ │ │ NOMBRE │ CATEGORÍA│ NIVEL │ $ │ │ │ │ ├────┼──────────┼──────────┼──────────┼──────┼───┤ │ │ │ 📦 │ Urna A │ Urnas │ Premium │ 450k │ ⋮ │ │ │ │ 📦 │ Urna B │ Urnas │ Tradic. │ 180k │ ⋮ │ │ │ │ ⚱️ │ Relic. C │ Relic. │ Austero │ 35k │ ⋮ │ │ │ └────┴──────────┴──────────┴──────────┴──────┴───┘ │ │ │ │ Mostrando 1-10 de 47 [< 1 2 3 4 5 >] │ └──────────────────────────────────────────────────────────┘ ``` ### Tabla - Header con eyebrows uppercase + tracking-widest - Border bottom muy sutil (1px rgba(255,255,255,0.04)) - Hover en fila: background rgba(255,255,255,0.02) - Click en fila → abre modal de edición - Última columna: dropdown "⋮" con: Editar / Duplicar / Desactivar / Eliminar ### Estados especiales **Vacío:** ``` 📦 Sin productos aún. Empezá creando el primero. [+ Crear producto] ``` **Loading:** - Skeleton shimmer (las filas se reemplazan por divs grises animados) --- ## 3 · Modal de crear/editar Aplica a todas las entidades. **NO usamos rutas separadas** (más rápido para el admin). ``` ┌─────────────────────────────────────────────────┐ │ Nuevo producto [×] │ │ ───────────────────────────────────────────────│ │ │ │ NOMBRE │ │ [_______________________________________] │ │ El nombre que verá el cliente. │ │ │ │ CATEGORÍA NIVEL │ │ [Seleccionar ▾] [Seleccionar ▾] │ │ │ │ TIPO DISPONIBLE PARA │ │ [Producto ▾] [NI / NF / Ambos] │ │ │ │ PRECIO BASE CLP PRECIO BASE UF │ │ [$_____________] [_______ UF] │ │ │ │ FOTOS │ │ ┌──────────────────────────────────────────┐ │ │ │ 📤 Arrastrá aquí o click para subir │ │ │ │ JPEG, PNG, WebP · max 5MB │ │ │ └──────────────────────────────────────────┘ │ │ │ │ [thumb] [thumb] [thumb] [+] │ │ │ │ DESCRIPCIÓN │ │ [ ] │ │ [ ] │ │ │ │ ───────────────────────────────────────────────│ │ [Cancelar] [Guardar] │ └─────────────────────────────────────────────────┘ ``` ### Modal style - Background overlay: `rgba(15,15,24,0.70) + backdrop-blur(8px)` - Modal: glass-light (en light) o glass-dark (en dark) con border-radius 24px, max-width 720px - Animación entrada: fade + scale 0.96 → 1, 200ms - Click fuera: confirma si hay cambios sin guardar - Escape: cierra modal ### Form inputs Usar el patrón del login: ``` LABEL EYEBROW ← text-xs uppercase tracking-widest color ink-400 [input field] ← bg rgba(255,255,255,0.04) border 1px sutil helper text ← text-xs ink-400 ``` Estados: - **Focus:** border purple, ring 3-4px purple/15 - **Error:** border pink, helper text pink, mensaje específico - **Success:** check verde inline (raro, solo en validación async como "slug disponible") ### Botones del modal - **Cancelar:** ghost (sin background, solo texto) - **Guardar:** primary purple gradient con glow - Si hay loading: spinner inline + disabled --- ## 4 · Pantalla de Productos (caso especial) Es la más rica de las 5 pantallas porque tiene galería de imágenes. ### Listado de productos Patrón general de listado + columna especial: - Primera columna: **thumbnail 40x40** del producto (imagen principal o placeholder) ### Modal de producto Tabs internos: **Datos generales / Imágenes / Variantes** **Tab Imágenes:** ``` ┌──────────────────────────────────────────────────┐ │ FOTOS DEL PRODUCTO │ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ 📤 Arrastrá imágenes aquí │ │ │ │ o click para subir │ │ │ │ JPEG, PNG, WebP · 400×400 min · max 5MB │ │ │ └────────────────────────────────────────────┘ │ │ │ │ Galería (3): │ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ ⭐ 1 │ │ 2 │ │ 3 │ │ │ │ [img] │ │ [img] │ │ [img] │ │ │ │ [×] │ │ [×] │ │ [×] │ │ │ └────────┘ └────────┘ └────────┘ │ │ │ │ ⭐ = imagen principal │ │ Click en imagen para hacerla principal │ │ Drag para reordenar │ └──────────────────────────────────────────────────┘ ``` ### Upload de imágenes **Flow:** 1. Cliente selecciona archivo (drag&drop o click) 2. JS valida tamaño + mime + dimensiones (rápido feedback) 3. Preview inmediato con `URL.createObjectURL()` 4. Upload AJAX a `POST /admin/upload-image` 5. Server valida nuevamente, sube a R2, devuelve `{ id, r2_path, url_temporal }` 6. Thumbnail se actualiza con la URL de R2 7. Al guardar el producto, se asocian los IDs de imágenes --- ## 5 · Pantalla de Planes (la más compleja) Builder de planes con líneas. ### Modal de plan ``` ┌──────────────────────────────────────────────────┐ │ Nuevo plan [×] │ │ ──────────────────────────────────────────────── │ │ │ │ NOMBRE │ │ [Plan Tradicional Familiar___________] │ │ │ │ CATEGORÍA TIPO │ │ [Planes ▾] [Plan ▾] │ │ │ │ DISPONIBLE PARA MONEDA │ │ [NF (Necesidad Futura)▾] [UF ▾] │ │ │ │ PRECIO BASE │ │ [120 UF] │ │ │ │ ──────────────────────────────────────────────── │ │ COMPOSICIÓN DEL PLAN │ │ │ │ ┌──────────────────────────────────────────┐ │ │ │ ⠿ 1 × Urna Olmo Tradicional [específica] │ │ │ │ Obligatorio [Editar] [Eliminar] │ │ │ └──────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────┐ │ │ │ ⠿ 3 × Relicarios [a elección] │ │ │ │ Categoría: Relicarios │ │ │ │ Nivel: cualquier nivel │ │ │ │ Obligatorio [Editar] [Eliminar] │ │ │ └──────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────┐ │ │ │ ⠿ 1 × Capilla Velatoria 24hs [específica]│ │ │ │ Opcional [Editar] [Eliminar] │ │ │ └──────────────────────────────────────────┘ │ │ │ │ [+ Agregar línea fija] [+ Agregar línea elección] │ │ │ ──────────────────────────────────────────────── │ │ [Cancelar] [Guardar] │ └──────────────────────────────────────────────────┘ ``` ### Builder de líneas Cada línea es una "tarjeta arrastrable" con: - Drag handle ⠿ - Cantidad + producto/categoría - Badge "específica" o "a elección" - Toggle obligatorio/opcional - Botones editar/eliminar **Modal interno** para agregar línea: ``` ┌──────────────────────────────────────────────┐ │ Agregar línea fija [×] │ │ │ │ PRODUCTO │ │ [Buscar producto... ▾] │ │ │ │ CANTIDAD │ │ [- 1 +] │ │ │ │ ☑ Obligatorio (no se puede declinar) │ │ │ │ [Cancelar] [Agregar] │ └──────────────────────────────────────────────┘ ``` ``` ┌──────────────────────────────────────────────┐ │ Agregar línea a elección [×] │ │ │ │ CATEGORÍA │ │ [Relicarios ▾] │ │ │ │ NIVEL (opcional) │ │ [Cualquier nivel ▾] │ │ │ │ CANTIDAD │ │ [- 3 +] │ │ │ │ ☑ Obligatorio │ │ │ │ [Cancelar] [Agregar] │ └──────────────────────────────────────────────┘ ``` --- ## 6 · Pantalla de Configuración Tabs en lugar de modal porque son muchos campos. ``` ┌──────────────────────────────────────────────────┐ │ EYEBROW · ADMINISTRACIÓN │ │ │ │ Configuración │ │ Ajustes de tu funeraria. │ │ │ │ ┌─────────┬─────────────┬──────────┬───────────┐ │ │ │ MONEDA │ FUNERARIA │ BRANDING │ AVANZADO │ │ │ └─────────┴─────────────┴──────────┴───────────┘ │ │ │ │ Tab activo: Moneda │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ VALOR UF ACTUAL │ │ │ │ [38500] CLP │ │ │ │ Actualizado hoy a las 10:23 por Andrea │ │ │ │ │ │ │ │ Próximamente: actualización automática. │ │ │ │ │ │ │ │ ──────────────────────── │ │ │ │ │ │ │ │ IVA │ │ │ │ [19] % │ │ │ │ │ │ │ │ MONEDA POR DEFECTO │ │ │ │ [CLP ▾] │ │ │ │ │ │ │ │ [Guardar cambios] │ │ │ └──────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────┘ ``` ### Tabs - Style igual a Linear settings - Active: border-bottom 2px purple - Inactive: ink-400 - Hover: ink-200 --- ## 7 · Componentes nuevos ### Toast notifications Slot superior derecho, stack vertical: ``` ┌──────────────────────────────────┐ │ ✓ Producto creado correctamente. │ ← verde └──────────────────────────────────┘ ┌──────────────────────────────────┐ │ ✗ Error al subir imagen. │ ← pink └──────────────────────────────────┘ ``` - Glass card 320px width - Slide desde arriba: -100% → 0 en 250ms - Auto-dismiss en 4s - Click para cerrar manual - Alpine.js para state management ### Confirm dialog ``` ┌─────────────────────────────────────┐ │ ¿Eliminar este producto? │ │ │ │ Esta acción no se puede deshacer. │ │ │ │ [Cancelar] [Eliminar] │ └─────────────────────────────────────┘ ``` - Backdrop blur - Botón "Eliminar" pink gradient (destructive) - Botón "Cancelar" ghost - Escape o click fuera cancela ### Loading states - **Buttons:** spinner inline a la izquierda del texto, button disabled - **Tables:** skeleton shimmer reemplaza filas - **Page loads:** progress bar fina arriba (opcional, similar a NProgress) --- ## 8 · Responsive ### Mobile (<768px) - Sidebar como drawer (hidden por default, hamburger button) - Tabla colapsa a cards verticales: ``` ┌──────────────────────┐ │ 📦 Urna Olmo │ │ Urnas · Premium │ │ $450.000 │ │ [Editar] [⋮] │ └──────────────────────┘ ``` - Modales full-screen con safe areas - Buttons full-width ### Tablet (768-1024) - Sidebar fijo - Tablas normales pero con menos columnas (las menos importantes ocultas) - Modales 80% width ### Desktop (>1024) - Layout completo --- ## 9 · Accesibilidad - ARIA labels en buttons sin texto - Focus visible en todos los interactive (purple outline 3px) - Escape cierra modales - Tab navigation funcional - Form labels asociados - Mensajes de error con aria-live --- ## 10 · Anti-patterns explícitos ❌ NO usar: - Bootstrap modals, AdminLTE, Tabler - jQuery - Material Icons (usar Lucide) - Emojis como iconos en producción - Border solid 1px corporativo (usar rgba sutiles) - Sombras duras - Animaciones excesivas - Spinners centrales (preferir skeletons)