diff --git a/src/RouteLinks.js b/src/RouteLinks.js index ce8bbd8..9436b7b 100644 --- a/src/RouteLinks.js +++ b/src/RouteLinks.js @@ -4,10 +4,11 @@ const RouteLinks = { customerPage: '/customer', subscriptions: '/subscriptions', billings: '/billings', + products: '/products', + users: '/users', + recentSignupPage: '/recent-signup', loansPage: '/loans', - transactionsPage: '/transactions', - offers: '/offers', transaction_details_page: '/transaction/details', errorPage: '*', } diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx index a868b6f..b0343ae 100644 --- a/src/SiteRoutes.jsx +++ b/src/SiteRoutes.jsx @@ -10,11 +10,13 @@ import HomePage from './pages/HomePage' // Home PAGE import CustomerPage from './pages/CustomerPage' // REPAYMENTS PAGE import SubscriptionsPage from './pages/SubscriptionsPage' // TRANSACTIONS PAGE import BillingsPage from './pages/BillingsPage' // LOAN CHARGES PAGE +import UsersPage from './pages/UsersPage' // USERS PAGE +import ProductsPage from './pages/ProductsPage' // PRODUCTS PAGE import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE import TransactionDetailsPage from './pages/TransactionDetailsPage' // TRANSACTION DETAILS PAGE -import OffersPage from './pages/OffersPage' // LOAN OFFERS PAGE import ErrorPage from './pages/ErrorPage' // ERROR PAGE +import RecentSignupPage from './pages/RecentSignupPage' // const Home = lazy(() => import('./pages/Home')); @@ -29,10 +31,12 @@ export default function SiteRoutes() { } /> {`*/SUBSCRIPTIONS PAGE*/`} } /> {`*/CUSTOMER PAGE*/`} } /> {`*/BILLINGS PAGE*/`} + } /> {`*/PRODUCTS PAGE*/`} + } /> {`*/USERS PAGE*/`} + } /> {`*/RECENT SIGNUP PAGE*/`} } /> {`*/LOANS PAGE*/`} } /> {`*/TRANSACTION PAGE*/`} - } /> {`*/LOAN OFFERS PAGE*/`} {/* ERROR PAGE */} diff --git a/src/components/auth/LoginCom.jsx b/src/components/auth/LoginCom.jsx index 7fed9db..68fc4b6 100644 --- a/src/components/auth/LoginCom.jsx +++ b/src/components/auth/LoginCom.jsx @@ -20,8 +20,8 @@ const initialValues = { // To get the validation schema const validationSchema = Yup.object().shape({ - username: Yup.string().required("username is required"), - password: Yup.string().required("password is required").min(6, 'must be upto 6 characters').max(12, 'must not exceed 12 characters'), + username: Yup.string().required("username is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'), + password: Yup.string().required("password is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'), }); export default function LoginCom() { diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx index 61bfe0c..a165b1b 100644 --- a/src/components/layouts/aside/DashboardAside.jsx +++ b/src/components/layouts/aside/DashboardAside.jsx @@ -138,13 +138,13 @@ export default function DashboardAside() { const asideNavLinks = [ {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage}, {name:'Deployments', title:'Activities', status:1, icon: 'arrow-right', subLinks: [ - {name: 'Active', status:1, icon: 'dot', to: RouteLinks.transactionsPage}, + {name: 'Recent Signup', status:1, icon: 'dot', to: RouteLinks.recentSignupPage}, {name: 'Provisions', status:1, icon: 'dot', to: RouteLinks.subscriptions}, {name: 'Customers', status:1, icon: 'dot', to: RouteLinks.customerPage}, {name: 'Billings', status:1, icon: 'dot', to: RouteLinks.billings}, {name: 'Configurations', status:1, icon: 'arrow-right', subLinks: [ - {name: 'Product Settings', status:1, icon: 'dot', to: RouteLinks.offers }, - {name: 'Admin Manager', status:1, icon: 'dot', to: RouteLinks.offers }, + {name: 'Product Settings', status:1, icon: 'dot', to: RouteLinks.products }, + {name: 'Admin Manager', status:1, icon: 'dot', to: RouteLinks.users }, ] }, ], diff --git a/src/components/layouts/rightaside/Orders.jsx b/src/components/layouts/rightaside/RecentChecks.jsx similarity index 82% rename from src/components/layouts/rightaside/Orders.jsx rename to src/components/layouts/rightaside/RecentChecks.jsx index 9d224c7..48a5acd 100644 --- a/src/components/layouts/rightaside/Orders.jsx +++ b/src/components/layouts/rightaside/RecentChecks.jsx @@ -2,11 +2,21 @@ import React from 'react' import Img from '../../../assets/user_avatar.jpg' import CustomCounter from '../../CustomCounter' -export default function Orders() { +export default function RecentChecks({data, isFetching, isError, error}) { + return (

Recent Checks

+ {isFetching ? + //

Loading...

+
+
+
+ : + isError ? +

{error?.message}

+ :

@@ -33,9 +43,18 @@ export default function Orders() {

Created

+ }

Recent Login

+ {isFetching ? +
+
+
+ : + isError ? +

{error?.message}

+ :
@@ -74,6 +93,7 @@ export default function Orders() {
+ }
) diff --git a/src/components/layouts/rightaside/RightAsideBar.jsx b/src/components/layouts/rightaside/RightAsideBar.jsx index 73b34d2..29426ce 100644 --- a/src/components/layouts/rightaside/RightAsideBar.jsx +++ b/src/components/layouts/rightaside/RightAsideBar.jsx @@ -1,6 +1,9 @@ import React, { useState } from 'react' +import { useQuery } from '@tanstack/react-query' +import queryKeys from '../../../services/queryKeys' +import { getRightSidebar } from '../../../services/siteServices' import Icons from '../../Icons' -import Orders from './Orders' +import RecentChecks from './RecentChecks' import Tickets from './Tickets' import Tasks from './Tasks' @@ -13,6 +16,25 @@ export default function RightAsideBar() { setActive(lowerStr) } + + const {data, isFetching, isError, error} = useQuery({ + queryKey: [...queryKeys.right_sidebar], + queryFn: () => { + // const filterData = filter?.type ? {[filter?.type]: filter.id} : {} + // const reqData = { + // page, + // ...filterData + // } + return getRightSidebar() + }, + // staleTime: 0 //0 mins + }) + const recentData = [] // RECENT LIST + + // const recentData = data?.data // RECENT LIST + // const pagination = data?.data?.pagination + // console.log('RIGHT', data?.data) + return (
{/* Menu */} @@ -29,9 +51,9 @@ export default function RightAsideBar() {
{/* Body */} - {active == 'orders' && } - {active == 'tickets' && } - {active == 'tasks' && } + {active == 'orders' && } + {active == 'tickets' && } + {active == 'tasks' && } ) } diff --git a/src/components/layouts/rightaside/Tasks.jsx b/src/components/layouts/rightaside/Tasks.jsx index 61acbeb..41cbe23 100644 --- a/src/components/layouts/rightaside/Tasks.jsx +++ b/src/components/layouts/rightaside/Tasks.jsx @@ -7,6 +7,14 @@ export default function Tasks() {

Support Tasks

+ {isFetching ? +
+
+
+ : + isError ? +

{error?.message}

+ :

@@ -33,9 +41,18 @@ export default function Tasks() {

Created

+ }

Best Tasks

+ {isFetching ? +
+
+
+ : + isError ? +

{error?.message}

+ :
@@ -74,6 +91,7 @@ export default function Tasks() {
+ }
) diff --git a/src/components/layouts/rightaside/Tickets.jsx b/src/components/layouts/rightaside/Tickets.jsx index e5a8570..b6f91e0 100644 --- a/src/components/layouts/rightaside/Tickets.jsx +++ b/src/components/layouts/rightaside/Tickets.jsx @@ -7,6 +7,14 @@ export default function Tickets() {

Recent Repayment

+ {isFetching ? +
+
+
+ : + isError ? +

{error?.message}

+ :

@@ -33,9 +41,18 @@ export default function Tickets() {

Rejected

+ }

Tracked Errors

+ {isFetching ? +
+
+
+ : + isError ? +

{error?.message}

+ :
@@ -74,6 +91,7 @@ export default function Tickets() {
+ }
) diff --git a/src/components/loan_charges/BillingsCom.jsx b/src/components/loan_charges/BillingsCom.jsx index 650f001..5819b4e 100644 --- a/src/components/loan_charges/BillingsCom.jsx +++ b/src/components/loan_charges/BillingsCom.jsx @@ -66,7 +66,6 @@ export default function BillingsCom() { -
diff --git a/src/components/products/ProductsCom.jsx b/src/components/products/ProductsCom.jsx new file mode 100644 index 0000000..4708aba --- /dev/null +++ b/src/components/products/ProductsCom.jsx @@ -0,0 +1,154 @@ +import { 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 { getProducts } from '../../services/siteServices' +import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'; +// import formatNumber from '../../helpers/formatNumber' +// import Avatar from '../../assets/user_avatar.jpg' +// import localImgLoader from '../../helpers/localImageLoader' + + +export default function ProductsCom() { + + const [page, setPage] = useState(1) + const [filter, setFilter] = useState({type: '', id: ''}) + const [willFilter, setWillFilter] = useState(false) + + const handleFilter = ({target:{name, value}}) => { + setFilter(prev => ({...prev, [name]:value})) + } + + 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 {data, isFetching, isError, error} = useQuery({ + queryKey: [...queryKeys.products, page, willFilter], + queryFn: () => { + const filterData = filter?.type ? {[filter?.type]: filter.id} : {} + const reqData = { + page, + ...filterData + } + return getProducts(reqData) + }, + staleTime: 0 //0 mins + }) + const productsData = data?.data?.products // PRODUCTS LIST + const pagination = data?.data?.pagination + + return ( +
+ + +
+ { isError ? +

{error?.message}

+ : + <> + {/* filter section */} +
+ +
+ +
+
+ +
+ +
+ {/* end of filter section */} + + + {({ data }) => ( + <> + + + + + + + {/* */} + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + {/* */} + + + )) + : + + + + } + +
+ Added + + Name + + Product ID + + Amount + + Status +
+
+ {/* Icon */} +
+
{getDateTimeFromDateString(item?.added)}
+
+
+ 		+
+
{item?.name}
+
+ 		+
+
{item?.product_id}
+
+ 		+
+
${item?.amount}
+
{item?.external_url}
+
+ 		+
+
{item?.status}
+
+
+
+ No Record Found +
+
+ + )} + + + } +
+
+ ) +} \ No newline at end of file diff --git a/src/components/recent_signup/RecentSignupCom.jsx b/src/components/recent_signup/RecentSignupCom.jsx new file mode 100644 index 0000000..e622e71 --- /dev/null +++ b/src/components/recent_signup/RecentSignupCom.jsx @@ -0,0 +1,143 @@ +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 { getRecentSignup } from '../../services/siteServices' +import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'; +import formatNumber from '../../helpers/formatNumber' +import Avatar from '../../assets/user_avatar.jpg' + + +export default function RecentSignupCom() { + + const [page, setPage] = useState(1) + const [filter, setFilter] = useState({type: '', id: ''}) + const [willFilter, setWillFilter] = useState(false) + + const handleFilter = ({target:{name, value}}) => { + setFilter(prev => ({...prev, [name]:value})) + } + + 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 {data, isFetching, isError, error} = useQuery({ + queryKey: [...queryKeys.recent_signup, page, willFilter], + queryFn: () => { + const filterData = filter?.type ? {[filter?.type]: filter.id} : {} + const reqData = { + page, + ...filterData + } + return getRecentSignup(reqData) + }, + staleTime: 0 //0 mins + }) + const recentSignupData = data?.data?.payments // RECENT SIGNUP LIST + const pagination = data?.data?.pagination + + return ( +
+ + +
+ { isError ? +

{error?.message}

+ : + <> + {/* filter section */} +
+ +
+ +
+
+ +
+ +
+ {/* end of filter section */} + + + {({ data }) => ( + <> + + + + + + + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + )) + : + + + + } + +
+ Added + + Option Name + + Member ID + + Status +
+
+
+
{getDateTimeFromDateString(item?.added)}
+
+
+ 		+
+
{item?.option_name}
+
+ 		+
+
{item?.member_id}
+
+ 		+
+
{item?.status}
+
+
+
+ No Record Found +
+
+ + )} + + + } +
+
+ ) +} \ No newline at end of file diff --git a/src/components/tableWrapper/TablePaginatedWrapper.jsx b/src/components/tableWrapper/TablePaginatedWrapper.jsx index d76c610..a9412c2 100644 --- a/src/components/tableWrapper/TablePaginatedWrapper.jsx +++ b/src/components/tableWrapper/TablePaginatedWrapper.jsx @@ -27,7 +27,7 @@ export default function TablePaginatedWrapper({
Showing - {isFetching ? '----' : `page ${pagination?.current_page}`} of {pagination?.total_pages} + {isFetching ? '----' : `page ${pagination?.current_page}`} of {isFetching ? '----' : pagination?.total_pages}
{ + setFilter(prev => ({...prev, [name]:value})) + } + + 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 {data, isFetching, isError, error} = useQuery({ - queryKey: [...queryKeys.offers, page], - queryFn: () => getOffers({page}), - staleTime: 0, - // placeholderData: keepPreviousData, + queryKey: [...queryKeys.users, page, willFilter], + queryFn: () => { + const filterData = filter?.type ? {[filter?.type]: filter.id} : {} + const reqData = { + page, + ...filterData + } + return getUsers(reqData) + }, + staleTime: 0 //0 mins }) - - const offers = data?.data?.offers // LOAN CHARGES LIST + const usersData = data?.data?.users // USERS LIST const pagination = data?.data?.pagination - console.log('offers', offers) + // console.log('DATA', data?.data) return (
- +
- {isFetching ? - <> -

Loading...

- - : isError ? -

{error.message}

+ { isError ? +

{error?.message}

: - + <> + {/* filter section */} +
+ +
+ +
+
+ +
+ +
+ {/* end of filter section */} + + {({ data }) => ( <> + - + {/* */} - - - - @@ -72,51 +104,38 @@ export default function OffersCom() { + {/* */} - - - )) : -
+ Added + Name - Interest Rate + + Email + Amount + - Insurance Rate - - Mgt. Rate - - Max/Min Amount - - Tenor - - Action + Status
- Jese image + {/* Icon */}
-
{item?.product_id || ''}
- {/*
{item?.description}
*/} +
{getDateTimeFromDateString(item?.added)}
 -
-
{formatNumber(item?.interest_rate)}
+
+
{item?.name}
 -
-
{formatNumber(item?.insurance_rate)}
+
+
{item?.product_id}
 +
+
${item?.amount}
+
{item?.external_url}
+
+
-
{formatNumber(item?.management_rate)}
+
{item?.status}
 -
-
{formatNumber(item?.maximum_amount)}
-
{formatNumber(item?.minimum_amount)}
-
- 		-
-
{item?.tenor}
-
- 		-
-
- -
-
-
+
No Record Found
@@ -128,6 +147,7 @@ export default function OffersCom() { )} + } diff --git a/src/pages/OffersPage.jsx b/src/pages/OffersPage.jsx deleted file mode 100644 index 4e874ae..0000000 --- a/src/pages/OffersPage.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import OffersCom from '../components/offers/OffersCom' - -export default function OffersPage() { - return ( - - ) -} diff --git a/src/pages/ProductsPage.jsx b/src/pages/ProductsPage.jsx new file mode 100644 index 0000000..72cb6e9 --- /dev/null +++ b/src/pages/ProductsPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import ProductsCom from '../components/products/ProductsCom' + +export default function ProductsPage() { + return ( + + ) +} diff --git a/src/pages/RecentSignupPage.jsx b/src/pages/RecentSignupPage.jsx new file mode 100644 index 0000000..f1d0ad3 --- /dev/null +++ b/src/pages/RecentSignupPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import RecentSignupCom from '../components/recent_signup/RecentSignupCom' + +export default function RecentSignupPage() { + return ( + + ) +} diff --git a/src/pages/UsersPage.jsx b/src/pages/UsersPage.jsx new file mode 100644 index 0000000..534fd03 --- /dev/null +++ b/src/pages/UsersPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import UsersCom from '../components/users/UsersCom' + +export default function UsersPage() { + return ( + + ) +} diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index b058edc..e3adca0 100644 --- a/src/services/queryKeys.js +++ b/src/services/queryKeys.js @@ -5,7 +5,6 @@ const queryKeys = { transactions: ['transactions'], repayment_schedule: ['repayment-schedule'], loan_charges: ['loan-charges'], - offers: ['offers'], apply_loan: ['apply'], select_loan: ['select-loan'], approved_loan: ['approved-loan'], @@ -14,6 +13,10 @@ const queryKeys = { // new subscriptions: ['subscriptions'], billings: ['billings'], + products: ['products'], + users: ['users'], + right_sidebar: ['right_sidebar'], + recent_signup: ['recent_signup'], } export default queryKeys \ No newline at end of file diff --git a/src/services/siteServices.js b/src/services/siteServices.js index d716371..04c9208 100644 --- a/src/services/siteServices.js +++ b/src/services/siteServices.js @@ -74,6 +74,29 @@ export const getSubscriptions = (reqData) => { return getAuxEnd(`/subcriptions`, postData) } +// FUNCTION TO GET PRODUCTS LIST TABLE +export const getProducts = (reqData) => { + const postData = { ...reqData } + return getAuxEnd(`/products`, postData) +} + +// FUNCTION TO GET USERS LIST TABLE +export const getUsers = (reqData) => { + const postData = { ...reqData } + return getAuxEnd(`/users`, postData) +} + +// FUNCTION TO GET USERS LIST TABLE +export const getRightSidebar = (reqData) => { + const postData = { ...reqData } + return getAuxEnd(`/right-sidebar`, postData) +} + +// FUNCTION TO GET RECNET SIGNUP LIST TABLE +export const getRecentSignup = (reqData) => { + const postData = { ...reqData } + return getAuxEnd(`/recent-signup`, postData) +} @@ -93,12 +116,6 @@ export const getRepayments = (reqData) => { return getAuxEnd(`/repayments`, postData) } -// FUNCTION TO GET OFFERS LIST TABLE -export const getOffers = (reqData) => { - const postData = { ...reqData } - return getAuxEnd(`/offers`, postData) -} - // FUNCTION TO GET REPAYMENT SCHEDULE TABLE export const getRepaymentSchedule = (reqData) => { const postData = { ...reqData }