Fix overlapping Project box in 'Hours Completed' chart section

Author: pavanputti

src/components/Reports/TeamReport/TeamReport.jsx

@@ -39,6 +39,9 @@ export function TeamReport({ match }) {
     isActive: false,
     isInactive: false,
   });
+  
+  // Add state for the search input value (separate from searchParams)
+  const [searchInputValue, setSearchInputValue] = useState('');
   const hasFetchIds = useRef(new Set());
 
   const [selectedTeams] = useState([]);
@@ -150,17 +153,7 @@ export function TeamReport({ match }) {
     }
   };
 
-  const debounceSearchByName = debounce(value => {
-    setSearchParams(prevParams => ({
-      ...prevParams,
-      teamName: value,
-    }));
-  }, 300);
-
-  function handleSearchByName(event) {
-    event.persist();
-    debounceSearchByName(event.target.value);
-  }
+  // Removed automatic search - now search only happens on button click
 
   function handleCheckboxChange(event) {
     const { id, checked } = event.target;
@@ -201,6 +194,7 @@ export function TeamReport({ match }) {
     }
   }, [dispatch, allTeams]);
 
+
   useEffect(() => {
     let isMounted = true; // flag to check component mount status
     const fetchTeamDetails = async teamId => {
@@ -411,13 +405,47 @@ export function TeamReport({ match }) {
               >
                 Name
               </label>
-              <input
-                type="text"
-                className="form-control rounded-1 w-auto"
-                placeholder="Search team name"
-                id="search-by-name"
-                onChange={event => handleSearchByName(event)}
-              />
+              <div className="input-group">
+                <input
+                  type="text"
+                  className="form-control rounded-1"
+                  placeholder="Search team name"
+                  id="search-by-name"
+                  value={searchInputValue}
+                  onChange={event => setSearchInputValue(event.target.value)}
+                />
+                <div className="input-group-append">
+                  <button
+                    type="button"
+                    className={`btn ${darkMode ? 'btn-outline-light' : 'btn-outline-secondary'}`}
+                    onClick={() => {
+                      // Trigger search when button is clicked
+                      setSearchParams(prevParams => ({
+                        ...prevParams,
+                        teamName: searchInputValue,
+                      }));
+                    }}
+                    title="Search teams"
+                  >
+                    🔍
+                  </button>
+                  <button
+                    type="button"
+                    className={`btn ${darkMode ? 'btn-outline-light' : 'btn-outline-secondary'}`}
+                    onClick={() => {
+                      // Clear search
+                      setSearchInputValue('');
+                      setSearchParams(prevParams => ({
+                        ...prevParams,
+                        teamName: '',
+                      }));
+                    }}
+                    title="Clear search"
+                  >
+                    ✕
+                  </button>
+                </div>
+              </div>
             </div>
 
             {/* Created After Date Picker */}
@@ -514,11 +542,9 @@ export function TeamReport({ match }) {
                 </td>
               </tr>
             </thead>
-            {allTeamsMembers && allTeamsMembers.length > 0 ? (
-              <tbody className="table">
-                {/* eslint-disable-next-line no-shadow */}
-                {/* Note: the handleSearch() function will cause the white page error */}
-                {handleSearch().map((teamData, index) => (
+            <tbody className="table">
+              {allTeamsMembers && allTeamsMembers.length > 0 ? (
+                handleSearch().map((teamData, index) => (
                   <tr className={`table-row ${darkMode ? 'bg-yinmn-blue text-light table-hover-dark' : ''}`} key={teamData._id}>
                     <td>
                       <input
@@ -566,23 +592,19 @@ export function TeamReport({ match }) {
                     <td>{handleDate(teamData?.createdDatetime)}</td>
                     <td>{handleDate(teamData?.modifiedDatetime)}</td>
                   </tr>
-                ))}
-              </tbody>
-            ) : (
-              <tbody>
+                ))
+              ) : (
                 <tr style={{ backgroundColor: darkMode ? '#3A506B' : 'white' }}>
-                  <td />
-                  <td />
-                  <td />
-                  <td>
-                    <strong className={darkMode ? 'text-light' : ''}>Loading...</strong>
+                  <td colSpan="7" className="text-center">
+                    <strong className={darkMode ? 'text-light' : ''}>
+                      {allTeamsMembers && allTeamsMembers.length === 0 
+                        ? 'No teams found. Please check your permissions or contact an administrator.' 
+                        : 'Loading teams...'}
+                    </strong>
                   </td>
-                  <td />
-                  <td />
-                  <td />
                 </tr>
-              </tbody>
-            )}
+              )}
+            </tbody>
           </table>
         </ReportPage.ReportBlock>
       </div>

src/components/TotalOrgSummary/HoursCompleted/HoursCompletedBarChart.jsx

@@ -142,8 +142,41 @@ export default function HoursCompletedBarChart({ isLoading, data, darkMode }) {
         maxHeight: '548px',
         display: 'flex',
         flexDirection: 'column',
+        position: 'relative',
       }}
     >
+      {/* Projects box positioned in the right side middle area */}
+      <div
+        style={{
+          position: 'absolute',
+          top: '40%',
+          left: '65%',
+          transform: 'translateY(-50%)',
+          zIndex: 10,
+          background: 'white',
+          borderRadius: 4,
+          padding: 8,
+          boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+          border: '1px solid #eee',
+          minWidth: 130,
+          minHeight: 65,
+          display: 'grid',
+          justifyItems: 'center',
+          gap: 2,
+        }}
+      >
+        <div style={{ color: '#444', fontWeight: 'bold', fontSize: 15 }}>Projects</div>
+        <div style={{ color: '#222', fontWeight: 'bold', fontSize: 14 }}>
+          {projectBarInfo.amount}
+        </div>
+        <div style={{ color: '#666', fontSize: 10 }}>({projectBarInfo.percentage})</div>
+        {projectBarInfo.ifcompare && (
+          <div style={{ color: projectBarInfo.fontcolor, fontSize: 10, fontWeight: 'bold' }}>
+            {projectBarInfo.change}
+          </div>
+        )}
+      </div>
+
       <div style={{ textAlign: 'center', marginBottom: 0 }}>
         <div
           style={{
@@ -186,7 +219,6 @@ export default function HoursCompletedBarChart({ isLoading, data, darkMode }) {
           tickInterval={tickInterval}
           // renderCustomizedLabel={renderCustomizedLabel}
           darkMode={darkMode}
-          projectBarInfo={projectBarInfo}
           yAxisLabel="Hours"
         />
       </div>

src/components/TotalOrgSummary/TinyBarChart.jsx

@@ -12,47 +12,6 @@ import {
   ReferenceLine,
 } from 'recharts';
 
-function ProjectLabel({ viewBox, info }) {
-  return (
-    <foreignObject
-      x={viewBox.x + 60}
-      y={viewBox.y + 10}
-      width={140}
-      height={70}
-      style={{ overflow: 'visible' }}
-    >
-      <div
-        style={{
-          textAlign: 'left',
-          color: info.fontcolor,
-          fontSize: 14,
-          background: 'white',
-          borderRadius: 4,
-          padding: 6,
-          boxShadow: '0 1px 4px #ccc',
-          lineHeight: 1.2,
-          border: '1px solid #eee',
-          minWidth: 120,
-          minHeight: 60,
-          pointerEvents: 'none',
-          display: 'grid',
-          justifyItems: 'center',
-          gap: 1,
-        }}
-      >
-        <div style={{ color: '#444', fontWeight: 'bold', fontSize: 15 }}>Projects</div>
-        <div style={{ color: '#222', fontWeight: 'bold', fontSize: 14 }}>{info.amount}</div>
-        <div style={{ color: '#666', fontSize: 10 }}>({info.percentage})</div>
-        {info.ifcompare && (
-          <div style={{ color: info.fontcolor, fontSize: 10, fontWeight: 'bold' }}>
-            {info.change}
-          </div>
-        )}
-      </div>
-    </foreignObject>
-  );
-}
-
 export default function TinyBarChart(props) {
   const {
     chartData,
@@ -65,12 +24,13 @@ export default function TinyBarChart(props) {
   } = props;
 
   return (
-    <ResponsiveContainer maxWidth={600} maxHeight={400} minWidth={180} minHeight={340}>
+    <ResponsiveContainer width="100%" height="100%" maxHeight={400} minWidth={180} minHeight={340}>
       <BarChart
         data={chartData}
         margin={{
           top: 50,
           bottom: 40,
+          left: 40,
           right: 20,
         }}
       >
@@ -86,10 +46,11 @@ export default function TinyBarChart(props) {
             value: yAxisLabel,
             angle: -90,
             position: 'insideLeft',
-            offset: 20,
+            offset: 5,
             fill: darkMode ? 'white' : '#444',
-            fontSize: 14,
+            fontSize: 12,
             fontWeight: 'bold',
+            style: { textAnchor: 'middle' },
           }}
         />
         <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
@@ -105,7 +66,6 @@ export default function TinyBarChart(props) {
             stroke={darkMode ? 'lightgreen' : 'green'}
             strokeDasharray="6 6"
             ifOverflow="extendDomain"
-            label={<ProjectLabel info={projectBarInfo} />}
           />
         )}
       </BarChart>