Skip to content

S
sweepstake
Commit f8202c1e by Arjun Jhukal
Options

integrated the filter by date on transaction table

parent ba6db028
Showing with 98 additions and 36 deletions
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}` : ''}`,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment