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

add actions on transactions table

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,13 +218,13 @@ 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" },
@@ -173,19 +238,19 @@ export const depositTransactionsSearchLabels = [
     label: "Currency",
     field: "currency",
     type: "select",
-        options: ["USD", "EUR", "GBP"]
+    options: ["USD", "EUR", "GBP"],
   },
   {
     label: "Status",
     field: "status",
     type: "select",
-        options: ["Pending","Inprogress", "Completed", "Failed"]
+    options: ["Pending", "Inprogress", "Completed", "Failed"],
   },
   {
     label: "Payment Method",
     field: "depositMethod",
     type: "select",
-        options: ["Card", "Bank Transfer"]
+    options: ["Card", "Bank Transfer"],
   },
   { label: "Date / Time", field: "dateTime", type: "date" },
-]
+];

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 {
-  const router = useRouter()
+    filteredTransactions,
-  const searchParams = useSearchParams()
+    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())
+    const params = new URLSearchParams(searchParams.toString());
-    params.set(field, value)
+    params.set(field, value);
-    router.push(`?${params.toString()}`)
+    router.push(`?${params.toString()}`);
-    router.refresh()
+    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}
+        columns={getColumnsWithDropdown(transactionsColumns) as GridColDef[]}
-        initialState={{ pagination: { paginationModel } }}
+        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;

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,7 +31,6 @@ interface IDepositTransactionsSearchLabels {
   options?: string[];
 }
 
-
 export interface ITransaction {
   filteredTransactions: IFilteredTransactions[];
   transactionsColumns: IDepositTransactionsColumns[];