adminFront/src/pages/dashboard/ModalUser/index.tsx

import { useEffect, useState } from "react";
import { useLinkClickHandler, useParams } from "react-router-dom";
import {
  Box,
  Modal,
  Fade,
  Backdrop,
  Typography,
  Tabs,
  Tab,
  useTheme,
  useMediaQuery,
} from "@mui/material";

import { UserTab } from "./UserTab";
import { PurchaseTab } from "./PurchaseTab";
import { TransactionsTab } from "./TransactionsTab";
import { VerificationTab } from "./VerificationTab";

import { authStore } from "@root/stores/auth";
import theme from "@root/theme";

import userIcon from "@root/assets/icons/user.svg";
import packageIcon from "@root/assets/icons/package.svg";
import transactionsIcon from "@root/assets/icons/transactions.svg";
import checkIcon from "@root/assets/icons/check.svg";

import type { SyntheticEvent } from "react";

const TABS = [
  { name: "Пользователь", icon: userIcon },
  { name: "Покупка товаров и услуг", icon: packageIcon },
  { name: "Транзакции", icon: transactionsIcon },
  { name: "Верификация", icon: checkIcon },
];

const baseUrl =
  process.env.NODE_ENV === "production" ? "" : "https://hub.pena.digital";

export type File = {
  name: "inn" | "rule" | "egrule" | "certificate";
  url: string;
};

export type Verification = {
  _id: string;
  accepted: boolean;
  status: "org" | "nko";
  updated_at: string;
  comment: string;
  files: File[];
};

const ModalUser = () => {
  const [user, setUser] = useState<Verification | null>(null);
  const [value, setValue] = useState<number>(0);
  const { userId } = useParams();
  const { makeRequest } = authStore();
  const theme = useTheme();
  const tablet = useMediaQuery(theme.breakpoints.down(1070));
  const mobile = useMediaQuery(theme.breakpoints.down(700));

  useEffect(() => {
    makeRequest<never, Verification>({
      method: "get",
      url: baseUrl + `/verification/verification/${userId}`,
    }).then(setUser);
  }, []);

  return (
    <>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open
        onClose={useLinkClickHandler("/users")}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in>
          <Box
            sx={{
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              display: "flex",
              flexDirection: "column",
              width: "100%",
              maxWidth: tablet ? "920px" : "1070px",
              height: "605px",
              bgcolor: theme.palette.background.default,
              color: theme.palette.secondary.main,
              boxShadow: 24,
              borderRadius: "12px",
              outline: "none",
              overflow: "hidden",
            }}
          >
            <Typography
              id="transition-modal-title"
              variant="caption"
              sx={{
                display: "block",
                textAlign: "center",
                fontSize: "18px",
                padding: "12px",
                color: theme.palette.common.white,
                background: "#9A9AAF",
              }}
            >
              Пользователь сервиса
            </Typography>

            <Box sx={{ width: "100%", height: "100%", display: "flex" }}>
              <Tabs
                orientation="vertical"
                variant="scrollable"
                value={value}
                onChange={(event: SyntheticEvent, newValue: number) =>
                  setValue(newValue)
                }
                aria-label="Vertical tabs example"
                sx={{ padding: "10px", width: "100%", maxWidth: "276px" }}
                TabIndicatorProps={{ style: { background: "transparent" } }}
              >
                {TABS.map(({ name, icon }) => (
                  <Tab
                    icon={<img src={icon} alt={name} />}
                    iconPosition="start"
                    key={name}
                    label={name}
                    sx={{
                      justifyContent: "flex-start",
                      textTransform: "inherit",
                      minHeight: "auto",
                      fontSize: "15px",
                      padding: "15px",
                      marginBottom: "5px",
                      color: theme.palette.common.black,
                      "&.MuiButtonBase-root.Mui-selected": {
                        borderRadius: "12px",
                        color: "#7E2AEA",
                        background: "rgba(126, 42, 234, 0.07)",
                      },
                    }}
                  />
                ))}
              </Tabs>

              <Box
                sx={{
                  position: "relative",
                  width: "100%",
                  color: theme.palette.common.black,
                  boxShadow: "inset 30px 0px 40px 0px rgba(210, 208, 225, 0.2)",
                }}
              >
                {value === 0 && (
                  <UserTab
                    user={{
                      id: 2810,
                      registrationDate: "17.02.2023",
                      email: "emailexamle@gmail.com",
                      phone: "+7 123 456 78 90",
                      type: "НКО",
                      fullname: "Куликов Геннадий Викторович",
                      walletBalance: "2 096 руб.",
                    }}
                  />
                )}
                {value === 1 && <PurchaseTab />}
                {value === 2 && <TransactionsTab />}
                {value === 3 && <VerificationTab files={user?.files || []} />}
              </Box>
            </Box>
          </Box>
        </Fade>
      </Modal>
    </>
  );
};

export default ModalUser;