feat: add medical chart components for assessment analytics

ScoreGauge (radial bar), TrendChart (multi-axis line), VocalRadarChart
(spider web), HeatmapChart (mood patterns), RiskCard (animated circular
progress), QuestionList (expandable Q&A), HistoryTimeline (session selector).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Sonra0

src/components/assessment/HeatmapChart.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ResponsiveHeatMap } from "@nivo/heatmap";
+
+interface HeatmapChartProps {
+  data: { day: string; week: number; value: number }[];
+}
+
+export function HeatmapChart({ data }: HeatmapChartProps) {
+  if (data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-48 text-gray-500 text-sm">
+        No mood pattern data available
+      </div>
+    );
+  }
+
+  // Transform into nivo heatmap format: rows = days, columns = weeks
+  const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+  const maxWeek = Math.max(...data.map((d) => d.week), 3);
+
+  const heatmapData = days.map((day) => ({
+    id: day,
+    data: Array.from({ length: maxWeek + 1 }, (_, week) => {
+      const match = data.find((d) => d.day === day && d.week === week);
+      return { x: `W${week + 1}`, y: match ? match.value : null };
+    }),
+  }));
+
+  return (
+    <div style={{ height: 220 }}>
+      <ResponsiveHeatMap
+        data={heatmapData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 50 }}
+        forceSquare={false}
+        colors={{
+          type: "sequential",
+          scheme: "greens",
+          minValue: 0,
+          maxValue: 100,
+        }}
+        emptyColor="rgba(255,255,255,0.04)"
+        borderRadius={4}
+        borderWidth={2}
+        borderColor="rgba(0,0,0,0.3)"
+        enableLabels={false}
+        animate
+        motionConfig="gentle"
+        theme={{
+          background: "transparent",
+          text: { fill: "#9ca3af", fontSize: 11 },
+          tooltip: {
+            container: {
+              background: "#1f2937",
+              color: "#f3f4f6",
+              borderRadius: "8px",
+              fontSize: 12,
+            },
+          },
+        }}
+      />
+    </div>
+  );
+}

src/components/assessment/HistoryTimeline.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Badge } from "@/components/ui/Badge";
+
+interface Session {
+  id: string;
+  date: string;
+  overallScore: number | null;
+  severity: "GREEN" | "YELLOW" | "RED" | null;
+}
+
+interface HistoryTimelineProps {
+  sessions: Session[];
+  activeSessionId: string | null;
+  onSelect: (sessionId: string) => void;
+}
+
+const severityVariant: Record<string, "success" | "warning" | "danger"> = {
+  GREEN: "success",
+  YELLOW: "warning",
+  RED: "danger",
+};
+
+export function HistoryTimeline({
+  sessions,
+  activeSessionId,
+  onSelect,
+}: HistoryTimelineProps) {
+  if (sessions.length === 0) {
+    return (
+      <p className="text-sm text-gray-500 text-center py-4">
+        No assessment history
+      </p>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto pb-2 -mx-2 px-2">
+      <div className="flex gap-3 min-w-min">
+        {sessions.map((session) => {
+          const isActive = session.id === activeSessionId;
+          return (
+            <button
+              key={session.id}
+              onClick={() => onSelect(session.id)}
+              className={`flex flex-col items-center gap-1.5 px-4 py-3 rounded-xl border transition-all shrink-0 ${
+                isActive
+                  ? "border-indigo-500 bg-indigo-500/10"
+                  : "border-white/5 bg-white/[0.03] hover:bg-white/[0.06]"
+              }`}
+            >
+              <span className="text-xs text-gray-500">{session.date}</span>
+              <span
+                className={`text-lg font-bold ${
+                  isActive ? "text-indigo-400" : "text-white"
+                }`}
+              >
+                {session.overallScore !== null
+                  ? `${Math.round(session.overallScore)}%`
+                  : "—"}
+              </span>
+              {session.severity && (
+                <Badge variant={severityVariant[session.severity]} size="sm">
+                  {session.severity}
+                </Badge>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/assessment/QuestionList.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useState } from "react";
+import { Badge } from "@/components/ui/Badge";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface Answer {
+  id: string;
+  questionText: string;
+  correctAnswer: string | null;
+  elderAnswer: string | null;
+  result: string | null;
+  audioUrl: string | null;
+  orderIndex: number;
+}
+
+interface QuestionListProps {
+  answers: Answer[];
+}
+
+export function QuestionList({ answers }: QuestionListProps) {
+  const [expanded, setExpanded] = useState<string | null>(null);
+
+  if (answers.length === 0) {
+    return (
+      <p className="text-sm text-gray-500 text-center py-4">
+        No questions in this session
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {answers.map((answer) => (
+        <div
+          key={answer.id}
+          className="rounded-xl border border-white/5 bg-white/[0.03] overflow-hidden"
+        >
+          <button
+            onClick={() =>
+              setExpanded(expanded === answer.id ? null : answer.id)
+            }
+            className="w-full flex items-center justify-between px-4 py-3 text-left"
+          >
+            <div className="flex items-center gap-3 min-w-0">
+              <span className="text-xs text-gray-500 shrink-0">
+                Q{answer.orderIndex + 1}
+              </span>
+              <span className="text-sm text-gray-300 truncate">
+                {answer.questionText}
+              </span>
+            </div>
+            <div className="flex items-center gap-2 shrink-0 ml-2">
+              {answer.result && (
+                <Badge
+                  variant={
+                    answer.result === "CORRECT"
+                      ? "success"
+                      : answer.result === "WRONG"
+                      ? "danger"
+                      : "warning"
+                  }
+                >
+                  {answer.result}
+                </Badge>
+              )}
+              <svg
+                className={`w-4 h-4 text-gray-500 transition-transform ${
+                  expanded === answer.id ? "rotate-180" : ""
+                }`}
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={2}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="m19.5 8.25-7.5 7.5-7.5-7.5"
+                />
+              </svg>
+            </div>
+          </button>
+
+          <AnimatePresence>
+            {expanded === answer.id && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="overflow-hidden"
+              >
+                <div className="px-4 pb-3 border-t border-white/5 pt-3 space-y-2">
+                  {answer.elderAnswer && (
+                    <div>
+                      <span className="text-xs text-gray-500">
+                        Elder&apos;s answer:
+                      </span>
+                      <p className="text-sm text-gray-300">
+                        {answer.elderAnswer}
+                      </p>
+                    </div>
+                  )}
+                  {answer.correctAnswer && (
+                    <div>
+                      <span className="text-xs text-gray-500">
+                        Correct answer:
+                      </span>
+                      <p className="text-sm text-emerald-400">
+                        {answer.correctAnswer}
+                      </p>
+                    </div>
+                  )}
+                  {answer.audioUrl && (
+                    <audio
+                      controls
+                      src={answer.audioUrl}
+                      className="w-full h-8 mt-2"
+                    />
+                  )}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/assessment/RadarChart.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { ResponsiveRadar } from "@nivo/radar";
+
+interface RadarChartProps {
+  data: Record<string, number> | null;
+}
+
+const metricLabels: Record<string, string> = {
+  parkinsons: "Parkinson's Risk",
+  depression: "Depression",
+  wellness: "Wellness",
+  mood: "Mood",
+  speechFluency: "Speech Fluency",
+};
+
+export function VocalRadarChart({ data }: RadarChartProps) {
+  if (!data || Object.keys(data).length === 0) {
+    return (
+      <div className="flex items-center justify-center h-64 text-gray-500 text-sm">
+        No vocal analysis data available
+      </div>
+    );
+  }
+
+  const chartData = Object.entries(data).map(([key, value]) => ({
+    metric: metricLabels[key] || key,
+    value: Math.min(100, Math.max(0, value)),
+  }));
+
+  return (
+    <div style={{ height: 300 }}>
+      <ResponsiveRadar
+        data={chartData}
+        keys={["value"]}
+        indexBy="metric"
+        maxValue={100}
+        margin={{ top: 40, right: 60, bottom: 40, left: 60 }}
+        curve="linearClosed"
+        borderWidth={2}
+        borderColor="#6366f1"
+        gridLevels={4}
+        gridShape="circular"
+        gridLabelOffset={16}
+        dotSize={8}
+        dotColor="#6366f1"
+        dotBorderWidth={2}
+        dotBorderColor="#1e1b4b"
+        colors={["#6366f1"]}
+        fillOpacity={0.2}
+        blendMode="normal"
+        animate
+        motionConfig="gentle"
+        theme={{
+          background: "transparent",
+          text: { fill: "#9ca3af", fontSize: 11 },
+          grid: { line: { stroke: "rgba(255,255,255,0.08)" } },
+          tooltip: {
+            container: {
+              background: "#1f2937",
+              color: "#f3f4f6",
+              borderRadius: "8px",
+              fontSize: 12,
+            },
+          },
+        }}
+      />
+    </div>
+  );
+}