layout margin centralized

.env

@@ -14,6 +14,7 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
 
 REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_ENDPOINT_KEY="WRENCH-BOARD-2024"
 
 #SOCKETS ENDS
 REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"
@@ -117,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

.env.development

@@ -14,6 +14,7 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
 
 REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_ENDPOINT_KEY="WRENCH-BOARD-2024"
 
 #SOCKETS ENDS
 REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"
@@ -85,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

.env.production

@@ -14,6 +14,7 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
 
 REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
 REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_ENDPOINT_KEY="WRENCH-BOARD-2024"
 
 #SOCKETS ENDS
 REACT_APP_PRIMARY_SOCKET="https://socket.wrenchboard.com"
@@ -91,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

src/Routers.jsx

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

src/components/AddJob/AddJob.jsx

@@ -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>
   );
 }
 

src/components/Cards/OfferCard.jsx

@@ -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">

src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx

@@ -49,22 +49,24 @@ export default function AssignMediaTask({
     family_uid
 }) {
 
+    const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+
+    const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
   // For form initial values
     const initialValues = {
         // initial values for formik
-        currency: "",
+        currency: walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
         amount: "",
         job_description: "",
         timeline_days: "",
-        media_uid: activeMedia.uid,
+        media_uid: activeMedia?.uid,
         family_uid: family_uid,
         media_type: "COMMON"
     };
 
 
-  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
-  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
 
 //   let imageSrc = (localStorage.getItem("session_token")
 //   ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeMedia.uid}` : ""); // FOR GETTING JOB IMAGE
@@ -89,7 +91,7 @@ export default function AssignMediaTask({
                                 className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
                                 >
                                 <div className="p-4 pt-0">
-                                    <div className="p-4 w-full min-h-[400px] max-h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                                    <div className="p-4 w-full min-h-[410px] max-h-[410px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                                         {commonMedia?.data?.length ? (
                                         commonMedia?.data?.map((item, index) => (
                                             <div
@@ -140,12 +142,12 @@ export default function AssignMediaTask({
                                                     </Suspense>
                                                 </div>
                                             </div>
-                                            <div className="grid grid-cols-2 gap-3">
+                                            <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">
-                                                        Price
-                                                        <span className='text-red-500 text-[10px]'>{props.errors.amount && props.touched.amount && props.errors.amount}</span>
+                                                        Reward
+                                                        <span className='text-red-500 text-base'>{props.errors.amount && props.touched.amount && '*'}</span>
                                                     </label>
                                                     <InputCom
                                                     fieldClass="px-6 text-right"
@@ -162,20 +164,21 @@ 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"
+                                                    className="job-label flex gap-1 invisible"
                                                     >
                                                     Currency
-                                                    {props.errors.currency && props.touched.currency && <span className="text-[10px] text-red-500">{props.errors.currency}</span>}
+                                                    {props.errors.currency && props.touched.currency && <span className="text-base text-red-500">*</span>}
                                                     </label>
                                                     <select
                                                     id="currency"
                                                     name="currency"
                                                     value={props.values.currency}
-                                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${props.errors.currency && props.touched.currency && 'border border-red-500'}`}
                                                     onChange={props.handleChange}
+                                                    disabled={walletDetails.data.length == 1}
                                                     >
                                                     {walletDetails?.loading ? (
                                                         <option className="text-slate-500 text-[13.975px]" value="">
@@ -183,18 +186,34 @@ export default function AssignMediaTask({
                                                         </option>
                                                     ) : walletDetails.data.length ? (
                                                         <>
-                                                        <option className="text-slate-500 text-[13.975px]" value="">
-                                                            Currency
-                                                        </option>
-                                                        {walletDetails.data?.map((item, index) => (
-                                                            <option
-                                                            key={index}
-                                                            className="text-slate-500 text-lg"
-                                                            value={item?.country}
-                                                            >
-                                                            {item?.code}
-                                                            </option>
-                                                        ))}
+                                                            {walletDetails.data.length == 1 ?
+                                                            <>
+                                                            {walletDetails.data?.map((item, index) => (
+                                                                <option
+                                                                key={index}
+                                                                className="text-slate-500 text-lg"
+                                                                value={item?.country}
+                                                                >
+                                                                {item?.code}
+                                                                </option>
+                                                            ))}
+                                                            </>
+                                                            :
+                                                            <>
+                                                                <option className="text-slate-500 text-[13.975px]" value="">
+                                                                    Select
+                                                                </option>
+                                                                {walletDetails.data?.map((item, index) => (
+                                                                    <option
+                                                                    key={index}
+                                                                    className="text-slate-500 text-lg"
+                                                                    value={item?.country}
+                                                                    >
+                                                                    {item?.code}
+                                                                    </option>
+                                                                ))}
+                                                            </>
+                                                            }
                                                         </>
                                                     ) : (
                                                         <option className="text-slate-500 text-lg" value="">
@@ -203,48 +222,48 @@ export default function AssignMediaTask({
                                                     )}
                                                     </select>
                                                 </div>
-                                            </div>
-
-                                            {/* Duration */}
-                                            <div className="field w-full">
-                                                <label
-                                                htmlFor="timeline_days"
-                                                className="job-label flex gap-1"
-                                                >
-                                                Timeline
-                                                {props.errors.timeline_days && props.touched.timeline_days && <span className="text-[12px] text-red-500">{props.errors.timeline_days}</span>}
-                                                </label>
-                                                <select
-                                                id="timeline_days"
-                                                name="timeline_days"
-                                                value={props.values.timeline_days}
-                                                className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-                                                onChange={props.handleChange}
-                                                >
-                                                {publicArray.length && (
-                                                    <>
-                                                    <option className="text-slate-500 text-[13.975px]" value="">
-                                                        Duration
-                                                    </option>
-                                                    {publicArray.map(({ name, duration }, idx) => (
-                                                        <option
-                                                        key={idx}
-                                                        className="text-slate-500 text-[13.975px]"
-                                                        value={duration}
-                                                        >
-                                                        {name}
+                                            
+                                                {/* Duration */}
+                                                <div className="field w-full flex flex-col justify-between">
+                                                    <label
+                                                    htmlFor="timeline_days"
+                                                    className="job-label flex gap-1"
+                                                    >
+                                                    Timeline
+                                                    {props.errors.timeline_days && props.touched.timeline_days && <span className="text-base text-red-500">*</span>}
+                                                    </label>
+                                                    <select
+                                                    id="timeline_days"
+                                                    name="timeline_days"
+                                                    value={props.values.timeline_days}
+                                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                                                    onChange={props.handleChange}
+                                                    >
+                                                    {publicArray.length && (
+                                                        <>
+                                                        <option className="text-slate-500 text-[13.975px]" value="">
+                                                            Select
                                                         </option>
-                                                    ))}
-                                                    </>
-                                                )}
-                                                </select>
+                                                        {publicArray.map(({ name, duration }, idx) => (
+                                                            <option
+                                                            key={idx}
+                                                            className="text-slate-500 text-[13.975px]"
+                                                            value={duration}
+                                                            >
+                                                            {name}
+                                                            </option>
+                                                        ))}
+                                                        </>
+                                                    )}
+                                                    </select>
+                                                </div>
                                             </div>
                                             
                                             {/* Delivery Detail */}
                                             <div className="my-3">
                                             <label className="w-full job-label flex gap-1">
                                                 Delivery Detail
-                                                {props.errors.job_description && props.touched.job_description && <span className="text-[12px] text-red-500">{props.errors.job_description}</span>}
+                                                {props.errors.job_description && props.touched.job_description && <span className="text-base text-red-500">*</span>}
                                             </label>
                                             <textarea
                                                 className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}

src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx

@@ -36,7 +36,7 @@ export default function AssignPrevNewTask({
                     taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
                   }`}
                 >
-                  <div className="p-4 pt-0">
+                  <div className="px-4">
                     <div className="mb-2 w-full flex items-center gap-4">
                       <div className="flex items-center gap-2 text-sky-blue text-base">
                         <input
@@ -96,7 +96,7 @@ export default function AssignPrevNewTask({
                       </div>
                     )}
                     {taskType == "new" && (
-                      <div className="p-4 w-full h-full">
+                      <div className="px-4 w-full">
                         <NewTasks
                           formState={formState}
                           setFormState={setFormState}
@@ -109,9 +109,9 @@ export default function AssignPrevNewTask({
                   {taskType == "select" && (
                     <>
                       {jobList?.data?.length > 0 ? (
-                        <div className="p-4 pt-0 h-full">
+                        <div className="px-4">
                           <div className="w-full">
-                            <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
+                            <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2 max-h-[50px] overflow-y-auto">
                               {activeTask?.data?.title}
                             </p>
                             {/* <div className="my-3">
@@ -124,7 +124,7 @@ export default function AssignPrevNewTask({
                               <label className="job-label">
                                 Description
                               </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">
+                              <p className="p-1 text-sm text-slate-900 dark:text-white max-h-[100px] overflow-y-auto">
                                 {activeTask?.data?.description}
                               </p>
                             </div>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -26,6 +26,9 @@ const AssignTaskPopout = ({
 }) => {
   const {parentAssignJobToKid} = SocketValues()
 
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+
   const apiCall = new usersService();
 
   let { pathname, state } = useLocation();
@@ -86,7 +89,7 @@ const AssignTaskPopout = ({
   const [formState, setFormState] = useState({
     // Initialize form state with desired fields
     banner: details?.banner || "default.jpg",
-    country: details?.country || "",
+    country: details?.country ? details?.country : walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
     price: details?.price || "",
     title: details?.title || "",
     description: details?.description || "",
@@ -261,7 +264,13 @@ const AssignTaskPopout = ({
 
     apiCall.parentAssignMediaTask(reqData).then(res => {  // API CALL TO ASSIGN MEDIA TASK
       if(res.status != 200 || res.data.internal_return < 0){
-        setRequestStatus({ loading: false, status: false, message: "Failed to Assign Task" });
+        let error = errorMsg[res?.data?.error_msg] || ''
+
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: error? error : "failed to assign task",
+        });
         return setTimeout(()=>{
           setRequestStatus({ loading: false, status: false, message: "" });
         }, 3000)

src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx

@@ -74,21 +74,6 @@ export default function NewTasks({ formState, setFormState }) {
           </div>
 
           {/* Description  */}
-          {/* <div className="field w-full mb-[5px]">
-            <label htmlFor="description" className="job-label">Description</label>
-            <InputCom
-              fieldClass="px-6"
-              // label="Description"
-              // labelClass="tracking-wide"
-              inputBg="bg-slate-100"
-              type="text"
-              name="description"
-              value={formState.description}
-              inputHandler={handleInputChange}
-              //   blurHandler={props.handleBlur}
-              //   error={props.errors.description && props.touched.description && props.errors.description}
-            />
-          </div> */}
           <div className="field flex flex-col sm:flex-row w-full gap-2">
             <div className="w-full">
               <label
@@ -100,7 +85,7 @@ export default function NewTasks({ formState, setFormState }) {
               <textarea
                 id="description"
                 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]`}
+                className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[80px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
                 style={{ resize: "none" }}
                 name="description"
                 value={formState.description}
@@ -117,7 +102,7 @@ export default function NewTasks({ formState, setFormState }) {
                 htmlFor="Job Delivery Details"
                 className='job-label'
               >
-                Job Delivery Details
+                Delivery Detail
                 {/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}
               </label>
               <textarea
@@ -136,66 +121,85 @@ export default function NewTasks({ formState, setFormState }) {
 
         {/* inputs starts here */}
         <div className="w-full flex flex-col gap-2">
-          {/* Currency */}
-          <div className="field w-full">
-            <label
-              htmlFor="country"
-              className="job-label"
-            >
-              Currency
-              {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
-            </label>
-            <select
-              id="country"
-              name="country"
-              value={formState.country}
-              className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-              onChange={handleInputChange}
-              // onBlur={props.handleBlur}
-            >
-              {walletDetails?.loading ? (
-                <option className="text-slate-500 text-[13.975px]" value="">
-                  Loading...
-                </option>
-              ) : walletDetails.data.length ? (
-                <>
-                  <option className="text-slate-500 text-[13.975px]" value="">
-                    Currency
-                  </option>
-                  {walletDetails.data?.map((item, index) => (
-                    <option
-                      key={index}
-                      className="text-slate-500 text-lg"
-                      value={item?.country}
-                    >
-                      {item?.code}
-                    </option>
-                  ))}
-                </>
-              ) : (
-                <option className="text-slate-500 text-lg" value="">
-                  No Options Found! Try Again
-                </option>
-              )}
-            </select>
-          </div>
+          <div className="grid grid-cols-2 gap-3">
+            {/* Price */}
+            <div className="field w-full">
+              <label htmlFor="price" className="job-label">Reward</label>
+              <InputCom
+                fieldClass="px-6 text-right"
+                // label="Price"
+                // labelClass="tracking-wide"
+                inputBg="bg-slate-100"
+                type="number"
+                name="price"
+                placeholder="0"
+                value={formState.price}
+                inputHandler={handleInputChange}
+                // blurHandler={props.handleBlur}
+                // error={props.errors.price && props.touched.price && props.errors.price}
+              />
+            </div>
 
-          {/* Price */}
-          <div className="field w-full">
-            <label htmlFor="price" className="job-label">Price</label>
-            <InputCom
-              fieldClass="px-6 text-right"
-              // label="Price"
-              // labelClass="tracking-wide"
-              inputBg="bg-slate-100"
-              type="number"
-              name="price"
-              placeholder="0"
-              value={formState.price}
-              inputHandler={handleInputChange}
-              // blurHandler={props.handleBlur}
-              // error={props.errors.price && props.touched.price && props.errors.price}
-            />
+            {/* Currency */}
+            <div className="field w-full">
+              <label
+                htmlFor="country"
+                className="job-label invisible"
+              >
+                Currency
+                {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
+              </label>
+              <select
+                id="country"
+                name="country"
+                value={formState.country}
+                className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                onChange={handleInputChange}
+                disabled={walletDetails.data.length == 1}
+                // onBlur={props.handleBlur}
+              >
+                {walletDetails?.loading ? (
+                  <option className="text-slate-500 text-[13.975px]" value="">
+                    Loading...
+                  </option>
+                ) : walletDetails.data.length ? (
+                  <>
+                      {walletDetails.data.length == 1 ?
+                      <>
+                      {walletDetails.data?.map((item, index) => (
+                          <option
+                          key={index}
+                          className="text-slate-500 text-lg"
+                          value={item?.country}
+                          >
+                          {item?.code}
+                          </option>
+                      ))}
+                      </>
+                      :
+                      <>
+                          <option className="text-slate-500 text-[13.975px]" value="">
+                              Select
+                          </option>
+                          {walletDetails.data?.map((item, index) => (
+                              <option
+                              key={index}
+                              className="text-slate-500 text-lg"
+                              value={item?.country}
+                              >
+                              {item?.code}
+                              </option>
+                          ))}
+                      </>
+                      }
+                  </>
+                ) : (
+                  <option className="text-slate-500 text-lg" value="">
+                    No Options Found! Try Again
+                  </option>
+                )}
+              </select>
+            </div>
           </div>
 
           {/* Duration */}
@@ -218,7 +222,7 @@ export default function NewTasks({ formState, setFormState }) {
               {publicArray.length && (
                 <>
                   <option className="text-slate-500 text-[13.975px]" value="">
-                    Duration
+                    Select
                   </option>
                   {publicArray.map(({ name, duration }, idx) => (
                     <option

src/components/History/RewardsTable.jsx

@@ -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

src/components/History/index.jsx

@@ -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>
                     }

src/components/Home/index.jsx

@@ -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}

src/components/Iframe/Iframe.jsx

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

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -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 ? (

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -8,6 +8,7 @@ import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import ActiveJobMessageMedia from "./ActiveJobMessageMedia";
 import IndexJobActions from "./JobActions/IndexJobActions";
+import MediaLayout from "../Partials/MediaLayout";
 
 const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
 
@@ -270,43 +271,46 @@ function ActiveJobsMedia(props) {
   },[props.details.contract, props.details.contract_uid])
 
   return (
-    <Layout>
-        <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">
-            {/* job title */}
-            <div className="w-full">
-            <div className="w-full flex justify-start space-x-3 items-start">
-                <button
-                type="button"
-                className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
-                onClick={() => {
-                    if (props.details.pathname == "/manage-family") {
-                    navigate(
-                        props.details.pathname,
-                        { state: { ...props.details.accountDetails } },
-                        { replace: true }
-                    );
-                    } else {
-                    navigate(props.details.pathname, { replace: true });
-                    }
-                }}
-                >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="35"
-                    height="35"
-                    viewBox="0 0 24 24"
-                    fill="skyblue"
-                >
-                    <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
-                </svg>
-                </button>
-                <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
-                {props.details?.title && props.details.title}
-                </h1>
-            </div>
-            </div>
-            {/* end of job title */}
-        </div>
+    <MediaLayout
+        backpath={props.details.pathname}
+        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="w-full">
+                    <div className="w-full flex justify-start space-x-3 items-start">
+                        <button
+                        type="button"
+                        className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
+                        onClick={() => {
+                            if (props.details.pathname == "/manage-family") {
+                            navigate(
+                                props.details.pathname,
+                                { state: { ...props.details.accountDetails } },
+                                { replace: true }
+                            );
+                            } else {
+                            navigate(props.details.pathname, { replace: true });
+                            }
+                        }}
+                        >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="35"
+                            height="35"
+                            viewBox="0 0 24 24"
+                            fill="skyblue"
+                        >
+                            <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
+                        </svg>
+                        </button>
+                        <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
+                        {props.details?.title && props.details.title}
+                        </h1>
+                    </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">
             <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
@@ -315,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">
@@ -370,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>
@@ -384,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>
@@ -401,7 +415,7 @@ function ActiveJobsMedia(props) {
                 {/* TEXTAREA SECTION */}
                 <div className="w-full mb-3">
                     <div className="w-full">
-                        <div className="pl-7 mb-2 flex items-center border-b border-slate-300 gap-3">
+                        <div className="pl-7 flex items-center gap-3">
                             <button
                                 name="message"
                                 onClick={(e) => setTab(e.target.name)}
@@ -427,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-slate-300 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"
@@ -436,8 +450,8 @@ function ActiveJobsMedia(props) {
                             autoFocus
                         />
                         ) : (
-                        <div className="p-4 w-full h-[150px] text-base text-slate-600 border border-slate-300">
-                            <div className="files">
+                        <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"
@@ -494,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}
@@ -582,7 +596,7 @@ function ActiveJobsMedia(props) {
         />
       )}
       {/* END OF POPOUT SECTION */}
-    </Layout>
+    </MediaLayout>
   );
 }
 

src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx

@@ -3,22 +3,20 @@ import React from 'react'
 function CurrentJobAction() {
   return (
     <div className='job-action  dark:bg-black'>
-      <p className="my-3 py-1 text-base active-owner">
-          <table className="w-full text-sm text-left text-gray-500 ">
-              <tbody>
-              <tr>
-                  <td>
-                      <div className="flex space-x-2 items-center w-full task_action_panel">
+      <table className="w-full my-3 py-1  text-sm text-left text-gray-500">
+          <tbody>
+          <tr>
+              <td>
+                  <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                              <div>
-                                  Waiting for the completion message from the client before you can approve.
-                              </div>
-                      </div>
-                  </td>
-              </tr>
-              </tbody>
-          </table>
-      </p>
+                          <div>
+                              Waiting for the completion message from the client before you can approve.
+                          </div>
+                  </div>
+              </td>
+          </tr>
+          </tbody>
+      </table>
     </div>
   )
 }

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -65,7 +65,7 @@ function CurrentTaskAction({jobDetails}) {
           <div className="w-full text-sm text-left text-gray-500">
             {jobDetails.job_type == 'MEDIA' ?
             <div className="flex justify-center items-center">
-                <button onClick={popUpHandler} type="button" className="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>

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -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>
         )}

src/components/MyTasks/MyOffersFamilyTable.jsx

@@ -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 &&

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -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>
       )}
     </>

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -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>
   );
 }

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -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>
   );
 }

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -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>
+    </>
   );
 }
 

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -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>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -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>
           ) : (
             <>

src/components/MyWallet/WalletAction.jsx

@@ -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>
 

src/components/MyWallet/WalletBox.jsx

@@ -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>
             ))

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -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>

src/components/MyWallet/WalletItemCard.jsx

@@ -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 }}

src/components/Partials/Layout.jsx

@@ -31,57 +31,36 @@ 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>
-              {userDetails.account_type == 'FULL' &&
-              <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>
           </div>
         </div>
@@ -113,14 +92,14 @@ export default function Layout({ children }) {
                   Are you sure you want to Logout of your WrenchBoard account?
                 </p>
               </div>
-              <div className="modal-footer-wrapper flex justify-center items-center gap-5">
-                <button onClick={logOut} type="button" className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full">
-                  {`Yes ${process.env.REACT_APP_LOGOUT_TEXT}`}
-                </button>
-                <button onClick={logoutModalHandler} type="button" className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full">
-                  <span className="text-gradient">Not Now</span>
-                </button>
-              </div>
+            </div>
+            <div className="modal-footer-wrapper flex justify-center items-center gap-5">
+              <button onClick={logOut} type="button" className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full">
+                {`Yes ${process.env.REACT_APP_LOGOUT_TEXT}`}
+              </button>
+              <button onClick={logoutModalHandler} type="button" className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full">
+                <span className="text-gradient">Not Now</span>
+              </button>
             </div>
           </div>
         </ModalCom>

src/components/Partials/MediaHeader.jsx

@@ -0,0 +1,620 @@
+import React, { useContext } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import bank1 from "../../assets/images/bank-1.png";
+import bank2 from "../../assets/images/bank-2.png";
+import bank3 from "../../assets/images/bank-3.png";
+import bank4 from "../../assets/images/bank-4.png";
+import profileImg from "../../assets/images/profile.jpg";
+import useToggle from "../../hooks/useToggle";
+import DarkModeContext from "../Contexts/DarkModeContext";
+import Icons from "../Helpers/Icons";
+import ModalCom from "../Helpers/ModalCom";
+import WalletHeader from "../MyWallet/WalletHeader";
+
+import { useSelector } from "react-redux";
+import Flag from "../../assets/images/united-states.svg";
+import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
+// import { updateWalletDetails } from "../../store/walletDetails";
+import TimeDifference from "../Helpers/TimeDifference";
+
+const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
+
+export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpath, title }) {
+
+  const darkMode = useContext(DarkModeContext);
+
+  const navigate = useNavigate()
+
+  const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
+
+  const [balanceDropdown, setbalanceValue] = useToggle(false);
+  const [notificationDropdown, setNotificationValue] = useToggle(false);
+  const [userProfileDropdown, setProfileDropdown] = useToggle(false);
+  const [moneyPopup, setPopup] = useToggle(false);
+
+  const { userDetails } = useSelector((state) => state?.userDetails);
+
+  const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+  const image = localStorage.getItem("session_token")
+    ? userDetails.account_type === "FAMILY"
+      ? `${userDetails.session_image_server}${localStorage.getItem(
+          "session_token"
+        )}/family/${sessionStorage.getItem("family_uid")}`
+      : `${userDetails.session_image_server}${localStorage.getItem(
+          "session_token"
+        )}/profile/${userDetails.uid}`
+    : "";
+
+  // 9308RDR122
+
+  const handlerBalance = () => {
+    setbalanceValue.toggle();
+    if (notificationDropdown) {
+      setNotificationValue.toggle();
+    }
+    if (userProfileDropdown) {
+      setProfileDropdown.toggle();
+    }
+  };
+  const handlerNotification = () => {
+    setNotificationValue.toggle();
+    if (balanceDropdown) {
+      setbalanceValue.toggle();
+    }
+    if (userProfileDropdown) {
+      setProfileDropdown.toggle();
+    }
+  };
+  const handlerProfile = () => {
+    setProfileDropdown.toggle();
+    if (balanceDropdown) {
+      setbalanceValue.toggle();
+    }
+    if (notificationDropdown) {
+      setNotificationValue.toggle();
+    }
+  };
+  const clickAwayhandler = () => {
+    if (balanceDropdown) {
+      setbalanceValue.toggle();
+    }
+    if (notificationDropdown) {
+      setNotificationValue.toggle();
+    }
+    if (userProfileDropdown) {
+      setProfileDropdown.toggle();
+    }
+  };
+  const addMoneyHandler = () => {
+    setPopup.toggle();
+    setbalanceValue.set(false);
+  };
+
+  // getting the location of head
+  let { pathname } = useLocation();
+
+  const handleWalletBtn = () => {
+    if (pathname === "/my-wallet") {
+      setbalanceValue.set(false);
+    } else return balanceDropdown;
+  };
+
+  // User Profile
+  let { firstname, lastname, email, profile_pic_url } = userDetails;
+  let userEmail = email?.split("@")[0];
+  const userProfileImage = image || DEFAULT_PROFILE_IMAGE;
+
+  return (
+    <>
+      <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
+            className="xl:hidden block mr-10"
+            type="button"
+            onClick={sidebarHandler}
+          >
+            <svg
+              width="25"
+              height="19"
+              viewBox="0 0 25 19"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M24.3544 8.45953L16.9855 0.271831C16.8283 0.0982522 16.6089 0 16.3763 0H11.4637C11.1411 0 10.848 0.189955 10.7153 0.484712C10.5843 0.781107 10.6384 1.12663 10.8545 1.36571L17.7306 9.00647L10.8545 16.6456C10.6384 16.8863 10.5827 17.2318 10.7153 17.5266C10.848 17.823 11.1411 18.0129 11.4637 18.0129H16.3763C16.6089 18.0129 16.8283 17.913 16.9855 17.7427L24.3544 9.55505C24.6344 9.24391 24.6344 8.76903 24.3544 8.45953Z"
+                fill="url(#paint0_linear_700_68145)"
+              />
+              <path
+                d="M13.7104 8.45953L6.34147 0.271831C6.18427 0.0982522 5.96484 0 5.73231 0H0.819691C0.497095 0 0.203976 0.189955 0.071335 0.484712C-0.0596682 0.781107 -0.00562942 1.12663 0.210526 1.36571L7.08656 9.00647L0.210526 16.6456C-0.00562942 16.8863 -0.0613058 17.2318 0.071335 17.5266C0.203976 17.823 0.497095 18.0129 0.819691 18.0129H5.73231C5.96484 18.0129 6.18427 17.913 6.34147 17.7427L13.7104 9.55505C13.9904 9.24391 13.9904 8.76903 13.7104 8.45953Z"
+                fill="url(#paint1_linear_700_68145)"
+              />
+              <defs>
+                <linearGradient
+                  id="paint0_linear_700_68145"
+                  x1="10.644"
+                  y1="0"
+                  x2="28.9548"
+                  y2="13.8495"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#F539F8" />
+                  <stop offset="0.416763" stopColor="#C342F9" />
+                  <stop offset="1" stopColor="#5356FB" />
+                </linearGradient>
+                <linearGradient
+                  id="paint1_linear_700_68145"
+                  x1="0"
+                  y1="0"
+                  x2="18.3108"
+                  y2="13.8495"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#F539F8" />
+                  <stop offset="0.416763" stopColor="#C342F9" />
+                  <stop offset="1" stopColor="#5356FB" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </button> */}
+
+          {/* Home */}
+          {/* <div className="search-bar xl:hidden justify-center items-center w-[376px]">
+            <HomeButton />
+          </div> */}
+
+          {/* Back BTN AND TITLE */}
+          <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,
+                    { replace: true }
+                );
+                } else {
+                navigate(backpath, { replace: true });
+                }
+            }}
+            >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="25"
+                height="25"
+                viewBox="0 0 24 24"
+                fill="skyblue"
+            >
+                <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
+            </svg>
+            </button>
+
+            <div className="">
+                {darkMode.theme === "light" ? (
+                    <img className="w-28 h-auto" src={siteLogo} alt="nft" />
+                ) : (
+                    <img className="w-28 h-auto" src={siteLogo} alt="nft" />
+                )}
+            </div>
+
+            <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide line-clamp-1">
+            {title && title}
+            </h1>
+          </div>
+          
+
+          {/* user info */}
+          <div className="user-info flex items-center justify-end w-full xl:space-x-7 space-x-2 z-10 ">
+            {/* dark mode */}
+            {/* <button
+              onClick={darkMode.handleThemeSwitch}
+              type="button"
+              className="xl:w-[176px] w-[52px] h-[52px] dark:bg-white bg-dark-gray border border-pink rounded-full flex justify-center items-center"
+            >
+              <div className="flex space-x-2.5 items-center">
+                <span className="dark:text-dark-gray text-white">
+                  <svg
+                    width="27"
+                    height="27"
+                    viewBox="0 0 27 27"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="fill-current"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M18.3065 16.3771C18.1572 16.6304 17.986 16.8743 17.7937 17.1062C17.7118 17.2044 17.7247 17.3515 17.8228 17.4339C17.9208 17.5163 18.0665 17.5028 18.1484 17.4046C18.3569 17.1532 18.5419 16.8897 18.7043 16.6155C18.7695 16.5051 18.7334 16.3622 18.6238 16.2966C18.5142 16.2304 18.3722 16.2668 18.3065 16.3771ZM18.9591 14.722C18.8948 15.0116 18.8078 15.2975 18.6982 15.5759C18.6511 15.6955 18.7093 15.831 18.8282 15.878C18.9466 15.9255 19.0812 15.8668 19.1283 15.7477C19.2472 15.446 19.3411 15.1368 19.4104 14.8231C19.4382 14.6978 19.3596 14.5735 19.2347 14.5456C19.1103 14.5176 18.9864 14.5968 18.9591 14.722ZM19.0673 12.944C19.0955 13.2411 19.1006 13.5395 19.0825 13.8375C19.0747 13.9655 19.1718 14.0763 19.2994 14.0837C19.4266 14.0917 19.5362 13.9939 19.5441 13.8659C19.564 13.5437 19.5584 13.2206 19.5274 12.8994C19.5154 12.7713 19.4021 12.6777 19.2754 12.6899C19.1482 12.702 19.0548 12.816 19.0673 12.944ZM18.6229 11.2201C18.7422 11.4948 18.8388 11.7769 18.9128 12.0641C18.9447 12.1884 19.071 12.2629 19.1949 12.2308C19.3184 12.1987 19.3924 12.0716 19.3605 11.9473C19.2805 11.6363 19.1755 11.3304 19.0465 11.0334C18.9951 10.9156 18.8587 10.8616 18.7417 10.9133C18.6247 10.9649 18.5715 11.1023 18.6229 11.2201ZM17.6651 9.72283C17.8653 9.94816 18.0448 10.1856 18.2034 10.4333C18.2723 10.5413 18.4157 10.5725 18.523 10.5026C18.6303 10.4333 18.6612 10.2889 18.5919 10.1809C18.4208 9.91324 18.2265 9.65578 18.0092 9.4123C17.9241 9.31639 17.7779 9.30848 17.6827 9.39414C17.5879 9.4798 17.58 9.62738 17.6651 9.72283Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M13.4409 5.61267C9.08757 5.61267 5.55359 9.14665 5.55359 13.5C5.55359 17.8533 9.08757 21.3873 13.4409 21.3873C17.7942 21.3873 21.3282 17.8533 21.3282 13.5C21.3282 9.14665 17.7942 5.61267 13.4409 5.61267ZM13.9049 6.5559C17.5298 6.79484 20.4003 9.81475 20.4003 13.5C20.4003 17.1852 17.5298 20.2051 13.9049 20.4441V6.5559Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M12.1116 1.32213V3.46343C12.1116 4.19318 12.7072 4.78556 13.4409 4.78556C14.1746 4.78556 14.7702 4.19318 14.7702 3.46343V1.32213C14.7702 0.592374 14.1746 0 13.4409 0C12.7072 0 12.1116 0.592374 12.1116 1.32213Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M21.0877 4.01472L19.5511 5.5513C19.0274 6.07499 19.0274 6.92528 19.5511 7.44898C20.0748 7.97267 20.9251 7.97267 21.4488 7.44898L22.9854 5.9124C23.509 5.38871 23.509 4.53841 22.9854 4.01472C22.4617 3.49102 21.6114 3.49102 21.0877 4.01472Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M25.6581 12.3649H23.4849C22.7443 12.3649 22.1431 12.9661 22.1431 13.7068C22.1431 14.4474 22.7443 15.0486 23.4849 15.0486H25.6581C26.3988 15.0486 27 14.4474 27 13.7068C27 12.9661 26.3988 12.3649 25.6581 12.3649Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M22.9854 21.5012L21.4488 19.9646C20.9251 19.4409 20.0748 19.4409 19.5511 19.9646C19.0274 20.4883 19.0274 21.3386 19.5511 21.8623L21.0877 23.3989C21.6114 23.9226 22.4617 23.9226 22.9854 23.3989C23.509 22.8752 23.509 22.0249 22.9854 21.5012Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M14.7702 25.6778V23.5365C14.7702 22.8068 14.1746 22.2144 13.4409 22.2144C12.7072 22.2144 12.1116 22.8068 12.1116 23.5365V25.6778C12.1116 26.4076 12.7072 27 13.4409 27C14.1746 27 14.7702 26.4076 14.7702 25.6778Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M5.78958 23.0647L7.29553 21.5372C7.80878 21.0166 7.80878 20.1714 7.29553 19.6508C6.78228 19.1302 5.94893 19.1302 5.43568 19.6508L3.92974 21.1783C3.41649 21.6989 3.41649 22.5441 3.92974 23.0647C4.44299 23.5853 5.27633 23.5853 5.78958 23.0647Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M1.32213 14.8293H3.46343C4.19318 14.8293 4.78556 14.2337 4.78556 13.5C4.78556 12.7663 4.19318 12.1707 3.46343 12.1707H1.32213C0.592374 12.1707 0 12.7663 0 13.5C0 14.2337 0.592374 14.8293 1.32213 14.8293Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M3.92974 5.82165L5.43568 7.34911C5.94893 7.86969 6.78228 7.86969 7.29553 7.34911C7.80878 6.82853 7.80878 5.98328 7.29553 5.46269L5.78958 3.93524C5.27633 3.41465 4.44299 3.41465 3.92974 3.93524C3.41649 4.45582 3.41649 5.30107 3.92974 5.82165Z"
+                    />
+                  </svg>
+                </span>
+                <span className="dark:text-dark-gray font-medium text-white xl:block hidden">
+                  {darkMode.theme === "light" ? "Dark" : "Light"} Mode
+                </span>
+              </div>
+            </button> */}
+            {/* balance */}
+
+            {/* My Page Button */}
+            {/* {userDetails.account_type === "FULL" ? <PageButton /> : null} */}
+
+            {/*<div className="lg:hidden block"></div>*/}
+            <WalletHeader
+              myWalletList={walletDetails.data}
+              handlerBalance={handlerBalance}
+              balanceDropdown={balanceDropdown}
+              addMoneyHandler={addMoneyHandler}
+              setBalanceDropdown={setbalanceValue}
+            />
+            {/* notification */}
+            <div className="user-notification lg:block hidden relative">
+              <div
+                onClick={() => handlerNotification()}
+                className="lg:w-[48px] lg:h-[48px] w-[38px] h-[38px] bg-white   flex justify-center items-center rounded-full overflow-hidden relative"
+              >
+                <Icons name="notification" />
+                <span className="absolute right-2 top-2 z-10 text-xs lg:w-5 lg:h-5 w-4 h-4 flex justify-center items-center rounded-full primary-gradient text-white cursor-default">
+                  {notifications?.loading ? "●" : notifications?.data?.length}
+                </span>
+              </div>
+              <div
+                className={`notification-dropdown z-30 w-96 bg-white dark:bg-dark-white   absolute -right-12 rounded-lg cursor-pointer ${
+                  notificationDropdown ? "active" : ""
+                }`}
+              >
+                <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-6">
+                  <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
+                    Recent Notifications
+                  </h3>
+                </div>
+
+                <div className="content px-7 pb-7">
+                  <ul>
+                    {notifications?.data?.length &&
+                      notifications?.data?.map((item, idx) => {
+                        if (idx < 5) {
+                          return (
+                            <li
+                              className={`content-item ${
+                                idx == 4
+                                  ? "py-5 "
+                                  : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                              }`}
+                              key={idx}
+                            >
+                              <div className="notifications flex space-x-4 items-center">
+                                <div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
+                                  <img
+                                    src={require(`../../assets/images/notifications/${item?.icon}`)}
+                                    alt="icon"
+                                    className="w-full h-full"
+                                  />
+                                </div>
+                                <div className="name">
+                                  <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
+                                    {item?.title}
+                                    {/* <span className="ml-1 font-bold">
+                                successfully done
+                              </span> */}
+                                  </p>
+                                  <p className="text-sm text-thin-light-gray font-medium">
+                                    <TimeDifference
+                                      time={item?.date}
+                                      key={item?.uid}
+                                    />
+                                  </p>
+                                </div>
+                              </div>
+                            </li>
+                          );
+                        }
+                      })}
+                  </ul>
+
+                  <div className="add-money-btn flex justify-center items-center">
+                    <Link
+                      to="/notification"
+                      className="text-purple text-sm font-medium"
+                      onClick={handlerNotification}
+                    >
+                      See all Notification
+                    </Link>
+                    {/* <button className="text-purple text-sm font-medium" onClick={()=>{
+                      handlerNotification()
+                      navigate('/notification', {replace: true})
+                    }}>See all Notification</button> */}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="lg:hidden block">
+              <Link
+                to="/notification"
+                className="lg:w-[48px] lg:h-[48px] w-[38px] h-[38px] bg-white   flex justify-center items-center rounded-full overflow-hidden relative"
+              >
+                <Icons name="notification" />
+                <span className="absolute right-2 top-2 z-10 text-xs lg:w-5 lg:h-5 w-4 h-4 flex justify-center items-center rounded-full primary-gradient text-white">
+                  10
+                </span>
+              </Link>
+            </div>
+            {/* profile */}
+            <div className="user-profile relative">
+              <div
+                onClick={() => handlerProfile()}
+                className="hidden lg:flex items-center space-x-3.5"
+              >
+                {/* profile-image */}
+                <div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
+                  <img
+                    src={userProfileImage}
+                    alt="profile"
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className="lg:block hidden">
+                  <h1 className="text-xl font-bold   text-dark-gray dark:text-white">
+                    {firstname}
+                  </h1>
+                  {userDetails && userDetails?.account_type !== "FAMILY" && (
+                    <p className="text-sm text-thin-light-gray">@{userEmail}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="for-mobile-profile lg:hidden block">
+                <div
+                  // to="/profile"
+                  onClick={() => handlerProfile()}
+                  className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
+                >
+                  <img
+                    src={profileImg}
+                    alt="profile"
+                    className="w-full h-full object-cover object-center"
+                  />
+                </div>
+              </div>
+
+              <div
+                className={`profile-dropdown w-[293px] z-30 bg-white dark:bg-dark-white   absolute lg:right-16 -right-[16px]  rounded-lg ${
+                  userProfileDropdown ? "active" : ""
+                }`}
+              >
+                <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-2">
+                  <img src={siteLogo} alt="Logo" className="w-[150px]" />
+                </div>
+                <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-2">
+                  <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
+                    {`${firstname} ${lastname}`}
+                  </h3>
+                </div>
+                <div className="content">
+                  <ul className="px-7">
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                        <Link to="/settings" className="notifications">
+                          <div className="name">
+                            <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                              My Profile
+                            </p>
+                          </div>
+                        </Link>
+                      </li>
+                    )}
+                    <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                      <Link to={ account_type == "FULL" ? "/my-wallet" : "/family-wallet"} className="notifications">
+                        <div className="name">
+                          <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                            My Wallet
+                          </p>
+                        </div>
+                      </Link>
+                    </li>
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                        <Link to="/yourpage" className="notifications">
+                          <div className="name">
+                            <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                              My Page
+                            </p>
+                          </div>
+                        </Link>
+                      </li>
+                    )}
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <>
+                        <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                          <Link to="#" className="notifications">
+                            <div className="name">
+                              <p className="text-sm py-2 px-4 text-dark-gray dark:text-white font-medium">
+                                My Statements
+                              </p>
+                            </div>
+                          </Link>
+                        </li>
+                      </>
+                    )}
+                  </ul>
+                  <hr />
+                  <ul className="px-7">
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <>
+                        <li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                          <Link to="#" className="notifications">
+                            <div className="name">
+                              <div className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                <p>Language</p>
+                                <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm">
+                                  <p className="text-[10px]">English </p>
+                                  <img
+                                    className="w-[10px] h-[10px]"
+                                    src={Flag}
+                                    alt="U.S.A Flag"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </Link>
+                          {/* langauge list items*/}
+                          <div className="inner-list-items absolute rounded-lg">
+                            <ul className="p-3">
+                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
+                                <Link to="#" className="notifications">
+                                  <div className="name">
+                                    <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm text-sm py-1 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                      <img
+                                        className="w-[15px] h-[15px]"
+                                        src={Flag}
+                                        alt="U.S.A Flag"
+                                      />
+                                      <p className="text-sm">English </p>
+                                    </div>
+                                  </div>
+                                </Link>
+                              </li>
+                            </ul>
+                          </div>
+                          {/* end Language list items*/}
+                        </li>
+                        <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                          <Link to="#" className="notifications">
+                            <div className="name">
+                              <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                Account Settings
+                              </p>
+                            </div>
+                          </Link>
+                        </li>
+                      </>
+                    )}
+
+                    <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg cursor-pointer">
+                      <div className="name" onClick={logoutModalHandler}>
+                        <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                          {process.env.REACT_APP_LOGOUT_TEXT}
+                        </p>
+                      </div>
+                    </li>
+                  </ul>
+                  <hr className="mb-3" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {balanceDropdown || notificationDropdown || userProfileDropdown ? (
+        <div
+          onClick={clickAwayhandler}
+          className="w-full h-screen fixed left-0"
+          style={{ zIndex: "-1" }}
+        ></div>
+      ) : (
+        ""
+      )}
+    </>
+  );
+}
+
+const PageButton = () => {
+  return (
+    <Link
+      to="/yourpage"
+      className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4"
+    >
+      <div className="flex items-center lg:justify-between justify-center w-full h-full">
+        <span className="lg:block hidden w-[25px]">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
+            <path
+              fillRule="evenodd"
+              d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+              fill="#ffffff"
+              className="color000000 svgShape"
+            ></path>
+          </svg>
+        </span>
+        <p className="lg:text-xl text-lg font-bold text-white">My Page</p>
+        <span className="lg:block hidden">
+          {/* <Icons name="deep-plus" /> */}
+        </span>
+      </div>
+    </Link>
+  );
+};
+
+const HomeButton = () => {
+  return (
+    <Link
+      to="/"
+      className="flex user-balance cursor-pointer w-[110px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4"
+    >
+      <div className="flex items-center lg:justify-between justify-center w-full h-full">
+        <span className="">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-7 h-7 stroke-white fill-white"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+            />
+          </svg>
+        </span>
+        <p className="lg:text-xl text-lg font-bold text-white">Home</p>
+        <span className=""></span>
+      </div>
+    </Link>
+  );
+};

src/components/Partials/MediaLayout.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import useToggle from "../../hooks/useToggle";
+import { drawerToggle } from "../../store/drawer";
+import ModalCom from "../Helpers/ModalCom";
+// import Header from "./Header";
+import MobileSidebar from "./MobileSideBar";
+import RightSideBar from "./RightSideBar";
+import Sidebar from "./Sidebar";
+import MediaHeader from "./MediaHeader";
+
+export default function MediaLayout({backpath, title, children }) {
+    const { drawer } = useSelector((state) => state.drawer);
+    const { userJobList } = useSelector((state) => state.userJobList);
+    const dispatch = useDispatch();
+    const [MobileSideBar, setMobileSidebar] = useToggle(false);
+    const [logoutModal, setLogoutModal] = useState(false);
+    const logoutModalHandler = () => {
+        setLogoutModal(!logoutModal);
+    };
+    const navigate = useNavigate();
+    const logOut = () => {
+        sessionStorage.clear();
+        localStorage.clear();
+        // toast.success("Come Back Soon", {
+        //   icon: `🙂`,
+        // });
+
+        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 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]`}>*/}
+                    {/*    <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]"}`}>*/}
+                    {/*    <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />*/}
+                    {/*</div>*/}
+                    {/* end sidebar */}
+                    <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} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
+                        </div>
+                        {/* container */}
+                        <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>
+                            {/*<div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">*/}
+                            {/*    <RightSideBar myJobList={userJobList} />*/}
+                            {/*</div>*/}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {logoutModal && (
+                <ModalCom action={logoutModalHandler} situation={logoutModal}>
+                    <div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl">
+                        <div className="modal-header-con">
+                            <h1 className="modal-title">
+                                Confirm
+                            </h1>
+                            <button type="button" className="modal-close-btn" onClick={logoutModalHandler}>
+                                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" className="fill-current" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z" fill="" fillOpacity="0.6" />
+                                    <path d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z" fill="#" fillOpacity="0.6" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+                            <div className="what-icon mb-6 cursor-pointer">
+                                <svg width="136" height="136" viewBox="0 0 136 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <circle cx="68" cy="68" r="68" fill="#4687ba" />
+                                    <path d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z" fill="white" />
+                                    <path d="M67.485 100.21C66.1617 99.9268 64.9041 99.5091 63.803 98.6787C61.3804 96.8484 60.2877 93.7699 61.0386 90.7888C61.7726 87.8747 64.2138 85.6703 67.2089 85.2157C71.273 84.6 75.2024 87.3681 75.8135 91.277C76.4937 95.6153 73.8202 99.3782 69.544 100.103C69.4429 100.12 69.3487 100.172 69.2527 100.209C68.6635 100.21 68.0742 100.21 67.485 100.21Z" fill="white" />
+                                </svg>
+                            </div>
+                            <div className="mb-6">
+                                <p className="text-2xl tracking-wide text-center text-dark-gray dark:text-white">
+                                    Are you sure you want to Logout of your WrenchBoard account?
+                                </p>
+                            </div>
+                        </div>
+                        <div className="modal-footer-wrapper flex justify-center items-center gap-5">
+                            <button onClick={logOut} type="button" className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full">
+                                {`Yes ${process.env.REACT_APP_LOGOUT_TEXT}`}
+                            </button>
+                            <button onClick={logoutModalHandler} type="button" className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full">
+                                <span className="text-gradient">Not Now</span>
+                            </button>
+                        </div>
+                    </div>
+                </ModalCom>
+            )}
+        </>
+    );
+}

src/components/Partials/RightSideBar.jsx

@@ -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">

src/components/Partials/Sidebar.jsx

@@ -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" />

src/components/countdown/CustomTimer.jsx

@@ -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>
+  )
+}

src/components/customTabs/TabButton.jsx

@@ -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>
+  )
+}
+

src/components/dashboardLoader/DashboardMediaPage.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import useToggle from "../../hooks/useToggle";
+import { drawerToggle } from "../../store/drawer";
+import { useSelector } from "react-redux";
+import MobileSidebar from "../Partials/MobileSideBar";
+
+
+export default function DashboardMediaPage({ children }) {
+
+  const { drawer } = useSelector((state) => state.drawer);
+  const [MobileSideBar, setMobileSidebar] = useToggle(false);
+
+  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`}>
+
+          {/* 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`}>
+            {/* 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 bg-slate-300 animate-pulse duration-100">
+            </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="w-full h-full bg-slate-200 animate-pulse duration-300">
+                <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 p-10 mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
+                        <div className="mb-4 w-full min-h-[500px] bg-slate-200 animate-pulse duration-100"></div>
+
+                        <div className="w-full p-4 h-20 bg-slate-300 animate-pulse duration-200 dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-2"></div>
+                    </div>
+
+                    <div className="p-10 w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
+                        {/* TEXTAREA SECTION */}
+                        <div className="w-full h-40 mb-3">
+                            <div className="w-full h-full bg-slate-200 dark:bg-black rounded-2xl shadow-md animate-pulse duration-100"></div>
+                        </div>
+                        {/* END OF TEXTAREA */}
+
+                        {/* MESSAGE SECTION */}
+                        <div className="w-full h-40">
+                            <div className="w-full h-full bg-slate-200 dark:bg-black rounded-2xl shadow-md animate-pulse duration-300"></div>
+                        </div>
+                        {/* END OF MESSAGE */}
+                    </div>
+                </div>
+              </div>
+
+              {/* <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
+                <RightSideBar myJobList={userJobList} />
+              </div> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/familyResources/FamGames.jsx

@@ -1,10 +1,529 @@
-import React from 'react'
+import React, { lazy, Suspense, useRef, useState } from 'react'
 import Layout from '../Partials/Layout'
+import MediaLayout from '../Partials/MediaLayout'
+import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb'
+import ActiveJobMessageMedia from '../MyActiveJobs/ActiveJobMessageMedia'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import usersService from '../../services/UsersService'
+import { useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { useReactToPrint } from 'react-to-print'
+
+const Iframe = lazy(() => import("../Iframe/Iframe"));
 
 export default function FamGames() {
+
+  const ApiCall = new usersService();
+  const navigate = useNavigate();
+
+  const { userDetails } = useSelector((state) => state.userDetails);
+
+  const [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent
+
+  const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
+
+  const [tab, setTab] = useState("message");
+
+  const [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  });
+
+  // let [popUp, setPopUp] = useState(false); // STATE FOR POPOUT MODAL
+
+  const printRef = useRef();
+  // to handle printing
+  const handlePrint = useReactToPrint({
+    content: () => printRef.current,
+  });
+
+  // FUNCTION TO HANDLE POPOUT
+  const popUpHandler = () => {
+    setPopUp((prev) => !prev);
+  };
+
+  // FUNCTION TO HANDLE MESSAGE CHANGE
+  const handleMessageChange = ({ target: { value } }) => {
+    setMessageToSend(value);
+  };
+
+  // FUNCTION TO HANDLE FILE UPlOAD CHANGE
+  const handleFileChange = ({ target: { files } }) => {
+    setRequestStatus({ loading: false, status: false, message: "" }); // State to determine error state
+
+    if (!files[0]) {
+      // IF NO FILE SELECTED RETURN
+      return;
+    }
+    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "File must be <= 1mb",
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    if (filesToSend.length >= Number(process.env.REACT_APP_TOTAL_NUM_FILE)) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: `Total number of attachment is ${Number(
+          process.env.REACT_APP_TOTAL_NUM_FILE
+        )}`,
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    // INCLUDE FILE IF NO ERROR
+    setFilesToSend((prev) => [...prev, files[0]]);
+  };
+
+  // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
+  const handleClearAll = ({ target: { name } }) => {
+    if (tab == "message") {
+      setMessageToSend("");
+    } else if (tab == "files") {
+      setFilesToSend([]);
+    } else {
+      return;
+    }
+  };
+
+  // FUNCTION TO REMOVE AND IMAGE
+  const handleRemoveImage = (imageToDelete) => {
+    setFilesToSend((prev) =>
+      prev.filter((item) => item.name != imageToDelete.name)
+    );
+  };
+
+  // FUNCTION TO SEND TASK MESSAGE
+  const sendTaskMessage = () => {
+    let reqData = {
+      message: messageToSend,
+      msg_type: "TEXT",
+      contract: props.details.contract,
+    };
+    if (!reqData.message) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Message is empty",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+    setRequestStatus({ loading: true, status: false, message: "" });
+    ApiCall.sendTaskMessage(reqData)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Message could not be sent, try again later",
+          });
+          return;
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Message Sent Successfully",
+        });
+        // function to trigger socket to emit 'send_message'
+        sendMessage(messageToSend, `${props.details.contract}-${props.details.contract_uid}`)
+        
+        props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+        setMessageToSend(""); // SENDS MESSAGE TO SEND BACK TO EMPTY STRINGS
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Opps! something went wrong",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
+  };
+
+  // FUNCTION TO SEND FILES
+  const sendFile = async () => {
+    setRequestStatus({ loading: true, status: false, message: "" });
+
+    if (!filesToSend.length) {
+      // checks if file to send is empty
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "No File(s) selected",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    for (let i = 0; i <= filesToSend.length - 1; i++) {
+      // Loops through files to send array and trigger upload API call
+
+      const fileToBase64 = async () => {
+        // Converts file data to base64 string
+        try {
+          const base64String = await convertFileToBase64(filesToSend[i]);
+          return base64String;
+        } catch (error) {
+          return false;
+        }
+      };
+
+      // if(await !fileToBase64()){
+      //   return
+      // }
+
+      let reqData = {
+        file_name: filesToSend[i].name,
+        file_size: filesToSend[i].size,
+        file_type: "image/png",
+        file_data: await fileToBase64(),
+        msg_type: "FILE",
+        contract: props.details.contract,
+      };
+
+      ApiCall.sendFiles(reqData)
+        .then((res) => {
+          // if(res.status != 200 || res.data.internal_return < 0){
+          //   setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
+          //   return
+          // }
+          // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
+          // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+          // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+        })
+        .catch((error) => {
+          // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
+        })
+        .finally(() => {
+          if (i == filesToSend.length - 1) {
+            setRequestStatus({
+              loading: false,
+              status: true,
+              message: "File(s) Uploaded Successfully",
+            });
+            setFilesToSend([]); // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+            props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+            setTimeout(() => {
+              setRequestStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          }
+        });
+    }
+  };
+
+
   return (
-    <Layout>
-        <div>Family Games Page</div>
-    </Layout>
+    <MediaLayout
+      backpath={'/'}
+      title={'Games'}
+    >
+        {/* <div className='mb-4'>
+          <CustomBreadcrumb 
+            title='Games and Interest' 
+            breadcrumb = {
+              [
+                { link: "/", title: "Home" },
+                  { link: "/work-in-progress", title: "Games and Interest", active: true},
+              ]
+            }
+          />
+        </div> */}
+        <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+            <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
+            
+              <div className="mb-4 w-full h-screen max-h-[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>
+  )
+}

src/components/jobPopout/DeleteJobPopout.jsx

@@ -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>
   );

src/components/jobPopout/EditJobPopout.jsx

@@ -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>
   );

src/components/jobPopout/FamilyOfferJobPopout.jsx

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

src/index.css

@@ -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;
-}
+} */

src/services/UsersService.js

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

src/views/FamGamesPage.jsx

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

src/views/ManageActiveJobs.jsx

@@ -1,9 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { lazy, Suspense, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
-import ActiveJobsMedia from "../components/MyActiveJobs/ActiveJobsMedia";
+// import ActiveJobsMedia from "../components/MyActiveJobs/ActiveJobsMedia";
 import usersService from "../services/UsersService";
 import { useSelector } from "react-redux";
+import LoadingSpinner from "../components/Spinners/LoadingSpinner";
+
+const ActiveJobsMedia = lazy(() => import("../components/MyActiveJobs/ActiveJobsMedia"));
 
 /**
  * This code defines a React functional component called `ManageActiveJobs`.
@@ -65,11 +68,13 @@ function ManageActiveJobs() {
   return (
     <>
     {details.job_type == 'MEDIA' ?
-    <ActiveJobsMedia
-      details={state}
-      activeJobMesList={activeJobMesList}
-      reloadActiveJobList={setActiveJobMesListReload}
-    />
+    <Suspense fallback={<Fallback />}>
+      <ActiveJobsMedia
+        details={state}
+        activeJobMesList={activeJobMesList}
+        reloadActiveJobList={setActiveJobMesListReload}
+      />
+    </Suspense>
     : details.job_type == 'TASK' ?
     <ActiveJobs 
       details={state}
@@ -84,3 +89,11 @@ function ManageActiveJobs() {
 }
 
 export default ManageActiveJobs;
+
+let Fallback = () => {
+  return (
+    <div className="w-full flex justify-center items-center">
+      <LoadingSpinner size='20' color='skyblue' height='h-screen' />
+    </div>
+  )
+}