added login input fields max length and users page

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: '*',
 }

src/SiteRoutes.jsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react'
+import { lazy, Suspense } from 'react'
 import { Routes, Route } from 'react-router-dom'
 import RouteLinks from './RouteLinks'
 
@@ -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() {
         <Route path={RouteLinks.subscriptions} element={<SubscriptionsPage />} /> {`*/SUBSCRIPTIONS PAGE*/`}
         <Route path={RouteLinks.customerPage} element={<CustomerPage />} /> {`*/CUSTOMER PAGE*/`}
         <Route path={RouteLinks.billings} element={<BillingsPage />} /> {`*/BILLINGS PAGE*/`}
+        <Route path={RouteLinks.products} element={<ProductsPage />} /> {`*/PRODUCTS PAGE*/`}
+        <Route path={RouteLinks.users} element={<UsersPage />} /> {`*/USERS PAGE*/`}
+        <Route path={RouteLinks.recentSignupPage} element={<RecentSignupPage />} /> {`*/RECENT SIGNUP PAGE*/`}
         
         <Route path={RouteLinks.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
         <Route path={RouteLinks.transaction_details_page} element={<TransactionDetailsPage />} /> {`*/TRANSACTION PAGE*/`}
-        <Route path={RouteLinks.offers} element={<OffersPage />} /> {`*/LOAN OFFERS PAGE*/`}
       </Route>
 
       {/* ERROR PAGE */}

src/components/Icons.jsx

@@ -16,41 +16,41 @@ import { FaLongArrowAltRight, FaFilter } from "react-icons/fa";
 export default function Icons({name, className}) {
   return (
     <>
-    {name.toLowerCase() === 'dashboard' ?
+    {name.toLowerCase() == 'dashboard' ?
     <AiOutlineDashboard className={`text-base ${className}`} />
-    : name.toLowerCase() === 'money' ?
+    : name.toLowerCase() == 'money' ?
     <FaRegMoneyBill1 className={`text-base ${className}`} />
-    :name.toLowerCase() === 'dot' ?
+    :name.toLowerCase() == 'dot' ?
     <GoDotFill className={`text-base ${className}`} />
-    :name.toLowerCase() === 'people' ?
+    :name.toLowerCase() == 'people' ?
     <IoPeople className={`text-base ${className}`} />
-    :name.toLowerCase() === 'product' ?
+    :name.toLowerCase() == 'product' ?
     <AiFillProduct className={`text-base ${className}`} />
-    :name.toLowerCase() === 'trash' ?
+    :name.toLowerCase() == 'trash' ?
     <IoTrash className={`text-base ${className}`} />
-    :name.toLowerCase() === 'eye' ?
+    :name.toLowerCase() == 'eye' ?
     <FaEye className={`text-base ${className}`} />
-    :name.toLowerCase() === 'next' ?
+    :name.toLowerCase() == 'next' ?
     <TbPlayerTrackNext className={`text-base ${className}`} />
-    :name.toLowerCase() === 'prev' ?
+    :name.toLowerCase() == 'prev' ?
     <TbPlayerTrackPrev className={`text-base ${className}`} />
-    :name.toLowerCase() === 'edit' ?
+    :name.toLowerCase() == 'edit' ?
     <FaEdit className={`text-base ${className}`} />
-    :name.toLowerCase() === 'settings' ?
+    :name.toLowerCase() == 'settings' ?
     <IoMdSettings className={`text-base ${className}`} />
-    :name.toLowerCase() === 'message' ?
+    :name.toLowerCase() == 'message' ?
     <LuMessageSquareText className={`text-base ${className}`} />
-    :name.toLowerCase() === 'right-panel' ?
+    :name.toLowerCase() == 'right-panel' ?
     <LuPanelRight className={`text-base ${className}`} />
-    :name.toLowerCase() === 'google' ?
+    :name.toLowerCase() == 'google' ?
     <FcGoogle className={`text-base ${className}`} />
-    :name.toLowerCase() === 'apple' ?
+    :name.toLowerCase() == 'apple' ?
     <IoLogoApple className={`text-base ${className}`} />
-    :name.toLowerCase() === 'sales' ?
+    :name.toLowerCase() == 'sales' ?
     <FcSalesPerformance className={`text-base ${className}`} />
-    :name.toLowerCase() === 'arrow-right' ?
+    :name.toLowerCase() == 'arrow-right' ?
     <FaLongArrowAltRight className={`text-base ${className}`} />
-    :name.toLowerCase() === 'filter' ?
+    :name.toLowerCase() == 'filter' ?
     <FaFilter className={`text-base ${className}`} />
     :
     null

src/components/auth/LoginCom.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { useNavigate, Link } from 'react-router-dom'
+import { useLocation, useNavigate, Link } from 'react-router-dom'
 import { useMutation } from '@tanstack/react-query'
 import {Formik, Form} from 'formik'
 import * as Yup from "yup";
@@ -10,7 +10,7 @@ import { updateUserDetails } from "../../store/UserDetails";
 import { loginUser } from '../../services/siteServices'
 
 import RouteLinks from '../../RouteLinks'
-// import Icons from '../Icons'
+import Icons from '../Icons'
 
 
 const initialValues = {
@@ -20,8 +20,8 @@ const initialValues = {
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
-  username: Yup.string().required("username is required"),
+  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(12, 'must not exceed 12 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() {
@@ -49,7 +49,6 @@ export default function LoginCom() {
             const data = {jwt_token}
             dispatch(updateUserDetails({ ...data, ...user }));
           }
-          setLoading(false)
           navigate(RouteLinks.homePage, {state:{proceed:'true'}}) // later add redux to dispatch state
     }
   })

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -1,24 +1,25 @@
+import { useEffect, useState } from 'react'
 import { MdKeyboardDoubleArrowRight } from 'react-icons/md'
 import { TiHomeOutline } from 'react-icons/ti'
 import DashboardHeader from '../layouts/DashboardHeader'
 
 export default function BreadcrumbCom({title, span, paths}) {
 
-  // const [stickNav, setStickNav] = useState(false)
+  const [stickNav, setStickNav] = useState(false)
 
-  // useEffect(()=>{
+  useEffect(()=>{
-  //     // var rect = navRef?.current?.getBoundingClientRect()?.bottom;
+      // var rect = navRef?.current?.getBoundingClientRect()?.bottom;
-  //     var rect = 10;
+      var rect = 10;
-  //     window.addEventListener('scroll', ()=>{
+      window.addEventListener('scroll', ()=>{
-  //         if(window.scrollY >= rect + 20){
+          if(window.scrollY >= rect + 20){
-  //             setStickNav(true)
+              setStickNav(true)
-  //             console.log('tru')
+              console.log('tru')
-  //         }else{
+          }else{
-  //             setStickNav(false)
+              setStickNav(false)
-  //             console.log('false')
+              console.log('false')
-  //         }
+          }
-  //     })
+      })
-  // },[])
+  },[])
 
   return (
     // ${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}
@@ -34,7 +35,7 @@ export default function BreadcrumbCom({title, span, paths}) {
               {paths.map((item, index) => (
                 <div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
                   <MdKeyboardDoubleArrowRight />
-                  <p className={`${index + 1 === paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
+                  <p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
                 </div>
               ))}
           </div>

src/components/customer/CustomerCom.jsx

@@ -6,9 +6,9 @@ import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
 import { getCustomers } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
-// import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
-// import localImgLoader from '../../helpers/localImageLoader';
+import localImgLoader from '../../helpers/localImageLoader';
-// import RouteLinks from '../../RouteLinks';
+import RouteLinks from '../../RouteLinks';
 
 export default function CustomerCom() {
 

src/components/home/HomeCom.jsx

@@ -124,7 +124,7 @@ export default function HomeCom() {
                               </td>
                               <td className="px-2">
                                 <div className="text-left">
-                                    <div className="text-base font-semibold"><a href={`https://${item?.internal_url}`} target='_blank' rel="noreferrer">{item?.internal_url}</a></div>
+                                    <div className="text-base font-semibold"><a href={`https://${item?.internal_url}`} target='_blank'>{item?.internal_url}</a></div>
                                     <div className="font-normal text-gray-500">{item?.status}</div>
                                 </div> 
                               </td>
@@ -153,8 +153,6 @@ export default function HomeCom() {
                               </td>
                           </tr>
                         )
-                      }else{
-                        return null
                       }
                     }
                     )

src/components/layouts/DashboardHeader.jsx

@@ -47,7 +47,7 @@ export default function DashboardHeader() {
 
                     {/* THEME SELECTION */}
                     <div onClick={handleTheme} className='w-10 h-10 border border-slate-300 text-slate-500 dark:text-white-body rounded-md px-2 flex justify-center items-center gap-2 cursor-pointer' title='Switch Color Mode'>
-                        {theme === 'dark' ?
+                        {theme == 'dark' ?
                         <IoMdSunny className="text-sm md:text-xl font-bold" />
                         :
                         <LuSunDim className="text-sm md:text-xl font-bold" />
@@ -56,7 +56,7 @@ export default function DashboardHeader() {
 
                     <div onClick={()=>handleActiveMenu('avatar')} className='relative cursor-pointer w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
                         <img src={UserAvatar} alt='user avatar' className='w-full h-full p-1 rounded-full' />
-                        {activeMenu === 'avatar' &&
+                        {activeMenu == 'avatar' &&
                             <div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
                                 <div className="w-full h-full flex flex-col gap-4">
                                     <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">

src/components/layouts/DashboardLayout.jsx

@@ -17,8 +17,8 @@ export default function DashboardLayout() {
             <DashboardAside />
         </div>
 
-        <div className={`${showAsideDrawer ==='aside' ? 'left-0' : '-left-full'} lg:hidden w-full fixed inset-0 z-[999]`}>
+        <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} lg:hidden w-full fixed inset-0 z-[999]`}>
-            <div className={`${showAsideDrawer ==='aside' ? 'fixed left-0 top-0 inset-0' : '-left-full'} w-full bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
+            <div className={`${showAsideDrawer =='aside' ? 'fixed left-0 top-0 inset-0' : '-left-full'} w-full bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
             <div className={`fixed px-8 py-4 h-full w-4/5 sm:w-[400px] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
                 <DashboardAside />
             </div>
@@ -45,9 +45,9 @@ export default function DashboardLayout() {
             <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
                 <RightAsideBar />
             </div>
-            <div className={`${showAsideDrawer ==='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
+            <div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
-                {/* <div className={`${showAsideDrawer ==='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
+                {/* <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
-                <div onClick={(e)=>e.stopPropagation()} className={`${showAsideDrawer ==='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
+                <div onClick={(e)=>e.stopPropagation()} className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
                     <RightAsideBar />
                 </div>
             </div>

src/components/layouts/HandBurger.jsx

@@ -11,21 +11,21 @@ export default function HandBurger({showAside, barColor}) {
     ></div> */}
       <div
         className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-black-box'} dark:bg-white-light ${
-        showAside ==='aside'
+        showAside =='aside'
             ? "bottom-1/2 translate-y-1/2 rotate-45"
             : ""
         }`}
     ></div>
     <div
         className={`absolute left-0 top-1/2 -translate-y-1/2 w-5 h-1 rounded-md ${barColor ? barColor :'bg-black-box/50'} dark:bg-white-light transition-all duration-300 ${
-        showAside ==='aside'
+        showAside =='aside'
             ? "rotate-[2000deg] opacity-0"
             : ""
         }`}
     ></div>
     <div
         className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-black-box/50'} dark:bg-white-light ${
-        showAside ==='aside'
+        showAside =='aside'
             ? "top-1/2 -translate-y-1/2 -rotate-45"
             : "bottom-0"
         }`}

src/components/layouts/aside/AsideLink.jsx

@@ -10,7 +10,7 @@ export default function AsideLink({name, to, icon}) {
 
   return (
     <Link 
-        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded-md hover:bg-white dark:hover:bg-black-box text-slate-500 dark:text-white-body/80 ${pathname === to ? 'bg-white-body dark:bg-black-box' : ''}`} 
+        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded-md hover:bg-white dark:hover:bg-black-box text-slate-500 dark:text-white-body/80 ${pathname == to ? 'bg-white-body dark:bg-black-box' : ''}`} 
         to={to}
         onClick={()=>setShowAsideDrawer(false)}
     >   

src/components/layouts/aside/AsideLinkWithSubLinks.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-// import { useLocation } from "react-router-dom"
+import { useLocation } from "react-router-dom"
 import { FaCaretDown } from "react-icons/fa";
 import Icons from "../../Icons";
 import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
@@ -9,9 +9,9 @@ export default function AsideLinkWithSubLinks({name, icon, to, children, isOpen}
 
     const {shrinkAside} = GeneralLayoutContext()
 
-//   const {pathname} = useLocation()
+  const {pathname} = useLocation()
 
-//   const isMatchedPath = pathname.split('/').includes('')
+  const isMatchedPath = pathname.split('/').includes('')
   // isMatchedPath.splice(0,1)
 
   const [hideSubMenu, setHideSubMenu] = useState(isOpen)

src/components/layouts/aside/DashboardAside.jsx

@@ -4,7 +4,7 @@ import DummyLogo from "../../DummyLogo";
 import MainBtn from "../../MainBtn";
 import AsideLink from "./AsideLink";
 import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
-// import { useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
 import { TbLogout2 } from "react-icons/tb";
 import UserAvatar from '../../../assets/user_avatar.jpg'
@@ -14,10 +14,10 @@ export default function DashboardAside() {
 
     const {pathname} = useLocation()
 
-    const {setLogoutModal, handleActiveMenu} = GeneralLayoutContext()
+    const {setLogoutModal, activeMenu, handleActiveMenu} = GeneralLayoutContext()
 
-    // const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
+    const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
-    // const {role}= userDetails
+    const {role}= userDetails
 
   return (
     <div className='w-full h-full flex flex-col'>
@@ -28,7 +28,7 @@ export default function DashboardAside() {
 
         <div className="aside-scroll-design w-full flex flex-col gap-2 h-full overflow-y-auto">
             {asideNavLinks.map((link, index) => {
-                let active = link.status === 1 ? true : false
+                let active = link.status == 1 ? true : false
                 let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
                 if(active && !hasSubLinks){
                     return (
@@ -53,10 +53,10 @@ export default function DashboardAside() {
                         {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>
                         }
-                        <AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname) || index===1} >
+                        <AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname) || index==1} >
                             <>
                             {link.subLinks.map((subItem, index)=>{
-                                let active = subItem.status === 1 ? true : false
+                                let active = subItem.status == 1 ? true : false
                                 let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
                                 if(active && !hasSubLinks){
                                     return (
@@ -74,15 +74,13 @@ export default function DashboardAside() {
                                         <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
+                                                let active = item.status == 1 ? true : false
                                                 if(active){
                                                     return (
                                                     <div key={index}>
                                                         <AsideLink key={index} to={item.to} name={item.name} icon={item.icon} />
                                                     </div>
                                                 )
-                                                }else{
-                                                    return null
                                                 }
                                             })}
                                             </>
@@ -96,8 +94,6 @@ export default function DashboardAside() {
                         </AsideLinkWithSubLinks>
                     </div>
                     )
-                }else{
-                    return null
                 }
             })}
         </div>
@@ -142,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: 'Product Settings', status:1, icon: 'dot', to: RouteLinks.products },
-            {name: 'Admin Manager', status:1, icon: 'dot', to: RouteLinks.offers },
+            {name: 'Admin Manager', status:1, icon: 'dot', to: RouteLinks.users },
             ]
         },
         ],

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 (
         <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
             <div className='flex flex-col gap-4'>
                 <p className='text-base text-white-body font-bold'>Recent Checks</p>
+                {isFetching ?
+                // <p className='text-base text-white-body font-bold'>Loading...</p>
+                <div className='w-full flex justify-center'>
+                    <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+                </div>
+                :
+                isError ?
+                <p className='text-base text-white-body font-bold'>{error?.message}</p>
+                :
                 <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
                     <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
                         <p className='text-base font-bold text-white-body'>
@@ -33,13 +43,22 @@ export default function Orders() {
                         <p className='text-sm text-slate-500'>Created</p>
                     </div>
                 </div>
+                }
             </div>
             <div className='flex flex-col gap-4'>
                 <p className='text-base text-white-body font-bold'>Recent Login</p>
+                {isFetching ?
+                <div className='w-full flex justify-center'>
+                    <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+                </div>
+                :
+                isError ?
+                <p className='text-base text-white-body font-bold'>{error?.message}</p>
+                :
                 <div className='flex flex-col gap-4'>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order" />
+                            <img src={Img} className='w-8' alt="Order Image" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -48,7 +67,7 @@ export default function Orders() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order" />
+                            <img src={Img} className='w-8' alt="Order Image" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -57,7 +76,7 @@ export default function Orders() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order" />
+                            <img src={Img} className='w-8' alt="Order Image" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -66,7 +85,7 @@ export default function Orders() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order" />
+                            <img src={Img} className='w-8' alt="Order Image" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -74,6 +93,7 @@ export default function Orders() {
                         </div>
                     </div>
                 </div>
+                }
             </div>
         </div>
     )

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,25 +16,44 @@ 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 (
     <div className='w-full h-full flex flex-col gap-8'>
         {/* Menu */}
         <div className='grid grid-cols-3 gap-8'>
-            <button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active === 'orders' && 'scale-[1.2]'}`}>
+            <button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
                 <Icons name='dashboard' className='text-3xl' />
             </button>
-            <button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active === 'tickets' && 'scale-[1.2]'}`}>
+            <button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
                 <Icons name='settings' className='text-3xl' />
             </button>
-            <button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active === 'tasks' && 'scale-[1.2]'}`}>
+            <button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
                 <Icons name='dashboard' className='text-3xl' />
             </button>
         </div>
 
         {/* Body */}
-        {active === 'orders' && <Orders />}
+        {active == 'orders' && <RecentChecks data={recentData} isFetching={isFetching} isError={isError} error={error} />}
-        {active === 'tickets' && <Tickets />}
+        {active == 'tickets' && <Tickets data={recentData} isFetching={isFetching} isError={isError} error={error} />}
-        {active === 'tasks' && <Tasks />}
+        {active == 'tasks' && <Tasks data={recentData} isFetching={isFetching} isError={isError} error={error} />}
     </div>
   )
 }

src/components/layouts/rightaside/Tasks.jsx

@@ -7,6 +7,14 @@ export default function Tasks() {
         <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
             <div className='flex flex-col gap-4'>
                 <p className='text-base text-white-body font-bold'>Support Tasks</p>
+                {isFetching ?
+                <div className='w-full flex justify-center'>
+                    <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+                </div>
+                :
+                isError ?
+                <p className='text-base text-white-body font-bold'>{error?.message}</p>
+                :
                 <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
                     <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
                         <p className='text-base font-bold text-white-body'>
@@ -33,13 +41,22 @@ export default function Tasks() {
                         <p className='text-sm text-slate-500'>Created</p>
                     </div>
                 </div>
+                }
             </div>
             <div className='flex flex-col gap-4'>
                 <p className='text-base text-white-body font-bold'>Best Tasks</p>
+                {isFetching ?
+                <div className='w-full flex justify-center'>
+                    <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+                </div>
+                :
+                isError ?
+                <p className='text-base text-white-body font-bold'>{error?.message}</p>
+                :
                 <div className='flex flex-col gap-4'>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order" />
+                            <img src={Img} className='w-8' alt="Order Image" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -48,7 +65,7 @@ export default function Tasks() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order" />
+                            <img src={Img} className='w-8' alt="Order Image" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -57,7 +74,7 @@ export default function Tasks() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order" />
+                            <img src={Img} className='w-8' alt="Order Image" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -66,7 +83,7 @@ export default function Tasks() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order" />
+                            <img src={Img} className='w-8' alt="Order Image" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -74,6 +91,7 @@ export default function Tasks() {
                         </div>
                     </div>
                 </div>
+                }
             </div>
         </div>
       )

src/components/layouts/rightaside/Tickets.jsx

@@ -7,6 +7,14 @@ export default function Tickets() {
     <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
         <div className='flex flex-col gap-4'>
             <p className='text-base text-white-body font-bold'>Recent Repayment</p>
+            {isFetching ?
+            <div className='w-full flex justify-center'>
+                <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+            </div>
+            :
+            isError ?
+            <p className='text-base text-white-body font-bold'>{error?.message}</p>
+            :
             <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
                 <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
                     <p className='text-base font-bold text-white-body'>
@@ -33,13 +41,22 @@ export default function Tickets() {
                     <p className='text-sm text-slate-500'>Rejected</p>
                 </div>
             </div>
+            }
         </div>
         <div className='flex flex-col gap-4'>
             <p className='text-base text-white-body font-bold'>Tracked Errors</p>
+            {isFetching ?
+            <div className='w-full flex justify-center'>
+                <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+            </div>
+            :
+            isError ?
+            <p className='text-base text-white-body font-bold'>{error?.message}</p>
+            :
             <div className='flex flex-col gap-4'>
                 <div className='flex gap-3 items-center'>
                     <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                        <img src={Img} className='w-8' alt="Order" />
+                        <img src={Img} className='w-8' alt="Order Image" />
                     </div>
                     <div className='flex-col'>
                         <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -48,7 +65,7 @@ export default function Tickets() {
                 </div>
                 <div className='flex gap-3 items-center'>
                     <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                        <img src={Img} className='w-8' alt="Order" />
+                        <img src={Img} className='w-8' alt="Order Image" />
                     </div>
                     <div className='flex-col'>
                         <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -57,7 +74,7 @@ export default function Tickets() {
                 </div>
                 <div className='flex gap-3 items-center'>
                     <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                        <img src={Img} className='w-8' alt="Order" />
+                        <img src={Img} className='w-8' alt="Order Image" />
                     </div>
                     <div className='flex-col'>
                         <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -66,7 +83,7 @@ export default function Tickets() {
                 </div>
                 <div className='flex gap-3 items-center'>
                     <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                        <img src={Img} className='w-8' alt="Order" />
+                        <img src={Img} className='w-8' alt="Order Image" />
                     </div>
                     <div className='flex-col'>
                         <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -74,6 +91,7 @@ export default function Tickets() {
                     </div>
                 </div>
             </div>
+            }
         </div>
     </div>
   )

src/components/loan_charges/BillingsCom.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
 
@@ -7,8 +7,8 @@ import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
 import { getBillings } from '../../services/siteServices'
 import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
-// import formatNumber from '../../helpers/formatNumber'
+import formatNumber from '../../helpers/formatNumber'
-// import Avatar from '../../assets/user_avatar.jpg'
+import Avatar from '../../assets/user_avatar.jpg'
 
 
 export default function BillingsCom() {
@@ -66,7 +66,6 @@ export default function BillingsCom() {
                                 <option value=''>All</option>
                                 <option value='option_name'>Option Name</option>
                                 <option value='member_id'>Member ID</option>
-
                             </select>
                         </div>
                         <div className='w-full sm:max-w-48'>

src/components/loanscom/LoansCom.jsx

@@ -111,7 +111,7 @@ export default function LoansCom() {
                                         <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" />
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
                                                 <div className="text-left">
                                                     <div className="text-base font-semibold">{item?.account_id || ''}</div>
                                                     <div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>

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 (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Products' paths={['Dashboard', 'Products']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                { isError ?
+                    <p className='text-red-500'>{error?.message}</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='product_id'>Product 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={productsData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="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">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Name
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Product ID
+                                        </th>
+                                        {/* <th scope="col" className="px-2 text-right">
+                                            Amount
+                                        </th> */}
+                                        <th scope="col" className="px-2 text-right">
+                                            Status
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <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={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" /> */}
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.name}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.product_id}</div>
+                                                </div> 
+                                            </td>
+                                             {/* <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="text-base font-semibold">${item?.amount}</div>
+                                                    <div className="font-normal text-gray-500">{item?.external_url}</div>
+                                                </div> 
+                                            </td> */}
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="text-base font-semibold">{item?.status}</div>
+                                                </div> 
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={4}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                </>
+                }
+            </div>
+        </div>
+    )
+}

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 (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Billings' paths={['Dashboard', 'Billings']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                { isError ?
+                    <p className='text-red-500'>{error?.message}</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='username'>Username</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={recentSignupData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="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">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Option Name
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Member ID
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Status
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <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'>
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.option_name}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.member_id}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="text-base font-semibold">{item?.status}</div>
+                                                </div> 
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={4}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                </>
+                }
+            </div>
+        </div>
+    )
+}

src/components/repayments/RepaymentsCom.jsx

@@ -103,7 +103,7 @@ export default function RepaymentsCom() {
                                         <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" />
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
                                                 <div className="text-left">
                                                     <div className="text-base font-semibold">{item?.customer_id || ''}</div>
                                                     <div className="font-normal text-gray-500">{item?.loan_id} : {item?.transaction_id}</div>

src/components/tableWrapper/TablePaginatedWrapper.jsx

@@ -1,4 +1,4 @@
-// import { useState } from "react";
+import { useState } from "react";
 import MainBtn from "../MainBtn";
 import Icons from "../Icons";
 
@@ -27,7 +27,7 @@ export default function TablePaginatedWrapper({
 
         <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
             <div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
-              {isFetching ? '----' : `page ${pagination?.current_page}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{pagination?.total_pages}</span>
+              {isFetching ? '----' : `page ${pagination?.current_page}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{isFetching ? '----' : pagination?.total_pages}</span>
             </div>
               <div className='flex items-center gap-3 md:gap-6'>
                   <MainBtn 

src/components/transactionDetails/LoanChargeDetails.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useQuery } from "@tanstack/react-query";
 
-// import Icons from '../Icons'
+import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
@@ -58,7 +58,7 @@ export default function LoanChargeDetails({transactionID}) {
                             <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" />
+                                    <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
                                     <div className="text-left">
                                         <div className="text-base font-semibold">{item?.transaction_id || ''}</div>
                                         {/* <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}

src/components/transactionDetails/LoanDetails.jsx

@@ -62,7 +62,7 @@ export default function LoanDetails({transactionID}) {
                             <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" />
+                                    <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
                                     <div className="text-left">
                                         <div className="text-base font-semibold">{item?.account_id || ''}</div>
                                         <div className="font-normal text-gray-500">{item?.id} : {item?.transaction_id}</div>

src/components/transactionDetails/RepaymentScheduleDetails.jsx

@@ -68,7 +68,7 @@ export default function RepaymentScheduleDetails({transactionID}) {
                             <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" />
+                                    <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
                                     <div className="text-left">
                                         <div className="text-base font-semibold">{item?.loan_id || ''}</div>
                                         {/* <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}

src/components/transactions/SubscriptionsCom.jsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
-// import {Link} from 'react-router-dom'
+import {Link} from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
 
@@ -8,8 +8,8 @@ import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
 import { getSubscriptions } from '../../services/siteServices'
 import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
-// import localImgLoader from '../../helpers/localImageLoader';
+import localImgLoader from '../../helpers/localImageLoader';
-// import RouteLinks from '../../RouteLinks';
+import RouteLinks from '../../RouteLinks';
 
 export default function SubscriptionsCom() {
 

src/components/users/UsersCom.jsx

@@ -1,69 +1,101 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
-import { useQuery } from "@tanstack/react-query";
+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 { getUsers } 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'
 
-import Avatar from '../../assets/user_avatar.jpg'
-import queryKeys from '../../services/queryKeys'
-import { getOffers } from '../../services/siteServices'
-// import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import formatNumber from '../../helpers/formatNumber';
 
-export default function OffersCom() {
+export default function UsersCom() {
 
     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.offers, page],
+        queryKey: [...queryKeys.users, page, willFilter],
-        queryFn: () => getOffers({page}),
+        queryFn: () => {
-        staleTime: 0,
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
-        // placeholderData: keepPreviousData,
+            const reqData = {
+                page,
+                ...filterData
+            }
+            return getUsers(reqData)
+        },
+        staleTime: 0 //0 mins
     })
-
+    const usersData = data?.data?.users // USERS LIST
-    const offers = data?.data?.offers // LOAN CHARGES LIST
     const pagination = data?.data?.pagination
-    console.log('offers', offers)
+    // console.log('DATA', data?.data)
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Offers' paths={['Dashboard', 'Offers']} />
+            <BreadcrumbCom title='Users' paths={['Dashboard', 'Users']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isFetching ? 
+                { isError ?
-                <>
+                    <p className='text-red-500'>{error?.message}</p>
-                    <p className='text-slate-800'>Loading...</p>
-                </>
-                : isError ?
-                    <p className='text-red-500'>{error.message}</p>
                 :
-                    <TablePaginatedWrapper data={offers} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                <>
+                    {/* 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='email'>Email</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={usersData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
                             <table className="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">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2">
                                             Name
                                         </th>
-                                        <th scope="col" className="px-2 text-right">
+                                        <th scope="col" className="px-2">
-                                            Interest Rate
+                                            Email
                                         </th>
+                                        {/* <th scope="col" className="px-2 text-right">
+                                            Amount
+                                        </th> */}
                                         <th scope="col" className="px-2 text-right">
-                                            Insurance Rate
+                                            Status
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Mgt. Rate
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Max/Min Amount
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Tenor
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Action
                                         </th>
                                     </tr>
                                 </thead>
@@ -72,51 +104,38 @@ export default function OffersCom() {
                                         <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" />
+                                                {/* <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" /> */}
                                                 <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.product_id || ''}</div>
+                                                    <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
-                                                    {/* <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}
                                                 </div>  
                                                 </div>
                                             </td>
                                             <td className="px-2">
-                                                <div className="text-right">
+                                                <div className="text-left">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.interest_rate)}</div>
+                                                    <div className="text-base font-semibold">{item?.name}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2">
-                                                <div className="text-right">
+                                                <div className="text-left">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.insurance_rate)}</div>
+                                                    <div className="text-base font-semibold">{item?.product_id}</div>
                                                 </div> 
                                             </td>
+                                             {/* <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="text-base font-semibold">${item?.amount}</div>
+                                                    <div className="font-normal text-gray-500">{item?.external_url}</div>
+                                                </div> 
+                                            </td> */}
                                             <td className="px-2">
                                                 <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.management_rate)}</div>
+                                                    <div className="text-base font-semibold">{item?.status}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.maximum_amount)}</div>
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.minimum_amount)}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{item?.tenor}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2 text-right">
-                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
-                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                        <Icons name='eye' />
-                                                    </div>
                                                 </div> 
                                             </td>
                                         </tr>
                                     ))
                                     :
                                     <tr className="py-2 border-t border-dashed border-slate-300">
-                                        <td className="px-3 py-2" colSpan={7}>
+                                        <td className="px-3 py-2" colSpan={4}>
                                             <div className="flex justify-center items-center">
                                                 No Record Found
                                             </div>
@@ -128,6 +147,7 @@ export default function OffersCom() {
                         </>
                     )}
                     </TablePaginatedWrapper>
+                </>
                 }
             </div>
         </div>

src/context/GeneralLayoutContext.jsx

@@ -21,7 +21,7 @@ export default function GeneralLayoutContextInt({children}) {
     const [showAsideDrawer, setShowAsideDrawer] = useState('')
 
     const handleActiveMenu = (name) => {
-        if(activeMenu === name){
+        if(activeMenu == name){
             setActiveMenu('')
         }else{
             setActiveMenu(name)
@@ -32,7 +32,7 @@ export default function GeneralLayoutContextInt({children}) {
       setDrawer((prev)=>{
         if(!prev){
           return drawerToOpen
-        }else if(drawerToOpen === prev){
+        }else if(drawerToOpen == prev){
           return ''
         }else{
           return drawerToOpen
@@ -44,7 +44,7 @@ export default function GeneralLayoutContextInt({children}) {
       setBooking((prev)=>{
         if(!prev){
           return bookingToOpen
-        }else if(bookingToOpen === prev){
+        }else if(bookingToOpen == prev){
           return ''
         }else{
           return bookingToOpen

src/pages/OffersPage.jsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import OffersCom from '../components/offers/OffersCom'
-
-export default function OffersPage() {
-  return (
-    <OffersCom />
-  )
-}

src/pages/ProductsPage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import ProductsCom from '../components/products/ProductsCom'
+
+export default function ProductsPage() {
+  return (
+    <ProductsCom />
+  )
+}

src/pages/RecentSignupPage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import RecentSignupCom from '../components/recent_signup/RecentSignupCom'
+
+export default function RecentSignupPage() {
+  return (
+    <RecentSignupCom />
+  )
+}

src/pages/TransactionDetailsPage.jsx

@@ -11,7 +11,7 @@ export default function TransactionDetailsPage() {
     if(!state?.transactionID){
         navigate('/', {replace: true})
     }
-  },[state])
+  },[])
   return (
     <TransactionDetailsCom id={state?.transactionID} />
   )

src/pages/UsersPage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import UsersCom from '../components/users/UsersCom'
+
+export default function UsersPage() {
+  return (
+    <UsersCom />
+  )
+}

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

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 }