// Admin screen — all homes, schedule, settings function AdminScreen({ user, route, homes, allPets, allUsers, appointments, invoices, pricing, tweaks, setTweak, onOpenHome, onOpenPet, onNav, onInviteHomeowner, onDecideAppt, onUpdateInvoice, onCreateInvoice, onUpdatePricing, toast }) { // Hooks MUST be declared before any conditional return. const [showExport, setShowExport] = useState(false); const [filter, setFilter] = useState("all"); const [query, setQuery] = useState(""); if (route === "schedule") return ; if (route === "requests") return ; if (route === "settings") return ; if (route === "invoices") { window.__pricingUpdate = onUpdatePricing; return ; } if (route === "adminPets") return onNav("admin")}/>; if (route === "adminActive") return onNav("admin")}/>; const filtered = homes.filter(h => { if (filter !== "all" && h.status !== filter) return false; if (query && !(h.name.toLowerCase().includes(query.toLowerCase()) || h.address.toLowerCase().includes(query.toLowerCase()))) return false; return true; }); const totalPets = homes.reduce((n, h) => n + h.pets.length, 0); const pendingCount = (appointments || []).filter(a => a.status === "pending").length; const activeCount = (appointments || []).filter(a => a.status === "approved" || a.status === "ongoing").length; return (
overview —

All homes

{homes.length} households, {totalPets} pets currently in your care network.
{showExport && ( setShowExport(false)} toast={toast} /> )}
{ /* already here */ window.scrollTo({ top: document.querySelector(".section-homes")?.offsetTop || 0, behavior: "smooth" }); }}>
{homes.length}
Total homes
onNav("adminPets")}>
{totalPets}
Pets across homes
onNav("adminActive")}>
{activeCount}
Active sittings
onNav("requests")} style={pendingCount > 0 ? { borderColor: "#E8D9A8" } : null}>
{pendingCount}
Pending requests
{/* Filters */}
{[["all", "All"], ["active", "Active"], ["upcoming", "Upcoming"], ["onboarding", "Onboarding"]].map(([k, v]) => ( ))}
setQuery(e.target.value)} placeholder="Search homes or addresses…" style={{ paddingLeft: 38 }}/>
{/* Home list */}
HOME
PETS
DATES
STATUS
{filtered.map(h => { const pets = h.pets.map(pid => allPets[pid]).filter(Boolean); const primary = (h.residents || []).map(uid => allUsers?.[uid]).find(u => u && u.isPrimary) || (h.residents || []).map(uid => allUsers?.[uid]).find(Boolean); const ownerName = primary?.name || "—"; // Find earliest upcoming appt const upcoming = (appointments || []) .filter(a => a.homeId === h.id && (a.status === "approved" || a.status === "pending" || a.status === "ongoing")) .sort((a, b) => new Date(a.start) - new Date(b.start))[0]; const dateLabel = upcoming ? `${window.fmtDateShort(upcoming.start)} – ${window.fmtDateShort(upcoming.end)}` : "—"; return (
onOpenHome(h.id)}>
{ownerName.split(" ").map(w => w[0]).join("").slice(0,2)}
{h.name}
{h.address}
{pets.slice(0, 4).map((p) => ( ))} {pets.length > 4 && +{pets.length - 4}} {pets.length === 0 && No pets yet}
{dateLabel} {upcoming && upcoming.status === "pending" && (
Awaiting approval
)}
{h.status === "active" ? "Sitting now" : h.status === "onboarding" ? "Onboarding" : "Upcoming"}
); })} {filtered.length === 0 && (
No homes match your filters.
)}
); } function AdminSchedule({ homes, appointments, allUsers, onOpenHome }) { const [showExport, setShowExport] = useState(false); // 14-day strip from today const today = new Date(); today.setHours(0, 0, 0, 0); const days = Array.from({ length: 14 }).map((_, i) => { const d = new Date(today); d.setDate(d.getDate() + i); return d; }); const monthDay = d => d.toLocaleDateString("en", { weekday: "short", day: "numeric" }); const colorFor = (status) => ({ approved: "var(--green)", ongoing: "var(--brown)", pending: "var(--amber)", rejected: "var(--heart)", completed: "var(--ink-3)", }[status] || "var(--ink-3)"); // Derive bookings from appointments const bookings = (appointments || []) .filter(a => a.status !== "rejected" && a.status !== "completed") .map(a => { const start = new Date(a.start); start.setHours(0,0,0,0); const end = new Date(a.end); end.setHours(0,0,0,0); const s = Math.floor((start - today) / 86400000); const e = Math.floor((end - today) / 86400000); if (e < 0 || s > 13) return null; return { appt: a, home: homes.find(h => h.id === a.homeId), start: Math.max(0, s), end: Math.min(13, e), color: colorFor(a.status), status: a.status, }; }) .filter(Boolean); return (
two weeks out —

Schedule

Color-coded by status. Click any block to open the home.
{/* Legend */}
{[["approved","Approved"],["pending","Pending"],["ongoing","Ongoing"]].map(([k,l]) => ( {l} ))}
{days.map((d, i) => (
{monthDay(d)}
))}
{bookings.length === 0 ? (
No bookings in the next 14 days.
) : bookings.map((b, idx) => (
onOpenHome(b.home.id)}>
{b.home?.name || "—"}
{b.home?.pets.length || 0} pet{b.home?.pets.length !== 1 ? "s" : ""} · {b.status}
{days.map((_, i) => { const active = i >= b.start && i <= b.end; const isStart = i === b.start; const isEnd = i === b.end; return (
active && onOpenHome(b.home.id)}> {isStart && "▶"}
); })}
))}
{showExport && setShowExport(false)}/>} {/* Full future appointments list */}
); } // Lists all approved/pending/ongoing appointments below the 14-day strip function ScheduleFutureList({ appointments, homes, allUsers, onOpenHome }) { const now = new Date(); const future = (appointments || []) .filter(a => (a.status === "approved" || a.status === "pending" || a.status === "ongoing") && new Date(a.end) >= now) .sort((a, b) => new Date(a.start) - new Date(b.start)); if (future.length === 0) { return (

All upcoming sittings 0

No upcoming sittings on the books
Approved and pending requests show up here.
); } // Group by month for readability const groups = {}; future.forEach(a => { const d = new Date(a.start); const key = d.toLocaleString("en", { month: "long", year: "numeric" }); (groups[key] = groups[key] || []).push(a); }); return (

All upcoming sittings {future.length}

{Object.entries(groups).map(([month, list]) => (
{month}
{list.map(a => { const home = homes.find(h => h.id === a.homeId); const primary = (home?.residents || []).map(uid => allUsers?.[uid]).find(u => u && u.isPrimary); const s = window.APPT_STATUS[a.status]; return (
onOpenHome(a.homeId)}>
{new Date(a.start).toLocaleString("en", { month: "short" }).toUpperCase()}
{new Date(a.start).getDate()}
{home?.name}
{primary?.name || "—"} · {home?.address}
{window.fmtDate(a.start)} → {window.fmtDate(a.end)} · {window.daysBetween(a.start, a.end)} days
); })}
))}
); } function AdminSettings({ toast, tweaks, setTweak }) { const [section, setSection] = useState("business"); const [acceptNew, setAcceptNew] = useState(true); const [vaccReq, setVaccReq] = useState(true); const [autoNotes, setAutoNotes] = useState(true); const [emergencyAlerts, setEmergencyAlerts] = useState(true); const [requestEmails, setRequestEmails] = useState(true); const [gcalConnected, setGcalConnected] = useState(false); const [gcalAccount, setGcalAccount] = useState("jessica@jessicaspetsitting.com"); const [gcalAutoSync, setGcalAutoSync] = useState(true); const [gcalReminders, setGcalReminders] = useState(true); const [team, setTeam] = useState([ { id: "u1", name: "Jessica Samp", role: "Owner · Admin", email: "jessica@jessicaspetsitting.com", color: "var(--purple)" }, { id: "u2", name: "Connor", role: "Admin", email: "connor@jessicaspetsitting.com", color: "var(--green)" }, ]); const [editing, setEditing] = useState(null); // member object or null const [adding, setAdding] = useState(false); const Switch = ({ value, onChange }) => (