Click "Copy" on each file, then paste into your new app.
import { useState } from "react";
import { base44 } from "@/api/base44Client";
import { CheckCircle, Utensils, ChevronRight, ChevronLeft } from "lucide-react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import BrooklynPage1 from "@/components/intake/BrooklynPage1";
import BrooklynScreeningPage from "@/components/intake/BrooklynScreeningPage";
import BrooklynAttestationPage from "@/components/intake/BrooklynAttestationPage";
const TOTAL_PAGES = 3;
const PAGE_LABELS = ["Personal Info", "Screening & Health", "Attestation & Submit"];
export default function MealsIntakeFormBrooklyn() {
const [page, setPage] = useState(0);
const [submitted, setSubmitted] = useState(false);
const [loading, setLoading] = useState(false);
const [started, setStarted] = useState(false);
const [validationError, setValidationError] = useState("");
const [form, setForm] = useState({
first_name: "", last_name: "", date_of_birth: "", phone: "", email: "",
address: "", city: "", zip_code: "", medicaid_id: "",
bk_application_type: "", bk_transfer_from: "", bk_transfer_notes: "",
bk_living_situation: "", bk_housing_struggle: "", bk_housing_quality_concern: "",
bk_housing_issues: [], bk_utility_shutoff: "", bk_utility_issues: [],
bk_utility_assistance: "", bk_household_issues: [], bk_needs_job_assistance: "",
bk_wants_school_training: "", bk_transportation_barrier: "", bk_receives_snap: "",
bk_receives_tanf: "", bk_has_chronic_illness: "", bk_other_health_issues: "",
bk_enrolled_health_home: "", bk_medications_require_refrigeration: "",
bk_pregnant_or_postpartum: "", due_date: "", bk_postpartum_date: "",
bk_receives_wic: "", bk_receiving_home_delivered_meals: "", bk_on_housing_waitlist: "",
bk_difficulty_stairs_bathing: "", bk_requires_breastmilk_refrigeration: "",
bk_meal_preference: "", bk_food_allergies: "", bk_food_allergy_details: "",
bk_dietary_restrictions: "", bk_dietary_restriction_details: "",
bk_needs_refrigerator: "", bk_needs_microwave: "", bk_needs_cooking_supplies: "",
bk_food_support_helpful: "", bk_food_benefit_needed: "", bk_member_employed: "",
bk_spouse_employed: "", bk_has_income: "", bk_can_store_food: "",
bk_receiving_nutrition_counseling: "", bk_needs_recovery_care: "",
bk_working_with_housing_program: "", bk_healthy_homes_program: "",
bk_safety_physically_hurt: "", bk_safety_insult: "", bk_safety_threaten: "",
bk_safety_yell: "", household_members: "", household_member_details: [],
attestation_name: "", signature: "",
});
const set = (field, value) => setForm(prev => ({ ...prev, [field]: value }));
const toggleArray = (field, value) => {
setForm(prev => ({
...prev,
[field]: prev[field].includes(value)
? prev[field].filter(x => x !== value)
: [...prev[field], value],
}));
};
const formatDate = (d) => {
if (!d) return "";
const parts = d.split("-");
if (parts.length === 3) return `${parts[1]}/${parts[2]}/${parts[0]}`;
return d;
};
const validatePage1 = () => {
const required = ["first_name","last_name","date_of_birth","phone","email","address","city","zip_code","medicaid_id","bk_application_type"];
for (const field of required) {
if (!form[field] || form[field].toString().trim() === "") return "Please fill in all required fields (*)";
}
if (form.bk_application_type === "transfer" && !form.bk_transfer_from?.trim()) {
return "Please enter the name of the previous organization.";
}
return "";
};
const validatePage2 = () => {
const yesNoFields = [
"bk_housing_struggle","bk_housing_quality_concern","bk_utility_shutoff","bk_utility_assistance",
"bk_needs_job_assistance","bk_wants_school_training","bk_transportation_barrier","bk_receives_snap",
"bk_receives_tanf","bk_has_chronic_illness","bk_other_health_issues","bk_enrolled_health_home",
"bk_medications_require_refrigeration","bk_pregnant_or_postpartum","bk_receives_wic",
"bk_receiving_home_delivered_meals","bk_on_housing_waitlist","bk_difficulty_stairs_bathing",
"bk_requires_breastmilk_refrigeration","bk_food_allergies","bk_dietary_restrictions",
"bk_needs_refrigerator","bk_needs_microwave","bk_needs_cooking_supplies","bk_food_support_helpful",
"bk_food_benefit_needed","bk_member_employed","bk_has_income","bk_can_store_food",
"bk_receiving_nutrition_counseling","bk_needs_recovery_care","bk_working_with_housing_program",
"bk_healthy_homes_program","bk_spouse_employed",
];
const selectFields = ["bk_living_situation","bk_meal_preference","bk_safety_physically_hurt","bk_safety_insult","bk_safety_threaten","bk_safety_yell"];
const multiFields = ["bk_housing_issues","bk_utility_issues","bk_household_issues"];
for (const f of [...yesNoFields, ...selectFields]) {
if (!form[f] || form[f].toString().trim() === "") return "Please answer all required questions (*) before continuing.";
}
for (const f of multiFields) {
if (!form[f] || form[f].length === 0) return "Please answer all required questions (*) before continuing.";
}
return "";
};
const handleNext = () => {
let err = "";
if (page === 0) err = validatePage1();
if (page === 1) err = validatePage2();
if (err) { setValidationError(err); window.scrollTo({ top: 0, behavior: "smooth" }); return; }
setValidationError("");
setPage(p => p + 1);
window.scrollTo({ top: 0, behavior: "smooth" });
};
const handleSubmit = async () => {
setLoading(true);
try { await base44.functions.invoke("saveIntakeSubmission", { ...form, household_members: Number(form.household_members) || 0, submission_language: "en" }); } catch(e) { console.error(e.message); }
try { await base44.functions.invoke("forwardSubmission", { ...form, household_members: Number(form.household_members) || 0 }); } catch(e) { console.error(e.message); }
try {
await base44.functions.invoke("sendIntakeEmail", {
subject: `New SCN Intake Form Submission – ${form.first_name} ${form.last_name} [BROOKLYN]`,
body: `🌉 NOTE: This application was submitted via the BROOKLYN portal.\n\nApplication Type: ${form.bk_application_type === "transfer" ? `Transfer (from: ${form.bk_transfer_from}${form.bk_transfer_notes ? " | Notes: " + form.bk_transfer_notes : ""})` : "New Application"}\n\nName: ${form.first_name} ${form.last_name}\nDOB: ${formatDate(form.date_of_birth)}\nPhone: ${form.phone}\nEmail: ${form.email}\nAddress: ${form.address}, ${form.city}, ${form.zip_code}\nMedicaid ID: ${form.medicaid_id}\n\nHousehold Members: ${form.household_members}\n${(form.household_member_details || []).map((m, i) => ` Member ${i+1}: ${m.first_name || ""} ${m.last_name || ""} | DOB: ${formatDate(m.dob)} | Relationship: ${m.relationship || ""} | CIN: ${m.cin || ""}`).join("\n")}`,
});
} catch(e) { console.error(e.message); }
setLoading(false);
setSubmitted(true);
};
if (submitted) {
return (
<div className="min-h-screen bg-[#edf3f8] flex flex-col">
<Navbar />
<div className="flex-1 flex items-center justify-center px-6 py-20">
<div className="bg-white rounded-3xl shadow-lg p-12 max-w-md w-full text-center">
<CheckCircle className="text-green-500 mx-auto mb-4" size={56} />
<h2 className="text-2xl font-extrabold text-[#0d1e2e] mb-3" style={{ fontFamily: "Georgia, serif" }}>Application Submitted!</h2>
<p className="text-[#4a6a8a] text-base">Your application has been received! Call us at <strong>845-351-8551</strong> or email <strong>ohros.or@gmail.com</strong>.</p>
</div>
</div>
<Footer />
</div>
);
}
return (
<div className="min-h-screen bg-[#edf3f8] flex flex-col font-sans">
<Navbar />
<section className="bg-[#1a3a5c] text-white py-14 px-6 text-center">
<div className="w-14 h-14 rounded-full bg-[#e8c84a] flex items-center justify-center mx-auto mb-4">
<Utensils className="text-[#1a3a5c]" size={28} />
</div>
<p className="text-[#e8c84a] font-bold uppercase tracking-widest text-sm">Nutritious Food for Eligible Individuals and Families</p>
<h1 className="text-4xl md:text-5xl font-extrabold mt-2" style={{ fontFamily: "Georgia, serif" }}>SCN Meals Program</h1>
<p className="text-white/70 mt-2">Brooklyn Application Form</p>
</section>
<div className="max-w-3xl mx-auto w-full px-6 py-12 flex flex-col gap-8">
{!started ? (
<>
<div className="bg-white rounded-2xl p-7 shadow-sm border border-[#dce8f0]">
<h2 className="text-xl font-extrabold text-[#0d1e2e] mb-4" style={{ fontFamily: "Georgia, serif" }}>About the Program</h2>
<p className="text-[#4a6a8a] text-sm mb-5">Ohros's Social Care Network (SCN) program provides health-related social needs to people with certain physical, mental, or behavioral health needs.</p>
<div className="grid sm:grid-cols-2 gap-3">
{["Medicaid recipients must be enrolled in a Managed Care Plan. Child Health Plus, Essential Plan, and Straight Medicaid members do not qualify.","Additional family members (mother, spouse, or children under 18) may qualify if they demonstrate a need.","Eligible members must reside in Brooklyn, NY.","Initial approval is authorized for up to 6 months. Additional authorization may be obtained if eligible."].map((pt, i) => (
<div key={i} className="bg-[#edf3f8] border border-[#dce8f0] rounded-xl p-4 flex gap-3 text-sm text-[#0d1e2e]">
<span className="text-[#1a3a5c] mt-0.5">•</span><span>{pt}</span>
</div>
))}
</div>
</div>
<div className="bg-white rounded-2xl p-7 shadow-sm border border-[#dce8f0] text-center flex flex-col gap-4">
<h3 className="text-lg font-extrabold text-[#0d1e2e]" style={{ fontFamily: "Georgia, serif" }}>Questions? We're here to help!</h3>
<div className="flex flex-col sm:flex-row justify-center gap-4 text-sm">
<a href="mailto:ohros.or@gmail.com" className="text-[#1a3a5c] font-semibold hover:underline">ohros.or@gmail.com</a>
<a href="tel:8453518551" className="text-[#1a3a5c] font-semibold hover:underline">845-351-8551</a>
</div>
<button onClick={() => setStarted(true)} className="bg-[#1a3a5c] hover:bg-[#142d47] text-white font-extrabold px-8 py-4 rounded-2xl transition mx-auto">Start Brooklyn Application</button>
<p className="text-xs text-[#4a6a8a]">Takes approximately 10–15 minutes to complete</p>
</div>
</>
) : (
<>
<div className="bg-white rounded-2xl p-5 shadow-sm border border-[#dce8f0]">
<div className="flex items-center justify-between mb-3">
{PAGE_LABELS.map((label, i) => (
<div key={i} className="flex items-center gap-2">
<div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold shrink-0 ${i <= page ? "bg-[#1a3a5c] text-white" : "bg-[#dce8f0] text-[#4a6a8a]"}`}>{i + 1}</div>
<span className={`text-xs font-semibold hidden sm:block ${i === page ? "text-[#1a3a5c]" : "text-[#4a6a8a]"}`}>{label}</span>
{i < TOTAL_PAGES - 1 && <div className={`w-8 h-0.5 mx-1 ${i < page ? "bg-[#1a3a5c]" : "bg-[#dce8f0]"}`} />}
</div>
))}
</div>
<div className="w-full bg-[#dce8f0] rounded-full h-1.5">
<div className="bg-[#1a3a5c] h-1.5 rounded-full transition-all" style={{ width: `${((page + 1) / TOTAL_PAGES) * 100}%` }} />
</div>
</div>
{page === 0 && <BrooklynPage1 form={form} set={set} />}
{page === 1 && <BrooklynScreeningPage form={form} set={set} toggleArray={toggleArray} />}
{page === 2 && <BrooklynAttestationPage form={form} set={set} onSubmit={handleSubmit} loading={loading} />}
{validationError && <div className="bg-red-50 border border-red-200 text-red-700 text-sm px-4 py-3 rounded-xl">{validationError}</div>}
<div className="flex justify-between">
{page > 0 ? (
<button onClick={() => { setValidationError(""); setPage(p => p - 1); }} className="flex items-center gap-2 text-[#0d1e2e] font-semibold px-6 py-3 rounded-xl border border-[#dce8f0] bg-white hover:bg-[#edf3f8] transition">
<ChevronLeft size={18} /> Back
</button>
) : <div />}
{page < TOTAL_PAGES - 1 && (
<button onClick={handleNext} className="flex items-center gap-2 bg-[#1a3a5c] hover:bg-[#142d47] text-white font-extrabold px-8 py-3 rounded-xl transition">
Next <ChevronRight size={18} />
</button>
)}
</div>
</>
)}
</div>
<Footer />
</div>
);
}import { useState } from "react";
import { Menu, X, Phone } from "lucide-react";
import { Link } from "react-router-dom";
const navLinks = [
{ label: "Who We Serve", href: "/#eligibility" },
{ label: "About", href: "/#about" },
{ label: "Contact", href: "/#contact" },
];
export default function Navbar() {
const [open, setOpen] = useState(false);
return (
<nav className="bg-white shadow-md sticky top-0 z-50">
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<Link to="/"><img src="https://media.base44.com/images/public/69c0962b551c9313b5a86779/5bdc0311a_OhrosLogo.jpg" alt="Ohros Logo" className="h-32 w-auto" /></Link>
<div className="hidden md:flex items-center gap-8">
{navLinks.map((l) => (
<a key={l.label} href={l.href} className="text-[#3d1a0e] font-medium hover:text-[#c0392b] transition text-sm">{l.label}</a>
))}
<a href="tel:8453518551" className="flex items-center gap-2 bg-[#c0392b] hover:bg-[#a93226] text-white px-5 py-2 rounded-full text-sm font-bold transition">
<Phone size={14} /> 845-351-8551
</a>
</div>
<button className="md:hidden text-[#3d1a0e]" onClick={() => setOpen(!open)}>
{open ? <X size={26} /> : <Menu size={26} />}
</button>
</div>
{open && (
<div className="md:hidden bg-white border-t border-gray-100 px-6 pb-6 flex flex-col gap-4">
{navLinks.map((l) => (
<a key={l.label} href={l.href} onClick={() => setOpen(false)} className="text-[#3d1a0e] font-medium text-base">{l.label}</a>
))}
<a href="tel:8453518551" className="flex items-center justify-center gap-2 bg-[#c0392b] text-white px-5 py-3 rounded-full font-bold">
<Phone size={16} /> 845-351-8551
</a>
</div>
)}
</nav>
);
}export default function Footer() {
return (
<footer className="bg-[#1e0d05] text-white/60 py-10 px-6">
<div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
<div className="text-center md:text-left">
<img src="https://media.base44.com/images/public/69c0962b551c9313b5a86779/5bdc0311a_OhrosLogo.jpg" alt="Ohros Logo" className="h-20 w-auto" />
<p className="text-sm mt-2">SCN Program</p>
</div>
<div className="flex flex-col items-center md:items-end gap-1 text-sm">
<p className="text-white/40">© {new Date().getFullYear()} Ohros Community Care Services. All rights reserved.</p>
</div>
</div>
</footer>
);
}export default function BrooklynPage1({ form, set }) {
const input = "w-full border border-[#dce8f0] rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-[#1a3a5c] bg-white";
const label = "block text-sm font-semibold text-[#0d1e2e] mb-1";
const hint = "text-xs text-[#4a6a8a] mt-1";
return (
<div className="bg-white rounded-2xl p-7 shadow-sm border border-[#dce8f0] flex flex-col gap-6">
<h2 className="text-xl font-extrabold text-[#0d1e2e]" style={{ fontFamily: "Georgia, serif" }}>Personal Information</h2>
<div>
<label className={label}>Application Type *</label>
<select value={form.bk_application_type || ""} onChange={e => set("bk_application_type", e.target.value)} className={input}>
<option value="">Select...</option>
<option value="new">New Application</option>
<option value="transfer">Transfer from Another Organization</option>
</select>
</div>
{form.bk_application_type === "transfer" && (
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4 flex flex-col gap-3">
<div className="flex items-start gap-2">
<span className="text-amber-600 font-bold text-sm mt-0.5">⚠</span>
<p className="text-sm text-amber-800 font-medium">Your case must be <strong>closed</strong> with the previous organization before applying here.</p>
</div>
<div>
<label className={label}>Previous Organization Name *</label>
<input value={form.bk_transfer_from || ""} onChange={e => set("bk_transfer_from", e.target.value)} placeholder="Enter the name of the previous organization" className={input} />
</div>
<div>
<label className={label}>Notes / Reason for Transfer</label>
<textarea value={form.bk_transfer_notes || ""} onChange={e => set("bk_transfer_notes", e.target.value)} placeholder="Optional: provide any additional context about the transfer" rows={3} className={`${input} resize-none`} />
</div>
</div>
)}
<div className="grid sm:grid-cols-2 gap-4">
<div><label className={label}>First Name *</label><input value={form.first_name} onChange={e => set("first_name", e.target.value)} className={input} /></div>
<div><label className={label}>Last Name *</label><input value={form.last_name} onChange={e => set("last_name", e.target.value)} className={input} /></div>
</div>
<div>
<label className={label}>Date of Birth *</label>
<input type="date" value={form.date_of_birth} onChange={e => set("date_of_birth", e.target.value)} className={input} />
<p className={hint}>MM/DD/YYYY</p>
</div>
<div>
<label className={label}>Medicaid CIN ID *</label>
<input value={form.medicaid_id} onChange={e => set("medicaid_id", e.target.value)} placeholder="e.g. AA12345B" className={input} />
</div>
<div><p className="text-sm font-bold text-[#0d1e2e] border-b border-[#dce8f0] pb-2 mb-1">Contact</p></div>
<div className="grid sm:grid-cols-2 gap-4">
<div><label className={label}>Phone Number *</label><input type="tel" value={form.phone} onChange={e => set("phone", e.target.value)} placeholder="(555) 123-4567" className={input} /></div>
<div><label className={label}>Email *</label><input type="email" value={form.email} onChange={e => set("email", e.target.value)} placeholder="name@example.com" className={input} /></div>
</div>
<div><p className="text-sm font-bold text-[#0d1e2e] border-b border-[#dce8f0] pb-2 mb-1">Address</p></div>
<div><label className={label}>Street Address *</label><input value={form.address} onChange={e => set("address", e.target.value)} placeholder="Street address..." className={input} /></div>
<div><label className={label}>Apt / Unit</label><input value={form.apt_unit || ""} onChange={e => set("apt_unit", e.target.value)} placeholder="Apt / Unit" className={input} /></div>
<div><label className={label}>City *</label><input value={form.city} onChange={e => set("city", e.target.value)} className={input} /></div>
<div className="grid sm:grid-cols-2 gap-4">
<div><label className={label}>State</label><input value="NY" readOnly className={`${input} bg-[#edf3f8] text-[#4a6a8a] cursor-not-allowed`} /></div>
<div><label className={label}>ZIP Code *</label><input value={form.zip_code} onChange={e => set("zip_code", e.target.value)} className={input} /></div>
</div>
</div>
);
}const inputCls = "w-full border border-[#dce8f0] rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-[#1a3a5c] bg-white";
const labelCls = "block text-sm font-semibold text-[#0d1e2e] mb-1";
function YesNo({ label, value, onChange, note }) {
return (
<div>
<label className={labelCls}>{label}</label>
{note && <p className="text-xs text-[#4a6a8a] mb-2">{note}</p>}
<select value={value || ""} onChange={e => onChange(e.target.value)} className={inputCls}>
<option value="">Select...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
);
}
function MultiCheck({ label, options, selected, onToggle, note }) {
return (
<div>
<label className={labelCls}>{label}</label>
{note && <p className="text-xs text-[#4a6a8a] mb-2">{note}</p>}
<div className="flex flex-col gap-2 mt-1">
{options.map(opt => (
<label key={opt} className="flex items-start gap-2 text-sm text-[#0d1e2e] cursor-pointer">
<input type="checkbox" checked={selected.includes(opt)} onChange={() => onToggle(opt)} className="accent-[#1a3a5c] mt-0.5 shrink-0" />
{opt}
</label>
))}
</div>
</div>
);
}
const HOUSING_ISSUES = [
"Pests such as bugs, ants, or mice","Mold","Lead paint or pipes","Lack of heat",
"Oven or stove not working","Smoke detectors missing or not working","Water leaks",
"Refrigerator issues","None of the above",
];
const UTILITY_ISSUES = [
"My electricity has been shut off","I don't have running water in my home",
"I can't get electricity because I can't afford it",
"I can't heat/cool my home because I can't afford it",
"I've received written notice my utilities will be shut off",
"Other utility concerns","None of the above",
];
const HOUSEHOLD_ISSUES = [
"I'm behind on rent or mortgage payments","I have to move frequently from place to place",
"My housing costs are too much for me to afford","I'm worried about being evicted",
"I have been notified in writing that my right to occupy my current housing or living situation will be terminated",
"I've been homeless at some point in the past 12 months",
"I'm currently staying with friends or family temporarily",
"I'm staying in a shelter or temporary housing",
"I'm sleeping in a place not meant for living (e.g., outside, car)",
"I'm sleeping in a place not meant for living, but I feel safe","None of the above",
];
const FREQ_OPTS = ["Never","Sometimes","Often"];
function Section({ title, children }) {
return (
<div className="bg-white rounded-2xl p-7 shadow-sm border border-[#dce8f0] flex flex-col gap-5">
<h2 className="text-lg font-extrabold text-[#0d1e2e] border-b border-[#dce8f0] pb-2" style={{ fontFamily: "Georgia, serif" }}>{title}</h2>
{children}
</div>
);
}
export default function BrooklynScreeningPage({ form, set, toggleArray }) {
const tog = (field) => (val) => toggleArray(field, val);
return (
<div className="flex flex-col gap-6">
<div className="bg-[#edf3f8] border border-[#dce8f0] rounded-2xl px-6 py-4 text-sm text-[#1a3a5c] text-center font-medium">
100% voluntary. Will not affect your Medicaid eligibility.
</div>
<Section title="Screening Questions">
<div>
<label className={labelCls}>1. What is your current living situation today? *</label>
<select value={form.bk_living_situation || ""} onChange={e => set("bk_living_situation", e.target.value)} className={inputCls}>
<option value="">Select...</option>
{["Renting","Own","Shelter","Homeless"].map(o => <option key={o}>{o}</option>)}
</select>
</div>
<YesNo label="2. Do you struggle with paying for housing or find yourself falling behind on payments? *" value={form.bk_housing_struggle} onChange={v => set("bk_housing_struggle", v)} />
<YesNo label="3. Do you have any concerns about the quality of your housing? *" value={form.bk_housing_quality_concern} onChange={v => set("bk_housing_quality_concern", v)} />
<MultiCheck label="4. What specific housing issues are you experiencing? (select all that apply) *" options={HOUSING_ISSUES} selected={form.bk_housing_issues || []} onToggle={tog("bk_housing_issues")} />
<YesNo label="5. In the past 12 months has the electric, gas, oil, or water company threatened to shut off services in your home? *" value={form.bk_utility_shutoff} onChange={v => set("bk_utility_shutoff", v)} />
<MultiCheck label="6. Which of the following utility issues are you experiencing? (Select all that apply) *" options={UTILITY_ISSUES} selected={form.bk_utility_issues || []} onToggle={tog("bk_utility_issues")} />
<YesNo label="7. Do you currently receive any assistance for utilities through any existing programs with the city or state? *" value={form.bk_utility_assistance} onChange={v => set("bk_utility_assistance", v)} />
<MultiCheck label="8. Do any of the following issues apply to your household? *" options={HOUSEHOLD_ISSUES} selected={form.bk_household_issues || []} onToggle={tog("bk_household_issues")} />
<YesNo label="9. Do you need assistance finding or keeping work or a job? *" value={form.bk_needs_job_assistance} onChange={v => set("bk_needs_job_assistance", v)} />
<YesNo label="10. Do you want help with school or training (job training, GED, high school completion)? *" value={form.bk_wants_school_training} onChange={v => set("bk_wants_school_training", v)} />
<YesNo label="11. In the past 12 months has lack of reliable transportation kept you from medical appointments, meetings, work, or getting things needed for daily living? *" value={form.bk_transportation_barrier} onChange={v => set("bk_transportation_barrier", v)} />
<YesNo label="12. Do you receive SNAP (Food Stamps)? *" value={form.bk_receives_snap} onChange={v => set("bk_receives_snap", v)} />
<YesNo label="13. Do you receive TANF? *" value={form.bk_receives_tanf} onChange={v => set("bk_receives_tanf", v)} />
<YesNo label="14. Do you have any chronic illnesses or conditions (ex: diabetes, asthma)? *" value={form.bk_has_chronic_illness} onChange={v => set("bk_has_chronic_illness", v)} />
<YesNo label="15. Are there any other known health issues you may have? *" value={form.bk_other_health_issues} onChange={v => set("bk_other_health_issues", v)} />
<YesNo label="16. Are you enrolled in a Health Home? *" note="A New York State Health Home is a Medicaid care management program designed for people with complex medical, behavioral health, or social service needs." value={form.bk_enrolled_health_home} onChange={v => set("bk_enrolled_health_home", v)} />
<YesNo label="17. Do you have any medications that require refrigeration? *" value={form.bk_medications_require_refrigeration} onChange={v => set("bk_medications_require_refrigeration", v)} />
<YesNo label="18. (Women only) Are you pregnant or postpartum? *" value={form.bk_pregnant_or_postpartum} onChange={v => set("bk_pregnant_or_postpartum", v)} />
{form.bk_pregnant_or_postpartum === "Yes" && (
<div className="bg-[#edf3f8] border border-[#dce8f0] rounded-xl p-4 flex flex-col gap-3">
<p className="text-xs font-bold text-[#1a3a5c]">Please provide relevant date(s)</p>
<div>
<label className={labelCls}>Due Date (if pregnant)</label>
<input type="date" value={form.due_date || ""} onChange={e => set("due_date", e.target.value)} className={inputCls} />
</div>
<div>
<label className={labelCls}>Delivery / Birth Date (if postpartum)</label>
<input type="date" value={form.bk_postpartum_date || ""} onChange={e => set("bk_postpartum_date", e.target.value)} className={inputCls} />
</div>
</div>
)}
<YesNo label="19. Do you receive WIC? *" value={form.bk_receives_wic} onChange={v => set("bk_receives_wic", v)} />
<YesNo label="20. Are you currently receiving home-delivered meals or food services through a New York State (NYS) social services program? *" note="e.g. Meals on Wheels, home-delivered meals for seniors, or other food assistance programs offered by NYS" value={form.bk_receiving_home_delivered_meals} onChange={v => set("bk_receiving_home_delivered_meals", v)} />
<YesNo label="21. Are you on any housing waitlists or receive a rental subsidy? *" note="e.g., HUD, Section 8, local housing authority, or other voucher programs" value={form.bk_on_housing_waitlist} onChange={v => set("bk_on_housing_waitlist", v)} />
<YesNo label="22. Does the member have difficulty climbing stairs or bathing? *" value={form.bk_difficulty_stairs_bathing} onChange={v => set("bk_difficulty_stairs_bathing", v)} />
<YesNo label="23. Do you require refrigeration for breastmilk? *" value={form.bk_requires_breastmilk_refrigeration} onChange={v => set("bk_requires_breastmilk_refrigeration", v)} />
<div>
<label className={labelCls}>24. Do you prefer precooked meals or grocery boxes? *</label>
<p className="text-xs text-[#4a6a8a] mb-2">Note: Final determination is made by Medicaid based on medical necessity. We will do our best to accommodate your preference.</p>
<select value={form.bk_meal_preference || ""} onChange={e => set("bk_meal_preference", e.target.value)} className={inputCls}>
<option value="">Select...</option>
<option>Precooked Meals</option>
<option>Grocery Boxes</option>
<option>No Preference</option>
</select>
</div>
</Section>
<Section title="Food Allergies / Dietary Restrictions">
<YesNo label="1. Do you have food allergies? *" value={form.bk_food_allergies} onChange={v => set("bk_food_allergies", v)} />
{form.bk_food_allergies === "Yes" && (
<div>
<label className={labelCls}>Please describe your food allergies</label>
<input value={form.bk_food_allergy_details || ""} onChange={e => set("bk_food_allergy_details", e.target.value)} placeholder="e.g. peanuts, shellfish..." className={inputCls} />
</div>
)}
<YesNo label="2. Do you have dietary restrictions? *" value={form.bk_dietary_restrictions} onChange={v => set("bk_dietary_restrictions", v)} />
{form.bk_dietary_restrictions === "Yes" && (
<div>
<label className={labelCls}>Please describe your dietary restrictions</label>
<input value={form.bk_dietary_restriction_details || ""} onChange={e => set("bk_dietary_restriction_details", e.target.value)} placeholder="e.g. Kosher, Vegan, Gluten-Free..." className={inputCls} />
</div>
)}
</Section>
<Section title="Household Appliance / Cooking Needs">
<YesNo label="1. Does the household need a refrigerator? *" value={form.bk_needs_refrigerator} onChange={v => set("bk_needs_refrigerator", v)} />
<YesNo label="2. Does the household need a microwave? *" value={form.bk_needs_microwave} onChange={v => set("bk_needs_microwave", v)} />
<YesNo label="3. Does the household need cooking utensils or cooking supplies? *" value={form.bk_needs_cooking_supplies} onChange={v => set("bk_needs_cooking_supplies", v)} />
</Section>
<Section title="Additional Questions">
<YesNo label="1. Would having additional food support or help with groceries make things easier or reduce stress for you or your household? *" value={form.bk_food_support_helpful} onChange={v => set("bk_food_support_helpful", v)} />
<YesNo label="2. Do you feel your household could benefit from extra food assistance, meal support or help keeping enough food in the home consistently? *" value={form.bk_food_benefit_needed} onChange={v => set("bk_food_benefit_needed", v)} />
<YesNo label="3. Are you currently employed? *" value={form.bk_member_employed} onChange={v => set("bk_member_employed", v)} />
<div>
<label className={labelCls}>4. Is your spouse currently employed? *</label>
<select value={form.bk_spouse_employed || ""} onChange={e => set("bk_spouse_employed", e.target.value)} className={inputCls}>
<option value="">Select...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">Not Applicable</option>
</select>
</div>
<YesNo label="5. Do you receive income from any source? *" value={form.bk_has_income} onChange={v => set("bk_has_income", v)} />
<YesNo label="6. Do you have the ability to store and prepare food such as access to a refrigerator and stove? *" value={form.bk_can_store_food} onChange={v => set("bk_can_store_food", v)} />
<YesNo label="7. Are you currently receiving nutritional counseling or education provided through a New York State social services program? *" value={form.bk_receiving_nutrition_counseling} onChange={v => set("bk_receiving_nutrition_counseling", v)} />
<YesNo label="8. Do you currently need care to recover from an illness or injury, prepare for a surgery or procedure, or transition out of a hospital or other facility? *" value={form.bk_needs_recovery_care} onChange={v => set("bk_needs_recovery_care", v)} />
<YesNo label="9. Are you currently working with a housing provider or program? *" value={form.bk_working_with_housing_program} onChange={v => set("bk_working_with_housing_program", v)} />
<YesNo label="10. Do you participate in the Healthy Homes Program or any similar program provided by New York State to address home environmental health hazards? *" note="These programs help make your home safer by addressing issues like lead, paint, mold, or other environmental hazards." value={form.bk_healthy_homes_program} onChange={v => set("bk_healthy_homes_program", v)} />
</Section>
<Section title="Interpersonal Safety Questions">
<div>
<label className={labelCls}>1. How often does friends or family physically hurt you? *</label>
<select value={form.bk_safety_physically_hurt || ""} onChange={e => set("bk_safety_physically_hurt", e.target.value)} className={inputCls}>
<option value="">Select...</option>
{FREQ_OPTS.map(o => <option key={o}>{o}</option>)}
</select>
</div>
<div>
<label className={labelCls}>2. How often do friends or family insult or talk down to you? *</label>
<select value={form.bk_safety_insult || ""} onChange={e => set("bk_safety_insult", e.target.value)} className={inputCls}>
<option value="">Select...</option>
{FREQ_OPTS.map(o => <option key={o}>{o}</option>)}
</select>
</div>
<div>
<label className={labelCls}>3. How often do friends or family threaten you? *</label>
<select value={form.bk_safety_threaten || ""} onChange={e => set("bk_safety_threaten", e.target.value)} className={inputCls}>
<option value="">Select...</option>
{FREQ_OPTS.map(o => <option key={o}>{o}</option>)}
</select>
</div>
<div>
<label className={labelCls}>4. How often do friends or family yell or curse at you? *</label>
<select value={form.bk_safety_yell || ""} onChange={e => set("bk_safety_yell", e.target.value)} className={inputCls}>
<option value="">Select...</option>
{FREQ_OPTS.map(o => <option key={o}>{o}</option>)}
</select>
</div>
</Section>
</div>
);
}import { useRef, useState } from "react";
import SignaturePad from "./SignaturePad";
const inputCls = "w-full border border-[#dce8f0] rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-[#1a3a5c] bg-white";
const labelCls = "block text-sm font-semibold text-[#0d1e2e] mb-1";
function MemberFields({ index, member, onChange }) {
return (
<div className="bg-[#edf3f8] border border-[#dce8f0] rounded-xl p-4 flex flex-col gap-3">
<p className="text-xs font-bold text-[#1a3a5c]">Member {index + 1}</p>
<div className="grid sm:grid-cols-2 gap-3">
<div><label className={labelCls}>First Name *</label><input value={member.first_name || ""} onChange={e => onChange("first_name", e.target.value)} className={inputCls} /></div>
<div><label className={labelCls}>Last Name *</label><input value={member.last_name || ""} onChange={e => onChange("last_name", e.target.value)} className={inputCls} /></div>
</div>
<div><label className={labelCls}>Date of Birth *</label><input type="date" value={member.dob || ""} onChange={e => onChange("dob", e.target.value)} className={inputCls} /></div>
<div>
<label className={labelCls}>Relationship *</label>
<select value={member.relationship || ""} onChange={e => onChange("relationship", e.target.value)} className={inputCls}>
<option value="">Select...</option>
<option>Spouse</option><option>Mother</option><option>Child</option><option>Other</option>
</select>
</div>
<div><label className={labelCls}>Medicaid CIN *</label><input value={member.cin || ""} onChange={e => onChange("cin", e.target.value)} placeholder="e.g. AA12345B" className={inputCls} /></div>
</div>
);
}
export default function BrooklynAttestationPage({ form, set, onSubmit, loading }) {
const sigRef = useRef(null);
const [hipaaChecked, setHipaaChecked] = useState(false);
const [sigError, setSigError] = useState(false);
const [hipaaError, setHipaaError] = useState(false);
const numMembers = parseInt(form.household_members) || 0;
const updateMember = (index, field, value) => {
const updated = [...(form.household_member_details || [])];
if (!updated[index]) updated[index] = {};
updated[index] = { ...updated[index], [field]: value };
set("household_member_details", updated);
};
const handleMemberCountChange = (val) => {
set("household_members", val);
const count = parseInt(val) || 0;
const current = form.household_member_details || [];
if (count > current.length) {
set("household_member_details", [...current, ...Array(count - current.length).fill({})]);
} else {
set("household_member_details", current.slice(0, count));
}
};
const handleSubmit = (e) => {
e.preventDefault();
let valid = true;
if (!form.signature) { setSigError(true); valid = false; } else { setSigError(false); }
if (!hipaaChecked) { setHipaaError(true); valid = false; } else { setHipaaError(false); }
if (valid) onSubmit();
};
const applicantName = `${form.first_name || ""} ${form.last_name || ""}`.trim();
const memberLines = (form.household_member_details || []).map((m, i) => `${i + 1}. ${m.first_name || ""} ${m.last_name || ""}`.trim());
return (
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
<div className="bg-white rounded-2xl p-7 shadow-sm border border-[#dce8f0] flex flex-col gap-5">
<h2 className="text-xl font-extrabold text-[#0d1e2e]" style={{ fontFamily: "Georgia, serif" }}>Household Members</h2>
<div>
<label className={labelCls}>Number of Additional Household Members *</label>
<select value={form.household_members || ""} onChange={e => handleMemberCountChange(e.target.value)} className={inputCls}>
<option value="">Select...</option>
<option value="0">None</option>
{[1,2,3,4,5,6,7,8,9,10].map(n => <option key={n} value={n}>{n}</option>)}
</select>
</div>
{numMembers > 0 && (
<div className="flex flex-col gap-4">
<p className="text-sm font-semibold text-[#0d1e2e]">Household Member Details</p>
{Array.from({ length: numMembers }).map((_, i) => (
<MemberFields key={i} index={i} member={(form.household_member_details || [])[i] || {}} onChange={(field, value) => updateMember(i, field, value)} />
))}
</div>
)}
</div>
<div className="bg-white rounded-2xl p-7 shadow-sm border border-[#dce8f0] flex flex-col gap-4">
<h2 className="text-xl font-extrabold text-[#0d1e2e]" style={{ fontFamily: "Georgia, serif" }}>Household Attestation</h2>
<p className="text-sm text-[#0d1e2e] leading-relaxed">
I,{" "}
<input value={form.attestation_name || ""} onChange={e => set("attestation_name", e.target.value)} placeholder="Full Name"
className="inline-block border-b-2 border-[#1a3a5c] bg-transparent text-sm font-semibold text-[#0d1e2e] px-2 py-0.5 focus:outline-none w-48" />
{" "}, attest that the individuals listed below are members of my household.
</p>
<div className="bg-[#edf3f8] border border-[#dce8f0] rounded-xl p-4 text-sm text-[#0d1e2e]">
<p className="font-semibold mb-2">Household Members Listed:</p>
{applicantName && <p className="mb-1">• {applicantName} (Applicant)</p>}
{memberLines.length > 0 ? memberLines.map((line, i) => <p key={i} className="mb-1">• {line}</p>) : <p className="text-[#4a6a8a] italic text-xs">No additional members added.</p>}
</div>
<p className="text-sm text-[#0d1e2e]">I certify the above information is true and accurate.</p>
<div>
<label className={labelCls}>Electronic Signature *</label>
<SignaturePad ref={sigRef} onChange={v => { set("signature", v); if (v) setSigError(false); }} />
{sigError && <p className="text-xs text-red-500 mt-1">Signature is required.</p>}
<button type="button" onClick={() => { sigRef.current?.clear(); set("signature", ""); }} className="mt-2 text-xs text-[#1a3a5c] font-semibold underline">Clear Signature</button>
</div>
</div>
<div className="bg-white rounded-2xl p-7 shadow-sm border border-[#dce8f0] flex flex-col gap-4">
<h2 className="text-xl font-extrabold text-[#0d1e2e]" style={{ fontFamily: "Georgia, serif" }}>HIPAA Authorization & Privacy</h2>
<label className="flex items-start gap-3 cursor-pointer">
<input type="checkbox" checked={hipaaChecked} onChange={e => { setHipaaChecked(e.target.checked); if (e.target.checked) setHipaaError(false); }} className="accent-[#1a3a5c] mt-0.5 w-4 h-4 shrink-0" />
<span className="text-sm text-[#0d1e2e]">I authorize OHROS to securely process my health and household information to coordinate my SCN food benefits, and I agree to the <span className="text-[#1a3a5c] font-semibold">Privacy Policy</span>. *</span>
</label>
{hipaaError && <p className="text-xs text-red-500">You must accept the HIPAA authorization to proceed.</p>}
<p className="text-xs text-[#4a6a8a] bg-[#edf3f8] border border-[#dce8f0] rounded-xl px-4 py-3">Your information is protected by strict privacy and security laws.</p>
</div>
<button type="submit" disabled={loading} className="bg-[#1a3a5c] hover:bg-[#142d47] text-white font-extrabold px-8 py-4 rounded-2xl transition disabled:opacity-60 text-center">
{loading ? "Submitting..." : "Submit Application"}
</button>
</form>
);
}import { useRef, useEffect, useState, forwardRef, useImperativeHandle } from "react";
const SignaturePad = forwardRef(function SignaturePad({ onChange }, ref) {
const canvasRef = useRef(null);
const drawing = useRef(false);
const [isEmpty, setIsEmpty] = useState(true);
useImperativeHandle(ref, () => ({
clear() {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
setIsEmpty(true);
onChange("");
},
toDataURL() { return canvasRef.current.toDataURL(); }
}));
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "#1a0a04";
ctx.lineWidth = 2;
ctx.lineCap = "round";
const getPos = (e) => {
const rect = canvas.getBoundingClientRect();
const src = e.touches ? e.touches[0] : e;
return { x: src.clientX - rect.left, y: src.clientY - rect.top };
};
const start = (e) => { e.preventDefault(); drawing.current = true; const { x, y } = getPos(e); ctx.beginPath(); ctx.moveTo(x, y); };
const move = (e) => { e.preventDefault(); if (!drawing.current) return; const { x, y } = getPos(e); ctx.lineTo(x, y); ctx.stroke(); setIsEmpty(false); };
const end = () => { drawing.current = false; if (!isEmpty) onChange(canvas.toDataURL()); };
canvas.addEventListener("mousedown", start);
canvas.addEventListener("mousemove", move);
canvas.addEventListener("mouseup", end);
canvas.addEventListener("mouseleave", end);
canvas.addEventListener("touchstart", start, { passive: false });
canvas.addEventListener("touchmove", move, { passive: false });
canvas.addEventListener("touchend", end);
return () => {
canvas.removeEventListener("mousedown", start);
canvas.removeEventListener("mousemove", move);
canvas.removeEventListener("mouseup", end);
canvas.removeEventListener("mouseleave", end);
canvas.removeEventListener("touchstart", start);
canvas.removeEventListener("touchmove", move);
canvas.removeEventListener("touchend", end);
};
}, [isEmpty, onChange]);
return (
<div>
<canvas ref={canvasRef} width={560} height={140}
className="w-full border-2 border-dashed border-[#c0392b] rounded-xl bg-white touch-none cursor-crosshair"
style={{ maxHeight: 140 }}
/>
{isEmpty && <p className="text-xs text-[#7a4a2a] mt-1 text-center">Sign above using your mouse or finger</p>}
</div>
);
});
export default SignaturePad;