// Recursive MLS — Admin screens (super-admin back office). // Four screens: Admin dashboard, Agents & users, Compliance, Moderation. // Reuses btnPrimary/btnOutline (Dashboard.jsx) and Icon (Chrome.jsx). function pill(map, k, sm) { const c = map[k] || { c: "#6b706a", b: "#f0efe9" }; return { fontSize: sm ? 10.5 : 11, fontWeight: 600, color: c.c, background: c.b, borderRadius: 999, padding: sm ? "2px 8px" : "3px 10px", whiteSpace: "nowrap", display: "inline-block" }; } // ============ ADMIN DASHBOARD ============ function AdminDashboard({ go }) { const A = window.RC_ADMIN; const s = A.stats; const Stat = ({ label, val, sub, tone, icon }) => (
{label}
{val}
{sub &&
{sub}
}
); const tealT = { c: "#2a6f8a", b: "#e8f0f3" }, greenT = { c: "#1f8a5b", b: "#e8f4ee" }, orangeT = { c: "#c0612f", b: "#faece3" }, amberT = { c: "#9a6a12", b: "#fbf2dc" }; return (

Administrator dashboard

MLS-wide operations — members, compliance, and message moderation across {A.stats.offices.toLocaleString()} offices.

go("admin_compliance")}>Open compliance}> {A.issues.filter((i) => i.status === "Open").slice(0, 4).map((i) => ( go("admin_compliance")}> {i.severity}
{i.ruleTitle}
{i.listing} · {i.agent}
{i.detected} ))} go("admin_moderation")}>Open moderation}> {A.modQueue.filter((m) => m.status !== "Dismissed").slice(0, 4).map((m) => ( go("admin_moderation")}> {m.status}
{m.policy}
{m.from} → {m.to}
{m.time} ))}
go("admin_users")}>Manage agents & users}>
{[["Add a new agent", "user-plus"], ["Review 38 pending invites", "user-check"], ["12 suspended accounts", "user-x"], ["License renewals due", "badge-alert"]].map(([t, ic]) => ( ))}
); } // ============ AGENTS & USERS ============ function AdminUsers() { const A = window.RC_ADMIN; const [q, setQ] = useState(""); const [status, setStatus] = useState("All"); const [sel, setSel] = useState(null); const [page, setPage] = useState(1); const totalPages = Math.ceil(A.stats.agents / 8); let rows = A.agents.filter((u) => (status === "All" || u.status === status) && (!q || u.name.toLowerCase().includes(q.toLowerCase()) || u.email.toLowerCase().includes(q.toLowerCase()) || u.office.toLowerCase().includes(q.toLowerCase()))); return (

Agents & users

{A.stats.agents.toLocaleString()} members · {A.stats.offices.toLocaleString()} offices · {A.stats.pending} pending · {A.stats.suspended} suspended

{/* search + filters (server-side at scale) */}
setQ(e.target.value)} placeholder="Search 104,200 members by name, email, office, or license…" style={{ flex: 1, border: 0, outline: 0, background: "transparent", fontFamily: "inherit", fontSize: 13.5 }} />
{["All", "Active", "Pending", "Flagged", "Suspended"].map((f) => ( ))}
{/* table */}
{["Member", "Office", "Role", "License", "Listings", "Status", ""].map((h, i) => ( ))} {rows.map((u) => ( setSel(u)} className="rc-row" style={{ cursor: "pointer", borderBottom: "1px solid #f4f3ee" }}> ))}
{h}
{u.initials}
{u.name}
{u.email}
 {u.office} {u.role} {u.license}{u.licenseAlert && ⚠} {u.listings} {u.status}{u.compliance > 0 && ⚑{u.compliance}}
{rows.length === 0 &&
No members match.
}
{/* pagination — only a page is loaded at a time (scales to 100k) */}
Showing 1–{rows.length} of {A.stats.agents.toLocaleString()}
{page} / {totalPages.toLocaleString()}
{sel && setSel(null)} />}
); } function UserDrawer({ u, A, onClose }) { const [role, setRole] = useState(u.role); const [status, setStatus] = useState(u.status); const field = (label, val) => (
{label}{val}
); return (
e.stopPropagation()} style={{ width: 420, maxWidth: "92vw", height: "100%", background: "#fbfaf7", boxShadow: "-8px 0 30px rgba(0,0,0,.2)", display: "flex", flexDirection: "column" }}>
{u.initials}
{u.name}
{u.email}
{u.licenseAlert &&
License expires {u.licenseExp} — renewal reminder recommended.
}
Role
{A.roles.map((r) => )}
{field("Office", u.office)} {field("License", u.license)} {field("License expires", u.licenseExp)} {field("Active listings", u.listings)} {field("Member since", u.joined)} {field("Last active", u.lastActive)} {field("Open compliance", u.compliance)}
Account status
{["Active", "Suspended"].map((st) => )}
); } // ============ COMPLIANCE (back office + fines) ============ function AdminCompliance() { const A = window.RC_ADMIN; const [tab, setTab] = useState("issues"); const [sel, setSel] = useState(A.issues[0]); const [statusF, setStatusF] = useState("Open"); const rows = A.issues.filter((i) => statusF === "All" || i.status === statusF); return (

Compliance

MLS-wide rule enforcement, issue review, and fines. {A.stats.complianceOpen} open · {A.stats.complianceCritical} critical · {A.usd(A.stats.finesOutstanding)} fines outstanding.

{[["issues", "Issues"], ["rules", "Rule library"], ["builder", "AI rule builder"]].map(([id, lab]) => ( ))}
{tab === "issues" ? (
{["Open", "Resolved", "All"].map((f) => )}
{rows.map((i) => { const on = sel && sel.id === i.id; return (
setSel(i)} className="rc-row" style={{ padding: "12px 14px", cursor: "pointer", borderBottom: "1px solid #f6f5f0", background: on ? "#f3f6f4" : "transparent", borderLeft: on ? "2.5px solid #006747" : "2.5px solid transparent" }}>
{i.severity} {i.id} {i.detected}
{i.ruleTitle}
{i.listing} · {i.area} · {i.agent}
{i.status} {i.fine > 0 && {A.usd(i.fine)} · {i.fineStatus}}
); })}
{sel && }
) : tab === "rules" ? (
) : (
)}
); } function IssueDetail({ i, A, }) { const [fineStatus, setFineStatus] = useState(i.fineStatus); const [amount, setAmount] = useState(i.fine); const [resolved, setResolved] = useState(i.status); const sev = A.sevColor[i.severity]; return (
{i.severity} {resolved} {i.id} · {i.rule}

{i.ruleTitle}

{i.listing} · {i.area}
{i.agent.split(" ").map((w) => w[0]).join("")}
{i.agent}
{i.office}
What was flagged

{i.detail}

{/* FINES (VestaPlus CheckMate-style) */}
Fine {fineStatus}
$ setAmount(+e.target.value)} style={{ width: 120, boxSizing: "border-box", border: "1px solid #e2e0d8", borderRadius: 8, padding: "9px 11px 9px 22px", fontFamily: "'Space Mono', monospace", fontSize: 16, fontWeight: 700, color: "#1d241f", outline: "none" }} />
Default for {i.rule}: {A.usd((A.rules.find((r) => r.code === i.rule) || {}).autoFine || 0)}
{/* billing lifecycle — invoice, payment tracking, appeals */} {(function () { const bill = (window.RC_ADMIN.fineLifecycle || {})[i.id]; if (!bill) return null; const kindMeta = { issued: { ic: "gavel", c: "#9a6a12" }, invoice: { ic: "file-text", c: "#2a6f8a" }, pending: { ic: "clock", c: "#9a6a12" }, paid: { ic: "check-circle-2", c: "#1f8a5b" }, appeal: { ic: "scale", c: "#6b706a" }, waived: { ic: "shield-check", c: "#1f8a5b" } }; return (
{[["Invoice", bill.invoice], ["Bill to", bill.billTo], bill.due ? ["Due", bill.due] : null, bill.paid ? ["Paid", bill.paid] : null, bill.appeal ? ["Appeal", bill.appeal] : null].filter(Boolean).map(([k, v]) => (
{k}
{v}
))}
{bill.events.map((e, idx) => { const m = kindMeta[e.kind] || { ic: "dot", c: "#a8aca6" }; return (
{idx < bill.events.length - 1 &&
}
{e.t} {e.time}
{e.note}
); })}
); })()}
{/* resolution */}
); } function RuleLibrary({ A }) { const [rules, setRules] = useState(A.rules); const toggle = (id) => setRules(rules.map((r) => r.id === id ? { ...r, active: !r.active } : r)); return (
Rules the MLS automatically enforces. Each carries a default fine; super admins can toggle, edit, or add rules.
{["Rule", "Category", "Severity", "Auto-fine", "Active"].map((h, i) => )} {rules.map((r) => ( ))}
2 ? "center" : "left", padding: "11px 16px", fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".6px", color: "#a8aca6", borderBottom: "2px solid #ececec" }}>{h}
{r.title}
{r.code}
 {r.category} {r.severity} {A.usd(r.autoFine)}
); } // ============ AI RULE BUILDER ============ // Super admins upload their rulebooks/photo standards/bylaws, pull state statutes, // and an AI model proposes the rules engine (incl. vision rules for photos). function RuleBuilder({ A }) { const [sources, setSources] = useState(A.ruleSources); const [statutes, setStatutes] = useState(A.statutes); const [phase, setPhase] = useState("ready"); // ready | analyzing | done const [proposed, setProposed] = useState([]); const [accepted, setAccepted] = useState({}); const toggleStatute = (id) => setStatutes(statutes.map((s) => s.id === id ? { ...s, on: !s.on } : s)); const generate = () => { setPhase("analyzing"); setProposed([]); setTimeout(() => { setProposed(A.generatedRules); setPhase("done"); }, 1400); }; const decide = (id, val) => setAccepted({ ...accepted, [id]: val }); const acceptedCount = Object.values(accepted).filter((v) => v === "in").length; return (

Build your rules engine with AI

reCURSIVE AI

Upload your MLS rulebook, photo standards, and bylaws, and pull in state & federal statutes. The model reads them — including analyzing example photos to build vision rules — and proposes a complete rule set for your review.

{/* uploaded docs */}
Source documents
{sources.map((s) => (
{s.name}
{s.kind} · {s.pages}p · {s.rules} rules found
{s.vision && VISION}
))}
Drop rulebooks, photo standards, or bylaws
PDF, DOCX, or images · the AI reads text and photos
{/* statutes */}
State & federal statutes
{statutes.map((s) => (
{s.cite}
{s.state} · {s.rules} candidate rules
))}
{/* generate */}
{phase === "analyzing" && Reading documents, analyzing photos, and cross-referencing statutes…} {phase === "done" && {proposed.length} rules proposed · {acceptedCount} added}
{/* proposed rules */} {phase === "analyzing" && (
{[0, 1, 2].map((i) =>
)}
)} {phase === "done" && (
Proposed rules — review & approve
{proposed.map((r) => { const dec = accepted[r.id]; return (
{r.title} {r.severity} {r.vision && VISION} {r.code}
{r.detail}
{r.source} Auto-fine {A.usd(r.autoFine)} Confidence 0.9 ? "#1f8a5b" : "#9a6a12" }} /> {Math.round(r.confidence * 100)}%
{dec === "in" ? Added : }
); })}
{acceptedCount > 0 && ( )}
)}
); } // ============ MODERATION ============ function AdminModeration() { const A = window.RC_ADMIN; const [tab, setTab] = useState("queue"); const [sel, setSel] = useState(A.modQueue[0]); return (

Message moderation

Messages screened against MLS policy. {A.stats.modPending} awaiting review · {A.stats.modBlocked30d} blocked in the last 30 days.

{[["queue", "Flagged messages"], ["policies", "Policies"]].map(([id, lab]) => ( ))}
{tab === "queue" ? (
{A.modQueue.map((m) => { const on = sel && sel.id === m.id; return (
setSel(m)} className="rc-row" style={{ padding: "12px 14px", cursor: "pointer", borderBottom: "1px solid #f6f5f0", background: on ? "#f3f6f4" : "transparent", borderLeft: on ? "2.5px solid #006747" : "2.5px solid transparent" }}>
{m.status} {m.policy} {m.time}
{m.from} → {m.to}
{m.excerpt}
); })}
{sel && }
) : (
)}
); } function ModDetail({ m, A }) { const [status, setStatus] = useState(m.status); return (
{status} {m.policy} {m.id}
{m.from.split(" ").map((w) => w[0]).join("")}
{m.from} ({m.fromOffice})
{m.to}
Message content
{m.excerpt}
Flagged terms
{m.flagged.map((f) => “{f}”)}
); } function ModPolicies({ A }) { const [policies, setPolicies] = useState(A.modPolicies); const toggle = (id) => setPolicies(policies.map((p) => p.id === id ? { ...p, on: !p.on } : p)); return (
Outbound messages are automatically screened against these policies before sending. Super admins control which are enforced.
{policies.map((p) => (
{p.label}
{p.on ? `${p.blocked30d} blocked in last 30 days` : "Not enforced"}
))}
); } // ---- shared admin atoms ---- function Card({ title, action, children }) { return (

{title}

{action}
{children}
); } function Row({ children, onClick }) { return
{children}
; } function LinkBtn({ children, onClick }) { return ; } // ============ ROLES & PERMISSIONS ============ function AdminRoles() { const A = window.RC_ADMIN; const [roles, setRoles] = useState(A.roleDefs); const [selId, setSelId] = useState(A.roleDefs[2].id); // default to Office admin (most interesting) const sel = roles.find((r) => r.id === selId) || roles[0]; const setPerm = (areaId, scope) => setRoles(roles.map((r) => r.id === selId ? { ...r, perms: { ...r.perms, [areaId]: scope } } : r)); // group permission areas const groups = [...new Set(A.permAreas.map((p) => p.group))]; return (

Roles & permissions

Define role types and exactly what each can see and do. Scope every permission to None, the member's own records, their office, or the whole MLS.

{/* role list */}
{roles.map((r) => { const on = r.id === selId; return ( ); })}
{/* permission matrix */}
{sel.name}
{sel.members.toLocaleString()} members · {sel.system ? "system role" : "custom role"}
{!sel.system && }
{groups.map((g) => (
{g}
{A.permAreas.filter((p) => p.group === g).map((area) => (
{area.label}
{A.scopes.map((sc) => { const on = sel.perms[area.id] === sc; const col = A.scopeColor[sc]; return ( ); })}
))}
))}
Own = the member's own records · Office = anyone in their brokerage · MLS = the entire system. System roles are read-only; duplicate to make a custom role.
); } window.AdminDashboard = AdminDashboard; window.AdminUsers = AdminUsers; window.AdminCompliance = AdminCompliance; window.AdminModeration = AdminModeration; window.AdminRoles = AdminRoles;