Created a quick demo home page for a user

src/components/Navbar.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable @next/next/no-img-element */
+export default function Navbar() {
+	return (
+		<div className="navbar bg-base-100">
+			<div className="flex-1">
+				<a className="btn btn-ghost normal-case text-xl">IELTS GPT</a>
+			</div>
+			<div className="flex-none gap-2">
+				<div className="form-control">
+					<input type="text" placeholder="Search" className="input input-bordered" />
+				</div>
+				<div className="dropdown dropdown-end">
+					<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+						<div className="w-10 rounded-full">
+							<img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" alt="Profile picture" />
+						</div>
+					</label>
+					<ul tabIndex={0} className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
+						<li>
+							<a className="justify-between">
+								Profile
+								<span className="badge">New</span>
+							</a>
+						</li>
+						<li>
+							<a>Settings</a>
+						</li>
+						<li>
+							<a>Logout</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/UserResultChart.tsx

@@ -0,0 +1,36 @@
+import {Module} from "@/interfaces";
+import {UserResults} from "@/interfaces/results";
+import {moduleLabels} from "@/utils/moduleUtils";
+import {Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend} from "chart.js";
+import clsx from "clsx";
+import {PolarArea} from "react-chartjs-2";
+
+interface Props {
+	results: UserResults;
+	resultKey: "score" | "total";
+	label: string;
+	className?: string;
+}
+
+ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
+
+export default function UserResultChart({results, resultKey, label, className = ""}: Props) {
+	const labels = Object.keys(results).map((key) => moduleLabels[key as Module]);
+	const data = {
+		labels,
+		datasets: [
+			{
+				label,
+				data: Object.keys(results).map((module) => results[module as Module][resultKey]),
+				backgroundColor: ["rgba(255, 99, 132, 0.5)", "rgba(54, 162, 235, 0.5)", "rgba(255, 206, 86, 0.5)", "rgba(75, 192, 192, 0.5)"],
+			},
+		],
+	};
+
+	return (
+		<div className={clsx("flex flex-col gap-4 items-center", className)}>
+			<PolarArea data={data} options={{plugins: {title: {text: label, display: true}}}} />
+			<h2 className="text-neutral-600 font-semibold text-lg">{label}</h2>
+		</div>
+	);
+}