/* eslint-disable @typescript-eslint/no-explicit-any */ import UserDashboardLayout from '@/layouts/user_dashboard_layout' import styles from './deposits-page.module.scss' import { useState } from 'react' import { Head, router, usePage } from '@inertiajs/react' import Transaction from '@/components/dashboard/Transaction' import NoResults from '@/components/dashboard/NoResults' import Pagination from '@/components/shared/Pagination' import ResultsPerPage from '@/components/shared/ResultsPerPage' import PageIntro from '@/components/dashboard/PageIntro' import DepositModal from '@/components/dashboard/Modals/DepositModal' import { FaFilter, FaRegEye, FaPiggyBank, FaEyeSlash } from 'react-icons/fa' import { usePaginatedData } from '@/hooks/use-paginated-data' import currencyData from "../../../../data/countries-currencies.json"; import { formatMoneyComplete } from '@/lib/utils/format-money' // ------------------ Skeleton Loader ------------------ {/* ------------------ Skeleton Loader ------------------ */} const TableSkeleton: React.FC = () => { return (
           
{[...Array(5)].map((_, i) => (
))}
); }; interface DepositsProps { transactions: any filters?: { startDate?: string; endDate?: string } perPage?: number, paymentMethods: any, totalDeposits: any } interface DepositsComponent extends React.FC { layout?: (page: React.ReactNode) => React.ReactNode } const Deposits: DepositsComponent = ({ transactions = [], totalDeposits, filters, perPage: initialPerPage = 10 }) => { const { appSettings } = usePage().props as any console.log("Deposit transactions", transactions) const currency = currencyData.find( (item) => item.currency_code === appSettings?.base_currency ) const [startDate, setStartDate] = useState(filters?.startDate || '') const [endDate, setEndDate] = useState(filters?.endDate || '') const [showFilters, setShowFilters] = useState(!!(filters?.startDate || filters?.endDate)) const [depositModal, setDepositModal] = useState(false) const [hideAmount, setHideAmount] = useState(false) const toggleDepositModal = () => { setDepositModal((prev) => !prev) } const toggleHideAmount = () => setHideAmount((prev) => !prev) const { perPage, loading: isLoading, setLoading, handlePageChange, handlePerPageChange, } = usePaginatedData(initialPerPage) const applyFilters = () => { setLoading(true) router.get( '/dashboard/deposits', { page: 1, startDate, endDate }, { preserveState: true, preserveScroll: true, onFinish: () => setLoading(false) } ) } const clearFilters = () => { setStartDate('') setEndDate('') setLoading(true) router.get( '/dashboard/deposits', { page: 1 }, { preserveState: true, preserveScroll: true, onFinish: () => setLoading(false) } ) } const hasDeposits = transactions?.data?.length > 0 return ( <> {depositModal && }
{/* ------------------- Summary Card ------------------- */}

Deposits

{hideAmount ? ( "********" ) : ( <> {currency?.currency_symbol} {formatMoneyComplete(totalDeposits ?? 0)} )}

Deposit
{/* ------------------- Filter & Per Page ------------------- */}
{showFilters && (
setStartDate(e.target.value)} /> setEndDate(e.target.value)} />
)} {/* ------------------- Table / Skeleton ------------------- */} {isLoading ? ( ) : (
Type Amount Channel Date Created Status Details
{hasDeposits ? ( transactions?.data?.map((deposit: any) => ( )) ) : ( )}
)} {/* ------------------- Pagination ------------------- */} {transactions?.data?.length > 0 && transactions?.links?.length > 0 && (
)}
) } Deposits.layout = (page: any) => export default Deposits