Componentes reales del proyecto, misma paleta y tipografía de la biblia de marca aprobada
Fase 0 · Checkpoint de revisión
Kit de componentes de interfaz
Piezas base reutilizables en las 11 pantallas del MVP B2B, en src/components/ui/. Código real — lo que ves aquí es exactamente lo que se usará en el dashboard.
ButtonButton.tsx
Acciones en toda la app: "+ Añadir Miembro VIP", "Marcar como Enviado", "Reintentar Cobro".
FieldField.tsx
Input/Select con label; base de todos los formularios (login, alta de miembro, colaborador, producto).
PillPill.tsx
ActivoPausadoMorosoCancelado
Estados de suscripción/ticket/despacho/lead — helper pillVarianteDeEstado(estado) mapea cada enum.
StampStamp.tsx
ActivoPausadoMoroso
Sello rotado para el carnet de socio y la tarjeta de MRR ("Autofinanciado").
ToggleToggle.tsx
Agente IA de WhatsApp activo
Activar/desactivar agente IA (S17), activo/inactivo de colaborador (S19). Interactivo — pruébalo.
ModalModal.tsx
Contenedor de la Ficha Flotante (S15), confirmaciones. Interactivo — pruébalo.
MetricCardMetricCard.tsx
MRR en vivo de tu clínica
$2.130.000
22 suscripciones activas · punto de equilibrio superadoAutofinanciado
Pieza central del Home / Efecto MRR (S12) — HU-36.
StatCard + SparklineStatCard.tsx / Sparkline.tsx
Suscripciones
112
Churn del mes
2.1%
Recaudo
$2.1M
Morosidad
3.4%
Fila de 4 métricas del Home (S12) y cabecera de Finanzas (S16) — HU-36, HU-51.
PanelPanel.tsx
Composición de cartera VIP
Contenedor base con título
Contenedor genérico para agrupar contenido: alertas, agenda, configuración.
Alert / AlertListAlert.tsx
Quiebre de stockAlimento Premium 15kg
Cita de urgenciaBruno sin agendar
Alertas operativas cruzadas del Home (HU-38) y estados vacíos.
DataTableDataTable.tsx
Tutor
Mascota
Plan
Estado
Javiera Muñoz
Bruno · Golden Retriever
Club VIP Premium
Activo
Ignacio Soto
Mishi · Gato
Club VIP Básico
Moroso
Fernanda Ríos
Toby · Beagle
Club VIP Premium
Activo
Tabla base de CRM VIP (S14), Despachos (S13), Colaboradores (S19), Morosos (S16), Tickets (S20).
BreakevenBarBreakevenBar.tsx
22 / 15 suscripcionesSistema autofinanciado
Punto de equilibrio de 15 clientes del Home (S12) — HU-37.
TimelineTimeline.tsx
✓
Vacuna antirrábicaAplicada — 12 may 2026
!
DesparasitaciónPróxima — 20 jul 2026
Línea de tiempo médica en la Ficha Flotante (S15) — HU-47.
CarnetCarnet.tsx
🐈
SOCIO N° 00241
Mishi · Gato
Ignacio Soto · 3 años
PlanClub VIP Básico
Moroso
Cabecera de la Ficha Flotante de mascota (S15), base visual del CRM VIP (S14).
FilterBarFilterBar.tsx
Estado ▾
Búsqueda + filtros de CRM VIP (HU-44), Colaboradores, Despachos.
EmptyStateEmptyState.tsx
Sin eventos registrados aún
Estados vacíos: mascota sin historial (HU-47), sin tickets (HU-32), sin morosos.
Composición
Ejemplo: Panel de dos columnas
two-col es el patrón usado en el Home (S12) para alertas + composición de cartera lado a lado.
Alertas operativas cruzadas
Quiebre de stockAlimento Premium 15kg — 2 despachos comprometidos.
Cita de urgencia sin agendarBruno (Golden, 4 años).