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>
@@ -79,7 +84,8 @@ export default function LeftPanel(props) {
 
           <LeftPanelButton
             leftIcon={<BsGraphUp />}
-                      onClickHandler={() => router.push("/graphique")}>
+            onClickHandler={() => router.push("/graphique")}
+          >
             Statistiques
           </LeftPanelButton>
 

src/pages/graphique.tsx

@@ -5,7 +5,8 @@ import BarChart from "@/components/graph/BarChart";
 import PieChart from "@/components/graph/PieChart";
 import LineChart from "@/components/graph/LineChart";
 
-import {   Box,
+import {
+  Box,
   Flex,
   Grid,
   GridItem,
@@ -17,6 +18,7 @@ import {   Box,
   StatHelpText,
   StatArrow,
   StatGroup,
+  Divider,
 } from "@chakra-ui/react";
 import LeftPanelButton from "@/components/layout/dashboard/left_panel/LeftPanelButton";
 import { AiFillMessage } from "react-icons/ai";
@@ -30,26 +32,47 @@ 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 {
+  const { data: matches } = useQuery({
-      isLoading,
+    queryKey: ["matches"],
-      isError,
+    queryFn: async () => {
-      data: userData,
+      return fetch(
-      error,
+        `/api/notifications/?where={"type": "${NotificationType.NEW_MATCH}"}`
-    } = useQuery({
+      )
-      queryKey: ["user"],
+        .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;
+        });
+    },
+  });
 
-        return fetch(`/api/users/${user.id}`)
+  console.log(userData);
+
+  const { data: messages } = useQuery({
+    queryKey: ["messages"],
+    queryFn: async () => {
+      return fetch(`/api/messages/`)
         .then((res) => res.json())
         .catch((err) => {
           return err;
@@ -59,56 +82,61 @@ export default function Graphique() {
 
   return (
     <>
-      <Grid templateColumns={'repeat(5, 1fr)'}
+      <Grid
-                    templateRows={'repeat(2, 1fr)'}
+        templateColumns={"repeat(5, 1fr)"}
+        templateRows={"repeat(2, 1fr)"}
         gap={5}
-                    minH={'100vh'}>
+        minH={"100vh"}
-            <GridItem area={'1 / 1 / 3 / 2'}
+      >
+        <GridItem
+          area={"1 / 1 / 3 / 2"}
           width={"20vw"}
           height={"100%"}
           borderRadius={0}
           padding={"0px"}
-                      bg={"#faf9ff"}>
+          bg={"#faf9ff"}
-
+        >
-                <Flex direction={"column"} height={"100%"} margin={"10%"} >
+          <Flex direction={"column"} height={"100%"} margin={"10%"}>
             <Flex
               gap={2}
               direction={"column"}
               mt={"1vh"}
               spacing={3.5}
-                      alignContent={"bottom"}>
+              alignContent={"bottom"}
-
+            >
               <LeftPanelButton
                 leftIcon={<AiFillHome />}
-                        onClickHandler={() => router.push("/dashboard")}>
+                onClickHandler={() => router.push("/dashboard")}
+              >
                 Accueil
               </LeftPanelButton>
 
               <LeftPanelButton
                 leftIcon={<FaMapMarkedAlt />}
-                        onClickHandler={() => router.push("/map")}>
+                onClickHandler={() => router.push("/map")}
+              >
                 Carte
               </LeftPanelButton>
 
               <LeftPanelButton
                 leftIcon={<BsFillPersonFill />}
-                        onClickHandler={() => router.push("/profile")}>
+                onClickHandler={() => router.push("/profile")}
+              >
                 Profil
               </LeftPanelButton>
 
               <LeftPanelButton
                 variant={"outline"}
                 leftIcon={<BiLogOut />}
-                        onClickHandler={() => signOut({ callbackUrl: "/" })}>
+                onClickHandler={() => signOut({ callbackUrl: "/" })}
+              >
                 Déconnexion
               </LeftPanelButton>
             </Flex>
           </Flex>
         </GridItem>
-            <GridItem area={'1 / 2 / 3 / 5'}>
+        <GridItem area={"1 / 2 / 3 / 5"}>
-                <Box py={5}
+          <Box py={5} margin={"20px"} align={"center"}>
-                    margin={"20px"}
-                    align={"center"}>
             <Box py={5}>
               <Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
                 Bénéfices
@@ -117,53 +145,71 @@ export default function Graphique() {
             <Stat>
               <StatLabel>Recette dus aux abonnements </StatLabel>
               <StatNumber>0.00€</StatNumber>
-                      <StatHelpText>Mai 2022 - Mai 2023</StatHelpText>
+              <StatHelpText>
+                <StatArrow type={"increase"} />
+                0% Mai 2022 - Mai 2023
+              </StatHelpText>
             </Stat>
 
             <Box py={10}>
               <Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
-                             Infos des échanges
+                Infos des échanges de touts les utilisateurs
               </Text>
             </Box>
             <StatGroup>
               <Stat>
                 <StatLabel>Messages envoyés</StatLabel>
-                         <StatNumber>345,670</StatNumber>
+                <StatNumber>
-                         <StatHelpText>
+                  {Boolean(messages) ? messages.length : "-"}
-                           <StatArrow type='increase' />
+                </StatNumber>
-                           23.36%
-                         </StatHelpText>
               </Stat>
               <Stat>
                 <StatLabel> Matchs </StatLabel>
-                         <StatNumber>45</StatNumber>
+                <StatNumber>
-                         <StatHelpText>
+                  {Boolean(matches) ? matches.length / 2 : "-"}
-                           <StatArrow type='decrease' />
+                </StatNumber>
-                           9.05%
+              </Stat>
-                         </StatHelpText>
+            </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>
 
             <Box>
-                         <Text align={"center"} color={"#805AD5"} fontSize={"2rem"} >
+              <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'}
+        <GridItem area={"1 / 5 / 3 / 6"} bg={"#805AD5"} borderRadius={20}>
-                      bg={"#805AD5"}
-                      borderRadius={20}>
           <Box py={5}>
             <Text align={"center"} color={"#FAF9FF"} fontSize={"2rem"}>
               Proportion du genre des utilisateurs.
             </Text>
-                    <Box py={20}
+            <Box py={20} bg={"#FAF9FF"} borderRadius={20} margin={"5px"}>
-                        bg={"#FAF9FF"}
-                        borderRadius={20}
-                        margin={"5px"}>
               <PieChart />
             </Box>
           </Box>