app/AuthBootstrap.tsx

@@ -5,7 +5,6 @@ import { useEffect, useRef } from "react";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "@/app/redux/types";
 import { validateAuth } from "./redux/auth/authSlice";
-import { fetchMetadata } from "./redux/metadata/metadataSlice";
 export function AuthBootstrap() {
   const dispatch = useDispatch<AppDispatch>();
   const startedRef = useRef(false);

app/api/dashboard/admin/users/[id]/route.ts

@@ -71,7 +71,6 @@ export async function PUT(
 
     // Transform the request body to match backend format
     const transformedBody = transformUserUpdateData(body);
-    console.log("[PUT /api/v1/users/{id}] - transformed body", transformedBody);
 
     // Get the auth token from cookies
     const { cookies } = await import("next/headers");

app/api/dashboard/transactions/all/mockData.ts

@@ -1,264 +0,0 @@
-import { GridColDef } from "@mui/x-data-grid";
-
-export const allTransactionDummyData = [
-  {
-    id: 1,
-    userId: 17,
-    merchandId: 100987998,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 2,
-    userId: 17,
-    merchandId: 100987998,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 3,
-    userId: 17,
-    merchandId: 100987997,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 4,
-    userId: 19,
-    merchandId: 100987997,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 5,
-    userId: 19,
-    merchandId: 100987998,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 6,
-    userId: 27,
-    merchandId: 100987997,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 7,
-    userId: 175,
-    merchandId: 100987938,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 8,
-    userId: 172,
-    merchandId: 100987938,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 9,
-    userId: 174,
-    merchandId: 100987938,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 10,
-    userId: 7,
-    merchandId: 100987998,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 11,
-    userId: 1,
-    merchandId: 100987998,
-    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",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-];
-
-export const allTransactionsColumns: GridColDef[] = [
-  { field: "userId", headerName: "User ID", width: 130 },
-  { field: "merchandId", headerName: "Merchant ID", width: 130 },
-  { 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 allTransactionsExtraColumns: GridColDef[] = [
-  { field: "currency", headerName: "Currency", width: 130 },
-  { field: "errorInfo", headerName: "Error Info", width: 130 },
-  { field: "fraudScore", headerName: "Fraud Score", width: 130 },
-];
-
-export const extraColumns = ["currency", "errorInfo", "fraudScore"];
-
-export const allTransactionsSearchLabels = [
-  { 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" },
-];

app/api/dashboard/transactions/all/route.ts

@@ -1,84 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import {
-  allTransactionDummyData,
-  allTransactionsColumns,
-  allTransactionsSearchLabels,
-  extraColumns,
-} from "./mockData";
-
-// import { formatToDateTimeString } from "@/app/utils/formatDate";
-
-export async function GET(request: NextRequest) {
-  const { searchParams } = new URL(request.url);
-
-  const status = searchParams.get("status");
-  const userId = searchParams.get("userId");
-  const depositMethod = searchParams.get("depositMethod");
-  const merchandId = searchParams.get("merchandId");
-  const transactionId = searchParams.get("transactionId");
-  // const dateTime = searchParams.get("dateTime");
-
-  const dateTimeStart = searchParams.get("dateTime_start");
-  const dateTimeEnd = searchParams.get("dateTime_end");
-
-  let filteredTransactions = [...allTransactionDummyData];
-
-  if (userId) {
-    filteredTransactions = filteredTransactions.filter(
-      tx => tx.userId.toString() === userId
-    );
-  }
-
-  if (status) {
-    filteredTransactions = filteredTransactions.filter(
-      tx => tx.status.toLowerCase() === status.toLowerCase()
-    );
-  }
-
-  if (depositMethod) {
-    filteredTransactions = filteredTransactions.filter(
-      tx => tx.depositMethod.toLowerCase() === depositMethod.toLowerCase()
-    );
-  }
-  if (merchandId) {
-    filteredTransactions = filteredTransactions.filter(
-      tx => tx.merchandId.toString() === merchandId
-    );
-  }
-  if (transactionId) {
-    filteredTransactions = filteredTransactions.filter(
-      tx => tx.transactionId.toString() === transactionId
-    );
-  }
-
-  if (dateTimeStart && dateTimeEnd) {
-    const start = new Date(dateTimeStart);
-    const end = new Date(dateTimeEnd);
-
-    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
-      return NextResponse.json(
-        {
-          error: "Invalid date range",
-        },
-        { status: 400 }
-      );
-    }
-
-    filteredTransactions = filteredTransactions.filter(tx => {
-      const txDate = new Date(tx.dateTime);
-
-      if (isNaN(txDate.getTime())) {
-        return false;
-      }
-
-      return txDate >= start && txDate <= end;
-    });
-  }
-
-  return NextResponse.json({
-    tableRows: filteredTransactions,
-    tableSearchLabels: allTransactionsSearchLabels,
-    tableColumns: allTransactionsColumns,
-    extraColumns: extraColumns,
-  });
-}

app/api/dashboard/transactions/route.ts

@@ -0,0 +1,99 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const BE_BASE_URL = process.env.BE_BASE_URL || "http://localhost:5000";
+const COOKIE_NAME = "auth_token";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { cookies } = await import("next/headers");
+    const cookieStore = await cookies();
+    const token = cookieStore.get(COOKIE_NAME)?.value;
+
+    if (!token) {
+      return NextResponse.json(
+        { message: "Missing Authorization header" },
+        { status: 401 }
+      );
+    }
+
+    // Parse request body
+    const body = await request.json();
+    const { filters = {}, pagination = { page: 1, limit: 10 }, sort } = body;
+
+    // Build query string for backend
+    const queryParts: string[] = [];
+
+    // Add pagination (standard key=value format)
+    queryParts.push(`limit=${pagination.limit}`);
+    queryParts.push(`page=${pagination.page}`);
+
+    // Add sorting if provided (still key=value)
+    if (sort) {
+      queryParts.push(`sort=${sort.field}:${sort.order}`);
+    }
+
+    // Process filters - convert FilterValue objects to operator/value format
+    for (const [key, filterValue] of Object.entries(filters)) {
+      if (!filterValue) continue;
+
+      let op: string;
+      let value: string;
+
+      if (typeof filterValue === "string") {
+        // Simple string filter - default to ==
+        op = "==";
+        value = filterValue;
+      } else {
+        // FilterValue object with operator and value
+        const filterVal = filterValue as { operator?: string; value: string };
+        op = filterVal.operator || "==";
+        value = filterVal.value;
+      }
+
+      if (!value) continue;
+
+      // Encode value to prevent breaking URL
+      const encodedValue = encodeURIComponent(value);
+      queryParts.push(`${key}=${op}/${encodedValue}`);
+    }
+
+    const queryString = queryParts.join("&");
+    const backendUrl = `${BE_BASE_URL}/api/v1/transactions${queryString ? `?${queryString}` : ""}`;
+
+    console.log("[DEBUG] [TRANSACTIONS] Backend URL:", backendUrl);
+
+    const response = await fetch(backendUrl, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      const errorData = await response
+        .json()
+        .catch(() => ({ message: "Failed to fetch transactions" }));
+      return NextResponse.json(
+        {
+          success: false,
+          message: errorData?.message || "Failed to fetch transactions",
+        },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    console.log("[DEBUG] [TRANSACTIONS] Response data:", data);
+
+    return NextResponse.json(data, { status: response.status });
+  } catch (err: unknown) {
+    console.error("Proxy GET /api/v1/transactions error:", err);
+    const errorMessage = err instanceof Error ? err.message : "Unknown error";
+    return NextResponse.json(
+      { message: "Internal server error", error: errorMessage },
+      { status: 500 }
+    );
+  }
+}

app/api/metadata/route.ts

@@ -28,8 +28,6 @@ export async function GET() {
 
     const data = await res.json();
 
-    console.log("metadata", data);
-
     if (!res.ok) {
       return NextResponse.json(
         {

app/dashboard/transactions/all/page.tsx

@@ -1,23 +1,105 @@
+"use client";
+
 import DataTable from "@/app/features/DataTable/DataTable";
-import { getTransactions } from "@/app/services/transactions";
+import { useEffect, useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  selectFilters,
+  selectPagination,
+  selectSort,
+  selectStatus,
+  selectError,
+} from "@/app/redux/advanedSearch/selectors";
+import { GridColDef } from "@mui/x-data-grid";
+import Spinner from "@/app/components/Spinner/Spinner";
+import { AppDispatch } from "@/app/redux/store";
+import {
+  setStatus,
+  setError as setAdvancedSearchError,
+} from "@/app/redux/advanedSearch/advancedSearchSlice";
 
-export default async function AllTransactionPage({
+import {
-  searchParams,
+  TABLE_COLUMNS,
-}: {
+  TABLE_SEARCH_LABELS,
-  searchParams: Promise<Record<string, string | string[] | undefined>>;
+} from "@/app/features/DataTable/constants";
-}) {
-  // Await searchParams before processing
-  const params = await searchParams;
-  // Create a safe query string by filtering only string values
-  const safeParams: Record<string, string> = {};
-  for (const [key, value] of Object.entries(params)) {
-    if (typeof value === "string") {
-      safeParams[key] = value;
-    }
-  }
-  const query = new URLSearchParams(safeParams).toString();
-  const transactionType = "all";
-  const data = await getTransactions({ transactionType, query });
 
-  return <DataTable data={data} />;
+interface TransactionRow {
+  id: number;
+  userId?: string;
+  transactionId: string;
+  type?: string;
+  currency?: string;
+  amount?: number;
+  status?: string;
+  dateTime?: string;
+  merchantId?: string;
+  pspId?: string;
+  methodId?: string;
+  modified?: string;
+}
+
+export default function AllTransactionPage() {
+  const dispatch = useDispatch<AppDispatch>();
+  const filters = useSelector(selectFilters);
+  const pagination = useSelector(selectPagination);
+  const sort = useSelector(selectSort);
+
+  const [tableRows, setTableRows] = useState<TransactionRow[]>([]);
+  const extraColumns: string[] = []; // static for now
+
+  // Memoize rows to avoid new reference each render
+  const memoizedRows = useMemo(() => tableRows, [tableRows]);
+
+  // Fetch data when filters, pagination, or sort changes
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch(setStatus("loading"));
+      dispatch(setAdvancedSearchError(null));
+      try {
+        const response = await fetch("/api/dashboard/transactions", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ filters, pagination, sort }),
+        });
+
+        if (!response.ok) {
+          dispatch(setAdvancedSearchError("Failed to fetch transactions"));
+          setTableRows([]);
+          return;
+        }
+
+        const backendData = await response.json();
+        const transactions = backendData.transactions || [];
+
+        const rows = transactions.map((tx: any) => ({
+          id: tx.id,
+          userId: tx.customer,
+          transactionId: tx.external_id || tx.id,
+          type: tx.type,
+          currency: tx.currency,
+          amount: tx.amount,
+          status: tx.status,
+          dateTime: tx.created || tx.modified,
+          merchantId: tx.merchant_id,
+          pspId: tx.psp_id,
+          methodId: tx.method_id,
+          modified: tx.modified,
+        }));
+
+        setTableRows(rows);
+        dispatch(setStatus("succeeded"));
+      } catch (error) {
+        dispatch(
+          setAdvancedSearchError(
+            error instanceof Error ? error.message : "Unknown error"
+          )
+        );
+        setTableRows([]);
+      }
+    };
+
+    fetchData();
+  }, [dispatch, filters, pagination, sort]);
+
+  return <DataTable rows={memoizedRows} extraColumns={extraColumns} />;
 }

app/features/AdvancedSearch/AdvancedSearch.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import {
   Box,
   TextField,
@@ -16,57 +17,158 @@ 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";
-import { useSearchParams, useRouter } from "next/navigation";
+import { useDispatch, useSelector } from "react-redux";
 import { useState, useEffect, useMemo } from "react";
 import { ISearchLabel } from "../DataTable/types";
+import { AppDispatch } from "@/app/redux/store";
+import {
+  updateFilter,
+  clearFilters,
+  FilterValue,
+} from "@/app/redux/advanedSearch/advancedSearchSlice";
+import { selectFilters } from "@/app/redux/advanedSearch/selectors";
+import { normalizeValue, defaultOperatorForField } from "./utils/utils";
+
+// -----------------------------------------------------
+// COMPONENT
+// -----------------------------------------------------
 
 export default function AdvancedSearch({ labels }: { labels: ISearchLabel[] }) {
-  const searchParams = useSearchParams();
+  const dispatch = useDispatch<AppDispatch>();
-  const router = useRouter();
+  const filters = useSelector(selectFilters);
+
   const [open, setOpen] = useState(false);
+
+  // Local form state for UI (synced with Redux)
   const [formValues, setFormValues] = useState<Record<string, string>>({});
+  const [operators, setOperators] = useState<Record<string, string>>({});
 
+  // -----------------------------------------------------
+  // SYNC REDUX FILTERS TO LOCAL STATE ON LOAD
+  // -----------------------------------------------------
   useEffect(() => {
-    const initialParams = Object.fromEntries(searchParams.entries());
+    const values: Record<string, string> = {};
-    setFormValues(initialParams);
+    const ops: Record<string, string> = {};
-  }, [searchParams]);
 
-  const updateURL = useMemo(
+    labels.forEach(({ field, type }) => {
-    () =>
+      const filter = filters[field];
-      debounce((newValues: Record<string, string>) => {
+
-        const updatedParams = new URLSearchParams();
+      if (filter) {
-        Object.entries(newValues).forEach(([key, value]) => {
+        if (typeof filter === "string") {
-          if (value) updatedParams.set(key, value);
+          // Simple string filter
+          values[field] = filter;
+          ops[field] = defaultOperatorForField(field, type);
+        } else {
+          // FilterValue object with operator and value
+          values[field] = filter.value;
+          ops[field] = filter.operator;
+        }
+      }
+
+      // Handle date ranges
+      const startKey = `${field}_start`;
+      const endKey = `${field}_end`;
+      const startFilter = filters[startKey];
+      const endFilter = filters[endKey];
+
+      if (startFilter && typeof startFilter === "string") {
+        values[startKey] = startFilter;
+      }
+      if (endFilter && typeof endFilter === "string") {
+        values[endKey] = endFilter;
+      }
     });
-        router.push(`?${updatedParams.toString()}`);
+
-      }, 500),
+    setFormValues(values);
-    [router]
+    setOperators(ops);
+  }, [filters, labels]);
+
+  // -----------------------------------------------------
+  // DEBOUNCED FILTER UPDATE
+  // -----------------------------------------------------
+  const debouncedUpdateFilter = useMemo(
+    () =>
+      debounce(
+        (field: string, value: string | undefined, operator?: string) => {
+          if (!value || value === "") {
+            dispatch(updateFilter({ field, value: undefined }));
+            return;
+          }
+
+          const safeValue = normalizeValue(value);
+          if (!safeValue) {
+            dispatch(updateFilter({ field, value: undefined }));
+            return;
+          }
+
+          // For text/select fields, use FilterValue with operator
+          const filterValue: FilterValue = {
+            operator: operator ?? defaultOperatorForField(field, "text"),
+            value: safeValue,
+          };
+
+          dispatch(updateFilter({ field, value: filterValue }));
+        },
+        300
+      ),
+    [dispatch]
   );
 
-  const handleFieldChange = (field: string, value: string) => {
+  // -----------------------------------------------------
-    const updatedValues = { ...formValues, [field]: value };
+  // handlers
-    console.log(updatedValues);
+  // -----------------------------------------------------
-    setFormValues(updatedValues);
+
-    updateURL(updatedValues);
+  const updateField = (field: string, value: string) => {
+    setFormValues(prev => ({ ...prev, [field]: value }));
+    const operator = operators[field] ?? defaultOperatorForField(field, "text");
+    debouncedUpdateFilter(field, value, operator);
+  };
+
+  const updateOperator = (field: string, op: string) => {
+    setOperators(prev => ({ ...prev, [field]: op }));
+
+    // If value exists, update filter immediately with new operator
+    const currentValue = formValues[field];
+    if (currentValue) {
+      const safeValue = normalizeValue(currentValue);
+      if (safeValue) {
+        dispatch(
+          updateFilter({
+            field,
+            value: { operator: op, value: safeValue },
+          })
+        );
+      }
+    }
+  };
+
+  const updateDateRange = (
+    field: string,
+    start: string | undefined,
+    end: string | undefined
+  ) => {
+    if (start) {
+      dispatch(updateFilter({ field: `${field}_start`, value: start }));
+    } else {
+      dispatch(updateFilter({ field: `${field}_start`, value: undefined }));
+    }
+
+    if (end) {
+      dispatch(updateFilter({ field: `${field}_end`, value: end }));
+    } else {
+      dispatch(updateFilter({ field: `${field}_end`, value: undefined }));
+    }
   };
 
   const resetForm = () => {
     setFormValues({});
-    router.push("?");
+    setOperators({});
-  };
+    dispatch(clearFilters());
-
-  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);
   };
 
+  // -----------------------------------------------------
+  // render
+  // -----------------------------------------------------
   return (
     <Box sx={{ width: "185px" }}>
       <Button
@@ -79,39 +181,52 @@ export default function AdvancedSearch({ labels }: { labels: ISearchLabel[] }) {
           boxShadow: "inset 0 0 0 1px #ddd",
           fontWeight: 400,
           fontSize: "16px",
-          justifyContent: "flex-start",
+          "&:hover": { backgroundColor: "#e0e0e0" },
-          "& .MuiButton-startIcon": {
-            borderRadius: "4px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          },
-          "&:hover": {
-            backgroundColor: "#e0e0e0",
-          },
         }}
         startIcon={<SearchIcon />}
-        onClick={toggleDrawer(true)}
+        onClick={() => setOpen(true)}
       >
         Advanced Search
       </Button>
 
-      <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
+      <Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
-        <Box sx={{ width: 400 }} role="presentation">
+        <Box sx={{ width: 400 }} p={2}>
           <LocalizationProvider dateAdapter={AdapterDateFns}>
-            <Box p={2}>
+            <Box
-              <Box sx={{ display: "flex", gap: "60px" }}>
+              sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}
-                <Typography variant="h6" gutterBottom>
+            >
-                  Search
+              <Typography variant="h6">Search</Typography>
-                </Typography>
+
-                <Box display="flex" justifyContent="flex-end" gap={2}>
+              <Box display="flex" gap={2}>
                 <Button
                   variant="contained"
                   startIcon={<SearchIcon />}
-                    onClick={() => console.log("Params:", formValues)}
+                  onClick={() => {
+                    // Apply all current form values to Redux
+                    labels.forEach(({ field, type }) => {
+                      const val = formValues[field];
+                      if (!val) return;
+
+                      if (type === "select" || type === "text") {
+                        const operator =
+                          operators[field] ??
+                          defaultOperatorForField(field, type);
+                        const safeValue = normalizeValue(val);
+                        if (safeValue) {
+                          dispatch(
+                            updateFilter({
+                              field,
+                              value: { operator, value: safeValue },
+                            })
+                          );
+                        }
+                      }
+                    });
+                  }}
                 >
-                    Apply Filter
+                  Apply
                 </Button>
+
                 <Button
                   variant="outlined"
                   startIcon={<RefreshIcon />}
@@ -121,42 +236,74 @@ export default function AdvancedSearch({ labels }: { labels: ISearchLabel[] }) {
             </Box>
 
             <Stack spacing={2}>
-                {labels?.map(({ label, field, type, options }) => (
+              {labels.map(({ label, field, type, options }) => (
                 <Box key={field}>
                   <Typography variant="body2" fontWeight={600} mb={0.5}>
                     {label}
                   </Typography>
 
+                  {/* TEXT FIELDS */}
                   {type === "text" && (
+                    <>
+                      {/* AMOUNT WITH OPERATOR */}
+                      {field === "Amount" ? (
+                        <Box sx={{ display: "flex", gap: 1 }}>
+                          <FormControl size="small" sx={{ minWidth: 130 }}>
+                            <Select
+                              value={operators[field] ?? ">="}
+                              onChange={e =>
+                                updateOperator(field, e.target.value)
+                              }
+                            >
+                              <MenuItem value=">=">Greater or equal</MenuItem>
+                              <MenuItem value="<=">Less or equal</MenuItem>
+                              <MenuItem value="=">Equal</MenuItem>
+                              <MenuItem value="!=">Not equal</MenuItem>
+                              <MenuItem value=">">Greater</MenuItem>
+                              <MenuItem value="<">Less</MenuItem>
+                            </Select>
+                          </FormControl>
+
                           <TextField
                             fullWidth
                             size="small"
-                        value={formValues[field] || ""}
+                            value={formValues[field] ?? ""}
-                        onChange={e => handleFieldChange(field, e.target.value)}
+                            onChange={e => updateField(field, e.target.value)}
+                            placeholder="Enter amount"
+                          />
+                        </Box>
+                      ) : (
+                        <TextField
+                          fullWidth
+                          size="small"
+                          value={formValues[field] ?? ""}
+                          onChange={e => updateField(field, e.target.value)}
                         />
                       )}
+                    </>
+                  )}
 
+                  {/* SELECTS */}
                   {type === "select" && (
                     <FormControl fullWidth size="small">
                       <Select
-                          value={formValues[field] || ""}
+                        value={formValues[field] ?? ""}
-                          onChange={e =>
+                        onChange={e => updateField(field, e.target.value)}
-                            handleFieldChange(field, e.target.value)
-                          }
                         displayEmpty
                       >
                         <MenuItem value="">
                           <em>{label}</em>
                         </MenuItem>
-                          {options?.map(option => (
+                        {options?.map(opt => (
-                            <MenuItem value={option} key={option}>
+                          <MenuItem key={opt} value={opt}>
-                              {option}
+                            {opt}
                           </MenuItem>
                         ))}
                       </Select>
                     </FormControl>
                   )}
 
+                  {/* DATE RANGE */}
                   {type === "date" && (
                     <Stack spacing={2}>
                       <DatePicker
@@ -166,20 +313,37 @@ export default function AdvancedSearch({ labels }: { labels: ISearchLabel[] }) {
                             ? new Date(formValues[`${field}_start`])
                             : null
                         }
-                          onChange={newValue => {
+                        onChange={value => {
-                            if (!newValue)
+                          if (!value) {
-                              return handleFieldChange(`${field}_start`, "");
+                            updateDateRange(
-                            const start = new Date(newValue);
+                              field,
-                            start.setHours(0, 0, 0, 0); // force start of day
+                              undefined,
-                            handleFieldChange(
+                              formValues[`${field}_end`]
-                              `${field}_start`,
+                            );
-                              start.toISOString()
+                            setFormValues(prev => ({
+                              ...prev,
+                              [`${field}_start`]: "",
+                            }));
+                            return;
+                          }
+                          const v = new Date(value);
+                          v.setHours(0, 0, 0, 0);
+                          const isoString = v.toISOString();
+                          setFormValues(prev => ({
+                            ...prev,
+                            [`${field}_start`]: isoString,
+                          }));
+                          updateDateRange(
+                            field,
+                            isoString,
+                            formValues[`${field}_end`]
                           );
                         }}
                         slotProps={{
                           textField: { fullWidth: true, size: "small" },
                         }}
                       />
+
                       <DatePicker
                         label="End Date"
                         value={
@@ -187,14 +351,30 @@ export default function AdvancedSearch({ labels }: { labels: ISearchLabel[] }) {
                             ? new Date(formValues[`${field}_end`])
                             : null
                         }
-                          onChange={newValue => {
+                        onChange={value => {
-                            if (!newValue)
+                          if (!value) {
-                              return handleFieldChange(`${field}_end`, "");
+                            updateDateRange(
-                            const end = new Date(newValue);
+                              field,
-                            end.setHours(23, 59, 59, 999); // force end of day
+                              formValues[`${field}_start`],
-                            handleFieldChange(
+                              undefined
-                              `${field}_end`,
+                            );
-                              end.toISOString()
+                            setFormValues(prev => ({
+                              ...prev,
+                              [`${field}_end`]: "",
+                            }));
+                            return;
+                          }
+                          const v = new Date(value);
+                          v.setHours(23, 59, 59, 999);
+                          const isoString = v.toISOString();
+                          setFormValues(prev => ({
+                            ...prev,
+                            [`${field}_end`]: isoString,
+                          }));
+                          updateDateRange(
+                            field,
+                            formValues[`${field}_start`],
+                            isoString
                           );
                         }}
                         slotProps={{
@@ -206,7 +386,6 @@ export default function AdvancedSearch({ labels }: { labels: ISearchLabel[] }) {
                 </Box>
               ))}
             </Stack>
-            </Box>
           </LocalizationProvider>
         </Box>
       </Drawer>

app/features/AdvancedSearch/utils/utils.ts

@@ -0,0 +1,54 @@
+// -----------------------------------------------------
+// UTILITIES
+// -----------------------------------------------------
+
+export const extractOperator = (val?: string | null): string | null => {
+  if (!val) return null;
+
+  const match = val.match(/^(==|!=|>=|<=|LIKE|>|<)/);
+  return match ? match[0] : null;
+};
+
+export const formatWithOperator = (operator: string, value: string) =>
+  `${operator}/${value}`;
+
+export const normalizeValue = (input: any): string => {
+  if (input == null) return "";
+  if (typeof input === "string" || typeof input === "number")
+    return String(input);
+
+  if (input?.value) return String(input.value);
+  if (input?.id) return String(input.id);
+
+  if (Array.isArray(input)) {
+    return input.map(normalizeValue).join(",");
+  }
+
+  return "";
+};
+
+export const encodeFilter = (fullValue: string): string => {
+  // Split ONLY on the first slash
+  const index = fullValue.indexOf("/");
+  if (index === -1) return fullValue;
+
+  const operator = fullValue.slice(0, index);
+  const rawValue = fullValue.slice(index + 1);
+
+  return `${operator}/${encodeURIComponent(rawValue)}`;
+};
+
+export const decodeFilter = (encoded: string): string => {
+  const [operator, encodedValue] = encoded.split("/");
+  return `${operator}/${decodeURIComponent(encodedValue)}`;
+};
+
+// Default operator based on field and type
+export const defaultOperatorForField = (
+  field: string,
+  type: string
+): string => {
+  if (field === "Amount") return ">="; // numeric field
+  if (type === "text") return "LIKE"; // string/text search
+  return "=="; // everything else (select, etc.)
+};

app/features/DataTable/DataTable.tsx

@@ -1,86 +1,58 @@
 "use client";
-import { useState } from "react";
-import { useSearchParams, useRouter } from "next/navigation";
-import {
-  Button,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  FormControl,
-  Select,
-  MenuItem,
-  FormControlLabel,
-  Checkbox,
-  Stack,
-  Paper,
-  TextField,
-  Box,
-  IconButton,
-} from "@mui/material";
-import FileUploadIcon from "@mui/icons-material/FileUpload";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-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 StatusChangeDialog from "./StatusChangeDialog";
-import { IDataTable } from "./types";
 
-interface IDataTableProps<TRow, TColumn> {
+import React, { useState, useMemo } from "react";
-  data: IDataTable<TRow, TColumn>;
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { Box, Paper, IconButton, Alert } from "@mui/material";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import StatusChangeDialog from "./StatusChangeDialog";
+import DataTableHeader from "./DataTableHeader";
+import { TABLE_COLUMNS } from "./constants";
+import Spinner from "@/app/components/Spinner/Spinner";
+import { useSelector } from "react-redux";
+import { selectStatus, selectError } from "@/app/redux/auth/selectors";
+
+interface IDataTableProps<TRow extends { id: number }> {
+  rows: TRow[];
+  extraColumns?: string[];
 }
 
-export type TWithId = { id: number };
+const DataTable = <TRow extends { id: number }>({
-
+  rows,
-const DataTable = <TRow extends TWithId, TColumn extends GridColDef>({
+  extraColumns,
-  data,
+}: IDataTableProps<TRow>) => {
-}: IDataTableProps<TRow, TColumn>) => {
-  const { tableRows, tableColumns, tableSearchLabels, extraColumns } = data;
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const [rows, setRows] = useState<TRow[]>(tableRows);
-  const [open, setOpen] = useState(false);
-  const [fileType, setFileType] = useState<"csv" | "xls" | "xlsx">("csv");
-  const [onlyCurrentTable, setOnlyCurrentTable] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
   const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
   const [newStatus, setNewStatus] = useState<string>("");
   const [reason, setReason] = useState<string>("");
   const [showExtraColumns, setShowExtraColumns] = useState(false);
 
-  const filters = Object.fromEntries(searchParams.entries());
+  const status = useSelector(selectStatus);
+  const errorMessage = useSelector(selectError);
 
-  const handleClickField = (field: string, value: string) => {
+  // Open status modal
-    const params = new URLSearchParams(searchParams.toString());
+  const handleStatusChange = (id: number, status: string) => {
-    params.set(field, value);
-    router.push(`?${params.toString()}`);
-    router.refresh();
-  };
-
-  const handleStatusChange = (id: number, newStatus: string) => {
     setSelectedRowId(id);
-    setNewStatus(newStatus);
+    setNewStatus(status);
     setModalOpen(true);
   };
 
   const handleStatusSave = () => {
-    console.log(
-      `Status changed for row with ID ${selectedRowId}. New status: ${newStatus}. Reason: ${reason}`
-    );
-
-    setRows(
-      rows.map(row =>
-        row.id === selectedRowId ? { ...row, status: newStatus } : row
-      )
-    );
     setModalOpen(false);
     setReason("");
+    // rows update should happen in parent component
   };
 
-  const getColumnsWithDropdown = (columns: TColumn[]): GridColDef[] => {
+  // Columns filtered by extraColumns toggle
-    return columns.map(col => {
+  const visibleColumns = useMemo(() => {
+    if (!extraColumns || extraColumns.length === 0) return TABLE_COLUMNS;
+    return showExtraColumns
+      ? TABLE_COLUMNS
+      : TABLE_COLUMNS.filter(col => !extraColumns.includes(col.field));
+  }, [extraColumns, showExtraColumns]);
+
+  // Columns with custom renderers
+  const enhancedColumns = useMemo<GridColDef[]>(() => {
+    return visibleColumns.map(col => {
       if (col.field === "status") {
         return {
           ...col,
@@ -88,7 +60,6 @@ const DataTable = <TRow extends TWithId, TColumn extends GridColDef>({
             const value = params.value?.toLowerCase();
             let bgColor = "#e0e0e0";
             let textColor = "#000";
-
             switch (value) {
               case "completed":
                 bgColor = "#d0f0c0";
@@ -107,7 +78,6 @@ const DataTable = <TRow extends TWithId, TColumn extends GridColDef>({
                 textColor = "#c62828";
                 break;
             }
-
             return (
               <Box
                 sx={{
@@ -144,7 +114,7 @@ const DataTable = <TRow extends TWithId, TColumn extends GridColDef>({
                 width: "100%",
                 px: 1,
               }}
-              onClick={e => e.stopPropagation()} // keep row click from firing when clicking inside
+              onClick={e => e.stopPropagation()}
             >
               <Box
                 sx={{
@@ -155,7 +125,6 @@ const DataTable = <TRow extends TWithId, TColumn extends GridColDef>({
               >
                 {params.value}
               </Box>
-
               <IconButton
                 href={`/users/${params.value}`}
                 target="_blank"
@@ -171,100 +140,32 @@ const DataTable = <TRow extends TWithId, TColumn extends GridColDef>({
         };
       }
 
-      if (col.field === "actions") {
-        return {
-          ...col,
-          renderCell: (params: GridRenderCellParams) => {
-            const row = tableRows.find(r => r.id === params.id) as {
-              id: number;
-              status?: string;
-              options?: { value: string; label: string }[];
-            };
-
-            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()}
-              >
-                {options.map(option => (
-                  <MenuItem key={option.value} value={option.value}>
-                    {option.label}
-                  </MenuItem>
-                ))}
-              </Select>
-            );
-          },
-        };
-      }
-
       return col;
     });
-  };
+  }, [visibleColumns]);
-
-  let filteredColumns = tableColumns;
-  if (extraColumns && extraColumns.length > 0) {
-    filteredColumns = showExtraColumns
-      ? tableColumns
-      : tableColumns.filter(col => !extraColumns.includes(col.field));
-  }
 
   return (
-    <Paper sx={{ width: "calc(100vw - 300px)", overflowX: "hidden" }}>
+    <>
-      <Stack
+      {status === "loading" && <Spinner size="small" color="#fff" />}
-        direction="row"
+      {status === "failed" && (
-        justifyContent="space-between"
+        <Alert severity="error">
-        alignItems="center"
+          {errorMessage || "Failed to load transactions."}
-        p={2}
+        </Alert>
-        flexWrap="wrap"
-        gap={2}
-      >
-        <TextField
-          label="Search"
-          variant="outlined"
-          size="small"
-          onChange={e => console.log(`setSearchQuery(${e.target.value})`)}
-          sx={{ width: 300 }}
-        />
-        <AdvancedSearch labels={tableSearchLabels} />
-        <SearchFilters filters={filters} />
-        <Button
-          variant="outlined"
-          startIcon={<FileUploadIcon />}
-          onClick={() => setOpen(true)}
-        >
-          Export
-        </Button>
-        {extraColumns && extraColumns.length > 0 && (
-          <Button
-            variant="outlined"
-            onClick={() => setShowExtraColumns(prev => !prev)}
-          >
-            {showExtraColumns ? "Hide Extra Columns" : "Show Extra Columns"}
-          </Button>
       )}
-      </Stack>
+      <Paper sx={{ width: "100%", overflowX: "hidden" }}>
+        <DataTableHeader
+          extraColumns={extraColumns}
+          showExtraColumns={showExtraColumns}
+          onToggleExtraColumns={() => setShowExtraColumns(prev => !prev)}
+          onOpenExport={() => {}}
+        />
 
-      <Box sx={{ width: "calc(100vw - 300px)", overflowX: "auto" }}>
+        <Box sx={{ width: "100%", overflowX: "auto" }}>
           <Box sx={{ minWidth: 1200 }}>
             <DataGrid
-            rows={tableRows}
+              rows={rows}
-            columns={getColumnsWithDropdown(filteredColumns)}
+              columns={enhancedColumns}
-            initialState={{
+              pageSizeOptions={[10, 25, 50, 100]}
-              pagination: { paginationModel: { pageSize: 50 } },
-            }}
-            pageSizeOptions={[50, 100]}
               sx={{
                 border: 0,
                 cursor: "pointer",
@@ -280,11 +181,6 @@ const DataTable = <TRow extends TWithId, TColumn extends GridColDef>({
                   justifyContent: "center",
                 },
               }}
-            onCellClick={params => {
-              if (params.field !== "actions") {
-                handleClickField(params.field, params.value as string);
-              }
-            }}
             />
           </Box>
         </Box>
@@ -297,53 +193,10 @@ const DataTable = <TRow extends TWithId, TColumn extends GridColDef>({
           handleClose={() => setModalOpen(false)}
           handleSave={handleStatusSave}
         />
-
-      <Dialog open={open} onClose={() => setOpen(false)}>
-        <DialogTitle>Export Transactions</DialogTitle>
-        <DialogContent>
-          <FormControl fullWidth sx={{ mt: 2 }}>
-            <Select
-              value={fileType}
-              onChange={e =>
-                setFileType(e.target.value as "csv" | "xls" | "xlsx")
-              }
-            >
-              <MenuItem value="csv">CSV</MenuItem>
-              <MenuItem value="xls">XLS</MenuItem>
-              <MenuItem value="xlsx">XLSX</MenuItem>
-            </Select>
-          </FormControl>
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={onlyCurrentTable}
-                onChange={e => setOnlyCurrentTable(e.target.checked)}
-              />
-            }
-            label="Only export current table"
-            sx={{ mt: 2 }}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setOpen(false)}>Cancel</Button>
-          <Button
-            variant="contained"
-            onClick={() =>
-              exportData(
-                tableRows,
-                tableColumns,
-                fileType,
-                onlyCurrentTable,
-                setOpen
-              )
-            }
-          >
-            Export
-          </Button>
-        </DialogActions>
-      </Dialog>
       </Paper>
+    </>
   );
 };
 
-export default DataTable;
+// Memoize to avoid unnecessary re-renders
+export default React.memo(DataTable);

app/features/DataTable/DataTableHeader.tsx

@@ -0,0 +1,51 @@
+import { Button, TextField, Stack } from "@mui/material";
+import FileUploadIcon from "@mui/icons-material/FileUpload";
+import AdvancedSearch from "../AdvancedSearch/AdvancedSearch";
+import { TABLE_SEARCH_LABELS } from "./constants";
+
+type DataTableHeaderProps = {
+  extraColumns?: string[];
+  showExtraColumns: boolean;
+  onToggleExtraColumns: () => void;
+  onOpenExport: () => void;
+};
+
+export default function DataTableHeader({
+  extraColumns,
+  showExtraColumns,
+  onToggleExtraColumns,
+  onOpenExport,
+}: DataTableHeaderProps) {
+  return (
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      alignItems="center"
+      p={2}
+      flexWrap="wrap"
+      gap={2}
+    >
+      <TextField
+        label="Search = To Be Implemented"
+        variant="outlined"
+        size="small"
+        disabled
+        onChange={e => console.log(`setSearchQuery(${e.target.value})`)}
+        sx={{ width: 300, backgroundColor: "#f0f0f0" }}
+      />
+      <AdvancedSearch labels={TABLE_SEARCH_LABELS} />
+      <Button
+        variant="outlined"
+        startIcon={<FileUploadIcon />}
+        onClick={onOpenExport}
+      >
+        Export
+      </Button>
+      {extraColumns && extraColumns.length > 0 && (
+        <Button variant="outlined" onClick={onToggleExtraColumns}>
+          {showExtraColumns ? "Hide Extra Columns" : "Show Extra Columns"}
+        </Button>
+      )}
+    </Stack>
+  );
+}

app/features/DataTable/constants.ts

@@ -0,0 +1,37 @@
+import { GridColDef } from "@mui/x-data-grid";
+import { ISearchLabel } from "./types";
+
+export const TABLE_COLUMNS: GridColDef[] = [
+  { field: "userId", headerName: "User ID", width: 130 },
+  { field: "transactionId", headerName: "Transaction ID", width: 180 },
+  { field: "type", headerName: "Type", width: 120 },
+  { field: "currency", headerName: "Currency", width: 100 },
+  { field: "amount", headerName: "Amount", width: 120 },
+  { field: "status", headerName: "Status", width: 120 },
+  { field: "dateTime", headerName: "Date / Time", width: 180 },
+];
+
+export const TABLE_SEARCH_LABELS: ISearchLabel[] = [
+  { label: "User", field: "Customer", type: "text" },
+  { label: "Transaction ID", field: "ExternalID", type: "text" },
+  {
+    label: "Type",
+    field: "Type",
+    type: "select",
+    options: ["deposit", "withdrawal"],
+  },
+  {
+    label: "Currency",
+    field: "Currency",
+    type: "select",
+    options: ["USD", "EUR", "GBP", "TRY"],
+  },
+  {
+    label: "Status",
+    field: "Status",
+    type: "select",
+    options: ["pending", "completed", "failed"],
+  },
+  { label: "Amount", field: "Amount", type: "text" },
+  { label: "Date / Time", field: "created", type: "date" },
+];

app/features/UserRoles/userRoleCard.tsx

@@ -161,7 +161,7 @@ export default function UserRoleCard({ user }: Props) {
           <Modal
             open={showConfirmModal}
             onClose={() => setShowConfirmModal(false)}
-            title="Reset Password"
+            title={`Reset Password  - ${user.first_name}`}
           >
             {newPassword && (
               <div className="reset-password__content">

app/features/dashboard/header/dropDown/DropDown.tsx

@@ -24,8 +24,6 @@ export default function SidebarDropdown({ onChange }: Props) {
     onChange?.(event);
   };
 
-  console.log("sidebar", sidebar);
-
   return (
     <FormControl fullWidth variant="outlined" sx={{ minWidth: 200 }}>
       <InputLabel id="sidebar-dropdown-label">Navigate To</InputLabel>

app/redux/advanedSearch/advancedSearchSlice.ts

@@ -1,53 +1,106 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-interface AdvancedSearchState {
+// Filter value can be a simple string or an object with operator and value
-  keyword: string;
+export interface FilterValue {
-  transactionID: string;
+  operator: string;
-  transactionReferenceId: string;
+  value: string;
-  user: string;
+}
-  currency: string;
+
-  state: string;
+export type FilterField = string | FilterValue;
-  statusDescription: string;
+
-  transactionType: string;
+export interface AdvancedSearchFilters {
-  paymentMethod: string;
+  [field: string]: FilterField | undefined;
-  psps: string;
+}
-  initialPsps: string;
+
-  merchants: string;
+export type FetchStatus = "idle" | "loading" | "succeeded" | "failed";
-  startDate: null | string;
+
-  endDate: null | string;
+export interface AdvancedSearchState {
-  lastUpdatedFrom: null | string;
+  filters: AdvancedSearchFilters;
-  lastUpdatedTo: null | string;
+  pagination: {
-  minAmount: string;
+    page: number;
-  maxAmount: string;
+    limit: number;
-  channel: string;
+  };
+  sort?: {
+    field: string;
+    order: "asc" | "desc";
+  };
+  status: FetchStatus;
+  error: string | null;
 }
 
 const initialState: AdvancedSearchState = {
-  keyword: "",
+  filters: {},
-  transactionID: "",
+  pagination: {
-  transactionReferenceId: "",
+    page: 1,
-  user: "",
+    limit: 10,
-  currency: "",
+  },
-  state: "",
+  status: "idle",
-  statusDescription: "",
+  error: null,
-  transactionType: "",
-  paymentMethod: "",
-  psps: "",
-  initialPsps: "",
-  merchants: "",
-  startDate: null,
-  endDate: null,
-  lastUpdatedFrom: null,
-  lastUpdatedTo: null,
-  minAmount: "",
-  maxAmount: "",
-  channel: "",
 };
 
 const advancedSearchSlice = createSlice({
   name: "advancedSearch",
   initialState,
-  reducers: {},
+  reducers: {
+    setFilters: (state, action: PayloadAction<AdvancedSearchFilters>) => {
+      state.filters = action.payload;
+      // Reset to page 1 when filters change
+      state.pagination.page = 1;
+    },
+    updateFilter: (
+      state,
+      action: PayloadAction<{ field: string; value: FilterField | undefined }>
+    ) => {
+      const { field, value } = action.payload;
+      if (value === undefined || value === "") {
+        delete state.filters[field];
+      } else {
+        state.filters[field] = value;
+      }
+      // Reset to page 1 when a filter changes
+      state.pagination.page = 1;
+    },
+    clearFilters: state => {
+      state.filters = {};
+      state.pagination.page = 1;
+    },
+    setPagination: (
+      state,
+      action: PayloadAction<{ page: number; limit: number }>
+    ) => {
+      state.pagination = action.payload;
+    },
+    setSort: (
+      state,
+      action: PayloadAction<
+        { field: string; order: "asc" | "desc" } | undefined
+      >
+    ) => {
+      state.sort = action.payload;
+    },
+    setStatus: (state, action: PayloadAction<FetchStatus>) => {
+      state.status = action.payload;
+      if (action.payload === "loading") {
+        state.error = null;
+      }
+    },
+    setError: (state, action: PayloadAction<string | null>) => {
+      state.error = action.payload;
+      if (action.payload) {
+        state.status = "failed";
+      }
+    },
+  },
 });
 
+export const {
+  setFilters,
+  updateFilter,
+  clearFilters,
+  setPagination,
+  setSort,
+  setStatus,
+  setError,
+} = advancedSearchSlice.actions;
+
 export default advancedSearchSlice.reducer;

app/redux/advanedSearch/selectors.ts

@@ -0,0 +1,24 @@
+import { RootState } from "../store";
+import {
+  AdvancedSearchFilters,
+  FilterField,
+  FetchStatus,
+} from "./advancedSearchSlice";
+
+export const selectFilters = (state: RootState): AdvancedSearchFilters =>
+  state.advancedSearch.filters;
+
+export const selectPagination = (state: RootState) =>
+  state.advancedSearch.pagination;
+
+export const selectSort = (state: RootState) => state.advancedSearch.sort;
+
+export const selectFilterValue = (
+  state: RootState,
+  field: string
+): FilterField | undefined => state.advancedSearch.filters[field];
+
+export const selectStatus = (state: RootState): FetchStatus =>
+  state.advancedSearch.status;
+
+export const selectError = (state: RootState) => state.advancedSearch.error;

app/redux/types.ts

@@ -7,6 +7,25 @@ export type AppDispatch = typeof store.dispatch;
 export type ThunkSuccess<T extends object = object> = { message: string } & T;
 export type ThunkError = string;
 
+//User related types
+export type TGroupName = "Super Admin" | "Admin" | "Reader";
+
+export type TJobTitle =
+  | "C-Level"
+  | "Admin"
+  | "Operations"
+  | "Support"
+  | "KYC"
+  | "Payments"
+  | "Risk"
+  | "Finance"
+  | "Trading"
+  | "Compliance"
+  | "DevOps"
+  | "Software Engineer";
+
+export type TMerchantName = "Data Spin" | "Win Bot";
+
 export interface IUserResponse {
   success: boolean;
   token: string;
@@ -17,6 +36,8 @@ export interface IUserResponse {
   lastName: string | null;
   merchantId?: number | null;
   username?: string | null;
+  groups?: TGroupName[];
+  merchants?: TMerchantName[];
   phone?: string | null;
   jobTitle?: string | null;
   enabled?: boolean;