feat: PurchaseTab

src/pages/dashboard/ModalUser/PurchaseTab.tsx

@@ -5,41 +5,28 @@ import type { GridColDef } from "@mui/x-data-grid";
 
 const COLUMNS: GridColDef[] = [
   {
-    field: "id",
+    field: "date",
-    headerName: "ID",
+    headerName: "Дата",
-    width: 30,
+    width: 200,
     sortable: false,
   },
   {
-    field: "dateTime",
+    field: "time",
-    headerName: "Дата / время",
+    headerName: "Время",
-    width: 150,
+    width: 180,
     sortable: false,
   },
   {
-    field: "email",
+    field: "product",
-    headerName: "Почта",
+    headerName: "Товар",
-    width: 110,
+    width: 280,
     sortable: false,
   },
   {
-    field: "summa",
+    field: "amount",
-    headerName: "Сумма",
+    headerName: "Кол-во",
     type: "number",
-    width: 110,
+    width: 70,
-    sortable: false,
-  },
-  {
-    field: "idLong",
-    headerName: "ID long",
-    type: "number",
-    width: 110,
-    sortable: false,
-  },
-  {
-    field: "paymentStatus",
-    headerName: "Статус платежа",
-    width: 160,
     sortable: false,
   },
 ];
@@ -47,43 +34,24 @@ const COLUMNS: GridColDef[] = [
 const ROWS = [
   {
     id: "row_1",
-    dateTime: "22.09.22 12:15",
+    date: "19.02.2023",
-    email: "asd@mail.ru",
+    time: "17:01",
-    summa: 100500,
+    product: "Шаблонизатор",
-    idLong: 123,
+    amount: "1 шт.",
-    paymentStatus: "В обработке",
   },
   {
     id: "row_2",
-    dateTime: "22.09.22 12:15",
+    date: "28.02.2023",
-    email: "asd@mail.ru",
+    time: "10:43",
-    summa: 100500,
+    product: "Шаблонизатор",
-    idLong: 123,
+    amount: "1 шт.",
-    paymentStatus: "В обработке",
   },
   {
     id: "row_3",
-    dateTime: "22.09.22 12:15",
+    date: "04.03.2023",
-    email: "asd@mail.ru",
+    time: "21:09",
-    summa: 100500,
+    product: "Сокращатель ссылок",
-    idLong: 123,
+    amount: "2 шт.",
-    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: "В обработке",
   },
 ];
 
@@ -96,20 +64,42 @@ export const PurchaseTab = () => {
       columns={COLUMNS}
       pageSize={5}
       rowsPerPageOptions={[5]}
+      hideFooter
+      disableColumnMenu
       disableSelectionOnClick
+      rowHeight={50}
+      headerHeight={50}
       experimentalFeatures={{ newEditingApi: true }}
       sx={{
-        color: theme.palette.secondary.main,
+        borderRadius: "0",
-        height: "350px",
+        border: "none",
-        overflowY: "auto",
+        "& .MuiDataGrid-columnHeaders": {
-        "& .MuiDataGrid-iconSeparator": {
+          padding: "0 25px",
-          display: "none",
+          background: "#F2F3F7",
+          borderBottom: "none",
         },
-        "& .css-levciy-MuiTablePagination-displayedRows": {
+        "& .MuiDataGrid-main .MuiDataGrid-columnHeader": {
-          color: theme.palette.secondary.main,
+          outline: "none",
         },
-        "& .MuiSvgIcon-root": {
+        "& .MuiDataGrid-columnHeaderTitle": {
-          color: theme.palette.secondary.main,
+          fontWeight: "bold",
+          userSelect: "none",
+        },
+        "& .MuiDataGrid-virtualScrollerRenderZone": {
+          width: "100%",
+        },
+        "& .MuiDataGrid-iconSeparator": { display: "none" },
+        "& .MuiDataGrid-main .MuiDataGrid-cell": {
+          outline: "none",
+          border: "none",
+          justifyContent: "flex-start",
+        },
+        "& .MuiDataGrid-row": {
+          padding: "0 25px",
+          width: "100%",
+          "&:hover": {
+            background: "#F2F3F7",
+          },
         },
       }}
     />

src/pages/dashboard/ModalUser/UserTab.tsx

@@ -13,50 +13,50 @@ type UserTabProps = {
 };
 
 export const UserTab = ({ user }: UserTabProps) => (
-  <Box sx={{ display: "flex", columnGap: "15px" }}>
+  <Box sx={{ display: "flex", columnGap: "15px", padding: "25px" }}>
     <Box sx={{ maxWidth: "300px", width: "100%" }}>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>ID</Typography>
+        <Typography sx={{ lineHeight: "20px" }}>ID</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {" "}
           {user.id}
         </Typography>
       </Box>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>Дата регистрации</Typography>
+        <Typography sx={{ lineHeight: "20px" }}>Дата регистрации</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {user.registrationDate}
         </Typography>
       </Box>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>Email</Typography>
+        <Typography sx={{ lineHeight: "20px" }}>Email</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {user.email}
         </Typography>
       </Box>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>Телефон</Typography>
+        <Typography sx={{ lineHeight: "20px" }}>Телефон</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {user.phone}
         </Typography>
       </Box>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>Тип:</Typography>
+        <Typography sx={{ lineHeight: "20px" }}>Тип:</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px", 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: "20px" }}>ФИО:</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {user.fullname}
         </Typography>
       </Box>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>Внутренний кошелек</Typography>
+        <Typography sx={{ lineHeight: "20px" }}>Внутренний кошелек</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {user.walletBalance}
         </Typography>
       </Box>

src/pages/dashboard/ModalUser/index.tsx

@@ -146,10 +146,8 @@ const ModalUser = () => {
               <Box
                 sx={{
                   width: "100%",
-                  padding: "25px",
                   color: theme.palette.common.black,
-                  boxShadow:
+                  boxShadow: "inset 30px 0px 40px 0px rgba(210, 208, 225, 0.2)",
-                    "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 && (