modified assign task popup from daily task planning.

1. adjusting margin and padding.
2. All the fonts are same.
3. Bold the 1 number and adding line into the unit.

src/components/Project/AssignRole.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
@@ -35,6 +35,48 @@ const AssignRoleModel = ({ assignData, onClose }) => {
         })
     ),
   });
+
+  const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
+  const helpPopupRefTarget = useRef(null);
+
+  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);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isHelpVisibleTarget, isHelpVisiblePending]);
+
+
   const [plannedTask, setPlannedTask] = useState();
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
@@ -156,12 +198,12 @@ const AssignRoleModel = ({ assignData, onClose }) => {
             aria-label="Close"
           ></button>
           <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
-            <strong>Assign Task</strong>
+            <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
-            <div className="container my-4">
+            <div className="container my-3">
               <div className="mb-1">
                 <p className="mb-0">
-                  <span className="fs-sm-5   fs-6 text-dark text-start d-flex align-items-center flex-wrap">
+                  <span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
-                    <strong className="me-2">Work Location:</strong>
+                    <p className="me-2 m-0 font-bold">Work Location :</p>
                     {[
                       assignData?.building?.name,
                       assignData?.floor?.floorName,
@@ -186,16 +228,15 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                     <div className="row mb-1">
                       <div className="col-12">
                         <div className="form-text text-start">
-
+                          <div className="d-flex align-items-center form-text fs-7">
-                          <div className="d-flex align-items-center">
+                            <span className="text-dark">Select Team</span>
-                            Select Team
                             <div className="me-2">{displayedSelection}</div>
                             <a
                               className="dropdown-toggle hide-arrow cursor-pointer"
                               data-bs-toggle="dropdown"
                               aria-expanded="false"
                             >
-                              <i className="bx bx-filter bx-lg"></i>
+                              <i className="bx bx-filter bx-lg text-primary"></i>
                             </a>
 
                             <ul className="dropdown-menu p-2 text-capitalize">
@@ -347,42 +388,70 @@ 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 fs-7"
+                          className="form-text text-dark align-items-center d-flex"
                           htmlFor="inlineCheckbox1"
                         >
                           Pending Task of Activity :
-                        </label>
                           <label
                             className="form-check-label fs-7 ms-4"
                             htmlFor="inlineCheckbox1"
                           >
-
+                            <strong>
                               {assignData?.workItem?.workItem?.plannedWork -
-                            assignData?.workItem?.workItem?.completedWork}{" "}
+                                assignData?.workItem?.workItem?.completedWork}
-                          {
+                            </strong>{" "}
-                            assignData?.workItem?.workItem?.activityMaster
+
-                              ?.unitOfMeasurement
+                            <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"
+                            >
+                              <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>
+                        </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
-                          className="form-check-label fs-7"
+                          className="text-dark text-start d-flex align-items-center flex-wrap form-text"
                           htmlFor="inlineCheckbox1"
                         >
-                          Target for Today:
+                          <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">
+                      <div className="form-check form-check-inline col-sm-3  mt-2" style={{ marginLeft: '-28px' }}>
-                        
                         <Controller
                           name="plannedTask"
                           control={control}
-                          
                           render={({ field }) => (
                             <div className="d-flex align-items-center gap-1 ">
                               <input
@@ -392,31 +461,53 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                 id="defaultFormControlInput"
                                 aria-describedby="defaultFormControlHelp"
                               />
-                              <span style={{ paddingLeft: '6px' }}>{
+                              <span style={{ paddingLeft: '6px' }}>
-                            assignData?.workItem?.workItem?.activityMaster
+                                {assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
-                              ?.unitOfMeasurement
+                              </span>
-                          }</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"
+                                >
+                                  <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>
                             </div>
                           )}
                         />
                       </div>
 
                       {errors.plannedTask && (
-                        <div className="danger-text mt-1">
+                        <div className="danger-text mt-1">{errors.plannedTask.message}</div>
-                          {errors.plannedTask.message}
+                      )}
+
+                      {isHelpVisible && (
+                        <div
+                          className="position-absolute bg-white border p-2 rounded shadow"
+                          style={{ zIndex: 10, marginLeft: '10px' }}
+                        >
+                          {/* Add your help content here */}
+                          <p className="mb-0">Enter the target value for today's task.</p>
                         </div>
                       )}
                     </div>
-
-
-
                     {errors.selectedEmployees && (
                       <div className="danger-text mt-1">
                         <p>{errors.selectedEmployees.message}</p>
                       </div>
                     )}
-
+                    <label
-                    <label htmlFor="exampleFormControlTextarea1" className="m-1 text-lg font-semibold block">
+                      className="form-text fs-7 m-1 text-lg text-dark"
+                      htmlFor="inlineCheckbox1"
+                    >
                       Description
                     </label>
                     <Controller