// Meridian mobile — sales-agent app. Reuses primitives.jsx (Icon, Pill, money…) + data.jsx.
const ME = agentById("sofia");
const initialsOf = (n) => n.split(" ").map((x) => x[0]).join("");
/* ---------- shared bits ---------- */
function MToast({ toast }) {
if (!toast) return null;
return {toast.title}
;
}
function StatChip({ label, value, sub, subColor }) {
return (
{label}
{value}
{sub &&
{sub}
}
);
}
function LeadRow({ lead, onClick }) {
return (
);
}
/* ---------- HOME ---------- */
function MHome({ go, openLead, toast }) {
const m = METRICS;
const myLeads = LEADS.filter((l) => l.owner === ME.id);
const myTasks = TASKS.filter((t) => t.owner === ME.id && !t.done);
const overdue = PAYMENTS.filter((p) => p.agent === ME.id && p.status === "Overdue");
const greeting = new Date().getHours() < 12 ? "Good morning" : new Date().getHours() < 18 ? "Good afternoon" : "Good evening";
const typeIcon = { call: "phone", mail: "mail", handshake: "handshake", doc: "doc", calendar: "calendar", payments: "payments" };
return (
<>
Monday, June 2
{greeting}, {ME.name.split(" ")[0]}
{ME.initials}
{overdue.length > 0 && (
)}
Today's tasks
{myTasks.slice(0, 3).map((t) => (
))}
Hot leads
{[...myLeads].sort((a, b) => b.score - a.score).slice(0, 4).map((l) => openLead(l.id)} />)}
);
}
/* ---------- LEADS ---------- */
function MLeads({ openLead }) {
const [filter, setFilter] = React.useState("mine");
const [q, setQ] = React.useState("");
const [searching, setSearching] = React.useState(false);
const base = LEADS.filter((l) => l.owner === ME.id);
const filters = [
{ id: "mine", label: "All", pred: () => true },
{ id: "new", label: "New", pred: (l) => l.status === "New" },
{ id: "active", label: "Active", pred: (l) => ["Qualified", "Viewing", "Offer"].includes(l.status) },
{ id: "reserved", label: "Reserved", pred: (l) => l.status === "Reservation" },
{ id: "hot", label: "Hot", pred: (l) => l.score >= 75 },
];
let rows = base.filter(filters.find((f) => f.id === filter).pred);
if (q.trim()) rows = rows.filter((l) => (l.name + l.email).toLowerCase().includes(q.toLowerCase()));
return (
<>
Leads
{base.length} assigned to you
{searching && (
setQ(e.target.value)} placeholder="Search leads…"
style={{ marginTop: 10, width: "100%", height: 40, borderRadius: 12, border: "1px solid var(--border-strong)", background: "var(--surface)", color: "var(--text)", padding: "0 14px", font: "inherit", fontSize: 14, outline: "none" }} />
)}
{filters.map((f) => (
))}
{rows.map((l) =>
openLead(l.id)} />)}
{rows.length === 0 && No leads match.
}
{initialsOf(c.name)}
{c.name}
{c.status}
Score {c.score}
{acts.map((a) => (
))}
{STAGES.map((s, i) => (
))}
Interested in
{unit ? (
{unit.code}
{unit.status}
{unit.type} · {unit.size} m² · {unit.view}
{money(unit.price)}
) : (
No unit matched yet · looking at {devName(c.dev)}, budget {moneyK(c.budget)}.
)}
Buyer profile
Max budget{money(c.budget)}
Deal value{money(c.value)}
Source{c.source}
Created{c.created}
{c.email}{c.phone}
Notes
{c.notes.map((n, i) => (
{n.author}{n.time}
{n.text}
))}
);
}
/* ---------- PIPELINE ---------- */
const M_STAGES = ["New", "Qualified", "Viewing", "Offer", "Reservation", "Closed"];
function MPipeline({ openLead, toast }) {
const [, force] = React.useReducer((x) => x + 1, 0);
const [stage, setStage] = React.useState("Viewing");
const base = LEADS.filter((l) => l.owner === ME.id && l.status !== "Lost");
const rows = base.filter((l) => l.status === stage);
const move = (lead, dir) => {
const i = M_STAGES.indexOf(lead.status);
const ni = i + dir;
if (ni < 0 || ni >= M_STAGES.length) return;
lead.status = M_STAGES[ni];
toast({ tone: "ok", title: `${lead.name.split(" ")[0]} → ${lead.status}` });
force();
};
return (
<>
Pipeline
{base.length} open · {moneyK(base.reduce((s, l) => s + l.value, 0))} value
{M_STAGES.map((s) => (
))}
{rows.map((l) => (
))}
{rows.length === 0 &&
No deals in {stage}.
}
Inventory
98 units · 35 available
{DEVELOPMENTS.map((d) => (
))}
{["all", "Available", "Reserved", "Sold"].map((s) => (
))}
{units.map((u) => (
toast({ title: u.code + " · " + money(u.price) })}>
{u.type}
Floor {u.floor}
{u.beds} bed
{u.size} m²
{u.view}
{money(u.price)}
))}
Tasks
{base.filter((t) => !done.has(t.id)).length} open today
{["open", "done", "all"].map((f) => )}
{rows.map((t) => {
const isDone = done.has(t.id);
return (
);
})}
{rows.length === 0 &&
Nothing here.
}
s + p.amount, 0))} subColor="#cf4436" />
{base.map((p) => {
const l = leadById(p.lead);
return (
);
})}
);
}
/* ---------- COPILOT SHEET ---------- */
function MCopilot({ open, onClose }) {
if (!open) return null;
return (
Ask me to summarize a lead, match a buyer to available units, or draft a follow-up message.
{["Match a buyer to units", "Summarize a lead", "Draft a follow-up"].map((s) => (
))}
);
}
/* ---------- ROOT ---------- */
const TABS = [
{ id: "home", label: "Home", icon: "home" },
{ id: "leads", label: "Leads", icon: "leads", badge: 6 },
{ id: "pipeline", label: "Pipeline", icon: "pipeline" },
{ id: "inventory", label: "Inventory", icon: "building" },
{ id: "tasks", label: "Tasks", icon: "tasks", badge: 5 },
];
function MobileApp({ dark, accent, currency }) {
const [screen, setScreen] = React.useState("home");
const [leadId, setLeadId] = React.useState(null);
const [copilot, setCopilot] = React.useState(false);
const [toast, setToast] = React.useState(null);
setCurrency(currency);
const showToast = (t) => { setToast(t); setTimeout(() => setToast(null), 2200); };
const openLead = (id) => { if (!id) return; setLeadId(id); setScreen("lead"); };
const tab = ["home", "leads", "pipeline", "inventory", "tasks"].includes(screen) ? screen : (screen === "lead" ? "leads" : screen === "reservations" ? "home" : screen);
return (
{screen === "home" &&
}
{screen === "leads" &&
}
{screen === "lead" &&
setScreen("leads")} toast={showToast} />}
{screen === "pipeline" && }
{screen === "inventory" && }
{screen === "tasks" && }
{screen === "reservations" && setScreen("home")} openLead={openLead} />}
{!["lead", "reservations"].includes(screen) && (
)}
setCopilot(false)} />