Merge pull request #60 from vaxepi/ocv-tuning

Ocv tuning

src/pages/OcvCampaign/OcvBeneficiaryManagement/DoseDetailsPage.tsx

@@ -5,17 +5,20 @@ import useOcvManagement from "../../../apis/useOcvManagement.tsx";
 import DangerAlert from "../../../components/atoms/DangerAlert.tsx";
 import Loader from "../../../components/atoms/Loader.tsx";
 import ScrollToTop from "../../../components/atoms/ScrollToTop.tsx";
+import SubmitBtn from "../../../components/atoms/SubmitBtn.tsx";
 import { CONSTANT_TEXT } from "../../../constant/text.ts";
 import { useQueryParams } from "../../../hooks/useQueryParams.tsx";
 import Sidebar from "../../../layouts/Sidebar.tsx";
 import { calculateFutureDate } from "../../../utils/dateFunctions.ts";
+import AddMoreBeneficiaryFormModal from "../components/AddMoreBeneficiaryFormModal.tsx";
 import EditBeneficiaryFormModal from "../components/EditBeneficiaryFormModal.tsx";
 
 const DoseDetailsPage = () => {
   const [isModalOpen, setModalOpen] = useState(false);
-  const { id } = useParams();
+  const [addMoreModal, setAddMoreModal] = useState(false);
   const [selectedData, setSelectedData] = useState(null);
   const { ocvDoseById } = useOcvManagement();
+  const { id } = useParams();
   const { dose } = useQueryParams();
   const { data, isLoading, error } = useQuery({
     queryFn: ({ queryKey }) => {
@@ -47,8 +50,12 @@ const DoseDetailsPage = () => {
           />
           {data?.connectedList && data.connectedList.length > 0 && (
             <div className="space-y-3">
-              <div className="bg-gray-100 p-2 border rounded-md shadow-sm text-center text-lg">
+              <div className="bg-gray-100 p-2 border rounded-md shadow-sm flex justify-between items-center text-lg">
                 <p>Connected Beneficiary</p>
+                <SubmitBtn
+                  title="Add More Beneficiary"
+                  click={() => setAddMoreModal(true)}
+                />
               </div>
               {data.connectedList.map(
                 (item: any, index: React.Key | null | undefined) => (
@@ -57,7 +64,7 @@ const DoseDetailsPage = () => {
                     data={{
                       parent: { ...item },
                     }}
-                    mainData={item}
+                    mainData={data}
                     doseLabel={item?.vaccineUpdateStatus}
                     handleModal={openModalFn}
                   />
@@ -76,6 +83,16 @@ const DoseDetailsPage = () => {
               }}
             />
           )}
+
+          {addMoreModal && (
+            <AddMoreBeneficiaryFormModal
+              isOpen={addMoreModal}
+              selectedData={data?.parent}
+              onClose={() => {
+                setAddMoreModal(false);
+              }}
+            />
+          )}
         </div>
       )}
     </Sidebar>
@@ -95,6 +112,8 @@ interface ParentInfo {
   fatherName?: string;
   motherName?: string;
   vaccinatedDate?: string;
+  relation?: string;
+  connected?: string;
 }
 
 interface ParentInfoCardProps {
@@ -111,9 +130,13 @@ const ParentInfoCard: React.FC<ParentInfoCardProps> = ({
   data,
   doseLabel,
   handleModal,
+  mainData,
 }) => {
   const { parent } = data;
-
+  console.log(mainData?.parent?.firstName);
+  const isChildren = !!parent?.connected;
+  console.log(parent);
+  console.log(isChildren);
   return (
     <div className="bg-white px-3 py-3.5 pl-5 rounded-2xl shadow-sm">
       <div className="space-y-3">
@@ -153,15 +176,33 @@ const ParentInfoCard: React.FC<ParentInfoCardProps> = ({
             <p>Mobile Number: {parent?.mobile}</p>
             <p>Email: {parent?.email}</p>
           </div>
-          <div>
-            <p>NID: {parent?.nid}</p>
-            <p>BRN: {parent?.brn}</p>
-            <p>Passport: {parent?.passport}</p>
-          </div>
-          <div>
-            <p>Father Name: {parent?.fatherName}</p>
-            <p>Mother Name: {parent?.motherName}</p>
-          </div>
+          <>
+            {!isChildren ? (
+              <>
+                <div>
+                  <p>NID: {parent?.nid}</p>
+                  <p>BRN: {parent?.brn}</p>
+                  <p>Passport: {parent?.passport}</p>
+                </div>
+                <div>
+                  <p>Father Name: {parent?.fatherName}</p>
+                  <p>Mother Name: {parent?.motherName}</p>
+                </div>
+              </>
+            ) : (
+              <>
+                <div>
+                  <p>NID: {parent?.nid}</p>
+                  {parent?.relation && mainData?.parent?.firstName && (
+                    <p>
+                      Relation :{" "}
+                      {`${parent?.relation} of ${mainData?.parent?.firstName}`}
+                    </p>
+                  )}
+                </div>
+              </>
+            )}
+          </>
         </div>
 
         {/* Dose Information */}

src/pages/OcvCampaign/components/AddMoreBeneficiaryFormModal.tsx

@@ -0,0 +1,137 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Form, Formik } from "formik";
+import toast from "react-hot-toast";
+import { useParams } from "react-router-dom";
+import useOcvManagement from "../../../apis/useOcvManagement.tsx";
+import DangerAlert from "../../../components/atoms/DangerAlert.tsx";
+import SubmitBtn from "../../../components/atoms/SubmitBtn.tsx";
+import FormikSelect from "../../../components/molecules/FormikSelect.tsx";
+import FormikText from "../../../components/molecules/FormikText.tsx";
+import Modal from "../../../components/molecules/Modal.tsx";
+import { OCV_RELATIONSHIP_OPTIONS } from "../../../constant/OcvRelationship.ts";
+import { CONSTANT_TEXT } from "../../../constant/text.ts";
+import { YUP } from "../../../constant/yup.ts";
+import { useQueryParams } from "../../../hooks/useQueryParams.tsx";
+
+interface AddMoreBeneficiaryFormModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedData: any;
+}
+
+const AddMoreBeneficiaryFormModal: React.FC<
+  AddMoreBeneficiaryFormModalProps
+> = ({ isOpen, onClose, selectedData }) => {
+  const { saveOcvDoses } = useOcvManagement();
+  const queryClient = useQueryClient();
+  const { id } = useParams();
+  const { dose } = useQueryParams();
+
+  const { isLoading, error, mutateAsync } = useMutation(saveOcvDoses, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(["DoseDetails", id, dose]);
+      toast.success("Beneficiary Added Successfully!");
+    },
+  });
+
+  const schema = YUP.object().shape({
+    vaccinatedDate: YUP.date().required("Vaccinated date is required"),
+    email: YUP.string().email("Invalid email format").optional(),
+    mobile: YUP.string()
+      .required("Phone number required")
+      .min(
+        11,
+        "মোবাইল নম্বরে ১১টি সংখ্যা থাকতে হবে এবং 01 সংখ্যা দিয়ে শুরু হতে হবে"
+      )
+      .matches(CONSTANT_TEXT.bangladeshiPhoneNumberRegExp, "Invalid number"),
+
+    passport: YUP.string()
+      .matches(
+        CONSTANT_TEXT.bangladeshiPassportRegExp,
+        "পাসপোর্টে কমপক্ষে একটি অক্ষর, একটি সংখ্যা থাকতে হবে এবং কমপক্ষে ৮ অক্ষর দীর্ঘ হতে হবে"
+      )
+      .optional(),
+    firstName: YUP.string().required("Name is required"),
+    relation: YUP.string().required("Relation is required"),
+  });
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Add More Beneficiary">
+      <Formik
+        initialValues={{
+          division: selectedData?.division ?? "",
+          district: selectedData?.district ?? "",
+          upazila: selectedData?.upazila ?? "",
+          paurasava: selectedData?.paurasava ?? "",
+          union_name: selectedData?.union_name ?? "",
+          ward: selectedData?.ward ?? "",
+          dob: selectedData?.dob ?? "",
+          type: selectedData?.nid ? "nid" : selectedData?.brn ? "brn" : "",
+          brn: selectedData?.brn ?? "",
+          village: selectedData?.village ?? "",
+          hhNumber: selectedData?.hhNumber ?? "",
+          date: selectedData?.date ?? "",
+          motherNid: selectedData?.motherNid ?? "",
+          nid: selectedData?.nid ?? "",
+          lastName: selectedData?.lastName ?? "",
+          divisionId: selectedData?.divisionId ?? "",
+          districtId: selectedData?.districtId ?? "",
+          upazilaId: selectedData?.upazilaId ?? "",
+          paurasavaId: selectedData?.paurasavaId ?? "",
+          unionId: selectedData?.unionId ?? "",
+          wardId: selectedData?.wardId ?? "",
+          connected: selectedData?.nid
+            ? selectedData?.nid
+            : selectedData?.brn
+            ? selectedData?.brn
+            : "",
+          firstNameBN: "",
+          vaccinatedDate: "",
+          email: "",
+          mobile: "",
+          passport: "",
+          firstName: "",
+          relation: "",
+        }}
+        validationSchema={schema}
+        onSubmit={(values) => {
+          mutateAsync({
+            ...values,
+            firstNameBN: values.firstName,
+            lastName: values?.firstName,
+          });
+        }}
+      >
+        {() => {
+          return (
+            <fieldset disabled={isLoading}>
+              <Form className="space-y-8">
+                <DangerAlert error={error} />
+                <FormikSelect
+                  label="Relation"
+                  isRequired
+                  name="relation"
+                  options={OCV_RELATIONSHIP_OPTIONS}
+                />
+                <FormikText label="Name" name="firstName" />
+                <FormikText label="Email" name="email" />
+                <FormikText label="Mobile" name="mobile" />
+                <FormikText label="Passport" name="passport" />
+                <FormikText
+                  label="Vaccinated Date"
+                  type="date"
+                  name="vaccinatedDate"
+                  isRequired
+                />
+                <div className="flex justify-around items-center gap-4">
+                  <SubmitBtn title="Add new" loading={isLoading} />
+                </div>
+              </Form>
+            </fieldset>
+          );
+        }}
+      </Formik>
+    </Modal>
+  );
+};
+
+export default AddMoreBeneficiaryFormModal;

src/pages/OcvCampaign/components/EditBeneficiaryFormModal.tsx

@@ -31,7 +31,7 @@ const EditBeneficiaryFormModal: React.FC<EditBeneficiaryFormModalProps> = ({
     onSuccess: () => {
       onClose();
       navigate("/ocv-campaign/ocv-beneficiary-management");
-      toast.success("Banifictiary  Updated Successfully!");
+      toast.success("Beneficiary Updated Successfully!");
     },
   });