From 9cd3ef273b307b18aaa0d57ed0ed35554480b928 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Mon, 29 May 2023 23:58:55 +0100
Subject: [PATCH 1/4] .

---
 src/components/jobPopout/JobListPopout.jsx | 75 ++++++++++++++++------
 1 file changed, 54 insertions(+), 21 deletions(-)

diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index cdb37da..507222d 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -69,28 +69,49 @@ function JobListPopout({ details, onClose, situation }) {
   };
 
   let [textArea, setTextArea] = useState(details?.job_detail);
-  const [errMsg, setErrMsg] = useState("")
+  const [errMsg, setErrMsg] = useState({
+    deliveryDetail: "",
+    jobFields: {
+      family: "",
+      public: "",
+      individual: "",
+      group: "",
+    },
+  });
 
   const handleInputChange = ({ target: { value } }) => {
     setTextArea(value);
   };
 
-  const errorHandler = ({target: {name}}) => {
-
-  }
+  const errorHandler = ({ target: { name } }) => {
+    try {
+      if (name === "family")
+        setErrMsg({ jobFields: { family: "please select a family member" } });
+      else if (name === "public")
+        setErrMsg({ jobFields: { public: "please select duration" } });
+      else if (name === "individual")
+        setErrMsg({ jobFields: { individual: "please enter email" } });
+      else if (name === "group")
+        setErrMsg({ jobFields: { group: "please select a family member" } });
+    } finally {
+      setTimeout(() => {
+        setErrMsg({ jobFields: "" });
+      }, 3000);
+    }
+  };
 
   const jobFieldHandler = async (values, helpers) => {
     let { job_id, job_uid } = details;
 
-    if(!textArea) {
-      setErrMsg("delivery detail is required!")
-      return
+    if (!textArea) {
+      setErrMsg({ deliveryDetail: "delivery detail is required!" });
+      return;
     }
 
     let jobReq = {
       job_id,
       job_uid,
-      job_description: textArea
+      job_description: textArea,
     };
     let reqData;
 
@@ -131,8 +152,7 @@ function JobListPopout({ details, onClose, situation }) {
       };
       setLoader({ jobFields: { group: true } });
     } else {
-      setErrMsg("err herre")
-      return
+      return;
     }
 
     try {
@@ -218,7 +238,7 @@ function JobListPopout({ details, onClose, situation }) {
                 value={textArea}
                 onChange={handleInputChange}
               />
-            {/* <p>{errMsg}</p> */}
+              <p>{errMsg.deliveryDetail}</p>
             </div>
           </div>
 
@@ -231,7 +251,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Assign to Family */}
                     <JobFieldInput
                       label="Assign to family"
@@ -242,8 +262,11 @@ function JobListPopout({ details, onClose, situation }) {
                       btnText="Assign to family"
                       optionText="Select Family"
                       loader={loader?.jobFields.family}
+                      errorHandler={errorHandler}
                     />
-                    {/* <p>{errMsg}</p> */}
+                    {props?.values.family === "" && (
+                      <p>{errMsg.jobFields.family}</p>
+                    )}
                   </Form>
                 );
               }}
@@ -256,7 +279,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Offer this job to public input */}
                     <JobFieldInput
                       label="Offer this job to public"
@@ -267,8 +290,11 @@ function JobListPopout({ details, onClose, situation }) {
                       btnText="Show Task to Public"
                       optionText="Select Duration"
                       loader={loader?.jobFields.public}
+                      errorHandler={errorHandler}
                     />
-                    {/* <p>{errMsg}</p> */}
+                    {props?.values.public === "" && (
+                      <p>{errMsg.jobFields.public}</p>
+                    )}
                   </Form>
                 );
               }}
@@ -281,7 +307,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Offer this job to individual input */}
                     <JobFieldInput
                       label="Offer this job to individual"
@@ -292,8 +318,11 @@ function JobListPopout({ details, onClose, situation }) {
                       inputHandler={props?.handleChange}
                       btnText="Send Offer to Individual"
                       loader={loader?.jobFields.individual}
+                      errorHandler={errorHandler}
                     />
-                    {/* <p>{errMsg}</p> */}
+                    {props?.values.individual === "" && (
+                      <p>{errMsg.jobFields.individual}</p>
+                    )}
                   </Form>
                 );
               }}
@@ -306,7 +335,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Offer this job to your group input */}
                     <JobFieldInput
                       label="Offer this job to your Group"
@@ -316,13 +345,15 @@ function JobListPopout({ details, onClose, situation }) {
                       btnText="Send Order to Group"
                       optionText="Group"
                       loader={loader?.jobFields.group}
+                      errorHandler={errorHandler}
                     />
-                    {/* <p>{errMsg}</p> */}
+                    {props?.values.group === "" && (
+                      <p>{errMsg.jobFields.group}</p>
+                    )}
                   </Form>
                 );
               }}
             </Formik>
-            
           </div>
           {/* END OF ACTION SECTION */}
         </div>
@@ -346,11 +377,12 @@ const JobFieldInput = ({
   btnText,
   parentClass,
   optionText,
+  errorHandler,
   loader,
   data,
 }) => {
   return (
-    <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
+    <div className="field w-full p-3 mb-2 bg-red-50 rounded-md">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
@@ -421,6 +453,7 @@ const JobFieldInput = ({
         <button
           type="submit"
           name={inputName}
+          onClick={errorHandler}
           className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md"
         >
           {loader ? <LoadingSpinner size={5} /> : btnText}

From 9c00badcf6b35dc5c62454d85c8afc91747c2d11 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Tue, 30 May 2023 01:42:36 +0100
Subject: [PATCH 2/4] .

---
 src/assets/images/qr-sample.png               | Bin 0 -> 3145 bytes
 src/components/AddJob/AddJob.jsx              |  10 ---
 src/components/FamilyAcc/FamilyManageTabs.jsx |  19 +++++-
 src/components/jobPopout/EditJobPopout.jsx    |  57 +++++++++++++-----
 src/components/jobPopout/JobListPopout.jsx    |  38 ++++++++----
 src/index.css                                 |   4 ++
 6 files changed, 88 insertions(+), 40 deletions(-)
 create mode 100644 src/assets/images/qr-sample.png

diff --git a/src/assets/images/qr-sample.png b/src/assets/images/qr-sample.png
new file mode 100644
index 0000000000000000000000000000000000000000..e39f3cad5d3827a3e822b979e48cdabd7d8761b7
GIT binary patch
literal 3145
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
JR_!>J^KaIBA{qby

literal 0
HcmV?d00001

diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx
index bac4931..7bda2ad 100644
--- a/src/components/AddJob/AddJob.jsx
+++ b/src/components/AddJob/AddJob.jsx
@@ -36,16 +36,6 @@ const validationSchema = Yup.object().shape({
     .required("Timeline is required"),
 });
 
-// let initialValues = {
-//   // initial values for formik
-//   country: "NG",
-//   price: 0,
-//   title: "",
-//   description: "",
-//   job_detail: "",
-//   timeline_days: "",
-// };
-
 function AddJob() {
   const ApiCall = new usersService();
   const navigate = useNavigate();
diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx
index c17f860..355708c 100644
--- a/src/components/FamilyAcc/FamilyManageTabs.jsx
+++ b/src/components/FamilyAcc/FamilyManageTabs.jsx
@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import profile from "../../assets/images/profile-info-profile.png";
+import qrSample from "../../assets/images/qr-sample.png";
 import usersService from "../../services/UsersService";
 import FamilyTasks from "./FamilyTasks";
 
@@ -99,7 +100,7 @@ export default function FamilyManageTabs({
                 accountDetails={accountDetails}
               />
             </div>
-            <div className="col-span-3 p-6 h-full w-full">
+            <div className="col-span-3 justify-self-end h-full w-full">
               <div className="flex flex-col w-full">
                 <ul className="flex-[0.1] flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
                   {tabs.map(({ name, id }) => (
@@ -213,7 +214,9 @@ function ProfileInfo({
 
 function Account({ familyDetails }) {
   return (
-    <div className="w-full lg:min-h-[400px] h-full flex items-center justify-center">
+    <div className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center">
+      <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
+        <div className="flex items-center justify-around h-[380px]">
       <div className="flex flex-col">
         <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
           Username: <span className="ml-2 normal-case">{familyDetails?.username}</span>
@@ -222,6 +225,18 @@ function Account({ familyDetails }) {
           Pin: <span className="ml-2 normal-case">{familyDetails?.pin}</span>
         </h2>
       </div>
+
+      <span className="text-5xl text-gray-400 opacity-20 font-bold">or</span>
+
+<div className="">
+  <p className="text-sm tracking-wide   text-dark-gray dark:text-white">scan the code from mobile app</p>
+<img src={qrSample} alt="qr-sample" className="h-[200px] w-[200px]" />
+</div>
+        </div>
+      <div className="h-[50px] w-full flex justify-center items-center">
+        <button className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center">Print</button>
+      </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx
index a65e54f..8801227 100644
--- a/src/components/jobPopout/EditJobPopout.jsx
+++ b/src/components/jobPopout/EditJobPopout.jsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
+import { Field, Form, Formik } from "formik";
 import * as Yup from "yup";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -245,20 +245,34 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
                     </div>
 
                     <div className="field w-full mb-6">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Timeline"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass=" input-curve lg border border-[#dce4e9]"
-                        type="text"
-                        name="timeline_days"
-                        spanTag=" - Expected duration of this task"
-                        // placeholder="Please Enter Detail Description of Job"
-                        value={props.values.timeline_days}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                      />
+                    <div 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 block"
+                        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"
+                      value={props.values.timeline_days}
+                    >
+                      <option value="">Select Duration</option>
+                      {publicArray.map(({ name, duration }, idx) => (
+                        <option
+                          className="text-slate-500 text-lg"
+                          value={duration}
+                        >
+                          {name}
+                        </option>
+                      ))}
+                    </Field>
                       {props.errors.timeline_days &&
                         props.touched.timeline_days && (
                           <p className="text-sm text-red-500">
@@ -316,3 +330,16 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
 };
 
 export default EditJobPopOut;
+
+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" },
+];
diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 507222d..0933920 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -168,7 +168,7 @@ function JobListPopout({ details, onClose, situation }) {
   };
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
+    <ModalCom action={onClose} situation={situation} className="job-popup">
       <div className="logout-modal-wrapper lw-[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-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
@@ -264,9 +264,12 @@ function JobListPopout({ details, onClose, situation }) {
                       loader={loader?.jobFields.family}
                       errorHandler={errorHandler}
                     />
-                    {props?.values.family === "" && (
-                      <p>{errMsg.jobFields.family}</p>
-                    )}
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.family === "" && (
+                        <span>{errMsg.jobFields.family}</span>
+                      )}
+                    </p>{" "}
                   </Form>
                 );
               }}
@@ -292,9 +295,12 @@ function JobListPopout({ details, onClose, situation }) {
                       loader={loader?.jobFields.public}
                       errorHandler={errorHandler}
                     />
-                    {props?.values.public === "" && (
-                      <p>{errMsg.jobFields.public}</p>
-                    )}
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.public === "" && (
+                        <span>{errMsg.jobFields.public}</span>
+                      )}
+                    </p>{" "}
                   </Form>
                 );
               }}
@@ -320,9 +326,12 @@ function JobListPopout({ details, onClose, situation }) {
                       loader={loader?.jobFields.individual}
                       errorHandler={errorHandler}
                     />
-                    {props?.values.individual === "" && (
-                      <p>{errMsg.jobFields.individual}</p>
-                    )}
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.individual === "" && (
+                        <span>{errMsg.jobFields.individual}</span>
+                      )}
+                    </p>{" "}
                   </Form>
                 );
               }}
@@ -347,9 +356,12 @@ function JobListPopout({ details, onClose, situation }) {
                       loader={loader?.jobFields.group}
                       errorHandler={errorHandler}
                     />
-                    {props?.values.group === "" && (
-                      <p>{errMsg.jobFields.group}</p>
-                    )}
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.group === "" && (
+                        <span>{errMsg.jobFields.group}</span>
+                      )}
+                    </p>
                   </Form>
                 );
               }}
diff --git a/src/index.css b/src/index.css
index 5a4e0ee..6b1a5b1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -787,4 +787,8 @@ TODO: Responsive ===========================
 
 .edit-popup{
   top: 75px;
+}
+
+.job-popup{
+  top: 55px;
 }
\ No newline at end of file

From 42c3676bcf034c2a45c1ff8308de4878916a327c Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Tue, 30 May 2023 02:11:51 +0100
Subject: [PATCH 3/4] .

---
 src/components/FamilyAcc/FamilyManageTabs.jsx | 81 +++++++++++++++----
 1 file changed, 64 insertions(+), 17 deletions(-)

diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx
index 355708c..fc32640 100644
--- a/src/components/FamilyAcc/FamilyManageTabs.jsx
+++ b/src/components/FamilyAcc/FamilyManageTabs.jsx
@@ -131,7 +131,12 @@ export default function FamilyManageTabs({
                           <LoadingSpinner size="8" color="sky-blue" />
                         ) : (
                           <>
-                            {name === "Tasks" && <FamilyTasks className={className} loader={loader}/>}
+                            {name === "Tasks" && (
+                              <FamilyTasks
+                                className={className}
+                                loader={loader}
+                              />
+                            )}
                             {name === "Account" && (
                               <Account familyDetails={familyDetails} />
                             )}
@@ -213,29 +218,71 @@ function ProfileInfo({
 }
 
 function Account({ familyDetails }) {
+  const handlePrint = () => {
+    const printableContent = `
+      <html>
+        <head>
+          <style>
+            /* Add your desired styles here */
+          </style>
+        </head>
+        <body>
+        <div class"update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow"></div>
+          <h1>Family member details</h1>
+          <p>Username: ${familyDetails?.username}</p>
+          <p>Password: ${familyDetails?.pin}</p>
+          <img src="${qrSample}" alt="QR Code" />
+        </body>
+      </html>
+    `;
+
+    const printWindow = window.open('', '', 'width=800,height=700');
+    printWindow.document.open();
+    printWindow.document.write(printableContent);
+    printWindow.document.close();
+
+    printWindow.onload = () => {
+      printWindow.print();
+    };
+  };
+
   return (
     <div className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center">
       <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
         <div className="flex items-center justify-around h-[380px]">
-      <div className="flex flex-col">
-        <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-          Username: <span className="ml-2 normal-case">{familyDetails?.username}</span>
-        </h2>
-        <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-          Pin: <span className="ml-2 normal-case">{familyDetails?.pin}</span>
-        </h2>
-      </div>
+          <div className="flex flex-col">
+            <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              Username:{" "}
+              <span className="ml-2 normal-case">
+                {familyDetails?.username}
+              </span>
+            </h2>
+            <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              Pin:{" "}
+              <span className="ml-2 normal-case">{familyDetails?.pin}</span>
+            </h2>
+          </div>
 
-      <span className="text-5xl text-gray-400 opacity-20 font-bold">or</span>
+          <span className="text-5xl text-gray-400 opacity-20 font-bold">
+            or
+          </span>
 
-<div className="">
-  <p className="text-sm tracking-wide   text-dark-gray dark:text-white">scan the code from mobile app</p>
-<img src={qrSample} alt="qr-sample" className="h-[200px] w-[200px]" />
-</div>
+          <div className="max-w-[200px]">
+            <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
+              Scan the code from mobile app
+            </p>
+            <img
+              src={qrSample}
+              alt="qr-sample"
+              className="h-[200px] w-[200px]"
+            />
+          </div>
+        </div>
+        <div className="h-[50px] w-full flex justify-center items-center">
+          <button className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center" onClick={handlePrint}>
+            Print
+          </button>
         </div>
-      <div className="h-[50px] w-full flex justify-center items-center">
-        <button className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center">Print</button>
-      </div>
       </div>
     </div>
   );

From f5bf5997d605ddfc609d60f3df1a86f0a738dec5 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Tue, 30 May 2023 02:20:58 +0100
Subject: [PATCH 4/4] addded email fix

---
 src/components/jobPopout/JobListPopout.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 0933920..caedf82 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -451,7 +451,7 @@ const JobFieldInput = ({
           fieldClass="px-6"
           label={label}
           labelClass="tracking-wide"
-          type="text"
+          type="email"
           name={inputName}
           placeholder={placeholder}
           value={value}