From ccd193788e342ae9f2bf5f7ba669a47ffa9b88b8 Mon Sep 17 00:00:00 2001
From: Kaio Magalhaes <me@kaiomagalhaes.com>
Date: Tue, 10 Dec 2024 15:57:51 -0300
Subject: [PATCH] add more reports

---
 src/app/users/reports/page.tsx                | 40 ++++++++++++-------
 .../controllers/useReportsController.ts       | 26 ++++++++++++
 2 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/src/app/users/reports/page.tsx b/src/app/users/reports/page.tsx
index 71c16f6..128664f 100644
--- a/src/app/users/reports/page.tsx
+++ b/src/app/users/reports/page.tsx
@@ -8,6 +8,7 @@ import SkillsSearch from "./presenters/components/SkillsSearch";
 import UsersTable from "./presenters/components/UsersTable";
 import useReportsController from "./presenters/controllers/useReportsController";
 import VerticalBarChart from "@/components/Charts/VerticalBarChart";
+import PieChart from "@/components/Charts/PieChart";
 
 const UsersDashboard = () => {
   const {
@@ -24,6 +25,7 @@ const UsersDashboard = () => {
     skillsAnalytics,
     professionAreas,
     toggleProfessionArea,
+    topSkillsPieChart,
   } = useReportsController();
 
   if (isLoading) {
@@ -67,20 +69,30 @@ const UsersDashboard = () => {
             />
           </Stack>
         </Grid>
-        <Grid xs={12} md={12} style={{ marginTop: "32px" }}>
-          <VerticalBarChart
-            title="Skills Analytics"
-            verticalStacked={true}
-            horizontalStacked={true}
-            labelColor="white"
-            chart={skillsAnalytics}
-            valueType="number"
-            formatter={(value: number) => {
-              if (value == 0) return "";
-
-              return value.toFixed(0);
-            }}
-          />
+        <Grid container spacing={3} mt={2}>
+          <Grid item xs={12} md={8}>
+            <VerticalBarChart
+              title="Skills Analytics"
+              verticalStacked={true}
+              horizontalStacked={true}
+              labelColor="white"
+              chart={skillsAnalytics}
+              valueType="number"
+              formatter={(value: number) => {
+                if (value == 0) return "";
+                return value.toFixed(0);
+              }}
+            />
+          </Grid>
+          <Grid item xs={12} md={4}>
+            {topSkillsPieChart && (
+              <PieChart
+                title="Top 5 Skills Distribution"
+                chart={topSkillsPieChart}
+                valueType="number"
+              />
+            )}
+          </Grid>
         </Grid>
         <Grid container justifyContent={"space-around"} display="flex" mt={5}>
           <Grid item xs={12} md={12} pb={12}>
diff --git a/src/app/users/reports/presenters/controllers/useReportsController.ts b/src/app/users/reports/presenters/controllers/useReportsController.ts
index 0526000..eb58ce8 100644
--- a/src/app/users/reports/presenters/controllers/useReportsController.ts
+++ b/src/app/users/reports/presenters/controllers/useReportsController.ts
@@ -135,6 +135,31 @@ const useReportsController = () => {
     });
   };
 
+  const buildPieChartData = () => {
+    if (!skillsAnalytics) return null;
+
+    // Sum up all levels for each skill
+    const skillTotals = skillsAnalytics
+      .filter((skill) =>
+        professionAreas.includes(skill.professional_area.toLowerCase())
+      )
+      .map((skill) => ({
+        name: skill.name,
+        total: skill.level.reduce((sum, level) => sum + level.count, 0),
+      }))
+      .sort((a, b) => b.total - a.total) // Sort by total descending
+      .slice(0, 5); // Get top 5
+
+    return {
+      labels: skillTotals.map((skill) => skill.name),
+      datasets: {
+        label: "Top Skills",
+        data: skillTotals.map((skill) => skill.total),
+        backgroundColors: ["info", "primary", "dark", "secondary", "warning"],
+      },
+    };
+  };
+
   return {
     users,
     isLoading,
@@ -149,6 +174,7 @@ const useReportsController = () => {
     skillsAnalytics: buildSkillsAnalytics(),
     professionAreas,
     toggleProfessionArea,
+    topSkillsPieChart: buildPieChartData(),
   };
 };