advanced search

This commit is contained in:
Petropoulos Evangelos 2025-07-03 22:24:22 +03:00
parent a2cfede9b9
commit 4661db483d
6 changed files with 689 additions and 78 deletions

View File

@ -0,0 +1,103 @@
import * as React from "react";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import Button from "@mui/material/Button";
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import MailIcon from "@mui/icons-material/Mail";
import SearchIcon from "@mui/icons-material/Search";
export default function RightTemporaryDrawer() {
const [open, setOpen] = React.useState(false);
const toggleDrawer =
(open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
if (
event.type === "keydown" &&
((event as React.KeyboardEvent).key === "Tab" ||
(event as React.KeyboardEvent).key === "Shift")
) {
return;
}
setOpen(open);
};
const list = () => (
<Box
sx={{ width: 400 }}
role="presentation"
onClick={toggleDrawer(false)}
onKeyDown={toggleDrawer(false)}
>
<List>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
<Divider />
<List>
{["All mail", "Trash", "Spam"].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
);
return (
<div>
<Button
sx={{
borderRadius: "8px",
textTransform: "none",
backgroundColor: "#f5f5f5",
color: "#555",
padding: "6px 12px",
boxShadow: "inset 0 0 0 1px #ddd",
fontWeight: 400,
fontSize: "16px",
justifyContent: "flex-start",
"& .MuiButton-startIcon": {
marginRight: "12px",
backgroundColor: "#eee",
padding: "8px",
borderRadius: "4px",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
"&:hover": {
backgroundColor: "#e0e0e0",
},
}}
startIcon={<SearchIcon />}
onClick={toggleDrawer(true)}
>
Advanced Search
</Button>
{/* <Button onClick={toggleDrawer(true)}>Open Right Drawer</Button> */}
<Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
{list()}
</Drawer>
</div>
);
}

View File

@ -0,0 +1,207 @@
import React, { useState } from "react";
import {
Box,
Grid,
TextField,
MenuItem,
Button,
InputLabel,
FormControl,
Select,
Typography,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import SearchIcon from "@mui/icons-material/Search";
import RefreshIcon from "@mui/icons-material/Refresh";
const currencies = ["USD", "EUR", "GBP"];
const states = ["Pending", "Completed", "Failed"];
const transactionTypes = ["Credit", "Debit"];
const paymentMethods = ["Card", "Bank Transfer"];
const psps = ["Stripe", "PayPal"];
const merchants = ["Amazon", "eBay"];
export default function SearchFilterForm() {
const [form, setForm] = useState({
keyword: "",
transactionId: "",
transactionReferenceId: "",
user: "",
currency: "",
state: "",
statusDescription: "",
transactionType: "",
paymentMethod: "",
psps: "",
initialPsps: "",
merchants: "",
startDate: null,
endDate: null,
lastUpdatedFrom: null,
lastUpdatedTo: null,
minAmount: "",
maxAmount: "",
channel: "",
});
const handleChange = (field: string, value: any) => {
setForm((prev) => ({ ...prev, [field]: value }));
};
const resetForm = () => {
setForm({
keyword: "",
transactionId: "",
transactionReferenceId: "",
user: "",
currency: "",
state: "",
statusDescription: "",
transactionType: "",
paymentMethod: "",
psps: "",
initialPsps: "",
merchants: "",
startDate: null,
endDate: null,
lastUpdatedFrom: null,
lastUpdatedTo: null,
minAmount: "",
maxAmount: "",
channel: "",
});
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Box p={2}>
<Typography variant="h6" gutterBottom>
Search
</Typography>
<Grid container spacing={2}>
{[
{ label: "Keyword", field: "keyword", type: "text" },
{ label: "Transaction ID", field: "transactionId", type: "text" },
{
label: "Transaction Reference ID",
field: "transactionReferenceId",
type: "text",
},
{ label: "User", field: "user", type: "text" },
{
label: "Currency",
field: "currency",
type: "select",
options: currencies,
},
{ label: "State", field: "state", type: "select", options: states },
{
label: "Status Description",
field: "statusDescription",
type: "text",
},
{
label: "Transaction Type",
field: "transactionType",
type: "select",
options: transactionTypes,
},
{
label: "Payment Method",
field: "paymentMethod",
type: "select",
options: paymentMethods,
},
{ label: "PSPs", field: "psps", type: "text" },
{ label: "Initial PSPs", field: "initialPsps", type: "text" },
{ label: "Merchants", field: "merchants", type: "text" },
{ label: "Start Date", field: "startDate", type: "date" },
{ label: "End Date", field: "endDate", type: "date" },
{
label: "Last Updated From",
field: "lastUpdatedFrom",
type: "date",
},
{ label: "Last Updated To", field: "lastUpdatedTo", type: "date" },
{ label: "Min Amount", field: "minAmount", type: "text" },
{ label: "Max Amount", field: "maxAmount", type: "text" },
{ label: "Channel", field: "channel", type: "text" },
].map(({ label, field, type, options }) => (
<Grid
container
item
xs={12}
alignItems="center"
spacing={1}
key={field}
>
<Grid item xs={4}>
<Typography variant="body2" fontWeight={600}>
{label}
</Typography>
</Grid>
<Grid item xs={8}>
{type === "text" && (
<TextField
fullWidth
size="small"
value={form[field]}
onChange={(e) => handleChange(field, e.target.value)}
/>
)}
{type === "select" && (
<FormControl fullWidth size="small">
<Select
value={form[field]}
onChange={(e) => handleChange(field, e.target.value)}
displayEmpty
>
<MenuItem value="">
<em>{label}</em>
</MenuItem>
{options.map((option) => (
<MenuItem value={option} key={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
)}
{type === "date" && (
<DatePicker
value={form[field]}
onChange={(newValue) => handleChange(field, newValue)}
renderInput={(params) => (
<TextField fullWidth size="small" {...params} />
)}
/>
)}
</Grid>
</Grid>
))}
{/* Buttons */}
<Grid item xs={12} display="flex" justifyContent="flex-end" gap={2}>
<Button
variant="outlined"
startIcon={<RefreshIcon />}
onClick={resetForm}
>
Reset
</Button>
<Button
variant="contained"
startIcon={<SearchIcon />}
onClick={() => console.log("Apply Filter", form)}
>
Apply Filter
</Button>
</Grid>
</Grid>
</Box>
</LocalizationProvider>
);
}

View File

@ -5,7 +5,7 @@ import TransactionTable from "@/app/features/Pages/Transactions/Transactions";
export default function TransactionPage() {
return (
<div style={{ width: "100%" }}>
<div style={{ width: "50%" }}>
{/* This page will now be rendered on the client-side */}
<TransactionTable />
</div>

View File

@ -0,0 +1,256 @@
import { useState } from "react";
import {
Box,
TextField,
MenuItem,
Button,
Drawer,
FormControl,
Select,
Typography,
Stack,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import SearchIcon from "@mui/icons-material/Search";
import RefreshIcon from "@mui/icons-material/Refresh";
const currencies = ["USD", "EUR", "GBP"];
const states = ["Pending", "Completed", "Failed"];
const transactionTypes = ["Credit", "Debit"];
const paymentMethods = ["Card", "Bank Transfer"];
export default function AdvancedSearch() {
const [open, setOpen] = useState(false);
const [form, setForm] = useState({
keyword: "",
transactionId: "",
transactionReferenceId: "",
user: "",
currency: "",
state: "",
statusDescription: "",
transactionType: "",
paymentMethod: "",
psps: "",
initialPsps: "",
merchants: "",
startDate: null,
endDate: null,
lastUpdatedFrom: null,
lastUpdatedTo: null,
minAmount: "",
maxAmount: "",
channel: "",
});
const resetForm = () => {
setForm({
keyword: "",
transactionId: "",
transactionReferenceId: "",
user: "",
currency: "",
state: "",
statusDescription: "",
transactionType: "",
paymentMethod: "",
psps: "",
initialPsps: "",
merchants: "",
startDate: null,
endDate: null,
lastUpdatedFrom: null,
lastUpdatedTo: null,
minAmount: "",
maxAmount: "",
channel: "",
});
};
const handleChange = (field: string, value: any) => {
setForm((prev) => ({ ...prev, [field]: value }));
};
const toggleDrawer =
(open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
if (
event.type === "keydown" &&
((event as React.KeyboardEvent).key === "Tab" ||
(event as React.KeyboardEvent).key === "Shift")
) {
return;
}
setOpen(open);
};
const list = () => (
<Box sx={{ width: 400 }} role="presentation">
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Box p={2}>
<Box sx={{ display: "flex", gap: "60px" }}>
<Typography variant="h6" gutterBottom>
Search
</Typography>
{/* Buttons */}
<Box display="flex" justifyContent="flex-end" gap={2}>
<Button
variant="contained"
startIcon={<SearchIcon />}
onClick={() => console.log("Apply Filter", form)}
sx={{ "& .span": { margin: "0px", padding: "0px" } }}
>
Apply Filter
</Button>
<Button
variant="outlined"
startIcon={<RefreshIcon sx={{ margin: "0px" }} />}
onClick={resetForm}
sx={{ "& span": { margin: "0px", padding: "0px" } }}
></Button>
</Box>
</Box>
<Stack spacing={2}>
{[
{ label: "Keyword", field: "keyword", type: "text" },
{ label: "Transaction ID", field: "transactionId", type: "text" },
{
label: "Transaction Reference ID",
field: "transactionReferenceId",
type: "text",
},
{ label: "User", field: "user", type: "text" },
{
label: "Currency",
field: "currency",
type: "select",
options: currencies,
},
{
label: "State",
field: "state",
type: "select",
options: states,
},
{
label: "Status Description",
field: "statusDescription",
type: "text",
},
{
label: "Transaction Type",
field: "transactionType",
type: "select",
options: transactionTypes,
},
{
label: "Payment Method",
field: "paymentMethod",
type: "select",
options: paymentMethods,
},
{ label: "PSPs", field: "psps", type: "text" },
{ label: "Initial PSPs", field: "initialPsps", type: "text" },
{ label: "Merchants", field: "merchants", type: "text" },
{ label: "Start Date", field: "startDate", type: "date" },
{ label: "End Date", field: "endDate", type: "date" },
{
label: "Last Updated From",
field: "lastUpdatedFrom",
type: "date",
},
{
label: "Last Updated To",
field: "lastUpdatedTo",
type: "date",
},
{ label: "Min Amount", field: "minAmount", type: "text" },
{ label: "Max Amount", field: "maxAmount", type: "text" },
{ label: "Channel", field: "channel", type: "text" },
].map(({ label, field, type, options }) => (
<Box key={field}>
<Typography variant="body2" fontWeight={600} mb={0.5}>
{label}
</Typography>
{type === "text" && (
<TextField
fullWidth
size="small"
value={form[field]}
onChange={(e) => handleChange(field, e.target.value)}
/>
)}
{type === "select" && (
<FormControl fullWidth size="small">
<Select
value={form[field]}
onChange={(e) => handleChange(field, e.target.value)}
displayEmpty
>
<MenuItem value="">
<em>{label}</em>
</MenuItem>
{options.map((option) => (
<MenuItem value={option} key={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
)}
{type === "date" && (
<DatePicker
value={form[field]}
onChange={(newValue) => handleChange(field, newValue)}
renderInput={(params) => (
<TextField fullWidth size="small" {...params} />
)}
/>
)}
</Box>
))}
</Stack>
</Box>
</LocalizationProvider>
</Box>
);
return (
<div>
<Button
sx={{
borderRadius: "8px",
textTransform: "none",
backgroundColor: "#f5f5f5",
color: "#555",
padding: "6px 12px",
boxShadow: "inset 0 0 0 1px #ddd",
fontWeight: 400,
fontSize: "16px",
justifyContent: "flex-start",
"& .MuiButton-startIcon": {
marginRight: "12px",
backgroundColor: "#eee",
padding: "8px",
borderRadius: "4px",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
"&:hover": {
backgroundColor: "#e0e0e0",
},
}}
startIcon={<SearchIcon />}
onClick={toggleDrawer(true)}
>
Advanced Search
</Button>
{/* <Button onClick={toggleDrawer(true)}>Open Right Drawer</Button> */}
<Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
{list()}
</Drawer>
</div>
);
}

View File

@ -22,6 +22,7 @@ import { saveAs } from "file-saver";
import { DataGrid } from "@mui/x-data-grid";
import { columns } from "./constants";
import { rows } from "./mockData";
import AdvancedSearch from "../../AdvancedSearch/AdvancedSearch";
const paginationModel = { page: 0, pageSize: 50 };
@ -71,6 +72,9 @@ export default function TransactionTable() {
onChange={(e) => console.log(`setSearchQuery(${e.target.value})`)}
sx={{ width: 300 }}
/>
<AdvancedSearch />
{/* <RightTemporaryDrawer /> */}
{/* <SearchFilterForm /> */}
<Button
variant="outlined"
startIcon={<FileUploadIcon />}

View File

@ -1,80 +1,121 @@
import { GridColDef } from "@mui/x-data-grid";
export const columns: GridColDef[] = [
{ field: 'merchandId', headerName: 'Merchant ID', width: 130 },
{ field: 'transactionID', headerName: 'Transaction ID', width: 130 },
{ field: 'user', headerName: 'User', width: 75 },
{ field: 'created', headerName: 'Created', type: 'number', width: 130 },
{ field: 'state', headerName: 'State', type: 'number', width: 130 },
{ field: 'statusDescription', headerName: 'Status Description', type: 'number', width: 130 },
{ field: 'pspStatusCode', headerName: 'PSP Status Code', type: 'number', width: 130 },
{ field: 'pspStatusMessage', headerName: 'PSP Status Message', type: 'number', width: 90 },
{ field: 'psp', headerName: 'PSP', type: 'number', width: 90 },
{ field: 'pspAccount', headerName: 'PSP Account', type: 'number', width: 90 },
{ field: 'initPSP', headerName: 'Init PSP', type: 'number', width: 90 },
{ field: 'initPSPAccout', headerName: 'Init PSP Account', type: 'number', width: 90 },
{ field: 'pspService', headerName: 'PSP Service', type: 'number', width: 90 },
{ field: 'transactionType', headerName: 'Transaction Type', type: 'number', width: 90 },
{ field: 'paymentMethod', headerName: 'Payment Method', type: 'number', width: 90 },
{ field: 'rules', headerName: 'Rules', type: 'number', width: 90 },
{ field: 'amount', headerName: 'Amount', type: 'number', width: 90 },
{ field: 'fee', headerName: 'Fee', type: 'number', width: 90 },
{ field: 'transactionAmount', headerName: 'Transaction Amount', type: 'number', width: 90 },
{ field: 'baseAmount', headerName: 'Base Amount', type: 'number', width: 90 },
{ field: 'baseFee', headerName: 'Base Fee', type: 'number', width: 90 },
{ field: 'baseTransaction', headerName: 'Base Transaction', type: 'number', width: 90 },
{ field: 'pspFee', headerName: 'PSP Fee', type: 'number', width: 90 },
{ field: 'basePspFee', headerName: 'Base PSP Fee', type: 'number', width: 90 },
{ field: 'authAmount', headerName: 'Auth Amount', type: 'number', width: 90 },
{ field: 'baseAuthAmount', headerName: 'Base Auth Amount', type: 'number', width: 90 },
{ field: 'userBalance', headerName: 'User Balance', type: 'number', width: 90 },
{ field: 'updated', headerName: 'Updated', type: 'number', width: 90 },
{ field: 'userIp', headerName: 'User IP', type: 'number', width: 90 },
{ field: 'channel', headerName: 'Channel', type: 'number', width: 90 },
{ field: 'depositType', headerName: 'Deposit Type', type: 'number', width: 90 },
{ field: 'userEmal', headerName: 'User Emal', type: 'number', width: 90 },
{ field: 'userCategory', headerName: 'User Category', type: 'number', width: 90 },
{ field: 'userCountry', headerName: 'User Country', type: 'number', width: 90 },
{ field: 'userAccount', headerName: 'User Account', type: 'number', width: 90 },
{ field: 'bankName', headerName: 'Bank Name', type: 'number', width: 90 },
{ field: 'pspUserReference', headerName: 'PSP User Reference', type: 'number', width: 90 },
{ field: 'pspFraudScore', headerName: 'PSP Fraud Score', type: 'number', width: 90 },
{ field: 'fraudStatus', headerName: 'FraudStatus', type: 'number', width: 90 },
{ field: 'blocked', headerName: 'Blocked', type: 'number', width: 90 },
{ field: 'abuse', headerName: 'Abuse', type: 'number', width: 90 },
{ field: 'kycStatus', headerName: 'KYC Status', type: 'number', width: 90 },
{ field: 'kycPSPName', headerName: 'KYC PSP Name', type: 'number', width: 90 },
{ field: 'kycPSPStatus', headerName: 'KYC PSP Status', type: 'number', width: 90 },
{ field: 'kycIdStatus', headerName: 'KYC ID Status', type: 'number', width: 90 },
{ field: 'kycAddressStatus', headerName: 'KYC Address Status', type: 'number', width: 90 },
{ field: 'kycAgeStatus', headerName: 'KYC Age Status', type: 'number', width: 90 },
{ field: 'kycPEPAndSanction', headerName: 'KYC PEP And Sanction', type: 'number', width: 90 },
{ field: 'pspReferenceId', headerName: 'PSPReferenceID', type: 'number', width: 90 },
{ field: 'siteReferenceId', headerName: 'Site Reference ID', type: 'number', width: 90 },
{ field: 'info', headerName: 'Info', type: 'number', width: 90 },
{ field: 'accountHolder', headerName: 'Account Holder', type: 'number', width: 90 },
{ field: 'firstName', headerName: 'First Name', type: 'number', width: 90 },
{ field: 'lastName', headerName: 'Last Name', type: 'number', width: 90 },
{ field: 'street', headerName: 'Street', type: 'number', width: 90 },
{ field: 'city', headerName: 'City', type: 'number', width: 90 },
{ field: 'zip', headerName: 'ZIP', type: 'number', width: 90 },
{ field: 'dob', headerName: 'DOB', type: 'number', width: 90 },
{ field: 'mobile', headerName: 'Mobile', type: 'number', width: 90 },
{ field: 'lastUpdatedBy', headerName: 'Last Updated By', type: 'number', width: 90 },
{ field: 'ipCity', headerName: 'IP City', type: 'number', width: 90 },
{ field: 'ipRegion', headerName: 'IP Region', type: 'number', width: 90 },
{ field: 'ipCountry', headerName: 'IP Country', type: 'number', width: 90 },
{ field: 'cardIssuerCountry', headerName: 'Card Issuer Country', type: 'number', width: 90 },
{ field: 'cardBand', headerName: 'Card Band', type: 'number', width: 90 },
{ field: 'cardCategory', headerName: 'Card Category', type: 'number', width: 90 },
{ field: 'cardIssuerName', headerName: 'Card Issuer Name', type: 'number', width: 90 },
{ field: 'inn', headerName: 'INN', type: 'number', width: 90 },
{ field: 'cardType', headerName: 'Card Type', type: 'number', width: 90 },
{ field: 'firstAttempt', headerName: 'First Attempt', type: 'number', width: 90 },
{ field: 'firstSuccessful', headerName: 'First Successful', type: 'number', width: 90 },
{ field: 'firstTransaction', headerName: 'First Transaction', type: 'number', width: 90 },
{ field: 'firstPspAcountAttempt', headerName: 'First PSP Acount Attempt', type: 'number', width: 90 },
{ field: 'firstPspAcountSuccessful', headerName: 'First PSP Acount Successful', type: 'number', width: 90 },
{ field: 'originTransactionId', headerName: 'Origin Transaction ID', type: 'number', width: 90 },
{ field: 'transactionReferenceId', headerName: 'Transaction Reference ID', type: 'number', width: 90 },
{ field: "merchandId", headerName: "Merchant ID", width: 130 },
{ field: "transactionID", headerName: "Transaction ID", width: 130 },
{ field: "user", headerName: "User", width: 75 },
{ field: "created", headerName: "Created", type: "number", width: 130 },
{ field: "state", headerName: "State", type: "number", width: 130 },
{
field: "statusDescription",
headerName: "Status Description",
type: "number",
width: 130,
},
{
field: "statusCode",
headerName: "Status Code",
type: "number",
width: 130,
},
{
field: "pspStatusCode",
headerName: "PSP Status Code",
type: "number",
width: 130,
},
{
field: "pspStatusMessage",
headerName: "PSP Status Message",
type: "number",
width: 90,
},
{ field: "psp", headerName: "PSP", type: "number", width: 90 },
{ field: "pspAccount", headerName: "PSP Account", type: "number", width: 90 },
{ field: "initPSP", headerName: "Init PSP", type: "number", width: 90 },
{
field: "initPSPAccout",
headerName: "Init PSP Account",
type: "number",
width: 90,
},
{ field: "pspService", headerName: "PSP Service", type: "number", width: 90 },
{
field: "transactionType",
headerName: "Transaction Type",
type: "number",
width: 90,
},
{
field: "paymentMethod",
headerName: "Payment Method",
type: "number",
width: 90,
},
{ field: "rules", headerName: "Rules", type: "number", width: 90 },
{ field: "amount", headerName: "Amount", type: "number", width: 90 },
{ field: "fee", headerName: "Fee", type: "number", width: 90 },
{
field: "transactionAmount",
headerName: "Transaction Amount",
type: "number",
width: 90,
},
// { field: 'baseAmount', headerName: 'Base Amount', type: 'number', width: 90 },
// { field: 'baseFee', headerName: 'Base Fee', type: 'number', width: 90 },
// { field: 'baseTransaction', headerName: 'Base Transaction', type: 'number', width: 90 },
// { field: 'pspFee', headerName: 'PSP Fee', type: 'number', width: 90 },
// { field: 'basePspFee', headerName: 'Base PSP Fee', type: 'number', width: 90 },
// { field: 'authAmount', headerName: 'Auth Amount', type: 'number', width: 90 },
// { field: 'baseAuthAmount', headerName: 'Base Auth Amount', type: 'number', width: 90 },
// { field: 'userBalance', headerName: 'User Balance', type: 'number', width: 90 },
// { field: 'updated', headerName: 'Updated', type: 'number', width: 90 },
// { field: 'userIp', headerName: 'User IP', type: 'number', width: 90 },
// { field: 'channel', headerName: 'Channel', type: 'number', width: 90 },
// { field: 'depositType', headerName: 'Deposit Type', type: 'number', width: 90 },
// { field: 'userEmal', headerName: 'User Emal', type: 'number', width: 90 },
// { field: 'userCategory', headerName: 'User Category', type: 'number', width: 90 },
// { field: 'userCountry', headerName: 'User Country', type: 'number', width: 90 },
// { field: 'userAccount', headerName: 'User Account', type: 'number', width: 90 },
// { field: 'bankName', headerName: 'Bank Name', type: 'number', width: 90 },
// { field: 'pspUserReference', headerName: 'PSP User Reference', type: 'number', width: 90 },
// { field: 'pspFraudScore', headerName: 'PSP Fraud Score', type: 'number', width: 90 },
// { field: 'fraudStatus', headerName: 'FraudStatus', type: 'number', width: 90 },
// { field: 'blocked', headerName: 'Blocked', type: 'number', width: 90 },
// { field: 'abuse', headerName: 'Abuse', type: 'number', width: 90 },
// { field: 'kycStatus', headerName: 'KYC Status', type: 'number', width: 90 },
// { field: 'kycPSPName', headerName: 'KYC PSP Name', type: 'number', width: 90 },
// { field: 'kycPSPStatus', headerName: 'KYC PSP Status', type: 'number', width: 90 },
// { field: 'kycIdStatus', headerName: 'KYC ID Status', type: 'number', width: 90 },
// { field: 'kycAddressStatus', headerName: 'KYC Address Status', type: 'number', width: 90 },
// { field: 'kycAgeStatus', headerName: 'KYC Age Status', type: 'number', width: 90 },
// { field: 'kycPEPAndSanction', headerName: 'KYC PEP And Sanction', type: 'number', width: 90 },
// { field: 'pspReferenceId', headerName: 'PSPReferenceID', type: 'number', width: 90 },
// { field: 'siteReferenceId', headerName: 'Site Reference ID', type: 'number', width: 90 },
// { field: 'info', headerName: 'Info', type: 'number', width: 90 },
// { field: 'accountHolder', headerName: 'Account Holder', type: 'number', width: 90 },
// { field: 'firstName', headerName: 'First Name', type: 'number', width: 90 },
// { field: 'lastName', headerName: 'Last Name', type: 'number', width: 90 },
// { field: 'street', headerName: 'Street', type: 'number', width: 90 },
// { field: 'city', headerName: 'City', type: 'number', width: 90 },
// { field: 'zip', headerName: 'ZIP', type: 'number', width: 90 },
// { field: 'dob', headerName: 'DOB', type: 'number', width: 90 },
// { field: 'mobile', headerName: 'Mobile', type: 'number', width: 90 },
// { field: 'lastUpdatedBy', headerName: 'Last Updated By', type: 'number', width: 90 },
// { field: 'ipCity', headerName: 'IP City', type: 'number', width: 90 },
// { field: 'ipRegion', headerName: 'IP Region', type: 'number', width: 90 },
// { field: 'ipCountry', headerName: 'IP Country', type: 'number', width: 90 },
// { field: 'cardIssuerCountry', headerName: 'Card Issuer Country', type: 'number', width: 90 },
// { field: 'cardBand', headerName: 'Card Band', type: 'number', width: 90 },
// { field: 'cardCategory', headerName: 'Card Category', type: 'number', width: 90 },
// { field: 'cardIssuerName', headerName: 'Card Issuer Name', type: 'number', width: 90 },
// { field: 'inn', headerName: 'INN', type: 'number', width: 90 },
// { field: 'cardType', headerName: 'Card Type', type: 'number', width: 90 },
// { field: 'firstAttempt', headerName: 'First Attempt', type: 'number', width: 90 },
// { field: 'firstSuccessful', headerName: 'First Successful', type: 'number', width: 90 },
// { field: 'firstTransaction', headerName: 'First Transaction', type: 'number', width: 90 },
// { field: 'firstPspAcountAttempt', headerName: 'First PSP Acount Attempt', type: 'number', width: 90 },
// { field: 'firstPspAcountSuccessful', headerName: 'First PSP Acount Successful', type: 'number', width: 90 },
// { field: 'originTransactionId', headerName: 'Origin Transaction ID', type: 'number', width: 90 },
// { field: 'transactionReferenceId', headerName: 'Transaction Reference ID', type: 'number', width: 90 },
];