diff --git a/src/components/loan_charges/BillingsCom.jsx b/src/components/loan_charges/BillingsCom.jsx index b8d86c8..125da3e 100644 --- a/src/components/loan_charges/BillingsCom.jsx +++ b/src/components/loan_charges/BillingsCom.jsx @@ -1,10 +1,12 @@ import { useEffect, useState } from 'react' +import { useQuery } from '@tanstack/react-query' +import queryKeys from '../../services/queryKeys' import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' import Icons from '../Icons' import { getBillings } from '../../services/siteServices' -import getDateFromDateString from '../../helpers/GetDateFromDateString'; +import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'; import formatNumber from '../../helpers/formatNumber' import Avatar from '../../assets/user_avatar.jpg' @@ -12,10 +14,9 @@ import Avatar from '../../assets/user_avatar.jpg' export default function BillingsCom() { const [page, setPage] = useState(1) - const [allBillings, setAllBillings] = useState({loading:true, error:'', data:{}}) - - const [willFilter, setWillFilter] = useState(false) const [filter, setFilter] = useState({type: '', id: ''}) + const [willFilter, setWillFilter] = useState(false) + const handleFilter = ({target:{name, value}}) => { setFilter(prev => ({...prev, [name]:value})) } @@ -33,25 +34,20 @@ export default function BillingsCom() { } } - const billings = allBillings?.data?.loan_charges // LOAN CHARGES LIST - const pagination = allBillings?.data?.pagination - const isFetching = allBillings?.loading - const isError = allBillings?.error - - useEffect(()=>{ - setAllBillings(prev => ({...prev, loading:true})) - const payload = filter?.type ? {[filter?.type]: filter.id} : {} - getBillings({...payload, page}).then(res => { - if(res?.status != 200){ - setAllBillings(prev => ({...prev, error:'Opps, an error occurred', loading:false})) - return + const {data, isFetching, isError, error} = useQuery({ + queryKey: [...queryKeys.billings, page, willFilter], + queryFn: () => { + const filterData = filter?.type ? {[filter?.type]: filter.id} : {} + const reqData = { + page, + ...filterData } - setAllBillings({loading:false, error:'', data:res?.data}) - }).catch(err => { - setAllBillings({loading:false, error:'error occurred', data:{}}) - console.log('ERR', err) - }) - },[page, willFilter]) + return getBillings(reqData) + }, + staleTime: 0 //0 mins + }) + const billingData = data?.data?.payments // BILLINGS LIST + const pagination = data?.data?.pagination return (
@@ -59,7 +55,7 @@ export default function BillingsCom() {
{ isError ? -

{allBillings?.error}

+

{error?.message}

: <> {/* filter section */} @@ -79,26 +75,26 @@ export default function BillingsCom() {
{/* end of filter section */} - + {({ data }) => ( <> + + - {/* */} - @@ -107,31 +103,32 @@ export default function BillingsCom() { + + - )) : diff --git a/src/components/transactions/SubscriptionsCom.jsx b/src/components/transactions/SubscriptionsCom.jsx index d03f09a..70f2d24 100644 --- a/src/components/transactions/SubscriptionsCom.jsx +++ b/src/components/transactions/SubscriptionsCom.jsx @@ -1,22 +1,22 @@ import { useEffect, useState } from 'react' import {Link} from 'react-router-dom' +import { useQuery } from '@tanstack/react-query' +import queryKeys from '../../services/queryKeys' import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' import Icons from '../Icons' -import { getSubcriptions } from '../../services/siteServices' -import getDateFromDateString from '../../helpers/GetDateFromDateString'; -import getTimeFromDateString from '../../helpers/GetTimeFromDateString'; +import { getSubscriptions } from '../../services/siteServices' +import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'; import localImgLoader from '../../helpers/localImageLoader'; import RouteLinks from '../../RouteLinks'; export default function SubscriptionsCom() { const [page, setPage] = useState(1) - const [allSubcriptions, setAllSubcriptions] = useState({loading:true, error:'', data:{}}) - - const [willFilter, setWillFilter] = useState(false) const [filter, setFilter] = useState({type: '', id: ''}) + const [willFilter, setWillFilter] = useState(false) + const handleFilter = ({target:{name, value}}) => { setFilter(prev => ({...prev, [name]:value})) } @@ -34,25 +34,20 @@ export default function SubscriptionsCom() { } } - const subcriptions = allSubcriptions?.data?.transactions // TRANSACTIONS LIST - const pagination = allSubcriptions?.data?.pagination - const isFetching = allSubcriptions?.loading - const isError = allSubcriptions?.error - - useEffect(()=>{ - setAllSubcriptions(prev => ({...prev, loading:true})) - const payload = filter?.type ? {[filter?.type]: filter.id} : {} - getSubcriptions({...payload, page}).then(res => { - if(res?.status != 200){ - setAllSubcriptions(prev => ({...prev, error:'Opps, an error occurred', loading:false})) - return + const {data, isFetching, isError, error} = useQuery({ + queryKey: [...queryKeys.subscriptions, page, willFilter], + queryFn: () => { + const filterData = filter?.type ? {[filter?.type]: filter.id} : {} + const reqData = { + page, + ...filterData } - setAllSubcriptions({loading:false, error:'', data:res?.data}) - }).catch(err => { - setAllSubcriptions({loading:false, error:'error occurred', data:{}}) - console.log('ERR', err) - }) - },[page, willFilter]) + return getSubscriptions(reqData) + }, + staleTime: 0 //0 mins + }) + const subscriptionData = data?.data?.subscriptions // SUBSCRIPTION LIST + const pagination = data?.data?.pagination return (
@@ -60,7 +55,7 @@ export default function SubscriptionsCom() {
{ isError ? -

{allSubcriptions?.error}

+

{error?.message}

: <> {/* filter section */} @@ -80,23 +75,23 @@ export default function SubscriptionsCom() {
{/* end of filter section */} - + {({ data }) => ( <>
- Name + Added + + Option Name + + Product ID - Loan - Amount - Added - - Action + Status
- Jese image
-
{item?.transaction_id || ''}
-
{item?.code}
+
{getDateTimeFromDateString(item?.added)}
 +
+
{item?.option_name}
+
+ 		+
+
{item?.product_id}
+
+
- {/*
{formatNumber(item?.initial_loan_amount)}
*/} -
{formatNumber(item?.amount)}
+
{item?.amount}
+ {/*
{item?.external_url}
*/}
-
{getDateFromDateString(item?.created_at)}
+
{item?.status}
 -
-
- -
-
-
@@ -105,36 +100,28 @@ export default function SubscriptionsCom() { + - )) : diff --git a/src/helpers/getDateTimeFromDateString.js b/src/helpers/getDateTimeFromDateString.js new file mode 100644 index 0000000..c3ce5a4 --- /dev/null +++ b/src/helpers/getDateTimeFromDateString.js @@ -0,0 +1,33 @@ +function getDateTimeFromDateString(dateString) { + const date = new Date(dateString); + + const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; + const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; + + const dayName = days[date.getDay()]; + const monthName = months[date.getMonth()]; + const day = date.getDate(); + const year = date.getFullYear(); + + // Add ordinal suffix + function getOrdinal(n) { + if (n > 3 && n < 21) return "th"; // 4-20 are all "th" + switch (n % 10) { + case 1: return "st"; + case 2: return "nd"; + case 3: return "rd"; + default: return "th"; + } + } + + // Format time in 12hr with AM/PM + let hours = date.getHours(); + const minutes = date.getMinutes().toString().padStart(2, "0"); + const ampm = hours >= 12 ? "PM" : "AM"; + hours = hours % 12 || 12; + + return `${dayName}, ${monthName} ${day}${getOrdinal(day)} ${year} ${hours}:${minutes}${ampm}`; +} + +export default getDateTimeFromDateString \ No newline at end of file diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index 46e18ae..b058edc 100644 --- a/src/services/queryKeys.js +++ b/src/services/queryKeys.js @@ -10,6 +10,10 @@ const queryKeys = { select_loan: ['select-loan'], approved_loan: ['approved-loan'], loan_offers: ['loan-offers'], + + // new + subscriptions: ['subscriptions'], + billings: ['billings'], } export default queryKeys \ No newline at end of file diff --git a/src/services/siteServices.js b/src/services/siteServices.js index 6c2138c..d716371 100644 --- a/src/services/siteServices.js +++ b/src/services/siteServices.js @@ -69,7 +69,7 @@ export const getBillings = (reqData) => { } // FUNCTION TO GET SUBSCRIPTIONS -export const getSubcriptions = (reqData) => { +export const getSubscriptions = (reqData) => { const postData = { ...reqData } return getAuxEnd(`/subcriptions`, postData) }
- Request + Added - Account + Product - Activity + URL - Action + Status
- Icon + {/* Icon */}
-
{item?.transaction_id}
-
{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}
+
{getDateTimeFromDateString(item?.added)}
-
{item?.account_id}
-
{item?.type}
+
{item?.product_id}
+
+ 		+
+
{item?.internal_url}
+
{item?.external_url}
 -
-
50%
-
-
-
+
+
{item?.status}
 -
-
- - - -
-
-