юр лица

2022-09-21 16:47:45 +03:00 · 2022-09-21 16:47:45 +03:00 · b006bea51e
commit b006bea51e
parent ca6030ba6f
7 changed files with 332 additions and 77 deletions
--- a/src/Components/LoggedIn/Content/Entities/index.tsx
+++ 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<HTMLInputElement>) => {
+    setSelectedValue(event.target.value);
+  };
+
+  const navigate = useNavigate();
+
+  return (
+    <React.Fragment>
+      <Typography 
+        variant="subtitle1"  
+        sx={{
+          width: "90%",
+          height: "60px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          color: theme.palette.secondary.main
+      }}>
+        Юридические лица
+      </Typography>
+
+      <Table sx={{ 
+        width: "90%",
+        border: "2px solid",
+        borderColor: theme.palette.grayLight.main,
+        marginTop: "35px",
+      }} aria-label="simple table">
+        <TableHead>
+          <TableRow sx={{
+            borderBottom: "2px solid",
+            borderColor: theme.palette.grayLight.main,
+            height: "100px"
+          }}>
+            <TableCell sx={{ textAlign: "center" }}>
+              <Typography 
+                variant="h4" 
+                sx={{
+                color: theme.palette.secondary.main,
+              }}>
+                ID
+              </Typography>
+            </TableCell>
+            <TableCell sx={{ textAlign: "center" }}>
+              <Typography 
+                variant="h4" 
+                sx={{
+                color: theme.palette.secondary.main,
+              }}>
+                Дата / время регистрации
+              </Typography>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          <TableRow sx={{
+            borderBottom: "2px solid",
+            borderColor: theme.palette.grayLight.main,
+            height: "100px",
+            cursor: "pointer"
+          }} onClick={ () => navigate("/modalEntities") }>
+            <TableCell sx={{ textAlign: "center" }}>
+              <Typography sx={{
+                color: theme.palette.secondary.main
+              }}>
+                1
+              </Typography>
+            </TableCell>
+            <TableCell sx={{ textAlign: "center" }}>
+              <Typography sx={{
+                color: theme.palette.secondary.main
+              }}>
+                2022
+              </Typography>
+            </TableCell>
+          </TableRow>
+
+          <TableRow sx={{
+            borderBottom: "2px solid",
+            borderColor: theme.palette.grayLight.main,
+            height: "100px",
+            cursor: "pointer"
+          }} onClick={ () => navigate("/modalEntities") }>
+            <TableCell sx={{ textAlign: "center" }}>
+              <Typography sx={{
+                color: theme.palette.secondary.main
+              }}>
+                2
+              </Typography>
+            </TableCell>
+            <TableCell sx={{ textAlign: "center" }}>
+              <Typography sx={{
+                color: theme.palette.secondary.main
+              }}>
+                2021
+              </Typography>
+            </TableCell>
+          </TableRow>
+
+          <TableRow sx={{
+            borderBottom: "1px solid",
+            border: theme.palette.secondary.main,
+            height: "100px",
+            cursor: "pointer"
+          }} onClick={ () => navigate("/modalEntities") }>
+            <TableCell sx={{ textAlign: "center" }}>
+              <Typography sx={{
+                color: theme.palette.secondary.main
+              }}>
+                3
+              </Typography>
+            </TableCell>
+            <TableCell sx={{ textAlign: "center" }}>
+              <Typography sx={{
+                color: theme.palette.secondary.main
+              }}>
+                2020
+              </Typography>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </React.Fragment>
+  );
+}
+
+
+export default Users;
--- a/src/Components/LoggedIn/Content/Users/index.tsx
+++ b/src/Components/LoggedIn/Content/Users/index.tsx
@ -289,8 +289,9 @@ const Users: React.FC = () =>  {
          <TableRow sx={{
            borderBottom: "2px solid",
            borderColor: theme.palette.grayLight.main,
-            height: "100px"
-          }}>
+            height: "100px",
+            cursor: "pointer"
+          }} onClick={ () => navigate("/modalUser") }>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography sx={{
                color: theme.palette.secondary.main
@ -303,8 +304,9 @@ const Users: React.FC = () =>  {
          <TableRow sx={{
            borderBottom: "2px solid",
            borderColor: theme.palette.grayLight.main,
-            height: "100px"
-          }}>
+            height: "100px",
+            cursor: "pointer"
+          }} onClick={ () => navigate("/modalUser") }>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography sx={{
                color: theme.palette.secondary.main
@ -317,8 +319,9 @@ const Users: React.FC = () =>  {
          <TableRow sx={{
            borderBottom: "1px solid",
            border: theme.palette.secondary.main,
-            height: "100px"
-          }}>
+            height: "100px",
+            cursor: "pointer"
+          }} onClick={ () => navigate("/modalUser") }>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography sx={{
                color: theme.palette.secondary.main
--- a/src/Components/LoggedIn/Content/index.tsx
+++ b/src/Components/LoggedIn/Content/index.tsx
@ -4,6 +4,7 @@ import Users from "./Users";
 import Promocode from "./Promocode";
 import Support from "./Support";
 import Tariffs from "./Tariffs";
+import Entities from "./Entities";


 export interface MWProps {
@ -11,7 +12,7 @@ export interface MWProps {
 }

 const Content: React.FC<MWProps> = ({ section }) =>  {
-  const componentsArray = [ <Users />, <Promocode />, <Support />, <Tariffs /> ];
+  const componentsArray = [ <Users />, <Promocode />, <Support />, <Tariffs />, <Entities /> ];

  return (
    <React.Fragment>
--- a/src/Components/LoggedIn/ModalEntities/index.tsx
+++ 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 (
+    <React.Fragment>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={ open }
+        onClose={ useLinkClickHandler("/entities") }
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
+      >
+        <Fade in={open}>
+          <Box sx={{
+            position: "absolute" as "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: "30%",
+            height: "30%",
+            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">
+              Юридическое лицо
+            </Typography>
+
+            <Box sx={{
+              width: "100%",
+              marginTop: "50px",
+              display: "flex"
+            }}>
+
+              <Tabs
+                orientation="vertical"
+                variant="scrollable"
+                value={value}
+                onChange={handleChange}
+                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
+                }}}
+              >
+                <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" }}>
+                  <Typography>Дата/время</Typography>
+                  <Typography>Сумма</Typography>
+                  <Typography>Id long</Typography>
+                  <Typography>Статус платежа</Typography>
+                </Box>
+              ) }
+
+            </Box>
+          </Box>
+        </Fade>
+      </Modal>
+    </React.Fragment>
+  );
+}
+
+
+export default ModalEntities;
--- 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 (
    <React.Fragment>
      <Modal
@ -27,8 +35,8 @@ const ModalUser = ({open}: MWProps ) =>  {
            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 ) =>  {

            <Box sx={{
              width: "100%",
-              marginTop: "15px",
+              marginTop: "50px",
              display: "flex"
            }}>
-              <Box sx={{
-                backgroundColor: theme.palette.grayMedium.main,
-                width: "155px"
-              }}>
-                <Typography variant="h4" sx={{
-                  backgroundColor: theme.palette.grayMedium.main,
-                  width: "100%",
-                  height: "55px",   //205px
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  cursor: "pointer",
-                }}>
-                  ТЕКСТ
-                </Typography>
-                <Typography variant="h4" sx={{
-                  backgroundColor: theme.palette.grayMedium.main,
+              
+              <Tabs
+                orientation="vertical"
+                variant="scrollable"
+                value={value}
+                onChange={handleChange}
+                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
+                }}}
+              >
+                <Tab sx={{ 
                  color: theme.palette.grayDisabled.main,
-                  width: "100%",
-                  height: "55px",   //205px
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  cursor: "pointer",
-                  textAlign: "center"
-                }}>
-                  ТЕКСТ
-                </Typography>
-                <Typography variant="h4" sx={{
-                  backgroundColor: theme.palette.grayMedium.main,
+                  width: "180px",
+                  fontSize: "15px"
+                }} 
+                label="Пользовательская информация" />
+                <Tab sx={{ 
                  color: theme.palette.grayDisabled.main,
-                  width: "100%",
-                  height: "55px",   //205px
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  cursor: "pointer",
-                  textAlign: "center"
-                }}>
-                  ТЕКСТ
-                </Typography>
-                <Typography variant="h4" sx={{
-                  backgroundColor: theme.palette.grayMedium.main,
-                  color: theme.palette.grayDisabled.main,
-                  width: "100%",
-                  height: "55px",   //205px
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  cursor: "pointer",
-                  textAlign: "center"
-                }}>
-                  ТЕКСТ
-                </Typography>
-              </Box>
-              <Box sx={{
-                width: "200px",
-                marginLeft: "20px"
-              }}>
-                <Typography>Id: 1</Typography>
-                <Typography>Email: 2</Typography>
-                <Typography>Номер телефона: 3</Typography>
-              </Box>
+                  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" }}>
+                  <Typography>Дата/время</Typography>
+                  <Typography>Сумма</Typography>
+                  <Typography>Id long</Typography>
+                  <Typography>Статус платежа</Typography>
+                </Box>
+              ) }
+
            </Box>
          </Box>
        </Fade>
--- 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<MWProps> = ({ section }) =>  {

      <ModalAdmin open={useMatch('/modalAdmin') !== null}/>
      <ModalUser open={useMatch('/modalUser') !== null}/>
+      <ModalEntities open={useMatch('/modalEntities') !== null}/>
        
      </ThemeProvider>
    </React.Fragment>
--- a/src/index.tsx
+++ b/src/index.tsx
@ -20,9 +20,11 @@ root.render(
                <Route path="/promocode" element={ <LoggedIn section={1} /> } />
                <Route path="/support"   element={ <LoggedIn section={2} /> } />
                <Route path="/tariffs"   element={ <LoggedIn section={3} /> } />
+                <Route path="/entities"  element={ <LoggedIn section={4} /> } />

-                <Route path="/modalAdmin" element={ <LoggedIn section={-1} /> } />
-                <Route path="/modalUser" element={ <LoggedIn section={-1} /> } />
+                <Route path="/modalAdmin"    element={ <LoggedIn section={-1} /> } />
+                <Route path="/modalUser"     element={ <LoggedIn section={-1} /> } />
+                <Route path="/modalEntities" element={ <LoggedIn section={-1} /> } />
                <Route
                    path="*"
                    element={ <Error404 /> }