export function employeeSuggestionSurvey(form: FormTs) {
// Employee Suggestion Box
// Demonstrates: StarRating, RatingScale, EmojiRating, MatrixQuestion, Slider, SuggestionChips, computed values
// ============================================
// STATE
// ============================================
const isAnonymous = form.state(true);
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Employee Suggestion Box',
computedValue: () => 'Your ideas drive our improvement. Share your suggestions to make our workplace better!',
customStyles: {
backgroundColor: '#059669',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Submission Type
// ============================================
const submissionSection = form.addSubform('submission', {
title: 'How Would You Like to Submit?'
});
submissionSection.addRow(row => {
row.addRadioButton('anonymity', {
label: 'Submission type',
options: [
{ id: 'anonymous', name: 'Submit anonymously' },
{ id: 'named', name: 'Include my name (for follow-up and recognition)' }
],
orientation: 'vertical',
defaultValue: 'anonymous',
onValueChange: (val) => isAnonymous.set(val === 'anonymous'),
isRequired: true
});
});
submissionSection.addRow(row => {
row.addTextbox('employeeName', {
label: 'Your name',
placeholder: 'First and Last name',
isVisible: () => !isAnonymous(),
isRequired: () => !isAnonymous()
}, '1fr');
row.addDropdown('department', {
label: 'Department',
options: [
{ id: 'engineering', name: 'Engineering' },
{ id: 'product', name: 'Product' },
{ id: 'design', name: 'Design' },
{ id: 'sales', name: 'Sales' },
{ id: 'marketing', name: 'Marketing' },
{ id: 'hr', name: 'Human Resources' },
{ id: 'finance', name: 'Finance' },
{ id: 'operations', name: 'Operations' },
{ id: 'customer-success', name: 'Customer Success' },
{ id: 'other', name: 'Other' }
],
isVisible: () => !isAnonymous()
}, '1fr');
});
// ============================================
// SECTION 2: Idea Category
// ============================================
const categorySection = form.addSubform('category', {
title: 'Suggestion Category'
});
categorySection.addRow(row => {
row.addDropdown('suggestionCategory', {
label: 'What area does your suggestion relate to?',
options: [
{ id: 'process', name: 'Process Improvement' },
{ id: 'cost', name: 'Cost Savings' },
{ id: 'quality', name: 'Quality Enhancement' },
{ id: 'safety', name: 'Safety & Wellness' },
{ id: 'culture', name: 'Culture & Engagement' },
{ id: 'technology', name: 'Technology & Tools' },
{ id: 'communication', name: 'Communication' },
{ id: 'customer', name: 'Customer Experience' },
{ id: 'sustainability', name: 'Sustainability & Environment' },
{ id: 'other', name: 'Other' }
],
isRequired: true
}, '1fr');
row.addDropdown('urgency', {
label: 'How urgent is this suggestion?',
options: [
{ id: 'critical', name: 'Critical - needs immediate attention' },
{ id: 'high', name: 'High - should be addressed soon' },
{ id: 'medium', name: 'Medium - when convenient' },
{ id: 'low', name: 'Low - nice to have' }
],
defaultValue: 'medium'
}, '1fr');
});
// ============================================
// SECTION 3: The Idea
// ============================================
const ideaSection = form.addSubform('idea', {
title: 'Your Suggestion',
isVisible: () => categorySection.dropdown('suggestionCategory')?.value() !== null
});
ideaSection.addRow(row => {
row.addTextbox('ideaTitle', {
label: 'Give your suggestion a short title',
placeholder: 'e.g., "Automated invoice processing" or "Monthly team lunches"',
maxLength: 100,
isRequired: true
});
});
ideaSection.addRow(row => {
row.addTextarea('currentSituation', {
label: 'What is the current situation or problem?',
placeholder: 'Describe what\'s happening now and why it needs to change...',
rows: 3,
isRequired: true
});
});
ideaSection.addRow(row => {
row.addTextarea('proposedSolution', {
label: 'What is your proposed solution?',
placeholder: 'Describe your idea in detail. How would it work?',
rows: 4,
isRequired: true
});
});
ideaSection.addRow(row => {
row.addTextarea('expectedBenefits', {
label: 'What benefits would this bring?',
placeholder: 'Time saved, cost reduced, morale improved, customer satisfaction, etc.',
rows: 3
});
});
// ============================================
// SECTION 4: Impact Assessment
// ============================================
const impactSection = form.addSubform('impact', {
title: 'Estimated Impact',
isVisible: () => ideaSection.textbox('ideaTitle')?.value() !== null &&
ideaSection.textbox('ideaTitle')?.value() !== ''
});
impactSection.addRow(row => {
row.addSuggestionChips('impactAreas', {
label: 'Who would benefit from this suggestion? (Select all that apply)',
suggestions: [
{ id: 'employees', name: 'Employees' },
{ id: 'customers', name: 'Customers' },
{ id: 'management', name: 'Management' },
{ id: 'company', name: 'Company overall' },
{ id: 'partners', name: 'Partners/Vendors' },
{ id: 'community', name: 'Community' }
],
alignment: 'center'
});
});
impactSection.addRow(row => {
row.addRatingScale('impactLevel', {
preset: 'likert-5',
label: 'How significant would the positive impact be?',
lowLabel: 'Minor improvement',
highLabel: 'Transformative',
alignment: 'center'
});
});
impactSection.addRow(row => {
row.addMatrixQuestion('feasibility', {
label: 'How would you assess the feasibility?',
rows: [
{ id: 'effort', label: 'Implementation effort', isRequired: true },
{ id: 'cost', label: 'Cost to implement', isRequired: true },
{ id: 'time', label: 'Time to see results', isRequired: true },
{ id: 'risk', label: 'Risk level', isRequired: false }
],
columns: [
{ id: 'low', label: 'Low' },
{ id: 'medium', label: 'Medium' },
{ id: 'high', label: 'High' },
{ id: 'unsure', label: 'Not sure' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 5: Implementation Ideas
// ============================================
const implementSection = form.addSubform('implementation', {
title: 'Implementation Thoughts',
isVisible: () => impactSection.matrixQuestion('feasibility')?.areAllRequiredRowsAnswered() ?? false
});
implementSection.addRow(row => {
row.addRadioButton('hasResources', {
label: 'Do you know what resources would be needed?',
options: [
{ id: 'yes', name: 'Yes, I have ideas' },
{ id: 'no', name: 'No, needs investigation' },
{ id: 'partial', name: 'Partially' }
],
orientation: 'horizontal'
});
});
implementSection.addRow(row => {
row.addTextarea('resourcesNeeded', {
label: 'What resources or support would be needed?',
placeholder: 'Budget, people, tools, training, time, etc.',
rows: 3,
isVisible: () => {
const hasResources = implementSection.radioButton('hasResources')?.value();
return hasResources === 'yes' || hasResources === 'partial';
}
});
});
implementSection.addRow(row => {
row.addCheckbox('willingToHelp', {
label: 'I would be willing to help implement this suggestion',
isVisible: () => !isAnonymous()
});
});
implementSection.addRow(row => {
row.addCheckbox('triedBefore', {
label: 'This or something similar has been tried before'
});
});
implementSection.addRow(row => {
row.addTextarea('previousAttempt', {
label: 'What happened when it was tried before?',
placeholder: 'Why didn\'t it work? What\'s different now?',
rows: 2,
isVisible: () => implementSection.checkbox('triedBefore')?.value() === true
});
});
// ============================================
// SECTION 6: Your Sentiment
// ============================================
const sentimentSection = form.addSubform('sentiment', {
title: 'How Do You Feel?',
isVisible: () => implementSection.radioButton('hasResources')?.value() !== null
});
sentimentSection.addRow(row => {
row.addEmojiRating('currentFeeling', {
label: 'How do you feel about the current situation that prompted this suggestion?',
preset: 'satisfaction',
size: 'lg',
alignment: 'center'
});
});
sentimentSection.addRow(row => {
row.addStarRating('suggestionConfidence', {
label: 'How confident are you that this suggestion would help?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showCounter: true
});
});
sentimentSection.addSpacer();
sentimentSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any additional comments?',
placeholder: 'Context, concerns, or anything else you want to share...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 7: Follow-up Preferences
// ============================================
const followUpSection = form.addSubform('followUp', {
title: 'Follow-up Preferences',
isVisible: () => sentimentSection.starRating('suggestionConfidence')?.value() !== null && !isAnonymous()
});
followUpSection.addRow(row => {
row.addCheckboxList('notifyPreferences', {
label: 'Please notify me when:',
options: [
{ id: 'received', name: 'Suggestion is received' },
{ id: 'review', name: 'Suggestion is under review' },
{ id: 'decision', name: 'Decision is made' },
{ id: 'implemented', name: 'Suggestion is implemented' }
],
orientation: 'vertical'
});
});
followUpSection.addRow(row => {
row.addEmail('contactEmail', {
label: 'Email for notifications',
placeholder: 'your.email@company.com'
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Suggestion Summary',
isVisible: () => sentimentSection.starRating('suggestionConfidence')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const title = ideaSection.textbox('ideaTitle')?.value();
const category = categorySection.dropdown('suggestionCategory')?.value();
const urgency = categorySection.dropdown('urgency')?.value();
const impact = impactSection.ratingScale('impactLevel')?.value();
const confidence = sentimentSection.starRating('suggestionConfidence')?.value();
const impactAreas = impactSection.suggestionChips('impactAreas')?.value() || [];
const anonymous = isAnonymous();
if (!title) return '';
const categoryLabels: Record<string, string> = {
'process': 'Process Improvement',
'cost': 'Cost Savings',
'quality': 'Quality Enhancement',
'safety': 'Safety & Wellness',
'culture': 'Culture & Engagement',
'technology': 'Technology & Tools',
'communication': 'Communication',
'customer': 'Customer Experience',
'sustainability': 'Sustainability',
'other': 'Other'
};
const urgencyLabels: Record<string, string> = {
'critical': '🔴 Critical',
'high': '🟠 High',
'medium': '🟡 Medium',
'low': '🟢 Low'
};
const impactLabels: Record<number, string> = {
1: 'Minor',
2: 'Moderate',
3: 'Significant',
4: 'Major',
5: 'Transformative'
};
let summary = `💡 Suggestion Summary\n`;
summary += `${'═'.repeat(22)}\n\n`;
summary += `📝 "${title}"\n\n`;
summary += `📁 Category: ${categoryLabels[category || ''] || category}\n`;
summary += `⏰ Urgency: ${urgencyLabels[urgency || 'medium']}\n`;
if (impact) {
summary += `📈 Impact: ${impactLabels[impact]}\n`;
}
if (confidence) {
summary += `💪 Confidence: ${'⭐'.repeat(confidence)}\n`;
}
if (impactAreas.length > 0) {
summary += `\n👥 Benefits: ${impactAreas.join(', ')}`;
}
summary += `\n\n${anonymous ? '🔒 Anonymous submission' : '👤 Named submission'}`;
return summary;
},
customStyles: () => {
const urgency = categorySection.dropdown('urgency')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (urgency === 'critical') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #dc2626' };
} else if (urgency === 'high') {
return { ...baseStyles, backgroundColor: '#fed7aa', borderLeft: '4px solid #ea580c' };
} else if (urgency === 'medium') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #059669' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Suggestion',
isVisible: () => ideaSection.textbox('ideaTitle')?.value() !== null &&
ideaSection.textbox('ideaTitle')?.value() !== ''
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Suggestion!',
message: 'Your idea has been received and will be reviewed by the appropriate team. Great ideas come from every corner of our organization - thank you for contributing!'
});
}