From de7414b7740d8dcd378aaab663ef60c51d14699b Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Mon, 20 Jul 2026 10:48:09 -0400
Subject: [PATCH 01/14] feat!: enhance layout with flex properties in
 AppWrapper and footer

[#OCD-5313]
---
 src/app/app-wrapper.jsx                       | 28 +++++++++++++++++--
 src/app/navigation/navigation-bottom.jsx      |  1 +
 .../pages/search/listings/landing-page.jsx    |  3 +-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/app/app-wrapper.jsx b/src/app/app-wrapper.jsx
index d2600e1d7d..6b441be873 100755
--- a/src/app/app-wrapper.jsx
+++ b/src/app/app-wrapper.jsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import {
   ThemeProvider,
+  makeStyles,
 } from '@material-ui/core';
 import { bool, node } from 'prop-types';
 import { CookiesProvider } from 'react-cookie';
@@ -19,7 +20,24 @@ import ChplNavigationBottom from 'navigation/navigation-bottom';
 import ChplNavigationTop from 'navigation/navigation-top';
 import theme from 'themes/theme';
 
+const useStyles = makeStyles({
+  appContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '100vh',
+  },
+  content: {
+    flex: '1 0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    minWidth: 0,
+  },
+});
+
 function AppWrapper({ children, showQueryTools = DEVELOPER_MODE }) {
+  const classes = useStyles();
+
   return (
     <ThemeProvider theme={theme}>
       <SnackbarWrapper>
@@ -36,9 +54,13 @@ function AppWrapper({ children, showQueryTools = DEVELOPER_MODE }) {
                         domain: '.healthit.gov',
                       }}
                       >
-                        <ChplNavigationTop />
-                        {children}
-                        <ChplNavigationBottom />
+                        <div className={classes.appContainer}>
+                          <ChplNavigationTop />
+                          <div className={classes.content}>
+                            {children}
+                          </div>
+                          <ChplNavigationBottom />
+                        </div>
                       </CookiesProvider>
                     </AnalyticsProvider>
                   </BrowserWrapper>
diff --git a/src/app/navigation/navigation-bottom.jsx b/src/app/navigation/navigation-bottom.jsx
index f4030ebfac..068de6e616 100755
--- a/src/app/navigation/navigation-bottom.jsx
+++ b/src/app/navigation/navigation-bottom.jsx
@@ -16,6 +16,7 @@ import { palette, theme } from 'themes';
 const useStyles = makeStyles({
   footer: {
     position: 'sticky',
+    flexShrink: 0,
     width: '100%',
     backgroundColor: `${palette.navBackground} !important`,
     padding: '4px 32px',
diff --git a/src/app/pages/search/listings/landing-page.jsx b/src/app/pages/search/listings/landing-page.jsx
index b90429e291..3a72d0706b 100755
--- a/src/app/pages/search/listings/landing-page.jsx
+++ b/src/app/pages/search/listings/landing-page.jsx
@@ -167,6 +167,7 @@ const useStyles = makeStyles({
     backgroundBlendMode: 'normal, soft-light',
     backgroundSize: '500px',
     minHeight: '75vh',
+    flexGrow: 1,
   },
   subHeaders: {
     color: palette.white,
@@ -210,7 +211,7 @@ function ChplLandingPage() {
           </Typography>
         </Container>
       </Box>
-      <Box className={classes.landingPageBackground} pb={16} height="fit-content">
+      <Box className={classes.landingPageBackground} pb={16}>
         <Box className={classes.landingPageImageryBackground}>
           <Container maxWidth="md">
             <Box position="relative" top="-32px">

From b06a78e2a1da93f4f6bc139fe35c2af880f3bec4 Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Mon, 20 Jul 2026 10:53:43 -0400
Subject: [PATCH 02/14] feat: integrate ChplPageHeader and ChplPageBody
 components into surveillance pages for improved layout

[#OCD-5313]
---
 .../complaints/complaints-wrapper.jsx         |  14 +-
 .../activity-reporting/activity-reporting.jsx | 130 +++++++++---------
 .../surveillance/reporting/reporting.jsx      |  65 +++++----
 src/app/pages/surveillance/surveillance.html  |  13 +-
 4 files changed, 106 insertions(+), 116 deletions(-)

diff --git a/src/app/components/surveillance/complaints/complaints-wrapper.jsx b/src/app/components/surveillance/complaints/complaints-wrapper.jsx
index d459413539..d14649da25 100755
--- a/src/app/components/surveillance/complaints/complaints-wrapper.jsx
+++ b/src/app/components/surveillance/complaints/complaints-wrapper.jsx
@@ -3,6 +3,7 @@ import { arrayOf, bool, string } from 'prop-types';
 
 import ChplComplaints from './complaints';
 
+import { ChplPageBody, ChplPageHeader } from 'components/util';
 import AppWrapper from 'app-wrapper';
 
 function ChplComplaintsWrapper(props) {
@@ -14,11 +15,14 @@ function ChplComplaintsWrapper(props) {
 
   return (
     <AppWrapper>
-      <ChplComplaints
-        bonusQuery={bonusQuery}
-        canAdd={canAdd}
-        disallowedFilters={disallowedFilters}
-      />
+      <ChplPageHeader text="Surveillance Complaints" />
+      <ChplPageBody>
+        <ChplComplaints
+          bonusQuery={bonusQuery}
+          canAdd={canAdd}
+          disallowedFilters={disallowedFilters}
+        />
+      </ChplPageBody>
     </AppWrapper>
   );
 }
diff --git a/src/app/pages/surveillance/activity-reporting/activity-reporting.jsx b/src/app/pages/surveillance/activity-reporting/activity-reporting.jsx
index 30186db41c..5fae95bf98 100755
--- a/src/app/pages/surveillance/activity-reporting/activity-reporting.jsx
+++ b/src/app/pages/surveillance/activity-reporting/activity-reporting.jsx
@@ -5,7 +5,6 @@ import {
   Card,
   CardContent,
   CardHeader,
-  Container,
   MenuItem,
   makeStyles,
 } from '@material-ui/core';
@@ -16,7 +15,7 @@ import * as yup from 'yup';
 import { LocalDate } from '@js-joda/core';
 
 import { usePostSurveillanceActivityReport } from 'api/surveillance';
-import { ChplTextField } from 'components/util';
+import { ChplPageBody, ChplPageHeader, ChplTextField } from 'components/util';
 import { utilStyles } from 'themes';
 
 const useStyles = makeStyles({
@@ -25,7 +24,6 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'stretch',
-    paddingTop: '16px',
     gap: '16px',
   },
   formContent:{
@@ -34,9 +32,6 @@ const useStyles = makeStyles({
     gap: '16px',
     marginBottom: '16px',
   },
-  fixFooterSpacing: {
-    minHeight: 'calc(100vh - 100px)',
-  },
 });
 
 const validationSchema = yup.object({
@@ -123,67 +118,70 @@ function ChplSurveillanceActivityReporting() {
   });
 
   return (
-    <Container className={classes.fixFooterSpacing} maxWidth="md">
-      <div className={classes.container}>
-        <Card>
-          <CardHeader
-            title="Activity Reporting"
-            subheader="Select a Date Range to Download Reports"
-          />
-          <CardContent>
-            <Box className={classes.formContent}>
-              <ChplTextField
-                select
-                required
-                id="year"
-                name="year"
-                label="Year"
-                value={formik.values.year}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                error={formik.touched.year && !!formik.errors.year}
-                helperText={formik.touched.year && formik.errors.year}
-              >
-                { getYears().map((year) => (
-                  <MenuItem key={year} value={year}>
-                    {year}
-                  </MenuItem>
-                ))}
-              </ChplTextField>
-              <ChplTextField
-                select
-                required
-                id="quarter"
-                name="quarter"
-                label="Quarter"
-                value={formik.values.quarter}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                error={formik.touched.quarter && !!formik.errors.quarter}
-                helperText={formik.touched.quarter && formik.errors.quarter}
+    <>
+      <ChplPageHeader text="Surveillance Activity Reporting" />
+      <ChplPageBody maxWidth="md">
+        <div className={classes.container}>
+          <Card>
+            <CardHeader
+              title="Activity Reporting"
+              subheader="Select a Date Range to Download Reports"
+            />
+            <CardContent>
+              <Box className={classes.formContent}>
+                <ChplTextField
+                  select
+                  required
+                  id="year"
+                  name="year"
+                  label="Year"
+                  value={formik.values.year}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  error={formik.touched.year && !!formik.errors.year}
+                  helperText={formik.touched.year && formik.errors.year}
+                >
+                  { getYears().map((year) => (
+                    <MenuItem key={year} value={year}>
+                      {year}
+                    </MenuItem>
+                  ))}
+                </ChplTextField>
+                <ChplTextField
+                  select
+                  required
+                  id="quarter"
+                  name="quarter"
+                  label="Quarter"
+                  value={formik.values.quarter}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  error={formik.touched.quarter && !!formik.errors.quarter}
+                  helperText={formik.touched.quarter && formik.errors.quarter}
+                >
+                  <MenuItem value="all">All</MenuItem>
+                  <MenuItem value="q1">Q1</MenuItem>
+                  <MenuItem value="q2">Q2</MenuItem>
+                  <MenuItem value="q3">Q3</MenuItem>
+                  <MenuItem value="q4">Q4</MenuItem>
+                </ChplTextField>
+              </Box>
+              <Button
+                color="primary"
+                variant="contained"
+                name="downloadResults"
+                id="download-results"
+                disabled={!formik.isValid}
+                onClick={formik.handleSubmit}
+                endIcon={<CloudDownloadIcon />}
               >
-                <MenuItem value="all">All</MenuItem>
-                <MenuItem value="q1">Q1</MenuItem>
-                <MenuItem value="q2">Q2</MenuItem>
-                <MenuItem value="q3">Q3</MenuItem>
-                <MenuItem value="q4">Q4</MenuItem>
-              </ChplTextField>
-            </Box>
-            <Button
-              color="primary"
-              variant="contained"
-              name="downloadResults"
-              id="download-results"
-              disabled={!formik.isValid}
-              onClick={formik.handleSubmit}
-              endIcon={<CloudDownloadIcon />}
-            >
-              Download Results
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-    </Container>
+                Download Results
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </ChplPageBody>
+    </>
   );
 }
 
diff --git a/src/app/pages/surveillance/reporting/reporting.jsx b/src/app/pages/surveillance/reporting/reporting.jsx
index 72acdd79b0..c9a26c3be9 100755
--- a/src/app/pages/surveillance/reporting/reporting.jsx
+++ b/src/app/pages/surveillance/reporting/reporting.jsx
@@ -5,7 +5,6 @@ import {
   Card,
   CardContent,
   Chip,
-  Container,
   Typography,
   makeStyles,
 } from '@material-ui/core';
@@ -13,6 +12,7 @@ import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 
 import { useFetchAcbs } from 'api/acbs';
 import ChplReport from 'components/surveillance/reporting/report';
+import { ChplPageBody, ChplPageHeader } from 'components/util';
 import { theme, utilStyles } from 'themes';
 
 const useStyles = makeStyles({
@@ -21,7 +21,6 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'stretch',
-    paddingTop: '16px',
     gap: '16px',
     [theme.breakpoints.up('md')]: {
       display: 'grid',
@@ -29,9 +28,6 @@ const useStyles = makeStyles({
       alignItems: 'start',
     },
   },
-  fixFooterSpacing: {
-    minHeight: 'calc(100vh - 100px)',
-  },
   menuItems: {
     padding: '8px',
     justifyContent: 'space-between',
@@ -77,9 +73,11 @@ function ChplSurveillanceReporting() {
   };
 
   return (
-    <Container className={classes.fixFooterSpacing} maxWidth="lg">
-      <div className={(acbs.length > 1 && state === '') ? classes.container : ''}>
-        { acbs.length > 1 && state === ''
+    <>
+      <ChplPageHeader text="Surveillance Reporting" />
+      <ChplPageBody>
+        <div className={(acbs.length > 1 && state === '') ? classes.container : ''}>
+          { acbs.length > 1 && state === ''
             && (
               <Card>
                 { acbs.map((acb) => (
@@ -102,31 +100,32 @@ function ChplSurveillanceReporting() {
                 ))}
               </Card>
             )}
-        { !activeAcb
-          && (
-            <Card>
-              <CardContent>
-                <Typography variant="h5" gutterBottom component="h2">
-                  <strong>Quarterly and Annual Surveillance Reporting</strong>
-                </Typography>
-                <Typography gutterBottom>
-                  To view detailed quarterly and annual reports, start by selecting an ONC-ACB from the menu on the left.
-                </Typography>
-                <Typography>
-                  Once selected, the corresponding reports will appear here, giving you access to key performance data and year-end summaries.
-                </Typography>
-              </CardContent>
-            </Card>
-          )}
-        { activeAcb
-          && (
-            <ChplReport
-              acb={activeAcb}
-              dispatch={handleDispatch}
-            />
-          )}
-      </div>
-    </Container>
+          { !activeAcb
+            && (
+              <Card>
+                <CardContent>
+                  <Typography variant="h5" gutterBottom component="h2">
+                    <strong>Quarterly and Annual Surveillance Reporting</strong>
+                  </Typography>
+                  <Typography gutterBottom>
+                    To view detailed quarterly and annual reports, start by selecting an ONC-ACB from the menu on the left.
+                  </Typography>
+                  <Typography>
+                    Once selected, the corresponding reports will appear here, giving you access to key performance data and year-end summaries.
+                  </Typography>
+                </CardContent>
+              </Card>
+            )}
+          { activeAcb
+            && (
+              <ChplReport
+                acb={activeAcb}
+                dispatch={handleDispatch}
+              />
+            )}
+        </div>
+      </ChplPageBody>
+    </>
   );
 }
 
diff --git a/src/app/pages/surveillance/surveillance.html b/src/app/pages/surveillance/surveillance.html
index 99ed67255b..5105d51131 100644
--- a/src/app/pages/surveillance/surveillance.html
+++ b/src/app/pages/surveillance/surveillance.html
@@ -1,12 +1 @@
-<div class="container-fluid">
-  <div class="row">
-    <div style="padding: 32px; background-color: white;">
-      <h1>CHPL Surveillance</h1>
-    </div>
-  </div>
-  <div class="main-content row" id="main-content" tabindex="-1">
-    <div class="col-sm-12">
-      <ui-view></ui-view>
-    </div>
-  </div>
-</div>
+<ui-view></ui-view>

From 752bc3a5735942d47f960d995e678101bd86d374 Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Mon, 20 Jul 2026 13:34:08 -0400
Subject: [PATCH 03/14] feat: refactor activity and questionable activity views
 to use ChplPageHeader and ChplPageBody components for improved layout

[#OCD-5313]
---
 .../pages/reports/activity/activity-view.jsx  |  36 +--
 .../questionable-activity-view.jsx            | 266 +++++++++---------
 src/app/pages/reports/reports.html            |  13 +-
 3 files changed, 137 insertions(+), 178 deletions(-)

diff --git a/src/app/pages/reports/activity/activity-view.jsx b/src/app/pages/reports/activity/activity-view.jsx
index 970404d988..1f5071ddda 100755
--- a/src/app/pages/reports/activity/activity-view.jsx
+++ b/src/app/pages/reports/activity/activity-view.jsx
@@ -14,6 +14,8 @@ import ChplActivityDetails from './activity-details';
 
 import { useFetchActivity } from 'api/questionable-activity';
 import { ChplLink,
+  ChplPageBody,
+  ChplPageHeader,
   ChplPagination,
   ChplLoadingTable,
   ChplSortableHeaders }
@@ -30,23 +32,9 @@ import { useAnalyticsContext } from 'shared/contexts';
 import { palette, theme } from 'themes';
 
 const useStyles = makeStyles({
-  fixFooterSpacing: {
-    minHeight: 'calc(100vh - 188px)',
-  },
   linkWrap: {
     overflowWrap: 'anywhere',
   },
-  pageHeader: {
-    padding: '32px',
-    backgroundColor: '#ffffff',
-  },
-  pageBody: {
-    display: 'grid',
-    gridTemplateColumns: ' 1fr',
-    gap: '16px',
-    padding: '16px 32px',
-    backgroundColor: '#f9f9f9',
-  },
   pageContent: {
     display: 'grid',
     gridTemplateRows: '3fr 1fr',
@@ -75,13 +63,13 @@ const useStyles = makeStyles({
   tableContainer: {
     overflowWrap: 'normal',
     border: '.5px solid #c2c6ca',
-    margin: '0px 32px',
+    marginTop: '16px',
     width: 'auto',
   },
   tableResultsHeaderContainer: {
     display: 'grid',
     gap: '8px',
-    margin: '16px 32px',
+    marginTop: '16px',
     gridTemplateColumns: '1fr',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -241,17 +229,13 @@ function ChplActivityView() {
   const pageEnd = Math.min((pageNumber + 1) * pageSize, recordCount);
 
   return (
-    <div className={classes.fixFooterSpacing}>
-      <div className={classes.pageHeader}>
-        <Typography variant="h1">Activity</Typography>
-      </div>
-      <div className={classes.pageBody} id="main-content" tabIndex="-1">
+    <>
+      <ChplPageHeader text="Activity" />
+      <ChplPageBody>
         <ChplFilterSearchBar
           placeholder="Search by Description or Reason..."
         />
-        <div>
-          <ChplFilterChips />
-        </div>
+        <ChplFilterChips />
         { isLoading
           && (
             <ChplLoadingTable className={classes.tableContainer} />
@@ -321,8 +305,8 @@ function ChplActivityView() {
                 )}
             </>
           )}
-      </div>
-    </div>
+      </ChplPageBody>
+    </>
   );
 }
 
diff --git a/src/app/pages/reports/questionable-activity/questionable-activity-view.jsx b/src/app/pages/reports/questionable-activity/questionable-activity-view.jsx
index 7631d1ddd0..af1e814de5 100755
--- a/src/app/pages/reports/questionable-activity/questionable-activity-view.jsx
+++ b/src/app/pages/reports/questionable-activity/questionable-activity-view.jsx
@@ -15,6 +15,8 @@ import { useFetchQuestionableActivity } from 'api/questionable-activity';
 import ChplQuestionableActivityDetails from 'components/activity/questionable-activity-details';
 import {
   ChplLink,
+  ChplPageBody,
+  ChplPageHeader,
   ChplPagination,
   ChplLoadingTable,
   ChplSortableHeaders,
@@ -32,23 +34,9 @@ import { useAnalyticsContext } from 'shared/contexts';
 import { theme } from 'themes';
 
 const useStyles = makeStyles({
-  fixFooterSpacing: {
-    minHeight: 'calc(100vh - 188px)',
-  },
   linkWrap: {
     overflowWrap: 'anywhere',
   },
-  pageHeader: {
-    padding: '32px',
-    backgroundColor: '#ffffff',
-  },
-  pageBody: {
-    display: 'grid',
-    gridTemplateColumns: ' 1fr',
-    gap: '16px',
-    padding: '16px 32px',
-    backgroundColor: '#f9f9f9',
-  },
   pageContent: {
     display: 'grid',
     gridTemplateRows: '3fr 1fr',
@@ -66,13 +54,13 @@ const useStyles = makeStyles({
   tableContainer: {
     overflowWrap: 'normal',
     border: '.5px solid #c2c6ca',
-    margin: '0px 32px',
+    marginTop: '16px',
     width: 'auto',
   },
   tableResultsHeaderContainer: {
     display: 'grid',
     gap: '8px',
-    margin: '16px 32px',
+    marginTop: '16px',
     gridTemplateColumns: '1fr',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -171,147 +159,145 @@ function ChplQuestionableActivityView() {
   const pageEnd = Math.min((pageNumber + 1) * pageSize, recordCount);
 
   return (
-    <div className={classes.fixFooterSpacing}>
-      <div className={classes.pageHeader}>
-        <Typography variant="h1">Questionable Activity</Typography>
-      </div>
-      <div className={classes.pageBody} id="main-content" tabIndex="-1">
-        <div>
+    <>
+      <ChplPageHeader
+        text="Questionable Activity"
+        subtitle={(
           <Typography variant="body1">
             The Questionable Activity Report offers users the ability to monitor the activities performed on specific CHPL products by ONC-Authorized Certification Bodies and assess their adherence to ONC-established rules. This feature serves as an essential transparency mechanism, allowing ONC to identify any questionable actions that may warrant further investigation. Users can filter and search this list based on their specific interests or concerns.
           </Typography>
-        </div>
-      </div>
-      <ChplFilterSearchBar />
-      <div>
-        <ChplFilterChips />
-      </div>
-      { isLoading
-        && (
-          <ChplLoadingTable className={classes.tableContainer} />
         )}
-      { !isLoading
-        && (
-          <>
-            <div className={classes.tableResultsHeaderContainer}>
-              <div className={`${classes.resultsContainer} ${classes.wrap}`}>
-                <Typography variant="subtitle2">Search Results:</Typography>
-                { activities.length === 0
-                  && (
-                    <Typography>
-                      No results found
-                    </Typography>
-                  )}
+      />
+      <ChplPageBody>
+        <ChplFilterSearchBar />
+        <ChplFilterChips />
+        { isLoading
+          && (
+            <ChplLoadingTable className={classes.tableContainer} />
+          )}
+        { !isLoading
+          && (
+            <>
+              <div className={classes.tableResultsHeaderContainer}>
+                <div className={`${classes.resultsContainer} ${classes.wrap}`}>
+                  <Typography variant="subtitle2">Search Results:</Typography>
+                  { activities.length === 0
+                    && (
+                      <Typography>
+                        No results found
+                      </Typography>
+                    )}
+                  { activities.length > 0
+                    && (
+                      <Typography variant="body2">
+                        {`(${pageStart}-${pageEnd} of ${recordCount} Results)`}
+                      </Typography>
+                    )}
+                </div>
                 { activities.length > 0
                   && (
-                    <Typography variant="body2">
-                      {`(${pageStart}-${pageEnd} of ${recordCount} Results)`}
-                    </Typography>
+                    <Button
+                      color="secondary"
+                      variant="contained"
+                      size="small"
+                      id="download-filtered-results"
+                      onClick={handleClick}
+                    >
+                      Download Filtered Results
+                    </Button>
                   )}
               </div>
               { activities.length > 0
                 && (
-                  <Button
-                    color="secondary"
-                    variant="contained"
-                    size="small"
-                    id="download-filtered-results"
-                    onClick={handleClick}
-                  >
-                    Download Filtered Results
-                  </Button>
-                )}
-            </div>
-            { activities.length > 0
-              && (
-                <>
-                  <TableContainer className={classes.tableContainer} component={Paper}>
-                    <Table
-                      stickyHeader
-                      aria-label="Questionable Activity table"
-                    >
-                      <ChplSortableHeaders
-                        headers={headers}
-                        onTableSort={handleTableSort}
-                        orderBy={orderBy}
-                        order={sortDescending ? 'desc' : 'asc'}
+                  <>
+                    <TableContainer className={classes.tableContainer} component={Paper}>
+                      <Table
                         stickyHeader
-                      />
-                      <TableBody>
-                        { activities
-                          .map((item) => (
-                            <TableRow key={item.id}>
-                              <TableCell>
-                                { item.developerId
-                                  && (
+                        aria-label="Questionable Activity table"
+                      >
+                        <ChplSortableHeaders
+                          headers={headers}
+                          onTableSort={handleTableSort}
+                          orderBy={orderBy}
+                          order={sortDescending ? 'desc' : 'asc'}
+                          stickyHeader
+                        />
+                        <TableBody>
+                          { activities
+                            .map((item) => (
+                              <TableRow key={item.id}>
+                                <TableCell>
+                                  { item.developerId
+                                    && (
+                                      <ChplLink
+                                        href={`#/organizations/developers/${item.developerId}`}
+                                        text={item.developerName}
+                                        analytics={{
+                                          ...analytics,
+                                          event: 'Go to Developer Page',
+                                          label: item.developerName,
+                                        }}
+                                        external={false}
+                                        router={{ sref: 'organizations.developers.developer', options: { id: item.developerId } }}
+                                      />
+                                    )}
+                                </TableCell>
+                                <TableCell>{item.productName}</TableCell>
+                                <TableCell>{item.versionName}</TableCell>
+                                <TableCell>
+                                  { item.listingId
+                                    && (
                                     <ChplLink
-                                      href={`#/organizations/developers/${item.developerId}`}
-                                      text={item.developerName}
+                                      href={`#/listing/${item.listingId}`}
+                                      text={item.chplProductNumber}
                                       analytics={{
                                         ...analytics,
-                                        event: 'Go to Developer Page',
-                                        label: item.developerName,
+                                        event: 'Go to Listing Details Page',
+                                        label: item.chplProductNumber,
                                       }}
                                       external={false}
-                                      router={{ sref: 'organizations.developers.developer', options: { id: item.developerId } }}
+                                      router={{ sref: 'listing', options: { id: item.listingId } }}
                                     />
-                                  )}
-                              </TableCell>
-                              <TableCell>{item.productName}</TableCell>
-                              <TableCell>{item.versionName}</TableCell>
-                              <TableCell>
-                                { item.listingId
-                                  && (
-                                  <ChplLink
-                                    href={`#/listing/${item.listingId}`}
-                                    text={item.chplProductNumber}
-                                    analytics={{
-                                      ...analytics,
-                                      event: 'Go to Listing Details Page',
-                                      label: item.chplProductNumber,
-                                    }}
-                                    external={false}
-                                    router={{ sref: 'listing', options: { id: item.listingId } }}
-                                  />
-                                  )}
-                              </TableCell>
-                              <TableCell>{item.triggerName}</TableCell>
-                              <TableCell>{ getDisplayDateFormat(item.activityDate) }</TableCell>
-                              <TableCell>
-                                { item.reason
-                                  && (
-                                    <Typography>
-                                      {item.reason}
-                                    </Typography>
-                                  )}
-                                { item.certificationStatusChangeReason
-                                  && (
-                                    <Typography>
-                                      {item.certificationStatusChangeReason}
-                                    </Typography>
-                                  )}
-                              </TableCell>
-                              <TableCell>
-                                <ChplQuestionableActivityDetails activity={item} />
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-                  <ChplPagination
-                    count={recordCount}
-                    page={pageNumber}
-                    rowsPerPage={pageSize}
-                    rowsPerPageOptions={[25, 50, 100]}
-                    setPage={setPageNumber}
-                    setRowsPerPage={setPageSize}
-                  />
-                </>
-              )}
-          </>
-        )}
-    </div>
+                                    )}
+                                </TableCell>
+                                <TableCell>{item.triggerName}</TableCell>
+                                <TableCell>{ getDisplayDateFormat(item.activityDate) }</TableCell>
+                                <TableCell>
+                                  { item.reason
+                                    && (
+                                      <Typography>
+                                        {item.reason}
+                                      </Typography>
+                                    )}
+                                  { item.certificationStatusChangeReason
+                                    && (
+                                      <Typography>
+                                        {item.certificationStatusChangeReason}
+                                      </Typography>
+                                    )}
+                                </TableCell>
+                                <TableCell>
+                                  <ChplQuestionableActivityDetails activity={item} />
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+                    <ChplPagination
+                      count={recordCount}
+                      page={pageNumber}
+                      rowsPerPage={pageSize}
+                      rowsPerPageOptions={[25, 50, 100]}
+                      setPage={setPageNumber}
+                      setRowsPerPage={setPageSize}
+                    />
+                  </>
+                )}
+            </>
+          )}
+      </ChplPageBody>
+    </>
   );
 }
 
diff --git a/src/app/pages/reports/reports.html b/src/app/pages/reports/reports.html
index 7e17351267..5105d51131 100644
--- a/src/app/pages/reports/reports.html
+++ b/src/app/pages/reports/reports.html
@@ -1,12 +1 @@
-<div class="container-fluid">
-  <div class="row">
-    <div class="col-sm-12">
-      <h1>CHPL Reports</h1>
-    </div>
-  </div>
-  <div class="main-content row" id="main-content" tabindex="-1">
-    <div class="col-sm-12">
-      <ui-view></ui-view>
-    </div>
-  </div>
-</div>
+<ui-view></ui-view>

From 1265f3b4cdeea167b571c486333af7d54d84bc35 Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Mon, 20 Jul 2026 13:36:06 -0400
Subject: [PATCH 04/14] feat: refactor resource pages to utilize ChplPageHeader
 and ChplPageBody components for improved layout consistency

[#OCD-5313]
---
 src/app/pages/resources/api/api.jsx           | 292 ++++++++---------
 .../pages/resources/cms-lookup/cms-lookup.jsx | 205 ++++++------
 src/app/pages/resources/download/download.jsx | 308 +++++++++---------
 src/app/pages/resources/overview/overview.jsx |  30 +-
 4 files changed, 387 insertions(+), 448 deletions(-)

diff --git a/src/app/pages/resources/api/api.jsx b/src/app/pages/resources/api/api.jsx
index f3ab9b4d78..790863ca68 100755
--- a/src/app/pages/resources/api/api.jsx
+++ b/src/app/pages/resources/api/api.jsx
@@ -6,7 +6,6 @@ import {
   CardActions,
   CardContent,
   CardHeader,
-  Container,
   Divider,
   MenuItem,
   Typography,
@@ -15,7 +14,12 @@ import {
 import GetAppIcon from '@material-ui/icons/GetApp';
 import SwaggerUI from 'swagger-ui-react';
 
-import { ChplLink, ChplTextField } from 'components/util';
+import {
+  ChplLink,
+  ChplPageBody,
+  ChplPageHeader,
+  ChplTextField,
+} from 'components/util';
 import { ChplApiKeyRegistration } from 'components/api-key';
 import { eventTrack } from 'services/analytics.service';
 import { getAngularService } from 'services/angular-react-helper';
@@ -37,8 +41,6 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
-    backgroundColor: palette.background,
-    padding: '32px 0',
   },
   downloadSection: {
     display: 'flex',
@@ -61,10 +63,6 @@ const useStyles = makeStyles({
       marginTop: '.7em',
     },
   },
-  pageHeader: {
-    padding: '32px 0',
-    backgroundColor: palette.white,
-  },
   warningBox: {
     padding: '16px',
     backgroundColor: palette.warningLight,
@@ -123,161 +121,151 @@ function ChplResourcesApi() {
 
   return (
     <>
-      <Box bgcolor={palette.background}>
-        <div className={classes.pageHeader}>
-          <Container maxWidth="lg">
+      <ChplPageHeader text="CHPL API" />
+      <ChplPageBody>
+        <div className={classes.pageBody}>
+          <Box className={classes.fullWidth}>
             <Typography
-              variant="h1"
+              variant="h4"
+              component="h2"
             >
-              CHPL API
+              Definitions & Guidelines
             </Typography>
-          </Container>
-        </div>
-        <Container maxWidth="lg">
-          <div className={classes.pageBody} id="main-content" tabIndex="-1">
-            <Box className={classes.fullWidth}>
+            <Typography className={classes.listHeaders} gutterBottom variant="h6">Certified Health IT Products</Typography>
+            <Divider />
+          </Box>
+          <div className={classes.downloadSection}>
+            <Box width="66%">
+              <ul className={classes.listSpacing}>
+                <li>
+                  <Typography gutterBottom><strong>Certified Products:</strong></Typography>
+                  {' '}
+                  Entire collection of a set of certified products, including all data elements. The file is in a JSON format, and the definition of that structure can be found in the &quot;Schemas&quot; section of the &quot;Certified Health IT Product Listing API&quot; documentation.
+                  <ul>
+                    <li>
+                      The Active products summary file is updated nightly.
+                    </li>
+                    <li>
+                      The Inactive products summary file is updated nightly.
+                    </li>
+                    <li>
+                      The 2014 Edition Products file and the 2011 Edition Products file are updated quarterly.
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </Box>
+            <Card className={classes.downloadCard}>
+              <CardHeader title="Select A File To Download" />
+              <CardContent>
+                <Box display="flex" flexDirection="column" gridGap={16}>
+                  <Typography>
+                    To download a list of certified health IT products listed on the CHPL, please select from one of the categories below in the dropdown menu, and then click the Data File button.
+                  </Typography>
+                  <div className={classes.fullWidth}>
+                    <ChplTextField
+                      select
+                      id="download-select"
+                      name="downloadSelect"
+                      label="Select a collection to download"
+                      value={selectedOption}
+                      onChange={(event) => setSelectedOption(event.target.value)}
+                    >
+                      { downloadOptions.map((item) => (
+                        <MenuItem value={item} key={item}>{item}</MenuItem>
+                      ))}
+                    </ChplTextField>
+                  </div>
+                </Box>
+              </CardContent>
+              <CardActions>
+                <Button
+                  fullWidth
+                  color="primary"
+                  variant="contained"
+                  id="download-chpl-data-button"
+                  onClick={() => downloadFile('data')}
+                >
+                  Download Data File
+                  {' '}
+                  <GetAppIcon className={classes.iconSpacing} />
+                </Button>
+              </CardActions>
+            </Card>
+          </div>
+          <div className={classes.fullWidth}>
+            <Typography
+              variant="h4"
+              component="h2"
+            >
+              Access API Documentation
+            </Typography>
+            <Divider />
+          </div>
+          <div className={classes.downloadSection}>
+            <Box width="66%">
               <Typography
-                variant="h4"
-                component="h2"
+                gutterBottom
               >
-                Definitions & Guidelines
+                The ONC CHPL API provides programmatic access to ONC published data on Certified Health IT Products. ONC CHPL&apos;s API includes methods for retrieving a subset of our statistical data and the metadata that describes it. Users must complete the CHPL API registration. After completing the CHPL API registration, the user will be given a unique 32-character API key. This API key will also be emailed to the user.
               </Typography>
-              <Typography className={classes.listHeaders} gutterBottom variant="h6">Certified Health IT Products</Typography>
-              <Divider />
-            </Box>
-            <div className={classes.downloadSection}>
-              <Box width="66%">
-                <ul className={classes.listSpacing}>
-                  <li>
-                    <Typography gutterBottom><strong>Certified Products:</strong></Typography>
-                    {' '}
-                    Entire collection of a set of certified products, including all data elements. The file is in a JSON format, and the definition of that structure can be found in the &quot;Schemas&quot; section of the &quot;Certified Health IT Product Listing API&quot; documentation.
-                    <ul>
-                      <li>
-                        The Active products summary file is updated nightly.
-                      </li>
-                      <li>
-                        The Inactive products summary file is updated nightly.
-                      </li>
-                      <li>
-                        The 2014 Edition Products file and the 2011 Edition Products file are updated quarterly.
-                      </li>
-                    </ul>
-                  </li>
-                </ul>
-              </Box>
-              <Card className={classes.downloadCard}>
-                <CardHeader title="Select A File To Download" />
-                <CardContent>
-                  <Box display="flex" flexDirection="column" gridGap={16}>
-                    <Typography>
-                      To download a list of certified health IT products listed on the CHPL, please select from one of the categories below in the dropdown menu, and then click the Data File button.
-                    </Typography>
-                    <div className={classes.fullWidth}>
-                      <ChplTextField
-                        select
-                        id="download-select"
-                        name="downloadSelect"
-                        label="Select a collection to download"
-                        value={selectedOption}
-                        onChange={(event) => setSelectedOption(event.target.value)}
-                      >
-                        { downloadOptions.map((item) => (
-                          <MenuItem value={item} key={item}>{item}</MenuItem>
-                        ))}
-                      </ChplTextField>
-                    </div>
-                  </Box>
-                </CardContent>
-                <CardActions>
-                  <Button
-                    fullWidth
-                    color="primary"
-                    variant="contained"
-                    id="download-chpl-data-button"
-                    onClick={() => downloadFile('data')}
-                  >
-                    Download Data File
-                    {' '}
-                    <GetAppIcon className={classes.iconSpacing} />
-                  </Button>
-                </CardActions>
-              </Card>
-            </div>
-            <div className={classes.fullWidth}>
               <Typography
-                variant="h4"
-                component="h2"
+                gutterBottom
               >
-                Access API Documentation
+                This API key must be used when making a call to the CHPL API. For example, if you wanted to implement the /acbs API, you would make the following call (switching out the key in the URL for your key):
+                {' '}
+                <code>https://chpl.healthit.gov/rest/acbs?api_key=YOUR_KEY_HERE</code>
               </Typography>
-              <Divider />
-            </div>
-            <div className={classes.downloadSection}>
-              <Box width="66%">
-                <Typography
-                  gutterBottom
-                >
-                  The ONC CHPL API provides programmatic access to ONC published data on Certified Health IT Products. ONC CHPL&apos;s API includes methods for retrieving a subset of our statistical data and the metadata that describes it. Users must complete the CHPL API registration. After completing the CHPL API registration, the user will be given a unique 32-character API key. This API key will also be emailed to the user.
-                </Typography>
-                <Typography
-                  gutterBottom
-                >
-                  This API key must be used when making a call to the CHPL API. For example, if you wanted to implement the /acbs API, you would make the following call (switching out the key in the URL for your key):
-                  {' '}
-                  <code>https://chpl.healthit.gov/rest/acbs?api_key=YOUR_KEY_HERE</code>
-                </Typography>
-                <br />
-                <Typography
-                  gutterBottom
-                >
-                  A sample Java application using the CHPL API can be found at
-                  {' '}
-                  <ChplLink
-                    href="https://github.com/chpladmin/sample-application"
-                    text="Sample Application"
-                    analytics={{
-                      ...analytics,
-                      event: 'Go to Sample Aplication',
-                    }}
-                    inline
-                  />
-                </Typography>
-                <br />
-                <Typography
-                  gutterBottom
-                >
-                  Release notes for the CHPL API can be found in the
-                  {' '}
-                  <ChplLink
-                    href="https://github.com/chpladmin/chpl-api/blob/master/RELEASE_NOTES.md"
-                    text="release notes on GitHub"
-                    analytics={{
-                      ...analytics,
-                      event: 'Go to release notes on GitHub',
-                    }}
-                    inline
-                  />
-                </Typography>
-              </Box>
-              <div className={classes.downloadCard}>
-                <AnalyticsContext.Provider value={{ analytics }}>
-                  <ChplApiKeyRegistration />
-                </AnalyticsContext.Provider>
-              </div>
-            </div>
-            <div
-              className={classes.fullWidth}
-            >
-              <SwaggerUI
-                url={url}
-                docExpansion="none"
-                supportedSubmitMethods={[]}
-              />
+              <br />
+              <Typography
+                gutterBottom
+              >
+                A sample Java application using the CHPL API can be found at
+                {' '}
+                <ChplLink
+                  href="https://github.com/chpladmin/sample-application"
+                  text="Sample Application"
+                  analytics={{
+                    ...analytics,
+                    event: 'Go to Sample Aplication',
+                  }}
+                  inline
+                />
+              </Typography>
+              <br />
+              <Typography
+                gutterBottom
+              >
+                Release notes for the CHPL API can be found in the
+                {' '}
+                <ChplLink
+                  href="https://github.com/chpladmin/chpl-api/blob/master/RELEASE_NOTES.md"
+                  text="release notes on GitHub"
+                  analytics={{
+                    ...analytics,
+                    event: 'Go to release notes on GitHub',
+                  }}
+                  inline
+                />
+              </Typography>
+            </Box>
+            <div className={classes.downloadCard}>
+              <AnalyticsContext.Provider value={{ analytics }}>
+                <ChplApiKeyRegistration />
+              </AnalyticsContext.Provider>
             </div>
           </div>
-        </Container>
-      </Box>
+          <div
+            className={classes.fullWidth}
+          >
+            <SwaggerUI
+              url={url}
+              docExpansion="none"
+              supportedSubmitMethods={[]}
+            />
+          </div>
+        </div>
+      </ChplPageBody>
     </>
   );
 }
diff --git a/src/app/pages/resources/cms-lookup/cms-lookup.jsx b/src/app/pages/resources/cms-lookup/cms-lookup.jsx
index 96b4635bc4..c36cb4587b 100755
--- a/src/app/pages/resources/cms-lookup/cms-lookup.jsx
+++ b/src/app/pages/resources/cms-lookup/cms-lookup.jsx
@@ -3,7 +3,6 @@ import {
   Box,
   Button,
   ButtonGroup,
-  Container,
   List,
   ListItem,
   ListItemIcon,
@@ -23,12 +22,11 @@ import { ExportToCsv } from 'export-to-csv';
 import { useFetchListings } from 'api/cms';
 import ChplChips from 'components/cms/chips';
 import ChplSearchTerm from 'components/cms/search-term';
-import { ChplLink } from 'components/util';
+import { ChplLink, ChplPageBody, ChplPageHeader } from 'components/util';
 import { ChplSortableHeaders } from 'components/util/sortable-headers';
 import { eventTrack } from 'services/analytics.service';
 import { useLocalStorage as useStorage } from 'services/storage.service';
 import { FlagContext, useAnalyticsContext } from 'shared/contexts';
-import { palette } from 'themes';
 
 const csvOptions = {
   filename: 'cms-id-data',
@@ -45,25 +43,17 @@ const csvOptions = {
 const headers = csvOptions.headers.map((h) => ({ text: h.headerName }));
 
 const useStyles = makeStyles({
-  pageHeader: {
-    padding: '32px',
-    backgroundColor: palette.white,
-  },
   pageBody: {
     display: 'grid',
     gap: '16px',
-    padding: '16px 32px',
-    backgroundColor: '#f9f9f9',
   },
   tableContainer: {
     overflowWrap: 'normal',
     border: '.5px solid #c2c6ca',
-    margin: '0px 32px',
     width: 'auto',
   },
   tableResultsHeaderContainer: {
     display: 'flex',
-    margin: '16px 32px',
     justifyContent: 'flex-end',
   },
   errorListIcon: {
@@ -71,9 +61,6 @@ const useStyles = makeStyles({
     paddingRight: '16px',
     minWidth: 'auto',
   },
-  fixFooterSpacing: {
-    minHeight: 'calc(100vh - 137px)',
-  },
   wrap: {
     flexFlow: 'wrap',
   },
@@ -143,110 +130,108 @@ function ChplCmsLookup() {
 
   if (cmsDisabledIsOn) {
     return (
-      <Container className={classes.fixFooterSpacing} maxWidth="lg">
-        <div className={classes.pageHeader}>
-          <Typography variant="h1">CMS ID Reverse Lookup</Typography>
-        </div>
-        <div className={classes.pageBody} id="main-content" tabIndex="-1">
+      <>
+        <ChplPageHeader text="CMS ID Reverse Lookup" />
+        <ChplPageBody>
           <Typography variant="body1">
             Access to the CMS ID Creator has been paused. Please check back periodically for updates.
           </Typography>
-        </div>
-      </Container>
+        </ChplPageBody>
+      </>
     );
   }
 
   return (
-    <Container className={classes.fixFooterSpacing} maxWidth="lg">
-      <div className={classes.pageHeader}>
-        <Typography variant="h1">CMS ID Reverse Lookup</Typography>
-      </div>
-      <div className={classes.pageBody} id="main-content" tabIndex="-1">
-        <Typography variant="h2">Lookup CMS EHR Certification IDs</Typography>
-        <Typography variant="body1">
-          Use the box below to determine which products were used to create a specific CMS EHR Certification ID. Enter a CMS EHR Certification ID to display the products which were used to create the associated CMS EHR Certification ID. Additional IDs may be added individually.
-        </Typography>
-      </div>
-      <ChplSearchTerm
-        dispatch={handleDispatch}
-      />
-      <ChplChips
-        cmsIds={cmsIds}
-        dispatch={handleDispatch}
-      />
-      { errors.length > 0
-        && (
-          <Box>
-            <List>
-              { errors
-                .map((msg) => (
-                  <ListItem key={msg}>
-                    <ListItemIcon className={classes.errorListIcon}>
-                      <WarningIcon color="error" />
-                    </ListItemIcon>
-                    {msg}
-                  </ListItem>
-                ))}
-            </List>
-          </Box>
-        )}
-      { listings.length > 0
-        && (
-          <>
-            <div className={classes.tableResultsHeaderContainer}>
-              <ButtonGroup size="small" className={classes.wrap}>
-                <Button
-                  color="secondary"
-                  variant="contained"
-                  fullWidth
-                  id="download-listing-data"
-                  onClick={downloadListingData}
-                  endIcon={<GetAppIcon />}
-                >
-                  Download Result
-                  { listings.length !== 1 ? 's' : '' }
-                </Button>
-              </ButtonGroup>
-            </div>
-            <TableContainer className={classes.tableContainer} component={Paper}>
-              <Table
-                stickyHeader
-                aria-label="CMS ID Listing Data table"
-              >
-                <ChplSortableHeaders
-                  headers={headers}
-                  stickyHeader
-                />
-                <TableBody>
-                  { listings
-                    .map((item) => (
-                      <TableRow key={`${item.certificationId}-${item.id}`}>
-                        <TableCell>{ item.certificationId }</TableCell>
-                        <TableCell>{ item.name }</TableCell>
-                        <TableCell>{ item.version }</TableCell>
-                        <TableCell>{ item.vendor }</TableCell>
-                        <TableCell>
-                          <ChplLink
-                            href={`#/listing/${item.id}`}
-                            text={item.chplProductNumber}
-                            analytics={{
-                              ...analytics,
-                              event: 'Go to Listing Details Page',
-                              label: item.chplProductNumber,
-                              aggregationName: item.name,
-                            }}
-                            external={false}
-                            router={{ sref: 'listing', options: { id: item.id } }}
-                          />
-                        </TableCell>
-                      </TableRow>
+    <>
+      <ChplPageHeader text="CMS ID Reverse Lookup" />
+      <ChplPageBody>
+        <div className={classes.pageBody}>
+          <Typography variant="h2">Lookup CMS EHR Certification IDs</Typography>
+          <Typography variant="body1">
+            Use the box below to determine which products were used to create a specific CMS EHR Certification ID. Enter a CMS EHR Certification ID to display the products which were used to create the associated CMS EHR Certification ID. Additional IDs may be added individually.
+          </Typography>
+          <ChplSearchTerm
+            dispatch={handleDispatch}
+          />
+          <ChplChips
+            cmsIds={cmsIds}
+            dispatch={handleDispatch}
+          />
+          { errors.length > 0
+            && (
+              <Box>
+                <List>
+                  { errors
+                    .map((msg) => (
+                      <ListItem key={msg}>
+                        <ListItemIcon className={classes.errorListIcon}>
+                          <WarningIcon color="error" />
+                        </ListItemIcon>
+                        {msg}
+                      </ListItem>
                     ))}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          </>
-        )}
-    </Container>
+                </List>
+              </Box>
+            )}
+          { listings.length > 0
+            && (
+              <>
+                <div className={classes.tableResultsHeaderContainer}>
+                  <ButtonGroup size="small" className={classes.wrap}>
+                    <Button
+                      color="secondary"
+                      variant="contained"
+                      fullWidth
+                      id="download-listing-data"
+                      onClick={downloadListingData}
+                      endIcon={<GetAppIcon />}
+                    >
+                      Download Result
+                      { listings.length !== 1 ? 's' : '' }
+                    </Button>
+                  </ButtonGroup>
+                </div>
+                <TableContainer className={classes.tableContainer} component={Paper}>
+                  <Table
+                    stickyHeader
+                    aria-label="CMS ID Listing Data table"
+                  >
+                    <ChplSortableHeaders
+                      headers={headers}
+                      stickyHeader
+                    />
+                    <TableBody>
+                      { listings
+                        .map((item) => (
+                          <TableRow key={`${item.certificationId}-${item.id}`}>
+                            <TableCell>{ item.certificationId }</TableCell>
+                            <TableCell>{ item.name }</TableCell>
+                            <TableCell>{ item.version }</TableCell>
+                            <TableCell>{ item.vendor }</TableCell>
+                            <TableCell>
+                              <ChplLink
+                                href={`#/listing/${item.id}`}
+                                text={item.chplProductNumber}
+                                analytics={{
+                                  ...analytics,
+                                  event: 'Go to Listing Details Page',
+                                  label: item.chplProductNumber,
+                                  aggregationName: item.name,
+                                }}
+                                external={false}
+                                router={{ sref: 'listing', options: { id: item.id } }}
+                              />
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </>
+            )}
+        </div>
+      </ChplPageBody>
+    </>
   );
 }
 
diff --git a/src/app/pages/resources/download/download.jsx b/src/app/pages/resources/download/download.jsx
index 47b16d14e4..aeb9ee8819 100755
--- a/src/app/pages/resources/download/download.jsx
+++ b/src/app/pages/resources/download/download.jsx
@@ -6,7 +6,6 @@ import {
   CardActions,
   CardContent,
   CardHeader,
-  Container,
   Divider,
   MenuItem,
   Typography,
@@ -16,7 +15,12 @@ import CodeIcon from '@material-ui/icons/Code';
 import GetAppIcon from '@material-ui/icons/GetApp';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 
-import { ChplLink, ChplTextField } from 'components/util';
+import {
+  ChplLink,
+  ChplPageBody,
+  ChplPageHeader,
+  ChplTextField,
+} from 'components/util';
 import { eventTrack } from 'services/analytics.service';
 import { getAngularService } from 'services/angular-react-helper';
 import { UserContext, useAnalyticsContext } from 'shared/contexts';
@@ -50,16 +54,6 @@ const useStyles = makeStyles({
   listHeaders: {
     marginBottom: '8px',
   },
-  pageHeader: {
-    padding: '32px 0',
-    backgroundColor: palette.white,
-  },
-  pageBody: {
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: palette.background,
-    padding: '32px 0',
-  },
   content: {
     display: 'flex',
     gap: '16px',
@@ -143,157 +137,147 @@ function ChplResourcesDownload() {
 
   return (
     <>
-      <Box bgcolor={palette.background}>
-        <div className={classes.pageHeader}>
-          <Container maxWidth="lg">
-            <Typography
-              variant="h1"
-            >
-              Download the Latest Certified Health IT Product List
-            </Typography>
-          </Container>
-        </div>
-        <div className={classes.pageBody} id="main-content" tabIndex="-1">
-          <Container maxWidth="lg">
-            <div>
-              <Typography
-                variant="h4"
-                component="h2"
-              >
-                Definitions & Guidelines
-              </Typography>
-              <Typography className={classes.listHeaders} gutterBottom variant="h6">Certified Health IT Products</Typography>
-              <Divider />
-              <div className={classes.content}>
-                <Box className={classes.downloadSection}>
-                  <Box width="66%">
-                    <ul className={classes.listSpacing}>
+      <ChplPageHeader text="Download the Latest Certified Health IT Product List" />
+      <ChplPageBody>
+        <div>
+          <Typography
+            variant="h4"
+            component="h2"
+          >
+            Definitions & Guidelines
+          </Typography>
+          <Typography className={classes.listHeaders} gutterBottom variant="h6">Certified Health IT Products</Typography>
+          <Divider />
+          <div className={classes.content}>
+            <Box className={classes.downloadSection}>
+              <Box width="66%">
+                <ul className={classes.listSpacing}>
+                  <li>
+                    <Typography gutterBottom><strong>Certified Products Summary:</strong></Typography>
+                    {' '}
+                    Entire collection of a set of certified products, with only a subset of data elements included. Data elements included are: Certification edition, CHPL ID, ONC-ACB Certification ID, Certification Date, ONC-ACB Name, Developer Name, Product Name, Version, Practice Type (only for 2014 Edition products), Certification Status, Previous Certifying ACB, Total Number of Corrective Action Plans Over Time, Count of Currently Open Corrective Action Plans, and Certification Criteria to which that Certified Product attests.
+                    <ul>
                       <li>
-                        <Typography gutterBottom><strong>Certified Products Summary:</strong></Typography>
-                        {' '}
-                        Entire collection of a set of certified products, with only a subset of data elements included. Data elements included are: Certification edition, CHPL ID, ONC-ACB Certification ID, Certification Date, ONC-ACB Name, Developer Name, Product Name, Version, Practice Type (only for 2014 Edition products), Certification Status, Previous Certifying ACB, Total Number of Corrective Action Plans Over Time, Count of Currently Open Corrective Action Plans, and Certification Criteria to which that Certified Product attests.
-                        <ul>
-                          <li>
-                            The Active products summary file is updated nightly.
-                          </li>
-                          <li>
-                            The Inactive products summary file is updated nightly.
-                          </li>
-                          <li>
-                            The 2014 Edition Summary file is updated quarterly.
-                          </li>
-                        </ul>
+                        The Active products summary file is updated nightly.
                       </li>
                       <li>
-                        <Typography gutterBottom><strong>Standards Version Advancement Process (SVAP) Summary:</strong></Typography>
-                        {' '}
-                        Entire collection of SVAP values that have been associated with a criterion for a certified product. Multiple rows for a single product will appear in the file for any products containing multiple SVAP values and/or SVAP values for multiple criteria. Updated nightly.
+                        The Inactive products summary file is updated nightly.
+                      </li>
+                      <li>
+                        The 2014 Edition Summary file is updated quarterly.
                       </li>
                     </ul>
-                    <Box className={classes.infoBox}>
-                      <InfoOutlinedIcon color="primary" />
-                      <Typography>
-                        The JSON files have been moved to the
-                        {' '}
-                        <ChplLink
-                          text="CHPL API page"
-                          external={false}
-                          inline
-                          href="#/resources/api"
-                          router={{ sref: 'resources.api' }}
-                          analytics={{
-                            ...analytics,
-                            event: 'Navigate to CHPL API page',
-                          }}
-                        />
-                        .
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Card className={classes.downloadCard}>
-                    <CardHeader title="Select A File To Download" />
-                    <CardContent>
-                      <Box display="flex" flexDirection="column" gridGap={16}>
-                        <Typography> To download a list of certified health IT products or compliance activities listed on the CHPL, please select from one of the categories below in the dropdown menu, and then click the Data File or Definition File button as needed.</Typography>
-                        <div className={classes.fullWidth}>
-                          <ChplTextField
-                            select
-                            id="download-select"
-                            name="downloadSelect"
-                            label="Select a collection to download"
-                            value={selectedOption}
-                            onChange={(event) => setSelectedOption(event.target.value)}
-                          >
-                            { downloadOptions.map((item) => (
-                              <MenuItem value={item} key={item}>{item}</MenuItem>
-                            ))}
-                          </ChplTextField>
-                        </div>
-                      </Box>
-                    </CardContent>
-                    <CardActions>
-                      <Button
-                        fullWidth
-                        color="primary"
-                        variant="contained"
-                        id="download-chpl-data-button"
-                        onClick={() => downloadFile('data')}
-                      >
-                        Data File
-                        {' '}
-                        <GetAppIcon className={classes.iconSpacing} />
-                      </Button>
-                      { files[selectedOption]?.definition
-                        && (
-                          <Button
-                            fullWidth
-                            color="primary"
-                            variant="text"
-                            id="download-chpl-definition-button"
-                            onClick={() => downloadFile('definition')}
-                          >
-                            Definition File
-                            {' '}
-                            <CodeIcon className={classes.iconSpacing} />
-                          </Button>
-                        )}
-                    </CardActions>
-                  </Card>
-                </Box>
-                <Box>
-                  <Typography
-                    className={classes.listHeaders}
-                    variant="h4"
-                    component="h2"
-                  >
-                    Compliance Activities
-                  </Typography>
-                  <Divider variant="fullWidth" />
-                </Box>
-                <ul className={classes.listSpacing}>
+                  </li>
                   <li>
-                    <Typography gutterBottom><strong>Service Base URL List Availability:</strong></Typography>
+                    <Typography gutterBottom><strong>Standards Version Advancement Process (SVAP) Summary:</strong></Typography>
                     {' '}
-                    The Service Base URL List Report provides information on the public availability of Service Base URL Lists for certified Health IT Modules. For more details, visit
+                    Entire collection of SVAP values that have been associated with a criterion for a certified product. Multiple rows for a single product will appear in the file for any products containing multiple SVAP values and/or SVAP values for multiple criteria. Updated nightly.
+                  </li>
+                </ul>
+                <Box className={classes.infoBox}>
+                  <InfoOutlinedIcon color="primary" />
+                  <Typography>
+                    The JSON files have been moved to the
                     {' '}
                     <ChplLink
-                      href="https://www.healthit.gov/topic/certification-ehrs/program-resources/api-service-base-url-availability"
-                      text="API Service Base URL Availability"
+                      text="CHPL API page"
+                      external={false}
+                      inline
+                      href="#/resources/api"
+                      router={{ sref: 'resources.api' }}
                       analytics={{
                         ...analytics,
-                        event: 'Go to API Service Base URL Availability',
+                        event: 'Navigate to CHPL API page',
                       }}
-                      external={false}
-                      inline
                     />
                     .
-                  </li>
-                  <li>
-                    <Typography gutterBottom><strong>Surveillance Activity:</strong></Typography>
+                  </Typography>
+                </Box>
+              </Box>
+              <Card className={classes.downloadCard}>
+                <CardHeader title="Select A File To Download" />
+                <CardContent>
+                  <Box display="flex" flexDirection="column" gridGap={16}>
+                    <Typography> To download a list of certified health IT products or compliance activities listed on the CHPL, please select from one of the categories below in the dropdown menu, and then click the Data File or Definition File button as needed.</Typography>
+                    <div className={classes.fullWidth}>
+                      <ChplTextField
+                        select
+                        id="download-select"
+                        name="downloadSelect"
+                        label="Select a collection to download"
+                        value={selectedOption}
+                        onChange={(event) => setSelectedOption(event.target.value)}
+                      >
+                        { downloadOptions.map((item) => (
+                          <MenuItem value={item} key={item}>{item}</MenuItem>
+                        ))}
+                      </ChplTextField>
+                    </div>
+                  </Box>
+                </CardContent>
+                <CardActions>
+                  <Button
+                    fullWidth
+                    color="primary"
+                    variant="contained"
+                    id="download-chpl-data-button"
+                    onClick={() => downloadFile('data')}
+                  >
+                    Data File
                     {' '}
-                    Entire collection of surveillance activity reported to the CHPL.
-                  </li>
-                  { hasAnyRole(['chpl-admin', 'chpl-onc'])
+                    <GetAppIcon className={classes.iconSpacing} />
+                  </Button>
+                  { files[selectedOption]?.definition
+                    && (
+                      <Button
+                        fullWidth
+                        color="primary"
+                        variant="text"
+                        id="download-chpl-definition-button"
+                        onClick={() => downloadFile('definition')}
+                      >
+                        Definition File
+                        {' '}
+                        <CodeIcon className={classes.iconSpacing} />
+                      </Button>
+                    )}
+                </CardActions>
+              </Card>
+            </Box>
+            <Box>
+              <Typography
+                className={classes.listHeaders}
+                variant="h4"
+                component="h2"
+              >
+                Compliance Activities
+              </Typography>
+              <Divider variant="fullWidth" />
+            </Box>
+            <ul className={classes.listSpacing}>
+              <li>
+                <Typography gutterBottom><strong>Service Base URL List Availability:</strong></Typography>
+                {' '}
+                The Service Base URL List Report provides information on the public availability of Service Base URL Lists for certified Health IT Modules. For more details, visit
+                {' '}
+                <ChplLink
+                  href="https://www.healthit.gov/topic/certification-ehrs/program-resources/api-service-base-url-availability"
+                  text="API Service Base URL Availability"
+                  analytics={{
+                    ...analytics,
+                    event: 'Go to API Service Base URL Availability',
+                  }}
+                  external={false}
+                  inline
+                />
+                .
+              </li>
+              <li>
+                <Typography gutterBottom><strong>Surveillance Activity:</strong></Typography>
+                {' '}
+                Entire collection of surveillance activity reported to the CHPL.
+              </li>
+              { hasAnyRole(['chpl-admin', 'chpl-onc'])
                 && (
                   <li>
                     <Typography gutterBottom><strong>Surveillance (Basic):</strong></Typography>
@@ -301,22 +285,20 @@ function ChplResourcesDownload() {
                     Entire collection of surveillance activity reported to the CHPL, with only basic details about non-conformities. Includes statistics on timeframes related to discovered non-conformities.
                   </li>
                 )}
-                  <li>
-                    <Typography gutterBottom><strong>Surveillance Non-Conformities:</strong></Typography>
-                    {' '}
-                    Collection of surveillance activities that resulted in a non-conformity. This is a subset of the data available in the above &quot;Surveillance Activity&quot; file.
-                  </li>
-                  <li>
-                    <Typography gutterBottom><strong>Direct Review Activity:</strong></Typography>
-                    {' '}
-                    Entire collection of Direct Review activity reported to the CHPL.
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </Container>
+              <li>
+                <Typography gutterBottom><strong>Surveillance Non-Conformities:</strong></Typography>
+                {' '}
+                Collection of surveillance activities that resulted in a non-conformity. This is a subset of the data available in the above &quot;Surveillance Activity&quot; file.
+              </li>
+              <li>
+                <Typography gutterBottom><strong>Direct Review Activity:</strong></Typography>
+                {' '}
+                Entire collection of Direct Review activity reported to the CHPL.
+              </li>
+            </ul>
+          </div>
         </div>
-      </Box>
+      </ChplPageBody>
     </>
   );
 }
diff --git a/src/app/pages/resources/overview/overview.jsx b/src/app/pages/resources/overview/overview.jsx
index b929f9fc5f..d9e7f1d66d 100755
--- a/src/app/pages/resources/overview/overview.jsx
+++ b/src/app/pages/resources/overview/overview.jsx
@@ -3,7 +3,6 @@ import {
   Box,
   Card,
   CardContent,
-  Container,
   Divider,
   Table,
   TableBody,
@@ -26,6 +25,8 @@ import { useFetchAnnouncements } from 'api/announcements';
 import { useFetchAtls } from 'api/atls';
 import {
   ChplLink,
+  ChplPageBody,
+  ChplPageHeader,
   InternalScrollButton,
 } from 'components/util';
 import { useAnalyticsContext } from 'shared/contexts';
@@ -54,9 +55,6 @@ const useStyles = makeStyles({
   pageBody: {
     display: 'grid',
     gap: '16px',
-    paddingTop: '32px',
-    paddingBottom: '32px',
-    minHeight: 'calc(100vh - 100px)',
     gridTemplateColumns: '1fr',
     [theme.breakpoints.up('md')]: {
       gridTemplateColumns: 'auto 1fr',
@@ -81,12 +79,6 @@ const useStyles = makeStyles({
       gap: 0,
     },
   },
-  pageBackground: {
-    backgroundColor: '#f9f9f9',
-  },
-  pageHeader: {
-    padding: '32px 0',
-  },
   subheader: {
     fontWeight: 600,
     paddingTop: '8px',
@@ -123,17 +115,9 @@ function ChplResourcesOverview() {
 
   return (
     <>
-      <div className={classes.pageHeader}>
-        <Container maxWidth="lg">
-          <Typography
-            variant="h1"
-          >
-            CHPL Overview
-          </Typography>
-        </Container>
-      </div>
-      <div className={classes.pageBackground} id="main-content" tabIndex="-1">
-        <Container maxWidth="lg" className={classes.pageBody}>
+      <ChplPageHeader text="CHPL Overview" />
+      <ChplPageBody>
+        <div className={classes.pageBody}>
           <Card className={classes.pageNavigation}>
             {announcements.length > 0
               && (
@@ -653,8 +637,8 @@ function ChplResourcesOverview() {
               </CardContent>
             </Card>
           </div>
-        </Container>
-      </div>
+        </div>
+      </ChplPageBody>
     </>
   );
 }

From 536f2d898a58515af3f5d4a9c481fe7c35ddf40c Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Mon, 20 Jul 2026 13:37:20 -0400
Subject: [PATCH 05/14] feat: add loading spinner and skip link for improved
 accessibility and user experience

[#OCD-5313]
---
 src/app/components/util/index.js |   2 +
 src/app/index.run.js             |  39 +++++++++++
 src/index.html                   | 111 ++++++++++++++++++++++++++++++-
 3 files changed, 151 insertions(+), 1 deletion(-)

diff --git a/src/app/components/util/index.js b/src/app/components/util/index.js
index c8baa49b22..db48cf2ca5 100755
--- a/src/app/components/util/index.js
+++ b/src/app/components/util/index.js
@@ -10,6 +10,7 @@ import ChplPagination from './pagination';
 import ChplProgress from './progress';
 import ChplLoadingTable from './loading-table';
 import ChplLoadingCards from './chpl-loading-cards';
+import ChplLoadingSpinner from './chpl-loading-spinner';
 import ChplSortControls from './chpl-sort-controls';
 import { ChplSortableHeaders } from './sortable-headers';
 import ChplSearchResultCard from './chpl-search-result-card';
@@ -28,6 +29,7 @@ export {
   ChplEllipsis,
   ChplLink,
   ChplLoadingCards,
+  ChplLoadingSpinner,
   ChplLoadingTable,
   ChplPageBody,
   ChplPageHeader,
diff --git a/src/app/index.run.js b/src/app/index.run.js
index 327dcb85b8..2f686a0059 100644
--- a/src/app/index.run.js
+++ b/src/app/index.run.js
@@ -1,8 +1,46 @@
 (() => {
   /** @ngInject */
   function runBlock($anchorScroll, $location, $rootScope, $state, $timeout, $transitions, $window, Title, authService) {
+    // Show a global loading indicator during every route transition.
+    // UI-Router transitions without async resolves complete synchronously, so
+    // onStart -> onSuccess can happen within a single frame and the overlay
+    // would never actually paint. We keep it visible for a minimum duration so
+    // the user always sees the custom loader whenever the URL changes.
+    const loadingElement = $window.document.getElementById('chpl-route-loading');
+    const MIN_VISIBLE_MS = 500;
+    let shownAt = 0;
+    let hideTimeout = null;
+
+    const showRouteLoading = () => {
+      if (!loadingElement) { return; }
+      if (hideTimeout) {
+        $timeout.cancel(hideTimeout);
+        hideTimeout = null;
+      }
+      shownAt = Date.now();
+      loadingElement.classList.add('is-active');
+    };
+
+    const hideRouteLoading = () => {
+      if (!loadingElement) { return; }
+      const elapsed = Date.now() - shownAt;
+      const remaining = Math.max(0, MIN_VISIBLE_MS - elapsed);
+      if (hideTimeout) {
+        $timeout.cancel(hideTimeout);
+      }
+      hideTimeout = $timeout(() => {
+        loadingElement.classList.remove('is-active');
+        hideTimeout = null;
+      }, remaining);
+    };
+
+    $transitions.onStart({}, () => {
+      showRouteLoading();
+    });
+
     // Update page title on state change
     $transitions.onSuccess({}, (transition) => {
+      hideRouteLoading();
       let { title } = transition.to().data;
       if (title) {
         if (title instanceof Function) {
@@ -42,6 +80,7 @@
     });
 
     $transitions.onError({}, (transition) => {
+      hideRouteLoading();
       const error = transition.error();
       if ((!error.detail?.name || error.detail.name() !== 'login') && error.message !== 'The transition was ignored') {
         transition.router.stateService.go('not-found', {
diff --git a/src/index.html b/src/index.html
index 7297343857..9f572ddb3c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,13 +38,122 @@
       window.location.replace("unsupported-browser.html")
       }
     </script>
+    <style>
+      /*
+       * Inline copy of Bootstrap's .sr-only / .sr-only-focusable so the
+       * "Skip to main content" link stays visually hidden on a hard reload,
+       * before the SCSS bundle (which also defines these) has loaded.
+       */
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+      .sr-only-focusable:active,
+      .sr-only-focusable:focus {
+        position: static;
+        width: auto;
+        height: auto;
+        margin: 0;
+        overflow: visible;
+        clip: auto;
+      }
+      /*
+       * "Skip to main content" link. It is the first focusable element in the
+       * DOM, so keyboard users reach it on the very first Tab press. It stays
+       * visually hidden until focused, then appears as a prominent button at
+       * the top-left, above the route-loading overlay (z-index 2000).
+       */
+      .chpl-skip-link {
+        position: absolute;
+        top: -100px;
+        left: 8px;
+        z-index: 3000;
+        padding: 12px 20px;
+        background-color: #156dac;
+        color: #fff;
+        font-family: 'Open Sans', Arial, sans-serif;
+        font-size: 1rem;
+        font-weight: 600;
+        line-height: 1;
+        text-decoration: underline;
+        border-radius: 0 0 4px 4px;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+        transition: top 0.15s ease-in-out;
+      }
+      .chpl-skip-link:focus,
+      .chpl-skip-link:active {
+        top: 0;
+        color: #fff;
+        outline: 3px solid #ffc107;
+        outline-offset: 2px;
+      }
+      #chpl-route-loading {
+        position: fixed;
+        inset: 0;
+        z-index: 2000;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(255, 255, 255, 0.75);
+      }
+      #chpl-route-loading.is-active {
+        display: flex;
+      }
+      .chpl-route-loading__spinner {
+        position: relative;
+        width: 96px;
+        height: 96px;
+      }
+      .chpl-route-loading__ring {
+        box-sizing: border-box;
+        position: absolute;
+        inset: 0;
+        border: 4px solid rgba(21, 109, 172, 0.2);
+        border-top-color: #156dac;
+        border-radius: 50%;
+        animation: chpl-route-loading-spin 0.9s linear infinite;
+      }
+      .chpl-route-loading__logo {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 52px;
+        height: 52px;
+        transform: translate(-50%, -50%);
+      }
+      @keyframes chpl-route-loading-spin {
+        to { transform: rotate(360deg); }
+      }
+    </style>
   </head>
   <body class="{{ bodyClass }}">
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P9B8823D"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <a href="#{{ currentPage }}#main-content" class="sr-only sr-only-focusable">Skip to main content</a>
+    <a href="#{{ currentPage }}#main-content" class="chpl-skip-link">Skip to main content</a>
+    <div id="chpl-route-loading" class="is-active" role="status" aria-live="polite" aria-label="Loading">
+      <div class="chpl-route-loading__spinner">
+        <div class="chpl-route-loading__ring"></div>
+        <img class="chpl-route-loading__logo" src="assets/favicons/android-chrome-192x192.png" alt="Loading" />
+      </div>
+    </div>
+    <script>
+      // Defensive fallback: never let the loading overlay stay stuck if the
+      // app fails to bootstrap. Angular hides it on the first route transition.
+      (function () {
+        window.setTimeout(function () {
+          var el = document.getElementById('chpl-route-loading');
+          if (el) { el.classList.remove('is-active'); }
+        }, 20000);
+      })();
+    </script>
     <div ui-view=""></div>
   </body>
 </html>

From 6eb936503c03538b132591bede379f36ee58be3c Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Mon, 20 Jul 2026 14:03:34 -0400
Subject: [PATCH 06/14] feat: add ChplLoadingSpinner component for enhanced
 loading experience

[#OCD-5313]
---
 .../components/util/chpl-loading-spinner.jsx  | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/app/components/util/chpl-loading-spinner.jsx

diff --git a/src/app/components/util/chpl-loading-spinner.jsx b/src/app/components/util/chpl-loading-spinner.jsx
new file mode 100644
index 0000000000..08c1008e14
--- /dev/null
+++ b/src/app/components/util/chpl-loading-spinner.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  Box,
+  CircularProgress,
+  makeStyles,
+} from '@material-ui/core';
+import { bool, number } from 'prop-types';
+
+import ChplLogo from '../../../assets/favicons/android-chrome-192x192.png';
+
+import { palette } from 'themes';
+
+const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flex: '1 0 auto',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    padding: '64px 16px',
+  },
+  spinnerWrapper: {
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+});
+
+function ChplLoadingSpinner({ size = 96, fullHeight = true }) {
+  const classes = useStyles();
+  const logoSize = size * 0.55;
+
+  return (
+    <Box className={classes.container} style={fullHeight ? undefined : { flex: 'unset' }}>
+      <Box className={classes.spinnerWrapper}>
+        <CircularProgress size={size} thickness={2.5} style={{ color: palette.primary }} />
+        <img
+          className={classes.logo}
+          src={ChplLogo}
+          alt="Loading"
+          style={{ width: `${logoSize}px`, height: `${logoSize}px` }}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+export default ChplLoadingSpinner;
+
+ChplLoadingSpinner.propTypes = {
+  size: number,
+  fullHeight: bool,
+};

From cd54873a568be0abda7a4e1771ed17f3b358f7b1 Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Tue, 21 Jul 2026 11:16:23 -0400
Subject: [PATCH 07/14] refactor: Migrate API, Download, and CMS Lookup pages
 to shared page layout

[#OCD-5313]
---
 src/app/index.js                              |   2 +-
 src/app/index.scss                            |   5 +
 src/app/pages/resources/api/api.jsx           | 173 ++++++++--------
 .../pages/resources/cms-lookup/cms-lookup.jsx | 189 ++++++++++--------
 src/app/pages/resources/download/download.jsx | 186 ++++++++---------
 src/app/themes/palette.js                     |   1 +
 6 files changed, 294 insertions(+), 262 deletions(-)

diff --git a/src/app/index.js b/src/app/index.js
index e763223813..ccf232ced9 100644
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -1,8 +1,8 @@
 // Import base SCSS file and then all SCSS files in directories
 import 'angular-loading-bar/build/loading-bar.min.css';
+import 'swagger-ui-react/swagger-ui.css';
 import './index.scss';
 import '../assets/favicons/favicons';
-import 'swagger-ui-react/swagger-ui.css';
 
 import angular from 'angular';
 import /* angularConfirm from */ 'angular-confirm';
diff --git a/src/app/index.scss b/src/app/index.scss
index 2b20f673b3..b313b4c35c 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -690,6 +690,11 @@ label {
 
 .swagger-ui {
 
+    .info {
+        margin: 0 0 24px;
+        border-top: none!important;
+    }
+
     .put {
 
         h5,
diff --git a/src/app/pages/resources/api/api.jsx b/src/app/pages/resources/api/api.jsx
index 790863ca68..5edb2cc39a 100755
--- a/src/app/pages/resources/api/api.jsx
+++ b/src/app/pages/resources/api/api.jsx
@@ -42,16 +42,21 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     gap: '16px',
   },
+  swaggerCardContent: {
+    padding: '16px',
+    '&:last-child': {
+      paddingBottom: '16px',
+    },
+  },
   downloadSection: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
+    display: 'grid',
+    gap: '16px',
+    gridTemplateColumns: '1fr',
+    alignItems: 'start',
+    gridColumn: '1 / -1',
     [theme.breakpoints.up('md')]: {
-      flexDirection: 'row',
+      gridTemplateColumns: '1fr auto',
     },
-    gridColumn: '1 / -1',
   },
   listHeaders: {
     marginBottom: '8px',
@@ -135,26 +140,28 @@ function ChplResourcesApi() {
             <Divider />
           </Box>
           <div className={classes.downloadSection}>
-            <Box width="66%">
-              <ul className={classes.listSpacing}>
-                <li>
-                  <Typography gutterBottom><strong>Certified Products:</strong></Typography>
-                  {' '}
-                  Entire collection of a set of certified products, including all data elements. The file is in a JSON format, and the definition of that structure can be found in the &quot;Schemas&quot; section of the &quot;Certified Health IT Product Listing API&quot; documentation.
-                  <ul>
-                    <li>
-                      The Active products summary file is updated nightly.
-                    </li>
-                    <li>
-                      The Inactive products summary file is updated nightly.
-                    </li>
-                    <li>
-                      The 2014 Edition Products file and the 2011 Edition Products file are updated quarterly.
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </Box>
+            <Card>
+              <CardContent>
+                <ul className={classes.listSpacing}>
+                  <li>
+                    <Typography gutterBottom><strong>Certified Products:</strong></Typography>
+                    {' '}
+                    Entire collection of a set of certified products, including all data elements. The file is in a JSON format, and the definition of that structure can be found in the &quot;Schemas&quot; section of the &quot;Certified Health IT Product Listing API&quot; documentation.
+                    <ul>
+                      <li>
+                        The Active products summary file is updated nightly.
+                      </li>
+                      <li>
+                        The Inactive products summary file is updated nightly.
+                      </li>
+                      <li>
+                        The 2014 Edition Products file and the 2011 Edition Products file are updated quarterly.
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
             <Card className={classes.downloadCard}>
               <CardHeader title="Select A File To Download" />
               <CardContent>
@@ -203,67 +210,69 @@ function ChplResourcesApi() {
             <Divider />
           </div>
           <div className={classes.downloadSection}>
-            <Box width="66%">
-              <Typography
-                gutterBottom
-              >
-                The ONC CHPL API provides programmatic access to ONC published data on Certified Health IT Products. ONC CHPL&apos;s API includes methods for retrieving a subset of our statistical data and the metadata that describes it. Users must complete the CHPL API registration. After completing the CHPL API registration, the user will be given a unique 32-character API key. This API key will also be emailed to the user.
-              </Typography>
-              <Typography
-                gutterBottom
-              >
-                This API key must be used when making a call to the CHPL API. For example, if you wanted to implement the /acbs API, you would make the following call (switching out the key in the URL for your key):
-                {' '}
-                <code>https://chpl.healthit.gov/rest/acbs?api_key=YOUR_KEY_HERE</code>
-              </Typography>
-              <br />
-              <Typography
-                gutterBottom
-              >
-                A sample Java application using the CHPL API can be found at
-                {' '}
-                <ChplLink
-                  href="https://github.com/chpladmin/sample-application"
-                  text="Sample Application"
-                  analytics={{
-                    ...analytics,
-                    event: 'Go to Sample Aplication',
-                  }}
-                  inline
-                />
-              </Typography>
-              <br />
-              <Typography
-                gutterBottom
-              >
-                Release notes for the CHPL API can be found in the
-                {' '}
-                <ChplLink
-                  href="https://github.com/chpladmin/chpl-api/blob/master/RELEASE_NOTES.md"
-                  text="release notes on GitHub"
-                  analytics={{
-                    ...analytics,
-                    event: 'Go to release notes on GitHub',
-                  }}
-                  inline
-                />
-              </Typography>
-            </Box>
+            <Card>
+              <CardContent>
+                <Typography
+                  gutterBottom
+                >
+                  The ONC CHPL API provides programmatic access to ONC published data on Certified Health IT Products. ONC CHPL&apos;s API includes methods for retrieving a subset of our statistical data and the metadata that describes it. Users must complete the CHPL API registration. After completing the CHPL API registration, the user will be given a unique 32-character API key. This API key will also be emailed to the user.
+                </Typography>
+                <Typography
+                  gutterBottom
+                >
+                  This API key must be used when making a call to the CHPL API. For example, if you wanted to implement the /acbs API, you would make the following call (switching out the key in the URL for your key):
+                  {' '}
+                  <code>https://chpl.healthit.gov/rest/acbs?api_key=YOUR_KEY_HERE</code>
+                </Typography>
+                <br />
+                <Typography
+                  gutterBottom
+                >
+                  A sample Java application using the CHPL API can be found at
+                  {' '}
+                  <ChplLink
+                    href="https://github.com/chpladmin/sample-application"
+                    text="Sample Application"
+                    analytics={{
+                      ...analytics,
+                      event: 'Go to Sample Aplication',
+                    }}
+                    inline
+                  />
+                </Typography>
+                <br />
+                <Typography
+                  gutterBottom
+                >
+                  Release notes for the CHPL API can be found in the
+                  {' '}
+                  <ChplLink
+                    href="https://github.com/chpladmin/chpl-api/blob/master/RELEASE_NOTES.md"
+                    text="release notes on GitHub"
+                    analytics={{
+                      ...analytics,
+                      event: 'Go to release notes on GitHub',
+                    }}
+                    inline
+                  />
+                </Typography>
+              </CardContent>
+            </Card>
             <div className={classes.downloadCard}>
               <AnalyticsContext.Provider value={{ analytics }}>
                 <ChplApiKeyRegistration />
               </AnalyticsContext.Provider>
             </div>
           </div>
-          <div
-            className={classes.fullWidth}
-          >
-            <SwaggerUI
-              url={url}
-              docExpansion="none"
-              supportedSubmitMethods={[]}
-            />
-          </div>
+          <Card className={classes.fullWidth}>
+            <CardContent className={classes.swaggerCardContent}>
+              <SwaggerUI
+                url={url}
+                docExpansion="none"
+                supportedSubmitMethods={[]}
+              />
+            </CardContent>
+          </Card>
         </div>
       </ChplPageBody>
     </>
diff --git a/src/app/pages/resources/cms-lookup/cms-lookup.jsx b/src/app/pages/resources/cms-lookup/cms-lookup.jsx
index c36cb4587b..930a58f32c 100755
--- a/src/app/pages/resources/cms-lookup/cms-lookup.jsx
+++ b/src/app/pages/resources/cms-lookup/cms-lookup.jsx
@@ -3,6 +3,8 @@ import {
   Box,
   Button,
   ButtonGroup,
+  Card,
+  CardContent,
   List,
   ListItem,
   ListItemIcon,
@@ -27,6 +29,7 @@ import { ChplSortableHeaders } from 'components/util/sortable-headers';
 import { eventTrack } from 'services/analytics.service';
 import { useLocalStorage as useStorage } from 'services/storage.service';
 import { FlagContext, useAnalyticsContext } from 'shared/contexts';
+import { palette } from 'themes';
 
 const csvOptions = {
   filename: 'cms-id-data',
@@ -43,10 +46,6 @@ const csvOptions = {
 const headers = csvOptions.headers.map((h) => ({ text: h.headerName }));
 
 const useStyles = makeStyles({
-  pageBody: {
-    display: 'grid',
-    gap: '16px',
-  },
   tableContainer: {
     overflowWrap: 'normal',
     border: '.5px solid #c2c6ca',
@@ -133,9 +132,13 @@ function ChplCmsLookup() {
       <>
         <ChplPageHeader text="CMS ID Reverse Lookup" />
         <ChplPageBody>
-          <Typography variant="body1">
-            Access to the CMS ID Creator has been paused. Please check back periodically for updates.
-          </Typography>
+          <Card>
+            <CardContent>
+              <Typography variant="body1">
+                Access to the CMS ID Creator has been paused. Please check back periodically for updates.
+              </Typography>
+            </CardContent>
+          </Card>
         </ChplPageBody>
       </>
     );
@@ -145,91 +148,101 @@ function ChplCmsLookup() {
     <>
       <ChplPageHeader text="CMS ID Reverse Lookup" />
       <ChplPageBody>
-        <div className={classes.pageBody}>
-          <Typography variant="h2">Lookup CMS EHR Certification IDs</Typography>
-          <Typography variant="body1">
-            Use the box below to determine which products were used to create a specific CMS EHR Certification ID. Enter a CMS EHR Certification ID to display the products which were used to create the associated CMS EHR Certification ID. Additional IDs may be added individually.
-          </Typography>
-          <ChplSearchTerm
-            dispatch={handleDispatch}
-          />
-          <ChplChips
-            cmsIds={cmsIds}
-            dispatch={handleDispatch}
-          />
-          { errors.length > 0
-            && (
-              <Box>
-                <List>
-                  { errors
-                    .map((msg) => (
-                      <ListItem key={msg}>
-                        <ListItemIcon className={classes.errorListIcon}>
-                          <WarningIcon color="error" />
-                        </ListItemIcon>
-                        {msg}
-                      </ListItem>
-                    ))}
-                </List>
+        <Box display="flex" flexDirection="column" gridGap={16}>
+          <Card>
+            <CardContent>
+              <Box display="flex" flexDirection="column" gridGap={16}>
+                <Typography variant="h2">Lookup CMS EHR Certification IDs</Typography>
+                <Typography variant="body1">
+                  Use the box below to determine which products were used to create a specific CMS EHR Certification ID. Enter a CMS EHR Certification ID to display the products which were used to create the associated CMS EHR Certification ID. Additional IDs may be added individually.
+                </Typography>
+                <ChplSearchTerm
+                  dispatch={handleDispatch}
+                />
+                <ChplChips
+                  cmsIds={cmsIds}
+                  dispatch={handleDispatch}
+                />
+                { errors.length > 0
+                  && (
+                    <Box bgcolor={palette.errorLight} borderRadius="4px" border={`1px solid ${palette.error}`} p={2}>
+                      <List>
+                        { errors
+                          .map((msg) => (
+                            <ListItem key={msg}>
+                              <ListItemIcon className={classes.errorListIcon}>
+                                <WarningIcon color="error" />
+                              </ListItemIcon>
+                              {msg}
+                            </ListItem>
+                          ))}
+                      </List>
+                    </Box>
+                  )}
               </Box>
-            )}
+            </CardContent>
+          </Card>
           { listings.length > 0
             && (
-              <>
-                <div className={classes.tableResultsHeaderContainer}>
-                  <ButtonGroup size="small" className={classes.wrap}>
-                    <Button
-                      color="secondary"
-                      variant="contained"
-                      fullWidth
-                      id="download-listing-data"
-                      onClick={downloadListingData}
-                      endIcon={<GetAppIcon />}
-                    >
-                      Download Result
-                      { listings.length !== 1 ? 's' : '' }
-                    </Button>
-                  </ButtonGroup>
-                </div>
-                <TableContainer className={classes.tableContainer} component={Paper}>
-                  <Table
-                    stickyHeader
-                    aria-label="CMS ID Listing Data table"
-                  >
-                    <ChplSortableHeaders
-                      headers={headers}
-                      stickyHeader
-                    />
-                    <TableBody>
-                      { listings
-                        .map((item) => (
-                          <TableRow key={`${item.certificationId}-${item.id}`}>
-                            <TableCell>{ item.certificationId }</TableCell>
-                            <TableCell>{ item.name }</TableCell>
-                            <TableCell>{ item.version }</TableCell>
-                            <TableCell>{ item.vendor }</TableCell>
-                            <TableCell>
-                              <ChplLink
-                                href={`#/listing/${item.id}`}
-                                text={item.chplProductNumber}
-                                analytics={{
-                                  ...analytics,
-                                  event: 'Go to Listing Details Page',
-                                  label: item.chplProductNumber,
-                                  aggregationName: item.name,
-                                }}
-                                external={false}
-                                router={{ sref: 'listing', options: { id: item.id } }}
-                              />
-                            </TableCell>
-                          </TableRow>
-                        ))}
-                    </TableBody>
-                  </Table>
-                </TableContainer>
-              </>
+              <Card>
+                <CardContent>
+                  <Box display="flex" flexDirection="column" gridGap={16}>
+                    <div className={classes.tableResultsHeaderContainer}>
+                      <ButtonGroup size="small" className={classes.wrap}>
+                        <Button
+                          color="secondary"
+                          variant="contained"
+                          fullWidth
+                          id="download-listing-data"
+                          onClick={downloadListingData}
+                          endIcon={<GetAppIcon />}
+                        >
+                          Download Result
+                          { listings.length !== 1 ? 's' : '' }
+                        </Button>
+                      </ButtonGroup>
+                    </div>
+                    <TableContainer className={classes.tableContainer} component={Paper}>
+                      <Table
+                        stickyHeader
+                        aria-label="CMS ID Listing Data table"
+                      >
+                        <ChplSortableHeaders
+                          headers={headers}
+                          stickyHeader
+                        />
+                        <TableBody>
+                          { listings
+                            .map((item) => (
+                              <TableRow key={`${item.certificationId}-${item.id}`}>
+                                <TableCell>{ item.certificationId }</TableCell>
+                                <TableCell>{ item.name }</TableCell>
+                                <TableCell>{ item.version }</TableCell>
+                                <TableCell>{ item.vendor }</TableCell>
+                                <TableCell>
+                                  <ChplLink
+                                    href={`#/listing/${item.id}`}
+                                    text={item.chplProductNumber}
+                                    analytics={{
+                                      ...analytics,
+                                      event: 'Go to Listing Details Page',
+                                      label: item.chplProductNumber,
+                                      aggregationName: item.name,
+                                    }}
+                                    external={false}
+                                    router={{ sref: 'listing', options: { id: item.id } }}
+                                  />
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+                  </Box>
+                </CardContent>
+              </Card>
             )}
-        </div>
+        </Box>
       </ChplPageBody>
     </>
   );
diff --git a/src/app/pages/resources/download/download.jsx b/src/app/pages/resources/download/download.jsx
index aeb9ee8819..8776ba73da 100755
--- a/src/app/pages/resources/download/download.jsx
+++ b/src/app/pages/resources/download/download.jsx
@@ -35,13 +35,12 @@ const useStyles = makeStyles({
     },
   },
   downloadSection: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
+    display: 'grid',
+    gap: '16px',
+    gridTemplateColumns: '1fr',
+    alignItems: 'start',
     [theme.breakpoints.up('md')]: {
-      flexDirection: 'row',
+      gridTemplateColumns: '1fr auto',
     },
   },
   listSpacing: {
@@ -150,50 +149,52 @@ function ChplResourcesDownload() {
           <Divider />
           <div className={classes.content}>
             <Box className={classes.downloadSection}>
-              <Box width="66%">
-                <ul className={classes.listSpacing}>
-                  <li>
-                    <Typography gutterBottom><strong>Certified Products Summary:</strong></Typography>
-                    {' '}
-                    Entire collection of a set of certified products, with only a subset of data elements included. Data elements included are: Certification edition, CHPL ID, ONC-ACB Certification ID, Certification Date, ONC-ACB Name, Developer Name, Product Name, Version, Practice Type (only for 2014 Edition products), Certification Status, Previous Certifying ACB, Total Number of Corrective Action Plans Over Time, Count of Currently Open Corrective Action Plans, and Certification Criteria to which that Certified Product attests.
-                    <ul>
-                      <li>
-                        The Active products summary file is updated nightly.
-                      </li>
-                      <li>
-                        The Inactive products summary file is updated nightly.
-                      </li>
-                      <li>
-                        The 2014 Edition Summary file is updated quarterly.
-                      </li>
-                    </ul>
-                  </li>
-                  <li>
-                    <Typography gutterBottom><strong>Standards Version Advancement Process (SVAP) Summary:</strong></Typography>
-                    {' '}
-                    Entire collection of SVAP values that have been associated with a criterion for a certified product. Multiple rows for a single product will appear in the file for any products containing multiple SVAP values and/or SVAP values for multiple criteria. Updated nightly.
-                  </li>
-                </ul>
-                <Box className={classes.infoBox}>
-                  <InfoOutlinedIcon color="primary" />
-                  <Typography>
-                    The JSON files have been moved to the
-                    {' '}
-                    <ChplLink
-                      text="CHPL API page"
-                      external={false}
-                      inline
-                      href="#/resources/api"
-                      router={{ sref: 'resources.api' }}
-                      analytics={{
-                        ...analytics,
-                        event: 'Navigate to CHPL API page',
-                      }}
-                    />
-                    .
-                  </Typography>
-                </Box>
-              </Box>
+              <Card>
+                <CardContent>
+                  <ul className={classes.listSpacing}>
+                    <li>
+                      <Typography gutterBottom><strong>Certified Products Summary:</strong></Typography>
+                      {' '}
+                      Entire collection of a set of certified products, with only a subset of data elements included. Data elements included are: Certification edition, CHPL ID, ONC-ACB Certification ID, Certification Date, ONC-ACB Name, Developer Name, Product Name, Version, Practice Type (only for 2014 Edition products), Certification Status, Previous Certifying ACB, Total Number of Corrective Action Plans Over Time, Count of Currently Open Corrective Action Plans, and Certification Criteria to which that Certified Product attests.
+                      <ul>
+                        <li>
+                          The Active products summary file is updated nightly.
+                        </li>
+                        <li>
+                          The Inactive products summary file is updated nightly.
+                        </li>
+                        <li>
+                          The 2014 Edition Summary file is updated quarterly.
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <Typography gutterBottom><strong>Standards Version Advancement Process (SVAP) Summary:</strong></Typography>
+                      {' '}
+                      Entire collection of SVAP values that have been associated with a criterion for a certified product. Multiple rows for a single product will appear in the file for any products containing multiple SVAP values and/or SVAP values for multiple criteria. Updated nightly.
+                    </li>
+                  </ul>
+                  <Box className={classes.infoBox}>
+                    <InfoOutlinedIcon color="primary" />
+                    <Typography>
+                      The JSON files have been moved to the
+                      {' '}
+                      <ChplLink
+                        text="CHPL API page"
+                        external={false}
+                        inline
+                        href="#/resources/api"
+                        router={{ sref: 'resources.api' }}
+                        analytics={{
+                          ...analytics,
+                          event: 'Navigate to CHPL API page',
+                        }}
+                      />
+                      .
+                    </Typography>
+                  </Box>
+                </CardContent>
+              </Card>
               <Card className={classes.downloadCard}>
                 <CardHeader title="Select A File To Download" />
                 <CardContent>
@@ -244,9 +245,8 @@ function ChplResourcesDownload() {
                 </CardActions>
               </Card>
             </Box>
-            <Box>
+            <Box style={{ marginTop: '16px' }}>
               <Typography
-                className={classes.listHeaders}
                 variant="h4"
                 component="h2"
               >
@@ -254,48 +254,52 @@ function ChplResourcesDownload() {
               </Typography>
               <Divider variant="fullWidth" />
             </Box>
-            <ul className={classes.listSpacing}>
-              <li>
-                <Typography gutterBottom><strong>Service Base URL List Availability:</strong></Typography>
-                {' '}
-                The Service Base URL List Report provides information on the public availability of Service Base URL Lists for certified Health IT Modules. For more details, visit
-                {' '}
-                <ChplLink
-                  href="https://www.healthit.gov/topic/certification-ehrs/program-resources/api-service-base-url-availability"
-                  text="API Service Base URL Availability"
-                  analytics={{
-                    ...analytics,
-                    event: 'Go to API Service Base URL Availability',
-                  }}
-                  external={false}
-                  inline
-                />
-                .
-              </li>
-              <li>
-                <Typography gutterBottom><strong>Surveillance Activity:</strong></Typography>
-                {' '}
-                Entire collection of surveillance activity reported to the CHPL.
-              </li>
-              { hasAnyRole(['chpl-admin', 'chpl-onc'])
-                && (
+            <Card>
+              <CardContent>
+                <ul className={classes.listSpacing}>
+                  <li>
+                    <Typography gutterBottom><strong>Service Base URL List Availability:</strong></Typography>
+                    {' '}
+                    The Service Base URL List Report provides information on the public availability of Service Base URL Lists for certified Health IT Modules. For more details, visit
+                    {' '}
+                    <ChplLink
+                      href="https://www.healthit.gov/topic/certification-ehrs/program-resources/api-service-base-url-availability"
+                      text="API Service Base URL Availability"
+                      analytics={{
+                        ...analytics,
+                        event: 'Go to API Service Base URL Availability',
+                      }}
+                      external={false}
+                      inline
+                    />
+                    .
+                  </li>
+                  <li>
+                    <Typography gutterBottom><strong>Surveillance Activity:</strong></Typography>
+                    {' '}
+                    Entire collection of surveillance activity reported to the CHPL.
+                  </li>
+                  { hasAnyRole(['chpl-admin', 'chpl-onc'])
+                    && (
+                      <li>
+                        <Typography gutterBottom><strong>Surveillance (Basic):</strong></Typography>
+                        {' '}
+                        Entire collection of surveillance activity reported to the CHPL, with only basic details about non-conformities. Includes statistics on timeframes related to discovered non-conformities.
+                      </li>
+                    )}
                   <li>
-                    <Typography gutterBottom><strong>Surveillance (Basic):</strong></Typography>
+                    <Typography gutterBottom><strong>Surveillance Non-Conformities:</strong></Typography>
                     {' '}
-                    Entire collection of surveillance activity reported to the CHPL, with only basic details about non-conformities. Includes statistics on timeframes related to discovered non-conformities.
+                    Collection of surveillance activities that resulted in a non-conformity. This is a subset of the data available in the above &quot;Surveillance Activity&quot; file.
                   </li>
-                )}
-              <li>
-                <Typography gutterBottom><strong>Surveillance Non-Conformities:</strong></Typography>
-                {' '}
-                Collection of surveillance activities that resulted in a non-conformity. This is a subset of the data available in the above &quot;Surveillance Activity&quot; file.
-              </li>
-              <li>
-                <Typography gutterBottom><strong>Direct Review Activity:</strong></Typography>
-                {' '}
-                Entire collection of Direct Review activity reported to the CHPL.
-              </li>
-            </ul>
+                  <li>
+                    <Typography gutterBottom><strong>Direct Review Activity:</strong></Typography>
+                    {' '}
+                    Entire collection of Direct Review activity reported to the CHPL.
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
           </div>
         </div>
       </ChplPageBody>
diff --git a/src/app/themes/palette.js b/src/app/themes/palette.js
index 3e845e09a8..b7b4d9cbab 100755
--- a/src/app/themes/palette.js
+++ b/src/app/themes/palette.js
@@ -7,6 +7,7 @@ const palette = {
   dividerLight: '#d9e2ec',
   error: '#c44f65',
   errorDark: '#853544',
+  errorLight: '#fbeaed',
   grey: '#c6d5e5',
   greyBorder: '#bbb',
   greyLight: '#efefef',

From 4c327b8ade786c5033d4d0d146a9ad6eaefdc105 Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Tue, 21 Jul 2026 11:34:44 -0400
Subject: [PATCH 08/14] refactor: Re-apply resources/reports layout after
 staging merge

Restore ChplPageHeader/ChplPageBody + Card layout migration on top of the
upstream/staging merge, reconciled with the CloudDownloadOutlinedIcon
standardization and HashProvider from staging.

[#OCD-5313]
---
 src/app/app-wrapper.jsx                       |  27 +-
 .../questionable-activity-view.jsx            | 268 ++++++++---------
 src/app/pages/resources/api/api.jsx           | 193 ++++++------
 .../pages/resources/cms-lookup/cms-lookup.jsx | 230 +++++++-------
 src/app/pages/resources/download/download.jsx | 284 +++++++++---------
 .../activity-reporting/activity-reporting.jsx | 130 ++++----
 6 files changed, 559 insertions(+), 573 deletions(-)

diff --git a/src/app/app-wrapper.jsx b/src/app/app-wrapper.jsx
index 041b0e9f0f..7dc07bb314 100755
--- a/src/app/app-wrapper.jsx
+++ b/src/app/app-wrapper.jsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import {
   ThemeProvider,
+  makeStyles,
 } from '@material-ui/core';
 import { bool, node } from 'prop-types';
 import { CookiesProvider } from 'react-cookie';
@@ -19,7 +20,23 @@ import ChplNavigationBottom from 'navigation/navigation-bottom';
 import ChplNavigationTop from 'navigation/navigation-top';
 import theme from 'themes/theme';
 
+const useStyles = makeStyles({
+  appContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '100vh',
+  },
+  content: {
+    flex: '1 0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    minWidth: 0,
+  },
+});
+
 function AppWrapper({ children, showQueryTools = DEVELOPER_MODE }) {
+  const classes = useStyles();
   return (
     <ThemeProvider theme={theme}>
       <SnackbarWrapper>
@@ -37,9 +54,13 @@ function AppWrapper({ children, showQueryTools = DEVELOPER_MODE }) {
                           domain: '.healthit.gov',
                         }}
                         >
-                          <ChplNavigationTop />
-                          {children}
-                          <ChplNavigationBottom />
+                          <div className={classes.appContainer}>
+                            <ChplNavigationTop />
+                            <div className={classes.content}>
+                              {children}
+                            </div>
+                            <ChplNavigationBottom />
+                          </div>
                         </CookiesProvider>
                       </HashProvider>
                     </AnalyticsProvider>
diff --git a/src/app/pages/reports/questionable-activity/questionable-activity-view.jsx b/src/app/pages/reports/questionable-activity/questionable-activity-view.jsx
index cac626caec..9faa9b51d5 100755
--- a/src/app/pages/reports/questionable-activity/questionable-activity-view.jsx
+++ b/src/app/pages/reports/questionable-activity/questionable-activity-view.jsx
@@ -16,6 +16,8 @@ import { useFetchQuestionableActivity } from 'api/questionable-activity';
 import ChplQuestionableActivityDetails from 'components/activity/questionable-activity-details';
 import {
   ChplLink,
+  ChplPageBody,
+  ChplPageHeader,
   ChplPagination,
   ChplLoadingTable,
   ChplSortableHeaders,
@@ -33,23 +35,9 @@ import { useAnalyticsContext } from 'shared/contexts';
 import { theme } from 'themes';
 
 const useStyles = makeStyles({
-  fixFooterSpacing: {
-    minHeight: 'calc(100vh - 188px)',
-  },
   linkWrap: {
     overflowWrap: 'anywhere',
   },
-  pageHeader: {
-    padding: '32px',
-    backgroundColor: '#ffffff',
-  },
-  pageBody: {
-    display: 'grid',
-    gridTemplateColumns: ' 1fr',
-    gap: '16px',
-    padding: '16px 32px',
-    backgroundColor: '#f9f9f9',
-  },
   pageContent: {
     display: 'grid',
     gridTemplateRows: '3fr 1fr',
@@ -67,13 +55,13 @@ const useStyles = makeStyles({
   tableContainer: {
     overflowWrap: 'normal',
     border: '.5px solid #c2c6ca',
-    margin: '0px 32px',
+    marginTop: '16px',
     width: 'auto',
   },
   tableResultsHeaderContainer: {
     display: 'grid',
     gap: '8px',
-    margin: '16px 32px',
+    marginTop: '16px',
     gridTemplateColumns: '1fr',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -172,148 +160,146 @@ function ChplQuestionableActivityView() {
   const pageEnd = Math.min((pageNumber + 1) * pageSize, recordCount);
 
   return (
-    <div className={classes.fixFooterSpacing}>
-      <div className={classes.pageHeader}>
-        <Typography variant="h1">Questionable Activity</Typography>
-      </div>
-      <div className={classes.pageBody} id="main-content" tabIndex="-1">
-        <div>
+    <>
+      <ChplPageHeader
+        text="Questionable Activity"
+        subtitle={(
           <Typography variant="body1">
             The Questionable Activity Report offers users the ability to monitor the activities performed on specific CHPL products by ONC-Authorized Certification Bodies and assess their adherence to ONC-established rules. This feature serves as an essential transparency mechanism, allowing ONC to identify any questionable actions that may warrant further investigation. Users can filter and search this list based on their specific interests or concerns.
           </Typography>
-        </div>
-      </div>
-      <ChplFilterSearchBar />
-      <div>
-        <ChplFilterChips />
-      </div>
-      { isLoading
-        && (
-          <ChplLoadingTable className={classes.tableContainer} />
         )}
-      { !isLoading
-        && (
-          <>
-            <div className={classes.tableResultsHeaderContainer}>
-              <div className={`${classes.resultsContainer} ${classes.wrap}`}>
-                <Typography variant="subtitle2">Search Results:</Typography>
-                { activities.length === 0
-                  && (
-                    <Typography>
-                      No results found
-                    </Typography>
-                  )}
+      />
+      <ChplPageBody>
+        <ChplFilterSearchBar />
+        <ChplFilterChips />
+        { isLoading
+          && (
+            <ChplLoadingTable className={classes.tableContainer} />
+          )}
+        { !isLoading
+          && (
+            <>
+              <div className={classes.tableResultsHeaderContainer}>
+                <div className={`${classes.resultsContainer} ${classes.wrap}`}>
+                  <Typography variant="subtitle2">Search Results:</Typography>
+                  { activities.length === 0
+                    && (
+                      <Typography>
+                        No results found
+                      </Typography>
+                    )}
+                  { activities.length > 0
+                    && (
+                      <Typography variant="body2">
+                        {`(${pageStart}-${pageEnd} of ${recordCount} Results)`}
+                      </Typography>
+                    )}
+                </div>
                 { activities.length > 0
                   && (
-                    <Typography variant="body2">
-                      {`(${pageStart}-${pageEnd} of ${recordCount} Results)`}
-                    </Typography>
+                    <Button
+                      color="secondary"
+                      variant="contained"
+                      size="small"
+                      id="download-filtered-results"
+                      onClick={handleClick}
+                      endIcon={<CloudDownloadOutlinedIcon />}
+                    >
+                      Download Filtered Results
+                    </Button>
                   )}
               </div>
               { activities.length > 0
                 && (
-                  <Button
-                    color="secondary"
-                    variant="contained"
-                    size="small"
-                    id="download-filtered-results"
-                    onClick={handleClick}
-                    endIcon={<CloudDownloadOutlinedIcon />}
-                  >
-                    Download Filtered Results
-                  </Button>
-                )}
-            </div>
-            { activities.length > 0
-              && (
-                <>
-                  <TableContainer className={classes.tableContainer} component={Paper}>
-                    <Table
-                      stickyHeader
-                      aria-label="Questionable Activity table"
-                    >
-                      <ChplSortableHeaders
-                        headers={headers}
-                        onTableSort={handleTableSort}
-                        orderBy={orderBy}
-                        order={sortDescending ? 'desc' : 'asc'}
+                  <>
+                    <TableContainer className={classes.tableContainer} component={Paper}>
+                      <Table
                         stickyHeader
-                      />
-                      <TableBody>
-                        { activities
-                          .map((item) => (
-                            <TableRow key={item.id}>
-                              <TableCell>
-                                { item.developerId
-                                  && (
+                        aria-label="Questionable Activity table"
+                      >
+                        <ChplSortableHeaders
+                          headers={headers}
+                          onTableSort={handleTableSort}
+                          orderBy={orderBy}
+                          order={sortDescending ? 'desc' : 'asc'}
+                          stickyHeader
+                        />
+                        <TableBody>
+                          { activities
+                            .map((item) => (
+                              <TableRow key={item.id}>
+                                <TableCell>
+                                  { item.developerId
+                                    && (
+                                      <ChplLink
+                                        href={`#/organizations/developers/${item.developerId}`}
+                                        text={item.developerName}
+                                        analytics={{
+                                          ...analytics,
+                                          event: 'Go to Developer Page',
+                                          label: item.developerName,
+                                        }}
+                                        external={false}
+                                        router={{ sref: 'organizations.developers.developer', options: { id: item.developerId } }}
+                                      />
+                                    )}
+                                </TableCell>
+                                <TableCell>{item.productName}</TableCell>
+                                <TableCell>{item.versionName}</TableCell>
+                                <TableCell>
+                                  { item.listingId
+                                    && (
                                     <ChplLink
-                                      href={`#/organizations/developers/${item.developerId}`}
-                                      text={item.developerName}
+                                      href={`#/listing/${item.listingId}`}
+                                      text={item.chplProductNumber}
                                       analytics={{
                                         ...analytics,
-                                        event: 'Go to Developer Page',
-                                        label: item.developerName,
+                                        event: 'Go to Listing Details Page',
+                                        label: item.chplProductNumber,
                                       }}
                                       external={false}
-                                      router={{ sref: 'organizations.developers.developer', options: { id: item.developerId } }}
+                                      router={{ sref: 'listing', options: { id: item.listingId } }}
                                     />
-                                  )}
-                              </TableCell>
-                              <TableCell>{item.productName}</TableCell>
-                              <TableCell>{item.versionName}</TableCell>
-                              <TableCell>
-                                { item.listingId
-                                  && (
-                                  <ChplLink
-                                    href={`#/listing/${item.listingId}`}
-                                    text={item.chplProductNumber}
-                                    analytics={{
-                                      ...analytics,
-                                      event: 'Go to Listing Details Page',
-                                      label: item.chplProductNumber,
-                                    }}
-                                    external={false}
-                                    router={{ sref: 'listing', options: { id: item.listingId } }}
-                                  />
-                                  )}
-                              </TableCell>
-                              <TableCell>{item.triggerName}</TableCell>
-                              <TableCell>{ getDisplayDateFormat(item.activityDate) }</TableCell>
-                              <TableCell>
-                                { item.reason
-                                  && (
-                                    <Typography>
-                                      {item.reason}
-                                    </Typography>
-                                  )}
-                                { item.certificationStatusChangeReason
-                                  && (
-                                    <Typography>
-                                      {item.certificationStatusChangeReason}
-                                    </Typography>
-                                  )}
-                              </TableCell>
-                              <TableCell>
-                                <ChplQuestionableActivityDetails activity={item} />
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-                  <ChplPagination
-                    count={recordCount}
-                    page={pageNumber}
-                    rowsPerPage={pageSize}
-                    rowsPerPageOptions={[25, 50, 100]}
-                    setPage={setPageNumber}
-                    setRowsPerPage={setPageSize}
-                  />
-                </>
-              )}
-          </>
-        )}
-    </div>
+                                    )}
+                                </TableCell>
+                                <TableCell>{item.triggerName}</TableCell>
+                                <TableCell>{ getDisplayDateFormat(item.activityDate) }</TableCell>
+                                <TableCell>
+                                  { item.reason
+                                    && (
+                                      <Typography>
+                                        {item.reason}
+                                      </Typography>
+                                    )}
+                                  { item.certificationStatusChangeReason
+                                    && (
+                                      <Typography>
+                                        {item.certificationStatusChangeReason}
+                                      </Typography>
+                                    )}
+                                </TableCell>
+                                <TableCell>
+                                  <ChplQuestionableActivityDetails activity={item} />
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+                    <ChplPagination
+                      count={recordCount}
+                      page={pageNumber}
+                      rowsPerPage={pageSize}
+                      rowsPerPageOptions={[25, 50, 100]}
+                      setPage={setPageNumber}
+                      setRowsPerPage={setPageSize}
+                    />
+                  </>
+                )}
+            </>
+          )}
+      </ChplPageBody>
+    </>
   );
 }
 
diff --git a/src/app/pages/resources/api/api.jsx b/src/app/pages/resources/api/api.jsx
index 56fbec76a3..e345ba7fad 100755
--- a/src/app/pages/resources/api/api.jsx
+++ b/src/app/pages/resources/api/api.jsx
@@ -6,7 +6,6 @@ import {
   CardActions,
   CardContent,
   CardHeader,
-  Container,
   Divider,
   MenuItem,
   Typography,
@@ -15,7 +14,12 @@ import {
 import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import SwaggerUI from 'swagger-ui-react';
 
-import { ChplLink, ChplTextField } from 'components/util';
+import {
+  ChplLink,
+  ChplPageBody,
+  ChplPageHeader,
+  ChplTextField,
+} from 'components/util';
 import { ChplApiKeyRegistration } from 'components/api-key';
 import { eventTrack } from 'services/analytics.service';
 import { getAngularService } from 'services/angular-react-helper';
@@ -37,19 +41,22 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
-    backgroundColor: palette.background,
-    padding: '32px 0',
+  },
+  swaggerCardContent: {
+    padding: '16px',
+    '&:last-child': {
+      paddingBottom: '16px',
+    },
   },
   downloadSection: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
+    display: 'grid',
+    gap: '16px',
+    gridTemplateColumns: '1fr',
+    alignItems: 'start',
+    gridColumn: '1 / -1',
     [theme.breakpoints.up('md')]: {
-      flexDirection: 'row',
+      gridTemplateColumns: '1fr auto',
     },
-    gridColumn: '1 / -1',
   },
   listHeaders: {
     marginBottom: '8px',
@@ -61,10 +68,6 @@ const useStyles = makeStyles({
       marginTop: '.7em',
     },
   },
-  pageHeader: {
-    padding: '32px 0',
-    backgroundColor: palette.white,
-  },
   warningBox: {
     padding: '16px',
     backgroundColor: palette.warningLight,
@@ -123,30 +126,22 @@ function ChplResourcesApi() {
 
   return (
     <>
-      <Box bgcolor={palette.background}>
-        <div className={classes.pageHeader}>
-          <Container maxWidth="lg">
+      <ChplPageHeader text="CHPL API" />
+      <ChplPageBody>
+        <div className={classes.pageBody}>
+          <Box className={classes.fullWidth}>
             <Typography
-              variant="h1"
+              variant="h4"
+              component="h2"
             >
-              CHPL API
+              Definitions & Guidelines
             </Typography>
-          </Container>
-        </div>
-        <Container maxWidth="lg">
-          <div className={classes.pageBody} id="main-content" tabIndex="-1">
-            <Box className={classes.fullWidth}>
-              <Typography
-                variant="h4"
-                component="h2"
-              >
-                Definitions & Guidelines
-              </Typography>
-              <Typography className={classes.listHeaders} gutterBottom variant="h6">Certified Health IT Products</Typography>
-              <Divider />
-            </Box>
-            <div className={classes.downloadSection}>
-              <Box width="66%">
+            <Typography className={classes.listHeaders} gutterBottom variant="h6">Certified Health IT Products</Typography>
+            <Divider />
+          </Box>
+          <div className={classes.downloadSection}>
+            <Card>
+              <CardContent>
                 <ul className={classes.listSpacing}>
                   <li>
                     <Typography gutterBottom><strong>Certified Products:</strong></Typography>
@@ -165,55 +160,57 @@ function ChplResourcesApi() {
                     </ul>
                   </li>
                 </ul>
-              </Box>
-              <Card className={classes.downloadCard}>
-                <CardHeader title="Select A File To Download" />
-                <CardContent>
-                  <Box display="flex" flexDirection="column" gridGap={16}>
-                    <Typography>
-                      To download a list of certified health IT products listed on the CHPL, please select from one of the categories below in the dropdown menu, and then click the Data File button.
-                    </Typography>
-                    <div className={classes.fullWidth}>
-                      <ChplTextField
-                        select
-                        id="download-select"
-                        name="downloadSelect"
-                        label="Select a collection to download"
-                        value={selectedOption}
-                        onChange={(event) => setSelectedOption(event.target.value)}
-                      >
-                        { downloadOptions.map((item) => (
-                          <MenuItem value={item} key={item}>{item}</MenuItem>
-                        ))}
-                      </ChplTextField>
-                    </div>
-                  </Box>
-                </CardContent>
-                <CardActions>
-                  <Button
-                    fullWidth
-                    color="primary"
-                    variant="contained"
-                    id="download-chpl-data-button"
-                    onClick={() => downloadFile('data')}
-                    endIcon={<CloudDownloadOutlinedIcon />}
-                  >
-                    Download Data File
-                  </Button>
-                </CardActions>
-              </Card>
-            </div>
-            <div className={classes.fullWidth}>
-              <Typography
-                variant="h4"
-                component="h2"
-              >
-                Access API Documentation
-              </Typography>
-              <Divider />
-            </div>
-            <div className={classes.downloadSection}>
-              <Box width="66%">
+              </CardContent>
+            </Card>
+            <Card className={classes.downloadCard}>
+              <CardHeader title="Select A File To Download" />
+              <CardContent>
+                <Box display="flex" flexDirection="column" gridGap={16}>
+                  <Typography>
+                    To download a list of certified health IT products listed on the CHPL, please select from one of the categories below in the dropdown menu, and then click the Data File button.
+                  </Typography>
+                  <div className={classes.fullWidth}>
+                    <ChplTextField
+                      select
+                      id="download-select"
+                      name="downloadSelect"
+                      label="Select a collection to download"
+                      value={selectedOption}
+                      onChange={(event) => setSelectedOption(event.target.value)}
+                    >
+                      { downloadOptions.map((item) => (
+                        <MenuItem value={item} key={item}>{item}</MenuItem>
+                      ))}
+                    </ChplTextField>
+                  </div>
+                </Box>
+              </CardContent>
+              <CardActions>
+                <Button
+                  fullWidth
+                  color="primary"
+                  variant="contained"
+                  id="download-chpl-data-button"
+                  onClick={() => downloadFile('data')}
+                  endIcon={<CloudDownloadOutlinedIcon />}
+                >
+                  Download Data File
+                </Button>
+              </CardActions>
+            </Card>
+          </div>
+          <div className={classes.fullWidth}>
+            <Typography
+              variant="h4"
+              component="h2"
+            >
+              Access API Documentation
+            </Typography>
+            <Divider />
+          </div>
+          <div className={classes.downloadSection}>
+            <Card>
+              <CardContent>
                 <Typography
                   gutterBottom
                 >
@@ -258,25 +255,25 @@ function ChplResourcesApi() {
                     inline
                   />
                 </Typography>
-              </Box>
-              <div className={classes.downloadCard}>
-                <AnalyticsContext.Provider value={{ analytics }}>
-                  <ChplApiKeyRegistration />
-                </AnalyticsContext.Provider>
-              </div>
+              </CardContent>
+            </Card>
+            <div className={classes.downloadCard}>
+              <AnalyticsContext.Provider value={{ analytics }}>
+                <ChplApiKeyRegistration />
+              </AnalyticsContext.Provider>
             </div>
-            <div
-              className={classes.fullWidth}
-            >
+          </div>
+          <Card className={classes.fullWidth}>
+            <CardContent className={classes.swaggerCardContent}>
               <SwaggerUI
                 url={url}
                 docExpansion="none"
                 supportedSubmitMethods={[]}
               />
-            </div>
-          </div>
-        </Container>
-      </Box>
+            </CardContent>
+          </Card>
+        </div>
+      </ChplPageBody>
     </>
   );
 }
diff --git a/src/app/pages/resources/cms-lookup/cms-lookup.jsx b/src/app/pages/resources/cms-lookup/cms-lookup.jsx
index 463b016edd..ea62dd17ba 100755
--- a/src/app/pages/resources/cms-lookup/cms-lookup.jsx
+++ b/src/app/pages/resources/cms-lookup/cms-lookup.jsx
@@ -3,7 +3,8 @@ import {
   Box,
   Button,
   ButtonGroup,
-  Container,
+  Card,
+  CardContent,
   List,
   ListItem,
   ListItemIcon,
@@ -23,7 +24,7 @@ import { ExportToCsv } from 'export-to-csv';
 import { useFetchListings } from 'api/cms';
 import ChplChips from 'components/cms/chips';
 import ChplSearchTerm from 'components/cms/search-term';
-import { ChplLink } from 'components/util';
+import { ChplLink, ChplPageBody, ChplPageHeader } from 'components/util';
 import { ChplSortableHeaders } from 'components/util/sortable-headers';
 import { eventTrack } from 'services/analytics.service';
 import { useLocalStorage as useStorage } from 'services/storage.service';
@@ -45,25 +46,13 @@ const csvOptions = {
 const headers = csvOptions.headers.map((h) => ({ text: h.headerName }));
 
 const useStyles = makeStyles({
-  pageHeader: {
-    padding: '32px',
-    backgroundColor: palette.white,
-  },
-  pageBody: {
-    display: 'grid',
-    gap: '16px',
-    padding: '16px 32px',
-    backgroundColor: '#f9f9f9',
-  },
   tableContainer: {
     overflowWrap: 'normal',
     border: '.5px solid #c2c6ca',
-    margin: '0px 32px',
     width: 'auto',
   },
   tableResultsHeaderContainer: {
     display: 'flex',
-    margin: '16px 32px',
     justifyContent: 'flex-end',
   },
   errorListIcon: {
@@ -71,9 +60,6 @@ const useStyles = makeStyles({
     paddingRight: '16px',
     minWidth: 'auto',
   },
-  fixFooterSpacing: {
-    minHeight: 'calc(100vh - 137px)',
-  },
   wrap: {
     flexFlow: 'wrap',
   },
@@ -143,110 +129,122 @@ function ChplCmsLookup() {
 
   if (cmsDisabledIsOn) {
     return (
-      <Container className={classes.fixFooterSpacing} maxWidth="lg">
-        <div className={classes.pageHeader}>
-          <Typography variant="h1">CMS ID Reverse Lookup</Typography>
-        </div>
-        <div className={classes.pageBody} id="main-content" tabIndex="-1">
-          <Typography variant="body1">
-            Access to the CMS ID Creator has been paused. Please check back periodically for updates.
-          </Typography>
-        </div>
-      </Container>
+      <>
+        <ChplPageHeader text="CMS ID Reverse Lookup" />
+        <ChplPageBody>
+          <Card>
+            <CardContent>
+              <Typography variant="body1">
+                Access to the CMS ID Creator has been paused. Please check back periodically for updates.
+              </Typography>
+            </CardContent>
+          </Card>
+        </ChplPageBody>
+      </>
     );
   }
 
   return (
-    <Container className={classes.fixFooterSpacing} maxWidth="lg">
-      <div className={classes.pageHeader}>
-        <Typography variant="h1">CMS ID Reverse Lookup</Typography>
-      </div>
-      <div className={classes.pageBody} id="main-content" tabIndex="-1">
-        <Typography variant="h2">Lookup CMS EHR Certification IDs</Typography>
-        <Typography variant="body1">
-          Use the box below to determine which products were used to create a specific CMS EHR Certification ID. Enter a CMS EHR Certification ID to display the products which were used to create the associated CMS EHR Certification ID. Additional IDs may be added individually.
-        </Typography>
-      </div>
-      <ChplSearchTerm
-        dispatch={handleDispatch}
-      />
-      <ChplChips
-        cmsIds={cmsIds}
-        dispatch={handleDispatch}
-      />
-      { errors.length > 0
-        && (
-          <Box>
-            <List>
-              { errors
-                .map((msg) => (
-                  <ListItem key={msg}>
-                    <ListItemIcon className={classes.errorListIcon}>
-                      <WarningIcon color="error" />
-                    </ListItemIcon>
-                    {msg}
-                  </ListItem>
-                ))}
-            </List>
-          </Box>
-        )}
-      { listings.length > 0
-        && (
-          <>
-            <div className={classes.tableResultsHeaderContainer}>
-              <ButtonGroup size="small" className={classes.wrap}>
-                <Button
-                  color="secondary"
-                  variant="contained"
-                  fullWidth
-                  id="download-listing-data"
-                  onClick={downloadListingData}
-                  endIcon={<CloudDownloadOutlinedIcon />}
-                >
-                  Download Result
-                  { listings.length !== 1 ? 's' : '' }
-                </Button>
-              </ButtonGroup>
-            </div>
-            <TableContainer className={classes.tableContainer} component={Paper}>
-              <Table
-                stickyHeader
-                aria-label="CMS ID Listing Data table"
-              >
-                <ChplSortableHeaders
-                  headers={headers}
-                  stickyHeader
+    <>
+      <ChplPageHeader text="CMS ID Reverse Lookup" />
+      <ChplPageBody>
+        <Box display="flex" flexDirection="column" gridGap={16}>
+          <Card>
+            <CardContent>
+              <Box display="flex" flexDirection="column" gridGap={16}>
+                <Typography variant="h2">Lookup CMS EHR Certification IDs</Typography>
+                <Typography variant="body1">
+                  Use the box below to determine which products were used to create a specific CMS EHR Certification ID. Enter a CMS EHR Certification ID to display the products which were used to create the associated CMS EHR Certification ID. Additional IDs may be added individually.
+                </Typography>
+                <ChplSearchTerm
+                  dispatch={handleDispatch}
+                />
+                <ChplChips
+                  cmsIds={cmsIds}
+                  dispatch={handleDispatch}
                 />
-                <TableBody>
-                  { listings
-                    .map((item) => (
-                      <TableRow key={`${item.certificationId}-${item.id}`}>
-                        <TableCell>{ item.certificationId }</TableCell>
-                        <TableCell>{ item.name }</TableCell>
-                        <TableCell>{ item.version }</TableCell>
-                        <TableCell>{ item.vendor }</TableCell>
-                        <TableCell>
-                          <ChplLink
-                            href={`#/listing/${item.id}`}
-                            text={item.chplProductNumber}
-                            analytics={{
-                              ...analytics,
-                              event: 'Go to Listing Details Page',
-                              label: item.chplProductNumber,
-                              aggregationName: item.name,
-                            }}
-                            external={false}
-                            router={{ sref: 'listing', options: { id: item.id } }}
-                          />
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          </>
-        )}
-    </Container>
+                { errors.length > 0
+                  && (
+                    <Box bgcolor={palette.errorLight} borderRadius="4px" border={`1px solid ${palette.error}`} p={2}>
+                      <List>
+                        { errors
+                          .map((msg) => (
+                            <ListItem key={msg}>
+                              <ListItemIcon className={classes.errorListIcon}>
+                                <WarningIcon color="error" />
+                              </ListItemIcon>
+                              {msg}
+                            </ListItem>
+                          ))}
+                      </List>
+                    </Box>
+                  )}
+              </Box>
+            </CardContent>
+          </Card>
+          { listings.length > 0
+            && (
+              <Card>
+                <CardContent>
+                  <Box display="flex" flexDirection="column" gridGap={16}>
+                    <div className={classes.tableResultsHeaderContainer}>
+                      <ButtonGroup size="small" className={classes.wrap}>
+                        <Button
+                          color="secondary"
+                          variant="contained"
+                          fullWidth
+                          id="download-listing-data"
+                          onClick={downloadListingData}
+                          endIcon={<CloudDownloadOutlinedIcon />}
+                        >
+                          Download Result
+                          { listings.length !== 1 ? 's' : '' }
+                        </Button>
+                      </ButtonGroup>
+                    </div>
+                    <TableContainer className={classes.tableContainer} component={Paper}>
+                      <Table
+                        stickyHeader
+                        aria-label="CMS ID Listing Data table"
+                      >
+                        <ChplSortableHeaders
+                          headers={headers}
+                          stickyHeader
+                        />
+                        <TableBody>
+                          { listings
+                            .map((item) => (
+                              <TableRow key={`${item.certificationId}-${item.id}`}>
+                                <TableCell>{ item.certificationId }</TableCell>
+                                <TableCell>{ item.name }</TableCell>
+                                <TableCell>{ item.version }</TableCell>
+                                <TableCell>{ item.vendor }</TableCell>
+                                <TableCell>
+                                  <ChplLink
+                                    href={`#/listing/${item.id}`}
+                                    text={item.chplProductNumber}
+                                    analytics={{
+                                      ...analytics,
+                                      event: 'Go to Listing Details Page',
+                                      label: item.chplProductNumber,
+                                      aggregationName: item.name,
+                                    }}
+                                    external={false}
+                                    router={{ sref: 'listing', options: { id: item.id } }}
+                                  />
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+                  </Box>
+                </CardContent>
+              </Card>
+            )}
+        </Box>
+      </ChplPageBody>
+    </>
   );
 }
 
diff --git a/src/app/pages/resources/download/download.jsx b/src/app/pages/resources/download/download.jsx
index afa4ac87f8..fa6381bd78 100755
--- a/src/app/pages/resources/download/download.jsx
+++ b/src/app/pages/resources/download/download.jsx
@@ -6,7 +6,6 @@ import {
   CardActions,
   CardContent,
   CardHeader,
-  Container,
   Divider,
   MenuItem,
   Typography,
@@ -16,7 +15,12 @@ import CodeIcon from '@material-ui/icons/Code';
 import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 
-import { ChplLink, ChplTextField } from 'components/util';
+import {
+  ChplLink,
+  ChplPageBody,
+  ChplPageHeader,
+  ChplTextField,
+} from 'components/util';
 import { eventTrack } from 'services/analytics.service';
 import { getAngularService } from 'services/angular-react-helper';
 import { UserContext, useAnalyticsContext } from 'shared/contexts';
@@ -31,13 +35,12 @@ const useStyles = makeStyles({
     },
   },
   downloadSection: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
+    display: 'grid',
+    gap: '16px',
+    gridTemplateColumns: '1fr',
+    alignItems: 'start',
     [theme.breakpoints.up('md')]: {
-      flexDirection: 'row',
+      gridTemplateColumns: '1fr auto',
     },
   },
   listSpacing: {
@@ -50,16 +53,6 @@ const useStyles = makeStyles({
   listHeaders: {
     marginBottom: '8px',
   },
-  pageHeader: {
-    padding: '32px 0',
-    backgroundColor: palette.white,
-  },
-  pageBody: {
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: palette.background,
-    padding: '32px 0',
-  },
   content: {
     display: 'flex',
     gap: '16px',
@@ -143,132 +136,125 @@ function ChplResourcesDownload() {
 
   return (
     <>
-      <Box bgcolor={palette.background}>
-        <div className={classes.pageHeader}>
-          <Container maxWidth="lg">
-            <Typography
-              variant="h1"
-            >
-              Download the Latest Certified Health IT Product List
-            </Typography>
-          </Container>
-        </div>
-        <div className={classes.pageBody} id="main-content" tabIndex="-1">
-          <Container maxWidth="lg">
-            <div>
-              <Typography
-                variant="h4"
-                component="h2"
-              >
-                Definitions & Guidelines
-              </Typography>
-              <Typography className={classes.listHeaders} gutterBottom variant="h6">Certified Health IT Products</Typography>
-              <Divider />
-              <div className={classes.content}>
-                <Box className={classes.downloadSection}>
-                  <Box width="66%">
-                    <ul className={classes.listSpacing}>
-                      <li>
-                        <Typography gutterBottom><strong>Certified Products Summary:</strong></Typography>
-                        {' '}
-                        Entire collection of a set of certified products, with only a subset of data elements included. Data elements included are: Certification edition, CHPL ID, ONC-ACB Certification ID, Certification Date, ONC-ACB Name, Developer Name, Product Name, Version, Practice Type (only for 2014 Edition products), Certification Status, Previous Certifying ACB, Total Number of Corrective Action Plans Over Time, Count of Currently Open Corrective Action Plans, and Certification Criteria to which that Certified Product attests.
-                        <ul>
-                          <li>
-                            The Active products summary file is updated nightly.
-                          </li>
-                          <li>
-                            The Inactive products summary file is updated nightly.
-                          </li>
-                          <li>
-                            The 2014 Edition Summary file is updated quarterly.
-                          </li>
-                        </ul>
-                      </li>
-                      <li>
-                        <Typography gutterBottom><strong>Standards Version Advancement Process (SVAP) Summary:</strong></Typography>
-                        {' '}
-                        Entire collection of SVAP values that have been associated with a criterion for a certified product. Multiple rows for a single product will appear in the file for any products containing multiple SVAP values and/or SVAP values for multiple criteria. Updated nightly.
-                      </li>
-                    </ul>
-                    <Box className={classes.infoBox}>
-                      <InfoOutlinedIcon color="primary" />
-                      <Typography>
-                        The JSON files have been moved to the
-                        {' '}
-                        <ChplLink
-                          text="CHPL API page"
-                          external={false}
-                          inline
-                          href="#/resources/api"
-                          router={{ sref: 'resources.api' }}
-                          analytics={{
-                            ...analytics,
-                            event: 'Navigate to CHPL API page',
-                          }}
-                        />
-                        .
-                      </Typography>
-                    </Box>
+      <ChplPageHeader text="Download the Latest Certified Health IT Product List" />
+      <ChplPageBody>
+        <div>
+          <Typography
+            variant="h4"
+            component="h2"
+          >
+            Definitions & Guidelines
+          </Typography>
+          <Typography className={classes.listHeaders} gutterBottom variant="h6">Certified Health IT Products</Typography>
+          <Divider />
+          <div className={classes.content}>
+            <Box className={classes.downloadSection}>
+              <Card>
+                <CardContent>
+                  <ul className={classes.listSpacing}>
+                    <li>
+                      <Typography gutterBottom><strong>Certified Products Summary:</strong></Typography>
+                      {' '}
+                      Entire collection of a set of certified products, with only a subset of data elements included. Data elements included are: Certification edition, CHPL ID, ONC-ACB Certification ID, Certification Date, ONC-ACB Name, Developer Name, Product Name, Version, Practice Type (only for 2014 Edition products), Certification Status, Previous Certifying ACB, Total Number of Corrective Action Plans Over Time, Count of Currently Open Corrective Action Plans, and Certification Criteria to which that Certified Product attests.
+                      <ul>
+                        <li>
+                          The Active products summary file is updated nightly.
+                        </li>
+                        <li>
+                          The Inactive products summary file is updated nightly.
+                        </li>
+                        <li>
+                          The 2014 Edition Summary file is updated quarterly.
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <Typography gutterBottom><strong>Standards Version Advancement Process (SVAP) Summary:</strong></Typography>
+                      {' '}
+                      Entire collection of SVAP values that have been associated with a criterion for a certified product. Multiple rows for a single product will appear in the file for any products containing multiple SVAP values and/or SVAP values for multiple criteria. Updated nightly.
+                    </li>
+                  </ul>
+                  <Box className={classes.infoBox}>
+                    <InfoOutlinedIcon color="primary" />
+                    <Typography>
+                      The JSON files have been moved to the
+                      {' '}
+                      <ChplLink
+                        text="CHPL API page"
+                        external={false}
+                        inline
+                        href="#/resources/api"
+                        router={{ sref: 'resources.api' }}
+                        analytics={{
+                          ...analytics,
+                          event: 'Navigate to CHPL API page',
+                        }}
+                      />
+                      .
+                    </Typography>
+                  </Box>
+                </CardContent>
+              </Card>
+              <Card className={classes.downloadCard}>
+                <CardHeader title="Select A File To Download" />
+                <CardContent>
+                  <Box display="flex" flexDirection="column" gridGap={16}>
+                    <Typography> To download a list of certified health IT products or compliance activities listed on the CHPL, please select from one of the categories below in the dropdown menu, and then click the Data File or Definition File button as needed.</Typography>
+                    <div className={classes.fullWidth}>
+                      <ChplTextField
+                        select
+                        id="download-select"
+                        name="downloadSelect"
+                        label="Select a collection to download"
+                        value={selectedOption}
+                        onChange={(event) => setSelectedOption(event.target.value)}
+                      >
+                        { downloadOptions.map((item) => (
+                          <MenuItem value={item} key={item}>{item}</MenuItem>
+                        ))}
+                      </ChplTextField>
+                    </div>
                   </Box>
-                  <Card className={classes.downloadCard}>
-                    <CardHeader title="Select A File To Download" />
-                    <CardContent>
-                      <Box display="flex" flexDirection="column" gridGap={16}>
-                        <Typography> To download a list of certified health IT products or compliance activities listed on the CHPL, please select from one of the categories below in the dropdown menu, and then click the Data File or Definition File button as needed.</Typography>
-                        <div className={classes.fullWidth}>
-                          <ChplTextField
-                            select
-                            id="download-select"
-                            name="downloadSelect"
-                            label="Select a collection to download"
-                            value={selectedOption}
-                            onChange={(event) => setSelectedOption(event.target.value)}
-                          >
-                            { downloadOptions.map((item) => (
-                              <MenuItem value={item} key={item}>{item}</MenuItem>
-                            ))}
-                          </ChplTextField>
-                        </div>
-                      </Box>
-                    </CardContent>
-                    <CardActions>
+                </CardContent>
+                <CardActions>
+                  <Button
+                    fullWidth
+                    color="primary"
+                    variant="contained"
+                    id="download-chpl-data-button"
+                    onClick={() => downloadFile('data')}
+                    endIcon={<CloudDownloadOutlinedIcon />}
+                  >
+                    Data File
+                  </Button>
+                  { files[selectedOption]?.definition
+                    && (
                       <Button
                         fullWidth
                         color="primary"
-                        variant="contained"
-                        id="download-chpl-data-button"
-                        onClick={() => downloadFile('data')}
-                        endIcon={<CloudDownloadOutlinedIcon />}
+                        variant="text"
+                        id="download-chpl-definition-button"
+                        onClick={() => downloadFile('definition')}
                       >
-                        Data File
+                        Definition File
+                        {' '}
+                        <CodeIcon className={classes.iconSpacing} />
                       </Button>
-                      { files[selectedOption]?.definition
-                        && (
-                          <Button
-                            fullWidth
-                            color="primary"
-                            variant="text"
-                            id="download-chpl-definition-button"
-                            onClick={() => downloadFile('definition')}
-                          >
-                            Definition File
-                            {' '}
-                            <CodeIcon className={classes.iconSpacing} />
-                          </Button>
-                        )}
-                    </CardActions>
-                  </Card>
-                </Box>
-                <Box>
-                  <Typography
-                    className={classes.listHeaders}
-                    variant="h4"
-                    component="h2"
-                  >
-                    Compliance Activities
-                  </Typography>
-                  <Divider variant="fullWidth" />
-                </Box>
+                    )}
+                </CardActions>
+              </Card>
+            </Box>
+            <Box style={{ marginTop: '16px' }}>
+              <Typography
+                variant="h4"
+                component="h2"
+              >
+                Compliance Activities
+              </Typography>
+              <Divider variant="fullWidth" />
+            </Box>
+            <Card>
+              <CardContent>
                 <ul className={classes.listSpacing}>
                   <li>
                     <Typography gutterBottom><strong>Service Base URL List Availability:</strong></Typography>
@@ -293,13 +279,13 @@ function ChplResourcesDownload() {
                     Entire collection of surveillance activity reported to the CHPL.
                   </li>
                   { hasAnyRole(['chpl-admin', 'chpl-onc'])
-                && (
-                  <li>
-                    <Typography gutterBottom><strong>Surveillance (Basic):</strong></Typography>
-                    {' '}
-                    Entire collection of surveillance activity reported to the CHPL, with only basic details about non-conformities. Includes statistics on timeframes related to discovered non-conformities.
-                  </li>
-                )}
+                    && (
+                      <li>
+                        <Typography gutterBottom><strong>Surveillance (Basic):</strong></Typography>
+                        {' '}
+                        Entire collection of surveillance activity reported to the CHPL, with only basic details about non-conformities. Includes statistics on timeframes related to discovered non-conformities.
+                      </li>
+                    )}
                   <li>
                     <Typography gutterBottom><strong>Surveillance Non-Conformities:</strong></Typography>
                     {' '}
@@ -311,11 +297,11 @@ function ChplResourcesDownload() {
                     Entire collection of Direct Review activity reported to the CHPL.
                   </li>
                 </ul>
-              </div>
-            </div>
-          </Container>
+              </CardContent>
+            </Card>
+          </div>
         </div>
-      </Box>
+      </ChplPageBody>
     </>
   );
 }
diff --git a/src/app/pages/surveillance/activity-reporting/activity-reporting.jsx b/src/app/pages/surveillance/activity-reporting/activity-reporting.jsx
index f37d5bc55c..0d922d04a1 100755
--- a/src/app/pages/surveillance/activity-reporting/activity-reporting.jsx
+++ b/src/app/pages/surveillance/activity-reporting/activity-reporting.jsx
@@ -5,7 +5,6 @@ import {
   Card,
   CardContent,
   CardHeader,
-  Container,
   MenuItem,
   makeStyles,
 } from '@material-ui/core';
@@ -16,7 +15,7 @@ import * as yup from 'yup';
 import { LocalDate } from '@js-joda/core';
 
 import { usePostSurveillanceActivityReport } from 'api/surveillance';
-import { ChplTextField } from 'components/util';
+import { ChplPageBody, ChplPageHeader, ChplTextField } from 'components/util';
 import { utilStyles } from 'themes';
 
 const useStyles = makeStyles({
@@ -25,7 +24,6 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'stretch',
-    paddingTop: '16px',
     gap: '16px',
   },
   formContent: {
@@ -34,9 +32,6 @@ const useStyles = makeStyles({
     gap: '16px',
     marginBottom: '16px',
   },
-  fixFooterSpacing: {
-    minHeight: 'calc(100vh - 100px)',
-  },
 });
 
 const validationSchema = yup.object({
@@ -123,67 +118,70 @@ function ChplSurveillanceActivityReporting() {
   });
 
   return (
-    <Container className={classes.fixFooterSpacing} maxWidth="md">
-      <div className={classes.container}>
-        <Card>
-          <CardHeader
-            title="Activity Reporting"
-            subheader="Select a Date Range to Download Reports"
-          />
-          <CardContent>
-            <Box className={classes.formContent}>
-              <ChplTextField
-                select
-                required
-                id="year"
-                name="year"
-                label="Year"
-                value={formik.values.year}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                error={formik.touched.year && !!formik.errors.year}
-                helperText={formik.touched.year && formik.errors.year}
-              >
-                { getYears().map((year) => (
-                  <MenuItem key={year} value={year}>
-                    {year}
-                  </MenuItem>
-                ))}
-              </ChplTextField>
-              <ChplTextField
-                select
-                required
-                id="quarter"
-                name="quarter"
-                label="Quarter"
-                value={formik.values.quarter}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                error={formik.touched.quarter && !!formik.errors.quarter}
-                helperText={formik.touched.quarter && formik.errors.quarter}
+    <>
+      <ChplPageHeader text="Surveillance Activity Reporting" />
+      <ChplPageBody maxWidth="md">
+        <div className={classes.container}>
+          <Card>
+            <CardHeader
+              title="Activity Reporting"
+              subheader="Select a Date Range to Download Reports"
+            />
+            <CardContent>
+              <Box className={classes.formContent}>
+                <ChplTextField
+                  select
+                  required
+                  id="year"
+                  name="year"
+                  label="Year"
+                  value={formik.values.year}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  error={formik.touched.year && !!formik.errors.year}
+                  helperText={formik.touched.year && formik.errors.year}
+                >
+                  { getYears().map((year) => (
+                    <MenuItem key={year} value={year}>
+                      {year}
+                    </MenuItem>
+                  ))}
+                </ChplTextField>
+                <ChplTextField
+                  select
+                  required
+                  id="quarter"
+                  name="quarter"
+                  label="Quarter"
+                  value={formik.values.quarter}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  error={formik.touched.quarter && !!formik.errors.quarter}
+                  helperText={formik.touched.quarter && formik.errors.quarter}
+                >
+                  <MenuItem value="all">All</MenuItem>
+                  <MenuItem value="q1">Q1</MenuItem>
+                  <MenuItem value="q2">Q2</MenuItem>
+                  <MenuItem value="q3">Q3</MenuItem>
+                  <MenuItem value="q4">Q4</MenuItem>
+                </ChplTextField>
+              </Box>
+              <Button
+                color="primary"
+                variant="contained"
+                name="downloadResults"
+                id="download-results"
+                disabled={!formik.isValid}
+                onClick={formik.handleSubmit}
+                endIcon={<CloudDownloadOutlinedIcon />}
               >
-                <MenuItem value="all">All</MenuItem>
-                <MenuItem value="q1">Q1</MenuItem>
-                <MenuItem value="q2">Q2</MenuItem>
-                <MenuItem value="q3">Q3</MenuItem>
-                <MenuItem value="q4">Q4</MenuItem>
-              </ChplTextField>
-            </Box>
-            <Button
-              color="primary"
-              variant="contained"
-              name="downloadResults"
-              id="download-results"
-              disabled={!formik.isValid}
-              onClick={formik.handleSubmit}
-              endIcon={<CloudDownloadOutlinedIcon />}
-            >
-              Download Results
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-    </Container>
+                Download Results
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </ChplPageBody>
+    </>
   );
 }
 

From ee70f0b17c41e01b59ee053bed530b145293b7de Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Tue, 21 Jul 2026 13:19:09 -0400
Subject: [PATCH 09/14] refactor: Enhance ChplPageHeader component with actions
 and titleAdornment props

[#OCD-5313]
---
 src/app/components/util/chpl-page-header.jsx | 61 +++++++++++++-------
 1 file changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/app/components/util/chpl-page-header.jsx b/src/app/components/util/chpl-page-header.jsx
index 91e4b79d22..affe01fe3a 100644
--- a/src/app/components/util/chpl-page-header.jsx
+++ b/src/app/components/util/chpl-page-header.jsx
@@ -13,33 +13,44 @@ import { node, string } from 'prop-types';
 import { eventTrack } from 'services/analytics.service';
 import { palette } from 'themes';
 
-function ChplPageHeader({ text, subtitle }) {
+function ChplPageHeader({
+  text, subtitle, actions, titleAdornment,
+}) {
   const [expanded, setExpanded] = useState(true);
 
   return (
     <Box position="relative" boxShadow={2} bgcolor={palette.white} p={8}>
       <Container maxWidth="lg">
-        <Box display="flex" alignItems="center" justifyContent="space-between" flexWrap="wrap">
-          <Typography variant="h1">
-            { text }
-          </Typography>
-          { subtitle
+        <Box display="flex" alignItems="center" justifyContent="space-between" flexWrap="wrap" gridGap={16}>
+          <Box display="flex" alignItems="center" gridGap={4}>
+            <Typography variant="h1">
+              { text }
+            </Typography>
+            { titleAdornment }
+          </Box>
+          { (actions || subtitle)
             && (
-              <Button
-                color="primary"
-                style={{ fontSize: '1rem' }}
-                onClick={() => {
-                  const next = !expanded;
-                  setExpanded(next);
-                  eventTrack({
-                    event: next ? 'Show Page Header Information' : 'Hide Page Header Information',
-                    label: text,
-                  });
-                }}
-                endIcon={expanded ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
-              >
-                { expanded ? 'Hide Details' : 'Show Details' }
-              </Button>
+              <Box display="flex" alignItems="center" flexWrap="wrap" gridGap={8}>
+                { actions }
+                { subtitle
+                  && (
+                    <Button
+                      color="primary"
+                      style={{ fontSize: '1rem' }}
+                      onClick={() => {
+                        const next = !expanded;
+                        setExpanded(next);
+                        eventTrack({
+                          event: next ? 'Show Page Header Information' : 'Hide Page Header Information',
+                          label: text,
+                        });
+                      }}
+                      endIcon={expanded ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
+                    >
+                      { expanded ? 'Hide Details' : 'Show Details' }
+                    </Button>
+                  )}
+              </Box>
             )}
         </Box>
         { subtitle
@@ -62,4 +73,12 @@ export default ChplPageHeader;
 ChplPageHeader.propTypes = {
   text: string.isRequired,
   subtitle: node,
+  actions: node,
+  titleAdornment: node,
+};
+
+ChplPageHeader.defaultProps = {
+  subtitle: null,
+  actions: null,
+  titleAdornment: null,
 };

From 73d008e5471a33c4b455a09ba6ff83d733194545 Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Tue, 21 Jul 2026 14:17:56 -0400
Subject: [PATCH 10/14] refactor: Replace container and header with
 ChplPageHeader and ChplPageBody components in ChplComparePage

[#OCD-5313]
---
 src/app/pages/compare/compare.jsx | 169 ++++++++++++++----------------
 1 file changed, 76 insertions(+), 93 deletions(-)

diff --git a/src/app/pages/compare/compare.jsx b/src/app/pages/compare/compare.jsx
index 0ffd2bd55f..c76778fdf7 100755
--- a/src/app/pages/compare/compare.jsx
+++ b/src/app/pages/compare/compare.jsx
@@ -3,7 +3,6 @@ import {
   Box,
   Card,
   CircularProgress,
-  Container,
   IconButton,
   Table,
   TableBody,
@@ -11,7 +10,6 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Typography,
   makeStyles,
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
@@ -23,7 +21,12 @@ import { string } from 'prop-types';
 
 import { useFetchListing } from 'api/listing';
 import ChplBrowserComparedWidget from 'components/browser/browser-compared-widget';
-import { ChplLink, ChplTooltip } from 'components/util';
+import {
+  ChplLink,
+  ChplPageBody,
+  ChplPageHeader,
+  ChplTooltip,
+} from 'components/util';
 import { eventTrack } from 'services/analytics.service';
 import { sortCriteria } from 'services/criteria.service';
 import { sortCqms } from 'services/cqms.service';
@@ -33,15 +36,6 @@ import { palette, theme, utilStyles } from 'themes';
 
 const useStyles = makeStyles({
   ...utilStyles,
-  container: {
-    padding: '32px 0',
-    backgroundColor: palette.background,
-    minHeight: 'calc(100vh - 259px)', 
-  },
-  pageHeader: {
-    padding: '32px',
-    backgroundColor: palette.white,
-  },
   headerRow: {
     boxShadow: 'rgba(149, 157, 165, 0.1) 0 16px 8px',
     '&.MuiTableRow-root.MuiTableRow-hover:hover': {
@@ -261,88 +255,77 @@ function ChplComparePage({ ids }) {
   }
 
   return (
-    <Box bgcolor={palette.white}>
-      <div className={classes.pageHeader}>
-        <Container maxWidth="lg">
-          <Box className={classes.listingHeaderBox}>
-            <Typography
-              variant="h1"
-              gutterBottom
-            >
-              Compare Products
-            </Typography>
-            <Typography
-              variant="body1"
-            >
-              { listings.length }
-              {' '}
-              Products Selected | For the best experience, we suggest comparing up to four products at a time. If you want to compare more than four products, you can still do so! Just remember to scroll horizontally on the page to access all the products you&apos;ve added. While you have the flexibility to compare more items; we encourage you to focus on the most relevant products for your needs.
-            </Typography>
-          </Box>
-        </Container>
-      </div>
-      <Box className={classes.container}>
-        <Container id="main-content" tabIndex="-1" maxWidth="lg">
-          <Card>
-            <TableContainer className={classes.Table}>
-              <Table size="small">
-                <TableHead>
-                  <TableRow hover={false} className={classes.headerRow}>
-                    <TableCell className={classes.stickyColumn}><span className="sr-only">Data item</span></TableCell>
-                    { listings.map((listing) => (
-                      <TableCell className={classes.headerColumnContent} key={listing.id}>
-                        <Box mb={2} display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
-                          { listing.product.name }
-                          <ChplBrowserComparedWidget
-                            listing={listing}
-                          />
-                          <IconButton
-                            size="small"
-                            onClick={() => dropListing(listing)}
-                            disabled={listings.length <= 2}
-                          >
-                            <CloseIcon />
-                          </IconButton>
-                        </Box>
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  { makeRow('Developer', (listing) => listing.developer.name) }
-                  { makeRow('Version', (listing) => listing.version.version) }
-                  { makeRow('Certification Status', (listing) => listing.currentStatus.status.name) }
-                  { showPracticeType ? makeRow('Practice Type', (listing) => (listing.practiceType.name ? listing.practiceType.name : 'N/A')) : null }
-                  { makeRow('Certifying Body', (listing) => listing.certifyingBody.name) }
-                  { makeRow('Certification Date', (listing) => getDisplayDateFormat(listing.certificationDay)) }
-                  { makeRow('Inactive/Decertified Date', (listing) => getDisplayDateFormat(listing.decertificationDay)) }
-                  { makeRow('CHPL Product Number', (listing) => listing.chplProductNumber) }
-                  { makeRow('Number of Open Non-Conformities', (listing) => listing.countOpenNonconformities) }
-                  { makeRow('Certification Criteria', (listing) => `${listing.countCerts} met`) }
-                  { criteria.map(makeCriterionRow) }
-                  { makeRow('Clinical Quality Measures', (listing) => `${listing.countCqms} met`) }
-                  { cqms.map(makeCqmRow) }
-                  { makeRow('View product details', (listing) => (
-                    <ChplLink
-                      href={`#/listing/${listing.id}`}
-                      text="details"
-                      analytics={{
-                        ...analytics,
-                        event: 'Navigate to Listing Details Page',
-                        label: listing.chplProductNumber,
-                        aggregationName: listing.product.name,
-                      }}
-                      external={false}
-                      router={{ sref: 'listing', options: { id: listing.id } }}
-                    />
+    <>
+      <ChplPageHeader
+        text="Compare Products"
+        subtitle={(
+          <>
+            { listings.length }
+            {' '}
+            Products Selected | For the best experience, we suggest comparing up to four products at a time. If you want to compare more than four products, you can still do so! Just remember to scroll horizontally on the page to access all the products you&apos;ve added. While you have the flexibility to compare more items; we encourage you to focus on the most relevant products for your needs.
+          </>
+        )}
+      />
+      <ChplPageBody>
+        <Card>
+          <TableContainer className={classes.Table}>
+            <Table size="small">
+              <TableHead>
+                <TableRow hover={false} className={classes.headerRow}>
+                  <TableCell className={classes.stickyColumn}><span className="sr-only">Data item</span></TableCell>
+                  { listings.map((listing) => (
+                    <TableCell className={classes.headerColumnContent} key={listing.id}>
+                      <Box mb={2} display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
+                        { listing.product.name }
+                        <ChplBrowserComparedWidget
+                          listing={listing}
+                        />
+                        <IconButton
+                          size="small"
+                          onClick={() => dropListing(listing)}
+                          disabled={listings.length <= 2}
+                        >
+                          <CloseIcon />
+                        </IconButton>
+                      </Box>
+                    </TableCell>
                   ))}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          </Card>
-        </Container>
-      </Box>
-    </Box>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                { makeRow('Developer', (listing) => listing.developer.name) }
+                { makeRow('Version', (listing) => listing.version.version) }
+                { makeRow('Certification Status', (listing) => listing.currentStatus.status.name) }
+                { showPracticeType ? makeRow('Practice Type', (listing) => (listing.practiceType.name ? listing.practiceType.name : 'N/A')) : null }
+                { makeRow('Certifying Body', (listing) => listing.certifyingBody.name) }
+                { makeRow('Certification Date', (listing) => getDisplayDateFormat(listing.certificationDay)) }
+                { makeRow('Inactive/Decertified Date', (listing) => getDisplayDateFormat(listing.decertificationDay)) }
+                { makeRow('CHPL Product Number', (listing) => listing.chplProductNumber) }
+                { makeRow('Number of Open Non-Conformities', (listing) => listing.countOpenNonconformities) }
+                { makeRow('Certification Criteria', (listing) => `${listing.countCerts} met`) }
+                { criteria.map(makeCriterionRow) }
+                { makeRow('Clinical Quality Measures', (listing) => `${listing.countCqms} met`) }
+                { cqms.map(makeCqmRow) }
+                { makeRow('View product details', (listing) => (
+                  <ChplLink
+                    href={`#/listing/${listing.id}`}
+                    text="details"
+                    analytics={{
+                      ...analytics,
+                      event: 'Navigate to Listing Details Page',
+                      label: listing.chplProductNumber,
+                      aggregationName: listing.product.name,
+                    }}
+                    external={false}
+                    router={{ sref: 'listing', options: { id: listing.id } }}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Card>
+      </ChplPageBody>
+    </>
   );
 }
 

From b38bf73ee566e7a69b87fd5bb6eb962723c55bac Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Tue, 21 Jul 2026 14:36:27 -0400
Subject: [PATCH 11/14] refactor: Replace Container and Box components with
 ChplPageHeader and ChplPageBody in multiple pages

[#OCD-5313]
---
 .../listing/listing-edit-upload.jsx           | 352 +++++++++---------
 src/app/pages/listing/listing-edit.jsx        | 101 +++--
 src/app/pages/listing/listing.jsx             | 196 +++++-----
 .../developers/developer/developer.jsx        |  28 +-
 4 files changed, 310 insertions(+), 367 deletions(-)

diff --git a/src/app/components/listing/listing-edit-upload.jsx b/src/app/components/listing/listing-edit-upload.jsx
index a1e21d83e3..8d3254731b 100755
--- a/src/app/components/listing/listing-edit-upload.jsx
+++ b/src/app/components/listing/listing-edit-upload.jsx
@@ -36,8 +36,6 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     gridTemplateColumns: '1fr 1fr',
     gap: '32px',
-    padding: '32px 0',
-    backgroundColor: palette.background,
     [theme.breakpoints.up('md')]: {
       display: 'grid',
       alignItems: 'start',
@@ -96,10 +94,6 @@ const useStyles = makeStyles({
     backgroundColor: palette.white,
     boxShadow: 'rgba(149, 157, 165, 0.1) 0px 4px 8px',
   },
-  pageHeader: {
-    padding: '32px 0',
-    backgroundColor: palette.white,
-  },
   placeholderContainer: {
     background: palette.white,
     border: `.5px solid ${palette.divider}`,
@@ -210,98 +204,97 @@ function ChplListingEditUpload({
   }
 
   return (
-    <Box bgcolor={palette.background}>
-      <Box id="main-content" tabIndex="-1">
-        <ListingContext.Provider value={newListingState}>
-          <ChplUploadListing
-            id={listing.id}
-            setErrors={setErrors}
-            setWarnings={setWarnings}
-            setDiff={setDiff}
-          />
-        </ListingContext.Provider>
-        <div className={classes.pageContainer}>
-          <div className={classes.container}>
-            <div className={classes.headerContainer}>
-              <Typography
-                gutterBottom
-                component="h3"
-                style={{ fontWeight: '600' }}
-                variant="h4"
-              >
-                Current Listing
-              </Typography>
-            </div>
-            <div className={classes.headerContainer}>
-              <Typography
-                gutterBottom
-                component="h3"
-                style={{ fontWeight: '600' }}
-                variant="h4"
-              >
-                Updated Listing
-              </Typography>
-            </div>
-            <Card>
-              <Box className={classes.sectionHeader}>
-                <Typography className={classes.sectionHeaderText} variant="h2">Listing Information</Typography>
-              </Box>
-              <CardContent>
-                <ChplListingInformation
-                  listing={listing}
-                />
-              </CardContent>
-            </Card>
-            { !newListing ? (
-              <Box className={classes.placeholderContainer}>
-                <HelpOutlineIcon fontSize="large" color="primary" />
-                <Typography>Upload a file above to display your new listing.</Typography>
-              </Box>
-            ) : (
-              <ListingContext.Provider value={newListingState}>
-                <Card>
-                  <Box className={classes.sectionHeader}>
-                    <Typography className={classes.sectionHeaderText} variant="h2">Listing Information</Typography>
-                  </Box>
-                  <CardContent>
-                    <ChplListingInformation
-                      listing={newListing}
+    <>
+      <ListingContext.Provider value={newListingState}>
+        <ChplUploadListing
+          id={listing.id}
+          setErrors={setErrors}
+          setWarnings={setWarnings}
+          setDiff={setDiff}
+        />
+      </ListingContext.Provider>
+      <div className={classes.pageContainer}>
+        <div className={classes.container}>
+          <div className={classes.headerContainer}>
+            <Typography
+              gutterBottom
+              component="h3"
+              style={{ fontWeight: '600' }}
+              variant="h4"
+            >
+              Current Listing
+            </Typography>
+          </div>
+          <div className={classes.headerContainer}>
+            <Typography
+              gutterBottom
+              component="h3"
+              style={{ fontWeight: '600' }}
+              variant="h4"
+            >
+              Updated Listing
+            </Typography>
+          </div>
+          <Card>
+            <Box className={classes.sectionHeader}>
+              <Typography className={classes.sectionHeaderText} variant="h2">Listing Information</Typography>
+            </Box>
+            <CardContent>
+              <ChplListingInformation
+                listing={listing}
+              />
+            </CardContent>
+          </Card>
+          { !newListing ? (
+            <Box className={classes.placeholderContainer}>
+              <HelpOutlineIcon fontSize="large" color="primary" />
+              <Typography>Upload a file above to display your new listing.</Typography>
+            </Box>
+          ) : (
+            <ListingContext.Provider value={newListingState}>
+              <Card>
+                <Box className={classes.sectionHeader}>
+                  <Typography className={classes.sectionHeaderText} variant="h2">Listing Information</Typography>
+                </Box>
+                <CardContent>
+                  <ChplListingInformation
+                    listing={newListing}
+                  />
+                </CardContent>
+              </Card>
+            </ListingContext.Provider>
+          )}
+          <Card>
+            <Box className={classes.sectionHeader}>
+              <Typography className={classes.sectionHeaderText} variant="h2">Certification Criteria</Typography>
+              <div>
+                <FormControlLabel
+                  control={(
+                    <Switch
+                      id="see-all-criteria"
+                      name="seeAllCriteria"
+                      checked={seeAllCriteria}
+                      color="primary"
+                      onChange={toggleSeeAllCriteria}
                     />
-                  </CardContent>
-                </Card>
-              </ListingContext.Provider>
-            )}
-            <Card>
-              <Box className={classes.sectionHeader}>
-                <Typography className={classes.sectionHeaderText} variant="h2">Certification Criteria</Typography>
-                <div>
-                  <FormControlLabel
-                    control={(
-                      <Switch
-                        id="see-all-criteria"
-                        name="seeAllCriteria"
-                        checked={seeAllCriteria}
-                        color="primary"
-                        onChange={toggleSeeAllCriteria}
-                      />
                     )}
-                    label="See all Certification Criteria"
-                  />
-                  (
-                  {listing.certificationResults.filter((cr) => cr.success).length}
-                  {' '}
-                  found)
-                </div>
-              </Box>
-              <CardContent>
-                <ChplCriteria
-                  listing={listing}
-                  viewAll={seeAllCriteria}
+                  label="See all Certification Criteria"
                 />
-              </CardContent>
-            </Card>
-            <div>
-              { newListing
+                (
+                {listing.certificationResults.filter((cr) => cr.success).length}
+                {' '}
+                found)
+              </div>
+            </Box>
+            <CardContent>
+              <ChplCriteria
+                listing={listing}
+                viewAll={seeAllCriteria}
+              />
+            </CardContent>
+          </Card>
+          <div>
+            { newListing
                 && (
                   <ListingContext.Provider value={newListingState}>
                     <Card>
@@ -335,39 +328,39 @@ function ChplListingEditUpload({
                     </Card>
                   </ListingContext.Provider>
                 )}
-            </div>
-            <Card>
-              <Box className={classes.sectionHeader}>
-                <Typography className={classes.sectionHeaderText} variant="h2">Clinical Quality Measures</Typography>
-                <div>
-                  <FormControlLabel
-                    control={(
-                      <Switch
-                        id="see-all-cqms"
-                        name="seeAllCqms"
-                        color="primary"
-                        checked={seeAllCqms}
-                        onChange={toggleSeeAllCqms}
-                      />
+          </div>
+          <Card>
+            <Box className={classes.sectionHeader}>
+              <Typography className={classes.sectionHeaderText} variant="h2">Clinical Quality Measures</Typography>
+              <div>
+                <FormControlLabel
+                  control={(
+                    <Switch
+                      id="see-all-cqms"
+                      name="seeAllCqms"
+                      color="primary"
+                      checked={seeAllCqms}
+                      onChange={toggleSeeAllCqms}
+                    />
                     )}
-                    label="See all CQMs"
-                  />
-                  (
-                  {listing.cqmResults.filter((cqm) => cqm.success).length}
-                  {' '}
-                  found)
-                </div>
-              </Box>
-              <CardContent>
-                <ChplCqms
-                  cqms={listing.cqmResults}
-                  edition={listing.edition}
-                  viewAll={seeAllCqms}
+                  label="See all CQMs"
                 />
-              </CardContent>
-            </Card>
-            <div>
-              { newListing
+                (
+                {listing.cqmResults.filter((cqm) => cqm.success).length}
+                {' '}
+                found)
+              </div>
+            </Box>
+            <CardContent>
+              <ChplCqms
+                cqms={listing.cqmResults}
+                edition={listing.edition}
+                viewAll={seeAllCqms}
+              />
+            </CardContent>
+          </Card>
+          <div>
+            { newListing
                 && (
                   <ListingContext.Provider value={newListingState}>
                     <Card>
@@ -402,19 +395,19 @@ function ChplListingEditUpload({
                     </Card>
                   </ListingContext.Provider>
                 )}
-            </div>
-            <Card>
-              <Box className={classes.sectionHeader}>
-                <Typography className={classes.sectionHeaderText} variant="h2">Safety Enhanced Design (SED)</Typography>
-              </Box>
-              <CardContent>
-                <ChplSed
-                  listing={listing}
-                />
-              </CardContent>
-            </Card>
-            <div>
-              { newListing
+          </div>
+          <Card>
+            <Box className={classes.sectionHeader}>
+              <Typography className={classes.sectionHeaderText} variant="h2">Safety Enhanced Design (SED)</Typography>
+            </Box>
+            <CardContent>
+              <ChplSed
+                listing={listing}
+              />
+            </CardContent>
+          </Card>
+          <div>
+            { newListing
                 && (
                   <ListingContext.Provider value={newListingState}>
                     <Card>
@@ -429,19 +422,19 @@ function ChplListingEditUpload({
                     </Card>
                   </ListingContext.Provider>
                 )}
-            </div>
-            <Card>
-              <Box className={classes.sectionHeader}>
-                <Typography className={classes.sectionHeaderText} variant="h2">G1/G2 Measures</Typography>
-              </Box>
-              <CardContent>
-                <ChplG1G2
-                  measures={listing.measures}
-                />
-              </CardContent>
-            </Card>
-            <div>
-              { newListing
+          </div>
+          <Card>
+            <Box className={classes.sectionHeader}>
+              <Typography className={classes.sectionHeaderText} variant="h2">G1/G2 Measures</Typography>
+            </Box>
+            <CardContent>
+              <ChplG1G2
+                measures={listing.measures}
+              />
+            </CardContent>
+          </Card>
+          <div>
+            { newListing
                 && (
                   <ListingContext.Provider value={newListingState}>
                     <Card>
@@ -456,20 +449,20 @@ function ChplListingEditUpload({
                     </Card>
                   </ListingContext.Provider>
                 )}
-            </div>
-            <Card>
-              <Box className={classes.sectionHeader}>
-                <Typography className={classes.sectionHeaderText} variant="h2">Additional Information</Typography>
-              </Box>
-              <CardContent>
-                <ChplAdditionalInformation
-                  listing={listing}
-                  isConfirming
-                />
-              </CardContent>
-            </Card>
-            <div>
-              { newListing
+          </div>
+          <Card>
+            <Box className={classes.sectionHeader}>
+              <Typography className={classes.sectionHeaderText} variant="h2">Additional Information</Typography>
+            </Box>
+            <CardContent>
+              <ChplAdditionalInformation
+                listing={listing}
+                isConfirming
+              />
+            </CardContent>
+          </Card>
+          <div>
+            { newListing
                 && (
                   <ListingContext.Provider value={newListingState}>
                     <Card>
@@ -485,27 +478,27 @@ function ChplListingEditUpload({
                     </Card>
                   </ListingContext.Provider>
                 )}
-            </div>
           </div>
-          <Box className={classes.differenceContainer}>
-            <Box className={classes.headerContainer}>
-              <Typography gutterBottom component="h3" style={{ fontWeight: '600' }} variant="h4">
-                Differences
-              </Typography>
-            </Box>
-            { diff.length === 0 && !newListing
+        </div>
+        <Box className={classes.differenceContainer}>
+          <Box className={classes.headerContainer}>
+            <Typography gutterBottom component="h3" style={{ fontWeight: '600' }} variant="h4">
+              Differences
+            </Typography>
+          </Box>
+          { diff.length === 0 && !newListing
               && (
                 <Box className={classes.placeholderContainer}>
                   <Typography>Waiting for upload to show results...</Typography>
                 </Box>
               )}
-            { diff.length === 0 && newListing
+          { diff.length === 0 && newListing
               && (
                 <Box className={classes.placeholderContainer}>
                   <Typography>No differences found</Typography>
                 </Box>
               )}
-            { diff.length > 0
+          { diff.length > 0
               && (
                 <Fade style={{ transitionDelay: newListing ? '1.5s' : '0ms' }} in={!!diff.length > 0}>
                   <Box className={classes.differenceCallout}>
@@ -517,9 +510,8 @@ function ChplListingEditUpload({
                   </Box>
                 </Fade>
               )}
-          </Box>
-        </div>
-      </Box>
+        </Box>
+      </div>
       <ChplActionBar
         dispatch={handleDispatch}
         errors={errors}
@@ -529,7 +521,7 @@ function ChplListingEditUpload({
         showErrorAcknowledgement={errors.length > 0}
         showWarningAcknowledgement={warnings.length > 0}
       />
-    </Box>
+    </>
   );
 }
 
diff --git a/src/app/pages/listing/listing-edit.jsx b/src/app/pages/listing/listing-edit.jsx
index 5fbfe4c897..b801127069 100755
--- a/src/app/pages/listing/listing-edit.jsx
+++ b/src/app/pages/listing/listing-edit.jsx
@@ -1,13 +1,11 @@
 import React, { useContext, useRef, useState } from 'react';
 import {
-  Box,
   Button,
   Card,
   CardContent,
   CardHeader,
   CircularProgress,
   ClickAwayListener,
-  Container,
   Grow,
   List,
   ListItem,
@@ -24,7 +22,11 @@ import { func } from 'prop-types';
 import { usePutListing } from 'api/listing';
 import ChplListingEdit from 'components/listing/listing-edit';
 import ChplListingEditUpload from 'components/listing/listing-edit-upload';
-import { ChplTextField } from 'components/util';
+import {
+  ChplPageBody,
+  ChplPageHeader,
+  ChplTextField,
+} from 'components/util';
 import { eventTrack } from 'services/analytics.service';
 import { AnalyticsContext, ListingContext, useAnalyticsContext } from 'shared/contexts';
 import { utilStyles, palette } from 'themes';
@@ -142,12 +144,10 @@ function ChplListingEditPage({ dispatch }) {
 
   return (
     <AnalyticsContext.Provider value={analyticsData}>
-      <Box bgcolor="white" py={8}>
-        <Container maxWidth="xl">
-          <Box display="flex" justifyContent="space-between" flexDirection="row">
-            <Typography variant="h1">
-              {listing.product.name}
-            </Typography>
+      <ChplPageHeader
+        text={listing.product.name}
+        actions={(
+          <>
             <Button
               aria-controls={open ? 'menu' : undefined}
               aria-expanded={open ? 'true' : undefined}
@@ -170,6 +170,7 @@ function ChplListingEditPage({ dispatch }) {
             >
               {({ TransitionProps, placement }) => (
                 <Grow
+                  // eslint-disable-next-line react/jsx-props-no-spreading
                   {...TransitionProps}
                   style={{
                     transformOrigin:
@@ -194,49 +195,47 @@ function ChplListingEditPage({ dispatch }) {
                 </Grow>
               )}
             </Popper>
-          </Box>
-        </Container>
-      </Box>
-      <Box sx={{ backgroundColor: palette.background }}>
-        <Box py={8} className={classes.container} id="main-content" tabIndex="-1">
-          <Container maxWidth={isEditing ? 'md' : 'xl'}>
-            { isEditing ? (
-              <ChplListingEdit
-                dispatch={handleDispatch}
-                errors={errors}
-                warnings={warnings}
-                isProcessing={isProcessing}
-              />
-            ) : (
-              <ChplListingEditUpload
-                dispatch={handleDispatch}
-                errors={errors}
-                warnings={warnings}
-                isProcessing={isProcessing}
+          </>
+        )}
+      />
+      <ChplPageBody maxWidth={isEditing ? 'md' : 'xl'}>
+        <div className={classes.container}>
+          { isEditing ? (
+            <ChplListingEdit
+              dispatch={handleDispatch}
+              errors={errors}
+              warnings={warnings}
+              isProcessing={isProcessing}
+            />
+          ) : (
+            <ChplListingEditUpload
+              dispatch={handleDispatch}
+              errors={errors}
+              warnings={warnings}
+              isProcessing={isProcessing}
+            />
+          )}
+          <Card className={classes.reasonForChange}>
+            <CardHeader title="Reason For Change" />
+            <CardContent>
+              <ChplTextField
+                id="reson-for-change"
+                name="reasonForChange"
+                label="Reason"
+                multiline
+                value={reasonForChange}
+                onChange={(event) => setReasonForChange(event.target.value)}
               />
-            )}
-            <Card className={classes.reasonForChange}>
-              <CardHeader title="Reason For Change" />
-              <CardContent>
-                <ChplTextField
-                  id="reson-for-change"
-                  name="reasonForChange"
-                  label="Reason"
-                  multiline
-                  value={reasonForChange}
-                  onChange={(event) => setReasonForChange(event.target.value)}
-                />
-                <Typography variant="body1" className={classes.reasonForChangeText}>If changes are made in any of the following ways, a Reason for Change is required:</Typography>
-                <List disablePadding>
-                  <ListItem>Clinical Quality Measure Removed</ListItem>
-                  <ListItem>Certification Criteria Removed</ListItem>
-                  <ListItem>Certification Status Changed from anything to &quot;Active&quot;</ListItem>
-                </List>
-              </CardContent>
-            </Card>
-          </Container>
-        </Box>
-      </Box>
+              <Typography variant="body1" className={classes.reasonForChangeText}>If changes are made in any of the following ways, a Reason for Change is required:</Typography>
+              <List disablePadding>
+                <ListItem>Clinical Quality Measure Removed</ListItem>
+                <ListItem>Certification Criteria Removed</ListItem>
+                <ListItem>Certification Status Changed from anything to &quot;Active&quot;</ListItem>
+              </List>
+            </CardContent>
+          </Card>
+        </div>
+      </ChplPageBody>
     </AnalyticsContext.Provider>
   );
 }
diff --git a/src/app/pages/listing/listing.jsx b/src/app/pages/listing/listing.jsx
index 1c2f14733e..0dcf6ac127 100755
--- a/src/app/pages/listing/listing.jsx
+++ b/src/app/pages/listing/listing.jsx
@@ -3,7 +3,6 @@ import {
   Box,
   Button,
   CircularProgress,
-  Container,
   Fade,
   IconButton,
   Typography,
@@ -25,6 +24,7 @@ import ChplActionButton from 'components/action-widget/action-button';
 import ChplBrowserViewedWidget from 'components/browser/browser-viewed-widget';
 import ChplSurveillanceEdit from 'components/listing/details/compliance/surveillance-edit';
 import ChplListingView from 'components/listing/listing-view';
+import { ChplPageBody, ChplPageHeader } from 'components/util';
 import ChplTooltip from 'components/util/chpl-tooltip';
 import { getAngularService } from 'services/angular-react-helper';
 import { eventTrack } from 'services/analytics.service';
@@ -35,7 +35,7 @@ import {
   UserContext,
   useAnalyticsContext,
 } from 'shared/contexts';
-import { palette, theme, utilStyles } from 'themes';
+import { theme, utilStyles } from 'themes';
 
 const useStyles = makeStyles({
   ...utilStyles,
@@ -44,8 +44,6 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     alignItems: 'stretch',
     gap: '16px',
-    padding: '32px 0',
-    backgroundColor: palette.background,
     [theme.breakpoints.up('md')]: {
       display: 'grid',
       gridTemplateColumns: '1fr 3fr',
@@ -56,25 +54,9 @@ const useStyles = makeStyles({
     display: 'flex',
     alignItems: 'baseline',
   },
-  listingHeaderBox: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    gridGap: '16px',
-    [theme.breakpoints.up('md')]: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gridGap: 'none',
-    },
-  },
   loadingScreen: {
     height: '100vh',
   },
-  pageHeader: {
-    padding: '32px 0',
-    backgroundColor: palette.white,
-  },
 });
 
 function ChplListingPage({ id }) {
@@ -211,101 +193,91 @@ function ChplListingPage({ id }) {
 
   return (
     <AnalyticsContext.Provider value={analyticsData}>
-      <Box bgcolor={palette.background}>
-        <ChplBrowserViewedWidget
-          listing={listing}
-        />
-        <div className={classes.pageHeader}>
-          <Container maxWidth="lg">
-            <Box className={classes.listingHeaderBox}>
-              <Box display="flex" alignItems="center" gridGap="4px">
-                <Typography
-                  variant="h1"
+      <ChplBrowserViewedWidget
+        listing={listing}
+      />
+      <ChplPageHeader
+        text={listing.product.name}
+        titleAdornment={(
+          <Box className={classes.favoriteContainer}>
+            <ChplTooltip
+              title={isFavorited ? 'Remove from favorites' : 'Add to favorites'}
+              placement="top"
+            >
+              <IconButton
+                onClick={toggleFavorite}
+                style={{ color: '#e3bf00' }}
+                aria-label={isFavorited ? 'Unfavorite' : 'Favorite'}
+              >
+                {isFavorited ? <Star /> : <StarOutline />}
+              </IconButton>
+            </ChplTooltip>
+            <Fade in={isFavorited} timeout={{ enter: 500, exit: 500 }}>
+              <Typography variant="body1">
+                {isFavorited ? 'This listing is in your favorites!' : ''}
+              </Typography>
+            </Fade>
+          </Box>
+        )}
+        actions={(
+          <ChplActionButton
+            listing={listing}
+            horizontal
+          >
+            { canEdit()
+              && (
+                <Button
+                  endIcon={<Edit />}
+                  size="small"
+                  variant="contained"
+                  color="primary"
+                  onClick={edit}
+                >
+                  Edit
+                </Button>
+              )}
+            <ChplListingHistory
+              listing={listing}
+            />
+            { hasAnyRole(['chpl-admin']) && listing.id >= 10912
+              && (
+                <Button
+                  color="secondary"
+                  variant="contained"
+                  size="small"
+                  id={`download-original-csv-${listing.id}`}
+                  onClick={downloadOriginalCsv}
+                  endIcon={<CloudDownloadOutlinedIcon />}
                 >
-                  {listing.product.name}
-                </Typography>
-                <Box className={classes.favoriteContainer}>
-                  <ChplTooltip
-                    title={isFavorited ? 'Remove from favorites' : 'Add to favorites'}
-                    placement="top"
-                  >
-                    <IconButton
-                      onClick={toggleFavorite}
-                      style={{ color: '#e3bf00' }}
-                      aria-label={isFavorited ? 'Unfavorite' : 'Favorite'}
-                    >
-                      {isFavorited ? <Star /> : <StarOutline />}
-                    </IconButton>
-                  </ChplTooltip>
-                  <Fade in={isFavorited} timeout={{ enter: 500, exit: 500 }}>
-                    <Typography variant="body1">
-                      {isFavorited ? 'This listing is in your favorites!' : ''}
-                    </Typography>
-                  </Fade>
-                </Box>
-              </Box>
-              <Box>
-                <ChplActionButton
-                  listing={listing}
-                  horizontal
+                  Original CSV
+                </Button>
+              )}
+            { canGetCurrentCsv()
+              && (
+                <Button
+                  color="secondary"
+                  variant="contained"
+                  size="small"
+                  id={`download-current-csv-${listing.id}`}
+                  onClick={downloadCurrentCsv}
+                  endIcon={<CloudDownloadOutlinedIcon />}
                 >
-                  { canEdit()
-                    && (
-                      <Button
-                        endIcon={<Edit />}
-                        size="small"
-                        variant="contained"
-                        color="primary"
-                        onClick={edit}
-                      >
-                        Edit
-                      </Button>
-                    )}
-                  <ChplListingHistory
-                    listing={listing}
-                  />
-                  { hasAnyRole(['chpl-admin']) && listing.id >= 10912
-                    && (
-                      <Button
-                        color="secondary"
-                        variant="contained"
-                        size="small"
-                        id={`download-original-csv-${listing.id}`}
-                        onClick={downloadOriginalCsv}
-                        endIcon={<CloudDownloadOutlinedIcon />}
-                      >
-                        Original CSV
-                      </Button>
-                    )}
-                  { canGetCurrentCsv()
-                    && (
-                      <Button
-                        color="secondary"
-                        variant="contained"
-                        size="small"
-                        id={`download-current-csv-${listing.id}`}
-                        onClick={downloadCurrentCsv}
-                        endIcon={<CloudDownloadOutlinedIcon />}
-                      >
-                        Current CSV
-                      </Button>
-                    )}
-                </ChplActionButton>
-              </Box>
-            </Box>
-          </Container>
+                  Current CSV
+                </Button>
+              )}
+          </ChplActionButton>
+        )}
+      />
+      <ChplPageBody>
+        <div className={classes.container}>
+          <ListingContext.Provider value={listingState}>
+            <ChplListingView
+              listing={listing}
+              dispatch={handleDispatch}
+            />
+          </ListingContext.Provider>
         </div>
-        <Container maxWidth="lg">
-          <div className={classes.container} id="main-content" tabIndex="-1">
-            <ListingContext.Provider value={listingState}>
-              <ChplListingView
-                listing={listing}
-                dispatch={handleDispatch}
-              />
-            </ListingContext.Provider>
-          </div>
-        </Container>
-      </Box>
+      </ChplPageBody>
     </AnalyticsContext.Provider>
   );
 }
diff --git a/src/app/pages/organizations/developers/developer/developer.jsx b/src/app/pages/organizations/developers/developer/developer.jsx
index 9bb1a5cf08..54a7b620da 100755
--- a/src/app/pages/organizations/developers/developer/developer.jsx
+++ b/src/app/pages/organizations/developers/developer/developer.jsx
@@ -1,10 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Box,
   CircularProgress,
-  Container,
-  Typography,
-  makeStyles,
 } from '@material-ui/core';
 import { useSnackbar } from 'notistack';
 import { number, oneOfType, string } from 'prop-types';
@@ -27,15 +23,8 @@ import ChplAttestationEdit from 'components/attestation/attestation-edit';
 import ChplDemographicsCreate from 'components/demographics/demographics-create';
 import ChplRwtResultsCreate from 'components/real-world-testing/rwt-results-create';
 import ChplSbulCreate from 'components/sbul/sbul-create';
+import { ChplPageBody, ChplPageHeader } from 'components/util';
 import { AnalyticsContext, DeveloperContext, useAnalyticsContext } from 'shared/contexts';
-import { utilStyles } from 'themes';
-
-const useStyles = makeStyles({
-  ...utilStyles,
-  fixFooterSpacing: {
-    minHeight: 'calc(100vh)',
-  },
-});
 
 function ChplDeveloperPage({ id }) {
   const { analytics } = useAnalyticsContext();
@@ -48,7 +37,6 @@ function ChplDeveloperPage({ id }) {
   const [product, setProduct] = useState(undefined);
   const [version, setVersion] = useState(undefined);
   const [state, setState] = useState('view');
-  const classes = useStyles();
 
   useEffect(() => {
     if (isLoading || !isSuccess) {
@@ -155,16 +143,8 @@ function ChplDeveloperPage({ id }) {
   return (
     <AnalyticsContext.Provider value={analyticsData}>
       <DeveloperContext.Provider value={developerState}>
-        <Box className={classes.pageHeader}>
-          <Container disableGutters maxWidth="lg">
-            <Typography
-              variant="h1"
-            >
-              { developer.name }
-            </Typography>
-          </Container>
-        </Box>
-        <Container className={classes.fixFooterSpacing} maxWidth="lg" id="main-content" tabIndex="-1">
+        <ChplPageHeader text={developer.name} />
+        <ChplPageBody>
           { state === 'view'
             && (
               <ChplDeveloperView
@@ -266,7 +246,7 @@ function ChplDeveloperPage({ id }) {
                 changeRequest={changeRequest}
               />
             )}
-        </Container>
+        </ChplPageBody>
       </DeveloperContext.Provider>
     </AnalyticsContext.Provider>
   );

From ba229f86fd4c16cebe10c2b71962ab3056555b6a Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Thu, 23 Jul 2026 08:03:36 -0400
Subject: [PATCH 12/14] refactor: Introduce ChplRouteLoading component for
 route transition handling

[#OCD-5313]
---
 .../components/util/chpl-route-loading.jsx    | 86 +++++++++++++++++++
 src/app/components/util/index.js              |  2 +
 src/app/index.run.js                          | 50 +++--------
 src/index.html                                |  9 +-
 4 files changed, 108 insertions(+), 39 deletions(-)
 create mode 100644 src/app/components/util/chpl-route-loading.jsx

diff --git a/src/app/components/util/chpl-route-loading.jsx b/src/app/components/util/chpl-route-loading.jsx
new file mode 100644
index 0000000000..4351a4f24c
--- /dev/null
+++ b/src/app/components/util/chpl-route-loading.jsx
@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import { Box, makeStyles } from '@material-ui/core';
+
+import ChplLoadingSpinner from './chpl-loading-spinner';
+
+import { getAngularService } from 'services/angular-react-helper';
+
+const MIN_VISIBLE_MS = 500;
+
+const useStyles = makeStyles({
+  overlay: {
+    position: 'fixed',
+    inset: 0,
+    zIndex: 2000,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.75)',
+  },
+});
+
+function ChplRouteLoading() {
+  const classes = useStyles();
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    // Dismiss the vanilla cold-boot overlay in index.html; React now owns the
+    // route-transition loader.
+    const vanillaOverlay = document.getElementById('chpl-route-loading');
+    if (vanillaOverlay) {
+      vanillaOverlay.classList.remove('is-active');
+    }
+
+    const $transitions = getAngularService('$transitions');
+    let shownAt = 0;
+    let hideTimeout = null;
+
+    // UI-Router transitions without async resolves complete synchronously, so
+    // onStart -> onSuccess can happen within a single frame. Keep the loader
+    // visible for a minimum duration so it always paints when the URL changes.
+    const show = () => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+      shownAt = Date.now();
+      setActive(true);
+    };
+
+    const hide = () => {
+      const remaining = Math.max(0, MIN_VISIBLE_MS - (Date.now() - shownAt));
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+      }
+      hideTimeout = setTimeout(() => {
+        setActive(false);
+        hideTimeout = null;
+      }, remaining);
+    };
+
+    const deregisterStart = $transitions.onStart({}, () => { show(); });
+    const deregisterSuccess = $transitions.onSuccess({}, () => { hide(); });
+    const deregisterError = $transitions.onError({}, () => { hide(); });
+
+    return () => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+      }
+      deregisterStart();
+      deregisterSuccess();
+      deregisterError();
+    };
+  }, []);
+
+  if (!active) {
+    return null;
+  }
+
+  return (
+    <Box className={classes.overlay} role="status" aria-live="polite" aria-label="Loading">
+      <ChplLoadingSpinner />
+    </Box>
+  );
+}
+
+export default ChplRouteLoading;
diff --git a/src/app/components/util/index.js b/src/app/components/util/index.js
index db48cf2ca5..1f99c9bdb3 100755
--- a/src/app/components/util/index.js
+++ b/src/app/components/util/index.js
@@ -11,6 +11,7 @@ import ChplProgress from './progress';
 import ChplLoadingTable from './loading-table';
 import ChplLoadingCards from './chpl-loading-cards';
 import ChplLoadingSpinner from './chpl-loading-spinner';
+import ChplRouteLoading from './chpl-route-loading';
 import ChplSortControls from './chpl-sort-controls';
 import { ChplSortableHeaders } from './sortable-headers';
 import ChplSearchResultCard from './chpl-search-result-card';
@@ -35,6 +36,7 @@ export {
   ChplPageHeader,
   ChplPagination,
   ChplProgress,
+  ChplRouteLoading,
   ChplSearchResultCard,
   ChplSearchResultControls,
   ChplSortControls,
diff --git a/src/app/index.run.js b/src/app/index.run.js
index 2f686a0059..ec1042f274 100644
--- a/src/app/index.run.js
+++ b/src/app/index.run.js
@@ -1,46 +1,21 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { ChplRouteLoading } from './components/util';
+
 (() => {
   /** @ngInject */
   function runBlock($anchorScroll, $location, $rootScope, $state, $timeout, $transitions, $window, Title, authService) {
-    // Show a global loading indicator during every route transition.
-    // UI-Router transitions without async resolves complete synchronously, so
-    // onStart -> onSuccess can happen within a single frame and the overlay
-    // would never actually paint. We keep it visible for a minimum duration so
-    // the user always sees the custom loader whenever the URL changes.
-    const loadingElement = $window.document.getElementById('chpl-route-loading');
-    const MIN_VISIBLE_MS = 500;
-    let shownAt = 0;
-    let hideTimeout = null;
-
-    const showRouteLoading = () => {
-      if (!loadingElement) { return; }
-      if (hideTimeout) {
-        $timeout.cancel(hideTimeout);
-        hideTimeout = null;
-      }
-      shownAt = Date.now();
-      loadingElement.classList.add('is-active');
-    };
-
-    const hideRouteLoading = () => {
-      if (!loadingElement) { return; }
-      const elapsed = Date.now() - shownAt;
-      const remaining = Math.max(0, MIN_VISIBLE_MS - elapsed);
-      if (hideTimeout) {
-        $timeout.cancel(hideTimeout);
-      }
-      hideTimeout = $timeout(() => {
-        loadingElement.classList.remove('is-active');
-        hideTimeout = null;
-      }, remaining);
-    };
-
-    $transitions.onStart({}, () => {
-      showRouteLoading();
-    });
+    // Mount the React route-transition loader into its persistent root (outside
+    // ui-view, so it survives navigations). ChplRouteLoading subscribes to the
+    // UI-Router transition hooks itself and owns showing/hiding the loader.
+    const routeLoadingMount = $window.document.getElementById('chpl-route-loading-react');
+    if (routeLoadingMount) {
+      createRoot(routeLoadingMount).render(React.createElement(ChplRouteLoading));
+    }
 
     // Update page title on state change
     $transitions.onSuccess({}, (transition) => {
-      hideRouteLoading();
       let { title } = transition.to().data;
       if (title) {
         if (title instanceof Function) {
@@ -80,7 +55,6 @@
     });
 
     $transitions.onError({}, (transition) => {
-      hideRouteLoading();
       const error = transition.error();
       if ((!error.detail?.name || error.detail.name() !== 'login') && error.message !== 'The transition was ignored') {
         transition.router.stateService.go('not-found', {
diff --git a/src/index.html b/src/index.html
index 9f572ddb3c..5de2b76394 100644
--- a/src/index.html
+++ b/src/index.html
@@ -138,6 +138,11 @@
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <a href="#{{ currentPage }}#main-content" class="chpl-skip-link">Skip to main content</a>
+    <!--
+      Cold-boot overlay only. Shown before the app bootstraps; once Angular is
+      up, the React ChplRouteLoading component removes `is-active` and owns the
+      route-transition loader from then on.
+    -->
     <div id="chpl-route-loading" class="is-active" role="status" aria-live="polite" aria-label="Loading">
       <div class="chpl-route-loading__spinner">
         <div class="chpl-route-loading__ring"></div>
@@ -146,7 +151,7 @@
     </div>
     <script>
       // Defensive fallback: never let the loading overlay stay stuck if the
-      // app fails to bootstrap. Angular hides it on the first route transition.
+      // app fails to bootstrap. React removes it on the first mount.
       (function () {
         window.setTimeout(function () {
           var el = document.getElementById('chpl-route-loading');
@@ -154,6 +159,8 @@
         }, 20000);
       })();
     </script>
+    <!-- Persistent React root for the route-transition loader (outside ui-view so it survives navigations). -->
+    <div id="chpl-route-loading-react"></div>
     <div ui-view=""></div>
   </body>
 </html>

From 73acd2451b767da42ab3255b68b8339833d8221b Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Thu, 23 Jul 2026 08:57:05 -0400
Subject: [PATCH 13/14] refactor: Remove unused fullHeight prop from
 ChplLoadingSpinner component

[#OCD-5313]
---
 src/app/components/util/chpl-loading-spinner.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/components/util/chpl-loading-spinner.jsx b/src/app/components/util/chpl-loading-spinner.jsx
index 08c1008e14..ccb403f5f6 100644
--- a/src/app/components/util/chpl-loading-spinner.jsx
+++ b/src/app/components/util/chpl-loading-spinner.jsx
@@ -4,7 +4,7 @@ import {
   CircularProgress,
   makeStyles,
 } from '@material-ui/core';
-import { bool, number } from 'prop-types';
+import { number } from 'prop-types';
 
 import ChplLogo from '../../../assets/favicons/android-chrome-192x192.png';
 
@@ -33,12 +33,12 @@ const useStyles = makeStyles({
   },
 });
 
-function ChplLoadingSpinner({ size = 96, fullHeight = true }) {
+function ChplLoadingSpinner({ size = 96 }) {
   const classes = useStyles();
   const logoSize = size * 0.55;
 
   return (
-    <Box className={classes.container} style={fullHeight ? undefined : { flex: 'unset' }}>
+    <Box className={classes.container}>
       <Box className={classes.spinnerWrapper}>
         <CircularProgress size={size} thickness={2.5} style={{ color: palette.primary }} />
         <img
@@ -56,5 +56,4 @@ export default ChplLoadingSpinner;
 
 ChplLoadingSpinner.propTypes = {
   size: number,
-  fullHeight: bool,
 };

From d506a37bedb9bf34b2c284725f27773d7124213f Mon Sep 17 00:00:00 2001
From: Matthew Stankiewicz <stankm@pointclickcare.com>
Date: Tue, 28 Jul 2026 16:28:34 -0400
Subject: [PATCH 14/14] fix: header naming for complaints reporting

[#OCD-5313]
---
 .../components/surveillance/complaints/complaints-wrapper.jsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/surveillance/complaints/complaints-wrapper.jsx b/src/app/components/surveillance/complaints/complaints-wrapper.jsx
index d14649da25..42ae8f485a 100755
--- a/src/app/components/surveillance/complaints/complaints-wrapper.jsx
+++ b/src/app/components/surveillance/complaints/complaints-wrapper.jsx
@@ -15,7 +15,7 @@ function ChplComplaintsWrapper(props) {
 
   return (
     <AppWrapper>
-      <ChplPageHeader text="Surveillance Complaints" />
+      <ChplPageHeader text="Complaints Reporting" />
       <ChplPageBody>
         <ChplComplaints
           bonusQuery={bonusQuery}