feat: Promocode statistics modal

src/api/promocode/requests.ts

@@ -1,5 +1,12 @@
 import { makeRequest } from "@frontend/kitui";
-import { CreatePromocodeBody, GetPromocodeListBody, Promocode, PromocodeList } from "@root/model/promocodes";
+
+import type {
+  CreatePromocodeBody,
+  GetPromocodeListBody,
+  Promocode,
+  PromocodeList,
+  PromocodeStatistics,
+} from "@root/model/promocodes";
 
 import { parseAxiosError } from "@root/utils/parse-error";
 import { isAxiosError } from "axios";
@@ -39,7 +46,10 @@ const createPromocode = async (body: CreatePromocodeBody) => {
 
     return createPromocodeResponse;
   } catch (nativeError) {
-        if (isAxiosError(nativeError) && nativeError.response?.data.error === "Duplicate Codeword") {
+    if (
+      isAxiosError(nativeError) &&
+      nativeError.response?.data.error === "Duplicate Codeword"
+    ) {
       throw new Error(`Промокод уже существует`);
     }
 
@@ -61,8 +71,27 @@ const deletePromocode = async (id: string): Promise<void> => {
   }
 };
 
+const getPromocodeStatistics = async (id: string) => {
+  try {
+    const promocodeStatisticsResponse = await makeRequest<
+      unknown,
+      PromocodeStatistics[]
+    >({
+      url: baseUrl + `/getStatistics/${id}`,
+      method: "GET",
+      useToken: false,
+    });
+
+    return promocodeStatisticsResponse;
+  } catch (nativeError) {
+    const [error] = parseAxiosError(nativeError);
+    throw new Error(`Ошибка при получении статистики промокода. ${error}`);
+  }
+};
+
 export const promocodeApi = {
   getPromocodeList,
   createPromocode,
   deletePromocode,
+  getPromocodeStatistics,
 };

src/api/promocode/swr.ts

@@ -1,11 +1,18 @@
-import { CreatePromocodeBody, PromocodeList } from "@root/model/promocodes";
-import { enqueueSnackbar } from "notistack";
 import { useCallback, useRef } from "react";
 import useSwr, { mutate } from "swr";
+import { enqueueSnackbar } from "notistack";
 import { promocodeApi } from "./requests";
 
+import type {
+  CreatePromocodeBody,
+  PromocodeList,
+} from "@root/model/promocodes";
 
-export function usePromocodes(page: number, pageSize: number) {
+export function usePromocodes(
+  page: number,
+  pageSize: number,
+  promocodeId: string
+) {
   const promocodesCountRef = useRef<number>(0);
   const swrResponse = useSwr(
     ["promocodes", page, pageSize],
@@ -31,17 +38,22 @@ export function usePromocodes(page: number, pageSize: number) {
     }
   );
 
-    const createPromocode = useCallback(async function (body: CreatePromocodeBody) {
+  const createPromocode = useCallback(
+    async function (body: CreatePromocodeBody) {
       try {
         await promocodeApi.createPromocode(body);
         mutate(["promocodes", page, pageSize]);
       } catch (error) {
         console.log("Error creating promocode", error);
-            if (error instanceof Error) enqueueSnackbar(error.message, { variant: "error" });
+        if (error instanceof Error)
+          enqueueSnackbar(error.message, { variant: "error" });
       }
-    }, [page, pageSize]);
+    },
+    [page, pageSize]
+  );
 
-    const deletePromocode = useCallback(async function (id: string) {
+  const deletePromocode = useCallback(
+    async function (id: string) {
       try {
         await mutate<PromocodeList | undefined, void>(
           ["promocodes", page, pageSize],
@@ -68,14 +80,40 @@ export function usePromocodes(page: number, pageSize: number) {
         );
       } catch (error) {
         console.log("Error deleting promocode", error);
-            if (error instanceof Error) enqueueSnackbar(error.message, { variant: "error" });
+        if (error instanceof Error)
+          enqueueSnackbar(error.message, { variant: "error" });
       }
-    }, [page, pageSize]);
+    },
+    [page, pageSize]
+  );
+
+  const promocodeStatistics = useSwr(
+    ["promocodeStatistics", promocodeId],
+    async ([_, id]) => {
+      if (!id) {
+        return null;
+      }
+
+      const promocodeStatisticsResponse =
+        await promocodeApi.getPromocodeStatistics(id);
+
+      return promocodeStatisticsResponse;
+    },
+    {
+      onError(err) {
+        console.log("Error fetching promocode statistics", err);
+        enqueueSnackbar(err.message, { variant: "error" });
+      },
+      focusThrottleInterval: 60e3,
+      keepPreviousData: true,
+    }
+  );
 
   return {
     ...swrResponse,
     createPromocode,
     deletePromocode,
+    promocodeStatistics: promocodeStatistics.data,
     promocodesCount: promocodesCountRef.current,
   };
 }

src/model/promocodes.ts

@@ -39,3 +39,10 @@ export type PromocodeList = {
   count: number;
   items: Promocode[];
 };
+
+export type PromocodeStatistics = {
+  id: string;
+  link: string;
+  useCount: number;
+  purchasesCount: number;
+};

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

@@ -0,0 +1,203 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  Typography,
+  Modal,
+  TextField,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
+import { DataGrid, GridLoadingOverlay, GridToolbar } from "@mui/x-data-grid";
+import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
+
+import { fadeIn } from "@root/utils/style/keyframes";
+
+import type { GridColDef } from "@mui/x-data-grid";
+import type { PromocodeStatistics } from "@root/model/promocodes";
+
+type StatisticsModalProps = {
+  id: string;
+  setId: (id: string) => void;
+  promocodeStatistics: PromocodeStatistics[] | null | undefined;
+};
+
+const COLUMNS: GridColDef<PromocodeStatistics, string>[] = [
+  {
+    field: "link",
+    headerName: "Ссылка",
+    width: 320,
+    sortable: false,
+    valueGetter: ({ row }) => row.link,
+  },
+  {
+    field: "useCount",
+    headerName: "Использований",
+    width: 120,
+    sortable: false,
+    valueGetter: ({ row }) => String(row.useCount),
+  },
+  {
+    field: "purchasesCount",
+    headerName: "Покупок",
+    width: 70,
+    sortable: false,
+    valueGetter: ({ row }) => String(row.purchasesCount),
+  },
+];
+
+export const StatisticsModal = ({
+  id,
+  setId,
+  promocodeStatistics,
+}: StatisticsModalProps) => {
+  const [startDate, setStartDate] = useState<Date>(new Date());
+  const [endDate, setEndDate] = useState<Date>(new Date());
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(550));
+
+  return (
+    <Modal
+      open={Boolean(id)}
+      onClose={() => setId("")}
+      sx={{ "& > .MuiBox-root": { outline: "none" } }}
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: "95%",
+          maxWidth: "600px",
+          bgcolor: "background.paper",
+          border: "2px solid gray",
+          borderRadius: "6px",
+          boxShadow: 24,
+          p: 4,
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            gap: "30px",
+            justifyContent: "center",
+            alignItems: "center",
+            flexDirection: isMobile ? "column" : "row",
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              gap: "30px",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Button
+              sx={{ maxWidth: "100px" }}
+              // onClick={() => }
+            >
+              Создать короткую ссылку
+            </Button>
+            <Button
+              sx={{ maxWidth: "100px" }}
+              // onClick={() => }
+            >
+              Обновить статистику
+            </Button>
+          </Box>
+          <Box sx={{ minWidth: "200px" }}>
+            <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+              <Typography sx={{ minWidth: "20px" }}>от</Typography>
+              <DesktopDatePicker
+                inputFormat="DD/MM/YYYY"
+                value={startDate}
+                onChange={(date) => date && setStartDate(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
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: "10px",
+                marginTop: "10px",
+              }}
+            >
+              <Typography sx={{ minWidth: "20px" }}>до</Typography>
+              <DesktopDatePicker
+                inputFormat="DD/MM/YYYY"
+                value={endDate}
+                onChange={(date) => date && setEndDate(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>
+        </Box>
+        <DataGrid
+          disableSelectionOnClick={true}
+          rows={promocodeStatistics ?? []}
+          columns={COLUMNS}
+          sx={{
+            marginTop: "30px",
+            background: "#1F2126",
+            color: theme.palette.secondary.main,
+            "& .MuiDataGrid-iconSeparator": { display: "none" },
+            "& .css-levciy-MuiTablePagination-displayedRows": {
+              color: theme.palette.secondary.main,
+            },
+            "& .MuiSvgIcon-root": { color: theme.palette.secondary.main },
+            "& .MuiTablePagination-selectLabel": {
+              color: theme.palette.secondary.main,
+            },
+            "& .MuiInputBase-root": { color: theme.palette.secondary.main },
+            "& .MuiButton-text": { color: theme.palette.secondary.main },
+            "& .MuiDataGrid-overlay": {
+              backgroundColor: "rgba(255, 255, 255, 0.1)",
+              animation: `${fadeIn} 0.5s ease-out`,
+            },
+          }}
+          components={{
+            Toolbar: GridToolbar,
+            LoadingOverlay: GridLoadingOverlay,
+          }}
+          rowsPerPageOptions={[10, 25, 50, 100]}
+          autoHeight
+        />
+      </Box>
+    </Modal>
+  );
+};

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

@@ -1,20 +1,33 @@
+import { useState } from "react";
 import { Box, 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";
 import { usePromocodes } from "@root/api/promocode/swr";
 import { fadeIn } from "@root/utils/style/keyframes";
-import { useState } from "react";
 import { CreatePromocodeForm } from "./CreatePromocodeForm";
 import { usePromocodeGridColDef } from "./usePromocodeGridColDef";
-
+import { StatisticsModal } from "./StatisticsModal";
 
 export const PromocodeManagement = () => {
   const theme = useTheme();
+  const [showStatisticsModalId, setShowStatisticsModalId] =
+    useState<string>("");
   const [page, setPage] = useState<number>(0);
   const [pageSize, setPageSize] = useState<number>(10);
-    const { data, error, isValidating, promocodesCount, deletePromocode, createPromocode } = usePromocodes(page, pageSize);
+  const {
-    const columns = usePromocodeGridColDef(deletePromocode);
+    data,
+    error,
+    isValidating,
+    promocodesCount,
+    promocodeStatistics,
+    deletePromocode,
+    createPromocode,
+  } = usePromocodes(page, pageSize, showStatisticsModalId);
+  const columns = usePromocodeGridColDef(
+    setShowStatisticsModalId,
+    deletePromocode
+  );
 
   if (error) return <Typography>Ошибка загрузки промокодов</Typography>;
 
@@ -73,6 +86,11 @@ export const PromocodeManagement = () => {
           autoHeight
         />
       </Box>
+      <StatisticsModal
+        id={showStatisticsModalId}
+        setId={setShowStatisticsModalId}
+        promocodeStatistics={promocodeStatistics}
+      />
     </LocalizationProvider>
   );
 };

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

@@ -1,11 +1,16 @@
-import DeleteIcon from '@mui/icons-material/Delete';
 import { IconButton } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 import { Promocode } from "@root/model/promocodes";
 import { useMemo } from "react";
 
-export function usePromocodeGridColDef(deletePromocode: (id: string) => void) {
+import { BarChart, Delete } from "@mui/icons-material";
-    return useMemo<GridColDef<Promocode, string | number, string>[]>(() => [
+
+export function usePromocodeGridColDef(
+  setStatistics: (id: string) => void,
+  deletePromocode: (id: string) => void
+) {
+  return useMemo<GridColDef<Promocode, string | number, string>[]>(
+    () => [
       {
         field: "id",
         headerName: "ID",
@@ -25,7 +30,8 @@ export function usePromocodeGridColDef(deletePromocode: (id: string) => void) {
         headerName: "Коэф. скидки",
         width: 120,
         sortable: false,
-            valueGetter: ({ row }) => Math.round(row.bonus.discount.factor * 1000) / 1000,
+        valueGetter: ({ row }) =>
+          Math.round(row.bonus.discount.factor * 1000) / 1000,
       },
       {
         field: "activationCount",
@@ -42,6 +48,19 @@ export function usePromocodeGridColDef(deletePromocode: (id: string) => void) {
         valueGetter: ({ row }) => row.dueTo * 1000,
         valueFormatter: ({ value }) => new Date(value).toLocaleString(),
       },
+      {
+        field: "settings",
+        headerName: "",
+        width: 60,
+        sortable: false,
+        renderCell: (params) => {
+          return (
+            <IconButton onClick={() => setStatistics(params.row.id)}>
+              <BarChart />
+            </IconButton>
+          );
+        },
+      },
       {
         field: "delete",
         headerName: "",
@@ -50,10 +69,12 @@ export function usePromocodeGridColDef(deletePromocode: (id: string) => void) {
         renderCell: (params) => {
           return (
             <IconButton onClick={() => deletePromocode(params.row.id)}>
-                        <DeleteIcon />
+              <Delete />
             </IconButton>
           );
         },
       },
-    ], [deletePromocode]);
+    ],
+    [deletePromocode, setStatistics]
+  );
 }