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

import { useState, useEffect } from "react";
import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";

import { userApi } from "@root/api/user/requests";
import { getAccountInfo } from "@root/api/account";

import type { UserType } from "@root/api/roles";
import type { Account } from "@root/api/account";
import { UserPrivilegeDecrement } from "./UserPrivilegeDecrement";

type UserTabProps = {
	userId: string;
};

export const UserTab = ({ userId }: UserTabProps) => {
	const [user, setUser] = useState<UserType | null>(null);
	const [account, setAccount] = useState<Account | null>(null);
	const theme = useTheme();
	const mobile = useMediaQuery(theme.breakpoints.down(700));

	useEffect(() => {
		if (userId) {
			userApi.getUserInfo(userId).then(([userInfo]) => setUser(userInfo));
			getAccountInfo(userId).then(([accountsInfo]) => setAccount(accountsInfo));
		}
	}, []);

	return (
		<Box
		sx={{

				padding: "25px",
		}}
		>
		<Box
			sx={{
				display: mobile ? "block" : "flex",
				columnGap: "15px",
			}}
		>
			<Box sx={{ maxWidth: "300px", width: "100%" }}>
				<Box sx={{ marginBottom: "25px" }}>
					<Typography sx={{ lineHeight: "20px" }}>ID</Typography>
					<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>{user?._id}</Typography>
				</Box>
				<Box sx={{ marginBottom: "25px" }}>
					<Typography sx={{ lineHeight: "20px" }}>Дата регистрации</Typography>
					<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
						{new Date(user?.createdAt || "").toLocaleDateString()}
					</Typography>
				</Box>
				<Box sx={{ marginBottom: "25px" }}>
					<Typography sx={{ lineHeight: "20px" }}>Email</Typography>
					<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>{user?.email || user?.login}</Typography>
				</Box>
				<Box sx={{ marginBottom: "25px" }}>
					<Typography sx={{ lineHeight: "20px" }}>Телефон</Typography>
					<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>{user?.phoneNumber}</Typography>
				</Box>
				<Box sx={{ marginBottom: "25px" }}>
					<Typography sx={{ lineHeight: "20px" }}>Тип:</Typography>
					<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
						{account?.status === "no" && "Физ. лицо"}
						{account?.status === "org" && "Юр. лицо"}
						{account?.status === "nko" && "НКО"}
					</Typography>
				</Box>
			</Box>
			<Box sx={{ maxWidth: "300px", width: "100%" }}>
				<Box sx={{ marginBottom: "25px" }}>
					<Typography sx={{ lineHeight: "20px" }}>ФИО:</Typography>
					<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
						{`${account?.name.secondname || ""} ${account?.name.firstname || ""} ${account?.name.middlename || ""}`}
					</Typography>
				</Box>
				<Box sx={{ marginBottom: "25px" }}>
					<Typography sx={{ lineHeight: "20px" }}>Внутренний кошелек</Typography>
					<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
						{`${account ? account.wallet.money / 100 : 0} ${account?.wallet.currency || "RUB"}.`}
					</Typography>
				</Box>
			</Box>
		</Box>
		<UserPrivilegeDecrement
		userId={userId}
		/>
		</Box>
	);
};