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

import { useState } from "react";
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";
import { usePromocodes } from "@root/api/promocode/swr";
import { fadeIn } from "@root/utils/style/keyframes";
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";
import {EditModal} from "@pages/dashboard/Content/PromocodeManagement/EditModal";

export const PromocodeManagement = () => {
	const theme = useTheme();

	const [deleteModal, setDeleteModal] = useState<string>("");
	const deleteModalHC = (id: string) => setDeleteModal(id);

  const [showStatisticsModalId, setShowStatisticsModalId] =
    useState<string>("");
  const [showEditModalId, setShowEditModalId] =
    useState<string>("");
  const [page, setPage] = useState<number>(0);
  const [to, setTo] = useState(0);
  const [from, setFrom] = useState(0);
  const [pageSize, setPageSize] = useState<number>(10);
  const [active, setActive] = useState(true);
  const {
    data,
    error,
    isValidating,
    promocodesCount,
    promocodeStatistics,
    deletePromocode,
    createPromocode,
    editPromocode,
    createFastLink,
  } = usePromocodes(page, pageSize, showStatisticsModalId, to, from, active);
  const columns = usePromocodeGridColDef(
    setShowEditModalId,
    setShowStatisticsModalId,
    deleteModalHC
  );
  if (error) return <Typography>Ошибка загрузки промокодов</Typography>;

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Typography
        variant="subtitle1"
        sx={{
          width: "90%",
          height: "60px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          textTransform: "uppercase",
          color: theme.palette.secondary.main,
        }}
      >
        Создание промокода
      </Typography>
      <CreatePromocodeForm createPromocode={createPromocode} />
      <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 ?? []}
          columns={columns}
          sx={{
            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,
          }}
          loading={isValidating}
          paginationMode="server"
          page={page}
          onPageChange={setPage}
          rowCount={promocodesCount}
          pageSize={pageSize}
          onPageSizeChange={setPageSize}
          rowsPerPageOptions={[10, 25, 50, 100]}
          autoHeight
        />
      </Box>
        <EditModal
            id={showEditModalId}
            setId={setShowEditModalId}
            promocodes={data?.items ?? []}
            editPromocode={editPromocode}
        />
      <StatisticsModal
        id={showStatisticsModalId}
        setId={setShowStatisticsModalId}
        promocodeStatistics={promocodeStatistics}
        to={to}
        setTo={setTo}
        from={from}
        setFrom={setFrom}
        promocodes={data?.items ?? []}
        createFastLink={createFastLink}
      />
      <DeleteModal
        id={deleteModal}
        setModal={setDeleteModal}
        deletePromocode={deletePromocode}
      />
    </LocalizationProvider>
  );
};