added the popup component

src/components/jobPopout/JobListPopout.jsx

@@ -6,7 +6,6 @@ import usersService from "../../services/UsersService";
 import { tableReload } from "../../store/TableReloads";
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
 
@@ -23,7 +22,13 @@ const validationSchema = Yup.object().shape({
   group: Yup.string(),
 });
 
-function JobListPopout({ details, onClose, situation }) {
+function JobListPopout({
+  details,
+  onClose,
+  situation,
+  openWallet,
+  setWalletItem,
+}) {
   const [selectedTab, setSelectedTab] = useState("public");
   const tabs = ["public", "individual", "group"];
 
@@ -65,6 +70,12 @@ function JobListPopout({ details, onClose, situation }) {
 
   const taskWalletSelector = getWalletDetail(details?.currency);
 
+  const openCreditPopup = () => {
+    onClose();
+    setWalletItem(taskWalletSelector);
+    openWallet();
+  };
+
   // member listing
   const memberList = useCallback(async () => {
     setLoader({ member: true, jobFields: false });
@@ -138,6 +149,7 @@ function JobListPopout({ details, onClose, situation }) {
       job_uid,
       job_description: textArea,
     };
+
     let reqData;
 
     // for family input
@@ -238,7 +250,6 @@ function JobListPopout({ details, onClose, situation }) {
       });
   }, []);
 
-  console.log("wallet >> ", walletDetails, details, taskWalletSelector);
   return (
     <ModalCom action={onClose} situation={situation} className="">
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -496,7 +507,10 @@ function JobListPopout({ details, onClose, situation }) {
                 </div>
               </div>
             ) : (
-              <ZeroBalanceChecker {...taskWalletSelector} />
+              <ZeroBalanceChecker
+                {...taskWalletSelector}
+                openCreditPopup={openCreditPopup}
+              />
             )}
 
             {/* END OF ACTION SECTION */}
@@ -653,16 +667,19 @@ const publicArray = [
   { duration: 28, name: "4 weeks" },
 ];
 
-const ZeroBalanceChecker = ({ amount, code, country }) => {
-  let thePrice = PriceFormatter(amount * 0.01, code, country);
-
+const ZeroBalanceChecker = ({ amount, code, country, openCreditPopup }) => {
   return (
     <div className="px-4 pb-3 w-full flex flex-col gap-5 items-center">
       <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">
-        Wallet Balance:{` ${code} ${amount}`}
+        Wallet Balance:{` ${code} ${+amount.toFixed(2)}`}
       </h1>
-      <p className="font-semibold text-center text-red-500 text-lg">You do not have sufficient balance to assign this task</p>
-      <button className="btn-gradient w-48 h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center">
+      <p className="font-semibold text-center text-red-500 text-lg">
+        You do not have sufficient balance to assign this task
+      </p>
+      <button
+        onClick={openCreditPopup}
+        className="btn-gradient w-48 h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
+      >
         Add Credit to Wallet
       </button>
     </div>