import React, { useState, useEffect, useMemo } from "react"; import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, } from "recharts"; import { Compass, MessageCircle, Users, Scale, Wind, RotateCcw, Lock, Printer, RefreshCw, } from "lucide-react"; // --------------------------------------------------------------------------- // CONFIG — change this before sending the tool out // --------------------------------------------------------------------------- const COACH_PASSCODE = "coach123"; // change me before you distribute this const STORAGE_KEY = "eq-coaching-submissions"; // --------------------------------------------------------------------------- // Original item bank, grouped into five composites inspired by the general // structure of trait/mixed-model EQ frameworks (this is an original // instrument — not a reproduction of any commercial test). // --------------------------------------------------------------------------- const COMPOSITES = [ { key: "selfPerception", label: "Self-perception", short: "Knowing yourself", icon: Compass, blurb: "How clearly you recognize your own emotions, strengths, and limits, and how much you value yourself.", items: [ { t: "I can usually name the exact emotion I'm feeling, not just 'good' or 'bad'.", r: false }, { t: "I'm often surprised by my own reactions after the fact.", r: true }, { t: "I have a realistic sense of what I'm good at and what I'm not.", r: false }, { t: "I generally like who I am, flaws included.", r: false }, { t: "I tend to brush past my feelings instead of noticing them as they happen.", r: true }, { t: "I know what situations tend to trigger strong reactions in me.", r: false }, ], }, { key: "selfExpression", label: "Self-expression", short: "Saying what you mean", icon: MessageCircle, blurb: "How honestly and clearly you communicate feelings and needs, and how comfortable you are asserting yourself.", items: [ { t: "I can tell someone I disagree with them without much difficulty.", r: false }, { t: "I often say 'I'm fine' when I'm actually not.", r: true }, { t: "I find it easy to ask directly for what I need.", r: false }, { t: "I stay quiet in groups even when I have something worth saying.", r: true }, { t: "People generally know where they stand with me emotionally.", r: false }, { t: "I'd rather avoid a conversation than risk an awkward moment.", r: true }, ], }, { key: "interpersonal", label: "Interpersonal", short: "Reading the room", icon: Users, blurb: "How well you build relationships, read other people's emotions, and cooperate with others.", items: [ { t: "I can usually tell when someone is upset even if they say they're fine.", r: false }, { t: "I find it hard to see a conflict from the other person's point of view.", r: true }, { t: "People tend to open up to me easily.", r: false }, { t: "I keep a mental note of how the people close to me are doing emotionally.", r: false }, { t: "I get impatient with people who are more emotional than I am.", r: true }, { t: "I actively work to keep my close relationships in good shape.", r: false }, ], }, { key: "decisionMaking", label: "Decision-making", short: "Thinking it through", icon: Scale, blurb: "How well you weigh emotion and logic together, resist impulsive choices, and solve problems under pressure.", items: [ { t: "Strong emotions rarely derail my judgment when a decision really matters.", r: false }, { t: "I've made choices I regretted because I acted on impulse.", r: true }, { t: "When a problem is emotionally charged, I can still think clearly about it.", r: false }, { t: "I tend to put off hard decisions until I'm forced to make them.", r: true }, { t: "I can separate 'how I feel about this' from 'what's actually true.'", r: false }, { t: "Under pressure, I still consider the consequences before I act.", r: false }, ], }, { key: "stressManagement", label: "Stress management", short: "Staying steady", icon: Wind, blurb: "How well you tolerate pressure, stay flexible when plans change, and stay optimistic without denying reality.", items: [ { t: "I recover fairly quickly after something stressful happens.", r: false }, { t: "Unexpected changes to my plans throw me off for a long time.", r: true }, { t: "I have go-to ways of calming myself down when I'm wound up.", r: false }, { t: "Under a lot of pressure, I tend to snap at people around me.", r: true }, { t: "I generally expect things to work out, even when they're rocky right now.", r: false }, { t: "Small setbacks can ruin my whole day.", r: true }, ], }, ]; const LIKERT = [ { v: 1, label: "Strongly disagree" }, { v: 2, label: "Disagree" }, { v: 3, label: "Neutral" }, { v: 4, label: "Agree" }, { v: 5, label: "Strongly agree" }, ]; function bandFor(score) { if (score >= 80) return { label: "Well-developed", tone: "#0F6E56", bg: "#E1F5EE" }; if (score >= 60) return { label: "Solid, room to grow", tone: "#185FA5", bg: "#E6F1FB" }; if (score >= 40) return { label: "Emerging", tone: "#854F0B", bg: "#FAEEDA" }; return { label: "Worth focused attention", tone: "#993C1D", bg: "#FAECE7" }; } async function loadSubmissions() { try { const res = await window.storage.get(STORAGE_KEY, true); if (!res || !res.value) return []; const parsed = JSON.parse(res.value); return Array.isArray(parsed) ? parsed : []; } catch (e) { // key doesn't exist yet — that's fine, treat as empty return []; } } async function appendSubmission(entry) { const current = await loadSubmissions(); const next = [entry, ...current]; await window.storage.set(STORAGE_KEY, JSON.stringify(next), true); return next; } export default function EQAssessment() { const [stage, setStage] = useState("intro"); // intro | quiz | results | coachLogin | coachDashboard const [name, setName] = useState(""); const [team, setTeam] = useState(""); const [nameError, setNameError] = useState(""); const [answers, setAnswers] = useState({}); const [pageIdx, setPageIdx] = useState(0); const [saved, setSaved] = useState(false); const [saveError, setSaveError] = useState(""); const [passcodeInput, setPasscodeInput] = useState(""); const [passcodeError, setPasscodeError] = useState(""); const [dashboardData, setDashboardData] = useState([]); const [dashboardLoading, setDashboardLoading] = useState(false); const [dashboardError, setDashboardError] = useState(""); const [expandedRow, setExpandedRow] = useState(null); const currentComposite = COMPOSITES[pageIdx]; const totalPages = COMPOSITES.length; const ALL_ITEMS = useMemo( () => COMPOSITES.flatMap((c) => c.items.map((it, idx) => ({ ...it, id: `${c.key}-${idx}` }))), [] ); const answeredCount = Object.keys(answers).length; const progressPct = Math.round((answeredCount / ALL_ITEMS.length) * 100); const pageAnswered = currentComposite.items.every( (_, idx) => answers[`${currentComposite.key}-${idx}`] !== undefined ); function setAnswer(id, val) { setAnswers((prev) => ({ ...prev, [id]: val })); } const results = useMemo(() => { return COMPOSITES.map((c) => { const vals = c.items.map((it, idx) => { const raw = answers[`${c.key}-${idx}`]; if (raw === undefined) return null; return it.r ? 6 - raw : raw; }); if (vals.some((v) => v === null)) return { ...c, score: null }; const sum = vals.reduce((a, b) => a + b, 0); const max = vals.length * 5; return { ...c, score: Math.round((sum / max) * 100) }; }); }, [answers]); const overallScore = useMemo(() => { const scored = results.filter((r) => r.score !== null); if (scored.length === 0) return null; return Math.round(scored.reduce((a, b) => a + b.score, 0) / scored.length); }, [results]); const radarData = results.map((r) => ({ composite: r.short, score: r.score ?? 0 })); // Auto-save once when results are reached useEffect(() => { if (stage !== "results" || saved || overallScore === null) return; const entry = { id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, name: name.trim() || "Anonymous", team: team.trim() || "—", date: new Date().toISOString(), overall: overallScore, composites: Object.fromEntries(results.map((r) => [r.key, r.score])), }; appendSubmission(entry) .then(() => setSaved(true)) .catch(() => setSaveError("Couldn't save your results to the coach dashboard, but you can still view and print them below.")); // eslint-disable-next-line react-hooks/exhaustive-deps }, [stage]); function restart() { setAnswers({}); setPageIdx(0); setSaved(false); setSaveError(""); setName(""); setTeam(""); setStage("intro"); } function beginQuiz() { if (!name.trim()) { setNameError("Enter your name so your coach can identify your results."); return; } setNameError(""); setStage("quiz"); } function tryCoachLogin() { if (passcodeInput === COACH_PASSCODE) { setPasscodeError(""); setDashboardLoading(true); setDashboardError(""); loadSubmissions() .then((data) => { setDashboardData(data); setDashboardLoading(false); setStage("coachDashboard"); }) .catch(() => { setDashboardError("Couldn't load submissions right now."); setDashboardLoading(false); }); } else { setPasscodeError("Incorrect passcode."); } } function refreshDashboard() { setDashboardLoading(true); setDashboardError(""); loadSubmissions() .then((data) => { setDashboardData(data); setDashboardLoading(false); }) .catch(() => { setDashboardError("Couldn't refresh submissions right now."); setDashboardLoading(false); }); } const printCss = ` @media print { .no-print { display: none !important; } body { background: #ffffff !important; } } `; // ------------------------------------------------------------------- // INTRO // ------------------------------------------------------------------- if (stage === "intro") { return ( ); } // ------------------------------------------------------------------- // QUIZ // ------------------------------------------------------------------- if (stage === "quiz") { const Icon = currentComposite.icon; return (

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.