Implementing the Update api for branches.

src/components/ServiceProject/ServiceProjectBranch/ManageBranch.jsx

@@ -21,6 +21,15 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
     error: requestError,
   } = useBranchDetails(BranchToEdit);
 
+  const [contacts, setContacts] = React.useState([
+    {
+      contactPerson: "",
+      designation: "",
+      contactEmails: [""],
+      contactNumbers: [""]
+    }
+  ]);
+
   const { projectId } = useParams();
   const schema = BranchSchema();
   const {
@@ -49,14 +58,22 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
       reset({
         branchName: data.branchName || "",
         projectId: data.project?.id || projectId || "",
-        contactInformation: data.contactInformation || "",
         address: data.address || "",
         branchType: data.branchType || "",
         googleMapUrl: data.googleMapUrl || "",
       });
+
+      if (data.contactInformation) {
+        try {
+          setContacts(JSON.parse(data.contactInformation));
+        } catch {
+          setContacts([]);
+        }
+      }
     }
   }, [data, reset]);
 
+
   const { mutate: CreateServiceBranch, isPending: createPending } =
     useCreateBranch(() => {
       handleClose();
@@ -65,19 +82,23 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
     handleClose()
   );
 
-  const onSubmit = (fromdata) => {
+  const onSubmit = (formdata) => {
     let payload = {
-      ...fromdata,
+      ...data,
+      ...formdata,
       projectId,
+      contactInformation: JSON.stringify(contacts), // ← important
     };
+
     if (BranchToEdit) {
-      const editPayload = { ...payload, id: data.id };
+      ServiceBranchUpdate({ id: data.id, payload });
-      ServiceBranchUpdate({ id: data.id, payload: editPayload });
     } else {
       CreateServiceBranch(payload);
     }
   };
 
+
+
   return (
     <div className="container p-3">
       <h5 className="m-0">
@@ -100,26 +121,6 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
               <small className="danger-text">{errors.branchName.message}</small>
             )}
           </div>
-          <div className="col-md-6">
-            <Label htmlFor="contactInformation" className="form-label" required>
-              Contact Number
-            </Label>
-            <input
-              type="text"
-              id="contactInformation"
-              className="form-control form-control-sm"
-              {...register("contactInformation")}
-            />
-            {errors.contactInformation && (
-              <small className="danger-text">
-                {errors.contactInformation.message}
-              </small>
-            )}
-          </div>
-        </div>
-
-        <div className="row my-2 text-start">
-
           <div className="col-md-6">
             <Label htmlFor="branchType" className="form-label" required>
               Branch Type
@@ -134,8 +135,13 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
               <small className="danger-text">{errors.branchType.message}</small>
             )}
           </div>
+        </div>
+
+        <div className="row my-2 text-start">
+
+
           <div className="col-md-6">
-            <Label htmlFor="googleMapUrl" className="form-label" required>
+            <Label htmlFor="googleMapUrl" className="form-label">
               Google Map URL
             </Label>
             <input
@@ -152,6 +158,169 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
           </div>
         </div>
 
+        <div className="row my-2 text-start">
+          <div className="col-12">
+            <Label className="form-label" required>Contact Persons</Label>
+
+            {contacts.map((item, index) => (
+              <div key={index} className="border rounded p-2 mb-3">
+
+                {/* Contact Person + Designation */}
+                <div className="row mb-2">
+                  <div className="col-md-4">
+                    <input
+                      type="text"
+                      placeholder="Contact Person"
+                      className="form-control form-control-sm"
+                      value={item.contactPerson}
+                      onChange={(e) => {
+                        const list = [...contacts];
+                        list[index].contactPerson = e.target.value;
+                        setContacts(list);
+                      }}
+                    />
+                  </div>
+
+                  <div className="col-md-4">
+                    <input
+                      type="text"
+                      placeholder="Designation"
+                      className="form-control form-control-sm"
+                      value={item.designation}
+                      onChange={(e) => {
+                        const list = [...contacts];
+                        list[index].designation = e.target.value;
+                        setContacts(list);
+                      }}
+                    />
+                  </div>
+
+                  {/* Remove entire contact */}
+                  <div className="col-md-2 d-flex align-items-center">
+                    <i
+                      className="bx bx-trash text-danger cursor-pointer"
+                      onClick={() =>
+                        setContacts(contacts.filter((_, i) => i !== index))
+                      }
+                    ></i>
+                  </div>
+                </div>
+
+                {/* Numbers Section */}
+                <Label className="form-label">Contact Numbers</Label>
+
+                {item.contactNumbers.map((num, numIndex) => (
+                  <div key={numIndex} className="d-flex gap-2 mb-2 align-items-center">
+
+                    <input
+                      type="text"
+                      placeholder="Number"
+                      className="form-control form-control-sm"
+                      maxLength={10}
+                      value={num}
+                      onChange={(e) => {
+                        const value = e.target.value.replace(/\D/g, ""); // remove non-digit characters
+                        const list = [...contacts];
+                        list[index].contactNumbers[numIndex] = value;
+                        setContacts(list);
+                      }}
+                    />
+
+                    {/* Show PLUS only on last row */}
+                    {numIndex === item.contactNumbers.length - 1 ? (
+                      <i
+                        className="bx bx-plus-circle text-primary cursor-pointer fs-5"
+                        onClick={() => {
+                          const list = [...contacts];
+                          list[index].contactNumbers.push("");
+                          setContacts(list);
+                        }}
+                      ></i>
+                    ) : (
+                      <i
+                        className="bx bx-minus-circle text-danger cursor-pointer fs-5"
+                        onClick={() => {
+                          const list = [...contacts];
+                          list[index].contactNumbers.splice(numIndex, 1);
+                          setContacts(list);
+                        }}
+                      ></i>
+                    )}
+
+                  </div>
+                ))}
+
+                <hr />
+
+                {/* Emails Section */}
+                <Label className="form-label">Contact Emails</Label>
+
+                {item.contactEmails.map((email, emailIndex) => (
+                  <div key={emailIndex} className="d-flex gap-2 mb-2 align-items-center">
+
+                    <input
+                      type="email"
+                      placeholder="Email"
+                      className="form-control form-control-sm"
+                      value={email}
+                      onChange={(e) => {
+                        const list = [...contacts];
+                        list[index].contactEmails[emailIndex] = e.target.value;
+                        setContacts(list);
+                      }}
+                    />
+
+                    {/* Show PLUS only on the last row */}
+                    {emailIndex === item.contactEmails.length - 1 ? (
+                      <i
+                        className="bx bx-plus-circle text-primary cursor-pointer fs-5"
+                        onClick={() => {
+                          const list = [...contacts];
+                          list[index].contactEmails.push("");
+                          setContacts(list);
+                        }}
+                      ></i>
+                    ) : (
+                      <i
+                        className="bx bx-minus-circle text-danger cursor-pointer fs-5"
+                        onClick={() => {
+                          const list = [...contacts];
+                          list[index].contactEmails.splice(emailIndex, 1);
+                          setContacts(list);
+                        }}
+                      ></i>
+                    )}
+
+                  </div>
+                ))}
+
+
+              </div>
+            ))}
+
+
+            <button
+              type="button"
+              className="btn btn-sm btn-primary mt-2"
+              onClick={() =>
+                setContacts([
+                  ...contacts,
+                  {
+                    contactPerson: "",
+                    designation: "",
+                    contactEmails: [""],   // ← important
+                    contactNumbers: [""],  // ← important
+                  },
+                ])
+              }
+            >
+              <i className="bx bx-plus"></i> Add Contact
+            </button>
+
+          </div>
+        </div>
+
+
         <div className="row my-2 text-start">
 
           <div className="col-12">

src/components/ServiceProject/ServiceProjectSchema.jsx

@@ -138,11 +138,7 @@ export const BranchSchema = () =>
       .trim()
       .min(1, { message: "Branch Name is required" }),
 
-    contactInformation: z
+    contactInformation: z.string().optional(),
-      .string()
-      .trim()
-      .min(1, { message: "Contact Information is required" }),
-
     address: z
       .string()
       .trim()
@@ -155,8 +151,6 @@ export const BranchSchema = () =>
 
     googleMapUrl: z
       .string()
-      .trim()
-      .url({ message: "Enter a valid Google Map URL" }),
   });
 
 export const defaultBranches = {