// GuestMaker CRM B2B · accounts list, account sheet (8 tabs), B2B contact record. function AppFrame({ url, children, height }) { return (
{url}
{children}
); } function KpiTile({ label, value, sub, accent = FUCHSIA, wide }) { return (
{label.toUpperCase()}
{value}
{sub && {sub}}
); } function ProfileChip({ profile }) { const mice = profile === "MICE"; return {mice ? "MICE" : "CORP"}; } function AccountsFrame() { const [q, setQ] = useState(""); const [profile, setProfile] = useState("all"); const [type, setType] = useState("all"); const [mgr, setMgr] = useState("all"); const [status, setStatus] = useState("all"); const [open, setOpen] = useState(null); const rowsFlat = ACCOUNTS .filter(a => !q || (a.name + a.legal + a.cif + a.iata).toLowerCase().includes(q.toLowerCase())) .filter(a => profile === "all" || a.profile === profile) .filter(a => type === "all" || a.type === type) .filter(a => mgr === "all" || a.manager === mgr) .filter(a => status === "all" || a.status === status); /* The data has always carried parent/children, but the table ignored it: children sorted wherever the source array put them and announced themselves with a "child of X" label instead of sitting under the parent. The real product groups them — parent row with a disclosure and a Family pill, children indented beneath it — so this does the same. A child whose parent was filtered out is promoted to a root rather than silently dropped, otherwise a type or status filter can make rows disappear with nothing to explain why. */ const visible = new Set(rowsFlat.map(a => a.id)); const ordered = []; for (const a of rowsFlat) { if (a.parent && visible.has(a.parent)) continue; ordered.push({ ...a, depth: 0 }); for (const kid of rowsFlat.filter(k => k.parent === a.id)) { ordered.push({ ...kid, depth: 1 }); } } const familySize = id => ACCOUNTS.filter(k => k.parent === id).length; const th = { textAlign: "left", padding: "9px 12px", borderBottom: `1px solid ${RULE}`, whiteSpace: "nowrap" }; const td = { padding: "10px 12px", borderBottom: `1px solid ${RULE_SOFT}`, fontSize: 12 }; return (
DATA AGENCIES & COMPANIES

Agencies & Companies

Travel agencies, tour operators, DMCs and corporate accounts, {ordered.length} of {ACCOUNTS.length} accounts

Export CSV Import New account
({ v: t, l: t }))]} />
Columns
ACCOUNTS {ordered.length}
3 MATCH SUGGESTIONS TO CONFIRM
{["Name", "Type", "Account manager", "Primary contact", "Open deals", "Attributed RN", "Status"].map(h => ( ))} {ordered.map(a => { const ct = CT_BY_ID[a.contacts[0]]; return ( setOpen(a.id)} style={{ cursor: "pointer" }}> ); })}
{h.toUpperCase()}
{/* Parents get a disclosure, children a dot on the rail beneath it, so the indent reads as hierarchy rather than as stray padding. */} {a.depth === 0 && familySize(a.id) > 0 ? : a.depth ? : }
{a.name} {familySize(a.id) > 0 && ( Family · {familySize(a.id) + 1} )}
{a.legal}
{a.type} {USER_BY_ID[a.manager].name}
{ct.name}
{ct.email} 		{a.openDeals} {num(a.prod.rn)} {a.status}
{open && setOpen(null)} />}
); } const ACC_TABS = [["overview", "Overview", "chart"], ["contacts", "Contacts", "users"], ["terms", "Terms", "percent"], ["deals", "Deals", "board"], ["activity", "Activity", "clock"], ["docs", "Documents", "file"], ["prod", "Production", "bed"], ["comm", "Commissions", "euro"]]; function AccountDrawer({ acc, onClose }) { const [tab, setTab] = useState("overview"); const [children, setChildren] = useState(false); const kids = acc.children.map(id => ACC_BY_ID[id]); const eff = { ...acc.prod }; if (children && kids.length) kids.forEach(k => { eff.res += k.prod.res; eff.rn += k.prod.rn; eff.revenue += k.prod.revenue; eff.commissionCost += k.prod.commissionCost; }); const bookings = useMemo(() => { const own = bookingsFor(acc.id, 8); return children && kids.length ? [...own, ...kids.flatMap(k => bookingsFor(k.id, 4).map(b => ({ ...b, child: k.name })))].sort((a, b) => a.checkin < b.checkin ? 1 : -1) : own; }, [acc.id, children]); const comms = useMemo(() => commissionsFor(acc.id), [acc.id]); const commTotals = ["Accrued", "Invoiced", "Settled", "Cancelled"].map(s => [s, comms.filter(c => c.state === s).reduce((t, c) => t + c.amount, 0)]); const deals = DEALS.filter(d => d.acc === acc.id || (children && acc.children.includes(d.acc))); const rate = acc.commission ?? (acc.parent ? ACC_BY_ID[acc.parent].commission : 0); return (

{acc.name}

{acc.status}
{acc.legal} · {acc.type}
{[["TAX ID", acc.cif], ["IATA", acc.iata], ["CHANNEL MGR", acc.cm], ["CRS", acc.crs], ["ENGINE ID", acc.engineId]].map(([k, v]) => (
{k}
{v}
))}
MANAGER
{USER_BY_ID[acc.manager].name}
{(acc.parent || kids.length) && (
{acc.parent ? <>Child of {ACC_BY_ID[acc.parent].name} · terms inherited from the nearest ancestor : <>Parent of {kids.map(k => k.name).join(", ")} · production rolls up} {kids.length ? <>
: null}
)}
{ACC_TABS.map(([k, l, ic]) => ( ))}
{tab === "overview" && ( <>
{acc.rnCommitment ? (
ROOM-NIGHT COMMITMENT
{num(acc.kpi.rnYTD)} / {num(acc.rnCommitment)}
{[80, 100].map(m =>
)}
Allotment watch alerts the account manager at 80% and again at 100% of the contracted volume.
) : null} )} {tab === "contacts" && (
{acc.contacts.map(cid => { const c = CT_BY_ID[cid]; return (
{c.name.split(" ").map(w => w[0]).join("")}
{c.name} {c.primary && Primary} {c.role}
{c.email} {c.phone} {c.langs}
OPEN
{eur(c.openPipeline)}
{c.emails} emails
); })}
)} {tab === "terms" && (
{acc.promo.map(p => {p})}
)} {tab === "deals" && (
{deals.map(d => { const st = PIPE_BY_ID[d.pid].stages.find(s => s.id === d.stage); return (
{d.title}
{PIPE_BY_ID[d.pid].label} · {st.name} · close {shortDate(d.close)}
{eur(d.value)}
); })} {!deals.length && No deals on this account.}
)} {tab === "activity" && (
{[["Call", `Quarterly review with ${CT_BY_ID[acc.contacts[0]].name}`, "3 days ago", acc.manager, PLUM], ["Email", "Rate grid sent for review", "6 days ago", acc.manager, FUCHSIA], ["Site visit", "Property inspection · 2 hotels", "3 weeks ago", "yf", VIOLET], ["Note", "Prefers settlement on the 15th, not month end", "5 weeks ago", "ml", SLATE]].map(([t, title, when, who, tone], i) => ( ))}
)} {tab === "docs" && (
{[[`${acc.name.toLowerCase().replace(/[^a-z]/g, "-")}-framework-agreement-2026.pdf`, "Contract", "1.1 MB"], ["commission-schedule-signed.pdf", "Terms", "310 KB"], ["proposal-PR-2026-0184.pdf", "Proposal", "2.4 MB"]].map(([n, k, s]) => (
{n}
{k} · {s} · private storage · signed link
))}
)} {tab === "prod" && ( <>
ATTRIBUTED RESERVATIONS
WHY IT MATCHED →
{["Locator", "Hotel", "Check-in", "RN", "ADR", "Revenue", "Match"].map(h => ( ))} {bookings.slice(0, 10).map((b, i) => ( ))}
{h.toUpperCase()}
{b.loc} {b.hotel}{b.child && via {b.child}} {shortDate(b.checkin)} {b.rn} {eurFull(b.adr)} {eurFull(b.revenue)} {b.reason.k} {b.reason.label}
)} {tab === "comm" && ( <>
{commTotals.map(([s, v], i) => ( ))}
{acc.commission == null && (
No own rate, {rate}% inherited from {ACC_BY_ID[acc.parent].name}, the nearest ancestor with a rate.
)}
{["Booking", "Base", "Rate", "Amount", "State", "Accrued"].map(h => ( ))} {comms.map((c, i) => ( ))}
{h.toUpperCase()}
{c.loc} {eurFull(c.base)} {c.rate}%{c.inherited && inh.} {eurFull(c.amount)} {c.state} {shortDate(c.when)}
Export ledger Manual entry One entry per reservation at check-out. Exports are logged with user and timestamp.
)}
); } // ─── B2B tab on an ordinary contact record ─── function B2BContactPanel() { const [cid, setCid] = useState("c-cr"); const c = CT_BY_ID[cid]; const acc = ACC_BY_ID[c.acc]; const GUEST_TABS = ["Bookings", "Memory", "Loyalty", "Surveys"]; return (
{c.name.split(" ").map(w => w[0]).join("")}
{c.name} TYPE · B2B {c.primary && Primary contact}
{c.email} · {c.phone}