Updated the design of the feedback

src/components/Solutions/InteractiveSpeaking.tsx

@@ -137,13 +137,7 @@ export default function InteractiveSpeaking({
 									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
 
 									return (
-										<div
+										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2")} key={key}>
-											className={clsx(
-												"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2",
-												typeof taskResponse !== "number" && "tooltip",
-											)}
-											data-tip={typeof taskResponse !== "number" ? taskResponse.comment : ""}
-											key={key}>
 											{key}: Level {grade}
 										</div>
 									);
@@ -197,6 +191,17 @@ export default function InteractiveSpeaking({
 											}>
 											Recommended Answer (Prompt 3)
 										</Tab>
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											Global Overview
+										</Tab>
 									</Tab.List>
 									<Tab.Panels>
 										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
@@ -217,6 +222,23 @@ export default function InteractiveSpeaking({
 												{userSolutions[0].evaluation!.perfect_answer_3!.answer.replaceAll(/\s{2,}/g, "\n\n")}
 											</span>
 										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<div className="flex flex-col gap-4">
+												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+													const taskResponse = userSolutions[0].evaluation!.task_response[key];
+													const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+													return (
+														<div key={key} className="flex flex-col gap-2">
+															<span className={"font-semibold"}>
+																{key}: Level {grade}
+															</span>
+															{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
+														</div>
+													);
+												})}
+											</div>
+										</Tab.Panel>
 									</Tab.Panels>
 								</Tab.Group>
 							) : (

src/components/Solutions/Speaking.tsx

@@ -131,13 +131,7 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
 
 									return (
-										<div
+										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2")} key={key}>
-											className={clsx(
-												"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2",
-												typeof taskResponse !== "number" && "tooltip",
-											)}
-											data-tip={typeof taskResponse !== "number" ? taskResponse.comment : ""}
-											key={key}>
 											{key}: Level {grade}
 										</div>
 									);
@@ -169,6 +163,17 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 											}>
 											Recommended Answer
 										</Tab>
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											Global Overview
+										</Tab>
 									</Tab.List>
 									<Tab.Panels>
 										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
@@ -182,6 +187,23 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 													userSolutions[0].evaluation!.perfect_answer_1.replaceAll(/\s{2,}/g, "\n\n")}
 											</span>
 										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<div className="flex flex-col gap-4">
+												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+													const taskResponse = userSolutions[0].evaluation!.task_response[key];
+													const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+													return (
+														<div key={key} className="flex flex-col gap-2">
+															<span className={"font-semibold"}>
+																{key}: Level {grade}
+															</span>
+															{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
+														</div>
+													);
+												})}
+											</div>
+										</Tab.Panel>
 									</Tab.Panels>
 								</Tab.Group>
 							) : (

src/components/Solutions/Writing.tsx

@@ -128,13 +128,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
 
 									return (
-										<div
+										<div className={clsx("bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2")} key={key}>
-											className={clsx(
-												"bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2",
-												typeof taskResponse !== "number" && "tooltip",
-											)}
-											data-tip={typeof taskResponse !== "number" ? taskResponse.comment : ""}
-											key={key}>
 											{key}: Level {grade}
 										</div>
 									);
@@ -165,6 +159,17 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 											}>
 											Recommended Answer
 										</Tab>
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
+												)
+											}>
+											Global Overview
+										</Tab>
 										{aiEval && user?.type !== "student" && (
 											<Tab
 												className={({selected}) =>
@@ -188,6 +193,23 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 												{userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n").replaceAll("\\n", "\n")}
 											</span>
 										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<div className="flex flex-col gap-4">
+												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+													const taskResponse = userSolutions[0].evaluation!.task_response[key];
+													const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+													return (
+														<div key={key} className="flex flex-col gap-2">
+															<span className={"font-semibold"}>
+																{key}: Level {grade}
+															</span>
+															{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
+														</div>
+													);
+												})}
+											</div>
+										</Tab.Panel>
 										{aiEval && user?.type !== "student" && (
 											<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 												<AIDetection {...aiEval} />