Add character length tracking for address and description fields in employee management forms

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 remaining
+                    </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 remaining
+                    </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/master/CreateJobRole.jsx

@@ -54,18 +54,20 @@ const CreateJobRole = ({onClose}) => {
    
      
     };
-    const resetForm =()=>{
+    const resetForm = () => {
-        reset({
+      reset({
-            role:"",
+        role: "",
-            description:""
+        description: ""
-        })
+      });
+      setDescriptionLength(0);
     }    
 
     useEffect(()=>{
         return ()=>resetForm()
     },[])
     
-     
+    const [descriptionLength, setDescriptionLength] = useState(0);
+    const maxDescriptionLength = 255;    
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
       
@@ -79,11 +81,18 @@ const CreateJobRole = ({onClose}) => {
         </div> 
         <div className="col-12 col-md-12">
           <label className="form-label" htmlFor="description">Description</label>
-          <textarea
+        <textarea
-            rows="3"
+          rows="3"
-            {...register("description")}
+          {...register("description")}
-            className={`form-control ${errors.description ? 'is-invalids' : ''}`}
+          className={`form-control ${errors.description ? 'is-invalids' : ''}`}
-          ></textarea>
+          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 (
@@ -91,11 +96,20 @@ const onSubmit = (values) => {
         
         <div className="col-12 col-md-12">
           <label className="form-label" htmlFor="description">Description</label>
-          <textarea
+        <textarea
-            rows="3"
+          rows="3"
-            {...register("description")}
+          {...register("description")}
-            className={`form-control ${errors.description ? 'is-invalids' : ''}`}
+          className={`form-control ${errors.description ? 'is-invalids' : ''}`}
-          ></textarea>
+          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/EditRole.jsx

@@ -121,13 +121,18 @@ const  EditMaster=({master,onClose})=> {
 
   };
 
-  useEffect(()=>{
+  useEffect(() => {
     reset({
       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 (
   
@@ -144,14 +149,21 @@ const  EditMaster=({master,onClose})=> {
         
         <div className="col-12 col-md-12">
           <label className="form-label" htmlFor="description">Description</label>
-          <textarea
+        <textarea
-            rows="3"
+          rows="3"
-            {...register("description")}
+          {...register("description")}
-            className={`form-control ${errors.description ? 'is-invalids' : ''}`}
+          className={`form-control ${errors.description ? 'is-invalids' : ''}`}
-          ></textarea>
+          onChange={(e) => {
-          {errors.description && (
+            setDescriptionLength(e.target.value.length);
-            <p className="text-danger">{errors.description.message}</p>
+            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 col-md-12 mx-2s " >