Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
2c11a0755d | ||
 ameye
|
f4ed892c5c | ||
|
ameye
|
30403f27c5 | ||
|
victorAnumudu
|
cf2df7529d | ||
|
Ebube
|
b3695324b3 | ||
|
ameye
|
cf8f32ed64 |
+3
-2
@@ -64,6 +64,7 @@ import FamAIQuestionPage from "./views/FamAIQuestionPage"
|
|||||||
import FamMyFilesPage from "./views/FamMyFilesPage"
|
import FamMyFilesPage from "./views/FamMyFilesPage"
|
||||||
import FamWorkInProgressPage from "./views/FamWorkInProgressPage";
|
import FamWorkInProgressPage from "./views/FamWorkInProgressPage";
|
||||||
import MyPastDueTasksPage from "./views/MyPastDueTasksPage";
|
import MyPastDueTasksPage from "./views/MyPastDueTasksPage";
|
||||||
|
import FamilyWalletPage from "./views/FamilyWalletPage";
|
||||||
|
|
||||||
export default function Routers() {
|
export default function Routers() {
|
||||||
return (
|
return (
|
||||||
@@ -124,13 +125,13 @@ export default function Routers() {
|
|||||||
<Route exact path="/notification" element={<Notification />} />
|
<Route exact path="/notification" element={<Notification />} />
|
||||||
<Route exact path="/market-place" element={<MarketPlacePage />} />
|
<Route exact path="/market-place" element={<MarketPlacePage />} />
|
||||||
<Route exact path="/shop-details" element={<ShopDetailsPage />} />
|
<Route exact path="/shop-details" element={<ShopDetailsPage />} />
|
||||||
<Route exact path="/my-wallet" element={<MyWalletPage />} />
|
<Route exact path="/my-collection" element={<MyCollection />} />*/}
|
||||||
<Route exact path="/my-collection" element={<MyCollection />} />*/}
|
|
||||||
<Route exact path="/reminders" element={<RemindersPage />} />
|
<Route exact path="/reminders" element={<RemindersPage />} />
|
||||||
<Route exact path="/tracking" element={<TrackingPage />} />
|
<Route exact path="/tracking" element={<TrackingPage />} />
|
||||||
<Route exact path="/calendar" element={<CalendarPage />} />
|
<Route exact path="/calendar" element={<CalendarPage />} />
|
||||||
<Route exact path="/resources" element={<ResourcePage />} />
|
<Route exact path="/resources" element={<ResourcePage />} />
|
||||||
<Route exact path="/my-wallet/*" element={<MyWalletPage />} />
|
<Route exact path="/my-wallet/*" element={<MyWalletPage />} />
|
||||||
|
<Route exact path="/family-wallet" element={<FamilyWalletPage />} />
|
||||||
<Route exact path="/my-coupon" element={<MyCouponPage />} />
|
<Route exact path="/my-coupon" element={<MyCouponPage />} />
|
||||||
<Route exact path="/notification" element={<Notification />} />
|
<Route exact path="/notification" element={<Notification />} />
|
||||||
<Route exact path="/market-place" element={<MarketPlacePage />} />
|
<Route exact path="/market-place" element={<MarketPlacePage />} />
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import CountDown from "../Helpers/CountDown";
|
|
||||||
// import HomeSliders from "./HomeSliders";
|
// import HomeSliders from "./HomeSliders";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
@@ -41,39 +40,6 @@ export default function FamilyParentDashboard({
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* countdown */}
|
|
||||||
{nextDueTask?.next_due &&
|
|
||||||
Object.keys(nextDueTask.next_due)?.length != 0 && (
|
|
||||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
Current Task
|
|
||||||
</p>
|
|
||||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
|
||||||
{nextDueTask.next_due.item_code.substr(0, 4) + "..."}
|
|
||||||
</p>
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
{nextDueTask.next_due.price * 0.01} Naira
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
Next due in
|
|
||||||
</p>
|
|
||||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
|
||||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
|
||||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
|
||||||
</p>
|
|
||||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
|
||||||
<span>Hrs</span>
|
|
||||||
<span>Min</span>
|
|
||||||
<span>Sec</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
||||||
Last Login : {loginDate}
|
Last Login : {loginDate}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import CountDown from "../Helpers/CountDown";
|
|
||||||
// import HomeSliders from "./HomeSliders";
|
// import HomeSliders from "./HomeSliders";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
@@ -38,38 +37,6 @@ export default function HomeDashboard({ className, bannerList, nextDueTask }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* countdown */}
|
|
||||||
{nextDueTask?.next_due &&
|
|
||||||
Object.keys(nextDueTask.next_due)?.length != 0 && (
|
|
||||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
Current Task
|
|
||||||
</p>
|
|
||||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
|
||||||
{nextDueTask.next_due.item_code.substr(0, 4) + "..."}
|
|
||||||
</p>
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
{nextDueTask.next_due.price * 0.01} Naira
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
Next due in
|
|
||||||
</p>
|
|
||||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
|
||||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
|
||||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
|
||||||
</p>
|
|
||||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
|
||||||
<span>Hrs</span>
|
|
||||||
<span>Min</span>
|
|
||||||
<span>Sec</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
||||||
Last Login : {loginDate}
|
Last Login : {loginDate}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import CountDown from "../Helpers/CountDown";
|
|
||||||
// import HomeSliders from "./HomeSliders";
|
// import HomeSliders from "./HomeSliders";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
@@ -42,38 +41,6 @@ export default function JobOwnerDashboard({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* countdown */}
|
|
||||||
{nextDueTask?.next_due &&
|
|
||||||
Object.keys(nextDueTask.next_due)?.length != 0 && (
|
|
||||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
Current Task
|
|
||||||
</p>
|
|
||||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
|
||||||
{nextDueTask.next_due.item_code.substr(0, 4) + "..."}
|
|
||||||
</p>
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
{nextDueTask.next_due.price * 0.01} Naira
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
Next due in
|
|
||||||
</p>
|
|
||||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
|
||||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
|
||||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
|
||||||
</p>
|
|
||||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
|
||||||
<span>Hrs</span>
|
|
||||||
<span>Min</span>
|
|
||||||
<span>Sec</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
||||||
Last Login : {loginDate}
|
Last Login : {loginDate}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -1,14 +1,16 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { toast } from "react-toastify";
|
|
||||||
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
|
||||||
import heroUser from "../../assets/images/hero-user.png";
|
import heroUser from "../../assets/images/hero-user.png";
|
||||||
import CountDown from "../Helpers/CountDown";
|
import CountDown from "../Helpers/CountDown";
|
||||||
// import HomeSliders from "./HomeSliders";
|
// import HomeSliders from "./HomeSliders";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import HomeSliders from "../Home/HomeSliders";
|
import HomeSliders from "../Home/HomeSliders";
|
||||||
|
|
||||||
export default function WorkerDashboard({ className, bannerList, nextDueTask }) {
|
export default function WorkerDashboard({
|
||||||
|
className,
|
||||||
|
bannerList,
|
||||||
|
nextDueTask,
|
||||||
|
}) {
|
||||||
const settings = {
|
const settings = {
|
||||||
autoplay: true,
|
autoplay: true,
|
||||||
dots: true,
|
dots: true,
|
||||||
@@ -57,32 +59,37 @@ export default function WorkerDashboard({ className, bannerList, nextDueTask })
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* countdown */}
|
{/* countdown */}
|
||||||
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
{nextDueTask?.next_due &&
|
||||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||||
<div className="flex flex-col justify-between">
|
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||||
<p className="text-base text-white tracking-wide">Current Task</p>
|
<div className="flex flex-col justify-between">
|
||||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
<p className="text-base text-white tracking-wide">
|
||||||
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
Current Task
|
||||||
</p>
|
</p>
|
||||||
<p className="text-base text-white tracking-wide">
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
{nextDueTask.next_due.price * 0.01} Naira
|
{nextDueTask.next_due.item_code.substr(0, 4) + "..."}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<p className="text-base text-white tracking-wide">
|
||||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
{nextDueTask.next_due.price * 0.01} Naira
|
||||||
<div className="flex flex-col justify-between">
|
</p>
|
||||||
<p className="text-base text-white tracking-wide">Next due in</p>
|
</div>
|
||||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
<div className="flex flex-col justify-between">
|
||||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
<p className="text-base text-white tracking-wide">
|
||||||
</p>
|
Next due in
|
||||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
</p>
|
||||||
<span>Hrs</span>
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
<span>Min</span>
|
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||||
<span>Sec</span>
|
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||||
|
</p>
|
||||||
|
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||||
|
<span>Hrs</span>
|
||||||
|
<span>Min</span>
|
||||||
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
{/* action */}
|
{/* action */}
|
||||||
<div className="flex lg:space-x-3 space-x-1 items-center">
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||||
<Link to="/mytask" className="text-white text-base">
|
<Link to="/mytask" className="text-white text-base">
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import CountDown from "../Helpers/CountDown";
|
|
||||||
// import HomeSliders from "./HomeSliders";
|
// import HomeSliders from "./HomeSliders";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
@@ -41,39 +40,6 @@ export default function WorkerDashboard({
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* countdown */}
|
|
||||||
{nextDueTask?.next_due &&
|
|
||||||
Object.keys(nextDueTask.next_due)?.length != 0 && (
|
|
||||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
Current Task
|
|
||||||
</p>
|
|
||||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
|
||||||
{nextDueTask.next_due.item_code.substr(0, 4) + "..."}
|
|
||||||
</p>
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
{nextDueTask.next_due.price * 0.01} Naira
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<p className="text-base text-white tracking-wide">
|
|
||||||
Next due in
|
|
||||||
</p>
|
|
||||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
|
||||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
|
||||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
|
||||||
</p>
|
|
||||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
|
||||||
<span>Hrs</span>
|
|
||||||
<span>Min</span>
|
|
||||||
<span>Sec</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
||||||
Last Login : {loginDate}
|
Last Login : {loginDate}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ export default function InputCom({
|
|||||||
forgotPassword,
|
forgotPassword,
|
||||||
parentClass,
|
parentClass,
|
||||||
labelClass,
|
labelClass,
|
||||||
|
labalClass,
|
||||||
inputClass,
|
inputClass,
|
||||||
fieldClass,
|
fieldClass,
|
||||||
onClick,
|
onClick,
|
||||||
@@ -53,7 +54,7 @@ export default function InputCom({
|
|||||||
<div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
|
<div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
|
||||||
{label && (
|
{label && (
|
||||||
<label
|
<label
|
||||||
className="input-label text-[#181c32] text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
|
className={`input-label text-[#181c32] text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1 ${labalClass}`}
|
||||||
htmlFor={name}
|
htmlFor={name}
|
||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
|
|||||||
@@ -42,14 +42,16 @@ export default function FamilyDash({ MyActiveJobList=[], serverImg }) {
|
|||||||
<div>
|
<div>
|
||||||
<div className="home-page-wrapper">
|
<div className="home-page-wrapper">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="text-white mb-4 p-2 w-full rounded-xl bg-sky-blue place-content-center">
|
<div className="text-white mb-4 min-h-[3rem] px-2 w-full flex justify-between items-center rounded-xl bg-family-header-bg">
|
||||||
<div className="w-full flex flex-wrap gap-x-4">
|
<div className="w-full">
|
||||||
<p className="text-lg font-normal leading-5">Welcome</p>
|
<div className="w-full flex flex-wrap gap-x-4 ">
|
||||||
<div className="">
|
<p className="text-lg font-normal leading-5">Welcome</p>
|
||||||
<h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
|
<div className="">
|
||||||
|
<h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full text-sm flex justify-end items-end">
|
<div className="py-1 w-full text-sm text-right self-end">
|
||||||
<p className="leading-4">Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
|
<p className="leading-4">Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='flex flex-col justify-between'>
|
<div className='flex flex-col justify-between'>
|
||||||
<div className="w-full min-h-[450px] max-h-[450px] overflow-y-scroll">
|
<div className="w-full h-full min-h-[400px] max-h-[400px] overflow-y-auto">
|
||||||
<table className="wallet-activity w-full table-auto border-collapse text-left">
|
<table className="wallet-activity w-full table-auto border-collapse text-left">
|
||||||
<thead className='border-b-2'>
|
<thead className='border-b-2'>
|
||||||
<tr className='text-slate-600'>
|
<tr className='text-slate-600'>
|
||||||
|
|||||||
@@ -286,7 +286,7 @@ function ActiveJobs(props) {
|
|||||||
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<h1 className="text-[22px] font-bold text-dark-gray dark:text-white tracking-wide">
|
<h1 className="text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
|
||||||
{props.details?.title && props.details.title}
|
{props.details?.title && props.details.title}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
@@ -421,7 +421,7 @@ function ActiveJobs(props) {
|
|||||||
autoFocus
|
autoFocus
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300">
|
<div className="p-4 w-full h-[200px] text-base text-slate-600 border border-slate-300">
|
||||||
<div className="files">
|
<div className="files">
|
||||||
<label
|
<label
|
||||||
htmlFor="file"
|
htmlFor="file"
|
||||||
@@ -535,8 +535,15 @@ function ActiveJobs(props) {
|
|||||||
{/* MESSAGE SECTION */}
|
{/* MESSAGE SECTION */}
|
||||||
<div className="w-full lg:w-1/2">
|
<div className="w-full lg:w-1/2">
|
||||||
<div className="flex justify-between items-center gap-5">
|
<div className="flex justify-between items-center gap-5">
|
||||||
<p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
<p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2">
|
||||||
Message
|
<span>Message</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={popUpHandler}
|
||||||
|
className="text-[12px] tracking-wider text-emerald-600 dark:text-emerald-300"
|
||||||
|
>
|
||||||
|
View all
|
||||||
|
</button>
|
||||||
</p>
|
</p>
|
||||||
{/* <button
|
{/* <button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -13,13 +13,6 @@ function CurrentJobAction() {
|
|||||||
<div>
|
<div>
|
||||||
Waiting for the completion message from the client before you can approve.
|
Waiting for the completion message from the client before you can approve.
|
||||||
</div>
|
</div>
|
||||||
{/*<div className="flex flex-col flex-[0.9]"> </div>*/}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td className="text-right py-4 px-2">
|
|
||||||
<div className="flex justify-center items-center">
|
|
||||||
.
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@@ -0,0 +1,95 @@
|
|||||||
|
import React, { Suspense, lazy, useEffect, useState } from "react";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import usersService from "../../services/UsersService";
|
||||||
|
import Layout from "../Partials/Layout";
|
||||||
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||||
|
import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
|
||||||
|
const FamilyWalletBox = lazy(() => import("./FamilyWalletBox"));
|
||||||
|
|
||||||
|
const FamilyWallet = () => {
|
||||||
|
const apiCall = new usersService();
|
||||||
|
const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
|
||||||
|
const { walletTable } = useSelector((state) => state.tableReload);
|
||||||
|
|
||||||
|
const [paymentHistory, setPaymentHistory] = useState({
|
||||||
|
loading: true,
|
||||||
|
data: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const [allCountries, setAllCountries] = useState({
|
||||||
|
// STATE TO HOLD LIST OF COUNTRIES
|
||||||
|
loading: true,
|
||||||
|
data: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const getPaymentHistory = () => {
|
||||||
|
apiCall
|
||||||
|
.getPaymentHx()
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data.internal_return < 0) {
|
||||||
|
setPaymentHistory({ loading: false, data: [] });
|
||||||
|
} else {
|
||||||
|
setPaymentHistory({ loading: false, data: res.data?.result_list });
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setPaymentHistory({ loading: false, data: [] });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// FUNCTION TO GET COUNTRIES
|
||||||
|
const getCountry = () => {
|
||||||
|
apiCall
|
||||||
|
.getSignupCountryData()
|
||||||
|
.then((res) => {
|
||||||
|
if (res?.data?.internal_return < 0) {
|
||||||
|
setAllCountries((prev) => ({ loading: false, data: [] }));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setAllCountries((prev) => ({
|
||||||
|
loading: false,
|
||||||
|
data: res?.data?.result_list,
|
||||||
|
}));
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
setAllCountries((prev) => ({ loading: false, data: [] }));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getCountry();
|
||||||
|
getPaymentHistory();
|
||||||
|
}, [walletTable]);
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
"Testing all country: ",
|
||||||
|
allCountries,
|
||||||
|
"Testing wallet: ",
|
||||||
|
walletDetails
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className='mb-4'>
|
||||||
|
<CustomBreadcrumb
|
||||||
|
title={'Wallet'}
|
||||||
|
breadcrumb = {
|
||||||
|
[
|
||||||
|
{ link: "/", title: "Home" },
|
||||||
|
{ link: '/family-wallet', title: 'Wallet', active: true},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||||
|
<FamilyWalletBox
|
||||||
|
wallet={walletDetails}
|
||||||
|
payment={paymentHistory}
|
||||||
|
countries={allCountries.data}
|
||||||
|
/>
|
||||||
|
</Suspense>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FamilyWallet;
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||||
|
import WalletItemCard from "./WalletItemCard";
|
||||||
|
import WalletItemCardFamily from "./WalletItemCardFamily";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
|
||||||
|
*/
|
||||||
|
export default function FamilyWalletBox({ wallet, payment, countries }) {
|
||||||
|
const { loading, data } = wallet;
|
||||||
|
|
||||||
|
const { userDetails } = useSelector((state) => state.userDetails);
|
||||||
|
const accountType = userDetails?.account_type === "FAMILY";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="my-wallet-wrapper w-full mb-10">
|
||||||
|
<div className="main-wrapper w-full">
|
||||||
|
<div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
|
||||||
|
{loading ? (
|
||||||
|
<div className="w-full h-full flex items-center justify-center bg-white">
|
||||||
|
<LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
data.length > 0 && data.map((item) => (
|
||||||
|
<div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
|
||||||
|
<WalletItemCardFamily walletItem={item} payment={payment} countries={countries} />
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -15,21 +15,6 @@ export default function WalletBox({ wallet, payment, countries }) {
|
|||||||
return (
|
return (
|
||||||
<div className="my-wallet-wrapper w-full mb-10">
|
<div className="my-wallet-wrapper w-full mb-10">
|
||||||
<div className="main-wrapper w-full">
|
<div className="main-wrapper w-full">
|
||||||
{accountType ?
|
|
||||||
<div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
|
|
||||||
{loading ? (
|
|
||||||
<div className="w-full h-full flex items-center justify-center">
|
|
||||||
<LoadingSpinner size="16" color="sky-blue" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
data.length > 0 && data.map((item) => (
|
|
||||||
<div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
|
|
||||||
<WalletItemCardFamily walletItem={item} payment={payment} countries={countries} />
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
:
|
|
||||||
<div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
|
<div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="w-full h-full flex items-center justify-center">
|
<div className="w-full h-full flex items-center justify-center">
|
||||||
@@ -43,7 +28,6 @@ export default function WalletBox({ wallet, payment, countries }) {
|
|||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -7,8 +7,11 @@ import Icons from "../Helpers/Icons";
|
|||||||
import Accordion from "../Helpers/Accordion";
|
import Accordion from "../Helpers/Accordion";
|
||||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||||
import localImgLoad from "../../lib/localImgLoad";
|
import localImgLoad from "../../lib/localImgLoad";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
export default function WalletHeader(props) {
|
export default function WalletHeader(props) {
|
||||||
|
|
||||||
|
const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
|
||||||
// debugger;
|
// debugger;
|
||||||
//props.myWalletList.result_list
|
//props.myWalletList.result_list
|
||||||
let { pathname } = useLocation();
|
let { pathname } = useLocation();
|
||||||
@@ -21,187 +24,196 @@ export default function WalletHeader(props) {
|
|||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4">
|
{account_type == 'FULL' ?
|
||||||
<div
|
<div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4">
|
||||||
onClick={() => props.handlerBalance()}
|
<div
|
||||||
className="flex items-center lg:justify-between justify-center w-full h-full"
|
onClick={() => props.handlerBalance()}
|
||||||
>
|
className="flex items-center lg:justify-between justify-center w-full h-full"
|
||||||
<span className="lg:block hidden">
|
>
|
||||||
<Icons name="wallet" />
|
<span className="lg:block hidden">
|
||||||
</span>
|
<Icons name="wallet" />
|
||||||
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
|
</span>
|
||||||
<span className="lg:block hidden">
|
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
|
||||||
<Icons name="deep-plus" />
|
<span className="lg:block hidden">
|
||||||
</span>
|
<Icons name="deep-plus" />
|
||||||
</div>
|
</span>
|
||||||
<div
|
|
||||||
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
|
|
||||||
props.balanceDropdown ? "active" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
|
|
||||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
|
||||||
Wallet
|
|
||||||
</h3>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="content px-7 pb-7">
|
<div
|
||||||
<ul>
|
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
|
||||||
{props.myWalletList &&
|
props.balanceDropdown ? "active" : ""
|
||||||
props.myWalletList?.length > 0 &&
|
}`}
|
||||||
props.myWalletList.map((value, index) =>
|
>
|
||||||
{
|
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
|
||||||
let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
|
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||||
return(
|
Wallet
|
||||||
<li
|
</h3>
|
||||||
key={index}
|
</div>
|
||||||
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
<div className="content px-7 pb-7">
|
||||||
onClick={onWalletClick}
|
<ul>
|
||||||
>
|
{props.myWalletList &&
|
||||||
<div className="sm:flex justify-between items-center">
|
props.myWalletList?.length > 0 &&
|
||||||
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
props.myWalletList.map((value, index) =>
|
||||||
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
|
{
|
||||||
<img src={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" />
|
let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
|
||||||
|
return(
|
||||||
|
<li
|
||||||
|
key={index}
|
||||||
|
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
||||||
|
onClick={onWalletClick}
|
||||||
|
>
|
||||||
|
<div className="sm:flex justify-between items-center">
|
||||||
|
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
||||||
|
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
|
||||||
|
<img src={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="name">
|
||||||
|
<p className="text-2xl font-bold text-dark-gray dark:text-white">
|
||||||
|
{value.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="name">
|
<div>
|
||||||
<p className="text-2xl font-bold text-dark-gray dark:text-white">
|
<p className="eth text-xl font-bold text-purple">
|
||||||
{value.description}
|
{PriceFormatter(value.amount * 0.01, value.code)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</li>
|
||||||
<p className="eth text-xl font-bold text-purple">
|
)
|
||||||
{PriceFormatter(value.amount * 0.01, value.code)}
|
}
|
||||||
</p>
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||||
{/* <div className="sm:flex justify-between items-center">*/}
|
{/* <div className="sm:flex justify-between items-center">*/}
|
||||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||||
{/* <div*/}
|
{/* <div*/}
|
||||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||||
{/* <img src={bank1} alt=""/>*/}
|
{/* <img src={bank1} alt=""/>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div className="name">*/}
|
{/* <div className="name">*/}
|
||||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||||
{/* MetaMask*/}
|
{/* MetaMask*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div>*/}
|
{/* <div>*/}
|
||||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||||
{/* 75,320 ETH*/}
|
{/* 75,320 ETH*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||||
{/* (773.69 USD)*/}
|
{/* (773.69 USD)*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/*</li>*/}
|
{/*</li>*/}
|
||||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||||
{/* <div className="sm:flex justify-between items-center">*/}
|
{/* <div className="sm:flex justify-between items-center">*/}
|
||||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||||
{/* <div*/}
|
{/* <div*/}
|
||||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||||
{/* <img src={bank2} alt=""/>*/}
|
{/* <img src={bank2} alt=""/>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div className="name">*/}
|
{/* <div className="name">*/}
|
||||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||||
{/* Coinbase Wallet*/}
|
{/* Coinbase Wallet*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div>*/}
|
{/* <div>*/}
|
||||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||||
{/* 56,124 ETH*/}
|
{/* 56,124 ETH*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||||
{/* (773.69 USD)*/}
|
{/* (773.69 USD)*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/*</li>*/}
|
{/*</li>*/}
|
||||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||||
{/* <div className="sm:flex justify-between items-center">*/}
|
{/* <div className="sm:flex justify-between items-center">*/}
|
||||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||||
{/* <div*/}
|
{/* <div*/}
|
||||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||||
{/* <img src={bank3} alt=""/>*/}
|
{/* <img src={bank3} alt=""/>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div className="name">*/}
|
{/* <div className="name">*/}
|
||||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||||
{/* Bitski*/}
|
{/* Bitski*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div>*/}
|
{/* <div>*/}
|
||||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||||
{/* 99,123 ETH*/}
|
{/* 99,123 ETH*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||||
{/* (773.69 USD)*/}
|
{/* (773.69 USD)*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/*</li>*/}
|
{/*</li>*/}
|
||||||
{/*<li className="content-item py-5">*/}
|
{/*<li className="content-item py-5">*/}
|
||||||
{/* <div className="sm:flex justify-between items-center">*/}
|
{/* <div className="sm:flex justify-between items-center">*/}
|
||||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||||
{/* <div*/}
|
{/* <div*/}
|
||||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||||
{/* <img src={bank4} alt=""/>*/}
|
{/* <img src={bank4} alt=""/>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div className="name">*/}
|
{/* <div className="name">*/}
|
||||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||||
{/* WalletConnect*/}
|
{/* WalletConnect*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div>*/}
|
{/* <div>*/}
|
||||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||||
{/* 43,728 ETH*/}
|
{/* 43,728 ETH*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||||
{/* (773.69 USD)*/}
|
{/* (773.69 USD)*/}
|
||||||
{/* </p>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/*</li>*/}
|
{/*</li>*/}
|
||||||
</ul>
|
</ul>
|
||||||
<div className="add-money-btn flex justify-center items-center mt-3">
|
<div className="add-money-btn flex justify-center items-center mt-3">
|
||||||
{/* <button
|
{/* <button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
|
if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
|
||||||
else navigate('/my-wallet', {replace: true})
|
else navigate('/my-wallet', {replace: true})
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
>
|
>
|
||||||
Manage
|
Manage
|
||||||
</button> */}
|
</button> */}
|
||||||
<Link
|
<Link
|
||||||
to="/my-wallet"
|
to="/my-wallet"
|
||||||
onClick={onWalletClick}
|
onClick={onWalletClick}
|
||||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
>
|
>
|
||||||
Manage
|
Manage
|
||||||
</Link>
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
:
|
||||||
{/*<div*/}
|
<div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4">
|
||||||
{/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/}
|
<div
|
||||||
{/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
|
onClick={() => navigate("/family-wallet", { replace: true })}
|
||||||
{/* <p className="lg:text-xl text-lg font-bold text-white">*/}
|
className="flex items-center lg:justify-between justify-center w-full h-full"
|
||||||
{/* $ 234,435.34*/}
|
>
|
||||||
{/* </p>*/}
|
<span className="lg:block hidden">
|
||||||
{/* </div>*/}
|
<Icons name="wallet" />
|
||||||
{/*</div>*/}
|
</span>
|
||||||
|
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
|
||||||
|
<span className="lg:block hidden">
|
||||||
|
<Icons name="deep-plus" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
<div className="lg:hidden block"></div>
|
<div className="lg:hidden block"></div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -34,9 +34,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
|
|||||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||||
};
|
};
|
||||||
|
|
||||||
const currentWalletCurrency = countries
|
const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country);
|
||||||
// .map((country) => country)
|
|
||||||
.filter((country) => country.code === walletItem.country);
|
|
||||||
|
|
||||||
const image = walletItem.code
|
const image = walletItem.code
|
||||||
? `${walletItem.code.toLowerCase()}.svg`
|
? `${walletItem.code.toLowerCase()}.svg`
|
||||||
|
|||||||
@@ -34,9 +34,7 @@ export default function WalletItemCardFamily({ walletItem, payment, countries })
|
|||||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||||
};
|
};
|
||||||
|
|
||||||
const currentWalletCurrency = countries
|
const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country);
|
||||||
// .map((country) => country)
|
|
||||||
.filter((country) => country.code === walletItem.country);
|
|
||||||
|
|
||||||
const image = walletItem.code
|
const image = walletItem.code
|
||||||
? `${walletItem.code.toLowerCase()}.svg`
|
? `${walletItem.code.toLowerCase()}.svg`
|
||||||
|
|||||||
@@ -20,6 +20,9 @@ import TimeDifference from "../Helpers/TimeDifference";
|
|||||||
const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
|
const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
|
||||||
|
|
||||||
export default function Header({ logoutModalHandler, sidebarHandler }) {
|
export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||||
|
|
||||||
|
const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
const [balanceDropdown, setbalanceValue] = useToggle(false);
|
const [balanceDropdown, setbalanceValue] = useToggle(false);
|
||||||
const [notificationDropdown, setNotificationValue] = useToggle(false);
|
const [notificationDropdown, setNotificationValue] = useToggle(false);
|
||||||
const [userProfileDropdown, setProfileDropdown] = useToggle(false);
|
const [userProfileDropdown, setProfileDropdown] = useToggle(false);
|
||||||
@@ -402,7 +405,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
|||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||||
<Link to="/my-wallet" className="notifications">
|
<Link to={ account_type == "FULL" ? "/my-wallet" : "/family-wallet"} className="notifications">
|
||||||
<div className="name">
|
<div className="name">
|
||||||
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||||
My Wallet
|
My Wallet
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ const LoadedPage = ({reloader}) => {
|
|||||||
const { loading, data, error } = GetMyPageLoad(reloader);
|
const { loading, data, error } = GetMyPageLoad(reloader);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto">
|
<div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto dark:text-white">
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
<h1 className="text-xl font-bold tracking-wide">...</h1>
|
<h1 className="text-xl font-bold tracking-wide">...</h1>
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
|
|||||||
fieldClass="px-4"
|
fieldClass="px-4"
|
||||||
parentClass="flex items-center gap-1 justify-between"
|
parentClass="flex items-center gap-1 justify-between"
|
||||||
labelClass="flex-[0.2] mb-0 font-semibold"
|
labelClass="flex-[0.2] mb-0 font-semibold"
|
||||||
|
labalClass="dark:text-white"
|
||||||
inputClass="flex-[0.8]"
|
inputClass="flex-[0.8]"
|
||||||
inputBg="bg-slate-100"
|
inputBg="bg-slate-100"
|
||||||
label="Introduction: "
|
label="Introduction: "
|
||||||
@@ -24,7 +25,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
|
|||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
style={{ resize: "none" }}
|
style={{ resize: "none" }}
|
||||||
className="text-base px-4 py-2 rounded-md min-h-[100px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none flex-[0.8]"
|
className="text-base px-4 py-2 rounded-[36px] min-h-[100px] text-dark-gray dark:text-white w-full bg-slate-100 focus:ring-0 focus:outline-none flex-[0.8]"
|
||||||
name="description"
|
name="description"
|
||||||
cols="30"
|
cols="30"
|
||||||
rows="2"
|
rows="2"
|
||||||
|
|||||||
@@ -13,12 +13,39 @@ const YourPage = () => {
|
|||||||
const handleChange = ({ target: { name, value } }) =>
|
const handleChange = ({ target: { name, value } }) =>
|
||||||
setPageValues((prev) => ({ ...prev, [name]: value }));
|
setPageValues((prev) => ({ ...prev, [name]: value }));
|
||||||
|
|
||||||
const updateYourPageDetails = updateYourPage(
|
const updateYourPageDetails = async () => {
|
||||||
pageValues,
|
if (!pageValues.intro || !pageValues.description) return;
|
||||||
setResponse,
|
|
||||||
setPageValues,
|
try {
|
||||||
setReloader
|
setResponse({ loading: true, error: "", msg: "" });
|
||||||
);
|
|
||||||
|
let api = new usersService();
|
||||||
|
const res = await api.MyPageIntro(pageValues);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setResponse({
|
||||||
|
loading: false,
|
||||||
|
data: res.data,
|
||||||
|
msg: "Update Complete",
|
||||||
|
});
|
||||||
|
|
||||||
|
setReloader((prev) => !prev);
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setResponse({ msg: "" });
|
||||||
|
// Clear form after successful update
|
||||||
|
setPageValues({ intro: "", description: "" });
|
||||||
|
}, 3000);
|
||||||
|
} catch (error) {
|
||||||
|
return setResponse({
|
||||||
|
loading: false,
|
||||||
|
data: {},
|
||||||
|
error: "Error updating page",
|
||||||
|
msg: "",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
@@ -57,39 +84,3 @@ const responseInitialValues = {
|
|||||||
error: "",
|
error: "",
|
||||||
msg: "",
|
msg: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
function updateYourPage(pageValues, setResponse, setPageValues, setReloader) {
|
|
||||||
return async () => {
|
|
||||||
if (!pageValues.intro || !pageValues.description) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
setResponse({ loading: true, error: "", msg: "" });
|
|
||||||
|
|
||||||
let api = new usersService();
|
|
||||||
const res = await api.MyPageIntro(pageValues);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setResponse({
|
|
||||||
loading: false,
|
|
||||||
data: res.data,
|
|
||||||
msg: "Update Complete",
|
|
||||||
});
|
|
||||||
|
|
||||||
setReloader((prev) => !prev);
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setResponse({ msg: "" });
|
|
||||||
// Clear form after successful update
|
|
||||||
setPageValues({ intro: "", description: "" });
|
|
||||||
}, 3000);
|
|
||||||
} catch (error) {
|
|
||||||
return setResponse({
|
|
||||||
loading: false,
|
|
||||||
data: {},
|
|
||||||
error: "Error updating page",
|
|
||||||
msg: "",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|||||||
+1
-2
@@ -52,9 +52,8 @@
|
|||||||
}
|
}
|
||||||
.job-action {
|
.job-action {
|
||||||
background-color: #4687ba;
|
background-color: #4687ba;
|
||||||
height: 100px;
|
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 5px;
|
padding: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_box {
|
.msg_box {
|
||||||
|
|||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import FamilyWallet from "../components/MyWallet/FamilyWallet";
|
||||||
|
|
||||||
|
export default function FamilyWalletPage() {
|
||||||
|
return <FamilyWallet />;
|
||||||
|
}
|
||||||
@@ -23,6 +23,9 @@ module.exports = {
|
|||||||
screens:{
|
screens:{
|
||||||
xxs: '400px',
|
xxs: '400px',
|
||||||
xxl:'1900px'
|
xxl:'1900px'
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
'family-header-bg': "linear-gradient(90deg, rgba(45,126,241,1) 0%, rgba(58,143,195,1) 0%, rgba(11,100,119,1) 100%)",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user