e.target === e.currentTarget && onCancel()}>\n

{title}

\n \n ×\n \n

\n\n

\n {type === \"payee_rename\"\n ? \"If any condition matches → rename the payee. First matching rule wins.\"\n : \"If any condition matches → assign the category. Last matching rule wins.\"}\n

\n\n {/* Conditions */}\n

\n Conditions (OR)\n

\n {conditions.map((cond, i) => (\n

\n {i > 0 && (\n \n OR\n \n )}\n {i === 0 &&

}\n updateCondition(i, { field: e.target.value as \"payee\" | \"notes\" })}\n style={selectStyle}\n >\n \n \n \n contains\n updateCondition(i, { contains: e.target.value })}\n placeholder=\"e.g. Starbucks\"\n style={{ ...inputStyle, flex: 1 }}\n />\n {conditions.length > 1 && (\n removeCondition(i)}\n style={{ background: \"none\", border: \"none\", color: \"var(--text-muted)\", cursor: \"pointer\", fontSize: 16, padding: \"0 4px\" }}\n >\n ×\n \n )}\n

\n ))}\n setConditions((prev) => [...prev, { field: \"payee\", contains: \"\" }])}\n style={{ fontSize: 12, color: \"var(--primary)\", background: \"none\", border: \"none\", cursor: \"pointer\", padding: \"4px 0\" }}\n >\n + Add condition (OR)\n \n

\n\n {/* Action */}\n

\n {type === \"payee_rename\" ? \"Then rename payee to\" : \"Then set category to\"}\n

\n {type === \"payee_rename\" ? (\n setActionValue(e.target.value)}\n placeholder=\"e.g. Starbucks\"\n style={{ ...inputStyle, width: \"100%\" }}\n />\n ) : (\n setActionValue(e.target.value)}\n style={{ ...selectStyle, width: \"100%\" }}\n >\n \n {ALL_CATEGORIES.filter((c) => c !== \"Uncategorized\").map((cat) => (\n \n ))}\n \n )}\n

\n\n {error && (\n

{error}

\n )}\n\n

\n \n \n

\n );\n}\n\n// ---------------------------------------------------------------------------\n// Recategorize prompt modal\n// ---------------------------------------------------------------------------\n\nfunction RecategorizePrompt({\n onApply,\n onSkip,\n applying,\n}: {\n onApply: () => void;\n onSkip: () => void;\n applying: boolean;\n}) {\n return (\n

Apply to history?

\n Would you like to re-categorize your existing transactions using the updated rules?\n Only transactions you haven't manually categorized will be affected.\n

\n \n \n

\n );\n}\n\n// ---------------------------------------------------------------------------\n// Shared inline styles\n// ---------------------------------------------------------------------------\n\nconst inputStyle: React.CSSProperties = {\n padding: \"7px 10px\",\n background: \"var(--bg-base)\",\n border: \"1px solid var(--border)\",\n borderRadius: 7,\n color: \"var(--text)\",\n fontSize: 13,\n outline: \"none\",\n};\n\nconst selectStyle: React.CSSProperties = {\n ...inputStyle,\n cursor: \"pointer\",\n};\n\n// ---------------------------------------------------------------------------\n// Rule row\n// ---------------------------------------------------------------------------\n\nfunction RuleRow({\n rule,\n actionLabel,\n actionValue,\n onEdit,\n onDelete,\n}: {\n rule: StoredRule;\n actionLabel: string;\n actionValue: string;\n onEdit: () => void;\n onDelete: () => void;\n}) {\n return (\n \n

\n {rule.conditions.map((cond, i) => (\n \n {i > 0 && (\n OR\n )}\n \n {cond.field}:\n \"{cond.contains}\"\n \n \n ))}\n

\n \n \n

\n →\n {actionLabel}\n \n {actionValue}\n \n

\n );\n}\n\nconst iconBtnStyle: React.CSSProperties = {\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n padding: \"2px 5px\",\n borderRadius: 5,\n fontSize: 13,\n opacity: 0.6,\n};\n\n// ---------------------------------------------------------------------------\n// Section wrapper\n// ---------------------------------------------------------------------------\n\nfunction Section({\n title,\n description,\n onAdd,\n children,\n}: {\n title: string;\n description: string;\n onAdd: () => void;\n children: React.ReactNode;\n}) {\n return (\n

{title}

\n \n + Add rule\n \n

{description}

\n {children}\n

\n );\n}\n\n// ---------------------------------------------------------------------------\n// Main Rules component\n// ---------------------------------------------------------------------------\n\nexport function Rules() {\n const [rules, setRules] = useState(null);\n const [loading, setLoading] = useState(true);\n const [editState, setEditState] = useState(null);\n const [showRecategorize, setShowRecategorize] = useState(false);\n const [applying, setApplying] = useState(false);\n\n const loadRules = useCallback(async () => {\n const res = await fetch(\"/api/rules\");\n const data = await res.json();\n setRules(data);\n setLoading(false);\n }, []);\n\n useEffect(() => { loadRules(); }, []);\n\n const handleSave = useCallback(async (\n type: RuleType,\n conditions: Condition[],\n actionValue: string,\n id?: number,\n ) => {\n const action = type === \"payee_rename\"\n ? { setPayee: actionValue }\n : { setCategory: actionValue };\n\n if (id != null) {\n await fetch(`/api/rules/${id}`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ conditions, action }),\n });\n } else {\n await fetch(\"/api/rules\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ type, conditions, action }),\n });\n }\n\n setEditState(null);\n await loadRules();\n setShowRecategorize(true);\n }, [loadRules]);\n\n const handleDelete = useCallback(async (id: number) => {\n await fetch(`/api/rules/${id}`, { method: \"DELETE\" });\n await loadRules();\n setShowRecategorize(true);\n }, [loadRules]);\n\n const handleApplyToHistory = useCallback(async () => {\n setApplying(true);\n await fetch(\"/api/rules/recategorize\", { method: \"POST\" });\n setApplying(false);\n setShowRecategorize(false);\n }, []);\n\n if (loading) {\n return (\n

\n \n

\n );\n }\n\n if (!rules) return null;\n\n return (\n <>\n setEditState({ mode: \"create\", type: \"payee_rename\" })}\n >\n {rules.payeeRenameRules.length === 0 ? (\n

No rules yet.

\n ) : (\n rules.payeeRenameRules.map((rule) => (\n setEditState({ mode: \"edit\", rule })}\n onDelete={() => handleDelete(rule.id)}\n />\n ))\n )}\n \n\n setEditState({ mode: \"create\", type: \"category\" })}\n >\n {rules.categoryRules.length === 0 ? (\n

No rules yet.

\n ) : (\n rules.categoryRules.map((rule) => (\n setEditState({ mode: \"edit\", rule })}\n onDelete={() => handleDelete(rule.id)}\n />\n ))\n )}\n \n\n

Transfer Detection

\n Transactions matching these are flagged as internal transfers and excluded from spending.\n

Categories:

\n {rules.transferCategories.map((c) => (\n {c}\n ))}\n

Payees:

\n {rules.transferPayees.map((p) => (\n {p}\n ))}\n

\n\n {editState && (\n setEditState(null)}\n />\n )}\n\n {showRecategorize && (\n setShowRecategorize(false)}\n applying={applying}\n />\n )}\n \n );\n}\n","deleted","label",[180,181,161],"frontend","components","permalink","https://www.val.town/x/shapedlines/runway/code/frontend/components/Rules.tsx","extension","actionData","errors"]