Add an info (ℹ️) icon to the Daily Progress Report’s Total Pending Task

src/components/DailyProgressRport/TaskReportList.jsx

@@ -40,7 +40,7 @@ const TaskReportList = () => {
     service
   );
 
-const ProgrssReportColumn = [
+  const ProgrssReportColumn = [
     {
       key: "activity",
       label: "Activity",
@@ -149,20 +149,19 @@ const ProgrssReportColumn = [
       data-bs-content={`
         <div class="border border-secondary rounded custom-popover p-2 px-3">
           ${task.teamMembers
-            .map(
-              (m) => `
+          .map(
+            (m) => `
             <div class="d-flex align-items-center gap-2 mb-2">
               <div class="avatar avatar-xs">
                 <span class="avatar-initial rounded-circle bg-label-primary">
-                  ${m?.firstName?.charAt(0) || ""}${
-                m?.lastName?.charAt(0) || ""
+                  ${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
               }
                 </span>
               </div>
               <span>${m.firstName} ${m.lastName}</span>
             </div>`
-            )
-            .join("")}
+          )
+          .join("")}
         </div>
       `}
     >
@@ -194,17 +193,27 @@ const ProgrssReportColumn = [
   if (isError) return <div>Loading....</div>;
   return (
     <div className="mt-2">
-     <table className="table">
+      <table className="table">
         <thead>
           <tr>
             <th className="text-start">Activity</th>
-            <th>Total Pending</th>
+            <th>
+              <span>
+                Total Pending{" "}
+                <HoverPopup
+                  title="Total Pending Task"
+                  content={<p>This shows the total pending tasks for each activity on that date.</p>}
+                >
+                  <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
+                </HoverPopup>
+              </span>
+            </th>
             <th>
               <span>
                 Reported/Planned{" "}
                 <HoverPopup
                   title="Reported and Planned Task"
-                  content={<p>This shows the reported versus planned tasks for each activity. on that Date</p>}
+                  content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
                 >
                   <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
                 </HoverPopup>

src/components/common/HoverPopup.jsx

@@ -53,8 +53,8 @@ const HoverPopup = ({ title, content, children }) => {
             marginTop: "8px",
           }}
         >
-          {title && <h6 className="mb-2">{title}</h6>}
-          <div>{content}</div>
+          {title && <h6 className="mb-2 text-capitalize">{title}</h6>}
+          <div className="text-capitalize">{content}</div>
         </div>
       )}
     </div>