feat(Real MatchNumbers + individual numbers): Real MatchNumbers + individual numbers

src/components/layout/dashboard/left_panel/LeftPanel.tsx

@@ -41,7 +41,12 @@ export default function LeftPanel(props) {
             maxHeight={"50vh"}
           />
           <Box mt={"2rem"}>
-            <Flex align={"center"} justifyContent="space-between" mb={"1rem"}>
+            <Flex
+              align={"center"}
+              justifyContent="space-between"
+              gap={"1rem"}
+              mb={"1rem"}
+            >
               <Text fontSize={"1.5rem"} fontWeight={"bold"}>
                 {user.firstName} {user.lastName}
               </Text>
@@ -78,10 +83,11 @@ export default function LeftPanel(props) {
           </LeftPanelButton>
 
           <LeftPanelButton
-                      leftIcon={<BsGraphUp />}
-                      onClickHandler={() => router.push("/graphique")}>
-                      Statistiques
-                    </LeftPanelButton>
+            leftIcon={<BsGraphUp />}
+            onClickHandler={() => router.push("/graphique")}
+          >
+            Statistiques
+          </LeftPanelButton>
 
           <LeftPanelButton
             variant={"outline"}

src/pages/graphique.tsx

@@ -5,18 +5,20 @@ import BarChart from "@/components/graph/BarChart";
 import PieChart from "@/components/graph/PieChart";
 import LineChart from "@/components/graph/LineChart";
 
-import {   Box,
-           Flex,
-           Grid,
-          GridItem,
-          Item,
-          Stat,
-          Text,
-            StatLabel,
-            StatNumber,
-            StatHelpText,
-            StatArrow,
-              StatGroup,
+import {
+  Box,
+  Flex,
+  Grid,
+  GridItem,
+  Item,
+  Stat,
+  Text,
+  StatLabel,
+  StatNumber,
+  StatHelpText,
+  StatArrow,
+  StatGroup,
+  Divider,
 } from "@chakra-ui/react";
 import LeftPanelButton from "@/components/layout/dashboard/left_panel/LeftPanelButton";
 import { AiFillMessage } from "react-icons/ai";
@@ -30,145 +32,189 @@ import { useRouter } from "next/router";
 import { websiteName } from "@/lib/constants";
 
 import { useRef, useEffect } from "react";
-import { useSession } from "next-auth/react";
+import { signOut, useSession } from "next-auth/react";
 import { useQuery } from "@tanstack/react-query";
 import type { Session } from "@/models/auth/Session";
-import { Role } from "@prisma/client";
+import { NotificationType, Role } from "@prisma/client";
+import { cp } from "fs";
 
 export default function Graphique() {
   const { data: session, status } = useSession({ required: true });
   const router = useRouter();
-    const {
-      isLoading,
-      isError,
-      data: userData,
-      error,
-    } = useQuery({
-      queryKey: ["user"],
-      enabled: status === "authenticated",
-      queryFn: async () => {
-        const { user } = session as unknown as Session;
+  const { data: matches } = useQuery({
+    queryKey: ["matches"],
+    queryFn: async () => {
+      return fetch(
+        `/api/notifications/?where={"type": "${NotificationType.NEW_MATCH}"}`
+      )
+        .then((res) => res.json())
+        .catch((err) => {
+          return err;
+        });
+    },
+  });
 
-        return fetch(`/api/users/${user.id}`)
-          .then((res) => res.json())
-          .catch((err) => {
-            return err;
-          });
-      },
-    });
+  const { data: userData } = useQuery({
+    queryKey: ["matchesUser"],
+    enabled: status === "authenticated",
+    queryFn: async () => {
+      const { user } = session as unknown as Session;
+      return fetch(`/api/users/${user.id}?include=Notification,Message`)
+        .then((res) => res.json())
+        .catch((err) => {
+          return err;
+        });
+    },
+  });
+
+  console.log(userData);
+
+  const { data: messages } = useQuery({
+    queryKey: ["messages"],
+    queryFn: async () => {
+      return fetch(`/api/messages/`)
+        .then((res) => res.json())
+        .catch((err) => {
+          return err;
+        });
+    },
+  });
 
   return (
     <>
-      <Grid templateColumns={'repeat(5, 1fr)'}
-                    templateRows={'repeat(2, 1fr)'}
-                    gap={5}
-                    minH={'100vh'}>
-            <GridItem area={'1 / 1 / 3 / 2'}
-                       width={"20vw"}
-                       height={"100%"}
-                      borderRadius={0}
-                      padding={"0px"}
-                      bg={"#faf9ff"}>
+      <Grid
+        templateColumns={"repeat(5, 1fr)"}
+        templateRows={"repeat(2, 1fr)"}
+        gap={5}
+        minH={"100vh"}
+      >
+        <GridItem
+          area={"1 / 1 / 3 / 2"}
+          width={"20vw"}
+          height={"100%"}
+          borderRadius={0}
+          padding={"0px"}
+          bg={"#faf9ff"}
+        >
+          <Flex direction={"column"} height={"100%"} margin={"10%"}>
+            <Flex
+              gap={2}
+              direction={"column"}
+              mt={"1vh"}
+              spacing={3.5}
+              alignContent={"bottom"}
+            >
+              <LeftPanelButton
+                leftIcon={<AiFillHome />}
+                onClickHandler={() => router.push("/dashboard")}
+              >
+                Accueil
+              </LeftPanelButton>
 
-                <Flex direction={"column"} height={"100%"} margin={"10%"} >
-                    <Flex
-                      gap={2}
-                      direction={"column"}
-                      mt={"1vh"}
-                      spacing={3.5}
-                      alignContent={"bottom"}>
+              <LeftPanelButton
+                leftIcon={<FaMapMarkedAlt />}
+                onClickHandler={() => router.push("/map")}
+              >
+                Carte
+              </LeftPanelButton>
 
-                      <LeftPanelButton
-                        leftIcon={<AiFillHome />}
-                        onClickHandler={() => router.push("/dashboard")}>
-                        Accueil
-                      </LeftPanelButton>
+              <LeftPanelButton
+                leftIcon={<BsFillPersonFill />}
+                onClickHandler={() => router.push("/profile")}
+              >
+                Profil
+              </LeftPanelButton>
 
-                      <LeftPanelButton
-                        leftIcon={<FaMapMarkedAlt />}
-                        onClickHandler={() => router.push("/map")}>
-                        Carte
-                      </LeftPanelButton>
+              <LeftPanelButton
+                variant={"outline"}
+                leftIcon={<BiLogOut />}
+                onClickHandler={() => signOut({ callbackUrl: "/" })}
+              >
+                Déconnexion
+              </LeftPanelButton>
+            </Flex>
+          </Flex>
+        </GridItem>
+        <GridItem area={"1 / 2 / 3 / 5"}>
+          <Box py={5} margin={"20px"} align={"center"}>
+            <Box py={5}>
+              <Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
+                Bénéfices
+              </Text>
+            </Box>
+            <Stat>
+              <StatLabel>Recette dus aux abonnements </StatLabel>
+              <StatNumber>0.00€</StatNumber>
+              <StatHelpText>
+                <StatArrow type={"increase"} />
+                0% Mai 2022 - Mai 2023
+              </StatHelpText>
+            </Stat>
 
-                      <LeftPanelButton
-                        leftIcon={<BsFillPersonFill />}
-                        onClickHandler={() => router.push("/profile")}>
-                        Profil
-                      </LeftPanelButton>
+            <Box py={10}>
+              <Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
+                Infos des échanges de touts les utilisateurs
+              </Text>
+            </Box>
+            <StatGroup>
+              <Stat>
+                <StatLabel>Messages envoyés</StatLabel>
+                <StatNumber>
+                  {Boolean(messages) ? messages.length : "-"}
+                </StatNumber>
+              </Stat>
+              <Stat>
+                <StatLabel> Matchs </StatLabel>
+                <StatNumber>
+                  {Boolean(matches) ? matches.length / 2 : "-"}
+                </StatNumber>
+              </Stat>
+            </StatGroup>
+            <Box py={10}>
+              <Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
+                {Boolean(userData)
+                  ? `Infos des échanges de ${userData?.firstName} ${userData?.lastName}`
+                  : "Infos des échanges de l'utilisateur"}
+              </Text>
+            </Box>
+            <StatGroup mb={5}>
+              <Stat>
+                <StatLabel>Messages envoyés</StatLabel>
+                <StatNumber>
+                  {Boolean(userData) ? userData.Message.length : "-"}
+                </StatNumber>
+              </Stat>
+              <Stat>
+                <StatLabel> Matchs </StatLabel>
+                <StatNumber>
+                  {Boolean(userData)
+                    ? userData.Notification.filter((notif) => {
+                        return notif.type === NotificationType.NEW_MATCH;
+                      }).length
+                    : "-"}
+                </StatNumber>
+              </Stat>
+            </StatGroup>
 
-                      <LeftPanelButton
-                        variant={"outline"}
-                        leftIcon={<BiLogOut />}
-                        onClickHandler={() => signOut({ callbackUrl: "/" })}>
-                        Déconnexion
-                      </LeftPanelButton>
-                    </Flex>
-                  </Flex>
-            </GridItem>
-            <GridItem area={'1 / 2 / 3 / 5'}>
-                <Box py={5}
-                    margin={"20px"}
-                    align={"center"}>
-                    <Box py={5}>
-                        <Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
-                             Bénéfices
-                        </Text>
-                    </Box>
-                    <Stat>
-                      <StatLabel>Recette dus aux abonnements </StatLabel>
-                      <StatNumber>0.00€</StatNumber>
-                      <StatHelpText>Mai 2022 - Mai 2023</StatHelpText>
-                    </Stat>
-
-                    <Box py={10}>
-                        <Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
-                             Infos des échanges
-                        </Text>
-                    </Box>
-                    <StatGroup>
-                       <Stat>
-                         <StatLabel>Messages envoyés</StatLabel>
-                         <StatNumber>345,670</StatNumber>
-                         <StatHelpText>
-                           <StatArrow type='increase' />
-                           23.36%
-                         </StatHelpText>
-                       </Stat>
-                       <Stat>
-                         <StatLabel> Matchs </StatLabel>
-                         <StatNumber>45</StatNumber>
-                         <StatHelpText>
-                           <StatArrow type='decrease' />
-                           9.05%
-                         </StatHelpText>
-                       </Stat>
-                    </StatGroup>
-
-                    <Box>
-                         <Text align={"center"} color={"#805AD5"} fontSize={"2rem"} >
-                             Date de création des comptes depuis l'ouverture.
-                         </Text>
-                         <BarChart />
-                    </Box>
-
-                </Box>
-            </GridItem>
-            <GridItem area={'1 / 5 / 3 / 6'}
-                      bg={"#805AD5"}
-                      borderRadius={20}>
-                <Box py={5}>
-                    <Text align={"center"} color={"#FAF9FF"} fontSize={"2rem"}>
-                        Proportion du genre des utilisateurs.
-                    </Text>
-                    <Box py={20}
-                        bg={"#FAF9FF"}
-                        borderRadius={20}
-                        margin={"5px"}>
-                        <PieChart />
-                    </Box>
-                </Box>
-            </GridItem>
-       </Grid>
+            <Box>
+              <Text align={"center"} color={"#805AD5"} fontSize={"2rem"}>
+                Date de création des comptes depuis l'ouverture.
+              </Text>
+              <BarChart />
+            </Box>
+          </Box>
+        </GridItem>
+        <GridItem area={"1 / 5 / 3 / 6"} bg={"#805AD5"} borderRadius={20}>
+          <Box py={5}>
+            <Text align={"center"} color={"#FAF9FF"} fontSize={"2rem"}>
+              Proportion du genre des utilisateurs.
+            </Text>
+            <Box py={20} bg={"#FAF9FF"} borderRadius={20} margin={"5px"}>
+              <PieChart />
+            </Box>
+          </Box>
+        </GridItem>
+      </Grid>
     </>
   );
 }