Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
5c223ba641 | ||
|
victorAnumudu
|
cc0e2c2c6b | ||
 ameye
|
3df97c0760 | ||
|
ameye
|
6d742e92b5 | ||
|
victorAnumudu
|
44090c94a1 | ||
|
victorAnumudu
|
63f4658449 | ||
|
CHIEFSOFT\ameye
|
552224c489 | ||
|
CHIEFSOFT\ameye
|
134be6a1f0 | ||
|
CHIEFSOFT\ameye
|
fcca050ff6 | ||
|
ameye
|
197dc2e0bc | ||
|
ameye
|
e0f8e8df12 | ||
|
victorAnumudu
|
b5625ab799 | ||
|
victorAnumudu
|
9dc8acc584 |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
@@ -131,7 +131,7 @@ export default function Login() {
|
||||
ux_mode:'redirect',
|
||||
redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
|
||||
onSuccess: async (codeResponse) => {
|
||||
console.log(codeResponse);
|
||||
console.log("GOOGLE LOGIN GOOD --- ",codeResponse);
|
||||
},
|
||||
onError: (errorResponse) => console.log(errorResponse),
|
||||
});
|
||||
|
||||
@@ -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}) {
|
||||
|
||||
@@ -36,49 +37,84 @@ function AddFund({payment}) {
|
||||
setInput('')
|
||||
}
|
||||
return (
|
||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<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>
|
||||
{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>
|
||||
</div>
|
||||
<div>
|
||||
{/* heading */}
|
||||
<div className="sm:flex justify-between items-center mb-6">
|
||||
<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>
|
||||
</div>
|
||||
<div className="add-fund py-4 my-2 w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<h2 className='md:px-8 px-4 py-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>
|
||||
<hr />
|
||||
<p className='md:px-8 px-4 py-2 text-slate-600 dark:text-white text-base lg:text-xl font-medium'>Transfer fund to WrenchBoard GTB Account 0250869867</p>
|
||||
<p className='md:px-8 px-4 py-2 text-slate-500 dark:text-white text-sm lg:text-base font-medium'>
|
||||
Make sure you add your account username in the notes part of the transfer for prompt processing. When the transfer is complete notify here <a className='text-sky-blue' href='#'>Contact us</a>
|
||||
</p>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
<div
|
||||
onClick={() => filterHandler("today")}
|
||||
className="relative"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-[590px] bg-white dark:bg-dark-white overflow-y-auto 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 ?
|
||||
<LoadingSpinner size='16' color='sky-blue' />
|
||||
:
|
||||
<RecentActivityTable payment={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="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
{/*<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="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>
|
||||
</form>
|
||||
<hr />
|
||||
<div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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 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 ?
|
||||
<LoadingSpinner size='16' color='sky-blue' />
|
||||
:
|
||||
<RecentActivityTable payment={payment}/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,32 +33,39 @@ function Balance({wallet, coupon}) {
|
||||
:
|
||||
wallet.data.length ?
|
||||
wallet.data.map((item, index)=> (
|
||||
<div key={index} className="md:flex items-center flex-wrap my-3 border-t-2 border-slate-400">
|
||||
<div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
|
||||
<div className='balance-info'>
|
||||
<p className='py-2'></p>
|
||||
<span className='text-xl text-dark-gray dark:text-white'>{item.description}</span>
|
||||
<p className='text-base text-slate-500'>{item.symbol}</p>
|
||||
<div key={index} className="p-3 md:flex items-center flex-wrap my-3 border-t-2 border-slate-400 wallet-box">
|
||||
<div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
|
||||
<div className='balance-info bal-col1'>
|
||||
<p className='py-2'></p>
|
||||
<span className='text-xl text-dark-gray dark:text-white'><b>{item.description}</b></span>
|
||||
<p className='text-base text-slate-500'>{item.symbol}</p>
|
||||
</div>
|
||||
<div className='balance-info'>
|
||||
<p className='py-2'>Balance</p>
|
||||
<span className='py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*0.01).toFixed(2)}</span>
|
||||
</div>
|
||||
<div className='balance-info'>
|
||||
<p className='py-2'>Escrow</p>
|
||||
<span className='py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*0.01).toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='balance-info'>
|
||||
<p className='py-2'>Balance</p>
|
||||
<span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*0.01).toFixed(2)}</span>
|
||||
</div>
|
||||
<div className='balance-info'>
|
||||
<p className='py-2'>Escrow</p>
|
||||
<span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*0.01).toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
|
||||
{
|
||||
item.action_type != 'AC_AD_FD_ONLY' ?
|
||||
<Link to='transfer-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
|
||||
items-center rounded-full relative bg-purple pr-1.5 pl-4 lg:text-xl text-lg font-bold text-white'>Transfer</Link>:''
|
||||
}
|
||||
<Link to='add-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
|
||||
items-center rounded-full relative bg-purple pr-1.5 pl-4 lg:text-xl text-lg font-bold text-white'>+Add Credit</Link>
|
||||
</div>
|
||||
<div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
|
||||
{
|
||||
item.action_type != 'AC_AD_FD_ONLY' ?
|
||||
<Link to='transfer-fund' className='px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative bg-purple lg:text-xl text-lg font-bold text-white'>Transfer</Link>:''
|
||||
}
|
||||
<Link to='add-fund' className='px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative bg-green lg:text-xl text-lg font-bold text-white'>
|
||||
<span className="">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="38"
|
||||
height="38" viewBox="0 0 42 42" fill="none"><path
|
||||
d="M21 0C16.8466 0 12.7865 1.23163 9.33303 3.53914C5.8796 5.84665 3.18798 9.1264 1.59854 12.9636C0.00909901 16.8009 -0.406771 21.0233 0.403518 25.0969C1.21381 29.1705 3.21386 32.9123 6.15077 35.8492C9.08767 38.7861 12.8295 40.7862 16.9031 41.5965C20.9767 42.4068 25.1991 41.9909 29.0364 40.4015C32.8736 38.812 36.1534 36.1204 38.4609 32.667C40.7684 29.2135 42 25.1534 42 21C41.994 15.4323 39.7796 10.0944 35.8426 6.15741C31.9056 2.22045 26.5677 0.00602189 21 0ZM28 22.75H22.75V28C22.75 28.4641 22.5656 28.9092 22.2374 29.2374C21.9093 29.5656 21.4641 29.75 21 29.75C20.5359 29.75 20.0908 29.5656 19.7626 29.2374C19.4344 28.9092 19.25 28.4641 19.25 28V22.75H14C13.5359 22.75 13.0908 22.5656 12.7626 22.2374C12.4344 21.9092 12.25 21.4641 12.25 21C12.25 20.5359 12.4344 20.0907 12.7626 19.7626C13.0908 19.4344 13.5359 19.25 14 19.25H19.25V14C19.25 13.5359 19.4344 13.0908 19.7626 12.7626C20.0908 12.4344 20.5359 12.25 21 12.25C21.4641 12.25 21.9093 12.4344 22.2374 12.7626C22.5656 13.0908 22.75 13.5359 22.75 14V19.25H28C28.4641 19.25 28.9093 19.4344 29.2374 19.7626C29.5656 20.0907 29.75 20.5359 29.75 21C29.75 21.4641 29.5656 21.9092 29.2374 22.2374C28.9093 22.5656 28.4641 22.75 28 22.75Z"
|
||||
fill="white"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className='text-white'>Add Credit</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
:
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,15 +1,23 @@
|
||||
import React, { useState } from "react";
|
||||
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);
|
||||
@@ -25,17 +33,51 @@ export default function ManageInterestOffer(props) {
|
||||
const filterHandler = (value) => {
|
||||
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
|
||||
},[])
|
||||
return (
|
||||
<Layout>
|
||||
<CommonHead
|
||||
commonHeadData={props.commonHeadData}
|
||||
/>
|
||||
<div className="notification-page w-full mb-10">
|
||||
<div className="notification-wrapper w-full">
|
||||
<div className="notification-wrapper w-full mb-4">
|
||||
{/* heading */}
|
||||
<div className="sm:flex justify-between items-center mb-6">
|
||||
<div className="mb-5 sm:mb-0">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
<div className="sm:flex justify-between items-center mb-3">
|
||||
<div className="mb-3 sm:mb-0">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
<span className={`${selectTab === "today" ? "block" : "hidden"}`}>Manage Offer Interest</span>
|
||||
</h1>
|
||||
</div>
|
||||
@@ -43,33 +85,10 @@ export default function ManageInterestOffer(props) {
|
||||
</div>
|
||||
|
||||
{/* manage offer section */}
|
||||
<div className="w-full mb-8 p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow">
|
||||
{/* <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(props.offerDetails.pathname, { 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-sm lg:text-xl font-bold text-sky-blue dark:text-white tracking-wide">
|
||||
{props.offerDetails?.offer_code && props.offerDetails.offer_code}
|
||||
</h1>
|
||||
</div> */}
|
||||
|
||||
<div className="my-2 w-full md:grid gap-5 grid-cols-3">
|
||||
<div className="w-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
|
||||
<div className="my-2 w-full sm:grid gap-5 grid-cols-4">
|
||||
{/* Detail section */}
|
||||
<div className="w-full mb-5 lg:mb-0 col-span-2">
|
||||
<div className="w-full mb-5 lg:mb-0 col-span-3">
|
||||
<div className="w-full flex justify-start space-x-3 items-center">
|
||||
<button
|
||||
type="button"
|
||||
@@ -92,114 +111,186 @@ export default function ManageInterestOffer(props) {
|
||||
{props.offerDetails?.offer_code && props.offerDetails.offer_code}
|
||||
</h1>
|
||||
</div>
|
||||
<h1 className="my-5 text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide border">
|
||||
<h1 className="my-3 text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide border">
|
||||
{props.offerDetails?.title}
|
||||
</h1>
|
||||
<div className="flex items-center">
|
||||
<div className="w-3/4">
|
||||
<div className="my-5 flex items-center gap-1">
|
||||
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
|
||||
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy name</span>
|
||||
</div>
|
||||
<div className="my-5 flex items-center gap-1">
|
||||
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
|
||||
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy Date</span>
|
||||
</div>
|
||||
<div className="my-5 flex items-center gap-1">
|
||||
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
|
||||
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
|
||||
</div>
|
||||
<div className="my-5 flex items-center gap-1">
|
||||
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
|
||||
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
|
||||
</div>
|
||||
<div className="my-5 flex items-center gap-1">
|
||||
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
|
||||
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
|
||||
</div>
|
||||
<div className="my-5 flex items-center gap-1">
|
||||
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
|
||||
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
|
||||
<span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-1/4 flex flex-col justify-center items-center gap-10">
|
||||
<div className="w-full">
|
||||
{/* switch button */}
|
||||
<div className="my-1 flex items-center border-b border-slate-300">
|
||||
<button
|
||||
type="button"
|
||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
name="info"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
|
||||
tab == "info" ? "border-sky-blue" : "border-slate-300"
|
||||
} tracking-wide transition duration-200`}
|
||||
>
|
||||
<span className="text-white">Accept</span>
|
||||
Info
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
|
||||
name="message"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
|
||||
tab == "message" ? "border-sky-blue" : "border-slate-300"
|
||||
} tracking-wide transition duration-200`}
|
||||
>
|
||||
<span className="text-gradient">Reject</span>
|
||||
Messages ({messageList.data.length})
|
||||
</button>
|
||||
</div>
|
||||
{/* END OF switch button */}
|
||||
|
||||
{/* info tab */}
|
||||
{tab == 'info' ?
|
||||
<div className="info-details w-full border-t">
|
||||
<div className="my-3 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
|
||||
</div>
|
||||
<div className="my-3 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
|
||||
</div>
|
||||
<div className="my-3 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_completed ? props.offerDetails?.client_jobs_completed :0}</span>
|
||||
</div>
|
||||
<div className="my-0 md:my-3 block md:flex items-center gap-10">
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_active ? props.offerDetails?.client_jobs_active:0}</span>
|
||||
</div>
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_missed ? props.offerDetails?.client_jobs_missed:0}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="block md:flex items-center gap-10">
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_percent_completion ? props.offerDetails?.client_percent_completion:0}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_offers_pending ? props.offerDetails?.client_offers_pending:0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="message-details w-full border-t">
|
||||
<div className="my-0 w-full flex items-center gap-5">
|
||||
<div className="w-3/4">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">Message to dummy name</p>
|
||||
<textarea rows={2} autoFocus={true} className="p-2 text-base font-bold text-dark-gray dark:text-white dark:bg-dark-gray border tracking-wide w-full resize-none rounded-md outline-none" />
|
||||
</div>
|
||||
<div className="w-1/4 flex flex-col justify-center items-center">
|
||||
<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">Send</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* message list */}
|
||||
<div className="min-h-[100px] max-h-[200px] overflow-y-auto">
|
||||
{currentMessageList.map((item, index)=>(
|
||||
<div key={index} className="my-2 w-full flex items-center gap-1">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
messageList?.data?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={messageList?.data}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{/* END OF Detail section */}
|
||||
|
||||
{/* message section */}
|
||||
{/* BUTTON section */}
|
||||
<div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">Message to dummy name</p>
|
||||
<div className="my-4 w-full">
|
||||
<textarea rows={5} className="p-4 text-base font-bold text-dark-gray dark:text-white tracking-wide w-full resize-none rounded-md outline-none" />
|
||||
<div className="w-full flex justify-end items-center">
|
||||
<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">Send</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* message list */}
|
||||
{currentMessageList.map((item, index)=>(
|
||||
<div key={index} className="my-3 w-full">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
|
||||
</div>
|
||||
))}
|
||||
<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>
|
||||
}
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
messageList?.data?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={messageList?.data}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION 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 message section */}
|
||||
{/* END of BUTTON section */}
|
||||
</div>
|
||||
</div>
|
||||
{/* END OF manage offer section */}
|
||||
</div>
|
||||
|
||||
<div className="w-full overflow-x-auto">
|
||||
<div className="notification-page w-full mb-10">
|
||||
<div className="notification-wrapper w-full">
|
||||
{/* heading */}
|
||||
<div className="sm:flex justify-between items-center mb-6">
|
||||
<div className="mb-5 sm:mb-0">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
<span className={`${selectTab === "today" ? "block" : "hidden"}`}>Others interested in this Task</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
{/* heading */}
|
||||
<div className="sm:flex justify-between items-center mb-3">
|
||||
<div className="mb-3 sm:mb-0">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
<span className={`${selectTab === "today" ? "block" : "hidden"}`}>Others interested in this Task</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<OthersInterestedTable othersInterestedList={props.othersInterestedList} />
|
||||
|
||||
@@ -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 || ""
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -32,7 +32,7 @@ export default function OthersInterestTable({othersInterestedList, 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 p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -827,7 +827,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
type="button"
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Cannected
|
||||
Connected
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+10
-1
@@ -9,7 +9,16 @@
|
||||
font-family: "Product Sans";
|
||||
src: url("./assets/fonts/Product Sans Bold.ttf");
|
||||
}
|
||||
|
||||
.wallet-box{
|
||||
background-color: aliceblue;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.bal-col1{
|
||||
width: 110px;
|
||||
}
|
||||
.bg-green{
|
||||
background-color: darkgreen;
|
||||
}
|
||||
.referral{
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -9,7 +9,7 @@ export default function MyReviewDueJobsPage() {
|
||||
let navigate = useNavigate()
|
||||
|
||||
let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
|
||||
let { othersInterestedTable } = useSelector((state) => state.tableReload);
|
||||
let { othersInterestedTable } = useSelector((state) => state.tableReload); // FOR OTHERS INTERESTED TABLE RELOAD
|
||||
|
||||
const apiCall = new usersService();
|
||||
const [othersInterestedList, setOthersInterestedList] = useState({loading: true, data: []})
|
||||
|
||||
Reference in New Issue
Block a user