Modified report comments section.

src/components/Activities/ReportTaskComments.jsx

@@ -27,15 +27,21 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
   });
 
   const containerRef = useRef(null);
+  const firstRender = useRef(true);  
+
+
   useEffect(() => {
     setComment(commentsData?.comments);
   }, [commentsData]);
 
+  // Scroll logic: scroll to bottom when new comments are added
   useEffect(() => {
-    if (containerRef.current) {
+    if (!firstRender.current && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    } else {
+      firstRender.current = false;  // Mark the first render as complete
     }
-  }, [comments]);
+  }, [comments]);  // Run this when comments array is updated
 
   const onSubmit = async (data) => {
     let sendComment = {
@@ -70,9 +76,10 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
       // closeModal();
     } catch (error) {
       setloading(false);
-      showToast(error.response.data?.message || "Something wrong", "error");
+      showToast(error.response.data?.message || "Something went wrong", "error");
     }
   };
+
   return (
     <div
       className="modal-dialog modal-lg modal-simple report-task-comments-modal mx-sm-auto mx-1"
@@ -86,61 +93,56 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
             onClick={closeModal}
             aria-label="Close"
           ></button>
-          <p className="fs-6 text-dark text-start">
+          <p className="fs-6 text-dark text-start m-0">Activity Summary</p>
-            {`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
+          <p className="small-text text-start my-2">
-            <i className="bx bx-chevron-right"></i>{" "}
+            {comments && comments[0]?.comment}
-            {`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
+          </p>
-            <i className="bx bx-chevron-right"></i>
+          <p className="fw-bold my-2 text-start">
-            {`${commentsData?.workItem?.workArea?.areaName}`}
+            Assigned By :
-            <i className="bx bx-chevron-right"></i>
+            <span className=" ms-2">
-            {` ${commentsData?.workItem?.activityMaster?.activityName}`}
+              {commentsData?.assignedBy.firstName +
+                " " +
+                commentsData?.assignedBy.lastName}
+            </span>{" "}
           </p>
 
-          <ul
+          <p className="fw-bold my-2 text-start">
-            className="list-grouph px-0 mx-0 overflow-auto"
+            Loaction :
-            ref={containerRef}
+            <span className="fw-normal ms-2 text-start">
-            style={{ maxHeight: "400px" }}
+              {`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
-          >
+              <i className="bx bx-chevron-right"></i>{" "}
-            {comments &&
+              {`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
-              comments?.map((data) => {
+              <i className="bx bx-chevron-right"></i>
-                const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
+              {`${commentsData?.workItem?.workArea?.areaName}`}
-                const bgClass = getBgClassFromHash(fullName);
+              <i className="bx bx-chevron-right"></i>
-                return (
+              {` ${commentsData?.workItem?.activityMaster?.activityName}`}
-                  <li
+            </span>
-                    className={`list-group-item list-group-item-action  my-2 p-1`}
+          </p>
-                  >
+          <p className="fw-bold my-2 text-start">
-                    <div
+            Planned Work: {commentsData?.plannedTask}
-                      className={`li-wrapper d-flex justify-content-start align-items-start my-0 `}
+          </p>
-                    >
+          <p className="fw-bold my-2 text-start">
-                      <div className="avatar avatar-xs me-1">
+            {" "}
-                        <span
+            Completed Work : {commentsData?.completedTask}
-                          className={`avatar-initial rounded-circle bg-label-primary}`}
+          </p>
-                        >
+          <div className="d-flex align-items-center flex-wrap">
-                          {`${data?.employee?.firstName?.slice(
+            <p className="fw-bold text-start m-0 me-1">Team:</p>
-                            0,
+            <div className="d-flex flex-wrap align-items-center gap-2">
-                            1
+              {commentsData?.teamMembers?.map((member, idx) => (
-                          )} ${data?.employee?.lastName?.slice(0, 1)}`}
+                <span key={idx} className="d-flex align-items-center">
-                        </span>
+                  <Avatar
-                      </div>
+                    firstName={member?.firstName}
+                    lastName={member?.lastName}
+                    size="xs"
+                  />
+                  {member?.firstName + " " + member?.lastName}
+                </span>
+              ))}
+            </div>
+          </div>
 
-                      <div className={` text-start  py-0  `}>
+          <form onSubmit={handleSubmit(onSubmit)} className="text-start">
-                        <p className={`mb-0 text-${bgClass}`}>{fullName}</p>
+            <label className="fw-bold text-start my-1">Add comment :</label>
-                        <p
-                          className=" text-muted m-0 "
-                          style={{ fontSize: "10px" }}
-                        >
-                          {moment.utc(data?.commentDate).local().fromNow()}
-                        </p>
-                      </div>
-                    </div>
-                    <p className={`ms-6 text-start mb-0 text-body`}>
-                      {data?.comment}
-                    </p>
-                  </li>
-                );
-              })}
-          </ul>
-          <form onSubmit={handleSubmit(onSubmit)}>
             <textarea
               {...register("comment")}
               className="form-control"
@@ -165,6 +167,47 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
               </button>
             </div>
           </form>
+
+          <ul
+            className="list-group px-0 mx-0 overflow-auto border-0"
+            // ref={containerRef}  // auto scroll according data
+            style={{ maxHeight: "200px" }}
+          >
+            {comments &&
+              comments
+                ?.slice()
+                .reverse()
+                .map((data, idx) => {
+                  const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
+                  const bgClass = getBgClassFromHash(fullName);
+                  return (
+                    <li
+                      className={`list-group-item list-group-item-action border-none my-1 p-1`}
+                      key={idx}
+                    >
+                      <div
+                        className={`li-wrapper d-flex justify-content-start align-items-start my-0`}
+                      >
+                        <div className="avatar avatar-xs me-1">
+                          <span
+                            className={`avatar-initial rounded-circle bg-label-primary`}
+                          >
+                            {`${data?.employee?.firstName?.slice(0, 1)} ${data?.employee?.lastName?.slice(0, 1)}`}
+                          </span>
+                        </div>
+
+                        <div className={`text-start py-0`}>
+                          <p className={`mb-0 text-${bgClass}`}>{fullName}</p>
+                          <p className="text-muted m-0" style={{ fontSize: "10px" }}>
+                            {moment.utc(data?.commentDate).local().fromNow()}
+                          </p>
+                        </div>
+                      </div>
+                      <p className={`ms-6 text-start mb-0 text-body`}>{data?.comment}</p>
+                    </li>
+                  );
+                })}
+          </ul>
         </div>
       </div>
     </div>