export function complianceChecklist(form: FormTs) {
// Compliance Audit Checklist Form - Regulatory compliance verification
// Demonstrates: Pages (multi-page), MatrixQuestion, RatingScale, StarRating, ThumbRating, CheckboxList, conditional visibility, computed values, dynamic styling
// ============================================
// COMPUTED VALUES FOR SUMMARY
// ============================================
const compliantCount = form.computedValue(() => 0);
const nonCompliantCount = form.computedValue(() => 0);
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Compliance Audit Checklist',
computedValue: () => 'Document compliance status and audit findings',
customStyles: {
backgroundColor: '#0f766e',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// MULTI-PAGE STRUCTURE
// ============================================
const pages = form.addPages('compliancePages', {
heightMode: 'current-page'
});
// ============================================
// PAGE 1: Audit Information
// ============================================
const page1 = pages.addPage('info');
page1.addRow(row => {
row.addTextPanel('page1Title', {
label: 'Step 1 of 4: Audit Information',
customStyles: {
backgroundColor: '#ccfbf1',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const auditInfo = page1.addSubform('auditInfo', {
title: 'Audit Details',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
auditInfo.addRow(row => {
row.addTextbox('auditTitle', {
label: 'Audit Title/Reference',
placeholder: 'e.g., Q4 2024 Compliance Review',
isRequired: true
}, '1fr');
row.addTextbox('auditId', {
label: 'Audit ID',
placeholder: 'e.g., AUD-2024-042'
}, '1fr');
});
auditInfo.addRow(row => {
row.addDropdown('complianceFramework', {
label: 'Compliance Framework',
options: [
{ id: 'gdpr', name: 'GDPR (Data Protection)' },
{ id: 'soc2', name: 'SOC 2' },
{ id: 'iso27001', name: 'ISO 27001' },
{ id: 'hipaa', name: 'HIPAA (Healthcare)' },
{ id: 'pci-dss', name: 'PCI-DSS (Payment)' },
{ id: 'internal', name: 'Internal Policy' },
{ id: 'custom', name: 'Custom/Multiple' }
],
placeholder: 'Select framework',
isRequired: true
}, '1fr');
row.addDropdown('auditType', {
label: 'Audit Type',
options: [
{ id: 'internal', name: 'Internal Audit' },
{ id: 'external', name: 'External Audit' },
{ id: 'regulatory', name: 'Regulatory Inspection' },
{ id: 'certification', name: 'Certification Audit' },
{ id: 'surveillance', name: 'Surveillance Audit' }
],
placeholder: 'Select type',
isRequired: true
}, '1fr');
});
auditInfo.addRow(row => {
row.addDatepicker('auditDate', {
label: 'Audit Date',
isRequired: true
}, '1fr');
row.addTextbox('auditor', {
label: 'Auditor Name',
placeholder: 'Your name',
isRequired: true
}, '1fr');
});
auditInfo.addRow(row => {
row.addTextbox('department', {
label: 'Department/Area Audited',
placeholder: 'e.g., IT Operations, Human Resources'
}, '1fr');
row.addDropdown('auditScope', {
label: 'Audit Scope',
options: [
{ id: 'full', name: 'Full Scope' },
{ id: 'focused', name: 'Focused/Targeted' },
{ id: 'follow-up', name: 'Follow-up Audit' },
{ id: 'spot-check', name: 'Spot Check' }
],
placeholder: 'Select scope'
}, '1fr');
});
page1.addRow(row => {
row.addEmpty('1fr');
row.addButton('toPage2', {
label: 'Next: Data & Security',
onClick: () => pages.goToPage('security')
});
});
// ============================================
// PAGE 2: Data Protection & Security
// ============================================
const page2 = pages.addPage('security');
page2.addRow(row => {
row.addTextPanel('page2Title', {
label: 'Step 2 of 4: Data Protection & Security',
customStyles: {
backgroundColor: '#ccfbf1',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const dataProtection = page2.addSubform('dataProtection', {
title: 'Data Protection Controls',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
dataProtection.addRow(row => {
row.addMatrixQuestion('dataControls', {
label: 'Verify data protection controls:',
rows: [
{ id: 'inventory', label: 'Data inventory maintained', description: 'Records of personal/sensitive data', isRequired: true },
{ id: 'legal-basis', label: 'Legal basis documented', description: 'Consent, contract, legitimate interest', isRequired: true },
{ id: 'privacy-notice', label: 'Privacy notices in place', description: 'Clear and accessible notices', isRequired: true },
{ id: 'retention', label: 'Retention policy enforced', description: 'Data deleted when no longer needed', isRequired: true },
{ id: 'subject-rights', label: 'Subject rights process', description: 'Access, deletion, portability', isRequired: false },
{ id: 'dpia', label: 'DPIAs conducted', description: 'Impact assessments for high-risk processing', isRequired: false }
],
columns: [
{ id: 'na', label: 'N/A' },
{ id: 'compliant', label: 'Compliant' },
{ id: 'partial', label: 'Partial' },
{ id: 'non-compliant', label: 'Non-Compliant' }
],
striped: true,
fullWidth: true
});
});
const securityControls = page2.addSubform('security', {
title: 'Security Controls'
});
securityControls.addRow(row => {
row.addMatrixQuestion('securityMatrix', {
label: 'Verify security controls:',
rows: [
{ id: 'access-control', label: 'Access controls', description: 'Authentication, authorization, least privilege', isRequired: true },
{ id: 'encryption', label: 'Encryption', description: 'Data at rest and in transit', isRequired: true },
{ id: 'logging', label: 'Audit logging', description: 'Activity logs maintained and reviewed', isRequired: true },
{ id: 'backup', label: 'Backup procedures', description: 'Regular backups, tested recovery', isRequired: true },
{ id: 'patching', label: 'Patch management', description: 'Systems updated timely', isRequired: false },
{ id: 'incident', label: 'Incident response', description: 'Plan documented and tested', isRequired: false }
],
columns: [
{ id: 'na', label: 'N/A' },
{ id: 'compliant', label: 'Compliant' },
{ id: 'partial', label: 'Partial' },
{ id: 'non-compliant', label: 'Non-Compliant' }
],
striped: true,
fullWidth: true
});
});
page2.addSubform('securityNotes', {
title: 'Security Findings'
}).addRow(row => {
row.addTextarea('securityObservations', {
label: 'Evidence reviewed and observations',
placeholder: 'Document the evidence reviewed and any findings...',
rows: 3,
autoExpand: true
});
});
page2.addRow(row => {
row.addButton('backToPage1', {
label: 'Back',
onClick: () => pages.goToPage('info')
});
row.addEmpty('1fr');
row.addButton('toPage3', {
label: 'Next: Operations & Documentation',
onClick: () => pages.goToPage('operations')
});
});
// ============================================
// PAGE 3: Operations & Documentation
// ============================================
const page3 = pages.addPage('operations');
page3.addRow(row => {
row.addTextPanel('page3Title', {
label: 'Step 3 of 4: Operations & Documentation',
customStyles: {
backgroundColor: '#ccfbf1',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const operations = page3.addSubform('operations', {
title: 'Operational Controls',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
operations.addRow(row => {
row.addMatrixQuestion('operationsMatrix', {
label: 'Verify operational controls:',
rows: [
{ id: 'policies', label: 'Policies documented', description: 'Current and approved policies', isRequired: true },
{ id: 'procedures', label: 'Procedures documented', description: 'SOPs for key processes', isRequired: true },
{ id: 'training', label: 'Staff training', description: 'Compliance training completed', isRequired: true },
{ id: 'awareness', label: 'Awareness program', description: 'Ongoing security/compliance awareness', isRequired: false },
{ id: 'change-mgmt', label: 'Change management', description: 'Changes documented and approved', isRequired: false },
{ id: 'vendor-mgmt', label: 'Vendor management', description: 'Third-party risk assessed', isRequired: false }
],
columns: [
{ id: 'na', label: 'N/A' },
{ id: 'compliant', label: 'Compliant' },
{ id: 'partial', label: 'Partial' },
{ id: 'non-compliant', label: 'Non-Compliant' }
],
striped: true,
fullWidth: true
});
});
const documentation = page3.addSubform('documentation', {
title: 'Documentation Review'
});
documentation.addRow(row => {
row.addCheckboxList('docsReviewed', {
label: 'Documentation reviewed during audit:',
options: [
{ id: 'policies', name: 'Policies and procedures' },
{ id: 'risk-register', name: 'Risk register' },
{ id: 'training-records', name: 'Training records' },
{ id: 'audit-logs', name: 'System audit logs' },
{ id: 'incident-reports', name: 'Incident reports' },
{ id: 'contracts', name: 'Contracts/agreements' },
{ id: 'certifications', name: 'Certifications' },
{ id: 'meeting-minutes', name: 'Meeting minutes' },
{ id: 'previous-audits', name: 'Previous audit reports' }
],
orientation: 'vertical'
});
});
documentation.addSpacer();
documentation.addRow(row => {
row.addTextarea('documentationNotes', {
label: 'Documentation findings',
placeholder: 'Note any documentation gaps or issues...',
rows: 3,
autoExpand: true
});
});
page3.addRow(row => {
row.addButton('backToPage2', {
label: 'Back',
onClick: () => pages.goToPage('security')
});
row.addEmpty('1fr');
row.addButton('toPage4', {
label: 'Next: Summary & Findings',
onClick: () => pages.goToPage('summary')
});
});
// ============================================
// PAGE 4: Summary & Findings
// ============================================
const page4 = pages.addPage('summary');
page4.addRow(row => {
row.addTextPanel('page4Title', {
label: 'Step 4 of 4: Summary & Findings',
customStyles: {
backgroundColor: '#ccfbf1',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const overallAssessment = page4.addSubform('overall', {
title: 'Overall Compliance Assessment',
customStyles: () => {
const score = overallAssessment.starRating('complianceScore')?.value() || 0;
if (score >= 4) return { backgroundColor: '#dcfce7', padding: '16px', borderRadius: '8px' };
if (score >= 3) return { backgroundColor: '#fef9c3', padding: '16px', borderRadius: '8px' };
if (score >= 1) return { backgroundColor: '#fecaca', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' };
}
});
overallAssessment.addRow(row => {
row.addStarRating('complianceScore', {
label: 'Overall Compliance Score',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true,
tooltip: '5 = Fully Compliant, 1 = Significant Non-Compliance'
});
});
overallAssessment.addRow(row => {
row.addRatingScale('complianceLevel', {
preset: 'custom',
min: 0,
max: 100,
label: 'Compliance Level (%)',
lowLabel: '0% Non-Compliant',
highLabel: '100% Fully Compliant',
alignment: 'center'
});
});
overallAssessment.addRow(row => {
row.addThumbRating('passedAudit', {
label: 'Did the audit pass?',
showLabels: true,
upLabel: 'Pass',
downLabel: 'Fail',
alignment: 'center',
size: 'lg'
});
});
const findings = page4.addSubform('findings', {
title: 'Key Findings'
});
findings.addRow(row => {
row.addInteger('criticalFindings', {
label: 'Critical Findings',
placeholder: '0',
min: 0,
tooltip: 'Immediate action required'
}, '1fr');
row.addInteger('majorFindings', {
label: 'Major Findings',
placeholder: '0',
min: 0,
tooltip: 'Significant gaps'
}, '1fr');
row.addInteger('minorFindings', {
label: 'Minor Findings',
placeholder: '0',
min: 0,
tooltip: 'Minor improvements'
}, '1fr');
row.addInteger('observations', {
label: 'Observations',
placeholder: '0',
min: 0,
tooltip: 'Best practice recommendations'
}, '1fr');
});
const correctiveActions = page4.addSubform('corrective', {
title: 'Corrective Actions Required',
isVisible: () => {
const critical = findings.integer('criticalFindings')?.value() || 0;
const major = findings.integer('majorFindings')?.value() || 0;
return critical > 0 || major > 0;
},
customStyles: { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' }
});
correctiveActions.addRow(row => {
row.addTextPanel('correctiveAlert', {
computedValue: () => {
const critical = findings.integer('criticalFindings')?.value() || 0;
if (critical > 0) {
return `Critical findings require immediate remediation within 30 days.`;
}
return 'Major findings should be addressed within 90 days.';
},
customStyles: {
backgroundColor: '#ef4444',
color: 'white',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: '500'
}
});
});
correctiveActions.addSpacer();
correctiveActions.addRow(row => {
row.addTextarea('correctiveActionPlan', {
label: 'Corrective Action Plan',
placeholder: 'List required corrective actions with owners and deadlines...',
rows: 4,
autoExpand: true,
isRequired: () => {
const critical = findings.integer('criticalFindings')?.value() || 0;
return critical > 0;
}
});
});
const nextAudit = page4.addSubform('nextAudit', {
title: 'Follow-up'
});
nextAudit.addRow(row => {
row.addDropdown('followUpRequired', {
label: 'Follow-up audit required?',
options: [
{ id: 'no', name: 'No - All findings are minor' },
{ id: 'yes-30', name: 'Yes - Within 30 days' },
{ id: 'yes-60', name: 'Yes - Within 60 days' },
{ id: 'yes-90', name: 'Yes - Within 90 days' },
{ id: 'yes-annual', name: 'Yes - Next annual audit' }
],
placeholder: 'Select'
}, '1fr');
row.addDatepicker('nextAuditDate', {
label: 'Next Audit Date',
minDate: () => new Date().toISOString().split('T')[0]
}, '1fr');
});
// Summary Panel
const summaryPanel = page4.addSubform('summaryPanel', {
title: 'Audit Summary Report'
});
summaryPanel.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const title = auditInfo.textbox('auditTitle')?.value();
const framework = auditInfo.dropdown('complianceFramework')?.value();
const date = auditInfo.datepicker('auditDate')?.value();
const auditor = auditInfo.textbox('auditor')?.value();
const score = overallAssessment.starRating('complianceScore')?.value();
const level = overallAssessment.ratingScale('complianceLevel')?.value();
const passed = overallAssessment.thumbRating('passedAudit')?.value();
const critical = findings.integer('criticalFindings')?.value() || 0;
const major = findings.integer('majorFindings')?.value() || 0;
const minor = findings.integer('minorFindings')?.value() || 0;
const obs = findings.integer('observations')?.value() || 0;
const docsReviewed = documentation.checkboxList('docsReviewed')?.value() || [];
const frameworkLabels: Record<string, string> = {
'gdpr': 'GDPR',
'soc2': 'SOC 2',
'iso27001': 'ISO 27001',
'hipaa': 'HIPAA',
'pci-dss': 'PCI-DSS',
'internal': 'Internal Policy',
'custom': 'Custom'
};
let summary = `COMPLIANCE AUDIT REPORT\n`;
summary += `${'═'.repeat(28)}\n\n`;
if (title) summary += `Audit: ${title}\n`;
if (framework) summary += `Framework: ${frameworkLabels[framework]}\n`;
if (date) summary += `Date: ${date}\n`;
if (auditor) summary += `Auditor: ${auditor}\n`;
if (score) {
summary += `\nCOMPLIANCE SCORE:\n`;
summary += `Rating: ${'★'.repeat(score)}${'☆'.repeat(5 - score)} (${score}/5)\n`;
}
if (level !== null && level !== undefined) {
summary += `Level: ${level}%\n`;
}
const totalFindings = critical + major + minor + obs;
if (totalFindings > 0) {
summary += `\nFINDINGS:\n`;
if (critical > 0) summary += ` Critical: ${critical}\n`;
if (major > 0) summary += ` Major: ${major}\n`;
if (minor > 0) summary += ` Minor: ${minor}\n`;
if (obs > 0) summary += ` Observations: ${obs}\n`;
} else {
summary += `\nNo findings recorded.\n`;
}
if (docsReviewed.length > 0) {
summary += `\nDocuments reviewed: ${docsReviewed.length}\n`;
}
if (passed) {
summary += `\nAUDIT RESULT: ${passed === 'up' ? 'PASS' : 'FAIL'}`;
}
return summary;
},
customStyles: () => {
const passed = overallAssessment.thumbRating('passedAudit')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (passed === 'up') {
return { ...baseStyles, backgroundColor: '#dcfce7', borderLeft: '4px solid #22c55e' };
} else if (passed === 'down') {
return { ...baseStyles, backgroundColor: '#fecaca', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f8fafc', borderLeft: '4px solid #0f766e' };
}
});
});
page4.addRow(row => {
row.addButton('backToPage3', {
label: 'Back',
onClick: () => pages.goToPage('operations')
});
row.addEmpty('1fr');
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const passed = overallAssessment.thumbRating('passedAudit')?.value();
return passed === 'up' ? 'Submit Audit Report (Pass)' : 'Submit Audit Report';
},
isVisible: () => pages.currentPageIndex() === 3
});
form.configureCompletionScreen({
type: 'text',
title: 'Audit Report Submitted',
message: () => {
const passed = overallAssessment.thumbRating('passedAudit')?.value();
const critical = findings.integer('criticalFindings')?.value() || 0;
if (passed === 'up') {
return 'The compliance audit has been completed successfully. Continue to maintain compliance through regular reviews and updates.';
}
if (critical > 0) {
return 'The audit has been submitted. Critical findings have been identified requiring immediate attention. Please distribute the corrective action plan to responsible parties.';
}
return 'The audit has been submitted. Please address the identified findings according to the corrective action plan and schedule a follow-up audit.';
}
});
}