TTAHUB-5344 and TTAHUB-5348 - Compliant Follow-up Reviews with TTA Support widget Table View

docs/logical_data_model.puml

@@ -1376,6 +1376,7 @@ class Users{
 
 enum enum_Users_flags {
  actionable_notifications
+ compliant_follow_up_reviews_tta_support
  monitoring-regional-dashboard
  quality_assurance_dashboard
 }

frontend/src/pages/RegionalDashboard/__tests__/MonitoringReportDashboard.test.js

@@ -4,11 +4,16 @@ import { MemoryRouter } from 'react-router';
 import AppLoadingContext from '../../../AppLoadingContext';
 import UserContext from '../../../UserContext';
 import ActiveDeficientCitationsWithTtaSupport from '../../../widgets/ActiveDeficientCitationsWithTtaSupport';
+import CompliantFollowUpReviewsWithTtaSupport from '../../../widgets/CompliantFollowUpReviewsWithTtaSupport';
 import MonitoringReportDashboardOverview from '../../../widgets/MonitoringReportDashboardOverview';
 import MonitoringReportDashboard from '../components/MonitoringReportDashboard';
 
 jest.mock('../../../widgets/MonitoringReportDashboardOverview');
 jest.mock('../../../widgets/ActiveDeficientCitationsWithTtaSupport');
+jest.mock('../../../widgets/CompliantFollowUpReviewsWithTtaSupport');
+jest.mock('../../../widgets/ActiveNoncompliantCitationsWithTtaSupport', () => () => (
+  <div data-testid="noncompliant-citations-widget" />
+));
 jest.mock('../../../widgets/MonitoringRelatedTta', () => () => (
   <div data-testid="related-tta-widget" />
 ));
@@ -25,11 +30,14 @@ describe('MonitoringReportDashboard', () => {
     ActiveDeficientCitationsWithTtaSupport.mockImplementation(({ filters }) => (
       <div data-testid="citations-widget">{JSON.stringify(filters)}</div>
     ));
+    CompliantFollowUpReviewsWithTtaSupport.mockImplementation(({ filters }) => (
+      <div data-testid="compliant-follow-up-widget">{JSON.stringify(filters)}</div>
+    ));
   });
 
-  const renderDashboard = (filtersToApply = []) =>
+  const renderDashboard = (filtersToApply = [], user = { id: 1, flags: [] }) =>
     render(
-      <UserContext.Provider value={{ user: { id: 1, flags: [] } }}>
+      <UserContext.Provider value={{ user }}>
         <MemoryRouter>
           <AppLoadingContext.Provider value={{ setIsAppLoading: jest.fn() }}>
             <MonitoringReportDashboard filtersToApply={filtersToApply} />
@@ -43,6 +51,7 @@ describe('MonitoringReportDashboard', () => {
 
     expect(screen.getByTestId('overview-widget')).toBeInTheDocument();
     expect(screen.getByTestId('citations-widget')).toBeInTheDocument();
+    expect(screen.queryByTestId('compliant-follow-up-widget')).not.toBeInTheDocument();
   });
 
   it('passes merged filters including default startDate filter to both widgets', () => {
@@ -68,4 +77,26 @@ describe('MonitoringReportDashboard', () => {
     expect(overviewFilters[0]).toEqual(incomingFilters[0]);
     expect(citationsFilters[0]).toEqual(incomingFilters[0]);
   });
+
+  it('renders the compliant follow-up widget only when the feature flag is enabled', () => {
+    const incomingFilters = [
+      {
+        id: 'f1',
+        topic: 'region',
+        condition: 'is',
+        query: '1',
+      },
+    ];
+
+    renderDashboard(incomingFilters, {
+      id: 1,
+      flags: ['compliant_follow_up_reviews_tta_support'],
+    });
+
+    expect(screen.getByTestId('compliant-follow-up-widget')).toBeInTheDocument();
+    expect(CompliantFollowUpReviewsWithTtaSupport).toHaveBeenCalledWith(
+      expect.objectContaining({ filters: incomingFilters }),
+      expect.anything()
+    );
+  });
 });

frontend/src/pages/RegionalDashboard/components/MonitoringReportDashboard.js

@@ -1,8 +1,10 @@
 import { Grid } from '@trussworks/react-uswds';
 import PropTypes from 'prop-types';
 import React from 'react';
+import FeatureFlag from '../../../components/FeatureFlag';
 import ActiveDeficientCitationsWithTtaSupport from '../../../widgets/ActiveDeficientCitationsWithTtaSupport';
 import ActiveNoncompliantCitationsWithTtaSupport from '../../../widgets/ActiveNoncompliantCitationsWithTtaSupport';
+import CompliantFollowUpReviewsWithTtaSupport from '../../../widgets/CompliantFollowUpReviewsWithTtaSupport';
 import FindingCategoryHotspot from '../../../widgets/FindingCategoryHotspot';
 import MonitoringRelatedTta from '../../../widgets/MonitoringRelatedTta';
 import MonitoringReportDashboardOverview from '../../../widgets/MonitoringReportDashboardOverview';
@@ -13,6 +15,11 @@ export default function MonitoringReportDashboard({ filtersToApply }) {
       <Grid row gap>
         <MonitoringReportDashboardOverview filters={filtersToApply} loading={false} />
       </Grid>
+      <Grid row>
+        <FeatureFlag flag="compliant_follow_up_reviews_tta_support">
+          <CompliantFollowUpReviewsWithTtaSupport filters={filtersToApply} />
+        </FeatureFlag>
+      </Grid>
       <Grid row>
         <ActiveDeficientCitationsWithTtaSupport filters={filtersToApply} />
       </Grid>

frontend/src/widgets/CompliantFollowUpReviewsWithTtaSupport.js

@@ -0,0 +1,177 @@
+import PropTypes from 'prop-types';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import AppLoadingContext from '../AppLoadingContext';
+import ContentFromFeedByTag from '../components/ContentFromFeedByTag';
+import Drawer from '../components/Drawer';
+import DrawerTriggerButton from '../components/DrawerTriggerButton';
+import WidgetContainer from '../components/WidgetContainer';
+import WidgetContainerSubtitle from '../components/WidgetContainer/WidgetContainerSubtitle';
+import useMediaCapture from '../hooks/useMediaCapture';
+import useWidgetExport from '../hooks/useWidgetExport';
+import useWidgetMenuItems from '../hooks/useWidgetMenuItems';
+import CompliantReviewsGrid from './CompliantReviewsGrid';
+import HorizontalTableWidget from './HorizontalTableWidget';
+import withWidgetData from './withWidgetData';
+import './CompliantFollowUpReviewsWithTtaSupport.css';
+import NoResultsFound from '../components/NoResultsFound';
+
+const EXPORT_NAME = 'Compliant follow-up reviews with TTA support';
+
+export function CompliantFollowUpReviewsWithTtaSupport({ loading, data }) {
+  const { setIsAppLoading } = useContext(AppLoadingContext);
+  const drawerTriggerRef = useRef(null);
+  const widgetRef = useRef(null);
+  const capture = useMediaCapture(widgetRef, EXPORT_NAME);
+  const [showTabularData, setShowTabularData] = useState(false);
+
+  useEffect(() => {
+    setIsAppLoading(loading);
+  }, [loading, setIsAppLoading]);
+
+  const months = useMemo(() => {
+    if (!data?.months?.length) return [];
+    return data.months;
+  }, [data]);
+
+  // Build rows for HorizontalTableWidget (table view / export)
+  // Separate non-Total rows from the Total row so it can go in tfoot (bold)
+  const { tableData, footerData } = useMemo(() => {
+    const reviews = data?.reviews || [];
+    const nonTotalRows = reviews.filter((row) => !/total/i.test(row.name));
+    const totalRow = reviews.find((row) => /total/i.test(row.name));
+
+    const rows = nonTotalRows.map((row) => ({
+      heading: row.name,
+      id: row.name,
+      tooltip: true,
+      hideSortingIndicator: true,
+      data: [
+        ...row.values.map((value) => ({ value: value.toString() })),
+        { value: row.values.reduce((sum, v) => sum + Number(v), 0).toString() },
+      ],
+    }));
+
+    const footer = totalRow
+      ? [
+          'Total',
+          ...totalRow.values.map(String),
+          totalRow.values.reduce((sum, v) => sum + Number(v), 0).toString(),
+        ]
+      : false;
+
+    return { tableData: rows, footerData: footer };
+  }, [data]);
+
+  const { exportRows } = useWidgetExport(
+    tableData,
+    [...(months || []), 'Total'],
+    {},
+    'Follow-up reviews',
+    EXPORT_NAME
+  );
+
+  const menuItems = useWidgetMenuItems(
+    showTabularData,
+    setShowTabularData,
+    capture,
+    {},
+    exportRows
+  );
+
+  const subtitle = (
+    <div className="margin-bottom-3">
+      <WidgetContainerSubtitle>
+        Compliant follow-up reviews, broken out by those with and without citations addressed by
+        approved activity reports during the correction period.
+      </WidgetContainerSubtitle>
+      <div className="margin-top-1">
+        <DrawerTriggerButton drawerTriggerRef={drawerTriggerRef}>
+          About this data
+        </DrawerTriggerButton>
+      </div>
+    </div>
+  );
+
+  const showEmptyState = !loading && !data?.months?.length;
+  if (showEmptyState) {
+    return (
+      <>
+        <Drawer triggerRef={drawerTriggerRef} title="Compliant follow-up reviews with TTA support">
+          <ContentFromFeedByTag tagName="ttahub-compliant-follow-up-reviews" />
+        </Drawer>
+        <WidgetContainer
+          title="Compliant follow-up reviews with TTA support"
+          subtitle={subtitle}
+          menuItems={[]}
+          loading={loading}
+          titleMargin={{ bottom: 1 }}
+        >
+          <NoResultsFound
+            drawerConfig={{
+              tagName: 'ttahub-regional-dash-monitoring-filters',
+              title: 'Monitoring dashboard filters',
+            }}
+          />
+        </WidgetContainer>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Drawer triggerRef={drawerTriggerRef} title="Compliant follow-up reviews with TTA support">
+        <ContentFromFeedByTag tagName="ttahub-compliant-follow-up-reviews" />
+      </Drawer>
+      <WidgetContainer
+        title="Compliant follow-up reviews with TTA support"
+        subtitle={subtitle}
+        menuItems={menuItems}
+        loading={loading}
+        titleMargin={{ bottom: 1 }}
+      >
+        {showTabularData ? (
+          <HorizontalTableWidget
+            headers={months}
+            data={tableData}
+            caption="Compliant follow-up reviews with TTA support"
+            firstHeading="Follow-up reviews"
+            lastHeading="Totals"
+            showTotalColumn
+            stickyFirstColumn
+            stickyLastColumn
+            enableCheckboxes={false}
+            selectAllIdPrefix="compliant-follow-up-reviews"
+            hideFirstColumnBorder
+            footerData={footerData}
+          />
+        ) : (
+          <CompliantReviewsGrid data={data} widgetRef={widgetRef} />
+        )}
+      </WidgetContainer>
+    </>
+  );
+}
+
+CompliantFollowUpReviewsWithTtaSupport.propTypes = {
+  data: PropTypes.shape({
+    months: PropTypes.arrayOf(PropTypes.string),
+    reviews: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+        values: PropTypes.arrayOf(PropTypes.number),
+      })
+    ),
+  }),
+  loading: PropTypes.bool.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+CompliantFollowUpReviewsWithTtaSupport.defaultProps = {
+  data: null,
+  filters: [],
+};
+
+export default withWidgetData(
+  CompliantFollowUpReviewsWithTtaSupport,
+  'compliantFollowUpReviewsWithTtaSupport'
+);

frontend/src/widgets/CompliantReviewsGrid.js

@@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import createPlotlyComponent from 'react-plotly.js/factory';
+import colors from '../colors';
+import useSize from '../hooks/useSize';
+
+let Plot = null;
+import('plotly.js-basic-dist').then((Plotly) => {
+  Plot = createPlotlyComponent(Plotly);
+});
+
+const SERIES_COLORS = [colors.ttahubMediumBlue, colors.ttahubOrange, colors.ttahubMediumDeepTeal];
+
+export default function CompliantReviewsGrid({ data, widgetRef }) {
+  const [plotData, setPlotData] = useState(null);
+  const size = useSize(widgetRef);
+
+  useEffect(() => {
+    if (!data || !size) return;
+    const { months, reviews } = data;
+    // Exclude Total; put "with TTA" first so "without TTA" renders on top in stacked mode
+    const filtered = (reviews || []).filter((s) => !/total/i.test(s.name));
+    const withTta = filtered.filter((s) => /with tta/i.test(s.name));
+    const withoutTta = filtered.filter((s) => !/with tta/i.test(s.name));
+    const ordered = [...withTta, ...withoutTta];
+
+    const traces = ordered.map((series, i) => ({
+      type: 'bar',
+      name: series.name,
+      x: months,
+      y: series.values,
+      text: [],
+      textposition: 'inside',
+      insidetextanchor: 'middle',
+      insidetextfont: { color: i === 0 ? '#fff' : colors.baseDarkest, size: 10 },
+      marker: { color: SERIES_COLORS[i % SERIES_COLORS.length] },
+      hovertemplate: '%{y}<extra></extra>',
+      hoverlabel: {
+        bgcolor: colors.baseDarkest,
+        bordercolor: colors.baseDarkest,
+        font: { color: '#fff', size: 16 },
+      },
+    }));
+
+    setPlotData({
+      traces,
+      layout: {
+        barmode: 'stack',
+        height: 350,
+        width: size.width,
+        margin: { l: 90, r: 20, t: 28, b: 80 },
+        font: { color: colors.baseDarkest },
+        xaxis: {
+          automargin: true,
+          title: {
+            text: 'Follow-up review received date',
+            font: { family: 'Source Sans Pro, sans-serif', size: 16 },
+          },
+        },
+        yaxis: {
+          tickformat: ',.0d',
+          autorange: true,
+          title: {
+            text: 'Compliant follow-up reviews',
+            font: { family: 'Source Sans Pro, sans-serif', size: 16 },
+          },
+        },
+        showlegend: false,
+      },
+      config: { responsive: true, displayModeBar: false },
+    });
+  }, [data, size]);
+
+  return (
+    <div ref={widgetRef} className="padding-3">
+      {plotData && (
+        <>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              gap: '24px',
+              marginBottom: '8px',
+              fontFamily: 'Source Sans Pro, sans-serif',
+              fontSize: '16px',
+            }}
+          >
+            {plotData.traces.map((trace) => (
+              <div key={trace.name} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                <div
+                  style={{
+                    width: '26px',
+                    height: '26px',
+                    borderRadius: '4px',
+                    backgroundColor: trace.marker.color,
+                    flexShrink: 0,
+                  }}
+                />
+                <span>{trace.name}</span>
+              </div>
+            ))}
+          </div>
+          <Plot data={plotData.traces} layout={plotData.layout} config={plotData.config} />
+        </>
+      )}
+    </div>
+  );
+}
+
+CompliantReviewsGrid.propTypes = {
+  data: PropTypes.shape({
+    months: PropTypes.arrayOf(PropTypes.string),
+    reviews: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+        values: PropTypes.arrayOf(PropTypes.number),
+      })
+    ),
+  }).isRequired,
+  widgetRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,
+};