window.DashboardScreen = function DashboardScreen({ data, onOpenReservation }) { const kpis = window.livingGetKpis(data); const storyReservation = data.reservations.find((item) => item.id === "TRL-2026-0718-0024"); const activeTasks = data.tasks.filter((task) => task.status !== "completed"); const storyline = [ { label: "Reserva creada", done: true }, { label: "Pago verificado", done: storyReservation.paymentStatus === "verified" }, { label: "Aprobación admin", done: ["approved", "confirmed", "completed"].includes(storyReservation.status) }, { label: "Acceso validado", done: storyReservation.securityResidentArrived && storyReservation.securityGuestsVerified }, { label: "Limpieza completada", done: data.tasks.filter((task) => task.reservationId === storyReservation.id).every((task) => task.status === "completed") }, ]; const dashboardIcons = { pending: ( ), payments: ( ), reservations: ( ), revenue: ( ), story: ( ), queue: ( ), open: ( ), task: ( ), }; return (
{dashboardIcons.story} Historia demo

{storyReservation.code}

Ana García · Terraza · 18 Jul · 17:00–23:00

{storyline.map((item) => (
{item.label}
))}
{dashboardIcons.queue} Cola operativa
  • {dashboardIcons.pending} 3 aprobaciones por resolver
  • {dashboardIcons.task} {activeTasks.length} tareas de limpieza activas
); }; window.CalendarScreen = function CalendarScreen({ data, onOpenReservation }) { const visible = data.reservations .filter((item) => ["2026-07-16", "2026-07-17", "2026-07-18", "2026-07-19", "2026-07-20"].includes(item.date)) .sort((a, b) => `${a.date}${a.start}`.localeCompare(`${b.date}${b.start}`)) .slice(0, 16); return (
window.livingFormatShortDate(row.date) }, { key: "time", label: "Horario", render: (row) => `${row.start}–${row.end}` }, { key: "areaName", label: "Área" }, { key: "residentName", label: "Residente" }, { key: "status", label: "Estado", render: (row) => }, { key: "action", label: "Detalle", render: (row) => }, ]} rows={visible} />
); }; window.ApprovalsScreen = function ApprovalsScreen({ data, onApprove, onOpenReservation }) { const rows = data.reservations.filter((item) => item.status === "pending_approval"); return (
window.livingFormatShortDate(row.date) }, { key: "guestCount", label: "Invitados" }, { key: "paymentStatus", label: "Pago", render: (row) => }, { key: "actions", label: "Acciones", render: (row) => (
), }, ]} rows={rows} />
); }; window.PaymentsScreen = function PaymentsScreen({ data }) { const rows = data.reservations.filter((item) => ["submitted", "verified"].includes(item.paymentStatus)).slice(0, 12); return (
window.livingFormatCurrency(row.amount) }, { key: "paymentSubmittedAt", label: "Enviado", render: (row) => window.livingFormatDateTime(row.paymentSubmittedAt) }, { key: "paymentStatus", label: "Estado", render: (row) => }, { key: "summary", label: "Detalle", render: (row) => row.code === "TRL-2026-0718-0024" ? "Yape · imagen adjunta" : "Transferencia validada" }, ]} rows={rows} />
); }; window.DepositsScreen = function DepositsScreen({ data }) { const rows = data.reservations.filter((item) => item.amount > 0 && item.depositStatus !== "released").slice(0, 12); return (
}, { key: "status", label: "Reserva", render: (row) => }, { key: "impact", label: "Observación", render: (row) => row.code === "EVR-2026-0712-0007" ? "Retener S/ 80 por silla dañada" : "Pendiente cierre operativo" }, ]} rows={rows} />
); }; window.AreasScreen = function AreasScreen({ data }) { return (
{data.areas.map((area) => (
{area.location}

{area.name}

Capacidad {area.capacity} · Tarifa {window.livingFormatCurrency(area.reservationFee)} · Garantía {window.livingFormatCurrency(area.deposit)}

{area.requiresApproval ? : } {area.requiresGuestList ? : null}
    {area.rules.map((rule) =>
  • {rule}
    • )}
))}
); }; window.ResidentsScreen = function ResidentsScreen({ data }) { const rows = data.apartments.slice(0, 18); return (
}, { key: "debtStatus", label: "Deuda" }, ]} rows={rows} />
); }; window.SecurityScreen = function SecurityScreen({ data, onMarkArrival, onVerifyGuests }) { const reservation = data.reservations.find((item) => item.id === "TRL-2026-0718-0024"); return (
Reserva destacada

{reservation.code}

{reservation.residentName} · Dpto. {reservation.apartment} · {reservation.areaName}

{reservation.start}–{reservation.end} · {reservation.guestCount} invitados

Lista de invitados
    {reservation.guestList.slice(0, 10).map((guest) =>
  1. {guest}
    2. )}
{reservation.guestList.length} invitados registrados
); }; window.CleaningScreen = function CleaningScreen({ data, onCompleteTask }) { return (
{data.tasks.map((task) => (
{task.type}

{task.areaName}

{window.livingFormatDateTime(task.dueTime)}

    {task.checklist.map((item) => (
  • {task.completedItems.includes(item) ? "●" : "○"} {item}
    • ))}
{task.status !== "completed" ? ( ) : null}
))}
); }; window.IncidentsScreen = function IncidentsScreen({ data }) { return (
{data.incidents.map((incident) => (
{incident.reservationCode}

{incident.type}

{incident.areaName} · {incident.residentName} · Dpto. {incident.apartment}

{incident.description}

0 ? "retained" : "open"} label={incident.depositImpact} />
))}
); }; window.ReportsScreen = function ReportsScreen({ data }) { const report = data.report; return (
Reservas por área
    {report.reservationsByArea.map((item) =>
  • {item.area}: {item.total}
    • )}
Ingresos
    {report.revenueByArea.map((item) =>
  • {item.area}: {window.livingFormatCurrency(item.total)}
    • )}
); }; window.MessagesScreen = function MessagesScreen({ data }) { return (
}, ]} rows={data.messages} />
); }; window.SettingsScreen = function SettingsScreen({ data }) { const building = data.building; return (
Perfil

{building.name}

{building.district}

  • {building.apartmentsCount} departamentos
  • {building.floors} pisos y {building.basements} sótanos
  • {building.language} · {building.currency}
Instrucciones de pago
  • Yape: 987 654 321
  • Plin: 934 111 222
  • Cuenta BCP: 191-8844556-0-22
Permisos
  • Seguridad puede marcar llegadas
  • Limpieza puede reportar incidentes
  • Junta tiene acceso de solo lectura
); }; window.SuperAdminScreen = function SuperAdminScreen({ data }) { return (
Portafolio de edificios
    {data.superAdmin.buildings.map((building) => (
  • {building.name} · {building.district} · {building.plan} · {building.status}
    • ))}
Plantillas activas
    {data.superAdmin.templates.map((template) => (
  • {template.name} · {template.language} · {template.status}
    • ))}
Soporte y onboarding
    {data.superAdmin.supportQueue.map((item) => (
  • {item.building} · {item.issue} · Responsable: {item.owner} · SLA: {item.sla}
    • ))}
); }; window.ReservationDetailScreen = function ReservationDetailScreen({ data, reservationId, onApprove, onMarkArrival, onVerifyGuests, onCompleteTask }) { const reservation = data.reservations.find((item) => item.id === reservationId) || data.reservations.find((item) => item.id === "TRL-2026-0718-0024"); const tasks = data.tasks.filter((task) => task.reservationId === reservation.id); const relatedIncident = data.incidents.find((item) => item.reservationId === reservation.id); return (
onApprove(reservation.id)}>Aprobar : null } />
Estado

Motivo: {reservation.reason}

Invitados: {reservation.guestCount}

Monto total: {window.livingFormatCurrency(reservation.amount)}

Seguridad
● Residente llegó
● Invitados verificados
Lista de invitados
    {reservation.guestList.map((guest) =>
  1. {guest}
    2. )}
Tareas de limpieza
    {tasks.map((task) => (
  • {task.type} · {task.status !== "completed" ? ( ) : null}
    • ))}
Incidentes
{relatedIncident ? (

{relatedIncident.type}

) : (

Sin incidentes asociados.

)}
); };