) : null}
);
};
// Ring score for property match
const ScoreRing = ({ value, size = 56, stroke = 4, color }) => {
const r = (size - stroke) / 2;
const C = 2 * Math.PI * r;
const pct = Math.max(0, Math.min(1, value / 100));
return (
{value}
);
};
// ─── Avatar ──────────────────────────────────────────────────────────────
const Avatar = ({ initials, size = 26, tone = 'accent' }) => {
const bg = tone === 'accent' ? 'var(--accent-soft)' : 'var(--muted-soft)';
const fg = tone === 'accent' ? 'var(--accent)' : 'var(--ink-2)';
return (
{initials || '—'}
);
};
// ─── Brand logo ──────────────────────────────────────────────────────────
// Resolves a real brand logo from the company's web domain and falls back to
// an initials avatar if nothing loads. No data stored — the domain is derived
// from the brand name (or an explicit brand.domain/website if present), so it
// works for every scanned brand with zero backend/schema changes.
function brandDomainGuess(brand) {
const explicit = (brand && (brand.domain || brand.website)) || '';
if (explicit) {
try {
const u = explicit.startsWith('http') ? explicit : `https://${explicit}`;
return new URL(u).hostname.replace(/^www\./, '');
} catch (_) { /* fall through to name guess */ }
}
const name = (brand && brand.brand) || '';
const slug = name.toLowerCase()
.replace(/&/g, 'and')
.replace(/['’.]/g, '')
.replace(/\b(inc|llc|ltd|plc|gmbh|sa|ag|co|corp|corporation|company|group|holdings|the|uk|usa|us|eu|global|international|intl|worldwide)\b/g, '')
.replace(/[^a-z0-9]+/g, '')
.trim();
return slug ? `${slug}.com` : '';
}
// Favicon services return a generic globe (HTTP 200) instead of failing when a
// site has no icon, so onError never fires. We detect the miss by size: Google's
// service returns the real favicon at the requested size (>=32px) when it exists,
// but a 16px default globe when it doesn't. Anything not clearly a real logo
// falls back to the brand's initials.
const BrandLogo = ({ brand, size = 28, radius = 7 }) => {
const domain = React.useMemo(
() => brandDomainGuess(brand),
[brand && brand.brand, brand && brand.domain, brand && brand.website]
);
const src = domain ? `https://www.google.com/s2/favicons?domain=${domain}&sz=128` : '';
const [status, setStatus] = React.useState('loading'); // loading | ok | fail
React.useEffect(() => {
if (!src) { setStatus('fail'); return; }
setStatus('loading');
let alive = true;
const img = new Image();
img.onload = () => { if (alive) setStatus(img.naturalWidth >= 32 ? 'ok' : 'fail'); };
img.onerror = () => { if (alive) setStatus('fail'); };
img.src = src;
return () => { alive = false; };
}, [src]);
// Show initials while loading and whenever no real logo is available.
if (status !== 'ok') {
return ;
}
return (
);
};
// ─── Cite (citation chip) ────────────────────────────────────────────────
const Cite = ({ n, onClick, title }) => (
{n}
);
// ─── Flow step (workflow visual) ─────────────────────────────────────────
const FlowStep = ({ idx, label, mode, current, stopped, kiv }) => (
);
// ─── Definition list (label / value) ─────────────────────────────────────
// Grid lives in .deflist (index.html) so the value track can be minmax(0,…) and
// stack on phones — an inline 160px/1fr grid let long unbroken text widen the card.
const Definition = ({ label, value, cites, children }) => (
);
// ─── Toast (root-level imperative) ───────────────────────────────────────
// msg is a string, or {text, action:{label,onClick}} when the toast needs a
// button. Both shapes are supported because ~50 call sites pass a plain string,
// and rendering an object as a React child throws.
const Toast = ({ msg, onClear }) => {
const text = msg && typeof msg === 'object' ? msg.text : msg;
const action = msg && typeof msg === 'object' ? msg.action : null;
React.useEffect(() => {
if (!text) return;
// A toast with a button waits for the person to read and decide, so it gets
// far longer than one that is only telling them something happened.
// Longer messages stay visible longer (roughly reading speed), 4-10s.
const duration = action
? 30000
: Math.min(10000, Math.max(4000, String(text).length * 55));
const t = setTimeout(onClear, duration);
return () => clearTimeout(t);
}, [text, action, onClear]);
if (!text) return null;
return (
);
};
// Promise-based confirm: const [confirm, confirmEl] = useConfirm();
// if (await confirm({ title, message, confirmLabel, cancelLabel, danger })) { ... }
// Render {confirmEl} once in the component.
const useConfirm = () => {
const [state, setState] = React.useState(null);
const confirm = React.useCallback((opts) => new Promise((resolve) => {
setState({ ...opts, resolve });
}), []);
const confirmEl = state ? (
{ state.resolve(true); setState(null); }}
onCancel={() => { state.resolve(false); setState(null); }}
/>
) : null;
return [confirm, confirmEl];
};
// Warn-but-allow guard for outreach stage changes: marking a brand contacted
// (or further) with no draft is usually a mistake — but allowed, because the
// user may have contacted them outside the app. Returns true to proceed.
async function guardOutreachChange(brand, nextStage, confirm) {
const advanced = nextStage && nextStage !== 'not_contacted' && nextStage !== 'closed';
if (!advanced || brand.draft) return true;
return confirm({
title: 'No draft for this brand yet',
message: `${brand.brand} has no outreach draft. Mark it as "${outreachMeta(nextStage).label}" anyway? That is fine if you contacted them outside the app.`,
confirmLabel: 'Mark anyway',
});
}
// Helpers
const initialsFor = (name) => {
if (!name) return '';
const parts = name.trim().split(/\s+/);
return ((parts[0]?.[0] || '') + (parts[1]?.[0] || '')).toUpperCase();
};
// Dates come in two flavours and must be handled differently:
// "2026-07-24" — a calendar date. Show it verbatim. Parsing it with
// new Date() yields UTC midnight, which then renders
// as the PREVIOUS day for anyone west of UTC.
// "2026-07-24T13:44:10Z" — an instant. Render it in the reader's zone.
const formatDate = (iso) => {
if (!iso) return '';
const s = String(iso);
if (/^\d{4}-\d{2}-\d{2}$/.test(s)) {
const [y, m, d] = s.split('-').map(Number);
return new Intl.DateTimeFormat('en-GB', {
timeZone: 'UTC', day: 'numeric', month: 'short', year: 'numeric',
}).format(new Date(Date.UTC(y, m - 1, d)));
}
const d = new Date(s);
if (isNaN(d.getTime())) return '';
return formatInstant(s, viewerTimeZone(), { hour: undefined, minute: undefined });
};
const propLabel = (id) => {
const p = PropertyById(id);
return p ? p.short : id;
};
const propName = (id) => {
const p = PropertyById(id);
return p ? p.name : id;
};
// ─── Outreach pipeline stages (shared across screens) ─────────────────────
const OUTREACH_STAGES = [
{ value: 'not_contacted', label: 'Not contacted', color: 'var(--ink-3)' },
{ value: 'contacted', label: 'Contacted', color: 'var(--pending)' },
{ value: 'replied', label: 'Replied', color: 'var(--accent)' },
{ value: 'call_scheduled', label: 'Call scheduled', color: 'var(--positive)' },
{ value: 'closed', label: 'No response / Closed', color: 'var(--ink-2)' },
];
const outreachMeta = (v) => OUTREACH_STAGES.find((s) => s.value === v) || OUTREACH_STAGES[0];
// ─── Canonical pipeline stage model (single source of truth) ──────────────
// Used by BOTH the Pipeline board and the Dashboard breakdown so their counts
// always agree. Each brand maps to exactly ONE active stage, or is held/closed.
const PB_STAGES = [
{ key: 'triage', n: 1, label: 'Triage', desc: 'Needs your decision', color: 'var(--pending)', route: 'intake' },
{ key: 'research', n: 2, label: 'Research', desc: 'AI building profile', color: 'var(--sig-blue-fg)', route: 'research' },
{ key: 'match', n: 3, label: 'Property match', desc: 'Pick the best fit', color: 'var(--sig-purple-fg)', route: 'match' },
{ key: 'approval', n: 4, label: 'Rightsholder approval', desc: 'Waiting on the property', color: 'var(--sig-amber-fg)', route: 'properties' },
{ key: 'contacts', n: 5, label: 'Contacts', desc: 'Finding people', color: 'var(--accent)', route: 'contacts' },
{ key: 'draft', n: 6, label: 'Draft', desc: 'Write the outreach', color: 'var(--sig-amber-fg)', route: 'draft' },
{ key: 'outreach', n: 7, label: 'Ready to send', desc: 'Draft ready, not sent', color: 'var(--attention)', route: 'draft' },
{ key: 'contacted', n: 8, label: 'Contacted', desc: 'Sent, tracking replies', color: 'var(--positive)', route: 'draft' },
];
const PB_INDEX = PB_STAGES.reduce((m, s, i) => { m[s.key] = i; return m; }, {});
function pbConfirmed(b) {
return (b.confirmedProperties || []).filter((p) => p !== 'none');
}
function pbIsHeldOrClosed(b) {
const hasNone = (b.confirmedProperties || []).includes('none');
return b.status === 'not-relevant' || b.status === 'duplicate' ||
b.priority === 'no-action' || b.priority === 'kiv' ||
b.researchStatus === 'rejected' || b.researchStatus === 'kiv' || hasNone ||
b.doNotContact === true || b.outreachStatus === 'closed';
}
// ─── Rightsholder approval index ──────────────────────────────────────────
// {brandId: {approved, pending, discuss, rejected, askedAt}}, loaded once by
// app.jsx from /api/brands/approvals. A module global for the same reason
// window.IPSEM_DATA.PROPERTIES is one: pbStage() is called from four screens
// and from deep inside chips, and threading this through every one of them as a
// prop would touch far more code than it is worth.
// How long a rightsholder gets before the app starts calling it late. Two
// working weeks — long enough that a normal reply is not nagged, short enough
// that a forgotten round surfaces inside the month.
const APPROVAL_CHASE_DAYS = 14;
let APPROVAL_INDEX = {};
function setApprovalIndex(map) { APPROVAL_INDEX = map || {}; }
function approvalFor(brandId) { return APPROVAL_INDEX[brandId] || null; }
// Is this brand sat waiting on a rightsholder?
//
// Deliberately keyed on having been ASKED, not on lacking an approval. Treating
// "never raised" as awaiting would drop the entire existing book — hundreds of
// brands matched long before this existed — into the approval stage overnight,
// and the funnel would be a wall of one colour. It mirrors the rule the server
// enforces: only an explicit answer changes what you may do.
//
// A brand every rightsholder refused also lands here. It has nowhere to go and
// needs a person to rematch or overturn it, so it belongs in a stage someone
// looks at rather than quietly parked further down the funnel.
function awaitingApproval(b) {
const specific = pbConfirmed(b).filter((p) => p !== 'generic');
if (!specific.length) return false; // generic pitch — nobody to ask
const a = approvalFor(b.id);
if (!a) return false;
if (specific.some((p) => (a.approved || []).includes(p))) return false; // through the gate
return specific.some((p) =>
(a.pending || []).includes(p) || (a.discuss || []).includes(p) || (a.rejected || []).includes(p));
}
// Map a brand to its current ACTIVE stage key, or null if held/closed.
function pbStage(b) {
if (pbIsHeldOrClosed(b)) return null;
// Checked before approval on purpose: a brand already drafted or contacted —
// everything sent before this feature existed — must not be pulled backwards
// into the approval stage.
if (b.draft) {
const sent = b.outreachStatus && b.outreachStatus !== 'not_contacted';
return sent ? 'contacted' : 'outreach';
}
if (pbConfirmed(b).length) {
if (awaitingApproval(b)) return 'approval';
return (b.contacts || []).length ? 'draft' : 'contacts';
}
if (b.researchStatus === 'complete') return 'match';
if (b.researchStatus === 'researching' || b.researchStatus === 'needs-review') return 'research';
return 'triage';
}
// ─── Detailed outreach stage ladder (mirrors the Weekly Brand Review workbook) ─
const DETAIL_STAGES = [
{ value: '1-potential-alignment', label: '1 · Potential alignment' },
{ value: '2-approved-for-approach', label: '2 · Approved for approach' },
{ value: '3-rejected-by-rh', label: '3 · Rejected by rightsholder' },
{ value: '3-rejected-by-ipsem', label: '3 · Rejected by IPSEM' },
{ value: '4-initial-outreach', label: '4 · Initial outreach' },
{ value: '4-initial-outreach-wa', label: '4 · Initial outreach (WhatsApp)' },
{ value: '5-active-interest', label: '5 · Active interest' },
{ value: '6-proposal', label: '6 · Proposal' },
{ value: '7-negotiation', label: '7 · Negotiation' },
{ value: '8-terms-agreed', label: '8 · Terms agreed' },
{ value: '9-contracted', label: '9 · Contracted' },
{ value: 'on-hold', label: 'On hold' },
{ value: 'declined-lost', label: 'Declined / Lost' },
];
const detailStageLabel = (v) => {
const s = DETAIL_STAGES.find((x) => x.value === v);
return s ? s.label : v;
};
// Rightsholder approval to approach a brand (workbook "Client Approval Status").
const APPROVAL_META = {
'approved': { label: 'Approved by rightsholder', kind: 'positive' },
'not-approved': { label: 'Not yet approved', kind: 'pending' },
};
// ─── Date helpers ─────────────────────────────────────────────────────────
// The team works across three zones. Two different kinds of value are involved
// and they must not be conflated:
//
// INSTANTS — a moment in time (note written, notification raised). Stored as
// UTC ISO, rendered in the reader's own zone with the zone shown.
// BUSINESS — a working day (review date, follow-up, sent date). These belong
// DATES to IPSEM's operating day, which is GMT+8 because that is when
// the daily scan runs. They are calendar dates, never instants,
// and must never be shifted across a timezone.
const IPSEM_TZ = 'Asia/Singapore'; // GMT+8, no DST — IPSEM's operating day
// Notifications are read against London. Whoever is reading, "when was this
// said?" is answered in one agreed zone rather than in each reader's own, so two
// people discussing the same note are never looking at two different clocks.
// An IANA zone, not a fixed offset: London is GMT+0 in winter, GMT+1 under BST.
const NOTIFICATION_TZ = 'Europe/London';
// IANA zones, not fixed offsets: London is GMT+0 in winter and GMT+1 under BST,
// Paris GMT+1 / GMT+2. Hardcoding the winter offset would be wrong half the year.
const TEAM_ZONES = [
{ name: 'Aaron', tz: 'Asia/Singapore' },
{ name: 'Stuart', tz: 'Europe/London' },
{ name: 'Rene', tz: 'Europe/Paris' },
];
// The reader's zone: their profile override if set, else whatever the browser
// reports. app.jsx pushes the profile value in once the session loads.
let _viewerTz = null;
function setViewerTimeZone(tz) { _viewerTz = tz || null; }
function browserTimeZone() {
try { return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'; }
catch (e) { return 'UTC'; }
}
function viewerTimeZone() { return _viewerTz || browserTimeZone(); }
// "GMT+8" for a zone at a given instant (DST-aware).
function tzOffsetLabel(tz, date) {
try {
const parts = new Intl.DateTimeFormat('en-GB', { timeZone: tz, timeZoneName: 'shortOffset' })
.formatToParts(date || new Date());
const hit = parts.find((p) => p.type === 'timeZoneName');
return hit ? hit.value : '';
} catch (e) {
return '';
}
}
// Render an instant in a specific zone. Never used for calendar dates.
function formatInstant(iso, tz, opts) {
if (!iso) return '';
const d = new Date(iso);
if (isNaN(d.getTime())) return '';
try {
return new Intl.DateTimeFormat('en-GB', {
timeZone: tz || viewerTimeZone(),
day: 'numeric', month: 'short', year: 'numeric',
hour: '2-digit', minute: '2-digit', hour12: false,
...(opts || {}),
}).format(d);
} catch (e) {
return d.toISOString().slice(0, 16).replace('T', ' ');
}
}
// Timezone-free wording — "2 hours ago" means the same thing in every zone,
// which is the whole point when three people discuss the same note.
function relativeTime(iso) {
if (!iso) return '';
const then = new Date(iso).getTime();
if (isNaN(then)) return '';
const secs = Math.round((Date.now() - then) / 1000);
if (secs < 0) {
const ahead = Math.abs(secs);
if (ahead < 90) return 'just now';
if (ahead < 3600) return `in ${Math.round(ahead / 60)} min`;
if (ahead < 86400) return `in ${Math.round(ahead / 3600)} h`;
return `in ${Math.round(ahead / 86400)} d`;
}
if (secs < 60) return 'just now';
if (secs < 3600) { const m = Math.round(secs / 60); return `${m} min ago`; }
if (secs < 86400) { const h = Math.round(secs / 3600); return `${h} hour${h === 1 ? '' : 's'} ago`; }
const days = Math.round(secs / 86400);
if (days === 1) return 'yesterday';
if (days < 7) return `${days} days ago`;
if (days < 30) { const w = Math.round(days / 7); return `${w} week${w === 1 ? '' : 's'} ago`; }
return formatInstant(iso, viewerTimeZone(), { hour: undefined, minute: undefined });
}
// Every timestamp in the app. Relative by default (unambiguous across zones);
// hovering reveals the exact instant in the reader's zone AND in all three
// team zones, so "which 10:00?" never has to be asked.
// Pass `tz` to pin a timestamp to one agreed zone regardless of the reader —
// notifications do this so everyone quotes the same clock (see NOTIFICATION_TZ).
function TimeStamp({ iso, mode = 'relative', className, style, tz: pinnedTz }) {
if (!iso) return null;
const tz = pinnedTz || viewerTimeZone();
const when = new Date(iso);
const own = viewerTimeZone();
const head = pinnedTz
? `${formatInstant(iso, pinnedTz)} ${tzOffsetLabel(pinnedTz, when)} — London`
: `${formatInstant(iso, tz)} ${tzOffsetLabel(tz, when)} — your time`;
// When pinned, still show the reader their own clock, so a London time never
// has to be converted in someone's head.
const stamp = (z) => `${formatInstant(iso, z)} ${tzOffsetLabel(z, when)}`;
const mineToo = (pinnedTz && stamp(own) !== stamp(pinnedTz))
? [`${stamp(own)} — your time`] : [];
// Drop any team line that reads identically to one already shown. Zone NAMES
// differ where the clock does not — a reader in Asia/Kuala_Lumpur and Aaron in
// Asia/Singapore are both GMT+8 — so filtering on the tz string listed the
// same time twice.
const shown = new Set([stamp(tz), ...(pinnedTz ? [stamp(own)] : [])]);
const others = [];
for (const z of TEAM_ZONES) {
const s = stamp(z.tz);
if (shown.has(s)) continue;
shown.add(s);
others.push(`${z.name}: ${s}`);
}
const title = [head, ...mineToo, ...others].join('\n');
const absolute = `${formatInstant(iso, tz)} ${tzOffsetLabel(tz, when)}`;
const text = mode === 'absolute' ? absolute
: mode === 'both' ? `${relativeTime(iso)} · ${absolute}`
: relativeTime(iso);
return (
{text}
);
}
// Today on IPSEM's operating day (GMT+8), whatever zone the reader is in.
// Derived through Intl rather than a fixed +8 offset so it stays correct if
// the operating zone is ever changed to one that observes DST.
function ipsemToday() {
try {
// en-CA formats as YYYY-MM-DD.
return new Intl.DateTimeFormat('en-CA', { timeZone: IPSEM_TZ }).format(new Date());
} catch (e) {
return new Date(Date.now() + 8 * 3600 * 1000).toISOString().slice(0, 10);
}
}
// True when the reader's calendar day differs from IPSEM's operating day —
// used to warn that "today" on screen is not today where they are sitting.
function viewerOffsetFromIpsemDay() {
try {
const mine = new Intl.DateTimeFormat('en-CA', { timeZone: viewerTimeZone() }).format(new Date());
return mine === ipsemToday() ? 0 : (mine < ipsemToday() ? -1 : 1);
} catch (e) {
return 0;
}
}
function addBusinessDays(fromISO, n) {
const d = new Date(((fromISO || ipsemToday())) + 'T00:00:00Z');
let added = 0;
while (added < n) {
d.setUTCDate(d.getUTCDate() + 1);
const wd = d.getUTCDay();
if (wd !== 0 && wd !== 6) added++;
}
return d.toISOString().slice(0, 10);
}
// Days until an ISO date (negative = overdue). null if no date.
function daysUntil(iso) {
if (!iso) return null;
const a = new Date(ipsemToday() + 'T00:00:00Z').getTime();
const b = new Date(String(iso).slice(0, 10) + 'T00:00:00Z').getTime();
return Math.round((b - a) / 86400000);
}
// ─── Rightsholder refusals ────────────────────────────────────────────────
// A property that has refused a brand must not appear in an email pitched on
// its behalf. The server enforces this; these let the UI say so first, rather
// than letting someone write a draft and then be told no.
// { refused: [propertyId…], remaining: [propertyId…], blocked: bool }
// `blocked` means there is nothing left to pitch — every specific property said
// no. Generic outreach is never blocked: it is not sent on any one
// rightsholder's behalf, so none of them can veto it.
function refusalState(brand, approvals) {
const confirmed = (brand?.confirmedProperties || []).filter((p) => p !== 'none');
const specific = confirmed.filter((p) => p !== 'generic');
// Falls back to the shared index, so callers that already have it app-wide
// need not pass it down — the two are the same data.
const entry = (approvals || {})[brand?.id] || approvalFor(brand?.id) || {};
const refusedAll = entry.rejected || [];
const refused = specific.filter((p) => refusedAll.includes(p));
const remaining = specific.filter((p) => !refusedAll.includes(p));
return {
refused,
remaining,
blocked: refused.length > 0 && remaining.length === 0 && !confirmed.includes('generic'),
};
}
function RefusalNotice({ brand, approvals, onNavigate }) {
const state = refusalState(brand, approvals);
if (!state.refused.length) return null;
const names = state.refused.map(propName).join(', ');
const danger = state.blocked;
// A generic match survives a refusal but has no property id to name, so it is
// spelled out — otherwise the sentence ends "will pitch only".
const survivors = [
...state.remaining.map(propName),
...((brand?.confirmedProperties || []).includes('generic') ? ['the IPSEM portfolio'] : []),
].join(', ');
return (
{danger
? `${names} refused this brand — outreach is blocked`
: `${names} refused this brand`}
{danger
? 'There is no property left to pitch on. Change the approval on the Properties page, or match the brand to another property.'
: `The draft will pitch ${survivors} only.`}
{onNavigate ? (
) : null}
);
}
// ─── CSV export (client-side download) ────────────────────────────────────
function downloadCsv(filename, rows) {
if (!rows || !rows.length) return;
const headers = Object.keys(rows[0]);
const esc = (v) => {
if (v == null) return '';
const s = Array.isArray(v) ? v.join('; ') : (typeof v === 'object' ? JSON.stringify(v) : String(v));
return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
};
const csv = [headers.join(','), ...rows.map((r) => headers.map((h) => esc(r[h])).join(','))].join('\n');
const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = filename; a.click();
URL.revokeObjectURL(url);
}
// ─── Assignee + location helpers (shared across screens) ──────────────────
const ASSIGNEE_NAMES = ['Aaron', 'Rene', 'Stuart'];
// Normalise legacy seed values (AS/RV) to the full-name set.
const displayAssignee = (raw) => {
if (!raw) return '';
if (raw === 'AS') return 'Aaron';
if (raw === 'RV') return 'Rene';
return raw;
};
// Pull the country from an HQ string. "London, UK" → "UK"; "Singapore" → "Singapore".
const extractCountry = (hq) => {
if (!hq) return '';
const parts = String(hq).split(',').map((s) => s.trim()).filter(Boolean);
return parts[parts.length - 1] || '';
};
// ─── Filter state that survives navigation ────────────────────────────────
// Screens unmount when you leave them, so plain useState wiped every filter
// (the "I have to re-choose Tier 1 each time" complaint). Same API as
// useState, backed by sessionStorage so it also survives a page refresh but
// resets when the tab closes.
function usePersistentState(key, initial) {
const storageKey = `ipsem-ui:${key}`;
const [value, setValue] = React.useState(() => {
try {
const raw = sessionStorage.getItem(storageKey);
return raw === null ? initial : JSON.parse(raw);
} catch (e) {
return initial;
}
});
React.useEffect(() => {
try { sessionStorage.setItem(storageKey, JSON.stringify(value)); } catch (e) { /* private mode */ }
}, [storageKey, value]);
return [value, setValue];
}
// ─── Property engagement type ─────────────────────────────────────────────
// How long we can work a property for. 'one-off' covers short-window assets
// (a single tour, a single event) that should not be pitched as season deals.
const ENGAGEMENT_TYPES = [
{ value: 'ongoing', label: 'Ongoing', short: 'Ongoing', kind: 'muted', desc: 'Season-long or multi-year partnership' },
{ value: 'short-term', label: 'Short term', short: 'Short term', kind: 'pending', desc: 'A limited window — a series, a season, a campaign' },
{ value: 'one-off', label: 'One-off', short: 'One-off', kind: 'accent', desc: 'A single event or tour — cannot be sold as an ongoing deal' },
];
const engagementMeta = (v) => ENGAGEMENT_TYPES.find((t) => t.value === v) || ENGAGEMENT_TYPES[0];
// ─── Identity ─────────────────────────────────────────────────────────────
// Mentions and notifications are keyed by the canonical team name (Aaron /
// Rene / Stuart), but a signed-in user is "Aaron Sailis" or, with no profile
// name set, just an email. Resolve any of those to the canonical name so a
// notification addressed to @Aaron actually reaches Aaron Sailis.
// Returns '' when the user cannot be matched to anyone on the team.
function resolveTeamName(user) {
if (!user) return '';
const tryMatch = (candidate) => {
const c = String(candidate || '').trim().toLowerCase();
if (!c) return '';
return ASSIGNEE_NAMES.find((n) => n.toLowerCase() === c) || '';
};
// Exact display name, then each word of it ("Aaron Sailis" → "Aaron").
const name = String((user.name || '')).trim();
let hit = tryMatch(name);
if (hit) return hit;
for (const word of name.split(/\s+/)) {
hit = tryMatch(word);
if (hit) return hit;
}
// Fall back to the email local part ("stuart@ipsemsquared.com" → "Stuart").
const local = String(user.email || '').split('@')[0];
const parts = local.split(/[^A-Za-z]+/).filter(Boolean);
for (const part of parts) {
hit = tryMatch(part);
if (hit) return hit;
}
// Last resort: a local part that STARTS WITH a team name. Real addresses here
// look like aaronks@… — with exact matching only, a user who had not set a
// full name resolved to nobody, so the bell returned null and they received
// no notifications at all, mentions included. Longest name first so a prefix
// of another name cannot win. Must stay last, after every exact check.
for (const part of parts) {
const p = part.toLowerCase();
const byLength = ASSIGNEE_NAMES.slice().sort((a, b) => b.length - a.length);
const pre = byLength.find((n) => p.startsWith(n.toLowerCase()));
if (pre) return pre;
}
return '';
}
// How to sign a note. Prefers the profile name, falls back to the team name
// so a user with no full name set is not credited as a raw email address.
// A note's author is whatever string was stored when it was written — sometimes
// a display name ("Stuart"), sometimes the raw email, depending on whether the
// writer had set a profile name at the time. Left as-is, the same person shows
// up twice in the Notes author filter and as two different people in the list.
// Emails resolve to the team name; anything else is already a name and is kept
// verbatim, so "Aaron Sailis" does not get shortened.
function authorLabel(author) {
const raw = String(author || '').trim();
if (!raw) return 'Unknown';
if (!raw.includes('@')) return raw;
return resolveTeamName({ email: raw }) || raw;
}
function displayNameFor(user) {
if (!user) return 'Unknown';
return (user.name || '').trim() || resolveTeamName(user) || user.email || 'Unknown';
}
// ─── @mentions ────────────────────────────────────────────────────────────
// Mentions resolve against the shared team list. Returns canonical names.
function parseMentions(text) {
const found = [];
const re = /@([A-Za-z][A-Za-z'-]*)/g;
let m;
while ((m = re.exec(String(text || ''))) !== null) {
const hit = ASSIGNEE_NAMES.find((n) => n.toLowerCase() === m[1].toLowerCase());
if (hit && !found.includes(hit)) found.push(hit);
}
return found;
}
// Renders note text with @mentions highlighted.
function MentionText({ text }) {
const parts = String(text || '').split(/(@[A-Za-z][A-Za-z'-]*)/g);
return (
{parts.map((p, i) => {
const isMention = p.startsWith('@') &&
ASSIGNEE_NAMES.some((n) => n.toLowerCase() === p.slice(1).toLowerCase());
return isMention ? (
{p}
) : {p};
})}
);
}
// ─── Notes panel (shared) ─────────────────────────────────────────────────
// Lives in ui.jsx so it can be mounted on ANY screen where a decision is made
// — Research, Property Match, and anywhere else it is needed later.
// Type @ to mention a teammate; they get a real notification in the bell.
// One panel, one note list, identical on every stage. The notes live on the
// brand row (brands.notes), so a note written in Research is the same note read
// in Match, Contacts and Draft — there is no per-stage thread. The heading is
// deliberately fixed for the same reason: a different title on each page made
// it look like each stage had its own notes.
function NotesPanel({ brand, currentUser, onUpdateBrand, onToast, compact }) {
const title = 'Notes';
const [text, setText] = React.useState('');
const [mentionQuery, setMentionQuery] = React.useState(null);
const [isAction, setIsAction] = React.useState(false);
const [actionOwner, setActionOwner] = React.useState('');
const [editingAt, setEditingAt] = React.useState(null); // createdAt of the note being edited
const [editText, setEditText] = React.useState('');
const taRef = React.useRef(null);
const notes = Array.isArray(brand.notes) ? brand.notes : [];
const author = displayNameFor(currentUser);
const myTeamName = resolveTeamName(currentUser);
const handleChange = (e) => {
const v = e.target.value;
setText(v);
const caret = e.target.selectionStart || v.length;
const m = v.slice(0, caret).match(/@([A-Za-z'-]*)$/);
setMentionQuery(m ? m[1] : null);
};
const suggestions = mentionQuery === null
? []
: ASSIGNEE_NAMES.filter((n) => n.toLowerCase().startsWith(mentionQuery.toLowerCase()));
const insertMention = (name) => {
const ta = taRef.current;
const caret = ta ? ta.selectionStart : text.length;
const before = text.slice(0, caret).replace(/@([A-Za-z'-]*)$/, `@${name} `);
setText(before + text.slice(caret));
setMentionQuery(null);
requestAnimationFrame(() => {
if (ta) { ta.focus(); ta.setSelectionRange(before.length, before.length); }
});
};
const addNote = () => {
const body = text.trim();
if (!body) return;
const mentions = parseMentions(body);
// An action defaults to the first person mentioned, else the writer.
const owner = isAction ? (actionOwner || mentions[0] || myTeamName || author) : '';
const newNote = {
// source marks this as hand-written, so the Notes & actions page can tell
// it apart from a bulk Excel import and clear the two independently.
text: body, author, createdAt: new Date().toISOString(), mentions, source: 'app',
...(isAction ? { isAction: true, actionOwner: owner, actionDone: false } : {}),
};
onUpdateBrand(brand.id, { notes: [newNote, ...notes] });
setText('');
setMentionQuery(null);
setIsAction(false);
setActionOwner('');
// EVERY comment notifies the rest of the team, not only @mentions. The
// weekly meeting runs on comments, and a note nobody is told about is a note
// nobody reads — that was the whole point of the panel.
//
// Two kinds, because being named is stronger than being copied in:
// mention — someone typed @you
// comment — someone wrote on a brand
// You are never notified about your own note. Compare on the canonical team
// name, since `author` may be a full name or an email.
const meLower = String(myTeamName || author).toLowerCase();
const mentioned = mentions.filter((n) => n.toLowerCase() !== meLower);
const mentionedLower = new Set(mentioned.map((n) => n.toLowerCase()));
const others = ASSIGNEE_NAMES.filter((n) => {
const l = n.toLowerCase();
return l !== meLower && !mentionedLower.has(l);
});
const notify = (recipients, kind) => {
if (!recipients.length) return;
window.IPSEM_API.createNotifications({
recipients, actor: author, brandId: brand.id, brandName: brand.brand, body, kind,
}).catch((e) => console.warn(`${kind} notification failed:`, e));
};
notify(mentioned, 'mention');
notify(others, 'comment');
const told = [...mentioned, ...others];
onToast && onToast(
told.length
? `${isAction ? 'Next action' : 'Note'} added — ${told.join(' and ')} notified`
: (isAction ? 'Next action added' : 'Note added')
);
};
const deleteNote = (createdAt) => {
onUpdateBrand(brand.id, { notes: notes.filter((n) => n.createdAt !== createdAt) });
};
// Whether this note is yours. Not a plain string comparison: the author was
// stored as whatever displayNameFor returned at the time, so the same person
// appears as "Stuart", "stuart@ipsemsquared.com" and "Aaron Sailis". Comparing
// exactly would hide the edit control on a person's own older notes — 13 of
// Stuart's are stored under his email address. resolveTeamName maps all three
// forms onto one team name; the myTeamName guard stops two non-members (or
// "Excel import") resolving to '' and matching each other.
const isMine = (n) => {
const a = (n && n.author) || '';
if (!a) return false;
if (a === author) return true;
return !!myTeamName && resolveTeamName({ name: a, email: a }) === myTeamName;
};
// Editing keeps createdAt and author untouched, because the server matches a
// note on that pair — change either and the update lands on nothing. It also
// keeps attribution honest in a panel two people write in at once, which is
// why only the author sees the control and why an edit is stamped rather than
// applied silently.
const saveEdit = (n, next) => {
const body = (next || '').trim();
setEditingAt(null);
if (!body || body === n.text) return;
onUpdateBrand(brand.id, {
notes: notes.map((x) => (x.createdAt === n.createdAt && x.author === n.author
? { ...x, text: body, editedAt: new Date().toISOString() }
: x)),
});
onToast && onToast('Note updated');
};
const toggleCleared = (n) => {
onUpdateBrand(brand.id, { notes: toggleNoteCleared(notes, n.createdAt, author) });
if (onToast) {
const word = n.isAction ? 'action' : 'note';
onToast(noteIsCleared(n) ? `Re-opened this ${word}` : `Marked this ${word} ${n.isAction ? 'done' : 'reviewed'}`);
}
};
return (