// =========================================================
// COMMERCIAL WORKSPACE V2 — Phase 16
// -----------------------------------------------------------------
// Depth cap: Project → Commercial → Contract Detail.
// Three peer views: Overview / Contracts / Milestones.
//
// Reads exclusively from `data.contracts[]` (canonical) filtered
// for this project. Stage↔Commercial derives from
// `contract.stageLinks[]` which remains the source of truth.
// No duplication of contracts, documents, or milestones.
// =========================================================
const CW_STATE = {
'complete': { tone: 'green', label: 'Complete' },
'shipped': { tone: 'green', label: 'Complete' },
'attention': { tone: 'yellow', label: 'Attention' },
'blocked': { tone: 'red', label: 'Blocked' },
'upcoming': { tone: 'gray', label: 'Upcoming' },
'pending': { tone: 'blue', label: 'Pending' },
'waiting': { tone: 'blue', label: 'Waiting' },
'not-started': { tone: 'gray', label: 'Not started' },
'active': { tone: 'blue', label: 'Active' },
'granted': { tone: 'green', label: 'Granted' },
'planned': { tone: 'gray', label: 'Planned' },
'overdue': { tone: 'red', label: 'Overdue' },
};
const CW_MILESTONE_ICON = {
'signed': 'signed',
'sign-off': 'check',
'payment': 'wallet',
'delivery': 'stack',
'renewal': 'refresh',
'approval': 'check',
};
function cwStateChip(state, size = 'sm') {
const s = CW_STATE[state];
if (!s) return null;
return ;
}
function cwPortrait(name, pdata) {
const k = (name || '').toLowerCase();
return (pdata.people || {})[k]?.portrait || null;
}
// -----------------------------------------------------------------
// Realistic document cover previews — small paper-like SVGs.
// Not generic gray rectangles.
// -----------------------------------------------------------------
function CWDocCover({ kind = 'contract', size = 'md' }) {
const W = 200, H = 260;
const common = { viewBox: `0 0 ${W} ${H}`, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid meet' };
if (kind === 'contract') {
return (
);
}
if (kind === 'sow' || kind === 'brief') {
return (
);
}
if (kind === 'invoice') {
return (
);
}
if (kind === 'nda') {
return (
);
}
return null;
}
// -----------------------------------------------------------------
// Commercial Journey — horizontal timeline of milestones.
// Uses only semantic color; connectors are neutral.
// -----------------------------------------------------------------
function CWJourney({ contract, pdata, dense = false }) {
const ms = contract.stageLinks || [];
if (!ms.length) return null;
return (
);
}
// =========================================================
// OVERVIEW
// =========================================================
function CWOverview({ pdata, data, onOpenContract }) {
const contracts = (data.contracts || []).filter(c => c.project === pdata.id);
const active = contracts.find(c => c.status === 'Active' && c.value !== '—') || contracts[0];
if (!active) {
return (
No commercial agreement is linked to this project yet.
);
}
const client = data.clients[active.client];
const primaryDoc = active.primaryDoc ? (pdata.documents || []).find(d => d.id === active.primaryDoc) : null;
const attention = (active.stageLinks || []).filter(m => m.state === 'attention' || m.state === 'blocked' || m.state === 'overdue');
const upcoming = (active.stageLinks || []).filter(m => m.state === 'upcoming' || m.state === 'pending');
return (
{/* --- Active agreement flagship --------------------------- */}
Active agreement
·
{active.id}
{active.title}
{cwStateChip(active.status.toLowerCase() === 'active' ? 'active' : active.status.toLowerCase())}
{client && (
{client.short}
{client.name}
)}
{active.start} → {active.end}
{active.expiresIn}
{active.summary?.currentState || ''}
{active.owner && (
)}
{active.clientContact && (
Client contact
{active.clientContact}
{client?.name} · {active.clientContactRole}
)}
{/* --- Commercial journey ---------------------------------- */}
Commercial journey
Milestones across the project lifecycle
{/* --- Needs attention ------------------------------------- */}
Needs attention
{attention.length ? (
) : (
No commercial blockers. Wave 2 Beta unlocks on schedule.
)}
{/* --- Upcoming milestones (small strip) ------------------ */}
{upcoming.length > 0 && (
{upcoming.map(m => {
const stage = pdata.stages.find(x => x.n === m.stage);
return (
{m.date.split(' ')[1]}
{m.date.split(' ')[0]}
{m.label}
S{String(m.stage).padStart(2,'0')}
·
{stage?.name}
{m.amount &&
{m.amount}}
{cwStateChip(m.state)}
);
})}
)}
{/* --- Costs strip ---------------------------------------- */}
{(active.costs || []).length > 0 && (
Execution-related costs
Only where a cost affects delivery
{active.costs.map(c => {
const stage = pdata.stages.find(x => x.n === c.stage);
const missionMeta = window.MYGENI_MISSIONS[c.mission];
return (
{c.label}
{stage && S{String(c.stage).padStart(2,'0')}}
{missionMeta && <>
·
{missionMeta.label}
}
{c.note && <>
·
{c.note}
}
{c.amount}{c.cadence}
{cwStateChip(c.state)}
);
})}
)}
);
}
// =========================================================
// CONTRACTS — structured rows
// =========================================================
function CWContracts({ pdata, data, onOpenContract }) {
const contracts = (data.contracts || []).filter(c => c.project === pdata.id);
return (
{contracts.length ? (
) : (
No commercial agreement is linked to this project yet.
)}
{/* Calm capacity state — better than fake filler rows. */}
{contracts.length < 3 && (
Historical & future
No prior or upcoming agreements for this project. New engagements will appear here.
)}
Back to Contracts
{/* --- Compact header --------------------------------------- */}
Contract
·
{contract.id}
{contract.title}
{client && (
{client.short}
{client.name}
)}
{contract.start} → {contract.end}
{contract.expiresIn}
Total value
{contract.value}
{/* --- Body split ------------------------------------------- */}
{/* Left */}
{/* Summary */}
{contract.summary && (
Summary
Scope
{contract.summary.scope}
Billing
{contract.summary.billing}
Current state
{contract.summary.currentState}
)}
{/* Journey */}
Commercial journey
{(contract.stageLinks || []).length} milestones
{/* Approvals */}
{(contract.approvals || []).length > 0 && (
Approvals
{contract.approvals.map(a => {
const stage = pdata.stages.find(x => x.n === a.stage);
return (
{a.status === 'granted' && }
{a.title}
{a.approver}
·
S{String(a.stage).padStart(2,'0')}
·
{stage?.name}
·
{a.date}
{a.evidence &&
{a.evidence}
}
{cwStateChip(a.status)}
);
})}
)}
{/* Documents */}
{linkedDocs.length > 0 && (
)}
{/* Costs */}
{(contract.costs || []).length > 0 && (
Execution-related costs
Only where a cost affects delivery
{contract.costs.map(c => {
const stage = pdata.stages.find(x => x.n === c.stage);
const missionMeta = window.MYGENI_MISSIONS[c.mission];
return (
{c.label}
{stage && S{String(c.stage).padStart(2,'0')}}
{missionMeta && <>
·
{missionMeta.label}
}
{c.note && <>
·
{c.note}
}
{c.amount}{c.cadence}
{cwStateChip(c.state)}
);
})}
)}
{/* Right rail */}
{/* At a glance */}
At a glance
Start{contract.start}
End{contract.end}
Renewal{contract.expiresIn}
Total value{contract.value}
Files{contract.files}
{/* Client context — pointer to canonical Client area */}
{client && (
)}
{/* Cross-navigation */}
);
}
// =========================================================
// MILESTONES — chronological timeline
// =========================================================
function CWMilestones({ pdata, data, onOpenContract }) {
const contracts = (data.contracts || []).filter(c => c.project === pdata.id);
// Flatten all milestones, tag with contract, sort by index (roughly chronological within a contract).
const all = contracts.flatMap(c => (c.stageLinks || []).map(m => ({ ...m, contract: c })));
const [filter, setFilter] = React.useState('all'); // all | upcoming | completed | attention
const [stageF, setStageF] = React.useState('all');
const [contF, setContF] = React.useState('all');
const stagesInUse = Array.from(new Set(all.map(m => m.stage))).sort((a,b) => a - b);
const chipMatch = (m) => {
if (filter === 'all') return true;
if (filter === 'upcoming') return ['upcoming','pending','not-started','waiting'].includes(m.state);
if (filter === 'completed') return ['complete','shipped','granted'].includes(m.state);
if (filter === 'attention') return ['attention','blocked','overdue'].includes(m.state);
return true;
};
const filtered = all.filter(m => {
if (!chipMatch(m)) return false;
if (stageF !== 'all' && String(m.stage) !== stageF) return false;
if (contF !== 'all' && m.contract.id !== contF) return false;
return true;
});
const chips = [
{ k: 'all', label: 'All', n: all.length },
{ k: 'upcoming', label: 'Upcoming', n: all.filter(m => ['upcoming','pending','not-started','waiting'].includes(m.state)).length },
{ k: 'completed', label: 'Completed', n: all.filter(m => ['complete','shipped','granted'].includes(m.state)).length },
{ k: 'attention', label: 'Needs attention', n: all.filter(m => ['attention','blocked','overdue'].includes(m.state)).length },
];
return (
{chips.map(c => (
))}
{filtered.length ? (
{filtered.map(m => {
const stage = pdata.stages.find(x => x.n === m.stage);
return (
{m.date.split(' ')[1]}
{m.date.split(' ')[0]}
{m.state === 'complete' && }
{(m.state === 'attention' || m.state === 'blocked') && }
{m.label}
{m.evidence &&
{m.evidence}
}
{m.amount &&
{m.amount}}
{cwStateChip(m.state)}
);
})}
) : (
No milestones match those filters.
)}
);
}
// =========================================================
// ROUTER SHELL
// -----------------------------------------------------------------
// Sub-route shape:
// /commercial → Overview
// /commercial/contracts → Contracts
// /commercial/milestones → Milestones
// /commercial/contract/:id → Contract Detail
// =========================================================
function CommercialWorkspaceV2({ pdata, data, subId, sub2 }) {
const isDetail = subId === 'contract';
const view = isDetail
? 'contract'
: (subId === 'contracts' ? 'contracts' : (subId === 'milestones' ? 'milestones' : 'overview'));
const setView = (v) => {
location.hash = v === 'overview'
? `#/projects/${pdata.id}/commercial`
: `#/projects/${pdata.id}/commercial/${v}`;
};
const openContract = (id) => {
location.hash = `#/projects/${pdata.id}/commercial/contract/${id}`;
};
return (
{!isDetail && (
{[
{ k: 'overview', label: 'Overview' },
{ k: 'contracts', label: 'Contracts' },
{ k: 'milestones', label: 'Milestones' },
].map(t => (
))}
Execution-focused commercial context. Not accounting.
)}
{view === 'overview' &&
}
{view === 'contracts' &&
}
{view === 'milestones' &&
}
{view === 'contract' &&
}