{
"request": {
"app": "General",
"screen": "dashboard-executive",
"style": "refined"
},
"selection_order": [
"implemented functional screens",
"patterns",
"implemented components",
"research candidates",
"effects"
],
"screens": [
{
"id": "ai-workspace-screen",
"name": "Workspace IA",
"level": "screen",
"app": "General",
"pattern": "ai-workspace",
"description": "Pantalla completa curada: Workspace IA. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/ai-workspace-screen.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "analytics-screen",
"name": "Analytics",
"level": "screen",
"app": "General",
"pattern": "analytics-workspace",
"description": "Pantalla completa curada: Analytics. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/analytics-screen.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "billing-screen",
"name": "Facturación",
"level": "screen",
"app": "General",
"pattern": "billing-workspace",
"description": "Pantalla completa curada: Facturación. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/billing-screen.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "notifications-screen",
"name": "Notificaciones",
"level": "screen",
"app": "General",
"pattern": "notification-center",
"description": "Pantalla completa curada: Notificaciones. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/notifications-screen.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "settings-screen",
"name": "Configuración",
"level": "screen",
"app": "General",
"pattern": "settings-workspace",
"description": "Pantalla completa curada: Configuración. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/settings-screen.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "login-screen",
"name": "Login Premium",
"level": "screen",
"app": "General",
"pattern": "onboarding-flow",
"description": "Pantalla completa curada: Login Premium. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/login-screen.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "hotel-dashboard",
"name": "Hotel Dashboard",
"level": "screen",
"app": "Hotel",
"pattern": "hotel-operations-dashboard",
"description": "Pantalla completa curada: Hotel Dashboard. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/hotel-dashboard.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "hotel-reservations",
"name": "Reservas Hotel",
"level": "screen",
"app": "Hotel",
"pattern": "hotel-reservations-workspace",
"description": "Pantalla completa curada: Reservas Hotel. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/hotel-reservations.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "hotel-rooms",
"name": "Habitaciones",
"level": "screen",
"app": "Hotel",
"pattern": "hotel-room-control",
"description": "Pantalla completa curada: Habitaciones. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/hotel-rooms.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "restaurant-pos-screen",
"name": "POS Restaurante",
"level": "screen",
"app": "Restaurante",
"pattern": "restaurant-pos",
"description": "Pantalla completa curada: POS Restaurante. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/restaurant-pos-screen.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "restaurant-kitchen-screen",
"name": "Cocina",
"level": "screen",
"app": "Restaurante",
"pattern": "restaurant-kitchen",
"description": "Pantalla completa curada: Cocina. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/restaurant-kitchen-screen.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "education-dashboard",
"name": "Panel Académico",
"level": "screen",
"app": "Educación",
"pattern": "education-command-center",
"description": "Pantalla completa curada: Panel Académico. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/education-dashboard.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
}
],
"patterns": [
{
"id": "executive-dashboard",
"name": "Dashboard Ejecutivo",
"app": "General",
"description": "Composición reutilizable para dashboard ejecutivo con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"kpi-card",
"progress-ring",
"filter-chips",
"floating-input",
"file-drop",
"toast-stack",
"command-palette",
"bottom-nav"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "implemented"
},
{
"id": "hotel-operations-dashboard",
"name": "Hotel Operations Dashboard",
"app": "Hotel",
"description": "Composición reutilizable para hotel operations dashboard con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"data-table",
"timeline",
"stepper",
"status-card",
"success-check",
"tabs",
"booking-card",
"vehicle-status"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "implemented"
},
{
"id": "hotel-reservations-workspace",
"name": "Reservas Hotel Workspace",
"app": "Hotel",
"description": "Composición reutilizable para reservas hotel workspace con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"otp-input",
"segmented-control",
"skeleton-card",
"sidebar-nav",
"kanban-card",
"student-progress",
"animated-counter",
"spotlight-card"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "implemented"
},
{
"id": "hotel-room-control",
"name": "Control de Habitaciones",
"app": "Hotel",
"description": "Composición reutilizable para control de habitaciones con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"toast-stack",
"command-palette",
"bottom-nav",
"order-ticket",
"crm-lead",
"marquee",
"ai-thinking",
"generation-progress"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "implemented"
},
{
"id": "ai-workspace",
"name": "AI Workspace",
"app": "General",
"description": "Composición reutilizable para ai workspace con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"floating-label-input",
"phone-input",
"tag-input",
"date-range-picker",
"autosave-form",
"avatar-upload",
"smart-defaults-panel",
"toast-progress"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "ai-report-builder",
"name": "Generador de Reportes IA",
"app": "General",
"description": "Composición reutilizable para generador de reportes ia con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"otp-secure",
"multi-select-chips",
"stepper-wizard",
"drag-drop-upload",
"inline-editable-field",
"toast-error",
"banner-alert",
"progress-overlay"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "ai-assistant-panel",
"name": "Asistente Contextual",
"app": "General",
"description": "Composición reutilizable para asistente contextual con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"time-slot-picker",
"form-section",
"signature-pad",
"toast-success",
"inline-alert",
"skeleton-dashboard",
"empty-state-search",
"offline-banner"
],
"priority": "curated",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "data-management",
"name": "Gestión de Datos",
"app": "General",
"description": "Composición reutilizable para gestión de datos con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"avatar-upload",
"smart-defaults-panel",
"toast-progress",
"skeleton-table",
"empty-state-action",
"error-recovery",
"connection-status",
"context-sidebar"
],
"priority": "curated",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "approval-workflow",
"name": "Flujo de Aprobaciones",
"app": "General",
"description": "Composición reutilizable para flujo de aprobaciones con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"toast-error",
"banner-alert",
"progress-overlay",
"success-celebration",
"sync-indicator",
"rail-sidebar",
"command-palette-pro",
"segmented-navigation"
],
"priority": "curated",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "settings-workspace",
"name": "Configuración Profesional",
"app": "General",
"description": "Composición reutilizable para configuración profesional con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"skeleton-dashboard",
"empty-state-search",
"offline-banner",
"collapsible-sidebar",
"top-app-bar",
"animated-tabs",
"mobile-app-bar",
"mega-actions-panel"
],
"priority": "curated",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "notification-center",
"name": "Centro de Notificaciones",
"app": "General",
"description": "Composición reutilizable para centro de notificaciones con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"error-recovery",
"connection-status",
"context-sidebar",
"breadcrumb-compact",
"bottom-navigation-pro",
"floating-action-menu",
"recent-pages-menu",
"gantt-timeline"
],
"priority": "curated",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "mobile-operations",
"name": "Operaciones Móvil",
"app": "General",
"description": "Composición reutilizable para operaciones móvil con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"rail-sidebar",
"command-palette-pro",
"segmented-navigation",
"quick-actions-dock",
"workspace-switcher",
"kanban-compact",
"scheduler-resource-grid",
"kitchen-order-ticket-pro"
],
"priority": "curated",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
}
],
"components": [
{
"id": "kpi-card",
"name": "KPI Card",
"category": "Dashboard",
"source": "ReUI / shadcn",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM",
"Flotas"
],
"description": "Métrica principal con tendencia, icono y contexto comparativo.",
"tags": [
"kpi",
"métrica",
"ventas"
],
"preview": "kpi",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 10
},
"selection_hints": [
"dashboard",
"kpi",
"métrica",
"ventas",
"hotel",
"restaurant",
"education",
"crm",
"fleet"
],
"preview_url": "component.php?id=kpi-card",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "bento-metrics",
"name": "Bento Metrics",
"category": "Dashboard",
"source": "Magic UI",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM"
],
"description": "Panel compacto tipo bento para resumir varios indicadores.",
"tags": [
"bento",
"dashboard",
"resumen"
],
"preview": "bento",
"snippet": "...
",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 3
},
"selection_hints": [
"dashboard",
"bento",
"dashboard",
"resumen",
"hotel",
"restaurant",
"education",
"crm"
],
"preview_url": "component.php?id=bento-metrics",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "mini-chart-card",
"name": "Mini Chart Card",
"category": "Dashboard",
"source": "ReUI",
"apps": [
"Hotel",
"Restaurante",
"CRM",
"Flotas"
],
"description": "Tarjeta KPI con sparkline SVG sin librerías externas.",
"tags": [
"chart",
"sparkline",
"kpi"
],
"preview": "mini-chart",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 3,
"crm": 10,
"fleet": 10
},
"selection_hints": [
"dashboard",
"chart",
"sparkline",
"kpi",
"hotel",
"restaurant",
"crm",
"fleet"
],
"preview_url": "component.php?id=mini-chart-card",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "progress-ring",
"name": "Progress Ring",
"category": "Dashboard",
"source": "Rare UI / custom",
"apps": [
"Educación",
"CRM",
"Flotas"
],
"description": "Progreso circular para metas, cumplimiento o avance.",
"tags": [
"progreso",
"metas",
"score"
],
"preview": "progress-ring",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 3,
"restaurant": 3,
"education": 10,
"crm": 10,
"fleet": 10
},
"selection_hints": [
"dashboard",
"progreso",
"metas",
"score",
"education",
"crm",
"fleet"
],
"preview_url": "component.php?id=progress-ring",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "stat-list",
"name": "Stat List",
"category": "Dashboard",
"source": "shadcn",
"apps": [
"Hotel",
"Restaurante",
"Educación"
],
"description": "Listado limpio de métricas secundarias con variación.",
"tags": [
"estadísticas",
"lista",
"resumen"
],
"preview": "stat-list",
"snippet": "...
",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 3,
"fleet": 3
},
"selection_hints": [
"dashboard",
"estadísticas",
"lista",
"resumen",
"hotel",
"restaurant",
"education"
],
"preview_url": "component.php?id=stat-list",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "data-table",
"name": "Data Table",
"category": "Data",
"source": "ReUI",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM",
"Flotas"
],
"description": "Tabla empresarial responsive con estados y acciones.",
"tags": [
"tabla",
"datos",
"acciones"
],
"preview": "data-table",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 10
},
"selection_hints": [
"data",
"tabla",
"datos",
"acciones",
"hotel",
"restaurant",
"education",
"crm",
"fleet"
],
"preview_url": "component.php?id=data-table",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "filter-chips",
"name": "Filter Chips",
"category": "Data",
"source": "Origin UI",
"apps": [
"Hotel",
"Restaurante",
"CRM"
],
"description": "Filtros rápidos con selección múltiple y contador.",
"tags": [
"filtros",
"chips",
"buscar"
],
"preview": "filter-chips",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 3,
"crm": 10,
"fleet": 3
},
"selection_hints": [
"data",
"filtros",
"chips",
"buscar",
"hotel",
"restaurant",
"crm"
],
"preview_url": "component.php?id=filter-chips",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "empty-state",
"name": "Empty State",
"category": "Data",
"source": "shadcn",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM"
],
"description": "Estado vacío accionable para listas sin información.",
"tags": [
"vacío",
"empty",
"cta"
],
"preview": "empty-state",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 3
},
"selection_hints": [
"data",
"vacío",
"empty",
"cta",
"hotel",
"restaurant",
"education",
"crm"
],
"preview_url": "component.php?id=empty-state",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "timeline",
"name": "Timeline",
"category": "Data",
"source": "ReUI",
"apps": [
"Hotel",
"Educación",
"CRM",
"Flotas"
],
"description": "Historial vertical de eventos, cambios y auditoría.",
"tags": [
"timeline",
"historial",
"auditoría"
],
"preview": "timeline",
"snippet": "...
",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 3,
"education": 10,
"crm": 10,
"fleet": 10
},
"selection_hints": [
"data",
"timeline",
"historial",
"auditoría",
"hotel",
"education",
"crm",
"fleet"
],
"preview_url": "component.php?id=timeline",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "floating-input",
"name": "Floating Input",
"category": "Forms",
"source": "Origin UI",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM"
],
"description": "Campo con etiqueta flotante y estado de validación.",
"tags": [
"input",
"formulario",
"floating"
],
"preview": "floating-input",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 3
},
"selection_hints": [
"forms",
"input",
"formulario",
"floating",
"hotel",
"restaurant",
"education",
"crm"
],
"preview_url": "component.php?id=floating-input",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "otp-input",
"name": "OTP Input",
"category": "Forms",
"source": "Rare UI",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM"
],
"description": "Ingreso OTP con navegación automática entre casillas.",
"tags": [
"otp",
"seguridad",
"login"
],
"preview": "otp",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 3
},
"selection_hints": [
"forms",
"otp",
"seguridad",
"login",
"hotel",
"restaurant",
"education",
"crm"
],
"preview_url": "component.php?id=otp-input",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "stepper",
"name": "Stepper",
"category": "Forms",
"source": "ReUI",
"apps": [
"Hotel",
"Restaurante",
"Educación"
],
"description": "Flujo por pasos para reservas, registros u onboarding.",
"tags": [
"pasos",
"wizard",
"formulario"
],
"preview": "stepper",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 3,
"fleet": 3
},
"selection_hints": [
"forms",
"pasos",
"wizard",
"formulario",
"hotel",
"restaurant",
"education"
],
"preview_url": "component.php?id=stepper",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
}
],
"effects": [
{
"id": "stagger-reveal",
"name": "Stagger Reveal",
"level": "effect",
"source_id": "aceternity",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "reveal-on-view",
"name": "Reveal On View",
"level": "effect",
"source_id": "aceternity",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "soft-spotlight",
"name": "Soft Spotlight",
"level": "effect",
"source_id": "magic-ui",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "border-beam-quiet",
"name": "Border Beam Quiet",
"level": "effect",
"source_id": "aceternity",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "shimmer-controlled",
"name": "Shimmer Controlled",
"level": "effect",
"source_id": "motion",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "blur-fade",
"name": "Blur Fade",
"level": "effect",
"source_id": "magic-ui",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "hover-lift",
"name": "Hover Lift",
"level": "effect",
"source_id": "motion",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "hover-tilt-micro",
"name": "Hover Tilt Micro",
"level": "effect",
"source_id": "magic-ui",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
}
],
"reusable_modules": "/api/modules.php",
"templates_api": "/api/templates.php",
"rules": [
"Prefer implemented functional Screens when available.",
"Inspect an implemented Screen route before composing a new layout.",
"Prefer implemented APREP UI assets.",
"Use research-ready items as design briefs, not copied third-party code.",
"Verify external licenses before literal source reuse.",
"PHP 8.4 + semantic HTML/CSS/native JS by default.",
"Use purposeful motion only.",
"Avoid generic AI aesthetics."
]
}