Fix organization setup flow: redirect to onboarding for incomplete setup
This commit is contained in:
218
pages/QuestionTypesDemo.tsx
Normal file
218
pages/QuestionTypesDemo.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Card } from '../components/UiKit';
|
||||
import { QuestionInput } from '../components/ui/QuestionInput';
|
||||
import { Question } from '../components/ui/Question';
|
||||
import { FigmaQuestion } from '../components/figma/FigmaQuestion';
|
||||
import { EmployeeQuestion } from '../employeeQuestions';
|
||||
|
||||
const QuestionTypesDemo: React.FC = () => {
|
||||
const [answers, setAnswers] = useState<Record<string, string>>({});
|
||||
|
||||
const demoQuestions: EmployeeQuestion[] = [
|
||||
{
|
||||
id: 'text_demo',
|
||||
prompt: 'What is your full name?',
|
||||
category: 'personal',
|
||||
type: 'text',
|
||||
placeholder: 'Enter your full name',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: 'scale_demo',
|
||||
prompt: 'How satisfied are you with your role?',
|
||||
category: 'role',
|
||||
type: 'scale',
|
||||
scaleMin: 1,
|
||||
scaleMax: 10,
|
||||
scaleLabels: { min: 'Very dissatisfied', max: 'Very satisfied' },
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: 'yesno_demo',
|
||||
prompt: 'Do you have regular one-on-ones with your manager?',
|
||||
category: 'collaboration',
|
||||
type: 'yesno',
|
||||
required: false,
|
||||
},
|
||||
{
|
||||
id: 'textarea_demo',
|
||||
prompt: 'Describe your main responsibilities',
|
||||
category: 'role',
|
||||
type: 'textarea',
|
||||
placeholder: 'List your key daily tasks and responsibilities...',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: 'select_demo',
|
||||
prompt: 'What is your department?',
|
||||
category: 'role',
|
||||
type: 'select',
|
||||
options: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations'],
|
||||
required: false,
|
||||
}
|
||||
];
|
||||
|
||||
const [currentDemoQuestion, setCurrentDemoQuestion] = useState(0);
|
||||
|
||||
const handleAnswerChange = (questionId: string, value: string) => {
|
||||
setAnswers(prev => ({ ...prev, [questionId]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[--background-primary] py-8 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-[--text-primary] mb-2">
|
||||
Question Types Demo
|
||||
</h1>
|
||||
<p className="text-[--text-secondary]">
|
||||
Showcase of different question input types for the employee questionnaire
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Traditional Question Layout */}
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4">
|
||||
Traditional Layout
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{demoQuestions.map((question, index) => (
|
||||
<Card key={question.id} className="p-6">
|
||||
<Question
|
||||
label={`${index + 1}. ${question.prompt}`}
|
||||
required={question.required}
|
||||
description={`Type: ${question.type} | Category: ${question.category}`}
|
||||
>
|
||||
<QuestionInput
|
||||
question={question}
|
||||
value={answers[question.id] || ''}
|
||||
onChange={(value) => handleAnswerChange(question.id, value)}
|
||||
/>
|
||||
</Question>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Figma Question Layout */}
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4">
|
||||
Figma Design Layout
|
||||
</h2>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex gap-2 mb-4">
|
||||
{demoQuestions.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentDemoQuestion(index)}
|
||||
className={`px-3 py-1 rounded text-sm ${currentDemoQuestion === index
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
Q{index + 1}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<FigmaQuestion
|
||||
questionNumber={`Q${currentDemoQuestion + 1}`}
|
||||
title={demoQuestions[currentDemoQuestion].prompt}
|
||||
description={
|
||||
demoQuestions[currentDemoQuestion].required
|
||||
? 'Required'
|
||||
: 'Optional'
|
||||
}
|
||||
answer={answers[demoQuestions[currentDemoQuestion].id] || ''}
|
||||
onAnswerChange={(value) =>
|
||||
handleAnswerChange(demoQuestions[currentDemoQuestion].id, value)
|
||||
}
|
||||
onBack={
|
||||
currentDemoQuestion > 0
|
||||
? () => setCurrentDemoQuestion(prev => prev - 1)
|
||||
: undefined
|
||||
}
|
||||
onNext={
|
||||
currentDemoQuestion < demoQuestions.length - 1
|
||||
? () => setCurrentDemoQuestion(prev => prev + 1)
|
||||
: undefined
|
||||
}
|
||||
nextLabel={
|
||||
currentDemoQuestion < demoQuestions.length - 1
|
||||
? 'Next'
|
||||
: 'Finish'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Alternative Input Below Figma Question */}
|
||||
<div className="mt-6 max-w-2xl mx-auto">
|
||||
<Card className="p-6">
|
||||
<Question
|
||||
label={`Alternative Input for Q${currentDemoQuestion + 1}`}
|
||||
description={`Specialized ${demoQuestions[currentDemoQuestion].type} input`}
|
||||
>
|
||||
<QuestionInput
|
||||
question={demoQuestions[currentDemoQuestion]}
|
||||
value={answers[demoQuestions[currentDemoQuestion].id] || ''}
|
||||
onChange={(value) =>
|
||||
handleAnswerChange(demoQuestions[currentDemoQuestion].id, value)
|
||||
}
|
||||
/>
|
||||
</Question>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current Answers Display */}
|
||||
<div className="mt-8">
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[--text-primary] mb-4">
|
||||
Current Answers
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{demoQuestions.map((question) => (
|
||||
<div key={question.id} className="grid grid-cols-1 md:grid-cols-3 gap-2 py-2 border-b border-[--border-color]">
|
||||
<div className="font-medium text-[--text-primary]">
|
||||
{question.prompt}
|
||||
</div>
|
||||
<div className="text-[--text-secondary] text-sm">
|
||||
{question.type}
|
||||
</div>
|
||||
<div className="text-[--text-primary]">
|
||||
{answers[question.id] || <span className="text-[--text-secondary] italic">No answer</span>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="mt-8 text-center">
|
||||
<div className="space-x-4">
|
||||
<a
|
||||
href="#/employee-questionnaire"
|
||||
className="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
Traditional Questionnaire
|
||||
</a>
|
||||
<a
|
||||
href="#/employee-questionnaire-steps"
|
||||
className="inline-block px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
|
||||
>
|
||||
Stepped Questionnaire
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuestionTypesDemo;
|
||||
Reference in New Issue
Block a user