{
"request": {
"app": "Flotas",
"screen": "fleet-maintenance-screen",
"style": "refined"
},
"selection_order": [
"implemented functional screens",
"patterns",
"implemented components",
"research candidates",
"effects"
],
"screens": [
{
"id": "fleet-maintenance-screen",
"name": "Mantenimiento Flotas",
"level": "screen",
"app": "Flotas",
"pattern": "fleet-maintenance",
"description": "Pantalla completa curada: Mantenimiento Flotas. 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/fleet-maintenance-screen.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "fleet-dashboard",
"name": "Centro de Flotas",
"level": "screen",
"app": "Flotas",
"pattern": "fleet-live-operations",
"description": "Pantalla completa curada: Centro de Flotas. 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/fleet-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-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"
]
},
{
"id": "student-360-screen",
"name": "Alumno 360",
"level": "screen",
"app": "Educación",
"pattern": "education-student-360",
"description": "Pantalla completa curada: Alumno 360. 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/student-360-screen.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "crm-pipeline-screen",
"name": "Pipeline Comercial",
"level": "screen",
"app": "CRM",
"pattern": "crm-pipeline",
"description": "Pantalla completa curada: Pipeline Comercial. 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/crm-pipeline-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": "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"
]
}
],
"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": "fleet-live-operations",
"name": "Flota en Vivo",
"app": "Flotas",
"description": "Composición reutilizable para flota en vivo con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"advanced-filter-bar",
"search-with-suggestions",
"cursor-pagination",
"timeline-audit",
"master-detail-panel",
"floating-label-input",
"phone-input",
"tag-input"
],
"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": "fleet-maintenance",
"name": "Mantenimiento de Flota",
"app": "Flotas",
"description": "Composición reutilizable para mantenimiento de flota con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"pagination-compact",
"grouped-data-list",
"tree-view",
"command-search-input",
"currency-input",
"otp-secure",
"multi-select-chips",
"stepper-wizard"
],
"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": "fleet-events",
"name": "Eventos y Alertas",
"app": "Flotas",
"description": "Composición reutilizable para eventos y alertas con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"event-stream",
"comparison-matrix",
"inline-validation-input",
"password-strength-input",
"combobox-search",
"time-slot-picker",
"form-section",
"signature-pad"
],
"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": "restaurant-pos",
"name": "POS Restaurante",
"app": "Restaurante",
"description": "Composición reutilizable para pos restaurante con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"tabs",
"booking-card",
"vehicle-status",
"shimmer-button",
"blur-reveal",
"ai-message",
"swipe-action",
"kpi-with-sparkline"
],
"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": "restaurant-kitchen",
"name": "Kitchen Command Center",
"app": "Restaurante",
"description": "Composición reutilizable para kitchen command center con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"student-progress",
"animated-counter",
"spotlight-card",
"ai-composer",
"mobile-sheet",
"kpi-delta-compact",
"kpi-comparison",
"bento-executive-grid"
],
"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": "restaurant-finance",
"name": "Restaurante Finanzas",
"app": "Restaurante",
"description": "Composición reutilizable para restaurante finanzas con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"marquee",
"ai-thinking",
"generation-progress",
"executive-kpi",
"kpi-goal-ring",
"metric-heat-card",
"trend-summary",
"occupancy-gauge"
],
"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": "education-command-center",
"name": "Centro Académico",
"app": "Educación",
"description": "Composición reutilizable para centro académico con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"ai-message",
"swipe-action",
"kpi-with-sparkline",
"stat-split-card",
"bento-operations-grid",
"revenue-snapshot",
"health-score-card",
"live-operations-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": "research-ready"
},
{
"id": "education-student-360",
"name": "Alumno 360",
"app": "Educación",
"description": "Composición reutilizable para alumno 360 con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"kpi-delta-compact",
"kpi-comparison",
"bento-executive-grid",
"activity-pulse",
"goal-tracker",
"executive-summary-banner",
"forecast-kpi",
"compact-dense-table"
],
"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"
}
],
"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": "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": "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": "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": "status-card",
"name": "Status Card",
"category": "Feedback",
"source": "custom",
"apps": [
"Hotel",
"Restaurante",
"CRM",
"Flotas"
],
"description": "Estado operativo con señal visual y detalle secundario.",
"tags": [
"estado",
"online",
"servicio"
],
"preview": "status-card",
"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": [
"feedback",
"estado",
"online",
"servicio",
"hotel",
"restaurant",
"crm",
"fleet"
],
"preview_url": "component.php?id=status-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": "toast-stack",
"name": "Toast Stack",
"category": "Feedback",
"source": "shadcn",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM",
"Flotas"
],
"description": "Notificaciones apiladas para éxito, aviso y error.",
"tags": [
"toast",
"alerta",
"notificación"
],
"preview": "toast-stack",
"snippet": "Guardado
",
"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": [
"feedback",
"toast",
"alerta",
"notificación",
"hotel",
"restaurant",
"education",
"crm",
"fleet"
],
"preview_url": "component.php?id=toast-stack",
"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": "sidebar-nav",
"name": "Sidebar Navigation",
"category": "Navigation",
"source": "ReUI",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM",
"Flotas"
],
"description": "Navegación lateral compacta con sección activa.",
"tags": [
"sidebar",
"menú",
"navegación"
],
"preview": "sidebar-nav",
"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": [
"navigation",
"sidebar",
"menú",
"navegación",
"hotel",
"restaurant",
"education",
"crm",
"fleet"
],
"preview_url": "component.php?id=sidebar-nav",
"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": "vehicle-status",
"name": "Vehicle Status",
"category": "Business",
"source": "custom",
"apps": [
"Flotas"
],
"description": "Estado de vehículo con velocidad, señal GPS y conductor.",
"tags": [
"flotas",
"gps",
"vehículo"
],
"preview": "vehicle-status",
"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": 3,
"crm": 3,
"fleet": 10
},
"selection_hints": [
"business",
"flotas",
"gps",
"vehículo",
"fleet"
],
"preview_url": "component.php?id=vehicle-status",
"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": "executive-kpi",
"name": "Executive KPI",
"level": "component",
"category": "Dashboard",
"source": "ReUI",
"source_id": "reui",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM",
"Flotas"
],
"description": "Patrón curado para executive kpi, pensado para una interfaz profesional, sobria y reutilizable.",
"tags": [
"dashboard",
"executive",
"premium-look",
"curated"
],
"preview": "executive-kpi",
"snippet": "",
"status": "implemented",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP-owned implementation inspired by public interaction patterns; no premium code copied.",
"visual_style": [
"refined",
"professional",
"product-ui",
"premium"
],
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
}
},
{
"id": "kpi-delta-compact",
"name": "KPI Delta Compact",
"level": "component",
"category": "Dashboard",
"source": "ReUI",
"source_id": "reui",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM",
"Flotas"
],
"description": "Patrón curado para kpi delta compact, pensado para una interfaz profesional, sobria y reutilizable.",
"tags": [
"dashboard",
"kpi",
"premium-look",
"curated"
],
"preview": "v110-kpi-delta-compact",
"snippet": "",
"status": "implemented",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP-owned implementation; no premium third-party code copied.",
"visual_style": [
"refined",
"professional",
"product-ui"
],
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
}
},
{
"id": "kpi-with-sparkline",
"name": "KPI With Sparkline",
"level": "component",
"category": "Dashboard",
"source": "ReUI",
"source_id": "reui",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM",
"Flotas"
],
"description": "Patrón curado para kpi with sparkline, pensado para una interfaz profesional, sobria y reutilizable.",
"tags": [
"dashboard",
"kpi",
"premium-look",
"curated"
],
"preview": "kpi-sparkline",
"snippet": "",
"status": "implemented",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP-owned implementation inspired by public interaction patterns; no premium code copied.",
"visual_style": [
"refined",
"professional",
"product-ui",
"premium"
],
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
}
}
],
"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."
]
}