Merge pull request #4613 from OneCommunityGlobal/venkataramanan_fix_filter_bio_status_visibility

Venkataramanan fix: filter bio status issue in weekly summary reports page

Author: one-community

src/components/WeeklySummariesReport/FormattedReport.jsx

@@ -316,8 +316,27 @@ function ReportDetails({
             isFinalWeek={isFinalWeek}
           />
         </ListGroupItem>
+        <ListGroupItem darkMode={darkMode}>
+          <div
+            style={{
+              backgroundColor: isMeetCriteria ? '#ffff66' : 'transparent',
+              width: '100%',
+              padding: '6px 12px 6px 0px',
+            }}
+          >
+            <Bio
+              bioCanEdit={bioCanEdit && !cantEditJaeRelatedRecord}
+              userId={summary._id}
+              bioPosted={summary.bioPosted}
+              summary={summary}
+              getWeeklySummariesReport={getWeeklySummariesReport}
+            />
+          </div>
+        </ListGroupItem>
+
+        {/* TWO-COLUMN CONTENT BELOW */}
         <Row>
-          <Col md="6" xs="12" className="flex-grow-0">
+          <Col md="6" xs="12">
             <ListGroupItem darkMode={darkMode}>
               <TeamCodeRow
                 canEditTeamCode={canEditTeamCode && !cantEditJaeRelatedRecord}
@@ -327,17 +346,6 @@ function ReportDetails({
                 getWeeklySummariesReport={getWeeklySummariesReport}
               />
             </ListGroupItem>
-            <ListGroupItem darkMode={darkMode}>
-              <div style={{ backgroundColor: isMeetCriteria ? 'yellow' : 'none' }}>
-                <Bio
-                  bioCanEdit={bioCanEdit && !cantEditJaeRelatedRecord}
-                  userId={summary._id}
-                  bioPosted={summary.bioPosted}
-                  summary={summary}
-                  getWeeklySummariesReport={getWeeklySummariesReport}
-                />
-              </div>
-            </ListGroupItem>
 
             <ListGroupItem darkMode={darkMode}>
               <TotalValidWeeklySummaries
@@ -346,6 +354,7 @@ function ReportDetails({
                 darkMode={darkMode}
               />
             </ListGroupItem>
+
             <ListGroupItem darkMode={darkMode}>
               <p
                 style={{
@@ -359,10 +368,12 @@ function ReportDetails({
                 Hours logged: {hoursLogged.toFixed(2)} / {summary.promisedHoursByWeek[weekIndex]}
               </p>
             </ListGroupItem>
+
             <ListGroupItem darkMode={darkMode}>
               <WeeklySummaryMessage summary={summary} weekIndex={weekIndex} />
             </ListGroupItem>
           </Col>
+
           <Col
             xs="6"
             style={{

src/components/WeeklySummariesReport/WeeklySummariesReport.jsx

@@ -2055,6 +2055,7 @@ const WeeklySummariesReport = props => {
             hasPermissionToFilter={hasPermissionToFilter}
             editable={true}
             formId="report"
+            canSeeBioHighlight={permissionState.canSeeBioHighlight}
           />
         </Col>
       </Row>

src/components/WeeklySummariesReport/WeeklySummariesReport.module.css

@@ -12,6 +12,13 @@
   border-color: #fff #dee2e6 #dee2e6;
 }
 
+.bioHighlight {
+  width: calc(100%, 24px);
+  margin-left: -12px;
+  margin-right: -12px;
+  padding: 8px 12px;
+}
+
 .reportWrapper {
   padding: 20px 0;
   margin-top: 5px;

src/components/WeeklySummariesReport/WeeklySummariesToggleFilter.jsx

@@ -11,6 +11,7 @@ export default function WeeklySummariesToggleFilter({
   editable,
   formId,
   hasPermission,
+  canSeeBioHighlight,
 }) {
   const handleTrophyToggleChange = () => {
     toggleField(setState, 'selectedTrophies');
@@ -66,7 +67,7 @@ export default function WeeklySummariesToggleFilter({
           </div>
         </div>
       )}
-      {(hasPermissionToFilter || hasPermission?.('highlightEligibleBios')) && (
+      {(hasPermissionToFilter || canSeeBioHighlight) && (
         <div className={`${styles.filterStyle} ml-3`} style={{ minWidth: 'max-content' }}>
           <span>Filter by Bio Status</span>
           <div className={styles.switchToggleControl}>
@@ -139,4 +140,5 @@ WeeklySummariesToggleFilter.propTypes = {
   editable: PropTypes.bool,
   formId: PropTypes.string.isRequired,
   hasPermission: PropTypes.func,
+  canSeeBioHighlight: PropTypes.bool,
 };