// Property Match — review the system's recommendations and confirm.
// User can pick: one / multiple / generic / no suitable property.
//
// Nothing is ever pre-selected. The system suggests; the user decides.
function PropertyMatch({
brands, selectedBrandId, onSelectBrand, onConfirmMatch, onNavigate,
onUpdateBrand, onMoveToResearch, onToast, currentUser, onReloadProperties,
}) {
const { PROPERTIES } = window.IPSEM_DATA;
// The SAME active population as Brand Research — the two pages show the same
// three tabs and are two halves of one decision, so they have to count the
// same brands. This used to hand-roll its own test
// (research complete && priority not no-action/kiv), which let 3 brands with
// closed outreach in and kept 17 unresearched ones out: 274 here against 288
// on Research, for no reason a reader could see.
const eligible = brands.filter(pbActive);
// ─── Filters ────────────────────────────────────────────────────────────
// Shared with Research, Contacts and Draft (useBrandFilters in ui.jsx) — one
// tier / category / assignee / country setting for the whole flow.
const f = useBrandFilters(eligible);
// Same three-way cut as every other stage. Shares the storage key with Brand
// Research on purpose: the two pages are two halves of one decision, so
// switching to "Decided" on one and back should not surprise you on the other.
const [reviewFilter, setReviewFilter] = usePersistentState('filters.review', 'needs'); // needs | decided | all
const filtersActive = f.active || reviewFilter !== 'all';
const needsCount = React.useMemo(() => eligible.filter(needsPropertyDecision).length, [eligible]);
const decidedCount = React.useMemo(() => eligible.filter(isDecided).length, [eligible]);
const earlierCount = React.useMemo(() => eligible.filter(awaitingEarlierStage).length, [eligible]);
const filteredEligible = React.useMemo(
() => eligible.filter((b) => {
if (!f.matches(b)) return false;
if (reviewFilter === 'needs' && !needsPropertyDecision(b)) return false;
if (reviewFilter === 'decided' && !isDecided(b)) return false;
return true;
}),
[eligible, f.matches, reviewFilter]
);
// Awaiting-decision brands (no confirmed property yet) always sit on top so
// they're seen first; within each group, newest review date first.
const awaiting = (b) => (b.confirmedProperties || []).length === 0;
const sorted = React.useMemo(() => {
return [...filteredEligible].sort((a, b) => {
const aw = awaiting(a), bw = awaiting(b);
if (aw !== bw) return aw ? -1 : 1;
// createdAt then id break the date ties, so the list keeps the same order
// on every refresh instead of reshuffling under whoever is working it.
return (b.reviewDate || '').localeCompare(a.reviewDate || '')
|| (b.createdAt || '').localeCompare(a.createdAt || '')
|| String(a.id || '').localeCompare(String(b.id || ''));
});
}, [filteredEligible]);
const selected = brands.find((b) => b.id === selectedBrandId) || sorted[0];
React.useEffect(() => {
if (!selectedBrandId && sorted[0]) onSelectBrand(sorted[0].id);
}, []);
// ─── Bulk actions ───────────────────────────────────────────────────────
// Property choice is per brand, but re-assigning or parking a batch is not —
// so the same tick-and-act bar News Intake has now works here too.
const bulk = useBulkSelect(sorted);
const applyBulk = (fn, label) => {
const ids = bulk.ids;
ids.forEach(fn);
bulk.clear();
onToast && onToast(`${ids.length} brand${ids.length === 1 ? '' : 's'} ${label}`);
};
const bulkActions = [
{
label: 'KIV', icon: 'eye',
title: 'Keep in view — held out of the active flow until reactivated',
onClick: () => applyBulk((id) => onUpdateBrand(id, {
status: 'maybe', priority: 'kiv', researchStatus: 'kiv', userOverride: true,
}), 'kept in view'),
},
{
label: 'Reject', icon: 'x', className: 'btn btn-sm btn-ghost', danger: true,
title: 'Stop these brands',
onClick: () => applyBulk((id) => onUpdateBrand(id, {
status: 'not-relevant', priority: 'no-action', researchStatus: 'rejected', userOverride: true,
}), 'rejected'),
},
];
// Track the user's selection — what they're considering before confirming
const [draftSelection, setDraftSelection] = React.useState(() => selected?.confirmedProperties || []);
const [draftDisciplines, setDraftDisciplines] = React.useState(() => selected?.confirmedDisciplines || {});
const [propSearch, setPropSearch] = React.useState('');
const [showAllProps, setShowAllProps] = React.useState(false);
const [showOneOff, setShowOneOff] = React.useState(false);
React.useEffect(() => {
setDraftSelection(selected?.confirmedProperties || []);
setDraftDisciplines(selected?.confirmedDisciplines || {});
setPropSearch('');
setShowAllProps(false);
}, [selected?.id]);
// Nothing to work on. Name the one thing that fixes it rather than stating
// the obvious — the previous copy left the user guessing what to do next.
if (!selected) {
return (
{filtersActive ? 'No brands match these filters.' : 'Nothing is ready to match yet.'}
{filtersActive
? 'The shared tier / category / assignee / country filters are hiding everything eligible. Clear them to carry on.'
: 'A brand reaches this stage when its research is complete. Finish a profile in Brand Research, or run a scan to pull in new brands.'}
{filtersActive ? (
) : (
<>
)}
);
}
// Suggested = the research engine's potential list + the AI's recommendations.
const suggestedIds = new Set([
...((selected.potentialProperties) || []),
...((selected.aiRecommendation && selected.aiRecommendation.properties) || []),
]);
// Rank EVERY ACTIVE property so the user can pick any of them — suggested
// first, then by fit score. Archived properties (e.g. ones we've switched off
// in the Properties library) never appear. A search box narrows the list.
const q = propSearch.trim().toLowerCase();
const ranked = PROPERTIES
.filter((p) => !p.archived)
.map((p) => ({ prop: p, fit: getFit(selected, p), suggested: suggestedIds.has(p.id) }))
.filter(({ prop }) => {
if (!q) return true;
return (prop.name || '').toLowerCase().includes(q)
|| (prop.sport || '').toLowerCase().includes(q)
|| (prop.disciplines || []).join(' ').toLowerCase().includes(q)
|| (prop.keyMarkets || []).join(' ').toLowerCase().includes(q);
})
.sort((a, b) => (Number(b.suggested) - Number(a.suggested)) || (b.fit.total - a.fit.total));
const suggestedList = ranked.filter((r) => r.suggested);
const otherList = ranked.filter((r) => !r.suggested);
const isGeneric = draftSelection.includes('generic');
const isNone = draftSelection.includes('none');
const togglePick = (pid) => {
if (isGeneric || isNone) return; // mutually exclusive
setDraftSelection((cur) => cur.includes(pid) ? cur.filter((x) => x !== pid) : [...cur, pid]);
// Dropping a property drops its discipline tags with it.
setDraftDisciplines((cur) => {
if (!cur[pid]) return cur;
const next = { ...cur };
delete next[pid];
return next;
});
};
// Tag an individual discipline (FEI → Dressage) without splitting the property.
const toggleDiscipline = (pid, name) => {
setDraftSelection((cur) => cur.includes(pid) ? cur : [...cur.filter((x) => x !== 'generic' && x !== 'none'), pid]);
setDraftDisciplines((cur) => {
const list = cur[pid] || [];
const next = list.includes(name) ? list.filter((x) => x !== name) : [...list, name];
const out = { ...cur };
if (next.length) out[pid] = next; else delete out[pid];
return out;
});
};
const pickMode = (mode) => {
if (mode === 'generic') { setDraftSelection(['generic']); setDraftDisciplines({}); }
else if (mode === 'none') { setDraftSelection(['none']); setDraftDisciplines({}); }
else if (mode === 'specific') setDraftSelection([]);
};
const savedSelection = selected.confirmedProperties || [];
const hasSavedSelection = savedSelection.length > 0;
// An empty selection is now saveable — that is how you REMOVE an approved
// property. It is only blocked when there was nothing approved to begin with.
const confirmDisabled = draftSelection.length === 0 && !hasSavedSelection;
const isRemoval = draftSelection.length === 0 && hasSavedSelection;
const changed = JSON.stringify(draftSelection) !== JSON.stringify(savedSelection) ||
JSON.stringify(draftDisciplines) !== JSON.stringify(selected.confirmedDisciplines || {});
// Which brand to move on to once this one is decided.
const nextAwaiting = sorted.find((b) => b.id !== selected.id && awaiting(b));
const handleOneOffCreated = async (prop) => {
await window.IPSEM_API.createProperty(prop);
if (onReloadProperties) await onReloadProperties();
setShowOneOff(false);
setDraftSelection((cur) => [...cur.filter((x) => x !== 'generic' && x !== 'none'), prop.id]);
onToast && onToast(`${prop.name} added and selected`);
};
return (
{ if (name) applyBulk((id) => onUpdateBrand(id, { assignee: name }), `assigned to ${name}`); }}
/>
Ready for match
{reviewFilter === 'needs'
? `${needsCount} to review · ${decidedCount} decided`
: `${filteredEligible.length} of ${eligible.length} brand${eligible.length === 1 ? '' : 's'}`}
{earlierCount ? ` · ${earlierCount} still waiting on News Intake` : ''}
{sorted.length > 0 ? (
) : null}
{filtersActive && !f.open ? (
Filters are on and will stay on until you clear them.
e.stopPropagation()}
onChange={() => bulk.toggle(b.id)}
title="Select for a bulk action"
/>
{b.brand}
{confirmed ? : null}
{b.confirmedProperties && b.confirmedProperties.length ? (
b.confirmedProperties.map((p) => p === 'generic' ? 'Generic' : p === 'none' ? 'No match' : propLabel(p)).join(', ')
) : (
Awaiting your decision
)}
{/* Sign-off on the row, same control and wording as every
other stage, so ticking a brand off never means hunting. */}
{onUpdateBrand ? (
e.stopPropagation()}>
) : null}
);
})}
{/* Brand context strip */}
{selected.brand}· {selected.category}
{selected.news?.title}
{/* Tier / status / relationship / outreach / assignee / actions — the
same strip on every stage. */}
{/* Notes — same panel, same position as every other stage: directly
under the brand header. Reads and writes the one shared list. */}
{onUpdateBrand ? (
) : null}
{/* Match candidates */}
Choose properties
Suggested first, or search the full portfolio. Click a card to select or unselect it.
{isGeneric ? (
Generic outreach selected
The draft will avoid naming a specific property — IPSEM's wider portfolio will be positioned as relevant.
Use this when the brand fits most or all of your portfolio.
) : isNone ? (
No suitable property
Flow will stop here. No contact research and no draft will be generated for this brand.
) : (
{/* Search across the full portfolio + add a property that isn't in it */}
{/* Where you go next — the flow used to just leave you here. */}
{!changed && hasSavedSelection ? (
Saved. Contacts are being found in the background.
{nextAwaiting ? (
) : (
<>
Nothing else here is awaiting a decision.
{/* Match is clear — hand the user straight to whatever is next
anywhere in the flow rather than leaving them on a dead end. */}
)}
For something outside the standing portfolio — a one-off event, a short-window asset, or a property
you have only just picked up. It is saved to the Properties library and selected for {brand.brand} straight away.
{field('Name', 'name', 'e.g. Singapore Padel Open 2027')}
{field('Short label', 'short', 'e.g. SG Padel')}
{field('Sport / category', 'sport', 'e.g. Padel — international event')}
{field('Rightsholder', 'rightsholder', 'Who owns the rights')}
{field('Key markets (comma separated)', 'keyMarkets', 'Singapore, Malaysia, Indonesia')}
{field('Disciplines (comma separated, optional)', 'disciplines', 'Men’s singles, Women’s singles')}