+
- )
+ );
}
diff --git a/src/components/common/ScoreBar.jsx b/src/components/common/ScoreBar.jsx
new file mode 100644
index 0000000..85f73a8
--- /dev/null
+++ b/src/components/common/ScoreBar.jsx
@@ -0,0 +1,29 @@
+import Progress from "./Progress";
+import { formatScore, scoreBand, scoreLabel, scoreToPercent, scoreTone } from "../../lib/format";
+
+/*
+ * One line of the marked-up sheet: what was assessed, the word for how it went,
+ * and the figure — with the mark drawn beneath it.
+ */
+export default function ScoreBar({ label, value, showBand = true }) {
+ const band = scoreBand(value);
+
+ return (
+
+
+ {label}
+
+ {showBand && band !== "neutral" && (
+
+ {scoreLabel(value)}
+
+ )}
+
+ {formatScore(value)}
+
+
+
+
+
+ );
+}
diff --git a/src/components/common/Select.jsx b/src/components/common/Select.jsx
new file mode 100644
index 0000000..4f17477
--- /dev/null
+++ b/src/components/common/Select.jsx
@@ -0,0 +1,39 @@
+import { useId } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+export default function Select({ label, className = "", id, children, ...props }) {
+ const generated = useId();
+ const selectId = id || generated;
+
+ return (
+
+ {label && (
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/src/components/common/Skeleton.jsx b/src/components/common/Skeleton.jsx
new file mode 100644
index 0000000..5d4a11a
--- /dev/null
+++ b/src/components/common/Skeleton.jsx
@@ -0,0 +1,7 @@
+import { cn } from "../../lib/utils";
+
+/* Holds the page's shape while data loads. Breathes in the world's grammar
+ rather than with Tailwind's stock pulse. */
+export default function Skeleton({ className = "" }) {
+ return
;
+}
diff --git a/src/components/common/Spinner.jsx b/src/components/common/Spinner.jsx
new file mode 100644
index 0000000..196c913
--- /dev/null
+++ b/src/components/common/Spinner.jsx
@@ -0,0 +1,20 @@
+import { cn } from "../../lib/utils";
+
+const SIZES = { sm: "h-px w-4", md: "h-0.5 w-6", lg: "h-0.5 w-10" };
+
+/*
+ * The app's only waiting indicator: a stroke drawn and lifted, in the world's
+ * own motion grammar. A rotating spinner is a stock utility that belongs to no
+ * design system, and this world says ink settles rather than spins.
+ * Colour comes from `currentColor`, so callers tint it with a text class.
+ */
+export default function Spinner({ size = "md", className = "", label }) {
+ return (
+
+ );
+}
diff --git a/src/components/common/StatusBadge.jsx b/src/components/common/StatusBadge.jsx
new file mode 100644
index 0000000..3852511
--- /dev/null
+++ b/src/components/common/StatusBadge.jsx
@@ -0,0 +1,23 @@
+import { STATUS_LABELS } from "../../lib/format";
+
+/*
+ * One state vocabulary, rendered identically everywhere. Each state keeps its
+ * own mark so the same status never appears two different ways.
+ */
+const TONES = {
+ completed: "border-green-rule bg-green-wash text-green-ink",
+ in_progress: "border-ochre-rule bg-ochre-wash text-ochre-ink",
+ abandoned: "border-rule-strong bg-sunk text-ink-muted",
+};
+
+export default function StatusBadge({ status }) {
+ return (
+
+ {STATUS_LABELS[status] || status}
+
+ );
+}
diff --git a/src/components/common/ThemeToggle.jsx b/src/components/common/ThemeToggle.jsx
new file mode 100644
index 0000000..7aef3cf
--- /dev/null
+++ b/src/components/common/ThemeToggle.jsx
@@ -0,0 +1,15 @@
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "../../context/ThemeContext";
+import Button from "./Button";
+
+/* The icon shows the action, not the current state, so it agrees with the label. */
+export default function ThemeToggle({ className = "" }) {
+ const { isDark, toggle } = useTheme();
+ const label = isDark ? "Switch to light theme" : "Switch to dark theme";
+
+ return (
+
+ );
+}
diff --git a/src/components/common/Toast.jsx b/src/components/common/Toast.jsx
new file mode 100644
index 0000000..cd54645
--- /dev/null
+++ b/src/components/common/Toast.jsx
@@ -0,0 +1,73 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { AlertCircle, Check, Info, X } from "lucide-react";
+
+const ToastContext = createContext(null);
+
+/* Each notice carries its mark: a tick, a correction, a note. */
+const STYLES = {
+ success: { icon: Check, classes: "border-green-rule bg-green-wash text-green-ink" },
+ error: { icon: AlertCircle, classes: "border-red-rule bg-red-wash text-red-ink" },
+ info: { icon: Info, classes: "border-blue-rule bg-blue-wash text-blue-ink" },
+};
+
+export function ToastProvider({ children }) {
+ const [toasts, setToasts] = useState([]);
+ const nextId = useRef(1);
+
+ const dismiss = useCallback((id) => setToasts((all) => all.filter((toast) => toast.id !== id)), []);
+
+ const show = useCallback(
+ (message, type = "info", duration = 5000) => {
+ const id = nextId.current++;
+ setToasts((all) => [...all, { id, message, type }]);
+ if (duration) setTimeout(() => dismiss(id), duration);
+ },
+ [dismiss],
+ );
+
+ const api = useMemo(
+ () => ({
+ show,
+ success: (message) => show(message, "success"),
+ error: (message) => show(message, "error", 7000),
+ info: (message) => show(message, "info"),
+ }),
+ [show],
+ );
+
+ return (
+
+ {children}
+
+ {toasts.map(({ id, message, type }) => {
+ const { icon: Icon, classes } = STYLES[type] || STYLES.info;
+ return (
+
+
+
{message}
+
+
+ );
+ })}
+
+ );
+}
+
+export function useToast() {
+ const context = useContext(ToastContext);
+ if (!context) throw new Error("useToast must be used within ToastProvider");
+ return context;
+}
diff --git a/src/components/common/buttonStyles.js b/src/components/common/buttonStyles.js
new file mode 100644
index 0000000..b3e01f3
--- /dev/null
+++ b/src/components/common/buttonStyles.js
@@ -0,0 +1,33 @@
+import { cn } from "../../lib/utils";
+
+/*
+ * The primary action is the boxed answer: ink fill, paper text, square-ish
+ * corners. Everything else is quieter than it — a worksheet has one answer per
+ * question, and the page should read that way.
+ */
+export const BUTTON_VARIANTS = {
+ primary: "bg-primary text-primary-ink hover:bg-primary-hover",
+ outline: "border border-rule-strong bg-sheet text-ink hover:bg-sunk",
+ ghost: "text-ink-muted hover:bg-sunk hover:text-ink",
+ wash: "bg-sunk text-ink hover:bg-rule",
+ danger: "bg-mark-red text-sheet hover:opacity-90",
+ dangerOutline: "border border-red-rule bg-red-wash text-red-ink hover:border-mark-red",
+};
+
+export const BUTTON_SIZES = {
+ sm: "h-8 gap-1.5 px-3 text-sm",
+ md: "h-10 gap-2 px-4 text-sm",
+ lg: "h-12 gap-2 px-6 text-base",
+ icon: "h-10 w-10",
+};
+
+export const buttonClasses = ({ variant = "primary", size = "md", className = "" } = {}) =>
+ cn(
+ "inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap",
+ "transition-[background-color,border-color,opacity] duration-150",
+ "disabled:pointer-events-none disabled:opacity-45",
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+ BUTTON_VARIANTS[variant] ?? BUTTON_VARIANTS.primary,
+ BUTTON_SIZES[size] ?? BUTTON_SIZES.md,
+ className,
+ );
diff --git a/src/components/dashboard/DashboardSkeleton.jsx b/src/components/dashboard/DashboardSkeleton.jsx
new file mode 100644
index 0000000..25d8b12
--- /dev/null
+++ b/src/components/dashboard/DashboardSkeleton.jsx
@@ -0,0 +1,31 @@
+import Skeleton from "../common/Skeleton";
+
+/* Holds the register's shape so the page does not blank on every visit. */
+export default function DashboardSkeleton() {
+ return (
+
+
+
+
+
+
+
+ {[0, 1, 2].map((i) => (
+
+
+
+
+ ))}
+
+
+
+ {[0, 1, 2].map((i) => (
+
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/dashboard/InterviewPrepCard.jsx b/src/components/dashboard/InterviewPrepCard.jsx
deleted file mode 100644
index 1bbfa05..0000000
--- a/src/components/dashboard/InterviewPrepCard.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Link } from "react-router-dom"
-import Button from "../common/Button"
-
-export default function InterviewPrepCard({ topic, data }) {
- return (
-
-
-
-
{data.title}
-
{data.questions.length} practice questions
-
-
🎤
-
-
-
-
- 💡
- Practice common interview questions
-
-
- 🎯
- Build confidence
-
-
-
-
-
-
-
- )
-}
diff --git a/src/components/dashboard/InterviewRow.jsx b/src/components/dashboard/InterviewRow.jsx
new file mode 100644
index 0000000..53dfa6b
--- /dev/null
+++ b/src/components/dashboard/InterviewRow.jsx
@@ -0,0 +1,45 @@
+import { Link } from "react-router-dom";
+import StatusBadge from "../common/StatusBadge";
+import { formatDate, formatScore, hasScore, interviewRef, scoreLabel, scoreTone } from "../../lib/format";
+
+/* A line in the register: reference, subject, date, and the mark it earned. */
+export default function InterviewRow({ interview }) {
+ const scored = hasScore(interview.overallScore);
+
+ return (
+
+
+ {interviewRef(interview.id)}
+
+
+
+
+
{interview.role}
+ {interview.interviewType}
+
+
+
+ {formatDate(interview.completedAt || interview.startedAt)}
+ {interview.technologies.length > 0 && ` · ${interview.technologies.slice(0, 3).join(", ")}`}
+
+ {interview.feedback && interview.status === "completed" && (
+
{interview.feedback}
+ )}
+
+
+ {scored && (
+
+
+ {formatScore(interview.overallScore)}
+
+
+ {scoreLabel(interview.overallScore)}
+
+
+ )}
+
+ );
+}
diff --git a/src/components/dashboard/LeadFigure.jsx b/src/components/dashboard/LeadFigure.jsx
new file mode 100644
index 0000000..b7ed769
--- /dev/null
+++ b/src/components/dashboard/LeadFigure.jsx
@@ -0,0 +1,37 @@
+import { formatScore, hasScore, scoreLabel, scoreTone } from "../../lib/format";
+
+/*
+ * The register's headline. Hierarchy here is scale contrast alone, so the
+ * figure has to outrank everything else on the view by a long way — at a 1.6x
+ * step it merely competed with the greeting.
+ */
+export default function LeadFigure({ label, value, caption }) {
+ const scored = hasScore(value);
+
+ return (
+
+
+
+
{label}
+
+
+
+ {scored ? formatScore(value).split("/")[0] : "--"}
+
+ /10
+
+
+ {scored && (
+
+ {scoreLabel(value)}
+
+ )}
+
+ {caption &&
{caption}
}
+
+ );
+}
diff --git a/src/components/dashboard/ScoreTrendChart.jsx b/src/components/dashboard/ScoreTrendChart.jsx
new file mode 100644
index 0000000..cfe39d1
--- /dev/null
+++ b/src/components/dashboard/ScoreTrendChart.jsx
@@ -0,0 +1,168 @@
+import {
+ CartesianGrid,
+ Line,
+ LineChart,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+import { formatDate } from "../../lib/format";
+
+/*
+ * Series order is fixed and so are the hues: the palette was validated for
+ * normal vision and for protan/deutan/tritan separation against the sheet in
+ * both themes, and reordering would break the adjacency it was checked on.
+ *
+ * All four end-labels collided into an unreadable stack when the series
+ * converge, which they do whenever someone is improving evenly. A legend names
+ * every series, and only the lead series is labelled at its line end.
+ */
+const SERIES = [
+ { key: "overall", label: "Overall", color: "var(--chart-1)", width: 2 },
+ { key: "technical", label: "Technical", color: "var(--chart-2)", width: 1.25 },
+ { key: "problemSolving", label: "Problem solving", color: "var(--chart-3)", width: 1.25 },
+ { key: "communication", label: "Communication", color: "var(--chart-4)", width: 1.25 },
+];
+
+const shortDate = (value) => formatDate(value, { day: "numeric", month: "short" });
+
+/*
+ * The axis is zoomed to the band the scores actually occupy. A fixed 0-10 axis
+ * squeezed every line into a fifth of the plot and read as flat, so the scale
+ * is stated in words instead of spent on empty space.
+ */
+function bandFor(data) {
+ const values = data.flatMap((point) =>
+ SERIES.map(({ key }) => point[key]).filter((v) => typeof v === "number"),
+ );
+ if (!values.length) return [0, 10];
+ const lo = Math.max(0, Math.floor(Math.min(...values) - 0.5));
+ const hi = Math.min(10, Math.ceil(Math.max(...values) + 0.5));
+ return hi - lo < 2 ? [Math.max(0, hi - 2), hi] : [lo, hi];
+}
+
+function TrendTooltip({ active, payload }) {
+ if (!active || !payload?.length) return null;
+ const point = payload[0]?.payload;
+
+ return (
+
+
{point?.when}
+
+ {SERIES.map(({ key, label, color }) => {
+ const entry = payload.find((item) => item.dataKey === key);
+ if (!entry || entry.value == null) return null;
+ return (
+ -
+
+
+ {label}
+
+ {entry.value}
+
+ );
+ })}
+
+
+ );
+}
+
+export default function ScoreTrendChart({ trend }) {
+ const data = trend.map((point) => ({
+ ...point,
+ name: shortDate(point.date),
+ when: formatDate(point.date),
+ }));
+
+ if (data.length < 2) {
+ return (
+
+
+ Two scored interviews are enough to draw the line. You have {data.length}.
+
+
+ );
+ }
+
+ const [low, high] = bandFor(data);
+
+ return (
+
+
+
+ Score trend
+
+
+ {data.length} scored sessions · showing {low}–{high} of a 0–10 scale
+
+
+
+
+ {SERIES.map(({ key, label, color }) => (
+ -
+
+ {label}
+
+ ))}
+
+
+
+
+
+
+
+ } cursor={{ stroke: "var(--ink-faint)", strokeWidth: 1 }} />
+ {SERIES.map(({ key, label, color, width }) => (
+
+ index === data.length - 1 ? (
+
+ {label}
+
+ ) : null
+ : undefined
+ }
+ />
+ ))}
+
+
+
+ );
+}
diff --git a/src/components/dashboard/StatsOverview.jsx b/src/components/dashboard/StatsOverview.jsx
deleted file mode 100644
index 1cdb7f6..0000000
--- a/src/components/dashboard/StatsOverview.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useLearner } from "../../context/LearnerContext";
-
-export default function StatsOverview() {
- const { learnerProfile } = useLearner();
-
- const stats = [
- {
- label: "Interviews Practiced",
- value: learnerProfile?.interviewsPracticed?.length || 0,
- icon: "🎤",
- },
- {
- label: "Modules Completed",
- value: learnerProfile?.completedModules?.length || 0,
- icon: "✅",
- },
- ];
-
- return (
-
- {stats.map((stat, index) => (
-
-
-
-
{stat.label}
-
{stat.value}
-
-
{stat.icon}
-
-
- ))}
-
- );
-}
diff --git a/src/components/dashboard/dashboard-layout.jsx b/src/components/dashboard/dashboard-layout.jsx
deleted file mode 100644
index c3a59d6..0000000
--- a/src/components/dashboard/dashboard-layout.jsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import {
- LayoutDashboard,
- Play,
- BookOpen,
- Mic,
- Menu,
- X,
- GraduationCap,
-} from "lucide-react";
-import { Button } from "../ui/button";
-import { cn } from "../../lib/utils";
-
-const navigation = [
- { name: "Dashboard", href: "/", icon: LayoutDashboard },
- { name: "Interviews", href: "/interviews", icon: Mic },
-];
-
-export function DashboardLayout({ children }) {
- const [sidebarOpen, setSidebarOpen] = useState(false);
- const pathname = useLocation().pathname;
-
- return (
-
- {sidebarOpen && (
-
setSidebarOpen(false)}
- />
- )}
-
-
-
-
-
-
-
-
- LearnHub
-
-
-
-
{children}
-
-
- );
-}
diff --git a/src/components/dashboard/feedback-content.jsx b/src/components/dashboard/feedback-content.jsx
deleted file mode 100644
index 024f91e..0000000
--- a/src/components/dashboard/feedback-content.jsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { MessageSquare, ThumbsUp, Clock, CheckCircle2 } from "lucide-react"
-
-const interviewResults = [
- {
- id: 1,
- title: "Technical Interview - Data Structures",
- date: "June 15, 2024",
- interviewer: "Dr. Sarah Johnson",
- rating: "Excellent",
- score: 92,
- feedback:
- "Demonstrated exceptional understanding of data structures and algorithms. Problem-solving approach was methodical and efficient. Strong communication throughout the session.",
- strengths: ["Algorithm optimization", "Clear communication", "Time complexity analysis"],
- improvements: ["Edge case handling", "Code documentation"],
- status: "completed",
- },
- {
- id: 2,
- title: "Behavioral Interview - Team Collaboration",
- date: "June 10, 2024",
- interviewer: "Prof. Michael Chen",
- rating: "Good",
- score: 85,
- feedback:
- "Good examples of teamwork and leadership. Could provide more specific metrics and outcomes in responses. Overall positive performance.",
- strengths: ["Leadership examples", "Conflict resolution", "Active listening"],
- improvements: ["Quantifiable results", "More diverse examples"],
- status: "completed",
- },
- {
- id: 3,
- title: "System Design - Scalability",
- date: "June 5, 2024",
- interviewer: "Dr. Emily Rodriguez",
- rating: "Very Good",
- score: 88,
- feedback:
- "Solid understanding of distributed systems and scalability patterns. Good trade-off analysis between different architectural approaches.",
- strengths: ["System architecture", "Trade-off analysis", "Scalability concepts"],
- improvements: ["Database sharding", "Caching strategies"],
- status: "completed",
- },
- {
- id: 4,
- title: "Mock Interview - Frontend Development",
- date: "June 20, 2024",
- interviewer: "Dr. James Wilson",
- rating: "Pending",
- score: 0,
- feedback: "Feedback will be available within 48 hours.",
- strengths: [],
- improvements: [],
- status: "pending",
- },
-]
-
-export function FeedbackContent() {
- return (
-
- {/* Header */}
-
-
Feedback & Results
-
Review your interview feedback and performance insights
-
-
- {/* Summary Stats */}
-
-
-
-
-
-
-
-
-
Total Interviews
-
12
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Interview Results */}
-
- {interviewResults.map((result) => (
-
-
-
-
- {result.title}
-
-
-
- {result.date} • Interviewer: {result.interviewer}
-
-
-
-
- {result.status === "completed" && (
-
-
Score
-
{result.score}%
-
- )}
-
= 90 ? "default" : "outline"}
- className="h-fit"
- >
- {result.rating}
-
-
-
-
Overall Feedback
-
{result.feedback}
-
-
-
-
- Strengths
-
-
- {result.strengths.map((strength, index) => (
- -
- •
- {strength}
-
- ))}
-
-
-
-
-
- Areas for Improvement
-
-
- {result.improvements.map((improvement, index) => (
- -
- •
- {improvement}
-
- ))}
-
-
-
-
-
- )}
-
-
- ))}
-
-
- )
-}
diff --git a/src/components/dashboard/overview-content.jsx b/src/components/dashboard/overview-content.jsx
deleted file mode 100644
index 2577ef5..0000000
--- a/src/components/dashboard/overview-content.jsx
+++ /dev/null
@@ -1,390 +0,0 @@
-import { useEffect, useState } from "react";
-import { useLearner } from "../../context/LearnerContext";
-import { dashboardAPI } from "../../lib/api";
-import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
-} from "../ui/card";
-import Button from "../common/Button";
-import {
- BarChart,
- Bar,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- ResponsiveContainer,
-} from "recharts";
-import { TrendingUp, BookOpen, MessageSquare, Coins } from "lucide-react";
-
-const normalizeScoreToPercent = (value) => {
- if (typeof value !== "number" || Number.isNaN(value)) return null;
- // backend stores Float; could be 0..1 or 0..100 depending on implementation
- const v = value <= 1 ? value * 100 : value;
- return Math.max(0, Math.min(100, v));
-};
-
-const formatScore = (value) => {
- const pct = normalizeScoreToPercent(value);
- if (pct === null) return "N/A";
- return `${Math.round(pct)}%`;
-};
-
-const chartBlue = "#2563eb"; // tailwind blue-600
-const chartBlueLight = "#60a5fa"; // tailwind blue-400
-
-export function OverviewContent() {
- const { learnerProfile, tokens, fetchTokens } = useLearner();
- const [stats, setStats] = useState({
- avgScore: 0,
- totalInterviews: 0,
- completedInterviews: 0,
- skillsTracked: 0,
- });
- const [expandedFeedback, setExpandedFeedback] = useState({});
-
- const toggleFeedback = (interviewId) => {
- setExpandedFeedback((prev) => ({
- ...prev,
- [interviewId]: !prev[interviewId],
- }));
- };
-
- useEffect(() => {
- const fetchDashboardStats = async () => {
- try {
- const response = await dashboardAPI.getStats();
- if (response.success) {
- setStats((prev) => ({
- ...prev,
- totalInterviews: Number(response?.data?.interviewSessions || 0),
- skillsTracked: Number(response?.data?.skillsTracked || 0),
- }));
- }
- } catch (error) {
- console.error("Failed to fetch dashboard stats:", error);
- }
- };
-
- fetchDashboardStats();
- fetchTokens(); // Ensure tokens are perfectly synced on dashboard load
- }, []);
-
- useEffect(() => {
- if (learnerProfile) {
- const interviews = learnerProfile.interviewsPracticed || [];
- const scoredInterviews = interviews.filter(
- (i) => normalizeScoreToPercent(i?.overallScore) !== null,
- );
- const avgOverall =
- scoredInterviews.length > 0
- ? scoredInterviews.reduce(
- (sum, i) => sum + normalizeScoreToPercent(i.overallScore),
- 0,
- ) / scoredInterviews.length
- : 0;
-
- setStats((prev) => ({
- ...prev,
- avgScore: avgOverall > 0 ? Math.round(avgOverall * 10) / 10 : 0,
- completedInterviews: interviews.length,
- }));
- }
- }, [learnerProfile]);
-
- // Prepare skills chart data
- const skillsChartData = (learnerProfile?.skills || [])
- .slice(0, 8)
- .map((skill) => ({ skill }));
-
- const recentInterview = (learnerProfile?.interviewsPracticed || [])
- .slice()
- .sort(
- (a, b) =>
- new Date(b?.completedAt || b?.createdAt || b?.startedAt || 0) -
- new Date(a?.completedAt || a?.createdAt || a?.startedAt || 0),
- )[0];
-
- return (
-
- {/* Header */}
-
-
- Welcome back, {learnerProfile?.name || "Learner"}!
-
-
- {learnerProfile?.role || "Complete your profile to get started"}
-
-
-
- {/* Stats Cards */}
-
-
-
-
- Available Tokens
-
-
-
-
-
- {tokens !== null ? tokens : "..."} 🪙
-
-
- Ready for {tokens !== null ? Math.floor(tokens / 10) : 0}{" "}
- interviews
-
-
-
-
-
-
- Average Score
-
-
-
-
- {stats.avgScore > 0 ? `${Math.round(stats.avgScore)}%` : "N/A"}
-
-
- Based on your recent activity
-
-
- {recentInterview && (
-
-
-
Tech
-
- {formatScore(recentInterview.technicalScore)}
-
-
-
-
Comm
-
- {formatScore(recentInterview.communicationScore)}
-
-
-
-
Problem
-
- {formatScore(recentInterview.problemSolvingScore)}
-
-
-
-
Overall
-
- {formatScore(recentInterview.overallScore)}
-
-
-
-
-
-
-
- Skills Tracked
-
-
-
-
-
- {stats.skillsTracked || learnerProfile?.skills?.length || 0}
-
-
- {learnerProfile?.experience || "Set your experience level"}
-
-
-
-
-
-
-
- Interview Sessions
-
-
-
-
-
- {stats.totalInterviews}
-
-
-
- {/* Just showing total for now as "completed" count logic might differ */}
- {stats.completedInterviews}
- {" "}
- feedback received
-
-
-
-
-
- {/* Charts */}
- {(learnerProfile?.skills?.length || 0) > 0 && (
-
- {/* Skills Progress Chart */}
- {(learnerProfile?.skills?.length || 0) > 0 && (
-
-
- Your Tech Stack
- Skills you're tracking
-
-
-
-
-
-
-
- null}
- labelFormatter={(label) => `Skill: ${label}`}
- />
- 1}
- fill={chartBlue}
- activeBar={{ fill: chartBlueLight }}
- radius={[0, 8, 8, 0]}
- />
-
-
-
-
- This list is based on the skills in your profile.
-
-
-
- )}
-
- )}
-
- {/* Recent Interview Feedback */}
- {(learnerProfile?.interviewsPracticed || []).length > 0 && (
-
-
- Recent Interview Feedback
-
- Summary of your latest interview sessions
-
-
-
-
- {(learnerProfile?.interviewsPracticed || [])
- .slice(0, 5)
- .map((interview, index) => (
-
-
-
-
- {interview.role || "N/A"} -{" "}
- {interview.interviewType || "Interview"}
-
-
- {new Date(
- interview.createdAt || interview.startedAt,
- ).toLocaleDateString()}
-
-
- {interview.overallScore && (
-
- {formatScore(interview.overallScore)}
-
- )}
-
-
- {interview.feedback ? (
- <>
-
- {interview.feedback}
-
-
-
- ) : (
-
- No feedback available for this interview
-
- )}
-
- {interview.strengths && interview.strengths.length > 0 && (
-
- {interview.strengths.slice(0, 3).map((strength, i) => (
-
- {strength}
-
- ))}
-
- )}
-
- ))}
-
- )}
-
- {/* Empty State */}
- {stats.totalInterviews === 0 && (
-
-
-
-
- Ready to start your learning journey?
-
-
- Practice an interview to get personalized feedback and track your
- progress.
-
-
-
- )}
-
- );
-}
-
-export default OverviewContent;
diff --git a/src/components/grid.jsx b/src/components/grid.jsx
deleted file mode 100644
index 3270a08..0000000
--- a/src/components/grid.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { cn } from "@/lib/utils";
-import React from "react";
-
-export function GridBackgroundDemo() {
- return (
-
- );
-}
\ No newline at end of file
diff --git a/src/components/interview/InterviewSession.jsx b/src/components/interview/InterviewSession.jsx
new file mode 100644
index 0000000..e4c2250
--- /dev/null
+++ b/src/components/interview/InterviewSession.jsx
@@ -0,0 +1,182 @@
+import { useEffect, useRef } from "react";
+import { Check, PhoneOff, RotateCw } from "lucide-react";
+import Button from "../common/Button";
+import Spinner from "../common/Spinner";
+import { formatDuration } from "../../lib/format";
+
+const PHASE_LABELS = {
+ connecting: "Connecting to your interviewer",
+ live: "Interview in progress",
+ finishing: "Saving your interview and marking it",
+ failed: "We could not save your interview",
+};
+
+/*
+ * The transcript is the page. It fills the column and gains lines as you speak,
+ * the way a worked answer fills the sheet — not a chat window beside a card.
+ */
+export default function InterviewSession({
+ session,
+ phase,
+ transcript,
+ isSpeaking,
+ seconds,
+ error,
+ onStop,
+ onRetry,
+}) {
+ const endRef = useRef(null);
+ const total = session.interviewConfig.durationSeconds;
+ const live = phase === "live";
+ const busy = phase === "finishing" || phase === "done";
+ const elapsed = Math.min(100, total ? (seconds / total) * 100 : 0);
+
+ useEffect(() => {
+ endRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+ }, [transcript]);
+
+ // Closing the tab mid-call would lose the interview.
+ useEffect(() => {
+ if (!live) return undefined;
+ const warn = (event) => event.preventDefault();
+ window.addEventListener("beforeunload", warn);
+ return () => window.removeEventListener("beforeunload", warn);
+ }, [live]);
+
+ return (
+
+
+
+
+ {session.role}
+
+
+ {session.interviewType} · {session.technologies.slice(0, 3).join(", ")}
+ {session.technologies.length > 3 && ` +${session.technologies.length - 3}`}
+
+
+
+
+ {live ? "Live" : "Connecting"}
+
+
+ {formatDuration(seconds)}
+ / {formatDuration(total)}
+
+
+
+
+ {/* The sheet filling up: one rule, drawn to where the session has reached. */}
+
+
+ {PHASE_LABELS[phase] && phase !== "live" && (
+
+ {phase !== "failed" && }
+
+ {PHASE_LABELS[phase]}
+ {phase === "failed" && error ? `: ${error}` : ""}
+
+ {phase === "failed" && (
+
+ )}
+
+ )}
+
+ {error && phase !== "failed" && (
+
+ {error}
+
+ )}
+
+
+
+
+ {transcript.length === 0 && (
+
+ {live
+ ? "Say hello when you are ready — your words appear here."
+ : "Captions appear here once the interviewer connects."}
+
+ )}
+
+
+ {transcript.map((turn, index) => {
+ const you = turn.speaker === "You";
+ return (
+
+ {/*
+ * The transcript gains its marks as you speak. The mark records
+ * that the turn was captured — it is not a judgement, because
+ * nothing has been scored yet while the call is still running.
+ */}
+ {you && (
+
+ )}
+
+ {turn.speaker}
+ {you && — captured}
+
+
+ {turn.text}
+
+
+ );
+ })}
+
+
+ {live && isSpeaking && (
+
+ Interviewer speaking
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/interview/InterviewSetup.jsx b/src/components/interview/InterviewSetup.jsx
new file mode 100644
index 0000000..5228888
--- /dev/null
+++ b/src/components/interview/InterviewSetup.jsx
@@ -0,0 +1,173 @@
+import { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import Select from "../common/Select";
+import Button from "../common/Button";
+
+const TYPE_HINTS = {
+ technical: "Questions about your stack",
+ behavioral: "Teamwork and past experience",
+ mixed: "A bit of both",
+};
+
+/*
+ * The question paper, filled in before the exam starts. Each choice is a
+ * numbered line on the sheet; the submit is the boxed answer at the foot.
+ */
+function Field({ step, label, hint, children }) {
+ return (
+
+ );
+}
+
+export default function InterviewSetup({ options, user, tokens, starting, onStart }) {
+ const roles = useMemo(() => Object.keys(options.roles), [options]);
+
+ // Pre-fill from the profile, but only with values the server will accept.
+ const [role, setRole] = useState(() => (roles.includes(user?.role) ? user.role : ""));
+ const [interviewType, setInterviewType] = useState("mixed");
+ const [technologies, setTechnologies] = useState(() => {
+ const allowed = options.roles[user?.role] || [];
+ return (user?.skills || []).filter((skill) => allowed.includes(skill)).slice(0, options.maxTechnologies);
+ });
+
+ const available = options.roles[role] || [];
+ const canAfford = tokens === null || tokens >= options.tokenCost;
+ const ready = role && technologies.length > 0 && canAfford && !starting;
+
+ const changeRole = (next) => {
+ setRole(next);
+ setTechnologies([]);
+ };
+
+ const toggleTechnology = (tech) =>
+ setTechnologies((current) => {
+ if (current.includes(tech)) return current.filter((t) => t !== tech);
+ return current.length >= options.maxTechnologies ? current : [...current, tech];
+ });
+
+ return (
+
+
AI mock interview
+
+ {options.durationMinutes} minutes, spoken aloud, built from the stack you choose below.
+
+
+
+
+ );
+}
diff --git a/src/components/layout/AuthLayout.jsx b/src/components/layout/AuthLayout.jsx
new file mode 100644
index 0000000..61139e8
--- /dev/null
+++ b/src/components/layout/AuthLayout.jsx
@@ -0,0 +1,48 @@
+import { Link } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import Logo from "../brand/Logo";
+import ThemeToggle from "../common/ThemeToggle";
+
+/*
+ * The shell Login and Sign-up share. The sheet sits on paper with its own
+ * margin rule; the form is written to the right of it.
+ */
+export default function AuthLayout({ title, subtitle, children, footer }) {
+ return (
+
+
+
+
+
+
+
+
+
+ {title}
+
+
{subtitle}
+
+
+
+ {children}
+
+
+ {footer &&
{footer}
}
+
+
+
+ );
+}
diff --git a/src/components/layout/DashboardLayout.jsx b/src/components/layout/DashboardLayout.jsx
index c75a82a..66935c8 100644
--- a/src/components/layout/DashboardLayout.jsx
+++ b/src/components/layout/DashboardLayout.jsx
@@ -1,60 +1,71 @@
import { useState } from "react";
-import { Menu, Search, Bell } from "lucide-react";
-import { Outlet } from "react-router-dom";
+import { Link, Outlet, useLocation } from "react-router-dom";
+import { Menu } from "lucide-react";
import LearningSidebar from "./LearningSidebar";
+import { NAV_LINKS, isNavActive } from "./navigation";
import Button from "../common/Button";
+import ThemeToggle from "../common/ThemeToggle";
+import Avatar from "../common/Avatar";
import { useLearner } from "../../context/LearnerContext";
+const TITLES = { "/interviews": "AI Interview" };
+
+function currentTitle(pathname) {
+ if (pathname.startsWith("/interviews/")) return "Report";
+ const match = NAV_LINKS.find((link) => isNavActive(link.to, pathname));
+ return TITLES[pathname] || match?.label || "";
+}
+
export default function DashboardLayout() {
- const [sidebarOpen, setSidebarOpen] = useState(false);
- const { learnerProfile, authUser } = useLearner();
-
- const userName = learnerProfile?.name || authUser?.name || "User";
- const userInitials = userName
- .split(" ")
- .map((n) => n[0])
- .join("")
- .toUpperCase()
- .slice(0, 2);
-
- return (
-
-
setSidebarOpen(false)}
- />
-
-
-
- );
+ const [sidebarOpen, setSidebarOpen] = useState(false);
+ const { user, tokens } = useLearner();
+ const { pathname } = useLocation();
+ const userName = user?.name || "User";
+
+ return (
+
+
setSidebarOpen(false)} />
+
+
+
+ );
}
diff --git a/src/components/layout/LearningSidebar.jsx b/src/components/layout/LearningSidebar.jsx
index a0b50ec..b03804f 100644
--- a/src/components/layout/LearningSidebar.jsx
+++ b/src/components/layout/LearningSidebar.jsx
@@ -1,91 +1,85 @@
-import { Link, useLocation } from "react-router-dom";
-import {
- LayoutDashboard,
- BookOpen,
- MessageSquare,
- Sparkles,
- Settings,
- LogOut,
-} from "lucide-react";
+import { createElement, useEffect, useRef } from "react";
+import { NavLink, useLocation } from "react-router-dom";
+import { LogOut } from "lucide-react";
import { useLearner } from "../../context/LearnerContext";
-import Button from "../common/Button";
-
-const links = [
- { label: "Dashboard", to: "/dashboard", icon: LayoutDashboard },
- { label: "AI Interview", to: "/interviews", icon: MessageSquare },
-];
+import Logo from "../brand/Logo";
+import { cn } from "../../lib/utils";
+import { NAV_LINKS, isNavActive } from "./navigation";
export default function LearningSidebar({ open = false, onClose }) {
const location = useLocation();
- const { logout } = useLearner();
+ const { logout } = useLearner();
+ const panelRef = useRef(null);
- const handleLogout = () => {
- logout();
- if (onClose) {
- onClose();
- }
- };
+ // The drawer is modal on mobile: Escape closes it and focus moves in.
+ useEffect(() => {
+ if (!open) return undefined;
+ panelRef.current?.querySelector("a, button")?.focus();
+ const onKeyDown = (event) => {
+ if (event.key === "Escape") onClose?.();
+ };
+ document.addEventListener("keydown", onKeyDown);
+ return () => document.removeEventListener("keydown", onKeyDown);
+ }, [open, onClose]);
return (
<>
{open && (
-
+
)}