From 27f87ee92d949df148a6848e4fbd83fb8df767bf Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 26 Mar 2024 20:16:53 +0100
Subject: [PATCH] added media tab on assign task to kid

---
 .../FamilyPopout/AssignMediaTask.jsx          | 287 ++++++++++++++++
 .../FamilyPopout/AssignPrevNewTask.jsx        | 263 ++++++++++++++
 .../FamilyPopout/AssignTaskPopout.jsx         | 322 +++++-------------
 .../FamilyAcc/FamilyPopout/dummy.jsx          | 232 +++++++++++++
 .../FamilyAcc/FamilyPopout/forms/NewTasks.jsx |  64 ++--
 src/services/UsersService.js                  |  13 +
 6 files changed, 913 insertions(+), 268 deletions(-)
 create mode 100644 src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
 create mode 100644 src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
 create mode 100644 src/components/FamilyAcc/FamilyPopout/dummy.jsx

diff --git a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
new file mode 100644
index 0000000..1014f8b
--- /dev/null
+++ b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
@@ -0,0 +1,287 @@
+import React, { useEffect, useState } from 'react'
+import LoadingSpinner from '../../Spinners/LoadingSpinner'
+import { NewTasks } from './forms'
+import { PriceFormatter } from '../../Helpers/PriceFormatter'
+import { useSelector } from 'react-redux';
+import { InputCom } from '../../AddJob/settings';
+
+export default function AssignMediaTask({
+    commonMedia,
+    requestStatus,
+    assignFamilyTask,
+    activeMedia,
+    handleActiveMedia,
+    closeModal
+}) {
+
+  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
+
+//   const handleInputChange = (event) => {
+//     const { name, value } = event.target;
+//     setFormState((prevState) => ({
+//       ...prevState,
+//       [name]: value,
+//     }));
+//   };
+
+  return (
+    <>
+         {commonMedia?.loading ? (
+              <div className="h-[30rem] w-full flex justify-center items-center">
+                <LoadingSpinner color="sky-blue" size="16" />
+              </div>
+            ) : (
+              <>
+                <div
+                  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">
+                        {commonMedia?.data?.length ? (
+                          commonMedia?.data?.map((item, index) => (
+                            <div
+                              key={item.uid}
+                              className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
+                              onClick={() => handleActiveMedia(item)}
+                            >
+                              <input
+                                type="radio"
+                                name="media-list"
+                                checked={activeMedia?.uid == item?.uid}
+                                onChange={() =>
+                                  handleActiveMedia(item)
+                                }
+                                className="w-[15px] h-[15px] cursor-pointer"
+                              />
+                              <p className="w-full text-dark-gray dark:text-white tracking-wide">
+                                {item?.title}
+                              </p>
+                            </div>
+                          ))
+                        ) : (
+                          <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
+                            No Media found!
+                          </p>
+                        )}
+                      </div>
+                  </div>
+
+                  {/*Right Hand Side for details && Task Type === select */}
+                    <>
+                      {commonMedia?.data?.length > 0 ? (
+                        <div className="p-4 py-0 h-full">
+                          <div className="w-full">
+                            <div className="mb-3 w-full">
+                              <label className="job-label">
+                                Description
+                              </label>
+                              <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                {activeMedia?.description}
+                              </p>
+                            </div>
+
+                            <div className="my-3 w-full flex items-center justify-center">
+                                <div className="w-full h-28 rounded-2xl flex items-center justify-center">
+                                    <img 
+                                      className="w-full h-full object-cover"
+                                      loading="lazy"
+                                      src={imageSrc} 
+                                      alt='job image' 
+                                    />
+                                </div>
+                            </div>
+                            <div className="grid grid-cols-2 gap-3">
+                                {/* 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}
+                                    />
+                                </div>
+
+                                {/* 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}
+                                    >
+                                    {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>
+
+                            {/* Duration */}
+                            <div className="field w-full">
+                                <label
+                                htmlFor="timeline_days"
+                                className="job-label"
+                                >
+                                Timeline
+                                {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
+                                </label>
+                                <select
+                                id="timeline_days"
+                                name="timeline_days"
+                                // value={formState.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={handleInputChange}
+                                >
+                                {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}
+                                        </option>
+                                    ))}
+                                    </>
+                                )}
+                                </select>
+                            </div>
+                            
+                            {/* Delivery Detail */}
+                            <div className="my-3">
+                              <label className="w-full job-label">
+                                Delivery Detail
+                              </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`}
+                                rows="5"
+                                style={{ resize: "none" }}
+                                // value={activeMedia?.data?.job_detail}
+                                readOnly
+                                // onChange={handleInputChange}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        <></>
+                      )}
+                    </>
+                </div>
+
+                {/* BTN */}
+                <div className="modal-footer-wrapper">
+                  {/* error or success display */}
+                  <div className="w-auto h-auto flex items-center">
+                    {requestStatus.message != "" &&
+                      (!requestStatus.status ? (
+                        <div
+                          className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
+                        >
+                          {requestStatus.message}
+                        </div>
+                      ) : (
+                        requestStatus.status && (
+                          <div
+                            className={`relative p-2 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 */}
+                  <div className="w-auto h-auto flex items-center gap-20">
+                    <button
+                      disabled={requestStatus.loading}
+                      onClick={()=>closeModal()}
+                      type="button"
+                      className="custom-btn border-gradient"
+                    >
+                      <span className="text-gradient">Close</span>
+                    </button>
+                    <div className="">
+                      {requestStatus.loading ? (
+                        <LoadingSpinner color="sky-blue" size="8" />
+                      ) : (
+                        <button
+                          type="button"
+                          disabled={requestStatus.loading}
+                          onClick={assignFamilyTask}
+                          className="custom-btn btn-gradient text-white"
+                        >
+                          Assign
+                        </button>
+                      ) 
+                      }
+                    </div>
+                  </div>
+                </div>
+              </>
+            )  
+        }     
+    </>
+  )
+}
+
+
+
+const publicArray = [
+    { duration: 1, name: "1 day" },
+    { duration: 2, name: "2 days" },
+    { duration: 3, name: "3 days" },
+    { duration: 4, name: "4 days" },
+    { duration: 5, name: "5 days" },
+    { duration: 6, name: "6 days" },
+    { duration: 7, name: "1 week" },
+    { duration: 14, name: "2 weeks" },
+    { duration: 21, name: "3 weeks" },
+    { duration: 28, name: "4 weeks" },
+  ];
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
new file mode 100644
index 0000000..14a7e8e
--- /dev/null
+++ b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
@@ -0,0 +1,263 @@
+import React from 'react'
+import LoadingSpinner from '../../Spinners/LoadingSpinner'
+import { NewTasks } from './forms'
+import { PriceFormatter } from '../../Helpers/PriceFormatter'
+import { useSelector } from 'react-redux';
+
+export default function AssignPrevNewTask({
+    familyTask,
+    requestStatus,
+    assignFamilyTask,
+    taskType,
+    switchTaskType,
+    formState,
+    setFormState,
+    activeTask,
+    handleActiveTask,
+    closeModal
+}) {
+
+  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+
+
+  let imageSrc = (localStorage.getItem("session_token")
+  ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask.data.job_uid}` : ""); // FOR GETTING JOB IMAGE
+
+  return (
+    <>
+         {familyTask?.loading ? (
+              <div className="h-[30rem] w-full flex justify-center items-center">
+                <LoadingSpinner color="sky-blue" size="16" />
+              </div>
+            ) : (
+              <>
+                <div
+                  className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
+                    taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
+                  }`}
+                >
+                  <div className="p-4 pt-0">
+                    <div className="mb-2 w-full flex items-center gap-4">
+                      <div className="flex items-center gap-2 text-sky-blue text-base">
+                        <input
+                          type="radio"
+                          name="task-type"
+                          value="select"
+                          className="w-[20px] h-[20px] cursor-pointer"
+                          checked={taskType == "select"}
+                          onChange={switchTaskType}
+                        />
+                        <span className="text-lg tracking-wide font-semibold">Previous Task</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-sky-blue text-base">
+                        <input
+                          type="radio"
+                          name="task-type"
+                          value="new"
+                          className="w-[20px] h-[20px] cursor-pointer"
+                          checked={taskType == "new"}
+                          onChange={switchTaskType}
+                        />
+                        <span className="text-lg tracking-wide font-semibold">New Task</span>
+                      </div>
+                    </div>
+                    {/* Task Type === select */}
+                    {taskType == "select" && (
+                      <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                        {familyTask?.data?.length ? (
+                          familyTask?.data?.map((item, index) => (
+                            <div
+                              key={item.job_uid}
+                              className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
+                              onClick={() => handleActiveTask(item.job_uid, item)}
+                            >
+                              <input
+                                type="radio"
+                                name="task-list"
+                                checked={
+                                  activeTask.id == item.job_uid ||
+                                  (activeTask.id == index && true)
+                                }
+                                onChange={() =>
+                                  handleActiveTask(item.job_uid, item)
+                                }
+                                className="w-[15px] h-[15px] cursor-pointer"
+                              />
+                              <p className="w-full text-dark-gray dark:text-white tracking-wide">
+                                {item?.title}
+                              </p>
+                            </div>
+                          ))
+                        ) : (
+                          <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
+                            No Task found!
+                          </p>
+                        )}
+                      </div>
+                    )}
+                    {taskType == "new" && (
+                      <div className="p-4 w-full h-full">
+                        <NewTasks
+                          formState={formState}
+                          setFormState={setFormState}
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  {/*Right Hand Side for details && Task Type === select */}
+                  {taskType == "select" && (
+                    <>
+                      {familyTask?.data?.length > 0 ? (
+                        <div className="p-4 pt-0 h-full">
+                          <div className="w-full">
+                            <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
+                              {activeTask?.data?.title}
+                            </p>
+                            {/* <div className="my-3">
+                              <Detail
+                                label="Description"
+                                value={activeTask?.data?.description}
+                              />
+                            </div> */}
+                            <div className="my-3 w-full">
+                              <label className="job-label">
+                                Description
+                              </label>
+                              <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                {activeTask?.data?.description}
+                              </p>
+                            </div>
+                            <div className="grid grid-cols-2">
+                              <div className="w-full">
+                                <div className="my-3 w-full flex items-center gap-1">
+                                  <label className="job-label">
+                                    Reward
+                                  </label>
+                                  <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                    {PriceFormatter(
+                                      activeTask?.data?.price * 0.01,
+                                      activeTask?.data?.currency,
+                                      activeTask?.data?.curreny_code
+                                    )}
+                                  </p>
+                                </div>
+
+                                <div className="my-3 w-full flex items-center gap-1">
+                                  <label className="job-label">
+                                    Timeline
+                                  </label>
+                                  <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                                </div>
+                              </div>
+                              <div className="w-full flex items-center justify-center">
+                                <div className="w-28 h-28 rounded-2xl flex items-center justify-center">
+                                    <img 
+                                      className="w-full h-auto"
+                                      loading="lazy"
+                                      src={imageSrc} 
+                                      alt='job image' 
+                                    />
+                                </div>
+                              </div>
+                            </div>
+                            
+                            {/* Dummy, no value found for created! thus commented*/}
+                            {/* <div className="my-3 sm:flex items-center">
+                              <Detail
+                                label="Created"
+                                value={`Dummy, no value found for created!`}
+                              />
+                            </div> */}
+
+                            <div className="my-3">
+                              <label className="w-full job-label">
+                                Delivery Detail
+                              </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`}
+                                rows="5"
+                                style={{ resize: "none" }}
+                                value={activeTask?.data?.job_detail}
+                                readOnly
+                                // onChange={handleInputChange}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        <></>
+                      )}
+                    </>
+                  )}
+                </div>
+
+                {/* BTN */}
+                <div className="modal-footer-wrapper">
+                  {/* error or success display */}
+                  <div className="w-auto h-auto flex items-center">
+                    {requestStatus.message != "" &&
+                      (!requestStatus.status ? (
+                        <div
+                          className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
+                        >
+                          {requestStatus.message}
+                        </div>
+                      ) : (
+                        requestStatus.status && (
+                          <div
+                            className={`relative p-2 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 */}
+                  <div className="w-auto h-auto flex items-center gap-20">
+                    <button
+                      disabled={requestStatus.loading}
+                      onClick={()=>closeModal()}
+                      type="button"
+                      className="custom-btn border-gradient"
+                    >
+                      <span className="text-gradient">Close</span>
+                    </button>
+                    <div className="">
+                      {requestStatus.loading ? (
+                        <LoadingSpinner color="sky-blue" size="8" />
+                      ) : (
+                        <button
+                          type="button"
+                          disabled={requestStatus.loading}
+                          onClick={assignFamilyTask}
+                          className="custom-btn btn-gradient text-white"
+                        >
+                          Assign
+                        </button>
+                      ) 
+                      // : (
+                      //   <button
+                      //     type="button"
+                      //     disabled={requestStatus.loading}
+                      //     onClick={assignFamilyTask}
+                      //     className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                      //   >
+                      //     {details
+                      //       ? `Assign task to ${details?.firstname}`
+                      //       : familyDetailsData
+                      //       ? `Assign task to ${familyDetailsData.firstname}`
+                      //       : "Assign"}
+                      //   </button>
+                      // )
+                      }
+                    </div>
+                  </div>
+                </div>
+              </>
+            )  
+        }     
+    </>
+  )
+}
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
index 5c6f5f5..bf2b0ca 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -11,6 +11,9 @@ import { NewTasks } from "./forms";
 import { SocketValues } from "../../Contexts/SocketIOContext";
 import { errorMsg } from "../../../lib/errorMsg";
 
+import AssignPrevNewTask from "./AssignPrevNewTask";
+import AssignMediaTask from "./AssignMediaTask";
+
 const AssignTaskPopout = ({
   action,
   details,
@@ -20,7 +23,7 @@ const AssignTaskPopout = ({
   activeTask,
   setActiveTask,
   setUpdatePage,
-  assignTaskChecker,
+  // assignTaskChecker,
   
 }) => {
   const {parentAssignJobToKid} = SocketValues()
@@ -54,6 +57,21 @@ const AssignTaskPopout = ({
     message: "",
   }); // HOLDS RESPONSE FOR SENDING API REQUEST
 
+  let [commonMedia, setCommonMedia] = useState({loading: true, data: [], image: ''})  // HOLDS COMMON MEDIA DATA
+  let [activeMedia, setActiveMedia] = useState({})  // HOLDS ACTIVE COMMON MEDIA DATA
+  const handleActiveMedia = (data = {}) => {
+    // FUNCTION TO CHANGE SELECTED ACTIVE MEDIA
+    setActiveMedia({...data});
+  };
+
+
+  let [assignType, setAssignType] = useState("task"); // SWITCHES BTW TASK AND MEDIA ASSIGNMENT
+
+  const switchAssignType = ({ target: { name } }) => {
+    // FUNCTION TO CHANGE ASSIGN TASK TYPE
+    setAssignType(name);
+  };
+
   let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK
 
   const switchTaskType = ({ target: { value } }) => {
@@ -90,13 +108,13 @@ const AssignTaskPopout = ({
     }
 
     let reqData = {};
-    if (taskType == "select") {
+    if (taskType == "select" && assignType == 'task') {
       // RUNS HERE IF TASK TYPE IS SELECT
       if (!Object.keys(activeTask.data).length) {
         setRequestStatus({
           loading: false,
           status: false,
-          message: "No Task is seleted",
+          message: "No Task is selected",
         });
         return setTimeout(() => {
           setRequestStatus({ loading: false, status: false, message: "" });
@@ -114,7 +132,7 @@ const AssignTaskPopout = ({
       };
     }
 
-    if (taskType === "new") {
+    if (taskType === "new" && assignType == 'task') {
       const {
         banner,
         category,
@@ -169,6 +187,13 @@ const AssignTaskPopout = ({
       };
     }
 
+    if(assignType == 'media'){ // FOR ASSIGNING MEDIA TASK
+      setRequestStatus({ loading: false, status: false, message: "You cannnot assign, work still process" });
+      return setTimeout(()=>{
+        setRequestStatus({ loading: false, status: false, message: "" });
+      },2000)
+    }
+
     apiCall
       .assignFamilyTask(reqData)
       .then((res) => {
@@ -225,10 +250,11 @@ const AssignTaskPopout = ({
           setRequestStatus({ loading: false, status: false, message: "" });
         }, 5000);
       });
-    };
+  };
 
-  let imageSrc = (localStorage.getItem("session_token")
-  ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask.data.job_uid}` : ""); // FOR GETTING JOB IMAGE
+  const closeModal = () => {  // FOR CLOSING ASSIGN TASK MODAL
+    action()
+  }
 
   useEffect(()=>{ // effect to update family UID when components mounts
     if(familyDetailsData?.uid){
@@ -240,6 +266,15 @@ const AssignTaskPopout = ({
     }
   },[])
 
+  useEffect(()=>{
+    apiCall.getParentCommonMedia().then((res)=>{
+        console.log('RESPONSE', res)
+        setCommonMedia({loading: false, data: res?.data?.result, image: ''})
+        setActiveMedia(res?.data?.result[0])
+    }).catch(err => {
+        setCommonMedia({loading: false, data: [], image: ''})
+    })
+  },[])
 
   return (
     <>
@@ -297,238 +332,49 @@ const AssignTaskPopout = ({
               </svg>
             </button>
           </div>
-          {familyTask?.loading ? (
-            <div className="h-[100px] w-full flex justify-center items-center">
-              <LoadingSpinner color="sky-blue" size="16" />
-            </div>
-          ) : (
-            <>
-              <div
-                className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
-                  taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
-                }`}
+          <div className="modal-body">
+            <div className="px-4 py-2 w-full flex items-center gap-4">
+              <button
+                name='task'
+                className={`py-1 px-2 font-medium bg-transparent border border-purple text-purple transition-all rounded-md duration-300 ${assignType=='task' && 'bg-yellow-500'}`}
+                onClick={switchAssignType}
               >
-                <div className="p-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
-                        type="radio"
-                        name="task-type"
-                        value="select"
-                        className="w-[20px] h-[20px] cursor-pointer"
-                        checked={taskType == "select"}
-                        onChange={switchTaskType}
-                      />
-                      <span className="text-lg tracking-wide font-semibold">Previous Task</span>
-                    </div>
-                    <div className="flex items-center gap-2 text-sky-blue text-base">
-                      <input
-                        type="radio"
-                        name="task-type"
-                        value="new"
-                        className="w-[20px] h-[20px] cursor-pointer"
-                        checked={taskType == "new"}
-                        onChange={switchTaskType}
-                      />
-                      <span className="text-lg tracking-wide font-semibold">New Task</span>
-                    </div>
-                  </div>
-                  {/* Task Type === select */}
-                  {taskType == "select" && (
-                    <div className="p-4 w-full h-[380px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
-                      {familyTask?.data?.length ? (
-                        familyTask?.data?.map((item, index) => (
-                          <div
-                            key={item.job_uid}
-                            className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
-                            onClick={() => handleActiveTask(item.job_uid, item)}
-                          >
-                            <input
-                              type="radio"
-                              name="task-list"
-                              checked={
-                                activeTask.id == item.job_uid ||
-                                (activeTask.id == index && true)
-                              }
-                              onChange={() =>
-                                handleActiveTask(item.job_uid, item)
-                              }
-                              className="w-[15px] h-[15px] cursor-pointer"
-                            />
-                            <p className="w-full text-dark-gray dark:text-white tracking-wide">
-                              {item?.title}
-                            </p>
-                          </div>
-                        ))
-                      ) : (
-                        <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
-                          No Task found!
-                        </p>
-                      )}
-                    </div>
-                  )}
-                  {taskType == "new" && (
-                    <div className="p-4 w-full">
-                      <NewTasks
-                        formState={formState}
-                        setFormState={setFormState}
-                      />
-                    </div>
-                  )}
-                </div>
-
-                {/*Right Hand Side for details && Task Type === select */}
-                {taskType == "select" && (
-                  <>
-                    {familyTask?.data?.length > 0 ? (
-                      <div className="p-4">
-                        <div className="w-full">
-                          <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
-                            {activeTask?.data?.title}
-                          </p>
-                          {/* <div className="my-3">
-                            <Detail
-                              label="Description"
-                              value={activeTask?.data?.description}
-                            />
-                          </div> */}
-                          <div className="my-3 w-full">
-                            <label className="job-label">
-                              Description
-                            </label>
-                            <p className="p-1 text-sm text-slate-900 dark:text-white">
-                              {activeTask?.data?.description}
-                            </p>
-                          </div>
-                          <div className="grid grid-cols-2">
-                            <div className="w-full">
-                              <div className="my-3 w-full flex items-center gap-1">
-                                <label className="job-label">
-                                  Reward
-                                </label>
-                                <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                  {PriceFormatter(
-                                    activeTask?.data?.price * 0.01,
-                                    activeTask?.data?.currency,
-                                    activeTask?.data?.curreny_code
-                                  )}
-                                </p>
-                              </div>
-
-                              <div className="my-3 w-full flex items-center gap-1">
-                                <label className="job-label">
-                                  Timeline
-                                </label>
-                                <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
-                              </div>
-                            </div>
-                            <div className="w-full flex items-center justify-center">
-                              <div className="w-28 h-28 rounded-2xl flex items-center justify-center">
-                                  <img 
-                                    className="w-full h-auto"
-                                    loading="lazy"
-                                    src={imageSrc} 
-                                    alt='job image' 
-                                  />
-                              </div>
-                            </div>
-                          </div>
-                          
-                          {/* Dummy, no value found for created! thus commented*/}
-                          {/* <div className="my-3 sm:flex items-center">
-                            <Detail
-                              label="Created"
-                              value={`Dummy, no value found for created!`}
-                            />
-                          </div> */}
-
-                          <div className="my-3">
-                            <label className="w-full job-label">
-                              Delivery Detail
-                            </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`}
-                              rows="5"
-                              style={{ resize: "none" }}
-                              value={activeTask?.data?.job_detail}
-                              readOnly
-                              // onChange={handleInputChange}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    ) : (
-                      <></>
-                    )}
-                  </>
-                )}
-              </div>
-
-              {/* BTN */}
-              <div className="modal-footer-wrapper">
-                {/* error or success display */}
-                <div className="w-auto h-auto flex items-center">
-                  {requestStatus.message != "" &&
-                    (!requestStatus.status ? (
-                      <div
-                        className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
-                      >
-                        {requestStatus.message}
-                      </div>
-                    ) : (
-                      requestStatus.status && (
-                        <div
-                          className={`relative p-2 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 */}
-                <div className="w-auto h-auto flex items-center gap-20">
-                  <button
-                    disabled={requestStatus.loading}
-                    onClick={action}
-                    type="button"
-                    className="custom-btn border-gradient"
-                  >
-                    <span className="text-gradient">Close</span>
-                  </button>
-                  <div className="">
-                    {requestStatus.loading ? (
-                      <LoadingSpinner color="sky-blue" size="8" />
-                    ) : (
-                      <button
-                        type="button"
-                        disabled={requestStatus.loading}
-                        onClick={assignFamilyTask}
-                        className="custom-btn btn-gradient text-white"
-                      >
-                        Assign
-                      </button>
-                    ) 
-                    // : (
-                    //   <button
-                    //     type="button"
-                    //     disabled={requestStatus.loading}
-                    //     onClick={assignFamilyTask}
-                    //     className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
-                    //   >
-                    //     {details
-                    //       ? `Assign task to ${details?.firstname}`
-                    //       : familyDetailsData
-                    //       ? `Assign task to ${familyDetailsData.firstname}`
-                    //       : "Assign"}
-                    //   </button>
-                    // )
-                    }
-                  </div>
-                </div>
-              </div>
-            </>
-          )}
+              Task
+              </button>
+              <button
+                name='media'
+                className={`py-1 px-2 font-medium bg-transparent border border-purple text-purple transition-all rounded-md duration-300 ${assignType=='media' && 'bg-yellow-500'}`}
+                onClick={switchAssignType}
+              >
+              Media
+              </button>
+            </div>
+            <div className="">
+              {assignType == 'task' ?
+                <AssignPrevNewTask 
+                  familyTask={familyTask}
+                  requestStatus={requestStatus}
+                  assignFamilyTask={assignFamilyTask}
+                  taskType={taskType}
+                  switchTaskType={switchTaskType}
+                  formState={formState}
+                  setFormState={setFormState}
+                  activeTask={activeTask}
+                  handleActiveTask={handleActiveTask}
+                  closeModal={closeModal}
+                />
+                :
+                <AssignMediaTask 
+                  commonMedia={commonMedia}
+                  requestStatus={requestStatus}
+                  assignFamilyTask={assignFamilyTask}
+                  activeMedia={activeMedia}
+                  handleActiveMedia={handleActiveMedia}
+                  closeModal={closeModal}
+                />
+              }
+            </div>
+          </div>
         </div>
       </ModalCom>
     </>
diff --git a/src/components/FamilyAcc/FamilyPopout/dummy.jsx b/src/components/FamilyAcc/FamilyPopout/dummy.jsx
new file mode 100644
index 0000000..375a573
--- /dev/null
+++ b/src/components/FamilyAcc/FamilyPopout/dummy.jsx
@@ -0,0 +1,232 @@
+{familyTask?.loading ? (
+    <div className="h-[30rem] w-full flex justify-center items-center">
+      <LoadingSpinner color="sky-blue" size="16" />
+    </div>
+  ) : (
+    <>
+      <div
+        className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
+          taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
+        }`}
+      >
+        <div className="p-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
+                type="radio"
+                name="task-type"
+                value="select"
+                className="w-[20px] h-[20px] cursor-pointer"
+                checked={taskType == "select"}
+                onChange={switchTaskType}
+              />
+              <span className="text-lg tracking-wide font-semibold">Previous Task</span>
+            </div>
+            <div className="flex items-center gap-2 text-sky-blue text-base">
+              <input
+                type="radio"
+                name="task-type"
+                value="new"
+                className="w-[20px] h-[20px] cursor-pointer"
+                checked={taskType == "new"}
+                onChange={switchTaskType}
+              />
+              <span className="text-lg tracking-wide font-semibold">New Task</span>
+            </div>
+          </div>
+          {/* Task Type === select */}
+          {taskType == "select" && (
+            <div className="p-4 w-full h-[380px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+              {familyTask?.data?.length ? (
+                familyTask?.data?.map((item, index) => (
+                  <div
+                    key={item.job_uid}
+                    className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
+                    onClick={() => handleActiveTask(item.job_uid, item)}
+                  >
+                    <input
+                      type="radio"
+                      name="task-list"
+                      checked={
+                        activeTask.id == item.job_uid ||
+                        (activeTask.id == index && true)
+                      }
+                      onChange={() =>
+                        handleActiveTask(item.job_uid, item)
+                      }
+                      className="w-[15px] h-[15px] cursor-pointer"
+                    />
+                    <p className="w-full text-dark-gray dark:text-white tracking-wide">
+                      {item?.title}
+                    </p>
+                  </div>
+                ))
+              ) : (
+                <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
+                  No Task found!
+                </p>
+              )}
+            </div>
+          )}
+          {taskType == "new" && (
+            <div className="p-4 w-full">
+              <NewTasks
+                formState={formState}
+                setFormState={setFormState}
+              />
+            </div>
+          )}
+        </div>
+
+        {/*Right Hand Side for details && Task Type === select */}
+        {taskType == "select" && (
+          <>
+            {familyTask?.data?.length > 0 ? (
+              <div className="p-4">
+                <div className="w-full">
+                  <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
+                    {activeTask?.data?.title}
+                  </p>
+                  {/* <div className="my-3">
+                    <Detail
+                      label="Description"
+                      value={activeTask?.data?.description}
+                    />
+                  </div> */}
+                  <div className="my-3 w-full">
+                    <label className="job-label">
+                      Description
+                    </label>
+                    <p className="p-1 text-sm text-slate-900 dark:text-white">
+                      {activeTask?.data?.description}
+                    </p>
+                  </div>
+                  <div className="grid grid-cols-2">
+                    <div className="w-full">
+                      <div className="my-3 w-full flex items-center gap-1">
+                        <label className="job-label">
+                          Reward
+                        </label>
+                        <p className="p-1 text-sm text-slate-900 dark:text-white">
+                          {PriceFormatter(
+                            activeTask?.data?.price * 0.01,
+                            activeTask?.data?.currency,
+                            activeTask?.data?.curreny_code
+                          )}
+                        </p>
+                      </div>
+
+                      <div className="my-3 w-full flex items-center gap-1">
+                        <label className="job-label">
+                          Timeline
+                        </label>
+                        <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                      </div>
+                    </div>
+                    <div className="w-full flex items-center justify-center">
+                      <div className="w-28 h-28 rounded-2xl flex items-center justify-center">
+                          <img 
+                            className="w-full h-auto"
+                            loading="lazy"
+                            src={imageSrc} 
+                            alt='job image' 
+                          />
+                      </div>
+                    </div>
+                  </div>
+                  
+                  {/* Dummy, no value found for created! thus commented*/}
+                  {/* <div className="my-3 sm:flex items-center">
+                    <Detail
+                      label="Created"
+                      value={`Dummy, no value found for created!`}
+                    />
+                  </div> */}
+
+                  <div className="my-3">
+                    <label className="w-full job-label">
+                      Delivery Detail
+                    </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`}
+                      rows="5"
+                      style={{ resize: "none" }}
+                      value={activeTask?.data?.job_detail}
+                      readOnly
+                      // onChange={handleInputChange}
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* BTN */}
+      <div className="modal-footer-wrapper">
+        {/* error or success display */}
+        <div className="w-auto h-auto flex items-center">
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-2 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 */}
+        <div className="w-auto h-auto flex items-center gap-20">
+          <button
+            disabled={requestStatus.loading}
+            onClick={action}
+            type="button"
+            className="custom-btn border-gradient"
+          >
+            <span className="text-gradient">Close</span>
+          </button>
+          <div className="">
+            {requestStatus.loading ? (
+              <LoadingSpinner color="sky-blue" size="8" />
+            ) : (
+              <button
+                type="button"
+                disabled={requestStatus.loading}
+                onClick={assignFamilyTask}
+                className="custom-btn btn-gradient text-white"
+              >
+                Assign
+              </button>
+            ) 
+            // : (
+            //   <button
+            //     type="button"
+            //     disabled={requestStatus.loading}
+            //     onClick={assignFamilyTask}
+            //     className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+            //   >
+            //     {details
+            //       ? `Assign task to ${details?.firstname}`
+            //       : familyDetailsData
+            //       ? `Assign task to ${familyDetailsData.firstname}`
+            //       : "Assign"}
+            //   </button>
+            // )
+            }
+          </div>
+        </div>
+      </div>
+    </>
+  )}
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx b/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
index 38651e9..a5e88c5 100644
--- a/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
@@ -1,13 +1,17 @@
 import React, { useEffect, useState } from "react";
 import usersService from "../../../../services/UsersService";
 import InputCom from "../../../Helpers/Inputs/InputCom";
+import { useSelector } from "react-redux";
 
 export default function NewTasks({ formState, setFormState }) {
-  let [currency, setCurrency] = useState({
-    loading: true,
-    status: false,
-    data: null,
-  });
+
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+  // let [currency, setCurrency] = useState({
+  //   loading: true,
+  //   status: false,
+  //   data: null,
+  // });
 
   const selectImage = require(`../../../../assets/images/taskbanners/${
     formState.banner || "default.jpg"
@@ -15,25 +19,25 @@ export default function NewTasks({ formState, setFormState }) {
   const ApiCall = new usersService();
 
   // FUNCTION TO GET Currency
-  const getUserCurrency = () => {
-    setCurrency((prev) => ({ ...prev, loading: true }));
-    ApiCall.getUserWallets()
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          setCurrency({ loading: false, status: true, data: [] });
-          return;
-        }
+  // const getUserCurrency = () => {
+  //   setCurrency((prev) => ({ ...prev, loading: true }));
+  //   ApiCall.getUserWallets()
+  //     .then((res) => {
+  //       if (res.data.internal_return < 0) {
+  //         setCurrency({ loading: false, status: true, data: [] });
+  //         return;
+  //       }
 
-        setCurrency({
-          loading: false,
-          status: true,
-          data: res.data.result_list,
-        });
-      })
-      .catch((err) => {
-        setCurrency({ loading: false, status: false, data: [] });
-      });
-  };
+  //       setCurrency({
+  //         loading: false,
+  //         status: true,
+  //         data: res.data.result_list,
+  //       });
+  //     })
+  //     .catch((err) => {
+  //       setCurrency({ loading: false, status: false, data: [] });
+  //     });
+  // };
 
   const handleInputChange = (event) => {
     const { name, value } = event.target;
@@ -43,9 +47,9 @@ export default function NewTasks({ formState, setFormState }) {
     }));
   };
 
-  useEffect(() => {
-    getUserCurrency();
-  }, []);
+  // useEffect(() => {
+  //   getUserCurrency();
+  // }, []);
 
   return (
     <form className="w-full flex justify-between items-start">
@@ -149,22 +153,22 @@ export default function NewTasks({ formState, setFormState }) {
               onChange={handleInputChange}
               // onBlur={props.handleBlur}
             >
-              {currency?.loading ? (
+              {walletDetails?.loading ? (
                 <option className="text-slate-500 text-[13.975px]" value="">
                   Loading...
                 </option>
-              ) : currency.data.length ? (
+              ) : walletDetails.data.length ? (
                 <>
                   <option className="text-slate-500 text-[13.975px]" value="">
                     Currency
                   </option>
-                  {currency.data?.map((item, index) => (
+                  {walletDetails.data?.map((item, index) => (
                     <option
                       key={index}
                       className="text-slate-500 text-lg"
                       value={item?.country}
                     >
-                      {item?.description}
+                      {item?.code}
                     </option>
                   ))}
                 </>
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index fddc792..d15521d 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -1330,6 +1330,19 @@ class usersService {
     };
     return this.postAuxEnd("/familywallet/redeem/options", postData);
   }
+
+  // API FUNCTION FOR PARENT TO CALL COMMON MEDIA
+  getParentCommonMedia() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_ACCOUNT_FAMILY_RESOURCES,
+      offset: 1,
+      limit: 20,
+    };
+    return this.postAuxEnd("/commonmedia", postData);
+  }
   
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)