@ampath/esm-reports-app 1.0.0-next.5 → 1.0.0-next.50

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

@@ -1,41 +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 {
-    border: 1px solid #ccc;
-    margin: 0 2rem;
-    margin-top: 0.5px;
+.mainTitleBox {
+  width: 100%;
+  padding: $gap;
+  text-align: center;
+  border: $rule;
+}
+
+.mainTitle {
+  margin: 0;
+  font-size: $meta;
+  font-weight: 400;
+}
+
+.subTitle {
+  margin: 1mm 0 0;
+  font-size: $title;
+  font-weight: 700;
+  color: $ink;
+}
+
+/* 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;
 }
 
-.tableContainer {
-    margin-left: 1rem;
-    margin-bottom: 1rem;
+.shortLine {
+  flex: 1 1 18mm;
+  min-width: 10mm;
 }
 
-.sectionTitle {
-    margin-left: 1rem ;
+.container {
+  margin: 0;
+  padding: 0;
 }
 
-.title {
-    text-align: center;
-    font-size: 1rem;
-    margin: 1rem;
+/* 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 #dee2e6;
-  padding: 0.3rem;
-  font-size: small;
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  border: $rule;
+}
+
+.tableBordered th {
+  font-weight: 700;
+  background-color: #f4f4f4;
 }
 
 .tableStriped tbody tr:nth-of-type(odd) {
   background-color: #f9f9f9;
-}
+}
+
+.totals {
+  font-weight: 700;
+  color: $ink;
+  background-color: #e8e8e8;
+}
+
+.alignLeft {
+  text-align: left;
+}
+
+/* The inpatient block turns its column headings on their side to fit */
+
+.rotateUp {
+  white-space: nowrap;
+  text-align: center;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+}
+
+/* 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;
+  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;
+  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 */
+
+@media (max-width: 768px) {
+  .sectionContainer {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'left'
+      'right';
+  }
+
+  .sectionTwoContainer {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'one'
+      'two'
+      'three';
+  }
+}
+
+.preparedByContainer {
+  margin: 0;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+/* Scoped: as a bare selector this bolded every span in the application,
+   including other reports' indicator codes and the filter bar. */
+
+.locationContainer > span {
+  font-weight: 700;
+}
+
+/* On paper the striping is screen affordance that prints as grey noise */
+
+@media print {
+  .tableStriped tbody tr:nth-of-type(odd) {
+    background-color: transparent;
+  }
+}

package/src/reports/moh-717/registers/nutrition-register.component.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { getNutritionRegister } from '../../../resources/moh-717.resource';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+
+const NutritionRegisterComponent: React.FC = () => {
+  const [patientlist, setPatientList] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const startDate = searchParams.get('startDate');
+  const endDate = searchParams.get('endDate');
+  const locationUuids = searchParams.get('locationUuids');
+  const indicator = searchParams.get('indicator');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!startDate || !endDate || !locationUuids || !indicator) return;
+
+      setIsLoading(true);
+
+      try {
+        const params = {
+          startDate,
+          endDate,
+          locationUuids,
+          indicator,
+        };
+
+        const data = await getNutritionRegister(params);
+        setPatientList(data?.results.results || []);
+      } catch (error) {
+        console.error('Failed to fetch register data', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [startDate, endDate, locationUuids, indicator]);
+
+  function navigateBack() {
+    navigate(location.state?.from || '/moh-705b');
+  }
+  return <></>;
+};
+
+export default NutritionRegisterComponent;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import styles from '../moh717.scss';
+import classNames from 'classnames';
+
+interface FinanceComponentProps {
+  moh717ReportData: any;
+}
+
+const FinanceComponent: React.FC<FinanceComponentProps> = ({ moh717ReportData }) => {
+  return (
+    <>
+      <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+        <thead>
+          <tr>
+            <th colSpan={2}>G. FINANCE</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>G.1 Total Amount Collected (Kshs)</td>
+            <td>{}</td>
+            <td>G.3 Clients waived</td>
+            <td>{}</td>
+            <td>Clients exempted</td>
+            <td>{}</td>
+          </tr>
+          <tr>
+            <td>G.2 Total Amount Received</td>
+            <td>{}</td>
+            <td>G.4 Clients waived (Kshs)</td>
+            <td>{}</td>
+            <td>G.5 Clients Exempted (Kshs)</td>
+            <td>{}</td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default FinanceComponent;