layout margin centralized

Merge branch 'history-tab' of WrenchBoard/Users-Wrench into master
changed history page tab style
2024-04-08 18:14:45 +01:00 · 2024-04-08 14:45:42 +00:00 · 2024-04-08 14:51:14 +01:00 · 2024-04-08 13:28:42 +00:00 · 2024-04-08 09:17:47 +01:00 · 2024-04-06 01:46:24 +00:00
41 changed files with 2131 additions and 1393 deletions
@@ -118,4 +118,10 @@ 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'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90
@@ -86,4 +86,10 @@ 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'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90
@@ -92,4 +92,10 @@ 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'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90
@@ -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
@@ -72,49 +72,74 @@ function AddJob({ popUpHandler, categories }) {
    }
  };

+  // For form initial values
+  const initialValues = {
+    // initial values for formik
+    country: walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
+    price: "",
+    title: "",
+    description: "",
+    job_detail: "",
+    timeline_days: "",
+    category: [],
+  };
+
  return (
-    <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
-      <Formik
-        initialValues={IV}
+    <Formik
+        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleAddJob}
      >
        {(props) => {
          return (
            <Form>
-              <div className="flex flex-col-reverse sm:flex-row">
-                <div className="fields w-full">
-                  {/* inputs starts here */}
-                  <div className="xl:flex xl:space-x-7 mb-[5px]">
-                    <div className="field w-full mb-6 xl:mb-0">
-                      <label
-                        htmlFor="country"
-                        className="job-label job-label-flex"
-                      >
-                        <span>Currency</span>
-                        {props.errors.country && props.touched.country && (
-                          <span className="text-[12px] text-red-500">
-                            {props.errors.country}
-                          </span>
-                        )}
-                      </label>
-                      <select
-                        id="country"
-                        name="country"
-                        value={props.values.country}
-                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                      >
-                        {walletDetails?.loading ? (
-                          <option className="text-slate-500 text-lg" value="">
-                            Loading...
-                          </option>
-                        ) : walletDetails.data.length ? (
-                          <>
+              <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
+                <div className="flex flex-col-reverse sm:flex-row">
+                  <div className="fields w-full">
+                    {/* inputs starts here */}
+                    <div className="xl:flex xl:space-x-7 mb-[5px]">
+                      <div className="field w-full mb-6 xl:mb-0">
+                        <label
+                          htmlFor="country"
+                          className="job-label job-label-flex"
+                        >
+                          <span>Currency</span>
+                          {props.errors.country && props.touched.country && (
+                            <span className="text-[12px] text-red-500">
+                              {props.errors.country}
+                            </span>
+                          )}
+                        </label>
+                        <select
+                          id="country"
+                          name="country"
+                          value={props.values.country}
+                          className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
+                          onChange={props.handleChange}
+                          onBlur={props.handleBlur}
+                          disabled={walletDetails.data.length == 1}
+                        >
+                          {walletDetails?.loading ? (
                            <option className="text-slate-500 text-lg" value="">
-                              Select a currency
+                              Loading...
                            </option>
+                          ) : walletDetails.data.length > 1 ? (
+                            <>
+                              <option className="text-slate-500 text-lg" value="">
+                                Select a currency
+                              </option>
+                              {walletDetails.data?.map((item, index) => (
+                                <option
+                                  key={index}
+                                  className="text-slate-500 text-lg"
+                                  value={item?.country}
+                                >
+                                  {item?.description}
+                                </option>
+                              ))}
+                            </>
+                          ) : walletDetails.data.length == 1 ?
+                          <>
                            {walletDetails.data?.map((item, index) => (
                              <option
                                key={index}
@@ -125,238 +150,238 @@ function AddJob({ popUpHandler, categories }) {
                              </option>
                            ))}
                          </>
-                        ) : (
-                          <option className="text-slate-500 text-lg" value="">
-                            No Options Found! Try Again
-                          </option>
-                        )}
-                      </select>
+                          :(
+                            <option className="text-slate-500 text-lg" value="">
+                              No Options Found! Try Again
+                            </option>
+                          )}
+                        </select>
+                      </div>
+
+                      {/* Price */}
+                      <div className="field w-full">
+                        <InputCom
+                          fieldClass="px-6 text-right flex"
+                          label="Price"
+                          labelClass=""
+                          type="number"
+                          name="price"
+                          placeholder="0"
+                          value={props.values.price}
+                          inputHandler={props.handleChange}
+                          blurHandler={props.handleBlur}
+                          error={
+                            props.errors.price &&
+                            props.touched.price &&
+                            props.errors.price
+                          }
+                        />
+                      </div>
                    </div>

-                    {/* Price */}
-                    <div className="field w-full">
+                    {/* Title  */}
+                    <div className="field w-full mb-[5px]">
                      <InputCom
-                        fieldClass="px-6 text-right flex"
-                        label="Price"
+                        fieldClass="px-6"
+                        label="Title"
                        labelClass=""
-                        type="number"
-                        name="price"
-                        placeholder="0"
-                        value={props.values.price}
+                        type="text"
+                        name="title"
+                        value={props.values.title}
                        inputHandler={props.handleChange}
                        blurHandler={props.handleBlur}
                        error={
-                          props.errors.price &&
-                          props.touched.price &&
-                          props.errors.price
+                          props.errors.title &&
+                          props.touched.title &&
+                          props.errors.title
                        }
                      />
                    </div>
-                  </div>

-                  {/* Title  */}
-                  <div className="field w-full mb-[5px]">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Title"
-                      labelClass=""
-                      type="text"
-                      name="title"
-                      value={props.values.title}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                      error={
-                        props.errors.title &&
-                        props.touched.title &&
-                        props.errors.title
-                      }
-                    />
-                  </div>
-
-                  {/* Description  */}
-                  <div className="field w-full mb-[5px]">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Description"
-                      labelClass=""
-                      type="text"
-                      name="description"
-                      value={props.values.description}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                      error={
-                        props.errors.description &&
-                        props.touched.description &&
-                        props.errors.description
-                      }
-                    />
-                  </div>
-
-                  {/* Details */}
-                  <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
-                    <div className="sm:w-[60%] w-full">
-                      <label
-                        htmlFor="Job Delivery Details"
-                        className="job-label job-label-flex"
-                      >
-                        Job Delivery Details
-                        {props.errors.job_detail &&
-                          props.touched.job_detail && (
-                            <span className="text-[12px] text-red-500">
-                              {props.errors.job_detail}
-                            </span>
-                          )}
-                      </label>
-                      <textarea
-                        id="Job Delivery Details"
-                        rows="5"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
-                        style={{ resize: "none" }}
-                        name="job_detail"
-                        value={props.values.job_detail}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
+                    {/* Description  */}
+                    <div className="field w-full mb-[5px]">
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Description"
+                        labelClass=""
+                        type="text"
+                        name="description"
+                        value={props.values.description}
+                        inputHandler={props.handleChange}
+                        blurHandler={props.handleBlur}
+                        error={
+                          props.errors.description &&
+                          props.touched.description &&
+                          props.errors.description
+                        }
                      />
                    </div>

-                    <div className="sm:w-[35%] w-full">
-                      <label
-                        htmlFor="Job Categories"
-                        className='job-label'
-                        id="checked-group"
-                      >
-                        Categories
-                      </label>
-                      <div
-                        className="sm:flex-col flex flex-wrap px-3 mt-3"
-                        role="group"
-                        aria-labelledby="checked-group"
-                      >
-                        {categories ? (
-                          <>
-                            {Object?.entries(categories).map(([key, value]) => (
-                              <label
-                                key={key}
-                                className="flex gap-1 w-full items-center"
-                              >
-                                <Field
-                                  type="checkbox"
-                                  name="category"
-                                  value={key}
-                                />
-                                <span className="text-[13.975px]">{value}</span>
-                              </label>
-                            ))}
-                          </>
-                        ) : (
-                          <label className="flex gap-1 w-full items-center">
-                            <Field type="checkbox" name="category" />
-                            <span className="text-[13.975px]">null</span>
-                          </label>
-                        )}
-                        <span className="h-5 text-sm italic text-[#cf3917]">
-                          {props.errors.category &&
-                            props.touched.category &&
-                            "please select a category"}
-                        </span>
+                    {/* Details */}
+                    <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+                      <div className="sm:w-[60%] w-full">
+                        <label
+                          htmlFor="Job Delivery Details"
+                          className="job-label job-label-flex"
+                        >
+                          Job Delivery Details
+                          {props.errors.job_detail &&
+                            props.touched.job_detail && (
+                              <span className="text-[12px] text-red-500">
+                                {props.errors.job_detail}
+                              </span>
+                            )}
+                        </label>
+                        <textarea
+                          id="Job Delivery Details"
+                          rows="5"
+                          className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
+                          style={{ resize: "none" }}
+                          name="job_detail"
+                          value={props.values.job_detail}
+                          onChange={props.handleChange}
+                          onBlur={props.handleBlur}
+                        />
+                      </div>
+
+                      <div className="sm:w-[35%] w-full">
+                        <label
+                          htmlFor="Job Categories"
+                          className='job-label'
+                          id="checked-group"
+                        >
+                          Categories
+                        </label>
+                        <div
+                          className="sm:flex-col flex flex-wrap px-3 mt-3"
+                          role="group"
+                          aria-labelledby="checked-group"
+                        >
+                          {categories ? (
+                            <>
+                              {Object?.entries(categories).map(([key, value]) => (
+                                <label
+                                  key={key}
+                                  className="flex gap-1 w-full items-center"
+                                >
+                                  <Field
+                                    type="checkbox"
+                                    name="category"
+                                    value={key}
+                                  />
+                                  <span className="text-[13.975px]">{value}</span>
+                                </label>
+                              ))}
+                            </>
+                          ) : (
+                            <label className="flex gap-1 w-full items-center">
+                              <Field type="checkbox" name="category" />
+                              <span className="text-[13.975px]">null</span>
+                            </label>
+                          )}
+                          <span className="h-5 text-sm italic text-[#cf3917]">
+                            {props.errors.category &&
+                              props.touched.category &&
+                              "please select a category"}
+                          </span>
+                        </div>
                      </div>
                    </div>
-                  </div>

-                  <div className="field w-full mb-[5px]">
-                    <div className={`flex items-center justify-between mb-2.5`}>
-                      <label
-                        className="job-label"
-                        htmlFor="timeline_days"
-                      >
-                        Timeline
-                        <span className="text-green-700 text-sm tracking-wide">
-                          - Expected duration of this task
-                        </span>
-                      </label>
-                    </div>
-
-                    <Field
-                      component="select"
-                      name="timeline_days"
-                      className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
-                        props.errors.timeline_days &&
-                        props.touched.timeline_days
-                          ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                          : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                      }`}
-                      value={props.values.timeline_days}
-                    >
-                      <option value="">Select Duration</option>
-                      {publicArray.map(({ name, duration }, idx) => (
-                        <option
-                          key={idx}
-                          className="text-slate-500 text-lg"
-                          value={duration}
+                    <div className="field w-full mb-[5px]">
+                      <div className={`flex items-center justify-between mb-2.5`}>
+                        <label
+                          className="job-label"
+                          htmlFor="timeline_days"
                        >
-                          {name}
-                        </option>
-                      ))}
-                    </Field>
-                  </div>
-                  {/* inputs ends here */}
-                </div>
-              </div>
+                          Timeline
+                          <span className="text-green-700 text-sm tracking-wide">
+                            - Expected duration of this task
+                          </span>
+                        </label>
+                      </div>

-              {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-              <div className="content-footer 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}
+                      <Field
+                        component="select"
+                        name="timeline_days"
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
+                          props.errors.timeline_days &&
+                          props.touched.timeline_days
+                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                        }`}
+                        value={props.values.timeline_days}
+                      >
+                        <option value="">Select Duration</option>
+                        {publicArray.map(({ name, duration }, idx) => (
+                          <option
+                            key={idx}
+                            className="text-slate-500 text-lg"
+                            value={duration}
+                          >
+                            {name}
+                          </option>
+                        ))}
+                      </Field>
                    </div>
-                  ) : (
-                    requestStatus.status && (
+                    {/* inputs ends here */}
+                  </div>
+                </div>
+
+                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                <div className="content-footer w-full">
+                  {/* error or success display */}
+                  {requestStatus.message != "" &&
+                    (!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]`}
+                        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>
-                    )
-                  ))}
-                {/* End of error or success display */}
-
-                <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                  <div className="flex items-center space-x-4 mr-9">
-                    <button
-                      type="button"
-                      className="text-18 tracking-wide h-11 flex justify-center items-center border border-light-red text-base rounded-full text-light-red cursor-pointer"
-                    >
-                      <span
-                        className="px-2"
-                        onClick={popUpHandler}
-                      >
-                        {" "}
-                        Cancel
-                      </span>
-                    </button>
-
-                    {requestStatus?.loading ? (
-                      <LoadingSpinner size="8" color="sky-blue" />
                    ) : (
-                      <button
-                        type="submit"
-                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                      >
-                        Add Job
-                      </button>
-                    )}
-                  </div>
+                      requestStatus.status && (
+                        <div
+                          className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        >
+                          {requestStatus.message}
+                        </div>
+                      )
+                    ))}
+                  {/* End of error or success display */}
+
+                </div>
+              </div>
+              <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"
+                    className="custom-btn border border-light-red text-light-red"
+                  >
+                    <span
+                      className="px-2"
+                      onClick={popUpHandler}
+                    >
+                      {" "}
+                      Cancel
+                    </span>
+                  </button>
+
+                  {requestStatus?.loading ? (
+                    <LoadingSpinner size="8" color="sky-blue" />
+                  ) : (
+                    <button
+                      type="submit"
+                      className="custom-btn btn-gradient text-white"
+                    >
+                      Add Job
+                    </button>
+                  )}
                </div>
              </div>
            </Form>
          );
        }}
      </Formik>
-    </div>
  );
 }

@@ -46,15 +46,15 @@ export default function OfferCard({
          </h1>

          <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-            <div className="grid grid-cols-2 gap-2">
-              <div className="flex flex-col justify-between items-center border-r-2">
+            <div className="grid grid-cols-1 gap-2">
+              {/* <div className="flex flex-col justify-between items-center border-r-2">
                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                  Task Code
                </p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                  {datas.contract}
                </p>
-              </div>
+              </div> */}
              <div className="flex flex-col justify-between items-center">
                <p className="text-sm text-red-500 tracking-wide">Expires</p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
@@ -144,7 +144,7 @@ export default function AssignMediaTask({
                                            </div>
                                            <div className="grid grid-cols-3 gap-3">
                                                {/* Price */}
-                                                <div className="field w-full">
+                                                <div className="field w-full flex flex-col justify-between">
                                                    <label htmlFor="price" className="job-label flex gap-1">
                                                        Reward
                                                        <span className='text-red-500 text-base'>{props.errors.amount && props.touched.amount && '*'}</span>
@@ -164,7 +164,7 @@ export default function AssignMediaTask({
                                                </div>

                                                {/* Currency */}
-                                                <div className="field w-full">
+                                                <div className="field w-full flex flex-col justify-between">
                                                    <label
                                                    htmlFor="currency"
                                                    className="job-label flex gap-1 invisible"
@@ -224,7 +224,7 @@ export default function AssignMediaTask({
                                                </div>
                                            
                                                {/* Duration */}
-                                                <div className="field w-full">
+                                                <div className="field w-full flex flex-col justify-between">
                                                    <label
                                                    htmlFor="timeline_days"
                                                    className="job-label flex gap-1"
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import React, {memo, useCallback, useEffect, useState} from 'react'
 import Image from '../../assets/images/taskbanners/default.jpg'

 import usersService from '../../services/UsersService';
@@ -9,8 +9,8 @@ import LoadingSpinner from '../Spinners/LoadingSpinner';

 import { AmountTo2DP } from '../Helpers/PriceFormatter';

-function RewardsTable() {

+export const RewardsTable = memo(() => {
    const apiCall = new usersService()

    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
@@ -30,7 +30,7 @@ function RewardsTable() {


    //FUNCTION TO GET FAMILY REWARD HISTORY
-    const getFamilyRewardHistory = ()=>{
+    const getFamilyRewardHistory = useCallback(()=>{
        apiCall.getFamilyRewardHx().then((res)=>{
            if(res.data.internal_return < 0){ // success but no data
                setFamilyRewardHistory(prev => ({...prev, loading: false}))
@@ -40,7 +40,7 @@ function RewardsTable() {
        }).catch((error)=>{
            setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
        })
-    }
+    },[])

    useEffect(()=>{
        getFamilyRewardHistory()
@@ -99,5 +99,5 @@ function RewardsTable() {
    </div>
  )
 }
-
+)
 export default RewardsTable
@@ -13,11 +13,15 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import RewardsTable from "./RewardsTable";
 import JobsCompleted from "./JobsCompleted";

+import TabButton from "../customTabs/TabButton";
+
 export default function History() {

    const apiCall = new usersService()

    let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
+    const [selectedTab, setSelectedTab] = useState("purchases");
+    const tabs = ["purchases", "recent activity", "rewards", 'jobs completed'] //STATE FOR SWITCHING BETWEEN TABS

    let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
        loading: true,
@@ -222,7 +226,18 @@ export default function History() {
            {/* <TopHxBox className="mb-11" /> */}
            <div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
                {/* switch button */}
-                <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
+                <div className="grid grid-cols-4 mt-4">
+                {tabs.map((item) => (
+                    <TabButton 
+                        key={item}
+                        item={item}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
+                    />
+                ))}
+                </div>
+                {/* switch button */}
+                {/* <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
                    <button
                    name="purchases"
                    onClick={(e) => setTab(e.target.name)}
@@ -259,12 +274,12 @@ export default function History() {
                    >
                    Jobs Completed
                    </button>
-                </div>
+                </div> */}
                {/* END OF switch button */}
-                <div className="history-tables w-full">
+                <div className="history-tables w-full bg-red-50 overflow-x-auto">
                    {/* PURCHASE SECTION */}
-                    {tab == 'purchases' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'purchases' &&
+                        <div className="wallet w-full">
                            {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> */}
                            {purchaseHistory.loading ? 
                            <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
@@ -276,8 +291,8 @@ export default function History() {
                    {/* END OF PURCHASE SECTION */}
                    
                    {/* RECENT ACTIVITY SECTION */}
-                    {tab == 'recent' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'recent activity' &&
+                        <div className="wallet w-full">
                            {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1> */}
                            {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                            {paymentHistory.loading ? 
@@ -290,16 +305,16 @@ export default function History() {
                    {/* END OF RECENT ACTIVITY SECTION */}

                    {/* REWARD SECTION */}
-                    {tab == 'reward' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'rewards' &&
+                        <div className="wallet w-full">
                            <RewardsTable />
                        </div>
                    }
                    {/* END OF REWARD SECTION */}

                    {/* JOBS COMPLETED SECTION */}
-                    {tab == 'jobs_completed' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'jobs completed' &&
+                        <div className="wallet w-full">
                            <JobsCompleted />
                        </div>
                    }
@@ -67,7 +67,7 @@ export default function Home(props) {

  return (
    <Layout>
-      <div className="home-page-wrapper">
+      <div className="w-full">
        {userDetails && userDetails?.account_type == "FAMILY" ? (
          <FamilyDash
            account={userDetails}
@@ -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>
+  )
+}
@@ -256,14 +256,16 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                </p>
                <hr />
                <button
-                  className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex sm:flex-col flex-row sm:gap-0 gap-1 items-center justify-center"
+                  className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
                  name="market-interest"
                  onClick={ManageInterest}
                >
                  {" "}
-                  <span>Send</span>
-                  <span>Interest</span>
-                  <span>Request</span>
+                  <div className="w-full flex flex-col justify-between gap-2">
+                    <span>Send</span>
+                    <span>Interest</span>
+                    <span>Request</span>
+                  </div>
                </button>
                <>
                  {manageInt.loading ? (
@@ -273,11 +273,10 @@ 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">
+            {/* <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">
                <div className="w-full">
                    <div className="w-full flex justify-start space-x-3 items-start">
                        <button
@@ -310,7 +309,7 @@ function ActiveJobsMedia(props) {
                        </h1>
                    </div>
                </div>
-            </div>
+            </div> */}
        {/* end of job title */}

        <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
@@ -320,29 +319,39 @@ function ActiveJobsMedia(props) {
                <VideoElement videoId={props?.details?.media_uid} />
            </div>

-            <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-2">
+            <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">
                        <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 border border-sky-blue">
+                            <p className="p-2 ml-8 border-b border-sky-blue">
                                {props?.details && props.details.description}
                            </p>
                        </div>
-                    </div>
-                    <div className="my-2">
-                        <IndexJobActions details={props.details} />
+                        <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]">
-                    <p className="text-base text-sky-blue">Delivery Detail</p>
+                <div className="w-full md:w-[200px] flex flex-col justify-center gap-4">
+                    {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
                    {passDue ? (
                        <div className="my-1">
                            <p className="text-base text-slate-700">
@@ -375,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>
@@ -389,14 +398,14 @@ function ActiveJobsMedia(props) {
                        day(s)
                        </span>
                    </div>
-                    <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                    {/* <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">
                        No:{" "}
                        </span>
                        <span className="">
                        {props.details?.contract && props.details.contract}
                        </span>
-                    </div>
+                    </div> */}
                </div>
                {/* end of job details */}
            </div>
@@ -432,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"
@@ -441,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"
@@ -499,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}
@@ -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="custom-btn btn-gradient text-white">
+                <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>
@@ -121,7 +121,7 @@ function PastDueJobAction({jobDetails}) {
                        <button 
                            type="button" 
                            onClick={popUpHandler} 
-                            className="px-4 h-[48px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            className="custom-btn btn-gradient text-base text-white"
                        >
                            Cancel or Extend Timeline
                        </button>
@@ -133,14 +133,14 @@ function PastDueJobAction({jobDetails}) {

        {popUp && (
            <ModalCom action={popUpHandler} situation={popUp}>
-                <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
-                    <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
-                        <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+                <div className="logout-modal-wrapper lg:w-[460px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+                    <div className="modal-header-con">
+                        <h1 className="modal-title">
                        Past Due Task
                        </h1>
                        <button
                        type="button"
-                        className="text-[#374557] dark:text-red-500"
+                        className="modal-close-btn"
                        onClick={popUpHandler}
                        >
                          <svg
@@ -164,7 +164,7 @@ function PastDueJobAction({jobDetails}) {
                            </svg>
                        </button>
                    </div>
-                    <div className="job-action-modal-body w-full px-10 py-8 gap-4">
+                    <div className="relative job-action-modal-body w-full px-10 py-8 gap-4">
                        <div className="w-full flex flex-col items-center">
                            <div className="mb-5 flex justify-center items-center gap-2">
                                <input 
@@ -173,26 +173,26 @@ function PastDueJobAction({jobDetails}) {
                                    onChange={()=>{setChecked(prev => !prev)}} 
                                    className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' 
                                />
-                                <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>I am ready to cancel this task</p>
+                                <p className='job-label'>I am ready to cancel this task</p>
                            </div>

-                            <div className="mb-5 flex justify-center items-center">
+                            <div className="mb-5 w-full flex justify-end items-center">
                                {reqStatus.loading && action=='cancel'?
                                    <LoadingSpinner color='sky-blue' size='10' />
                                :
-                                    <button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white">
+                                    <button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="custom-btn border-gradient text-base text-white">
                                        <span className='text-gradient'>Cancel this task</span>
                                    </button>
                                }
                            </div>

                            {/* EXTEND TIMELINE SECTION */}
-                            <div className='w-full my-3 py-3 border-y flex flex-col items-center'>
+                            <div className='w-full my-3 py-3 border-t flex flex-col items-center'>
                                <div className='mb-5 flex items-center gap-2'>
-                                    <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>Extend the timeline by:</p>
+                                    <p className='job-label'>Extend the timeline by:</p>
                                    <select 
                                        onChange={({target})=>{setExtendedTime(target.value)}}
-                                        className='text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0'
+                                        className='text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 rounded-full'
                                    >
                                        <option className='text-slate-500 text-lg' value=''>select</option>
                                        <option className='text-slate-500 text-lg' value='2'>1 days</option>
@@ -204,25 +204,27 @@ function PastDueJobAction({jobDetails}) {
                                {reqStatus.loading && action=='extend' ?
                                    <LoadingSpinner color='sky-blue' size='10' />
                                :
-                                <button disabled={reqStatus.loading} type="button" onClick={extendTime} className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
-                                    Extend Timeline
-                                </button>
+                                <div className='w-full flex justify-end items-center'>
+                                    <button disabled={reqStatus.loading} type="button" onClick={extendTime} className="custom-btn btn-gradient text-base text-white">
+                                        Extend Timeline
+                                    </button>
+                                </div>
 }                               
                            </div>

                            {/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
-                            <div className="w-full">
+                            <div className="w-full absolute left-0 bottom-0 text-center">
                            {reqStatus.message != "" &&
                                (!reqStatus.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]`}
+                                    className={`relative p-2 mx-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                                >
                                    {reqStatus.message}
                                </div>
                                ) : (
                                reqStatus.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]`}
+                                    className={`relative p-2 mx-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                                    >
                                    {reqStatus.message}
                                    </div>
@@ -232,17 +234,17 @@ function PastDueJobAction({jobDetails}) {
                            {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
                        </div>
                        
-                        {/* cancel btn */}
-                        <div className='flex justify-end items-center'>
-                            <button onClick={popUpHandler} type="button" 
-                                // className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
-                                className='w-[150px] mt-2 h-[48px] rounded-full text-base bg-transparent border border-red-500 text-red-500'
-                            >
-                                Cancel
-                                {/* <span className='text-gradient'>Cancel</span> */}
-                            </button>
-                        </div>
                    </div> 
+                    {/* cancel btn */}
+                    <div className='modal-footer-wrapper flex justify-center items-center'>
+                        <button onClick={popUpHandler} type="button" 
+                            // className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
+                            className='custom-btn text-base bg-transparent border border-red-500 text-red-500'
+                        >
+                            Cancel
+                            {/* <span className='text-gradient'>Cancel</span> */}
+                        </button>
+                    </div>
                </div>
            </ModalCom>
        )}
@@ -119,7 +119,7 @@ export default function MyOffersFamilyTable({ className, familyOffers, image_ser
            </div>
          </div>
          {/* trending products */}
-          <div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
+          <div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue dark:bg-dark-white/50 transition-all duration-300">
            <SliderCom selector={trendingSlider} settings={settings}>
              {familyOffers &&
                familyOffers.length > 0 &&
@@ -259,14 +259,14 @@ function AddFundDollars(props) {
      <div className="w-full">
        {/* switch button */}
        <div className="flex">
-          <form className="add-fund-info flex items-center gap-3">
-            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+          <form className="add-fund-info flex items-center gap-3 md:px-8 md:pt-4 px-4 pt-2">
+            <h1 className="job-label my-1">
              {countryWallet == "US" && "Payment Method"}
            </h1>
            <div className="my-1 flex items-center gap-2">
              <label
                htmlFor="previous"
-                className="cursor-pointer flex items-center gap-1"
+                className="flex items-center gap-1"
              >
                <input
                  type="radio"
@@ -283,7 +283,7 @@ function AddFundDollars(props) {
              </label>
              <label
                htmlFor="new"
-                className={`cursor-pointer flex items-center gap-1 ${
+                className={`flex items-center gap-1 ${
                  payListCards.data.length >= MaxNoOfCards
                    ? "pointer-events-none"
                    : ""
@@ -313,7 +313,7 @@ function AddFundDollars(props) {

        {/* previous selectedOption */}
        {selectedOption === "previous" && (
-          <div className="p-4 previous-details w-full min-h-[16.5rem] flex flex-col">
+          <div className="px-8 py-4 previous-details w-full h-[300px] flex flex-col">
            {payListCards.loading ? (
              <LoadingSpinner size="10" color="sky-blue" />
            ) : payListCards?.data?.length ? (
@@ -367,7 +367,7 @@ function AddFundDollars(props) {
        )}

        {selectedOption === "new" && (
-          <div className="new-details w-full max-h-[22rem]">
+          <div className="new-details w-full">
            {payListCards.loading ? (
              <div className="pt-10 flex w-full h-full justify-center items-center">
                <LoadingSpinner size="10" color="sky-blue" />
@@ -381,14 +381,14 @@ function AddFundDollars(props) {
                >
                  {(props) => {
                    return (
-                      <Form className="md:pl-8">
-                        <div className="flex flex-col-reverse sm:flex-row">
+                      <Form className="w-full">
+                        <div className="flex flex-col-reverse sm:flex-row md:px-8 md:pt-4 px-4 pt-2">
                          <div className="flex-1 sm:mr-10">
                            <div className="fields w-full">
                              {/* Inputs */}
                              {/* Name */}
                              <div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
-                                <label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
+                                <label className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
                                  Name:
                                </label>
                                <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
@@ -423,7 +423,7 @@ function AddFundDollars(props) {
                                        className={`flex items-center justify-between mb-2.5`}
                                      >
                                        <label
-                                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
+                                          className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
                                          htmlFor="expiration"
                                        >
                                          Exp Month{" "}
@@ -588,26 +588,28 @@ function AddFundDollars(props) {
                          </div>
                        </div>

-                        <div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
-                          <button
-                            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
-                            onClick={handleClose}
-                          >
-                            Cancel
-                          </button>
-                          <button
-                            type="submit"
-                            className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full 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="md:py-8 add-fund-btn flex justify-end items-center gap-2 py-4">
-          <button
-            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
-            onClick={props.onClose}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleSubmit}
-            name="previous"
-            type="button"
-            className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full 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>
      )}
    </>
@@ -126,12 +126,12 @@ function AddFundPop({
  };

  return (
-    <div className="h-[33rem] w-full">
+    <div className="w-full">
      <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
        <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
            <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
-              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+              <h1 className="job-label my-1">
                Amount({currency})
              </h1>
              <div className="field w-full max-w-[250px]">
@@ -149,51 +149,53 @@ function AddFundPop({
                </p>
              </div>
            </form>
-
-            {countryWallet === "US" && (
-              <div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
-                <AddFundDollars
-                  setInputError={setInputError}
-                  walletItem={walletItem}
-                  input={input}
-                  setInput={setInput}
-                  currency={currency}
-                  onClose={onClose}
-                  confirmCredit={confirmCredit}
-                  setConfirmCredit={setConfirmCredit}
-                />
-              </div>
-            )}
-
-            {countryWallet == "NG" && <div className="h-[19rem]"></div>}
-
-            {countryWallet == "NG" && (
-              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
-                <button
-                  className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
-                  onClick={onClose}
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={handleSubmit}
-                  type="button"
-                  className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
-                >
-                  {__awaitComponent.loader ? (
-                    <LoadingSpinner size="6" color="sky-blue" />
-                  ) : (
-                    <>
-                      <span className="text-white">Continue</span>{" "}
-                      <Icons name="chevron-right" />
-                    </>
-                  )}
-                </button>
-              </div>
-            )}
          </div>
        </div>
      </div>
+
+      {countryWallet === "US" && (
+        <div className="w-full bg-white dark:bg-dark-white rounded-2xl">
+          <AddFundDollars
+            setInputError={setInputError}
+            walletItem={walletItem}
+            input={input}
+            setInput={setInput}
+            currency={currency}
+            onClose={onClose}
+            confirmCredit={confirmCredit}
+            setConfirmCredit={setConfirmCredit}
+          />
+        </div>
+      )}
+
+      {countryWallet == "NG" && <div className="h-[19rem]"></div>}
+
+      {countryWallet == "NG" && (
+        <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>
  );
 }
@@ -8,8 +8,8 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
    data?.result === "Charge success" || data?.status === "successful";

  return (
-    <div className="logout-modal-body w-full flex flex-col items-center">
-      <div className="content-wrapper w-full h-[32rem]">
+    <div className="logout-modal-body w-full">
+      <div className="content-wrapper w-full h-[32rem] flex flex-col justify-center">
        <div className="w-full mb-10">
          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
            <div className="px-4 md:p-8 py-4 add-fund-info">
@@ -49,7 +49,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                    </svg>
                  </div>

-                  <div className="flex items-center">
+                  <div className="w-full flex justify-center items-center">
                    <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
                      {isSuccess
                        ? "Credit was Successful!"
@@ -59,55 +59,56 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {

                  {data?.internal_return >= 0 &&
                    data?.result !== "Charge failed" && (
-                      <>
-                        <div className="flex items-center gap-8">
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      <div className="w-full max-w-[300px] mx-auto">
+                        <div className="flex gap-8 my-2">
+                          <h1 className="w-full job-label">
                            Amount({data?.currency || ""})
                          </h1>
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                            {`${data?.symbol || ""} ${
-                              Number(data?.amount * 0.01).toLocaleString() || ""
+                              Number(data?.amount * 0.01).toFixed(2) || ""
                            }`}
                          </span>
                        </div>
                        
                        {data?.curr_balance &&
-                        <div className="flex items-center gap-8">
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                        <div className="flex gap-8 my-2">
+                          <h1 className="w-full job-label">
                            Wallet Balance
                          </h1>
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                            {data?.curr_balance * 0.01}
+                          <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
+                            {(data?.curr_balance * 0.01).toFixed(2)}
                          </span>
                        </div>
                        }

                        {isSuccess && (
-                          <div className="flex items-center gap-8">
-                            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <div className="flex gap-8 my-2">
+                            <h1 className="w-full job-label">
                              Confirmation Number
                            </h1>
-                            <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                              {data?.confirmation}
                            </span>
                          </div>
                        )}
-                      </>
-                    )}
+                      </div>
+                    )
+                  }
                </div>
              </div>
            </div>
-            <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
-              <button
-                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full w-[100px]"
-                onClick={onClose}
-              >
-                Ok
-              </button>
-            </div>
          </div>
        </div>
      </div>
+      <div className="modal-footer-wrapper w-full flex justify-end items-center gap-4">
+        <button
+          className="custom-btn btn-gradient text-white text-base"
+          onClick={onClose}
+        >
+          Ok
+        </button>
+      </div>
    </div>
  );
 }
@@ -29,10 +29,10 @@ function ThePaymentText({ value, type }) {
  return (
    <div className="my-2 flex items-center gap-5">
      <div className="card-details flex items-center gap-3">
-        <h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
+        <h1 className="text-base">
          {description} Card
        </h1>
-        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
+        <p className="text-base font-normal text-dark-gray dark:text-white tracking-wide">
          Bank **************{digits}
        </p>
      </div>
@@ -46,14 +46,14 @@ function ThePaymentText({ value, type }) {
 */
 function AmountSection({ currency, amount, country }) {
  const formattedAmount = (+amount * 0.01)?.toFixed(2);
-  const gapClassName = country === "US" ? "gap-14" : "gap-4";

  return (
-    <div className={`flex items-center ${gapClassName}`}>
-      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+    <div className={`flex items-center gap-8`}>
+      {/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
+      <h1 className="min-w-[150px] job-label">
        Amount({currency})
      </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
        {formattedAmount}
      </span>
    </div>
@@ -66,14 +66,13 @@ function AmountSection({ currency, amount, country }) {
 */
 function TransactionFeeSection({ currency, fee, country }) {
  const formattedFee = (+fee).toFixed(2);
-  const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";

  return (
-    <div className={`flex items-center border-b border-gray-600 ${gapClass}`}>
-      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+    <div className={`flex items-center gap-8 border-b border-gray-600`}>
+      <h1 className="min-w-[150px] job-label">
        Transaction Fee
      </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
        {formattedFee}
      </span>
    </div>
@@ -89,14 +88,12 @@ function TotalSection({ currency, amount, fee, country }) {
  const total = Number(amount) + Number(fee);
  const formattedTotal = (total * 0.01)?.toFixed(2);

-  const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
-
  return (
-    <div className={`flex items-center ${gap}`}>
-      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+    <div className={`flex items-center gap-8`}>
+      <h1 className="min-w-[150px] job-label">
        Total
      </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
        {formattedTotal}
      </span>
    </div>
@@ -356,103 +353,104 @@ function ConfirmAddFund({
  };

  return (
-    <div className="content-wrapper w-full h-[32rem]">
-      <div className="w-full mb-10">
-        <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
-          <div className="px-4 md:p-8 py-4 add-fund-info">
-            <div className="field w-full mb-3 min-h-[45px]">
-              {confirmCredit?.show?.awaitConfirm?.state && (
-                <div className="flex flex-col gap-2">
-                  <AmountSection
-                    currency={__confirmData?.currency}
-                    amount={__confirmData?.amount}
-                    country={__confirmCountry}
-                  />
-                  <TransactionFeeSection
-                    currency={__confirmData?.currency}
-                    fee={__confirmData?.fee}
-                    country={__confirmCountry}
-                  />
-                  <TotalSection
-                    currency={__confirmData?.currency}
-                    amount={__confirmData?.amount}
-                    fee={__confirmData?.fee}
-                    country={__confirmCountry}
-                  />
-                  {__confirmCountry === "US" && (
-                    <div className="flex items-center gap-8">
-                      <label
-                        htmlFor="payment"
-                        className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
-                      >
-                        Payment Method
-                      </label>
-                      <span className="text-[#181c32] dark:text-white">
-                        <ThePaymentText
-                          value={__confirmCardDetails}
-                          type={__confirmData?.cardType}
-                        />
+    <>    
+      <div className="content-wrapper w-full h-[32rem]">
+        <div className="w-full mb-10">
+          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
+            <div className="px-4 md:p-8 py-4 add-fund-info">
+              <div className="field w-full mb-3 min-h-[45px]">
+                {confirmCredit?.show?.awaitConfirm?.state && (
+                  <div className="flex flex-col gap-2">
+                    <AmountSection
+                      currency={__confirmData?.currency}
+                      amount={__confirmData?.amount}
+                      country={__confirmCountry}
+                    />
+                    <TransactionFeeSection
+                      currency={__confirmData?.currency}
+                      fee={__confirmData?.fee}
+                      country={__confirmCountry}
+                    />
+                    <TotalSection
+                      currency={__confirmData?.currency}
+                      amount={__confirmData?.amount}
+                      fee={__confirmData?.fee}
+                      country={__confirmCountry}
+                    />
+                    {__confirmCountry === "US" && (
+                      <div className="flex items-center gap-8">
+                        <label
+                          htmlFor="payment"
+                          className="min-w-[150px] job-label"
+                        >
+                          Payment Method
+                        </label>
+                        <span className="text-[#181c32] dark:text-white">
+                          <ThePaymentText
+                            value={__confirmCardDetails}
+                            type={__confirmData?.cardType}
+                          />
+                        </span>
+                      </div>
+                    )}
+                    <div
+                      className={`gap-8 flex items-center`}
+                    >
+                      <h1 className="min-w-[150px] job-label">
+                        Reference No
+                      </h1>
+                      <span className="text-base font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+                        {/* Displays only half of the string */}
+                        {__confirmData?.credit_reference.slice(0, (Math.floor(__confirmData?.credit_reference.length/2)))}
                      </span>
                    </div>
-                  )}
-                  <div
-                    className={`${
-                      __confirmCountry === "US"
-                        ? "gap-[3.7rem]"
-                        : "gap-[1.81rem]"
-                    } flex items-center`}
-                  >
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Reference No
-                    </h1>
-                    <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
-                      {__confirmData?.credit_reference}
-                    </span>
                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div
-            className={
-              __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
-            }
-          ></div>
-          <hr />
-          <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
-            <button
-              className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
-              onClick={getBack}
-            >
-              Back
-            </button>
-            {__confirmCountry === "US" && (
-              <button
-                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
-                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>
+
+            <div
+              className={
+                __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
+              }
+            ></div>
          </div>
        </div>
      </div>
-    </div>
+
+      <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={getBack}
+          >
+            Back
+          </button>
+          {__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>
+    </>
  );
 }

@@ -58,13 +58,12 @@ function ConfirmNairaWithdraw({
      .sendMoney(reqData)
      .then((res) => {
        if (res.data.internal_return < 0) {
-          // if (res.data?.status_message?.toLowerCase().includes("limit")) {
-          //   setRequestStatus({
-          //     message: ,
-          //     loading: false,
-          //     status: false,
-          //   });
-          // }
+          setRequestStatus({
+            message: 'Unable to complete, try again',
+            loading: false,
+            status: false,
+          });
+
          return setTimeout(() => {
            setRequestStatus({
              message: "",
@@ -79,19 +78,19 @@ function ConfirmNairaWithdraw({
          }, 5000);
        }

+        setRequestStatus({
+          message: "Withdrawal sucessful",
+          loading: false,
+          status: true,
+        });
+        setShowCompleteNairaWithdraw({
+          show: true,
+          load: false,
+          state: res.data,
+        });
        setTimeout(() => {
-          setRequestStatus({
-            message: "",
-            loading: false,
-            status: false,
-          });
-          setShowCompleteNairaWithdraw({
-            show: true,
-            load: false,
-            state: res.data,
-          });
+          dispatch(tableReload({ type: "WALLETTABLE" }));
        }, 5000);
-        dispatch(tableReload({ type: "WALLETTABLE" }));
        return;
      })
      .catch((error) => {
@@ -105,10 +104,10 @@ 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="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
-            <h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+          <div className="modal-header-con">
+            <h2 className="modal-title">
              {completeNairaWithdraw.load ? (
                "Confirming..."
              ) : (
@@ -126,7 +125,7 @@ function ConfirmNairaWithdraw({
            </h2>
            <button
              type="button"
-              className="text-[#374557] dark:text-red-500"
+              className="modal-close-btn"
              onClick={action}
            >
              <svg
@@ -151,7 +150,7 @@ function ConfirmNairaWithdraw({
            </button>
          </div>
          <hr />
-          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+          <div className="add-fund w-full bg-white dark:bg-dark-white">
            {completeNairaWithdraw.load ? (
              <div className="h-[35rem] flex items-center justify-center">
                <LoadingSpinner size="12" color="sky-blue" />
@@ -376,28 +375,28 @@ function ConfirmNairaWithdraw({
                </div>
              </div>
            )}
+          </div>
+
+          {!completeNairaWithdraw.load && (
+            <>
+              <p
+                className={`text-lg text-center font-bold ${
+                  requestStatus.status ? "text-emerald-600" : "text-red-500"
+                } px-4 md:px-8 py-4`}
+              >
+                {requestStatus.message && requestStatus.message}
+              </p>
+              <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>

-            {!completeNairaWithdraw.load && (
-              <>
-                {" "}
-                <hr />
-                <p
-                  className={`text-base ${
-                    requestStatus.status ? "text-green-500" : "text-red-500"
-                  } px-4 md:px-8 py-4 h-5`}
-                >
-                  {requestStatus.message && requestStatus.message}
-                </p>
-                <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
-                  {!completeNairaWithdraw.show && (
-                    <button
-                      type="button"
-                      onClick={action}
-                      className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
-                    >
-                      Cancel
-                    </button>
-                  )}

                  <button
                    onClick={
@@ -407,7 +406,7 @@ function ConfirmNairaWithdraw({
                        ? action
                        : handleSubmit
                    }
-                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
+                    className="custom-btn btn-gradient text-base text-white"
                  >
                    {requestStatus.loading ? (
                      <LoadingSpinner size="6" color="sky-blue" />
@@ -420,9 +419,10 @@ function ConfirmNairaWithdraw({
                    )}
                  </button>
                </div>
-              </>
-            )}
-          </div>
+              </div>
+            </>
+          )}
+
        </div>
      </div>
    </ModalCom>
@@ -4,6 +4,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AddFundPop from "./AddFundPop";
 import CompleteConfirmCredit from "./CompleteConfirmCredit";
 import ConfirmAddFund from "./ConfirmAddFund";
+import CustomTimer from "../../countdown/CustomTimer";

 const CreditPopup = ({ details, onClose, situation, walletItem }) => {
  const [input, setInput] = useState("");
@@ -33,18 +34,17 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
    <ModalCom
      action={onClose}
      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-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+      <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
              ? "Confirming Credit..."
              : getTitle()}
          </h1>
          <button
            type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
            onClick={onClose}
          >
            <svg
@@ -68,10 +68,16 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
            </svg>
          </button>
        </div>
-        <div className="logout-modal-body w-full flex flex-col items-center">
+        <div className="w-full">
          {confirmCredit?.show?.acceptConfirm?.loader ? (
            <div className="h-[32rem] flex items-center justify-center">
-              <LoadingSpinner size="12" color="sky-blue" />
+              <div className="h-[32rem] flex flex-col items-center justify-center gap-4">
+                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Processing payment</p>
+                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Please do not refresh</p>
+                <LoadingSpinner size="6" color="sky-blue" height='h-20' />
+                {/* <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Timer countdown</p> */}
+                <CustomTimer className="text-lg text-center md:text-2xl text-emerald-600 tracking-wide font-bold" />
+              </div>
            </div>
          ) : (
            <>
@@ -16,21 +16,21 @@ function WalletAction({ walletItem, payment, openPopUp }) {

  return (
    <div className="counters w-full flex justify-between gap-2">
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="w-1/2 flex justify-start items-center">
        <button
          onClick={() => {
            setShowNairaWithdraw((prev) => ({ ...prev, show: true }));
          }}
          className={`${
            walletItem.code != "NAIRA" && "invisible"
-          } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+          } logout-btn btn-gradient text-white`}
        >
          Spend
        </button>
      </div>
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="w-1/2 flex justify-end items-center">
        <button
-          className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+          className="logout-btn btn-gradient text-white"
          onClick={() => {
            openPopUp({
              payment: payment,
@@ -38,7 +38,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
            });
          }}
        >
-          <span className="">Add Credit</span>
+          Add Credit
        </button>
      </div>

@@ -15,14 +15,14 @@ export default function WalletBox({ wallet, payment, countries }) {
  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">
+        <div className="balance-inquery w-auto grid md: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">
+              <div key={item.wallet_uid} className="w-full md:max-w-[450px] h-full mb-10 lg:mb-0">
                <WalletItemCard walletItem={item} payment={payment} countries={countries} />
              </div>
            ))
@@ -24,7 +24,7 @@ function RecentActivityTable({ payment }) {
          <thead className="border-b-2">
            <tr className="text-slate-600">
              <th className="p-2">Date</th>
-              <th className="p-4">Trx.</th>
+              <th className="p-2">Trx.</th>
              <th className="p-2">Amnt./Fee</th>
              <th className="p-2">Status</th>
            </tr>
@@ -44,7 +44,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
  return (
    <>
      <div
-        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between"
        style={{
          background: `url(${background}) 0% 0% / cover no-repeat`,
        }}
@@ -81,12 +81,12 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
              walletItem.escrow * 0.01,
              walletItem.code,
              undefined,
-              "text-[2rem]"
+              "text-[1.5rem]"
            )}
          </span>
        </p>

-        <div className="my-2 w-full h-[1px] bg-white"></div>
+        <div className="w-full h-[1px] bg-white"></div>

        <WalletAction
          walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}
@@ -31,54 +31,34 @@ export default function Layout({ children }) {
    navigate("/login", { replace: true });
  };

-  //---------------------------------------
-  /* LET U DEAL WITH JOB LIST - we need to centralize this list  */
-  // const {jobListTable} = useSelector((state) => state.tableReload)
-  // const [myJobList, setMyJobList] = useState({loading: true, data:[]});
-  // const api = new usersService();
-
-  // const getMyJobList = async () => {
-  //   setMyJobList({loading: true, data:[]})
-  //   try {
-  //     const res = await api.getMyJobList();
-  //     setMyJobList({loading: false, data:res.data})
-  //     // setMyJobList(res.data);
-  //   } catch (error) {
-  //     setMyJobList({loading: false, data:[]})
-  //     console.log("Error getting mode");
-  //   }
-  // };
-  // useEffect(() => {
-  //   getMyJobList();
-  // }, [jobListTable]);
-
  return (
    <>
-      <div className="nft-main-wrapper-layout w-full mx-auto">
-        <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
+      <div className="relative w-full max-w-[2000px] nft-main-wrapper-layout mx-auto">
+        <div className={`nft-wrapper-layout-container w-full min-h-screen flex`}>
          {/* sidebar */}
-          <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>
+          <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-screen overflow-y-scroll overflow-style-none sticky left-0 top-0 pt-[30px]`}>
            <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
          </div>
          {MobileSideBar && (
            <div onClick={() => setMobileSidebar.toggle()} className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"></div>
          )}
-          <div className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>
+          <div className={`nft-sidebar block xl:hidden section-shadow w-[280px] 2xl:pl-20 pl-10 pr-6 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>
            <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />
          </div>
          {/* end sidebar */}
-          <div className={`nft-header-container-wrapper flex-1 md:ml-10 ${drawer ? "2xl:ml-[375px] xl:ml-[310px]" : "xl:ml-[110px]"} h-full`}>
+          {/* FORMER CLASS NAME `w-full nft-header-container-wrapper ${drawer ? "2xl:ml-[335px] xl:ml-[280px]" : "xl:ml-[70px]"} h-full` */}
+          <div className={`w-full nft-header-container-wrapper h-full 2xl:px-10 px-8`}>
            {/* 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 ">
              <Header 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">
-              <div className="flex-[80%] w-full">
+            <div className="nft-container 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center xl:flex-row xl:justify-between gap-4">
+              <div className="flex-[80%] 2xl:flex-[85%] w-full">
                {children && children}
              </div>

-              <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
+              <div className="nft-right-side-content flex-[20%] 2xl:flex-[15%] w-full h-full 2xl:flex justify-center 2xl:justify-end relative">
                <RightSideBar myJobList={userJobList} />
              </div>
            </div>
@@ -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,22 +157,21 @@ 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">
+          <div className="pl-4 w-full flex justify-start gap-3 items-center">
            <button
            type="button"
            className="min-w-[35px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
            onClick={() => {
                if (backpath == "/manage-family") {
                navigate(backpath,
-                    { state: { ...state} },
                    { replace: true }
                );
                } else {
@@ -199,10 +198,10 @@ 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> */}
+          </div>
          

          {/* user info */}
@@ -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();
@@ -53,7 +53,7 @@ export default function MediaLayout({backpath, title, state, children }) {

    return (
        <>
-            <div className="nft-main-wrapper-layout media">
+            <div className="nft-main-wrapper-layout media container mx-auto">
                <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
                    {/* sidebar */}
                    {/*<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>*/}
@@ -69,10 +69,10 @@ 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">
+                        <div className="nft-container container mx-auto 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">
                            <div className="nft-main-container_media flex-[100%] w-full">
                                {children && children}
                            </div>
@@ -40,7 +40,7 @@ export default function RightSideBar({ myJobList }) {
  return (
    <>
      <div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed h-full 2xl:pb-96">
-        <div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-6 2xl:border-none border ">
+        <div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 w-full 2xl:mb-6 2xl:border-none border ">
          {/* heading */}
          <div className="heading flex justify-between items-center mb-3.5">
            <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
@@ -280,7 +280,7 @@ export default function RightSideBar({ myJobList }) {
        {/*JOB LINKS*/}
        {userDetails?.account_type !== "FAMILY" &&
          myJobList?.data?.result_list?.length > 0 && (
-            <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
+            <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 w-full 2xl:mb-10 2xl:border-none border ">
              {/* heading */}
              <div className="px-8 heading flex justify-between items-center mb-3.5">
                <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
@@ -275,7 +275,7 @@ export default function Sidebar({
        <button
          onClick={logoutModalHandler}
          type="button"
-          className="signout-btn flex items-center space-x-1  p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
+          className="signout-btn flex items-center space-x-1  p-2.5 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
        >
          <span className="">
            <Icons name="new-logout" />
@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react'
+
+export default function CustomTimer({className='text-emerald-500'}) {
+
+    const [time, setTime] = useState(Number(process.env.REACT_APP_CUSTOMTIMER))
+
+    useEffect(()=>{
+        const timer = setInterval(()=>{
+            setTime(prev => prev - 1)
+        },1000)
+        return ()=>{
+            clearInterval(timer)
+        }
+    },[])
+
+    let minutes = time == 0 ? 0 : Math.floor(time/60)
+    let seconds = time == 0 ? 0 :time - (minutes * 60)
+
+  return (
+    <p className={`w-full text-base text-emerald-500 ${className}`}>
+        {`${minutes > 9 ? minutes : '0'+minutes} : ${seconds > 9 ? seconds : '0'+seconds}`}
+    </p>
+  )
+}
@@ -0,0 +1,26 @@
+import React from 'react'
+
+export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
+  return (
+    <button
+      className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
+        selectedTab === item
+          ? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
+          : "bg-white text-[#000]"
+      }`}
+      value={item}
+      name={item}
+      onClick={() => setSelectedTab(item)}
+    >
+      <div
+        className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
+          selectedTab === item
+            ? "border-white bg-emerald-500"
+            : "border-red-50 dark:border-[#D85A5A] bg-white"
+        }`}
+      ></div>
+      {item[0].toUpperCase() + item.slice(1)}
+    </button>
+  )
+}
+
@@ -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-[650px]">
+                <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-1/6 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>
+  )
+}
@@ -125,27 +125,6 @@ function DeleteJobPopout({ details, onClose, situation }) {
              <span className="job-label">Duration: </span>{details.timeline_days} day(s)
            </p>
          </div>
-          <div className="flex space-x-2.5">
-            <button
-              onClick={onClose}
-              type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
-            {requestStatus.laoding ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => deleteJob(details)}
-                type="button"
-                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-              >
-                Confirm Delete
-              </button>
-            )}
-          </div>
-
          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
          {requestStatus.message != "" &&
            (!requestStatus.status ? (
@@ -165,6 +144,28 @@ function DeleteJobPopout({ details, onClose, situation }) {
            ))}
          {/* End of error or success display */}
        </div>
+        <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
+              onClick={onClose}
+              type="button"
+              className="custom-btn border-gradient"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteJob(details)}
+                type="button"
+                className="custom-btn text-white primary-gradient"
+              >
+                Confirm Delete
+              </button>
+            )}
+            </div>
+        </div>
      </div>
    </ModalCom>
  );
@@ -242,7 +242,6 @@ const EditJobPopOut = ({
            </svg>
          </button>
        </div>
-        <div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
@@ -250,277 +249,276 @@ const EditJobPopOut = ({
          >
            {(props) => (
              <Form className="w-full">
-                <div className="flex flex-col-reverse sm:flex-row">
-                  <div className="fields w-full">
-                    <div className="xl:flex xl:space-x-7 mb-[0.5rem]">
-                      <div className="field w-full mb-6 xl:mb-0">
+                <div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
+                  <div className="flex flex-col-reverse sm:flex-row">
+                    <div className="fields w-full">
+                      <div className="xl:flex xl:space-x-7 mb-[0.5rem]">
+                        <div className="field w-full mb-6 xl:mb-0">
+                          <InputCom
+                            fieldClass="px-6 cursor-default"
+                            label="Currency"
+                            labelClass="tracking-wide"
+                            inputBg="bg-slate-100"
+                            inputClass="input-curve lg border border-light-purple"
+                            type="text"
+                            name="country"
+                            value={props.values.country}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                            disable={true}
+                          />
+                        </div>
+
+                        {/* Price */}
+                        <div className="field w-full">
+                          <InputCom
+                            fieldClass="px-6 text-right"
+                            label="Price"
+                            labelClass="tracking-wide"
+                            inputBg="bg-slate-100"
+                            inputClass="input-curve lg border border-light-purple"
+                            type="number"
+                            name="price"
+                            value={props.values.price}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                            errorBorder={
+                              props.errors.price && props.touched.price
+                            }
+                          />
+                        </div>
+                      </div>
+                      {/* Title  */}
+                      <div className="field w-full mb-[0.5rem]">
                        <InputCom
-                          fieldClass="px-6 cursor-default"
-                          label="Currency"
+                          fieldClass="px-6"
+                          label="Title"
                          labelClass="tracking-wide"
                          inputBg="bg-slate-100"
-                          inputClass="input-curve lg border border-light-purple"
+                          inputClass=" input-curve lg border border-light-purple"
                          type="text"
-                          name="country"
-                          value={props.values.country}
+                          name="title"
+                          value={props.values.title}
                          inputHandler={props.handleChange}
                          blurHandler={props.handleBlur}
-                          disable={true}
+                          errorBorder={props.errors.title && props.touched.title}
                        />
                      </div>

-                      {/* Price */}
-                      <div className="field w-full">
+                      {/* Description  */}
+                      <div className="field w-full mb-[0.5rem]">
                        <InputCom
-                          fieldClass="px-6 text-right"
-                          label="Price"
+                          fieldClass="px-6"
+                          label="Description"
                          labelClass="tracking-wide"
                          inputBg="bg-slate-100"
-                          inputClass="input-curve lg border border-light-purple"
-                          type="number"
-                          name="price"
-                          value={props.values.price}
+                          inputClass=" input-curve lg border border-light-purple"
+                          type="text"
+                          name="description"
+                          value={props.values.description}
                          inputHandler={props.handleChange}
                          blurHandler={props.handleBlur}
                          errorBorder={
-                            props.errors.price && props.touched.price
+                            props.errors.description && props.touched.description
                          }
                        />
                      </div>
-                    </div>
-                    {/* Title  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Title"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass=" input-curve lg border border-light-purple"
-                        type="text"
-                        name="title"
-                        value={props.values.title}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                        errorBorder={props.errors.title && props.touched.title}
-                      />
-                    </div>

-                    {/* Description  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Description"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass=" input-curve lg border border-light-purple"
-                        type="text"
-                        name="description"
-                        value={props.values.description}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                        errorBorder={
-                          props.errors.description && props.touched.description
-                        }
-                      />
-                    </div>
-
-                    {/* Details */}
-                    <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
-                      <div className="sm:w-[60%] w-full">
-                        <label
-                          htmlFor="job-label"
-                          className='job-label'
-                        >
-                          Job Delivery Details
-                        </label>
-                        <textarea
-                          id="Job Delivery Details"
-                          rows="5"
-                          className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
-                            props.errors.job_detail && props.touched.job_detail
-                              ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                              : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                          } rounded-[10px]`}
-                          style={{ resize: "none" }}
-                          name="job_detail"
-                          value={props.values.job_detail}
-                          onChange={props.handleChange}
-                          onBlur={props.handleBlur}
-                        />
-                      </div>
-
-                      <div className="sm:w-[35%] w-full">
-                        <div
-                          htmlFor="Job Categories"
-                          className='job-label'
-                          id="checked-group"
-                        >
-                          Categories
+                      {/* Details */}
+                      <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+                        <div className="sm:w-[60%] w-full">
+                          <label
+                            htmlFor="job-label"
+                            className='job-label'
+                          >
+                            Job Delivery Details
+                          </label>
+                          <textarea
+                            id="Job Delivery Details"
+                            rows="5"
+                            className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                              props.errors.job_detail && props.touched.job_detail
+                                ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                            } rounded-[10px]`}
+                            style={{ resize: "none" }}
+                            name="job_detail"
+                            value={props.values.job_detail}
+                            onChange={props.handleChange}
+                            onBlur={props.handleBlur}
+                          />
                        </div>
-                        <div
-                          className="sm:flex-col flex flex-wrap px-3 mt-3"
-                          role="group"
-                          aria-labelledby="checked-group"
-                        >
-                          {categories &&
-                            Object.entries(categories)?.map(([key, value]) => (
-                              <label
-                                key={key}
-                                className="flex gap-1 w-full items-center dark:text-white"
-                              >
-                                <Field
-                                  type="checkbox"
-                                  name="category"
-                                  value={key}
-                                />
-                                <span className="text-[13.975px]">{value}</span>
-                              </label>
-                            ))}
-                          <span className="h-5 text-sm italic text-[#cf3917]">
-                            {props.errors.category &&
-                              props.touched.category &&
-                              "please select a category"}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="w-full flex items-center gap-2 mb-2">
-                      {/* FOR TASK IMAGE */}
-                      <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
-                        <input
-                          id="task_image"
-                          className="hidden"
-                          type="file"
-                          accept="image/*"
-                          onChange={taskImgChangeHandler}
-                        />
-                        {taskImage ? (
-                          <div className="w-full absolute -top-5">
-                            <img
-                              src={taskImage}
-                              className="max-h-[150px] min-h-[150px] w-full object-cover"
-                              alt="uploaded task"
-                            />
-                            <span
-                              onClick={() => setTaskImage("")}
-                              className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
-                            >
-                              Remove Image
+
+                        <div className="sm:w-[35%] w-full">
+                          <div
+                            htmlFor="Job Categories"
+                            className='job-label'
+                            id="checked-group"
+                          >
+                            Categories
+                          </div>
+                          <div
+                            className="sm:flex-col flex flex-wrap px-3 mt-3"
+                            role="group"
+                            aria-labelledby="checked-group"
+                          >
+                            {categories &&
+                              Object.entries(categories)?.map(([key, value]) => (
+                                <label
+                                  key={key}
+                                  className="flex gap-1 w-full items-center dark:text-white"
+                                >
+                                  <Field
+                                    type="checkbox"
+                                    name="category"
+                                    value={key}
+                                  />
+                                  <span className="text-[13.975px]">{value}</span>
+                                </label>
+                              ))}
+                            <span className="h-5 text-sm italic text-[#cf3917]">
+                              {props.errors.category &&
+                                props.touched.category &&
+                                "please select a category"}
                            </span>
                          </div>
-                        ) : (
-                          <label
-                            className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
-                            htmlFor="task_image"
-                          >
-                            Select Task Image
-                          </label>
-                        )}
-                      </div>
-                      {/* END OF TASK IMAGE */}
-
-                      <div className="field w-1/2">
-                        <div className={`flex items-center justify-between`}>
-                          <label
-                            className="job-label flex flex-col"
-                            htmlFor="timeline_days"
-                          >
-                            Timeline -
-                            <span className="w-full text-center text-green-700 text-sm tracking-wide">
-                              Expected duration of this task
-                            </span>
-                          </label>
                        </div>
-
-                        <Field
-                          component="select"
-                          name="timeline_days"
-                          className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
-                            props.errors.timeline_days &&
-                            props.touched.timeline_days
-                              ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                              : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                          }`}
-                          value={props.values.timeline_days}
-                        >
-                          <option value="">Select Duration</option>
-                          {publicArray.map(({ name, duration }, idx) => (
-                            <option
-                              key={duration}
-                              className="text-slate-500 text-lg"
-                              value={duration}
+                      </div>
+                      <div className="w-full flex items-center gap-2 mb-2">
+                        {/* FOR TASK IMAGE */}
+                        <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
+                          <input
+                            id="task_image"
+                            className="hidden"
+                            type="file"
+                            accept="image/*"
+                            onChange={taskImgChangeHandler}
+                          />
+                          {taskImage ? (
+                            <div className="w-full absolute -top-5">
+                              <img
+                                src={taskImage}
+                                className="max-h-[150px] min-h-[150px] w-full object-cover"
+                                alt="uploaded task"
+                              />
+                              <span
+                                onClick={() => setTaskImage("")}
+                                className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
+                              >
+                                Remove Image
+                              </span>
+                            </div>
+                          ) : (
+                            <label
+                              className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
+                              htmlFor="task_image"
                            >
-                              {name}
-                            </option>
-                          ))}
-                        </Field>
+                              Select Task Image
+                            </label>
+                          )}
+                        </div>
+                        {/* END OF TASK IMAGE */}
+
+                        <div className="field w-1/2">
+                          <div className={`flex items-center justify-between`}>
+                            <label
+                              className="job-label flex flex-col"
+                              htmlFor="timeline_days"
+                            >
+                              Timeline -
+                              <span className="w-full text-center text-green-700 text-sm tracking-wide">
+                                Expected duration of this task
+                              </span>
+                            </label>
+                          </div>
+
+                          <Field
+                            component="select"
+                            name="timeline_days"
+                            className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                              props.errors.timeline_days &&
+                              props.touched.timeline_days
+                                ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                            }`}
+                            value={props.values.timeline_days}
+                          >
+                            <option value="">Select Duration</option>
+                            {publicArray.map(({ name, duration }, idx) => (
+                              <option
+                                key={duration}
+                                className="text-slate-500 text-lg"
+                                value={duration}
+                              >
+                                {name}
+                              </option>
+                            ))}
+                          </Field>
+                        </div>
                      </div>
+                      {/* inputs ends here */}
                    </div>
-                    {/* inputs ends here */}
                  </div>
-                </div>
-                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-                <div className="content-footer 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 && (
+                  {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                  <div className="content-footer w-full">
+                    {/* error or success display */}
+                    {requestStatus.message != "" &&
+                      (!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]`}
+                          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>
-                      )
-                    ))}
-                  {/* End of error or success display */}
-
-                  {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
-                  <div className="w-full">
-                    {uploadStatus.message && !uploadStatus.loading && (
-                      <p
-                        className={`text-center ${
-                          uploadStatus.status
-                            ? "text-green-500"
-                            : "text-red-500"
-                        }`}
-                      >
-                        {uploadStatus.message}
-                      </p>
-                    )}
-                    {uploadStatus.loading && (
-                      <p className="text-center">{uploadStatus.message}</p>
-                    )}
-                  </div>
-
-                  <div className="w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                    <div className="flex items-center space-x-4 mr-2 mt-2">
-                      {requestStatus.loading ? (
-                        <LoadingSpinner size="6" color="sky-blue" />
                      ) : (
-                        <button
-                          type="submit"
-                          className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                          // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
-                          disabled={
-                            requestStatus.loading || uploadStatus.loading
-                          }
+                        requestStatus.status && (
+                          <div
+                            className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          >
+                            {requestStatus.message}
+                          </div>
+                        )
+                      ))}
+                    {/* End of error or success display */}
+
+                    {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
+                    <div className="w-full">
+                      {uploadStatus.message && !uploadStatus.loading && (
+                        <p
+                          className={`text-center ${
+                            uploadStatus.status
+                              ? "text-green-500"
+                              : "text-red-500"
+                          }`}
                        >
-                          Save
-                        </button>
+                          {uploadStatus.message}
+                        </p>
+                      )}
+                      {uploadStatus.loading && (
+                        <p className="text-center">{uploadStatus.message}</p>
                      )}
                    </div>
+
                  </div>
                </div>
+                <div className="modal-footer-wrapper justify-end">
+                    {requestStatus.loading ? (
+                      <LoadingSpinner size="6" color="sky-blue" />
+                    ) : (
+                      <button
+                        type="submit"
+                        className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                        // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
+                        disabled={
+                          requestStatus.loading || uploadStatus.loading
+                        }
+                      >
+                        Save
+                      </button>
+                    )}
+                </div>
              </Form>
            )}
          </Formik>
-        </div>
      </div>
    </ModalCom>
  );
@@ -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>
@@ -174,7 +174,7 @@

  /* modal footer */
  .modal-footer-wrapper{
-    @apply py-2 px-4 border-t-2 flex justify-between items-center
+    @apply p-4 border-t-2 flex justify-between items-center
  }
  /* END OF STYLES FOR MODAL BOX */

@@ -182,6 +182,9 @@
  .custom-btn {
    @apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
  }
+  .logout-btn {
+    @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-xl font-bold rounded-full cursor-pointer
+  }
 }

 /* =====================  EXTRA ===================== */
@@ -1100,6 +1103,6 @@ TODO: Responsive ===========================
  margin: 0;
 }

-.assign-task-popup {
+/* .assign-task-popup {
  top: 75px;
-}
+} */
@@ -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);
@@ -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>
+  )
+}
Author	SHA1	Message	Date
victorAnumudu	3f17920bd0	layout margin centralized	2024-04-08 18:14:45 +01:00
ameye	4014a84e1a	Merge branch 'history-tab' of WrenchBoard/Users-Wrench into master	2024-04-08 14:45:42 +00:00
victorAnumudu	60ed9e7bcf	changed history page tab style	2024-04-08 14:51:14 +01:00
ameye	479ea408f6	Merge branch 'country-auto-select' of WrenchBoard/Users-Wrench into master	2024-04-08 13:28:42 +00:00
victorAnumudu	9ca4ba3199	made currency to auto select during add job if user has only one wallet acct	2024-04-08 09:17:47 +01:00
ameye	e5fa6544a5	Merge branch 'wallet-btn-style' of WrenchBoard/Users-Wrench into master	2024-04-06 01:46:24 +00:00
victorAnumudu	f55b7186b9	wallet btn style adjusted	2024-04-05 19:51:47 +01:00
ameye	05515333ba	Merge branch 'failed-topup-style' of WrenchBoard/Users-Wrench into master	2024-04-05 17:02:25 +00:00
victorAnumudu	7212ab6cfc	failed credit top up style adjusted	2024-04-05 17:02:26 +01:00
ameye	020154d51a	Merge branch 'reference-number' of WrenchBoard/Users-Wrench into master	2024-04-05 12:04:27 +00:00
victorAnumudu	e4aadfb627	reduced reference number	2024-04-05 11:25:12 +01:00
ameye	6a79c3e56f	Merge branch 'timer-countdown' of WrenchBoard/Users-Wrench into master	2024-04-04 20:13:17 +00:00
victorAnumudu	81707c7bd8	payment count down timer added	2024-04-04 20:41:57 +01:00
victorAnumudu	e5b36e3f45	added count down timer	2024-04-04 20:33:49 +01:00
ameye	6f2fc17090	Merge branch 'wallet-page-btn' of WrenchBoard/Users-Wrench into master	2024-04-04 15:19:31 +00:00
victorAnumudu	e6392bc433	adjusted wallet btn size	2024-04-04 15:25:50 +01:00
victorAnumudu	f8e14fe6a0	initial commit	2024-04-04 14:09:53 +01:00
ameye	91a42cfe9d	Merge branch 'interest-btn' of WrenchBoard/Users-Wrench into master	2024-04-04 10:51:33 +00:00
victorAnumudu	3128a77b46	interest button style changed	2024-04-04 11:36:06 +01:00
ameye	d7d67e4763	Merge branch 'offer-code-removal' of WrenchBoard/Users-Wrench into master	2024-04-03 21:49:54 +00:00
victorAnumudu	388e49467e	removed contract code display	2024-04-03 20:08:27 +01:00
ameye	043718837d	Merge branch 'button-style-change' of WrenchBoard/Users-Wrench into master	2024-04-03 10:22:29 +00:00
ameye	d0e2ba0aa3	Merge branch 'modal-footer-class' of WrenchBoard/Users-Wrench into master	2024-04-03 10:22:23 +00:00
victorAnumudu	a1dc72e5b0	added modal footer class to edit job modal	2024-04-03 10:35:59 +01:00
victorAnumudu	2ab1c960c7	accept btn style changed	2024-04-03 10:06:49 +01:00
ameye	25734882cb	Merge branch 'dummy-game-layout' of WrenchBoard/Users-Wrench into master	2024-04-02 19:20:42 +00:00
victorAnumudu	ae31962cd7	added game layout	2024-04-02 19:04:42 +01:00
victorAnumudu	96d775d0ba	added dummy coming soon text	2024-04-02 17:31:54 +01:00
victorAnumudu	bcd45edb2f	added game link to env file	2024-04-02 17:23:54 +01:00
victorAnumudu	a5631b6291	initial commit	2024-04-02 16:42:54 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	2fff427346	CORS iSSUES	2024-04-02 10:53:10 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6ef445958c	removed ket temp	2024-04-02 10:45:57 -04:00
ameye	66660d98f9	Merge branch 'popout-btn-adjustment' of WrenchBoard/Users-Wrench into master	2024-04-02 14:22:01 +00:00
victorAnumudu	359344772e	added space between buttons	2024-04-02 14:56:07 +01:00
ameye	1533465f8d	Merge branch 'media-detail-style' of WrenchBoard/Users-Wrench into master	2024-04-02 12:03:37 +00:00
victorAnumudu	66b1ff5f92	updated style	2024-04-02 11:24:45 +01:00
ameye	c141ab1ef2	Merge branch 'media-layout' of WrenchBoard/Users-Wrench into master	2024-04-01 20:53:44 +00:00
victorAnumudu	8a7b56068d	added media layout	2024-04-01 21:47:00 +01:00
victorAnumudu	bb5a966249	added media layout	2024-04-01 21:42:29 +01:00
ameye	199dec01fe	Merge branch 'wallet-modal-style' of WrenchBoard/Users-Wrench into master	2024-04-01 17:36:20 +00:00
victorAnumudu	3775c520ff	added modal style to wallet modal	2024-04-01 18:23:34 +01:00
ameye	bf19dfe86a	Merge branch 'currency-auto-select' of WrenchBoard/Users-Wrench into master	2024-04-01 15:59:59 +00:00