From 2a5d6b5b391a7d5747d06d15dc2c3c0cfd6f72ec Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 26 May 2025 11:07:33 +0100 Subject: [PATCH] added table filter --- src/components/Icons.jsx | 4 +- src/components/breadcrumb/BreadcrumbCom.jsx | 2 - .../loan_charges/LoanChargesCom.jsx | 2 +- src/components/loanscom/LoansCom.jsx | 19 +- src/components/repayments/RepaymentsCom.jsx | 2 +- .../tableWrapper/TablePaginatedWrapper.jsx | 77 ++------- .../transactions/TransactionsCom.jsx | 82 +++++++-- .../transactions/_TransactionsCom.jsx | 163 ++++++++++++++++++ src/index.css | 2 +- 9 files changed, 253 insertions(+), 100 deletions(-) create mode 100644 src/components/transactions/_TransactionsCom.jsx diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx index ef3a3e2..5a4b03c 100644 --- a/src/components/Icons.jsx +++ b/src/components/Icons.jsx @@ -11,7 +11,7 @@ import { LuPanelRight } from "react-icons/lu"; import { FcGoogle } from "react-icons/fc"; import { IoLogoApple } from "react-icons/io5"; import { FcSalesPerformance } from "react-icons/fc"; -import { FaLongArrowAltRight } from "react-icons/fa"; +import { FaLongArrowAltRight, FaFilter } from "react-icons/fa"; export default function Icons({name, className}) { return ( @@ -50,6 +50,8 @@ export default function Icons({name, className}) { :name.toLowerCase() == 'arrow-right' ? + :name.toLowerCase() == 'filter' ? + : null } diff --git a/src/components/breadcrumb/BreadcrumbCom.jsx b/src/components/breadcrumb/BreadcrumbCom.jsx index 7bf98dc..d4b7b30 100644 --- a/src/components/breadcrumb/BreadcrumbCom.jsx +++ b/src/components/breadcrumb/BreadcrumbCom.jsx @@ -8,8 +8,6 @@ export default function BreadcrumbCom({title, span, paths}) { const [stickNav, setStickNav] = useState(false) useEffect(()=>{ - console.log('tru') - // var rect = navRef?.current?.getBoundingClientRect()?.bottom; var rect = 10; window.addEventListener('scroll', ()=>{ diff --git a/src/components/loan_charges/LoanChargesCom.jsx b/src/components/loan_charges/LoanChargesCom.jsx index 26380aa..2ea06ae 100644 --- a/src/components/loan_charges/LoanChargesCom.jsx +++ b/src/components/loan_charges/LoanChargesCom.jsx @@ -68,7 +68,7 @@ export default function LoanChargesCom() { Jese image
{item?.transaction_id || ''}
-
{item?.description}
+
{item?.code}
diff --git a/src/components/loanscom/LoansCom.jsx b/src/components/loanscom/LoansCom.jsx index 82f85b5..fd50ac8 100644 --- a/src/components/loanscom/LoansCom.jsx +++ b/src/components/loanscom/LoansCom.jsx @@ -1,9 +1,10 @@ -import React from 'react' +import React, { useState } from 'react' import { useQuery } from "@tanstack/react-query"; import {Link} from 'react-router-dom' import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' -import TableWrapper from '../tableWrapper/TableWrapper' +// import TableWrapper from '../tableWrapper/TableWrapper' +import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'; import Icons from '../Icons' import Avatar from '../../assets/user_avatar.jpg' @@ -15,14 +16,16 @@ import RouteLinks from '../../RouteLinks'; export default function LoansCom() { + const [page, setPage] = useState(1) + const {data:allLoans, isFetching, isError, error} = useQuery({ - queryKey: queryKeys.loans, - queryFn: () => getLoans() + queryKey: [...queryKeys.loans, page], + queryFn: () => getLoans({page}), + staleTime: 0, }) const loans = allLoans?.data?.loans // LOANS LIST - const loansCount = allLoans?.data?.count // LOANS LIST COUNT - // console.log('LOANS', loans) + const pagination = allLoans?.data?.pagination return (
@@ -36,7 +39,7 @@ export default function LoansCom() { : isError ?

{error.message}

: - + {({ data }) => ( <> @@ -121,7 +124,7 @@ export default function LoansCom() {
)} - + }
diff --git a/src/components/repayments/RepaymentsCom.jsx b/src/components/repayments/RepaymentsCom.jsx index 3ad6c63..0c046bc 100644 --- a/src/components/repayments/RepaymentsCom.jsx +++ b/src/components/repayments/RepaymentsCom.jsx @@ -64,7 +64,7 @@ export default function RepaymentsCom() { Jese image
{item?.customer_id || ''}
-
{item?.transaction_id}
+
{item?.loan_id} : {item?.transaction_id}
diff --git a/src/components/tableWrapper/TablePaginatedWrapper.jsx b/src/components/tableWrapper/TablePaginatedWrapper.jsx index 1608c83..686fd90 100644 --- a/src/components/tableWrapper/TablePaginatedWrapper.jsx +++ b/src/components/tableWrapper/TablePaginatedWrapper.jsx @@ -1,25 +1,15 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import MainBtn from "../MainBtn"; import Icons from "../Icons"; export default function TablePaginatedWrapper({ data = [], - itemsPerPage = 5, + isFetching, pagination, setPage, - isFetching, - filterItem, children, }) { - const [isLoading, setIsLoading] = useState(isFetching) - const [searchTerm, setSearchTerm] = useState(""); - const [filteredData, setFilteredData] = useState(data); - - const [currentPage, setCurrentPage] = useState(0); - const [newData, setNewData] = useState([]); - - const numberOfSelection = itemsPerPage; const handlePrev = () => { setPage(prev => prev - 1) @@ -27,70 +17,24 @@ export default function TablePaginatedWrapper({ const handleNext = () => { setPage(prev => prev + 1) }; - - const handleSearch = ({ target: { value } }, name) => { - setSearchTerm(value); - let newFilteredData = data.filter((item) => - item[name].toLowerCase().startsWith(value.toLowerCase()) - ); - setFilteredData(newFilteredData); - setCurrentPage(0); - }; - - useEffect(() => { - setIsLoading(true) - setTimeout(()=>{ - setNewData( - filteredData?.slice(currentPage, numberOfSelection + currentPage) - ); - setIsLoading(false) - },1000) - }, [currentPage, filteredData, numberOfSelection]); - - useEffect(()=>{ - setCurrentPage(0) - },[itemsPerPage]) - +console.log('isFetching', isFetching) return (
- {data.length > 0 && filterItem && ( -
- {filterItem.map((item, index) => ( - - ))} -
- )} -
- {children({ data: newData })} + {children({ data })}
Showing - {isLoading ? '----' : `page ${pagination?.current_page}`} of {pagination?.total_pages} + {isFetching ? '----' : `page ${pagination?.current_page}`} of {pagination?.total_pages}
- {(newData.length >= 0) &&
@@ -98,23 +42,22 @@ export default function TablePaginatedWrapper({ onClick={handleNext} // text='Next' className={`${!pagination?.has_next ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} - disabled={isLoading || !pagination?.has_next} + disabled={isFetching || !pagination?.has_next} >
- }
- {isLoading && } + {isFetching && }
); } -const TableIsLoading = () => { +export const TableIsLoading = () => { return ( -
+

Loading...

) diff --git a/src/components/transactions/TransactionsCom.jsx b/src/components/transactions/TransactionsCom.jsx index 9eba66a..32e1169 100644 --- a/src/components/transactions/TransactionsCom.jsx +++ b/src/components/transactions/TransactionsCom.jsx @@ -1,13 +1,9 @@ -import React, { useState } from 'react' -import { useQuery } from "@tanstack/react-query"; +import { useEffect, useState } from 'react' import {Link} from 'react-router-dom' 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 { getTransactions } from '../../services/siteServices' import getDateFromDateString from '../../helpers/GetDateFromDateString'; import getTimeFromDateString from '../../helpers/GetTimeFromDateString'; @@ -17,29 +13,76 @@ import RouteLinks from '../../RouteLinks'; export default function TransactionsCom() { const [page, setPage] = useState(1) + const [allTransactions, setAllTransaction] = useState({loading:true, error:'', data:{}}) - const {data, isFetching, isError, error, isPlaceholderData, isPending} = useQuery({ - queryKey: [...queryKeys.transactions, page], - queryFn: () => getTransactions({page}), - staleTime: 0, - // placeholderData: keepPreviousData, - }) + const [willFilter, setWillFilter] = useState(false) + const [filter, setFilter] = useState({transaction_id: '', account_id: ''}) + const handleFilter = ({target:{name, value}}) => { + setFilter(prev => ({...prev, [name]:value})) + } - const transactions = data?.data?.transactions // TRANSACTIONS LIST - const pagination = data?.data?.pagination + const handleFilterByParams = () => { + setPage(1) + setWillFilter(prev => !prev) + } + + const transactions = allTransactions?.data?.transactions // TRANSACTIONS LIST + const pagination = allTransactions?.data?.pagination + const isFetching = allTransactions?.loading + const isError = allTransactions?.error + + useEffect(()=>{ + setAllTransaction(prev => ({...prev, loading:true})) + getTransactions({...filter, page}).then(res => { + if(res?.status != 200){ + setAllTransaction(prev => ({...prev, loading:false})) + return + } + setAllTransaction({loading:false, error:'', data:res?.data}) + }).catch(err => { + setAllTransaction({loading:false, error:'error occurred', data:{}}) + console.log('ERR', err) + }) + },[page, willFilter]) return (
- {isFetching ? - <> -

Loading...

- - : isError ? -

{error.message}

+ { isError ? +

{allTransactions?.error}

: + <> + {/* filter section */} +
+ +
+

Transaction ID

+ +
+
+

Account ID

+ +
+ +
+ {/* end of filter section */} + {({ data }) => ( <> @@ -111,6 +154,7 @@ export default function TransactionsCom() { )} + }
diff --git a/src/components/transactions/_TransactionsCom.jsx b/src/components/transactions/_TransactionsCom.jsx new file mode 100644 index 0000000..3e9333a --- /dev/null +++ b/src/components/transactions/_TransactionsCom.jsx @@ -0,0 +1,163 @@ +import React, { useState } from 'react' +import { useQuery, useQueryClient } from "@tanstack/react-query"; +import {Link} from 'react-router-dom' + +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 { getTransactions } from '../../services/siteServices' +import getDateFromDateString from '../../helpers/GetDateFromDateString'; +import getTimeFromDateString from '../../helpers/GetTimeFromDateString'; +import localImgLoader from '../../helpers/localImageLoader'; +import RouteLinks from '../../RouteLinks'; + +export default function TransactionsCom() { + + const queryClient = useQueryClient() + + const [page, setPage] = useState(1) + + const [filter, setFilter] = useState({transaction_id: '', account_id: ''}) + const handleFilter = ({target:{name, value}}) => { + setFilter(prev => ({...prev, [name]:value})) + } + + const handleFilterByParams = () => { + // setPage(1) + queryClient.invalidateQueries({ queryKey: [...queryKeys.transactions] }) + } + + const {data, isFetching, isError, error, isPlaceholderData, isPending} = useQuery({ + queryKey: [...queryKeys.transactions, page], + queryFn: () => getTransactions({...filter, page}), + staleTime: 0, + // placeholderData: keepPreviousData, + }) + + const transactions = data?.data?.transactions // TRANSACTIONS LIST + const pagination = data?.data?.pagination + + return ( +
+ + +
+ {isFetching ? + <> +

Loading...

+ + : isError ? +

{error.message}

+ : + <> + {/* filter section */} +
+ +
+
+

Transaction ID

+ +
+
+

Account ID

+ +
+
+ +
+ {/* end of filter section */} + + + {({ data }) => ( + <> + + + + + + + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + )) + : + + + + } + +
+ Request + + Account + + Activity + + Action +
+
+ Icon +
+
{item?.transaction_id}
+
{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}
+
+
+ 		+
+
{item?.account_id}
+
{item?.type}
+
+ 		+
+
50%
+
+
+
+
+ 		+
+
+ + + +
+
+
+
+ No Record Found +
+
+ + )} + + + } +
+
+ ) +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 3bec06a..ef5f4b3 100644 --- a/src/index.css +++ b/src/index.css @@ -29,7 +29,7 @@ code { @apply [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:rounded-full } .box { - @apply flex flex-col w-full p-8 cursor-pointer rounded-lg h-full border-[1px] border-[#F1F1F4] dark:border-[#1E2027] shadow-[0px_3px_4px_0px_rgba(0,_0,_0,_0.03)] + @apply flex flex-col w-full p-8 rounded-lg h-full border-[1px] border-[#F1F1F4] dark:border-[#1E2027] shadow-[0px_3px_4px_0px_rgba(0,_0,_0,_0.03)] } } -- 2.34.1