Contracts
{all.length} contracts on file · {active.length} active · {expiringSoon.length} expiring within 90 days
c.type === 'customer').length} active`} tone="up" />
c.type === 'vendor').length} suppliers`} />
0 ? 'down' : 'up'} />
0 ? fmtMoney(expiringSoon.reduce((s,c) => s + c.value, 0)) + ' at risk' : 'all current'} tone={expiringSoon.length > 0 ? 'down' : 'up'} />
{/* Renewals strip — high-signal */}
Renewals on the horizon
Contracts ending in the next 6 months · sorted by date
{D.CONTRACT_TYPES.map(t => (
))}
| Contract | Counterparty | Type | Value | Period | Status | Owner | Files |
|---|
{filtered.map(c => {
const t = D.CONTRACT_TYPES.find(x => x.id === c.type);
const o = getEmployee(c.owner);
const days = daysUntil(c.endDate);
const statusTone = c.status === 'Active' ? 'green' : c.status === 'Renewing' ? 'orange' : c.status === 'Pending signature' ? 'amber' : c.status === 'Draft' ? 'neutral' : c.status === 'Expired' ? 'red' : 'neutral';
return (
setOpen(c)}>
{c.id}
{c.name}
{c.tags.map(tag => '#' + tag).join(' ')}
|
{c.counterparty} |
{t.name} |
{c.value ? fmtMoneyFull(c.value) : '—'}{c.billing && c.value > 0 ? / {c.billing.split(' ')[0]} : ''} |
{fmtDateShort(c.startDate)} → {c.endDate ? fmtDateShort(c.endDate) : 'evergreen'}
{days != null && days >= 0 && days <= 90 && c.status === 'Active' && (
expires in {days}d
)}
|
{c.status} |
{o ? : —} |
{c.files.length} |
);
})}
{filtered.length === 0 && (
| No contracts match the current filters. |
)}
setOpen(null)} title="Contract" width={620}>
{open && }
{newOpen && (
setNewOpen(false)}
onCreate={(contract) => {
D.CONTRACTS.unshift(contract);
setVersion(v => v + 1);
setNewOpen(false);
setOpen(contract);
}} />
)}
);
}
function RenewalsStrip({ contracts, onOpen }) {
const today = new Date('2026-05-15');
const upcoming = contracts
.filter(c => c.endDate && c.status === 'Active')
.map(c => ({ ...c, daysLeft: Math.round((new Date(c.endDate) - today) / (1000*60*60*24)) }))
.filter(c => c.daysLeft >= 0 && c.daysLeft <= 240)
.sort((a,b) => a.daysLeft - b.daysLeft)
.slice(0, 6);
if (upcoming.length === 0) return No upcoming renewals in the next 6 months.
;
return (
{upcoming.map(c => {
const D = window.HitcentsData;
const t = D.CONTRACT_TYPES.find(x => x.id === c.type);
const urgent = c.daysLeft <= 60;
return (
onOpen(c)}
style={{ padding: 12, background: urgent ? 'var(--brand-orange-tint)' : 'var(--bg-elev)', border: `1px solid ${urgent ? 'var(--brand-orange)' : 'var(--border)'}`, borderLeft: `3px solid ${urgent ? 'var(--brand-orange)' : t.tone === 'neutral' ? 'var(--border-strong)' : `var(--${t.tone})`}`, borderRadius: 8, cursor: 'pointer' }}>
{t.name}
{c.daysLeft}d
{c.counterparty}
{c.name.replace(c.counterparty + ' — ', '')}
{c.value ? fmtMoneyFull(c.value) : '—'}
);
})}
{contract.id}
{t.name}
{contract.status}
{contract.autoRenew && Auto-renew}
{contract.name}
with {contract.counterparty}
{(() => {
const v = getVendorForContract(contract);
return v
? <> ·
: null;
})()}
{isExpiring && (
Expires in {days} days
{contract.renewalNotice > 0 ? `${contract.renewalNotice}-day renewal notice required.` : 'No automatic renewal.'} Action: confirm renewal with {contract.counterparty} or initiate negotiation.
)}
{customer && (
<>
Linked customer
{customer.name[0]}
{customer.name}
{customer.tier} · {customer.industry} · MRR {customer.mrr ? fmtMoneyFull(customer.mrr) : '—'}
)}
Files ({contract.files.length})
{contract.files.map((f, i) => {
const ext = f.name.split('.').pop().toLowerCase();
const kind = FILE_KINDS[ext] || { color: '#5C6470', label: ext.toUpperCase().slice(0,3) };
return (
{kind.label}
{f.name}
{fileBytes(f.size)}
);
})}
{[
{ label: 'Drafted', date: contract.signedOn ? new Date(new Date(contract.signedOn).getTime() - 14*86400000).toISOString().split('T')[0] : new Date(contract.startDate).toISOString().split('T')[0], done: true },
{ label: 'Reviewed by legal', date: contract.signedOn ? new Date(new Date(contract.signedOn).getTime() - 5*86400000).toISOString().split('T')[0] : null, done: !!contract.signedOn || contract.status === 'Pending signature' },
{ label: 'Signed', date: contract.signedOn, done: !!contract.signedOn },
{ label: 'Effective', date: contract.startDate, done: new Date(contract.startDate) <= today },
{ label: 'Expires', date: contract.endDate || 'Evergreen', done: contract.status === 'Expired' },
].map((step, i) => (
{step.done && }
{step.label}
{typeof step.date === 'string' && step.date !== 'Evergreen' ? fmtDateShort(step.date) : (step.date || '—')}
))}
Tags
{contract.tags.map(tag => #{tag})}
);
}
window.Contracts = Contracts;
// ─────────────────────────────────────────────────────────────────────────────
// New Contract modal — lightweight tracking record + PDF upload
// ─────────────────────────────────────────────────────────────────────────────
function NewContractModal({ onClose, onCreate }) {
const D = window.HitcentsData;
const [draft, setDraft] = useState({
type: 'customer',
name: '',
companyId: '',
counterparty: '',
value: 100000,
billing: 'Annual',
startDate: '2026-06-01',
endDate: '2027-05-31',
evergreen: false,
status: 'Draft',
autoRenew: true,
renewalNotice: 60,
});
const [files, setFiles] = useState([]);
const [dragOver, setDragOver] = useState(false);
const fileRef = useRef(null);
function set(patch) { setDraft(d => ({ ...d, ...patch })); }
function pickCompany(cid) {
const c = D.CUSTOMERS.find(x => x.id === cid);
set({ companyId: cid, counterparty: c ? c.name : '', name: draft.name || (c ? `${c.name} — ` : '') });
}
function onFiles(list) {
const added = Array.from(list).map(f => ({ name: f.name, size: f.size || 0 }));
setFiles(fs => [...fs, ...added]);
}
function removeFile(i) { setFiles(fs => fs.filter((_, idx) => idx !== i)); }
const counterpartyName = draft.type === 'customer'
? (D.CUSTOMERS.find(c => c.id === draft.companyId)?.name || '')
: draft.counterparty;
const canCreate = draft.name.trim() && counterpartyName.trim();
function submit() {
if (!canCreate) return;
const prefix = draft.type === 'customer' ? 'CT-1' : draft.type === 'vendor' ? 'CT-2' : 'CT-9';
const id = `${prefix}${String(Math.floor(Math.random() * 900) + 100)}`;
const contract = {
id,
name: draft.name.trim(),
type: draft.type,
counterparty: counterpartyName.trim(),
customerId: draft.type === 'customer' ? (draft.companyId || null) : null,
value: draft.value,
billing: draft.billing,
status: draft.status,
signedOn: draft.status === 'Active' || draft.status === 'Renewing' ? draft.startDate : null,
startDate: draft.startDate,
endDate: draft.evergreen ? null : draft.endDate,
autoRenew: draft.autoRenew,
renewalNotice: draft.renewalNotice,
owner: draft.type === 'customer' ? 'e20' : 'e9',
signerExt: counterpartyName.trim(),
signerInt: 'e1',
files: files.length ? files : [{ name: `${draft.name.trim() || 'contract'}.pdf`, size: 320000 }],
tags: [draft.type],
};
onCreate(contract);
}
const typeMeta = D.CONTRACT_TYPES.find(t => t.id === draft.type);
return (
e.stopPropagation()}
style={{ width: 620, maxWidth: '94vw', maxHeight: '86vh', background: 'var(--bg-card)', borderRadius: 14, border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
{/* Header */}
New contract
Track a customer or vendor agreement and attach the signed PDF.
{/* Body */}
{/* Type */}
{[
{ id: 'customer', label: 'Customer', desc: 'Revenue — we sell', icon: 'card' },
{ id: 'vendor', label: 'Vendor', desc: 'Spend — we buy', icon: 'store' },
].map(t => (
))}
{/* Counterparty + name */}
{draft.type === 'customer' ? (
) : (
set({ counterparty: e.target.value })} />
)}
set({ name: e.target.value })} />
{/* Value + billing */}
{/* Period */}
{/* Status + auto-renew */}
{/* PDF upload */}
fileRef.current?.click()}
onDragOver={e => { e.preventDefault(); setDragOver(true); }}
onDragLeave={() => setDragOver(false)}
onDrop={e => { e.preventDefault(); setDragOver(false); onFiles(e.dataTransfer.files); }}>
onFiles(e.target.files)} />
Drop a PDF here or click to browse
The signed agreement and any addenda
{files.length > 0 && (
{files.map((f, i) => (
PDF
{f.name}
{f.size > 0 && {fileBytes(f.size)}}
))}
)}
{/* Footer */}
{typeMeta?.name}
{fmtMoney(draft.value)} · {draft.billing}
{!canCreate && Counterparty & title required}
);
}
window.NewContractModal = NewContractModal;