Rearrangement of New Task Layout

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -31,6 +31,19 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
     setActiveTask({ id, data });
   };
 
+  // New Task
+  const [formState, setFormState] = useState({
+    // Initialize form state with desired fields
+    banner: "" || "default.jpg",
+    country: "" || "",
+    price: "" || "",
+    title: "" || "",
+    description: "" || "",
+    job_detail: "" || "",
+    timeline_days: "" || "",
+    category: [] || "",
+  });
+
   const assignFamilyTask = () => {
     setRequestStatus({ loading: true, status: false, message: "" });
     let reqData = {};
@@ -54,46 +67,93 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
         job_description: activeTask.data?.description,
         assign_mode: 110011,
       };
+    }
 
-      apiCall
+    if (taskType === "new") {
-        .assignFamilyTask(reqData)
+      const {
-        .then((res) => {
+        banner,
-          if (res.status != 200 || res.data.internal_return < 0) {
+        category,
-            setRequestStatus({
+        country,
-              loading: false,
+        description,
-              status: false,
+        job_detail,
-              message: "failed to assign task",
+        price,
-            });
+        timeline_days,
-            return setTimeout(() => {
+        title,
-              setRequestStatus({ loading: false, status: false, message: "" });
+      } = formState;
-            }, 5000);
+
-          }
+      const requiredFields = [
-          setRequestStatus({
+        banner,
-            loading: false,
+        category,
-            status: true,
+        country,
-            message: "action successful",
+        description,
-          });
+        job_detail,
-          setTimeout(() => {
+        price,
-            setRequestStatus({ loading: false, status: false, message: "" });
+        timeline_days,
-            action(); // FUNCTION THAT CLOSES THE MODAL BOX
+        title,
-          }, 5000);
+      ];
-        })
+
-        .catch((err) => {
+      if (requiredFields.some((field) => !field)) {
+        const emptyField = requiredFields.find((field) => !field);
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: `${emptyField} Empty`,
+        });
+
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 3000);
+
+        return;
+      }
+
+      reqData = {
+        banner,
+        category,
+        country,
+        description,
+        job_detail,
+        price: price * 100,
+        timeline_days,
+        title,
+        assign_mode: 110055,
+        family_uid: familyDetails.uid,
+      };
+    }
+
+    apiCall
+      .assignFamilyTask(reqData)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
           setRequestStatus({
             loading: false,
             status: false,
-            message: "An Error occured, try again",
+            message: "failed to assign task",
           });
-          setTimeout(() => {
+          return setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
           }, 5000);
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "action successful",
         });
-    }
+        setTimeout(() => {
-
+          setRequestStatus({ loading: false, status: false, message: "" });
-    if (taskType == "new") {
+          action(); // FUNCTION THAT CLOSES THE MODAL BOX
-      // RUNS HERE IF TASK TYPE IS NEW TASK
+        }, 5000);
-      console.log("TESTING");
+      })
-    }
+      .catch((err) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "An Error occured, try again",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
   };
 
   useEffect(() => {
@@ -120,16 +180,10 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
       });
   }, []);
 
-  // New Task 
+  console.log("Trying to see form data >>", formState);
-  const [newTaskData, setNewTaskData] = useState({})
-  const handleNewTaskData = (data) => {
-    setNewTaskData(data)
-  }
-
-  console.log("Trying to see form data >>", newTaskData)
   return (
     <>
-      <ModalCom action={action} situation={situation}>
+      <ModalCom action={action} situation={situation} className="assign-task-popup">
         <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
           <div className="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">
@@ -231,9 +285,12 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                       )}
                     </div>
                   )}
-                  {taskType !== "select" && (
+                  {taskType == "new" && (
                     <div className="p-4 w-full h-[400px]">
-                      <NewTasks onChange={handleNewTaskData} />
+                      <NewTasks
+                        formState={formState}
+                        setFormState={setFormState}
+                      />
                     </div>
                   )}
                 </div>
@@ -335,7 +392,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                 <div className="">
                   {requestStatus.loading ? (
                     <LoadingSpinner color="sky-blue" size="8" />
-                  ) : (
+                  ) : taskType == "select" ? (
                     <button
                       type="button"
                       disabled={requestStatus.loading}
@@ -344,6 +401,15 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                     >
                       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"
+                    >
+                      {`Assign to ${familyDetails?.firstname}`}
+                    </button>
                   )}
                 </div>
               </div>

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

@@ -1,25 +1,16 @@
 import React, { useEffect, useState } from "react";
 import usersService from "../../../../services/UsersService";
 import InputCom from "../../../Helpers/Inputs/InputCom";
+import debounce from "../../../../hooks/debounce";
 
-export default function NewTasks({ onChange }) {
+const DEFAULT_IMAGE = require("../../../../assets/images/taskbanners/default.jpg");
+export default function NewTasks({ formState, setFormState }) {
   let [currency, setCurrency] = useState({
     loading: true,
     status: false,
     data: null,
   });
 
-  const [formState, setFormState] = useState({
-    // Initialize form state with desired fields
-    country: "",
-    price: "",
-    title: "",
-    description: "",
-    job_detail: "",
-    timeline_days: "",
-    category: [],
-  });
-
   const ApiCall = new usersService();
 
   // FUNCTION TO GET Currency
@@ -49,7 +40,6 @@ export default function NewTasks({ onChange }) {
       ...prevState,
       [name]: value,
     }));
-    onChange(formState); // Pass the form data to the parent on every change
   };
 
   useEffect(() => {
@@ -57,8 +47,8 @@ export default function NewTasks({ onChange }) {
   }, []);
 
   return (
-    <form className="w-full">
+    <form className="w-full flex justify-between items-center">
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-3 max-w-[77%]">
         {/* inputs starts here */}
         <div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]">
           {/* Currency */}
@@ -79,13 +69,13 @@ export default function NewTasks({ onChange }) {
               // onBlur={props.handleBlur}
             >
               {currency.loading ? (
-                <option className="text-slate-500 text-lg" value="">
+                <option className="text-slate-500 text-[13.975px]" value="">
                   Loading...
                 </option>
               ) : currency.data.length ? (
                 <>
-                  <option className="text-slate-500 text-lg" value="">
+                  <option className="text-slate-500 text-[13.975px]" value="">
-                    Select a currency
+                    Currency
                   </option>
                   {currency.data?.map((item, index) => (
                     <option
@@ -141,11 +131,14 @@ export default function NewTasks({ onChange }) {
             >
               {publicArray.length && (
                 <>
-                  <option className="text-slate-500 text-lg" value="">
+                  <option className="text-slate-500 text-[13.975px]" value="">
-                    Select Duration
+                    Duration
                   </option>
                   {publicArray.map(({ name, duration }, idx) => (
-                    <option className="text-slate-500 text-lg" value={duration}>
+                    <option
+                      className="text-slate-500 text-[13.975px]"
+                      value={duration}
+                    >
                       {name}
                     </option>
                   ))}
@@ -210,6 +203,16 @@ export default function NewTasks({ onChange }) {
           </div>
         </div>
       </div>
+      {/* Banner Image */}
+      <div className="max-w-[20%] w-full">
+        <div className="h-32 w-full">
+          <img
+            src={DEFAULT_IMAGE}
+            alt="task_banner_img"
+            className="w-full h-full object-contain"
+          />
+        </div>
+      </div>
     </form>
   );
 }

src/index.css

@@ -941,4 +941,8 @@ TODO: Responsive ===========================
 
 .login-type-btn{
   box-shadow: 0 0 0.8rem #00000080;
+}
+
+.assign-task-popup{
+  top: 75px;
 }