accept btn style changed

.env

@@ -118,4 +118,7 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+
+# FOR FAMILY GAME LINK
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'

.env.development

@@ -86,4 +86,7 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+
+# FOR FAMILY GAME LINK
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'

.env.production

@@ -92,4 +92,7 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
+REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
+
+# FOR FAMILY GAME LINK
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'

src/Routers.jsx

@@ -66,6 +66,7 @@ import FamWorkInProgressPage from "./views/FamWorkInProgressPage";
 import MyPastDueTasksPage from "./views/MyPastDueTasksPage";
 import FamilyWalletPage from "./views/FamilyWalletPage";
 import FamilyActivitiesPage from "./views/FamilyActivitiesPage";
+import FamGamesPage from "./views/FamGamesPage";
 
 export default function Routers() {
   return (
@@ -144,6 +145,7 @@ export default function Routers() {
           <Route exact path="/ai-question" element={<FamAIQuestionPage />} />
           <Route exact path="/myfiles" element={<FamMyFilesPage />} />
           <Route exact path="/ai-lab" element={<FamAIQuestionPage />} />
+          <Route exact path="/fam-games" element={<FamGamesPage />} />
           <Route exact path="/work-in-progress" element={<FamWorkInProgressPage />} />
           <Route
             exact

src/components/Iframe/Iframe.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function Iframe({src, title}) {
+  return (
+    <iframe 
+        src={src}
+        title={title}
+        className='w-full h-full' 
+    >
+    </iframe>
+  )
+}

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -273,8 +273,7 @@ function ActiveJobsMedia(props) {
   return (
     <MediaLayout
         backpath={props.details.pathname}
-        title={props.details?.title && props.details.title}
-        state={props.details.accountDetails}
+        title={props.details?.title ? props.details.title : ''}
     >
         {/* job title */}
             {/* <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
@@ -326,17 +325,17 @@ function ActiveJobsMedia(props) {
                         <p className="w-full text-base text-right text-sky-blue">
                         {props?.details && props.details.job_to}
                         </p>
-                        <div className="text-base text-slate-700 dark:text-white tracking-wide">
-                            <p className="font-semibold text-black dark:text-white">
+                        <div className="text-base tracking-wide">
+                            <p className="font-semibold text-black dark:text-white tracking-wider">
                                 Description:{" "}
                             </p>
-                            <p className="p-2 ml-8 border border-sky-blue">
+                            <p className="p-2 ml-8 border-b border-sky-blue">
                                 {props?.details && props.details.description}
                             </p>
                         </div>
                         <div className="mt-6 w-full lg:flex gap-8">
-                            <div className="w-full text-base dark:text-white tracking-wide">
-                                <p className="font-semibold text-sky-blue dark:text-white">
+                            <div className="w-full text-base tracking-wide">
+                                <p className="font-semibold text-black dark:text-white tracking-wider">
                                     Delivery Detail:{" "}
                                 </p>
                                 <p className="p-2 ml-8">
@@ -352,7 +351,7 @@ function ActiveJobsMedia(props) {
 
                 {/* job details */}
                 <div className="w-full md:w-[200px]">
-                    <p className="text-base text-sky-blue">Delivery Detail</p>
+                    {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
                     {passDue ? (
                         <div className="my-1">
                             <p className="text-base text-slate-700">
@@ -385,7 +384,7 @@ function ActiveJobsMedia(props) {
 
                     <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
                         <span className="font-semibold text-black dark:text-white">
-                        Price:{" "}
+                        Reward:{" "}
                         </span>
                         <span className="">{thePrice}</span>
                     </div>
@@ -442,7 +441,7 @@ function ActiveJobsMedia(props) {
                         </div>
                         {tab == "message" ? (
                         <textarea
-                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-[#4687ba] outline-none"
+                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none"
                             // rows="10"
                             style={{ resize: "none" }}
                             name="message"
@@ -451,7 +450,7 @@ function ActiveJobsMedia(props) {
                             autoFocus
                         />
                         ) : (
-                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border border-[#4687ba]">
+                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]">
                             <div className="files flex">
                             <label
                                 htmlFor="file"
@@ -509,8 +508,8 @@ function ActiveJobsMedia(props) {
                     {/* End of error or success display */}
 
                     {/* Buttons Sections */}
-                    <div className="py-1 sm:flex sm:justify-end sm:items-center">
-                        <div className="w-full flex justify-center items-center gap-4">
+                    <div className="py-1 grid grid-cols-1 xxs:grid-cols-3">
+                        <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
                             <button
                                 type="button"
                                 onClick={handleClearAll}

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -65,7 +65,7 @@ function CurrentTaskAction({jobDetails}) {
           <div className="w-full text-sm text-left text-gray-500">
             {jobDetails.job_type == 'MEDIA' ?
             <div className="flex justify-center items-center">
-                <button onClick={popUpHandler} type="button" className="p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium text-orange-600 rounded-2xl hover:opacity-80 transition-all duration-300">
+                <button onClick={popUpHandler} type="button" className="btn-gradient text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
                     I have completed this task
                 </button>
             </div>

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -588,26 +588,28 @@ function AddFundDollars(props) {
                           </div>
                         </div>
 
-                        <div className="modal-footer-wrapper flex justify-end items-center gap-2">
-                          <button
-                            className="custom-btn bg-[#f5a430] text-black text-base"
-                            onClick={handleClose}
-                          >
-                            Cancel
-                          </button>
-                          <button
-                            type="submit"
-                            className="custom-btn btn-gradient text-base text-white"
-                          >
-                            {loadingState ? (
-                              <LoadingSpinner size="6" color="sky-blue" />
-                            ) : (
-                              <>
-                                <span className="text-white">Continue</span>{" "}
-                                <Icons name="chevron-right" />
-                              </>
-                            )}
-                          </button>
+                        <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+                          <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+                            <button
+                              className="custom-btn bg-[#f5a430] text-black text-base"
+                              onClick={handleClose}
+                            >
+                              Cancel
+                            </button>
+                            <button
+                              type="submit"
+                              className="custom-btn btn-gradient text-base text-white"
+                            >
+                              {loadingState ? (
+                                <LoadingSpinner size="6" color="sky-blue" />
+                              ) : (
+                                <>
+                                  <span className="text-white">Continue</span>{" "}
+                                  <Icons name="chevron-right" />
+                                </>
+                              )}
+                            </button>
+                          </div>
                         </div>
                       </Form>
                     );
@@ -620,25 +622,27 @@ function AddFundDollars(props) {
       </div>
 
       {selectedOption == "previous" && (
-        <div className="modal-footer-wrapper flex justify-end items-center gap-2">
-          <button
-            className="custom-btn bg-[#f5a430] text-black text-base"
-            onClick={props.onClose}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleSubmit}
-            name="previous"
-            type="button"
-            className="custom-btn btn-gradient text-base text-white"
-          >
-            {loadingState ? (
-              <LoadingSpinner size="6" color="sky-blue" />
-            ) : (
-              <span className="text-white">Continue</span>
-            )}
-          </button>
+        <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+          <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+            <button
+              className="custom-btn bg-[#f5a430] text-black text-base"
+              onClick={props.onClose}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              name="previous"
+              type="button"
+              className="custom-btn btn-gradient text-base text-white"
+            >
+              {loadingState ? (
+                <LoadingSpinner size="6" color="sky-blue" />
+              ) : (
+                <span className="text-white">Continue</span>
+              )}
+            </button>
+          </div>
         </div>
       )}
     </>

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -171,27 +171,29 @@ function AddFundPop({
       {countryWallet == "NG" && <div className="h-[19rem]"></div>}
 
       {countryWallet == "NG" && (
-        <div className="modal-footer-wrapper flex justify-end items-center py-4 gap-4">
-          <button
-            className="custom-btn bg-[#f5a430] text-black text-base"
-            onClick={onClose}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleSubmit}
-            type="button"
-            className="custom-btn btn-gradient text-base text-white"
-          >
-            {__awaitComponent.loader ? (
-              <LoadingSpinner size="6" color="sky-blue" />
-            ) : (
-              <>
-                <span className="text-white">Continue</span>{" "}
-                <Icons name="chevron-right" />
-              </>
-            )}
-          </button>
+        <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+          <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+            <button
+              className="custom-btn bg-[#f5a430] text-black text-base"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              type="button"
+              className="custom-btn btn-gradient text-base text-white"
+            >
+              {__awaitComponent.loader ? (
+                <LoadingSpinner size="6" color="sky-blue" />
+              ) : (
+                <>
+                  <span className="text-white">Continue</span>{" "}
+                  <Icons name="chevron-right" />
+                </>
+              )}
+            </button>
+          </div>
         </div>
       )}
     </div>

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -424,35 +424,37 @@ function ConfirmAddFund({
         </div>
       </div>
 
-      <div className="modal-footer-wrapper flex justify-end items-center gap-4">
-        <button
-          className="custom-btn bg-[#f5a430] text-black text-base"
-          onClick={getBack}
-        >
-          Back
-        </button>
-        {__confirmCountry === "US" && (
+      <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+        <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
           <button
-            className="custom-btn btn-gradient text-white text-base"
-            onClick={
-              __confirmData?.cardType === "prev"
-                ? handlePrevCard
-                : handleNewCard
-            }
+            className="custom-btn bg-[#f5a430] text-black text-base"
+            onClick={getBack}
           >
-            {confirmCredit?.show?.acceptConfirm?.loader ? (
-              <LoadingSpinner size="6" color="sky-blue" />
-            ) : (
-              "Proceed"
-            )}
+            Back
           </button>
-        )}
-        {__confirmCountry === "NG" && (
-          <FlutterWaveButton
-            {...fwConfig}
-            className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-          />
-        )}
+          {__confirmCountry === "US" && (
+            <button
+              className="custom-btn btn-gradient text-white text-base"
+              onClick={
+                __confirmData?.cardType === "prev"
+                  ? handlePrevCard
+                  : handleNewCard
+              }
+            >
+              {confirmCredit?.show?.acceptConfirm?.loader ? (
+                <LoadingSpinner size="6" color="sky-blue" />
+              ) : (
+                "Proceed"
+              )}
+            </button>
+          )}
+          {__confirmCountry === "NG" && (
+            <FlutterWaveButton
+              {...fwConfig}
+              className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            />
+          )}
+        </div>
       </div>
     </>
   );

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -105,7 +105,7 @@ function ConfirmNairaWithdraw({
 
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="logout-modal-wrapper w-[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 w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
           <div className="modal-header-con">
             <h2 className="modal-title">
@@ -387,37 +387,39 @@ function ConfirmNairaWithdraw({
               >
                 {requestStatus.message && requestStatus.message}
               </p>
-              <div className="modal-footer-wrapper flex justify-end items-center gap-2">
-                {!completeNairaWithdraw.show && (
-                  <button
-                    type="button"
-                    onClick={action}
-                    className="custom-btn bg-[#f5a430] text-black text-base"
-                  >
-                    Cancel
-                  </button>
-                )}
-
-                <button
-                  onClick={
-                    completeNairaWithdraw.show
-                      ? action
-                      : completeNairaWithdraw?.state?.internal_return < 0
-                      ? action
-                      : handleSubmit
-                  }
-                  className="custom-btn btn-gradient text-base text-white"
-                >
-                  {requestStatus.loading ? (
-                    <LoadingSpinner size="6" color="sky-blue" />
-                  ) : completeNairaWithdraw.show ? (
-                    "Okay"
-                  ) : completeNairaWithdraw?.state?.internal_return < 0 ? (
-                    "Cancel"
-                  ) : (
-                    "Transfer"
+              <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+                <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+                  {!completeNairaWithdraw.show && (
+                    <button
+                      type="button"
+                      onClick={action}
+                      className="custom-btn bg-[#f5a430] text-black text-base"
+                    >
+                      Cancel
+                    </button>
                   )}
-                </button>
+
+                  <button
+                    onClick={
+                      completeNairaWithdraw.show
+                        ? action
+                        : completeNairaWithdraw?.state?.internal_return < 0
+                        ? action
+                        : handleSubmit
+                    }
+                    className="custom-btn btn-gradient text-base text-white"
+                  >
+                    {requestStatus.loading ? (
+                      <LoadingSpinner size="6" color="sky-blue" />
+                    ) : completeNairaWithdraw.show ? (
+                      "Okay"
+                    ) : completeNairaWithdraw?.state?.internal_return < 0 ? (
+                      "Cancel"
+                    ) : (
+                      "Transfer"
+                    )}
+                  </button>
+                </div>
               </div>
             </>
           )}

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -35,7 +35,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
       situation={situation}
       className="assign-task-popup"
     >
-      <div className="logout-modal-wrapper w-[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 w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">
           <h1 className="modal-title">
             {confirmCredit?.show?.acceptConfirm?.loader

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -290,7 +290,7 @@ function NairaWithdraw({
 
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="logout-modal-wrapper w-[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 w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
           <div className="modal-header-con">
             <h1 className="modal-title">
@@ -794,30 +794,32 @@ function NairaWithdraw({
 
                     </div>
                     
-                    <div className="modal-footer-wrapper flex justify-end items-center gap-2 py-4">
-                      <button
-                        type="button"
-                        onClick={action}
-                        className="custom-btn bg-[#f5a430] text-black text-base"
-                      >
-                        Cancel
-                      </button>
+                    <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+                      <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+                        <button
+                          type="button"
+                          onClick={action}
+                          className="custom-btn bg-[#f5a430] text-black text-base"
+                        >
+                          Cancel
+                        </button>
 
-                      <button
-                        type="submit"
-                        disabled={
-                          props.isSubmitting || sendMoneyFee.loading
-                            ? true
-                            : false
-                        }
-                        className="custom-btn btn-gradient text-base text-white"
-                      >
-                        {requestStatus ? (
-                          <LoadingSpinner size="6" color="sky-blue" />
-                        ) : (
-                          "Continue"
-                        )}
-                      </button>
+                        <button
+                          type="submit"
+                          disabled={
+                            props.isSubmitting || sendMoneyFee.loading
+                              ? true
+                              : false
+                          }
+                          className="custom-btn btn-gradient text-base text-white"
+                        >
+                          {requestStatus ? (
+                            <LoadingSpinner size="6" color="sky-blue" />
+                          ) : (
+                            "Continue"
+                          )}
+                        </button>
+                      </div>
                     </div>
                   </Form>
                 )

src/components/Partials/MediaHeader.jsx

@@ -19,7 +19,7 @@ import TimeDifference from "../Helpers/TimeDifference";
 
 const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
 
-export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpath, state, title }) {
+export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpath, title }) {
 
   const darkMode = useContext(DarkModeContext);
 
@@ -110,7 +110,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
     <>
       <div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">
         <div className="flex justify-between items-center w-full">
-          <button
+          {/* <button
             className="xl:hidden block mr-10"
             type="button"
             onClick={sidebarHandler}
@@ -157,12 +157,12 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
                 </linearGradient>
               </defs>
             </svg>
-          </button>
+          </button> */}
 
-          <div className="search-bar xl:hidden justify-center items-center w-[376px]">
-            {/* Home */}
+          {/* Home */}
+          {/* <div className="search-bar xl:hidden justify-center items-center w-[376px]">
             <HomeButton />
-          </div>
+          </div> */}
 
           {/* Back BTN AND TITLE */}
           <div className="pl-4 w-full flex justify-start gap-3 items-center">
@@ -172,7 +172,6 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
             onClick={() => {
                 if (backpath == "/manage-family") {
                 navigate(backpath,
-                    { state: { ...state} },
                     { replace: true }
                 );
                 } else {
@@ -199,7 +198,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
                 )}
             </div>
 
-            <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
+            <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide line-clamp-1">
             {title && title}
             </h1>
           </div>

src/components/Partials/MediaLayout.jsx

@@ -10,7 +10,7 @@ import RightSideBar from "./RightSideBar";
 import Sidebar from "./Sidebar";
 import MediaHeader from "./MediaHeader";
 
-export default function MediaLayout({backpath, title, state, children }) {
+export default function MediaLayout({backpath, title, children }) {
     const { drawer } = useSelector((state) => state.drawer);
     const { userJobList } = useSelector((state) => state.userJobList);
     const dispatch = useDispatch();
@@ -69,7 +69,7 @@ export default function MediaLayout({backpath, title, state, children }) {
                     <div className={`nft-header-container-wrapper flex-1 md:ml-12 xl:ml-[110px]  h-full`}>
                         {/* header */}
                         <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
-                            <MediaHeader backpath={backpath} title={title} state={state} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
+                            <MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
                         </div>
                         {/* container */}
                         <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">

src/components/familyResources/FamGames.jsx

@@ -1,10 +1,529 @@
-import React from 'react'
+import React, { lazy, Suspense, useRef, useState } from 'react'
 import Layout from '../Partials/Layout'
+import MediaLayout from '../Partials/MediaLayout'
+import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb'
+import ActiveJobMessageMedia from '../MyActiveJobs/ActiveJobMessageMedia'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import usersService from '../../services/UsersService'
+import { useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { useReactToPrint } from 'react-to-print'
+
+const Iframe = lazy(() => import("../Iframe/Iframe"));
 
 export default function FamGames() {
+
+  const ApiCall = new usersService();
+  const navigate = useNavigate();
+
+  const { userDetails } = useSelector((state) => state.userDetails);
+
+  const [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent
+
+  const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
+
+  const [tab, setTab] = useState("message");
+
+  const [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  });
+
+  // let [popUp, setPopUp] = useState(false); // STATE FOR POPOUT MODAL
+
+  const printRef = useRef();
+  // to handle printing
+  const handlePrint = useReactToPrint({
+    content: () => printRef.current,
+  });
+
+  // FUNCTION TO HANDLE POPOUT
+  const popUpHandler = () => {
+    setPopUp((prev) => !prev);
+  };
+
+  // FUNCTION TO HANDLE MESSAGE CHANGE
+  const handleMessageChange = ({ target: { value } }) => {
+    setMessageToSend(value);
+  };
+
+  // FUNCTION TO HANDLE FILE UPlOAD CHANGE
+  const handleFileChange = ({ target: { files } }) => {
+    setRequestStatus({ loading: false, status: false, message: "" }); // State to determine error state
+
+    if (!files[0]) {
+      // IF NO FILE SELECTED RETURN
+      return;
+    }
+    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "File must be <= 1mb",
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    if (filesToSend.length >= Number(process.env.REACT_APP_TOTAL_NUM_FILE)) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: `Total number of attachment is ${Number(
+          process.env.REACT_APP_TOTAL_NUM_FILE
+        )}`,
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    // INCLUDE FILE IF NO ERROR
+    setFilesToSend((prev) => [...prev, files[0]]);
+  };
+
+  // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
+  const handleClearAll = ({ target: { name } }) => {
+    if (tab == "message") {
+      setMessageToSend("");
+    } else if (tab == "files") {
+      setFilesToSend([]);
+    } else {
+      return;
+    }
+  };
+
+  // FUNCTION TO REMOVE AND IMAGE
+  const handleRemoveImage = (imageToDelete) => {
+    setFilesToSend((prev) =>
+      prev.filter((item) => item.name != imageToDelete.name)
+    );
+  };
+
+  // FUNCTION TO SEND TASK MESSAGE
+  const sendTaskMessage = () => {
+    let reqData = {
+      message: messageToSend,
+      msg_type: "TEXT",
+      contract: props.details.contract,
+    };
+    if (!reqData.message) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Message is empty",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+    setRequestStatus({ loading: true, status: false, message: "" });
+    ApiCall.sendTaskMessage(reqData)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Message could not be sent, try again later",
+          });
+          return;
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Message Sent Successfully",
+        });
+        // function to trigger socket to emit 'send_message'
+        sendMessage(messageToSend, `${props.details.contract}-${props.details.contract_uid}`)
+        
+        props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+        setMessageToSend(""); // SENDS MESSAGE TO SEND BACK TO EMPTY STRINGS
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Opps! something went wrong",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
+  };
+
+  // FUNCTION TO SEND FILES
+  const sendFile = async () => {
+    setRequestStatus({ loading: true, status: false, message: "" });
+
+    if (!filesToSend.length) {
+      // checks if file to send is empty
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "No File(s) selected",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    for (let i = 0; i <= filesToSend.length - 1; i++) {
+      // Loops through files to send array and trigger upload API call
+
+      const fileToBase64 = async () => {
+        // Converts file data to base64 string
+        try {
+          const base64String = await convertFileToBase64(filesToSend[i]);
+          return base64String;
+        } catch (error) {
+          return false;
+        }
+      };
+
+      // if(await !fileToBase64()){
+      //   return
+      // }
+
+      let reqData = {
+        file_name: filesToSend[i].name,
+        file_size: filesToSend[i].size,
+        file_type: "image/png",
+        file_data: await fileToBase64(),
+        msg_type: "FILE",
+        contract: props.details.contract,
+      };
+
+      ApiCall.sendFiles(reqData)
+        .then((res) => {
+          // if(res.status != 200 || res.data.internal_return < 0){
+          //   setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
+          //   return
+          // }
+          // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
+          // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+          // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+        })
+        .catch((error) => {
+          // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
+        })
+        .finally(() => {
+          if (i == filesToSend.length - 1) {
+            setRequestStatus({
+              loading: false,
+              status: true,
+              message: "File(s) Uploaded Successfully",
+            });
+            setFilesToSend([]); // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+            props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+            setTimeout(() => {
+              setRequestStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          }
+        });
+    }
+  };
+
+
   return (
-    <Layout>
-        <div>Family Games Page</div>
-    </Layout>
+    <MediaLayout
+      backpath={'/'}
+      title={'Games'}
+    >
+        {/* <div className='mb-4'>
+          <CustomBreadcrumb 
+            title='Games and Interest' 
+            breadcrumb = {
+              [
+                { link: "/", title: "Home" },
+                  { link: "/work-in-progress", title: "Games and Interest", active: true},
+              ]
+            }
+          />
+        </div> */}
+        <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+            <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
+            
+            <div className="mb-4 w-full h-screen max-h-[600px]">
+              <Suspense fallback={<Fallback />}>
+                <Iframe 
+                  src={process.env.REACT_APP_FAM_GAME_LINK}
+                  title='Games'
+                />
+              </Suspense>
+            </div>
+
+            <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
+                <div className="w-full flex flex-col justify-between">
+                    <div className="w-full h-30">
+                      <div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
+                        {/* <p className="w-full text-base text-right text-sky-blue">
+                        {props?.details && props.details.job_to}
+                        </p>
+                        <div className="text-base tracking-wide">
+                            <p className="font-semibold text-black dark:text-white tracking-wider">
+                                Description:{" "}
+                            </p>
+                            <p className="p-2 ml-8 border-b border-sky-blue">
+                                {props?.details && props.details.description}
+                            </p>
+                        </div>
+                        <div className="mt-6 w-full lg:flex gap-8">
+                            <div className="w-full text-base tracking-wide">
+                                <p className="font-semibold text-black dark:text-white tracking-wider">
+                                    Delivery Detail:{" "}
+                                </p>
+                                <p className="p-2 ml-8">
+                                    {props?.details && props.details.job_description}
+                                </p>
+                            </div>
+                            <div className="my-2 lg:my-0">
+                                <IndexJobActions details={props.details} />
+                            </div>
+                        </div> */}
+                    </div>
+                </div>
+
+                {/* job details */}
+                <div className="w-full md:w-[200px] h-20">
+                    {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
+                    {/* {passDue ? (
+                        <div className="my-1">
+                            <p className="text-base text-slate-700">
+                                <span className="font-semibold">Due: </span>
+                                {props?.details && props.details.delivery_date.split(" ")[0]}
+                            </p>
+                            {props?.delivery_date && (
+                                <p className="py-2 text-base text-slate-700">
+                                {props.details.delivery_date.split(" ")[1]}
+                                </p>
+                            )}
+                        </div>
+                    ) : (
+                        <div className="my-1 flex items-start gap-3">
+                            <p className="font-semibold">Due: </p>
+                            <div className="flex flex-col justify-between">
+                                <p className="text-base text-slate-700 tracking-wide">
+                                <CountDown
+                                    lastDate={props?.details && props.details.delivery_date}
+                                />
+                                </p>
+                                <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
+                                <span>Hrs</span>
+                                <span>Min</span>
+                                <span>Sec</span>
+                                </div>
+                            </div>
+                        </div>
+                    )} */}
+
+                    {/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                        <span className="font-semibold text-black dark:text-white">
+                        Reward:{" "}
+                        </span>
+                        <span className="">{thePrice}</span>
+                    </div>
+
+                    <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                        <span className="font-semibold text-black dark:text-white">
+                        Duration:{" "}
+                        </span>
+                        <span className="">
+                        {props.details?.timeline_days && props.details.timeline_days}{" "}
+                        day(s)
+                        </span>
+                    </div> */}
+                </div>
+                {/* end of job details */}
+            </div>
+            </div>
+
+            <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
+                {/* TEXTAREA SECTION */}
+                <div className="w-full mb-3 hidden">
+                    <div className="w-full">
+                        <div className="pl-7 flex items-center gap-3">
+                            <button
+                                name="message"
+                                onClick={(e) => setTab(e.target.name)}
+                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
+                                tab == "message"
+                                    ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                                    : "bg-white text-[#000] border-t-[2px]"
+                                }`}
+                            >
+                                Send Message
+                            </button>
+                            <button
+                                name="files"
+                                onClick={(e) => setTab(e.target.name)}
+                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
+                                tab == "files"
+                                    ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                                    : "bg-white text-[#000] border-t-[2px]"
+                                }`}
+                            >
+                                Send Files
+                            </button>
+                        </div>
+                        {tab == "message" ? (
+                        <textarea
+                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none"
+                            // rows="10"
+                            style={{ resize: "none" }}
+                            name="message"
+                            onChange={handleMessageChange}
+                            value={messageToSend}
+                            autoFocus
+                        />
+                        ) : (
+                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]">
+                            <div className="files flex">
+                            <label
+                                htmlFor="file"
+                                className="custom-btn btn-gradient text-base text-white"
+                            >
+                                Select Files to Upload
+                            </label>
+                            <input
+                                type="file"
+                                id="file"
+                                accept="image/*"
+                                style={{ display: "none" }}
+                                onChange={handleFileChange}
+                            />
+                            </div>
+                            <div className="selected_file my-2 overflow-y-auto">
+                            {filesToSend.length > 0 &&
+                                filesToSend.map((item, index) => (
+                                <p key={index} className="flex items-center space-x-2">
+                                    <span>{item.name}</span>
+                                    <button
+                                    name="remove"
+                                    onClick={() => handleRemoveImage(item)}
+                                    className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
+                                    >
+                                    x
+                                    </button>
+                                </p>
+                                ))}
+                            </div>
+                        </div>
+                        )}
+                    </div>
+
+                    {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                    <div className="w-full">
+                        {/* error or success display */}
+                        {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>
+                            )
+                        ))}
+                    </div>
+                    {/* End of error or success display */}
+
+                    {/* Buttons Sections */}
+                    <div className="py-1 grid grid-cols-1 xxs:grid-cols-3">
+                        <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
+                            <button
+                                type="button"
+                                onClick={handleClearAll}
+                                className="custom-btn border-gradient"
+                            >
+                                <span className="text-gradient">Clear</span>
+                            </button>
+                            {tab == "files" ? (
+                                <button
+                                onClick={sendFile}
+                                type="button"
+                                className="custom-btn btn-gradient text-white"
+                                >
+                                {requestStatus.loading ? (
+                                    <LoadingSpinner size="6" color="sky-blue" />
+                                ) : (
+                                    <>
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 24 24"
+                                        width="20"
+                                        height="20"
+                                        fill="white"
+                                    >
+                                        <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
+                                    </svg>
+
+                                    <span className="text-white">Upload Files</span>
+                                    </>
+                                )}
+                                </button>
+                            ) : (
+                                <button
+                                onClick={sendTaskMessage}
+                                type="button"
+                                className="custom-btn btn-gradient text-white"
+                                >
+                                {requestStatus.loading ? (
+                                    <LoadingSpinner size="6" color="sky-blue" />
+                                ) : (
+                                    <span className="text-white">Send</span>
+                                )}
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                    {/* end of Buttons Sections  */}
+                </div>
+                {/* END OF TEXTAREA */}
+
+                {/* MESSAGE SECTION */}
+                <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md h-[400px]">
+                  <div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
+                    {/* <div className="flex justify-between items-center gap-5">
+                        <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
+                        <span>Message</span>
+                        <button
+                        type="button"
+                        onClick={popUpHandler}
+                        className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
+                        >
+                        View all
+                        </button>
+                        </p>
+                    </div>
+                    {props.activeJobMesList.loading ? (
+                        <LoadingSpinner size="16" color="sky-blue" />
+                    ) : (
+                        <ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} />
+                    )} */}
+                </div>
+                {/* END OF MESSAGE */}
+            </div>
+        </div>
+    </MediaLayout>
   )
 }
+
+
+
+let Fallback = () => {
+  return (
+    <div className="w-full flex justify-center items-center">
+      <LoadingSpinner size='20' color='skyblue' height='h-screen max-h-[600px]' />
+    </div>
+  )
+}

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -226,11 +226,19 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
               {requestStatus.loading && requestStatus.trigger == "offer" ? (
                 <LoadingSpinner size={8} color="sky-blue" />
               ) : (
-                <button
+                // <button
+                //   name="accept"
+                //   onClick={handleOffer}
+                //   disabled={requestStatus.loading}
+                //   className="px-2 py-2 w-20 flex justify-center items-center border-2 border-green-900 bg-green-500 text-base rounded-2xl text-white"
+                // >
+                //   I am ready to start
+                // </button>
+                <button 
                   name="accept"
                   onClick={handleOffer}
                   disabled={requestStatus.loading}
-                  className="px-2 py-2 w-20 flex justify-center items-center border-2 border-green-900 bg-green-500 text-base rounded-2xl text-white"
+                  className="btn-gradient text-white px-2 py-2 w-40 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
                 >
                   I am ready to start
                 </button>

src/services/UsersService.js

@@ -1455,7 +1455,7 @@ class usersService {
         "Access-Control-Allow-Origin": "*",
         "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
         "Access-Control-Allow-Headers":
-          "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
+            "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
         "Content-Type": "application/json;charset=UTF-8",
       },
     };
@@ -1463,6 +1463,72 @@ class usersService {
     //     Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig
     //     Axios.defaults.withCredentials = true;
     //debugger;
+    return Axios.post(endPoint, reqData)
+        .then((response) => {
+          console.log(response);
+          console.log("~~~~~~~ WrenchBoard::POST ~~~~~~~~");
+          if (response.data.internal_return == "-9999") {
+            localStorage.clear();
+            window.location.href = `/login?sessionExpired=true`;
+          }
+          return response;
+        })
+        .catch((error) => {
+          if (error.response) {
+            //response status is an error code
+            console.log(
+                "ERROR-------------------------------------------------------"
+            );
+            console.log(error.response.status);
+            console.log(
+                "ERROR-------------------------------------------------------"
+            );
+          } else if (error.request) {
+            //response not received though the request was sent
+            console.log(
+                "ERROR2-------------------------------------------------------"
+            );
+            console.log(error?.request);
+            console.log(
+                "ERROR2-------------------------------------------------------"
+            );
+          } else {
+            //an error occurred when setting up the request
+            console.log(
+                "ERROR3-------------------------------------------------------"
+            );
+            console.log(error);
+            console.log(
+                "ERROR3-------------------------------------------------------"
+            );
+          }
+        });
+  }
+
+  postAuxEnd_BROKE(uri, reqData) {
+    const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri;
+    const endPointKey = process.env.REACT_APP_ENDPOINT_KEY;
+    const session_token = localStorage.getItem("session_token");
+    // session_token = session_token !=null ?session_token : '';
+    //   'Authorization': `Basic ${(session_token !=null) ?session_token : ''}`,
+    let axiosConfig = {
+      headers: {
+              Accept: "application/json",
+              "Access-Control-Allow-Origin": "*",
+              "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
+              "Access-Control-Allow-Headers":
+              "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
+              "Content-Type": "application/json;charset=UTF-8"
+              },
+    };
+    //,
+    //               "x-api-key":`${endPointKey}`
+    //  Axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
+    //     Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig
+    //     Axios.defaults.withCredentials = true;
+    //debugger;
+    // Set default header. e.g, X-API-KEY
+   // Axios.defaults.headers['X-API-KEY'] = endPointKey;
     return Axios.post(endPoint, reqData)
       .then((response) => {
         console.log(response);

src/views/FamGamesPage.jsx

@@ -1,9 +1,24 @@
-import React from 'react'
-import FamGames from '../components/familyResources/FamGames'
+import React, { lazy, Suspense } from 'react'
+import LoadingSpinner from '../components/Spinners/LoadingSpinner';
+// import FamGames from '../components/familyResources/FamGames'
+
+const FamGames = lazy(() => import("../components/familyResources/FamGames"));
+
 export default function FamGamesPage() {
   return (
     <>
-        <FamGames />
+      <Suspense fallback={<Fallback />}>
+          <FamGames />
+      </Suspense>
     </>
   )
 }
+
+
+let Fallback = () => {
+  return (
+    <div className="w-full flex justify-center items-center">
+      <LoadingSpinner size='20' color='skyblue' height='h-screen' />
+    </div>
+  )
+}