// ===== add-volunteer.jsx ===== // Staff Add Volunteer flow. // Two entry modes: // 1. Single volunteer — multi-step modal: Identity → Contact → Role/Site → Screening → Review // 2. Bulk import — CSV upload + dedupe + invite // Plus a third quick mode: walk-up kiosk-style add (used for day-of event registration). // // Exposes window.AddVolunteerFlow as a single component, controlled by an `open` prop // and an `onClose` callback. The page that uses it owns the open state. const { React, Card, Btn, IconBtn, StatusChip, Avatar, Kpi, Field, Input, Textarea, Select, Checkbox, Toggle, IconPlus, IconCheck, IconX, IconArrow, IconArrowL, IconUpload, IconDownload, IconUsers, IconShield, IconMail, IconClipboard, IconClock, IconBook, IconAward, IconSearch, IconChevron, IconChevronD, IconEdit, IconExternal, IconSwitch, VOLUNTEERS, } = window; const { useState: useAV, useMemo: useAVM, useEffect: useAVE } = React; const av_over = { fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-3)", fontWeight: 500 }; const av_meta = { fontSize: 11, color: "var(--fg-3)" }; const av_overlay = { position: "fixed", inset: 0, background: "rgba(31,27,22,0.45)", backdropFilter: "blur(4px)", zIndex: 80, display: "flex", justifyContent: "flex-end" }; const av_drawer = { width: "min(880px, 100%)", height: "100%", background: "var(--paper)", display: "flex", flexDirection: "column", boxShadow: "var(--shadow-lg)" }; const av_head = { padding: "20px 24px 16px", display: "flex", justifyContent: "space-between", alignItems: "start", gap: 14, borderBottom: "1px solid var(--border-soft)" }; const av_foot = { padding: "14px 24px", borderTop: "1px solid var(--border-soft)", display: "flex", alignItems: "center", gap: 8, background: "var(--paper-soft)" }; // ============================================================ // ROOT // ============================================================ const AddVolunteerFlow = ({ open, onClose, initialMode }) => { const [mode, setMode] = useAV(initialMode || null); // null | "single" | "bulk" | "walkup" if (!open) return null; return (
e.stopPropagation()}> {mode === null && } {mode === "single" && setMode(null)} onClose={onClose} />} {mode === "bulk" && setMode(null)} onClose={onClose} />} {mode === "walkup" && setMode(null)} onClose={onClose} />}
); }; // ============================================================ // MODE PICKER // ============================================================ const ModePicker = ({ onPick, onClose }) => ( <>
Add a volunteer
How are you bringing them in?
Pick the mode that matches the situation. All paths run the same dedupe and consent checks.
onPick("single")} /> onPick("bulk")} /> onPick("walkup")} />
Every add path runs duplicate detection against name + email + phone before committing, and applies your tenant's required-field rules.
); const ModeCard = ({ icon: Icon, title, desc, badge, onClick }) => (
{title}
{desc}
{badge &&
{badge}
}
); // ============================================================ // SINGLE VOLUNTEER — multi-step // ============================================================ const SingleVolunteer = ({ onBack, onClose }) => { const [step, setStep] = useAV(1); const [data, setData] = useAV({ first: "", last: "", pronouns: "", dob: "", language: "English", email: "", phone: "", smsOk: false, address1: "", city: "", state: "CO", zip: "", emergencyName: "", emergencyPhone: "", emergencyRel: "", site: "", program: "", role: "", waivers: { liability: false, photo: false, medical: false }, medical: false, allergies: "", minor: false, guardianName: "", guardianRelation: "", backgroundCheck: "not-yet", driverCheck: "n-a", notes: "", inviteImmediately: true, autoEnroll: true, }); const update = (patch) => setData({ ...data, ...patch }); const steps = ["Identity", "Contact", "Role & site", "Screening", "Review"]; // duplicate detection (mock) const possibleDupe = useAVM(() => { if (!data.first && !data.email) return null; if (data.email && data.email.toLowerCase().includes("okonkwo")) { return VOLUNTEERS.find(v => v.id === "v-okonkwo"); } if (data.first.toLowerCase() === "maya" && data.last.toLowerCase() === "okonkwo") { return VOLUNTEERS.find(v => v.id === "v-okonkwo"); } return null; }, [data.first, data.last, data.email, data.phone]); return ( <>
Add volunteer · single
{step === 1 ? "Step 1 · Identity" : step === 2 ? "Step 2 · Contact" : step === 3 ? "Step 3 · Role & site" : step === 4 ? "Step 4 · Screening & waivers" : step === 5 ? "Step 5 · Review & invite" : "Added"}
{step <= 5 && (
{steps.map((label, i) => { const n = i + 1; return (
{n < step ? "✓" : n} {label}
); })}
)}
{step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && } {step === 5 && } {step === 6 && }
{step === 1 ? Change mode : step <= 5 ? setStep(step - 1)} icon={IconArrowL}>Back : null}
{step < 5 && ( setStep(step + 1)} disabled={step === 1 && !data.first}> Continue )} {step === 5 && ( <> update({ inviteImmediately: false })}>Save as draft setStep(6)}> {data.inviteImmediately ? "Add & send invite" : "Add volunteer"} )} {step === 6 && ( <> { setStep(1); update({ first: "", last: "", email: "", phone: "" }); }}>Add another Done )}
); }; // ---- Step 1 ---- const Step1Identity = ({ data, update, possibleDupe }) => ( <>

Start with the volunteer's name. We check for duplicates as you type.

update({ first: e.target.value })} placeholder="Maya" autoFocus /> update({ last: e.target.value })} placeholder="Okonkwo" /> update({ pronouns: e.target.value })} placeholder="she/her" /> update({ dob: e.target.value })} /> update({ guardianName: e.target.value })} /> update({ email: e.target.value })} placeholder="maya@example.com" /> update({ phone: e.target.value })} placeholder="(720) 555-0142" />
{data.phone && (
SMS requires verification. We'll send a one-time code when they claim the account. update({ smsOk: on })} label="OK to text" />
)}
Mailing address
update({ address1: e.target.value })} placeholder="123 Main St" />
update({ city: e.target.value })} /> update({ state: e.target.value })} /> update({ zip: e.target.value })} placeholder="80524" />
Emergency contact
update({ emergencyName: e.target.value })} /> update({ emergencyPhone: e.target.value })} /> update({ site: e.target.value })} options={["", ...SITES]} /> update({ backgroundCheck: e.target.value })} options={[ { value: "not-yet", label: "Not yet — start when activated" }, { value: "n-a", label: "Not required for this role" }, { value: "valid", label: "Existing check on file (provide date)" }, { value: "manual", label: "Manual — paper waiver collected" }, ]} />