/* Willow Creek Portal — Admin & House Manager: approvals, houses, residents, payments, forms CMS, rates & site content.
role="admin" (full) or "manager" (house manager — minimum admin access: no forms builder, no rates/site content). */
const { PIcon: AIcon, PSection: ASection, KindBadge: AKindBadge, makeReceiptNo: aMakeReceiptNo, ReceiptModal: AReceiptModal } = window.WCPortal;
const { useState: adUseState } = React;
function AdminPortal({ store, setStore, onLogout, role = "admin" }) {
const [tab, setTab] = adUseState("approvals");
const isAdmin = role === "admin";
const navItems = [
["approvals", "inbox", "Approvals"],
["houses", "home", "Houses & beds"],
["residents", "users", "Residents"],
["payments", "receipt-text", "Payments"],
...(isAdmin ? [
["forms", "file-stack", "Forms builder"],
["cms", "panel-top", "Rates & site content"],
] : []),
];
const pending = store.applications.filter((a) => a.status === "pending").length;
return (
{tab === "approvals" && }
{tab === "houses" && }
{tab === "residents" && }
{tab === "payments" && }
{tab === "forms" && isAdmin && }
{tab === "cms" && isAdmin && }
);
}
/* ---------- Approvals ---------- */
function ApprovalsTab({ store, setStore }) {
const { Card, Button, Badge } = window.WillowCreekDesignSystem_90378c;
const published = store.forms.filter((f) => f.status === "published");
const act = (id, status) => setStore((s) => {
const app = s.applications.find((a) => a.id === id);
let residents = s.residents;
if (status === "approved" && app && !s.residents.some((r) => r.name === app.name)) {
residents = [...s.residents, { id: "r" + Date.now(), name: app.name, phone: app.phone || "—",
house: "Awaiting bed", phase: 1, status: "Onboarding", balance: s.cms.weeklyRate }];
}
return { ...s, residents, applications: s.applications.map((a) => a.id === id ? { ...a, status } : a) };
});
return (
<>
Applications & approvals
New intake applications from the website land here. Approving adds the person to Residents automatically.
{store.applications.map((a) => {
const signedCount = (store.signedForms[a.name] || []).length;
const allSigned = published.length > 0 && signedCount >= published.length;
return (
{a.name.split(" ").map((w) => w[0]).join("")}
{a.name}
{a.situation} · Submitted {a.submitted}
{a.status === "approved" && (
{allSigned ? "All forms signed" : `${signedCount}/${published.length} forms signed`}
)}
{a.status === "pending" ? (
) : (
{a.status === "approved" ? "Approved · in Residents" : "Declined"}
)}
);})}
Houses & bed allocation
Assign house managers, add beds, and allocate residents.
{store.houses.map((h) => {
const open = h.beds.filter((b) => !b.resident).length;
return (
0 ? "success" : "neutral"} dot>{open > 0 ? `${open} open` : "Full"}
{h.beds.map((b) => (
{b.label}
{assigning === b.id ? (
) : b.resident ? (
) : (
)}
))}
);
})}
Awaiting a bed: {unhoused.map((r) => r.name).join(", ")}
)}
);
}
/* ---------- Residents ---------- */
function ResidentsTab({ store, setStore }) {
const { Card, Button, Badge, Input, Select } = window.WillowCreekDesignSystem_90378c;
const [adding, setAdding] = adUseState(false);
const [draft, setDraft] = adUseState({ name: "", phone: "", house: "Creekside House" });
const published = store.forms.filter((f) => f.status === "published");
const addResident = () => {
if (!draft.name.trim()) return;
setStore((s) => ({ ...s, residents: [...s.residents, { id: "r" + Date.now(), name: draft.name.trim(), phone: draft.phone, house: draft.house, phase: 1, status: "Active", balance: s.cms.weeklyRate }] }));
setDraft({ name: "", phone: "", house: "Creekside House" });
setAdding(false);
};
return (
<>
Residents
Phase, paperwork, and balance at a glance.
{adding && (
setDraft((d) => ({ ...d, name: e.target.value }))} placeholder="Jordan Rivera" />
setDraft((d) => ({ ...d, phone: e.target.value }))} placeholder="(940) 555-0100" />
)}
{["Resident", "House", "Phase", "Paperwork", "Balance", "Status"].map((hd) => (
| {hd} |
))}
{store.residents.map((r) => {
const signedCount = (store.signedForms[r.name] || []).length;
return (
|
{r.name}
{r.phone}
|
{r.house} |
Phase {r.phase} |
= published.length ? "success" : "warning"} size="sm">{signedCount}/{published.length} signed
|
0 ? "var(--clay-600)" : "var(--text-body)" }}>${r.balance} |
{r.status}
|
);
})}
);
}
/* ---------- Forms builder ---------- */
function FormsTab({ store, setStore }) {
const { Card, Button, Badge, Input, Textarea, Select } = window.WillowCreekDesignSystem_90378c;
const [editing, setEditing] = adUseState(null); // form id or "new"
const blank = { title: "", kind: "form", required: false, status: "draft", body: "", fields: [{ label: "Full legal name", type: "text" }] };
const [draft, setDraft] = adUseState(blank);
const startEdit = (f) => { setDraft(f ? JSON.parse(JSON.stringify(f)) : { ...blank }); setEditing(f ? f.id : "new"); };
const save = () => {
if (!draft.title.trim()) return;
setStore((s) => editing === "new"
? { ...s, forms: [...s.forms, { ...draft, id: "f" + Date.now() }] }
: { ...s, forms: s.forms.map((f) => f.id === editing ? { ...draft, id: f.id } : f) });
setEditing(null);
};
const togglePublish = (id) => setStore((s) => ({ ...s, forms: s.forms.map((f) => f.id === id ? { ...f, status: f.status === "published" ? "draft" : "published" } : f) }));
const remove = (id) => setStore((s) => ({ ...s, forms: s.forms.filter((f) => f.id !== id) }));
if (editing) {
return (
{editing === "new" ? "New form" : "Edit form"}
setDraft((d) => ({ ...d, title: e.target.value }))} placeholder="e.g. Overnight Pass Request" />