src/components/Employee/ManageEmployee.jsx

@@ -30,6 +30,8 @@ const ManageEmployee = () => {
   const [isloading, setLoading] = useState(false);
   const navigation = useNavigate();
   const [currentEmployee, setCurrentEmployee] = useState();
+  const [currentAddressLength, setCurrentAddressLength] = useState(0);
+  const [permanentAddressLength, setPermanentAddressLength] = useState(0);
   
   const userSchema = z.object({
     ...(employeeId ? { Id: z.number().optional() } : {}),
@@ -217,6 +219,8 @@ const ManageEmployee = () => {
           }
         : {} // Empty object resets the form
     );
+    setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
+    setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
   }, [currentEmployee, reset]);
 
   return (
@@ -430,12 +434,17 @@ const ManageEmployee = () => {
                       aria-label="Current Address"
                       aria-describedby="basic-icon-default-message2"
                       {...register("CurrentAddress")}
+                      onChange={(e) => {
+                        setCurrentAddressLength(e.target.value.length);
+                        // let react-hook-form still handle it
+                        register("CurrentAddress").onChange(e);
+                      }}
                     ></textarea>
+                    <div className="text-end small">
+                      {500 - currentAddressLength} characters left
+                    </div>
                     {errors.CurrentAddress && (
-                      <div
+                      <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
                         {errors.CurrentAddress.message}
                       </div>
                     )}
@@ -452,12 +461,16 @@ const ManageEmployee = () => {
                       aria-label="Permanent Address"
                       aria-describedby="basic-icon-default-message2"
                       {...register("PermanentAddress")}
+                      onChange={(e) => {
+                        setPermanentAddressLength(e.target.value.length);
+                        register("PermanentAddress").onChange(e);
+                      }}
                     ></textarea>
+                    <div className="text-end small">
+                      {500 - permanentAddressLength} characters left
+                    </div>
                     {errors.PermanentAddress && (
-                      <div
+                      <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
                         {errors.PermanentAddress.message}
                       </div>
                     )}

src/components/Project/ManageProjectInfo.jsx

@@ -21,7 +21,8 @@ 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() } : {}),
@@ -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"
+                  maxLength={maxAddressLength}
                   {...register("projectAddress")}
-                  
+                  onChange={(e) => {
+                    setAddressLength(e.target.value.length);
+                  }}
                 />
               </div>
+              <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>}
-
             </div>
             <div className="col-12 text-center">
               <button type="submit" className="btn btn-sm btn-primary me-3" >

src/components/master/CreateJobRole.jsx

@@ -58,14 +58,16 @@ const CreateJobRole = ({onClose}) => {
       reset({
         role: "",
         description: ""
-        })
+      });
+      setDescriptionLength(0);
     }    
 
     useEffect(()=>{
         return ()=>resetForm()
     },[])
     
-     
+    const [descriptionLength, setDescriptionLength] = useState(0);
+    const maxDescriptionLength = 255;    
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
       
@@ -83,7 +85,14 @@ const CreateJobRole = ({onClose}) => {
           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>
           )}

src/components/master/CreateRole.jsx

@@ -73,6 +73,11 @@ const onSubmit = (values) => {
  
  
 };
+const [descriptionLength, setDescriptionLength] = useState(0);
+const maxDescriptionLength = 255;
+useEffect(() => {
+  setDescriptionLength(0);  
+}, []);
 
  
   return (
@@ -95,7 +100,16 @@ const onSubmit = (values) => {
           rows="3"
           {...register("description")}
           className={`form-control ${errors.description ? 'is-invalids' : ''}`}
+          onChange={(e) => {
+            setDescriptionLength(e.target.value.length);
+            // Also update react-hook-form's value
+            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>
           )}

src/components/master/EditJobRole.jsx

@@ -68,9 +68,13 @@ const EditJobRole = ({data,onClose}) => {
       reset({
         role: data?.name,
         description: data?.description
-      })
+      });
+      setDescriptionLength(data?.description?.length || 0);
+    }, [data, reset]);
+    
+  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
+  const maxDescriptionLength = 255;
 
-    },[data,reset])
      
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
@@ -88,10 +92,18 @@ const EditJobRole = ({data,onClose}) => {
           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">

src/components/master/EditRole.jsx

@@ -126,8 +126,13 @@ const  EditMaster=({master,onClose})=> {
       role: master?.item?.role,
       description: master?.item?.description,
       permissions: initialPermissions,
-    })
+    });
-  },[master,reset])
+    setDescriptionLength(master?.item?.description?.length || 0);
+  }, [master, reset]);
+  
+  const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
+  const maxDescriptionLength = 255;
+
 
   return (
   
@@ -148,7 +153,14 @@ const  EditMaster=({master,onClose})=> {
           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>
         )}