/* ===================================================================== ADMIN — dashboard, listings CRUD, media & branding Writes to the shared store → reflects live on the public site. ===================================================================== */ function UploadField({ label, dataUrl, onChange, h = 140, accept = "image/*", hint }) { const ref = useRef(null); const pick = (e) => { const f = e.target.files && e.target.files[0]; if (!f) return; const r = new FileReader(); r.onload = () => onChange(r.result); r.readAsDataURL(f); }; return (

{label && {label}}

{dataUrl ? (

) : ( )}

); } function LocationPicker({ lat, lng, onChange }) { const ref = useRef(null), map = useRef(null), marker = useRef(null); useEffect(() => { if (!window.L || !ref.current || map.current) return; const m = window.L.map(ref.current, { zoomControl: true, attributionControl: false, scrollWheelZoom: false }); m.setView([lat || 39.7684, lng || -86.1581], 11); window.L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", { subdomains: "abcd" }).addTo(m); const ic = window.L.divIcon({ html: '

', className: "", iconSize: [30, 30], iconAnchor: [15, 28] }); marker.current = window.L.marker([lat || 39.7684, lng || -86.1581], { icon: ic, draggable: true }).addTo(m); marker.current.on("dragend", (e) => { const p = e.target.getLatLng(); onChange(p.lat, p.lng); }); m.on("click", (e) => { marker.current.setLatLng(e.latlng); onChange(e.latlng.lat, e.latlng.lng); }); map.current = m; return () => { m.remove(); map.current = null; }; }, []); return (

Location · click or drag the pin

{!window.L &&

}

Latitude onChange(parseFloat(e.target.value) || 0, lng)} />

Longitude onChange(lat, parseFloat(e.target.value) || 0)} />

); } function AdminShell({ section, children }) { useStore(); const status = window.GLR.apiStatus(); const nav = [["Dashboard", "/admin", "dash"], ["Listings", "/admin/listings", "list"], ["Contacts", "/admin/contacts", "users"], ["Messages", "/admin/messages", "phone"], ["Analytics", "/admin/analytics", "dash"], ["Inbox", "/admin/inbox", "mail"], ["Users", "/admin/users", "shield"], ["Security", "/admin/security", "lock"], ["Requests", "/admin/requests", "shield"], ["Q&A", "/admin/qa", "msg"], ["Content", "/admin/content", "doc"], ["Media", "/admin/media", "image"], ["Branding", "/admin/branding", "settings"], ["Audit", "/admin/audit", "clock"]]; const mobile = useIsMobile(900); if (!status.admin) return ; if (status.mfa && status.mfa.requiredNow && section !== "Security") return ; if (mobile) { return (

navigate("/")} />

{nav.map(([l, p, ic]) => ( ))}

{children}

); } return (

{children}

); } function AdminLogin() { const [email, setEmail] = useState("admin@greatlkrealty.com"); const [password, setPassword] = useState(""); const [mfaCode, setMfaCode] = useState(""); const [showMfa, setShowMfa] = useState(false); const [busy, setBusy] = useState(false); const [err, setErr] = useState(""); const submit = () => { if (!email || !password) return; setBusy(true); setErr(""); window.GLR.adminLogin(email, password, mfaCode) .then(() => showToast("Admin signed in")) .catch((e) => { if ((e.message || "").toLowerCase().includes("mfa")) setShowMfa(true); setErr(e.message || "Login failed"); }) .finally(() => setBusy(false)); }; return (

navigate("/")} />

Admin console

Broker login

Email setEmail(e.target.value)} />

Password setPassword(e.target.value)} onKeyDown={(e) => e.key === "Enter" && submit()} />

{showMfa &&

MFA code setMfaCode(e.target.value)} onKeyDown={(e) => e.key === "Enter" && submit()} />

} {err &&

{err}

}

); } function AdminDashboard() { const s = useStore(); const G = window.GLR; const active = s.listings.filter((l) => l.status !== "closed"); const gated = s.listings.filter((l) => l.gated); const totalSF = s.listings.reduce((a, l) => a + (l.sf || 0), 0); const pendingReq = s.requests.filter((r) => r.status === "pending").length; const openQA = s.qa.filter((q) => !q.a).length; return (

Console

Dashboard

{[["Active listings", active.length, "building"], ["Confidential / NDA", gated.length, "lock"], ["On-market SF", (totalSF / 1000).toFixed(0) + "k", "ruler"], ["Closed deals", s.closed.length, "check"]].map((x, i) => (

{x[0]}

{x[1]}

))}

{(pendingReq > 0 || openQA > 0) && (

{pendingReq} access request{pendingReq === 1 ? "" : "s"} awaiting review{openQA > 0 ? " · " + openQA + " unanswered question" + (openQA === 1 ? "" : "s") : ""}

Parties are waiting on the data room and the deal team.

{pendingReq > 0 && } {openQA > 0 && }

)}

Recent listings

{s.listings.slice(0, 6).map((l) => ( navigate("/admin/listings/" + l.id)}> ))}

Property	Type	Status	Size
{l.address}	{l.type}		{G.fmtSF(l.sf)}

Quick actions

Changes here publish instantly to the live site.

); } function AdminListings() { const s = useStore(); const G = window.GLR; return (

Console

Listings

{s.listings.map((l) => ( ))}

Property	Submarket	Type	Deal	Size	Price / Rate	Status	NDA
{l.address}	{l.submarket}	{l.type}	{l.deal}	{G.fmtSF(l.sf)}	{l.price \|\| l.rate}		{l.gated ? : —}

); } const BLANK = { id: "", slug: "", address: "", city: "Indianapolis", submarket: "CBD", type: "Office", deal: "Lease", sf: 0, rate: "", price: "", cap: "", cls: "B", status: "available", year: 2020, lat: 39.7684, lng: -86.1581, gated: false, featured: false, photo: null, tagline: "", highlights: [], specs: {} }; function AdminListingEdit({ id }) { const s = useStore(); const isNew = id === "new"; const existing = s.listings.find((l) => l.id === id); const [f, setF] = useState(() => existing ? { ...BLANK, ...existing } : { ...BLANK, id: "p" + Date.now() }); const upd = (k, v) => setF((p) => ({ ...p, [k]: v })); const slug = f.slug || f.address.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, ""); const save = () => { const out = { ...f, slug, sf: Number(f.sf) || 0, highlights: f.highlights.length ? f.highlights : ["Well-located asset", "Quality construction", "Strong access", "Professional management"], specs: Object.keys(f.specs).length ? f.specs : { "Size": (Number(f.sf) || 0).toLocaleString() + " SF", "Type": f.type, "Class": f.cls, "Deal": f.deal, "Submarket": f.submarket, "Year": f.year } }; window.GLR.upsertListing(out); showToast(isNew ? "Listing published" : "Listing updated"); navigate("/admin/listings"); }; return (

{isNew ? "New listing" : f.address}

{isNew ? "Add listing" : "Edit listing"}

{!isNew && }{!isNew && }

Property details

Address upd("address", e.target.value)} placeholder="120 Monument Circle" />

City upd("city", e.target.value)} />

Submarket

Tagline upd("tagline", e.target.value)} placeholder="One-line positioning for the listing" />

Type

Deal

Class

Size (SF) upd("sf", e.target.value)} />

{f.deal === "Sale" ? "Price" : "Rate"} upd(f.deal === "Sale" ? "price" : "rate", e.target.value)} placeholder={f.deal === "Sale" ? "$9,100,000" : "$24.50 NNN"} />

Cap rate upd("cap", e.target.value)} placeholder="6.8%" />

Status

Year built upd("year", e.target.value)} />

SEO & routing

Clean URL slug upd("slug", e.target.value)} />

SEO title upd("seoTitle", e.target.value)} placeholder={f.address ? f.address + " · Great Lakes Realty" : ""} />

SEO description

upd("seoDescription", e.target.value)} style={{ minHeight: 80 }} /></div>
              <div className="field"><label>Inquiry routing email</label><input className="input" value={f.inquiryEmail || ""} onChange={(e) => upd("inquiryEmail", e.target.value)} placeholder="deals@greatlkrealty.com" /></div>
              <Toggle label="Published to public site" sub="Unpublished listings stay out of sitemap and public API" on={f.published !== false} onClick={() => upd("published", f.published === false)} />
            </div>
          </div>
          <div className="card pad24"><LocationPicker lat={f.lat} lng={f.lng} onChange={(la, ln) => setF((p) => ({ ...p, lat: la, lng: ln }))} /></div>
          <div className="card pad24">
            <h3 className="h3" style={{ marginBottom: 4 }}>Highlights</h3>
            <p className="xsmall muted" style={{ marginBottom: 12 }}>Bullet points shown on the listing's Overview tab.</p>
            <ListEditor items={f.highlights || []} onChange={(v) => upd("highlights", v)} placeholder="e.g. 32′ clear height" />
            <hr className="divider" style={{ margin: "20px 0" }} />
            <h3 className="h3" style={{ marginBottom: 4 }}>Specifications</h3>
            <p className="xsmall muted" style={{ marginBottom: 12 }}>Key facts shown in the listing's spec grid.</p>
            <KVEditor obj={f.specs || {}} onChange={(v) => upd("specs", v)} />
          </div>
        </div>

<div className="col gap20">
          <div className="card pad24">
            <h3 className="h3" style={{ marginBottom: 16 }}>Photos</h3>
            <div className="label" style={{ marginBottom: 8 }}>Cover photo</div>
            <UploadField dataUrl={f.photo} onChange={(d) => upd("photo", d)} hint="Shown on cards and as the hero" />
            <div className="label" style={{ margin: "18px 0 8px" }}>Gallery</div>
            <GalleryEditor photos={f.photos || []} onChange={(v) => upd("photos", v)} />
          </div>
          <div className="card pad24">
            <h3 className="h3" style={{ marginBottom: 16 }}>Visibility</h3>
            <Toggle label="Featured on homepage" sub="Show in the featured grid" on={f.featured} onClick={() => upd("featured", !f.featured)} />
            <hr className="divider" style={{ margin: "14px 0" }} />
            <Toggle label="Confidential (NDA gate)" sub="Hide financials & data room behind NDA" on={f.gated} onClick={() => upd("gated", !f.gated)} />
          </div>
          <div className="card pad24">
            <h3 className="h3" style={{ marginBottom: 8 }}>Preview</h3>
            <ListingCard l={{ ...f, slug, sf: Number(f.sf) || 0 }} />
          </div>
        </div>
      </div>
    </AdminShell>
  );
}

function ListEditor({ items, onChange, placeholder }) {
  return (
    <div className="col gap8">
      {items.map((it, i) => (
        <div key={i} className="row gap8 ac">
          <input className="input" value={it} onChange={(e) => onChange(items.map((x, j) => j === i ? e.target.value : x))} placeholder={placeholder} />
          <button className="btn ghost sm danger" onClick={() => onChange(items.filter((_, j) => j !== i))}><Icon name="trash" size={13} /></button>
        </div>
      ))}
      <button className="btn ghost sm" style={{ alignSelf: "flex-start" }} onClick={() => onChange([...items, ""])}><Icon name="plus" size={14} /> Add highlight</button>
    </div>
  );
}

function KVEditor({ obj, onChange }) {
  const entries = Object.entries(obj);
  return (
    <div className="col gap8">
      {entries.map(([k, v], i) => (
        <div key={i} className="row gap8 ac">
          <input className="input" style={{ flex: "0 0 42%" }} value={k} onChange={(e) => onChange(Object.fromEntries(entries.map((x, j) => j === i ? [e.target.value, x[1]] : x)))} placeholder="Label" />
          <input className="input" value={v} onChange={(e) => onChange(Object.fromEntries(entries.map((x, j) => j === i ? [x[0], e.target.value] : x)))} placeholder="Value" />
          <button className="btn ghost sm danger" onClick={() => onChange(Object.fromEntries(entries.filter((_, j) => j !== i)))}><Icon name="trash" size={13} /></button>
        </div>
      ))}
      <button className="btn ghost sm" style={{ alignSelf: "flex-start" }} onClick={() => onChange({ ...obj, ["Field " + (entries.length + 1)]: "" })}><Icon name="plus" size={14} /> Add field</button>
    </div>
  );
}

function Toggle({ label, sub, on, onClick }) {
  return (
    <div className="row jb ac" style={{ cursor: "pointer" }} onClick={onClick}>
      <div><div className="b6 small">{label}</div>{sub && <div className="xsmall muted">{sub}</div>}</div>
      <div style={{ width: 42, height: 24, borderRadius: 999, background: on ? "var(--navy)" : "var(--line-2)", position: "relative", transition: "background .16s", flex: "none" }}>
        <div style={{ position: "absolute", top: 2, left: on ? 20 : 2, width: 20, height: 20, borderRadius: "50%", background: "#fff", transition: "left .16s", boxShadow: "0 1px 2px rgba(0,0,0,0.2)" }} />
      </div>
    </div>
  );
}

function AdminAudit() {
  const s = useStore();
  return (
    <AdminShell section="Audit">
      <div className="eyebrow">Security</div>
      <h1 className="h1" style={{ marginTop: 6, marginBottom: 20 }}>Audit log</h1>
      <div className="card m-tablewrap">
        <table className="ledger">
          <thead><tr><th>When</th><th>Action</th><th>Actor</th><th>Listing</th><th>Entity</th></tr></thead>
          <tbody>
            {(s.audit || []).map((a) => (
              <tr key={a.id}>
                <td className="small muted">{new Date(a.createdAt).toLocaleString()}</td>
                <td><span className="tag outline">{a.action}</span></td>
                <td className="small">{a.actor ? a.actor.name : "System"}</td>
                <td className="small">{a.listing ? a.listing.address : "—"}</td>
                <td className="small muted">{a.entityType}{a.entityId ? " · " + a.entityId.slice(0, 8) : ""}</td>
              </tr>
            ))}
            {(!s.audit || s.audit.length === 0) && <tr><td colSpan="5" className="muted" style={{ textAlign: "center", padding: 28 }}>No audit events yet.</td></tr>}
          </tbody>
        </table>
      </div>
    </AdminShell>
  );
}

/* ===== Content: Categories + NDA templates ===== */
function CategoryRow({ kind, value, count }) {
  const [edit, setEdit] = useState(false);
  const [v, setV] = useState(value);
  return (
    <div className="row gap8 ac" style={{ padding: "8px 10px", border: "1px solid var(--line)", borderRadius: "var(--r)", background: "var(--paper)" }}>
      {edit
        ? <input className="input" style={{ height: 34 }} value={v} onChange={(e) => setV(e.target.value)} autoFocus />
        : <span className="b6 small" style={{ flex: 1 }}>{value}</span>}
      {!edit && <span className="xsmall muted">{count} in use</span>}
      {edit
        ? <React.Fragment><button className="btn sm" onClick={() => { window.GLR.renameCategory(kind, value, v); setEdit(false); }}><Icon name="check" size={14} /></button><button className="btn ghost sm" onClick={() => { setV(value); setEdit(false); }}>Cancel</button></React.Fragment>
        : <React.Fragment><button className="btn ghost sm" onClick={() => setEdit(true)}><Icon name="edit" size={13} /></button><button className="btn ghost sm danger" onClick={() => { if (count > 0 && !confirm(value + " is used by " + count + " listing(s). Remove anyway?")) return; window.GLR.removeCategory(kind, value); }}><Icon name="trash" size={13} /></button></React.Fragment>}
    </div>
  );
}

function AdminContent() {
  const [tab, setTab] = useState("categories");
  return (
    <AdminShell section="Content">
      <div className="eyebrow">Console</div>
      <h1 className="h1" style={{ marginTop: 6, marginBottom: 6 }}>Site content</h1>
      <p className="lede" style={{ marginBottom: 20 }}>Manage the building blocks behind your listings and the confidentiality agreement parties sign.</p>
      <div className="row gap8" style={{ marginBottom: 8 }}>
        <button className={"chip" + (tab === "categories" ? " on" : "")} onClick={() => setTab("categories")}>Categories</button>
        <button className={"chip" + (tab === "nda" ? " on" : "")} onClick={() => setTab("nda")}>NDA templates</button>
      </div>
      {tab === "categories" ? <CategoriesPanel /> : <NdaPanel />}
    </AdminShell>
  );
}

<div className="card" style={{ overflow: "hidden" }}>
          <div className="row jb ac" style={{ padding: "14px 18px", borderBottom: "1px solid var(--line)" }}>
            <h3 className="h3">{cur.folder || "—"}</h3>
            <div className="row gap8"><button className="btn ghost sm" onClick={addManual}><Icon name="plus" size={14} /> Add entry</button><button className="btn sm" onClick={() => fileRef.current.click()}><Icon name="upload" size={14} /> Upload files</button></div>
          </div>
          <table className="ledger">
            <thead><tr><th>Name</th><th>Scan</th><th>Type</th><th className="num">Size</th><th className="num">Updated</th><th></th></tr></thead>
            <tbody>
              {cur.files.map((f, k) => (
                <tr key={k}>
                  <td><div className="row gap10 ac"><Icon name={f.t === "XLSX" ? "grid" : "doc"} size={17} style={{ color: f.t === "XLSX" ? "var(--avail)" : "var(--navy)", flex: "none" }} /> <div><span className="b6">{f.n}</span>{f.scanResult && <div className="xsmall muted">{f.scanResult}</div>}</div></div></td>
                  <td><ScanTag status={f.scanStatus} /></td>
                  <td className="muted small">{f.t}</td><td className="num small tnum">{f.s}</td><td className="num small muted tnum">{f.d}</td>
                  <td className="num"><button className="btn ghost sm danger" onClick={() => removeFile(k)}><Icon name="trash" size={13} /></button></td>
                </tr>
              ))}
              {cur.files.length === 0 && <tr><td colSpan="6" className="muted" style={{ textAlign: "center", padding: 28 }}>No files in this folder yet.</td></tr>}
            </tbody>
          </table>
          <input ref={fileRef} type="file" multiple onChange={addFiles} style={{ display: "none" }} />
        </div>
      </div>
    </AdminShell>
  );
}

Object.assign(window, { AdminDashboard, AdminListings, AdminListingEdit, AdminLaunch, AdminContacts, AdminMessages, AdminAnalytics, AdminInbox, AdminUsers, AdminSecurity, AccountScreen, AdminMedia, AdminBranding, AdminRequests, AdminQA, AdminContent, AdminDataRoom, AdminAudit });