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",
-    headerName: "ID",
-    width: 30,
+    field: "date",
+    headerName: "Дата",
+    width: 200,
     sortable: false,
   },
   {
-    field: "dateTime",
-    headerName: "Дата / время",
-    width: 150,
+    field: "time",
+    headerName: "Время",
+    width: 180,
     sortable: false,
   },
   {
-    field: "email",
-    headerName: "Почта",
-    width: 110,
+    field: "product",
+    headerName: "Товар",
+    width: 280,
     sortable: false,
   },
   {
-    field: "summa",
-    headerName: "Сумма",
+    field: "amount",
+    headerName: "Кол-во",
     type: "number",
-    width: 110,
-    sortable: false,
-  },
-  {
-    field: "idLong",
-    headerName: "ID long",
-    type: "number",
-    width: 110,
-    sortable: false,
-  },
-  {
-    field: "paymentStatus",
-    headerName: "Статус платежа",
-    width: 160,
+    width: 70,
     sortable: false,
   },
 ];
@@ -47,43 +34,24 @@ const COLUMNS: GridColDef[] = [
 const ROWS = [
   {
     id: "row_1",
-    dateTime: "22.09.22 12:15",
-    email: "asd@mail.ru",
-    summa: 100500,
-    idLong: 123,
-    paymentStatus: "В обработке",
+    date: "19.02.2023",
+    time: "17:01",
+    product: "Шаблонизатор",
+    amount: "1 шт.",
   },
   {
     id: "row_2",
-    dateTime: "22.09.22 12:15",
-    email: "asd@mail.ru",
-    summa: 100500,
-    idLong: 123,
-    paymentStatus: "В обработке",
+    date: "28.02.2023",
+    time: "10:43",
+    product: "Шаблонизатор",
+    amount: "1 шт.",
   },
   {
     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: "В обработке",
+    date: "04.03.2023",
+    time: "21:09",
+    product: "Сокращатель ссылок",
+    amount: "2 шт.",
   },
 ];
 
@@ -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,
-        height: "350px",
-        overflowY: "auto",
-        "& .MuiDataGrid-iconSeparator": {
-          display: "none",
+        borderRadius: "0",
+        border: "none",
+        "& .MuiDataGrid-columnHeaders": {
+          padding: "0 25px",
+          background: "#F2F3F7",
+          borderBottom: "none",
         },
-        "& .css-levciy-MuiTablePagination-displayedRows": {
-          color: theme.palette.secondary.main,
+        "& .MuiDataGrid-main .MuiDataGrid-columnHeader": {
+          outline: "none",
         },
-        "& .MuiSvgIcon-root": {
-          color: theme.palette.secondary.main,
+        "& .MuiDataGrid-columnHeaderTitle": {
+          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: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px" }}>ID</Typography>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {" "}
           {user.id}
         </Typography>
       </Box>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>Дата регистрации</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px" }}>Дата регистрации</Typography>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {user.registrationDate}
         </Typography>
       </Box>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>Email</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px" }}>Email</Typography>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {user.email}
         </Typography>
       </Box>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>Телефон</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px" }}>Телефон</Typography>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {user.phone}
         </Typography>
       </Box>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>Тип:</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px" }}>Тип:</Typography>
+        <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: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px" }}>ФИО:</Typography>
+        <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
           {user.fullname}
         </Typography>
       </Box>
       <Box sx={{ marginBottom: "25px" }}>
-        <Typography sx={{ lineHeight: "19px" }}>Внутренний кошелек</Typography>
-        <Typography sx={{ lineHeight: "19px", fontWeight: "bold" }}>
+        <Typography sx={{ lineHeight: "20px" }}>Внутренний кошелек</Typography>
+        <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:
-                    "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)",
+                  boxShadow: "inset 30px 0px 40px 0px rgba(210, 208, 225, 0.2)",
                 }}
               >
                 {value === 0 && (