feat: VerificationTab

This commit is contained in:
IlyaDoronin 2023-07-26 09:44:13 +03:00
parent e43b96bf50
commit a2ee3168b1
4 changed files with 128 additions and 97 deletions

@ -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",
},
},
}}
/>
);
};
},
}}
/>
);

@ -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",
},
},
}}
/>
);
};
},
}}
/>
);

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

@ -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>