From a2ee3168b1da8960e10eec402cd5d07741e68013 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Wed, 26 Jul 2023 09:44:13 +0300
Subject: [PATCH] feat: VerificationTab

---
 src/pages/dashboard/ModalUser/PurchaseTab.tsx | 91 +++++++++---------
 .../dashboard/ModalUser/TransactionsTab.tsx   | 92 +++++++++----------
 .../dashboard/ModalUser/VerificationTab.tsx   | 38 ++++++++
 src/pages/dashboard/ModalUser/index.tsx       |  4 +-
 4 files changed, 128 insertions(+), 97 deletions(-)
 create mode 100644 src/pages/dashboard/ModalUser/VerificationTab.tsx

diff --git a/src/pages/dashboard/ModalUser/PurchaseTab.tsx b/src/pages/dashboard/ModalUser/PurchaseTab.tsx
index bfc9951..bbdf431 100644
--- a/src/pages/dashboard/ModalUser/PurchaseTab.tsx
+++ b/src/pages/dashboard/ModalUser/PurchaseTab.tsx
@@ -1,5 +1,4 @@
 import { DataGrid } from "@mui/x-data-grid";
-import { useTheme } from "@mui/material";
 
 import type { GridColDef } from "@mui/x-data-grid";
 
@@ -54,53 +53,49 @@ const ROWS = [
   },
 ];
 
-export const PurchaseTab = () => {
-  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",
+export const PurchaseTab = () => (
+  <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",
-        "& .MuiDataGrid-columnHeaders": {
-          padding: "0 25px",
+        justifyContent: "flex-start",
+      },
+      "& .MuiDataGrid-row": {
+        padding: "0 25px",
+        width: "100%",
+        "&:hover": {
           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",
-          },
-        },
-      }}
-    />
-  );
-};
+      },
+    }}
+  />
+);
diff --git a/src/pages/dashboard/ModalUser/TransactionsTab.tsx b/src/pages/dashboard/ModalUser/TransactionsTab.tsx
index 4ce0bfb..d477de3 100644
--- a/src/pages/dashboard/ModalUser/TransactionsTab.tsx
+++ b/src/pages/dashboard/ModalUser/TransactionsTab.tsx
@@ -1,5 +1,5 @@
 import { DataGrid } from "@mui/x-data-grid";
-import { Typography, useTheme } from "@mui/material";
+import { Typography } from "@mui/material";
 
 import type { GridColDef } from "@mui/x-data-grid";
 
@@ -86,53 +86,49 @@ const ROWS = [
   },
 ];
 
-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",
+export const TransactionsTab = () => (
+  <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",
-        "& .MuiDataGrid-columnHeaders": {
-          padding: "0 25px",
+        justifyContent: "flex-start",
+      },
+      "& .MuiDataGrid-row": {
+        padding: "0 25px",
+        width: "100%",
+        "&:hover": {
           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",
-          },
-        },
-      }}
-    />
-  );
-};
+      },
+    }}
+  />
+);
diff --git a/src/pages/dashboard/ModalUser/VerificationTab.tsx b/src/pages/dashboard/ModalUser/VerificationTab.tsx
new file mode 100644
index 0000000..581ce1a
--- /dev/null
+++ b/src/pages/dashboard/ModalUser/VerificationTab.tsx
@@ -0,0 +1,38 @@
+import { Box, Typography } from "@mui/material";
+
+import type { File } from "./index";
+
+type VerificationTabProps = {
+  files: File[];
+};
+
+export const VerificationTab = ({ files }: VerificationTabProps) => (
+  <Box sx={{ padding: "25px" }}>
+    {files.map(({ name, url }, index) => (
+      <Box sx={{ marginBottom: "25px" }}>
+        <Typography sx={{ fontWeight: "bold", fontSize: "18px" }}>
+          {index + 1}.{" "}
+          {name === "inn"
+            ? "Скан ИНН организации (выписка из ЕГЮРЛ)"
+            : name === "rule"
+            ? "Устав организации"
+            : name === "certificate"
+            ? "Свидетельство о регистрации НКО"
+            : `Скан документа ${index + 1}`}
+        </Typography>
+        <Typography>
+          <a
+            style={{
+              color: "#7E2AEA",
+              textDecoration: "none",
+              fontSize: "18px",
+            }}
+            href={url}
+          >
+            {url.split("/").pop()?.split(".")?.[0]}
+          </a>
+        </Typography>
+      </Box>
+    ))}
+  </Box>
+);
diff --git a/src/pages/dashboard/ModalUser/index.tsx b/src/pages/dashboard/ModalUser/index.tsx
index 3351116..a0e51ff 100644
--- a/src/pages/dashboard/ModalUser/index.tsx
+++ b/src/pages/dashboard/ModalUser/index.tsx
@@ -13,6 +13,7 @@ import {
 import { UserTab } from "./UserTab";
 import { PurchaseTab } from "./PurchaseTab";
 import { TransactionsTab } from "./TransactionsTab";
+import { VerificationTab } from "./VerificationTab";
 
 import { authStore } from "@root/stores/auth";
 import theme from "@root/theme";
@@ -34,7 +35,7 @@ const TABS = [
 const baseUrl =
   process.env.NODE_ENV === "production" ? "" : "https://hub.pena.digital";
 
-type File = {
+export type File = {
   name: "inn" | "rule" | "egrule" | "certificate";
   url: string;
 };
@@ -167,6 +168,7 @@ const ModalUser = () => {
                 )}
                 {value === 1 && <PurchaseTab />}
                 {value === 2 && <TransactionsTab />}
+                {value === 3 && <VerificationTab files={user?.files || []} />}
               </Box>
             </Box>
           </Box>