From 101605ad882d3944046471a3b931e797a430c2e5 Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Sat, 24 Aug 2024 11:06:44 +0100
Subject: [PATCH] Updated Master Statistical with user grade count

---
 src/dashboards/MasterStatistical.tsx | 49 +++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/dashboards/MasterStatistical.tsx b/src/dashboards/MasterStatistical.tsx
index 71537fb4..3a4a2e57 100644
--- a/src/dashboards/MasterStatistical.tsx
+++ b/src/dashboards/MasterStatistical.tsx
@@ -199,6 +199,28 @@ const MasterStatistical = (props: Props) => {
   });
 
   const areAllSelected = selectedCorporates.length === corporates.length;
+
+  const getStudentsConsolidateScore = () => {
+    if (tableResults.length === 0) {
+      return { highest: null, lowest: null };
+    }
+
+    // Find the student with the highest and lowest score
+    return tableResults.reduce(
+      (acc, curr) => {
+        if (curr.correct > acc.highest.correct) {
+          acc.highest = curr;
+        }
+        if (curr.correct < acc.lowest.correct) {
+          acc.lowest = curr;
+        }
+        return acc;
+      },
+      { highest: tableResults[0], lowest: tableResults[0] }
+    );
+  };
+
+  const consolidateResults = getStudentsConsolidateScore();
   return (
     <>
       <div className="flex flex-wrap gap-2 items-center text-center">
@@ -239,7 +261,8 @@ const MasterStatistical = (props: Props) => {
           );
         })}
       </div>
-      <div className="flex gap-3 w-full">
+      <div className="flex flex-col gap-3 w-full">
+        <label className="font-normal text-base text-mti-gray-dim">Date</label>
         <ReactDatePicker
           dateFormat="dd/MM/yyyy"
           className="px-4 py-6 w-52 text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
@@ -294,13 +317,23 @@ const MasterStatistical = (props: Props) => {
           </tbody>
         </table>
       </div>
-      <div>
-        <IconCard
-          onClick={() => console.log("clicked")}
-          Icon={BsPersonFill}
-          label="Consolidate Highest Student"
-          color="purple"
-        />
+      <div className="flex flex-wrap gap-2 items-center text-center">
+        {consolidateResults.highest && (
+          <IconCard
+            onClick={() => {}}
+            Icon={BsPersonFill}
+            label={`Highest result: ${consolidateResults.highest.user}`}
+            color="purple"
+          />
+        )}
+        {consolidateResults.lowest && (
+          <IconCard
+            onClick={() => {}}
+            Icon={BsPersonFill}
+            label={`Lowest result: ${consolidateResults.lowest.user}`}
+            color="purple"
+          />
+        )}
       </div>
     </>
   );