From 4a16e27a1ea1c0acbd08427353195e524735212d Mon Sep 17 00:00:00 2001
From: Vaibhav Surve <vaibhav.surve@marcoaiot.com>
Date: Fri, 18 Apr 2025 17:40:47 +0530
Subject: [PATCH 1/3] Add character length tracking for address and description
 fields in employee management forms

---
 src/components/Employee/ManageEmployee.jsx | 31 ++++++++++++++------
 src/components/master/CreateJobRole.jsx    | 33 +++++++++++++--------
 src/components/master/CreateRole.jsx       | 24 +++++++++++----
 src/components/master/EditRole.jsx         | 34 +++++++++++++++-------
 4 files changed, 85 insertions(+), 37 deletions(-)

diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx
index 2ece873e..aab94535 100644
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@@ -30,7 +30,9 @@ 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() } : {}),
     FirstName: z.string().min(1, { message: "First Name is required" }),
@@ -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
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
+                      <div 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
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
+                      <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                         {errors.PermanentAddress.message}
                       </div>
                     )}
diff --git a/src/components/master/CreateJobRole.jsx b/src/components/master/CreateJobRole.jsx
index edcc0b84..6b52b10b 100644
--- a/src/components/master/CreateJobRole.jsx
+++ b/src/components/master/CreateJobRole.jsx
@@ -54,18 +54,20 @@ const CreateJobRole = ({onClose}) => {
    
      
     };
-    const resetForm =()=>{
-        reset({
-            role:"",
-            description:""
-        })
-    }
+    const resetForm = () => {
+      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)}>
       
@@ -79,11 +81,18 @@ const CreateJobRole = ({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>
+        <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>
           )}
diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index 48c2fa3c..ae9ce302 100644
--- a/src/components/master/CreateRole.jsx
+++ b/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
-            rows="3"
-            {...register("description")}
-            className={`form-control ${errors.description ? 'is-invalids' : ''}`}
-          ></textarea>
+        <textarea
+          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>
           )}
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index 51652f05..4cb658e4 100644
--- a/src/components/master/EditRole.jsx
+++ b/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
-            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 col-md-12 mx-2s " >
-- 
2.43.0


From 48d589d92c65ade48e60762d4ed14a5429c4c525 Mon Sep 17 00:00:00 2001
From: Vaibhav Surve <vaibhav.surve@marcoaiot.com>
Date: Fri, 18 Apr 2025 17:41:03 +0530
Subject: [PATCH 2/3] Add character length tracking for project address and
 description fields

---
 src/components/Project/ManageProjectInfo.jsx | 19 ++++++----
 src/components/master/EditJobRole.jsx        | 38 +++++++++++++-------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/Project/ManageProjectInfo.jsx b/src/components/Project/ManageProjectInfo.jsx
index 08808fa8..0bb57441 100644
--- a/src/components/Project/ManageProjectInfo.jsx
+++ b/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" >
diff --git a/src/components/master/EditJobRole.jsx b/src/components/master/EditJobRole.jsx
index 0f12e5ea..55d9228c 100644
--- a/src/components/master/EditJobRole.jsx
+++ b/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">
-- 
2.43.0


From 0cfe9cb9177dc3fc3dafd4dd0aac4c6913cbf0d5 Mon Sep 17 00:00:00 2001
From: Vaibhav Surve <vaibhav.surve@marcoaiot.com>
Date: Fri, 18 Apr 2025 17:44:59 +0530
Subject: [PATCH 3/3] Update character count messages to use "characters left"
 for clarity

---
 src/components/Employee/ManageEmployee.jsx   | 4 ++--
 src/components/Project/ManageProjectInfo.jsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx
index aab94535..224153c8 100644
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@@ -441,7 +441,7 @@ const ManageEmployee = () => {
                       }}
                     ></textarea>
                     <div className="text-end small">
-                      {500 - currentAddressLength} characters remaining
+                      {500 - currentAddressLength} characters left
                     </div>
                     {errors.CurrentAddress && (
                       <div className="danger-text text-start" style={{ fontSize: "12px" }}>
@@ -467,7 +467,7 @@ const ManageEmployee = () => {
                       }}
                     ></textarea>
                     <div className="text-end small">
-                      {500 - permanentAddressLength} characters remaining
+                      {500 - permanentAddressLength} characters left
                     </div>
                     {errors.PermanentAddress && (
                       <div className="danger-text text-start" style={{ fontSize: "12px" }}>
diff --git a/src/components/Project/ManageProjectInfo.jsx b/src/components/Project/ManageProjectInfo.jsx
index 0bb57441..88cbb5d7 100644
--- a/src/components/Project/ManageProjectInfo.jsx
+++ b/src/components/Project/ManageProjectInfo.jsx
@@ -219,7 +219,7 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
                 />
               </div>
               <div className="text-end" style={{ fontSize: "12px" }}>
-                {maxAddressLength - addressLength} characters remaining
+                {maxAddressLength - addressLength} characters left
               </div>
               {errors.projectAddress && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.projectAddress.message}</div>}
             </div>
-- 
2.43.0