статистика квиза

src/api/quizStatistic.ts

@@ -0,0 +1,28 @@
+import { makeRequest } from "@frontend/kitui";
+
+export type QuizStatisticResponse = {
+    Registrations: number;
+    Quizes: number;
+    Results: number
+};
+
+type TRequest = {
+  to: number;
+  from: number;
+};
+
+export const getStatistic = async (
+  to: number,
+  from: number,
+): Promise<QuizStatisticResponse> => {
+  try {
+    const generalResponse =  await makeRequest<TRequest, QuizStatisticResponse>({
+        url: `${process.env.REACT_APP_DOMAIN}/squiz/statistic`,
+        body: { to, from }
+      })
+    return generalResponse;
+  } catch (nativeError) {
+
+    return { Registrations: 0, Quizes: 0, Results: 0 };
+  }
+};

src/index.tsx

@@ -24,9 +24,11 @@ import { PromocodeManagement } from "@root/pages/dashboard/Content/PromocodeMana
 import { SettingRoles } from "@pages/Setting/SettingRoles";
 import Support from "@pages/dashboard/Content/Support/Support";
 import ChatImageNewWindow from "@pages/dashboard/Content/Support/ChatImageNewWindow";
+import QuizStatistic from "@pages/dashboard/Content/QuizStatistic";
 
 import theme from "./theme";
 import "./index.css";
+import { makeRequest } from "@frontend/kitui";
 
 const componentsArray = [
   ["/users", <Users />],
@@ -104,6 +106,14 @@ root.render(
                   </PrivateRoute>
                 }
               />
+              <Route
+                path="/quizStatistic"
+                element={
+                  <PrivateRoute>
+                    <QuizStatistic />
+                  </PrivateRoute>
+                }
+              />
               {componentsArray.map((element) => (
                 <Route
                   key={element[0]}

src/pages/dashboard/Content/QuizStatistic/index.tsx

@@ -0,0 +1,169 @@
+import { Table, TableBody, TableCell, TableHead, TableRow, useTheme, Typography, Box, TextField, Button } from '@mui/material';
+import { useState } from 'react';
+import moment from "moment";
+import type { Moment } from "moment";
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { useQuizStatistic } from '@root/utils/hooks/useQuizStatistic';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+
+export default () => {
+    const theme = useTheme()
+
+    const [isOpen, setOpen] = useState<boolean>(false);
+    const [isOpenEnd, setOpenEnd] = useState<boolean>(false);
+
+    const [from, setFrom] = useState<Moment | null>(null);
+    const [to, setTo] = useState<Moment | null>(moment(Date.now()));
+
+
+    const { Registrations, Quizes, Results } = useQuizStatistic({
+        from,
+        to,
+    });
+
+    const resetTime = () => {
+        setFrom(moment(0));
+        setTo(moment(Date.now()));
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const onAdornmentClick = () => {
+        setOpen((old) => !old);
+        if (isOpenEnd) {
+            handleCloseEnd();
+        }
+    };
+
+    const handleCloseEnd = () => {
+        setOpenEnd(false);
+    };
+
+    const handleOpenEnd = () => {
+        setOpenEnd(true);
+    };
+
+    const onAdornmentClickEnd = () => {
+        setOpenEnd((old) => !old);
+        if (isOpen) {
+            handleClose();
+        }
+    };
+
+
+    return <>
+        <LocalizationProvider dateAdapter={AdapterMoment}>
+            <Box>
+                <Typography
+                    sx={{
+                        fontSize: "16px",
+                        marginBottom: "5px",
+                        fontWeight: 500,
+                        color: "4D4D4D",
+                    }}
+                >
+                    Дата начала
+                </Typography>
+                <DatePicker
+                    inputFormat="DD/MM/YYYY"
+                    value={from}
+                    onChange={(date) => date && setFrom(date)}
+                    renderInput={(params) => (
+                        <TextField
+                            {...params}
+                            sx={{ background: "#1F2126", borderRadius: "5px" }}
+                        />
+                    )}
+                    InputProps={{
+                        sx: {
+                            height: "40px",
+                            color: theme.palette.secondary.main,
+                            border: "1px solid",
+                            borderColor: theme.palette.secondary.main,
+                            "& .MuiSvgIcon-root": {
+                                color: theme.palette.secondary.main,
+                            },
+                        },
+                    }}
+                />
+            </Box>
+            <Box>
+                <Typography
+                    sx={{
+                        fontSize: "16px",
+                        marginBottom: "5px",
+                        fontWeight: 500,
+                        color: "4D4D4D",
+                    }}
+                >
+                    Дата окончания
+                </Typography>
+                <DatePicker
+                    inputFormat="DD/MM/YYYY"
+                    value={to}
+                    onChange={(date) => date && setTo(date)}
+                    renderInput={(params) => (
+                        <TextField
+                            {...params}
+                            sx={{ background: "#1F2126", borderRadius: "5px" }}
+                        />
+                    )}
+                    InputProps={{
+                        sx: {
+                            height: "40px",
+                            color: theme.palette.secondary.main,
+                            border: "1px solid",
+                            borderColor: theme.palette.secondary.main,
+                            "& .MuiSvgIcon-root": {
+                                color: theme.palette.secondary.main,
+                            },
+                        },
+                    }}
+                />
+            </Box>
+            <Button 
+            sx={{
+                m: '10px 0'
+            }}
+            onClick={resetTime}
+            >
+                Сбросить даты
+            </Button>
+
+                <Table
+                    sx={{
+                        width: "80%",
+                        border: "2px solid",
+                        borderColor: theme.palette.secondary.main,
+                        bgcolor: theme.palette.content.main,
+                        color: "white"
+                    }}
+                >
+                    <TableHead>
+                        <TableRow
+                            sx={{
+                                borderBottom: "2px solid",
+                                borderColor: theme.palette.grayLight.main,
+                                height: "100px",
+                            }}
+                        >
+                            <TableCell sx={{color: "inherit"}} align="center">Регистраций</TableCell>
+                            <TableCell sx={{color: "inherit"}} align="center">Quiz</TableCell>
+                            <TableCell sx={{color: "inherit"}} align="center">Результаты</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                                <TableCell sx={{color: "inherit"}} align="center">{Registrations}</TableCell>
+                                <TableCell sx={{color: "inherit"}} align="center">{Quizes}</TableCell>
+                                <TableCell sx={{color: "inherit"}} align="center">{Results}</TableCell>
+                    </TableBody>
+                </Table>
+        </LocalizationProvider>
+    </>
+}

src/pages/dashboard/Content/Users.tsx

@@ -131,7 +131,7 @@ const Users: React.FC = () => {
   );
   return (
     <React.Fragment>
-      <Button
+      {/* <Button
         variant="text"
         onClick={() => navigate("/modalAdmin")}
         sx={{
@@ -151,7 +151,7 @@ const Users: React.FC = () => {
         }}
       >
         ИНФОРМАЦИЯ О ПРОЕКТЕ
-      </Button>
+      </Button> */}
 
       <Accordion
         sx={{

src/pages/dashboard/Menu/index.tsx

@@ -100,6 +100,7 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open"
 }));
 
 const links: { path: string; element: JSX.Element; title: string; className: string }[] = [
+  { path: "/quizStatistic", element: <>📝</>, title: "Статистика Quiz", className: "menu" },
   { path: "/users", element: <PersonOutlineOutlinedIcon />, title: "Информация о проекте", className: "menu" },
   { path: "/entities", element: <SettingsOutlinedIcon />, title: "Юридические лица", className: "menu" },
   { path: "/tariffs", element: <BathtubOutlinedIcon />, title: "Тарифы", className: "menu" },

src/utils/hooks/useQuizStatistic.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import {
+    QuizStatisticResponse,
+    getStatistic
+} from "@root/api/quizStatistic";
+
+import type { Moment } from "moment";
+
+interface useQuizStatisticProps {
+  to: Moment | null;
+  from: Moment | null;
+}
+
+export function useQuizStatistic({ to, from }: useQuizStatisticProps) {
+  const formatTo = to?.unix();
+  const formatFrom = from?.unix();
+
+  const [data, setData] = useState<QuizStatisticResponse | null>({ Registrations: 0, Quizes: 0, Results: 0 });
+
+  useEffect(() => {
+
+    const requestStatistics = async () => {
+        console.log("работаю раз")
+      console.log("работаю два")
+
+      const gottenData = await getStatistic(Number(formatTo), Number(formatFrom));
+      setData(gottenData)
+    }
+
+    requestStatistics();
+  }, [to, from]);
+
+  return { ...data };
+}