import React, { useState } from 'react';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
const questions = {
true: [
"I strive to live authentically, true to my core values.",
"I feel comfortable being my true self in all situations.",
// ... rest of True questions
],
brave: [
"I willingly face challenges head-on.",
"I embrace uncertainty and change with courage.",
// ... rest of Brave questions
],
kind: [
"I prioritize empathy in my interactions with others.",
"I actively listen to others without judgment.",
// ... rest of Kind questions
],
curious: [
"I approach new situations with a sense of wonder.",
"I adapt well to changes in my organization's processes, policies, or people.",
// ... rest of Curious questions
]
};
const COLORS = {
true: '#686648',
brave: '#ab9a88',
kind: '#faeec9',
curious: '#f4efe8'
};
const LeadershipAssessment = () => {
const [currentSection, setCurrentSection] = useState('true');
const [currentQuestion, setCurrentQuestion] = useState(0);
const [answers, setAnswers] = useState({});
const [showResults, setShowResults] = useState(false);
const sections = Object.keys(questions);
const likertScale = [
{ value: 1, label: 'Completely disagree' },
{ value: 2, label: 'Disagree' },
{ value: 3, label: 'Slightly Disagree' },
{ value: 4, label: 'Slightly Agree' },
{ value: 5, label: 'Agree' },
{ value: 6, label: 'Completely agree' }
];
const handleAnswer = (value) => {
const questionKey = `${currentSection}-${currentQuestion}`;
setAnswers({ ...answers, [questionKey]: value });
if (currentQuestion < questions[currentSection].length - 1) {
setCurrentQuestion(currentQuestion + 1);
} else if (sections.indexOf(currentSection) < sections.length - 1) {
const nextSection = sections[sections.indexOf(currentSection) + 1];
setCurrentSection(nextSection);
setCurrentQuestion(0);
} else {
setShowResults(true);
}
};
const calculateScores = () => {
const scores = {};
sections.forEach(section => {
const sectionAnswers = Object.entries(answers)
.filter(([key]) => key.startsWith(section))
.map(([, value]) => value);
const total = sectionAnswers.reduce((acc, curr) => acc + curr, 0);
const maxPossible = questions[section].length * 6;
scores[section] = (total / maxPossible) * 100;
});
return scores;
};
const getStrengthLevel = (score) => {
if (score >= 80) return 'Outstanding';
if (score >= 60) return 'Strong';
if (score >= 40) return 'Developing';
return 'Emerging';
};
if (showResults) {
const scores = calculateScores();
const chartData = Object.entries(scores).map(([name, value]) => ({
name,
value: Math.round(value)
}));
return (
{chartData.map((entry, index) => (
|
))}
);
}
return (
);
};
export default LeadershipAssessment;
Your Leadership Profile
{Object.entries(scores).map(([category, score]) => (
))}
{category}
{Math.round(score)}%
{getStrengthLevel(score)}
{currentSection} Leadership
Question {currentQuestion + 1} of {questions[currentSection].length}{questions[currentSection][currentQuestion]}
{likertScale.map((option) => (
))}