added filter component

src/components/loan_charges/LoanChargesCom.jsx

@@ -1,42 +1,84 @@
-import React, { useState } from 'react'
-import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from 'react'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-
-import Avatar from '../../assets/user_avatar.jpg'
-import queryKeys from '../../services/queryKeys'
 import { getLoanCharges } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import formatNumber from '../../helpers/formatNumber';
+import formatNumber from '../../helpers/formatNumber'
+import Avatar from '../../assets/user_avatar.jpg'
 
-export default function LoanChargesCom() {
+
+export default function LoansChargesCom() {
 
     const [page, setPage] = useState(1)
+    const [allLoanCharges, setAllLoanCharges] = useState({loading:true, error:'', data:{}})
 
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.loan_charges, page],
-        queryFn: () => getLoanCharges({page}),
-        staleTime: 0,
-        // placeholderData: keepPreviousData,
-    })
+    const [willFilter, setWillFilter] = useState(false)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
 
-    const loanCharges = data?.data?.loan_charges // LOAN CHARGES LIST
-    const pagination = data?.data?.pagination
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const loanCharges = allLoanCharges?.data?.loan_charges // LOAN CHARGES LIST
+    const pagination = allLoanCharges?.data?.pagination
+    const isFetching = allLoanCharges?.loading
+    const isError = allLoanCharges?.error
+
+    useEffect(()=>{
+        setAllLoanCharges(prev => ({...prev, loading:true}))
+        const payload = filter?.type ? {[filter?.type]: filter.id} : {}
+        getLoanCharges({...payload, page}).then(res => {
+            if(res?.status != 200){
+                setAllLoanCharges(prev => ({...prev, loading:false}))
+                return
+            }
+            setAllLoanCharges({loading:false, error:'', data:res?.data})
+        }).catch(err => {
+            setAllLoanCharges({loading:false, error:'error occurred', data:{}})
+            console.log('ERR', err)
+        })
+    },[page, willFilter])
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Loan Charges' paths={['Dashboard', 'Loan Charges']} />
+            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isFetching ? 
-                <>
-                    <p className='text-slate-800'>Loading...</p>
-                </>
-                : isError ?
-                    <p className='text-red-500'>{error.message}</p>
+                { isError ?
+                    <p className='text-red-500'>{allLoanCharges?.error}</p>
                 :
+                <>
+                    {/* filter section */}
+                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                        <Icons name='filter' className='text-3xl' />
+                        <div className='w-full sm:max-w-48'>
+                            <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
+                                <option value=''>All</option>
+                                <option value='transaction_id'>Transaction ID</option>
+                                <option value='account_id'>Account ID</option>
+                            </select>
+                        </div>
+                        <div className='w-full sm:max-w-48'>
+                            <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
+                        </div>
+                        <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
+                    </div>
+                     {/* end of filter section */}
+
                     <TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
@@ -106,6 +148,7 @@ export default function LoanChargesCom() {
                         </>
                     )}
                     </TablePaginatedWrapper>
+                </>
                 }
             </div>
         </div>