@ampath/esm-reports-app 1.0.0-next.7 → 1.0.0-next.71

package/src/reports/moh-710/moh-710.scss

@@ -1,41 +1,162 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
-h3 {
-    text-align: center;
+/* MOH-710 laid out for A4, on the same scale as MOH-711, MOH-740 and MOH-745.
+   Its 106 rows across eleven tables run to about two pages, so this is a
+   flowing document: the blocks share their edges, and a lettered section is
+   kept whole across a page break. */
+
+$ink: #000;
+$bar: #d9d9d9;
+$rule: 1px solid $ink;
+
+$text: 7pt;
+$title: 7.5pt;
+$meta: 6.5pt;
+
+$pad: 3mm;
+
+/* Masthead */
+
+.mainTitleBox {
+  padding: $pad;
+  text-align: center;
+  border: $rule;
 }
 
-.container {
-    border: 1px solid #ccc;
-    margin: 0 2rem;
-    margin-top: 0.5px;
+.ministry {
+  font-size: $meta;
 }
 
-.tableContainer {
-    margin-left: 1rem;
-    margin-bottom: 1rem;
+.reportTitle {
+  font-size: $title;
+  font-weight: 700;
+  color: $ink;
+}
+
+/* Facility and period strip, joined to the masthead above */
+
+.location {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  padding: 2mm $pad;
+  font-size: $meta;
+  white-space: nowrap;
+  border: $rule;
+  border-top: none;
 }
 
-.sectionTitle {
-    margin-left: 1rem ;
+.line,
+.shortLine {
+  display: inline-block;
+  padding: 0 0.5mm;
+  margin-left: 1mm;
+  overflow: hidden;
+  font-weight: 600;
+  text-align: center;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  border-bottom: $rule;
+}
+
+.line {
+  width: 26mm;
+}
+
+.shortLine {
+  width: 14mm;
+}
+
+/* A lettered section, kept off a page break so a table never splits from the
+   heading that names it. Sections share edges rather than sitting apart. */
+
+.container {
+  border: $rule;
+  border-top: none;
+  break-inside: avoid;
+  page-break-inside: avoid;
 }
 
 .title {
-    text-align: center;
-    font-size: 1rem;
-    margin: 1rem;
+  padding: 1.5mm $pad;
+  font-size: $text;
+  font-weight: 700;
+  color: $ink;
+  text-align: left;
+  background-color: $bar;
+  border-bottom: $rule;
+  break-after: avoid;
+  page-break-after: avoid;
 }
+
+.tableContainer {
+  overflow-x: auto;
+  padding: $pad;
+
+  & + .tableContainer {
+    padding-top: 0;
+  }
+}
+
 .table {
-  width: auto;
+  width: 100%;
   border-collapse: collapse;
-  
 }
 
 .tableBordered td,
 .tableBordered th {
-  border: 1px solid #dee2e6;
-  padding: 0.3rem;
-  font-size: small;
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  text-align: left;
+  border: $rule;
+}
+
+.tableBordered th {
+  font-weight: 700;
+  color: $ink;
+  background-color: #f0f0f0;
 }
 
 .tableStriped tbody tr:nth-of-type(odd) {
-  background-color: #f9f9f9;
-}
+  background-color: #fafafa;
+}
+
+@media screen {
+  .tableStriped tbody tr:hover {
+    background-color: $brand-primary-10;
+  }
+}
+
+/* Sign-off, enclosed by the form rather than floating beneath it. Three fields
+   across the sheet, so its rules can be wider than the header strip's five. */
+
+.signOff {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  padding: $pad;
+  font-size: $meta;
+  white-space: nowrap;
+  border: $rule;
+  border-top: none;
+
+  .line {
+    width: 45mm;
+  }
+
+  .shortLine {
+    width: 25mm;
+  }
+}
+
+/* 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-710/registers/moh-510/moh-510.columns.ts

@@ -0,0 +1,40 @@
+import { type RegisterColumn } from '../../../../common/report-register/register-columns';
+
+/**
+ * MOH 204A as the register prints it: one column per cell, in the order they appear.
+ */
+export const moh510ExportColumns: RegisterColumn[] = [
+  { header: 'Date (DD/MM/YYYY) - A', value: (row) => row.date ?? '' },
+  {
+    header: "Child's Number - B",
+    value: (row) => row.child_number ?? '',
+  },
+  { header: "Child's Names - C", value: (row) => row.child_names ?? '' },
+  { header: 'Sex - D', value: (row) => row.sex ?? '' },
+  { header: 'Date of Birth - E', value: (row) => row.date_of_birth ?? '' },
+  { header: 'Date first Seen - F', value: (row) => row.date_first_seen ?? '' },
+  { header: "Father's Full Names/Guardian - G", value: (row) => row.father_names ?? '' },
+  { header: "Mother's Full Names/Guardian - H", value: (row) => row.mother_names ?? '' },
+  { header: 'Village /Estate / Landmark - I', value: (row) => row.village_estate_landmark ?? '' },
+  { header: 'Telephone No. - J', value: (row) => row.phone_number ?? '' },
+  { header: 'BCG - K', value: (row) => row.bcg ?? '' },
+  { header: 'Polio birth Dose - L', value: (row) => row.polio_birth_dose ?? '' },
+  { header: 'OPV 1 - M', value: (row) => row.opv_1 ?? '' },
+  { header: 'OPV 2 - N', value: (row) => row.opv_2 ?? '' },
+  { header: 'OPV 3 - O', value: (row) => row.opv_3 ?? '' },
+  { header: 'IPV - P', value: (row) => row.ipv ?? '' },
+  { header: 'DPT / Hep.B / Hib.1 - Q', value: (row) => row.dpt_hep_1 ?? '' },
+  { header: 'DPT / Hep.B / Hib.2 - R', value: (row) => row.dpt_hep_2 ?? '' },
+  { header: 'DPT / Hep.B / Hib.3 - S', value: (row) => row.dpt_hep_3 ?? '' },
+  { header: 'PCV 10 (Pneumococcal) T - AB', value: (row) => row.pneumococcal_1 ?? '' },
+  { header: 'PCV 10 (Pneumococcal) U - AB', value: (row) => row.pneumococcal_2 ?? '' },
+  { header: 'PCV 10 (Pneumococcal) V - AB', value: (row) => row.pneumococcal_3 ?? '' },
+  { header: 'Rota1 - W', value: (row) => row.rotavirus_1 ?? '' },
+  { header: 'Rota2 - X', value: (row) => row.rotavirus_2 ?? '' },
+  { header: 'Vitamin A(6-11 months) - Y', value: (row) => row.vitamin_a_6_11_months ?? '' },
+  { header: 'MR1 - Z', value: (row) => row.measles_rubella_1 ?? '' },
+  { header: 'Yellow Fever - AA', value: (row) => row.yellow_fever ?? '' },
+  { header: 'Fully Immunized Child - AB', value: (row) => row.fully_immunized_child ?? '' },
+  { header: 'MR2 - AC', value: (row) => row.measles_rubella_2 ?? '' },
+  { header: 'Remarks - AD', value: (row) => row.remarks ?? '' },
+];

package/src/reports/moh-710/registers/moh-510/moh-510.component.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+
+import styles from './moh-510.scss';
+import { useSearchParams } from 'react-router-dom';
+import { RegisterLayout, usePatientList } from '../../../../common/report-register';
+import { getMoh710PatientList } from '../../../../resources/moh-710.resource';
+import { moh510ExportColumns } from './moh-510.columns';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import classNames from 'classnames';
+
+interface Moh510RegisterComponentProps {}
+
+const Moh510RegisterComponent: React.FC<Moh510RegisterComponentProps> = () => {
+  const [searchParams] = useSearchParams();
+  const startDate = searchParams.get('startDate');
+  const endDate = searchParams.get('endDate');
+  const locationUuids = searchParams.get('locationUuids');
+  const indicator = searchParams.get('indicator');
+  const reportName = 'moh710Report';
+
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) =>
+      getMoh710PatientList({
+        startDate: startDate!,
+        endDate: endDate!,
+        locationUuids: locationUuids!,
+        indicator: indicator!,
+        startIndex,
+        limit,
+        reportName: reportName,
+      }),
+    [startDate, endDate, locationUuids, indicator],
+  );
+  return (
+    <RegisterLayout
+      parentLabel="MOH-705A Report"
+      parentPath="/moh-705a"
+      title="MOH 204A Under-5 Outpatient Register"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={moh510ExportColumns}
+    >
+      <div className={styles.tableContainer}>
+        <Table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+          <TableHead>
+            <TableRow>
+              <TableHeader>Date (DD/MM/YYYY)</TableHeader>
+              <TableHeader>Serial Number</TableHeader>
+              <TableHeader>Child's Number</TableHeader>
+              <TableHeader>Child's Names</TableHeader>
+              <TableHeader>Sex</TableHeader>
+              <TableHeader>Date of Birth</TableHeader>
+              <TableHeader>Date first Seen</TableHeader>
+              <TableHeader>Father's Full Names/Guardian</TableHeader>
+              <TableHeader>Mother's Full Names/Guardian</TableHeader>
+              <TableHeader>Village /Estate / Landmark</TableHeader>
+              <TableHeader>Telephone No.</TableHeader>
+              <TableHeader>BCG</TableHeader>
+              <TableHeader>Polio birth Dose</TableHeader>
+              <TableHeader>OPV 1</TableHeader>
+              <TableHeader>OPV 2</TableHeader>
+              <TableHeader>OPV 3</TableHeader>
+              <TableHeader>IPV</TableHeader>
+              <TableHeader>DPT / Hep.B / Hib.1</TableHeader>
+              <TableHeader>DPT / Hep.B / Hib.2</TableHeader>
+              <TableHeader>DPT / Hep.B / Hib.3</TableHeader>
+              <TableHeader>PCV 10 (Pneumococcal)</TableHeader>
+              <TableHeader>PCV 10 (Pneumococcal)</TableHeader>
+              <TableHeader>PCV 10 (Pneumococcal)</TableHeader>
+              <TableHeader>Rota1</TableHeader>
+              <TableHeader>Rota2</TableHeader>
+              <TableHeader>Vitamin A(6-11 months)</TableHeader>
+              <TableHeader>MR1</TableHeader>
+              <TableHeader>Yellow Fever</TableHeader>
+              <TableHeader>Fully Immunized Child</TableHeader>
+              <TableHeader>MR2</TableHeader>
+              <TableHeader>Remarks</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {patientlist?.length > 0 ? (
+              patientlist?.map((patient, i) => (
+                <TableRow key={patient.person_id || patient.id}>
+                  <TableCell>{patient.date}</TableCell>
+                  <TableCell>{i + 1}</TableCell>
+                  <TableCell>{patient.child_number}</TableCell>
+                  <TableCell>{patient.child_names}</TableCell>
+                  <TableCell>{patient.sex}</TableCell>
+                  <TableCell>{patient.date_of_birth}</TableCell>
+                  <TableCell>{patient.date_first_seen}</TableCell>
+                  <TableCell>{patient.father_names}</TableCell>
+                  <TableCell>{patient.mother_names}</TableCell>
+                  <TableCell>{patient.village_estate_landmark}</TableCell>
+                  <TableCell>{patient.phone_number}</TableCell>
+                  <TableCell>{patient.bcg}</TableCell>
+                  <TableCell>{patient.polio_birth_dose}</TableCell>
+                  <TableCell>{patient.opv_1}</TableCell>
+                  <TableCell>{patient.opv_2}</TableCell>
+                  <TableCell>{patient.opv_3}</TableCell>
+                  <TableCell>{patient.ipv}</TableCell>
+                  <TableCell>{patient.dpt_hep_1}</TableCell>
+                  <TableCell>{patient.dpt_hep_2}</TableCell>
+                  <TableCell>{patient.dpt_hep_3}</TableCell>
+                  <TableCell>{patient.pneumococcal_1}</TableCell>
+                  <TableCell>{patient.pneumococcal_2}</TableCell>
+                  <TableCell>{patient.pneumococcal_3}</TableCell>
+                  <TableCell>{patient.rotavirus_1}</TableCell>
+                  <TableCell>{patient.rotavirus_2}</TableCell>
+                  <TableCell>{patient.vitamin_a_6_11_months}</TableCell>
+                  <TableCell>{patient.measles_rubella_1}</TableCell>
+                  <TableCell>{patient.yellow_fever}</TableCell>
+                  <TableCell>{patient.fully_immunized_child}</TableCell>
+                  <TableCell>{patient.measles_rubella_2}</TableCell>
+                  <TableCell>{patient.remarks}</TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={28}>No data available</TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </RegisterLayout>
+  );
+};
+
+export default Moh510RegisterComponent;

package/src/reports/moh-710/registers/moh-510/moh-510.scss

@@ -0,0 +1,130 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* MOH-705A laid out for A4, on the same scale as the other reports. Its 76 rows
+   are a single diagnoses table, so the sheet is one continuous form: masthead,
+   facility strip, table and sign-off share their edges. */
+
+$ink: #000;
+$rule: 1px solid $ink;
+
+$text: 7pt;
+$title: 7.5pt;
+$meta: 6.5pt;
+
+$pad: 3mm;
+
+.mainTitleBox {
+  padding: $pad;
+  text-align: center;
+  border: $rule;
+}
+
+.ministry {
+  font-size: $meta;
+}
+
+.reportTitle {
+  font-size: $title;
+  font-weight: 700;
+  color: $ink;
+}
+
+.location {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  padding: 2mm $pad;
+  font-size: $meta;
+  white-space: nowrap;
+  border: $rule;
+  border-top: none;
+}
+
+.line,
+.shortLine {
+  display: inline-block;
+  padding: 0 0.5mm;
+  margin-left: 1mm;
+  overflow: hidden;
+  font-weight: 600;
+  text-align: center;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  border-bottom: $rule;
+}
+
+.line {
+  width: 26mm;
+}
+
+.shortLine {
+  width: 14mm;
+}
+
+.container {
+  overflow-x: auto;
+  margin: 0;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tableBordered td,
+.tableBordered th {
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  text-align: left;
+  border: $rule;
+}
+
+.tableBordered th {
+  font-weight: 700;
+  color: $ink;
+  background-color: #f0f0f0;
+}
+
+.tableStriped tbody tr:nth-of-type(odd) {
+  background-color: #fafafa;
+}
+
+@media screen {
+  .tableStriped tbody tr:hover {
+    background-color: $brand-primary-10;
+  }
+}
+
+/* Sign-off, enclosed by the form. Three fields across the sheet, so its rules
+   are wider than the header strip's five. */
+
+.signOff {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  padding: $pad;
+  font-size: $meta;
+  white-space: nowrap;
+  border: $rule;
+  border-top: none;
+
+  .line {
+    width: 45mm;
+  }
+
+  .shortLine {
+    width: 25mm;
+  }
+}
+
+/* On paper the striping is screen affordance that prints as grey noise */
+
+@media print {
+  .tableStriped tbody tr:nth-of-type(odd) {
+    background-color: transparent;
+  }
+}