// Shared record-entry forms (AccountForm, TaskForm, CommForm) — mounted from
// modals in several views, so they live together as components, not a view.
const AccountForm = ({ onSubmit, onCancel, initial = {}, onDirtyChange }) => {
const blankPerson = () => ({ first_name: '', last_name: '', email: '', phone: '', title: '' });
const [form, setForm] = React.useState({
name: '', first_name: '', last_name: '', type: 'business', main_email: '', main_phone: '',
notes: '', callback_date: '', callback_note: '', parent_account_id: '',
// New business accounts open with ONE person's card already there — the
// common case is "the business and the person I talked to", so the
// fields are waiting, not behind a button (owner's call 2026-08-22). An
// untouched card is dropped on submit, never sent.
contacts: initial.id ? [] : [blankPerson()],
...initial,
// Pre-0011 records may still say 'organization' — normalize on edit.
...(initial.type === 'organization' ? { type: 'business' } : {}),
// Columns are NULL until first save — inputs need strings.
...(initial.first_name == null && initial.id ? { first_name: '' } : {}),
...(initial.last_name == null && initial.id ? { last_name: '' } : {}),
...(initial.callback_note == null && initial.id ? { callback_note: '' } : {}),
});
const [error, setError] = React.useState('');
const [saving, setSaving] = React.useState(false);
// Dirty = the form differs from what it opened with. Drives the save bar
// (muted when clean, lit when there's something to save) and lets the
// host guard navigation so edits can't silently evaporate.
const pristine = React.useRef(null);
if (pristine.current === null) pristine.current = JSON.stringify(form);
const dirty = JSON.stringify(form) !== pristine.current;
React.useEffect(() => { onDirtyChange?.(dirty); }, [dirty]);
React.useEffect(() => () => onDirtyChange?.(false), []); // unmount = nothing pending
const set = (key) => (e) => setForm(p => ({ ...p, [key]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }));
const setPerson = (i, key) => (e) => setForm(p => ({
...p, contacts: p.contacts.map((c, j) => j === i ? { ...c, [key]: e.target.value } : c),
}));
const addPerson = () => setForm(p => ({ ...p, contacts: [...p.contacts, blankPerson()] }));
// Removing the last card leaves a fresh blank one — the section never
// collapses to "nothing here, find the button".
const removePerson = (i) => setForm(p => {
const next = p.contacts.filter((_, j) => j !== i);
return { ...p, contacts: next.length ? next : [blankPerson()] };
});
const isPersonal = form.type === 'personal';
const isNew = !initial.id;
const handleSubmit = async (e) => {
e.preventDefault();
setSaving(true); setError('');
try {
// A person has no parent org — relationships to businesses are links.
// People submit first/last (display name is server-derived);
// businesses submit name (server clears any stale person fields).
const { name, first_name, last_name, contacts, ...rest } = form;
// People typed on the create form ride along (business only, new
// only — existing accounts add people on their Contacts tab). Cards
// with no first name are dropped, not sent: the always-present blank
// card shouldn't block saving.
const people = (isNew && !isPersonal)
? contacts.filter(c => c.first_name && c.first_name.trim()) : null;
await onSubmit({
...rest,
// A note without a date is a note to nobody — it only saves with one.
callback_note: form.callback_date ? (form.callback_note || null) : null,
...(isPersonal ? { first_name, last_name } : { name }),
parent_account_id: !isPersonal && form.parent_account_id
? parseInt(form.parent_account_id) : null,
...(people && people.length ? { contacts: people } : {}),
});
}
catch (err) { setError(err.message); setSaving(false); }
};
// One button group, rendered at the TOP for edits (a long form buried
// Save below the fold — owner, 2026-08-25) and at the bottom for creates
// (short path, reads as a natural end). Sticky so it stays reachable.
const buttons = (