Created the stats page where a user can select another user to view their stats;

Improved the whole stats and the home page

src/components/Exercises/Speaking.tsx

@@ -41,7 +41,7 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
 				</button>
 				<button
 					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-					onClick={() => onNext({exercise: id, solutions: [], score: {correct: 0, total: 0}, type})}>
+					onClick={() => onNext({exercise: id, solutions: [], score: {correct: 1, total: 1}, type})}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />

src/components/Navbar.tsx

@@ -42,7 +42,7 @@ export default function Navbar({profilePicture, timer, showExamEnd = false}: Pro
 			icon: "pi pi-fw pi-users",
 			items: [
 				{label: "List", icon: "pi pi-fw pi-users", url: "/users"},
-				{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/user-stats"},
+				{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/stats"},
 			],
 		},
 		{

src/components/UserResultChart.tsx

@@ -2,32 +2,29 @@ import {SEMI_TRANSPARENT} from "@/resources/colors";
 import {Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend} from "chart.js";
 import clsx from "clsx";
 import {PolarArea} from "react-chartjs-2";
+import {Chart} from "primereact/chart";
 
 interface Props {
 	data: {label: string; value: number}[];
+	label?: string;
 	title: string;
-	className?: string;
+	type: string;
 }
 
 ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
 
-export default function UserResultChart({data, title, className = ""}: Props) {
+export default function UserResultChart({data, type, label, title}: Props) {
 	const labels = data.map((x) => x.label);
 	const chartData = {
 		labels,
 		datasets: [
 			{
-				title,
+				label,
 				data: data.map((x) => x.value),
 				backgroundColor: Object.values(SEMI_TRANSPARENT),
 			},
 		],
 	};
 
-	return (
-		<div className={clsx("flex flex-col gap-4 items-center", className)}>
-			<PolarArea data={chartData} options={{plugins: {title: {text: title, display: true}}}} />
-			<h2 className="text-neutral-600 font-semibold text-lg">{title}</h2>
-		</div>
-	);
+	return <Chart type={type} data={chartData} options={{plugins: {title: {text: title, display: true}}}} />;
 }