added CreateActivity and EditActivity components.

src/components/master/CreateActivity.jsx

@@ -1,25 +1,29 @@
-import React,{useState,useEffect} from 'react'
+import React, { useState, useEffect } from "react";
-import {useFieldArray, useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from "react-hook-form";
-import { z } from 'zod';
+import { z } from "zod";
-import {zodResolver} from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
 
-import { MasterRespository } from '../../repositories/MastersRepository';
+import { MasterRespository } from "../../repositories/MastersRepository";
-import { clearApiCacheKey } from '../../slices/apiCacheSlice';
+import { clearApiCacheKey } from "../../slices/apiCacheSlice";
-import { getCachedData,cacheData } from '../../slices/apiDataManager';
+import { getCachedData, cacheData } from "../../slices/apiDataManager";
-import showToast from '../../services/toastService';
+import showToast from "../../services/toastService";
 
 const schema = z.object({
   activityName: z.string().min(1, { message: "Role is required" }),
   unitOfMeasurement: z.string().min(1, { message: "Description is required" }),
   checkList: z
-  .array(z.string().min(1, { message: "Checklist item cannot be empty" }))
+    .array(
+      z.object({
+        check: z.string().min(1, { message: "Checklist item cannot be empty" }),
+        isMandatory: z.boolean().default(false),
+        id: z.any().default(0),
+      })
+    )
     .optional(),
 });
 
-const CreateActivity = ({onClose}) =>
+const CreateActivity = ({ onClose }) => {
-{
+  const [isLoading, setIsLoading] = useState(false);
-
-  const [ isLoading, setIsLoading ] = useState( false )
 
   const {
     register,
@@ -34,129 +38,179 @@ const CreateActivity = ({onClose}) =>
   } = useForm({
     resolver: zodResolver(schema),
     defaultValues: {
-      activityName: '',
+      activityName: "",
-      unitOfMeasurement: '',
+      unitOfMeasurement: "",
       checkList: [],
     },
   });
 
-  // Setting up field array for checkList (dynamic fields)
+
   const {
     fields: checkListItems,
     append,
     remove,
   } = useFieldArray({
     control,
-    name: 'checkList',
+    name: "checkList",
   });
 
   // Form submission handler
-  const onSubmit = ( data ) =>
+  const onSubmit = (data) => {
+    console.log(data);
+    setIsLoading(true);
+
+    MasterRespository.createActivity(data)
+      .then( ( resp ) =>
       {
-    console.log(data)
-    setIsLoading(true)
-   
-   
-    MasterRespository.updateActivity(data).then((resp)=>{ 
-      setIsLoading(false)
         
         const cachedData = getCachedData("Activity");
         const updatedData = [ ...cachedData, resp?.data ];
         cacheData("Activity", updatedData);
-      showToast("Activity Added successfully.", "success");
+        showToast("Activity Successfully Added.", "success");
-
+        setIsLoading(false);
-      onClose()
+        handleClose()
-    }).catch((error)=>{
-      showToast(error.message, "error");
-      setIsLoading(false)
       })
+      .catch((error) => {
+        showToast(error.message, "error");
+        setIsLoading(false);
+      });
   };
 
-  // Add a new checklist item
+
   const addChecklistItem = () => {
-    const values = getValues('checkList');
+    const values = getValues("checkList");
     const lastIndex = checkListItems.length - 1;
-
+    if (
-    
+      checkListItems.length > 0 &&
-    if (checkListItems.length > 0 && (!values?.[lastIndex] || values[lastIndex].trim() === '')) {
+      (!values?.[lastIndex] || values[lastIndex].check.trim() === "")
-      setError(`checkList.${lastIndex}`, {
+    ) {
-        type: 'manual',
+      setError(`checkList.${lastIndex}.check`, {
-        message: 'Please fill this checklist item before adding another.',
+        type: "manual",
+        message: "Please fill this checklist item before adding another.",
       });
       return;
     }
-
+    clearErrors(`checkList.${lastIndex}.check`);
-    clearErrors(`checkList.${lastIndex}`); // Clear the error if the input is filled.
+    append({
-    append(''); // Add a new empty checklist input
+      id: 0,
+      check: "",
+      isMandatory: false,
+    });
   };
 
- 
   const removeChecklistItem = (index) => {
     remove(index);
   };
 
-  // Handle checklist item input change
+
   const handleChecklistChange = (index, value) => {
     setValue(`checkList.${index}`, value);
   };
 
-  const handleClose = () =>
+  const handleClose = () => {
-  {
+    reset();
-    reset()
+    onClose();
-    onClose()
+  };
-  }
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
+      <h6>Create Activity</h6>
       <div className="row">
         <div className="col-6">
           <label className="form-label">Activity</label>
           <input
             type="text"
-          {...register('activityName')}
+            {...register("activityName")}
-          className={`form-control form-control-sm ${errors.activityName ? 'is-invalid' : ''}`}
+            className={`form-control form-control-sm ${
+              errors.activityName ? "is-invalid" : ""
+            }`}
           />
-        {errors.activityName && <p className="danger-text">{errors.activityName.message}</p>}
+          {errors.activityName && (
+            <p className="danger-text">{errors.activityName.message}</p>
+          )}
         </div>
 
         <div className="col-6">
           <label className="form-label">Measurement</label>
           <input
             type="text"
-          {...register('unitOfMeasurement')}
+            {...register("unitOfMeasurement")}
-          className={`form-control form-control-sm ${errors.unitOfMeasurement ? 'is-invalid' : ''}`}
+            className={`form-control form-control-sm ${
+              errors.unitOfMeasurement ? "is-invalid" : ""
+            }`}
           />
           {errors.unitOfMeasurement && (
             <p className="danger-text">{errors.unitOfMeasurement.message}</p>
           )}
         </div>
 
-      <div className="col-md-6 text-start">
+        <div className="col-md-12 text-start mt-1">
-        {/* Dynamic checklist items */}
+          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List" }</p>
+          {checkListItems.length > 0 && (
+          <table className="table mt-1  border-0">
+            <thead className="py-0 my-0 table-border-top-0">
+              <tr className="py-1">
+                <th colSpan={2} className="py-1">
+                  <small>Name</small>
+                </th>
+                <th colSpan={2} className="py-1 text-center">
+                  <small>Is Mandatory</small>
+                </th>
+                <th className="text-center py-1">Action</th>
+              </tr>
+            </thead>
+            <tbody className="table-border-bottom-0 ">
               {checkListItems.map((item, index) => (
-          <div key={item.id} className=" align-items-center  my-1">
+                <tr key={index} className="border-top-0">
-            <div className='d-flex align-items-center gap-2'>
+                  <td colSpan={2} className="border-top-0 border-0">
                     <input
-              {...register(`checkList.${index}`)}
+                      className="d-none"
+                      {...register(`checkList.${index}.id`)}
+                    ></input>
+                    <input
+                      {...register(`checkList.${index}.check`)}
                       className="form-control form-control-sm"
                       placeholder={`Checklist item ${index + 1}`}
-              onChange={(e) => handleChecklistChange(index, e.target.value)} // Handle input change
+                      onChange={(e) =>
+                        handleChecklistChange(index, e.target.value)
+                      }
                     />
+                    {errors.checkList?.[index]?.check && (
+                      <small
+                        style={{ fontSize: "10px" }}
+                        className="danger-text"
+                      >
+                        {errors.checkList[index]?.check?.message}
+                      </small>
+                    )}
+                  </td>
+                  <td colSpan={2} className="text-center border-0">
+                    <input
+                      className="form-check-input"
+                      type="checkbox"
+                      {...register(`checkList.${index}.isMandatory`)}
+                      defaultChecked={item.isMandatory}
+                    />
+                  </td>
+                  <td className="text-center border-0">
                     <button
                       type="button"
-              onClick={() => removeChecklistItem(index)}   // Remove button
+                      onClick={() => removeChecklistItem(index)}
                       className="btn btn-xs btn-icon btn-text-secondary"
                     >
-              <span class='icon-base bx bx bx-x'></span>
+                      <i class="bx bxs-minus-circle text-danger"></i>
                     </button>
-           </div>
+                  </td>
-            {errors.checkList?.[index] && (
+                </tr>
-              <p className="danger-text">{errors.checkList[index]?.message}</p>
-            )}
-          </div>
               ))}
-        {/* Add new checklist item */}
+            </tbody>
-        <button type="button" className="btn btn-sm btn-primary mt-2" onClick={addChecklistItem}>
+          </table>
-          + Add Checklist Item
+          )}
+          <button
+            type="button"
+            className="btn btn-xs btn-primary mt-2"
+            onClick={addChecklistItem}
+          >
+            <i class="bx bx-plus-circle"></i>
           </button>
         </div>
 
@@ -174,7 +228,7 @@ const CreateActivity = ({onClose}) =>
         </div>
       </div>
     </form>
-  )
+  );
-}
+};
 
-export default CreateActivity
+export default CreateActivity;

src/components/master/EditActivity.jsx

@@ -1,23 +1,28 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from "react";
-import { useFieldArray, useForm } from 'react-hook-form';
+import { useForm, useFieldArray } from "react-hook-form";
-import { z } from 'zod';
+import { z } from "zod";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
-import {MasterRespository} from '../../repositories/MastersRepository';
+import {MasterRespository} from "../../repositories/MastersRepository";
-import axios from 'axios';
+import showToast from "../../services/toastService";
-import showToast from '../../services/toastService';
+import {getCachedData,cacheData} from "../../slices/apiDataManager";
-import {cacheData, getCachedData} from '../../slices/apiDataManager';
+
 
-// Zod Schema for validation
 const schema = z.object({
   activityName: z.string().min(1, { message: "Activity name is required" }),
   unitOfMeasurement: z.string().min(1, { message: "Measurement is required" }),
   checkList: z
-    .array(z.string().min(1, { message: "Checklist item cannot be empty" }))
+    .array(
+      z.object({
+        id: z.any().default(0),
+        check: z.string().min(1, { message: "Checklist item cannot be empty" }),
+        isMandatory: z.boolean().default(false),
+      })
+    )
     .optional(),
 });
 
-let token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOlsiOGFmNjFlNDgtYzRkMy00MTYzLWI4NjAtMmEyZWNiNjQ3NDZiIiwiYjUxMzcwOWEtYmZiZS00OTM1LTlmNWMtOGVjN2IwMzFjNTFlIl0sInN1YiI6InZpa2FzQG1hcmNvYWlvdC5jb20iLCJUZW5hbnRJZCI6IjIiLCJleHAiOjE3NDQzNzQyNzAsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTI0NiIsImF1ZCI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTI0NiJ9.reQlePmwDpBL-_mcGOrWwADLJrxmUse5Gd7A-OgDi9s"
+
-const EditActivity = ({activityData,onClose}) => {
+const UpdateActivity = ({ activityData, onClose }) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const {
@@ -25,166 +30,212 @@ const EditActivity = ({activityData,onClose}) => {
     handleSubmit,
     control,
     setValue,
-    clearErrors,
-    setError,
-    getValues,
     reset,
+    setError,
+    clearErrors,
+    getValues,
     formState: { errors },
   } = useForm({
     resolver: zodResolver(schema),
     defaultValues: {
-      activityName: '',
+        id:activityData.id,
-      unitOfMeasurement: '',
+        activityName: activityData.activityName,
-      checkList: [],
+        unitOfMeasurement: activityData.unitOfMeasurement,
+        checkLists: activityData.checkLists || [],
     },
   });
 
-  // Setting up field array for checkList (dynamic fields)
+  const { fields: checkListItems, append, remove } = useFieldArray({
-  const {
-    fields: checkListItems,
-    append,
-    remove,
-  } = useFieldArray({
     control,
-    name: 'checkList',
+    name: "checkList",
   });
 
-  // Pre-populating the form with initial data when component mounts or initialData changes
+  // Load initial data
   useEffect(() => {
     if (activityData) {
       reset( {
+        id:activityData.id,
         activityName: activityData.activityName,
         unitOfMeasurement: activityData.unitOfMeasurement,
-        checkList: activityData.checkList || [],
+        checkList: activityData.checkLists || [],
       });
     }
-  }, [activityData, reset]);
+  }, [activityData]);
-
-  // Form submission handler
-  const onSubmit = async( data ) =>
-    {
-      console.log(data)
-      setIsLoading(true)
-      MasterRespository.updateActivity(activityData?.id,data).then((resp)=>{ 
-        setIsLoading(false)
-        const cachedData = getCachedData("Activity"); 
-        if (cachedData) {
-          const updatedData = cachedData.map((activity) =>
-            activity.id === activityData?.id
-              ? {
-                  ...activity,
-                  activityName: resp.data.activityName,
-                  unitOfMeasurement: resp.data.unitOfMeasurement,
-                }
-              : activity
-          );
-    
-          cacheData("Activity", updatedData);
-        }
-        showToast("Activity Added successfully.", "success");
-        onClose()
-      }).catch((error)=>{
-        showToast(error.message, "error");
-        setIsLoading(false)
-      })
 
   
+  const handleChecklistChange = (index, value) => {
+    setValue(`checkList.${index}`, value);
   };
 
-  // Add a new checklist item
+  // Submit handler
+  const onSubmit = async(data) => {
+    setIsLoading(true);
+  
+    const Activity = {...data, id:activityData.id}
+    try
+    {
+      const response = await MasterRespository.updateActivity( activityData?.id, Activity );
+      const updatedActivity = response.data;
+      const cachedData = getCachedData("Activity")
+  
+      if (cachedData) {
+        const updatedActivities = cachedData.map((activity) =>
+          activity.id === updatedActivity.id ? { ...activity, ...updatedActivity } : activity
+        );
+  
+        cacheData( "Activity", updatedActivities );
+        onClose()
+      }
+      setIsLoading( false )
+      showToast("Activity Successfully Updated", "success");
+    } catch ( err )
+    {
+      setIsLoading( false )
+
+      showToast("error.message", "error");
+      console.log(err)
+    }
+  };
+
+
+
+  // Add new checklist item
   const addChecklistItem = () => {
-    const values = getValues('checkList');
+    const values = getValues("checkList");
     const lastIndex = checkListItems.length - 1;
 
-    // Prevent adding new input if the last one is empty
+    if (
-    if (checkListItems.length > 0 && (!values?.[lastIndex] || values[lastIndex].trim() === '')) {
+      checkListItems.length > 0 &&
-      setError(`checkList.${lastIndex}`, {
+      (!values?.[lastIndex] || values[lastIndex].check.trim() === "")
-        type: 'manual',
+    ) {
-        message: 'Please fill this checklist item before adding another.',
+      setError(`checkList.${lastIndex}.check`, {
+        type: "manual",
+        message: "Please fill this checklist item before adding another.",
       });
       return;
     }
 
-    clearErrors(`checkList.${lastIndex}`); // Clear the error if the input is filled.
+    clearErrors(`checkList.${lastIndex}.check`);
-    append(''); // Add a new empty checklist input
+    append({ id: 0, check: "", isMandatory: false });
   };
 
-  // Remove a checklist item
   const removeChecklistItem = (index) => {
-    remove(index); // Remove the checklist item from the field array
+    remove(index);
   };
 
-  // Handle checklist item input change
-  const handleChecklistChange = (index, value) => {
-    setValue(`checkList.${index}`, value); // Update the value of the checklist item
-  };
-
-  const handleCLose = () =>
-  {
-    () => reset()
-    onClose()
-  }
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
+      <h6>Update Activity</h6>
       <div className="row">
-        <div className="col-6">
+        {/* Activity Name */}
-          <label className="form-label">Activity</label>
+        <div className="col-md-6">
+          <label  className="form-label">Activity Name</label>
           <input
             type="text"
-            {...register('activityName')}
+            {...register("activityName")}
-            className={`form-control form-control-sm ${errors.activityName ? 'is-invalid' : ''}`}
+            className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""}`}
           />
-          {errors.activityName && <p className="danger-text">{errors.activityName.message}</p>}
+          {errors.activityName && (
+            <div className="text-danger">{errors.activityName.message}</div>
+          )}
         </div>
 
-        <div className="col-6">
+        {/* Unit of Measurement */}
+        <div className="col-md-6">
           <label  className="form-label">Measurement</label>
           <input
             type="text"
-            {...register('unitOfMeasurement')}
+            {...register("unitOfMeasurement")}
-            className={`form-control form-control-sm ${errors.unitOfMeasurement ? 'is-invalid' : ''}`}
+            className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""}`}
           />
           {errors.unitOfMeasurement && (
-            <p className="danger-text">{errors.unitOfMeasurement.message}</p>
+            <div className="text-danger">{errors.unitOfMeasurement.message}</div>
           )}
         </div>
 
-        <div className="col-md-6 text-start">
+        {/* Checklist */}
-          {/* Dynamic checklist items */}
+        <div className="col-md-12 text-start mt-1">
+          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
+          {checkListItems.length > 0 && (
+             <table className="table mt-1  border-0">
+             <thead className="py-0 my-0 table-border-top-0">
+                 <tr className="py-1">
+                   <th colSpan={2} className="py-1">
+                     <small>Name</small>
+                   </th>
+                   <th colSpan={2} className="py-1 text-center">
+                     <small>Is Mandatory</small>
+                   </th>
+                   <th className="text-center py-1">Action</th>
+                 </tr>
+               </thead>
+               <tbody>
                {checkListItems.map((item, index) => (
-            <div key={item.id} className="d-flex align-items-center gap-2 my-1">
+                   <tr key={item.id} className="border-top-0">
+                     <td colSpan={2} className=" border-0">
                        <input
-                {...register(`checkList.${index}`)}
+                         className="d-none"
+                         {...register(`checkList.${index}.id`)}
+                       ></input>
+                       <input
+                         {...register(`checkList.${index}.check`)}
                          className="form-control form-control-sm"
                          placeholder={`Checklist item ${index + 1}`}
-                onChange={(e) => handleChecklistChange(index, e.target.value)} // Handle input change
+                         onChange={(e) =>
+                           handleChecklistChange(index, e.target.value)
+                         }
                        />
+                       {errors.checkList?.[index]?.check && (
+                         <small
+                           style={{ fontSize: "10px" }}
+                           className="danger-text"
+                         >
+                           {errors.checkList[index]?.check?.message}
+                         </small>
+                       )}
+                     </td>
+                     <td colSpan={2} className="text-center border-0">
+                       <input
+                         className="form-check-input"
+                         type="checkbox"
+                         {...register(`checkList.${index}.isMandatory`)}
+                         defaultChecked={item.isMandatory}
+                       />
+                     </td>
+                     <td className="text-center border-0">
                        <button
                          type="button"
-                onClick={() => removeChecklistItem(index)}   // Remove button
+                         onClick={() => removeChecklistItem(index)}
                          className="btn btn-xs btn-icon btn-text-secondary"
                        >
-                <span className="icon-base bx bx-x"/>
+                         <i class="bx bxs-minus-circle text-danger"></i>
                        </button>
-              {errors.checkList?.[index] && (
+                     </td>
-                <p className="danger-text">{errors.checkList[index]?.message}</p>
+                   </tr>
-              )}
-            </div>
                  ))}
-          {/* Add new checklist item */}
+               </tbody>
-          <button type="button" className="btn btn-sm btn-primary mt-2" onClick={addChecklistItem}>
+             </table>
-            + Add Checklist Item
+          )}
+         
+
+          <button
+             type="button"
+            className="btn btn-xs btn-primary mt-2"
+            onClick={addChecklistItem}
+          >
+        <i class="bx bx-plus-circle"></i>
           </button>
         </div>
 
+        {/* Submit / Cancel */}
         <div className="col-12 text-center mt-3">
           <button type="submit" className="btn btn-sm btn-primary me-3">
-            Submit
+            {isLoading ? "Please Wait" : "Submit"}
           </button>
           <button
             type="reset"
             className="btn btn-sm btn-label-secondary"
-            onClick={handleCLose}
+            onClick={onClose}
           >
             Cancel
           </button>
@@ -194,4 +245,4 @@ const EditActivity = ({activityData,onClose}) => {
   );
 };
 
-export default EditActivity;
+export default UpdateActivity;