Mitchell/payment-backoffice
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request #10 from mitchell131/add-actions-on-transactions-page

Browse Source 
add actions on transactions table
This commit is contained in:
Petropoulos Evangelos 2025-07-19 16:27:21 +03:00 committed by GitHub
commit 36b85ddf1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 189 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
payment-iq/app/api/transactions/deposit/mockData.ts
View File

@ -1,6 +1,5 @@
import { GridColDef } from "@mui/x-data-grid";
export const depositTransactionDummyData = [
{
id: 1,
@ -9,6 +8,12 @@ export const depositTransactionDummyData = [
transactionId: 1049131973,
depositMethod: "Card",
status: "Completed",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-18 10:10:30",
@ -22,6 +27,12 @@ export const depositTransactionDummyData = [
transactionId: 1049131973,
depositMethod: "Card",
status: "Completed",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-18 10:10:30",
@ -34,7 +45,13 @@ export const depositTransactionDummyData = [
merchandId: 100987997,
transactionId: 1049131973,
depositMethod: "Card",
status: "Complete",
status: "Completed",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-18 10:10:30",
@ -48,6 +65,12 @@ export const depositTransactionDummyData = [
transactionId: 1049136973,
depositMethod: "Card",
status: "Completed",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-18 10:10:30",
@ -61,6 +84,12 @@ export const depositTransactionDummyData = [
transactionId: 1049131973,
depositMethod: "Card",
status: "Completed",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-18 10:10:30",
@ -74,6 +103,12 @@ export const depositTransactionDummyData = [
transactionId: 1049131973,
depositMethod: "Card",
status: "Pending",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-18 10:10:30",
@ -87,6 +122,12 @@ export const depositTransactionDummyData = [
transactionId: 1049136973,
depositMethod: "Card",
status: "Pending",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-18 10:10:30",
@ -100,6 +141,12 @@ export const depositTransactionDummyData = [
transactionId: 1049131973,
depositMethod: "Card",
status: "Pending",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-12 10:10:30",
@ -113,6 +160,12 @@ export const depositTransactionDummyData = [
transactionId: 1049131973,
depositMethod: "Bank Transfer",
status: "Inprogress",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-17 10:10:30",
@ -126,6 +179,12 @@ export const depositTransactionDummyData = [
transactionId: 1049131973,
depositMethod: "Bank Transfer",
status: "Inprogress",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-17 10:10:30",
@ -139,6 +198,12 @@ export const depositTransactionDummyData = [
transactionId: 1049131973,
depositMethod: "Bank Transfer",
status: "Error",
options: [
{ value: "Pending", label: "Pending" },
{ value: "Completed", label: "Completed" },
{ value: "Inprogress", label: "Inprogress" },
{ value: "Error", label: "Error" },
],
amount: 4000,
currency: "EUR",
dateTime: "2025-06-17 10:10:30",
@ -153,39 +218,39 @@ export const depositTransactionsColumns: GridColDef[] = [
{ field: "transactionId", headerName: "Transaction ID", width: 130 },
{ field: "depositMethod", headerName: "Deposit Method", width: 130 },
{ field: "status", headerName: "Status", width: 130 },
{ field: "actions", headerName: "Actions", width: 150 },
{ field: "amount", headerName: "Amount", width: 130 },
{ field: "currency", headerName: "Currency", width: 130 },
{ field: "dateTime", headerName: "Date / Time", width: 130 },
{ field: "errorInfo", headerName: "Error Info", width: 130 },
{ field: "fraudScore", headerName: "Fraud Score", width: 130 },
]
];
export const depositTransactionsSearchLabels = [
{ label: "User", field: "userId", type: "text" },
{ label: "Transaction ID", field: "transactionId", type: "text" },
{
label: "Transaction Reference ID",
field: "transactionReferenceId",
type: "text",
},
{
label: "Currency",
field: "currency",
type: "select",
options: ["USD", "EUR", "GBP"]
},
{
label: "Status",
field: "status",
type: "select",
options: ["Pending","Inprogress", "Completed", "Failed"]
},
{
label: "Payment Method",
field: "depositMethod",
type: "select",
options: ["Card", "Bank Transfer"]
},
{ label: "Date / Time", field: "dateTime", type: "date" },
]
{ label: "User", field: "userId", type: "text" },
{ label: "Transaction ID", field: "transactionId", type: "text" },
{
label: "Transaction Reference ID",
field: "transactionReferenceId",
type: "text",
},
{
label: "Currency",
field: "currency",
type: "select",
options: ["USD", "EUR", "GBP"],
},
{
label: "Status",
field: "status",
type: "select",
options: ["Pending", "Inprogress", "Completed", "Failed"],
},
{
label: "Payment Method",
field: "depositMethod",
type: "select",
options: ["Card", "Bank Transfer"],
},
{ label: "Date / Time", field: "dateTime", type: "date" },
];

107
payment-iq/app/features/Pages/transactions/TransactionsTable.tsx
View File

@ -17,23 +17,24 @@ import {
TextField,
} from "@mui/material";
import FileUploadIcon from "@mui/icons-material/FileUpload";
import { DataGrid } from "@mui/x-data-grid";
import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
import AdvancedSearch from "../../AdvancedSearch/AdvancedSearch";
import SearchFilters from "@/app/components/searchFilter/SearchFilters";
import { exportData } from "@/app/utils/exportData";
import { ITransaction } from "./types";
const paginationModel = { page: 0, pageSize: 50 };
interface IDepositProps {
res: ITransaction
res: ITransaction;
}
const TransactionsTable = ({ res }: IDepositProps) => {
const {filteredTransactions, transactionsColumns, transactionsSearchLabels} = res;
const router = useRouter()
const searchParams = useSearchParams()
const {
filteredTransactions,
transactionsColumns,
transactionsSearchLabels,
} = res;
const router = useRouter();
const searchParams = useSearchParams();
const [open, setOpen] = useState(false);
const [fileType, setFileType] = useState<"csv" | "xls" | "xlsx">("csv");
@ -41,14 +42,58 @@ const TransactionsTable = ({ res }: IDepositProps) => {
const filters = Object.fromEntries(searchParams.entries());
const handleClickField = (field: string, value: string) => {
const params = new URLSearchParams(searchParams.toString())
params.set(field, value)
router.push(`?${params.toString()}`)
router.refresh()
const params = new URLSearchParams(searchParams.toString());
params.set(field, value);
router.push(`?${params.toString()}`);
router.refresh();
};
const handleStatusChange = (id: number, newStatus: string) => {
setRows(
rows.map((row) => (row.id === id ? { ...row, status: newStatus } : row)),
);
};
const [rows, setRows] = useState(filteredTransactions);
const getColumnsWithDropdown = (columns: GridColDef[]) => {
return columns.map((col) => {
if (col.field === "actions") {
return {
...col,
renderCell: (params: GridRenderCellParams) => {
const row = filteredTransactions.find((r) => r.id === params.id);
const options = row?.options;
if (!options) return params.value;
return (
<Select
value={params.value ?? row.status}
onChange={(e) =>
handleStatusChange(params.id as number, e.target.value)
}
size="small"
sx={{
width: "100%",
"& .MuiOutlinedInput-notchedOutline": { border: "none" },
"& .MuiSelect-select": { py: 0.5 },
}}
onClick={(e) => e.stopPropagation()} // Prevent row click when selecting
>
{options.map((option: { value: string; label: string }) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
);
},
};
}
return col;
});
};
return (
<Paper>
@ -78,13 +123,22 @@ const TransactionsTable = ({ res }: IDepositProps) => {
<DataGrid
rows={filteredTransactions}
columns={transactionsColumns}
initialState={{ pagination: { paginationModel } }}
columns={getColumnsWithDropdown(transactionsColumns) as GridColDef[]}
initialState={{
pagination: { paginationModel: { pageSize: 50 } },
}}
pageSizeOptions={[50, 100]}
sx={{ border: 0, cursor: 'pointer' }}
sx={{
border: 0,
cursor: "pointer",
"& .MuiDataGrid-cell": {
py: 1,
},
}}
onCellClick={(params) => {
handleClickField(params.field, params.value as string)
if (params.field !== "actions") {
handleClickField(params.field, params.value as string);
}
}}
/>
@ -117,13 +171,24 @@ const TransactionsTable = ({ res }: IDepositProps) => {
</DialogContent>
<DialogActions>
<Button onClick={() => setOpen(false)}>Cancel</Button>
<Button variant="contained" onClick={() => exportData(filteredTransactions as unknown as ITransaction[], transactionsColumns, fileType, onlyCurrentTable, setOpen)}>
<Button
variant="contained"
onClick={() =>
exportData(
filteredTransactions as unknown as ITransaction[],
transactionsColumns,
fileType,
onlyCurrentTable,
setOpen,
)
}
>
Export
</Button>
</DialogActions>
</Dialog>
</Paper>
);
}
};
export default TransactionsTable
export default TransactionsTable;

9
payment-iq/app/features/Pages/transactions/types.ts
View File

@ -4,6 +4,11 @@ interface IDepositTransactionsColumns {
width: number;
}
interface IOptions {
value: string;
label: string;
}
interface IFilteredTransactions {
id: number;
userId: number;
@ -11,6 +16,7 @@ interface IFilteredTransactions {
transactionId: number;
depositMethod: string;
status: string;
options: IOptions[];
amount: number;
currency: string;
dateTime: string;
@ -25,9 +31,8 @@ interface IDepositTransactionsSearchLabels {
options?: string[];
}
export interface ITransaction {
filteredTransactions: IFilteredTransactions[];
transactionsColumns: IDepositTransactionsColumns[];
transactionsSearchLabels: IDepositTransactionsSearchLabels[];
}
}