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

@@ -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/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>
         )}