// Recursive MLS — Screen 7: Showings (scheduling + tours + feedback). // RECEIVED: requests on my listings — schedule with seller calendar sync, collect // buyer-agent feedback, share with seller, get AI selling tips. // SENT: tours I book for buyers — calendar-synced availability, route optimization, // per-stop walkthrough feedback, submit feedback to listing agents. function Showings({ go }) { const S = window.RC_SHOWINGS; const [side, setSide] = useState("received"); const [selId, setSelId] = useState("SR-3092"); const list = side === "received" ? S.received : S.sent; const sel = list.find((x) => x.id === selId) || list[0]; React.useEffect(() => { if (!list.find((x) => x.id === selId)) setSelId(list[0].id); }, [side]); const Pill = ({ map, k, sm }) => { const c = map[k] || { c: "#6b706a", b: "#f0efe9" }; return {k}; }; const counts = { received: S.received.filter((x) => x.status === "Requested").length, sent: S.sent.filter((x) => x.status === "Planning").length, }; return (

Showings

{counts.received} request{counts.received !== 1 ? "s" : ""} awaiting your response · {counts.sent} tour being planned

{/* LIST */}
{[["received", "Received", "on my listings"], ["sent", "Sent", "for my buyers"]].map(([k, lab, sub]) => ( ))}
{list.map((x) => { const on = x.id === sel.id; const title = side === "received" ? x.property : `${x.client}'s tour`; const subtitle = side === "received" ? `${x.buyerAgent.brokerage} · ${x.buyerName}` : `${x.stops.length} stops · ${x.date}`; return (
setSelId(x.id)} className="rc-row" style={{ display: "flex", gap: 11, padding: "13px 14px", cursor: "pointer", borderBottom: "1px solid #f6f5f0", background: on ? "#f3f6f4" : "transparent", borderLeft: on ? "2.5px solid #006747" : "2.5px solid transparent" }}> {side === "received" ?
:
{x.stops.length}
}
{title}
{subtitle}
{side === "received" ? (x.confirmedSlot || x.requested) : x.window}
); })}
{/* DETAIL */}
{side === "received" ? : }
); } // ============ shared: calendar sync + 7-day availability ============ function CalendarSync({ S, parties, labels, syncable }) { const provLogos = { google: "Google Calendar", o365: "Microsoft 365", ical: "Apple iCloud" }; const [synced, setSynced] = useState(() => { const o = {}; parties.forEach((p) => { o[p] = syncable[p] || null; }); return o; }); const firstWeekend = S.DAYS.findIndex((d) => d.weekend); const [day, setDay] = useState(firstWeekend < 0 ? 0 : firstWeekend); // default to the weekend — when most showings happen const free = S.mutualFreeDay(parties, day); const windows = S.weekWindows(parties); return (

Find a time that works

next 7 days · synced live
{/* parties + connect */}
{parties.map((p) => (
{labels[p][0]} {labels[p]} {synced[p] ? {provLogos[synced[p]]} : }
))}
{/* 7-day selector — weekends emphasized */}
{S.DAYS.map((d, i) => { const on = i === day; return ( ); })}
{S.DAYS[day].weekend &&
Weekend — the most popular showing window.
} {/* availability grid for selected day */}
{S.SLOTS.map((s, i) =>
{i % 2 === 0 ? S.fmtSlot(s) : ""}
)} {parties.map((p) => (
{labels[p].split(" ")[0]}
{S.SLOTS.map((s, i) => { const b = S.busyFor(p, day).includes(i); return
; })} ))}
All free
{free.map((f, i) =>
)}
{/* suggested windows across the week (weekends first) */}
When everyone's free this week
{windows.length ? windows.slice(0, 6).map((w, i) => { const d = S.DAYS[w.dayIdx]; return ( ); }) : No fully-mutual window — propose a time or adjust.}
); } // ============ RECEIVED detail ============ function ReceivedDetail({ r, S, go }) { const labels = { agent: "You (listing agent)", seller: r.seller.name + " (seller)" }; const [tab, setTab] = useState(r.status === "Completed" ? "feedback" : "schedule"); const tips = S.sellerTips(r.property); return (
{r.property}
{r.area} · ${(r.listPrice / 1000).toFixed(0)}K · {r.dom} days on market · {r.type}
{r.status}
{r.buyerAgent.name.split(" ").map((w) => w[0]).join("")}
{r.buyerAgent.name} · {r.buyerAgent.brokerage}
Showing buyer {r.buyerName} · {r.buyerAgent.phone}
{[["schedule", "Schedule"], ["feedback", "Feedback"], ["tips", "Selling tips"]].map(([id, lab]) => ( ))}
{tab === "schedule" && ( {r.status === "Confirmed" && (
Confirmed · {r.confirmedSlot}
Added to your calendar and {r.seller.name}'s. Buyer's agent notified.
)} {/* requested windows */} {r.proposed.length > 0 && r.status !== "Confirmed" && (
Buyer's agent proposed
{r.proposed.map((w, i) => (
{w.day}
{S.fmtSlot(w.start)}–{S.fmtSlot(w.end)}
))}
)}
)} {tab === "feedback" && (r.feedback ? : )} {tab === "tips" && (

Tips to get {r.property} sold

reCURSIVE AI

Synthesized from {S.listingContext[r.property] ? S.listingContext[r.property].showings : "recent"} showings of feedback and {r.dom} days on market vs. the area average.

{tips.map((t, i) => { const tone = { warn: { c: "#9a6a12", b: "#fbf2dc" }, ok: { c: "#1f8a5b", b: "#e8f4ee" }, info: { c: "#2a6f8a", b: "#e8f0f3" } }[t.tone]; return (
{t.title}
{t.body}
); })}
)}
); } // ============ SENT (tour) detail ============ function TourDetail({ t, S, go }) { const [stops, setStops] = useState(t.stops); const [optimized, setOptimized] = useState(t.routeOptimized); const [fbStop, setFbStop] = useState(null); const labels = { agent: "You", buyer: t.client, coBuyer: t.coClient || "Co-buyer" }; const parties = t.parties; const totalDrive = stops.reduce((s, x) => s + x.driveMin, 0); const dist = (a, b) => Math.hypot(a.coord[0] - b.coord[0], a.coord[1] - b.coord[1]); const optimize = () => { // nearest-neighbour from the first stop, recompute drive minutes const rest = stops.slice(1); const ordered = [stops[0]]; let cur = stops[0]; while (rest.length) { let bi = 0, bd = Infinity; rest.forEach((s, i) => { const d = dist(cur, s); if (d < bd) { bd = d; bi = i; } }); cur = rest.splice(bi, 1)[0]; ordered.push(cur); } // recompute times + drive from 1:00 PM let mins = 13 * 60; const out = ordered.map((s, i) => { const dm = i === 0 ? 0 : Math.max(5, Math.round(dist(ordered[i - 1], s) * 900)); mins += dm + (i === 0 ? 0 : 30); // 30 min per showing const hh = Math.floor(mins / 60), mm = mins % 60; const t12 = (hh > 12 ? hh - 12 : hh) + ":" + String(mm).padStart(2, "0") + " " + (hh >= 12 ? "PM" : "AM"); return { ...s, driveMin: dm, time: t12 }; }); setStops(out); setOptimized(true); }; const completed = t.status === "Completed"; const withFb = stops.filter((s) => s.feedback).length; return (

{t.client}'s tour

{t.status}
{t.date} · {t.window} · {stops.length} homes{t.coClient ? ` · with ${t.coClient}` : ""}
{fbStop !== null ? ( { setStops(stops.map((s, i) => i === fbStop ? { ...s, feedback: fb, status: "Completed" } : s)); setFbStop(null); }} onCancel={() => setFbStop(null)} /> ) : ( {/* route */}

Tour route

{totalDrive} min driving · {stops.length} stops
{/* stops */}
Stops {completed ? `· ${withFb}/${stops.length} with feedback` : ""}
{stops.map((s, i) => (
{i + 1} {s.time}
{s.property}
{s.area} · ${(s.price / 1000).toFixed(0)}K · {s.beds}bd · {s.listingAgent}
{s.status} {i > 0 && {s.driveMin} min} {s.feedback && ★ {s.feedback.rating}/5 · {s.feedback.interest}}
))}
{/* calendar sync to confirm window */} {!completed && }
{!completed ? : }
)}
); } // ============ route map (real map via Leaflet) ============ function RouteMap({ stops, S }) { const ref = React.useRef(null); const mapRef = React.useRef(null); const layersRef = React.useRef([]); React.useEffect(() => { if (!window.L || !ref.current) return; if (!mapRef.current) { mapRef.current = window.L.map(ref.current, { zoomControl: false, scrollWheelZoom: false, attributionControl: true }); window.L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", { maxZoom: 19, attribution: "© OpenStreetMap, © CARTO", }).addTo(mapRef.current); window.L.control.zoom({ position: "bottomright" }).addTo(mapRef.current); } const map = mapRef.current; layersRef.current.forEach((l) => map.removeLayer(l)); layersRef.current = []; const coords = stops.map((s) => s.coord); const line = window.L.polyline(coords, { color: "#006747", weight: 3, opacity: 0.85, dashArray: "7 7" }).addTo(map); layersRef.current.push(line); stops.forEach((s, i) => { const icon = window.L.divIcon({ className: "", html: `
${i + 1}
`, iconSize: [26, 26], iconAnchor: [13, 24], }); const m = window.L.marker(s.coord, { icon }).addTo(map); m.bindTooltip(`${i + 1}. ${s.property}`, { direction: "top", offset: [0, -22] }); layersRef.current.push(m); }); map.fitBounds(window.L.latLngBounds(coords).pad(0.3)); const t = setTimeout(() => map.invalidateSize(), 120); return () => clearTimeout(t); }, [stops]); React.useEffect(() => () => { if (mapRef.current) { mapRef.current.remove(); mapRef.current = null; } }, []); return (
Optimized for least driving
); } // ============ walkthrough feedback form (buyer, on-site) ============ function WalkthroughForm({ stop, client, onSave, onCancel }) { const init = stop.feedback || { rating: 0, interest: "Moderate", priceOpinion: "About right", liked: [], concerns: [], comments: "", wouldReturn: false }; const [rating, setRating] = useState(init.rating); const [interest, setInterest] = useState(init.interest); const [price, setPrice] = useState(init.priceOpinion); const [comments, setComments] = useState(init.comments); const [liked, setLiked] = useState(init.liked); const [concerns, setConcerns] = useState(init.concerns); const likeOpts = ["Layout", "Kitchen", "Natural light", "Outdoor space", "Location", "Finishes", "Views", "Storage"]; const concernOpts = ["Price", "Condition", "Noise", "Small bedrooms", "No parking", "Dated baths", "Layout", "HOA fees"]; const tog = (arr, set, v) => set(arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]); const Chip = ({ on, onClick, children, color }) => ( ); return (
{stop.property}
Walkthrough feedback · {client}
{[1, 2, 3, 4, 5].map((n) => )}
{["High", "Moderate", "Low"].map((o) => setInterest(o)} color="#006747">{o})}
{["Worth it", "About right", "Overpriced"].map((o) => setPrice(o)} color="#006747">{o})}
{likeOpts.map((o) => tog(liked, setLiked, o)} color="#006747">{o})}
{concernOpts.map((o) => tog(concerns, setConcerns, o)} color="#c0612f">{o})}