feat: TransactionsTab

src/pages/dashboard/ModalUser/PurchaseTab.tsx

@@ -25,7 +25,6 @@ const COLUMNS: GridColDef[] = [
   {
     field: "amount",
     headerName: "Кол-во",
-    type: "number",
     width: 70,
     sortable: false,
   },

src/pages/dashboard/ModalUser/TransactionsTab.tsx

@@ -0,0 +1,138 @@
+import { DataGrid } from "@mui/x-data-grid";
+import { Typography, useTheme } from "@mui/material";
+
+import type { GridColDef } from "@mui/x-data-grid";
+
+const COLUMNS: GridColDef[] = [
+  {
+    field: "date",
+    headerName: "Дата",
+    width: 130,
+    sortable: false,
+  },
+  {
+    field: "time",
+    headerName: "Время",
+    width: 90,
+    sortable: false,
+  },
+  {
+    field: "amount",
+    headerName: "Сумма",
+    width: 140,
+    sortable: false,
+  },
+  {
+    field: "email",
+    headerName: "Email",
+    width: 280,
+    sortable: false,
+  },
+  {
+    field: "status",
+    headerName: "Статус",
+    width: 100,
+    sortable: false,
+    renderCell: ({ value }) => (
+      <Typography
+        sx={{
+          position: "relative",
+          paddingLeft: "20px",
+          fontWeight: "bold",
+          fontSize: "14px",
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            left: "0",
+            top: "50%",
+            transform: "translateY(-50%)",
+            height: "13px",
+            width: "13px",
+            background: value ? "#0D9F00" : "#F18956",
+            borderRadius: "50%",
+          },
+        }}
+      >
+        {value ? "accepted" : "timeout"}
+      </Typography>
+    ),
+  },
+];
+
+const ROWS = [
+  {
+    id: "row_1",
+    date: "19.02.2023",
+    time: "17:01",
+    amount: "2 065 руб.",
+    email: "emailexample@gmail.com",
+    status: true,
+  },
+  {
+    id: "row_2",
+    date: "28.02.2023",
+    time: "10:43",
+    amount: "21 250 руб.",
+    email: "verylongemailexample@gmail.com",
+    status: true,
+  },
+  {
+    id: "row_3",
+    date: "04.03.2023",
+    time: "21:09",
+    amount: "108 065 руб.",
+    email: "emailexample@gmail.com",
+    status: false,
+  },
+];
+
+export const TransactionsTab = () => {
+  const theme = useTheme();
+
+  return (
+    <DataGrid
+      rows={ROWS}
+      columns={COLUMNS}
+      pageSize={5}
+      rowsPerPageOptions={[5]}
+      hideFooter
+      disableColumnMenu
+      disableSelectionOnClick
+      rowHeight={50}
+      headerHeight={50}
+      experimentalFeatures={{ newEditingApi: true }}
+      sx={{
+        borderRadius: "0",
+        border: "none",
+        "& .MuiDataGrid-columnHeaders": {
+          padding: "0 25px",
+          background: "#F2F3F7",
+          borderBottom: "none",
+        },
+        "& .MuiDataGrid-main .MuiDataGrid-columnHeader": {
+          outline: "none",
+        },
+        "& .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/index.tsx

@@ -12,6 +12,7 @@ import {
 
 import { UserTab } from "./UserTab";
 import { PurchaseTab } from "./PurchaseTab";
+import { TransactionsTab } from "./TransactionsTab";
 
 import { authStore } from "@root/stores/auth";
 import theme from "@root/theme";
@@ -101,6 +102,7 @@ const ModalUser = () => {
                 textAlign: "center",
                 fontSize: "18px",
                 padding: "12px",
+                color: theme.palette.common.white,
                 background: "#9A9AAF",
               }}
             >
@@ -164,6 +166,7 @@ const ModalUser = () => {
                   />
                 )}
                 {value === 1 && <PurchaseTab />}
+                {value === 2 && <TransactionsTab />}
               </Box>
             </Box>
           </Box>