Updated Master Statistical with user grade count

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>
     </>
   );