From 162335712f6c174fd3808693d84590f4c7e2a2a6 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Tue, 25 Jul 2023 16:07:06 +0300
Subject: [PATCH] feat: PurchaseTab

---
 src/pages/dashboard/ModalUser/PurchaseTab.tsx | 120 ++++++++----------
 src/pages/dashboard/ModalUser/UserTab.tsx     |  30 ++---
 src/pages/dashboard/ModalUser/index.tsx       |   4 +-
 3 files changed, 71 insertions(+), 83 deletions(-)

diff --git a/src/pages/dashboard/ModalUser/PurchaseTab.tsx b/src/pages/dashboard/ModalUser/PurchaseTab.tsx
index 7d9b06e..f21eb18 100644
--- a/src/pages/dashboard/ModalUser/PurchaseTab.tsx
+++ b/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",
+          },
         },
       }}
     />
diff --git a/src/pages/dashboard/ModalUser/UserTab.tsx b/src/pages/dashboard/ModalUser/UserTab.tsx
index 6b14c74..75aed4a 100644
--- a/src/pages/dashboard/ModalUser/UserTab.tsx
+++ b/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>
diff --git a/src/pages/dashboard/ModalUser/index.tsx b/src/pages/dashboard/ModalUser/index.tsx
index 8a29f7e..14f470d 100644
--- a/src/pages/dashboard/ModalUser/index.tsx
+++ b/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 && (