updated the multiple filter logic and integrated filter at transaction

src/components/atom/SelectField.tsx

@@ -20,6 +20,7 @@ interface SelectFieldProps {
     options: Option[];
     error?: boolean;
     touched?: boolean;
+    placeholder?: string;
 }
 
 export default function SelectField({
@@ -32,6 +33,7 @@ export default function SelectField({
     options,
     error,
     touched,
+    placeholder
 }: SelectFieldProps) {
     const theme = useThemeContext();
     return (
@@ -47,7 +49,7 @@ export default function SelectField({
                 onBlur={onBlur}
                 className="w-full  border text-[14px] border-gray-300 rounded-lg px-3 py-2 focus:border-primary outline-0"
             >
-                <option value="">Select the Type of Game</option>
+                <option value="">{placeholder || "-- choose any one --"}</option>
                 {options.map((option) => (
                     <option key={option.value} value={option.value}>
                         {option.name}

src/components/pages/dashboard/adminDashboard/activityLog/Activities.tsx

@@ -5,6 +5,8 @@ import { User, Lock, ArrowUp, ArrowDown } from '@wandersonalwes/iconsax-react';
 import React, { useMemo } from 'react';
 import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, ColumnDef } from '@tanstack/react-table';
 import { Pagination, Box } from '@mui/material';
+import { TransactionStatusProps } from '../transaction/TransactionTable';
+import { StatusOptions } from '@/types/config';
 
 interface Activity {
     id: number;
@@ -168,11 +170,12 @@ export default function Activities() {
 
     const [search, setSearch] = React.useState("");
     const [page, setPage] = React.useState(1);
+    const [status, setStatus] = React.useState<TransactionStatusProps | undefined>();
     const [pageSize, setPageSize] = React.useState(10);
     const [activityType, setActivityType] = React.useState("all");
     const [sorting, setSorting] = React.useState<any>([]);
 
-    // Filter data based on search and activity type
+
     const filteredData = useMemo(() => {
         return activities.filter(activity => {
             const matchesSearch = search === "" ||
@@ -308,18 +311,17 @@ export default function Activities() {
 
     const totalPages = Math.ceil(filteredData.length / pageSize);
 
+
     return (
         <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
             <TableHeader
 
                 search={search}
                 setSearch={setSearch}
-                filterMethod={activityType}
-                setFilterMethod={(value) => {
-                    setActivityType(value);
-                    setPage(1);
-                }}
-                filterOptions={activityTypes}
+                filters={[
+                    { value: activityType, setValue: setActivityType, options: activityTypes, placeholder: "Filter by type" },
+                    { value: status || "", setValue: (value) => setStatus(value as TransactionStatusProps), options: StatusOptions, placeholder: "Filter by status" }
+                ]}
                 onDownloadCSV={() => { }}
             />
 

src/components/pages/dashboard/adminDashboard/transaction/TransactionTable.tsx

@@ -2,6 +2,7 @@
 import TableHeader from '@/components/molecules/TableHeader';
 import CustomTable from '@/components/organism/Table';
 import { useGetAllTransactionQuery } from '@/services/transaction';
+import { StatusOptions } from '@/types/config';
 import { SingleDepositProps } from '@/types/transaction';
 import { formatDateTime } from '@/utils/formatDateTime';
 import { getInitials } from '@/utils/getInitials';
@@ -16,12 +17,14 @@ import {
 import { ArrowDown, ArrowUp } from '@wandersonalwes/iconsax-react';
 import React, { useMemo, useState } from 'react';
 
+export type TransactionStatusProps = "success" | "failed" | "pending";
 export default function TransactionTable({ user_id, game_id, search, setSearch }: { user_id?: string; game_id?: number, search: string, setSearch?: (newvalue: string) => void }) {
 
     const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [rowSelection, setRowSelection] = useState({});
+    const [status, setStatus] = React.useState<TransactionStatusProps | undefined>();
     const queryArgs = useMemo(
         () => ({
             page,
@@ -29,8 +32,9 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
             search: search || "",
             game_id,
             user_id,
+            status
         }),
-        [page, pageSize, search, game_id, user_id]
+        [page, pageSize, search, game_id, user_id, status]
     );
 
     const { data, isLoading: loadingTransaction } = useGetAllTransactionQuery(queryArgs);
@@ -149,7 +153,14 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
 
     return (
         <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
-            <TableHeader search={search} setSearch={setSearch && setSearch} onDownloadCSV={() => { }} />
+            <TableHeader
+                search={search}
+                setSearch={setSearch && setSearch}
+                onDownloadCSV={() => { }}
+                filters={[
+                    { value: status || "", setValue: (value) => setStatus(value as TransactionStatusProps), options: StatusOptions, placeholder: "Filter by status" }
+                ]}
+            />
 
             <>
                 <CustomTable

src/services/transaction.ts

@@ -2,6 +2,7 @@ import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQuery } from "./baseQuery";
 import { DepositListProps, DepositProps, DepositResponseProps, DepositUrlProps } from "@/types/transaction";
 import { QueryParams } from "@/types/config";
+import { TransactionStatusProps } from "@/components/pages/dashboard/adminDashboard/transaction/TransactionTable";
 
 export const transactionApi = createApi({
     reducerPath: "transactionApi",
@@ -52,14 +53,15 @@ export const transactionApi = createApi({
             },
             providesTags: ["Withdrawl"]
         }),
-        getAllTransaction: builder.query<DepositListProps, QueryParams & { user_id?: string | number; game_id?: string | number }>({
-            query: ({ search, page, per_page, user_id, game_id }) => {
+        getAllTransaction: builder.query<DepositListProps, QueryParams & { status?: TransactionStatusProps; user_id?: string | number; game_id?: string | number }>({
+            query: ({ search, page, per_page, user_id, game_id, status }) => {
                 const params = new URLSearchParams();
                 if (search) params.append('search', search);
                 if (page) params.append('page', page.toString());
                 if (per_page) params.append('page_size', per_page.toString());
                 if (user_id) params.append('user', user_id.toString());
                 if (game_id) params.append('game', game_id.toString());
+                if (status) params.append('status', status.toString());
                 const queryString = params.toString();
                 return {
                     url: `/api/admin/transactions${queryString ? `?${queryString}` : ''}`,

src/types/config.ts

@@ -38,4 +38,10 @@ export interface QueryParams {
     per_page?: number;
     search?: string;
     status?: string;
-}
\ No newline at end of file
+}
+
+export const StatusOptions = [
+    { label: "Success", value: "success" },
+    { label: "Pending", value: "pending" },
+    { label: "Failed", value: "failed" },
+]
\ No newline at end of file