Skip to content

S
sweepstake
Commit d6a3f84e by Arjun Jhukal
Options

updated the date filter at deposit and withdrawl from user

parent 8d0c4a4e
Showing with 528 additions and 73 deletions
package.json
...@@ -16,10 +16,14 @@ ...@@ -16,10 +16,14 @@
"@emotion/styled": "^11.14.1", "@emotion/styled": "^11.14.1",
"@lottiefiles/dotlottie-react": "^0.17.5", "@lottiefiles/dotlottie-react": "^0.17.5",
"@mui/material": "^7.3.2", "@mui/material": "^7.3.2",
"@mui/x-date-pickers": "^8.15.0",
"@mui/x-date-pickers-pro": "^8.15.0",
"@reduxjs/toolkit": "^2.9.0", "@reduxjs/toolkit": "^2.9.0",
"@tanstack/react-table": "^8.21.3", "@tanstack/react-table": "^8.21.3",
"@wandersonalwes/iconsax-react": "0.0.10", "@wandersonalwes/iconsax-react": "0.0.10",
"apexcharts": "^5.3.5", "apexcharts": "^5.3.5",
"date-fns": "^4.1.0",
"dayjs": "^1.11.18",
"formik": "^2.4.6", "formik": "^2.4.6",
"framer-motion": "^12.23.16", "framer-motion": "^12.23.16",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
...@@ -28,6 +32,7 @@ ...@@ -28,6 +32,7 @@
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"react": "^19.1.0", "react": "^19.1.0",
"react-apexcharts": "^1.7.0", "react-apexcharts": "^1.7.0",
"react-date-range": "^2.0.1",
"react-dom": "19.1.0", "react-dom": "19.1.0",
"react-dropzone": "^14.3.8", "react-dropzone": "^14.3.8",
"react-quill-new": "3.4.6", "react-quill-new": "3.4.6",
...@@ -41,6 +46,7 @@ ...@@ -41,6 +46,7 @@
"@types/node": "^20", "@types/node": "^20",
"@types/nprogress": "^0.2.3", "@types/nprogress": "^0.2.3",
"@types/react": "^19", "@types/react": "^19",
"@types/react-date-range": "^1.4.10",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "15.5.3", "eslint-config-next": "15.5.3",
......
public/assets/images/chat.svg
...@@ -12,28 +12,28 @@ ...@@ -12,28 +12,28 @@
</g> </g>
<defs> <defs>
<linearGradient id="paint0_linear_4299_24227" x1="19.8049" y1="18.6881" x2="35.3126" y2="34.1958" gradientUnits="userSpaceOnUse"> <linearGradient id="paint0_linear_4299_24227" x1="19.8049" y1="18.6881" x2="35.3126" y2="34.1958" gradientUnits="userSpaceOnUse">
<stop stop-color="#A7F3CE"/> <stop stopColor="#A7F3CE"/>
<stop offset="1" stop-color="#61DB99"/> <stop offset="1" stopColor="#61DB99"/>
</linearGradient> </linearGradient>
<linearGradient id="paint1_linear_4299_24227" x1="24.8813" y1="23.7642" x2="18.2945" y2="17.178" gradientUnits="userSpaceOnUse"> <linearGradient id="paint1_linear_4299_24227" x1="24.8813" y1="23.7642" x2="18.2945" y2="17.178" gradientUnits="userSpaceOnUse">
<stop stop-color="#61DB99" stop-opacity="0"/> <stop stopColor="#61DB99" stop-opacity="0"/>
<stop offset="1" stop-color="#009E74"/> <stop offset="1" stopColor="#009E74"/>
</linearGradient> </linearGradient>
<linearGradient id="paint2_linear_4299_24227" x1="8.66682" y1="11.4056" x2="25.0398" y2="27.7785" gradientUnits="userSpaceOnUse"> <linearGradient id="paint2_linear_4299_24227" x1="8.66682" y1="11.4056" x2="25.0398" y2="27.7785" gradientUnits="userSpaceOnUse">
<stop stop-color="#62E1FB"/> <stop stopColor="#62E1FB"/>
<stop offset="1" stop-color="#00A2F3"/> <stop offset="1" stopColor="#00A2F3"/>
</linearGradient> </linearGradient>
<linearGradient id="paint3_linear_4299_24227" x1="11.7454" y1="18.5948" x2="3.1248" y2="9.97446" gradientUnits="userSpaceOnUse"> <linearGradient id="paint3_linear_4299_24227" x1="11.7454" y1="18.5948" x2="3.1248" y2="9.97446" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A2F3" stop-opacity="0"/> <stop stopColor="#00A2F3" stop-opacity="0"/>
<stop offset="1" stop-color="#0075CD"/> <stop offset="1" stopColor="#0075CD"/>
</linearGradient> </linearGradient>
<linearGradient id="paint4_linear_4299_24227" x1="17.3822" y1="18.5946" x2="8.76188" y2="9.97424" gradientUnits="userSpaceOnUse"> <linearGradient id="paint4_linear_4299_24227" x1="17.3822" y1="18.5946" x2="8.76188" y2="9.97424" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A2F3" stop-opacity="0"/> <stop stopColor="#00A2F3" stop-opacity="0"/>
<stop offset="1" stop-color="#0075CD"/> <stop offset="1" stopColor="#0075CD"/>
</linearGradient> </linearGradient>
<linearGradient id="paint5_linear_4299_24227" x1="23.0189" y1="18.5947" x2="14.3986" y2="9.97434" gradientUnits="userSpaceOnUse"> <linearGradient id="paint5_linear_4299_24227" x1="23.0189" y1="18.5947" x2="14.3986" y2="9.97434" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A2F3" stop-opacity="0"/> <stop stopColor="#00A2F3" stop-opacity="0"/>
<stop offset="1" stop-color="#0075CD"/> <stop offset="1" stopColor="#0075CD"/>
</linearGradient> </linearGradient>
<clipPath id="clip0_4299_24227"> <clipPath id="clip0_4299_24227">
<rect width="32" height="32" fill="white" transform="translate(0.5)"/> <rect width="32" height="32" fill="white" transform="translate(0.5)"/>
......
public/assets/images/current-balance.svg
This source diff could not be displayed because it is too large. You can view the blob instead.
src/app/(dashboard)/(user)/(privateUser)/account/page.tsx
...@@ -8,11 +8,16 @@ import WithdrawnHistoryPage from "@/components/pages/dashboard/userDashboard/wit ...@@ -8,11 +8,16 @@ import WithdrawnHistoryPage from "@/components/pages/dashboard/userDashboard/wit
import DepositHistoryPage from "@/components/pages/dashboard/userDashboard/depositHistory"; import DepositHistoryPage from "@/components/pages/dashboard/userDashboard/depositHistory";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import { Coin, Coin1, User } from "@wandersonalwes/iconsax-react"; import { Coin, Coin1, User } from "@wandersonalwes/iconsax-react";
import SelectField from "@/components/atom/SelectField";
import Filter from "@/components/organism/Filter";
type AccountTabProps = "account" | "deposit" | "withdraw" type AccountTabProps = "account" | "deposit" | "withdraw"
export default function ProfilePage() { export default function ProfilePage() {
const [currentActiveTab, setCurrentActiveTab] = React.useState<AccountTabProps>("account"); const [currentActiveTab, setCurrentActiveTab] = React.useState<AccountTabProps>("account");
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [filterDays, setFilterDays] = React.useState<number | null>(null)
const [customRange, setCustomRange] = React.useState({ startDate: "", endDate: "" })
React.useEffect(() => { React.useEffect(() => {
const page = searchParams.get("page"); const page = searchParams.get("page");
...@@ -23,6 +28,8 @@ export default function ProfilePage() { ...@@ -23,6 +28,8 @@ export default function ProfilePage() {
const handleTabChange = (tab: string) => { const handleTabChange = (tab: string) => {
setCurrentActiveTab(tab as AccountTabProps); setCurrentActiveTab(tab as AccountTabProps);
setFilterDays(null);
setCustomRange({ startDate: "", endDate: "" })
}; };
const renderTabContent = () => { const renderTabContent = () => {
...@@ -30,25 +37,43 @@ export default function ProfilePage() { ...@@ -30,25 +37,43 @@ export default function ProfilePage() {
case "account": case "account":
return <AccountTab />; return <AccountTab />;
case "deposit": case "deposit":
return <DepositHistoryPage />; return <DepositHistoryPage
currentFilter={filterDays}
customRange={customRange}
/>;
case "withdraw": case "withdraw":
return <WithdrawnHistoryPage />; return <WithdrawnHistoryPage
currentFilter={filterDays}
customRange={customRange}
/>;
default: default:
return null; return null;
} }
}; };
return ( return (
<> <>
<TabController links={[ <div className="flex justify-between items-center gap-4 flex-wrap w-full">
{ label: "Account", value: "account", icon: <User className="mx-auto" /> }, <TabController links={[
{ label: "Deposit", value: "deposit", icon: <Coin className="mx-auto" /> }, { label: "Account", value: "account", icon: <User className="mx-auto" /> },
{ label: "Withdraw", value: "withdraw", icon: <Coin1 className="mx-auto" /> }, { label: "Deposit", value: "deposit", icon: <Coin className="mx-auto" /> },
]} { label: "Withdraw", value: "withdraw", icon: <Coin1 className="mx-auto" /> },
currentTab={currentActiveTab} ]}
onTabChange={handleTabChange} currentTab={currentActiveTab}
linkClassName="lg:px-12" onTabChange={handleTabChange}
/> linkClassName="lg:px-12"
/>
{currentActiveTab !== "account" ? <Filter option={[
{ label: "All", value: null },
{ label: "Last 30 Days", value: 30 },
{ label: "Last 15 Days", value: 15 },
{ label: "Last 7 Days", value: 7 }
]}
currentFilter={filterDays}
customRange={customRange}
setFilterDays={setFilterDays}
setCustomRange={setCustomRange}
/> : ""}
</div>
{renderTabContent()} {renderTabContent()}
</> </>
); );
......
src/app/customIcons/FireIcon.tsx
...@@ -17,70 +17,70 @@ export default function FireIcon() { ...@@ -17,70 +17,70 @@ export default function FireIcon() {
<path d="M2.96147 8.40587C3.70195 8.55774 4.29202 7.79621 3.99642 7.10049C3.7755 6.58056 3.81019 5.9634 4.14342 5.45565C4.14398 5.45481 4.14455 5.45396 4.14506 5.45312C4.2293 5.32524 4.16203 5.15312 4.01264 5.11946C3.32236 4.96398 2.57761 5.23941 2.16642 5.8659C1.63655 6.67327 1.8615 7.75735 2.66887 8.28727C2.7593 8.34652 2.85797 8.38463 2.96147 8.40587Z" fill="url(#paint11_linear_5356_8258)" /> <path d="M2.96147 8.40587C3.70195 8.55774 4.29202 7.79621 3.99642 7.10049C3.7755 6.58056 3.81019 5.9634 4.14342 5.45565C4.14398 5.45481 4.14455 5.45396 4.14506 5.45312C4.2293 5.32524 4.16203 5.15312 4.01264 5.11946C3.32236 4.96398 2.57761 5.23941 2.16642 5.8659C1.63655 6.67327 1.8615 7.75735 2.66887 8.28727C2.7593 8.34652 2.85797 8.38463 2.96147 8.40587Z" fill="url(#paint11_linear_5356_8258)" />
<defs> <defs>
<linearGradient id="paint0_linear_5356_8258" x1="6.75639" y1="8.27704" x2="16.6553" y2="18.1759" gradientUnits="userSpaceOnUse"> <linearGradient id="paint0_linear_5356_8258" x1="6.75639" y1="8.27704" x2="16.6553" y2="18.1759" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFA1AE" /> <stop stopColor="#FFA1AE" />
<stop offset="1" stop-color="#FF4565" /> <stop offset="1" stopColor="#FF4565" />
</linearGradient> </linearGradient>
<linearGradient id="paint1_linear_5356_8258" x1="14.255" y1="17.4797" x2="17.7637" y2="21.7235" gradientUnits="userSpaceOnUse"> <linearGradient id="paint1_linear_5356_8258" x1="14.255" y1="17.4797" x2="17.7637" y2="21.7235" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE0364" stop-opacity="0" /> <stop stopColor="#FE0364" stop-opacity="0" />
<stop offset="0.2343" stop-color="#F90362" stop-opacity="0.234" /> <stop offset="0.2343" stopColor="#F90362" stop-opacity="0.234" />
<stop offset="0.5173" stop-color="#EA035B" stop-opacity="0.517" /> <stop offset="0.5173" stopColor="#EA035B" stop-opacity="0.517" />
<stop offset="0.8243" stop-color="#D20250" stop-opacity="0.824" /> <stop offset="0.8243" stopColor="#D20250" stop-opacity="0.824" />
<stop offset="1" stop-color="#C00148" /> <stop offset="1" stopColor="#C00148" />
</linearGradient> </linearGradient>
<linearGradient id="paint2_linear_5356_8258" x1="11.682" y1="17.3091" x2="11.0472" y2="24.1928" gradientUnits="userSpaceOnUse"> <linearGradient id="paint2_linear_5356_8258" x1="11.682" y1="17.3091" x2="11.0472" y2="24.1928" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE0364" stop-opacity="0" /> <stop stopColor="#FE0364" stop-opacity="0" />
<stop offset="0.2343" stop-color="#F90362" stop-opacity="0.234" /> <stop offset="0.2343" stopColor="#F90362" stop-opacity="0.234" />
<stop offset="0.5173" stop-color="#EA035B" stop-opacity="0.517" /> <stop offset="0.5173" stopColor="#EA035B" stop-opacity="0.517" />
<stop offset="0.8243" stop-color="#D20250" stop-opacity="0.824" /> <stop offset="0.8243" stopColor="#D20250" stop-opacity="0.824" />
<stop offset="1" stop-color="#C00148" /> <stop offset="1" stopColor="#C00148" />
</linearGradient> </linearGradient>
<linearGradient id="paint3_linear_5356_8258" x1="14.4838" y1="10.8464" x2="20.766" y2="7.97263" gradientUnits="userSpaceOnUse"> <linearGradient id="paint3_linear_5356_8258" x1="14.4838" y1="10.8464" x2="20.766" y2="7.97263" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE0364" stop-opacity="0" /> <stop stopColor="#FE0364" stop-opacity="0" />
<stop offset="0.2343" stop-color="#F90362" stop-opacity="0.234" /> <stop offset="0.2343" stopColor="#F90362" stop-opacity="0.234" />
<stop offset="0.5173" stop-color="#EA035B" stop-opacity="0.517" /> <stop offset="0.5173" stopColor="#EA035B" stop-opacity="0.517" />
<stop offset="0.8243" stop-color="#D20250" stop-opacity="0.824" /> <stop offset="0.8243" stopColor="#D20250" stop-opacity="0.824" />
<stop offset="1" stop-color="#C00148" /> <stop offset="1" stopColor="#C00148" />
</linearGradient> </linearGradient>
<linearGradient id="paint4_linear_5356_8258" x1="19.6067" y1="22.4731" x2="11.9211" y2="16.7924" gradientUnits="userSpaceOnUse"> <linearGradient id="paint4_linear_5356_8258" x1="19.6067" y1="22.4731" x2="11.9211" y2="16.7924" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE0364" stop-opacity="0" /> <stop stopColor="#FE0364" stop-opacity="0" />
<stop offset="0.2343" stop-color="#F90362" stop-opacity="0.234" /> <stop offset="0.2343" stopColor="#F90362" stop-opacity="0.234" />
<stop offset="0.5173" stop-color="#EA035B" stop-opacity="0.517" /> <stop offset="0.5173" stopColor="#EA035B" stop-opacity="0.517" />
<stop offset="0.8243" stop-color="#D20250" stop-opacity="0.824" /> <stop offset="0.8243" stopColor="#D20250" stop-opacity="0.824" />
<stop offset="1" stop-color="#C00148" /> <stop offset="1" stopColor="#C00148" />
</linearGradient> </linearGradient>
<linearGradient id="paint5_linear_5356_8258" x1="9.67987" y1="14.0072" x2="14.2244" y2="19.2869" gradientUnits="userSpaceOnUse"> <linearGradient id="paint5_linear_5356_8258" x1="9.67987" y1="14.0072" x2="14.2244" y2="19.2869" gradientUnits="userSpaceOnUse">
<stop stop-color="#FEF0AE" /> <stop stopColor="#FEF0AE" />
<stop offset="1" stop-color="#FAC600" /> <stop offset="1" stopColor="#FAC600" />
</linearGradient> </linearGradient>
<linearGradient id="paint6_linear_5356_8258" x1="14.5739" y1="14.7946" x2="16.111" y2="14.26" gradientUnits="userSpaceOnUse"> <linearGradient id="paint6_linear_5356_8258" x1="14.5739" y1="14.7946" x2="16.111" y2="14.26" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE9738" stop-opacity="0" /> <stop stopColor="#FE9738" stop-opacity="0" />
<stop offset="1" stop-color="#FE9738" /> <stop offset="1" stopColor="#FE9738" />
</linearGradient> </linearGradient>
<linearGradient id="paint7_linear_5356_8258" x1="10.4313" y1="19.6432" x2="9.29522" y2="21.4923" gradientUnits="userSpaceOnUse"> <linearGradient id="paint7_linear_5356_8258" x1="10.4313" y1="19.6432" x2="9.29522" y2="21.4923" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE9738" stop-opacity="0" /> <stop stopColor="#FE9738" stop-opacity="0" />
<stop offset="1" stop-color="#FE9738" /> <stop offset="1" stopColor="#FE9738" />
</linearGradient> </linearGradient>
<linearGradient id="paint8_linear_5356_8258" x1="13.3531" y1="19.8299" x2="14.2442" y2="21.7235" gradientUnits="userSpaceOnUse"> <linearGradient id="paint8_linear_5356_8258" x1="13.3531" y1="19.8299" x2="14.2442" y2="21.7235" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE9738" stop-opacity="0" /> <stop stopColor="#FE9738" stop-opacity="0" />
<stop offset="1" stop-color="#FE9738" /> <stop offset="1" stopColor="#FE9738" />
</linearGradient> </linearGradient>
<linearGradient id="paint9_linear_5356_8258" x1="2.3812" y1="5.89051" x2="4.45298" y2="7.62816" gradientUnits="userSpaceOnUse"> <linearGradient id="paint9_linear_5356_8258" x1="2.3812" y1="5.89051" x2="4.45298" y2="7.62816" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFA1AE" /> <stop stopColor="#FFA1AE" />
<stop offset="1" stop-color="#FF4565" /> <stop offset="1" stopColor="#FF4565" />
</linearGradient> </linearGradient>
<linearGradient id="paint10_linear_5356_8258" x1="2.93311" y1="7.1912" x2="2.46525" y2="8.41088" gradientUnits="userSpaceOnUse"> <linearGradient id="paint10_linear_5356_8258" x1="2.93311" y1="7.1912" x2="2.46525" y2="8.41088" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE0364" stop-opacity="0" /> <stop stopColor="#FE0364" stop-opacity="0" />
<stop offset="0.2343" stop-color="#F90362" stop-opacity="0.234" /> <stop offset="0.2343" stopColor="#F90362" stop-opacity="0.234" />
<stop offset="0.5173" stop-color="#EA035B" stop-opacity="0.517" /> <stop offset="0.5173" stopColor="#EA035B" stop-opacity="0.517" />
<stop offset="0.8243" stop-color="#D20250" stop-opacity="0.824" /> <stop offset="0.8243" stopColor="#D20250" stop-opacity="0.824" />
<stop offset="1" stop-color="#C00148" /> <stop offset="1" stopColor="#C00148" />
</linearGradient> </linearGradient>
<linearGradient id="paint11_linear_5356_8258" x1="2.92111" y1="6.59626" x2="4.4415" y2="7.04738" gradientUnits="userSpaceOnUse"> <linearGradient id="paint11_linear_5356_8258" x1="2.92111" y1="6.59626" x2="4.4415" y2="7.04738" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE0364" stop-opacity="0" /> <stop stopColor="#FE0364" stop-opacity="0" />
<stop offset="0.2343" stop-color="#F90362" stop-opacity="0.234" /> <stop offset="0.2343" stopColor="#F90362" stop-opacity="0.234" />
<stop offset="0.5173" stop-color="#EA035B" stop-opacity="0.517" /> <stop offset="0.5173" stopColor="#EA035B" stop-opacity="0.517" />
<stop offset="0.8243" stop-color="#D20250" stop-opacity="0.824" /> <stop offset="0.8243" stopColor="#D20250" stop-opacity="0.824" />
<stop offset="1" stop-color="#C00148" /> <stop offset="1" stopColor="#C00148" />
</linearGradient> </linearGradient>
</defs> </defs>
</svg> </svg>
......
src/components/molecules/DateRangePicker.tsx 0 → 100644
"use client";
import React, { useState } from "react";
import { Box, Button, Select, MenuItem, Typography } from "@mui/material";
import dayjs, { Dayjs } from "dayjs";
interface DateRangePickerProps {
startDate: Dayjs | null;
endDate: Dayjs | null;
onStartDateChange: (date: Dayjs | null) => void;
onEndDateChange: (date: Dayjs | null) => void;
onApply: () => void;
onReset: () => void;
}
export default function DateRangePicker({
startDate,
endDate,
onStartDateChange,
onEndDateChange,
onApply,
onReset,
}: DateRangePickerProps) {
const [currentMonth, setCurrentMonth] = useState(dayjs().month());
const [currentYear, setCurrentYear] = useState(dayjs().year());
const handleDateClick = (date: Dayjs) => {
if (!startDate || (startDate && endDate)) {
// Start new selection
onStartDateChange(date);
onEndDateChange(null);
} else if (startDate && !endDate) {
// Complete the range
if (date.isBefore(startDate)) {
onStartDateChange(date);
onEndDateChange(startDate);
} else {
onEndDateChange(date);
}
}
};
const isInRange = (date: Dayjs) => {
if (!startDate || !endDate) return false;
return date.isAfter(startDate) && date.isBefore(endDate);
};
const isSelected = (date: Dayjs) => {
if (!startDate && !endDate) return false;
return (
date.isSame(startDate, "day") ||
date.isSame(endDate, "day")
);
};
const isToday = (date: Dayjs) => {
return date.isSame(dayjs(), "day");
};
const generateCalendarDays = () => {
const startOfMonth = dayjs()
.year(currentYear)
.month(currentMonth)
.startOf("month");
const endOfMonth = startOfMonth.endOf("month");
const startDate = startOfMonth.startOf("week");
const endDate = endOfMonth.endOf("week");
const days = [];
let day = startDate;
while (day.isBefore(endDate) || day.isSame(endDate, "day")) {
days.push(day);
day = day.add(1, "day");
}
return days;
};
const days = generateCalendarDays();
const months = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const years = Array.from({ length: 10 }, (_, i) => currentYear - 5 + i);
return (
<Box >
{/* Month and Year Selectors */}
<Box className="flex gap-2 mb-4">
<Select
value={currentMonth}
onChange={(e) => setCurrentMonth(e.target.value as number)}
size="small"
sx={{
flex: 1,
backgroundColor: "rgba(255, 255, 255, 0.15)",
color: "white",
"& .MuiOutlinedInput-notchedOutline": { border: "none" },
"& .MuiSvgIcon-root": { color: "white" },
}}
>
{months.map((month, idx) => (
<MenuItem key={month} value={idx}>
{month}
</MenuItem>
))}
</Select>
<Select
value={currentYear}
onChange={(e) => setCurrentYear(e.target.value as number)}
size="small"
sx={{
flex: 1,
backgroundColor: "rgba(255, 255, 255, 0.15)",
color: "white",
"& .MuiOutlinedInput-notchedOutline": { border: "none" },
"& .MuiSvgIcon-root": { color: "white" },
}}
>
{years.map((year) => (
<MenuItem key={year} value={year}>
{year}
</MenuItem>
))}
</Select>
</Box>
{/* Weekday Headers */}
<Box className="grid grid-cols-7 gap-1 mb-2">
{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
<Typography
key={day}
className="text-center !text-[10px] text-white/70 py-1"
>
{day}
</Typography>
))}
</Box>
{/* Calendar Days */}
<Box className="grid grid-cols-7 gap-1 mb-4">
{days.map((day, idx) => {
const isCurrentMonth = day.month() === currentMonth;
const selected = isSelected(day);
const inRange = isInRange(day);
const today = isToday(day);
return (
<Box
key={idx}
onClick={() => handleDateClick(day)}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: 36,
aspectRatio: 1 / 1,
cursor: "pointer",
// borderRadius: 1,
fontSize: "14px",
borderRadius: "50%",
fontWeight: today || selected ? 600 : 400,
color: isCurrentMonth ? "white" : "rgba(255, 255, 255, 0.4)",
backgroundColor: selected || inRange
? "#b801c0"
: today
? "white"
: "rgba(255, 255, 255, 0.1)",
border: today && !selected ? "1px solid #E91E63" : "none",
"&:hover": {
backgroundColor: selected || inRange
? "#b801c0"
: "rgba(255, 255, 255, 0.1)",
},
...(today && !selected && { color: "#652CA0" }),
}}
>
{day.date()}
</Box>
);
})}
</Box>
{/* Action Buttons */}
<Box className="flex justify-end gap-2">
<Button
size="small"
onClick={onReset}
variant="contained"
color="secondary"
>
Reset
</Button>
<Button
size="small"
variant="contained"
onClick={onApply}
>
Apply
</Button>
</Box>
</Box >
);
}
\ No newline at end of file
src/components/organism/Filter.tsx 0 → 100644
"use client";
import React, { useRef, useState } from "react";
import {
Box,
IconButton,
Popper,
Paper,
Fade,
ClickAwayListener,
Typography,
List,
ListItem,
Divider,
} from "@mui/material";
import { ArrowDown2 } from "@wandersonalwes/iconsax-react";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs, { Dayjs } from "dayjs";
import CustomDateRangePicker from "../molecules/DateRangePicker";
interface FilterOption {
label: string;
value: number | null;
}
interface FilterProps {
option: FilterOption[];
currentFilter: number | null;
setFilterDays: React.Dispatch<React.SetStateAction<number | null>>;
customRange: { startDate: string; endDate: string };
setCustomRange: React.Dispatch<
React.SetStateAction<{ startDate: string; endDate: string }>
>;
}
export default function Filter({
option,
currentFilter,
setFilterDays,
customRange,
setCustomRange,
}: FilterProps) {
const anchorRef = useRef<HTMLButtonElement | null>(null);
const [open, setOpen] = useState(false);
const [customRangeOpen, setCustomRangeOpen] = useState(false);
const [startDate, setStartDate] = useState<Dayjs | null>(
customRange.startDate ? dayjs(customRange.startDate) : null
);
const [endDate, setEndDate] = useState<Dayjs | null>(
customRange.endDate ? dayjs(customRange.endDate) : null
);
const handleToggle = () => setOpen((prev) => !prev);
const handleClose = (event: MouseEvent | TouchEvent) => {
if (anchorRef.current?.contains(event.target as Node)) return;
setOpen(false);
};
const handleSelect = (value: number | null, label: string) => {
// if (label === "Custom range") {
// setOpen(false);
// setTimeout(() => setCustomRangeOpen(true), 200);
// return;
// }
setCustomRange({ startDate: "", endDate: "" });
setStartDate(null);
setEndDate(null);
setFilterDays(value);
setOpen(false);
};
const handleApplyCustomRange = () => {
if (startDate && endDate) {
setCustomRange({
startDate: startDate.format("YYYY-MM-DD"),
endDate: endDate.format("YYYY-MM-DD"),
});
setFilterDays(null);
setCustomRangeOpen(false);
}
};
const id = open ? "filter-popper" : undefined;
return (
<Box>
<IconButton
aria-describedby={id}
ref={anchorRef}
onClick={handleToggle}
className="!bg-[#2B1245] text-white !rounded-[18px] flex items-center gap-1 hover:opacity-80 transition !py-3 !px-4"
>
<ArrowDown2 size={16} />
<Typography variant="body2" className="capitalize">
Filter
</Typography>
</IconButton>
<Popper
id={id}
open={open}
anchorEl={anchorRef.current}
placement="bottom-end"
transition
style={{ zIndex: 1300 }}
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={300}>
<Paper
elevation={3}
sx={{
width: 280,
borderRadius: 3,
mt: 1,
}}
>
<ClickAwayListener onClickAway={handleClose}>
<Box className="p-3">
<List className="!p-0 mb-3">
{option.map((item) => (
<ListItem
key={item.label}
className={`!px-3 !py-1.5 text-sm rounded-md cursor-pointer ${currentFilter === item.value
? "bg-[#652CA0] text-white"
: ""
}`}
onClick={() => handleSelect(item.value, item.label)}
>
{item.label}
</ListItem>
))}
<Divider sx={{ my: 1 }} />
<ListItem
onClick={() => {
setOpen(false);
setCustomRangeOpen(true);
}}
className="!px-3 !py-1.5 text-sm rounded-md cursor-pointer"
>
Custom range
</ListItem>
</List>
</Box>
</ClickAwayListener>
</Paper>
</Fade>
)}
</Popper>
<Popper
open={customRangeOpen}
anchorEl={anchorRef.current}
placement="bottom-end"
transition
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={300}>
<Paper elevation={3} sx={{ borderRadius: 3, mt: 1 }}>
<ClickAwayListener onClickAway={(event) => {
// Ignore clicks on MUI Select menus (rendered in Portal)
if ((event.target as HTMLElement).closest('.MuiPopover-root, .MuiBox-root,.MuiInputBase-root')) {
return;
}
setCustomRangeOpen(false);
}}>
<Box className="p-3 w-[300px]">
<LocalizationProvider dateAdapter={AdapterDayjs}>
<CustomDateRangePicker
startDate={startDate}
endDate={endDate}
onStartDateChange={setStartDate}
onEndDateChange={setEndDate}
onApply={handleApplyCustomRange}
onReset={() => {
setStartDate(null);
setEndDate(null);
setCustomRangeOpen(false);
}}
/>
</LocalizationProvider>
</Box>
</ClickAwayListener>
</Paper>
</Fade>
)}
</Popper>
</Box>
);
}
src/components/pages/dashboard/userDashboard/depositHistory/index.tsx
...@@ -7,13 +7,23 @@ import { Pagination } from '@mui/material'; ...@@ -7,13 +7,23 @@ import { Pagination } from '@mui/material';
import { ColumnDef, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table'; import { ColumnDef, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
import React, { useState } from 'react' import React, { useState } from 'react'
export default function DepositHistoryPage() { export default function DepositHistoryPage(
{ currentFilter,
customRange
}:
{
currentFilter: number | null;
customRange: { startDate: string | null, endDate: string | null }
}) {
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10); const [pageSize, setPageSize] = useState(10);
const { data, isLoading } = useGetAllDepositQuery({ const { data, isLoading } = useGetAllDepositQuery({
days: currentFilter,
customRange,
page, page,
per_page: pageSize per_page: pageSize
}); });
console.log("filterDays", { currentFilter, customRange })
const columns: ColumnDef<SingleDepositProps>[] = [ const columns: ColumnDef<SingleDepositProps>[] = [
{ {
accessorKey: 'id', accessorKey: 'id',
......
src/components/pages/dashboard/userDashboard/withdrawlHistory/index.tsx
...@@ -6,12 +6,20 @@ import { Pagination } from '@mui/material'; ...@@ -6,12 +6,20 @@ import { Pagination } from '@mui/material';
import { ColumnDef, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table'; import { ColumnDef, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
import React, { useState } from 'react' import React, { useState } from 'react'
export default function WithdrawnHistoryPage() { export default function WithdrawnHistoryPage({ currentFilter,
customRange
}:
{
currentFilter: number | null;
customRange: { startDate: string | null, endDate: string | null }
}) {
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10); const [pageSize, setPageSize] = useState(10);
const { data, isLoading } = useGetAllWithdrawlQuery({ const { data, isLoading } = useGetAllWithdrawlQuery({
page, page,
per_page: pageSize per_page: pageSize,
days:currentFilter,
customRange
}); });
const columns: ColumnDef<SingleDepositProps>[] = [ const columns: ColumnDef<SingleDepositProps>[] = [
{ {
......
src/services/transaction.ts
...@@ -17,12 +17,15 @@ export const transactionApi = createApi({ ...@@ -17,12 +17,15 @@ export const transactionApi = createApi({
}), }),
invalidatesTags: ["Deposit"] invalidatesTags: ["Deposit"]
}), }),
getAllDeposit: builder.query<DepositListProps, QueryParams>({ getAllDeposit: builder.query<DepositListProps, QueryParams & { days: number | null; customRange: { startDate: string | null; endDate: string | null } }>({
query: ({ search, page, per_page }) => { query: ({ search, page, per_page, days, customRange }) => {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (search) params.append('search', search); if (search) params.append('search', search);
if (page) params.append('page', page.toString()); if (page) params.append('page', page.toString());
if (per_page) params.append('page_size', per_page.toString()); if (per_page) params.append('page_size', per_page.toString());
if (days) params.append('days', days.toString());
if (customRange.startDate) params.append('start_date', customRange.startDate.toString());
if (customRange.endDate) params.append('end_date', customRange.endDate.toString());
const queryString = params.toString(); const queryString = params.toString();
return { return {
url: `/api/deposits${queryString ? `?${queryString}` : ''}`, url: `/api/deposits${queryString ? `?${queryString}` : ''}`,
...@@ -39,12 +42,16 @@ export const transactionApi = createApi({ ...@@ -39,12 +42,16 @@ export const transactionApi = createApi({
}), }),
invalidatesTags: ["Withdrawl"] invalidatesTags: ["Withdrawl"]
}), }),
getAllWithdrawl: builder.query<DepositListProps, QueryParams>({ getAllWithdrawl: builder.query<DepositListProps, QueryParams & { days: number | null; customRange: { startDate: string | null; endDate: string | null } }>({
query: ({ search, page, per_page }) => { query: ({ search, page, per_page, days, customRange }) => {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (search) params.append('search', search); if (search) params.append('search', search);
if (page) params.append('page', page.toString()); if (page) params.append('page', page.toString());
if (per_page) params.append('page_size', per_page.toString()); if (per_page) params.append('page_size', per_page.toString());
if (days) params.append('days', days.toString());
if (customRange.startDate) params.append('start_date', customRange.startDate.toString());
if (customRange.endDate) params.append('end_date', customRange.endDate.toString());
const queryString = params.toString(); const queryString = params.toString();
return { return {
url: `/api/user/withdrawl${queryString ? `?${queryString}` : ''}`, url: `/api/user/withdrawl${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