// module-pages.jsx, Custom module pages for Intake, Drafting, Review,
// Negotiation, Repository, Analytics, Obligations.
// Follows the same structure as ESignaturePage in esignature-page.jsx.
// ─── Shared helpers ───────────────────────────────────────────────────────────
function FeatSection({ eyebrow, title, body, bullets, mockup, flip, soft, ctaLabel, ctaHref, badge }) {
return (
{eyebrow}
{badge && (
)}
{body}
{bullets && (
{bullets.map((b, i) => (
))}
)}
{ctaLabel && ctaHref && (
{ctaLabel}
)}
);
}
function ModuleDeptSection({ module, depts, title, lede, mockupFn }) {
const [active, setActive] = React.useState(0);
const dept = depts[active];
return (
{/* Centered header */}
Built for every team
{title ? (
<>
{title}
{lede &&
{lede}
}
) : (
Who uses {module} ?
)}
{/* Centered pill tabs */}
{depts.map((d, i) => (
setActive(i)} style={{
height: 38, padding: "0 20px", borderRadius: 999, border: "1px solid",
borderColor: i === active ? "var(--accent)" : "var(--line-strong)",
background: i === active ? "var(--accent)" : "var(--bg-elevated)",
color: i === active ? "#fff" : "var(--ink-2)",
fontFamily: "inherit", fontSize: 13.5, fontWeight: i === active ? 500 : 400,
cursor: "pointer", transition: "all 140ms ease", whiteSpace: "nowrap",
}}>
{d.label}
))}
{/* Two-column card */}
{/* Left: copy */}
{/* Right: mockup or icon fallback */}
{dept.mockup ? dept.mockup : mockupFn ? mockupFn(dept.label) : (
)}
);
}
function ModuleFAQSection({ faqs }) {
const [open, setOpen] = React.useState(null);
const faqSchema = {
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": faqs.map(f => ({
"@type": "Question",
"name": f.q,
"acceptedAnswer": {
"@type": "Answer",
"text": f.a
}
}))
};
return (
FAQ
We're here to help with any questions you have .
{faqs.map((f, i) => (
setOpen(open === i ? null : i)}
style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, padding: "20px 0", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}
>
{f.q}
))}
);
}
// ═══════════════════════════════════════════════════════════════════
// INTAKE
// ═══════════════════════════════════════════════════════════════════
function IntakeFormMockup() {
return (
New contract request
30 sec
{[
{ label: "Contract type", value: "Customer MSA", accent: true },
{ label: "Counterparty", value: "Velora Industries AB" },
{ label: "Deal value", value: "€420 000" },
{ label: "Region", value: "EU, Sweden" },
].map((f) => (
{f.label}
{f.value}
))}
Routed → Senior Legal Review · SLA: 2 days
);
}
function IntakeSlackMockup() {
return (
# legal-requests
{[
{ from: "Linus Berg", msg: "/contract new NDA, Northwind AB", time: "10:14", accent: true },
{ from: "ContractControl", msg: "✓ NDA request created. Routed to Legal. SLA: today 17:00.", time: "10:14", bot: true },
{ from: "ContractControl", msg: "✓ Draft ready for review. Clause risk: Low.", time: "10:22", bot: true },
{ from: "Linus Berg", msg: "Approved 👍", time: "10:24" },
{ from: "ContractControl", msg: "✓ Sent to Northwind for signature.", time: "10:24", bot: true },
].map((m, i) => (
{m.bot ?
{m.from}
{m.time}
{m.msg}
))}
);
}
function IntakeRoutingMockup() {
return (
Routing rules
3 active
{[
{ if: "Value > €500k", then: "Route → General Counsel", tone: "warn" },
{ if: "Type = NDA", then: "Auto-draft + send", tone: "ok" },
{ if: "Region = US", then: "Route → US Legal Team", tone: "neutral" },
].map((r, i) => (
IF
{r.if}
→
{r.then}
))}
+ Add rule
);
}
function IntakeTrailMockup() {
const steps = [
{ label: "Request submitted", meta: "NDA · Kvist Group", by: "Erik Svensson, Sales", time: "Mon 09:14", done: true },
{ label: "Routed to Legal", meta: "Rule match: Type = NDA", by: "System", time: "Mon 09:14", done: true },
{ label: "Reviewed & approved", meta: "No redlines required", by: "Asha Singh, Legal", time: "Mon 11:02", done: true },
{ label: "Sent for signature", meta: "2 signers · BankID", by: "ContractControl", time: "Mon 11:03", done: true },
{ label: "Fully executed", meta: "Signed · filed to repository", by: null, time: "Mon 14:37", done: true, final: true },
];
return (
{/* Header */}
REQ-118
·
NDA · Kvist Group
Completed
{/* Timeline */}
{steps.map((s, i) => (
{/* Spine */}
{s.final
?
{i < steps.length - 1 && (
)}
{/* Content */}
{s.label}
{s.time}
{s.meta}{s.by ? · {s.by} : null}
{i < steps.length - 1 &&
}
))}
{/* 3-column feature section (Precisely style) */}
ContractControl's smart request forms capture clean, structured data from day one. Guided request fields eliminate endless back-and-forth email loops.
Rule-based routing automatically sends every request to the right reviewer. Standard contracts get auto-drafted; complex ones route to legal.
Full request tracking logs every step, status, and owner. Requesters and legal teams see live progress on a single shared timeline.
}
/>
}
flip
/>
}
soft
/>
);
}
// ═══════════════════════════════════════════════════════════════════
// DRAFTING
// ═══════════════════════════════════════════════════════════════════
function DraftingTemplateMockup() {
return (
Template library
14 approved
{[
{ name: "Customer MSA", tag: "Sales", uses: "142 uses", locked: true },
{ name: "Vendor NDA", tag: "Procurement", uses: "89 uses", locked: true },
{ name: "Employment Agreement", tag: "HR", uses: "54 uses", locked: false },
{ name: "SaaS Order Form", tag: "Sales", uses: "38 uses", locked: true },
].map((t) => (
{t.name}
{t.tag}
{t.uses}
{t.locked &&
}
))}
);
}
function DraftingEditorMockup() {
return (
{/* Editor Title Bar */}
{/* Ribbon Word-like Toolbar */}
{/* Undo/Redo & Save */}
{/* Style Dropdown */}
Normal Text
▼
{/* Font Dropdown */}
Arial
▼
{/* Text Actions */}
B
I
U
A
{/* Alignment */}
{/* Variables insert tool */}
+ Insert Variable
{/* Editor Body: Left sidebar (variables list) + Right document area */}
{/* Sidebar */}
Template Fields
{[
{ name: "Company Name", type: "Text", active: true },
{ name: "Start Date", type: "Date", active: true },
{ name: "Governing Law", type: "Select", active: false },
{ name: "Contract Value", type: "Currency", active: false },
].map((v) => (
{`{${v.name}}`}
{v.type}
))}
12 fields mapped automatically from Word styles.
{/* Document Canvas */}
{/* Float Page */}
MUTUAL NON-DISCLOSURE AGREEMENT
This Agreement is made as of{" "}
Start Date
{" "}
by and between Velora Corp and{" "}
Company Name
. The parties wish to explore a business opportunity of mutual interest.
{/* Locked clause section */}
Locked Clause - Section 8 (Indemnification)
Each Party shall defend, indemnify, and hold harmless the other from and against any and all claims, liabilities, damages...
Product library
4 products
{products.map((p, i) => (
))}
+ Add to order form
Select products to include in contract
);
}
function DraftingConditionalMockup() {
const rules = [
{ condition: "Contract value > €50,000", then: "Show: Enhanced liability clause", active: true },
{ condition: "Region = United States", then: "Show: US governing law block", active: false },
{ condition: "Product includes SaaS", then: "Show: Data processing addendum", active: true },
];
return (
MSA EU · Conditional blocks
3 rules active
Conditional logic
{rules.map((r, i) => (
IF
{r.condition}
THEN
{r.then}
))}
+ Add condition
Save rules
);
}
function DraftingApprovalMockup() {
return (
Approval flow · MSA_Velora
{[
{ step: "01", label: "Legal review", person: "Maya Holmberg", status: "approved", statusColor: "var(--success)" },
{ step: "02", label: "Finance sign-off", person: "Erik Lund, Value > €500k", status: "approved", statusColor: "var(--success)" },
{ step: "03", label: "GC approval", person: "Anna Sjöberg", status: "pending", statusColor: "#B8860B" },
{ step: "04", label: "Send for signature", person: "Auto-triggered", status: "waiting", statusColor: "var(--ink-5)" },
].map((s, i) => (
))}
);
}
function DraftingModulePage() {
const data = window.ccModuleData["drafting"];
return (
{/* 3-column feature section (Precisely style) */}
Guardrail-based drafting keeps your business self-serving safely. Pre-approved templates ensure your teams never copy-paste outdated clauses.
Import existing paper to transition to ContractControl instantly. Our AI parses Word documents and converts static fields to dynamic tags.
Integrated catalog pricing pulls directly from your product library. Keep order forms and contracts aligned with finance-approved pricing.
}
/>
}
flip soft
/>
}
/>
}
flip soft
/>
);
}
// ═══════════════════════════════════════════════════════════════════
// REVIEW
// ═══════════════════════════════════════════════════════════════════
function ReviewCollaborationMockup() {
return (
Internal Review · Clause 8.1
"…liability of either party shall be capped at €50,000 per claim under this agreement."
{/* Comment Thread */}
R
Raymond (Finance)
10m ago
Can we increase this to €100,000 to match the custom plan?
S
Sabina (Legal)
Just now
Done. I've updated the cap value. Let's send for sign-off.
Approve clause
Reply
);
}
function ReviewWorkflowsMockup() {
return (
{/* Background Grid Pattern */}
{/* Vertical Connection Line */}
{/* Start: New MSA Workflow Node */}
+
New MSA Workflow
{/* Card 1: Questionnaire */}
Questionnaire
Creator Party | 43 Questions
Counter Party | 30 Questions
{/* Line Node Plus */}
+
{/* Card 2: Signatures */}
{/* Node 4: Publish Button */}
Publish
{/* Floating Card: Approvals (Tilted, overlapping, highlighted) */}
Approvals
{/* Custom cursor pointer */}
{/* 3-column feature section (Precisely style) */}
Private internal feedback lets your team align behind closed doors. Leave strategic notes and comments completely invisible to the counterparty.
Sequential approval flows automatically route drafts through legal, finance, and security. No manual chasing, no skipped steps.
SLA bottleneck tracking logs every review request and measures delay times. Instantly identify and clear pipeline blockages.
}
flip soft
/>
}
/>
);
}
// ═══════════════════════════════════════════════════════════════════
// NEGOTIATION
// ═══════════════════════════════════════════════════════════════════
function Avatar({ initials, color, size = 28 }) {
return (
{initials}
);
}
function NegotiationWorkspaceMockup() {
return (
{/* Toolbar */}
{/* Document body */}
{/* Placeholder lines */}
{[100, 88, 94, 72].map((w, i) => (
))}
{/* Annotated line 1, auto-renewal */}
The agreement shall{" "}
not auto-renew
{" "}annually without written notice.
{/* Avatar + callout */}
Kai Müller · Velora
We do not accept auto-renewal
{/* Placeholder lines */}
{[90, 80].map((w, i) => (
))}
{/* Annotated line 2, payment terms */}
Customer will pay within{" "}
30 days
{" "}of the date of invoice.
{/* Avatar + callout */}
Sofia Lindh · Legal
Extend this to 60 days
Clause 7.1 · Payment terms
{[
{ from: "Velora (Kai Müller)", msg: "We require Net 60, this is non-negotiable per our CFO.", internal: false, time: "Mon 14:22" },
{ from: "Your team (internal)", msg: "⚠ Internal note: CFO approved Net 45 as our floor.", internal: true, time: "Mon 15:01" },
{ from: "Maya Holmberg", msg: "Proposing Net 45 as a compromise. See updated language below.", internal: false, time: "Mon 15:45" },
{ from: "Velora (Kai Müller)", msg: "Net 45 accepted. ✓", internal: false, time: "Tue 09:12" },
].map((c, i) => (
{c.from}
{c.time}
{c.msg}
))}
);
}
function NegotiationModulePage() {
const data = window.ccModuleData["negotiation"];
return (
{/* 3-column feature section (Precisely style) */}
External party portal invites counterparties to a secure shared document. Force them to edit inside the browser to eliminate rogue files.
Anchored clause threads bind every redline and question to the exact text. Track why adjustments were proposed, directly on the timeline.
Semantic diff comparison displays side-by-side versions with color-coded additions and removals. Never sign blindly again.
}
/>
}
flip soft
/>
);
}
// ═══════════════════════════════════════════════════════════════════
// REPOSITORY
// ═══════════════════════════════════════════════════════════════════
function RepositoryDeptMockup({ rows, label }) {
const statusStyle = {
active: { bg: "rgba(34,197,94,0.10)", color: "#15803D" },
signed: { bg: "rgba(110,86,207,0.10)", color: "var(--accent-deep)" },
expiring: { bg: "rgba(234,179,8,0.12)", color: "#92400E" },
review: { bg: "rgba(234,179,8,0.10)", color: "#854d0e" },
flagged: { bg: "rgba(220,38,38,0.08)", color: "#991b1b" },
};
return (
Repository · {label} view
{rows.length} results
{rows.map((r, i) => {
const s = statusStyle[r.status] || statusStyle.active;
return (
);
})}
);
}
function RepositoryBulkImportMockup() {
const fields = [
{ label: "Counterparty", value: "Velora Industries AB", done: true },
{ label: "Contract type", value: "Master Service Agreement", done: true },
{ label: "Effective date", value: "2024-03-01", done: true },
{ label: "Expiry / renewal", value: "2026-03-01 · auto-renew", done: true },
{ label: "Liability cap", value: "Extracting…", done: false },
{ label: "Governing law", value: "", done: false },
{ label: "Payment terms", value: "", done: false },
];
// Scan-line position, static at 62% through the doc
const scanPct = 62;
return (
{/* Header */}
Velora_MSA_2024.pdf
AI indexing…
{/* Two-column: document + metadata */}
{/* Document preview with scan line */}
{/* Scanned (above line), normal */}
{[92, 78, 85, 65, 90, 72].map((w, i) => (
))}
{/* Scan line */}
{[80, 55, 70, 40].map((w, i) => (
))}
{/* AI label */}
{/* Metadata population */}
Extracted metadata
{fields.map((f, i) => (
{f.label}
{f.value ? (
{f.done && f.value !== "Extracting…" &&
}
{f.value}
) : (
)}
))}
{/* Progress bar */}
Indexing archive
99 / 142
{children}
);
const hits = [
{
name: "Velora Industries MSA", type: "MSA", page: "§ 11.3",
excerpt: [
"Liability of either party shall not exceed ", twelve (12) times , " the monthly fees paid in the preceding 12-month period, except in cases of gross negligence."
]
},
{
name: "Northwind Framework Agreement", type: "Framework", page: "§ 9.1",
excerpt: [
"Neither party shall be liable for ", indirect or consequential damages , ", including loss of revenue or profits, whether foreseeable or not."
]
},
{
name: "Brevia Holdings SaaS Order", type: "SaaS", page: "§ 14.2",
excerpt: [
"Total aggregate liability shall be capped at ", EUR 50,000 , " per incident, regardless of the form of action or legal theory asserted."
]
},
];
return (
{/* Search bar */}
limitation of liability clause
0.3s
{/* Result count */}
Clause matches across 31 contracts
Semantic search
{/* Clause hits */}
{hits.map((h, i) => (
{h.name}
{h.type}
{h.page}
"{h.excerpt}"
))}
AI extraction · Velora_MSA_2024.pdf
{[
{ field: "Counterparty", value: "Velora Industries AB" },
{ field: "Contract type", value: "Master Service Agreement" },
{ field: "Effective date", value: "2024-03-01" },
{ field: "Expiry / renewal", value: "2026-03-01 · auto-renew 90d" },
{ field: "Governing law", value: "Sweden" },
{ field: "Liability cap", value: "12× monthly fees" },
{ field: "Payment terms", value: "Net 30" },
].map((f) => (
{f.field}
{f.value}
))}
✓ 60+ fields extracted · confidence: high
);
}
function RepositoryAccessMockup() {
const users = [
{ name: "Maya Holmberg", role: "Legal Counsel", access: "Full access", color: "var(--accent)", initials: "MH" },
{ name: "Erik Lindström", role: "Finance", access: "View only", color: "#22C55E", initials: "EL" },
{ name: "Kai Müller", role: "Sales", access: "NDAs & MSAs", color: "#F59E0B", initials: "KM" },
{ name: "Sara Johansson", role: "Procurement", access: "Vendor contracts",color: "#8B5CF6", initials: "SJ" },
];
return (
{/* Header */}
Access control · Contract Repository
{/* User permission rows */}
{users.map((u, i) => (
))}
{/* Encryption footer */}
Audit log on every access
{/* Header */}
ERP Reconciliation · Missing Contracts
Live ERP Sync
{/* Table headers */}
Supplier / ERP Source
Annual Spend
Contract Status
{/* Vendor rows */}
{vendors.map((v, i) => (
{v.spend}
{v.isMissing ? (
) : (
)}
{v.status}
))}
{/* Alert Banner / Stats */}
Reconciliation Alert: 2 active suppliers have spend but no matching contract in the repository.
{/* 3-column feature section (Precisely style) */}
Smart bulk importing uploads and parses legacy archives with AI. Relate contract documents and index terms automatically in seconds.
Faceted search queries let you locate metadata, values, or clauses instantly. Build custom views and share filter criteria with your team.
Spend reconciliation connects active vendors with payment flows. Instantly flag active invoicing that lacks a corresponding contract.
}
/>
}
flip soft
/>
}
soft
ctaLabel="Read more"
ctaHref="/platform/power-modules/permissions"
/>
}
flip
/>
},
{ icon: "analytics", label: "Finance", tagline: "Revenue leakage starts in the contract.", desc: "Finance teams query the portfolio to track payment terms, auto-renewals, and price uplifts before they impact the budget.", href: "/solutions/team/finance",
bullets: [
"Complete visibility into price escalation clauses",
"Audit-ready contract records in one click",
"Granular visibility into payment terms and schedules",
],
mockup:
},
{ icon: "obligations", label: "Procurement", tagline: "Vendor agreements under control, not in a folder.", desc: "Every supplier agreement is searchable with key renewal dates, SLAs, and liability terms surfaced automatically.", href: "/solutions/team/procurement",
bullets: [
"Proactive alerts on opt-out and renewal windows",
"Spend and commitment forecasting across vendors",
"Easy tracking of active vs expired agreements",
],
mockup:
},
{ icon: "negotiation", label: "Sales", tagline: "Pull up precedents and customer terms instantly.", desc: "Sales teams access past agreements and standard clauses on the fly to accelerate negotiations and close deals faster.", href: "/solutions/team/sales",
bullets: [
"Instant search for approved non-standard terms",
"Full historical customer record visibility",
"Seamless lookup of active pricing agreements",
],
mockup:
},
{ icon: "workspace", label: "Compliance", tagline: "Audit your entire portfolio in minutes, not weeks.", desc: "Ensure every contract matches active regulatory standards, with automated checks for missing clauses or invalid terms.", href: "/solutions/team/legal",
bullets: [
"Bulk search for custom and standard clauses",
"Automated tracking of regulatory requirements",
"Role-based permissions to protect sensitive data",
],
mockup:
},
]} />
);
}
// ═══════════════════════════════════════════════════════════════════
// ANALYTICS
// ═══════════════════════════════════════════════════════════════════
function AnalyticsDashboardMockup() {
return (
Contract health overview
4,287 contracts
{[
{ label: "Healthy", value: "76%", color: "var(--success)", bg: "rgba(31,138,76,0.07)" },
{ label: "Needs attention", value: "18%", color: "#B8860B", bg: "rgba(232,179,57,0.07)" },
{ label: "At risk", value: "6%", color: "var(--danger)", bg: "rgba(180,35,24,0.06)" },
].map((s) => (
))}
Avg cycle time · last 30d
{[42, 55, 38, 62, 48, 71, 54, 60, 72, 56, 65, 80].map((h, i) => (
))}
May 7 2.4d avg ↓ 67% Today
);
}
function AnalyticsRenewalMockup() {
return (
Renewal radar · next 12 months
{[
{ month: "Jun", count: 4, value: "€240k", risk: "ok" },
{ month: "Jul", count: 7, value: "€1.1M", risk: "warn" },
{ month: "Aug", count: 2, value: "€80k", risk: "ok" },
{ month: "Sep", count: 11, value: "€2.4M", risk: "high" },
].map((r, i) => (
{r.month}
{r.count}
{r.value}
))}
⚠ September: 3 contracts at auto-renew risk, action required
);
}
function AnalyticsLeakageMockup() {
const contracts = [
{ supplier: "Acme Software GmbH", type: "SaaS", agreed: "€48,000", invoiced: "€57,340", delta: "+€9,340", tone: "high" },
{ supplier: "Northwind Logistics", type: "Service", agreed: "€120,000", invoiced: "€122,400", delta: "+€2,400", tone: "warn" },
{ supplier: "Velora Cloud Services", type: "Infra", agreed: "€36,000", invoiced: "€36,000", delta: null, tone: "ok" },
{ supplier: "Brevia Consulting", type: "Framework", agreed: "€75,000", invoiced: "€81,500", delta: "+€6,500", tone: "high" },
];
const toneColor = { high: "var(--danger)", warn: "var(--warning)", ok: "var(--success)" };
return (
{/* Header */}
Terms vs invoice · Q2 2025
3 over-billed
{/* Column headers */}
{["Supplier", "Agreed", "Invoiced", "Delta"].map((h, i) => (
0 ? "right" : "left" }}>{h}
))}
{/* Rows */}
{contracts.map((r, i) => (
{r.agreed}
{r.invoiced}
{r.delta || "✓"}
))}
{/* Footer */}
Total overbilling identified
+€18,240
{/* 3-column feature section (Precisely style) */}
Live risk indexing scores every contract on data completeness and clause hygiene. Keep a clean dashboard of portfolio health.
Twelve-month forecast displays upcoming auto-renewals and triggers. Stay ahead of contract deadlines and value at risk.
Overbilling audit matches active billing lines with contracted pricing catalogs. Identify invoice leakage automatically.
}
/>
}
flip soft
/>
}
/>
);
}
// ═══════════════════════════════════════════════════════════════════
// OBLIGATIONS
// ═══════════════════════════════════════════════════════════════════
function ObligationsBulkImportMockup() {
const files = [
{ name: "Velora MSA 2023.pdf", size: "1.2 MB", status: "indexed", tags: ["MSA", "Auto-renewal"] },
{ name: "Northwind Framework.docx", size: "840 KB", status: "scanning", tags: [] },
{ name: "Kvist License Agreement.pdf",size: "2.1 MB", status: "linked", tags: ["License", "SLA"] },
{ name: "Brevia NDA.pdf", size: "340 KB", status: "indexed", tags: ["NDA"] },
{ name: "Tandem Supply Contract.pdf", size: "1.8 MB", status: "queued", tags: [] },
];
const statusStyle = {
indexed: { color: "var(--success)", bg: "rgba(31,138,76,0.08)", border: "rgba(31,138,76,0.2)", label: "AI indexed" },
scanning: { color: "var(--accent)", bg: "rgba(88,67,245,0.08)", border: "rgba(88,67,245,0.2)", label: "Scanning…" },
linked: { color: "#0EA5E9", bg: "rgba(14,165,233,0.08)", border: "rgba(14,165,233,0.2)", label: "Linked" },
queued: { color: "var(--ink-4)", bg: "var(--bg-soft)", border: "var(--line)", label: "Queued" },
};
return (
Bulk import · 24 contracts
18 indexed
6 processing
{files.map((f, i) => {
const s = statusStyle[f.status];
return (
{f.name}
{f.size}
{f.tags.map((t, j) => (
{t}
))}
{s.label}
);
})}
AI running on legacy contracts, metadata indexed in seconds
);
}
function ObligationsExtractionMockup() {
return (
Obligations extracted · Velora MSA
8 found
{[
{ type: "Auto-renewal", detail: "90-day notice required · 2026-03-01", tone: "warn" },
{ type: "Price escalation", detail: "+4.5% CPI · effective Jan 2026", tone: "neutral" },
{ type: "SLA review", detail: "Quarterly performance review due", tone: "neutral" },
{ type: "Insurance cert", detail: "Annual update required by legal", tone: "ok" },
{ type: "DPA review", detail: "Biannual data processing review", tone: "ok" },
].map((o, i) => (
))}
);
}
function ObligationsAlertMockup() {
return (
Upcoming · next 30 days
7 alerts
{[
{ label: "Auto-renewal · Velora MSA", days: 14, tone: "high", action: "Renew / Terminate" },
{ label: "Price escalation · Northwind", days: 22, tone: "warn", action: "Review" },
{ label: "SLA review · Brevia Holdings", days: 28, tone: "ok", action: "Schedule" },
].map((a, i) => (
{a.label}
{a.days}d
{a.action} →
))}
);
}
function ObligationsHealthMockup() {
const tooltip = 4;
const rows = [
{ initials: "EK", color: "#3B82F6", name: "Employment Agreement f…", type: "Employee Agreement", renewal: "1 Jul 2026", score: 89, bar: "#F59E0B", handled: true, status: "active" },
{ initials: "SA", color: "#22C55E", name: "Software as a Service (Sa…", type: "Supplier Agreement", renewal: "Jun 2026", score: 74, bar: "#F59E0B", handled: true, status: "handle" },
{ initials: "CR", color: "#8B5CF6", name: "CRM", type: "Client Project", renewal: "31 Jan 2027", score: 95, bar: "#22C55E", handled: true, status: "active" },
{ initials: "LA", color: "#EF4444", name: "Laboratory Services…", type: "Supplier Agreement", renewal: "1 Feb 2026", score: 43, bar: "#EF4444", handled: false, status: "handle" },
{ initials: "ST", color: "#F59E0B", name: "Städavtalet", type: "Supplier Agreement", renewal: "30 Oct 2026", score: 91, bar: "#22C55E", handled: true, status: "active" },
];
const tooltipFactors = [
{ ok: true, label: "Notice Deadline", note: "Notice deadline is not approaching", delta: 0 },
{ ok: true, label: "Expiration", note: "Contract has been handled", delta: 0 },
{ ok: false, label: "Contract Value", note: "Top 25% contract by value", delta: -6 },
{ ok: true, label: "Tasks", note: "No overdue tasks", delta: 0 },
{ ok: false, label: "Data Completeness", note: "Missing: no contacts", delta: -5 },
];
return (
{/* Header */}
Contract health · Repository
5 factors · weighted
{/* Column headers */}
{["Contract", "Renewal", "Health", "Status"].map((h, i) => (
{h}
))}
{/* Rows */}
{rows.map((r, i) => (
{/* Contract name */}
{/* Renewal */}
{r.renewal}
{/* Health bar + score */}
{/* Status */}
{r.status === "active" ? (r.handled ? "✓ Handled" : "Active") : "Handle"}
))}
{s2 ? "Extracted" : "Extracting obligations..."}
{/* Document Silhouette */}
{/* Scan line */}
{!s2 && (
)}
{/* Extracted Pills */}
DUE IN 90 DAYS
Auto-renewal Notice
ESCALATION
CPI + 4.5% Price Cap
);
}
function AnimatedRiskAction() {
const [cycle, setCycle] = React.useState(0);
React.useEffect(() => {
let raf, t0 = performance.now();
const loop = (t) => { setCycle(((t - t0) / 1000) % 7); raf = requestAnimationFrame(loop); };
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, []);
const s1 = cycle > 1.0; // Highlight the middle item in red
const s2 = cycle > 2.5; // AI suggestion slides up
return (
{[
{ name: "Insurance Certificate", date: "Jan 2026", color: "var(--line)" },
{ name: "SLA Quarterly Report", date: "Oct 2025", color: "var(--line)", dynamic: true },
{ name: "DPA Review", date: "Dec 2025", color: "var(--line)" },
].map((item, i) => (
{item.name}
{item.date}
))}
{/* AI Suggestion Card sliding from bottom */}
AI Suggestion
Action recommended: Request SLA Report
Draft Request Email
);
}
function AdvancedObligationsSection() {
const [showModal, setShowModal] = React.useState(false);
const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "" });
const [focused, setFocused] = React.useState(null);
const [submitted, setSubmitted] = React.useState(false);
const [submitting, setSubmitting] = React.useState(false);
const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
const handleSubmit = (e) => {
e.preventDefault();
if (form.firstName && form.lastName && form.email && form.company) {
setSubmitting(true);
const portalId = "144265445";
const formGuid = "8cbd4023-6aba-4ede-bbff-7dd4d200563f";
const submitUrl = `https://api-eu1.hsforms.com/submissions/v3/integration/submit/${portalId}/${formGuid}`;
const hutkMatch = document.cookie.match(/(?:^|; )hubspotutk=([^;]*)/);
const hutk = hutkMatch ? hutkMatch[1] : undefined;
const payload = {
fields: [
{ name: "firstname", value: form.firstName },
{ name: "lastname", value: form.lastName },
{ name: "email", value: form.email },
{ name: "company", value: form.company }
],
context: {
hutk: hutk,
pageUri: window.location.href,
pageName: document.title
}
};
fetch(submitUrl, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
})
.then(() => {
setSubmitting(false);
setSubmitted(true);
})
.catch((err) => {
console.error("Hubspot submission error:", err);
setSubmitting(false);
setSubmitted(true);
});
}
};
const inputStyle = (key) => ({
width: "100%", height: 44, padding: "0 14px",
borderRadius: "var(--r-md)",
border: "1px solid " + (focused === key ? "var(--accent)" : "var(--line-strong)"),
background: "var(--bg-elevated)", fontFamily: "inherit", fontSize: 14,
color: "var(--ink-1)", outline: "none", transition: "border-color 150ms ease",
boxShadow: focused === key ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
boxSizing: "border-box",
});
const labelStyle = { display: "block", fontSize: 12.5, fontWeight: 500, color: "var(--ink-3)", marginBottom: 6, letterSpacing: "0.01em" };
return (
<>
Advanced Obligations is coming.
A deeper layer of obligation intelligence: per-contract obligation timelines, cross-portfolio risk scoring, and AI-suggested actions so your team always knows what to do next.
setShowModal(true)} className="btn btn-accent btn-lg" style={{ border: "none", cursor: "pointer" }}>
Join the waitlist
{[
{ icon:
, label: "Per-contract obligation timelines", desc: "See every upcoming deadline mapped to the contract it came from." },
{ icon:
, label: "Cross-portfolio risk scoring", desc: "AI ranks your riskiest obligations across all contracts in one view." },
{ icon:
, label: "AI-suggested next actions", desc: "Smart prompts tell each owner exactly what to do, and when." },
{ icon:
, label: "Obligation coupling", desc: "Link obligations to renewals, invoices, and clauses automatically." },
].map((f, i) => (
))}
{/* Two-panel mockup */}
{/* Waitlist modal */}
{showModal && (
setShowModal(false)} style={{ position: "fixed", inset: 0, background: "rgba(14,14,16,0.55)", backdropFilter: "blur(4px)", zIndex: 9999, display: "flex", alignItems: "center", justifyContent: "center" }}>
e.stopPropagation()} style={{ maxWidth: 480, width: "90%", position: "relative" }}>
setShowModal(false)} style={{ position: "absolute", top: -12, right: -12, zIndex: 1, width: 32, height: 32, borderRadius: 99, border: "1px solid var(--line)", background: "var(--bg-elevated)", cursor: "pointer", display: "grid", placeItems: "center", color: "var(--ink-3)", boxShadow: "0 2px 8px rgba(14,14,16,0.08)" }}>
{submitted ? (
You're on the list.
We'll reach out to {form.email} as soon as Advanced Obligations opens up.
setShowModal(false)} className="btn btn-ghost">Close
) : (
<>
Coming soon
Join the waitlist
Early access opens to waitlist members first.
)}
{["GDPR compliant", "eIDAS certified", "SOC 2 Type II"].map((t) => (
))}
{d.title}
{d.rows.length} tracked
{d.rows.map((r, i) => (
))}
);
}
function ObligationsModulePage() {
const data = window.ccModuleData["obligations"];
return (
{/* 3-column feature section (Precisely style) */}
Proactive deadline alerts warn stakeholders via email, Slack, or SMS. Ensure notice windows never expire unnoticed.
Automated escalation chains hand off tasks to backup owners. Protect the organization against key-person operational risks.
Direct actions from alerts let users renew, terminate, or renegotiate contracts with one click. Reduce manual step friction.
}
/>
}
flip soft
/>
}
/>
{/* Advanced Obligations coming soon */}
The platform your whole org actually uses. }
lede="Obligations don't belong to one team. ContractControl gives every department the view they need, with alerts routed to the right owner automatically."
depts={[
{ icon: "legal", label: "Legal Ops", tagline: "Track compliance and SLA milestones.", desc: "SLA milestones, DPA reviews, and compliance obligations tracked and owned.", href: "/solutions/team/legal",
bullets: ["DPA review deadlines and compliance obligations assigned to legal owners", "SLA milestones flagged before breach windows open", "Audit-ready evidence attached per obligation"] },
{ icon: "analytics", label: "Finance", tagline: "Flag price changes before the invoice.", desc: "Price escalations and payment obligations flagged before they hit the invoice.", href: "/solutions/team/finance",
bullets: ["Price escalation clauses surfaced before invoices arrive", "Payment milestones and true-ups tracked by contract", "Budget impact calculated per upcoming obligation"] },
{ icon: "obligations", label: "Procurement", tagline: "Never miss a renewal window.", desc: "Vendor renewals, insurance certs, and service reviews never missed.", href: "/solutions/team/procurement",
bullets: ["Auto-renewal windows flagged 90+ days in advance", "Insurance certificate renewals tracked per vendor", "Service review schedules owned and escalated automatically"] },
{ icon: "workspace", label: "HR & People", tagline: "Track probation and salary review dates.", desc: "Employment contract milestones and probation reviews tracked automatically.", href: "/solutions/team/hr",
bullets: ["Probation end dates and review windows tracked per employee", "Salary review milestones assigned to HR owners", "Contract renewals and benefit review deadlines never missed"] },
{ icon: "negotiation", label: "Sales", tagline: "Proactively manage customer renewal cycles.", desc: "Customer SLA milestones and renewal windows surfaced before they become issues.", href: "/solutions/team/sales",
bullets: ["Customer SLA milestones routed to account owners before breach", "Renewal windows surfaced in time to renegotiate or expand", "Upsell triggers and QBR obligations tracked per account"] },
]}
mockupFn={(label) =>
);
}
Object.assign(window, {
IntakeModulePage,
DraftingModulePage,
ReviewModulePage,
NegotiationModulePage,
RepositoryModulePage,
AnalyticsModulePage,
ObligationsModulePage,
});