92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
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";
|
||
|
||
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={{
|
||
display: mobile ? "block" : "flex",
|
||
columnGap: "15px",
|
||
padding: "25px",
|
||
}}
|
||
>
|
||
<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>
|
||
);
|
||
};
|