Merge pull request 'Add an info (ℹ️) icon to the Daily Progress Report’s Total Pending Task' (#435) from Kartik_Task#1361 into Organization_Management

Reviewed-on: #435
Merged

src/components/DailyProgressRport/TaskReportList.jsx

@@ -154,8 +154,7 @@ const ProgrssReportColumn = [
             <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>
@@ -198,13 +197,23 @@ const ProgrssReportColumn = [
         <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>