feat: UserTab desktop
This commit is contained in:
IlyaDoronin
parent
3cbcac35b9
commit
1f0a648876
@ -21,7 +21,15 @@ export const MOCK_DATA_USERS = [
|
||||
|
||||
export type TMockData = typeof MOCK_DATA_USERS;
|
||||
|
||||
export type UsersType = { login: string; email: string; phoneNumber: string; isDeleted: boolean; createdAt: string }[];
|
||||
export type UserType = {
|
||||
_id: string;
|
||||
login: string;
|
||||
email: string;
|
||||
phoneNumber: string;
|
||||
isDeleted: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
export const getRoles_mock = (): Promise<TMockData> => {
|
||||
return new Promise((resolve) => {
|
||||
|
||||
4
src/assets/icons/check.svg
Normal file
4
src/assets/icons/check.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.08717 1.85277C9.51062 1.18151 10.4894 1.18151 10.9128 1.85277C11.5762 2.90442 12.8955 3.33307 14.0503 2.87221C14.7875 2.57804 15.5793 3.15335 15.5273 3.9453C15.4459 5.18603 16.2612 6.30826 17.4664 6.61422C18.2357 6.8095 18.5381 7.74037 18.0306 8.35052C17.2354 9.30642 17.2354 10.6936 18.0306 11.6495C18.5381 12.2596 18.2357 13.1905 17.4664 13.3858C16.2612 13.6917 15.4459 14.814 15.5273 16.0547C15.5793 16.8467 14.7875 17.422 14.0503 17.1278C12.8955 16.6669 11.5762 17.0956 10.9128 18.1472C10.4894 18.8185 9.51062 18.8185 9.08717 18.1472C8.42377 17.0956 7.10451 16.6669 5.94967 17.1278C5.21254 17.422 4.4207 16.8467 4.47269 16.0547C4.55413 14.814 3.73878 13.6917 2.53361 13.3858C1.76435 13.1905 1.46189 12.2596 1.96945 11.6495C2.76462 10.6936 2.76462 9.30643 1.96945 8.35052C1.46189 7.74037 1.76435 6.8095 2.53361 6.61422C3.73878 6.30826 4.55413 5.18604 4.47269 3.9453C4.4207 3.15335 5.21254 2.57804 5.94968 2.87221C7.10451 3.33307 8.42377 2.90442 9.08717 1.85277Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path d="M6.65234 10.5977L8.68495 12.5107L13.2284 7.84766" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
src/assets/icons/package.svg
Normal file
3
src/assets/icons/package.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 8C12 7.5 12 6.1 12 4.5C12 2.5 11 1 9 1C7 1 6 3 6 4.5C6 5.7 6 7.33333 6 8M2.8 5.5H15.2L16.5 16.5H1.5L2.8 5.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 309 B |
3
src/assets/icons/transactions.svg
Normal file
3
src/assets/icons/transactions.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.66602 5.83268H16.666M13.3327 1.66602L17.4993 5.83268L13.3327 9.99935M18.3327 14.166H3.33268M6.66602 9.99935L2.49935 14.166L6.66602 18.3327" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 338 B |
4
src/assets/icons/user.svg
Normal file
4
src/assets/icons/user.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.25 9C17.25 11.4433 16.1888 13.6378 14.4998 15.1495C13.0397 16.4563 11.1135 17.25 9 17.25C6.88655 17.25 4.96026 16.4563 3.50019 15.1495C1.81118 13.6378 0.75 11.4433 0.75 9C0.75 4.44365 4.44365 0.75 9 0.75C13.5563 0.75 17.25 4.44365 17.25 9Z" stroke="black" stroke-width="1.5"/>
|
||||
<circle cx="9" cy="7.6001" r="2.25" stroke="black" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 465 B |
@ -17,6 +17,7 @@ import Sections from "@pages/Sections";
|
||||
import Dashboard from "@pages/dashboard";
|
||||
import Error404 from "@pages/Error404";
|
||||
import Users from "@pages/dashboard/Content/Users";
|
||||
import ModalUser from "@root/pages/dashboard/ModalUser";
|
||||
import Entities from "@pages/dashboard/Content/Entities";
|
||||
import Tariffs from "@pages/dashboard/Content/Tariffs";
|
||||
import DiscountManagement from "@root/pages/dashboard/Content/DiscountManagement/DiscountManagement";
|
||||
@ -29,6 +30,7 @@ import "./index.css";
|
||||
|
||||
const componentsArray = [
|
||||
["/users", <Users />],
|
||||
["/users/:userId", <ModalUser />],
|
||||
["/entities", <Entities />],
|
||||
["/tariffs", <Tariffs />],
|
||||
["/discounts", <DiscountManagement />],
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
|
||||
import { Skeleton } from "@mui/material";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import DataGrid from "@kitUI/datagrid";
|
||||
|
||||
import type { UsersType } from "@root/api/roles";
|
||||
import type { UserType } from "@root/api/roles";
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{ field: "login", headerName: "Логин", width: 100 },
|
||||
@ -15,14 +16,17 @@ const columns: GridColDef[] = [
|
||||
|
||||
interface Props {
|
||||
handleSelectionChange: (selectionModel: GridSelectionModel) => void;
|
||||
users: any
|
||||
users: UserType[];
|
||||
}
|
||||
|
||||
export default function ServiceUsersDG({ handleSelectionChange, users }: Props) {
|
||||
if (!users) {
|
||||
return <Skeleton>Loading...</Skeleton>;
|
||||
}
|
||||
const gridData = users.users.map((user:any) => ({
|
||||
export default function ServiceUsersDG({
|
||||
handleSelectionChange,
|
||||
users = [],
|
||||
}: Props) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const gridData = users.map((user) => ({
|
||||
id: user._id,
|
||||
login: user.login,
|
||||
email: user.email,
|
||||
phoneNumber: user.phoneNumber,
|
||||
@ -31,14 +35,21 @@ export default function ServiceUsersDG({ handleSelectionChange, users }: Props)
|
||||
}));
|
||||
|
||||
return (
|
||||
<DataGrid
|
||||
sx={{ maxWidth: "90%", mt: "30px" }}
|
||||
getRowId={(users: any) => users.login}
|
||||
checkboxSelection={true}
|
||||
rows={gridData}
|
||||
columns={columns}
|
||||
components={{ Toolbar: GridToolbar }}
|
||||
onSelectionModelChange={handleSelectionChange}
|
||||
/>
|
||||
<>
|
||||
{users.length ? (
|
||||
<DataGrid
|
||||
sx={{ maxWidth: "90%", mt: "30px" }}
|
||||
getRowId={(users: any) => users.login}
|
||||
checkboxSelection={true}
|
||||
rows={gridData}
|
||||
columns={columns}
|
||||
components={{ Toolbar: GridToolbar }}
|
||||
onSelectionModelChange={handleSelectionChange}
|
||||
onRowClick={({ row }) => navigate(row.id)}
|
||||
/>
|
||||
) : (
|
||||
<Skeleton>Loading...</Skeleton>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -30,7 +30,12 @@ import { getRoles_mock, TMockData } from "../../../api/roles";
|
||||
|
||||
import theme from "../../../theme";
|
||||
|
||||
import type { UsersType } from "../../../api/roles";
|
||||
import type { UserType } from "../../../api/roles";
|
||||
|
||||
type RegisteredUsersResponse = {
|
||||
tatalPages: number;
|
||||
users: UserType[];
|
||||
};
|
||||
|
||||
const baseUrl =
|
||||
process.env.NODE_ENV === "production" ? "" : "https://admin.pena.digital";
|
||||
@ -85,8 +90,8 @@ const Users: React.FC = () => {
|
||||
handleChangeData();
|
||||
|
||||
const [roles, setRoles] = React.useState<TMockData>([]);
|
||||
const [users, setUsers] = React.useState<UsersType>();
|
||||
const [manager, setManager] = React.useState<UsersType>();
|
||||
const [users, setUsers] = React.useState<UserType[]>([]);
|
||||
const [manager, setManager] = React.useState<UserType[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
async function axiosRoles() {
|
||||
@ -103,12 +108,12 @@ const Users: React.FC = () => {
|
||||
}
|
||||
async function gettingRegisteredUsers() {
|
||||
try {
|
||||
const usersResponse = await makeRequest<never, UsersType>({
|
||||
const { users } = await makeRequest<never, RegisteredUsersResponse>({
|
||||
method: "get",
|
||||
url: baseUrl + "/user/",
|
||||
});
|
||||
|
||||
setUsers(usersResponse);
|
||||
setUsers(users);
|
||||
} catch (error) {
|
||||
console.error("Ошибка при получении пользователей!");
|
||||
}
|
||||
@ -116,12 +121,12 @@ const Users: React.FC = () => {
|
||||
|
||||
async function gettingListManagers() {
|
||||
try {
|
||||
const managersResponse = await makeRequest<never, UsersType>({
|
||||
const { users } = await makeRequest<never, RegisteredUsersResponse>({
|
||||
method: "get",
|
||||
url: baseUrl + "/user/",
|
||||
});
|
||||
|
||||
setManager(managersResponse);
|
||||
setManager(users);
|
||||
} catch (error) {
|
||||
console.error("Ошибка при получении менеджеров!");
|
||||
}
|
||||
|
||||
117
src/pages/dashboard/ModalUser/PurchaseTab.tsx
Normal file
117
src/pages/dashboard/ModalUser/PurchaseTab.tsx
Normal file
@ -0,0 +1,117 @@
|
||||
import { DataGrid } from "@mui/x-data-grid";
|
||||
import { useTheme } from "@mui/material";
|
||||
|
||||
import type { GridColDef } from "@mui/x-data-grid";
|
||||
|
||||
const COLUMNS: GridColDef[] = [
|
||||
{
|
||||
field: "id",
|
||||
headerName: "ID",
|
||||
width: 30,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: "dateTime",
|
||||
headerName: "Дата / время",
|
||||
width: 150,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: "email",
|
||||
headerName: "Почта",
|
||||
width: 110,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: "summa",
|
||||
headerName: "Сумма",
|
||||
type: "number",
|
||||
width: 110,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: "idLong",
|
||||
headerName: "ID long",
|
||||
type: "number",
|
||||
width: 110,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: "paymentStatus",
|
||||
headerName: "Статус платежа",
|
||||
width: 160,
|
||||
sortable: false,
|
||||
},
|
||||
];
|
||||
|
||||
const ROWS = [
|
||||
{
|
||||
id: "row_1",
|
||||
dateTime: "22.09.22 12:15",
|
||||
email: "asd@mail.ru",
|
||||
summa: 100500,
|
||||
idLong: 123,
|
||||
paymentStatus: "В обработке",
|
||||
},
|
||||
{
|
||||
id: "row_2",
|
||||
dateTime: "22.09.22 12:15",
|
||||
email: "asd@mail.ru",
|
||||
summa: 100500,
|
||||
idLong: 123,
|
||||
paymentStatus: "В обработке",
|
||||
},
|
||||
{
|
||||
id: "row_3",
|
||||
dateTime: "22.09.22 12:15",
|
||||
email: "asd@mail.ru",
|
||||
summa: 100500,
|
||||
idLong: 123,
|
||||
paymentStatus: "В обработке",
|
||||
},
|
||||
{
|
||||
id: "row_4",
|
||||
dateTime: "22.09.22 12:15",
|
||||
email: "asd@mail.ru",
|
||||
summa: 100500,
|
||||
idLong: 123,
|
||||
paymentStatus: "В обработке",
|
||||
},
|
||||
{
|
||||
id: "row_5",
|
||||
dateTime: "22.09.22 12:15",
|
||||
email: "asd@mail.ru",
|
||||
summa: 100500,
|
||||
idLong: 123,
|
||||
paymentStatus: "В обработке",
|
||||
},
|
||||
];
|
||||
|
||||
export const PurchaseTab = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<DataGrid
|
||||
rows={ROWS}
|
||||
columns={COLUMNS}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
disableSelectionOnClick
|
||||
experimentalFeatures={{ newEditingApi: true }}
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
height: "350px",
|
||||
overflowY: "auto",
|
||||
"& .MuiDataGrid-iconSeparator": {
|
||||
display: "none",
|
||||
},
|
||||
"& .css-levciy-MuiTablePagination-displayedRows": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
65
src/pages/dashboard/ModalUser/UserTab.tsx
Normal file
65
src/pages/dashboard/ModalUser/UserTab.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
type UserTabProps = {
|
||||
user: {
|
||||
id: number;
|
||||
registrationDate: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
type: string;
|
||||
fullname: string;
|
||||
walletBalance: string;
|
||||
};
|
||||
};
|
||||
|
||||
export const UserTab = ({ user }: UserTabProps) => (
|
||||
<Box sx={{ display: "flex", columnGap: "15px" }}>
|
||||
<Box sx={{ maxWidth: "300px", width: "100%" }}>
|
||||
<Box sx={{ marginBottom: "25px" }}>
|
||||
<Typography sx={{ lineHeight: "19px" }}>ID</Typography>
|
||||
<Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
|
||||
{" "}
|
||||
{user.id}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ marginBottom: "25px" }}>
|
||||
<Typography sx={{ lineHeight: "19px" }}>Дата регистрации</Typography>
|
||||
<Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
|
||||
{user.registrationDate}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ marginBottom: "25px" }}>
|
||||
<Typography sx={{ lineHeight: "19px" }}>Email</Typography>
|
||||
<Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
|
||||
{user.email}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ marginBottom: "25px" }}>
|
||||
<Typography sx={{ lineHeight: "19px" }}>Телефон</Typography>
|
||||
<Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
|
||||
{user.phone}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ marginBottom: "25px" }}>
|
||||
<Typography sx={{ lineHeight: "19px" }}>Тип:</Typography>
|
||||
<Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
|
||||
{user.type}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ maxWidth: "300px", width: "100%" }}>
|
||||
<Box sx={{ marginBottom: "25px" }}>
|
||||
<Typography sx={{ lineHeight: "19px" }}>ФИО:</Typography>
|
||||
<Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
|
||||
{user.fullname}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ marginBottom: "25px" }}>
|
||||
<Typography sx={{ lineHeight: "19px" }}>Внутренний кошелек</Typography>
|
||||
<Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
|
||||
{user.walletBalance}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
@ -1,183 +1,178 @@
|
||||
import * as React from "react";
|
||||
import { useLinkClickHandler } from "react-router-dom";
|
||||
import { Box, Modal, Fade, Backdrop, Typography } from "@mui/material";
|
||||
import Tabs from "@mui/material/Tabs";
|
||||
import Tab from "@mui/material/Tab";
|
||||
import { DataGrid, GridColDef } from '@mui/x-data-grid';
|
||||
import theme from "../../../theme";
|
||||
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";
|
||||
|
||||
export interface MWProps {
|
||||
open: boolean
|
||||
}
|
||||
import { authStore } from "@root/stores/auth";
|
||||
import theme from "@root/theme";
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{
|
||||
field: 'id',
|
||||
headerName: 'ID',
|
||||
width: 30,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: 'dateTime',
|
||||
headerName: 'Дата / время',
|
||||
width: 150,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: 'email',
|
||||
headerName: 'Почта',
|
||||
width: 110,
|
||||
sortable: false,
|
||||
},{
|
||||
field: 'summa',
|
||||
headerName: 'Сумма',
|
||||
type: 'number',
|
||||
width: 110,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: 'idLong',
|
||||
headerName: 'ID long',
|
||||
type: 'number',
|
||||
width: 110,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: 'paymentStatus',
|
||||
headerName: 'Статус платежа',
|
||||
width: 160,
|
||||
sortable: false,
|
||||
},
|
||||
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 rows = [
|
||||
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
|
||||
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
|
||||
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
|
||||
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
|
||||
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
|
||||
];
|
||||
const baseUrl =
|
||||
process.env.NODE_ENV === "production" ? "" : "https://hub.pena.digital";
|
||||
|
||||
const ModalUser = ({open}: MWProps ) => {
|
||||
const [value, setValue] = React.useState(0);
|
||||
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);
|
||||
}, []);
|
||||
|
||||
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<>
|
||||
<Modal
|
||||
aria-labelledby="transition-modal-title"
|
||||
aria-describedby="transition-modal-description"
|
||||
open={ open }
|
||||
onClose={ useLinkClickHandler('/users') }
|
||||
open
|
||||
onClose={useLinkClickHandler("/users")}
|
||||
closeAfterTransition
|
||||
BackdropComponent={Backdrop}
|
||||
BackdropProps={{
|
||||
timeout: 500,
|
||||
}}
|
||||
>
|
||||
<Fade in={open}>
|
||||
<Box sx={{
|
||||
position: "absolute" as "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "980px",
|
||||
height: "480px",
|
||||
bgcolor: theme.palette.menu.main,
|
||||
boxShadow: 24,
|
||||
color: theme.palette.secondary.main,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<Typography id="transition-modal-title" variant="caption">
|
||||
<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%",
|
||||
marginTop: "50px",
|
||||
display: "flex"
|
||||
}}>
|
||||
|
||||
<Box sx={{ width: "100%", height: "100%", display: "flex" }}>
|
||||
<Tabs
|
||||
orientation="vertical"
|
||||
variant="scrollable"
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
onChange={(event: SyntheticEvent, newValue: number) =>
|
||||
setValue(newValue)
|
||||
}
|
||||
aria-label="Vertical tabs example"
|
||||
sx={{
|
||||
borderRight: 1,
|
||||
borderColor: theme.palette.secondary.main,
|
||||
"& .MuiTab-root.Mui-selected": {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
TabIndicatorProps={{style: {
|
||||
background: theme.palette.secondary.main
|
||||
}}}
|
||||
sx={{ padding: "10px", width: "100%", maxWidth: "276px" }}
|
||||
TabIndicatorProps={{ style: { background: "transparent" } }}
|
||||
>
|
||||
<Tab sx={{
|
||||
color: theme.palette.grayDisabled.main,
|
||||
width: "180px",
|
||||
fontSize: "15px"
|
||||
}}
|
||||
label="Пользовательская информация" />
|
||||
<Tab sx={{
|
||||
color: theme.palette.grayDisabled.main,
|
||||
width: "180px",
|
||||
fontSize: "15px"
|
||||
}}
|
||||
label="История транзакций" />
|
||||
</Tabs>
|
||||
|
||||
{ value == 0 && (
|
||||
<Box sx={{ marginLeft: "20px" }}>
|
||||
<Typography>Id: 1</Typography>
|
||||
<Typography>Email: 2</Typography>
|
||||
<Typography>Номер телефона: 3</Typography>
|
||||
</Box>
|
||||
) }
|
||||
|
||||
{ value == 1 && (
|
||||
<Box sx={{ marginLeft: "20px" }}>
|
||||
<DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
disableSelectionOnClick
|
||||
experimentalFeatures={{ newEditingApi: true }}
|
||||
{TABS.map(({ name, icon }) => (
|
||||
<Tab
|
||||
icon={<img src={icon} alt={name} />}
|
||||
iconPosition="start"
|
||||
key={name}
|
||||
label={name}
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
width: "720px",
|
||||
height: "350px",
|
||||
overflowY: "auto",
|
||||
"& .MuiDataGrid-iconSeparator": {
|
||||
display: "none"
|
||||
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)",
|
||||
},
|
||||
"& .css-levciy-MuiTablePagination-displayedRows": {
|
||||
color: theme.palette.secondary.main
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) }
|
||||
))}
|
||||
</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>
|
||||
</React.Fragment>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
export default ModalUser;
|
||||
|
||||
@ -59,7 +59,6 @@ export default () => {
|
||||
</Box>
|
||||
|
||||
<ModalAdmin open={useMatch("/modalAdmin") !== null} />
|
||||
<ModalUser open={useMatch("/modalUser") !== null} />
|
||||
<ModalEntities open={useMatch("/modalEntities") !== null} />
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { Theme } from "@mui/material/styles";
|
||||
import { createTheme, PaletteColorOptions, ThemeOptions } from "@mui/material";
|
||||
import { deepmerge } from "@mui/utils";
|
||||
//import { createTheme } from "./types";
|
||||
@ -19,6 +18,14 @@ declare module "@mui/material/styles" {
|
||||
primary: {
|
||||
main: string;
|
||||
};
|
||||
common: {
|
||||
black: string;
|
||||
white: string;
|
||||
};
|
||||
background: {
|
||||
default: string;
|
||||
paper: string;
|
||||
};
|
||||
secondary: {
|
||||
main: string;
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user