Merge branch 'pramod_Bug#29InputLimmit' into Feature_Task_Management

src/components/Activities/CheckCheckOutForm.jsx

@@ -12,7 +12,7 @@ import {checkIfCurrentDate} from "../../utils/dateUtils";
 
 const schema = z.object({
   markTime: z.string().nonempty({message:"Time is required"}), 
-  description:z.string().optional()
+  description:z.string().max(200,"description should less than 200 chracters").optional()
 });
 
 const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
@@ -30,6 +30,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
     setValue,
   } = useForm({
     resolver: zodResolver( schema ),
+    mode:"onChange"
   });
 
   const onSubmit = ( data ) =>
@@ -85,6 +86,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
           name="description"
           className="form-control"
           {...register( "description" )}
+          maxLength={200}
         />
         {errors.description && (
           <p className="text-danger">{errors.description.message}</p>

src/components/Employee/ManageEmployee.jsx

@@ -123,6 +123,7 @@ const ManageEmployee = () => {
     register,
     control,
     handleSubmit,
+    watch,
     formState: { errors },
     reset,
     getValues,
@@ -146,8 +147,11 @@ const ManageEmployee = () => {
       PhoneNumber: currentEmployee?.phoneNumber || "",
       JobRoleId: currentEmployee?.jobRoleId || "",
     },
+    mode: "onChange",
   });
 
+  const AadharNumberValue = watch("AadharNumber") || "";
+
   const onSubmit = (data) => {
     setLoading(true);
 
@@ -342,6 +346,7 @@ const ManageEmployee = () => {
                       {...register("PhoneNumber")}
                       className="form-control form-control-sm"
                       placeholder="Phone Number"
+                      inputMode="numeric"
                     />
                     {errors.PhoneNumber && (
                       <div
@@ -444,7 +449,10 @@ const ManageEmployee = () => {
                       {500 - currentAddressLength} characters left
                     </div>
                     {errors.CurrentAddress && (
-                      <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+                      <div
+                        className="danger-text text-start"
+                        style={{ fontSize: "12px" }}
+                      >
                         {errors.CurrentAddress.message}
                       </div>
                     )}
@@ -470,7 +478,10 @@ const ManageEmployee = () => {
                       {500 - permanentAddressLength} characters left
                     </div>
                     {errors.PermanentAddress && (
-                      <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+                      <div
+                        className="danger-text text-start"
+                        style={{ fontSize: "12px" }}
+                      >
                         {errors.PermanentAddress.message}
                       </div>
                     )}
@@ -520,6 +531,7 @@ const ManageEmployee = () => {
                       {...register("EmergencyContactPerson")}
                       className="form-control form-control-sm"
                       id="EmergencyContactPerson"
+                      maxLength={50}
                       placeholder="Contact Person"
                     />
                     {errors.EmergencyContactPerson && (
@@ -541,6 +553,7 @@ const ManageEmployee = () => {
                       className="form-control form-control-sm phone-mask"
                       id="EmergencyPhoneNumber"
                       placeholder="Phone Number"
+                      inputMode="numeric"
                     />
                     {errors.EmergencyPhoneNumber && (
                       <div
@@ -562,6 +575,8 @@ const ManageEmployee = () => {
                       className="form-control form-control-sm"
                       id="AadharNumber"
                       placeholder="AADHAR Number"
+                      maxLength={12}
+                      inputMode="numeric"
                     />
                     {errors.AadharNumber && (
                       <div className="danger-text text-start">
@@ -578,6 +593,7 @@ const ManageEmployee = () => {
                       className="form-control form-control-sm"
                       id="PanNumber"
                       placeholder="PAN Number"
+                      maxLength={10}
                     />
                     {errors.PanNumber && (
                       <div

src/components/Project/ManageProjectInfo.jsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { useForm,Controller } from 'react-hook-form';
+import { useForm, Controller } from "react-hook-form";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
-import {z} from 'zod';
+import { z } from "zod";
 
-
+const currentDate = new Date().toISOString().split("T")[0];
-
-const currentDate = new Date().toISOString().split('T')[0];
 const formatDate = (date) => {
   if (!date) {
     return currentDate;
@@ -14,23 +12,33 @@ const formatDate = (date) => {
   if (isNaN(d.getTime())) {
     return currentDate;
   }
-  return d.toISOString().split('T')[0];
+  return d.toISOString().split("T")[0];
 };
-const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
+const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
-{
+  const [CurrentProject, setCurrentProject] = useState();
- 
+  const [isloading, setLoading] = useState(false);
-  const [CurrentProject,setCurrentProject] = useState()
-  const [ isloading, setLoading ] = useState( false )
   const [addressLength, setAddressLength] = useState(0);
   const maxAddressLength = 500;
 
-  const projectSchema = z.object( {
+  const projectSchema = z
+    .object({
       ...(project?.id ? { id: z.number().optional() } : {}),
       name: z.string().min(1, { message: "Project Name is required" }),
-    contactPerson: z.string().min( 1, {message: "Contact Person Name is required"} ),
+      contactPerson: z
-    projectAddress: z.string().min( 1, {message: "Address is required"} ).max(500, 'Address must not exceed 150 characters'),
+        .string()
-    startDate: z.string().min( 1, {message: "Start Date is required"} ).default(currentDate),
+        .min(1, { message: "Contact Person Name is required" }),
-    endDate: z.string().min( 1, {message: "End Date is required"} ).default(currentDate),
+      projectAddress: z
+        .string()
+        .min(1, { message: "Address is required" })
+        .max(500, "Address must not exceed 150 characters"),
+      startDate: z
+        .string()
+        .min(1, { message: "Start Date is required" })
+        .default(currentDate),
+      endDate: z
+        .string()
+        .min(1, { message: "End Date is required" })
+        .default(currentDate),
       projectStatusId: z
         .string()
         .min(1, { message: "Status is required" })
@@ -41,18 +49,27 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
           }
           return num;
         }),
-  
+    })
-  } ) .refine((data) => {
+    .refine(
+      (data) => {
         const start = new Date(data.startDate);
         const end = new Date(data.endDate);
         return end > start;
-  }, {
+      },
-    path: ['endDate'], // attaches the error to the endDate field
+      {
-    message: 'End Date must be greater than Start Date',
+        path: ["endDate"], // attaches the error to the endDate field
-  });
+        message: "End Date must be greater than Start Date",
+      }
+    );
 
-
+  const {
- const {register, control, handleSubmit, formState: {errors}, reset, getValues} = useForm( {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+    reset,
+    getValues,
+  } = useForm({
     resolver: zodResolver(projectSchema),
     defaultValues: {
       id: project?.id || "",
@@ -62,15 +79,15 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
       startDate: formatDate(project?.startDate) || currentDate,
       endDate: formatDate(project?.endDate) || currentDate,
       projectStatusId: String(project?.projectStatusId || "0"),
+    },
+    mode: "onChange",
+  });
 
-   }
+  useEffect(() => {
- })
+    setCurrentProject(project);
-  
-  useEffect( () =>
-  {
-    setCurrentProject(project)
     reset(
-     project ? {
+      project
+        ? {
             id: project?.id || "",
             name: project?.name || "",
             contactPerson: project?.contactPerson || "",
@@ -78,33 +95,31 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
             startDate: formatDate(project?.startDate) || "",
             endDate: formatDate(project?.endDate) || "",
             projectStatusId: String(project.projectStatusId) || "0",
-   
+          }
-      } :{}
+        : {}
-      
+    );
-    )
     setAddressLength(project?.projectAddress?.length || 0);
-  },[project,reset,])
+  }, [project, reset]);
-
-  
 
   const onSubmitForm = (updatedProject) => {
-      setLoading( true )      
+    setLoading(true);
-      handleSubmitForm( updatedProject )  
+    handleSubmitForm(updatedProject);
   };
 
-  useEffect( () =>
+  useEffect(() => {
-  {
+    return () => setLoading(false);
-    return ()=>setLoading(false)
+  }, []);
-  },[])
 
   return (
-    <div className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal" role="document">
+    <div
+      className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
+      role="document"
+    >
       <div className="modal-content">
         <div className="modal-body p-sm-4 p-0">
           <button
             type="button"
             className="btn-close"
-          
             onClick={onClose}
             aria-label="Close"
           ></button>
@@ -122,12 +137,18 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
                 type="text"
                 id="name"
                 name="name"
-
                 className="form-control"
                 placeholder="Project Name"
                 {...register("name")}
               />
-               {errors.name && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.name.message}</div>}
+              {errors.name && (
+                <div
+                  className="danger-text text-start"
+                  style={{ fontSize: "12px" }}
+                >
+                  {errors.name.message}
+                </div>
+              )}
             </div>
             <div className="col-12 col-md-12">
               <label className="form-label" htmlFor="contactPerson">
@@ -141,8 +162,14 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
                 placeholder="Contact Person"
                 {...register("contactPerson")}
               />
-               {errors.contactPerson && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.contactPerson.message}</div>}
+              {errors.contactPerson && (
-
+                <div
+                  className="danger-text text-start"
+                  style={{ fontSize: "12px" }}
+                >
+                  {errors.contactPerson.message}
+                </div>
+              )}
             </div>
 
             <div className="col-12 col-md-6">
@@ -152,13 +179,18 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
               <input
                 className="form-control form-control-sm"
                 type="date"
-              
                 name="startDate"
                 {...register("startDate")}
                 id="startDate"
               />
-               {errors.startDate && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.startDate.message}</div>}
+              {errors.startDate && (
-
+                <div
+                  className="danger-text text-start"
+                  style={{ fontSize: "12px" }}
+                >
+                  {errors.startDate.message}
+                </div>
+              )}
             </div>
             <div className="col-12 col-md-6">
               <label className="form-label" htmlFor="endDate">
@@ -167,13 +199,18 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
               <input
                 className="form-control form-control-sm"
                 type="date"
-              
                 name="endDate"
                 {...register("endDate")}
                 id="endDate"
               />
-               {errors.endDate && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.endDate.message}</div>}
+              {errors.endDate && (
-
+                <div
+                  className="danger-text text-start"
+                  style={{ fontSize: "12px" }}
+                >
+                  {errors.endDate.message}
+                </div>
+              )}
             </div>
             <div className="col-12 col-md-6">
               <label className="form-label" htmlFor="modalEditUserStatus">
@@ -186,7 +223,7 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
                 aria-label="Default select example"
                 {...register("projectStatusId", {
                   required: "Status is required",
-                  valueAsNumber: false
+                  valueAsNumber: false,
                 })}
               >
                 <option disabled>Status</option>
@@ -198,8 +235,14 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
 
                 <option value="4">Completed</option>
               </select>
-              {errors.projectStatusId && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.projectStatusId.message}</div>}
+              {errors.projectStatusId && (
-
+                <div
+                  className="danger-text text-start"
+                  style={{ fontSize: "12px" }}
+                >
+                  {errors.projectStatusId.message}
+                </div>
+              )}
             </div>
 
             <div className="col-12 col-md-12">
@@ -221,7 +264,14 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
               <div className="text-end" style={{ fontSize: "12px" }}>
                 {maxAddressLength - addressLength} characters left
               </div>
-              {errors.projectAddress && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.projectAddress.message}</div>}
+              {errors.projectAddress && (
+                <div
+                  className="danger-text text-start"
+                  style={{ fontSize: "12px" }}
+                >
+                  {errors.projectAddress.message}
+                </div>
+              )}
             </div>
             <div className="col-12 text-center">
               <button type="submit" className="btn btn-sm btn-primary me-3">