[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_114":115,"_116":117},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","the_haven","name","haven-housing-directory","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":63,"_64":34,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/the_haven/haven-housing-directory/code/frontend/components/App.tsx","extension","id","a9fed38c-66d9-47eb-b622-85daf04cbd25","App.tsx","fileId","019f4d88-ebd3-7218-9091-fa024ee09187","parentId","019f4d88-ebd3-7218-9092-021606bdd3ce","branchId","cb93a182-7d33-477a-951e-56f9a7b9bf82","branchVersion",128,"latest",true,"createdAt",["D",1789318325275],"version",41,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { emptyListing, AREAS, HOUSING_TYPES, locationList, type DiscoveredListing, type Listing, type ListingInput, type StaffUser } from \"../types.ts\";\nimport { ListingForm } from \"./ListingForm.tsx\";\nimport { ListingsTable } from \"./ListingsTable.tsx\";\nimport { AdminUsers } from \"./AdminUsers.tsx\";\nimport { StatsPanel } from \"./StatsPanel.tsx\";\n\nconst RANK: Record = { viewer: 1, editor: 2, admin: 3 };\n\nexport function App() {\n const [listings, setListings] = useState([]);\n const [loading, setLoading] = useState(true);\n const [query, setQuery] = useState(\"\");\n const [area, setArea] = useState(\"\");\n const [housing, setHousing] = useState(\"\");\n const [sortKey, setSortKey] = useState<\"created_at\" | \"name\" | \"type\" | \"location\">(\"type\");\n const [sortDir, setSortDir] = useState<\"asc\" | \"desc\">(\"asc\");\n const [token, setToken] = useState(localStorage.getItem(\"staffToken\") ?? \"\");\n const [user, setUser] = useState(null);\n const [editing, setEditing] = useState(null);\n const [showAdmin, setShowAdmin] = useState(false);\n const [showForgot, setShowForgot] = useState(false);\n const [showSignIn, setShowSignIn] = useState(false);\n const [showStats, setShowStats] = useState(false);\n const [areaResults, setAreaResults] = useState(null);\n const [searching, setSearching] = useState(false);\n const [added, setAdded] = useState>(new Set());\n\n const staff = !!user;\n const canEdit = staff && RANK[user.role] >= RANK.editor;\n\n // Restore session\n useEffect(() => {\n if (!token) { setLoading(false); return; }\n fetch(\"/api/me\", { headers: { authorization: `Bearer ${token}` } })\n .then((r) => r.json())\n .then((d) => {\n if (d.user) setUser(d.user);\n else { localStorage.removeItem(\"staffToken\"); setToken(\"\"); }\n })\n .finally(() => setLoading(false));\n }, []);\n\n async function refresh() {\n const res = await fetch(\"/api/listings\", staff ? { headers: { authorization: `Bearer ${token}` } } : undefined);\n setListings(await res.json());\n setLoading(false);\n }\n useEffect(() => {\n refresh();\n }, [token]);\n\n const filtered = useMemo(() => {\n const q = query.trim().toLowerCase();\n const result = listings.filter((l) => {\n if (housing && l.type !== housing) return false;\n if (area && !locationList(l.location).includes(area)) return false;\n if (!q) return true;\n return [l.name, l.type, l.location, l.phone, l.contact_name, l.notes, l.website,\n l.staff_notes, l.unsuitable_notes, l.date_validated, l.validated_by]\n .join(\" \")\n .toLowerCase()\n .includes(q);\n });\n const TYPE_RANK: Record = {\n \"rental property\": 1,\n \"rental agency\": 2,\n \"support services\": 3,\n \"private landlord\": 4,\n \"senior living\": 5,\n };\n const dir = sortDir === \"asc\" ? 1 : -1;\n return result.sort((a, b) => {\n let av = (a[sortKey] || \"\").toString().toLowerCase();\n let bv = (b[sortKey] || \"\").toString().toLowerCase();\n if (sortKey === \"type\") {\n const ar = TYPE_RANK[av] ?? 99;\n const br = TYPE_RANK[bv] ?? 99;\n if (ar !== br) return (ar - br) * dir;\n // Same type group: sort alphabetically by name\n av = (a.name || \"\").toString().toLowerCase();\n bv = (b.name || \"\").toString().toLowerCase();\n }\n if (av < bv) return -1 * dir;\n if (av > bv) return 1 * dir;\n return 0;\n });\n }, [listings, query, area, housing, sortKey, sortDir]);\n\n function onSort(key: \"created_at\" | \"name\" | \"type\" | \"location\") {\n if (sortKey === key) {\n setSortDir((d) => d === \"asc\" ? \"desc\" : \"asc\");\n } else {\n setSortKey(key);\n setSortDir(key === \"created_at\" ? \"desc\" : \"asc\");\n }\n }\n\n async function exportCsv() {\n const res = await fetch(\"/api/listings/export\", { headers: { authorization: `Bearer ${token}` } });\n if (!res.ok) {\n alert(`Export failed (${res.status}). If you were signed in a while ago, sign in again.`);\n return;\n }\n const blob = await res.blob();\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `housing-directory-${new Date().toISOString().slice(0, 10)}.csv`;\n a.click();\n URL.revokeObjectURL(url);\n }\n\n async function signIn(email: string, password: string): Promise {\n const res = await fetch(\"/api/login\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ email, password }),\n });\n const data = await res.json();\n if (!res.ok) return data.error ?? \"Sign in failed\";\n localStorage.setItem(\"staffToken\", data.token);\n setToken(data.token);\n setUser(data.user);\n setShowForgot(false);\n return null;\n }\n\n async function signOut() {\n await fetch(\"/api/logout\", { method: \"POST\", headers: { authorization: `Bearer ${token}` } });\n localStorage.removeItem(\"staffToken\");\n setToken(\"\");\n setUser(null);\n setShowAdmin(false);\n setEditing(null);\n }\n\n async function apiWrite(method: string, path: string, body?: any) {\n const res = await fetch(path, {\n method,\n headers: { authorization: `Bearer ${token}`, \"content-type\": \"application/json\" },\n body: body ? JSON.stringify(body) : undefined,\n });\n if (!res.ok) {\n const data = await res.json().catch(() => ({}));\n alert(`Action failed: ${data.error ?? res.status}. If you were signed in a while ago, sign in again.`);\n return false;\n }\n await refresh();\n return true;\n }\n\n async function save(input: ListingInput) {\n const ok = editing === \"new\"\n ? await apiWrite(\"POST\", \"/api/listings\", input)\n : await apiWrite(\"PUT\", `/api/listings/${(editing as Listing).id}`, input);\n if (ok) setEditing(null);\n }\n\n async function remove(l: Listing) {\n if (!confirm(`Delete \"${l.name || l.phone}\"?`)) return;\n await apiWrite(\"DELETE\", `/api/listings/${l.id}`);\n }\n\n async function flagUnsuitable(l: Listing) {\n const note = prompt(`Flag \"${l.name || l.phone}\" as unsuitable.\\nExplain the issue (required, staff-only note):`);\n if (note === null) return;\n if (!note.trim()) { alert(\"A note explaining the issue is required.\"); return; }\n await apiWrite(\"POST\", `/api/listings/${l.id}/flag-unsuitable`, { note });\n }\n\n async function searchArea() {\n if (!area) return;\n setSearching(true);\n try {\n const res = await fetch(\"/api/discover-area\", {\n method: \"POST\",\n headers: { authorization: `Bearer ${token}`, \"content-type\": \"application/json\" },\n body: JSON.stringify({ area }),\n });\n if (!res.ok) {\n alert(`Area search failed (${res.status}).`);\n return;\n }\n const data = await res.json();\n setAdded(new Set());\n setAreaResults(data.results);\n if (data.results.length === 0) {\n alert(`No new listings found for ${area} — everything found is already in the directory.`);\n }\n } finally {\n setSearching(false);\n }\n }\n\n async function addDiscovered(d: DiscoveredListing) {\n const dateStr = new Date().toISOString().slice(0, 10);\n const ok = await apiWrite(\"POST\", \"/api/listings\", {\n ...emptyListing,\n location: AREAS.includes(d.location) ? d.location : area,\n name: d.name,\n phone: d.phone || \"\",\n website: d.website || \"\",\n notes: d.notes\n ? `${d.notes} — AI-discovered ${dateStr}, verify contact info`\n : `AI-discovered ${dateStr}, verify contact info`,\n });\n if (ok) setAdded((s) => new Set(s).add(d.name));\n }\n\n async function markVerified(l: Listing) {\n if (!l.website) {\n const open = confirm(\"This listing has no website, so it can't be auto-checked. Verify it manually, then press OK to stamp today's date as verified.\");\n if (open) {\n const today = new Date().toLocaleDateString(\"en-US\");\n await apiWrite(\"PUT\", `/api/listings/${l.id}`, { ...l, date_validated: today, validated_by: user?.first_name || user?.email || \"staff\" });\n }\n return;\n }\n setLoading(true);\n try {\n const res = await fetch(`/api/listings/${l.id}/auto-verify`, {\n method: \"POST\",\n headers: { authorization: `Bearer ${token}` },\n });\n if (!res.ok) {\n alert(`Auto-check failed to run (${res.status}).`);\n return;\n }\n const result = await res.json();\n let msg = result.verified\n ? `✓ Auto-check passed: ${result.reason}`\n : `✗ Auto-check failed: ${result.reason}`;\n if (result.foundPhone) msg += `\\n\\nPhone \"${result.phone}\" was added from the website.`;\n msg += result.isRentalSite\n ? \"\\n\\n✓ Site looks like a rental/property site\"\n : \"\\n\\n⚠ Site may NOT be a rental/property site\";\n if (result.fmrReferences?.length) {\n msg += `\\n\\n⚠ Site references Fair Market Rent / HUD: ${result.fmrReferences.join(\", \")} (noted on listing)`;\n }\n if (result.verified) {\n alert(msg);\n } else {\n const open = confirm(msg + \"\\n\\nVerify manually. Open the website now?\");\n if (open) window.open(l.website, \"_blank\", \"noopener\");\n }\n } finally {\n setLoading(false);\n await refresh();\n }\n }\n\n // Password reset landing (staff clicks email link → /?reset=TOKEN)\n const params = new URLSearchParams(window.location.search);\n const resetToken = params.get(\"reset\");\n\n return (\n

The Haven — Housing Directory

\n Rental properties, agencies, private landlords, transitional & assisted living — maintained by{\" \"}\n The Haven.\n

\n\n {resetToken && (\n \n )}\n\n {showForgot && (\n setShowForgot(false)} />\n )}\n\n

\n setQuery(e.target.value)}\n />\n { setHousing(e.target.value); setAreaResults(null); }}\n >\n \n {HOUSING_TYPES\n .filter((h) => staff || h !== \"Private Landlord\")\n .map((h) => )}\n \n { setArea(e.target.value); setAreaResults(null); }}\n >\n \n {AREAS.map((a) => )}\n \n {canEdit && area && (\n \n {searching ? `Searching ${area}…` : `🔍 Search ${area}`}\n \n )}\n {staff && (\n \n Export to Excel\n \n )}\n {filtered.length} of {listings.length} listings\n \n {staff\n ? (\n <>\n \n {user.first_name || user.email} ({user.role})\n \n {user.role === \"admin\" && (\n \n )}\n {canEdit && (\n \n )}\n setShowStats((v) => !v)}\n className=\"border border-gray-300 rounded px-3 py-1.5 text-sm\"\n title=\"Views of the directory, public vs staff\"\n >\n 📊 Site activity\n \n \n 📖 Staff guide\n \n \n \n )\n : (\n <>\n \n \n )}\n

\n\n {!staff && showSignIn && (\n { setShowSignIn(false); setShowForgot(true); }}\n />\n )}\n\n {!staff && showSignIn && (\n \n )}\n\n {staff && showAdmin && user.role === \"admin\" && (\n \n )}\n\n {staff && showStats && (\n setShowStats(false)} />\n )}\n\n {areaResults !== null && (\n

\n AI search results: {area}{\" \"}\n ({areaResults.length} found)\n

\n \n

\n {areaResults.length === 0 && (\n

\n No new listings found — everything in this area may already be in the directory.\n

\n )}\n {areaResults.map((d) => {\n const isAdded = added.has(d.name);\n return (\n

\n {d.name} ({d.location})\n

{d.notes || \"No description\"}

\n {d.phone &&

{d.phone}

}\n

\n {d.website && (\n \n visit site\n \n )}\n addDiscovered(d)}\n disabled={isAdded}\n className={isAdded ? \"text-gray-400\" : \"text-green-700 hover:underline\"}\n >\n {isAdded ? \"added ✓\" : \"+ add\"}\n \n

\n );\n })}\n

\n )}\n\n {editing && (\n setEditing(null)}\n />\n )}\n\n {loading ?

Loading…

: (\n \n )}\n\n \n

\n );\n}\n\nfunction SignInForm({ onSignIn, onForgot }: { onSignIn: (e: string, p: string) => Promise; onForgot: () => void }) {\n const [email, setEmail] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n return (\n {\n e.preventDefault();\n const err = await onSignIn(email, password);\n if (err) setError(err);\n }}\n >\n

Staff sign in

\n setEmail(e.target.value)} />\n setPassword(e.target.value)} />\n {error &&

{error}

}\n

\n \n \n

\n \n );\n}\n\n// Exported so App can render it in place of the sign-in link\nexport function SignInPanel({ onSignIn }: { onSignIn: (e: string, p: string) => Promise }) {\n return null;\n}\n\nfunction ForgotForm({ onClose }: { onClose: () => void }) {\n const [email, setEmail] = useState(\"\");\n const [sent, setSent] = useState(false);\n return (\n

Reset your password

\n {sent ? (\n

If that email is registered, a reset link has been sent. Check your inbox.

\n ) : (\n <>\n setEmail(e.target.value)} />\n {\n await fetch(\"/api/forgot-password\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ email }),\n });\n setSent(true);\n }}\n >\n Send reset link\n \n \n )}\n \n

\n );\n}\n\nfunction ResetForm({ token }: { token: string }) {\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [done, setDone] = useState(false);\n return (\n

Choose a new password

At least 12 characters with upper & lower case letters and a special character.

\n {done ? (\n

Password updated — you can sign in now.

\n ) : (\n <>\n setPassword(e.target.value)} />\n {error &&

{error}

}\n {\n const res = await fetch(\"/api/reset-password\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ token, password }),\n });\n const data = await res.json();\n if (!res.ok) setError(data.error ?? \"Failed\");\n else setDone(true);\n }}\n >\n Update password\n \n \n )}\n

\n );\n}\n\nfunction BootstrapForm() {\n const [empty, setEmpty] = useState(null);\n const [email, setEmail] = useState(\"\");\n const [first, setFirst] = useState(\"\");\n const [last, setLast] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [msg, setMsg] = useState(\"\");\n\n useEffect(() => {\n fetch(\"/api/needs-bootstrap\")\n .then((r) => r.json())\n .then((d) => setEmpty(!!d.empty))\n .catch(() => setEmpty(false));\n }, []);\n\n if (empty === null || !empty) return null;\n\n return (\n

First-time setup

\n No users exist yet. Create the first administrator account (requires a strong password: 12+ chars, upper & lower case, special character).\n

\n {msg ? (\n

{msg}

\n ) : (\n <>\n setEmail(e.target.value)} />\n

\n setFirst(e.target.value)} />\n setLast(e.target.value)} />\n

\n setPassword(e.target.value)} />\n {\n const res = await fetch(\"/api/bootstrap-admin\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ email, first_name: first, last_name: last, password }),\n });\n const data = await res.json();\n if (!res.ok) setMsg(data.error ?? \"Failed\");\n else {\n setMsg(\"Admin created — you can sign in now.\");\n setEmpty(false);\n }\n }}\n >\n Create admin\n \n {msg &&

{msg}

}\n \n )}\n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","6d79585e-4f87-4a0f-9f9e-e0782f6ee9c5",["D",1783712246617],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Searchable rental directory for The Haven (Charlottesville)","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789556399&sig=39cf692678889e4858e1d3f239cccdbb768d0b4bdeeecb6f122e7581a8e69c0b","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019f4d88-ebd3-7218-9092-185c08774ad1","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019f4d98-342f-73e3-90b3-c7f210ff5067","tursoName","6d79585e4f874a0f9f9ee0782f6ee9c5","tursoHostname","6d79585e4f874a0f9f9ee0782f6ee9c5-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789525245864],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_113":-5},"org",{"_9":10,"_107":108,"_109":-5,"_60":-5,"_110":111,"_112":34},"branch",{"_37":32,"_11":94,"_22":30,"_95":49,"_96":97,"_98":99,"_100":54,"_101":102,"_103":104,"_105":12,"_106":10},"isOwned","main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","displayName","The Haven","avatar","tier","business","canRestrictVals","profileImageUrl","ctx",{"_87":-5,"_147":148,"_149":150,"_151":152,"_153":44,"_154":44,"_155":44,"_156":34,"_157":-5,"_158":-7,"_159":-7,"_160":68,"_161":44,"_162":44,"_163":-5,"_164":44,"_165":44,"_166":44,"_167":-5},"ENV",{"_118":119,"_120":121,"_122":94,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142,"_143":144,"_145":146},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]