Add character length tracking for project address and description fields

src/components/Project/ManageProjectInfo.jsx

@@ -21,8 +21,9 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
  
   const [CurrentProject,setCurrentProject] = useState()
   const [ isloading, setLoading ] = useState( false )
-  
-  
+  const [addressLength, setAddressLength] = useState(0);
+  const maxAddressLength = 500;
+
   const projectSchema = z.object( {
     ...(project?.id ? { id: z.number().optional() } : {}),
     name: z.string().min( 1, {message: "Project Name is required"} ),
@@ -79,7 +80,9 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
         projectStatusId:  String(project.projectStatusId) || "0" ,
    
       } :{}
+      
     )
+    setAddressLength(project?.projectAddress?.length || 0); 
   },[project,reset,])
 
   
@@ -205,16 +208,20 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
               </label>
               <div className="input-group">
                 <textarea
-                  type="text"
                   id="projectAddress"
                   name="projectAddress"
                   className="form-control"
-                  {...register( "projectAddress" )}
-                  
+                  maxLength={maxAddressLength}
+                  {...register("projectAddress")}
+                  onChange={(e) => {
+                    setAddressLength(e.target.value.length);
+                  }}
                 />
               </div>
+              <div className="text-end" style={{ fontSize: "12px" }}>
+                {maxAddressLength - addressLength} characters remaining
+              </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" >

src/components/master/EditJobRole.jsx

@@ -64,13 +64,17 @@ const EditJobRole = ({data,onClose}) => {
     };
 
  
-    useEffect(()=>{
+    useEffect(() => {
       reset({
-          role:data?.name,
-          description:data?.description
-      })
+        role: data?.name,
+        description: data?.description
+      });
+      setDescriptionLength(data?.description?.length || 0);
+    }, [data, reset]);
     
-    },[data,reset])
+  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
+  const maxDescriptionLength = 255;
+
      
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
@@ -84,14 +88,22 @@ const EditJobRole = ({data,onClose}) => {
         </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' : ''}`}
-          ></textarea>
-          {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
-          )}
+        <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">