@ampath/esm-reports-app 1.0.0-next.55 → 1.0.0-next.57

package/src/reports/moh-731/summary/moh-731-summary.scss

@@ -0,0 +1,242 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* The Summary tab: the report regrouped into compact tables with totals, a tab
+ * per section. Same light rules and panel fill as the rest of the report. */
+
+.summary {
+  --summary-grid: #e2e2e2;
+}
+
+/* Section tabs, with the codes switch and the export on the same line */
+.bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: layout.$spacing-03;
+  border-bottom: 1px solid $ui-03;
+}
+
+.sectionTabs {
+  flex: 0 1 auto;
+  width: auto;
+  min-width: 0;
+  margin-bottom: -1px;
+}
+
+.tools {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  padding-bottom: layout.$spacing-02;
+}
+
+.panel {
+  padding: layout.$spacing-04 0 0;
+}
+
+/* Headline totals: one slim line */
+.strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+  margin-bottom: layout.$spacing-04;
+}
+
+.headline {
+  display: inline-flex;
+  align-items: baseline;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-02 layout.$spacing-04;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--cds-link-primary, #0f62fe);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: -2px;
+  }
+}
+
+.headlineLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.headlineValue {
+  @include type.type-style('productive-heading-03');
+  color: $color-gray-100;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Sub-sections side by side where there is room, one per row on a phone */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
+  gap: layout.$spacing-04;
+  align-items: start;
+}
+
+.card {
+  padding: layout.$spacing-04;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  min-width: 0;
+}
+
+.cardTitle {
+  @include type.type-style('heading-compact-01');
+  margin-bottom: layout.$spacing-03;
+  color: $color-gray-100;
+}
+
+.note {
+  @include type.type-style('helper-text-01');
+  margin: -(layout.$spacing-02) 0 layout.$spacing-03;
+  color: $text-02;
+}
+
+.tableTitle {
+  @include type.type-style('label-01');
+  margin: layout.$spacing-04 0 layout.$spacing-02;
+  color: $text-02;
+}
+
+.tableScroll {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+
+  th,
+  td {
+    padding: 0.3125rem 0.5rem;
+    text-align: right;
+    white-space: nowrap;
+    border-bottom: 1px solid var(--summary-grid);
+  }
+
+  thead th {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: $text-02;
+    background-color: var(--cds-layer-01, #f4f4f4);
+  }
+
+  tbody tr:hover td,
+  tbody tr:hover th {
+    background-color: $brand-primary-10;
+  }
+
+  /* Total row: bold, set off by a double rule */
+  tfoot th,
+  tfoot td {
+    font-weight: 600;
+    border-top: 3px double #b8b8b8;
+    border-bottom: none;
+  }
+}
+
+/* The row labels stay in view when a wide table scrolls sideways */
+.labelCol {
+  position: sticky;
+  left: 0;
+  width: 1%;
+  text-align: left !important;
+  font-weight: 400;
+  color: $color-gray-100;
+  background-color: $ui-02;
+}
+
+thead .labelCol {
+  background-color: var(--cds-layer-01, #f4f4f4);
+}
+
+.totalCol {
+  font-weight: 600;
+  background-color: var(--cds-layer-01, #f4f4f4);
+}
+
+/* A table with no breakdown: the labels take the width, the figures a narrow column */
+.single .labelCol {
+  width: auto;
+}
+
+.single .totalCol {
+  width: 6rem;
+}
+
+.group {
+  color: $text-02;
+}
+
+/* Rows shown for reference, never added into the total */
+.ofWhich .labelCol {
+  padding-left: layout.$spacing-05;
+  font-style: italic;
+}
+
+.excluded .labelCol {
+  color: $text-02;
+}
+
+/* A figure: its value, opening its linelist; its MOH code when codes are shown */
+.value {
+  display: inline-flex;
+  align-items: baseline;
+  gap: layout.$spacing-02;
+  padding: 0;
+  font: inherit;
+  font-weight: inherit;
+  color: var(--cds-link-primary, #0f62fe);
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: 2px;
+  }
+}
+
+.zero {
+  color: $text-02;
+}
+
+.strong {
+  font-weight: 600;
+}
+
+.code {
+  font-size: 0.6875rem;
+  font-weight: 400;
+  color: $text-02;
+}
+
+.none {
+  color: $text-02;
+}
+
+@media (max-width: $breakpoint-phone-max) {
+  .tools {
+    width: 100%;
+    justify-content: space-between;
+  }
+}

package/src/reports/moh-740/moh-740.component.scss

@@ -17,7 +17,9 @@ $meta: 6.5pt; // facility strip
   display: flex;
   flex-direction: column;
   width: 100%;
-  row-gap: 0.5rem;
+  /* No gap of its own: the placeholder carries the spacing below the filters,
+     as on every other report, and a gap here doubled it. */
+  row-gap: 0;
   padding: 0.75rem 0;
 }
 

package/src/reports/moh-740/moh-740.component.tsx

@@ -3,7 +3,7 @@ import styles from './moh-740.component.scss';
 import { ReportFiltersComponent, type ReportPeriod, useRestorePeriod } from '../../common/report-filters';
 import { ReportSkeleton } from '../../common/report-skeleton';
 import { ReportPage } from '../../common/report-page';
-import { ReportPlaceholder } from '../../common/report-placeholder';
+import { ReportPlaceholder, useGeneratedLocation } from '../../common/report-placeholder';
 import { showReportError } from '../../common/report-error';
 import { type Moh740Data, type Moh740Dto } from './types';
 import { formatDate, useSession } from '@openmrs/esm-framework';
@@ -30,6 +30,11 @@ const Moh740Report: React.FC<Moh740ReportProps> = () => {
   const session = useSession();
   const locationUuid = session.sessionLocation?.uuid;
 
+  /* Only a report for the current location counts: after switching location the
+     old figures would otherwise be shown, and labelled, as the new location's. */
+  const { isForCurrentLocation, hasLocationChanged, markGenerated } = useGeneratedLocation();
+  const isReportGenerated = Boolean(moh740Data) && isForCurrentLocation;
+
   /* The masthead names the location the report was generated from, and the
      period it covers; the sign-off records who produced it and when. */
   const facility = session?.sessionLocation?.display ?? moh740Data?.facility ?? '';
@@ -46,6 +51,7 @@ const Moh740Report: React.FC<Moh740ReportProps> = () => {
       const resp = await fetchMoh740Report(reportFilters);
       setMoh740Data(resp ?? null);
       setHasGenerated(true);
+      markGenerated(reportFilters.locationUuid);
     } catch (error: any) {
       showReportError('the MOH-740 report', error);
     } finally {
@@ -78,7 +84,7 @@ const Moh740Report: React.FC<Moh740ReportProps> = () => {
                   mode="both"
                   onGenerate={getMoh740ReportData}
                   isLoading={isLoading}
-                  isReportGenerated={Boolean(moh740Data)}
+                  isReportGenerated={isReportGenerated}
                   onPeriodChange={setSelectedPeriod}
                 />
               </div>
@@ -88,7 +94,7 @@ const Moh740Report: React.FC<Moh740ReportProps> = () => {
                 <ReportSkeleton blocks={3} />
               ) : (
                 <>
-                  {moh740Data ? (
+                  {isReportGenerated ? (
                     <ReportPage>
                       <div className={styles.headerContainer}>
                         <div className={styles.mainTitleBox}>
@@ -1275,7 +1281,11 @@ const Moh740Report: React.FC<Moh740ReportProps> = () => {
                       </div>
                     </ReportPage>
                   ) : (
-                    <ReportPlaceholder reportName="MOH-740" isEmptyResult={hasGenerated} />
+                    <ReportPlaceholder
+                      reportName="MOH-740"
+                      isEmptyResult={hasGenerated && isForCurrentLocation}
+                      isLocationChanged={hasGenerated && hasLocationChanged}
+                    />
                   )}
                 </>
               )}

package/src/reports/moh-745/moh-745.component.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ReportFiltersComponent, type ReportPeriod, useRestorePeriod } from '../../common/report-filters';
 import { showReportError } from '../../common/report-error';
-import { hasReportData, ReportPlaceholder } from '../../common/report-placeholder';
+import { hasReportData, ReportPlaceholder, useGeneratedLocation } from '../../common/report-placeholder';
 
 import styles from './moh-745.scss';
 import classNames from 'classnames';
@@ -15,7 +15,10 @@ import { type CancerScreeningResult } from './registers/type';
 
 const Moh745Component: React.FC = () => {
   const [moh745Data, setMoh745Data] = useState<CancerScreeningResult | null>(null);
-  const isReportGenerated = hasReportData(moh745Data);
+  /* Only a report for the current location counts: after switching location the
+     old figures would otherwise be shown, and labelled, as the new location's. */
+  const { isForCurrentLocation, hasLocationChanged, markGenerated } = useGeneratedLocation();
+  const isReportGenerated = hasReportData(moh745Data) && isForCurrentLocation;
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [startDate, setStartDate] = useState<string>('');
   const [endDate, setEndDate] = useState<string>('');
@@ -47,6 +50,7 @@ const Moh745Component: React.FC = () => {
       const data = await getMoh745(params);
       if(data){
            setMoh745Data(data);
+           markGenerated(params.locationUuids);
       }else{
         setMoh745Data(null);
       } 
@@ -78,7 +82,7 @@ const Moh745Component: React.FC = () => {
         generatedPeriod={{ startDate, endDate }}
       />
       {isLoading && <ReportSkeleton />}
-      {!isLoading && !isReportGenerated && <ReportPlaceholder reportName="MOH-745" />}
+      {!isLoading && !isReportGenerated && <ReportPlaceholder reportName="MOH-745" isLocationChanged={hasReportData(moh745Data) && hasLocationChanged} />}
       {!isLoading && isReportGenerated && (
         <ReportPage>
           <h3 className={styles.reportTitle}>CANCER SCREENING MONTHLY SUMMARY FORM</h3>

package/src/root.component.tsx

@@ -23,6 +23,7 @@ import Moh511710Register from './reports/moh-710/registers/moh-511-710-register.
 import Moh731Report from './reports/moh-731/moh-731.component';
 import Moh366Register from './reports/moh-731/registers/moh-366.component';
 import PrepRegisterComponent from './reports/moh-731/registers/prep-register.component';
+import Moh731Linelist from './reports/moh-731/linelist/moh-731-linelist.component';
 import styles from './root.scss';
 
 const RootComponent: React.FC = () => {
@@ -53,6 +54,7 @@ const RootComponent: React.FC = () => {
           <Route path="/moh-510-register" element={<Moh510Register />} />
           <Route path="/moh-511-710-register" element={<Moh511710Register />} />
           <Route path="/moh-731" element={<Moh731Report />} />
+          <Route path="/moh-731-linelist" element={<Moh731Linelist />} />
           <Route path="/moh-366-register" element={<Moh366Register />} />
           <Route path="/prep-register" element={<PrepRegisterComponent />} />
         </Routes>

package/webpack.config.js

@@ -1 +1,22 @@
-module.exports = require('openmrs/default-webpack-config');
+const path = require('path');
+const config = (module.exports = require('openmrs/default-webpack-config'));
+config.watchConfig.ignored = ['.git', 'test-results', `${path.resolve(__dirname, 'dist')}/**`];
+config.overrides.resolve = {
+  fallback: {
+    crypto: false,
+    stream: false,
+    os: false,
+    path: false,
+    zlib: false,
+    https: false,
+    http: false,
+    util: false,
+    url: false,
+  },
+  extensions: ['.tsx', '.ts', '.jsx', '.js', '.scss'],
+  alias: {
+    '@openmrs/esm-framework': '@openmrs/esm-framework/src/internal',
+  },
+};
+
+module.exports = config;