From b006bea51e8638e8da6b664f2db010345351e35e Mon Sep 17 00:00:00 2001 From: Nikolai Date: Wed, 21 Sep 2022 16:47:45 +0300 Subject: [PATCH] =?UTF-8?q?=D1=8E=D1=80=20=D0=BB=D0=B8=D1=86=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LoggedIn/Content/Entities/index.tsx | 142 ++++++++++++++++++ .../LoggedIn/Content/Users/index.tsx | 15 +- src/Components/LoggedIn/Content/index.tsx | 3 +- .../LoggedIn/ModalEntities/index.tsx | 115 ++++++++++++++ src/Components/LoggedIn/ModalUser/index.tsx | 126 +++++++--------- src/Components/LoggedIn/index.tsx | 2 + src/index.tsx | 6 +- 7 files changed, 332 insertions(+), 77 deletions(-) create mode 100644 src/Components/LoggedIn/Content/Entities/index.tsx create mode 100644 src/Components/LoggedIn/ModalEntities/index.tsx diff --git a/src/Components/LoggedIn/Content/Entities/index.tsx b/src/Components/LoggedIn/Content/Entities/index.tsx new file mode 100644 index 0000000..f67a7a3 --- /dev/null +++ b/src/Components/LoggedIn/Content/Entities/index.tsx @@ -0,0 +1,142 @@ +import * as React from "react"; +import { useNavigate } from "react-router-dom"; +import { Typography } from "@mui/material"; +import Table from '@mui/material/Table'; +import TableHead from '@mui/material/TableHead'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; +import theme from "../../../../theme"; + + +const Users: React.FC = () => { + const [selectedValue, setSelectedValue] = React.useState('a'); + const handleChange = (event: React.ChangeEvent) => { + setSelectedValue(event.target.value); + }; + + const navigate = useNavigate(); + + return ( + + + Юридические лица + + + + + + + + ID + + + + + Дата / время регистрации + + + + + + + navigate("/modalEntities") }> + + + 1 + + + + + 2022 + + + + + navigate("/modalEntities") }> + + + 2 + + + + + 2021 + + + + + navigate("/modalEntities") }> + + + 3 + + + + + 2020 + + + + +
+ + ); +} + + +export default Users; \ No newline at end of file diff --git a/src/Components/LoggedIn/Content/Users/index.tsx b/src/Components/LoggedIn/Content/Users/index.tsx index 0ba0d7c..3c8f83e 100644 --- a/src/Components/LoggedIn/Content/Users/index.tsx +++ b/src/Components/LoggedIn/Content/Users/index.tsx @@ -289,8 +289,9 @@ const Users: React.FC = () => { + height: "100px", + cursor: "pointer" + }} onClick={ () => navigate("/modalUser") }> { + height: "100px", + cursor: "pointer" + }} onClick={ () => navigate("/modalUser") }> { + height: "100px", + cursor: "pointer" + }} onClick={ () => navigate("/modalUser") }> = ({ section }) => { - const componentsArray = [ , , , ]; + const componentsArray = [ , , , , ]; return ( diff --git a/src/Components/LoggedIn/ModalEntities/index.tsx b/src/Components/LoggedIn/ModalEntities/index.tsx new file mode 100644 index 0000000..90d447b --- /dev/null +++ b/src/Components/LoggedIn/ModalEntities/index.tsx @@ -0,0 +1,115 @@ +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 theme from "../../../theme"; + + +export interface MWProps { + open: boolean +} + +const ModalEntities = ({open}: MWProps ) => { + const [value, setValue] = React.useState(0); + + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + + return ( + + + + + + Юридическое лицо + + + + + + + + + + { value == 0 && ( + + Id: 1 + Email: 2 + Номер телефона: 3 + + ) } + + { value == 1 && ( + + Дата/время + Сумма + Id long + Статус платежа + + ) } + + + + + + + ); +} + + +export default ModalEntities; diff --git a/src/Components/LoggedIn/ModalUser/index.tsx b/src/Components/LoggedIn/ModalUser/index.tsx index ea5f8cb..621bfcb 100644 --- a/src/Components/LoggedIn/ModalUser/index.tsx +++ b/src/Components/LoggedIn/ModalUser/index.tsx @@ -1,6 +1,8 @@ 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 theme from "../../../theme"; export interface MWProps { @@ -8,6 +10,12 @@ export interface MWProps { } const ModalUser = ({open}: MWProps ) => { + const [value, setValue] = React.useState(0); + + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + return ( { top: "50%", left: "50%", transform: "translate(-50%, -50%)", - width: "90%", - height: "90%", + width: "30%", + height: "30%", bgcolor: theme.palette.menu.main, boxShadow: 24, color: theme.palette.secondary.main, @@ -42,76 +50,58 @@ const ModalUser = ({open}: MWProps ) => { - - - ТЕКСТ - - + - ТЕКСТ - - + - ТЕКСТ - - - ТЕКСТ - - - - Id: 1 - Email: 2 - Номер телефона: 3 - + width: "180px", + fontSize: "15px" + }} + label="История транзакций" /> + + + { value == 0 && ( + + Id: 1 + Email: 2 + Номер телефона: 3 + + ) } + + { value == 1 && ( + + Дата/время + Сумма + Id long + Статус платежа + + ) } + diff --git a/src/Components/LoggedIn/index.tsx b/src/Components/LoggedIn/index.tsx index e8c1e7d..1149a5d 100644 --- a/src/Components/LoggedIn/index.tsx +++ b/src/Components/LoggedIn/index.tsx @@ -7,6 +7,7 @@ import Header from "./Header"; import Content from "./Content"; import ModalAdmin from "./ModalAdmin"; import ModalUser from "./ModalUser"; +import ModalEntities from "./ModalEntities"; import theme from "../../theme"; import { useMatch } from "react-router-dom"; @@ -48,6 +49,7 @@ const LoggedIn: React.FC = ({ section }) => { + diff --git a/src/index.tsx b/src/index.tsx index bee00d6..84f5e72 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -20,9 +20,11 @@ root.render( } /> } /> } /> + } /> - } /> - } /> + } /> + } /> + } /> }