/* SER-OS — My Contacts ────────────────────────────────────────────────────────────────── Customer contact directory for funeral directors: - Search by name / phone / email / address - Tag-click filtering - Card and List view - Create contact via modal - Each contact shows linked-case count and can start a new case ────────────────────────────────────────────────────────────────── */ function ContactsScreen({ contacts, cases, onOpenContact, onCreateContact, onEditContact, onDeleteContact, onStartCaseWith, }) { const [view, setView] = React.useState("card"); const [q, setQ] = React.useState(""); const [activeTag, setActiveTag] = React.useState(null); const toggleTag = (tag) => setActiveTag((t) => t === tag ? null : tag); const filtered = contacts.filter((c) => { const matchesTag = !activeTag || (c.tags || []).includes(activeTag); if (!q) return matchesTag; const hay = `${c.name} ${c.phone || ""} ${c.mobile || ""} ${c.email || ""} ${c.address || ""} ${(c.tags||[]).join(" ")}`.toLowerCase(); return hay.includes(q.toLowerCase()) && matchesTag; }); return (

My Contacts

Customer contacts selected when starting a new arrangement.

} placeholder="Search contacts by name, phone, email, or address..." value={q} onChange={(e) => setQ(e.target.value)} style={{ flex: "1 1 320px", minWidth: 240 }} />
setView("card")} icon={} label="Card" /> setView("list")} icon={} label="List" />
{/* Active tag filter chip */} {activeTag && (
Filtered by:
)} {filtered.length === 0 ? ( { setQ(""); setActiveTag(null); }} /> ) : view === "card" ? (
{filtered.map(c => ( onOpenContact && onOpenContact(c.id)} onStartCase={() => onStartCaseWith && onStartCaseWith(c)} onTagClick={toggleTag} activeTag={activeTag} /> ))}
) : ( onOpenContact && onOpenContact(c.id)} onStartCase={(c) => onStartCaseWith && onStartCaseWith(c)} /> )}
); } /* ───────────────────── Contact Card ───────────────────── */ function ContactCard({ contact, cases, onView, onStartCase, onTagClick, activeTag }) { const c = contact; const linked = getLinkedCasesForContact(c, cases); const updatedDisplay = c.updatedAt ? relativeTime(c.updatedAt) : "—"; const addressLines = splitAddress(c.address); return (
{/* Top: Avatar + Name */}

{c.name}

{/* Middle: Phone, email, address — always rendered (– when empty) so every card keeps the same three-row height and the footer stays pinned to a consistent baseline. */}
{(c.mobile || c.phone) ? fmtPhone(c.mobile || c.phone) : "–"}
{c.email || "–"}
0 ? "#6B7A8F" : "#C8D0DA", lineHeight: "18px" }}> {addressLines.length > 0 ? addressLines.slice(0, 2).join(", ") + (addressLines.length > 2 ? "…" : "") : "–"}
{/* Tags — always rendered (– when none) to hold position */}
{c.tags && c.tags.length > 0 ? ( c.tags.map(t => ( onTagClick && onTagClick(t)}> {t} )) ) : ( – )}
{/* Footer: meta + dual CTAs — pinned to the card bottom via marginTop:auto */}
{linked.length === 0 ? "No linked cases" : linked.length === 1 ? "1 linked case" : `${linked.length} linked cases`} · {updatedDisplay}
); } /* ───────────────────── List view ───────────────────── */ function ContactListView({ contacts, cases, onView, onStartCase }) { return (
NamePhone / EmailAddressCases
{contacts.map((c, i) => { const linked = getLinkedCasesForContact(c, cases); return (
{fmtPhone(c.mobile || c.phone) || "—"} {c.email && {c.email}}
{splitAddress(c.address)[0] || "—"} {linked.length === 0 ? "—" : `${linked.length}`}
); })}
); } /* ───────────────────── Empty state ───────────────────── */ function ContactsEmptyState({ hasSearch, onCreate, onClear }) { return (

{hasSearch ? "No contacts match your filters" : "No contacts yet"}

{hasSearch ? "Try a different name, phone number, or clear the tag filter." : "Add customer contacts here. They are selectable when starting a new arrangement."}

{hasSearch ? ( ) : ( )}
); } /* ───────────────────── Create contact form ───────────────────── */ function ContactFormModal({ open, contact, onClose, onSave }) { /* Address is captured as discrete Odoo res.partner fields (street, street2, city, zip, country) and composed into a single `address` string on save so the rest of the app keeps working. */ const blank = { type: "individual", category: "family", name: "", phone: "", mobile: "", email: "", street: "", street2: "", city: "", zip: "", country: "Singapore", address: "", tags: [], notes: "", }; const [draft, setDraft] = React.useState(blank); const [tagDraft, setTagDraft] = React.useState(""); React.useEffect(() => { if (open) { if (contact) { // Pre-fill structured address fields; fall back to splitting an // existing flat `address` string when the contact predates them. let seed = { ...blank, ...contact, tags: [...(contact.tags || [])] }; const hasStructured = contact.street || contact.street2 || contact.zip || contact.city; if (!hasStructured && contact.address) { const parts = splitAddress(contact.address); seed.street = parts[0] || ""; seed.street2 = parts[1] || ""; // Last part often "Singapore 560234" or "560234" const tail = parts.slice(2).join(" "); const zipMatch = tail.match(/\b(\d{5,6})\b/); seed.zip = zipMatch ? zipMatch[1] : ""; seed.country = /singapore/i.test(tail) ? "Singapore" : (seed.country || "Singapore"); } setDraft(seed); } else { setDraft(blank); } setTagDraft(""); } }, [open, contact]); // eslint-disable-line react-hooks/exhaustive-deps if (!open) return null; const set = (patch) => setDraft((d) => ({ ...d, ...patch })); const canSave = draft.name.trim() && (draft.phone.trim() || draft.mobile.trim()); // Compose the structured address fields into a single display string, // then hand the full draft (structured + composed) to onSave. const composeAddress = (d) => { return [d.street, d.street2, [d.zip, d.country].filter(Boolean).join(" ")] .map((s) => (s || "").trim()) .filter(Boolean) .join("\n"); }; const handleSave = () => { if (!canSave) return; onSave({ ...draft, type: "individual", address: composeAddress(draft) }); }; const addTag = () => { const t = tagDraft.trim(); if (!t || draft.tags.includes(t)) { setTagDraft(""); return; } set({ tags: [...draft.tags, t] }); setTagDraft(""); }; const removeTag = (t) => set({ tags: draft.tags.filter((x) => x !== t) }); return ( {/* ── Contact Information ─────────────────────────────── */} set({ name: e.target.value })} placeholder="Enter full name" /> {/* Phone + Mobile side by side — each gets full column width so the country code (88px) + number stay on one row, never wrapping. */}
set({ phone: e.target.value })} placeholder="81234567" /> set({ mobile: e.target.value })} placeholder="81234567" />
set({ email: e.target.value })} placeholder="name@email.com" /> {/* ── Address — single label, placeholder-only inputs (Odoo style) ── */}
set({ street: e.target.value })} placeholder="Street" /> set({ street2: e.target.value })} placeholder="Street 2" />
set({ zip: e.target.value })} placeholder="Postal Code" /> set({ city: e.target.value })} placeholder="City" />
set({ country: e.target.value })} placeholder="Country" />
{/* ── Additional Information ──────────────────────────── */}
setTagDraft(e.target.value)} placeholder="Add a tag and press Enter" style={{ flex: 1 }} />
{draft.tags.length > 0 && (
{draft.tags.map(t => removeTag(t)}>{t})}
)}