From 9ef04b822afc476df1e2ded5a82fc6f35eccc1ef Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Sat, 27 Jul 2024 00:04:52 +0100
Subject: [PATCH] Updated the design of the feedback

---
 .../Solutions/InteractiveSpeaking.tsx         | 36 +++++++++++++----
 src/components/Solutions/Speaking.tsx         | 36 +++++++++++++----
 src/components/Solutions/Writing.tsx          | 40 ++++++++++++++-----
 3 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/src/components/Solutions/InteractiveSpeaking.tsx b/src/components/Solutions/InteractiveSpeaking.tsx
index 6c3c6290..f5c657d4 100644
--- a/src/components/Solutions/InteractiveSpeaking.tsx
+++ b/src/components/Solutions/InteractiveSpeaking.tsx
@@ -137,13 +137,7 @@ export default function InteractiveSpeaking({
 									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
 
 									return (
-										<div
-											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}>
+										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2")} 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>
 							) : (
diff --git a/src/components/Solutions/Speaking.tsx b/src/components/Solutions/Speaking.tsx
index 7ec7fc08..6b1fef98 100644
--- a/src/components/Solutions/Speaking.tsx
+++ b/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
-											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}>
+										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2")} 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>
 							) : (
diff --git a/src/components/Solutions/Writing.tsx b/src/components/Solutions/Writing.tsx
index b55387e9..e24aab44 100644
--- a/src/components/Solutions/Writing.tsx
+++ b/src/components/Solutions/Writing.tsx
@@ -14,7 +14,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [showDiff, setShowDiff] = useState(false);
 
-	const { user } = useUser();
+	const {user} = useUser();
 
 	const aiEval = userSolutions && userSolutions.length > 0 ? userSolutions[0].evaluation?.ai_detection : undefined;
 
@@ -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
-											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}>
+										<div className={clsx("bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2")} key={key}>
 											{key}: Level {grade}
 										</div>
 									);
@@ -165,9 +159,20 @@ 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 }) =>
+												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",
@@ -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} />