fixed endpoint

.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,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="digiFi global back office systems"
+      content="MERMS BackOffice Systems"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

src/App.js

@@ -4,7 +4,7 @@ import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
 
 import SiteRoutes from './SiteRoutes';
 import LogoutModal from './components/layouts/LogoutModal';
-import { generalLayoutContext } from './context/GeneralLayoutContext';
+import { GeneralLayoutContext } from './context/GeneralLayoutContext';
 
 import './App.css';
 
@@ -24,7 +24,7 @@ function App() {
 
   const {pathname} = useLocation()
 
-  const {logoutModal, setLogoutModal} = generalLayoutContext()
+  const {logoutModal, setLogoutModal} = GeneralLayoutContext()
 
   useEffect(()=>{
     window.scrollTo(0,0)

src/RouteLinks.js

@@ -2,12 +2,18 @@ const RouteLinks = {
     loginPage: '/auth/login',
     homePage: '/',
     customerPage: '/customer',
+    accountDetails: '/account-view/*',
+    subscriptionDetails: '/subscription-view/*',
     subscriptions: '/subscriptions',
     billings: '/billings',
-    
+    recentSignup: '/recent-signup',
     loansPage: '/loans',
     transactionsPage: '/transactions',
-    offers: '/offers',
+    countrySettings: '/country',
+    products: '/products',
+    usersAdmin: '/users-admin',
+    productTemplates: '/products-template',
+    customTemplates: '/custom-template',
     transaction_details_page: '/transaction/details',
     errorPage: '*',
 }

src/SiteRoutes.jsx

@@ -1,5 +1,5 @@
-import { lazy, Suspense } from 'react'
-import { Routes, Route } from 'react-router-dom'
+import {Suspense} from 'react'
+import {Routes, Route} from 'react-router-dom'
 import RouteLinks from './RouteLinks'
 
 import UserExist from './authorization/UserExist'
@@ -10,40 +10,56 @@ 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 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 OffersPage from './pages/OffersPage' // LOAN OFFERS PAGE
-import ErrorPage from './pages/ErrorPage' // ERROR PAGE
+import TransactionDetailsPage from './pages/TransactionDetailsPage'
+import AccountDetailsPage from "./pages/AccountDetailsPage";
+import ProductTemplatePage from "./pages/ProductTemplatePage";
+import CustomTemplatePage from "./pages/CustomTemplatePage";
+import SubscriptionDetailsPage from "./pages/SubscriptionDetailsPage";
+import CountrySettingsPage from "./pages/CountrySettingsPage"; // TRANSACTION DETAILS PAGE
 
 
 // const Home = lazy(() => import('./pages/Home'));
 
 export default function SiteRoutes() {
-  return (
-    <Routes>
-      <Route path={RouteLinks.loginPage} element={<LoginPage />} /> {`*/LOGIN PAGE*/`}
+    return (
+        <Routes>
+            <Route path={RouteLinks.loginPage} element={<LoginPage/>}/> {`*/LOGIN PAGE*/`}
 
-      <Route element={<UserExist />}>
-        <Route path={RouteLinks.homePage} element={<HomePage />} /> {`*/HOME 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.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
-        <Route path={RouteLinks.transaction_details_page} element={<TransactionDetailsPage />} /> {`*/TRANSACTION PAGE*/`}
-        <Route path={RouteLinks.offers} element={<OffersPage />} /> {`*/LOAN OFFERS PAGE*/`}
-      </Route>
+            <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.accountDetails} element={<AccountDetailsPage/>}/> {`*/CUSTOMER PAGE*/`}
+                <Route path={RouteLinks.billings} element={<BillingsPage/>}/> {`*/BILLINGS PAGE*/`}
+                <Route path={RouteLinks.products} element={<ProductsPage/>}/> {`*/PRODUCTS PAGE*/`}
+                <Route path={RouteLinks.usersAdmin} element={<UsersAdminPage/>}/> {`*/ADMIN USERS PAGE*/`}
 
-      {/* ERROR PAGE */}
-      <Route 
-        path={RouteLinks.errorPage} // error page
-        element={
-          <Suspense fallback={<PageLoader />}>
-            <ErrorPage />
-          </Suspense>
-        } 
-      />
-    </Routes>
-  )
+                <Route path={RouteLinks.countrySettings} element={<CountrySettingsPage/>}/> {`*/PRODUCTS TEMPLATE PAGE*/`}
+                <Route path={RouteLinks.productTemplates} element={<ProductTemplatePage/>}/> {`*/PRODUCTS TEMPLATE PAGE*/`}
+                <Route path={RouteLinks.customTemplates} element={<CustomTemplatePage/>}/> {`*/CUSTOM TEMPLATES PAGE*/`}
+
+                <Route path={RouteLinks.loansPage} element={<LoansPage/>}/> {`*/LOANS PAGE*/`}
+                <Route path={RouteLinks.transaction_details_page}
+                       element={<TransactionDetailsPage/>}/> {`*/TRANSACTION PAGE*/`}
+                <Route path={RouteLinks.subscriptionDetails} element={<SubscriptionDetailsPage/>} />
+            </Route>
+
+            {/* ERROR PAGE */}
+            <Route
+                path={RouteLinks.errorPage} // error page
+                element={
+                    <Suspense fallback={<PageLoader/>}>
+                        <ErrorPage/>
+                    </Suspense>
+                }
+            />
+        </Routes>
+    )
 }

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/account_view/AccountProfileView.jsx

@@ -0,0 +1,61 @@
+export default function AccountProfileView({profile}) {
+    return <>
+            <div className="pb-5">
+                <div className="flex flex-col gap-1">
+                    <div className="w-full">
+                        <h4 className="font-semibold text-lg">Account Profile</h4>
+                    </div>
+                    <div className="w-full overflow-x-auto">
+                        <>
+                            <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                <tr>
+    
+                                    <th scope="col" className="px-2 py-2">
+                                        Member ID
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Practice/specialization
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        URL Name
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {(profile && Object.keys(profile).length > 0) ? 
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{profile?.member_id}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">Practice: {profile?.practice}</div>
+                                                <div className="text-base font-semibold">Specialization: {profile?.specialization}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{profile?.url_name}</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>
+                        </>
+                    </div>
+                </div>
+            </div>
+        </>
+}

src/components/account_view/AccountViewCom.jsx

@@ -0,0 +1,70 @@
+import {useEffect, useState} from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import {useLocation, useNavigate, Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import RouteLinks from '../../RouteLinks'
+import { getAccountView } from '../../services/siteServices'
+import queryKeys from '../../services/queryKeys'
+import CustomerAccountView from "./CustomerAccountView";
+import AccountProfileView from "./AccountProfileView";
+import CustomerSubscriptionsView from "./CustomerSubscriptionsView";
+import CustomerPaymentsView from "./CustomerPaymentsView";
+
+export default function AccountViewCom() {
+
+    const {state} = useLocation()
+    const navigate = useNavigate()
+
+    useEffect(()=>{
+        if(!state?.memberUID){
+            navigate(RouteLinks.homePage, {replace: true})
+        }
+    },[])
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.account_view,
+        queryFn: () => {
+            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                member_uid: state?.memberUID
+                // page,
+                // ...filterData
+            }
+            return getAccountView(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const accountsViewData = data?.data // ACCOUNT VIEW DATA
+    const account_info = accountsViewData?.account
+    const account_profile = accountsViewData?.account_profile
+    const subscriptions = accountsViewData?.subscriptions
+    const payments = accountsViewData?.payments
+    // console.log('DATA', payments, subscriptions)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title={`Account View [${state?.memberUID}]`} paths={['Dashboard', 'Account View']}/>
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                {isFetching ? 
+                <>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                :
+                        <>
+                            <CustomerAccountView accountInfo={account_info} />
+                            <AccountProfileView profile={account_profile} />
+                            <CustomerSubscriptionsView subscriptions={subscriptions} />
+                            <CustomerPaymentsView payments={payments} />
+                        </>
+
+                }
+
+            </div>
+        </div>
+    )
+}

src/components/account_view/CustomerAccountView.jsx

@@ -0,0 +1,93 @@
+import {Link} from 'react-router-dom'
+import Icons from "../Icons";
+
+export default function CustomerAccountView({accountInfo}) {
+    return <>
+        <div className="pb-5">
+            <div className="flex flex-col gap-1">
+                <div className="w-full">
+                    <h4 className="font-semibold text-lg">Account Info</h4>
+                </div>
+                <div className="w-full overflow-x-auto">
+                    <>
+                        <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
+                            <thead className="py-2 text-sm text-slate-500 text-left">
+                            <tr>
+
+                                <th scope="col" className="px-2 py-2">
+                                    Firstname
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Lastname
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Username
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Email
+                                </th>
+
+                                <th scope="col" className="px-2 text-right">
+                                    Action
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {(accountInfo && Object.keys(accountInfo).length > 0) ? 
+                                <tr className="py-2 border-t border-dashed border-slate-300">
+                                    {/*<td className="px-2 py-2">*/}
+                                    {/*    <div className="text-left">*/}
+                                    {/*        <div className="text-base font-semibold">{1}</div>*/}
+                                    {/*    </div>*/}
+                                    {/*</td>*/}
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{accountInfo?.firstname}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{accountInfo?.lastname}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{accountInfo?.username}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{accountInfo?.email}</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={`/subscription-view/63554d40-9ba1-4afe-80c2-ca147236f7ee`}
+                                                >
+                                                    <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>
+                    </>
+                </div>
+            </div>
+        </div>
+    </>
+}

src/components/account_view/CustomerPaymentsView.jsx

@@ -0,0 +1,77 @@
+
+export default function CustomerPaymentsView({payments}) {
+    return <>
+        <div className="pb-5">
+            <div className="flex flex-col gap-1">
+                <div className="w-full">
+                    <h4 className="font-semibold text-lg">Payments</h4>
+                </div>
+                <div className="w-full overflow-x-auto">
+                    <>
+                        <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
+                            <thead className="py-2 text-sm text-slate-500 text-left">
+                            <tr>
+                                <th scope="col" className="px-2 py-2">
+                                    #
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Added
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Option Name
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Amount
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Currency
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {(payments && payments.length > 0) ? payments?.map((item, index) => (
+                                    <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-2 py-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{index+1}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{item?.added}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{item?.option_name}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{item?.amount}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">Dollars</div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))
+                                :
+                                <tr className="py-2 border-t border-dashed border-slate-300">
+                                    <td className="px-3 py-2" colSpan={4}>
+                                        <div className="flex justify-center items-center">
+                                            No Record Found
+                                        </div>
+                                    </td>
+                                </tr>
+                            }
+                            </tbody>
+                        </table>
+                    </>
+                </div>
+            </div>
+        </div>
+    </>
+}

src/components/account_view/CustomerSubscriptionsView.jsx

@@ -0,0 +1,121 @@
+import getDateTimeFromDateString from "../../helpers/getDateTimeFromDateString";
+import RouteLinks from "../../RouteLinks";
+import Icons from "../Icons";
+import {Link} from 'react-router-dom'
+
+export default function CustomerSubscriptionsView({subscriptions}) {
+    return <>
+        <div className="pb-5">
+            <div className="flex flex-col gap-1">
+                <div className="w-full">
+                    <h4 className="font-semibold text-lg">Subscriptions</h4>
+                </div>
+                <div className="w-full overflow-x-auto">
+                    <>
+                        <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
+                            <thead className="py-2 text-sm text-slate-500 text-left">
+                            <tr>
+                                <th scope="col" className="px-2 py-2">
+                                    #
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Added/Updated
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Product/Server
+                                </th>
+                                <th scope="col" className="px-2">
+                                    URL / EXT/ Templates
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Status
+                                </th>
+                                <th scope="col" className="px-2 text-right">
+                                    Action
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {(subscriptions && subscriptions.length > 0) ? subscriptions?.map((item, index) => (
+                                    <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-2 py-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{index + 1}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div
+                                                    className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
+                                                <div
+                                                    className="text-base font-semibold">{getDateTimeFromDateString(item?.updated)}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{item?.product_id}</div>
+                                                <div><a href={`http://${item?.primary_server}:${item?.provision_port}`}
+                                                        target='_blank'
+                                                        rel="noreferrer">{item?.primary_server}:{item?.provision_port}</a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base">
+                                                    <span className="badge badge-pill badge-primary-inverse">
+                                                     <a href={`https://${item?.internal_url}`}
+                                                        target='_blank'
+                                                        rel="noreferrer">{item?.internal_url}</a>
+                                                    </span>
+
+                                                    <br/>
+                                                    <span className="badge badge-warning">
+                                                    <a href={`https://${item?.external_url}`}
+                                                       target='_blank'
+                                                       rel="noreferrer">{item?.external_url}</a>
+                                                    </span>
+
+                                                    <br/>
+                                                    <span>Template :</span> {item?.product_template}
+                                                    <br/><span>Custom :</span> {item?.custom_template}
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-right">
+                                                <div className="text-base font-semibold">{item?.status}</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={`/subscription-view/${item?.subscription_uid}`} state={{
+                                                        customerID: item?.id,
+                                                        subscriptionUID: item?.subscription_uid
+                                                    }}>
+                                                        <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>
+                    </>
+                </div>
+            </div>
+        </div>
+    </>
+}

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"),
-  password: Yup.string().required("password is required").min(6, 'must be upto 6 characters').max(12, 'must not exceed 12 characters'),
+    username: Yup.string().required("username is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'),
+    password: Yup.string().required("password is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'),
 });
 
 export default function LoginCom() {
 
-  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/country/CountrySettings.jsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+import BreadcrumbCom from "../breadcrumb/BreadcrumbCom";
+import { getCountry } from "../../services/siteServices";
+import TableWrapper from "../tableWrapper/TableWrapper";
+
+export default function CountrySettings(){
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.country_list,
+        queryFn: () => {
+            const reqData = {
+                // page,
+                // ...filterData
+            }
+            return getCountry(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const countryData = data?.data?.country_data // COUNTRY LIST
+
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Country Settings' paths={['Dashboard', 'Country']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+
+                <>
+                    {isFetching ?
+                        <p className='text-slate-800'>Loading...</p>
+                    : isError ?
+                        <p className='text-red-500'>{error.message}</p>
+                    :
+                        <TableWrapper data={countryData} itemsPerPage={20}>
+                            {({ 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">
+                                                    Code
+                                                </th>
+                                                <th scope="col" className="px-8">
+                                                    Country
+                                                </th>
+                                                <th scope="col" className="px-2 text-right">
+                                                    Status
+                                                </th>
+                                                <th scope="col" className="px-2 text-right">
+                                                    Signup
+                                                </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="text-left">
+                                                        <div className="text-base font-semibold">{item?.code}</div>
+                                                    </div>
+                                                </td>
+                                                <td className="px-8">
+                                                    <div className="text-left">
+                                                        <div className="text-base font-semibold">{item?.description}</div>
+                                                    </div>
+                                                </td>
+                                                <td className="px-8">
+                                                    <div className="text-right">
+                                                        <div className="text-base font-semibold">{item?.status}</div>
+                                                    </div>
+                                                </td>
+                                                <td className="px-8">
+                                                    <div className="text-right">
+                                                        <div className="text-base font-semibold">{item?.signup}</div>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                            ))
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={4}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TableWrapper>
+                    }
+                </>
+
+            </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,123 @@ 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={`/account-view/${item?.member_uid}`}
+                                                                      state={{customerID: item?.id, memberUID: item?.member_uid}}>
+                                                                    <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

@@ -1,13 +1,13 @@
 import React from 'react'
-import  {Link} from 'react-router-dom'
-import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+import {useQuery} from "@tanstack/react-query";
 import BreadcrumbCom from '../../components/breadcrumb/BreadcrumbCom'
 import CustomCounter from '../../components/CustomCounter'
 import Icons from '../../components/Icons'
 import formatNumber from '../../helpers/formatNumber'
 
 import queryKeys from '../../services/queryKeys'
-import { getDashData } from '../../services/siteServices'
+import {getDashData} from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 import localImgLoader from '../../helpers/localImageLoader';
@@ -15,174 +15,188 @@ import RouteLinks from '../../RouteLinks';
 
 export default function HomeCom() {
 
-  const {data, isFetching, isError, error} = useQuery({
-    queryKey: queryKeys.dashboard,
-    queryFn: () => getDashData(),
-  })
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.dashboard,
+        queryFn: () => getDashData(),
+    })
 
-  const dashData = data?.data // DASHBOARD DATA
+    const dashData = data?.data // DASHBOARD DATA
 
-  // console.log('dashData', dashData)
-  // loans, payments, recent_transactions [], request_summary
+    // console.log('dashData', dashData)
+    // loans, payments, recent_transactions [], request_summary
 
-  return (
-    <div className='w-full flex flex-col gap-8'>
-      <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']}/>
 
-      {(isFetching || isError) ?
-      <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-        {isError ? <p className='text-red-500'>{error.message}</p> : <p className='text-slate-800'>Loading...</p>}
-      </div>
-      :
-      <div className='grid grid-cols-1 gap-8'>
-        <div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
-          <div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='text-base sm:text-lg font-bold hover:text-primary'>Subscriptions</p>
-            <div className='flex flex-wrap gap-2 items-end font-bold'>
-              {/* <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>{dashData?.loans?.currency_text}</span><CustomCounter targetNumber={dashData?.loans?.value} timeInSeconds='1' /></p> */}
-              <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>
+            {(isFetching || isError) ?
+                <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                    {isError ? <p className='text-red-500'>{error.message}</p> :
+                        <p className='text-slate-800'>Loading...</p>}
+                </div>
+                :
+                <div className='grid grid-cols-1 gap-8'>
+                    <div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
+                        <div
+                            className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
+                            <p className='text-base sm:text-lg font-bold hover:text-primary'>Subscriptions</p>
+                            <div className='flex flex-wrap gap-2 items-end font-bold'>
+                                {/* <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>{dashData?.loans?.currency_text}</span><CustomCounter targetNumber={dashData?.loans?.value} timeInSeconds='1' /></p> */}
+                                <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>
                 {/*{dashData?.loans?.currency_text}*/}
-                </span><CustomCounter targetNumber={formatNumber(dashData?.loans?.value)} timeInSeconds='1' />
-              </p>
-              <p className='sm:text-[13.9px]'>{dashData?.loans?.text}</p>
-            </div>
-          </div>
-          <div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='text-base sm:text-lg font-bold hover:text-primary'>Payments</p>
-            <div className='flex flex-wrap gap-2 items-end font-bold'>
-              <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>
+                </span><CustomCounter targetNumber={formatNumber(dashData?.signups?.value)} timeInSeconds='1'/>
+                                </p>
+                                <p className='sm:text-[13.9px]'>{dashData?.signups?.text.toString()}</p>
+                            </div>
+                        </div>
+                        <div
+                            className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
+                            <p className='text-base sm:text-lg font-bold hover:text-primary'>Payments</p>
+                            <div className='flex flex-wrap gap-2 items-end font-bold'>
+                                <p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>
                 {dashData?.payments?.currency_text}
-                </span><CustomCounter targetNumber={formatNumber(dashData?.payments?.value)} timeInSeconds='1' />
-              </p>
-              <p className='sm:text-[13.9px]'>{dashData?.payments?.text}</p>
-            </div>
-          </div>
-          <div className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>Provision Summary</p>
-            <div className='grid grid-cols-2 gap-4 font-bold'>
-              {
-              Object.values(dashData?.request_summary).map((item, index) => {
-                return (
-                  <div key={index} className='flex items-center gap-2'>
-                    <div className='min-w-10 min-h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
-                      <Icons name='sales' />
+                </span><CustomCounter targetNumber={formatNumber(dashData?.payments?.value)} timeInSeconds='1'/>
+                                </p>
+                                <p className='sm:text-[13.9px]'>{dashData?.payments?.text}</p>
+                            </div>
+                        </div>
+                        <div
+                            className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
+                            <p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>Provision Summary</p>
+                            <div className='grid grid-cols-2 gap-4 font-bold'>
+                                {
+                                    Object.values(dashData?.request_summary).map((item, index) => {
+                                        return (
+                                            <div key={index} className='flex items-center gap-2'>
+                                                <div
+                                                    className='min-w-10 min-h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                                                    <Icons name='sales'/>
+                                                </div>
+                                                <div>
+                                                    <p className='font-bold text-base'><CustomCounter
+                                                        targetNumber={Object.values(item)[0]} timeInSeconds='1'/></p>
+                                                    <p className='text-12 text-slate-500'>{Object.keys(item)[0]}</p>
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                                }
+                            </div>
+                        </div>
                     </div>
-                    <div>
-                      <p className='font-bold text-base'><CustomCounter targetNumber={Object.values(item)[0]} timeInSeconds='1' /></p>
-                      <p className='text-12 text-slate-500'>{Object.keys(item)[0]}</p>
-                    </div>
-                  </div>
-                )
-              })
-              }
-            </div>
-          </div>
-        </div>
 
-        <div className='w-full'>
-          <div className='box gap-8 bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-            <div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
-              <div className='flex flex-col gap-1 order-2 xs:order-1'>
-                <p className='font-bold text-base'>Recent Subscriptions</p>
-                {/* <p className='text-12'>Over 500 members</p> */}
-              </div>
-              {/* <div className='order-1 xs:order-2 text-left xs:text-right'>
+                    <div className='w-full'>
+                        <div className='box gap-8 bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                            <div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
+                                <div className='flex flex-col gap-1 order-2 xs:order-1'>
+                                    <p className='font-bold text-base'>Recent Subscriptions</p>
+                                    {/* <p className='text-12'>Over 500 members</p> */}
+                                </div>
+                                {/* <div className='order-1 xs:order-2 text-left xs:text-right'>
                 <button className='font-bold bg-white-aside text-black-body text-12 px-4 py-2 hover:text-primary hover:bg-sky-50 dark:hover:text-white dark:hover:bg-primary dark:text-white-body dark:bg-black-body rounded-md'>+ New Member</button>
               </div> */}
-            </div>
-
-              <table className="py-2 w-full text-sm">
-                  <thead className="py-2 text-sm text-slate-500 text-left font-semibold">
-                      <tr>
-                          <th scope="col" className="px-2 py-2">
-                              Subscription
-                          </th>
-                          <th scope="col" className="px-2">
-                              Status
-                          </th>
-                          <th scope="col" className="px-2">
-                              Activity
-                          </th>
-                          <th scope="col" className="px-2 text-right">
-                              Action
-                          </th>
-                      </tr>
-                  </thead>
-                  <tbody>
-                    {(dashData?.subscription && dashData?.subscription.length > 0) ? dashData?.subscription?.map((item, index) => {
-                      if(index <= 10) {
-                        return (
-                          <tr key={item?.id} 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/select_offer.png`)} alt="Icon" />
-                                  <div className="text-left">
-                                      <div className="text-base font-semibold">{item?.product_id}</div>
-                                      <div className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
-                                  </div>  
-                                </div>
-                              </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="font-normal text-gray-500">{item?.status}</div>
-                                </div> 
-                              </td>
-                              <td className="px-2">
-                                <div className="text-left">
-                                    <div className="font-normal text-gray-500">50%</div>
-                                    <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
-                                      <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
-                                    </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='edit' />
-                                  </div> */}
-                                  <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 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='trash' />
-                                  </div> */}
-                                </div>
-                              </td>
-                          </tr>
-                        )
-                      }
-                    }
-                    )
-                    :
-                    <tr className="py-2 border-t border-dashed border-slate-300">
-                        <td className="px-3 py-2" colSpan={4}>
-                            <div className="flex justify-center items-center">
-                                No Record Found
                             </div>
-                        </td>
-                    </tr>
-                    }
-                    <>
-                    {dashData?.subscription.length > 10 &&
-                      <tr className="py-2 border-t border-dashed text-right text-primary border-slate-300">
-                        <td className="px-3 py-2" colSpan={4}>
-                            <Link to={RouteLinks.transactionsPage} className="flex justify-end items-center">
-                                More ...
-                            </Link>
-                        </td>
-                      </tr>
-                    }
-                    </>
-                  </tbody>
-              </table>
 
-          </div>
+                            <table className="py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left font-semibold">
+                                <tr>
+                                    <th scope="col" className="px-2 py-2">
+                                        Subscription
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        URL
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Status
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Action
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {(dashData?.subscription && dashData?.subscription.length > 0) ? dashData?.subscription?.map((item, index) => {
+                                            if (index <= 10) {
+                                                return (
+                                                    <tr key={item?.id} 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/select_offer.png`)}
+                                                                     alt="Icon"/>
+                                                                <div className="text-left">
+                                                                    <div
+                                                                        className="text-base font-semibold">{item?.product_id}</div>
+                                                                    <div
+                                                                        className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
+                                                                </div>
+                                                            </div>
+                                                        </td>
+                                                        <td className="px-2">
+                                                            <div className="text-left">
+                                                                <div className="text-base font-semibold"><a
+                                                                    href={`https://${item?.internal_url}`} target='_blank'
+                                                                    rel="noreferrer">{item?.internal_url}</a></div>
+                                                                <div className="font-normal text-gray-500">
+                                                                    <a href={`http://${item?.primary_server}:${item?.provision_port}`}
+                                                                       target='_blank'
+                                                                       rel="noreferrer">
+                                                                        {item?.primary_server}:{item?.provision_port} </a></div>
+                                                            </div>
+                                                        </td>
+                                                        <td className="px-2">
+                                                            <div className="text-left">
+                                                                <div className="font-normal text-gray-500">{item?.status}</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={`/subscription-view/${item?.uid}`}
+                                                                          state={{subscriptionUID: item?.uid}}
+                                                                    >
+                                                                        <Icons name='eye'/>
+                                                                    </Link>
+                                                                </div>
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                )
+                                            } else {
+                                                return null
+                                            }
+                                        }
+                                    )
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={4}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                }
+                                <>
+                                    {dashData?.subscription.length > 10 &&
+                                        <tr className="py-2 border-t border-dashed text-right text-primary border-slate-300">
+                                            <td className="px-3 py-2" colSpan={4}>
+                                                <Link to={RouteLinks.transactionsPage}
+                                                      className="flex justify-end items-center">
+                                                    More ...
+                                                </Link>
+                                            </td>
+                                        </tr>
+                                    }
+                                </>
+                                </tbody>
+                            </table>
+
+                        </div>
+                    </div>
+                </div>
+            }
         </div>
-      </div>
-      }
-    </div>
-  )
+    )
 }

src/components/layouts/DashboardHeader.jsx

@@ -1,7 +1,7 @@
 import { LuSunDim } from "react-icons/lu";
 import { IoMdSunny } from "react-icons/io";
 
-import { generalLayoutContext } from "../../context/GeneralLayoutContext"
+import { GeneralLayoutContext } from "../../context/GeneralLayoutContext"
 
 import UserAvatar from '../../assets/user_avatar.jpg'
 import HandBurger from "./HandBurger"
@@ -15,7 +15,7 @@ export default function DashboardHeader() {
 
     // let {pathname} = useLocation()
 
-    const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
+    const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = GeneralLayoutContext()
 
   return (
     <>
@@ -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

@@ -1,7 +1,7 @@
 import { Outlet } from 'react-router-dom'
 
 import DashboardHeader from './DashboardHeader'
-import { generalLayoutContext } from '../../context/GeneralLayoutContext'
+import { GeneralLayoutContext } from '../../context/GeneralLayoutContext'
 import DashboardAside from './aside/DashboardAside'
 import RightAsideBar from './rightaside/RightAsideBar'
 
@@ -9,7 +9,7 @@ export default function DashboardLayout() {
 
     // let {pathname} = useLocation()
 
-  const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
+  const {showAsideDrawer, setShowAsideDrawer} = GeneralLayoutContext()
   
   return (
     <div className='w-full flex gap-10 relative m-auto h-screen overflow-x-hidden overflow-y-auto bg-white-body dark:bg-black-body p-8 pt-0 lg:p-10'>
@@ -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/_DashboardLayout.jsx

@@ -4,7 +4,6 @@ import { FaArrowRight, FaArrowLeft } from "react-icons/fa6";
 
 import DashboardAside from './aside/DashboardAside'
 import DashboardHeader from './DashboardHeader'
-import { generalLayoutContext } from '../../context/GeneralLayoutContext'
 
 export default function DashboardLayout() {
     const [shrinkAside, setShrinkAside] = useState(false)

src/components/layouts/aside/AsideLink.jsx

@@ -1,16 +1,16 @@
 import { Link, useLocation } from "react-router-dom"
 import Icons from "../../Icons"
-import { generalLayoutContext } from "../../../context/GeneralLayoutContext"
+import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext"
 
 export default function AsideLink({name, to, icon}) {
 
-    const {shrinkAside, setShowAsideDrawer} = generalLayoutContext()
+    const {shrinkAside, setShowAsideDrawer} = GeneralLayoutContext()
 
   const {pathname} = useLocation()
 
   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,17 +1,17 @@
 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";
+import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
 
 
 export default function AsideLinkWithSubLinks({name, icon, to, children, isOpen}) {
 
-    const {shrinkAside} = generalLayoutContext()
+    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,156 @@ 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: 'Active', status:1, icon: 'dot', to: RouteLinks.transactionsPage},
-        {name: 'Subscriptions', 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: 'Sub. Settings', status:1, icon: 'dot', to: RouteLinks.offers },
-            {name: 'Users Manager', status:1, icon: 'dot', to: RouteLinks.offers },
-            ]
-        },
+    {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: 'Country', status: 1, icon: 'dot', to: RouteLinks.countrySettings},
+                    {name: 'Product Settings', status: 1, icon: 'dot', to: RouteLinks.products},
+                    {name: 'Product Templates', status: 1, icon: 'dot', to: RouteLinks.productTemplates},
+                    {name: 'Custom Templates', status: 1, icon: 'dot', to: RouteLinks.customTemplates},
+                    {name: 'Admin Manager', status: 1, icon: 'dot', to: RouteLinks.usersAdmin},
+                ]
+            },
         ],
     },
 ]

src/components/layouts/aside/_DashboardAside.jsx

@@ -6,7 +6,7 @@ import MainBtn from "../../MainBtn";
 import AsideLink from "./AsideLink";
 import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
 import { useSelector } from "react-redux";
-import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
+import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
 import { TbLogout2 } from "react-icons/tb";
 
 
@@ -14,7 +14,7 @@ export default function DashboardAside({shrinkAside=false}) {
 
     const {pathname} = useLocation()
 
-    const {setLogoutModal} = generalLayoutContext()
+    const {setLogoutModal} = GeneralLayoutContext()
 
     const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
     const {role}= userDetails

src/components/layouts/aside/__DashboardAside.jsx

@@ -6,7 +6,7 @@ import MainBtn from "../../MainBtn";
 import AsideLink from "./AsideLink";
 import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
 import { useSelector } from "react-redux";
-import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
+import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
 import { TbLogout2 } from "react-icons/tb";
 
 
@@ -14,7 +14,7 @@ export default function DashboardAside({shrinkAside=false}) {
 
     const {pathname} = useLocation()
 
-    const {setLogoutModal} = generalLayoutContext()
+    const {setLogoutModal} = GeneralLayoutContext()
 
     const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
     const {role}= userDetails

src/components/layouts/rightaside/Orders.jsx

@@ -6,7 +6,7 @@ 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 Checks</p>
+                <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'>
@@ -39,7 +39,7 @@ export default function Orders() {
                 <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>
@@ -48,7 +48,7 @@ export default function Orders() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order 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>
@@ -57,7 +57,7 @@ export default function Orders() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order 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>
@@ -66,7 +66,7 @@ export default function Orders() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order 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/RecentPaymentsBar.jsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import Img from '../../../assets/user_avatar.jpg'
+import CustomCounter from '../../CustomCounter'
+
+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 Payments [7 days]</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'>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={5} timeInSeconds={1} />
+                        </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} />
+                        </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>
+                }
+            </div>
+            <div className='flex flex-col gap-4'>
+                <p className='text-base text-white-body font-bold'>Recent Login</p>
+                {isFetching ?
+                <div className='w-full flex justify-center'>
+                    <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+                </div>
+                :
+                isError ?
+                <p className='text-base text-white-body font-bold'>{error?.message}</p>
+                :
+                <div className='flex flex-col gap-4'>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order" />
+                        </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/RightAsideBar.jsx

@@ -1,8 +1,12 @@
 import React, { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../../services/queryKeys'
+import { getRightSidebar } from '../../../services/siteServices'
 import Icons from '../../Icons'
-import Orders from './Orders'
+//import Orders from './Orders'
 import Tickets from './Tickets'
 import Tasks from './Tasks'
+import RecentPaymentsBar from "./RecentPaymentsBar";
 
 export default function RightAsideBar() {
 
@@ -13,25 +17,43 @@ export default function RightAsideBar() {
         setActive(lowerStr)
     }
 
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.right_sidebar],
+        queryFn: () => {
+            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            // const reqData = {
+            //     page,
+            //     ...filterData
+            // }
+            return getRightSidebar()
+        },
+        // staleTime: 0 //0 mins
+    })
+    const recentData = [] // RECENT LIST
+    
+    // const recentData = data?.data // RECENT LIST
+    // const pagination = data?.data?.pagination
+    // console.log('RIGHT', data?.data)
+
   return (
     <div className='w-full h-full flex flex-col gap-8'>
         {/* Menu */}
         <div className='grid grid-cols-3 gap-8'>
-            <button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
+            <button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active === 'orders' && 'scale-[1.2]'}`}>
                 <Icons name='dashboard' className='text-3xl' />
             </button>
-            <button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
+            <button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active === 'tickets' && 'scale-[1.2]'}`}>
                 <Icons name='settings' className='text-3xl' />
             </button>
-            <button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
+            <button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active === 'tasks' && 'scale-[1.2]'}`}>
                 <Icons name='dashboard' className='text-3xl' />
             </button>
         </div>
 
         {/* Body */}
-        {active == 'orders' && <Orders />}
-        {active == 'tickets' && <Tickets />}
-        {active == 'tasks' && <Tasks />}
+        {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,19 @@ 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>
+                </div>
+                :
+                isError ?
+                <p className='text-base text-white-body font-bold'>{error?.message}</p>
+                :
                 <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
                     <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
                         <p className='text-base font-bold text-white-body'>
@@ -33,13 +41,22 @@ export default function Tasks() {
                         <p className='text-sm text-slate-500'>Created</p>
                     </div>
                 </div>
+                }
             </div>
             <div className='flex flex-col gap-4'>
                 <p className='text-base text-white-body font-bold'>Best Tasks</p>
+                {isFetching ?
+                <div className='w-full flex justify-center'>
+                    <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+                </div>
+                :
+                isError ?
+                <p className='text-base text-white-body font-bold'>{error?.message}</p>
+                :
                 <div className='flex flex-col gap-4'>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order 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>
@@ -48,7 +65,7 @@ export default function Tasks() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order 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>
@@ -57,7 +74,7 @@ export default function Tasks() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order 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>
@@ -66,7 +83,7 @@ export default function Tasks() {
                     </div>
                     <div className='flex gap-3 items-center'>
                         <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <img src={Img} className='w-8' alt="Order 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,6 +91,7 @@ export default function Tasks() {
                         </div>
                     </div>
                 </div>
+                }
             </div>
         </div>
       )

src/components/layouts/rightaside/Tickets.jsx

@@ -2,78 +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>
-            <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>
-            <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() {
@@ -64,8 +64,8 @@ export default function BillingsCom() {
                         <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>
+                                <option value='option_name'>Option Name</option>
+                                <option value='member_id'>Member ID</option>
                             </select>
                         </div>
                         <div className='w-full sm:max-w-48'>
@@ -88,7 +88,7 @@ export default function BillingsCom() {
                                             Option Name
                                         </th>
                                         <th scope="col" className="px-2">
-                                            Product ID
+                                            Member ID
                                         </th>
                                         <th scope="col" className="px-2 text-right">
                                             Amount
@@ -115,12 +115,12 @@ export default function BillingsCom() {
                                             </td>
                                             <td className="px-2">
                                                 <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.product_id}</div>
+                                                    <div className="text-base font-semibold">{item?.member_id}</div>
                                                 </div> 
                                             </td>
                                              <td className="px-2">
                                                 <div className="text-right">
-                                                    <div className="text-base font-semibold">{item?.amount}</div>
+                                                    <div className="text-base font-semibold">${item?.amount}</div>
                                                     {/* <div className="font-normal text-gray-500">{item?.external_url}</div> */}
                                                 </div> 
                                             </td>

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

@@ -0,0 +1,106 @@
+import {useMutation, useQueryClient} from '@tanstack/react-query'
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+import InputText from '../InputText'
+import {addCustomTemplate} from '../../services/siteServices'
+import queryKeys from '../../services/queryKeys';
+
+
+const initialValues = {
+    custom_id: "",
+    provision_name: "",
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+    custom_id: Yup.string().required("custom_id is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'),
+    provision_name: Yup.string().required("provision_name is required").min(6, 'must be upto 6 characters').max(200, 'must not exceed 200 characters'),
+});
+
+export default function AddTemplate() {
+
+    const queryClient = useQueryClient()
+
+    const customTemplate = useMutation({
+        mutationFn: (fields) => {
+            if (!fields.custom_id || !fields.provision_name) {
+                throw new Error('Please provide all fields marked *')
+            }
+            return addCustomTemplate(fields)
+        },
+        onSuccess: () => {
+            queryClient.refetchQueries({
+                queryKey: [...queryKeys.custom_template],
+                // type: 'active',
+                // exact: true,
+            })
+        },
+    })
+
+    //FUNCTION TO HANDLE ADD TEMPLATE
+    const handleSubmit = (values, helper) => {
+        customTemplate.mutate(values)
+    };
+
+  return (
+    <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+    >
+        {(props) => (
+            <Form>
+                <div
+                    className='flex flex-col w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
+                    <div className='w-full flex flex-col gap-4'>
+                        <div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
+                            <label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.custom_id && props.touched.custom_id) && 'text-red-500'}`}>
+                                Custom ID
+                            </label>
+                            <InputText
+                                id='custom_id'
+                                placeholder='Custom ID'
+                                name='custom_id'
+                                value={props.values.custom_id}
+                                handleChange={props.handleChange}
+                            />
+                        </div>
+                        <div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
+                            <label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.provision_name && props.touched.provision_name) && 'text-red-500'}`}>
+                                Provision Name
+                            </label>
+                            <InputText
+                                id='provision_name'
+                                placeholder='Provision Name'
+                                name='provision_name'
+                                value={props.values.provision_name}
+                                handleChange={props.handleChange}
+                            />
+                        </div>
+
+                        <div className='h-10 my-5 text-end'>
+                            <button type='submit' disabled={customTemplate.isPending}
+                                    className='px-4 h-full bg-primary text-white font-bold rounded-md'>{customTemplate.isPending ? 'loading...' : 'Add'}</button>
+                        </div>
+
+                        {customTemplate.error &&
+                            <>
+                                <div className="w-full text-center">
+                                    <p className='text-red-500 text-sm'>{customTemplate.error.message}</p>
+                                </div>
+                            </>
+                        }
+                        {customTemplate.isSuccess &&
+                            <>
+                                <div className="w-full text-center">
+                                    <p className='text-emerald-500 text-sm'>{'Template Added'}</p>
+                                </div>
+                            </>
+                        }
+                    </div>
+                </div>
+            </Form>
+        )}
+    </Formik>
+  )
+}

src/components/products/CustomTemplates.jsx

@@ -0,0 +1,148 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+import { getCustomTemplate } from '../../services/siteServices'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+import AddTemplate from './AddTemplate'
+
+export default function CustomTemplates() {
+
+    const [page, setPage] = useState(1)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const [willFilter, setWillFilter] = useState(false)
+
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.custom_template, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
+            }
+            return getCustomTemplate(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const customTemData = data?.data?.templates // CUSTOM TEMPLATE LIST
+    const pagination = data?.data?.pagination
+    // console.log('DATA', data?.data)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Custom Templates' paths={['Dashboard', 'Custom Templates']} />
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body' style={{backgroundColor: 'aliceblue'}}>
+                <div className='mb-3'>
+                    <b>Add New Custom Template</b>
+                </div>
+                <AddTemplate />
+            </div>
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                { isError ?
+                    <p className='text-red-500'>{error?.message}</p>
+                    :
+                    <>
+                        {/* filter section */}
+                        <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                            <Icons name='filter' className='text-3xl' />
+                            <div className='w-full sm:max-w-48'>
+                                <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
+                                    <option value=''>All</option>
+                                    <option value='custom_id'>Custom ID</option>
+                                    <option value='provision_name'>Provision Name</option>
+                                </select>
+                            </div>
+                            <div className='w-full sm:max-w-48'>
+                                <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
+                            </div>
+                            <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
+                        </div>
+                        {/* end of filter section */}
+
+                        <TablePaginatedWrapper data={customTemData} 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">
+                                                ID
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Custom ID
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Provision Name
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Status
+                                            </th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        {(data && data.length > 0) ? data?.map((item, index) => (
+                                                <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                                    <td className="px-2 py-2">
+                                                        <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                            <div className="text-left">
+                                                                <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div className="text-base font-semibold">{item?.custom_id}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div className="text-base font-semibold">{item?.provision_name}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div className="text-base font-semibold">{item?.status}</div>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={4}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
+                }
+            </div>
+        </div>
+    )
+}

src/components/products/ProductTemplates.jsx

@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+import { getProductsTemplate } from '../../services/siteServices'
+// import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+
+export default function ProductTemplates() {
+
+    const [page, setPage] = useState(1)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const [willFilter, setWillFilter] = useState(false)
+
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.products_template, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
+            }
+            return getProductsTemplate(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const productsTemData = data?.data?.templates // PRODUCTS TEMPLATE LIST
+    const pagination = data?.data?.pagination
+    // console.log('DATA', data?.data)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Product Templates' paths={['Dashboard', 'Product Templates']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                { isError ?
+                    <p className='text-red-500'>{error?.message}</p>
+                    :
+                    <>
+                        {/* filter section */}
+                        <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                            <Icons name='filter' className='text-3xl' />
+                            <div className='w-full sm:max-w-48'>
+                                <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
+                                    <option value=''>All</option>
+                                    <option value='name'>Name</option>
+                                </select>
+                            </div>
+                            <div className='w-full sm:max-w-48'>
+                                <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
+                            </div>
+                            <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
+                        </div>
+                        {/* end of filter section */}
+
+                        <TablePaginatedWrapper data={productsTemData} 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">
+                                                Product ID
+                                            </th>
+                                            <th scope="col" className="px-8">
+                                                Provision Name
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Status
+                                            </th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        {(data && data.length > 0) ? data?.map((item, index) => (
+                                                <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                                    <td className="px-2 py-2">
+                                                        <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                            <div className="text-left">
+                                                                <div className="text-base font-semibold">{item?.product_id}</div>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-8">
+                                                        <div className="text-left">
+                                                            <div className="text-base font-semibold">{item?.provision_name}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div className="text-base font-semibold">{item?.status}</div>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={4}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
+                }
+            </div>
+        </div>
+    )
+}

src/components/products/ProductsCom.jsx

@@ -1,69 +1,99 @@
-import React, { useState } from 'react'
-import { useQuery } from "@tanstack/react-query";
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
+import { getProducts } from '../../services/siteServices'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+// import formatNumber from '../../helpers/formatNumber'
+// import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
+// import formatNumber from '../../helpers/formatNumber'
+// import Avatar from '../../assets/user_avatar.jpg'
 
-import Avatar from '../../assets/user_avatar.jpg'
-import queryKeys from '../../services/queryKeys'
-import { getOffers } from '../../services/siteServices'
-import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import formatNumber from '../../helpers/formatNumber';
 
-export default function OffersCom() {
+export default function ProductsCom() {
 
     const [page, setPage] = useState(1)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const [willFilter, setWillFilter] = useState(false)
+
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.offers, page],
-        queryFn: () => getOffers({page}),
-        staleTime: 0,
-        // placeholderData: keepPreviousData,
+        queryKey: [...queryKeys.products, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
+            }
+            return getProducts(reqData)
+        },
+        staleTime: 0 //0 mins
     })
-
-    const offers = data?.data?.offers // LOAN CHARGES LIST
+    const productsData = data?.data?.products // PRODUCTS LIST
     const pagination = data?.data?.pagination
-    console.log('offers', offers)
+    // console.log('DATA', data?.data)
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Offers' paths={['Dashboard', 'Offers']} />
+            <BreadcrumbCom title='Products' paths={['Dashboard', 'Products']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isFetching ? 
-                <>
-                    <p className='text-slate-800'>Loading...</p>
-                </>
-                : isError ?
-                    <p className='text-red-500'>{error.message}</p>
+                { isError ?
+                    <p className='text-red-500'>{error?.message}</p>
                 :
-                    <TablePaginatedWrapper data={offers} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                <>
+                    {/* filter section */}
+                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                        <Icons name='filter' className='text-3xl' />
+                        <div className='w-full sm:max-w-48'>
+                            <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
+                                <option value=''>All</option>
+                                <option value='name'>Name</option>
+                            </select>
+                        </div>
+                        <div className='w-full sm:max-w-48'>
+                            <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
+                        </div>
+                        <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
+                    </div>
+                     {/* end of filter section */}
+
+                    <TablePaginatedWrapper data={productsData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
                             <table className="py-2 w-full text-sm">
                                 <thead className="py-2 text-sm text-slate-500 text-left">
                                     <tr>
                                         <th scope="col" className="px-2 py-2">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2">
                                             Name
                                         </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Interest Rate
+                                        <th scope="col" className="px-2">
+                                            Product ID
                                         </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
+                                            Status
                                         </th>
                                     </tr>
                                 </thead>
@@ -72,51 +102,31 @@ export default function OffersCom() {
                                         <tr key={index} className="py-2 border-t border-dashed border-slate-300">
                                             <td className="px-2 py-2">
                                                 <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
-                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
                                                 <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 className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
                                                 </div>  
                                                 </div>
                                             </td>
                                             <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.interest_rate)}</div>
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.name}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.product_id}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2">
                                                 <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.insurance_rate)}</div>
+                                                    <div className="text-base font-semibold">{item?.status}</div>
                                                 </div> 
                                             </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="font-normal text-gray-500">{formatNumber(item?.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={7}>
+                                        <td className="px-3 py-2" colSpan={4}>
                                             <div className="flex justify-center items-center">
                                                 No Record Found
                                             </div>
@@ -128,6 +138,7 @@ export default function OffersCom() {
                         </>
                     )}
                     </TablePaginatedWrapper>
+                </>
                 }
             </div>
         </div>

src/components/recent_signup/RecentSignup.jsx

@@ -0,0 +1,146 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+import { getRecentSignup } from '../../services/siteServices'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+// import formatNumber from '../../helpers/formatNumber'
+// import formatNumber from '../../helpers/formatNumber'
+// import Avatar from '../../assets/user_avatar.jpg'
+
+
+export default function RecentSignup() {
+
+    const [page, setPage] = useState(1)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const [willFilter, setWillFilter] = useState(false)
+
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.recent_signup, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
+            }
+            return getRecentSignup(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const recentSignupData = data?.data?.payments // BILLINGS LIST
+    const pagination = data?.data?.pagination
+    // console.log('DATA', data?.data)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <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 ?
+                    <p className='text-red-500'>{error?.message}</p>
+                :
+                <>
+                    {/* filter section */}
+                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                        <Icons name='filter' className='text-3xl' />
+                        <div className='w-full sm:max-w-48'>
+                            <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
+                                <option value=''>All</option>
+                                <option value='name'>Name</option>
+                            </select>
+                        </div>
+                        <div className='w-full sm:max-w-48'>
+                            <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
+                        </div>
+                        <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
+                    </div>
+                     {/* end of filter section */}
+
+                    <TablePaginatedWrapper data={recentSignupData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                    <tr>
+                                        <th scope="col" className="px-2 py-2">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Option Name
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Amount
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Status
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                            <td className="px-2 py-2">
+                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.option_name}</div>
+                                                </div> 
+                                            </td>
+                                             <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="text-base font-semibold">${item?.amount}</div>
+                                                    {/* <div className="font-normal text-gray-500">{item?.external_url}</div> */}
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-right">
+                                                    <div className="text-base font-semibold">{item?.status}</div>
+                                                </div> 
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={4}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                </>
+                }
+            </div>
+        </div>
+    )
+}

src/components/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/subscription_view/SubscriptionViewCom.jsx

@@ -0,0 +1,201 @@
+import {useLocation, useNavigate, Link} from 'react-router-dom'
+import { useQuery, useMutation } from '@tanstack/react-query'
+import { FaCaretDown } from "react-icons/fa";
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import {useEffect, useState} from 'react';
+import RouteLinks from '../../RouteLinks';
+import { getSubscriptionsView, updateTemplate, updateCustomTemplate } from '../../services/siteServices'
+import queryKeys from '../../services/queryKeys'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
+
+export default function SubscriptionViewCom() {
+
+
+    const {state} = useLocation()
+    const navigate = useNavigate()
+
+    const [reqStatus, setReqStatus] = useState({loading: false, type: '', error: false, success: false})
+
+    const [values, setValues] = useState({custom_id: '', template_uid: ''})
+
+    const handleValueChange = ({target:{name, value}}) => {
+        if(name == 'custom_template'){
+            setValues(prev => ({...prev, custom_id: value}))
+        }else if (name == 'template') {
+            setValues(prev => ({...prev, template_uid: value}))
+        }else{
+            setValues(prev => ({...prev}))
+        }
+    }
+
+    useEffect(() => {
+        if (!state?.subscriptionUID) {
+            navigate(RouteLinks.homePage, {replace: true})
+        }
+    }, [])
+
+        const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.subscriptions_view,
+        queryFn: () => {
+            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                subscription_uid: state?.subscriptionUID
+                // page,
+                // ...filterData
+            }
+            return getSubscriptionsView(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const subscriptionViewData = data?.data // ACCOUNT VIEW DATA
+    const customTemplates = subscriptionViewData?.available_custom_templates
+    const availableTemplates = subscriptionViewData?.available_templates
+    const selectedSubscription = subscriptionViewData?.subscription
+    const currentCustomTem = subscriptionViewData?.available_custom_templates?.filter(item => item?.custom_id == subscriptionViewData?.subscription?.custom_template)[0]?.custom_id
+    const currentTemplate = subscriptionViewData?.available_templates?.filter(item => item?.template_uid == subscriptionViewData?.subscription?.product_template)[0]?.template_uid
+    // // console.log('subscriptionViewData', subscriptionViewData, currentCustomTem, currentTemplate)
+
+    // useEffect(()=>{
+    //     if(data){
+    //         const currentCustomTem = subscriptionViewData?.available_custom_templates?.filter(item => item?.custom_id == subscriptionViewData?.subscription?.custom_template)[0]?.custom_id
+    //         const currentTemplate = subscriptionViewData?.available_templates?.filter(item => item?.template_uid == subscriptionViewData?.subscription?.product_template)[0]?.template_uid
+    //         setValues({custom_id: currentCustomTem || '', template_uid: currentTemplate || ''})
+    //     }
+    // },[data])
+
+
+    const templateUpdate = useMutation({
+        mutationFn: (fields) => {
+            return updateTemplate(fields)
+        },
+        // onError: (error) => {
+        // },
+        // onSuccess: (res) => {
+        // },
+        onSettled: () => {
+            setTimeout(()=>{
+                templateUpdate.reset()
+            }, 3000)
+        }
+    })
+
+    const customTemplateUpdate = useMutation({
+        mutationFn: (fields) => {
+            return updateCustomTemplate(fields)
+        },
+        // onError: (error) => {
+        // },
+        // onSuccess: (res) => {
+        // },
+        onSettled: () => {
+            setTimeout(()=>{
+                customTemplateUpdate.reset()
+            }, 3000)
+        }
+    })
+
+    const handleUpdateTemplate = () => {
+        const reqData = {
+            subscrtiption_uid: state?.subscriptionUID,
+            template_uid: values.template_uid
+        }
+        templateUpdate.mutate(reqData)
+    }
+
+    const handleUpdateCustomTemplate = () => {
+        const reqData = {
+            subscrtiption_uid: state?.subscriptionUID,
+            custom_id: values.custom_id
+        }
+        customTemplateUpdate.mutate(reqData)
+    }
+
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title={`Subscription View [${state?.subscriptionUID}]`} paths={['Dashboard', 'Subscription View']}/>
+
+            {isFetching ? 
+            <>
+                <p className='text-slate-800'>Loading...</p>
+            </>
+            : isError ?
+                <p className='text-red-500'>{error.message}</p>
+            :
+                <>
+                    <div className='w-full box bg-white dark:bg-black-box text-black-body dark:text-white-body overflow-x-auto'>
+                        <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
+                            <tbody>
+                                <tr className="py-2 border-t border-dashed border-slate-300">
+                                    <td className="px-2 py-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{getDateTimeFromDateString(selectedSubscription?.added)}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{selectedSubscription?.product_id}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{selectedSubscription?.internal_url}
+                                            <br /><span>Template :</span> {selectedSubscription?.product_template}
+                                            <br /><span>Custom :</span> {selectedSubscription?.custom_template}
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-right">
+                                            <div className="text-base font-semibold">{selectedSubscription?.status}</div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+
+                        <div className='w-full'>
+                            <label className='font-medium'>Assign Template</label>
+                            <div className='flex flex-col xs:flex-row md:items-center gap-2'>
+                                <div className='w-full h-10 relative overflow-hidden rounded-md'>
+                                    <select name='template' value={currentTemplate || values.template_uid} onChange={handleValueChange} className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
+                                        <option value=''>None</option>
+                                        {availableTemplates && availableTemplates.map(item => (
+                                            <option key={item?.template_uid} value={item?.template_uid}>{`${item?.product_id}-${item?.provision_name}`}</option>
+                                        ))}
+                                    </select>
+                                    <FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2' />
+                                </div>
+                                <button name='template' onClick={handleUpdateTemplate} disabled={(templateUpdate.isPending || !values.template_uid)} className={`rounded-md p-2 bg-primary text-white text-center ${(templateUpdate.isPending || !values.template_uid) && 'opacity-50'}`}>Update</button>
+                            </div>
+                            <p className={`p-2 mt-4 ${templateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{templateUpdate.isSuccess ? 'Template updated' : templateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
+                        </div>
+                    </div>
+
+                    <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+
+                        <div className='w-full'>
+                            <label className='font-medium'>Assign Custom Template</label>
+                            <div className='flex flex-col xs:flex-row md:items-center gap-2'>
+                                <div className='w-full h-10 relative overflow-hidden rounded-md'>
+                                    <select name='custom_template' value={currentCustomTem || values.custom_id} onChange={handleValueChange} className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
+                                        <option value=''>None</option>
+                                        {customTemplates && customTemplates.map(item => (
+                                            <option key={item?.custom_id} value={item?.custom_id}>{`${item?.custom_id}-${item?.provision_name}`}</option>
+                                        ))}
+                                    </select>
+                                    <FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2' />
+                                </div>
+                                <button name='custom_template' onClick={handleUpdateCustomTemplate} disabled={(customTemplateUpdate.isPending || !values.custom_id)} className={`rounded-md p-2 bg-primary text-white text-center ${(customTemplateUpdate.isPending || !values.custom_id) && 'opacity-50'}`}>Update</button>
+                            </div>
+                            <p className={`p-2 mt-4 ${customTemplateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{customTemplateUpdate.isSuccess ? 'Custom Template updated' : customTemplateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
+                        </div>
+                    </div>
+                </>
+            }
+        </div>
+    )
+}

src/components/tableWrapper/TablePaginatedWrapper.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+// import { useState } from "react";
 import MainBtn from "../MainBtn";
 import Icons from "../Icons";
 
@@ -27,7 +27,7 @@ export default function TablePaginatedWrapper({
 
         <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
             <div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
-              {isFetching ? '----' : `page ${pagination?.current_page}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{pagination?.total_pages}</span>
+              {isFetching ? '----' : `page ${pagination?.current_page || 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,15 +1,17 @@
-import { useEffect, useState } from 'react'
+import {useState} from 'react'
 import {Link} from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
+
+// import {Link} from 'react-router-dom'
+import {useQuery} from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-import { getSubscriptions } from '../../services/siteServices'
+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() {
 
@@ -17,18 +19,18 @@ export default function SubscriptionsCom() {
     const [filter, setFilter] = useState({type: '', id: ''})
     const [willFilter, setWillFilter] = useState(false)
 
-    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)
         }
@@ -51,94 +53,138 @@ export default function SubscriptionsCom() {
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Subscriptions' paths={['Dashboard', 'Subscriptions']} />
+            <BreadcrumbCom title='Provisions' paths={['Dashboard', 'Provisions']}/>
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                { isError ?
+                {isError ?
                     <p className='text-red-500'>{error?.message}</p>
-                :
-                <>
-                    {/* filter section */}
-                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
-                        <Icons name='filter' className='text-3xl' />
-                        <div className='w-full sm:max-w-48'>
-                            <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
-                                <option value=''>All</option>
-                                <option value='member_id'>Member ID</option>
-                                <option value='product_id'>Product 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='member_id'>Member ID</option>
+                                    <option value='product_id'>Product ID</option>
+                                </select>
+                            </div>
+                            <div className='w-full sm:max-w-48'>
+                                <input name='id' value={filter?.id} disabled={!filter.type}
+                                       className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`}
+                                       onChange={handleFilter}/>
+                            </div>
+                            <button onClick={handleFilterByParams} disabled={filter.type && !filter.id}
+                                    className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit
+                            </button>
                         </div>
-                        <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={subscriptionData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
-                    {({ data }) => (
-                        <>
-                            <table className="py-2 w-full text-sm">
-                                <thead className="py-2 text-sm text-slate-500 text-left">
-                                    <tr>
-                                        <th scope="col" className="px-2 py-2">
-                                            Added
-                                        </th>
-                                        <th scope="col" className="px-2">
-                                            Product
-                                        </th>
-                                        <th scope="col" className="px-2">
-                                            URL
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Status
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {(data && data.length > 0) ? data?.map((item, index) => (
-                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
-                                            <td className="px-2 py-2">
-                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
-                                                {/* <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" /> */}
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
-                                                </div>  
-                                                </div>
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.product_id}</div>
-                                                </div> 
-                                            </td>
-                                             <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.internal_url}</div>
-                                                    <div className="font-normal text-gray-500">{item?.external_url}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="text-base font-semibold">{item?.status}</div>
-                                                </div> 
-                                            </td>
+                        <TablePaginatedWrapper data={subscriptionData} isFetching={isFetching} setPage={setPage}
+                                               itemsPerPage={pagination?.limit} pagination={pagination}>
+                            {({data}) => (
+                                <>
+                                    <table className="py-2 w-full text-sm">
+                                        <thead className="py-2 text-sm text-slate-500 text-left">
+                                        <tr>
+                                            <th scope="col" className="px-2 py-2">
+                                                Added/Updated
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Product/Server
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Internal-URL/External-URL/SubscriptionUID
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Status
+                                            </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={4}>
-                                            <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">
+                                                                    {getDateTimeFromDateString(item?.added)}<br/>
+                                                                    {getDateTimeFromDateString(item?.updated)}<br/>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div
+                                                                className="text-base font-semibold">
+                                                                {item?.product_id}
+                                                                <br/>
+                                                                <a href={`http://${item?.primary_server}:${item?.provision_port}`}
+                                                                   target='_blank'
+                                                                   rel="noreferrer">{item?.primary_server}:{item?.provision_port}</a>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div className="text-base">
+                                                                <span>Int :</span><a href={`https://${item?.internal_url}`}
+                                                                                     target='_blank'
+                                                                                     rel="noreferrer"> {item?.internal_url}</a>
+                                                                <br/>
+                                                                <span>Ext :</span><a href={`https://${item?.external_url}`}
+                                                                                     target='_blank'
+                                                                                     rel="noreferrer"> {item?.external_url}</a>
+                                                                <br/>
+                                                                {item?.subscription_uid}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div className="text-base font-semibold">{item?.status}</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={`/subscription-view/${item?.subscription_uid}`}
+                                                                      state={{
+                                                                          customerID: item?.id,
+                                                                          subscriptionUID: item?.subscription_uid
+                                                                      }}
+                                                                >
+                                                                    <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={4}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
                 }
             </div>
         </div>

src/components/users_admin/UsersAdmin.jsx

@@ -0,0 +1,161 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+import { 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'
+
+
+export default function UsersAdmin() {
+
+    const [page, setPage] = useState(1)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const [willFilter, setWillFilter] = useState(false)
+
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.users_admin, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
+            }
+            return getUsers(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const usersData = data?.data?.office_users // USERS LIST
+    const pagination = data?.data?.pagination
+    console.log('DATA', data?.data)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Users Admin' paths={['Dashboard', 'Admin']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                { isError ?
+                    <p className='text-red-500'>{error?.message}</p>
+                :
+                <>
+                    {/* filter section */}
+                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2' >
+                        <Icons name='filter' className='text-3xl' />
+                        <div className='w-full sm:max-w-48'>
+                            <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
+                                <option value=''>All</option>
+                                <option value='name'>Name</option>
+                                <option value='username'>Username</option>
+                            </select>
+                        </div>
+                        <div className='w-full sm:max-w-48'>
+                            <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
+                        </div>
+                        <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
+                    </div>
+                     {/* end of filter section */}
+
+                    <TablePaginatedWrapper data={usersData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                <tr>
+                                    <th scope="col" className="px-2 py-2">
+                                        ID
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Added
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Firstname
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Lastname
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Username
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Acct. Level
+                                    </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="text-left">
+                                                    <div className="text-base font-semibold">{item?.id}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="">
+                                                    <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.firstname}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="">
+                                                    <div className="text-base font-semibold">{item?.lastname}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.username}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.acc_level}</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/context/GeneralLayoutContext.jsx

@@ -1,8 +1,8 @@
 import { createContext, useContext, useEffect, useState } from 'react'
 
-const GeneralContextProvider = createContext({})
+const GeneralContextProviderInt = createContext({})
 
-export default function GeneralLayoutContext({children}) {
+export default function GeneralLayoutContextInt({children}) {
 
     const [theme, setTheme] = useState(null)
 
@@ -21,7 +21,7 @@ export default function GeneralLayoutContext({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 GeneralLayoutContext({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 GeneralLayoutContext({children}) {
       setBooking((prev)=>{
         if(!prev){
           return bookingToOpen
-        }else if(bookingToOpen == prev){
+        }else if(bookingToOpen === prev){
           return ''
         }else{
           return bookingToOpen
@@ -101,13 +101,13 @@ export default function GeneralLayoutContext({children}) {
       }
     
   return (
-    <GeneralContextProvider.Provider value={value}>
+    <GeneralContextProviderInt.Provider value={value}>
         {children}
-    </GeneralContextProvider.Provider>
+    </GeneralContextProviderInt.Provider>
   )
 }
 
 
-export const generalLayoutContext = () => {
-  return useContext(GeneralContextProvider)
+export const GeneralLayoutContext = () => {
+  return useContext(GeneralContextProviderInt)
 }

src/index.js

@@ -6,7 +6,7 @@ import { Provider } from "react-redux";
 import './index.css';
 import App from './App';
 import store from './store/store.js'
-import GeneralLayoutContext from './context/GeneralLayoutContext.jsx';
+import GeneralLayoutContextInt from './context/GeneralLayoutContext.jsx';
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
@@ -14,9 +14,9 @@ root.render(
   <React.StrictMode>
     <BrowserRouter>
       <Provider store={store}>
-        <GeneralLayoutContext>
+        <GeneralLayoutContextInt>
           <App />
-        </GeneralLayoutContext>
+        </GeneralLayoutContextInt>
       </Provider>
     </BrowserRouter>
   </React.StrictMode>

src/pages/AccountDetailsPage.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import AccountViewCom from "../components/account_view/AccountViewCom";
+export default function AccountDetailsPage() {
+    return (
+        <AccountViewCom />
+    )
+}

src/pages/CountrySettingsPage.jsx

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

src/pages/CustomTemplatePage.jsx

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

src/pages/OffersPage.jsx

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

src/pages/ProductTemplatePage.jsx

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

src/pages/ProductsPage.jsx

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

src/pages/RecentSignupPage.jsx

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

src/pages/SubscriptionDetailsPage.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import SubscriptionViewCom from "../components/subscription_view/SubscriptionViewCom";
+export default function SubscriptionDetailsPage() {
+    return (
+        <SubscriptionViewCom />
+    )
+}

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/services/queryKeys.js

@@ -14,6 +14,15 @@ const queryKeys = {
     // new
     subscriptions: ['subscriptions'],
     billings: ['billings'],
+    right_sidebar: ['right_sidebar'],
+    recent_signup: ['recent_signup'],
+    products: ['products'],
+    products_template: ['products_template'],
+    custom_template: ['custom_template'],
+    account_view: ['account_view'],
+    subscriptions_view: ['subscriptions_view'],
+    users_admin: ['users_admin'],
+    country_list: ['country_list'],
 }
 
 export default queryKeys

src/services/siteServices.js

@@ -62,6 +62,12 @@ export const getCustomers = (reqData) => {
     return getAuxEnd(`/customers`, postData)
 }
 
+// FUNCTION TO GET COUNTRY
+export const getCountry = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/country`, postData)
+}
+
 // FUNCTION TO GET BILLINGS
 export const getBillings = (reqData) => {
     const postData = { ...reqData }
@@ -74,11 +80,77 @@ export const getSubscriptions = (reqData) => {
     return getAuxEnd(`/subcriptions`, postData)
 }
 
+// FUNCTION TO GET RIGHT SIDEBAR DATA
+export const getRightSidebar = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/right-sidebar`, postData)
+}
 
+// 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)
+}
 
+// FUNCTION TO GET PRODUCTS TEMPLATE DATA
+export const getProductsTemplate = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/products-templates`, postData)
+}
 
+// FUNCTION TO UPDATE TEMPLATE
+export const updateTemplate = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/template/set-template', postData, false)
+}
+
+// FUNCTION TO UPDATE CUSTOM TEMPLATE
+export const updateCustomTemplate = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/template/set-custom', postData, false)
+}
+
+// FUNCTION TO ADD CUSTOM TEMPLATE
+export const addCustomTemplate = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/template/custom-add', postData, false)
+}
+
+// FUNCTION TO GET CUSTOM TEMPLATE DATA
+export const getCustomTemplate = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/custom-templates`, postData)
+}
+
+// FUNCTION TO VIEW SELECTED ACCOUNT DATA
+export const getAccountView = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/account-view`, postData)
+}
+
+// FUNCTION TO GET SUBSCRIPTIONS VIEW DATA
+export const getSubscriptionsView = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/subscription-view`, postData)
+}
 
 
 // FUNCTION TO GET LOANS TABLE