New {event.status} · {event.guest} · AURELIA {event.hotel} · €{event.amt.toLocaleString()} · {event.src}

just now

); } function KPI({ lbl, val, sub, accent, icon, hero, live }) { return (

{hero && (

)}

{lbl.toUpperCase()} {live && } {icon && }

{val}

{sub}

); } // ────────────────────────── filter bar ────────────────────────── function StatusTabs({ active, onChange, counts }) { const tabs = [ { id: "all", lbl: "All bookings" }, { id: "Confirmed", lbl: "Confirmed" }, { id: "CheckedIn", lbl: "In-house" }, { id: "CheckedOut",lbl: "Past" }, { id: "Modified", lbl: "Modified" }, { id: "Cancelled", lbl: "Cancelled" }, ]; return (

{tabs.map(t => { const on = t.id === active; return ( ); })}

); } function FilterBar({ search, setSearch, hotel, setHotel, dateFrom, setDateFrom, dateTo, setDateTo, onReset }) { return (

setSearch(e.target.value)} placeholder="Search by guest name, email, or confirmation #..." style={{ flex: 1, border: "none", outline: "none", fontSize: 12.5, color: B_INK, background: "transparent", fontFamily: "'Inter', sans-serif", }} />

setDateFrom(dateFrom ? "" : "May 1, 2026")}> {dateFrom || "Check-in from..."}

setDateTo(dateTo ? "" : "Aug 31, 2026")}> {dateTo || "Check-in to..."}

); } // ────────────────────────── table ────────────────────────── // Single-line grid: every cell vertically centred, no row wraps, generous gaps. const ROW_COLS = "120px minmax(220px, 1.6fr) 180px minmax(200px, 1.3fr) minmax(170px, 1fr) 130px 110px 140px 28px"; function BookingsTable({ rows, onOpen }) { return (

{/* header */}

CONFIRMATION GUEST STAY HOTEL ROOM · PLAN STATUS AMOUNT SOURCE

{rows.length === 0 ? (

No bookings match your filters.

) : ( rows.map((bk, i) => { const g = B_GUESTS[bk.gIdx]; const h = B_HOTEL_BY_ID[bk.hotel]; const ciShort = bk.ci.replace(", 2026", ""); const coShort = bk.co.replace(", 2026", ""); return (

onOpen(bk)} style={{ display: "grid", gridTemplateColumns: ROW_COLS, columnGap: 14, padding: "14px 20px", borderBottom: i < rows.length - 1 ? `1px solid ${B_RULE_S}` : "none", alignItems: "center", fontSize: 12.5, color: B_INK, cursor: "pointer", transition: "background 0.15s ease", }} onMouseEnter={e => e.currentTarget.style.background = B_FUCHSIA + "06"} onMouseLeave={e => e.currentTarget.style.background = "transparent"} > {/* confirmation */} {bk.conf} {/* guest */}

{g.fn} {g.ln}

{g.email}

{/* stay (single line dates + nights) */}

{ciShort} → {coShort}

{bk.nts} {bk.nts === 1 ? "night" : "nights"}

{/* hotel */}

{h.name}

{h.loc}

{/* room + chips */}

{B_ROOMS[bk.room]}

{bk.bd} {bk.rt}

{/* status */} {/* amount */} €{bk.amt.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {/* source */} {/* actions */}

); }) )}

); } // ────────────────────────── DETAIL DRAWER ────────────────────────── function ExtrasGroup({ ex, defaultOpen = true }) { const [open, setOpen] = bUseState(defaultOpen); const total = ex.items.reduce((s, it) => s + it.v, 0); return (

setOpen(o => !o)}>

{ex.group} ({ex.items.length})

€{total.toFixed(2)}

{open && (

{ex.items.map((it, i) => (

{it.lbl} €{it.v.toFixed(2)}

))}

)}

); } function DetailSection({ icon, title, children }) { return (

{title}

{children}

); } function DetailField({ label, value, accent }) { return (

{label.toUpperCase()}

{value || "N/A"}

); } function Drawer({ bk, onClose }) { // Lock body scroll while open bUseEffect(() => { if (!bk) return; const orig = document.body.style.overflow; document.body.style.overflow = "hidden"; const onEsc = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onEsc); return () => { document.body.style.overflow = orig; window.removeEventListener("keydown", onEsc); }; }, [bk, onClose]); if (!bk) return null; const g = B_GUESTS[bk.gIdx]; const h = B_HOTEL_BY_ID[bk.hotel]; const d = getDetail(bk); const extrasTotal = d.extras.reduce((s, ex) => s + ex.items.reduce((a, it) => a + it.v, 0), 0); const totalRev = bk.amt + extrasTotal; const avg = totalRev / bk.nts; const allGuests = [{ fn: g.fn, ln: g.ln, type: "Holder", email: g.email, phone: g.ph, primary: true }, ...d.companions.map(c => ({ ...c, primary: false }))]; return (

e.stopPropagation()} style={{ width: "min(720px, 100vw)", height: "100vh", background: B_CREAM, boxShadow: "-30px 0 60px -30px rgba(0,0,0,0.4)", display: "flex", flexDirection: "column", animation: "gm-slidein-r 0.25s cubic-bezier(0.2, 0.7, 0.2, 1)", }}> {/* drawer header */}

Reservation Details

{g.fn} {g.ln}

{bk.ci} → {bk.co} ({bk.nts}n) {h.name}

{/* meta row */}

{/* body */}

{/* left column */}

{allGuests.map((gg, i) => (

{gg.fn} {gg.ln} {gg.primary && ( HOLDER )} {!gg.primary && ( {gg.type.toUpperCase()} )}

{gg.primary ? `${gg.email} · ${gg.phone}` : "Linked under booking"}

{gg.primary && ( )}

))}

{[ { t: "16 May · 09:14", a: "Reservation created from " + B_SOURCE_BY_ID[bk.src].label, icon: "spark" }, { t: "17 May · 11:02", a: "Pre-stay journey started", icon: "send" }, { t: "18 May · 14:38", a: "Vegan menu preference captured · WhatsApp", icon: "brain" }, ...(bk.status === "Modified" ? [{ t: "19 May · 08:21", a: "Dates modified (+1 night)", icon: "edit" }] : []), ...(bk.status === "CheckedIn" ? [{ t: bk.ci + " · 16:12", a: "Checked in · key issued", icon: "key" }] : []), ...(bk.status === "CheckedOut" ? [{ t: bk.co + " · 10:48", a: "Checked out · folio settled", icon: "wallet" }] : []), ...(bk.status === "Cancelled" ? [{ t: "19 May · 11:03", a: "Cancelled by guest", icon: "close" }] : []), ].slice(0, 4).map((e, i) => (

{e.a}

{e.t}

))}

{/* right column · financial summary */}

Reservation Amount €{bk.amt.toFixed(2)}

{d.extras.length > 0 && ( <>

Folio Extras €{extrasTotal.toFixed(2)}

{d.extras.map((ex, i) => )} )}

Total Revenue €{totalRev.toFixed(2)}

AVERAGE PER NIGHT €{avg.toFixed(2)}

{h.name}

{h.loc}

+34 971 220 884

reception.{h.id.toLowerCase()}@aurelia.example

{[ { l: "Created", v: "Tue, 19 May 2026" }, { l: "Updated", v: "Wed, 20 May 2026" }, { l: "Stage", v: bk.status === "CheckedIn" ? "in_stay" : bk.status === "CheckedOut" ? "post_stay" : bk.status === "Cancelled" ? "cancelled" : "pre_arrival", pill: true }, ].map((r, i) => (

{r.l} {r.pill ? ( {r.v} ) : ( {r.v} )}

))}

); } // ────────────────────────── main section ────────────────────────── function BookingsSection() { const [tab, setTab] = bUseState("all"); const [search, setSearch] = bUseState(""); const [hotel, setHotel] = bUseState("all"); const [dateFrom, setDateFrom] = bUseState(""); const [dateTo, setDateTo] = bUseState(""); const [open, setOpen] = bUseState(null); // Live metrics — numbers grow as new bookings come in. const liveTotal = useLiveCounter(547329, 1, 4, 1600); const liveAvgNight = useLiveOscillator(238, 4, 2400); const { event: liveEvent, idx: liveIdx } = useLiveEvents(2200); const AVG_PER_BOOKING = 868; // € per booking, lifetime const CANCEL_PCT = 11.4; // % cancel + no-show const liveRevenue = liveTotal * AVG_PER_BOOKING; const liveCancel = Math.round(liveTotal * (CANCEL_PCT / 100)); const liveRevenueDisplay = `€${(liveRevenue / 1_000_000).toFixed(2)}M`; const filtered = bUseMemo(() => { return B_BOOKINGS.filter(bk => { if (tab !== "all" && bk.status !== tab) return false; if (hotel !== "all" && bk.hotel !== hotel) return false; if (search) { const q = search.toLowerCase(); const g = B_GUESTS[bk.gIdx]; if (!`${g.fn} ${g.ln}`.toLowerCase().includes(q) && !g.email.toLowerCase().includes(q) && !bk.conf.toLowerCase().includes(q)) return false; } return true; }); }, [tab, search, hotel]); const counts = bUseMemo(() => { // Hold proportions to the seeded sample, then scale up to the live total. const SHARES = { Confirmed: 0.60, CheckedIn: 0.12, CheckedOut: 0.12, Modified: 0.04, Cancelled: 0.08, NoShow: 0.04 }; const c = { all: liveTotal }; for (const k of Object.keys(SHARES)) c[k] = Math.round(liveTotal * SHARES[k]); return c; }, [liveTotal]); const totalRevenue = B_BOOKINGS.reduce((s, b) => s + b.amt, 0); const avgNightly = totalRevenue / B_BOOKINGS.reduce((s, b) => s + b.nts, 0); const cancelled = (counts.Cancelled || 0) + (counts.NoShow || 0); const cancelRate = ((cancelled / B_BOOKINGS.length) * 100).toFixed(0); return (

{/* section header */}

From contact to commercial record

Every booking, every channel,{" "} decomposed and queryable.

The full commercial history of every contact in one view. Filter, sort and search across properties, channels, statuses and dates. Click any booking to see the stay decomposed by room, board and rate, with the folio extras grouped by outlet and the activity history attached.

{/* product frame */}

{/* breadcrumb + title */}

CRM BOOKINGS

Bookings

Full commercial history, all statuses, all time, with financials and booking source.

{/* KPI strip */}

{/* tabs + filters */} { setSearch(""); setHotel("all"); setDateFrom(""); setDateTo(""); setTab("all"); }} /> {/* row count strip */}

{filtered.length.toLocaleString()} {filtered.length === 1 ? "booking" : "bookings"} on this page · of {liveTotal.toLocaleString("en-US")} total

Click any row to open the reservation

{/* scrollable table area */}

{filtered.length > 0 && (

Page 1 of {Math.ceil(liveTotal / 25).toLocaleString("en-US")}

{["Previous", "1", "2", "3", "Next"].map((b, i) => ( ))}

)}

Click any row to inspect the full reservation, with extras grouped by outlet and the activity timeline.

setOpen(null)} />

); } window.BookingsSection = BookingsSection;