mirror of
https://github.com/LucasVbr/meeting-app.git
synced 2026-05-13 17:21:53 +00:00
feat(Real MatchNumbers + individual numbers): Real MatchNumbers + individual numbers
This commit is contained in:
Laurian-Dufrechou
@@ -41,7 +41,12 @@ export default function LeftPanel(props) {
|
|||||||
maxHeight={"50vh"}
|
maxHeight={"50vh"}
|
||||||
/>
|
/>
|
||||||
<Box mt={"2rem"}>
|
<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"}>
|
<Text fontSize={"1.5rem"} fontWeight={"bold"}>
|
||||||
{user.firstName} {user.lastName}
|
{user.firstName} {user.lastName}
|
||||||
</Text>
|
</Text>
|
||||||
@@ -78,10 +83,11 @@ export default function LeftPanel(props) {
|
|||||||
</LeftPanelButton>
|
</LeftPanelButton>
|
||||||
|
|
||||||
<LeftPanelButton
|
<LeftPanelButton
|
||||||
leftIcon={<BsGraphUp />}
|
leftIcon={<BsGraphUp />}
|
||||||
onClickHandler={() => router.push("/graphique")}>
|
onClickHandler={() => router.push("/graphique")}
|
||||||
Statistiques
|
>
|
||||||
</LeftPanelButton>
|
Statistiques
|
||||||
|
</LeftPanelButton>
|
||||||
|
|
||||||
<LeftPanelButton
|
<LeftPanelButton
|
||||||
variant={"outline"}
|
variant={"outline"}
|
||||||
|
|||||||
+182
-136
@@ -5,18 +5,20 @@ import BarChart from "@/components/graph/BarChart";
|
|||||||
import PieChart from "@/components/graph/PieChart";
|
import PieChart from "@/components/graph/PieChart";
|
||||||
import LineChart from "@/components/graph/LineChart";
|
import LineChart from "@/components/graph/LineChart";
|
||||||
|
|
||||||
import { Box,
|
import {
|
||||||
Flex,
|
Box,
|
||||||
Grid,
|
Flex,
|
||||||
GridItem,
|
Grid,
|
||||||
Item,
|
GridItem,
|
||||||
Stat,
|
Item,
|
||||||
Text,
|
Stat,
|
||||||
StatLabel,
|
Text,
|
||||||
StatNumber,
|
StatLabel,
|
||||||
StatHelpText,
|
StatNumber,
|
||||||
StatArrow,
|
StatHelpText,
|
||||||
StatGroup,
|
StatArrow,
|
||||||
|
StatGroup,
|
||||||
|
Divider,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
import LeftPanelButton from "@/components/layout/dashboard/left_panel/LeftPanelButton";
|
import LeftPanelButton from "@/components/layout/dashboard/left_panel/LeftPanelButton";
|
||||||
import { AiFillMessage } from "react-icons/ai";
|
import { AiFillMessage } from "react-icons/ai";
|
||||||
@@ -30,145 +32,189 @@ import { useRouter } from "next/router";
|
|||||||
import { websiteName } from "@/lib/constants";
|
import { websiteName } from "@/lib/constants";
|
||||||
|
|
||||||
import { useRef, useEffect } from "react";
|
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 { useQuery } from "@tanstack/react-query";
|
||||||
import type { Session } from "@/models/auth/Session";
|
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() {
|
export default function Graphique() {
|
||||||
const { data: session, status } = useSession({ required: true });
|
const { data: session, status } = useSession({ required: true });
|
||||||
const router = useRouter();
|
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())
|
||||||
enabled: status === "authenticated",
|
.catch((err) => {
|
||||||
queryFn: async () => {
|
return err;
|
||||||
const { user } = session as unknown as Session;
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
return fetch(`/api/users/${user.id}`)
|
const { data: userData } = useQuery({
|
||||||
.then((res) => res.json())
|
queryKey: ["matchesUser"],
|
||||||
.catch((err) => {
|
enabled: status === "authenticated",
|
||||||
return err;
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Grid templateColumns={'repeat(5, 1fr)'}
|
<Grid
|
||||||
templateRows={'repeat(2, 1fr)'}
|
templateColumns={"repeat(5, 1fr)"}
|
||||||
gap={5}
|
templateRows={"repeat(2, 1fr)"}
|
||||||
minH={'100vh'}>
|
gap={5}
|
||||||
<GridItem area={'1 / 1 / 3 / 2'}
|
minH={"100vh"}
|
||||||
width={"20vw"}
|
>
|
||||||
height={"100%"}
|
<GridItem
|
||||||
borderRadius={0}
|
area={"1 / 1 / 3 / 2"}
|
||||||
padding={"0px"}
|
width={"20vw"}
|
||||||
bg={"#faf9ff"}>
|
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%"} >
|
<LeftPanelButton
|
||||||
<Flex
|
leftIcon={<FaMapMarkedAlt />}
|
||||||
gap={2}
|
onClickHandler={() => router.push("/map")}
|
||||||
direction={"column"}
|
>
|
||||||
mt={"1vh"}
|
Carte
|
||||||
spacing={3.5}
|
</LeftPanelButton>
|
||||||
alignContent={"bottom"}>
|
|
||||||
|
|
||||||
<LeftPanelButton
|
<LeftPanelButton
|
||||||
leftIcon={<AiFillHome />}
|
leftIcon={<BsFillPersonFill />}
|
||||||
onClickHandler={() => router.push("/dashboard")}>
|
onClickHandler={() => router.push("/profile")}
|
||||||
Accueil
|
>
|
||||||
</LeftPanelButton>
|
Profil
|
||||||
|
</LeftPanelButton>
|
||||||
|
|
||||||
<LeftPanelButton
|
<LeftPanelButton
|
||||||
leftIcon={<FaMapMarkedAlt />}
|
variant={"outline"}
|
||||||
onClickHandler={() => router.push("/map")}>
|
leftIcon={<BiLogOut />}
|
||||||
Carte
|
onClickHandler={() => signOut({ callbackUrl: "/" })}
|
||||||
</LeftPanelButton>
|
>
|
||||||
|
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
|
<Box py={10}>
|
||||||
leftIcon={<BsFillPersonFill />}
|
<Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
|
||||||
onClickHandler={() => router.push("/profile")}>
|
Infos des échanges de touts les utilisateurs
|
||||||
Profil
|
</Text>
|
||||||
</LeftPanelButton>
|
</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
|
<Box>
|
||||||
variant={"outline"}
|
<Text align={"center"} color={"#805AD5"} fontSize={"2rem"}>
|
||||||
leftIcon={<BiLogOut />}
|
Date de création des comptes depuis l'ouverture.
|
||||||
onClickHandler={() => signOut({ callbackUrl: "/" })}>
|
</Text>
|
||||||
Déconnexion
|
<BarChart />
|
||||||
</LeftPanelButton>
|
</Box>
|
||||||
</Flex>
|
</Box>
|
||||||
</Flex>
|
</GridItem>
|
||||||
</GridItem>
|
<GridItem area={"1 / 5 / 3 / 6"} bg={"#805AD5"} borderRadius={20}>
|
||||||
<GridItem area={'1 / 2 / 3 / 5'}>
|
<Box py={5}>
|
||||||
<Box py={5}
|
<Text align={"center"} color={"#FAF9FF"} fontSize={"2rem"}>
|
||||||
margin={"20px"}
|
Proportion du genre des utilisateurs.
|
||||||
align={"center"}>
|
</Text>
|
||||||
<Box py={5}>
|
<Box py={20} bg={"#FAF9FF"} borderRadius={20} margin={"5px"}>
|
||||||
<Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
|
<PieChart />
|
||||||
Bénéfices
|
</Box>
|
||||||
</Text>
|
</Box>
|
||||||
</Box>
|
</GridItem>
|
||||||
<Stat>
|
</Grid>
|
||||||
<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>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user