VVB Readiness
{project.vvb}/100
=75 ? '#2BC48A' : project.vvb>=50 ? '#F4C300' : '#9CA3AF', width:`${project.vvb}%`}}/>
{tier.label}
Weighted P1 20% · P2 25% · P3 25% · P4 20% · P5 10%
);
}
function CreditsCard({ project }) {
const issued = project.credits;
return (
Credits
{issued > 0 ? (
<>
|
|
|
) : (
<>
|
|
Credits become issuable after Phase 5 sign-off. Estimate based on baseline × project area.
)}
);
}
function Row({ k, v, bold, fg, muted }) {
return (
{k}
{v}
);
}
function ProjectMetaCard({ project, expanded = false }) {
return (
Project
{project.coords}}/>
{expanded && (
<>
|
)}
Not assigned}/>
{project.vvbAssigned && }
{project.auditId && {project.auditId}}/>}
);
}
function CreditsExpanded({ project }) {
return (
Issuance forecast
{project.credits > 0 ? (
<>
Next vintage: Q3 2026
Expected: {Math.round(project.projected * 0.15).toLocaleString()} tCO2e
Based on monitoring report ingestion cadence.
) : (
)}
);
}
/* ============================================================
* Phase-3 Workspace (net-new)
*
* Editable Phase-3 fields. Saving a flagged/empty field moves it
* to 'confirmed' in-session. Save & continue commits the batch.
* Permission-restricted: VVB sign-off button is visibly disabled
* with a tooltip — proving the role separation.
* ============================================================ */
function Phase3Workspace({ project, layoutMode = 'workspace', onBack, onOpenFindings }) {
// 'workspace' = full editable; 'view' = read-only relabel ("View project")
const [fields, setFields] = React.useState(() =>
(project.id === 'PRJ-KE-BUS001' ? PHASE3_FIELDS : syntheticFields(project)).map(f => ({...f}))
);
const [editingId, setEditingId] = React.useState(null);
const [draftValue, setDraftValue] = React.useState('');
const [savedToast, setSavedToast] = React.useState(null);
const stats = React.useMemo(() => {
const c = fields.reduce((acc,f) => { acc[f.state] = (acc[f.state]||0)+1; return acc; }, {});
const confirmed = (c.confirmed||0) + (c.committed||0) + (c.imported||0);
return { confirmed, total: fields.length, empty: c.empty||0, flagged: c.flagged||0, ai: c.ai||0 };
}, [fields]);
const pct = Math.round((stats.confirmed / stats.total) * 100);
const acceptAi = (id) => {
setFields(fs => fs.map(f => f.id===id ? {...f, state:'confirmed', who:'Grace K. · just now'} : f));
setSavedToast({ kind:'ai-accepted' });
setTimeout(()=>setSavedToast(null), 2200);
};
const startEdit = (f) => { setEditingId(f.id); setDraftValue(f.state==='empty' ? '' : f.value); };
const saveEdit = () => {
setFields(fs => fs.map(f => f.id===editingId ? {...f, state:'confirmed', value: draftValue || f.value, who:'Grace K. · just now'} : f));
setEditingId(null);
setSavedToast({ kind:'saved' });
setTimeout(()=>setSavedToast(null), 2200);
};
const resolveFlag = (id) => {
setFields(fs => fs.map(f => f.id===id ? {...f, state:'confirmed', value: f.value + ' · justification attached', who:'Grace K. · just now'} : f));
setSavedToast({ kind:'resolved' });
setTimeout(()=>setSavedToast(null), 2200);
};
const isViewMode = layoutMode === 'view';
return (
Back to project
{project.id} · Phase {project.phase}
{isViewMode ? `${project.name}` : `Phase ${project.phase} workspace`}
{project.registry}
Phase {project.phase} · {project.phaseName}
· {project.methodology}
{!isViewMode && (
View VVB findings
)}
{/* Permission-restricted: signing off is VVB-only */}
Sign & commit (VVB only)
{/* Permission banner — proves the role separation */}
You're the project developer.
{' '}You can edit fields, accept AI suggestions, and respond to findings.
Sampling, anomaly adjudication, and validation sign-off are VVB actions assigned to {project.vvbAssigned?.name || 'an unassigned VVB'} .
{/* Progress strip */}
Phase {project.phase} progress
{stats.confirmed}/{stats.total} · {pct}%
=80 ? '#2BC48A' : '#F4C300', width:`${pct}%`, transition:'width 400ms'}}/>
{/* Field grid */}
{fields.map(f => (
startEdit(f)}
onCancel={()=>setEditingId(null)}
onSave={saveEdit}
onAcceptAi={()=>acceptAi(f.id)}
onResolve={()=>resolveFlag(f.id)}
readOnly={isViewMode}
/>
))}
{/* Save & continue */}
{!isViewMode && (
Ready to commit
Saving will batch-commit {stats.confirmed} fields to Hedera as a single audit anchor. {stats.empty + stats.ai + stats.flagged} fields still need attention before Phase {project.phase} can be sealed.
Save & continue
)}
{/* Toast */}
{savedToast && (
{savedToast.kind==='ai-accepted' && 'AI suggestion accepted — field confirmed.'}
{savedToast.kind==='saved' && 'Field saved — staged for next commit.'}
{savedToast.kind==='resolved' && 'Flag resolved with justification.'}
)}
);
}
function Stat({ l, v, c }) {
return (
);
}
function EditableField({ field, isEditing, draftValue, setDraftValue, onStartEdit, onCancel, onSave, onAcceptAi, onResolve, readOnly }) {
const S = FIELD_STATE[field.state] || FIELD_STATE.empty;
if (isEditing) {
return (
{field.label} · EDITING
setDraftValue(e.target.value)} placeholder="Enter value…" style={{
width:'100%', padding:'8px 10px', border:'1.5px solid #F4C300', borderRadius:8,
fontSize:13, fontFamily:'inherit', outline:'none', marginBottom:10,
}}/>
Cancel
Save field
);
}
return (
{field.value}
{field.who}
{!readOnly && (
{field.state==='ai' &&
Accept }
{field.state==='flagged' &&
Resolve }
{field.state==='empty' &&
Add value }
{(field.state==='confirmed'||field.state==='ai'||field.state==='flagged') && (
Edit
)}
{field.state==='committed' &&
SEALED }
{field.state==='imported' &&
Override }
)}
);
}
function Pill({ children, onClick, color, ghost }) {
return (
{children}
);
}
window.ProjectDetail = ProjectDetail;
window.Phase3Workspace = Phase3Workspace;