Updated the code to use the new desired levels

src/components/Diagnostic.tsx

@@ -27,6 +27,7 @@ export default function Diagnostic({onFinish}: Props) {
 	const [focus, setFocus] = useState<"academic" | "general">();
 	const [isInsert, setIsInsert] = useState(false);
 	const [levels, setLevels] = useState({reading: 0, listening: 0, writing: 0, speaking: 0});
+	const [desiredLevels, setDesiredLevels] = useState({reading: 9, listening: 9, writing: 9, speaking: 9});
 
 	const router = useRouter();
 
@@ -47,7 +48,7 @@ export default function Diagnostic({onFinish}: Props) {
 
 	const updateUser = (callback: () => void) => {
 		axios
-			.patch("/api/users/update", {focus, levels, isFirstLogin: false})
+			.patch("/api/users/update", {focus, levels, desiredLevels, isFirstLogin: false})
 			.then(callback)
 			.catch(() => {
 				toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});

src/interfaces/user.ts

@@ -9,6 +9,7 @@ export interface User {
 	isFirstLogin: boolean;
 	focus: "academic" | "general";
 	levels: {[key in Module]: number};
+	desiredLevels: {[key in Module]: number};
 	type: Type;
 }
 

src/pages/index.tsx

@@ -156,11 +156,18 @@ export default function Home() {
 											</div>
 											<div className="flex justify-between w-full">
 												<span className="font-extrabold text-sm">Reading</span>
-												<span className="text-sm font-normal text-mti-gray-dim">86%</span>
+												<span className="text-sm font-normal text-mti-gray-dim">
+													Level {user.levels.reading} / Level {user.desiredLevels.reading}
+												</span>
 											</div>
 										</div>
 										<div className="pl-14">
-											<ProgressBar color="blue" label="" percentage={86} className="w-full h-2" />
+											<ProgressBar
+												color="blue"
+												label=""
+												percentage={Math.round((user.levels.reading * 100) / user.desiredLevels.reading)}
+												className="w-full h-2"
+											/>
 										</div>
 									</div>
 									<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -170,11 +177,18 @@ export default function Home() {
 											</div>
 											<div className="flex justify-between w-full">
 												<span className="font-extrabold text-sm">Writing</span>
-												<span className="text-sm font-normal text-mti-gray-dim">91%</span>
+												<span className="text-sm font-normal text-mti-gray-dim">
+													Level {user.levels.writing} / Level {user.desiredLevels.writing}
+												</span>
 											</div>
 										</div>
 										<div className="pl-14">
-											<ProgressBar color="blue" label="" percentage={91} className="w-full h-2" />
+											<ProgressBar
+												color="blue"
+												label=""
+												percentage={Math.round((user.levels.writing * 100) / user.desiredLevels.writing)}
+												className="w-full h-2"
+											/>
 										</div>
 									</div>
 									<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -184,11 +198,18 @@ export default function Home() {
 											</div>
 											<div className="flex justify-between w-full">
 												<span className="font-extrabold text-sm">Listening</span>
-												<span className="text-sm font-normal text-mti-gray-dim">56%</span>
+												<span className="text-sm font-normal text-mti-gray-dim">
+													Level {user.levels.listening} / Level {user.desiredLevels.listening}
+												</span>
 											</div>
 										</div>
 										<div className="pl-14">
-											<ProgressBar color="blue" label="" percentage={56} className="w-full h-2" />
+											<ProgressBar
+												color="blue"
+												label=""
+												percentage={Math.round((user.levels.listening * 100) / user.desiredLevels.listening)}
+												className="w-full h-2"
+											/>
 										</div>
 									</div>
 									<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -198,11 +219,18 @@ export default function Home() {
 											</div>
 											<div className="flex justify-between w-full">
 												<span className="font-extrabold text-sm">Speaking</span>
-												<span className="text-sm font-normal text-mti-gray-dim">26%</span>
+												<span className="text-sm font-normal text-mti-gray-dim">
+													Level {user.levels.speaking} / Level {user.desiredLevels.speaking}
+												</span>
 											</div>
 										</div>
 										<div className="pl-14">
-											<ProgressBar color="blue" label="" percentage={26} className="w-full h-2" />
+											<ProgressBar
+												color="blue"
+												label=""
+												percentage={Math.round((user.levels.speaking * 100) / user.desiredLevels.speaking)}
+												className="w-full h-2"
+											/>
 										</div>
 									</div>
 								</div>