Created React Component with Form to Update Service

src/components/master/CreateActivityGroup.jsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { MasterRespository } from "../../repositories/MastersRepository";
+import { clearApiCacheKey } from "../../slices/apiCacheSlice";
+import { getCachedData, cacheData } from "../../slices/apiDataManager";
+import showToast from "../../services/toastService";
+
+const schema = z.object({
+  name: z.string().min(1, { message: "Service Name is required" }),
+  description: z
+    .string()
+    .min(1, { message: "Description is required" })
+    .max(255, { message: "Description cannot exceed 255 characters" }),
+  serviceId: z.string().min(1, { message: "A service selection is required." }),
+});
+
+const CreateActivityGroup = ({ onClose }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [services, setServices] = useState(getCachedData("Services"));
+
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      description: "",
+      serviceId: "",
+    },
+  });
+
+  const handleServicesChange = (e) => {
+    const { value } = e.target;
+    const service = services.find((b) => b.id === String(value));
+    reset((prev) => ({
+      ...prev,
+      serviceId: String(value),
+    }));
+  };
+
+  const onSubmit = (data) => {
+    setIsLoading(true);
+    const result = {
+      name: data.name,
+      description: data.description,
+      serviceId: data.serviceId,
+    };
+
+    MasterRespository.createActivityGroup(result)
+      .then((resp) => {
+        setIsLoading(false);
+        resetForm();
+        const cachedData = getCachedData("Activity Group");
+        const updatedData = [...cachedData, resp?.data];
+        cacheData("Activity Group", updatedData);
+        showToast("Activity Group Added successfully.", "success");
+
+        onClose();
+      })
+      .catch((error) => {
+        showToast(error.message, "error");
+        setIsLoading(false);
+      });
+  };
+  const resetForm = () => {
+    reset({
+      name: "",
+      description: "",
+      serviceId: "",
+    });
+    setDescriptionLength(0);
+  };
+
+  useEffect(() => {
+    if (!services) {
+      MasterRespository.getServices().then((res) => {
+        setServices(res?.data);
+        cacheData("Services", res?.data);
+      });
+    }
+    return () => resetForm();
+  }, []);
+  const [descriptionLength, setDescriptionLength] = useState(0);
+  const maxDescriptionLength = 255;
+  return (
+    <>
+      <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+        {/* <div className="col-12 col-md-12">
+        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
+      </div> */}
+        <div className="col-12 col-md-12">
+          <label className="form-label">Activity Group Name</label>
+          <input
+            type="text"
+            {...register("name")}
+            className={`form-control ${errors.name ? "is-invalids" : ""}`}
+          />
+          {errors.name && <p className="text-danger">{errors.name.message}</p>}
+        </div>
+        <div className="col-12 col-md-12">
+          <label className="form-label" htmlFor="serviceId">
+            Select Service
+          </label>
+          <select
+            id="serviceId"
+            className="form-select form-select-sm"
+            {...register("serviceId")}
+            onChange={handleServicesChange}
+          >
+            <option value="">Select Service</option>
+            {services
+              ?.filter((service) => service?.name)
+              ?.sort((a, b) => a.name?.localeCompare(b.name))
+              ?.map((service) => (
+                <option key={service.id} value={service.id}>
+                  {service.name}
+                </option>
+              ))}
+
+            {services?.filter((service) => service?.name).length === 0 && (
+              <option disabled>No services found</option>
+            )}
+          </select>
+          {errors.serviceId && (
+            <p className="danger-text">{errors.serviceId.message}</p>
+          )}
+        </div>
+        <div className="col-12 col-md-12">
+          <label className="form-label" htmlFor="description">
+            Description
+          </label>
+          <textarea
+            rows="3"
+            {...register("description")}
+            className={`form-control ${
+              errors.description ? "is-invalids" : ""
+            }`}
+            onChange={(e) => {
+              setDescriptionLength(e.target.value.length);
+              register("description").onChange(e);
+            }}
+          ></textarea>
+          <div className="text-end small text-muted">
+            {maxDescriptionLength - descriptionLength} characters left
+          </div>
+          {errors.description && (
+            <p className="text-danger">{errors.description.message}</p>
+          )}
+        </div>
+        <div className="col-12 text-center">
+          <button type="submit" className="btn btn-sm btn-primary me-3">
+            {isLoading ? "Please Wait..." : "Submit"}
+          </button>
+          <button
+            type="reset"
+            className="btn btn-sm btn-label-secondary "
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default CreateActivityGroup;

src/components/master/CreateServices.jsx

@@ -0,0 +1,123 @@
+import React, { useEffect,useState } from 'react'
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { MasterRespository } from '../../repositories/MastersRepository';
+import { clearApiCacheKey } from '../../slices/apiCacheSlice';
+import { getCachedData,cacheData } from '../../slices/apiDataManager';
+import showToast from '../../services/toastService';
+
+
+const schema = z.object({
+  name: z.string().min(1, { message: "Service Name is required" }),
+  description: z.string().min(1, { message: "Description is required" })
+  .max(255, { message: "Description cannot exceed 255 characters" }),
+});
+
+const CreateServices = ({onClose}) => {
+
+  const[isLoading,setIsLoading] = useState(false)
+     const {
+      register,
+      handleSubmit,
+      formState: { errors },reset
+      
+    } = useForm({
+      resolver: zodResolver(schema),
+      defaultValues: {
+        name: "",
+        description: "",
+      
+      },
+    });
+    
+    const onSubmit = (data) => {
+      setIsLoading(true)
+      const result = {
+        name: data.name,
+        description: data.description,
+      };
+    
+      MasterRespository.createService(result).then((resp)=>{ 
+        setIsLoading(false)
+        resetForm()
+        const cachedData = getCachedData("Services"); 
+        const updatedData = [...cachedData, resp?.data]; 
+        cacheData("Services", updatedData); 
+        showToast("Service Added successfully.", "success");
+
+        onClose()
+      }).catch((error)=>{
+        showToast(error.message, "error");
+        setIsLoading(false)
+      })
+   
+     
+    };
+    const resetForm = () => {
+      reset({
+        name: "",
+        description: ""
+      });
+      setDescriptionLength(0);
+    }    
+
+    useEffect(()=>{
+        return ()=>resetForm()
+    },[])
+    
+    const [descriptionLength, setDescriptionLength] = useState(0);
+    const maxDescriptionLength = 255;    
+  return (<>
+    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+      {/* <div className="col-12 col-md-12">
+        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
+      </div> */}
+        <div className="col-12 col-md-12">
+          <label className="form-label">Service Name</label>
+          <input type="text" 
+           {...register("name")} 
+             className={`form-control ${errors.name ? 'is-invalids' : ''}`}
+          />
+          {errors.name && <p className="text-danger">{errors.name.message}</p>}
+        </div> 
+        <div className="col-12 col-md-12">
+          <label className="form-label" htmlFor="description">Description</label>
+        <textarea
+          rows="3"
+          {...register("description")}
+          className={`form-control ${errors.description ? 'is-invalids' : ''}`}
+          onChange={(e) => {
+            setDescriptionLength(e.target.value.length);
+            register("description").onChange(e);
+          }}
+        ></textarea>
+        <div className="text-end small text-muted">
+          {maxDescriptionLength - descriptionLength} characters left
+        </div>
+          {errors.description && (
+            <p className="text-danger">{errors.description.message}</p>
+          )}
+        </div>
+
+        <div className="col-12 text-center">
+        <button type="submit" className="btn btn-sm btn-primary me-3">           
+         {isLoading? "Please Wait...":"Submit"}       
+        </button>
+        <button
+          type="reset"
+          className="btn btn-sm btn-label-secondary "
+          data-bs-dismiss="modal"
+          aria-label="Close"
+        >
+          Cancel
+        </button>
+      </div>
+     
+    </form>
+ 
+    </>
+  )
+}
+
+export default CreateServices;

src/components/master/EditActivityGroup.jsx

@@ -0,0 +1,187 @@
+import React, { useEffect, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { set, z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { MasterRespository } from "../../repositories/MastersRepository";
+import { cacheData, getCachedData } from "../../slices/apiDataManager";
+import showToast from "../../services/toastService";
+
+const schema = z.object({
+  name: z.string().min(1, { message: "Service Name is required" }),
+  description: z
+    .string()
+    .min(1, { message: "Description is required" })
+    .max(255, { message: "Description cannot exceed 255 characters" }),
+  serviceId: z.string().min(1, { message: "A service selection is required." }),
+});
+
+const EditActivityGroup = ({ data, onClose }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [services, setServices] = useState(getCachedData("Services"));
+  const [formData, setFormData] = useState({
+    name: data?.name || "",
+    description: data?.description || "",
+    serviceId: data.serviceId || "",
+  });
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+    watch,
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: data?.name || "",
+      description: data?.description || "",
+      serviceId: data.serviceId || "",
+    },
+  });
+  const selectedServiceId = watch("serviceId");
+  const selectedName = watch("name");
+  const selectedDescription = watch("description");
+
+  // const handleServicesChange = (e) => {
+  //   const { value } = e.target;
+  //   const service = services.find((b) => b.id === String(value));
+  //   reset((prev) => ({
+  //     ...prev,
+  //     serviceId: String(value),
+  //   }));
+  // };
+
+  const onSubmit = (formdata) => {
+    setIsLoading(true);
+    const result = {
+      id: data?.id,
+      name: formdata?.name,
+      description: formdata.description,
+      serviceId: formdata?.serviceId,
+    };
+
+    MasterRespository.updateActivityGroup(data?.id, result)
+      .then((resp) => {
+        setIsLoading(false);
+        showToast("Activity Group Update successfully.", "success");
+        const cachedData = getCachedData("Activity Group");
+        if (cachedData) {
+          const updatedData = cachedData.map((service) =>
+            service.id === data?.id ? { ...service, ...resp.data } : service
+          );
+          cacheData("Activity Group", updatedData);
+        }
+
+        onClose();
+      })
+      .catch((error) => {
+        showToast(error.message, "error");
+        setIsLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    if (!services) {
+      MasterRespository.getServices().then((res) => {
+        setServices(res?.data);
+        cacheData("Services", res?.data);
+      });
+    }
+    reset({
+      name: data?.name,
+      description: data?.description,
+      serviceId: data?.serviceId,
+    });
+    setDescriptionLength(data?.description?.length || 0);
+  }, [data, reset]);
+
+  const [descriptionLength, setDescriptionLength] = useState(
+    data?.description?.length || 0
+  );
+  const maxDescriptionLength = 255;
+
+  return (
+    <>
+      <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+        {/* <div className="col-12 col-md-12">
+        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>        
+      </div> */}
+        <div className="col-12 col-md-12">
+          <label className="form-label">Service Name</label>
+          <input
+            type="text"
+            {...register("name")}
+            value={selectedName}
+            className={`form-control ${errors.name ? "is-invalids" : ""}`}
+          />
+          {errors.name && <p className="text-danger">{errors.name.message}</p>}
+        </div>
+        <div className="col-12 col-md-12">
+          <label className="form-label">Select Service</label>
+          <select
+            id="serviceId"
+            className="form-select form-select-sm"
+            {...register("serviceId")}
+            value={selectedServiceId}
+            // onChange={handleServicesChange}
+            disabled
+          >
+            {services
+              ?.filter((service) => service?.name)
+              ?.sort((a, b) => a.name?.localeCompare(b.name))
+              ?.map((service) => (
+                <option key={service.id} value={service.id}>
+                  {service.name}
+                </option>
+              ))}
+
+            {services?.filter((service) => service?.name).length === 0 && (
+              <option disabled>No service found</option>
+            )}
+          </select>
+          {errors.serviceId && (
+            <p className="danger-text">{errors.serviceId.message}</p>
+          )}
+        </div>
+        <div className="col-12 col-md-12">
+          <label className="form-label" htmlFor="description">
+            Description
+          </label>
+          <textarea
+            rows="3"
+            {...register("description")}
+            value={selectedDescription}
+            className={`form-control ${
+              errors.description ? "is-invalids" : ""
+            }`}
+            onChange={(e) => {
+              setDescriptionLength(e.target.value.length);
+              register("description").onChange(e);
+            }}
+          ></textarea>
+          <div className="text-end small text-muted">
+            {maxDescriptionLength - descriptionLength} characters left
+          </div>
+          {errors.description && (
+            <p className="text-danger">{errors.description.message}</p>
+          )}
+        </div>
+
+        <div className="col-12 text-center">
+          <button type="submit" className="btn btn-sm btn-primary me-3">
+            {isLoading ? "Please Wait..." : "Submit"}
+          </button>
+          <button
+            type="reset"
+            className="btn btn-sm btn-label-secondary"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default EditActivityGroup;

src/components/master/EditServices.jsx

@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { set, z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { MasterRespository } from "../../repositories/MastersRepository";
+import { cacheData, getCachedData } from "../../slices/apiDataManager";
+import showToast from "../../services/toastService";
+
+const schema = z.object({
+  name: z.string().min(1, { message: "Service Name is required" }),
+  description: z
+    .string()
+    .min(1, { message: "Description is required" })
+    .max(255, { message: "Description cannot exceed 255 characters" }),
+});
+
+const EditServices = ({ data, onClose }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+    watch,
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: data?.name || "",
+      description: data?.description || "",
+    },
+  });
+
+  const selectedName = watch("name")
+  const selectedDescription = watch("description")
+
+  const onSubmit = (formdata) => {
+    setIsLoading(true);
+    const result = {
+      id: data?.id,
+      name: formdata?.name,
+      description: formdata.description,
+    };
+
+    MasterRespository.updateService(data?.id, result)
+      .then((resp) => {
+        setIsLoading(false);
+        showToast("Service Update successfully.", "success");
+        const cachedData = getCachedData("Services");
+        if (cachedData) {
+          const updatedData = cachedData.map((service) =>
+            service.id === data?.id ? { ...service, ...resp.data } : service
+          );
+          cacheData("Services", updatedData);
+        }
+
+        onClose();
+      })
+      .catch((error) => {
+        showToast(error.message, "error");
+        setIsLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    reset({
+      name: data?.name,
+      description: data?.description,
+    });
+    setDescriptionLength(data?.description?.length || 0);
+  }, [data, reset]);
+
+  const [descriptionLength, setDescriptionLength] = useState(
+    data?.description?.length || 0
+  );
+  const maxDescriptionLength = 255;
+
+  return (
+    <>
+      <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+        {/* <div className="col-12 col-md-12">
+        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>        
+      </div> */}
+        <div className="col-12 col-md-12">
+          <label className="form-label">Service Name</label>
+          <input
+            type="text"
+            {...register("name")}
+            value={selectedName}
+            className={`form-control ${errors.name ? "is-invalids" : ""}`}
+          />
+          {errors.name && <p className="text-danger">{errors.name.message}</p>}
+        </div>
+        <div className="col-12 col-md-12">
+          <label className="form-label" htmlFor="description">
+            Description
+          </label>
+          <textarea
+            rows="3"
+            {...register("description")}
+            value={selectedDescription}
+            className={`form-control ${
+              errors.description ? "is-invalids" : ""
+            }`}
+            onChange={(e) => {
+              setDescriptionLength(e.target.value.length);
+              register("description").onChange(e);
+            }}
+          ></textarea>
+          <div className="text-end small text-muted">
+            {maxDescriptionLength - descriptionLength} characters left
+          </div>
+          {errors.description && (
+            <p className="text-danger">{errors.description.message}</p>
+          )}
+        </div>
+
+        <div className="col-12 text-center">
+          <button type="submit" className="btn btn-sm btn-primary me-3">
+            {isLoading ? "Please Wait..." : "Submit"}
+          </button>
+          <button
+            type="reset"
+            className="btn btn-sm btn-label-secondary"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default EditServices;