/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable @typescript-eslint/no-explicit-any */ import UserDashboardLayout from '@/layouts/user_dashboard_layout' import styles from './withdrawals.module.scss' import { useState, useEffect } from 'react' import { Head, router } from '@inertiajs/react' import Transaction from '@/components/dashboard/Transaction' import NoResults from '@/components/dashboard/NoResults' import { FaFilter, FaPiggyBank } from 'react-icons/fa' import WithdrawalModal from '@/components/dashboard/Modals/WithdrawModal' import Pagination from '@/components/shared/Pagination' import { usePaginatedData } from '@/hooks/use-paginated-data' // import ResultsPerPage from '@/components/shared/ResultsPerPage' // 🔹 New Table Skeleton Loader 🔹 const TableSkeleton = () => { return (
     
{[...Array(5)].map((_, i) => (
))}
) } const Withdrawals = ({ withdrawals, filters, perPage: initialPerPage = 10, }: any) => { const [startDate, setStartDate] = useState(filters?.startDate || '') const [endDate, setEndDate] = useState(filters?.endDate || '') const [showFilters, setShowFilters] = useState(false) const [withdrawalModal, setWithdrawalModal] = useState(false) useEffect(() => { // Show skeleton loader for 2 seconds const timer = setTimeout(() => setLoading(false), 2000) return () => clearTimeout(timer) }, []) console.log("Withdrawals", withdrawals) const hasWithdrawals = withdrawals?.data?.length > 0 const toggleWithdrawalModal = () => { setWithdrawalModal(!withdrawalModal) } const applyFilters = () => { router.get('/dashboard/withdrawals', { page: 1, startDate, endDate, }, { preserveScroll: true, preserveState: true, }); } const clearFilters = () => { setStartDate('') setEndDate('') router.get('/dashboard/withdrawals', { page: 1, }, { preserveScroll: true, preserveState: true, }); } const { perPage, loading: isLoading, setLoading, handlePageChange, handlePerPageChange, } = usePaginatedData(initialPerPage); return ( <> {withdrawalModal && }

Withdrawals

View & manage all your withdrawals

{/* Toggle Filter Button */}
{/* Filter Toggle Button */}
{/* */} {/* Date Filters */} {showFilters && (
setStartDate(e.target.value)} /> setEndDate(e.target.value)} />
)} {/* 🔹 Show Table Skeleton if loading 🔹 */} {isLoading ? ( ) : (
Type Amount Channel Date Created Status Details
{hasWithdrawals ? ( withdrawals?.data?.map((deposit: any) => ( )) ) : ( )}
)}
{withdrawals?.data?.length > 0 && withdrawals?.links?.length > 0 && ( )}
) } Withdrawals.layout = (page: any) => ( ) export default Withdrawals