.

src/components/jobPopout/JobListPopout.jsx

@@ -2,8 +2,30 @@ import React, { useState } from "react";
 import Detail from "./popoutcomponent/Detail";
 import ModalCom from "../Helpers/ModalCom";
 import InputCom from "../Helpers/Inputs/InputCom/index";
+import { Form, Formik, Field } from "formik";
+import * as Yup from "yup";
+
+const validationSchema = Yup.object().shape({
+  family: Yup.string().required("Please assign a family"),
+  public: Yup.string(),
+  individual: Yup.string()
+    .email("Invalid email format")
+    .matches(
+      /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
+      "Invalid email format"
+    )
+    .required("Email is required"),
+  group: Yup.string(),
+});
 
 function JobListPopout({ details, onClose, situation }) {
+  let initialValues = {
+    family: [],
+    public: "",
+    individual: "",
+    group: "",
+  };
+
   let [inputs, setInputs] = useState({
     family: "",
     public: "",
@@ -92,41 +114,55 @@ function JobListPopout({ details, onClose, situation }) {
 
           {/* ACTION SECTION */}
           <div className="p-4 w-full md:w-2/4 h-full">
-            {/* Assign to Family */}
+            <Formik
-            <JobFieldInput
+              initialValues={initialValues}
-              label="Assign to family"
+              validationSchema={validationSchema}
-              inputName="family"
+            >
-              inputHandler={handleInputChange}
+              {(props) => {
-              value={inputs.family}
+                return (
-              btnText="Assign to family"
+                  <>
-            />
+                    {/* Assign to Family */}
+                    <JobFieldInput
+                      label="Assign to family"
+                      select
+                      inputName="family"
+                      value={props?.family}
+                      btnText="Assign to family"
+                      optionText="family"
+                    />
 
-            {/* Offer this job to public input */}
+                    {/* Offer this job to public input */}
-            <JobFieldInput
+                    <JobFieldInput
-              label="Offer this job to public"
+                      label="Offer this job to public"
-              inputName="public"
+                      select
-              inputHandler={handleInputChange}
+                      inputName="public"
-              value={inputs.public}
+                      value={props?.public}
-              btnText="Show Task to Public"
+                      btnText="Show Task to Public"
-            />
+                      optionText="Public"
+                    />
 
-            {/* Offer this job to individual input */}
+                    {/* Offer this job to individual input */}
-            <JobFieldInput
+                    <JobFieldInput
-              label="Offer this job to individual"
+                      label="Offer this job to individual"
-              inputName="individual"
+                      input
-              inputHandler={handleInputChange}
+                      inputName="individual"
-              value={inputs.individual}
+                      value={props?.individual}
-              btnText="Send Offer to Individual"
+                      btnText="Send Offer to Individual"
-            />
+                    />
 
-            {/* Offer this job to your group input */}
+                    {/* Offer this job to your group input */}
-            <JobFieldInput
+                    <JobFieldInput
-              label="Offer this job to your Group"
+                      label="Offer this job to your Group"
-              inputName="group"
+                      select
-              inputHandler={handleInputChange}
+                      inputName="group"
-              value={inputs.group}
+                      value={props?.group}
-              btnText="Send Order to Group"
+                      btnText="Send Order to Group"
-            />
+                      optionText="Group"
+                    />
+                  </>
+                );
+              }}
+            </Formik>
           </div>
           {/* END OF ACTION SECTION */}
         </div>
@@ -137,18 +173,64 @@ function JobListPopout({ details, onClose, situation }) {
 
 export default JobListPopout;
 
-const JobFieldInput = ({ value, inputHandler, inputName, label, btnText }) => (
+const JobFieldInput = ({
+  value,
+  inputHandler,
+  inputName,
+  inputClass,
+  input,
+  select,
+  label,
+  labelClass,
+  btnText,
+  parentClass,
+  optionText
+}) => (
   <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
-    <InputCom
+    {select && (
-      fieldClass="px-6"
+      <>
-      label={label}
+        <div className={`input-com ${parentClass}`}>
-      labelClass="tracking-wide"
+          <div
-      type="text"
+            className={`flex items-center justify-start mb-2.5 ${labelClass}`}
-      name={inputName}
+          >
-      placeholder=""
+            {label && (
-      value={value}
+              <label
-      inputHandler={inputHandler}
+                className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
-    />
+                htmlFor={inputName}
+              >
+                {label}
+              </label>
+            )}
+          </div>
+          <div
+            className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[1rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
+          >
+            <Field
+              component="select"
+              name={inputName}
+              className={`input-field placeholder:text-base text-dark-gray w-full h-full bg-white outline-none px-2`}
+            >
+              <option value="">{optionText}</option>
+              {value && <option value={value}></option>}
+            </Field>
+          </div>
+        </div>
+      </>
+    )}
+
+    {input && (
+      <InputCom
+        fieldClass="px-6"
+        label={label}
+        labelClass="tracking-wide"
+        type="text"
+        name={inputName}
+        placeholder=""
+        value={value}
+        inputHandler={inputHandler}
+        inputBg="bg-white"
+      />
+    )}
     {/* btn */}
     <div className="my-1 flex justify-end items-center">
       <button className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md">
@@ -156,4 +238,4 @@ const JobFieldInput = ({ value, inputHandler, inputName, label, btnText }) => (
       </button>
     </div>
   </div>
-);
+);