// Mobile screen content — Dashboard, Suppliers, Hotel Contacts, Air, Contact.
// Reads data exposed on window by the desktop page scripts.
// ---------- shared bits ----------
function MEyebrowTitle({ eyebrow, title, sub }) {
return (
{eyebrow}
{title}
{sub && (
{sub}
)}
);
}
function MField({ icon, value, mono, color }) {
return (
{value}
);
}
function MSearch({ value, onChange, placeholder }) {
return (
);
}
function MChips({ items, selected, onSelect }) {
return (
{items.map(c => {
const active = c === selected;
return (
onSelect(c)} style={{
flexShrink: 0,
fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
padding: "7px 13px",
border: active ? "1px solid var(--rdb-gold)" : "1px solid var(--ink-3)",
background: active ? "var(--rdb-gold)" : "transparent",
color: active ? "#0D0D0D" : "var(--fg-2)", lineHeight: 1, cursor: "pointer",
}}>{c}
);
})}
);
}
// ---------- Dashboard ----------
function MobileDashboard({ user, onNav }) {
const name = (user && user.name ? user.name.split(" ")[0] : "Amelia");
const rows = [
{ id: "suppliers", icon: "building-2", title: "Suppliers & Partners", desc: "184 partners · 8 categories" },
{ id: "hotels", icon: "bed-double", title: "Hotel Contacts", desc: "Nationwide · always current" },
{ id: "air", icon: "plane", title: "Air", desc: "Carriers · booking desk" },
{ id: "contact", icon: "life-buoy", title: "Contact", desc: "24 / 7 operations desk" },
];
return (
RDB Hospitality Group · Miami
Welcome back, {name} .
Everything you need to work with RDB — travel suppliers, hotel contacts, and air — in one place.
Backstage Pass · Active · Expires May 31
Quick access
);
}
// ---------- Suppliers (live, read-only from the RDB Google Sheet) ----------
function MobileSuppliers() {
const { rows, status } = useSuppliers();
const [search, setSearch] = React.useState("");
const [cat, setCat] = React.useState("All");
const cats = React.useMemo(() => supplierCategories(rows), [rows]);
const q = search.trim().toLowerCase();
const list = rows.filter(s =>
(cat === "All" || (s.category || "").split(",").map(c => c.trim()).includes(cat)) &&
(q === "" || s.company.toLowerCase().includes(q) || (s.category || "").toLowerCase().includes(q) || (s.notes || "").toLowerCase().includes(q))
);
return (
);
}
function MSupplierCard({ s }) {
const cats = (s.category || "").split(",").map(c => c.trim()).filter(Boolean);
return (
{s.company.split(" ").slice(0, 2).map(w => w[0]).join("")}
{s.company}
{cats.map(c => {c} )}
{s.commission && {prettyUrl(s.website)} }
{s.notes &&
{s.notes}
}
);
}
// ---------- Hotels (live, read-only from the RDB Google Sheet) ----------
const MOBILE_HOTELS_BATCH = 25;
function MobileHotels() {
const { rows, status } = useHotels();
const [search, setSearch] = React.useState("");
const [stateF, setStateF] = React.useState("All");
const [visible, setVisible] = React.useState(MOBILE_HOTELS_BATCH);
const states = ["All"].concat(Array.from(new Set(rows.map(h => h.state).filter(Boolean))));
const q = search.trim().toLowerCase();
const list = rows.filter(h =>
(stateF === "All" || h.state === stateF) &&
(q === "" || h.hotel.toLowerCase().includes(q) || h.city.toLowerCase().includes(q) || (h.state || "").toLowerCase().includes(q))
);
// Only render `visible` cards — mounting the full national directory at once
// froze the page. Reset the window whenever the search/filter changes.
React.useEffect(() => { setVisible(MOBILE_HOTELS_BATCH); }, [q, stateF]);
const shown = list.slice(0, visible);
const subText = status === "live" ? rows.length + " properties · live" : status === "loading" ? "syncing…" : "offline sample";
return (
{list.length === 0 &&
No properties match your search.
}
{shown.map((h, i) =>
)}
{list.length > visible && (
setVisible(v => v + MOBILE_HOTELS_BATCH)}
style={{ width: "100%", marginTop: 16, padding: "13px 16px", background: "transparent", border: "1px solid var(--ink-3)", color: "var(--fg-1)", fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase", borderRadius: 2, cursor: "pointer" }}
>
Load more · {Math.min(MOBILE_HOTELS_BATCH, list.length - visible)} of {list.length - visible} remaining
)}
);
}
function MHotelCard({ h }) {
return (
{h.email || "—"} }
);
}
// ---------- Static (Air / Contact) ----------
function MobileStatic({ page }) {
const c = (window.STATIC_CONTENT && window.STATIC_CONTENT[page]) || {};
const contacts = c.contacts || (c.contact ? [c.contact] : []);
return (
{c.intro}
{(c.sections || []).map((s, i) => (
{s.h}
{s.body && {s.body}
}
{s.list && (
{s.list.map((li, j) => (
{li}
))}
)}
))}
{c.resources && c.resources.length > 0 && (
Downloads
{c.resources.map((r, i) =>
)}
)}
{contacts.map((ct, i) =>
)}
);
}
// ---------- Air (dedicated mobile layout) ----------
function MobileAir() {
const procedures = window.AIR_PROCEDURES || [];
const contracts = window.AIR_CONTRACTS || [];
const ct = window.AIR_CONTACT || {};
return (
Air runs on carrier-specific rules. Procedures, contracts, and the air desk — all on this page.
{/* Rules callout */}
Carrier rules apply
Airline rules override standard supplier protocol — check the carrier's contract before booking.
{/* Procedures */}
Booking Procedures
Draft
{procedures.map(p => (
))}
{/* Contracts */}
Air Contracts
{contracts.map((c, i) =>
)}
{/* Air desk */}
);
}
// ---------- Partner Deals (locked) ----------
function MobileLocked() {
return (
Future feature
Partner Deals
Preferred partner rates and deal structures — in progress.
);
}
Object.assign(window, { MobileDashboard, MobileSuppliers, MobileHotels, MobileStatic, MobileAir, MobileLocked });