updated base url

.env

@@ -6,7 +6,7 @@ TWITTER_URL=https://twitter.com
 INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-REACT_APP_MAIN_API='http://backoffice-apidev.simbrellang.net:14700'
+REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
 
 # ENQUIRIES CONTACTS
 VITE_CALL_ENDPOINT='09099000000'

.env.development

@@ -6,7 +6,7 @@ VITE_TWITTER_URL=https://twitter.com
 VITE_INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-REACT_APP_MAIN_API='http://backoffice-apidev.simbrellang.net:14700'
+REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
 
 # ENQUIRIES CONTACTS
 VITE_CALL_ENDPOINT='09099000000'

.env.production

@@ -6,7 +6,7 @@ TWITTER_URL=https://twitter.com
 INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-REACT_APP_MAIN_API='http://backoffice-apidev.simbrellang.net:14700'
+REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
 
 # ENQUIRIES CONTACTS
 VITE_CALL_ENDPOINT='09099000000'

src/App.js

@@ -23,8 +23,9 @@ function App() {
       queries: {
         refetchOnWindowFocus: false,
         retry: 3,
+        staleTime: 300000 //5 mins
         // refetchOnMount: false,
-        staleTime: Infinity // can also be a number in millisecond
+        // staleTime: Infinity // can also be a number in millisecond
       },
     },
   })

src/components/home/HomeCom.jsx

@@ -14,7 +14,7 @@ export default function HomeCom() {
 
   const {data, isFetching, isError, error} = useQuery({
     queryKey: queryKeys.dashboard,
-    queryFn: () => getDashData()
+    queryFn: () => getDashData(),
   })
 
   const dashData = data?.data // DASHBOARD DATA

src/components/layouts/aside/DashboardAside.jsx

@@ -32,7 +32,7 @@ export default function DashboardAside() {
                 let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
                 if(active && !hasSubLinks){
                     return (
-                        <div key={index}>
+                        <div key={link.name}>
                             <AsideLink to={link.to} name={link.name} icon={link.icon} />
                         </div>
                     )
@@ -49,7 +49,7 @@ export default function DashboardAside() {
                         }
                     })
                     return (
-                    <div key={index} className="w-full">
+                    <div key={link.name} className="w-full">
                         {link.title &&
                             <h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
                         }
@@ -60,8 +60,8 @@ export default function DashboardAside() {
                                 let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
                                 if(active && !hasSubLinks){
                                     return (
-                                    <div key={index}>
+                                    <div key={subItem.name}>
-                                        <AsideLink key={index} to={subItem.to} name={subItem.name} icon={subItem.icon} />
+                                        <AsideLink to={subItem.to} name={subItem.name} icon={subItem.icon} />
                                     </div>
                                 )
                                 }else if(active && hasSubLinks){
@@ -71,7 +71,7 @@ export default function DashboardAside() {
                                         }
                                     })
                                     return(
-                                        <AsideLinkWithSubLinks name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
+                                        <AsideLinkWithSubLinks key={subItem.name} name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
                                             <>
                                             {subItem.subLinks.map((item, index)=>{
                                                 let active = item.status == 1 ? true : false

src/components/loanscom/LoansCom.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { useQuery } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TableWrapper from '../tableWrapper/TableWrapper'
@@ -8,18 +7,21 @@ import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
-import { selectLoan } from '../../services/siteServices'
+import { getLoans } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber'
 import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 
 export default function LoansCom() {
 
-    const {data, isFetching, isError, error} = useQuery({
+    const {data:allLoans, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.select_loan,
+        queryKey: queryKeys.loans,
-        queryFn: () => selectLoan()
+        queryFn: () => getLoans()
     })
 
-    const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
+    const loans = allLoans?.data?.loans // LOANS LIST
+    const loansCount = allLoans?.data?.count // LOANS LIST COUNT
+    // console.log('LOANS', loans)
 
     return (
         <div className='w-full flex flex-col gap-8'>
@@ -33,19 +35,19 @@ export default function LoansCom() {
                 : isError ?
                     <p className='text-red-500'>{error.message}</p>
                 :
-                    <TableWrapper data={selectUsers} itemsPerPage={15}>
+                    <TableWrapper data={loans} itemsPerPage={15}>
                     {({ data }) => (
                         <>
-                            <table className="py-2 w-full text-sm">
+                            <table className="table-auto py-2 w-full text-sm">
                                 <thead className="py-2 text-sm text-slate-500 text-left">
                                     <tr>
                                         <th scope="col" className="px-2 py-2">
                                             Name
                                         </th>
-                                        <th scope="col" className="px-2">
+                                        <th scope="col" className="px-2 text-right">
-                                            Loan
+                                            Loan Amount
                                         </th>
-                                        <th scope="col" className="px-2">
+                                        <th scope="col" className="px-2 text-right">
                                             Added
                                         </th>
                                         <th scope="col" className="px-2 text-right">
@@ -55,25 +57,25 @@ export default function LoansCom() {
                                 </thead>
                                 <tbody>
                                     {(data && data.length > 0) ? data?.map((item, index) => (
-                                        <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
                                             <td className="px-2 py-2">
                                                 <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                                 <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
                                                 <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.name || ''}</div>
+                                                    <div className="text-base font-semibold">{item?.account_id || ''}</div>
-                                                    <div className="font-normal text-gray-500">{item?.bvn}</div>
+                                                    <div className="font-normal text-gray-500">{item?.customer_id}</div>
                                                 </div>  
                                                 </div>
                                             </td>
                                             <td className="px-2">
-                                                <div className="text-left">
+                                                <div className="text-right">
-                                                    <div className="text-base font-semibold">{item?.loan}</div>
+                                                    {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
-                                                    <div className="font-normal text-gray-500">{item?.description}</div>
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2">
-                                                <div className="text-left">
+                                                <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2 text-right">

src/services/queryKeys.js

@@ -1,5 +1,6 @@
 const queryKeys = {
     dashboard: ['dashboard'],
+    loans: ['loans'],
     apply_loan: ['apply'],
     select_loan: ['select-loan'],
     approved_loan: ['approved-loan'],

src/services/siteServices.js

@@ -8,7 +8,7 @@ axios.interceptors.request.use(
             "Access-Control-Allow-Origin": "*",
             // "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
             // "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
-            "Content-Type": "application/json;charset=UTF-8",
+            // "Content-Type": "application/json;charset=UTF-8",
             'Authorization': (localStorage && localStorage.getItem('token')) ? `Bearer ${localStorage.getItem('token')}` : ''
           };
     // config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
@@ -56,6 +56,15 @@ export const getDashData = (reqData) => {
     return getAuxEnd(`/dashboard`, postData)
 }
 
+// FUNCTION TO GET APPLIED LOANS TABLE
+export const getLoans = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/loans`, postData)
+}
+
+
+
+
 // FUNCTION TO GET APPLIED LOANS TABLE
 export const applyLoan = (reqData) => {
     const postData = { ...reqData }