вынесение компонентов на странице результатов

src/pages/QuizAnswersPage/QuizAnswersPage.tsx

@@ -37,6 +37,8 @@ import { setQuestions } from "@root/questions/actions";
 import { useUserStore } from "@root/user";
 
 import type { AxiosError } from "axios";
+import CustomPagination from "@ui_kit/CustomPagination";
+import SettingResults from "./SettingResults";
 
 const itemsCities = [
   { label: "Муром (1)", value: "option1" },
@@ -170,6 +172,16 @@ export const QuizAnswersPage: FC = () => {
     }
   };
 
+  const PaginationHC = async (e, value) => {
+    setPage(value);
+    const result = await resultApi.getList(
+      editQuizId,
+      value - 1,
+      parseFilters(),
+    );
+    setResults(result);
+  };
+
   if (quiz === undefined)
     return (
       <Skeleton sx={{ width: "100vw", height: "100vh", transform: "none" }} />
@@ -222,177 +234,55 @@ export const QuizAnswersPage: FC = () => {
               width: isTablet ? "auto" : "100%",
             }}
           >
-            <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+            <SettingResults
-              <IconButton
+              onclickExport={async () => {
-                onClick={async () => {
+                try {
-                  try {
+                  const data = await resultApi.export(
-                    const data = await resultApi.export(
-                      editQuizId,
-                      parseFilters(),
-                    );
-                    console.log(typeof data);
-
-                    const blob = data;
-                    const link = document.createElement("a");
-                    link.href = window.URL.createObjectURL(blob);
-                    link.download = `report_${new Date().getTime()}.xlsx`;
-                    link.click();
-                  } catch (nativeError) {
-                    const error = nativeError as AxiosError;
-
-                    if (error.response?.statusText === "Payment Required") {
-                      setPrePaymentModalOpen(true);
-                    }
-                  }
-                }}
-                sx={{
-                  width: "44px",
-                  height: "44px",
-                  borderRadius: "8px",
-                  border: "1px solid #7E2AEA",
-                }}
-              >
-                <FileExportIcon />
-              </IconButton>
-              <IconButton
-                sx={{
-                  width: "44px",
-                  height: "44px",
-                  borderRadius: "8px",
-                  border: "1px solid #7E2AEA",
-                }}
-                onClick={async () => {
-                  const result = await resultApi.getList(
                     editQuizId,
-                    page - 1,
                     parseFilters(),
                   );
-                  console.log(result);
+                  console.log(typeof data);
-                  setResults(result);
-                }}
-              >
-                <UpdateIcon />
-              </IconButton>
 
-              {isTablet && (
+                  const blob = data;
-                <IconButton
+                  const link = document.createElement("a");
-                  onClick={() => setFilterModalOpen(true)}
+                  link.href = window.URL.createObjectURL(blob);
-                  sx={{
+                  link.download = `report_${new Date().getTime()}.xlsx`;
-                    background: "#fff",
+                  link.click();
-                    width: "44px",
+                } catch (nativeError) {
-                    height: "44px",
+                  const error = nativeError as AxiosError;
-                    borderRadius: "8px",
-                    border: "1px solid #7E2AEA",
-                  }}
-                >
-                  <FilterIcon />
-                </IconButton>
-              )}
-            </Box>
 
-            {!isTablet && (
+                  if (error.response?.statusText === "Payment Required") {
-              <Box
+                    setPrePaymentModalOpen(true);
-                sx={{
+                  }
-                  display: "flex",
+                }
-                  alignItems: "center",
+              }}
-                  gap: "20px",
+              onclickUpdate={async () => {
-                  width: "100%",
+                const result = await resultApi.getList(
-                  justifyContent: "flex-end",
+                  editQuizId,
-                }}
+                  page - 1,
-              >
+                  parseFilters(),
-                <Select
+                );
-                  items={itemsTime}
+                console.log(result);
-                  data={filterDate}
+                setResults(result);
-                  onChange={filterDateHC}
+              }}
-                  placeholder="За всё время"
+              onclickFilterTablet={() => setFilterModalOpen(true)}
-                />
+              onclickResetFilers={() => {
-                <Select
+                setFilterNew("Все заявки");
-                  items={itemsNews}
+                setFilterDate("За всё время");
-                  data={filterNew}
+              }}
-                  onChange={filterNewHC}
+              filterNewHC={filterNewHC}
-                  placeholder="Все заявки"
+              filterDateHC={filterDateHC}
-                />
+              itemsTime={itemsTime}
-
+              itemsNews={itemsNews}
-                <Button
+              filterDate={filterDate}
-                  onClick={() => {
+              filterNew={filterNew}
-                    setFilterNew("Все заявки");
+            />
-                    setFilterDate("За всё время");
-                  }}
-                  sx={{
-                    maxWidth: "200px",
-                    width: "100%",
-                    height: "48px",
-                    borderRadius: "8px",
-                    border: "1px solid #7E2AEA",
-                    color: "#7E2AEA",
-                  }}
-                >
-                  Сбросить фильтры
-                </Button>
-              </Box>
-            )}
           </Box>
         </Box>
-        <Pagination
+        <CustomPagination
-          variant="pena-pagination"
+          countPagination={countPagination}
-          count={countPagination}
           page={page}
-          onChange={async (e, value) => {
+          onChange={PaginationHC}
-            setPage(value);
-            const result = await resultApi.getList(
-              editQuizId,
-              value - 1,
-              parseFilters(),
-            );
-            setResults(result);
-          }}
-          sx={{
-            marginRight: "-15px",
-            marginLeft: "-15px",
-            marginBottom: "20px",
-            "& .MuiPaginationItem-root": {
-              height: "30px",
-              width: "30px",
-              minWidth: "30px",
-              marginLeft: "5px",
-              marginRight: "5px",
-              backgroundColor: "white",
-              color: "black",
-              fontSize: "16px",
-              lineHeight: "20px",
-              fontWeight: 400,
-              borderRadius: "5px",
-              "&.Mui-selected": {
-                backgroundColor: "white",
-                color: "#7E2AEA",
-                fontWeight: 500,
-              },
-              "&:hover": {
-                backgroundColor: "#ffffff55",
-              },
-              "&:active": {
-                backgroundColor: "#7F2CEA",
-                color: "white",
-              },
-              boxShadow: `
-                                      0px 77.2727px 238.773px rgba(210, 208, 225, 0.24), 
-                                      0px 32.2827px 99.7535px rgba(210, 208, 225, 0.172525), 
-                                      0px 17.2599px 53.333px rgba(210, 208, 225, 0.143066), 
-                                      0px 9.67574px 29.8981px rgba(210, 208, 225, 0.12), 
-                                      0px 5.13872px 15.8786px rgba(210, 208, 225, 0.0969343), 
-                                      0px 2.13833px 6.60745px rgba(210, 208, 225, 0.0674749)
-                                  `,
-            },
-            "& .MuiPaginationItem-previousNext": {
-              backgroundColor: "#7E2AEA",
-              color: "white",
-              marginLeft: "15px",
-              marginRight: "15px",
-              "&:hover": {
-                backgroundColor: "#995DED",
-              },
-            },
-          }}
         />
 
         {!isTablet && (

src/pages/QuizAnswersPage/SettingResults.tsx

@@ -0,0 +1,123 @@
+import {
+  Box,
+  Button,
+  IconButton,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import { FileExportIcon } from "./icons/FileExporIcon";
+import { UpdateIcon } from "./icons/UpdateIcon";
+import { FilterIcon } from "./icons/FilterIcon";
+import { Select } from "../Questions/Select";
+
+interface Props {
+  onclickExport: () => void;
+  onclickUpdate: () => void;
+  onclickFilterTablet: () => void;
+  onclickResetFilers: () => void;
+  filterNewHC: (value: string) => void;
+  filterDateHC: (value: string) => void;
+  itemsTime: string[];
+  itemsNews: string[];
+  filterDate: string;
+  filterNew: string;
+}
+
+export default function SettingResults({
+  onclickExport,
+  onclickUpdate,
+  onclickFilterTablet,
+  onclickResetFilers,
+  filterNewHC,
+  filterDateHC,
+  itemsTime,
+  itemsNews,
+  filterDate,
+  filterNew,
+}: Props) {
+  const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  return (
+    <>
+      <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+        <IconButton
+          onClick={onclickExport}
+          sx={{
+            width: "44px",
+            height: "44px",
+            borderRadius: "8px",
+            border: "1px solid #7E2AEA",
+          }}
+        >
+          <FileExportIcon />
+        </IconButton>
+        <IconButton
+          sx={{
+            width: "44px",
+            height: "44px",
+            borderRadius: "8px",
+            border: "1px solid #7E2AEA",
+          }}
+          onClick={onclickUpdate}
+        >
+          <UpdateIcon />
+        </IconButton>
+
+        {isTablet && (
+          <IconButton
+            onClick={onclickFilterTablet}
+            sx={{
+              background: "#fff",
+              width: "44px",
+              height: "44px",
+              borderRadius: "8px",
+              border: "1px solid #7E2AEA",
+            }}
+          >
+            <FilterIcon />
+          </IconButton>
+        )}
+      </Box>
+
+      {!isTablet && (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: "20px",
+            width: "100%",
+            justifyContent: "flex-end",
+          }}
+        >
+          <Select
+            items={itemsTime}
+            data={filterDate}
+            onChange={filterDateHC}
+            placeholder="За всё время"
+          />
+          <Select
+            items={itemsNews}
+            data={filterNew}
+            onChange={filterNewHC}
+            placeholder="Все заявки"
+          />
+
+          <Button
+            onClick={onclickResetFilers}
+            sx={{
+              maxWidth: "200px",
+              width: "100%",
+              height: "48px",
+              borderRadius: "8px",
+              border: "1px solid #7E2AEA",
+              color: "#7E2AEA",
+            }}
+          >
+            Сбросить фильтры
+          </Button>
+        </Box>
+      )}
+    </>
+  );
+}

src/pages/Tariffs/tariffsUtils/createTariffElements.tsx

@@ -49,7 +49,7 @@ export const createTariffElements = (
             onClick: () =>
               onclick({
                 id: tariff._id,
-                price: (priceAfterDiscounts / 100),
+                price: priceAfterDiscounts / 100,
               }),
           }}
           headerText={tariff.name}

src/ui_kit/CustomPagination.tsx

@@ -0,0 +1,68 @@
+import { Pagination } from "@mui/material";
+import { ChangeEvent } from "react";
+interface Props {
+  countPagination: number;
+  page: number;
+  onChange: (e: ChangeEvent, value: number) => void;
+}
+
+export default function CustomPagination({
+  countPagination,
+  page,
+  onChange,
+}: Props) {
+  return (
+    <Pagination
+      count={countPagination}
+      page={page}
+      onChange={onChange}
+      sx={{
+        marginRight: "-15px",
+        marginLeft: "-15px",
+        marginBottom: "20px",
+        "& .MuiPaginationItem-root": {
+          height: "30px",
+          width: "30px",
+          minWidth: "30px",
+          marginLeft: "5px",
+          marginRight: "5px",
+          backgroundColor: "white",
+          color: "black",
+          fontSize: "16px",
+          lineHeight: "20px",
+          fontWeight: 400,
+          borderRadius: "5px",
+          "&.Mui-selected": {
+            backgroundColor: "white",
+            color: "#7E2AEA",
+            fontWeight: 500,
+          },
+          "&:hover": {
+            backgroundColor: "#ffffff55",
+          },
+          "&:active": {
+            backgroundColor: "#7F2CEA",
+            color: "white",
+          },
+          boxShadow: `
+                                      0px 77.2727px 238.773px rgba(210, 208, 225, 0.24), 
+                                      0px 32.2827px 99.7535px rgba(210, 208, 225, 0.172525), 
+                                      0px 17.2599px 53.333px rgba(210, 208, 225, 0.143066), 
+                                      0px 9.67574px 29.8981px rgba(210, 208, 225, 0.12), 
+                                      0px 5.13872px 15.8786px rgba(210, 208, 225, 0.0969343), 
+                                      0px 2.13833px 6.60745px rgba(210, 208, 225, 0.0674749)
+                                  `,
+        },
+        "& .MuiPaginationItem-previousNext": {
+          backgroundColor: "#7E2AEA",
+          color: "white",
+          marginLeft: "15px",
+          marginRight: "15px",
+          "&:hover": {
+            backgroundColor: "#995DED",
+          },
+        },
+      }}
+    />
+  );
+}