From f6cbc3acc93bf6783f9e6db578445a20182215e6 Mon Sep 17 00:00:00 2001
From: "kartik.sharma" <kartik.sharma@marcoaiot.com>
Date: Sat, 17 May 2025 16:10:11 +0530
Subject: [PATCH] Info-icon add

---
 src/components/Project/AssignRole.jsx | 169 ++++++++++++--------------
 1 file changed, 78 insertions(+), 91 deletions(-)

diff --git a/src/components/Project/AssignRole.jsx b/src/components/Project/AssignRole.jsx
index b502829f..da970231 100644
--- a/src/components/Project/AssignRole.jsx
+++ b/src/components/Project/AssignRole.jsx
@@ -41,40 +41,29 @@ const AssignRoleModel = ({ assignData, onClose }) => {
 
   const [isHelpVisible, setIsHelpVisible] = useState(false);
 
-  const handleHelpClickTarget = () => {
-    setIsHelpVisibleTarget(!isHelpVisibleTarget);
-  };
-
-  const [isHelpVisiblePending, setIsHelpVisiblePending] = useState(false);
-  const helpPopupRefPending = useRef(null);
-
-  const handleHelpClickPending = () => {
-    setIsHelpVisiblePending(!isHelpVisiblePending);
-  };
-
-  const handleClickOutside = (event) => {
-    if (
-      helpPopupRefTarget.current &&
-      !helpPopupRefTarget.current.contains(event.target) &&
-      isHelpVisibleTarget
-    ) {
-      setIsHelpVisibleTarget(false);
-    }
-    if (
-      helpPopupRefPending.current &&
-      !helpPopupRefPending.current.contains(event.target) &&
-      isHelpVisiblePending
-    ) {
-      setIsHelpVisiblePending(false);
-    }
-  };
+  const infoRef = useRef(null);
+  const infoRef1 = useRef(null);
 
   useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isHelpVisibleTarget, isHelpVisiblePending]);
+  
+   if (infoRef.current) {
+      new bootstrap.Popover(infoRef.current, {
+        trigger: 'focus',
+        placement: 'right',
+        html: true,
+        content: `<div>Pending Task assign for today</div>`,
+      });
+    }
+
+    if (infoRef1.current) {
+      new bootstrap.Popover(infoRef1.current, {
+        trigger: 'focus',
+        placement: 'right',
+        html: true,
+        content: `<div>Target task for today</div>`,
+      });
+    }
+  }, []);
 
 
   const [plannedTask, setPlannedTask] = useState();
@@ -387,57 +376,45 @@ const AssignRoleModel = ({ assignData, onClose }) => {
 
                     <div className="col-md text-start mx-0 px-0">
                       <div className="form-check form-check-inline mt-3 px-1">
-                        <label
-                          className="form-text text-dark align-items-center d-flex"
-                          htmlFor="inlineCheckbox1"
-                        >
+                        <label className="form-text text-dark align-items-center d-flex" htmlFor="inlineCheckbox1">
                           Pending Task of Activity :
-                          <label
-                            className="form-check-label fs-7 ms-4"
-                            htmlFor="inlineCheckbox1"
-                          >
+                          <label className="form-check-label fs-7 ms-4" htmlFor="inlineCheckbox1">
                             <strong>
-                              {assignData?.workItem?.workItem?.plannedWork -
-                                assignData?.workItem?.workItem?.completedWork}
+                              {assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}
                             </strong>{" "}
-
-                            <u>
-                              {assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
-                            </u>
-
+                            <u>{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}</u>
                           </label>
-                          <span
-                            style={{ marginLeft: '8px', cursor: 'pointer' }}
-                            onClick={handleHelpClickPending}
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="16"
-                              height="16"
-                              fill="currentColor"
-                              className="bi bi-question-circle"
-                              viewBox="0 0 16 16"
+
+                          <div style={{ display: "flex", alignItems: "center" }}>
+                            <div
+                              ref={infoRef}
+                              tabIndex="0"
+                              className="d-flex align-items-center avatar-group justify-content-center ms-2"
+                              data-bs-toggle="popover"
+                              data-bs-trigger="focus"
+                              data-bs-placement="right"
+                              data-bs-html="true"
+                              style={{ cursor: "pointer" }}
                             >
-                              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-                              <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.03l.208.346c.348.579.957.924 1.468.924.475 0 .826-.164.925-.369.17-.33.109-.935-.346-1.292-.457-.351-.887-.723-1.246-1.02zM6 10.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" />
-                            </svg>
-                          </span>
+                              &nbsp;
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="13"
+                                height="13"
+                                fill="currentColor"
+                                className="bi bi-info-circle"
+                                viewBox="0 0 16 16"
+                              >
+                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                              </svg>
+                            </div>
+                          </div>
                         </label>
                       </div>
-                      {isHelpVisiblePending && (
-                      <div
-                        className="position-absolute bg-white border p-2 rounded shadow"
-                        style={{ zIndex: 10, marginLeft: '10px' }}
-                        ref={helpPopupRefPending}
-                      >
-                        <p className="mb-0">
-                          Pending Task
-                        </p>
-                      </div>
-                    )}
-
-                      
                     </div>
+
+
                     <div className="col-md text-start mx-0 px-0">
                       <div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
                         <label
@@ -445,7 +422,6 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                           htmlFor="inlineCheckbox1"
                         >
                           <span>Target for Today</span>&nbsp;<span style={{ marginLeft: '46px' }}>:</span>
-
                         </label>
                       </div>
                       <div className="form-check form-check-inline col-sm-3  mt-2" style={{ marginLeft: '-28px' }}>
@@ -464,25 +440,36 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                               <span style={{ paddingLeft: '6px' }}>
                                 {assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
                               </span>
-                              <span
-                                style={{ marginLeft: "8px", cursor: "pointer" }}
-                                onClick={handleHelpClickPending}
-                              >
-                                <svg
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  width="16"
-                                  height="16"
-                                  fill="currentColor"
-                                  className="bi bi-question-circle"
-                                  viewBox="0 0 16 16"
+                              <div style={{ display: "flex", alignItems: "center" }}>
+                                <div
+                                  ref={infoRef1}
+                                  tabIndex="0"
+                                  className="d-flex align-items-center avatar-group justify-content-center ms-2"
+                                  data-bs-toggle="popover"
+                                  data-bs-trigger="focus"
+                                  data-bs-placement="right"
+                                  data-bs-html="true"
+
+                                  style={{ cursor: "pointer" }}
                                 >
-                                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-                                  <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.03l.208.346c.348.579.957.924 1.468.924.475 0 .826-.164.925-.369.17-.33.109-.935-.346-1.292-.457-.351-.887-.723-1.246-1.02zM6 10.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" />
-                                </svg>
-                              </span>
+                                  &nbsp;
+                                  <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="13"
+                                    height="13"
+                                    fill="currentColor"
+                                    className="bi bi-info-circle"
+                                    viewBox="0 0 16 16"
+                                  >
+                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                                  </svg>
+                                </div>
+                              </div>
                             </div>
                           )}
                         />
+
                       </div>
 
                       {errors.plannedTask && (