Sriram- add special toggles for weekly summary reports

src/components/WeeklySummariesReport/FormattedReport.jsx

@@ -68,6 +68,8 @@ function FormattedReport({
   canSeeBioHighlight,
   darkMode,
   handleTeamCodeChange,
+  handleSpecialColorDotClick,
+  selectedSpecialColorsMap,
 }) {
   const loggedInUserEmail = auth?.user?.email ? auth.user.email : '';
 
@@ -93,6 +95,8 @@ function FormattedReport({
             darkMode={darkMode}
             handleTeamCodeChange={handleTeamCodeChange}
             auth={auth}
+            handleSpecialColorDotClick={handleSpecialColorDotClick}
+            selectedSpecialColorsMap={selectedSpecialColorsMap}
           />
         ))}
       </ListGroup>
@@ -207,6 +211,8 @@ function ReportDetails({
   darkMode,
   handleTeamCodeChange,
   auth,
+  handleSpecialColorDotClick,
+  selectedSpecialColorsMap,
 }) {
   const [filteredBadges, setFilteredBadges] = useState([]);
   const ref = useRef(null);
@@ -227,7 +233,14 @@ function ReportDetails({
     <li className={`list-group-item px-0 ${darkMode ? 'bg-yinmn-blue' : ''}`} ref={ref}>
       <ListGroup className="px-0" flush>
         <ListGroupItem darkMode={darkMode}>
-          <Index summary={summary} weekIndex={weekIndex} allRoleInfo={allRoleInfo} auth={auth} />
+          <Index
+            summary={summary}
+            weekIndex={weekIndex}
+            allRoleInfo={allRoleInfo}
+            auth={auth}
+            handleSpecialColorDotClick={handleSpecialColorDotClick}
+            selectedSpecialColorsMap={selectedSpecialColorsMap}
+          />
         </ListGroupItem>
         <Row className="flex-nowrap">
           <Col xs="6" className="flex-grow-0">
@@ -632,9 +645,17 @@ function WeeklyBadge({ summary, weekIndex, badges }) {
   );
 }
 
-function Index({ summary, weekIndex, allRoleInfo, auth }) {
+function Index({
+  summary,
+  weekIndex,
+  allRoleInfo,
+  auth,
+  handleSpecialColorDotClick,
+  selectedSpecialColorsMap,
+}) {
   const hoursLogged = (summary.totalSeconds[weekIndex] || 0) / 3600;
   const currentDate = moment.tz('America/Los_Angeles').startOf('day');
+  const colors = ['purple', 'green', 'navy'];
 
   const googleDocLink = summary.adminLinks?.reduce((targetLink, currentElement) => {
     if (currentElement.Name === 'Google Doc') {
@@ -677,6 +698,27 @@ function Index({ summary, weekIndex, allRoleInfo, auth }) {
         </div>
       </div>
 
+      <div style={{ display: 'inline-block', marginLeft: '10px' }}>
+        {colors.map(color => (
+          <span
+            key={color}
+            onClick={() => handleSpecialColorDotClick(summary._id, color)}
+            style={{
+              display: 'inline-block',
+              width: '15px',
+              height: '15px',
+              margin: '0 5px',
+              borderRadius: '50%',
+              backgroundColor: selectedSpecialColorsMap[color].includes(summary._id)
+                ? color
+                : 'transparent',
+              border: `3px solid ${color}`,
+              cursor: 'pointer',
+            }}
+          />
+        ))}
+      </div>
+
       {showStar(hoursLogged, summary.promisedHoursByWeek[weekIndex]) && (
         <i
           className="fa fa-star"

src/components/WeeklySummariesReport/WeeklySummariesReport.css

@@ -167,6 +167,31 @@
   color: red;
 }
 
+/* Colored knobs for each toggle */
+#purple-toggle + .switch-toggle-label .switch-toggle-switch {
+  background-color: purple;
+}
+
+#green-toggle + .switch-toggle-label .switch-toggle-switch {
+  background-color: green;
+}
+
+#navy-toggle + .switch-toggle-label .switch-toggle-switch {
+  background-color: navy;
+}
+
+#purple-toggle:checked + .switch-toggle-label .switch-toggle-inner:before {
+  background-color: rgba(223, 57, 231);
+}
+
+#green-toggle:checked + .switch-toggle-label .switch-toggle-inner:before {
+  background-color: rgba(55, 223, 55); 
+}
+
+#navy-toggle:checked + .switch-toggle-label .switch-toggle-inner:before {
+  background-color: rgb(83, 83, 223);
+}
+
 @media screen and (max-width: 544px) {
   .responsive-font-size {
     font-size: 0.75rem !important;

src/components/WeeklySummariesReport/WeeklySummariesReport.jsx

@@ -88,6 +88,16 @@ export class WeeklySummariesReport extends Component {
       replaceCodeError: null,
       replaceCodeLoading: false,
       // weeklyRecipientAuthPass: '',
+      selectedSpecialColorsMap: {
+        purple: [],
+        green: [],
+        navy: [],
+      },
+      selectedSpecialColors: {
+        purple: false,
+        green: false,
+        navy: false,
+      },
     };
   }
 
@@ -389,6 +399,8 @@ export class WeeklySummariesReport extends Component {
       selectedBioStatus,
       tableData,
       COLORS,
+      selectedSpecialColorsMap,
+      selectedSpecialColors,
     } = this.state;
     const chartData = [];
     let temptotal = 0;
@@ -397,6 +409,12 @@ export class WeeklySummariesReport extends Component {
     const selectedCodesArray = selectedCodes.map(e => e.value);
     const selectedColorsArray = selectedColors.map(e => e.value);
 
+    const selectedUserIds = new Set(
+      Object.entries(selectedSpecialColors)
+        .filter(([, isSelected]) => isSelected) // Include only active colors
+        .flatMap(([color]) => selectedSpecialColorsMap[color]), // Get users for active colors
+    );
+
     const temp = summaries.filter(summary => {
       const { activeTab } = this.state;
       const hoursLogged = (summary.totalSeconds[navItems.indexOf(activeTab)] || 0) / 3600;
@@ -412,10 +430,12 @@ export class WeeklySummariesReport extends Component {
           hoursLogged > 0 &&
           hoursLogged >= summary.promisedHoursByWeek[navItems.indexOf(activeTab)] * 1.25);
 
+      const matchesSelectedUsers = selectedUserIds.size === 0 || selectedUserIds.has(summary._id);
       return (
         (selectedCodesArray.length === 0 || selectedCodesArray.includes(summary.teamCode)) &&
         (selectedColorsArray.length === 0 ||
           selectedColorsArray.includes(summary.weeklySummaryOption)) &&
+        matchesSelectedUsers &&
         isOverHours &&
         isBio
       );
@@ -532,6 +552,36 @@ export class WeeklySummariesReport extends Component {
     );
   };
 
+  handleSpecialColorToggleChange = event => {
+    const { id, checked } = event.target;
+    const color = id.split('-')[0];
+
+    this.setState(
+      prevState => ({
+        selectedSpecialColors: {
+          ...prevState.selectedSpecialColors,
+          [color]: checked,
+        },
+      }),
+      this.filterWeeklySummaries,
+    );
+  };
+
+  handleSpecialColorDotClick = (userId, color) => {
+    this.setState(prevState => {
+      const updatedMap = { ...prevState.selectedSpecialColorsMap };
+      // Remove user from all color lists
+      Object.keys(updatedMap).forEach(col => {
+        updatedMap[col] = updatedMap[col].filter(id => id !== userId);
+      });
+      // Add user to the selected color list
+      if (color) {
+        updatedMap[color].push(userId);
+      }
+      return { selectedSpecialColorsMap: updatedMap };
+    });
+  };
+
   handleTeamCodeChange = (oldTeamCode, newTeamCode, userIdObj) => {
     try {
       this.setState(prevState => {
@@ -826,6 +876,47 @@ export class WeeklySummariesReport extends Component {
         <Row style={{ marginBottom: '10px' }}>
           <Col lg={{ size: 10, offset: 1 }} xs={{ size: 8, offset: 4 }}>
             <div className="filter-container">
+              {hasPermissionToFilter && (
+                <div className="filter-style margin-right">
+                  <span>Filter by Special</span>
+                  <div className="switch-toggle-control">
+                    <input
+                      type="checkbox"
+                      className="switch-toggle"
+                      id="purple-toggle"
+                      onChange={this.handleSpecialColorToggleChange}
+                    />
+                    <label className="switch-toggle-label" htmlFor="purple-toggle">
+                      <span className="switch-toggle-inner" />
+                      <span className="switch-toggle-switch" />
+                    </label>
+                  </div>
+                  <div className="switch-toggle-control">
+                    <input
+                      type="checkbox"
+                      className="switch-toggle"
+                      id="green-toggle"
+                      onChange={this.handleSpecialColorToggleChange}
+                    />
+                    <label className="switch-toggle-label" htmlFor="green-toggle">
+                      <span className="switch-toggle-inner" />
+                      <span className="switch-toggle-switch" />
+                    </label>
+                  </div>
+                  <div className="switch-toggle-control">
+                    <input
+                      type="checkbox"
+                      className="switch-toggle"
+                      id="navy-toggle"
+                      onChange={this.handleSpecialColorToggleChange}
+                    />
+                    <label className="switch-toggle-label" htmlFor="navy-toggle">
+                      <span className="switch-toggle-inner" />
+                      <span className="switch-toggle-switch" />
+                    </label>
+                  </div>
+                </div>
+              )}
               {(hasPermissionToFilter || this.canSeeBioHighlight) && (
                 <div className="filter-style margin-right">
                   <span>Filter by Bio Status</span>
@@ -977,6 +1068,8 @@ export class WeeklySummariesReport extends Component {
                         canSeeBioHighlight={this.canSeeBioHighlight}
                         darkMode={darkMode}
                         handleTeamCodeChange={this.handleTeamCodeChange}
+                        handleSpecialColorDotClick={this.handleSpecialColorDotClick}
+                        selectedSpecialColorsMap={this.state.selectedSpecialColorsMap}
                       />
                     </Col>
                   </Row>