57 lines
3.8 KiB
Markdown
57 lines
3.8 KiB
Markdown
|
# Dashboard
|
||
|
|
|
||
|
|
Página de inicio del ERP (`/dashboard`). Muestra KPIs, accesos rápidos a las operaciones más comunes y un feed de actividad reciente, organizados en secciones con grillas de cards.
|
||
|
|
|
||
|
|
**Importante:** actualmente todo el contenido de `Dashboard.tsx` es **estático/hardcodeado** en el propio componente (arrays `kpiCards`, `actionCards`, `newsCards`, `activityItems`). No hay ningún fetch a `api.ts` ni al backend — los valores de ventas, compras, clientes e inventario son de ejemplo, no datos reales de SAP. La sección "Noticias y guías" está deshabilitada en código (`{false && (...)}`), por lo que no se renderiza aunque el array `newsCards` exista.
|
||
|
|
|
||
|
|
## Árbol de Componentes
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
graph TB
|
||
|
|
DASH[Dashboard.tsx]
|
||
|
|
SEC[DashboardSection.tsx]
|
||
|
|
GRID[DashboardGrid.tsx]
|
||
|
|
CARD[DashboardCard.tsx]
|
||
|
|
KPI[DashboardKpiCard.tsx]
|
||
|
|
ACT[DashboardActionCard.tsx]
|
||
|
|
NEWS[DashboardNewsCard.tsx]
|
||
|
|
|
||
|
|
DASH -->|"KPI"| SEC
|
||
|
|
DASH -->|"Accesos rápidos"| SEC
|
||
|
|
DASH -->|"Noticias y guías (deshabilitada)"| SEC
|
||
|
|
DASH -->|"Actividad reciente (bloque propio, sin card)"| ACTIVITY[div de actividad inline]
|
||
|
|
|
||
|
|
SEC --> GRID
|
||
|
|
GRID --> CARD
|
||
|
|
CARD -->|type: kpi| KPI
|
||
|
|
CARD -->|type: action| ACT
|
||
|
|
CARD -->|type: news| NEWS
|
||
|
|
```
|
||
|
|
|
||
|
|
`DashboardCard` es un dispatcher: según la prop `type` (`"kpi" | "action" | "news"`) delega el render en `DashboardKpiCard`, `DashboardActionCard` o `DashboardNewsCard`. El bloque "Actividad reciente" no usa `DashboardCard`: es una lista renderizada directamente en `Dashboard.tsx`.
|
||
|
|
|
||
|
|
## Tipos de card
|
||
|
|
|
||
|
|
| Card | Props principales | Comportamiento |
|
||
|
|
|---|---|---|
|
||
|
|
| `DashboardKpiCard` | `title`, `icon` (componente de `lucide-react`), `value`, `subtitle`, `action?: {label, to}` | Muestra un valor numérico/texto grande. Si tiene `action`, renderiza un botón que navega con `useNavigate()` a la ruta `to`. |
|
||
|
|
| `DashboardActionCard` | `title`, `icon`, `to` | Card clickeable completa (ícono + título) que navega a `to` con `useNavigate()`. Tiene hover que cambia el fondo a `--color-primary-active`. |
|
||
|
|
| `DashboardNewsCard` | `image`, `title`, `description` | Card con imagen de fondo (`backgroundImage`) + texto. Actualmente usa URLs externas de `picsum.photos` como placeholder. No implementada en pantalla porque su sección está deshabilitada. |
|
||
|
|
|
||
|
|
Todas las cards usan variables CSS del tema (`--color-surface`, `--color-border`, `--color-primary`, `--color-text-muted`, etc.) vía `style` inline, no clases de Tailwind.
|
||
|
|
|
||
|
|
## Archivos Clave
|
||
|
|
|
||
|
|
| Archivo | Ruta | Propósito |
|
||
|
|
|---|---|---|
|
||
|
|
| `Dashboard.tsx` | `src/views/` | Vista principal; define los datos hardcodeados de KPIs, accesos rápidos, noticias y actividad, y arma las secciones |
|
||
|
|
| `DashboardSection.tsx` | `src/components/dashboard/` | Título de sección (`h2`) + contenedor de su contenido |
|
||
|
|
| `DashboardGrid.tsx` | `src/components/dashboard/` | Grid CSS responsivo (`auto-fill`, `minmax(260px, 1fr)`) para las cards |
|
||
|
|
| `DashboardCard.tsx` | `src/components/dashboard/` | Dispatcher que elige la card concreta según `type` |
|
||
|
|
| `DashboardKpiCard.tsx` | `src/components/dashboard/` | Card de indicador numérico con botón de acción opcional |
|
||
|
|
| `DashboardActionCard.tsx` | `src/components/dashboard/` | Card de acceso rápido, navega al hacer clic |
|
||
|
|
| `DashboardNewsCard.tsx` | `src/components/dashboard/` | Card de noticia con imagen (actualmente sin uso, sección deshabilitada) |
|
||
|
|
|
||
|
|
## Pendiente / a tener en cuenta
|
||
|
|
|
||
|
|
Si se decide conectar el dashboard a datos reales, haría falta: (1) reemplazar los arrays estáticos por llamadas a `api.ts` hacia endpoints del backend que hoy no existen para este propósito (no hay un endpoint de KPIs agregados en `mini-backend`), y (2) decidir si se reactiva la sección de noticias y de dónde saldría el contenido (hoy usa imágenes externas de `picsum.photos`, no aptas para producción).
|