integrated the filter by date on transaction table

src/components/molecules/TableHeader.tsx

 
-import { Button, IconButton, InputAdornment, OutlinedInput, useMediaQuery } from "@mui/material";
+import { Button, Dialog, DialogContent, IconButton, InputAdornment, OutlinedInput, useMediaQuery } from "@mui/material";
 import SelectField from "../atom/SelectField";
-import { DocumentDownload, SearchNormal } from "@wandersonalwes/iconsax-react";
+import { ArrowDown, DocumentDownload, SearchNormal } from "@wandersonalwes/iconsax-react";
 import React from "react";
 import Filter from "../organism/Filter";
+import dayjs, { Dayjs } from "dayjs";
+import DateRangePicker from "./DateRangePicker";
+
 
 interface FilterOption {
     value: string;
@@ -24,6 +27,14 @@ interface TableHeaderProps {
     onDownloadCSV?: () => void;
     downloading?: boolean;
     debounceDelay?: number;
+    customRange?: {
+        startDate: string;
+        endDate: string;
+    };
+    setCustomRange?: React.Dispatch<
+        React.SetStateAction<{ startDate: string; endDate: string }>
+    >;
+
 }
 
 export default function TableHeader({
@@ -36,6 +47,8 @@ export default function TableHeader({
     filterOptions,
     downloading,
     debounceDelay = 500,
+    customRange,
+    setCustomRange,
 }: TableHeaderProps) {
     const downMD = useMediaQuery((theme: any) => theme.breakpoints.down('md'));
 
@@ -57,6 +70,30 @@ export default function TableHeader({
         setLocalSearch(search);
     }, [search]);
 
+    const [startDate, setStartDate] = React.useState<Dayjs | null>(
+        customRange?.startDate ? dayjs(customRange.startDate) : null
+    );
+    const [endDate, setEndDate] = React.useState<Dayjs | null>(
+        customRange?.endDate ? dayjs(customRange.endDate) : null
+    );
+    const [showCustomRangeModal, setShowCustomRangeModal] = React.useState(false);
+
+    const handleApplyCustomRange = () => {
+        if (startDate && endDate) {
+            setCustomRange && setCustomRange({
+                startDate: startDate.format("YYYY-MM-DD"),
+                endDate: endDate.format("YYYY-MM-DD"),
+            });
+            setShowCustomRangeModal(false);
+        }
+    };
+
+    const handleResetCustomRange = () => {
+        setStartDate(null);
+        setEndDate(null);
+        setShowCustomRangeModal(false);
+    };
+
     return (
         <div className="table__header p-4 mb-4 flex flex-wrap justify-between items-center gap-4">
             {/* Search Field */}
@@ -103,6 +140,45 @@ export default function TableHeader({
                 )}
 
                 {/* <Filter /> */}
+                <Button
+                    startIcon={!downMD && <ArrowDown size={16} />}
+                    onClick={() => setShowCustomRangeModal(true)}
+                    sx={{
+                        borderRadius: "8px",
+                        border: "1px solid var(--Gray, #E0E0E3)",
+                        padding: "8px 16px",
+                        color: "#0E0E11",
+                        maxWidth: "fit-content",
+                    }}
+                >
+                    Filter By Date
+                </Button>
+
+                <Dialog
+                    open={showCustomRangeModal}
+                    onClose={() => setShowCustomRangeModal(false)}
+                    maxWidth="xs"
+                    fullWidth
+                    PaperProps={{
+                        sx: {
+                            borderRadius: 3,
+                            backgroundColor: "rgba(0,0,0,0.8)", // ✅ visible background
+                            boxShadow: 3, // ✅ subtle shadow
+                            padding: 2,
+                        },
+                    }}
+                >
+                    <DialogContent sx={{ p: 0 }}>
+                        <DateRangePicker
+                            startDate={startDate}
+                            endDate={endDate}
+                            onStartDateChange={setStartDate}
+                            onEndDateChange={setEndDate}
+                            onApply={handleApplyCustomRange}
+                            onReset={handleResetCustomRange}
+                        />
+                    </DialogContent>
+                </Dialog>
 
                 {/* Download Button */}
                 {onDownloadCSV && <Button

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

@@ -36,6 +36,11 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
     const [status, setStatus] = React.useState<TransactionStatusProps | undefined>();
     const [selectedGame, setSelectedGame] = React.useState("");
     const [selectedTransactionType, setSelectedTransationType] = React.useState<TransactionTypeProps | string>("");
+    const [customRange, setCustomRange] = React.useState({
+        startDate: "",
+        endDate: ""
+    })
+
     const queryArgs = useMemo(
         () => ({
             page,
@@ -45,9 +50,11 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
             user_id,
             status,
             selectedGame,
-            selectedTransactionType
+            selectedTransactionType,
+            start_date: customRange.startDate,
+            end_date: customRange.endDate
         }),
-        [page, pageSize, search, game_id, user_id, status, selectedGame, selectedTransactionType]
+        [page, pageSize, search, game_id, user_id, status, selectedGame, selectedTransactionType, customRange]
     );
 
     const { data, isLoading: loadingTransaction } = useGetAllTransactionQuery(queryArgs);
@@ -65,14 +72,14 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
             header: ({ column }) => <SortableHeader column={column} label="Player Name" />,
             cell: ({ row }) => {
                 const { first_name, last_name } = row.original;
-                const initials = getInitials(first_name, last_name);
+                const initials = getInitials(first_name, last_name) || getInitials(row.original.username);
                 return (
                     <Box className="flex items-center gap-2">
                         <small className="text-[10px] w-[24px] h-[24px] flex items-center justify-center uppercase rounded-[4px] bg-[#1EB41B]/10 font-[500] text-[#1EB41B]">
                             {initials}
                         </small>
                         <div>
-                            <strong className="text-primary text-[12px] font-[500] capitalize">
+                            <strong className="text-primary text-[12px] font-[500] capitalize block">
                                 {first_name} {last_name}
                             </strong>
                             <small className="text-[10px] text-para-light font-[500]">
@@ -141,35 +148,10 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
     const { data: games, isLoading } = useGetAllGamesQuery();
 
 
+
     return (
         <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
-            {/* <TableHeader
-                search={search}
-                setSearch={setSearch && setSearch}
-                onDownloadCSV={async () => {
-                    try {
-                        const response = await downloadTransaction({ user: user_id, game: game_id?.toString(),search:search }).unwrap();
-                        dispatch(
-                            showToast({
-                                variant: ToastVariant.SUCCESS,
-                                message: response.message || "CSV Downloaded successfully."
-                            })
-                        )
-                    }
-                    catch (e: any) {
-                        dispatch(
-                            showToast({
-                                variant: ToastVariant.ERROR,
-                                message: e.message || "Unable to download CSV."
-                            })
-                        )
-                    }
-                }}
-                downloading={downloading}
-                filters={[
-                    { value: status || "", setValue: (value) => setStatus(value as TransactionStatusProps), options: StatusOptions, placeholder: "Filter by status" }
-                ]}
-            /> */}
+
             <TableHeader
                 search={search}
                 setSearch={setSearch && setSearch}
@@ -228,12 +210,14 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
                         setValue: (value) => setSelectedTransationType(value as string),
                         options: [
                             { label: "All", value: "" },
-                            { label: "Withdrawl", value: "withdrawl" },
+                            { label: "Withdrawal", value: "withdrawal" },
                             { label: "Deposit", value: "deposit" },
                         ],
                         placeholder: "Filter by Transaction Type",
                     },
                 ]}
+                customRange={customRange}
+                setCustomRange={setCustomRange}
             />
 
 

src/services/transaction.ts

@@ -60,8 +60,8 @@ export const transactionApi = createApi({
             },
             providesTags: ["Withdrawl"]
         }),
-        getAllTransaction: builder.query<DepositListProps, QueryParams & { status?: TransactionStatusProps; user_id?: string | number; game_id?: string | number, selectedGame?: string; selectedTransactionType?: string }>({
-            query: ({ search, page, per_page, user_id, game_id, status, selectedGame, selectedTransactionType }) => {
+        getAllTransaction: builder.query<DepositListProps, QueryParams & { status?: TransactionStatusProps; user_id?: string | number; game_id?: string | number, selectedGame?: string; selectedTransactionType?: string, start_date?: string; end_date?: string; }>({
+            query: ({ search, page, per_page, user_id, game_id, status, selectedGame, selectedTransactionType, start_date, end_date }) => {
                 const params = new URLSearchParams();
                 if (search) params.append('search', search);
                 if (page) params.append('page', page.toString());
@@ -71,6 +71,8 @@ export const transactionApi = createApi({
                 if (status) params.append('status', status.toString());
                 if (selectedGame) params.append('game', selectedGame.toString());
                 if (selectedTransactionType) params.append('type', selectedTransactionType.toString());
+                if (start_date) params.append('start_date', start_date.toString());
+                if (end_date) params.append('end_date', end_date.toString());
                 const queryString = params.toString();
                 return {
                     url: `/api/admin/transactions${queryString ? `?${queryString}` : ''}`,