add TriMembersStateToggleSwitch

src/components/Reports/ProjectReport/PiechartByProject/PieChartByProject.css

@@ -4,7 +4,7 @@
   margin-bottom: 24px;
 
 }
-.pie-chart-container{
+.pie-chart-description{
   display: flex;
   justify-content: space-around;
   alignItems: center;

src/components/Reports/ProjectReport/PiechartByProject/PieChartByProject.jsx

@@ -1,12 +1,15 @@
 import React, { PureComponent, useEffect, useState } from 'react';
 import { PieChart, Pie, Sector, ResponsiveContainer } from 'recharts';
 import './PieChartByProject.css';
+import TriMembersStateToggleSwitch from './TriMembersStateToggleSwitch/TriMembersStateToggleSwitch'
+import style from '../../../UserProfile/UserProfileEdit/ToggleSwitch/ToggleSwitch.module.scss';
 
 export function PieChartByProject({
   mergedProjectUsersArray,
   projectName,
   darkMode
 }) {
+  const [showMembers, setShowMembers] = useState(null);
   const [userData, setUserData] = useState([]);
   const [isChecked, setIsChecked] = useState(false);
   const [windowSize, setWindowSize] = useState({
@@ -41,7 +44,7 @@ export function PieChartByProject({
     });
 
 
-    if (showInactive === true) {
+    if (showMembers === false) {
       const inactiveUsers = mergedProjectUsersArray.filter(member => !member.personId.isActive )
       setInactiveData(inactiveUsers);
 
@@ -62,8 +65,7 @@ export function PieChartByProject({
       });
       const sortedArr = inactiveArr.sort((a, b) => (a.name).localeCompare(b.name))
       setUserData(sortedArr)
-    }
-    if (showActive === true) {
+    } else    if (showMembers === true) {
       const activeUsers = mergedProjectUsersArray.filter(member => member.personId.isActive )
       setActiveData(activeUsers);
 
@@ -84,13 +86,12 @@ export function PieChartByProject({
       });
       const sortedArr = activeArr.sort((a, b) => (a.name).localeCompare(b.name))
       setUserData(sortedArr)
-    }
-    if (showInactive === false && showActive === false) {
+    } else {
       const sortedArr = arrData.sort((a, b) => (a.name).localeCompare(b.name))
       setUserData(sortedArr)
     }
 
-  }, [mergedProjectUsersArray,showInactive, showActive ])
+  }, [mergedProjectUsersArray,showMembers])
 
   useEffect(() => {
     window.addEventListener('resize', updateWindowSize);
@@ -109,35 +110,45 @@ export function PieChartByProject({
   const handleShowPieChart = () => {
     setIsChecked(!isChecked);
   };
+
+  const handleShowMembersChange = (newState) => {
+    if (newState.showActive) {
+      setShowMembers(true);
+    } else if (newState.showInactive) {
+      setShowMembers(false);
+    } else {
+      setShowMembers(null);
+    }
+  };
+
   return (
     <div className={darkMode ? 'text-light' : ''}>
       <div className='pie-chart-title'><h4>PieCharts</h4></div>
       <div><h5>{projectName}</h5></div>
-      <div className= "pie-chart-container" >
+      <div className= "pie-chart-description" >
         <div>
           <label style={{
             paddingRight: '1rem'
-          }}>{isChecked ? 'All-Time Total Hours by All Member (Hide Pie Chart)' : 'All-Time Total Hours by Member (Show PieChart)'}</label>
+          }}>{isChecked ? 'All-Time Total Hours by All Member (Hide PieChart)' : 'All-Time Total Hours by Member (Show PieChart)'}</label>
           <input
             type="checkbox"
             checked={isChecked}
             onChange={handleShowPieChart}
           />
 
         </div>
-        {isChecked && ( <div style={{textAlign:'left'}}>
-        <label style={{marginRight:'1rem'}}>{showActive ? ' Hide only Active Members Piechart ':' Show only Active Members Piechart' }</label>
-          <input
-            type="checkbox"
-            checked={showActive}
-            onChange={() => setShowActive(!showActive)}
-          />
-        <label style={{marginRight:'1rem', marginLeft:'1rem'}}>{showInactive ? 'Hide only Inactive Members PieChart ':' Show only Inactive Members Piechar' }</label>
-          <input
-            type="checkbox"
-            checked={showInactive}
-            onChange={() => setShowInactive(!showInactive)}
-          />
+        {isChecked && ( <div style={{textAlign:'left', margin:'auto'}}>
+        <p style={{textAlign:'center'}}>{showMembers === null ? 'All members' : ''}</p>
+        <div className={style.switchSection}>
+            <div style={{ wordBreak: 'keep-all', color: darkMode ? 'white' : ''}} className={style.switchContainer}>
+              <span style={{color: 'blue'}}> Inactive Members</span>
+              <TriMembersStateToggleSwitch
+              value={showMembers}
+              onChange={handleShowMembersChange}
+            />
+              <span style={{color: 'green'}}> Active Members</span>
+            </div>
+        </div>
           <p style={{fontWeight:'bold'}}>Total Active Members:  {activeData.length}  <span> - Hrs Applied: { globalactiveHours.toFixed(2) } </span> </p>
           <p style={{fontWeight:'bold'}}>Total Inactive Members: {inactiveData.length} <span> - Hrs Applied: { globalInactiveHours.toFixed(2) } </span> </p>
           <p style={{fontWeight:'bold'}}>Total Applied Hours: {totalHours.toFixed(2)} </p>

src/components/Reports/ProjectReport/PiechartByProject/TriMembersStateToggleSwitch/TriMembersStateToggleSwitch.css

@@ -0,0 +1,81 @@
+:root {
+  --blue: #0084ff;
+  --darkgray: #c0baba;
+  --green: green;
+
+  --switch-width: 60px;
+  --switch-height: calc(var(--switch-width) * 0.3);
+  --knob-width: calc(var(--switch-height) * 0.8);
+}
+
+.toggle-switch {
+  width: var(--switch-width);
+  height: var(--switch-height);
+  border-radius: calc(var(--switch-height) / 2);
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+  margin: 5px;
+}
+
+.knob {
+  width: var(--knob-width);
+  height: var(--knob-width);
+  background-color: #fff;
+  border-radius: 50%;
+  position: absolute;
+  top: calc(0.1 * var(--switch-height));
+  transition: all 0.3s ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+}
+
+.posted {
+  transform: translateX(calc(0.1 * var(--switch-height)));
+  -webkit-transform: translateX(calc(0.1 * var(--switch-height)));
+}
+
+.default {
+  transform: translateX(calc(var(--switch-width) / 2 - (var(--knob-width) / 2)));
+  -webkit-transform: translateX(calc(var(--switch-width) / 2 - (var(--knob-width) / 2)));
+}
+
+.requested {
+  transform: translateX(
+    calc(var(--switch-width) - (var(--knob-width)) - (0.1 * var(--switch-height)))
+  );
+  -webkit-transform: translateX(
+    calc(var(--switch-width) - (var(--knob-width)) - (0.1 * var(--switch-height)))
+  );
+}
+
+.bg-blue {
+  background-color: var(--blue);
+}
+
+.bg-green {
+  background-color: var(--green);
+}
+
+.bg-darkgray {
+  background-color: var(--darkgray);
+}
+
+.knob-area {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  width: var(--switch-width);
+  height: var(--switch-height);
+  border-radius: calc(var(--switch-height) / 2);
+  overflow: hidden;
+}
+
+.knob-area div {
+  width: 33.33%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/Reports/ProjectReport/PiechartByProject/TriMembersStateToggleSwitch/TriMembersStateToggleSwitch.jsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import './TriMembersStateToggleSwitch.css';
+
+function TriMembersStateToggleSwitch({ onChange }) {
+  const [position, setPosition] = useState('default');
+  const [bgColor, setBgColor] = useState('darkgray');
+
+  const handleClick = pos => {
+    setPosition(pos);
+    switch (pos) {
+      case 'posted':
+        setBgColor('blue');
+        onChange({ showInactive: true, showActive: false });
+        break;
+      case 'default':
+        setBgColor('darkgray');
+        onChange({ showInactive: false, showActive: false });
+        break;
+      case 'requested':
+        setBgColor('green');
+        onChange({ showInactive: false, showActive: true });
+        break;
+      default:
+        break;
+    }
+  };
+
+  useEffect(() => {
+    handleClick('default');
+  }, []);
+
+  return (
+    <div className={`toggle-switch bg-${bgColor}`}>
+      <div className="knob-area">
+        <div onClick={() => handleClick('posted')}></div>
+        <div onClick={() => handleClick('default')}></div>
+        <div onClick={() => handleClick('requested')}></div>
+      </div>
+      <div className={`knob ${position}`}></div>
+    </div>
+  );
+}
+
+export default TriMembersStateToggleSwitch;

src/components/Reports/ProjectReport/WbsPiechart/WbsPieChart.jsx

@@ -103,7 +103,7 @@ export function WbsPieChart({
 
         </div>
       </div>
-      {isChecked && ( <div style={{textAlign:'left'}}>
+      {isChecked && ( <div style={{textAlign:'left', marginLeft:'35%'}}>
           <p style={{fontWeight:'bold'}}>Total Active Members:  {activeData.length}  </p>
           <p style={{fontWeight:'bold'}}>Total Hours Commited: { totalHours.toFixed(2)} </p>