@ampath/esm-reports-app 1.0.0-next.41 → 1.0.0-next.45

package/src/reports/moh-717/moh717.scss

@@ -1,176 +1,237 @@
+/* MOH-717 laid out for A4, on the same scale as the other reports.
 
-h3 {
-    text-align: center;
+   Unlike the single-table reports this one is a mosaic: a full-width outpatient
+   block, then a two-column and a three-column band. The grids are kept; only the
+   scale changes, so the sheet still reads as one form rather than a stack of
+   unrelated tables. */
+
+$ink: #000;
+$rule: 1px solid $ink;
+
+$text: 7pt;
+$title: 7.5pt;
+$meta: 6.5pt;
+
+$gap: 3mm;
+
+/* Masthead. The location fields sit inside the box, as they do on the printed
+   form, rather than on a strip below it. */
+
+.headerContainer {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0 0 $gap;
 }
 
-.container {
-    margin: 0 2rem;
-    padding: 1rem;
+.mainTitleBox {
+  width: 100%;
+  padding: $gap;
+  text-align: center;
+  border: $rule;
 }
 
-.tableContainer {
-    margin-left: 1rem;
-    margin-bottom: 1rem;
+.mainTitle {
+  margin: 0;
+  font-size: $meta;
+  font-weight: 400;
 }
 
-.sectionTitle {
-    margin-left: 1rem ;
+.subTitle {
+  margin: 1mm 0 0;
+  font-size: $title;
+  font-weight: 700;
+  color: $ink;
 }
 
-.title {
-    text-align: center;
-    font-size: 1rem;
-    margin: 1rem;
+/* One line of fields. Each field is itself a flex box so its label and rule
+   cannot be split apart, and the rules carry the flex so the row compresses to
+   whatever width is left instead of overflowing and breaking. */
+
+.locationContainer {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  margin-top: 2.5mm;
+  font-size: $meta;
+  white-space: nowrap;
+
+  > span {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: baseline;
+    min-width: 0;
+    white-space: nowrap;
+  }
 }
+
+/* These carry the facility and period once a report is generated, so they need
+   to hold text on the rule rather than only draw it. */
+
+.line,
+.shortLine {
+  padding: 0 0.5mm;
+  margin-left: 1mm;
+  overflow: hidden;
+  font-weight: 600;
+  text-align: center;
+  text-overflow: ellipsis;
+  border-bottom: $rule;
+}
+
+.line {
+  flex: 1 1 30mm;
+  min-width: 12mm;
+}
+
+.shortLine {
+  flex: 1 1 18mm;
+  min-width: 10mm;
+}
+
+.container {
+  margin: 0;
+  padding: 0;
+}
+
+/* A block of the form. Kept off a page break so a table is never split from the
+   heading row that names its columns. */
+
+.section {
+  margin: 0 0 $gap;
+  break-inside: avoid;
+  page-break-inside: avoid;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
 .table {
-  width: auto;
+  width: 100%;
+  table-layout: auto;
   border-collapse: collapse;
-  
 }
 
 .tableBordered td,
 .tableBordered th {
-  border: 1px solid black;
-  padding: 0.3rem;
-  font-size: small;
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  border: $rule;
 }
 
 .tableBordered th {
-    font-weight: bold;
-} 
+  font-weight: 700;
+  background-color: #f4f4f4;
+}
 
 .tableStriped tbody tr:nth-of-type(odd) {
   background-color: #f9f9f9;
 }
-.greyBackground {
-    background-color: #ccc;
-}
 
 .totals {
-    font-weight: bold;
-    color: #0437F2;
+  font-weight: 700;
+  color: $ink;
+  background-color: #e8e8e8;
 }
 
-.alighnLeft {
-    text-align: left;
+.alignLeft {
+  text-align: left;
 }
 
+/* The inpatient block turns its column headings on their side to fit */
+
 .rotateUp {
-  writing-mode: vertical-rl;
-  transform: rotate(180deg); 
-  text-align: center;
   white-space: nowrap;
+  text-align: center;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
 }
 
-.sectionContainer {
-   margin: 2rem 0;
+/* Two- and three-column bands. Their gap matches the gap between sections, so
+   the whole sheet is on one rhythm. */
+
+.sectionContainer,
+.sectionTwoContainer {
   display: grid;
+  gap: $gap;
+  align-items: start;
+  margin: 0 0 $gap;
+}
+
+.sectionContainer {
   grid-template-columns: 1fr 1fr;
-//   gap: 1rem;
+  grid-template-areas: 'left right';
+}
 
-  grid-template-areas:
-    "left right";
+.sectionTwoContainer {
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas: 'one two three';
 }
 
 .left {
   grid-area: left;
+  min-width: 0;
 }
 
 .right {
   grid-area: right;
-}
-
-.section{
-      margin: 2rem 0;
-}
-
-.sectionTwoContainer {
-  margin: 2rem 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 1rem;
-  padding: 0 2rem;
-  grid-template-areas:
-    "one two three";
+  min-width: 0;
 }
 
 .one {
   grid-area: one;
+  min-width: 0;
 }
 
 .two {
   grid-area: two;
+  min-width: 0;
 }
 
 .three {
   grid-area: three;
+  min-width: 0;
 }
 
+/* Stack on small screens */
 
-/* 📱 Stack on small screens */
 @media (max-width: 768px) {
   .sectionContainer {
     grid-template-columns: 1fr;
     grid-template-areas:
-      "left"
-      "right";
+      'left'
+      'right';
   }
-}
-
-.preparedByContainer {
-    margin: 2rem 0;
-}
-
-
 
-
-.line {
-  display: inline-block;
-  width: 150px;
-  border-bottom: 1px solid #000;
-  margin-left: 4px;
-}
-
-.shortLine {
-  display: inline-block;
-  width: 90px;
-  border-bottom: 1px solid #000;
-  margin-left: 4px;
-}
-
-span {
-    font-weight: bold;
+  .sectionTwoContainer {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'one'
+      'two'
+      'three';
+  }
 }
 
-.buttonContainer {
-    margin: 1rem;
+.preparedByContainer {
+  margin: 0;
+  break-inside: avoid;
+  page-break-inside: avoid;
 }
 
-.headerContainer {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 10px;
-    margin: 2rem;
-}
+/* Scoped: as a bare selector this bolded every span in the application,
+   including other reports' indicator codes and the filter bar. */
 
-.mainTitleBox {
-    border: 2px solid #000;
-    padding: 10px;
-    text-align: center;
-    width: 100%;
+.locationContainer > span {
+  font-weight: 700;
 }
 
-.mainTitle {
-    margin: 0;
-}
+/* On paper the striping is screen affordance that prints as grey noise */
 
-.subTitle {
-    margin: 5px 0;
+@media print {
+  .tableStriped tbody tr:nth-of-type(odd) {
+    background-color: transparent;
+  }
 }
-
-.locationContainer {
-  display: flex;
-  margin: 1rem;
-  justify-content: space-evenly;
-}

package/src/reports/moh-717/sections/maternity.component.tsx

@@ -21,7 +21,7 @@ const MaternityComponent: React.FC<MaternityComponentProps> = ({
   const location = useLocation();
   const navigateToRegister = (indicator: string | string[]) => {
     navigate(
-      `/moh-333-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      `/moh-333-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-717`,
       {
         state: {
           from: location.pathname,

package/src/reports/moh-717/sections/orthopaedic-trauma.component.tsx

@@ -18,7 +18,7 @@ const OrthopaedicTraumaComponent: React.FC<OrthopaedicTraumaComponentProps> = ({
             <th colSpan={2}>&gt;5 Years</th>
           </tr>
           <tr>
-            <th className={styles.alighnLeft}>Description</th>
+            <th className={styles.alignLeft}>Description</th>
             <th>New</th>
             <th>Revisit</th>
             <th>New</th>

package/src/reports/moh-717/sections/outpatient.component.tsx

@@ -22,17 +22,17 @@ const OutpatientComponent: React.FC<OutpatientComponentProps> = ({
 
   const navigateTo204ARegister = (indicator: string | string[]) => {
     navigate(
-      `/moh-204a-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      `/moh-204a?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-717`,
     );
   };
   const navigateTo204BRegister = (indicator: string | string[]) => {
     navigate(
-      `/moh-204b-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      `/moh-204b?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-717`,
     );
   };
   const navigateToMoh405Register = (indicator: string | string[]) => {
     navigate(
-      `/moh-405-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      `/moh-405-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-717`,
       {
         state: {
           from: location.pathname,
@@ -43,7 +43,7 @@ const OutpatientComponent: React.FC<OutpatientComponentProps> = ({
   };
   const navigateToMoh406Register = (indicator: string | string[]) => {
     navigate(
-      `/moh-406-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      `/moh-406-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-717`,
       {
         state: {
           from: location.pathname,
@@ -54,7 +54,7 @@ const OutpatientComponent: React.FC<OutpatientComponentProps> = ({
   };
   const navigateTo511Register = (indicator: string | string[]) => {
     navigate(
-      `/moh-511-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}`,
+      `/moh-511-register?startDate=${startDate}&endDate=${endDate}&locationUuids=${locationUuids}&indicator=${indicator}&from=moh-717`,
       {
         state: {
           from: location.pathname,
@@ -68,12 +68,12 @@ const OutpatientComponent: React.FC<OutpatientComponentProps> = ({
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
-            <th colSpan={5} className={styles.alighnLeft}>
+            <th colSpan={5} className={styles.alignLeft}>
               A. OUTPATIENT SERVICES
             </th>
           </tr>
           <tr>
-            <th colSpan={2} className={styles.alighnLeft}>
+            <th colSpan={2} className={styles.alignLeft}>
               A.1 GENERAL OUTPATIENTS(FILTER CLINICS)
             </th>
             <th>NEW</th>
@@ -205,7 +205,7 @@ const OutpatientComponent: React.FC<OutpatientComponentProps> = ({
             </td>
           </tr>
           <tr>
-            <th colSpan={2} className={styles.alighnLeft}>
+            <th colSpan={2} className={styles.alignLeft}>
               A.2 CASUALTY
             </th>
             <th></th>
@@ -213,7 +213,7 @@ const OutpatientComponent: React.FC<OutpatientComponentProps> = ({
             <th></th>
           </tr>
           <tr>
-            <th colSpan={3} className={styles.alighnLeft}>
+            <th colSpan={3} className={styles.alignLeft}>
               A.3 SPECIAL CLINICS(if recorded separately from General Filter Clinics)
             </th>
             <th></th>
@@ -431,7 +431,7 @@ const OutpatientComponent: React.FC<OutpatientComponentProps> = ({
             </td>
           </tr>
           <tr>
-            <th colSpan={2} className={styles.alighnLeft}>
+            <th colSpan={2} className={styles.alignLeft}>
               A.4 MCH/FP CLIENTS
             </th>
             <th></th>
@@ -501,7 +501,7 @@ const OutpatientComponent: React.FC<OutpatientComponentProps> = ({
             </td>
           </tr>
           <tr>
-            <th colSpan={2} className={styles.alighnLeft}>
+            <th colSpan={2} className={styles.alignLeft}>
               A.5 DENTAL CLINIC
             </th>
             <th></th>
@@ -565,28 +565,28 @@ const OutpatientComponent: React.FC<OutpatientComponentProps> = ({
             <th className={styles.totals}></th>
           </tr>
           <tr>
-            <th colSpan={2} className={styles.alighnLeft}>
+            <th colSpan={2} className={styles.alignLeft}>
               A.7 MEDICAL EXAMINATIONS (except p3)
             </th>
-            <th className={styles.alighnLeft}>{moh717ReportData.medical_examinations_except_p3}</th>
-            <th className={styles.alighnLeft}>A.10 REMOVAL OF STITCHES</th>
-            <th className={styles.alighnLeft}>{moh717ReportData.opd_removal_of_stitches}</th>
+            <th className={styles.alignLeft}>{moh717ReportData.medical_examinations_except_p3}</th>
+            <th className={styles.alignLeft}>A.10 REMOVAL OF STITCHES</th>
+            <th className={styles.alignLeft}>{moh717ReportData.opd_removal_of_stitches}</th>
           </tr>
           <tr>
-            <th colSpan={2} className={styles.alighnLeft}>
+            <th colSpan={2} className={styles.alignLeft}>
               A.8 MEDICAL REPORTS (incl. p3, compensation, insurance, etc.)
             </th>
-            <th className={styles.alighnLeft}>{moh717ReportData.opd_medical_reports}</th>
-            <th className={styles.alighnLeft}>A.12 INJECTIONS</th>
-            <th className={styles.alighnLeft}>{moh717ReportData.opd_injections_given}</th>
+            <th className={styles.alignLeft}>{moh717ReportData.opd_medical_reports}</th>
+            <th className={styles.alignLeft}>A.12 INJECTIONS</th>
+            <th className={styles.alignLeft}>{moh717ReportData.opd_injections_given}</th>
           </tr>
           <tr>
-            <th colSpan={2} className={styles.alighnLeft}>
+            <th colSpan={2} className={styles.alignLeft}>
               A.9 DRESSINGS
             </th>
-            <th className={styles.alighnLeft}>{moh717ReportData.opd_dressing_done}</th>
-            <th className={styles.alighnLeft}>A.12 STITCHING</th>
-            <th className={styles.totalighnLeftals}>{moh717ReportData.opd_stitching}</th>
+            <th className={styles.alignLeft}>{moh717ReportData.opd_dressing_done}</th>
+            <th className={styles.alignLeft}>A.12 STITCHING</th>
+            <th className={styles.alignLeft}>{moh717ReportData.opd_stitching}</th>
           </tr>
         </tbody>
       </table>

package/src/reports/moh-717/sections/preparedby.component.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
+import { formatDate, useSession } from '@openmrs/esm-framework';
 
 import styles from '../moh717.scss';
 import classNames from 'classnames';
 
 const PreparedbyComponent: React.FC = () => {
+  const session = useSession();
+  const preparedBy = session?.user?.person?.display ?? session?.user?.display ?? '';
+  const preparedOn = formatDate(new Date(), { mode: 'standard', time: false, noToday: true });
+
   return (
     <>
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
@@ -19,9 +24,9 @@ const PreparedbyComponent: React.FC = () => {
         <tbody>
           <tr>
             <td>Prepared by:</td>
+            <td>{preparedBy}</td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>{preparedOn}</td>
             <td></td>
           </tr>
           <tr>

package/src/reports/moh-717/sections/special-services.component.tsx

@@ -13,7 +13,7 @@ const SpecialServicesComponent: React.FC<SpecialServicesComponentProps> = ({ moh
       <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
         <thead>
           <tr>
-            <th colSpan={6} className={classNames(`${styles.totals} ${styles.alighnLeft}`)}>
+            <th colSpan={6} className={classNames(`${styles.totals} ${styles.alignLeft}`)}>
               C.SPECIAL SERVICES (includes both inpatients and outpatients)
             </th>
           </tr>