// ===========================================================================
// LEON Sign — send it, track it, file it
// ===========================================================================
// Built against Leon's own DocuSign account rather than against a guess at what
// e-signature software looks like. The study is in docs/leon-sign-study.md; the
// three facts it turned on are:
//
// 1. 17 of their 23 envelopes are SHOP DRAWING APPROVALS at a revision, and
// every document type they send is already produced by this Hub. So the
// job is not "add e-signature", it is CLOSING A LOOP that is currently a
// manual download, rename, upload and re-file.
// 2. It is a revision workflow — Rev00 through Rev05 — which is exactly what
// scope.submittals already models.
// 3. Routing is the same every time: the external party, then a Leon
// counter-signer. That is orders 1 and 2, not a thing to design each time.
//
// WHAT THIS IS NOT. A page with no backend cannot produce what makes a DocuSign
// signature hold up — identity verified server-side, a tamper-evident chain and
// a timestamped certificate from a party with no stake in the document. So an
// envelope declares its own weight and the screen never claims more than it
// has. The one piece of real evidence a browser CAN produce is a content hash,
// and that is taken at send: it proves the bytes, and it does not prove the
// hour, and both halves are said out loud.
const SIGN_SECTIONS = [
{ key: 'inbox', label: 'Waiting on me', icon: '✍️', group: 'Signing',
hint: 'Envelopes routed to you that are yours to sign now.' },
{ key: 'all', label: 'All envelopes', icon: '📄', group: 'Signing',
hint: 'Everything sent, in progress, completed or voided.' },
{ key: 'compose', label: 'New envelope', icon: '➕', group: 'Signing',
hint: 'Take a document the Hub already produced and route it for signature.' },
{ key: 'about', label: 'What this is', icon: 'ℹ️', group: 'Settings',
hint: 'What a signature here does and does not mean.' },
];
function signStatusTone(status) {
if (status === 'Completed') return 'bg-green-100 text-green-800';
if (status === 'Declined' || status === 'Voided') return 'bg-red-100 text-red-700';
if (status === 'Draft') return 'bg-[var(--leon-line)]/60 text-[var(--leon-black)]/60';
return 'bg-[var(--leon-yellow)]/30 text-[var(--leon-black)]/75';
}
function SignStatusBadge({ env }) {
const s = signEnvelopeStatus(env);
return {s};
}
// ---------------------------------------------------------------------------
// The signing surface
// ---------------------------------------------------------------------------
// A mark is drawn or typed. Drawn is kept as a data URI on the RECIPIENT, so
// one person signing a three-page set signs once and every field they own
// carries the same mark — which is also how it works on paper.
function SignPad({ onDone, onCancel, name }) {
const cv = useRef(null);
const [drawing, setDrawing] = useState(false);
const [dirty, setDirty] = useState(false);
const [typed, setTyped] = useState(name || '');
const [mode, setMode] = useState('draw');
const pos = e => {
const r = cv.current.getBoundingClientRect();
return [(e.clientX - r.left) * (cv.current.width / r.width),
(e.clientY - r.top) * (cv.current.height / r.height)];
};
const start = e => {
e.preventDefault();
const c = cv.current.getContext('2d');
c.lineWidth = 2.4; c.lineCap = 'round'; c.strokeStyle = '#12100e';
c.beginPath(); c.moveTo(...pos(e));
setDrawing(true); setDirty(true);
cv.current.setPointerCapture(e.pointerId);
};
const move = e => { if (!drawing) return; const c = cv.current.getContext('2d'); c.lineTo(...pos(e)); c.stroke(); };
const end = () => setDrawing(false);
const clear = () => { const c = cv.current; c.getContext('2d').clearRect(0, 0, c.width, c.height); setDirty(false); };
return (
)}
{/* WHAT THIS SIGNATURE MEANS — stated on the envelope itself, not buried
in a settings page, because it is the one thing a reader must not have
to guess about. */}
{(SIGN_WEIGHTS.find(w => w.key === env.weight) || {}).label}{' — '}
{env.weight === 'contract' ? (
<>this is prepared and tracked here, but a signature taken inside the Hub is
not a binding e-signature: there is no server-side identity check and no
independently timestamped certificate. Use it to get the document agreed and filed, and take
the binding signature through a real e-signature service.
) : (
<>a record of who approved this drawing and when, kept for our own file. That is what a shop
drawing sign-off is. It is not a legal e-signature and does not claim to be.
)}
Times come from the signer’s own computer and nothing here is witnessed by a third
party. The document hash is real evidence that the bytes have not changed; it is not
evidence of when.
setVoiding(false)} title="Void this envelope">
Voiding stops it. Nothing is deleted — the envelope and its history stay as the record
of what happened.
LEON Sign owns the whole workflow around a signature: it takes a document this Hub already
produced, names it to one standard, routes it to the people who have to see it in the right
order, tracks who is holding it up, and files the executed copy back on the job it came from.
Approval records — what most of this is
Seventeen of the twenty-three envelopes sent from this company in the last seven months were
shop drawing approvals. An approval is a record that a named person agreed a drawing at a
revision, on a date. LEON Sign produces exactly that, and it is genuinely useful.
Contracts — what this cannot do
A binding e-signature needs three things this app has no way to provide: identity checked by
a server rather than by asking, a tamper-evident chain nobody can rewrite, and a completion
certificate timestamped by a party with no stake in the document. The Hub runs entirely in
your browser, so it can offer none of them. Supply agreements, sales contracts and NDAs
should still go through a real e-signature service — prepare and track them here, and
sign them there.
The one real piece of evidence produced here is a SHA-256 hash of each
document, taken at the moment it is sent. That proves the bytes have not changed since. It
does not prove when anything happened — every time recorded comes from the
signer’s own computer clock.
);
}
// ---------------------------------------------------------------------------
// Composing — the loop this exists to close
// ---------------------------------------------------------------------------
// The point is NOT a file picker. Every document Leon sends for signature is
// already produced by this Hub, so the compose step offers the job's own
// submittal revisions, drawings and quotations, and takes the name, the
// revision and the scope from the record rather than asking anyone to retype
// them. That is what removes the download-rename-upload-refile round trip.
function SignComposePanel({ ctx, onCreated }) {
const projects = typeof ctx.toolProjects === 'function' ? ctx.toolProjects() : (ctx.projects || []);
const [projectId, setProjectId] = useState((projects[0] || {}).id || '');
const project = projects.find(p => p.id === projectId) || null;
const [weight, setWeight] = useState('approval');
const [picked, setPicked] = useState(null); // { kind, name, url, scopeId, revision, refId }
const [subject, setSubject] = useState('');
const [message, setMessage] = useState('');
const [rows, setRows] = useState([
{ id: 'r1', name: '', email: '', role: 'signer', order: 1, party: 'external' },
{ id: 'r2', name: '', email: '', role: 'signer', order: 2, party: 'internal' },
]);
// Everything on this job that is worth signing, read from the records that
// already hold it.
const sources = useMemo(() => {
if (!project) return [];
const out = [];
(project.scopes || []).forEach(sc => {
(sc.submittals || []).forEach(th => {
(th.revisions || []).forEach(rv => {
if (!rv.fileUrl) return;
out.push({ kind: 'Submittal revision', scopeId: sc.id, scopeName: sc.name,
refId: rv.id, revision: rv.revisionNumber != null ? rv.revisionNumber : rv.number,
name: rv.fileName || th.title || 'Revision', url: rv.fileUrl, title: th.title });
});
});
(sc.documents || []).forEach(d => {
if (d.fileUrl) out.push({ kind: 'Scope document', scopeId: sc.id, scopeName: sc.name,
refId: d.id, revision: null, name: d.fileName || d.name || 'Document', url: d.fileUrl });
});
});
(project.drawingSets || []).forEach(ds => {
if (ds.fileUrl) out.push({ kind: 'Drawing set', scopeId: null, refId: ds.id,
revision: ds.revision != null ? ds.revision : null, name: ds.fileName || ds.name || 'Drawing set', url: ds.fileUrl });
});
return out;
}, [project]);
// ONE generated name. Their own account runs three conventions because a
// person types it each time; the Hub knows every part of it.
const generatedName = picked && project
? signDocumentName({ project: project.name, scope: picked.scopeName || '',
kind: picked.title || picked.kind, revision: picked.revision })
: '';
const setRow = (id, f) => setRows(rs => rs.map(r => r.id === id ? Object.assign({}, r, f) : r));
const people = (ctx.teamDirectory || []).filter(p => p.active !== false);
const create = () => {
if (!picked) { alert('Pick the document to send first.'); return; }
const id = ctx.addSignEnvelope({
subject: subject || generatedName, message, weight,
projectId: project ? project.id : null, scopeId: picked.scopeId || null,
source: { kind: picked.kind, refId: picked.refId, revision: picked.revision },
documents: [makeSignDocument({ name: generatedName || picked.name, url: picked.url,
source: { kind: picked.kind, projectId: project ? project.id : null,
scopeId: picked.scopeId || null, refId: picked.refId, revision: picked.revision } })],
recipients: rows.filter(r => r.name.trim() || r.email.trim()).map(r => makeSignRecipient(r)),
});
if (id && onCreated) onCreated(id);
};
return (
w.key === weight) || {}).hint}>
{!sources.length ? (
Nothing on this job carries a file yet. A submittal revision, a scope document or a
drawing set with a file attached is what gets sent.
) : (
{sources.map((sdoc, i) => (
))}
)}
{picked && (
It will be sent as
{generatedName}
Generated from the job, the scope, the document and its revision — so every
envelope is named the same way instead of three ways.
)}
Leon’s own envelopes go to the outside party first and a LEON counter-signer second.
That is what these two steps are; add more if the job needs them.
}
{r.signatureTyped && !r.signatureImage && (
{r.signatureTyped}
)}
{waiting && their turn}