diff --git a/package-lock.json b/package-lock.json index b40e07e..b4e1616 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@mui/icons-material": "^5.10.3", "@mui/material": "^5.10.5", "@mui/styled-engine-sc": "^5.10.3", + "@mui/x-data-grid": "^5.17.3", "@mui/x-date-pickers": "^5.0.2", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", @@ -3716,6 +3717,31 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/@mui/x-data-grid": { + "version": "5.17.3", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.17.3.tgz", + "integrity": "sha512-EBTD7nfV3b6Zz7X8IS0BR4x3ihzHqGAemP6Ah22N/oHTIz+HWsCMtsYWRs5SjQewVjY8JXJ3fcJJEgldOcaqqg==", + "dependencies": { + "@babel/runtime": "^7.18.9", + "@mui/utils": "^5.10.3", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "reselect": "^4.1.6" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@mui/material": "^5.4.1", + "@mui/system": "^5.4.1", + "react": "^17.0.2 || ^18.0.0", + "react-dom": "^17.0.2 || ^18.0.0" + } + }, "node_modules/@mui/x-date-pickers": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.2.tgz", @@ -15137,6 +15163,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "node_modules/reselect": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", + "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -20173,6 +20204,18 @@ } } }, + "@mui/x-data-grid": { + "version": "5.17.3", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.17.3.tgz", + "integrity": "sha512-EBTD7nfV3b6Zz7X8IS0BR4x3ihzHqGAemP6Ah22N/oHTIz+HWsCMtsYWRs5SjQewVjY8JXJ3fcJJEgldOcaqqg==", + "requires": { + "@babel/runtime": "^7.18.9", + "@mui/utils": "^5.10.3", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "reselect": "^4.1.6" + } + }, "@mui/x-date-pickers": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.2.tgz", @@ -28319,6 +28362,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "reselect": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", + "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", diff --git a/package.json b/package.json index 768ca30..b03290c 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@mui/icons-material": "^5.10.3", "@mui/material": "^5.10.5", "@mui/styled-engine-sc": "^5.10.3", + "@mui/x-data-grid": "^5.17.3", "@mui/x-date-pickers": "^5.0.2", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", diff --git a/src/Components/LoggedIn/ModalEntities/index.tsx b/src/Components/LoggedIn/ModalEntities/index.tsx index 90d447b..201ace2 100644 --- a/src/Components/LoggedIn/ModalEntities/index.tsx +++ b/src/Components/LoggedIn/ModalEntities/index.tsx @@ -3,6 +3,7 @@ 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"; @@ -10,6 +11,54 @@ export interface MWProps { open: boolean } +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: 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 ModalEntities = ({open}: MWProps ) => { const [value, setValue] = React.useState(0); @@ -36,8 +85,8 @@ const ModalEntities = ({open}: MWProps ) => { top: "50%", left: "50%", transform: "translate(-50%, -50%)", - width: "30%", - height: "30%", + width: "72%", + height: "60%", bgcolor: theme.palette.menu.main, boxShadow: 24, color: theme.palette.secondary.main, @@ -96,10 +145,25 @@ const ModalEntities = ({open}: MWProps ) => { { value == 1 && ( - Дата/время - Сумма - Id long - Статус платежа + ) } diff --git a/src/Components/LoggedIn/ModalUser/index.tsx b/src/Components/LoggedIn/ModalUser/index.tsx index 621bfcb..45b5301 100644 --- a/src/Components/LoggedIn/ModalUser/index.tsx +++ b/src/Components/LoggedIn/ModalUser/index.tsx @@ -3,12 +3,62 @@ 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"; + export interface MWProps { open: boolean } +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: 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 ModalUser = ({open}: MWProps ) => { const [value, setValue] = React.useState(0); @@ -35,8 +85,8 @@ const ModalUser = ({open}: MWProps ) => { top: "50%", left: "50%", transform: "translate(-50%, -50%)", - width: "30%", - height: "30%", + width: "72%", + height: "60%", bgcolor: theme.palette.menu.main, boxShadow: 24, color: theme.palette.secondary.main, @@ -95,10 +145,25 @@ const ModalUser = ({open}: MWProps ) => { { value == 1 && ( - Дата/время - Сумма - Id long - Статус платежа + ) }