margin added to offer interest table

src/components/MyWallet/AddFund.jsx

@@ -2,6 +2,7 @@ import React, {useState} from 'react'
 import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
 import { useNavigate } from 'react-router-dom'
+import InputCom from '../Helpers/Inputs/InputCom'
 
 function AddFund({payment}) {
    
@@ -39,7 +40,24 @@ function AddFund({payment}) {
         <div>
             {/* heading */}
             <div className="sm:flex justify-between items-center mb-6">
-                <div className="mb-5 sm:mb-0">
+                <div className="w-full flex justify-start space-x-3 items-center">
+                    <button
+                    type="button"
+                    className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
+                    onClick={() =>
+                        navigate('/my-wallet', { replace: true })
+                    }
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="35"
+                            height="35"
+                            viewBox="0 0 24 24"
+                            fill="skyblue"
+                        >
+                            <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
+                        </svg>
+                    </button>
                     <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
                     Add Credit
                     </h1>
@@ -58,22 +76,29 @@ function AddFund({payment}) {
                         {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
                         {/*<hr />*/}
                         <form className='md:p-8 p-4 add-fund-info'>
-                            <div className='md:flex items-center'>
-                                <label className='w-full md:w-2/4 text-slate-600 text-lg'>Amount(Naira) <span className='text-red-500'>*</span></label>
-                                <input className='w-full md:w-2/4 p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
-                                       value={input}
-                                       name='amount'
-                                       type="text"
-                                       placeholder='Amount'
-                                       required
-                                       onChange={handleChange}
+                            <div className="field w-full mb-6">
+                                <InputCom
+                                    fieldClass="px-6"
+                                    label="Amount(Naira)"
+                                    type="text"
+                                    name="amount"
+                                    placeholder="Amount"
+                                    value={input}
+                                    inputHandler={handleChange}
+                                    // blurHandler={props.handleBlur}
                                 />
+                                {inputError && <p className='text-base text-red-500'>{inputError}</p>}
                             </div>
-                            {inputError && <p className='text-base text-red-500'>{inputError}</p>}
                         </form>
                         <hr />
                         <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
-                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                            <button
+                                onClick={handleSubmit}
+                                type="button"
+                                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            >
+                                <span className="text-white">Continue</span>
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -81,7 +106,7 @@ function AddFund({payment}) {
 
             <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
                 <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full  md:p-8 p-4 h-full max-h-[590px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
                         <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
                         {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
                         {payment.loading ?

src/components/MyWallet/ConfirmAddFund.jsx

@@ -129,7 +129,7 @@ function ConfirmAddFund({ payment }) {
             <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
               <FlutterWaveButton
                 {...fwConfig}
-                className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md"
+                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
               />
             </div>
           </div>
@@ -137,7 +137,7 @@ function ConfirmAddFund({ payment }) {
       )}
 
       <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-        <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+        <div className="wallet w-full  md:p-8 p-4 h-full min-h-[600px] bg-white dark:bg-dark-white rounded-2xl shadow">
           <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
             Recent Activity
           </h2>

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -1,18 +1,24 @@
 import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
-import { useNavigate } from "react-router-dom";
 
+import usersService from "../../services/UsersService";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
-
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 import OthersInterestedTable from "./OthersInterestedTable";
 
 export default function ManageInterestOffer(props) {
     const navigate = useNavigate()
+    const apiCall = new usersService()
+
+    let [redirectTime, setRedirectTime] = useState(5)
 
     let [tab, setTab] = useState("info"); //message STATE FOR SWITCHING BETWEEN TABS
 
+    let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', processType: ''})
+
     const messageList = {data: [1,2,3,4,5,6]} // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
     const [currentPage, setCurrentPage] = useState(0);
     const indexOfFirstItem = Number(currentPage);
@@ -28,6 +34,36 @@ export default function ManageInterestOffer(props) {
         setValue(value);
     };
 
+    //FUNCTION TO ACCEPT/REJECT OFFER INTEREST
+    const interestOfferProcess = ({target:{name}}) => {
+        setRequestStatus(prev => ({...prev, loading: true, processType: name}))
+        let reqData = { // API PAYLOADS
+            proc: name.toUpperCase(),
+            client_uid : props.offerDetails?.client_uid,
+            offer_code : props.offerDetails?.offer_code,
+            offer_uid: props.offerDetails?.offer_uid,
+        }
+        apiCall.offersInterestProc(reqData).then(res => {
+            if(res.status != 200 || res.data.internal_return < 0){
+                setRequestStatus({loading: false, status: false, message: 'Unable to complete request', processType: ''})
+                return
+            }
+            setInterval(() => {  // SETS REDIRECT COUNT DOWN
+                setRedirectTime(prev => prev - 1)
+            }, 1000);
+            setRequestStatus({loading: false, status: true, message: `Offer ${name}ed`, processType: ''})
+            setTimeout(()=>{
+                navigate('/offer-interest', {replace: true})
+            },5000)
+        }).catch(err => {
+            setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong. Try again', processType: ''})
+        }).finally(()=>{
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status: false, message: '', processType: ''})
+            },5000)
+        })
+    }
+
     useEffect(()=>{
         // run API to get message to replace message array above, add reload variable as dependence array
     },[])
@@ -188,19 +224,58 @@ export default function ManageInterestOffer(props) {
 
                             {/* BUTTON section */}
                             <div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
-                                <div className="w-full h-full flex flex-col justify-center items-center gap-10">
-                                    <button
-                                        type="button"
-                                        className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                    >
-                                        <span className="text-white">Accept</span>
-                                    </button>
-                                    <button
-                                        type="button"
-                                        className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
-                                    >
-                                        <span className="text-gradient">Reject</span>
-                                    </button>
+                                <div className="w-full h-full">
+                                    <div className="mt-0 sm:mt-10 flex sm:flex-col justify-center items-center gap-10">
+                                        {requestStatus.loading && requestStatus.processType == 'accept' ?
+                                            <LoadingSpinner color='sky-blue' size='10' />
+                                        :    
+                                            <button
+                                                type="button"
+                                                name='accept'
+                                                disabled={requestStatus.loading}
+                                                onClick={interestOfferProcess}
+                                                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                            >
+                                            Accept
+                                            </button>
+                                        }
+
+                                        {requestStatus.loading && requestStatus.processType == 'reject' ?
+                                            <LoadingSpinner color='sky-blue' size='10' />
+                                        :
+                                            <button
+                                                type="button"
+                                                name='reject'
+                                                disabled={requestStatus.loading}
+                                                onClick={interestOfferProcess}
+                                                className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-black"
+                                            >
+                                            Reject
+                                            </button>
+                                        }
+                                    </div>
+
+                                    {/* ERROR DISPLAY */}
+                                    <div className="w-full">
+                                    {/* error or success display */}
+                                    {requestStatus.message != "" && requestStatus.processType != 'sendmeassge' &&
+                                        (!requestStatus.status ? (
+                                        <div
+                                            className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                        >
+                                            {requestStatus.message}
+                                        </div>
+                                        ) : (
+                                        requestStatus.status && (
+                                            <div
+                                            className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                            >
+                                            {`${requestStatus.message} redirecting.... ${redirectTime}sec`}
+                                            </div>
+                                        )
+                                        ))}
+                                    </div>
+                                    {/* End of error or success display */}
                                 </div>
                             </div>
                             {/* END of BUTTON section */}

src/components/OffersInterest/OffersInterestTable.jsx

@@ -29,7 +29,7 @@ export default function OffersInterestTable({offerInterestList, className}) {
 
     return (
         <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
+            className={`update-table w-full my-8 p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
                 className || ""
             }`}
         >

src/services/UsersService.js

@@ -666,6 +666,18 @@ class usersService {
     return this.postAuxEnd("/offersinterestlist", postData);
   }
 
+    // END POINT FOR PROCESSING OFFER INTEREST
+    offersInterestProc(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 13034,
+        ...reqData
+      };
+      return this.postAuxEnd("/offersinterestproc", postData);
+    }
+
    // END POINT FOR WORKER TO MARK TASK AS COMPLETED
    workerJobAction(reqData) {
     var postData = {