feat: VerificationTab

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 = () => {
+export const PurchaseTab = () => (
-  const theme = useTheme();
+  <DataGrid
-
+    rows={ROWS}
-  return (
+    columns={COLUMNS}
-    <DataGrid
+    pageSize={5}
-      rows={ROWS}
+    rowsPerPageOptions={[5]}
-      columns={COLUMNS}
+    hideFooter
-      pageSize={5}
+    disableColumnMenu
-      rowsPerPageOptions={[5]}
+    disableSelectionOnClick
-      hideFooter
+    rowHeight={50}
-      disableColumnMenu
+    headerHeight={50}
-      disableSelectionOnClick
+    experimentalFeatures={{ newEditingApi: true }}
-      rowHeight={50}
+    sx={{
-      headerHeight={50}
+      borderRadius: "0",
-      experimentalFeatures={{ newEditingApi: true }}
+      border: "none",
-      sx={{
+      "& .MuiDataGrid-columnHeaders": {
-        borderRadius: "0",
+        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": {
+        justifyContent: "flex-start",
-          padding: "0 25px",
+      },
+      "& .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",
-          },
-        },
-      }}
-    />
-  );
-};

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 = () => {
+export const TransactionsTab = () => (
-  const theme = useTheme();
+  <DataGrid
-
+    rows={ROWS}
-  return (
+    columns={COLUMNS}
-    <DataGrid
+    pageSize={5}
-      rows={ROWS}
+    rowsPerPageOptions={[5]}
-      columns={COLUMNS}
+    hideFooter
-      pageSize={5}
+    disableColumnMenu
-      rowsPerPageOptions={[5]}
+    disableSelectionOnClick
-      hideFooter
+    rowHeight={50}
-      disableColumnMenu
+    headerHeight={50}
-      disableSelectionOnClick
+    experimentalFeatures={{ newEditingApi: true }}
-      rowHeight={50}
+    sx={{
-      headerHeight={50}
+      borderRadius: "0",
-      experimentalFeatures={{ newEditingApi: true }}
+      border: "none",
-      sx={{
+      "& .MuiDataGrid-columnHeaders": {
-        borderRadius: "0",
+        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": {
+        justifyContent: "flex-start",
-          padding: "0 25px",
+      },
+      "& .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",
-          },
-        },
-      }}
-    />
-  );
-};

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>
+);

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>