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,
} from "@mui/material";

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

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";

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();

  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: "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",
                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={{
                  width: "100%",
                  padding: "25px",
                  color: theme.palette.common.black,
                  boxShadow:
                    "inset 0px 20px 129.093px rgba(210, 208, 225, 0.172525), inset 0px 10px 69.0192px rgba(210, 208, 225, 0.143066), inset 0px 5px 38.6916px rgba(210, 208, 225, 0.12), inset 0px 2px 20.5488px rgba(210, 208, 225, 0.0969343)",
                }}
              >
                {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 />}
              </Box>
            </Box>
          </Box>
        </Fade>
      </Modal>
    </>
  );
};

export default ModalUser;