/* SER-OS — Service Summary ────────────────────────────────────────────────────────────────── Odoo Sales Order–aligned data capture. Each input maps 1:1 to an Odoo res.partner / sale.order field — see the trailing comments on `SERVICE_DATA_BLANK` for the mapping table. Tab structure mirrors Odoo (with Family Tree kept as its own tab to avoid an excessively long Care Information page): • Care Information — always • Family Tree — Fountains only • Funeral Arrangement — always (incl. Disposition & Final Resting) • Pastoral Care — Serenity + (Christian or Catholic) ────────────────────────────────────────────────────────────────── */ const SERVICE_TABS = [ { id: "care", label: "Care Information", visible: () => true }, { id: "tree", label: "Family Tree", visible: ({ workspace }) => workspace === "fountains" }, { id: "funeral", label: "Funeral Arrangement", visible: () => true }, { id: "pastoral", label: "Pastoral Care", visible: ({ workspace, religion }) => workspace === "serenity" && /christian|catholic/i.test(religion || "") }]; function visibleTabs(ctx) {return SERVICE_TABS.filter((t) => t.visible(ctx));} /* ──────────────────────────────────────────────────── Empty data shape — Odoo field mapping in comments. ──────────────────────────────────────────────────── */ function makeBlankServiceData() { const today = new Date(); const todayISO = today.toISOString().slice(0, 10); const defaultEnd = new Date(today); defaultEnd.setDate(defaultEnd.getDate() + 2); // 3-day duration const defaultEndISO = defaultEnd.toISOString().slice(0, 10); return { /* ── Deceased Profile ──────────────────────────── */ salutations: "", // sale.order → x_salutations (Selection) deceasedName: "", // sale.order → x_deceased_name (Char) *required gender: "", // sale.order → x_gender (Selection: M / F / Prefer not to mention) maritalStatus: "", // sale.order → x_marital_status (Selection S/M/D/W — Fountains) religion: "", // sale.order → x_religion_id (Selection, brand-specific) *required dialect: "", // sale.order → x_dialect (Selection — Fountains) /* ── Life Information ──────────────────────────── */ dateOfDeath: todayISO, // sale.order → x_date_of_death (Date) *required timeOfDeath: "", // sale.order → x_time_of_death (Char/DateTime — paired with date) dateOfBirth: "", // res.partner → birthdate (Date) age: "", // sale.order → x_age (Integer) /* ── Preparation & Care ────────────────────────── */ transferLocationType: "", // Hospital | Home | Hospice | Nursing Home | Coroner | Other transferLocationHospital: "", // when type = Hospital transferLocationHospice: "", // when type = Hospice transferLocationRemarks: "", // when type = Home | Nursing Home | Coroner | Other transferLocation: "", // legacy / computed display value embalmingOptions: [], // sale.order → x_embalming (Multi-select) embalmingRemarks: "", // sale.order → x_embalming_remarks (Text) /* ── Case Contacts (Many2one → res.partner) ────── */ primaryRelationship: "", // sale.order → x_relationship_1 (Selection) primaryContactId: null, // sale.order → x_family_contact_1 (Many2one → res.partner) primaryContactEmail: "", // derived from contact email; editable override secondaryRelationship: "", // sale.order → x_relationship_2 (Selection) secondaryContactId: null, // sale.order → x_family_contact_2 (Many2one → res.partner) secondaryContactEmail: "", // derived from contact email; editable override /* ── Family Record — Fountains only ────────────── */ survivingSpouse: "", // sale.order → x_surviving_spouse (Char Y/N) survivingParents: "", // sale.order → x_surviving_parents (Char Y/N) /* ── Family Tree — Fountains only ────────────── */ family: { children: { son: 0, daughter: 0, sonInLaw: 0, daughterInLaw: 0 }, siblings: { elderBrother: 0, youngerBrother: 0, elderSister: 0, youngerSister: 0, elderBrotherInLaw: 0, youngerBrotherInLaw: 0, elderSisterInLaw: 0, youngerSisterInLaw: 0 }, paternal: { elderGrandson: 0, grandson: 0, grandsonInLaw: 0, elderGranddaughterInLaw: 0, granddaughter: 0, granddaughterInLaw: 0, greatGrandson: 0 }, maternal: { grandson: 0, granddaughter: 0, granddaughterInLaw: 0, grandsonInLaw: 0, greatGrandson: 0 } }, /* ── Funeral Arrangement — Wake Details ────────── */ wakeVenueType: "", // Parlour | Church | HDB | Others wakeVenueParlour: "", // when type = Parlour wakeVenueChurch: "", // when type = Church (Serenity only) wakeVenueRemarks: "", // when type = HDB | Others wakeVenue: "", // legacy / computed display value wakeStartDate: todayISO, // sale.order → x_wake_start_date (Date) wakeEndDate: defaultEndISO, // sale.order → x_wake_end_date (Date) wakeDuration: "3", // sale.order → x_wake_duration (Integer days, default 3) visitingHours: "", // sale.order → x_visiting_hours (Char) /* ── Funeral Arrangement — Final Resting Information ── */ cremationOrBurial: "", // header — picks Cremation or Burial flow *required dispositionDate: "", // sale.order → x_cremation_date (Date) cremationLocation: "", // sale.order → x_cremation_location (Selection) burialLocation: "", // sale.order → x_burial_location (Selection) restingArrangement: "", // sale.order → x_resting_arrangement (Selection — Land/Sea/Columbarium/Home/Others) finalRestingLocation: "", // sale.order → x_final_resting_location (Selection) finalRestingLocationOthers: "", // sale.order → x_final_resting_location_others (Char — shown when arrangement or location = Others) finalRestingDate: "", // sale.order → x_final_resting_dt (DateTime) prayerService: [], // sale.order → x_prayer_service (Multi-select) prayerServiceOthers: "", // free-text when prayer service "others" is selected ancestorTabletLocation: "", // sale.order → x_ancestor_tablet_location (Char — Fountains) jilingAnlingRemarks: "", // sale.order → x_jiling_anling_remarks (Text — Fountains) dispositionRemarks: "", // sale.order → x_columbarium_remarks (Text) /* ── Pastoral Care — Serenity + Christian/Catholic ── */ church: "", // sale.order → x_church (Char — Christian) pastor: "", // sale.order → x_pastor (Char — Christian) memorialServiceDateTime: "", // sale.order → x_memorial_service_dt (DateTime — Christian) parish: "", // sale.order → x_parish (Char — Catholic) nightlyPrayersDateTime: "", // sale.order → x_nightly_prayers_dt (DateTime — Catholic) churchMass: false, //sale.order → x_church_mass (Boolean — Catholic) churchMassDetails: "", // sale.order → x_church_mass_details (Char — Catholic) massDateTime: "" // sale.order → x_mass_dt (DateTime — Catholic) }; } const SERVICE_DATA_BLANK = makeBlankServiceData(); /* ──────────────────────────────────────────────────── Selection option lists — kept centralised so the ContactPicker / FormField select inputs stay in sync. ──────────────────────────────────────────────────── */ const SALUTATION_OPTIONS = ["Mr", "Mrs", "Mdm", "Miss", "Dr", "Others"]; const GENDER_OPTIONS = ["M", "F", "Prefer not to mention"]; const TRANSFER_LOCATION_TYPES = ["Hospital", "Home", "Hospice", "Nursing Home", "Coroner", "Other"]; const HOSPITAL_OPTIONS = [ "Alexandra Hospital (AH)", "Changi General Hospital (CGH)", "Changi General Hospital (Integrated Building)", "Crawfurd Hospital", "Farrer Park Hospital", "Gleneagles Hospital", "Institute of Mental Health (IMH)", "KK Women's and Children's Hospital (KKH)", "Khoo Teck Puat Hospital (KTPH)", "Mount Alvernia Hospital", "Mount Elizabeth Hospital (Novena)", "Mount Elizabeth Hospital (Orchard)", "National Centre for Infectious Diseases (NCID)", "National University Hospital (NUH)", "Ng Teng Fong General Hospital (NTFGH)", "Parkway East Hospital", "Raffles Hospital", "Sengkang General Hospital (SKGH)", "Singapore General Hospital (Mortuary @ HSA)", "Singapore General Hospital (Ward)", "Tan Tock Seng Hospital (TTSH)", "Thomson Medical Centre", "Woodlands Hospital (WH)", "Yishun Community Hospital (YCH)", "Others", ]; const HOSPICE_OPTIONS = [ "Assisi Hospice", "Dover Park Hospice", "Ren Ci Hospital", "St Andrew's Community Hospital", "St Luke's Hospital", "Thye Hua Kwan (THK)", "Others", ]; const WAKE_VENUE_TYPES = ["Parlour", "Church", "HDB", "Others"]; const WAKE_VENUE_TYPES_FOUNTAINS = ["Parlour", "HDB", "Others"]; const PARLOUR_OPTIONS = { serenity: [ "AYS Remembrance Hall (AYS)", "Mount Vernon Sanctuary (MVS)", "Singapore Funeral Parlour (SFP)", "The Garden of Remembrance (TGOR)", "Woodlands Memorial (WM)", "Others", ], fountains: [ "AYS Remembrance Hall (AYS)", "Mount Vernon Sanctuary (MVS)", "Singapore Funeral Parlour (SFP)", "Teochew Funeral Parlour", "Woodlands Memorial (WM)", "Others", ], }; const CHURCH_OPTIONS = [ "Church of Christ the King", "Church of Immaculate Heart of Mary", "Church of Our Lady of Lourdes", "Church of Our Lady Queen of Peace", "Church of St Anthony", "Church of St Francis Xavier", "Church of St Ignatius", "Church of St Mary of The Angels", "Church of St Stephen", "Church of St Teresa", "Church of the Epiphany", "Church of the Holy Cross", "Church of the Holy Spirit", "St. Joseph's Church (Bukit Timah)", "St. Joseph's Church (Victoria Street)", "Others", ]; const MARITAL_OPTIONS = [ { value: "S", label: "Single" }, { value: "M", label: "Married" }, { value: "D", label: "Divorced" }, { value: "W", label: "Widowed" }]; const DIALECT_OPTIONS = ["Hokkien", "Teochew", "Cantonese", "Hakka", "Hainanese", "Mandarin", "Other"]; const RELATIONSHIP_OPTIONS = [ "Spouse", "Son", "Daughter", "Father", "Mother", "Brother", "Sister", "Son-in-Law", "Daughter-in-Law", "Grandson", "Granddaughter", "Relative", "Friend", "Other", ]; const CREMATION_LOCATIONS = { serenity: ["Mandai Crematorium", "Mandai North Crematorium"], fountains: ["Mandai Crematorium", "Mandai North Crematorium", "Kong Meng San Phor Kark See Monastery (Bright Hill)", "Tse Tho Aum Temple (Sin Ming Drive)"], }; const BURIAL_LOCATIONS = { serenity: ["CCK Christian Cemetery", "CCK Lawn"], fountains: ["CCK Lawn", "CCK Chinese Cemetery"], }; const RESTING_ARRANGEMENTS = ["Inland Scattering", "Sea Scattering", "Columbarium", "Home", "Others"]; /* Final Resting Location options — keyed by [arrangement][workspace]. "both" applies to all workspaces; otherwise use workspace-specific key. */ const RESTING_LOCATIONS = { "Inland Scattering": { both: ["Garden of Peace (GOP)", "Garden of Serenity (GOS)", "Others"], }, "Sea Scattering": { both: ["Changi Point Ferry Terminal (CPFT)", "Marina South Pier (MSP)", "Others"], }, "Columbarium": { serenity: [ "All Saints Memorial Chapel (Kovan)", "Choa Chu Kang Columbarium (CCK)", "Church of Christ the King (Ang Mo Kio)", "Church of Our Lady of Perpetual Succour (Siglap)", "Church of St Anthony (Woodlands)", "Church of St Francis of Assisi (Boon Lay)", "Church of St Francis Xavier (Serangoon)", "Church of St Ignatius (Farrer Road)", "Church of St Mary of the Angels (Bukit Batok)", "Church of St Michael (Serangoon)", "Church of St Teresa (Kampong Bahru)", "Church of the Holy Family (Katong)", "Church of the Holy Spirit (Upper Thomson)", "Church of the Holy Trinity (Tampines)", "Church of the Immaculate Heart of Mary (Kovan)", "Church of the Sacred Heart (Fort Canning)", "Faith Methodist Church (Queenstown)", "Mandai Columbarium (Mandai)", "Spiritual Grace Memorial Garden (Sembawang)", "St Anne's Church (Sengkang)", "St Joseph's Church (Bukit Timah)", "The Garden of Remembrance (CCK)", "Trinity Methodist Church (Serangoon)", "Woodlands Memorial (Woodlands)", "Others", ], fountains: [ "Choa Chu Kang Columbarium (CCK)", "Kong Meng San Phor Kark See Monastery (Bright Hill)", "Mandai Columbarium (Mandai)", "Nirvana Garden Memorial (CCK)", "Tse Tho Aum Temple (Sin Ming Drive)", "Woodlands Memorial (Woodlands)", "Others", ], }, }; const PRAYER_SERVICE_OPTIONS = [ { id: "interment_prayers", label: "Interment Prayers" }, { id: "7th_day", label: "7th Day Prayers" }, { id: "49_days", label: "49th Day Prayers" }, { id: "others", label: "Others" }, ]; const EMBALMING_OPTIONS = [ { id: "embalming_required", label: "Embalming Required" }, { id: "no_embalming", label: "No Embalming" }, { id: "infectious_case", label: "Infectious Case Handling" }, { id: "others", label: "Others" }, ]; /* ──────────────────────────────────────────────────── Helpers (used by the sidebar partial-state preview) ──────────────────────────────────────────────────── */ function familyTreeTotals(family) { const sumObj = (o) => Object.values(o || {}).reduce((a, b) => a + (Number(b) || 0), 0); const children = sumObj(family?.children); const siblings = sumObj(family?.siblings); const grandchildren = sumObj(family?.paternal) + sumObj(family?.maternal); return { children, siblings, grandchildren }; } function serviceSummaryFilled(d) { if (!d) return false; return !!(d.deceasedName || d.dateOfDeath || d.religion || d.cremationOrBurial || d.wakeVenue || d.dispositionDate); } /* ──────────────────────────────────────────────────── — main screen ──────────────────────────────────────────────────── */ function ServiceSummaryScreen({ caseDetails, workspace, serviceData, setServiceData, contacts = [], onCreateContact, selectedPackage, selectedCasket, selectedAddOns, addOnTotal, addOnCount, notes, setNotes, onEditCase, onJumpTo, onContinue, confirmationStatus, onSendForConfirmation, onViewPdf, onResend, onEditArrangement, amendmentSnapshot, onEnterEditMode, onFinalizeAmendment, onDiscardAmendment, onSendToCustomer, onSimulateSign, onSendSignedForm, appliedCoupon = null, onApplyCoupon, onRemoveCoupon, }) { const tabs = visibleTabs({ workspace, religion: serviceData.religion || caseDetails?.religion }); const [activeTab, setActiveTab] = React.useState(tabs[0]?.id || "care"); // Fall back when the active tab disappears (e.g. workspace switch). React.useEffect(() => { if (!tabs.find((t) => t.id === activeTab)) setActiveTab(tabs[0]?.id); }, [workspace, serviceData.religion]); // eslint-disable-line react-hooks/exhaustive-deps const scrollRef = React.useRef(null); const onTabChange = (id) => { setActiveTab(id); if (scrollRef.current) scrollRef.current.scrollTo({ top: 0, behavior: "smooth" }); }; const update = (patch) => setServiceData({ ...serviceData, ...patch }); return (
{/* Confirmation / amendment status banners */} {caseDetails?.needType === "pre_need" && (
Pre-Need Arrangement — The planee is still living. Fields capture preferred arrangements for future use.
)} {(confirmationStatus === "confirmed" || confirmationStatus === "confirmed_updated") && (
{confirmationStatus === "confirmed_updated" ? "Confirmed (Updated) — this arrangement has been re-confirmed." : "Confirmed — this arrangement has been signed by the customer."}
{onEnterEditMode && ( )}
)} {confirmationStatus === "amendment_draft" && (
Amendment Draft — changes here will be included in the updated arrangement.
)} {(confirmationStatus === "awaiting" || confirmationStatus === "amended_awaiting") && (
Awaiting customer confirmation — the arrangement has been sent for signing.
)}

Service Summary

Capture care details, family information, and arrangements. Jump between sections at any time.

{tabs.map((t) => onTabChange(t.id)} /> )}
{activeTab === "care" && } {activeTab === "tree" && } {activeTab === "funeral" && } {activeTab === "pastoral" && }
); } function ServiceTabBtn({ label, isActive, onClick }) { return ( ); } /* ───────────────── Form primitives ───────────────── Adopts Variation B's "floating card + section icon" design: - White card, soft shadow (no border), 14px radius - Header: 32px navy-tinted icon chip + title + optional hint - Bottom border between header and fields - Side-by-side label/field rows (180px label column) — ServiceField handles this - Tight 7px row padding via the field row container - Optional "More details" toggle for non-essential fields ────────────────────────────────────────────────── */ const SECTION_CARD_SHADOW = "0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06)"; function SectionIcon({ kind }) { // 18px navy-stroke icons matching the Variation B set. const base = { width: 18, height: 18 }; const stroke = "#1F3A60"; switch (kind) { case "profile": return ( ); case "life": return ( ); case "care": return ( ); case "contacts": return ( ); case "family": return ( ); case "venue": return ( ); case "schedule": return ( ); case "resting": return ( ); case "prayer": return ( ); case "mass": return ( ); default: return ( ); } } function FormSection({ title, hint, children, columns = 1, icon }) { return (
{title && (
{icon && ( )}

{title}

{hint && ( {hint} )}
)}
{children}
); } function ServiceField({ label, required, span, hint, children }) { return ( ); } function ServiceInput({ value, onChange, placeholder, type = "text", style: extraStyle }) { const [focused, setFocused] = React.useState(false); return ( setFocused(true)} onBlur={() => setFocused(false)} style={{ width: "100%", minWidth: 0, boxSizing: "border-box", height: 44, padding: "0 12px", fontFamily: "inherit", fontSize: 14, color: "#1F3A60", background: "#FFFFFF", border: `1px solid ${focused ? "#1F3A60" : "#E5E7EB"}`, boxShadow: focused ? "0 0 0 3px rgba(31,58,96,0.10)" : "none", borderRadius: 8, outline: "none", letterSpacing: "-0.15px", transition: "border-color 120ms, box-shadow 120ms", WebkitAppearance: "none", ...extraStyle }} />); } function DateTimeField({ label, value, onChange, required, span }) { const date = value ? value.split("T")[0] : ""; const time = value ? (value.split("T")[1] || "") : ""; const handleDate = (d) => onChange(d ? (time ? `${d}T${time}` : d) : ""); const handleTime = (t) => onChange(date ? `${date}T${t}` : ""); return (
handleDate(e.target.value)} style={{ flex: "1 1 160px" }} /> handleTime(e.target.value)} style={{ flex: "1 1 120px" }} />
); } function ServiceSelect({ value, onChange, options, groups, placeholder = "Select..." }) { const [open, setOpen] = React.useState(false); // Escape key to close React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open]); const opts = groups ? groups.flatMap((g) => g.items.map((item) => ({ value: item, label: item }))) : (options || []).map((o) => typeof o === "string" ? { value: o, label: o } : o); const selected = opts.find((o) => o.value === value); const handleSelect = (v) => { onChange && onChange({ target: { value: v } }); setOpen(false); }; const optBtn = (key, label, isSel, onSelect) => ( ); return ( /* When open, elevate the container above the backdrop so the trigger button remains tappable. The backdrop sits at z:1000; this container at z:1001 ensures both the trigger and the dropdown list are on top. */
{/* Backdrop — covers the viewport, closes dropdown on any tap/click outside */} {open && (
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 1000 }} /> )} {open && (
{opts.length === 0 ? (
No options
) : groups ? groups.map(({ group, items }) => ( {group && (
{group}
)} {items.map((item) => optBtn(item, item, item === value, () => handleSelect(item)))} )) : opts.map((opt) => optBtn(opt.value, opt.label, opt.value === value, () => handleSelect(opt.value)))}
)}
); } function ServiceTextarea({ value, onChange, placeholder, rows = 3 }) { return (