295 lines
10 KiB
Markdown
295 lines
10 KiB
Markdown
# ADM-001 / ADM-002 / ADM-003 — Design
|
||
|
||
## 1. Design System
|
||
|
||
### Palette
|
||
|
||
| Token | Hex | Uso |
|
||
|--------------------|-----------|------------------------------|
|
||
| `--color-primary` | `#2D6A4F` | Acciones principales |
|
||
| `--color-primary-hover` | `#1B4332` | Hover primary |
|
||
| `--color-danger` | `#DC2626` | Acciones destructivas |
|
||
| `--color-warning` | `#D97706` | Estados de atención |
|
||
| `--color-success` | `#059669` | Confirmaciones, éxito |
|
||
| `--color-bg` | `#F9FAFB` | Fondo de página |
|
||
| `--color-surface` | `#FFFFFF` | Tarjetas, panels |
|
||
| `--color-border` | `#E5E7EB` | Bordes |
|
||
| `--color-text` | `#111827` | Texto principal |
|
||
| `--color-muted` | `#6B7280` | Texto secundario |
|
||
|
||
### Typography
|
||
|
||
- **Headings**: `Playfair Display` (fuente de marca) o fallback `serif`
|
||
- **Body/UI**: `Inter` (fuente del storefront) o fallback `sans-serif`
|
||
- **Monospace** (SKU, IDs): `font-mono`
|
||
|
||
### Spacing
|
||
|
||
- Base unit: 4px
|
||
- Consistent: 4, 8, 12, 16, 24, 32, 48px
|
||
|
||
### Border radius
|
||
|
||
- Buttons/inputs: `rounded-lg` (8px)
|
||
- Cards: `rounded-xl` (12px)
|
||
- Modals: `rounded-2xl` (16px)
|
||
|
||
---
|
||
|
||
## 2. Login Page Design
|
||
|
||
### Desktop (≥1024px)
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ │
|
||
│ 🌿 MercadoDeVida │
|
||
│ ───────────────── │
|
||
│ │
|
||
│ Iniciar sesión │
|
||
│ │
|
||
│ Email │
|
||
│ ┌─────────────────────────┐ │
|
||
│ │ tu@email.com │ │
|
||
│ └─────────────────────────┘ │
|
||
│ │
|
||
│ Contraseña │
|
||
│ ┌─────────────────────────┐ │
|
||
│ │ •••••••• │ │
|
||
│ └─────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────┐ │
|
||
│ │ Iniciar sesión │ │
|
||
│ └─────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
- Centrado vertical y horizontalmente
|
||
- Card blanca con sombra suave
|
||
- Logo de marca
|
||
- Inputs: border gris, focus ring verde
|
||
- Botón: full-width, verde primary
|
||
|
||
### Mobile (< 768px)
|
||
- Padding lateral 24px
|
||
- Mismo layout, inputs 100% del card
|
||
|
||
### States
|
||
|
||
**Loading**: Botón deshabilitado con spinner
|
||
**Error**: Card con border rojo, mensaje debajo del form
|
||
**Success**: Redirect inmediato
|
||
|
||
---
|
||
|
||
## 3. Admin Shell Design
|
||
|
||
### Desktop (≥1024px)
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 🌿 MercadoDeVida Admin admin@mdv.es [Logout] │
|
||
├──────────┬──────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ Dashboard│ [Page Title] [+ Nueva acción] │
|
||
│ 📦 Productos│ ─────────────────────────────────────────── │
|
||
│ 🧾 Pedidos│ │
|
||
│ 📊 Inventario│ [Content Area] │
|
||
│ 👥 Clientes│ │
|
||
│ 🏷 Categorías│ │
|
||
│ 🏷 Marcas│ │
|
||
│ 🏷 Promociones│ │
|
||
│ ⭐ Reseñas│ │
|
||
│ 📄 CMS │ │
|
||
│ ⚙ Ajustes│ │
|
||
│ │ │
|
||
│ ├──────────────────────────────────────────────────┤
|
||
│ │ © 2026 MercadoDeVida. Panel de administración. │
|
||
└──────────┴──────────────────────────────────────────────────┘
|
||
```
|
||
|
||
- Sidebar: 240px fija, bg white, border-right
|
||
- Header: 64px, bg white, sticky top
|
||
- Content: bg `--color-bg`, padding 32px
|
||
- Footer: minimal copyright
|
||
|
||
### Tablet (768px – 1023px)
|
||
- Sidebar colapsa a 64px (solo iconos)
|
||
- Toggle para expandir
|
||
|
||
### Mobile (< 768px)
|
||
- Sidebar como drawer overlay desde la izquierda
|
||
- Hamburger button en header
|
||
- Overlay oscuro al abrir drawer
|
||
|
||
### Navigation Items
|
||
|
||
| Icon | Label | Permission | Badge (opcional) |
|
||
|------|------------|-------------------|------------------|
|
||
| 📊 | Dashboard | (dashboard) | |
|
||
| 📦 | Productos | products.read | |
|
||
| 🧾 | Pedidos | orders.read | 3 (pendientes) |
|
||
| 📊 | Inventario | inventory.read | |
|
||
| 👥 | Clientes | customers.read | |
|
||
| 🏷️ | Categorías | categories.read | |
|
||
| 🏷️ | Marcas | brands.read | |
|
||
| 🏷️ | Promociones| promotions.read | |
|
||
| ⭐ | Reseñas | reviews.read | 5 (pendientes) |
|
||
| 📄 | CMS | cms.read | |
|
||
| ⚙️ | Ajustes | (settings) | |
|
||
|
||
Active state: bg primary/10, text primary, left border 3px primary
|
||
|
||
---
|
||
|
||
## 4. Status Colors (Accessible)
|
||
|
||
| Status | Color | Pattern |
|
||
|-------------|--------|------------------|
|
||
| Active | Green | `bg-green-100 text-green-800` |
|
||
| Inactive | Gray | `bg-gray-100 text-gray-600` |
|
||
| Pending | Amber | `bg-amber-100 text-amber-800` |
|
||
| Paid | Green | `bg-green-100 text-green-800` |
|
||
| Processing | Blue | `bg-blue-100 text-blue-800` |
|
||
| Shipped | Indigo | `bg-indigo-100 text-indigo-800` |
|
||
| Delivered | Green | `bg-green-100 text-green-800` |
|
||
| Cancelled | Red | `bg-red-100 text-red-800` |
|
||
| Refunded | Purple | `bg-purple-100 text-purple-800` |
|
||
|
||
⚠️ Usar ALWAYS el label junto al color, nunca solo el color.
|
||
|
||
---
|
||
|
||
## 5. Component Library (Admin Primitives)
|
||
|
||
### Button
|
||
|
||
```tsx
|
||
<Button variant="primary" size="md" loading={saving} onClick={save}>
|
||
Guardar
|
||
</Button>
|
||
|
||
<Button variant="danger" onClick={confirmDelete}>
|
||
Eliminar
|
||
</Button>
|
||
|
||
<Button variant="ghost" onClick={cancel}>
|
||
Cancelar
|
||
</Button>
|
||
```
|
||
|
||
### Input / Textarea
|
||
|
||
```tsx
|
||
<Input
|
||
label="Nombre del producto"
|
||
value={name}
|
||
onChange={setName}
|
||
error={errors.name}
|
||
required
|
||
/>
|
||
|
||
<Textarea
|
||
label="Descripción"
|
||
value={description}
|
||
onChange={setDescription}
|
||
rows={4}
|
||
/>
|
||
```
|
||
|
||
### DataTable
|
||
|
||
Props: columns, data, pagination, onSort, onFilter, loading, empty, error
|
||
|
||
```tsx
|
||
<DataTable
|
||
columns={columns}
|
||
data={products}
|
||
pagination={{ page, total, onPageChange }}
|
||
loading={isLoading}
|
||
/>
|
||
```
|
||
|
||
### Dialog (Confirmation)
|
||
|
||
```tsx
|
||
<Dialog
|
||
open={confirming}
|
||
title="Confirmar eliminación"
|
||
description="Esta acción no se puede deshacer."
|
||
confirmLabel="Eliminar"
|
||
variant="danger"
|
||
onConfirm={delete}
|
||
onCancel={() => setConfirming(false)}
|
||
/>
|
||
```
|
||
|
||
### Badge
|
||
|
||
```tsx
|
||
<Badge variant="success">Activo</Badge>
|
||
<Badge variant="warning">Pendiente</Badge>
|
||
<Badge variant="error">Cancelado</Badge>
|
||
```
|
||
|
||
### Skeleton
|
||
|
||
```tsx
|
||
<TableSkeleton rows={10} columns={4} />
|
||
<FormSkeleton fields={5} />
|
||
```
|
||
|
||
---
|
||
|
||
## 6. Error States
|
||
|
||
| State | Visual | Action |
|
||
|----------|-------------------------------------|-------------------|
|
||
| Loading | Skeleton que refleja la estructura | Ninguna |
|
||
| Empty | Ilustración + "No hay datos" | CTA si aplica |
|
||
| Error | Icono error + mensaje + retry btn | Botón retry |
|
||
| 403 | Icono candado + "Sin permisos" | Volver atrás |
|
||
| 404 | Icono búsqueda + "No encontrado" | Volver atrás |
|
||
|
||
---
|
||
|
||
## 7. Toast Notifications
|
||
|
||
```tsx
|
||
// Success
|
||
toast.success('Producto guardado correctamente');
|
||
|
||
// Error
|
||
toast.error('Error al guardar. Intenta de nuevo.');
|
||
|
||
// Warning
|
||
toast.warning('Este campo es requerido.');
|
||
|
||
// Position: top-right
|
||
// Duration: 4s
|
||
// Dismissible
|
||
```
|
||
|
||
---
|
||
|
||
## 8. Responsive Strategy
|
||
|
||
| Breakpoint | Admin Layout | Tables | Forms |
|
||
|------------|--------------------------|-------------------------|------------------|
|
||
| 1440px | Sidebar 240px | All columns | Full layout |
|
||
| 1280px | Sidebar 240px | All columns | Full layout |
|
||
| 1024px | Sidebar collapsed 64px | Scroll horizontal | Full layout |
|
||
| 768px | Sidebar as drawer | Cards, no table headers | Stacked fields |
|
||
| 430px | Sidebar as drawer | Cards | Full width inputs|
|
||
|
||
---
|
||
|
||
## 9. Accessibility
|
||
|
||
- All interactive elements keyboard-navigable
|
||
- Focus ring visible en todos los elementos
|
||
- ARIA labels en iconos sin texto
|
||
- Error messages linked via `aria-describedby`
|
||
- Color contrast ≥ 4.5:1 para texto
|
||
- Tables con `scope="col"` headers
|
||
- Dialogs con `role="dialog"` y focus trap
|