diff --git a/payment-iq/app/components/test/test1.tsx b/payment-iq/app/components/test/test1.tsx
new file mode 100644
index 0000000..5a9accf
--- /dev/null
+++ b/payment-iq/app/components/test/test1.tsx
@@ -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 = () => (
+
+
+ {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
+
+
+
+ {index % 2 === 0 ? : }
+
+
+
+
+ ))}
+
+
+
+ {["All mail", "Trash", "Spam"].map((text, index) => (
+
+
+
+ {index % 2 === 0 ? : }
+
+
+
+
+ ))}
+
+
+ );
+
+ return (
+
+ }
+ onClick={toggleDrawer(true)}
+ >
+ Advanced Search
+
+ {/* */}
+
+ {list()}
+
+
+ );
+}
diff --git a/payment-iq/app/components/test/test2.tsx b/payment-iq/app/components/test/test2.tsx
new file mode 100644
index 0000000..631ba38
--- /dev/null
+++ b/payment-iq/app/components/test/test2.tsx
@@ -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 (
+
+
+
+ Search
+
+
+
+ {[
+ { 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 }) => (
+
+
+
+ {label}
+
+
+
+ {type === "text" && (
+ handleChange(field, e.target.value)}
+ />
+ )}
+ {type === "select" && (
+
+
+
+ )}
+ {type === "date" && (
+ handleChange(field, newValue)}
+ renderInput={(params) => (
+
+ )}
+ />
+ )}
+
+
+ ))}
+
+ {/* Buttons */}
+
+ }
+ onClick={resetForm}
+ >
+ Reset
+
+ }
+ onClick={() => console.log("Apply Filter", form)}
+ >
+ Apply Filter
+
+
+
+
+
+ );
+}
diff --git a/payment-iq/app/features/AdvancedSearch/AdvancedSearch.tsx b/payment-iq/app/features/AdvancedSearch/AdvancedSearch.tsx
new file mode 100644
index 0000000..a51dd10
--- /dev/null
+++ b/payment-iq/app/features/AdvancedSearch/AdvancedSearch.tsx
@@ -0,0 +1,208 @@
+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({setForm, form, resetForm}) {
+ const [open, setOpen] = useState(false);
+
+ 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 = () => (
+
+
+
+
+
+ Search
+
+ {/* Buttons */}
+
+ }
+ onClick={() => console.log("Apply Filter", form)}
+ sx={{ "& .span": { margin: "0px", padding: "0px" } }}
+ >
+ Apply Filter
+
+ }
+ onClick={resetForm}
+ sx={{ "& span": { margin: "0px", padding: "0px" } }}
+ >
+
+
+
+ {[
+ { 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 }) => (
+
+
+ {label}
+
+ {type === "text" && (
+ handleChange(field, e.target.value)}
+ />
+ )}
+ {type === "select" && (
+
+
+
+ )}
+ {type === "date" && (
+ handleChange(field, newValue)}
+ renderInput={(params) => (
+
+ )}
+ />
+ )}
+
+ ))}
+
+
+
+
+ );
+ return (
+
+ }
+ onClick={toggleDrawer(true)}
+ >
+ Advanced Search
+
+ {/* */}
+
+ {list()}
+
+
+ );
+}
diff --git a/payment-iq/app/features/AdvancedSearch/store/advancedSearchSlice.ts b/payment-iq/app/features/AdvancedSearch/store/advancedSearchSlice.ts
new file mode 100644
index 0000000..43b055c
--- /dev/null
+++ b/payment-iq/app/features/AdvancedSearch/store/advancedSearchSlice.ts
@@ -0,0 +1,56 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+interface AdvancedSearchState {
+ keyword: string,
+ transactionID: string,
+ transactionReferenceId: string,
+ user: string,
+ currency: string,
+ state: string,
+ statusDescription: string,
+ transactionType: string,
+ paymentMethod: string,
+ psps: string,
+ initialPsps: string,
+ merchants: string,
+ startDate: null | string,
+ endDate: null | string,
+ lastUpdatedFrom: null | string,
+ lastUpdatedTo: null | string,
+ minAmount: string,
+ maxAmount: string,
+ channel: string,
+}
+
+const initialState: AdvancedSearchState = {
+ keyword: "",
+ transactionID: "",
+ transactionReferenceId: "",
+ user: "",
+ currency: "",
+ state: "",
+ statusDescription: "",
+ transactionType: "",
+ paymentMethod: "",
+ psps: "",
+ initialPsps: "",
+ merchants: "",
+ startDate: null,
+ endDate: null,
+ lastUpdatedFrom: null,
+ lastUpdatedTo: null,
+ minAmount: "",
+ maxAmount: "",
+ channel: "",
+};
+
+const advancedSearchSlice = createSlice({
+ name: 'advancedSearch',
+ initialState,
+ reducers: {
+ },
+},
+);
+
+export default advancedSearchSlice.reducer;
+
diff --git a/payment-iq/app/features/Pages/transactions/Transactions.tsx b/payment-iq/app/features/Pages/transactions/Transactions.tsx
index 58f7deb..a8629c5 100644
--- a/payment-iq/app/features/Pages/transactions/Transactions.tsx
+++ b/payment-iq/app/features/Pages/transactions/Transactions.tsx
@@ -1,5 +1,5 @@
"use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import {
Button,
Dialog,
@@ -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 };
@@ -29,6 +30,96 @@ export default function TransactionTable() {
const [open, setOpen] = useState(false);
const [fileType, setFileType] = useState<"csv" | "xls" | "xlsx">("csv");
const [onlyCurrentTable, setOnlyCurrentTable] = useState(false);
+ const [filteredRows, setFilteredRows] = useState([])
+
+ 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 filterRows = (rows1, filters) => {
+ // debugger
+ return rows1.filter(row => {
+ const hasTransactionIdFilter = filters.transactionID !== "";
+ const hasStateFilter = filters.state !== "";
+
+
+ if (hasTransactionIdFilter && hasStateFilter) {
+ console.log(1234)
+ // Return rows that match BOTH filters
+ return row.transactionID == filters.transactionID && row.state.toLowerCase() === filters.state.toLowerCase();
+ } else if (hasTransactionIdFilter) {
+ console.log(12345)
+ // Return rows that match merchandId only
+ return row.transactionID == filters.transactionID;
+ } else if (hasStateFilter) {
+ // Return rows that match state only
+ console.log(123456)
+ return row.state.toLowerCase() === filters.state.toLowerCase();
+ } else {
+ console.log(1234567)
+ // No filters applied, return all rows
+ return rows;
+ }
+ });
+ };
+
+
+ useEffect(() => {
+ console.log(form)
+ console.log(filterRows(rows, { transactionID: form.transactionID, state: form.state }))
+ setFilteredRows(filterRows(rows, { transactionID: form.transactionID, state: form.state }));
+ }, [form])
+
+ // useEffect(()=>{
+ // if(form?.transactionId){
+ // setFilteredRows(rows.filter(row => (row.merchandId.toString() === form.transactionId) && (row.state !== "" && (row.state === form.state))));
+ // } else{
+ // setFilteredRows(rows)
+ // }
+ // },[form])
const handleExport = () => {
const exportRows = onlyCurrentTable ? rows.slice(0, 5) : rows;
@@ -71,6 +162,9 @@ export default function TransactionTable() {
onChange={(e) => console.log(`setSearchQuery(${e.target.value})`)}
sx={{ width: 300 }}
/>
+
+ {/* */}
+ {/* */}
}
@@ -81,7 +175,7 @@ export default function TransactionTable() {
- {children}
+
+
+ {children}
+
+