фильтры активности промокодов и их статистики

src/api/promocode/requests.ts

@@ -71,6 +71,33 @@ export const getAllPromocodes = async () => {
   }
 };
 
+export const getNotActivePromocodes = async () => {
+  try {
+    const promocodes: Promocode[] = [];
+
+    let page = 0;
+    while (true) {
+      const promocodeList = await getPromocodeList({
+        limit: 100,
+        filter: {
+          active: false,
+        },
+        page,
+      });
+
+      if (promocodeList.items.length === 0) break;
+
+      promocodes.push(...promocodeList.items);
+      page++;
+    }
+
+    return promocodes;
+  } catch (nativeError) {
+    const [error] = parseAxiosError(nativeError);
+    throw new Error(`Ошибка при получении списка промокодов. ${error}`);
+  }
+};
+
 const createPromocode = async (body: CreatePromocodeBody) => {
   try {
     const createPromocodeResponse = await makeRequest<
@@ -137,6 +164,7 @@ export const promocodeApi = {
   createPromocode,
   deletePromocode,
   getAllPromocodes,
+  getNotActivePromocodes,
   getPromocodeStatistics,
   createFastlink,
 };

src/api/promocode/swr.ts

@@ -13,16 +13,17 @@ export function usePromocodes(
   pageSize: number,
   promocodeId: string,
   to: number,
-  from: number
+  from: number,
+  active: boolean
 ) {
   const promocodesCountRef = useRef<number>(0);
   const swrResponse = useSwr(
-    ["promocodes", page, pageSize],
+    ["promocodes", page, pageSize, active],
     async (key) => {
       const result = await promocodeApi.getPromocodeList({
         limit: key[2],
         filter: {
-          active: true,
+          active: key[3],
         },
         page: key[1],
       });
@@ -147,3 +148,16 @@ export function useAllPromocodes() {
 
   return data;
 }
+
+export function useNotActivePromocodes() {
+  const { data } = useSwr("notActivePromocodes", promocodeApi.getNotActivePromocodes, {
+    keepPreviousData: true,
+    suspense: true,
+    onError(err) {
+      console.error("Error fetching all promocodes", err);
+      enqueueSnackbar(err.message, { variant: "error" });
+    },
+  });
+
+  return data;
+}

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Box, Typography, useTheme } from "@mui/material";
+import {Box, Button, FormControl, InputLabel, MenuItem, Select, Typography, useTheme} from "@mui/material";
 import { DataGrid, GridLoadingOverlay, GridToolbar } from "@mui/x-data-grid";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
@@ -9,6 +9,8 @@ import { CreatePromocodeForm } from "./CreatePromocodeForm";
 import { usePromocodeGridColDef } from "./usePromocodeGridColDef";
 import { StatisticsModal } from "./StatisticsModal";
 import DeleteModal from "./DeleteModal";
+import {promocodeApi} from "@root/api/promocode/requests";
+import {SelectChangeEvent} from "@mui/material/Select";
 
 export const PromocodeManagement = () => {
   const theme = useTheme();
@@ -22,6 +24,7 @@ export const PromocodeManagement = () => {
   const [to, setTo] = useState(0);
   const [from, setFrom] = useState(0);
   const [pageSize, setPageSize] = useState<number>(10);
+  const [active, setActive] = useState(true)
   const {
     data,
     error,
@@ -31,7 +34,7 @@ export const PromocodeManagement = () => {
     deletePromocode,
     createPromocode,
     createFastLink,
-  } = usePromocodes(page, pageSize, showStatisticsModalId, to, from);
+  } = usePromocodes(page, pageSize, showStatisticsModalId, to, from, active);
   const columns = usePromocodeGridColDef(
     setShowStatisticsModalId,
     deleteModalHC
@@ -56,7 +59,32 @@ export const PromocodeManagement = () => {
         Создание промокода
       </Typography>
       <CreatePromocodeForm createPromocode={createPromocode} />
-      <Box style={{ width: "80%", marginTop: "55px" }}>
+      <Box sx={{marginTop: "55px",  width: "80%", display: "flex"}}>
+          <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
+              <Select
+                  labelId="demo-simple-select-standard-label"
+                  id="demo-simple-select-standard"
+                  sx={{color: "white",
+                      backgroundColor: "transparent",
+                      padding: "5px",
+                      border: "1px solid white",
+                      borderRadius: "4px",
+                      ".MuiSelect-icon": {
+                      color: "white"
+                      }
+                  }}
+                  value={active? "true" : "false"}
+                  onChange={(event: SelectChangeEvent) => {
+                      setActive((event.target.value) === "true" ? true : false);
+                  }}
+                  label="Age"
+              >
+                  <MenuItem value={"true"}>Активные</MenuItem>
+                  <MenuItem value={"false"}>Неактивные</MenuItem>
+              </Select>
+          </FormControl>
+      </Box>
+      <Box style={{ width: "80%", marginTop: "25px" }}>
         <DataGrid
           disableSelectionOnClick={true}
           rows={data?.items ?? []}

src/pages/dashboard/Content/QuizStatistics/StastisticsPromocode.tsx

@@ -1,35 +1,99 @@
 import { useState } from "react";
 import moment from "moment";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography,
-  useTheme,
+    Box,
+    FormControl, MenuItem, Select,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Typography,
+    useTheme,
 } from "@mui/material";
 
 import { DateFilter } from "./DateFilter";
 
-import { useAllPromocodes } from "@root/api/promocode/swr";
+import {useAllPromocodes, useNotActivePromocodes} from "@root/api/promocode/swr";
 import { usePromocodeStatistics } from "@root/utils/hooks/usePromocodeStatistics";
 
 import type { Moment } from "moment";
+import {SelectChangeEvent} from "@mui/material/Select";
+
+type PropStatistic = {
+    "id": string,
+    "Regs": number,
+    "Money": number,
+    "codeword": string,
+}
 
 export const StatisticsPromocode = () => {
   const [from, setFrom] = useState<Moment | null>(
     moment(moment().subtract(4, "weeks"))
   );
   const [to, setTo] = useState<Moment | null>(moment());
+  const [active, setActive] = useState(true)
   const promocodes = useAllPromocodes();
+  const promocodesNot = useNotActivePromocodes();
   const promocodeStatistics = usePromocodeStatistics({ to, from });
   const theme = useTheme();
 
+   const filterPromo = active ? promocodes : promocodesNot
+  console.log(promocodes, "active")
+  console.log(promocodesNot)
+
+    const filteredPromoStatistics = () => {
+        let copyPromocodeStatistics:PropStatistic[] = []
+      Object.entries(promocodeStatistics).map(([key, { Regs, Money }]) => {
+
+        for(let i in filterPromo){
+          if(filterPromo[i].id === key) {
+              copyPromocodeStatistics.push(
+                  {
+                      "id": key,
+                      "Regs": Regs,
+                      "Money": Money,
+                      "codeword": filterPromo[i].codeword,
+                  }
+              )
+
+        }}
+
+      })
+        return copyPromocodeStatistics
+  }
+
+const filteredStat = filteredPromoStatistics()
+
   return (
     <>
       <Typography sx={{ marginTop: "30px" }}>Статистика промокодов</Typography>
       <DateFilter from={from} to={to} setFrom={setFrom} setTo={setTo} />
+        <Box sx={{marginTop: "55px",  width: "80%", display: "flex"}}>
+            <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
+                <Select
+                    labelId="demo-simple-select-standard-label"
+                    id="demo-simple-select-standard"
+                    sx={{color: "white",
+                        backgroundColor: "transparent",
+                        padding: "5px",
+                        border: "1px solid white",
+                        borderRadius: "4px",
+                        ".MuiSelect-icon": {
+                            color: "white"
+                        }
+                    }}
+                    value={active? "true" : "false"}
+                    onChange={(event: SelectChangeEvent) => {
+                        setActive((event.target.value) === "true" ? true : false);
+                    }}
+                    label="Age"
+                >
+                    <MenuItem value={"true"}>Активные</MenuItem>
+                    <MenuItem value={"false"}>Неактивные</MenuItem>
+                </Select>
+            </FormControl>
+        </Box>
       <Table
         sx={{
           width: "80%",
@@ -59,17 +123,17 @@ export const StatisticsPromocode = () => {
             </TableCell>
           </TableRow>
         </TableHead>
-        {Object.entries(promocodeStatistics).map(([key, { Regs, Money }]) => (
-          <TableBody key={key}>
+        {filteredStat.map((stat) => (
+           <TableBody>
             <TableRow>
               <TableCell sx={{ color: "inherit" }} align="center">
-                {promocodes.find(({ id }) => id === key)?.codeword ?? ""}
+                {stat?.codeword}
               </TableCell>
               <TableCell sx={{ color: "inherit" }} align="center">
-                {Regs}
+                {stat?.Regs}
               </TableCell>
               <TableCell sx={{ color: "inherit" }} align="center">
-                {(Money / 100).toFixed(2)}
+                {(stat?.Money / 100).toFixed(2)}
               </TableCell>
             </TableRow>
           </TableBody>