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
+}