From 5dec15f6701541c36b570e663024d450dc96f9c8 Mon Sep 17 00:00:00 2001 From: Petropoulos Evangelos Date: Fri, 18 Jul 2025 17:37:06 +0300 Subject: [PATCH] add actions on transactions table --- .../app/api/transactions/deposit/mockData.ts | 127 +++++++++++++----- .../Pages/transactions/TransactionsTable.tsx | 107 ++++++++++++--- .../app/features/Pages/transactions/types.ts | 9 +- 3 files changed, 189 insertions(+), 54 deletions(-) diff --git a/payment-iq/app/api/transactions/deposit/mockData.ts b/payment-iq/app/api/transactions/deposit/mockData.ts index 18c0faf..98a37ba 100644 --- a/payment-iq/app/api/transactions/deposit/mockData.ts +++ b/payment-iq/app/api/transactions/deposit/mockData.ts @@ -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" }, -] \ No newline at end of file + { 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" }, +]; diff --git a/payment-iq/app/features/Pages/transactions/TransactionsTable.tsx b/payment-iq/app/features/Pages/transactions/TransactionsTable.tsx index e64b4cd..2c6d9a0 100644 --- a/payment-iq/app/features/Pages/transactions/TransactionsTable.tsx +++ b/payment-iq/app/features/Pages/transactions/TransactionsTable.tsx @@ -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 ( + + ); + }, + }; + } + return col; + }); + }; return ( @@ -78,13 +123,22 @@ const TransactionsTable = ({ res }: IDepositProps) => { { - 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) => { - ); -} +}; -export default TransactionsTable +export default TransactionsTable; diff --git a/payment-iq/app/features/Pages/transactions/types.ts b/payment-iq/app/features/Pages/transactions/types.ts index 7ef6a1f..128c28e 100644 --- a/payment-iq/app/features/Pages/transactions/types.ts +++ b/payment-iq/app/features/Pages/transactions/types.ts @@ -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[]; -} \ No newline at end of file +}