mirror of
https://github.com/LucasVbr/meeting-app.git
synced 2026-05-13 17:21:53 +00:00
Création de la pages graphiques et des liens pour y acceder
This commit is contained in:
burgu
@@ -24,6 +24,8 @@ export default function Navbar({ variant = "fixed" }: Props) {
|
||||
<Link href={"/dashboard"}>Tableau de bord</Link>
|
||||
<Link href={"/profile"}>Profil</Link>
|
||||
<Link href={"/map"}>Carte</Link>
|
||||
<Link href={"/graphique"}>Statistiques</Link>
|
||||
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ import { useRouter } from "next/router";
|
||||
|
||||
import { AiFillMessage } from "react-icons/ai";
|
||||
import { BsFillPersonFill } from "react-icons/bs";
|
||||
import { BsGraphUp } from "react-icons/bs";
|
||||
import { BiLogOut } from "react-icons/bi";
|
||||
import { FaMapMarkedAlt } from "react-icons/fa";
|
||||
|
||||
@@ -71,6 +72,13 @@ export default function LeftPanel(props) {
|
||||
onClickHandler={() => router.push("/profile")}>
|
||||
Profil
|
||||
</LeftPanelButton>
|
||||
|
||||
<LeftPanelButton
|
||||
leftIcon={<BsGraphUp />}
|
||||
onClickHandler={() => router.push("/graphique")}>
|
||||
Statistiques
|
||||
</LeftPanelButton>
|
||||
|
||||
<LeftPanelButton
|
||||
variant={"outline"}
|
||||
leftIcon={<BiLogOut />}
|
||||
|
||||
+152
-14
@@ -5,32 +5,170 @@ import BarChart from "@/components/graph/BarChart";
|
||||
import PieChart from "@/components/graph/PieChart";
|
||||
import LineChart from "@/components/graph/LineChart";
|
||||
|
||||
import { Box } from "@chakra-ui/react";
|
||||
import { Box,
|
||||
Flex,
|
||||
Grid,
|
||||
GridItem,
|
||||
Item,
|
||||
Stat,
|
||||
Text,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
StatHelpText,
|
||||
StatArrow,
|
||||
StatGroup,
|
||||
} from "@chakra-ui/react";
|
||||
import LeftPanelButton from "@/components/layout/dashboard/left_panel/LeftPanelButton";
|
||||
import { AiFillMessage } from "react-icons/ai";
|
||||
import { BsFillPersonFill } from "react-icons/bs";
|
||||
import { AiFillHome } from "react-icons/ai";
|
||||
import { BiLogOut } from "react-icons/bi";
|
||||
import { FaMapMarkedAlt } from "react-icons/fa";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { websiteName } from "@/lib/constants";
|
||||
|
||||
import { useRef, useEffect } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { Session } from "@/models/auth/Session";
|
||||
import { Role } from "@prisma/client";
|
||||
|
||||
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;
|
||||
|
||||
return fetch(`/api/users/${user.id}`)
|
||||
.then((res) => res.json())
|
||||
.catch((err) => {
|
||||
return err;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{websiteName}</title>
|
||||
</Head>
|
||||
{user.role === Role.ADMIN ? (
|
||||
<Box>
|
||||
<PieChart />
|
||||
<BarChart />
|
||||
<LineChart />
|
||||
<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>
|
||||
|
||||
<LeftPanelButton
|
||||
leftIcon={<FaMapMarkedAlt />}
|
||||
onClickHandler={() => router.push("/map")}>
|
||||
Carte
|
||||
</LeftPanelButton>
|
||||
|
||||
<LeftPanelButton
|
||||
leftIcon={<BsFillPersonFill />}
|
||||
onClickHandler={() => router.push("/profile")}>
|
||||
Profil
|
||||
</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>
|
||||
) : (
|
||||
// pour récupérer les notifs d'un user
|
||||
//fetch(`/api/users/${user.id}?include=Notification`)
|
||||
<></>
|
||||
)}
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+2
-1
@@ -37,7 +37,7 @@ export default function Map() {
|
||||
enabled: status === "authenticated",
|
||||
queryFn: async () => {
|
||||
const { user } = session as unknown as Session;
|
||||
|
||||
console.log(loggedUser.location.length);
|
||||
return fetch(`/api/users/${user.id}`)
|
||||
.then((res) => {
|
||||
return res.json();
|
||||
@@ -56,6 +56,7 @@ export default function Map() {
|
||||
} = useQuery({
|
||||
queryKey: ["listBars"],
|
||||
refetchOnWindowFocus: false,
|
||||
|
||||
enabled: Boolean(loggedUser) && loggedUser.location.length > 0,
|
||||
queryFn: async () => {
|
||||
///Utiliser api de noratim
|
||||
|
||||
@@ -1073,10 +1073,10 @@
|
||||
dependencies:
|
||||
glob "7.1.7"
|
||||
|
||||
"@next/swc-darwin-arm64@13.2.3":
|
||||
"@next/swc-win32-x64-msvc@13.2.3":
|
||||
version "13.2.3"
|
||||
resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.2.3.tgz"
|
||||
integrity sha512-TXOubiFdLpMfMtaRu1K5d1I9ipKbW5iS2BNbu8zJhoqrhk3Kp7aRKTxqFfWrbliAHhWVE/3fQZUYZOWSXVQi1w==
|
||||
resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.2.3.tgz"
|
||||
integrity sha512-aLG2MaFs4y7IwaMTosz2r4mVbqRyCnMoFqOcmfTi7/mAS+G4IMH0vJp4oLdbshqiVoiVuKrAfqtXj55/m7Qu1Q==
|
||||
|
||||
"@nodelib/fs.scandir@2.1.5":
|
||||
version "2.1.5"
|
||||
|
||||
Reference in New Issue
Block a user