setFilters({ ...filters, status: "all" })}>All {total}
setFilters({ ...filters, status: "available" })}>Available
setFilters({ ...filters, status: "leased" })}>Leased
{count} shown
setFilters({ ...filters, minArea: lo, maxArea: hi >= areaCap ? null : hi })} />
setFilters({ ...filters, minPrice: lo, maxPrice: hi >= priceCap ? null : hi })}
money />
);
}
function RangeRow({ label, unit, min, max, step, lo, hi, onChange, money }) {
const display = (v) => money ? "$" + Math.round(v).toLocaleString("en-AU") : v.toLocaleString("en-AU") + (unit ? " " + unit : "");
const loPct = ((lo - min) / (max - min)) * 100;
const hiPct = ((hi - min) / (max - min)) * 100;
return (
{label}
{display(lo)} — {display(hi)}
);
}
// ---------- Photo Gallery --------------------------------------------------
function PhotoGallery({ tenancyId, photos, onPhotosChange, adminUnlocked }) {
const fileRef = useRef(null);
const [lightbox, setLightbox] = useState(null);
const [uploading, setUploading] = useState(false);
const [dragOver, setDragOver] = useState(false);
const list = photos || [];
// Gallery keyboard nav (← → to move, Esc to close)
useEffect(() => {
if (lightbox == null) return;
function onKey(e) {
if (e.key === "Escape") setLightbox(null);
else if (e.key === "ArrowRight") setLightbox((i) => (i + 1) % list.length);
else if (e.key === "ArrowLeft") setLightbox((i) => (i - 1 + list.length) % list.length);
}
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [lightbox, list.length]);
function pickFile() { fileRef.current?.click(); }
async function uploadFiles(files) {
if (!files || files.length === 0) return;
const remaining = Math.max(0, 4 - list.length);
if (remaining === 0) { alert("This tenancy already has 4 photos. Remove one first."); return; }
const accepted = Array.from(files)
.filter((f) => f.type.startsWith("image/"))
.slice(0, remaining);
if (accepted.length === 0) { alert("Please drop image files."); return; }
setUploading(true);
try {
const next = [...list];
for (const file of accepted) {
if (file.size > 10 * 1024 * 1024 && !confirm(`"${file.name}" is over 10 MB. Continue?`)) continue;
const url = await window.FOUNDRY_BACKEND.uploadPhoto(tenancyId, file);
next.push(url);
}
onPhotosChange(next.slice(0, 4));
} catch (err) {
alert("Upload failed: " + (err.message || err));
} finally {
setUploading(false);
}
}
async function onFile(e) {
await uploadFiles(e.target.files);
e.target.value = "";
}
function onDragOver(e) {
if (!adminUnlocked || uploading || list.length >= 4) return;
e.preventDefault();
e.dataTransfer.dropEffect = "copy";
setDragOver(true);
}
function onDragLeave(e) {
// Only clear when the drag actually leaves the gallery, not when it
// crosses over a child element.
if (e.currentTarget.contains(e.relatedTarget)) return;
setDragOver(false);
}
async function onDrop(e) {
if (!adminUnlocked || uploading) return;
e.preventDefault();
setDragOver(false);
await uploadFiles(e.dataTransfer.files);
}
async function removePhoto(idx) {
const removed = list[idx];
const next = list.filter((_, i) => i !== idx);
onPhotosChange(next);
// Best-effort delete from Storage; ignore failures (URL still works on cache)
try { await window.FOUNDRY_BACKEND.deletePhoto(removed); } catch (e) {}
}
if (list.length === 0 && !adminUnlocked) return null;
const canAdd = adminUnlocked && list.length < 4 && !uploading;
const dropHandlers = adminUnlocked
? { onDragOver, onDragLeave, onDrop }
: {};
return (
Photos {list.length > 1 && {list.length} }
{adminUnlocked && (
{uploading ? "Uploading…" : "+ Add"}
)}
{list.length > 0 ? (
{list.map((src, i) => (
setLightbox(i)}>
{adminUnlocked && (
{ e.stopPropagation(); removePhoto(i); }} title="Remove photo">×
)}
))}
) : (
canAdd && (
)
)}
{lightbox != null && list[lightbox] && (
setLightbox(null)}>
{ e.stopPropagation(); setLightbox(null); }}>
{list.length > 1 && (
{ e.stopPropagation(); setLightbox((i) => (i - 1 + list.length) % list.length); }} title="Previous (←)">‹
)}
e.stopPropagation()}>
{list.length > 1 && (
{ e.stopPropagation(); setLightbox((i) => (i + 1) % list.length); }} title="Next (→)">›
)}
{list.length > 1 && (
e.stopPropagation()}>
{lightbox + 1} / {list.length}
{list.map((_, i) => (
setLightbox(i)} title={`Photo ${i + 1}`} />
))}
)}
)}
);
}
// ---------- Tenancy Description + bullets --------------------------------
function TenancyDescription({ tenancy: t, adminUnlocked, onEditField }) {
const bullets = Array.isArray(t.bullets) ? t.bullets : [];
const [draftBullet, setDraftBullet] = useState("");
function setDescription(v) { onEditField(t.id, "description", v); }
function setBullets(next) { onEditField(t.id, "bullets", next); }
function addBullet() {
const v = draftBullet.trim();
if (!v) return;
setBullets([...bullets, v]);
setDraftBullet("");
}
function editBullet(i, v) {
const next = bullets.slice();
next[i] = v;
setBullets(next);
}
function removeBullet(i) {
setBullets(bullets.filter((_, idx) => idx !== i));
}
const hasContent = t.description || bullets.length > 0;
if (!hasContent && !adminUnlocked) return null;
return (
