Compare commits
25 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
de3bfa2541 | ||
 ameye
|
71152f7a05 | ||
|
victorAnumudu
|
8cbdb1b8a6 | ||
|
ameye
|
abbf60ad48 | ||
|
Ebube
|
c956befed9 | ||
|
Ebube
|
a5dbeaecbf | ||
|
CHIEFSOFT\ameye
|
0b0b563dda | ||
|
CHIEFSOFT\ameye
|
f8a3e42fe6 | ||
|
CHIEFSOFT\ameye
|
ced88fa497 | ||
|
ameye
|
89e2527ba6 | ||
|
victorAnumudu
|
9e6b59624f | ||
|
ameye
|
1b6b4f17b0 | ||
|
victorAnumudu
|
8a9ec35994 | ||
 tokslaw
|
fa2102eb61 | ||
|
tokslaw
|
bf73461c64 | ||
|
victorAnumudu
|
5ffa6eb691 | ||
|
Ebube
|
5a0d8aebdb | ||
|
Ebube
|
e8ed10ddbf | ||
|
ameye
|
cca423a41c | ||
|
victorAnumudu
|
6a6900a62b | ||
|
ameye
|
c6b4fcc43d | ||
|
ameye
|
29510c3b85 | ||
|
Ebube
|
c8d6d3d7d4 | ||
|
Ebube
|
593ea74388 | ||
|
Ebube
|
d81b9970b3 |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
@@ -43,7 +43,7 @@ export default function CollectionTab({ className, products }) {
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products.length}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<CollectionCard key={datas.uniqKey} collectionData={datas} />
|
||||
|
||||
@@ -42,7 +42,9 @@ export default function CreateSaleSlider({
|
||||
{/* heading */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">Create for Sell</h1>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
Create for Sell
|
||||
</h1>
|
||||
</div>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
<button onClick={nextHandler} type="button">
|
||||
@@ -89,7 +91,7 @@ export default function CreateSaleSlider({
|
||||
<div className="trending-products relative w-full">
|
||||
<SliderCom selector={trendingSlider} settings={settings}>
|
||||
{products &&
|
||||
products.length > 0 &&
|
||||
products?.length > 0 &&
|
||||
products.map((item) => (
|
||||
<ProductCardStyleTwo
|
||||
key={item.id}
|
||||
|
||||
@@ -49,7 +49,9 @@ export default function CreatedBidsSlider({
|
||||
{/* heading */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">Create for Bits</h1>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
Create for Bits
|
||||
</h1>
|
||||
</div>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
<button onClick={nextHandler} type="button">
|
||||
@@ -96,7 +98,7 @@ export default function CreatedBidsSlider({
|
||||
<div className="trending-products relative w-full">
|
||||
<SliderCom selector={trendingSlider} settings={settings}>
|
||||
{products &&
|
||||
products.length > 0 &&
|
||||
products?.length > 0 &&
|
||||
products.map((item) => (
|
||||
<ProductCardStyleOne
|
||||
key={item.id}
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function OnSaleTab({ className, products }) {
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products.length}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<ProductCardStyleTwo key={datas.id} datas={datas} />
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function OwnTab({ className, products }) {
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products.length}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<ProductCardStyleOne key={datas.id} datas={datas} />
|
||||
|
||||
@@ -113,7 +113,7 @@ export default function SignUp() {
|
||||
return (
|
||||
<>
|
||||
<div className="layout-wrapper login">
|
||||
<div className="main-wrapper w-full xl:h-screen h-full xl:py-10 py-12 overflow-y-auto">
|
||||
<div className="main-wrapper login-wrapper w-full xl:h-screen h-full xl:py-10 py-12 overflow-y-auto">
|
||||
<div className=" h-full">
|
||||
<div className="flex-1 flex justify-center items-center">
|
||||
<div className="w-full">
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function CollectionTab({ className, products }) {
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products.length}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<CollectionCard key={datas.uniqKey} collectionData={datas} />
|
||||
|
||||
@@ -42,7 +42,9 @@ export default function CreateSaleSlider({
|
||||
{/* heading */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">Create for Sell</h1>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
Create for Sell
|
||||
</h1>
|
||||
</div>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
<button onClick={nextHandler} type="button">
|
||||
@@ -89,7 +91,7 @@ export default function CreateSaleSlider({
|
||||
<div className="trending-products relative w-full">
|
||||
<SliderCom selector={trendingSlider} settings={settings}>
|
||||
{products &&
|
||||
products.length > 0 &&
|
||||
products?.length > 0 &&
|
||||
products.map((item) => (
|
||||
<ProductCardStyleTwo
|
||||
key={item.id}
|
||||
|
||||
@@ -49,7 +49,9 @@ export default function CreatedBidsSlider({
|
||||
{/* heading */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">Create for Bits</h1>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
Create for Bits
|
||||
</h1>
|
||||
</div>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
<button onClick={nextHandler} type="button">
|
||||
@@ -96,7 +98,7 @@ export default function CreatedBidsSlider({
|
||||
<div className="trending-products relative w-full">
|
||||
<SliderCom selector={trendingSlider} settings={settings}>
|
||||
{products &&
|
||||
products.length > 0 &&
|
||||
products?.length > 0 &&
|
||||
products.map((item) => (
|
||||
<ProductCardStyleOne
|
||||
key={item.id}
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function OnSaleTab({ className, products }) {
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products.length}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<ProductCardStyleTwo key={datas.id} datas={datas} />
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function OwnTab({ className, products }) {
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products.length}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<ProductCardStyleOne key={datas.id} datas={datas} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import localImgLoad from "../../lib/localImgLoad";
|
||||
@@ -6,6 +6,7 @@ import CountDown from "../Helpers/CountDown";
|
||||
import Icons from "../Helpers/Icons";
|
||||
|
||||
export default function ProductCardStyleOne({ datas, hidden = false }) {
|
||||
const [imageUrl, setImageUrl] = useState("");
|
||||
const [addFavorite, setValue] = useState(false);
|
||||
const [options, setOption] = useState(false);
|
||||
const favoriteHandler = () => {
|
||||
@@ -17,6 +18,8 @@ export default function ProductCardStyleOne({ datas, hidden = false }) {
|
||||
toast.warn("Remove to Favorite List");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white p-3 pb rounded-2xl">
|
||||
<div className="content">
|
||||
|
||||
@@ -11,6 +11,7 @@ export default function FamilyManage() {
|
||||
let location = useLocation();
|
||||
let navigate = useNavigate();
|
||||
let accountDetails = location?.state;
|
||||
|
||||
// tab handler
|
||||
const filterHandler = (value) => {
|
||||
setValue(value);
|
||||
|
||||
@@ -0,0 +1,263 @@
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import ModalCom from '../../Helpers/ModalCom'
|
||||
import Detail from '../../jobPopout/popoutcomponent/Detail'
|
||||
import usersService from '../../../services/UsersService'
|
||||
import LoadingSpinner from '../../Spinners/LoadingSpinner'
|
||||
import { PriceFormatter } from '../../Helpers/PriceFormatter'
|
||||
|
||||
function AssignTaskPopout({action, situation, familyDetails}) {
|
||||
const apiCall = new usersService()
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''}) // HOLDS RESPONSE FOR SENDING API REQUEST
|
||||
|
||||
let [familyTask, setFamilyTask] = useState({loading: true, data: []})
|
||||
|
||||
let [taskType, setTaskType] = useState('select') // SWITCHES BTW SELECT TASK AND NEW TASK
|
||||
|
||||
let [activeTask, setActiveTask] = useState({id: 0, data: {}}) // HOLDS SELECTED TASK
|
||||
|
||||
const switchTaskType = ({target:{value}}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK
|
||||
setTaskType(value)
|
||||
}
|
||||
|
||||
const handleActiveTask = (id=0, data={}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK
|
||||
setActiveTask({id, data})
|
||||
}
|
||||
|
||||
const assignFamilyTask = () => {
|
||||
setRequestStatus({loading: true, status: false, message: ''})
|
||||
let reqData = {}
|
||||
if(taskType == 'select'){ // RUNS HERE IF TASK TYPE IS SELECT
|
||||
if(!Object.keys(activeTask.data).length){
|
||||
setRequestStatus({loading: false, status: false, message: 'No Task is seleted'})
|
||||
return setTimeout(()=>{
|
||||
setRequestStatus({loading: false, status: false, message: ''})
|
||||
}, 3000)
|
||||
}
|
||||
reqData = { // API PAYLOADS
|
||||
job_id: activeTask.data?.job_id,
|
||||
job_uid: activeTask.data?.job_uid,
|
||||
family_uid: familyDetails.uid,
|
||||
job_description: activeTask.data?.description,
|
||||
assign_mode: 110011,
|
||||
}
|
||||
|
||||
apiCall.assignFamilyTask(reqData).then(res => {
|
||||
if(res.status != 200 || res.data.internal_return < 0){
|
||||
setRequestStatus({loading: false, status: false, message: 'failed to assign task'})
|
||||
return setTimeout(()=>{
|
||||
setRequestStatus({loading: false, status: false, message: ''})
|
||||
}, 5000)
|
||||
}
|
||||
setRequestStatus({loading: false, status: true, message: 'action successful'})
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({loading: false, status: false, message: ''})
|
||||
action() // FUNCTION THAT CLOSES THE MODAL BOX
|
||||
}, 5000)
|
||||
}).catch(err => {
|
||||
setRequestStatus({loading: false, status: false, message: 'An Error occured, try again'})
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({loading: false, status: false, message: ''})
|
||||
}, 5000)
|
||||
})
|
||||
}
|
||||
|
||||
if(taskType == 'new'){ // RUNS HERE IF TASK TYPE IS NEW TASK
|
||||
console.log('TESTING')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
const reqData = {
|
||||
limit: 30,
|
||||
offset: 0,
|
||||
job_type: 'FAMILY',
|
||||
action: 13005
|
||||
}
|
||||
apiCall.getMyJobList(reqData).then(res => {
|
||||
setFamilyTask({loading: false, data: res?.data?.result_list})
|
||||
if(res?.data?.result_list?.length){
|
||||
setActiveTask(prev => ({...prev, data:res?.data?.result_list[0]}))
|
||||
}
|
||||
}).catch(err => {
|
||||
setFamilyTask({loading: false, data: []})
|
||||
console.log('Error', err)
|
||||
})
|
||||
},[])
|
||||
return (
|
||||
<>
|
||||
<ModalCom
|
||||
action={action}
|
||||
situation={situation}
|
||||
>
|
||||
<div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
||||
<div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Assign task to {familyDetails?.firstname}
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
onClick={action}
|
||||
>
|
||||
<svg
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 36 36"
|
||||
fill="none"
|
||||
className="fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
|
||||
fill=""
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
<path
|
||||
d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
|
||||
fill="#"
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{familyTask.loading ?
|
||||
<div className='h-[100px] w-full flex justify-center items-center'>
|
||||
<LoadingSpinner color='sky-blue' size='16' />
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
<div className="job-action-modal-body w-full md:grid md:grid-cols-2">
|
||||
<div className="p-4">
|
||||
<div className="mb-2 w-full flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 text-sky-blue text-base">
|
||||
<input type="radio" name='task-type' value='select' className="w-[20px] h-[20px] cursor-pointer" checked={taskType=='select'} onChange={switchTaskType}/>
|
||||
<span>Select Task</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sky-blue text-base">
|
||||
<input type="radio" name='task-type' value='new' className="w-[20px] h-[20px] cursor-pointer" checked={taskType=='new'} onChange={switchTaskType}/>
|
||||
<span>New Task</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-4 w-full h-[400px] overflow-y-auto bg-slate-100'>
|
||||
{
|
||||
taskType == 'select' ?
|
||||
familyTask?.data?.length ?
|
||||
familyTask?.data?.map((item, index)=>(
|
||||
<div key={item.job_uid} className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer" onClick={()=>handleActiveTask(item.job_uid, item)}>
|
||||
<input
|
||||
type="radio"
|
||||
name='task-list'
|
||||
checked={(activeTask.id == item.job_uid) || (activeTask.id==index)&& true}
|
||||
onChange={()=>handleActiveTask(item.job_uid, item)}
|
||||
className="w-[15px] h-[15px] cursor-pointer"
|
||||
/>
|
||||
<p className="text-dark-gray tracking-wide">{item?.title}</p>
|
||||
</div>
|
||||
))
|
||||
:
|
||||
<p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center">No Task found!</p>
|
||||
:
|
||||
<p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center">SPACE FOR NEW TASK</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{familyTask?.data?.length > 0 ?
|
||||
<div className="p-4">
|
||||
<div className="w-full">
|
||||
<p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">{activeTask?.data?.title}</p>
|
||||
<div className="my-3">
|
||||
<Detail label="Description" value={activeTask?.data?.description} />
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<div className="my-3 w-full flex items-center gap-1">
|
||||
<label className='text-slate-900 dark:text-white tracking-wide font-semibold'>Price</label>
|
||||
<p className='p-1 text-sm text-slate-900 dark:text-white'>{PriceFormatter(activeTask?.data?.price*0.01, activeTask?.data?.currency, activeTask?.data?.curreny_code)}</p>
|
||||
</div>
|
||||
|
||||
<div className="my-3 w-full flex items-center gap-1">
|
||||
<label className='text-slate-900 dark:text-white tracking-wide font-semibold'>Timeline</label>
|
||||
<p className='p-1 text-sm text-slate-900 dark:text-white'>{`${activeTask?.data?.timeline_days} day(s)`}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="my-3 sm:flex items-center">
|
||||
<Detail
|
||||
label="Created"
|
||||
value={`Dummy, no value found for created!`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="my-3">
|
||||
<label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
|
||||
Delivery Detail
|
||||
</label>
|
||||
<textarea
|
||||
className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
|
||||
rows="5"
|
||||
style={{ resize: "none" }}
|
||||
value={activeTask?.data?.job_detail}
|
||||
readOnly
|
||||
// onChange={handleInputChange}
|
||||
/>
|
||||
{/* <p>{}</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<></>
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* BTN */}
|
||||
<div className='p-2 border-t-2 flex justify-end items-center gap-3'>
|
||||
{/* error or success display */}
|
||||
{requestStatus.message != "" &&
|
||||
(!requestStatus.status ? (
|
||||
<div
|
||||
className={`relative p-2 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-2 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}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
{/* End of error or success display */}
|
||||
<button
|
||||
disabled={requestStatus.loading}
|
||||
onClick={action} type="button"
|
||||
className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
|
||||
>
|
||||
<span className='text-gradient'>Close</span>
|
||||
</button>
|
||||
<div className=''>
|
||||
{requestStatus.loading ?
|
||||
<LoadingSpinner color='sky-blue' size='8' />
|
||||
:
|
||||
<button
|
||||
type="button"
|
||||
disabled={requestStatus.loading}
|
||||
onClick={assignFamilyTask}
|
||||
className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
|
||||
>
|
||||
Assign
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</ModalCom>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AssignTaskPopout
|
||||
@@ -14,6 +14,9 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import profile from "../../../assets/images/profile-info-profile.png";
|
||||
import FamilyTasks from "./FamilyTasks";
|
||||
|
||||
import AssignTaskPopout from '../FamilyPopout/AssignTaskPopout'
|
||||
|
||||
|
||||
export default function FamilyManageTabs({
|
||||
className,
|
||||
accountDetails,
|
||||
@@ -50,6 +53,13 @@ export default function FamilyManageTabs({
|
||||
const tabHandler = (value) => {
|
||||
setTab(value);
|
||||
};
|
||||
|
||||
let [familyTaskPopout, setFamilyTaskPopout] = useState(false) // DETERMINES WHEN FAMILY ADD TASK POPOUT DISPLAYS
|
||||
|
||||
const familyPopUpHandler = () => { // FUNCTION TO CHANGE THE FAMILY ADD TASK POPOIUT STATE
|
||||
setFamilyTaskPopout(prev => !prev)
|
||||
}
|
||||
|
||||
// For profile uploads
|
||||
const [profileImg, setProfileImg] = useState(profile);
|
||||
// profile img
|
||||
@@ -120,7 +130,7 @@ export default function FamilyManageTabs({
|
||||
className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
>
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg">
|
||||
<Suspense
|
||||
fallback={
|
||||
@@ -141,21 +151,31 @@ export default function FamilyManageTabs({
|
||||
</div>
|
||||
<div className="col-span-3 justify-self-end h-full w-full">
|
||||
<div className="flex flex-col w-full">
|
||||
<ul className="flex-[0.1] flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
|
||||
{tabs.map(({ name, id }) => (
|
||||
<li
|
||||
onClick={() => tabHandler(name)}
|
||||
className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
|
||||
tab === name
|
||||
? "text-purple border-r"
|
||||
: " text-thin-light-gray"
|
||||
}`}
|
||||
key={id}
|
||||
>
|
||||
<h1>{name}</h1>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="w-full pr-8 flex items-center gap-1">
|
||||
<ul className="flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
|
||||
{tabs.map(({ name, id }) => (
|
||||
<li
|
||||
onClick={() => tabHandler(name)}
|
||||
className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
|
||||
tab === name
|
||||
? "text-purple border-r"
|
||||
: " text-thin-light-gray"
|
||||
}`}
|
||||
key={id}
|
||||
>
|
||||
<h1>{name}</h1>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button
|
||||
type="button"
|
||||
onClick={familyPopUpHandler}
|
||||
className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Add task
|
||||
{/* {accountDetails?.firstname} */}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-[0.9] lg:min-h-[450px] h-full">
|
||||
{/* Your content here */}
|
||||
{tabs.map(({ name, id }) => {
|
||||
@@ -171,6 +191,7 @@ export default function FamilyManageTabs({
|
||||
className={className}
|
||||
loader={details.familyTasks.loading}
|
||||
familyData={details.familyTasks.data}
|
||||
accountDetails={accountDetails}
|
||||
/>
|
||||
)}
|
||||
{name === "Account" && (
|
||||
@@ -191,6 +212,15 @@ export default function FamilyManageTabs({
|
||||
</div>
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
{/* FAMILY ADD TASK POPOUT */}
|
||||
{familyTaskPopout &&
|
||||
<AssignTaskPopout
|
||||
action={familyPopUpHandler}
|
||||
situation={familyTaskPopout}
|
||||
familyDetails={details.familyDetails.data}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,8 +6,11 @@ import PaginatedList from "../../Pagination/PaginatedList";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import Icons from "../../Helpers/Icons";
|
||||
import { PriceFormatter } from "../../Helpers/PriceFormatter";
|
||||
import ModalCom from "../../Helpers/ModalCom";
|
||||
import Detail from "../../jobPopout/popoutcomponent/Detail";
|
||||
|
||||
export default function FamilyTasks({ familyData, className, loader }) {
|
||||
|
||||
export default function FamilyTasks({ familyData, className, loader, accountDetails }) {
|
||||
let navigate = useNavigate();
|
||||
let { pathname } = useLocation();
|
||||
|
||||
@@ -34,7 +37,6 @@ export default function FamilyTasks({ familyData, className, loader }) {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{" "}
|
||||
{familyData && familyData?.result_list && (
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
|
||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
@@ -105,9 +107,8 @@ export default function FamilyTasks({ familyData, className, loader }) {
|
||||
state: {
|
||||
...value,
|
||||
pathname,
|
||||
dueDate,
|
||||
thePrice,
|
||||
},
|
||||
accountDetails
|
||||
}
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
// export const PriceFormatter = (price, currency, currencyName) => {
|
||||
// const supportedCurrencies = ["USD", "EUR", "GBP"];
|
||||
@@ -17,32 +17,35 @@ import React from 'react'
|
||||
// return `${formatter.format(price)} ${displayCurrencyName}`;
|
||||
// };
|
||||
|
||||
|
||||
export const PriceFormatter = (price='00', currency='', currencyName='') => {
|
||||
export const PriceFormatter = (
|
||||
price = "00",
|
||||
currency = "",
|
||||
currencyName = ""
|
||||
) => {
|
||||
// Convert the number to a string
|
||||
let numStr = String(price);
|
||||
let numStr = String(price);
|
||||
|
||||
// Split the string into integer and decimal parts
|
||||
let parts = numStr.split('.');
|
||||
let integerPart = parts[0];
|
||||
let decimalPart = parts[1] || '';
|
||||
// Split the string into integer and decimal parts
|
||||
let parts = numStr.split(".");
|
||||
let integerPart = parts[0] || "";
|
||||
let decimalPart = parts[1] || "";
|
||||
|
||||
// Add thousands separators to the integer part
|
||||
// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
let formattedInteger = integerPart;
|
||||
// Add thousands separators to the integer part
|
||||
// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
let formattedInteger = integerPart;
|
||||
|
||||
// Truncate or pad the decimal part to two decimal points
|
||||
let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, '0');
|
||||
// Truncate or pad the decimal part to two decimal points
|
||||
let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
|
||||
|
||||
// Combine the formatted integer and decimal parts
|
||||
// let formattedNumber = formattedInteger + '.' + formattedDecimal;
|
||||
// Combine the formatted integer and decimal parts
|
||||
// let formattedNumber = formattedInteger + '.' + formattedDecimal;
|
||||
|
||||
// return formattedNumber;
|
||||
// return formattedNumber;
|
||||
return (
|
||||
<span className='text-sm flex items-center'>
|
||||
<sup>{currency || currencyName || ''}</sup>
|
||||
<span className='px-1 font-bold text-lg'>{formattedInteger}</span>
|
||||
<sup>{formattedDecimal}</sup>
|
||||
<span className="text-sm flex items-center">
|
||||
<sup>{currency || currencyName || ""}</sup>
|
||||
<span className="px-1 font-bold text-lg">{formattedInteger || ""}</span>
|
||||
<sup>{formattedDecimal || ""}</sup>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,7 +3,8 @@ import datas from "../../data/product_data.json";
|
||||
import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
|
||||
import CommonHead from "../UserHeader/CommonHead";
|
||||
import FamilyActiveLSlde from "./FamilyActiveLSlde";
|
||||
|
||||
import OverviewSection from "../ActiveBids/OverviewSection";
|
||||
import ParentWaiting from "../MyPendingJobs/ParentWaiting";
|
||||
|
||||
|
||||
export default function FamilyDash(props) {
|
||||
@@ -18,7 +19,8 @@ export default function FamilyDash(props) {
|
||||
commonHeadData={props.commonHeadData}
|
||||
/>
|
||||
<FamilyActiveLSlde trending={trending} className="mb-10" />
|
||||
<TopSellerTopBuyerSliderSection className="mb-10" />
|
||||
{/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
|
||||
<ParentWaiting className="mb-10" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -3,11 +3,10 @@ import slider2 from "../../assets/images/slider-2.jpg";
|
||||
import HomeBannerOffersCard from "../Cards/HomeBannerOffersCard";
|
||||
|
||||
export default function HomeSliders(props) {
|
||||
// console.log("BANNER LIST IN HomeSliders->", props.bannerList);
|
||||
// debugger;
|
||||
return (
|
||||
<>
|
||||
<div className="hero-slider relative 2xl:w-[600px] xl:w-[500px] lg:w-[420px] w-full mb-2 lg:mb-0 ">
|
||||
<div className="hero-slider relative 2xl:w-[600px] xl:w-[400px] lg:w-[420px] w-full mb-2 lg:mb-0 ">
|
||||
<div className="w-full">
|
||||
<SliderCom settings={props.settings}>
|
||||
{props.bannerList?.length <= 0 && (
|
||||
|
||||
@@ -259,8 +259,13 @@ function ActiveJobs(props) {
|
||||
<button
|
||||
type="button"
|
||||
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
||||
onClick={() =>
|
||||
navigate(props.details.pathname, { replace: true })
|
||||
onClick={() =>{
|
||||
if(props.details.pathname == '/manage-family'){
|
||||
navigate(props.details.pathname, {state: { ...props.details.accountDetails }}, { replace: true })
|
||||
}else{
|
||||
navigate(props.details.pathname, { replace: true })
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import activeAidsBanner from "../../assets/images/kids-waiting.jpg";
|
||||
import HeroUser from "../../assets/images/hero-user.png";
|
||||
import CountDown from "../Helpers/CountDown";
|
||||
import ParentWaitingTable from "./ParentWaitingTable";
|
||||
|
||||
export default function ParentWaiting({ className }) {
|
||||
const [addFavorite, setValue] = useState(false);
|
||||
const favoriteHandler = () => {
|
||||
if (!addFavorite) {
|
||||
setValue(true);
|
||||
toast.success("Added to Favorite List");
|
||||
} else {
|
||||
setValue(false);
|
||||
toast.warn("Remove to Favorite List");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className={`overview-section w-full ${className || ""}`}>
|
||||
<div>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">Waiting for Parent to Get Started...</h1>
|
||||
</div>
|
||||
<div className="overview-section-wrapper lg:flex lg:h-[494px] lg:pace-x-2">
|
||||
<div className="lg:w-[540px] w-full h-full bg-white dark:bg-dark-white rounded-2xl overflow-hidden mb-10">
|
||||
<img
|
||||
src={activeAidsBanner}
|
||||
alt="banner"
|
||||
className="w-full lg:h-full h-[400px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="overview-countdown lg:w-2/5 w-full h-full flex flex-col justify-between lg:pl-11 rounded-2xl bg-white dark:bg-dark-white ">
|
||||
{<ParentWaitingTable />}
|
||||
|
||||
{/* <div className="lg:mb-0 mb-3">*/}
|
||||
{/* <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
|
||||
{/* Lock and Lob x Fiesta Spurs*/}
|
||||
{/* </h1>*/}
|
||||
{/* <span className="text-[18px] font-thin tracking-wide text-dark-gray dark:text-white">*/}
|
||||
{/* ID : 2320382*/}
|
||||
{/*</span>*/}
|
||||
{/* </div>*/}
|
||||
{/* /!* user *!/*/}
|
||||
{/* <div className="flex items-center space-x-3 lg:mb-0 mb-3">*/}
|
||||
{/* <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">*/}
|
||||
{/* <img src={HeroUser} alt="" />*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="text-xl tracking-wide font-bold antise text-dark-gray dark:text-white">*/}
|
||||
{/* Brokln Simons*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="text-sm tracking-wide text-dark-gray dark:text-white">*/}
|
||||
{/* @broklinslam_75*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,339 @@
|
||||
import React, { useState } from "react";
|
||||
import transaction1 from "../../assets/images/recent-transation-1.png";
|
||||
import transaction2 from "../../assets/images/recent-transation-2.png";
|
||||
import transaction3 from "../../assets/images/recent-transation-3.png";
|
||||
|
||||
export default function ParentWaitingTable() {
|
||||
const transationFilterData = [
|
||||
{
|
||||
id: 1,
|
||||
name: "all",
|
||||
uniqueId: Math.random(),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "send",
|
||||
uniqueId: Math.random(),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "recent",
|
||||
uniqueId: Math.random(),
|
||||
},
|
||||
];
|
||||
const [filterActive, setValue] = useState(transationFilterData[0].id);
|
||||
const filterHander = (value) => {
|
||||
setValue(value);
|
||||
};
|
||||
return (
|
||||
<div className="rounded-2xl bg-white dark:bg-dark-white ">
|
||||
{/* heading */}
|
||||
<div className="heading sm:flex justify-between items-center">
|
||||
|
||||
<div>
|
||||
<ul className="flex space-x-5 items-center">
|
||||
{transationFilterData.map((value) => (
|
||||
<li
|
||||
onClick={() => filterHander(value.id)}
|
||||
key={value.uniqueId}
|
||||
className={`text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase ${
|
||||
filterActive === value.id ? "border-purple text-purple" : ""
|
||||
}`}
|
||||
>
|
||||
{value.name}
|
||||
</li>
|
||||
))}
|
||||
{/* <li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
|
||||
All
|
||||
</li>
|
||||
<li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
|
||||
SEND
|
||||
</li>
|
||||
<li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
|
||||
recent
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* content */}
|
||||
|
||||
{filterActive === 2 ? (
|
||||
<div className="content">
|
||||
<ul>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction2} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add BTC from Coinbase Wallet
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-824.78
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction3} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Buy Nft art from LTC
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-924.54
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
) : filterActive === 3 ? (
|
||||
<div className="content">
|
||||
<ul>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction2} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add BTC from Coinbase Wallet
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-824.78
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<div className="content">
|
||||
<ul>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction2} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add BTC from Coinbase Wallet
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-824.78
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction3} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Buy Nft art from LTC
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-924.54
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -8,7 +8,7 @@ import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
|
||||
const noTasksBg = require("../../assets/images/no-task-background.jpg");
|
||||
|
||||
export default function MyJobTable({ className, ActiveJobList }) {
|
||||
export default function MyJobTable({ className, ActiveJobList, Account }) {
|
||||
let navigate = useNavigate();
|
||||
let { pathname } = useLocation();
|
||||
|
||||
@@ -30,7 +30,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
|
||||
const navigateMarket = () => {
|
||||
setBtnLoader(true);
|
||||
setTimeout(() => {
|
||||
navigate("/market", { replace: true });
|
||||
navigate(Account == "FULL" ? "/market" : "/", { replace: true });
|
||||
setBtnLoader(false);
|
||||
}, 2500);
|
||||
};
|
||||
|
||||
@@ -143,7 +143,10 @@ export default function MyOffersTable({ className, MyActiveOffersList }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOfferPopout({ show: true, data: value });
|
||||
setOfferPopout({
|
||||
show: true,
|
||||
data: {...value, thePrice },
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 self-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import Layout from "../Partials/Layout";
|
||||
import MyJobTable from "./MyJobTable";
|
||||
import CommonHead from "../UserHeader/CommonHead";
|
||||
import TopSellerTopBuyerSliderSection from "../Home/TopSellerTopBuyerSliderSection";
|
||||
// import TopSellerTopBuyerSliderSection from "../Home/TopSellerTopBuyerSliderSection";
|
||||
import MyOffersTable from "./MyOffersTable";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
export default function MyTasks({
|
||||
MyActiveOffersList,
|
||||
ActiveJobList,
|
||||
commonHeadData,
|
||||
}) {
|
||||
const { userDetails: account_type } = useSelector(
|
||||
(state) => state?.userDetails
|
||||
);
|
||||
|
||||
const [selectTab, setValue] = useState("today");
|
||||
const filterHandler = (value) => {
|
||||
setValue(value);
|
||||
@@ -45,7 +49,7 @@ export default function MyTasks({
|
||||
className="mb-10"
|
||||
/>
|
||||
)}
|
||||
<MyJobTable ActiveJobList={ActiveJobList} />
|
||||
<MyJobTable ActiveJobList={ActiveJobList} Account={account_type} />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
@@ -4,21 +4,21 @@ import { Link } from "react-router-dom";
|
||||
// import profileBanner from "../../assets/images/profile-cover.png";
|
||||
// import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
|
||||
// import marketPlace from "../../data/marketplace_data.json";
|
||||
import LoadingSpinner from "../../components/Spinners/LoadingSpinner";
|
||||
import products from "../../data/product_data.json";
|
||||
import Layout from "../Partials/Layout";
|
||||
import ActivitiesTab from "./ActivitiesTab";
|
||||
import CollectionTab from "./CollectionTab";
|
||||
import CreatedTab from "./CreatedTab";
|
||||
import HiddenProductsTab from "./HiddenProductsTab";
|
||||
import OnSaleTab from "./OnSaleTab";
|
||||
import OwnTab from "./OwnTab";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import {
|
||||
ActivitiesTab,
|
||||
CollectionTab,
|
||||
CreatedTab,
|
||||
HiddenProductsTab,
|
||||
OnSaleTab,
|
||||
OwnTab,
|
||||
} from "./tabs";
|
||||
|
||||
export default function Resources(props) {
|
||||
// console.log("RESOURCES=>", props);
|
||||
// const mainProducts = products.datas;
|
||||
const ownProducts = products.datas;
|
||||
|
||||
// Resource Props
|
||||
const __resources = props.MyResourceData;
|
||||
|
||||
@@ -35,6 +35,8 @@ export default function Resources(props) {
|
||||
setTab(value);
|
||||
};
|
||||
|
||||
console.log("first")
|
||||
|
||||
// Category Components
|
||||
const tabComponents = {
|
||||
onsale: <OnSaleTab products={onSaleProducts} />,
|
||||
@@ -89,7 +91,7 @@ export default function Resources(props) {
|
||||
const TabList = ({ tabCategories }) => {
|
||||
return (
|
||||
<ul className="lg:flex lg:space-x-14 space-x-8">
|
||||
{tabCategories.length > 0 &&
|
||||
{tabCategories?.length > 0 &&
|
||||
tabCategories?.map((tabValue, idx) => (
|
||||
<TabItem
|
||||
key={tabValue.id}
|
||||
@@ -105,8 +107,7 @@ export default function Resources(props) {
|
||||
<>
|
||||
<Layout>
|
||||
<div className="nft-authprofile-wrapper w-full">
|
||||
{props.MyResourceData.length == 0 ||
|
||||
Object.keys(props.MyResourceData).length == 0 ? (
|
||||
{__resources.length == 0 || Object.keys(__resources).length == 0 ? (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<LoadingSpinner size={16} color="sky-blue" />
|
||||
</div>
|
||||
@@ -116,9 +117,7 @@ export default function Resources(props) {
|
||||
<div className="auth-tab-content relative mb-10">
|
||||
<div className="lg:flex justify-between">
|
||||
<div className="tab-items">
|
||||
<ul className="lg:flex lg:space-x-14 space-x-8">
|
||||
<TabList tabCategories={tab_categories} />
|
||||
</ul>
|
||||
<TabList tabCategories={tab_categories} />
|
||||
</div>
|
||||
<div style={{ transform: "translateY(-22px)" }}>
|
||||
<Link
|
||||
|
||||
+4
-5
@@ -1,8 +1,7 @@
|
||||
import React from "react";
|
||||
import dataImage1 from "../../assets/images/data-table-user-1.png";
|
||||
import dataImage2 from "../../assets/images/data-table-user-2.png";
|
||||
import dataImage3 from "../../assets/images/data-table-user-3.png";
|
||||
import dataImage4 from "../../assets/images/data-table-user-4.png";
|
||||
import dataImage1 from "../../../assets/images/data-table-user-1.png";
|
||||
import dataImage2 from "../../../assets/images/data-table-user-2.png";
|
||||
import dataImage3 from "../../../assets/images/data-table-user-3.png";
|
||||
import dataImage4 from "../../../assets/images/data-table-user-4.png";
|
||||
|
||||
export default function ActivitiesTab({ className }) {
|
||||
return (
|
||||
+3
-4
@@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import CollectionCard from "../Cards/CollectionCard";
|
||||
import DataIteration from "../Helpers/DataIteration";
|
||||
import SearchCom from "../Helpers/SearchCom";
|
||||
import CollectionCard from "../../Cards/CollectionCard";
|
||||
import DataIteration from "../../Helpers/DataIteration";
|
||||
import SearchCom from "../../Helpers/SearchCom";
|
||||
|
||||
export default function CollectionTab({ className, products }) {
|
||||
return (
|
||||
+8
-6
@@ -1,7 +1,7 @@
|
||||
import React, { useRef } from "react";
|
||||
import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import SliderCom from"../Helpers/SliderCom";
|
||||
import { useRef } from "react";
|
||||
import ProductCardStyleTwo from "../../Cards/ProductCardStyleTwo";
|
||||
import Icons from "../../Helpers/Icons";
|
||||
import SliderCom from "../../Helpers/SliderCom";
|
||||
|
||||
export default function CreateSaleSlider({
|
||||
className,
|
||||
@@ -42,7 +42,9 @@ export default function CreateSaleSlider({
|
||||
{/* heading */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">Create for Sell</h1>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
Create for Sell
|
||||
</h1>
|
||||
</div>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
<button onClick={nextHandler} type="button">
|
||||
@@ -89,7 +91,7 @@ export default function CreateSaleSlider({
|
||||
<div className="trending-products relative w-full">
|
||||
<SliderCom selector={trendingSlider} settings={settings}>
|
||||
{products &&
|
||||
products.length > 0 &&
|
||||
products?.length > 0 &&
|
||||
products.map((item) => (
|
||||
<ProductCardStyleTwo
|
||||
key={item.id}
|
||||
+8
-6
@@ -1,7 +1,7 @@
|
||||
import React, { useRef } from "react";
|
||||
import ProductCardStyleOne from "../Cards/ProductCardStyleOne";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import SliderCom from "../Helpers/SliderCom";
|
||||
import { useRef } from "react";
|
||||
import ProductCardStyleOne from "../../Cards/ProductCardStyleOne";
|
||||
import Icons from "../../Helpers/Icons";
|
||||
import SliderCom from "../../Helpers/SliderCom";
|
||||
|
||||
export default function CreatedBidsSlider({
|
||||
className,
|
||||
@@ -49,7 +49,9 @@ export default function CreatedBidsSlider({
|
||||
{/* heading */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">Create for Bits</h1>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
Create for Bits
|
||||
</h1>
|
||||
</div>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
<button onClick={nextHandler} type="button">
|
||||
@@ -96,7 +98,7 @@ export default function CreatedBidsSlider({
|
||||
<div className="trending-products relative w-full">
|
||||
<SliderCom selector={trendingSlider} settings={settings}>
|
||||
{products &&
|
||||
products.length > 0 &&
|
||||
products?.length > 0 &&
|
||||
products.map((item) => (
|
||||
<ProductCardStyleOne
|
||||
key={item.id}
|
||||
+1
-2
@@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import SearchCom from "../Helpers/SearchCom";
|
||||
import SearchCom from "../../Helpers/SearchCom";
|
||||
import CreatedBidsSlider from "./CreatedBidsSlider";
|
||||
import CreateSaleSlider from "./CreateSaleSlider";
|
||||
|
||||
+1
-2
@@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import SearchCom from "../Helpers/SearchCom";
|
||||
import SearchCom from "../../Helpers/SearchCom";
|
||||
import CreatedBidsSlider from "./CreatedBidsSlider";
|
||||
import CreateSaleSlider from "./CreateSaleSlider";
|
||||
|
||||
+4
-5
@@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo";
|
||||
import DataIteration from "../Helpers/DataIteration";
|
||||
import SearchCom from "../Helpers/SearchCom";
|
||||
import ProductCardStyleTwo from "../../Cards/ProductCardStyleTwo";
|
||||
import DataIteration from "../../Helpers/DataIteration";
|
||||
import SearchCom from "../../Helpers/SearchCom";
|
||||
|
||||
export default function OnSaleTab({ className, products }) {
|
||||
return (
|
||||
@@ -43,7 +42,7 @@ export default function OnSaleTab({ className, products }) {
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products.length}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<ProductCardStyleTwo key={datas.id} datas={datas} />
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import ProductCardStyleOne from "../Cards/ProductCardStyleOne";
|
||||
import DataIteration from "../Helpers/DataIteration";
|
||||
import SearchCom from "../Helpers/SearchCom";
|
||||
import ProductCardStyleOne from "../../Cards/ProductCardStyleOne";
|
||||
import DataIteration from "../../Helpers/DataIteration";
|
||||
import SearchCom from "../../Helpers/SearchCom";
|
||||
|
||||
export default function OwnTab({ className, products }) {
|
||||
return (
|
||||
@@ -43,7 +42,7 @@ export default function OwnTab({ className, products }) {
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products.length}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<ProductCardStyleOne key={datas.id} datas={datas} />
|
||||
@@ -0,0 +1,15 @@
|
||||
import ActivitiesTab from "./ActivitiesTab";
|
||||
import CollectionTab from "./CollectionTab";
|
||||
import CreatedTab from "./CreatedTab";
|
||||
import HiddenProductsTab from "./HiddenProductsTab";
|
||||
import OnSaleTab from "./OnSaleTab";
|
||||
import OwnTab from "./OwnTab";
|
||||
|
||||
export {
|
||||
ActivitiesTab,
|
||||
CollectionTab,
|
||||
CreatedTab,
|
||||
HiddenProductsTab,
|
||||
OnSaleTab,
|
||||
OwnTab,
|
||||
};
|
||||
@@ -8,7 +8,7 @@ export default function MainSection({ products }) {
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products.length}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<div key={datas.id + Math.random()} className="item">
|
||||
|
||||
@@ -1,64 +1,108 @@
|
||||
import React, {useState} from 'react'
|
||||
import Detail from './popoutcomponent/Detail'
|
||||
import ModalCom from '../Helpers/ModalCom'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import React, { useState } from "react";
|
||||
import Detail from "./popoutcomponent/Detail";
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import usersService from '../../services/UsersService'
|
||||
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||
import usersService from "../../services/UsersService";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
import { tableReload } from '../../store/TableReloads'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { tableReload } from "../../store/TableReloads";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
function OfferJobPopout({details, onClose, situation}) {
|
||||
const apiUrl = new usersService()
|
||||
const navigate = useNavigate()
|
||||
const dispatch = useDispatch()
|
||||
function OfferJobPopout({ details, onClose, situation }) {
|
||||
const apiUrl = new usersService();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', trigger: ''})
|
||||
const [requestStatus, setRequestStatus] = useState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
trigger: "",
|
||||
});
|
||||
|
||||
//FUNCTION TO HANDLE AN OFFER
|
||||
const handleOffer = ({target:{name}}) => {
|
||||
const handleOffer = ({ target: { name } }) => {
|
||||
const reqData = {
|
||||
// offer_result: 100,
|
||||
offer_code: details.contract,
|
||||
contract: details.contract
|
||||
}
|
||||
contract: details.contract,
|
||||
};
|
||||
|
||||
//logic to determine the button pressed and set reqDate accordingly
|
||||
if(name == 'accept'){
|
||||
setRequestStatus({loading: true, status: false, message: '', trigger: 'offer'})
|
||||
reqData.offer_result = 100
|
||||
if (name == "accept") {
|
||||
setRequestStatus({
|
||||
loading: true,
|
||||
status: false,
|
||||
message: "",
|
||||
trigger: "offer",
|
||||
});
|
||||
reqData.offer_result = 100;
|
||||
}
|
||||
if(name == 'reject'){
|
||||
setRequestStatus({loading: true, status: false, message: '', trigger: 'reject'})
|
||||
reqData.offer_result = 333
|
||||
if (name == "reject") {
|
||||
setRequestStatus({
|
||||
loading: true,
|
||||
status: false,
|
||||
message: "",
|
||||
trigger: "reject",
|
||||
});
|
||||
reqData.offer_result = 333;
|
||||
}
|
||||
|
||||
// API CALL
|
||||
apiUrl.offersResponse(reqData).then(response => {
|
||||
if(response.status != 200 || response.data.internal_return < 0){
|
||||
setRequestStatus({loading: false, status: false, message: `Unable to ${name} Offer, try again later`, trigger: ''})
|
||||
return
|
||||
}
|
||||
setRequestStatus({loading: false, status: true, message: `Offer ${name}ed Successfully`, trigger: ''})
|
||||
setTimeout(()=>{
|
||||
onClose()
|
||||
dispatch(tableReload({type:'MYTASKTABLE'}))
|
||||
navigate('/mytask', {replace:true})
|
||||
setRequestStatus({loading: false, status: false, message: '', trigger: ''})
|
||||
},2000)
|
||||
}).catch(error => {
|
||||
setRequestStatus({loading: false, status: false, message: `Opps! An Error Occurred`, trigger: ''})
|
||||
}).finally(()=>{
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({loading: false, status: false, message: '', trigger: ''})
|
||||
},5000)
|
||||
})
|
||||
}
|
||||
apiUrl
|
||||
.offersResponse(reqData)
|
||||
.then((response) => {
|
||||
if (response.status != 200 || response.data.internal_return < 0) {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: `Unable to ${name} Offer, try again later`,
|
||||
trigger: "",
|
||||
});
|
||||
return;
|
||||
}
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: true,
|
||||
message: `Offer ${name}ed Successfully`,
|
||||
trigger: "",
|
||||
});
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
dispatch(tableReload({ type: "MYTASKTABLE" }));
|
||||
navigate("/mytask", { replace: true });
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
trigger: "",
|
||||
});
|
||||
}, 2000);
|
||||
})
|
||||
.catch((error) => {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: `Opps! An Error Occurred`,
|
||||
trigger: "",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
trigger: "",
|
||||
});
|
||||
}, 5000);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation}>
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Start Task
|
||||
@@ -89,117 +133,123 @@ function OfferJobPopout({details, onClose, situation}) {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className='md:flex bg-white rounded-lg shadow-lg'>
|
||||
<div className='p-4 w-full md:w-3/4 md:border-r-2'>
|
||||
<p className='text-lg my-5 font-semibold text-slate-900 tracking-wide'>{details.title}</p>
|
||||
|
||||
<div className="md:flex bg-white rounded-lg shadow-lg">
|
||||
<div className="p-4 w-full md:w-3/4 md:border-r-2">
|
||||
<p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">
|
||||
{details.title}
|
||||
</p>
|
||||
|
||||
{/* INPUT SECTION */}
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Date'
|
||||
value={details.offer_added || 'default'}
|
||||
/>
|
||||
<div className="my-2 md:flex">
|
||||
<Detail label="Date" value={details.offer_added || "default"} />
|
||||
</div>
|
||||
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Description'
|
||||
value={details.description}
|
||||
/>
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
<Detail label="Description" value={details.description} />
|
||||
</div>
|
||||
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Offer Expire'
|
||||
value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Price'
|
||||
value={`${details.price*0.01} ${details.currency}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Duration'
|
||||
value={`${details.timeline_days} day(s)`}
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
<Detail
|
||||
label="Offer Expire"
|
||||
value={
|
||||
details.expire &&
|
||||
`${details.expire.split(" ")[0]} ${
|
||||
details.expire.split(" ")[1].split(".")[0]
|
||||
}`
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Detail'
|
||||
value={details.job_description || details.description}
|
||||
<div className="my-2 md:flex">
|
||||
<Detail
|
||||
label="Price"
|
||||
value={details.thePrice}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className='p-4 w-full md:w-1/4 h-full'>
|
||||
<div className='my-3 md:flex md:justify-center'>
|
||||
{requestStatus.loading && requestStatus.trigger == 'offer' ?
|
||||
<LoadingSpinner size={8} color='sky-blue' />
|
||||
:
|
||||
<button
|
||||
name='accept'
|
||||
onClick={handleOffer}
|
||||
disabled={requestStatus.loading}
|
||||
className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
|
||||
Accept Offer
|
||||
</button>
|
||||
}
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
<Detail
|
||||
label="Duration"
|
||||
value={`${details.timeline_days} day(s)`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-10 md:mt-20 md:flex md:justify-center'>
|
||||
{requestStatus.loading && requestStatus.trigger == 'reject' ?
|
||||
<LoadingSpinner size={8} color='sky-blue' />
|
||||
:
|
||||
<button
|
||||
name='reject'
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
<Detail
|
||||
label="Detail"
|
||||
value={details.job_description || details.description}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className="p-4 w-full md:w-1/4 h-full">
|
||||
<div className="my-3 md:flex md:justify-center">
|
||||
{requestStatus.loading && requestStatus.trigger == "offer" ? (
|
||||
<LoadingSpinner size={8} color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
name="accept"
|
||||
onClick={handleOffer}
|
||||
disabled={requestStatus.loading}
|
||||
className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
|
||||
Reject Offer
|
||||
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Accept Offer
|
||||
</button>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-10 md:mt-20 md:flex md:justify-center">
|
||||
{requestStatus.loading && requestStatus.trigger == "reject" ? (
|
||||
<LoadingSpinner size={8} color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
name="reject"
|
||||
onClick={handleOffer}
|
||||
disabled={requestStatus.loading}
|
||||
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Reject Offer
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
{requestStatus.message != "" && (
|
||||
!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}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{requestStatus.message != "" &&
|
||||
(!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}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
{/* End of error or success display */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* close button */}
|
||||
{/* close button */}
|
||||
<div className="p-6 flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={requestStatus.loading}
|
||||
type="button"
|
||||
className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
|
||||
>
|
||||
<span className="text-gradient">Cancel</span>
|
||||
</button>
|
||||
onClick={onClose}
|
||||
disabled={requestStatus.loading}
|
||||
type="button"
|
||||
className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
|
||||
>
|
||||
<span className="text-gradient">Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* end of close button */}
|
||||
</div>
|
||||
</ModalCom>
|
||||
)
|
||||
</div>
|
||||
</ModalCom>
|
||||
);
|
||||
}
|
||||
|
||||
export default OfferJobPopout
|
||||
export default OfferJobPopout;
|
||||
|
||||
@@ -3,8 +3,8 @@ import React from 'react'
|
||||
function Detail({label, value, bg,}) {
|
||||
return (
|
||||
<>
|
||||
<label className='w-full md:w-1/4 text-slate-900 tracking-wide font-semibold'>{label}</label>
|
||||
<p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 ${bg ? bg : null}`}>{value}</p>
|
||||
<label className='w-full md:w-1/4 text-slate-900 dark:text-white tracking-wide font-semibold'>{label}</label>
|
||||
<p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white ${bg ? bg : null}`}>{value}</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
+1
-1
@@ -824,7 +824,7 @@ TODO: Responsive ===========================
|
||||
|
||||
|
||||
/* LoginPage */
|
||||
.main-wrapper{
|
||||
.main-wrapper.login-wrapper{
|
||||
background-image: url('./assets/images/login-dots.jpg');
|
||||
background-attachment: fixed;
|
||||
background-size: contain;
|
||||
|
||||
@@ -312,7 +312,7 @@ class usersService {
|
||||
};
|
||||
return this.postAuxEnd("/waitinginterest", postData);
|
||||
}
|
||||
getMyJobList() {
|
||||
getMyJobList(reqData={}) {
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
@@ -320,6 +320,7 @@ class usersService {
|
||||
page: 0,
|
||||
offset: 0,
|
||||
limit: 100,
|
||||
...reqData
|
||||
};
|
||||
return this.postAuxEnd("/jobmanagerlist", postData);
|
||||
}
|
||||
@@ -786,6 +787,19 @@ class usersService {
|
||||
};
|
||||
return this.postAuxEnd("/offerinterestlistmsg", postData);
|
||||
}
|
||||
|
||||
// FUNCTION TO ASSIGN TASK TO FAMILY MEMBER
|
||||
assignFamilyTask(reqData) {
|
||||
var postData = {
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
action: 13025,
|
||||
...reqData
|
||||
};
|
||||
return this.postAuxEnd("/assigntask", postData);
|
||||
}
|
||||
|
||||
/*
|
||||
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)
|
||||
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)
|
||||
|
||||
Reference in New Issue
Block a user