added products endpoint and implement login input fields max length

.env

@@ -1,4 +1,4 @@
-DIGIFI_PORT=5173
+OFFICE_PORT=3000
 
 # Social Links
 FACEBOOK_URL=https://www.facebook.com

.env.development

@@ -1,4 +1,4 @@
-DIGIFI_PORT=5173
+OFFICE_PORT=3000
 
 # Social Links
 VITE_FACEBOOK_URL=https://www.facebook.com

.env.production

@@ -1,4 +1,4 @@
-DIGIFI_PORT=5173
+OFFICE_PORT=3000
 
 # Social Links
 FACEBOOK_URL=https://www.facebook.com

docker-compose.yml

@@ -4,7 +4,8 @@ services:
     image: registry.chiefsoft.net/merms-first-office:latest
     build:
       context: .
-      dockerfile: Dockerfile
+#      dockerfile: Dockerfile
+      dockerfile: docker/Dockerfile
       args:
         - NODE_ENV=development
     restart: unless-stopped
@@ -13,17 +14,19 @@ services:
       - '/app/node_modules'
       - ./run.sh:/app/run.sh
     ports:
-      - 8092:5173
+      - 8092:3000
     expose:
-      - "5173"
+#      - "5173"
       - "3000"
     extra_hosts:
       - devapi.mermsemr.com:10.10.33.15
       - api.mermsemr.com:10.10.33.15
       - devsocket.mermsemr.com:10.10.33.15
       - socket.mermsemr.com:10.10.33.15
+      - media.mermsemr.com:10.10.33.15
+      - devmedia.mermsemr.com:10.10.33.15
     environment:
-      - PORT=${DIGIFI_PORT}
+      - PORT=${OFFICE_PORT}
       - NODE_ENV=${NODE_ENV:-production}
     tty: true
     stdin_open: true

docker/Dockerfile

@@ -0,0 +1,135 @@
+# pull the base image
+# FROM node:alpine
+
+FROM alpine:3.15
+
+# Build args
+ARG NODE_ENV
+
+ENV NODE_VERSION 14.19.0
+ENV NODE_ENV=$NODE_ENV
+
+# install nginx
+RUN apk update
+RUN apk add nginx
+
+RUN addgroup -g 1000 node \
+    && adduser -u 1000 -G node -s /bin/sh -D node \
+    && apk add --no-cache \
+        libstdc++ \
+    && apk add --no-cache --virtual .build-deps \
+        curl \
+    && ARCH= && alpineArch="$(apk --print-arch)" \
+      && case "${alpineArch##*-}" in \
+        x86_64) \
+          ARCH='x64' \
+          CHECKSUM="8d5e638d88b62de2f147dee812a5d74e4860a20468eb7ff32c41a02b58e2aebf" \
+          ;; \
+        *) ;; \
+      esac \
+  && if [ -n "${CHECKSUM}" ]; then \
+    set -eu; \
+    curl -fsSLO --compressed "https://unofficial-builds.nodejs.org/download/release/v$NODE_VERSION/node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz"; \
+    echo "$CHECKSUM  node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" | sha256sum -c - \
+      && tar -xJf "node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
+      && ln -s /usr/local/bin/node /usr/local/bin/nodejs; \
+  else \
+    echo "Building from source" \
+    # backup build
+    && apk add --no-cache --virtual .build-deps-full \
+        binutils-gold \
+        g++ \
+        gcc \
+        gnupg \
+        libgcc \
+        linux-headers \
+        make \
+        python3 \
+    # gpg keys listed at https://github.com/nodejs/node#release-keys
+    && for key in \
+      4ED778F539E3634C779C87C6D7062848A1AB005C \
+      94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
+      74F12602B6F1C4E913FAA37AD3A89613643B6201 \
+      71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
+      8FCCA13FEF1D0C2E91008E09770F7A9A5AE15600 \
+      C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
+      C82FA3AE1CBEDC6BE46B9360C43CEC45C17AB93C \
+      DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
+      A48C2BEE680E841632CD4E44F07496B3EB3C1762 \
+      108F52B48DB57BB0CC439B2997B01419BD92F80A \
+      B9E2F5981AA6E0CD28160D9FF13993A75599653C \
+    ; do \
+      gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
+      gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
+    done \
+    && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION.tar.xz" \
+    && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/SHASUMS256.txt.asc" \
+    && gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc \
+    && grep " node-v$NODE_VERSION.tar.xz\$" SHASUMS256.txt | sha256sum -c - \
+    && tar -xf "node-v$NODE_VERSION.tar.xz" \
+    && cd "node-v$NODE_VERSION" \
+    && ./configure \
+    && make -j$(getconf _NPROCESSORS_ONLN) V= \
+    && make install \
+    && apk del .build-deps-full \
+    && cd .. \
+    && rm -Rf "node-v$NODE_VERSION" \
+    && rm "node-v$NODE_VERSION.tar.xz" SHASUMS256.txt.asc SHASUMS256.txt; \
+  fi \
+  && rm -f "node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" \
+  && apk del .build-deps \
+  # smoke tests
+  && node --version \
+  && npm --version
+
+ENV YARN_VERSION 1.22.17
+
+RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
+  && for key in \
+    6A010C5166006599AA17F08146C2130DFD2497F5 \
+  ; do \
+    gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
+    gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
+  done \
+  && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
+  && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz.asc" \
+  && gpg --batch --verify yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
+  && mkdir -p /opt \
+  && tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
+  && ln -s /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
+  && ln -s /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
+  && rm yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
+  && apk del .build-deps-yarn \
+  # smoke test
+  && yarn --version
+
+# set working directory
+# WORKDIR /app
+  WORKDIR /usr/src/app
+
+# add `/app/node_modules/.bin` to $PATH
+# ENV PATH /app/node_modules/.bin:$PATH
+  ENV PATH /usr/src/app/node_modules/.bin:$PATH
+
+  COPY nginx.conf ./
+
+  COPY run.sh ./
+
+# install app dependencies
+  COPY package.json ./
+  RUN npm install
+#COPY package-lock.json ./
+#RUN npm install --silent
+  # RUN npm install react 
+  # RUN npm install react-scripts@3.4.1 -g --silent
+
+# add app
+  COPY . ./
+
+# start appdpvle
+#CMD ["npm","run", "start"]
+ 
+# CMD ["yarn", "start"]
+
+# start app
+CMD /bin/sh ./run.sh

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "digifi-salaryloan",
+  "name": "merms-office",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "digifi-salaryloan",
+      "name": "merms-office",
       "version": "0.1.0",
       "dependencies": {
         "@reduxjs/toolkit": "^2.5.1",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "digifi-salaryloan",
+  "name": "merms-office",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -22,7 +22,6 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build_RE": "react-scripts build",
     "build": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/RouteLinks.js

@@ -4,11 +4,11 @@ const RouteLinks = {
     customerPage: '/customer',
     subscriptions: '/subscriptions',
     billings: '/billings',
-    products: '/products',
-    users: '/users',
-    recentSignupPage: '/recent-signup',
-    
+    recentSignup: '/recent-signup',
     loansPage: '/loans',
+    transactionsPage: '/transactions',
+    products: '/products',
+    usersAdmin: '/users-admin',
     transaction_details_page: '/transaction/details',
     errorPage: '*',
 }

src/SiteRoutes.jsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense } from 'react'
+import { Suspense } from 'react'
 import { Routes, Route } from 'react-router-dom'
 import RouteLinks from './RouteLinks'
 
@@ -10,13 +10,14 @@ 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 UsersAdminPage from "./pages/UsersAdminPage"; // ADMIN USERS PAGE
+import RecentSignupPage from "./pages/RecentSignupPage"; // RECENT SIGNUP PAGE
 import ProductsPage from './pages/ProductsPage' // PRODUCTS PAGE
+import ErrorPage from './pages/ErrorPage';
 
 import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
 import TransactionDetailsPage from './pages/TransactionDetailsPage' // TRANSACTION DETAILS PAGE
-import ErrorPage from './pages/ErrorPage' // ERROR PAGE
-import RecentSignupPage from './pages/RecentSignupPage'
+
 
 
 // const Home = lazy(() => import('./pages/Home'));
@@ -28,12 +29,12 @@ export default function SiteRoutes() {
 
       <Route element={<UserExist />}>
         <Route path={RouteLinks.homePage} element={<HomePage />} /> {`*/HOME PAGE*/`}
+        <Route path={RouteLinks.recentSignup} element={<RecentSignupPage />} /> {`*/RECENT SIGNUP PAGE*/`}
         <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.usersAdmin} element={<UsersAdminPage />} /> {`*/ADMIN USERS PAGE*/`}
         
         <Route path={RouteLinks.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
         <Route path={RouteLinks.transaction_details_page} element={<TransactionDetailsPage />} /> {`*/TRANSACTION 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,165 +1,138 @@
-import React, { useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
-import { useLocation, useNavigate, Link } from 'react-router-dom'
-import { useMutation } from '@tanstack/react-query'
+import React, {useState} from 'react'
+import {useDispatch} from 'react-redux'
+import {useNavigate, Link} from 'react-router-dom'
+import {useMutation} from '@tanstack/react-query'
 import {Formik, Form} from 'formik'
 import * as Yup from "yup";
 
 import InputText from '../InputText'
-import { updateUserDetails } from "../../store/UserDetails";
-import { loginUser } from '../../services/siteServices'
+import {updateUserDetails} from "../../store/UserDetails";
+import {loginUser} from '../../services/siteServices'
 
 import RouteLinks from '../../RouteLinks'
-import Icons from '../Icons'
+// import Icons from '../Icons'
 
 
 const initialValues = {
-  username: "",
-  password: "",
+    username: "",
+    password: "",
 };
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
-  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'),
+    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() {
 
-  const dispatch = useDispatch()
-  const navigate = useNavigate()
-  
-  const [loading, setLoading] = useState(false)
+    const dispatch = useDispatch()
+    const navigate = useNavigate()
 
-  const login = useMutation({
-    mutationFn: (fields) => {
-        if(!fields.username || !fields.password){
-            throw new Error('Please provide all fields marked *')
+    const [loading, setLoading] = useState(false)
+
+    const login = useMutation({
+        mutationFn: (fields) => {
+            if (!fields.username || !fields.password) {
+                throw new Error('Please provide all fields marked *')
+            }
+            return loginUser(fields)
+        },
+        onError: (error) => {
+            console.log(error)
+        },
+        onSuccess: (res) => {
+            const {jwt_token, user} = res?.data
+            if (jwt_token) {
+                localStorage.setItem('token', jwt_token)
+                // localStorage.setItem('room', room)
+                const data = {jwt_token}
+                dispatch(updateUserDetails({...data, ...user}));
+            }
+            setLoading(false)
+            navigate(RouteLinks.homePage, {state: {proceed: 'true'}}) // later add redux to dispatch state
         }
-        return loginUser(fields)
-    },
-    onError: (error) => {
-        console.log(error)
-    },
-      onSuccess: (res) => {
-        const {jwt_token, user} = res?.data
-        if(jwt_token){
-            localStorage.setItem('token', jwt_token)
-            // localStorage.setItem('room', room)
-            const data = {jwt_token}
-            dispatch(updateUserDetails({ ...data, ...user }));
-          }
-          navigate(RouteLinks.homePage, {state:{proceed:'true'}}) // later add redux to dispatch state
-    }
-  })
+    })
 
-  // const handleLogin = () => {
-  //   setLoading(true)
-  //   const data = {name: 'dummy'}
-  //   localStorage.setItem('token', 'token')
-  //   dispatch(updateUserDetails({ ...data }));
-  //   setTimeout(()=>{
-  //     navigate(RouteLinks.homePage, {replace:true})
-  //   },500)
-  // }
+    //FUNCTION TO HANDLE LOGIN
+    const handleSubmit = (values, helper) => {
+        login.mutate(values)
+        // handleLogin()
+    };
 
-  //FUNCTION TO HANDLE LOGIN
-  const handleSubmit = (values, helper) => {
-    login.mutate(values)
-    // handleLogin()
-  };
+    return (
+        <>
+            <div
+                className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}>
+                <div
+                    className='p-4 sm:p-8 w-full max-w-7xl mx-auto grid gap-8 grid-cols-1 md:grid-cols-3 lg:grid-cols-2'>
+                    <div className='col-span-1 md:col-span-2 lg:col-span-1 h-full'>
+                        <Formik
+                            initialValues={initialValues}
+                            validationSchema={validationSchema}
+                            onSubmit={handleSubmit}
+                        >
+                            {(props) => (
+                                <Form>
+                                    <div
+                                        className='flex flex-col gap-8 w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
+                                        <div className='w-full flex flex-col gap-1 items-center'>
+                                            <h1 className='text-2xl md:text-3xl font-bold text-black-body'>Sign In</h1>
+                                            <p className='text-sm font-medium text-slate-500'>Welcome back, please login
+                                                to your account</p>
+                                        </div>
 
+                                        <div className='flex flex-col gap-6'>
+                                            <div className='relative text-input flex flex-col gap-2'>
+                                                <p className='absolute left-0 -top-4 text-red-500 text-10'>
+                                                    {(props.errors.username && props.touched.username) ? props.errors.username : ''}
+                                                </p>
+                                                <InputText
+                                                    id='username'
+                                                    placeholder='Username'
+                                                    name='username'
+                                                    value={props.values.username}
+                                                    handleChange={props.handleChange}
+                                                />
+                                            </div>
+                                            <div className='relative text-input flex flex-col gap-2 mb-10'>
+                                                <p className='absolute left-0 -top-4 text-red-500 text-10'>
+                                                    {(props.errors.password && props.touched.password) ? props.errors.password : ''}
+                                                </p>
+                                                <InputText
+                                                    id='password'
+                                                    placeholder='Password'
+                                                    name='password'
+                                                    type='password'
+                                                    value={props.values.password}
+                                                    handleChange={props.handleChange}
+                                                />
+                                                {/* <p className='text-sm text-end font-medium text-primary'>Forget password ?</p> */}
+                                            </div>
+                                            <div className='h-10 mb-10'>
+                                                <button type='submit' disabled={login.isPending}
+                                                        className='w-full h-full bg-primary text-white font-bold rounded-md'>{login.isPending || loading ? 'loading...' : 'Login'}</button>
+                                            </div>
 
-  return (
-    <>
-      <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}>
-        <div className='p-4 sm:p-8 w-full max-w-7xl mx-auto grid gap-8 grid-cols-1 md:grid-cols-3 lg:grid-cols-2'>
-          <div className='col-span-1 md:col-span-2 lg:col-span-1 h-full'>
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema}
-              onSubmit={handleSubmit}
-            >
-              {(props)=>(
-                <Form>
-                  <div className='flex flex-col gap-8 w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
-                    <div className='w-full flex flex-col gap-1 items-center'>
-                      <h1 className='text-2xl md:text-3xl font-bold text-black-body'>Sign In</h1>
-                      <p className='text-sm font-medium text-slate-500'>Welcome back, please login to your account</p>
+                                            {login.error &&
+                                                <>
+                                                    <div className="w-full text-center">
+                                                        <p className='text-red-500 text-sm'>{login.error.message}</p>
+                                                    </div>
+                                                </>
+                                            }
+                                        </div>
+
+                                        <div className='flex justify-end gap-4 mt-6 text-[18px] font-medium'>
+                                            MERMS Integrated Support System
+                                        </div>
+                                    </div>
+                                </Form>
+                            )}
+                        </Formik>
                     </div>
-
-                    {/* social login */}
-                    {/*<div className='grid grid-cols-2 gap-4 text-sm'>*/}
-                    {/*  <div className='px-4 py-2 flex gap-2 items-center justify-center text-black-body font-medium border border-slate-300/50 rounded-md hover:text-primary hover:bg-sky-50 cursor-pointer'>*/}
-                    {/*    <Icons name='google' />*/}
-                    {/*    <span>Sign in with Google</span>*/}
-                    {/*  </div>*/}
-                    {/*  <div className='px-4 py-2 flex gap-2 items-center justify-center text-black-body font-medium border border-slate-300/50 rounded-md hover:text-primary hover:bg-sky-50 cursor-pointer'>*/}
-                    {/*    <Icons name='apple' />*/}
-                    {/*    <span>Sign in with Apple</span>*/}
-                    {/*  </div>*/}
-                    {/*</div>*/}
-
-                    {/*<div className='relative h-[1px] bg-slate-300/50'>*/}
-                    {/*  <p className='absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 bg-white p-4 text-12 text-slate-500'>Or with email</p>*/}
-                    {/*</div>*/}
-
-                    <div className='flex flex-col gap-6'>
-                      <div className='relative text-input flex flex-col gap-2'>
-                        <p className='absolute left-0 -top-4 text-red-500 text-10'>
-                          {(props.errors.username && props.touched.username) ? props.errors.username : ''}
-                        </p>
-                        <InputText 
-                          id='username' 
-                          placeholder='Username' 
-                          name='username' 
-                          value={props.values.username}
-                          handleChange={props.handleChange}
-                        />
-                      </div>
-                      <div className='relative text-input flex flex-col gap-2 mb-10'>
-                        <p className='absolute left-0 -top-4 text-red-500 text-10'>
-                          {(props.errors.password && props.touched.password) ? props.errors.password : ''}
-                        </p>
-                        <InputText 
-                          id='password' 
-                          placeholder='Password' 
-                          name='password' 
-                          type='password' 
-                          value={props.values.password}
-                          handleChange={props.handleChange}
-                        />
-                        {/* <p className='text-sm text-end font-medium text-primary'>Forget password ?</p> */}
-                      </div>
-                      <div className='h-10 mb-10'>
-                        <button type='submit' disabled={login.isPending} className='w-full h-full bg-primary text-white font-bold rounded-md'>{login.isPending || loading ? 'loading...' : 'Login'}</button>
-                      </div>
-                  
-                      {login.error &&
-                      <>
-                        <div className="w-full text-center">
-                          <p className='text-red-500 text-sm'>{login.error.message}</p>
-                      </div>
-                      </>
-                      }
-                    </div>
-
-                    {/* <p className='text-sm text-center font-medium text-slate-500'>Not yet a member? <span className='text-primary'>Sign Up</span></p> */}
-
-                    <div className='flex justify-end gap-4 mt-6 text-[13px] font-medium'>
-                      <Link className='text-primary' to=''>Terms</Link>
-                      {/*<Link className='text-primary' to=''>Plans</Link>*/}
-                      <Link className='text-primary' to=''>Contact Us</Link>
-                    </div>
-
-
-                  </div>
-                </Form>
-              )}
-            </Formik>
-          </div>
-        </div>
-      </div>
-    </>
-  )
+                </div>
+            </div>
+        </>
+    )
 }

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -1,25 +1,24 @@
-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(()=>{
-      // var rect = navRef?.current?.getBoundingClientRect()?.bottom;
-      var rect = 10;
-      window.addEventListener('scroll', ()=>{
-          if(window.scrollY >= rect + 20){
-              setStickNav(true)
-              console.log('tru')
-          }else{
-              setStickNav(false)
-              console.log('false')
-          }
-      })
-  },[])
+  // useEffect(()=>{
+  //     // var rect = navRef?.current?.getBoundingClientRect()?.bottom;
+  //     var rect = 10;
+  //     window.addEventListener('scroll', ()=>{
+  //         if(window.scrollY >= rect + 20){
+  //             setStickNav(true)
+  //             console.log('tru')
+  //         }else{
+  //             setStickNav(false)
+  //             console.log('false')
+  //         }
+  //     })
+  // },[])
 
   return (
     // ${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}
@@ -35,7 +34,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

@@ -1,35 +1,35 @@
-import { useEffect, useState } from 'react'
+import {useEffect, useState} from 'react'
 import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-import { getCustomers } from '../../services/siteServices'
+import {getCustomers} from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
-import localImgLoader from '../../helpers/localImageLoader';
-import RouteLinks from '../../RouteLinks';
+// import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+// import localImgLoader from '../../helpers/localImageLoader';
+// import RouteLinks from '../../RouteLinks';
 
 export default function CustomerCom() {
 
     const [page, setPage] = useState(1)
-    const [allCustomers, setAllCustomers] = useState({loading:true, error:'', data:{}})
+    const [allCustomers, setAllCustomers] = useState({loading: true, error: '', data: {}})
 
     const [willFilter, setWillFilter] = useState(false)
     const [filter, setFilter] = useState({type: '', id: ''})
-    
-    const handleFilter = ({target:{name, value}}) => {
-        setFilter(prev => ({...prev, [name]:value}))
+
+    const handleFilter = ({target: {name, value}}) => {
+        setFilter(prev => ({...prev, [name]: value}))
     }
 
     const handleFilterByParams = () => {
-        if(filter.type && !filter.id){
+        if (filter.type && !filter.id) {
             return
-        }else if(!filter.type){
+        } else if (!filter.type) {
             setPage(1)
             setWillFilter(prev => !prev)
             setFilter({type: '', id: ''})
-        }else{
+        } else {
             setPage(1)
             setWillFilter(prev => !prev)
         }
@@ -40,110 +40,122 @@ export default function CustomerCom() {
     const isFetching = allCustomers?.loading
     const isError = allCustomers?.error
 
-    useEffect(()=>{
-        setAllCustomers(prev => ({...prev, loading:true}))
+    useEffect(() => {
+        setAllCustomers(prev => ({...prev, loading: true}))
         const payload = filter?.type ? {[filter?.type]: filter.id} : {}
         getCustomers({...payload, page}).then(res => {
-            if(res?.status != 200){
-                setAllCustomers(prev => ({...prev, error:'Opps, an error occurred', loading:false}))
+            if (res?.status !== 200) {
+                setAllCustomers(prev => ({...prev, error: 'Opps, an error occurred', loading: false}))
                 return
             }
-            setAllCustomers({loading:false, error:'', data:res?.data})
+            setAllCustomers({loading: false, error: '', data: res?.data})
         }).catch(err => {
-            setAllCustomers({loading:false, error:'error occurred', data:{}})
+            setAllCustomers({loading: false, error: 'error occurred', data: {}})
             console.log('ERR', err)
         })
-    },[page, willFilter])
+    }, [page, willFilter])
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Customers' paths={['Dashboard', 'Customers']} />
+            <BreadcrumbCom title='Customers' paths={['Dashboard', 'Customers']}/>
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                { isError ?
+                {isError ?
                     <p className='text-red-500'>{allCustomers?.error}</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>
-                                <option value='email'>Email</option>
-                            </select>
+                    :
+                    <>
+                        {/* 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>
+                                    <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'}`}>Refresh
+                            </button>
                         </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'}`}>Refresh</button>
-                    </div>
-                     {/* end of filter section */}
+                        {/* end of filter section */}
 
-                    <TablePaginatedWrapper data={customers} 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">
-                                            Name
-                                        </th>
-                                        <th scope="col" className="px-2">
-                                            Account
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Action
-                                        </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">{item?.firstname} {item?.lastname}</div>
-                                                    <div className="font-normal text-gray-500">{item?.email}</div>
-                                                    <div className="font-normal text-gray-500">{item?.id}</div>
-                                                </div>  
-                                                </div>
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.username}</div>
-                                                    <div className="font-normal text-gray-500">{item?.member_uid}</div>
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.profile_completed)}</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'>
-                                                        <Link to={''} state={{customerID: item?.id}}>
-                                                            <Icons name='eye' />
-                                                        </Link>
-                                                    </div>
-                                                </div>
-                                            </td>
+                        <TablePaginatedWrapper data={customers} 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">
+                                                Name
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Account
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Action
+                                            </th>
                                         </tr>
-                                    ))
-                                    :
-                                    <tr className="py-2 border-t border-dashed border-slate-300">
-                                        <td className="px-3 py-2" colSpan={3}>
-                                            <div className="flex justify-center items-center">
-                                                No Record Found
-                                            </div>
-                                        </td>
-                                    </tr>
-                                    }
-                                </tbody>
-                            </table>
-                        </>
-                    )}
-                    </TablePaginatedWrapper>
-                </>
+                                        </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">{item?.firstname} {item?.lastname}</div>
+                                                                <div
+                                                                    className="font-normal text-gray-500">{item?.email}</div>
+                                                                <div className="font-normal text-gray-500">{item?.id}</div>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div className="text-base font-semibold">{item?.username}</div>
+                                                            <div
+                                                                className="font-normal text-gray-500">{item?.member_uid}</div>
+                                                            <div
+                                                                className="font-normal text-gray-500">{getDateFromDateString(item?.profile_completed)}</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'>
+                                                                <Link to={''} state={{customerID: item?.id}}>
+                                                                    <Icons name='eye'/>
+                                                                </Link>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={3}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
                 }
             </div>
         </div>

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'>{item?.internal_url}</a></div>
+                                    <div className="text-base font-semibold"><a href={`https://${item?.internal_url}`} target='_blank' rel="noreferrer">{item?.internal_url}</a></div>
                                     <div className="font-normal text-gray-500">{item?.status}</div>
                                 </div> 
                               </td>
@@ -153,6 +153,8 @@ 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' ? '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' ? '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={`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' : '-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 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 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,9 +4,9 @@ import DummyLogo from "../../DummyLogo";
 import MainBtn from "../../MainBtn";
 import AsideLink from "./AsideLink";
 import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
-import { useSelector } from "react-redux";
-import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
-import { TbLogout2 } from "react-icons/tb";
+// import { useSelector } from "react-redux";
+import {GeneralLayoutContext} from "../../../context/GeneralLayoutContext";
+import {TbLogout2} from "react-icons/tb";
 import UserAvatar from '../../../assets/user_avatar.jpg'
 import Icons from "../../Icons";
 
@@ -14,139 +14,153 @@ export default function DashboardAside() {
 
     const {pathname} = useLocation()
 
-    const {setLogoutModal, activeMenu, handleActiveMenu} = GeneralLayoutContext()
+    const {setLogoutModal, handleActiveMenu} = GeneralLayoutContext()
 
-    const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
-    const {role}= userDetails
+    // const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
+    // const {role}= userDetails
 
-  return (
-    <div className='w-full h-full flex flex-col'>
-        <div className="mb-3 w-full h-24 logo flex items-center">
-            <DummyLogo />
-        </div>
-        {/* <hr className="border-slate-400" /> */}
+    return (
+        <div className='w-full h-full flex flex-col'>
+            <div className="mb-3 w-full h-24 logo flex items-center">
+                <DummyLogo/>
+            </div>
+            {/* <hr className="border-slate-400" /> */}
 
-        <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 hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
-                if(active && !hasSubLinks){
-                    return (
-                        <div key={link.name}>
-                            <AsideLink to={link.to} name={link.name} icon={link.icon} />
-                        </div>
-                    )
-                }
-                if(active && hasSubLinks){
-                    let subLinkList = []
-                    link.subLinks.forEach(item =>{
-                        if(item.to){
-                            subLinkList.push(item.to)
-                        }else if(item.subLinks?.length > 0){
-                            item.subLinks.forEach(item => {
+            <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 hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
+                    if (active && !hasSubLinks) {
+                        return (
+                            <div key={link.name}>
+                                <AsideLink to={link.to} name={link.name} icon={link.icon}/>
+                            </div>
+                        )
+                    }
+                    if (active && hasSubLinks) {
+                        let subLinkList = []
+                        link.subLinks.forEach(item => {
+                            if (item.to) {
                                 subLinkList.push(item.to)
-                            })
-                        }
-                    })
-                    return (
-                    <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>
-                        }
-                        <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 hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
-                                if(active && !hasSubLinks){
-                                    return (
-                                    <div key={subItem.name}>
-                                        <AsideLink to={subItem.to} name={subItem.name} icon={subItem.icon} />
-                                    </div>
-                                )
-                                }else if(active && hasSubLinks){
-                                    let subLinkList = subItem.subLinks.filter(value => value.to).map(item => { // specific open
-                                        if(item.to){
-                                            return item.to
-                                        }
-                                    })
-                                    return(
-                                        <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
-                                                if(active){
-                                                    return (
-                                                    <div key={index}>
-                                                        <AsideLink key={index} to={item.to} name={item.name} icon={item.icon} />
+                            } else if (item.subLinks?.length > 0) {
+                                item.subLinks.forEach(item => {
+                                    subLinkList.push(item.to)
+                                })
+                            }
+                        })
+                        return (
+                            <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>
+                                }
+                                <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 hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
+                                            if (active && !hasSubLinks) {
+                                                return (
+                                                    <div key={subItem.name}>
+                                                        <AsideLink to={subItem.to} name={subItem.name}
+                                                                   icon={subItem.icon}/>
                                                     </div>
                                                 )
-                                                }
-                                            })}
-                                            </>
-                                        </AsideLinkWithSubLinks>
-                                    )
-                                }else{
-                                    return null
-                                }
-                            })}
-                            </>
-                        </AsideLinkWithSubLinks>
-                    </div>
-                    )
-                }
-            })}
-        </div>
-
-        <div className='py-2 mt-4 relative'>
-            <div className="group w-full flex items-center gap-2">
-                <div className="w-full flex items-center gap-2">
-                    <img src={UserAvatar} alt='user avatar' className='w-12 h-12 p-1 rounded-full' />
-                    <div>
-                        <p className="text-sm font-bold text-black-body dark:text-white-body">Username</p>
-                        <p className="text-12 text-black-box/90 dark:text-white-body/80">username@gmail.com</p>
-                    </div>
-                </div>
-                <button onClick={()=>handleActiveMenu('settings')}  className="peer text-slate-500 dark:text-white-body">
-                    <Icons name='settings' className='text-3xl' />
-                </button>
-                <div className="hidden group-hover:block pop-modal-down absolute p-4 w-full bg-white dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
-                    <div className="w-full min-h-48 flex flex-col justify-between gap-4">
-                        <div className="w-full h-full">
-                            <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
-                                <h1 className="font-semibold">Username</h1>
-                                <p className="-mt-2">username@gmail.com</p>
+                                            } else if (active && hasSubLinks) {
+                                                let subLinkList = subItem.subLinks.filter(value => value.to).map(item => { // specific open
+                                                    if (item.to) {
+                                                        return item.to
+                                                    }
+                                                })
+                                                return (
+                                                    <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
+                                                                if (active) {
+                                                                    return (
+                                                                        <div key={index}>
+                                                                            <AsideLink key={index} to={item.to}
+                                                                                       name={item.name}
+                                                                                       icon={item.icon}/>
+                                                                        </div>
+                                                                    )
+                                                                } else {
+                                                                    return null
+                                                                }
+                                                            })}
+                                                        </>
+                                                    </AsideLinkWithSubLinks>
+                                                )
+                                            } else {
+                                                return null
+                                            }
+                                        })}
+                                    </>
+                                </AsideLinkWithSubLinks>
                             </div>
+                        )
+                    } else {
+                        return null
+                    }
+                })}
+            </div>
+
+            <div className='py-2 mt-4 relative'>
+                <div className="group w-full flex items-center gap-2">
+                    <div className="w-full flex items-center gap-2">
+                        <img src={UserAvatar} alt='user avatar' className='w-12 h-12 p-1 rounded-full'/>
+                        <div>
+                            <p className="text-sm font-bold text-black-body dark:text-white-body">Username</p>
+                            <p className="text-12 text-black-box/90 dark:text-white-body/80">username@gmail.com</p>
                         </div>
-                        <div className="rounded w-full flex items-center gap-2">
-                            <MainBtn
-                                text='Logout' 
-                                className="w-full text-center text-black-body hover:text-red-500 dark:text-white-body font-bold text-lg flex justify-center gap-2 items-center" 
-                                onClick={()=>setLogoutModal(true)}
-                            >
-                                <TbLogout2 className="text-base" />
-                            </MainBtn>
+                    </div>
+                    <button onClick={() => handleActiveMenu('settings')}
+                            className="peer text-slate-500 dark:text-white-body">
+                        <Icons name='settings' className='text-3xl'/>
+                    </button>
+                    <div
+                        className="hidden group-hover:block pop-modal-down absolute p-4 w-full bg-white dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
+                        <div className="w-full min-h-48 flex flex-col justify-between gap-4">
+                            <div className="w-full h-full">
+                                <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
+                                    <h1 className="font-semibold">Username</h1>
+                                    <p className="-mt-2">username@gmail.com</p>
+                                </div>
+                            </div>
+                            <div className="rounded w-full flex items-center gap-2">
+                                <MainBtn
+                                    text='Logout'
+                                    className="w-full text-center text-black-body hover:text-red-500 dark:text-white-body font-bold text-lg flex justify-center gap-2 items-center"
+                                    onClick={() => setLogoutModal(true)}
+                                >
+                                    <TbLogout2 className="text-base"/>
+                                </MainBtn>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-  )
+    )
 }
 
 const asideNavLinks = [
-    {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
-    {name:'Deployments', title:'Activities', status:1, icon: 'arrow-right', subLinks: [
-        {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.products },
-            {name: 'Admin Manager', status:1, icon: 'dot', to: RouteLinks.users },
-            ]
-        },
+    {name: 'Dashboard', status: 1, icon: 'dashboard', to: RouteLinks.homePage},
+    {
+        name: 'Deployments', title: 'Activities', status: 1, icon: 'arrow-right', subLinks: [
+            {name: 'Recent Signup', status: 1, icon: 'dot', to: RouteLinks.recentSignup},
+            {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.products},
+                    {name: 'Admin Manager', status: 1, icon: 'dot', to: RouteLinks.usersAdmin},
+                ]
+            },
         ],
     },
 ]

src/components/layouts/rightaside/Orders.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import Img from '../../../assets/user_avatar.jpg'
+import CustomCounter from '../../CustomCounter'
+
+export default function Orders() {
+    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 Payments</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'>
+                        <CustomCounter targetNumber={18} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Pending</p>
+                    </div>
+                    <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'>
+                        <CustomCounter targetNumber={5} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Approved</p>
+                    </div>
+                    <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'>
+                        <CustomCounter targetNumber={1} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Rejected</p>
+                    </div>
+                    <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'>
+                        <CustomCounter targetNumber={1} timeInSeconds={1} />
+                        </p>
+                        <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>
+                <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" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </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" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </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" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </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" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/layouts/rightaside/RecentPaymentsBar.jsx

@@ -2,14 +2,12 @@ import React from 'react'
 import Img from '../../../assets/user_avatar.jpg'
 import CustomCounter from '../../CustomCounter'
 
-export default function RecentChecks({data, isFetching, isError, error}) {
-
+export default function RecentPaymentsBar({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>
+                <p className='text-base text-white-body font-bold'>Recent Payments [7 days]</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>
@@ -20,27 +18,27 @@ export default function RecentChecks({data, isFetching, isError, error}) {
                 <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'>
-                        <CustomCounter targetNumber={18} timeInSeconds={1} />
-                        </p>
-                        <p className='text-sm text-slate-500'>Pending</p>
-                    </div>
-                    <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'>
-                        <CustomCounter targetNumber={5} timeInSeconds={1} />
+                            <CustomCounter targetNumber={18} timeInSeconds={1} />
                         </p>
                         <p className='text-sm text-slate-500'>Approved</p>
                     </div>
                     <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'>
-                        <CustomCounter targetNumber={1} timeInSeconds={1} />
+                            <CustomCounter targetNumber={5} timeInSeconds={1} />
                         </p>
-                        <p className='text-sm text-slate-500'>Rejected</p>
+                        <p className='text-sm text-slate-500'>Verified</p>
                     </div>
                     <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'>
-                        <CustomCounter targetNumber={1} timeInSeconds={1} />
+                            <CustomCounter targetNumber={1} timeInSeconds={1} />
                         </p>
-                        <p className='text-sm text-slate-500'>Created</p>
+                        <p className='text-sm text-slate-500'>Failed</p>
+                    </div>
+                    <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'>
+                            <CustomCounter targetNumber={1} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Total</p>
                     </div>
                 </div>
                 }
@@ -58,7 +56,7 @@ export default function RecentChecks({data, isFetching, isError, error}) {
                 <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 Image" />
+                            <img src={Img} className='w-8' alt="Order" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -67,7 +65,7 @@ export default function RecentChecks({data, isFetching, isError, error}) {
                     </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 Image" />
+                            <img src={Img} className='w-8' alt="Order" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -76,7 +74,7 @@ export default function RecentChecks({data, isFetching, isError, error}) {
                     </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 Image" />
+                            <img src={Img} className='w-8' alt="Order" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -85,7 +83,7 @@ export default function RecentChecks({data, isFetching, isError, error}) {
                     </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 Image" />
+                            <img src={Img} className='w-8' alt="Order" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>

src/components/layouts/rightaside/RightAsideBar.jsx

@@ -3,9 +3,10 @@ import { useQuery } from '@tanstack/react-query'
 import queryKeys from '../../../services/queryKeys'
 import { getRightSidebar } from '../../../services/siteServices'
 import Icons from '../../Icons'
-import RecentChecks from './RecentChecks'
+//import Orders from './Orders'
 import Tickets from './Tickets'
 import Tasks from './Tasks'
+import RecentPaymentsBar from "./RecentPaymentsBar";
 
 export default function RightAsideBar() {
 
@@ -16,7 +17,6 @@ export default function RightAsideBar() {
         setActive(lowerStr)
     }
 
-
     const {data, isFetching, isError, error} = useQuery({
         queryKey: [...queryKeys.right_sidebar],
         queryFn: () => {
@@ -39,21 +39,21 @@ export default function RightAsideBar() {
     <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' && <RecentChecks data={recentData} isFetching={isFetching} isError={isError} error={error} />}
-        {active == 'tickets' && <Tickets data={recentData} isFetching={isFetching} isError={isError} error={error} />}
-        {active == 'tasks' && <Tasks data={recentData} isFetching={isFetching} isError={isError} error={error} />}
+        {active === 'orders' && <RecentPaymentsBar data={recentData} isFetching={isFetching} isError={isError} error={error}  />}
+        {active === 'tickets' && <Tickets data={recentData} isFetching={isFetching} isError={isError} error={error}  />}
+        {active === 'tasks' && <Tasks data={recentData} isFetching={isFetching} isError={isError} error={error}  />}
     </div>
   )
 }

src/components/layouts/rightaside/Tasks.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 import Img from '../../../assets/user_avatar.jpg'
 import CustomCounter from '../../CustomCounter'
 
-export default function Tasks() {
+export default function Tasks({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'>Support Tasks</p>
+                <p className='text-base text-white-body font-bold'>Recent System Checks </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>
@@ -56,7 +56,7 @@ export default function Tasks() {
                 <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 Image" />
+                            <img src={Img} className='w-8' alt="Order" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -65,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 Image" />
+                            <img src={Img} className='w-8' alt="Order" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -74,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 Image" />
+                            <img src={Img} className='w-8' alt="Order" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>
@@ -83,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 Image" />
+                            <img src={Img} className='w-8' alt="Order" />
                         </div>
                         <div className='flex-col'>
                             <p className='text-base font-bold text-white-body'>Project Briefing</p>

src/components/layouts/rightaside/Tickets.jsx

@@ -2,96 +2,96 @@ import React from 'react'
 import Img from '../../../assets/user_avatar.jpg'
 import CustomCounter from '../../CustomCounter'
 
-export default function Tickets() {
+export default function Tickets({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 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'>
-                    <CustomCounter targetNumber={18} timeInSeconds={1} />
-                    </p>
-                    <p className='text-sm text-slate-500'>Pending</p>
+            <p className='text-base text-white-body font-bold'>Recent Deployments</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>
-                <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'>
-                    <CustomCounter targetNumber={2} timeInSeconds={1} />
-                    </p>
-                    <p className='text-sm text-slate-500'>Offers</p>
+                :
+                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'>
+                        <CustomCounter targetNumber={18} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Pending</p>
+                    </div>
+                    <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'>
+                        <CustomCounter targetNumber={2} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Offers</p>
+                    </div>
+                    <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'>
+                        <CustomCounter targetNumber={3} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Created</p>
+                    </div>
+                    <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'>
+                        <CustomCounter targetNumber={1} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Rejected</p>
+                    </div>
                 </div>
-                <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'>
-                    <CustomCounter targetNumber={3} timeInSeconds={1} />
-                    </p>
-                    <p className='text-sm text-slate-500'>Created</p>
-                </div>
-                <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'>
-                    <CustomCounter targetNumber={1} timeInSeconds={1} />
-                    </p>
-                    <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 Image" />
+                {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" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
                     </div>
-                    <div className='flex-col'>
-                        <p className='text-base font-bold text-white-body'>Project Briefing</p>
-                        <p className='text-sm text-slate-500'>Project Manager</p>
+                    <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" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </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" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </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" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
                     </div>
                 </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 Image" />
-                    </div>
-                    <div className='flex-col'>
-                        <p className='text-base font-bold text-white-body'>Project Briefing</p>
-                        <p className='text-sm text-slate-500'>Project Manager</p>
-                    </div>
-                </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 Image" />
-                    </div>
-                    <div className='flex-col'>
-                        <p className='text-base font-bold text-white-body'>Project Briefing</p>
-                        <p className='text-sm text-slate-500'>Project Manager</p>
-                    </div>
-                </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 Image" />
-                    </div>
-                    <div className='flex-col'>
-                        <p className='text-base font-bold text-white-body'>Project Briefing</p>
-                        <p className='text-sm text-slate-500'>Project Manager</p>
-                    </div>
-                </div>
-            </div>
-            }
+                }
         </div>
     </div>
   )

src/components/loan_charges/BillingsCom.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { 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 Avatar from '../../assets/user_avatar.jpg'
+// import formatNumber from '../../helpers/formatNumber'
+// import Avatar from '../../assets/user_avatar.jpg'
 
 
 export default function BillingsCom() {

src/components/loanscom/LoansCom.jsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react'
+import {useEffect, useState} from 'react'
 import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-import { getLoans } from '../../services/siteServices'
+import {getLoans} from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import Avatar from '../../assets/user_avatar.jpg'
 import RouteLinks from '../../RouteLinks';
@@ -13,22 +13,22 @@ import formatNumber from '../../helpers/formatNumber'
 export default function LoansCom() {
 
     const [page, setPage] = useState(1)
-    const [allLoans, setAllLoans] = useState({loading:true, error:'', data:{}})
+    const [allLoans, setAllLoans] = useState({loading: true, error: '', data: {}})
 
     const [willFilter, setWillFilter] = useState(false)
     const [filter, setFilter] = useState({type: '', id: ''})
-    const handleFilter = ({target:{name, value}}) => {
-        setFilter(prev => ({...prev, [name]:value}))
+    const handleFilter = ({target: {name, value}}) => {
+        setFilter(prev => ({...prev, [name]: value}))
     }
 
     const handleFilterByParams = () => {
-        if(filter.type && !filter.id){
+        if (filter.type && !filter.id) {
             return
-        }else if(!filter.type){
+        } else if (!filter.type) {
             setPage(1)
             setWillFilter(prev => !prev)
             setFilter({type: '', id: ''})
-        }else{
+        } else {
             setPage(1)
             setWillFilter(prev => !prev)
         }
@@ -39,134 +39,151 @@ export default function LoansCom() {
     const isFetching = allLoans?.loading
     const isError = allLoans?.error
 
-    useEffect(()=>{
-        setAllLoans(prev => ({...prev, loading:true}))
+    useEffect(() => {
+        setAllLoans(prev => ({...prev, loading: true}))
         const payload = filter?.type ? {[filter?.type]: filter.id} : {}
         getLoans({...payload, page}).then(res => {
-            if(res?.status != 200){
-                setAllLoans(prev => ({...prev, loading:false}))
+            if (res?.status !== 200) {
+                setAllLoans(prev => ({...prev, loading: false}))
                 return
             }
-            setAllLoans({loading:false, error:'', data:res?.data})
+            setAllLoans({loading: false, error: '', data: res?.data})
         }).catch(err => {
-            setAllLoans({loading:false, error:'error occurred', data:{}})
+            setAllLoans({loading: false, error: 'error occurred', data: {}})
             console.log('ERR', err)
         })
-    },[page, willFilter])
+    }, [page, willFilter])
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
+            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']}/>
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                { isError ?
+                {isError ?
                     <p className='text-red-500'>{allLoans?.error}</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='transaction_id'>Transaction ID</option>
-                                <option value='account_id'>Account ID</option>
-                            </select>
+                    :
+                    <>
+                        {/* 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='transaction_id'>Transaction ID</option>
+                                    <option value='account_id'>Account 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>
-                        <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 */}
+                        {/* end of filter section */}
 
-                    <TablePaginatedWrapper data={loans} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
-                    {({ data }) => (
-                        <>
-                            <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 text-right">
-                                            Loan Amount
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Product/Tenor
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Repay/Install Amount
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Added
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Action
-                                        </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={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>
-                                                </div>  
-                                                </div>
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.product_id)}</div>
-                                                    <div className="font-normal text-gray-500">{item?.tenor} days</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div>
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</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'>
-                                                        <Link to={RouteLinks.transaction_details_page} state={{transactionID: item?.transaction_id}}>
-                                                            <Icons name='eye' />
-                                                        </Link>
-                                                    </div>
-                                                </div>
-                                            </td>
+                        <TablePaginatedWrapper data={loans} isFetching={isFetching} setPage={setPage}
+                                               itemsPerPage={pagination?.limit} pagination={pagination}>
+                            {({data}) => (
+                                <>
+                                    <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 text-right">
+                                                Loan Amount
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Product/Tenor
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Repay/Install Amount
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Added
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Action
+                                            </th>
                                         </tr>
-                                    ))
-                                    :
-                                    <tr className="py-2 border-t border-dashed border-slate-300">
-                                        <td className="px-3 py-2" colSpan={6}>
-                                            <div className="flex justify-center items-center">
-                                                No Record Found
-                                            </div>
-                                        </td>
-                                    </tr>
-                                    }
-                                </tbody>
-                            </table>
-                        </>
-                    )}
-                    </TablePaginatedWrapper>
-                </>
+                                        </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={Avatar} alt="Jese"/>
+                                                            <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>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
+                                                            <div
+                                                                className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div
+                                                                className="font-normal text-gray-500">{formatNumber(item?.product_id)}</div>
+                                                            <div className="font-normal text-gray-500">{item?.tenor} days
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div
+                                                                className="font-normal text-gray-500">{formatNumber(item?.repayment_amount)}</div>
+                                                            <div
+                                                                className="font-normal text-gray-500">{formatNumber(item?.installment_amount)}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div
+                                                                className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</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'>
+                                                                <Link to={RouteLinks.transaction_details_page}
+                                                                      state={{transactionID: item?.transaction_id}}>
+                                                                    <Icons name='eye'/>
+                                                                </Link>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={6}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
                 }
             </div>
         </div>

src/components/products/ProductsCom.jsx

@@ -6,10 +6,11 @@ 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 getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+// import formatNumber from '../../helpers/formatNumber'
+// 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() {
@@ -49,6 +50,7 @@ export default function ProductsCom() {
     })
     const productsData = data?.data?.products // PRODUCTS LIST
     const pagination = data?.data?.pagination
+    // console.log('DATA', data?.data)
 
     return (
         <div className='w-full flex flex-col gap-8'>
@@ -65,7 +67,7 @@ export default function ProductsCom() {
                         <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>
+                                <option value='name'>Name</option>
                             </select>
                         </div>
                         <div className='w-full sm:max-w-48'>
@@ -90,9 +92,6 @@ export default function ProductsCom() {
                                         <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>
@@ -103,7 +102,6 @@ export default function ProductsCom() {
                                         <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>  
@@ -119,12 +117,6 @@ export default function ProductsCom() {
                                                     <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>

src/components/recent_signup/RecentSignup.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
 
@@ -6,12 +6,13 @@ 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'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+// import formatNumber from '../../helpers/formatNumber'
+// import formatNumber from '../../helpers/formatNumber'
+// import Avatar from '../../assets/user_avatar.jpg'
 
 
-export default function RecentSignupCom() {
+export default function RecentSignup() {
 
     const [page, setPage] = useState(1)
     const [filter, setFilter] = useState({type: '', id: ''})
@@ -46,12 +47,13 @@ export default function RecentSignupCom() {
         },
         staleTime: 0 //0 mins
     })
-    const recentSignupData = data?.data?.payments // RECENT SIGNUP LIST
+    const recentSignupData = data?.data?.payments // BILLINGS LIST
     const pagination = data?.data?.pagination
+    // console.log('DATA', data?.data)
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Billings' paths={['Dashboard', 'Billings']} />
+            <BreadcrumbCom title='Recent Signup' paths={['Dashboard', 'Recent Acc']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                 { isError ?
@@ -64,7 +66,7 @@ export default function RecentSignupCom() {
                         <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>
+                                <option value='name'>Name</option>
                             </select>
                         </div>
                         <div className='w-full sm:max-w-48'>
@@ -86,8 +88,8 @@ export default function RecentSignupCom() {
                                         <th scope="col" className="px-2">
                                             Option Name
                                         </th>
-                                        <th scope="col" className="px-2">
-                                            Member ID
+                                        <th scope="col" className="px-2 text-right">
+                                            Amount
                                         </th>
                                         <th scope="col" className="px-2 text-right">
                                             Status
@@ -109,9 +111,10 @@ export default function RecentSignupCom() {
                                                     <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>
+                                             <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">

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 image" />
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese" />
                                                 <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">{isFetching ? '----' : pagination?.total_pages}</span>
+              {isFetching ? '----' : `page ${pagination?.current_page || 0}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{isFetching ? '----' : pagination?.total_pages || 0}</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 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'
@@ -26,15 +26,15 @@ export default function LoanChargeDetails({transactionID}) {
     return (
         <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
             <p className='pb-4 font-bold text-base'>Loan Charges</p>
-            {isFetching ? 
-            <>
-                <p className='text-slate-800'>Loading...</p>
-            </>
-            : isError ?
-                <p className='text-red-500'>{error.message}</p>
-            :
-                <table className="py-2 w-full text-sm">
-                    <thead className="py-2 text-sm text-slate-500 text-left">
+            {isFetching ?
+                <>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                    :
+                    <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">
                                 Name
@@ -52,51 +52,53 @@ export default function LoanChargeDetails({transactionID}) {
                                 Action
                             </th> */}
                         </tr>
-                    </thead>
-                    <tbody>
+                        </thead>
+                        <tbody>
                         {(loanCharges && loanCharges.length > 0) ? loanCharges?.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={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> */}
-                                        <div className="font-normal text-gray-500">{item?.loan_id} : {item?.code}</div>
-                                    </div>  
-                                    </div>
-                                </td>
-                                <td className="px-2">
-                                    <div className="text-right">
-                                        {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
-                                        <div className="font-normal text-gray-500">{formatNumber(item?.amount)}</div>
-                                    </div> 
-                                </td>
-                                <td className="px-2">
-                                    <div className="text-right">
-                                        <div className="font-normal text-gray-500">{item?.created_at ? getDateFromDateString(item?.created_at) : 'Not available'}</div>
-                                    </div> 
-                                </td>
-                                {/* <td className="px-2 text-right">
+                                <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"/>
+                                            <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> */}
+                                                <div
+                                                    className="font-normal text-gray-500">{item?.loan_id} : {item?.code}</div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-right">
+                                            {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
+                                            <div className="font-normal text-gray-500">{formatNumber(item?.amount)}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-right">
+                                            <div
+                                                className="font-normal text-gray-500">{item?.created_at ? getDateFromDateString(item?.created_at) : 'Not available'}</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={3}>
+                                    <div className="flex justify-center items-center">
+                                        No Record Found
+                                    </div>
+                                </td>
                             </tr>
-                        ))
-                        :
-                        <tr className="py-2 border-t border-dashed border-slate-300">
-                            <td className="px-3 py-2" colSpan={3}>
-                                <div className="flex justify-center items-center">
-                                    No Record Found
-                                </div>
-                            </td>
-                        </tr>
                         }
-                    </tbody>
-                </table>
+                        </tbody>
+                    </table>
             }
         </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 image" />
+                                    <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese" />
                                     <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 image" />
+                                    <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese" />
                                     <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 { useEffect, useState } from 'react'
-import {Link} from 'react-router-dom'
+import { useState } from 'react'
+// 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 RouteLinks from '../../RouteLinks';
+// import localImgLoader from '../../helpers/localImageLoader';
+// import RouteLinks from '../../RouteLinks';
 
 export default function SubscriptionsCom() {
 

src/components/users_admin/UsersAdmin.jsx

@@ -6,13 +6,13 @@ 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 getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
 // import formatNumber from '../../helpers/formatNumber'
 // import Avatar from '../../assets/user_avatar.jpg'
-// import localImgLoader from '../../helpers/localImageLoader'
 
 
-export default function UsersCom() {
+export default function UsersAdmin() {
 
     const [page, setPage] = useState(1)
     const [filter, setFilter] = useState({type: '', id: ''})
@@ -36,7 +36,7 @@ export default function UsersCom() {
     }
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.users, page, willFilter],
+        queryKey: [...queryKeys.users_admin, page, willFilter],
         queryFn: () => {
             const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
             const reqData = {
@@ -47,13 +47,13 @@ export default function UsersCom() {
         },
         staleTime: 0 //0 mins
     })
-    const usersData = data?.data?.users // USERS LIST
+    const usersData = data?.data?.payments // BILLINGS LIST
     const pagination = data?.data?.pagination
     // console.log('DATA', data?.data)
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Users' paths={['Dashboard', 'Users']} />
+            <BreadcrumbCom title='Users Admin' paths={['Dashboard', 'Admin']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                 { isError ?
@@ -66,7 +66,7 @@ export default function UsersCom() {
                         <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>
+                                <option value='name'>Name</option>
                             </select>
                         </div>
                         <div className='w-full sm:max-w-48'>
@@ -81,67 +81,86 @@ export default function UsersCom() {
                         <>
                             <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">
-                                            Email
-                                        </th>
-                                        {/* <th scope="col" className="px-2 text-right">
-                                            Amount
-                                        </th> */}
-                                        <th scope="col" className="px-2 text-right">
-                                            Status
-                                        </th>
-                                    </tr>
+                                <tr>
+                                    <th scope="col" className="px-2 py-2">
+                                        Name
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Interest Rate
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Insurance Rate
+                                    </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>
                                 <tbody>
-                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                {(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>  
+                                                    {/* <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese" /> */}
+                                                    <div className="text-left">
+                                                        <div className="text-base font-semibold">{item?.product_id || ''}</div>
+                                                        {/* <div className="font-normal text-gray-500 line-clamp-1">{item?.description}</div> */}
+                                                    </div>
                                                 </div>
                                             </td>
                                             <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.name}</div>
-                                                </div> 
+                                                <div className="text-right">
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.interest_rate)}</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> */}
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.insurance_rate)}</div>
+                                                </div>
+                                            </td>
                                             <td className="px-2">
                                                 <div className="text-right">
-                                                    <div className="text-base font-semibold">{item?.status}</div>
-                                                </div> 
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.management_rate)}</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={4}>
+                                        <td className="px-3 py-2" colSpan={7}>
                                             <div className="flex justify-center items-center">
                                                 No Record Found
                                             </div>
                                         </td>
                                     </tr>
-                                    }
+                                }
                                 </tbody>
                             </table>
                         </>

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/RecentSignupPage.jsx

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

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/UsersAdminPage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import UsersAdmin from "../components/users_admin/UsersAdmin";
+
+export default function UsersAdminPage() {
+    return (
+        <UsersAdmin />
+    )
+}

src/pages/UsersPage.jsx

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

src/services/queryKeys.js

@@ -5,6 +5,7 @@ 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'],
@@ -13,10 +14,10 @@ const queryKeys = {
     // new
     subscriptions: ['subscriptions'],
     billings: ['billings'],
-    products: ['products'],
-    users: ['users'],
     right_sidebar: ['right_sidebar'],
     recent_signup: ['recent_signup'],
+    products: ['products'],
+    users_admin: ['users_admin'],
 }
 
 export default queryKeys

src/services/siteServices.js

@@ -74,30 +74,31 @@ 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
+// FUNCTION TO GET RIGHT SIDEBAR DATA
 export const getRightSidebar = (reqData) => {
     const postData = { ...reqData }
     return getAuxEnd(`/right-sidebar`, postData)
 }
 
-// FUNCTION TO GET RECNET SIGNUP LIST TABLE
+// FUNCTION TO GET RECENT SIGNUP DATA
 export const getRecentSignup = (reqData) => {
     const postData = { ...reqData }
     return getAuxEnd(`/recent-signup`, postData)
 }
 
+// FUNCTION TO GET PRODUCTS DATA
+export const getProducts = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/products`, postData)
+}
+
+// FUNCTION TO GET USERS DATA
+export const getUsers = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/users`, postData)
+}
+
+
 
 
 
@@ -116,6 +117,12 @@ 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 }