// Recursive MLS — Add/Edit (flagship) — registry-driven listing workspace.
// Every control is generated from window.RC_FIELDS (the same registry Field Studio edits),
// so a schema change in the Studio flows straight into this form. SABOR tenant.
const { useState } = React;
const inp = { width: "100%", boxSizing: "border-box", border: "1px solid #e2e0d8", borderRadius: 7, padding: "9px 11px", fontFamily: "inherit", fontSize: 13.5, color: "#1d241f", background: "#fff", outline: "none" };
const inpAffix = { position: "absolute", left: 11, top: "50%", transform: "translateY(-50%)", fontSize: 13.5, color: "#8a8e88", fontFamily: "'Space Mono', monospace" };
function AddEditWorkspace({ go }) {
const F = window.RC_FIELDS, C = window.RC_COMPLIANCE, D = window.RC_DATA;
const _p = new URLSearchParams(location.search);
// ---- seed values (San Antonio / SABOR listing) ----
const [vals, setVals] = useState({
UnparsedAddress: "18 Elderwood", City: "San Antonio", StateOrProvince: "TX", PostalCode: "78248", UnitNumber: "",
PropertyType: _p.get("ptype") || "Residential", PropertySubType: "SingleFamilyResidence", YearBuilt: 2016,
BedroomsTotal: 4, BathroomsTotalInteger: 4, LivingArea: 3980, LotSizeAcres: 0.42, X_SABOR_GuardGated: true,
ListPrice: 1295000, AssociationFee: 285, AssociationFeeFrequency: "Monthly", TaxAnnualAmount: 21400, BuyerAgencyCompensation: "",
SecurityDeposit: 2600, LeaseTerm: "TwelveMonths", AvailabilityDate: "2026-08-01", FurnishedYN: false, PetsAllowed: ["Cats", "Dogs"],
PublicRemarks: "Set behind the gates of a sought-after North San Antonio enclave, this 2016 custom home pairs a light-filled great room with a chef's kitchen and a resort backyard.",
PrivateRemarks: "Seller prefers 45-day close. Alarm on the mudroom door.",
PoolFeatures: ["InGround", "Heated", "Gunite"], Flooring: ["Wood", "Tile"], Cooling: ["CentralAir", "Zoned"],
X_SABOR_WaterfrontName: "", X_SABOR_HorseProperty: false,
ListAgentFullName: "Alex Morgan", ListOfficeName: "Recursive Realty", ListAgentDirectPhone: "(210) 555-0148", ListAgentEmail: "alex@recursiverealty.com",
photos: D.gallery(3),
});
const set = (k, v) => setVals((s) => ({ ...s, [k]: v }));
// ---- smart form: listing class + density (seeded by tweaks, live-editable in the header) ----
const [listingClass, setListingClass] = useState(_p.get("class") === "Lease" ? "Lease" : "Sale");
const density = _p.get("density") === "compact" ? "compact" : "comfortable";
const gap = density === "compact" ? 9 : 13;
// ---- autofill review state: address-first prefills carrying provenance, awaiting confirm ----
const [suggested, setSuggested] = useState({
YearBuilt: "record", LivingArea: "record", LotSizeAcres: "record", TaxAnnualAmount: "record",
PoolFeatures: "photo", X_SABOR_GuardGated: "prior",
});
const confirmField = (k) => setSuggested((s) => { const n = { ...s }; delete n[k]; return n; });
const acceptAll = () => setSuggested({});
const suggestCount = Object.keys(suggested).length;
// ---- status control ----
const [statusKey, setStatusKey] = useState("ComingSoon");
const status = F.statusByKey(statusKey);
const [showStatus, setShowStatus] = useState(false);
const [targetStatus] = useState("Active"); // required-for checklist target
// ---- field filter toggle ----
const [filter, setFilter] = useState("all"); // all | required | incomplete
const isEmpty = (f) => { const v = vals[f.key]; return v === "" || v == null || (Array.isArray(v) && v.length === 0) || v === false; };
// ---- smart-form visibility: business rules decide which fields show ----
const inClass = (f) => F.forClass(f, listingClass);
const condHidden = (f) => {
if (f.key === "AssociationFeeFrequency") return !(Number(vals.AssociationFee) > 0); // only when there's an HOA fee
if (f.key === "LotSizeAcres") return vals.PropertySubType === "Condominium"; // condos have no lot
if (f.key === "PropertySubType") return !vals.PropertyType;
return false;
};
const visibleField = (f) => inClass(f) && !condHidden(f);
const hiddenForClass = F.fields.filter((f) => f.life === "active" && !inClass(f));
const requiredFields = F.fields.filter((f) => f.required && f.life === "active" && visibleField(f));
const incompleteReq = requiredFields.filter(isEmpty);
// ---- compliance (flat RESO listing built from registry values) ----
const listing = {
PublicRemarks: vals.PublicRemarks, Media: vals.photos.map(() => ({ MediaCategory: "Photo" })),
LivingArea: vals.LivingArea, YearBuilt: vals.YearBuilt, LotSizeAcres: vals.LotSizeAcres,
ListOfficeName: vals.ListOfficeName, ListAgentFullName: vals.ListAgentFullName,
ListAgentDirectPhone: vals.ListAgentDirectPhone, ListAgentEmail: vals.ListAgentEmail,
};
const violations = C.getViolations(listing), tips = C.getTips(listing);
const sqft = C.verifySqft(`${vals.UnparsedAddress} ${vals.City} ${vals.StateOrProvince}`, vals.LivingArea);
const [certified, setCertified] = useState(false);
const highVios = violations.filter((v) => v.severity === "high").length;
const sqftBlocks = sqft.state === "done" && sqft.sources.length > 0 && sqft.score < C.SQFT_MIN && !certified;
const canPublish = highVios === 0 && !sqftBlocks && incompleteReq.length === 0;
// ---- section nav flags ----
const sectionMap = { "sec-details": "details", "sec-pricing": "pricing", "sec-desc": "desc", "sec-photos": "photos", "sec-features": "features", "sec-agent": "agent" };
const flagFor = (secId) => {
const step = secId; const v = violations.filter((x) => x.step === step).length, t = tips.filter((x) => x.step === step).length;
const missing = F.bySection(sectionMap[secId] || "").filter((f) => f.required && visibleField(f) && isEmpty(f)).length;
return { v, t, missing };
};
const [active, setActive] = useState("sec-details");
const jump = (id) => { setActive(id); const el = document.getElementById(id); if (!el) return; let sc = el.parentElement; while (sc && sc.scrollHeight <= sc.clientHeight) sc = sc.parentElement; if (sc) sc.scrollTo({ top: sc.scrollTop + el.getBoundingClientRect().top - sc.getBoundingClientRect().top - 16, behavior: "smooth" }); };
// ---- conflict banner ----
const [conflict, setConflict] = useState(true);
const secDefs = [
{ id: "sec-details", sec: "details" }, { id: "sec-pricing", sec: "pricing" }, { id: "sec-desc", sec: "desc" },
{ id: "sec-photos", sec: "photos" }, { id: "sec-features", sec: "features" }, { id: "sec-agent", sec: "agent" },
];
const showField = (f) => {
if (!visibleField(f)) return false;
if (filter === "required") return f.required;
if (filter === "incomplete") return f.required && isEmpty(f);
return true;
};
return (
{/* ===== sticky header ===== */}
{vals.UnparsedAddress || "New listing"}
setShowStatus(true)} />
Saved 3s ago
·
{vals.City}, {vals.StateOrProvince} {vals.PostalCode}
·
{F.tenant.short} tenant
{/* listing-class segmented control + field filter toggle + live counts */}
Listing type
{F.listingClasses.map((c) => (
))}
{[["all", "All fields"], ["required", `Required · ${requiredFields.length}`], ["incomplete", `Incomplete · ${incompleteReq.length}`]].map(([k, lbl]) => (
))}
{incompleteReq.length} to go before Active
{hiddenForClass.length > 0 && (
f.label).join(", ")} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: "#6b706a", background: "#eef3fb", borderRadius: 999, padding: "4px 11px" }}>
{hiddenForClass.length} {listingClass === "Lease" ? "sale-only" : "lease-only"} fields hidden
)}
{suggestCount > 0 && (
{suggestCount} autofilled fields to review
)}
{conflict && (
This listing changed while you were editing — 3 conflicting fields (List price, Status, Public remarks).
)}
{/* ===== section nav ===== */}
{secDefs.map((s) => {
const def = F.sections.find((x) => x.id === s.sec); const fl = flagFor(s.id);
return (
{ e.preventDefault(); jump(s.id); }}
style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 11px", borderRadius: 7, textDecoration: "none", fontSize: 13.5, fontWeight: active === s.id ? 600 : 400, color: active === s.id ? "#006747" : "#4a504a", background: active === s.id ? "#eef4f1" : "transparent" }}>
{def.label}
{fl.v > 0 && {fl.v}}
{fl.v === 0 && fl.missing > 0 && {fl.missing}}
{fl.v === 0 && fl.missing === 0 && fl.t > 0 && }
);
})}
{/* ===== form | rail ===== */}
{secDefs.map((s) => {
const def = F.sections.find((x) => x.id === s.sec);
const secFields = F.bySection(s.sec).filter(showField);
return (
{s.sec === "photos" ? (
go && go("media")} suggested={!!suggested.PoolFeatures} />
) : secFields.length === 0 ? (
No {filter === "incomplete" ? "incomplete required" : filter} fields in this section.
) : (
{secFields.map((f) => (
confirmField(f.key)} />
))}
{s.sec === "details" &&
}
);
})}
{/* ===== right rail ===== */}
jump(step)} />
set("PublicRemarks", text)} />
{showStatus &&
setShowStatus(false)} onPick={(k) => { setStatusKey(k); setShowStatus(false); }} />}
{displayLabel}
{f.required &&
*}
{suggested &&
}
{f.agentOnly &&
}
{locked &&
}
);
const control = () => {
if (disabled) return Not supported on {f.backendUnsupported}
;
switch (f.type) {
case "textarea": {
const cnt = (v || "").length;
return (