\n {label}\n {children}\n

\n );\n}\n\nfunction Section({\n title,\n checked,\n onToggle,\n children,\n}: {\n title: string;\n checked?: boolean;\n onToggle?: () => void;\n children: ReactNode;\n}) {\n return (\n

\n {onToggle !== undefined && (\n \n )}\n

\n {title}\n

\n {children}\n

\n );\n}\n\n// ---------------------------------------------------------------------------\n// Cutoff type options (income and age share the same set)\n// ---------------------------------------------------------------------------\n\nconst CUTOFF_OPTIONS: Array<{ value: CutoffType; label: string }> = [\n { value: \"<\", label: \"< (strictly less than)\" },\n { value: \"<=\", label: \"≤ (less than or equal to)\" },\n { value: \">\", label: \"> (strictly greater than)\" },\n { value: \">=\", label: \"≥ (greater than or equal to)\" },\n { value: \"lte_lt\", label: \"Range: lower ≤ X < upper\" },\n { value: \"lt_lte\", label: \"Range: lower < X ≤ upper\" },\n];\n\nfunction isRange(t: CutoffType) {\n return t === \"lte_lt\" || t === \"lt_lte\";\n}\n\n// ---------------------------------------------------------------------------\n// Immutable deep-update helper\n// ---------------------------------------------------------------------------\n\nfunction deepSet(obj: unknown, path: string[], value: unknown): unknown {\n if (path.length === 0) return value;\n const [head, ...rest] = path;\n const copy = Array.isArray(obj) ? [...(obj as unknown[])] : { ...(obj as Record) };\n (copy as Record)[head] = deepSet(\n (obj as Record)[head],\n rest,\n value\n );\n return copy;\n}\n\n// ---------------------------------------------------------------------------\n// ConfigPanel\n// ---------------------------------------------------------------------------\n\nexport default function ConfigPanel({\n config,\n onChange,\n}: {\n config: RuleConfig;\n onChange: (c: RuleConfig) => void;\n}) {\n const [newZip, setNewZip] = useState(\"\");\n\n function update(path: string[], value: unknown) {\n onChange(deepSet(config, path, value) as RuleConfig);\n }\n\n function addZip() {\n const zip = newZip.trim();\n if (zip.length !== 5 || !/^\\d{5}$/.test(zip)) return;\n if (config.location.zipCodes.includes(zip)) {\n setNewZip(\"\");\n return;\n }\n update([\"location\", \"zipCodes\"], [...config.location.zipCodes, zip]);\n setNewZip(\"\");\n }\n\n function removeZip(zip: string) {\n update(\n [\"location\", \"zipCodes\"],\n config.location.zipCodes.filter((z) => z !== zip)\n );\n }\n\n const incomeIsRange = isRange(config.income.cutoffType);\n const ageIsRange = isRange(config.age.cutoffType);\n const selectedBenefitCount = Object.values(config.benefits).filter(Boolean).length;\n\n return (\n

\n {/* ── General ── */}\n

\n \n \n update([\"program\"], (e.target as HTMLInputElement).value)\n }\n placeholder=\"e.g. CHIP, Medicaid, WIC\"\n />\n \n\n

\n \n \n update(\n [\"numAdults\"],\n Math.max(0, parseInt((e.target as HTMLInputElement).value) || 0)\n )\n }\n />\n \n \n \n update(\n [\"numChildren\"],\n Math.max(0, parseInt((e.target as HTMLInputElement).value) || 0)\n )\n }\n />\n \n

\n\n \n

\n {[true, false].map((val) => (\n \n update([\"householdWorking\"], val)}\n className=\"accent-indigo-600\"\n />\n {val ? \"Yes\" : \"No\"}\n \n ))}\n

\n \n

\n\n {/* ── Location ── */}\n

\n setNewZip((e.target as HTMLInputElement).value)}\n placeholder=\"5-digit ZIP\"\n maxLength={5}\n onKeyDown={(e) => e.key === \"Enter\" && addZip()}\n />\n \n Add\n \n

\n\n

\n {config.location.zipCodes.length === 0 ? (\n \n No valid ZIPs added yet\n \n ) : (\n config.location.zipCodes.map((zip) => (\n \n {zip}\n removeZip(zip)}\n className=\"text-indigo-400 hover:text-red-500 font-bold leading-none\"\n >\n ×\n \n \n ))\n )}\n

\n\n \n \n update(\n [\"location\", \"includeInvalidZip\"],\n (e.target as HTMLInputElement).checked\n )\n }\n className=\"w-4 h-4 accent-indigo-600\"\n />\n Include invalid ZIP test case (00000)\n \n

\n\n {/* ── Income ── */}\n update([\"income\", \"enabled\"], !config.income.enabled)}\n >\n {config.income.enabled && (\n <>\n \n

\n {([2025, 2026] as FPLYear[]).map((yr) => (\n \n update([\"income\", \"fplYear\"], yr)}\n className=\"accent-indigo-600\"\n />\n {yr}\n \n ))}\n

\n \n\n \n

\n \n update(\n [\"income\", \"fplPercent\"],\n parseInt((e.target as HTMLInputElement).value) || 100\n )\n }\n />\n % FPL\n

\n \n\n \n \n update(\n [\"income\", \"cutoffType\"],\n (e.target as HTMLSelectElement).value as CutoffType\n )\n }\n >\n {CUTOFF_OPTIONS.map((o) => (\n \n ))}\n \n \n\n {incomeIsRange && (\n \n

\n \n update(\n [\"income\", \"fplPercent2\"],\n parseInt((e.target as HTMLInputElement).value) || 150\n )\n }\n />\n % FPL\n

\n \n )}\n\n

\n Generates 3 income boundary test cases per permutation\n

\n \n )}\n \n\n {/* ── Age ── */}\n update([\"age\", \"enabled\"], !config.age.enabled)}\n >\n {config.age.enabled && (\n <>\n \n \n update(\n [\"age\", \"ageValue\"],\n parseInt((e.target as HTMLInputElement).value) || 0\n )\n }\n />\n \n\n \n \n update(\n [\"age\", \"cutoffType\"],\n (e.target as HTMLSelectElement).value as CutoffType\n )\n }\n >\n {CUTOFF_OPTIONS.map((o) => (\n \n ))}\n \n \n\n {ageIsRange && (\n \n \n update(\n [\"age\", \"ageValue2\"],\n parseInt((e.target as HTMLInputElement).value) || 0\n )\n }\n />\n \n )}\n\n \n \n update(\n [\"age\", \"referenceDateType\"],\n (e.target as HTMLSelectElement).value\n )\n }\n >\n \n \n \n \n\n {config.age.referenceDateType === \"specific-date\" && (\n

\n \n \n update(\n [\"age\", \"referenceMonth\"],\n Math.min(12, Math.max(1, parseInt((e.target as HTMLInputElement).value) || 12))\n )\n }\n />\n \n \n \n update(\n [\"age\", \"referenceDay\"],\n Math.min(31, Math.max(1, parseInt((e.target as HTMLInputElement).value) || 31))\n )\n }\n />\n \n

\n )}\n\n

\n DOBs auto-derived from boundary ages at reference date\n

\n \n )}\n \n\n {/* ── Pregnant ── */}\n

\n \n \n update(\n [\"pregnant\", \"enabled\"],\n (e.target as HTMLInputElement).checked\n )\n }\n className=\"w-4 h-4 accent-indigo-600\"\n />\n Test pregnant scenarios (×2 per permutation)\n \n

\n\n {/* ── Ancillary Benefits ── */}\n

\n {(\n [\n { key: \"publicBenefits\", label: \"Eligible for TANF, SSI, or SNAP\" },\n { key: \"homelessness\", label: \"Experiencing Homelessness\" },\n { key: \"fosterCare\", label: \"In Foster Care\" },\n ] as Array<{ key: keyof typeof config.benefits; label: string }>\n ).map(({ key, label }) => (\n \n \n update(\n [\"benefits\", key],\n (e.target as HTMLInputElement).checked\n )\n }\n className=\"w-4 h-4 accent-indigo-600\"\n />\n {label}\n \n ))}\n

\n\n {selectedBenefitCount > 0 && (\n

\n 2^{{selectedBenefitCount}} ={\" \"}\n {Math.pow(2, selectedBenefitCount)} benefit\n combinations per permutation\n

\n )}\n

\n );\n}\n","deleted","label",[180,181,161],"frontend","components","permalink","https://www.val.town/x/shapedlines/testcase-generator/code/frontend/components/ConfigPanel.tsx","extension","actionData","errors"]