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

package/src/registers/moh-362/moh-362-register.scss

@@ -0,0 +1,222 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* The two MOH 362 sheets (HTS lab register; referral and linkage register),
+   drawn as on the printed form: black rules, small type, two-line cells split
+   by a dotted rule. Both are wide landscape sheets, so each scrolls sideways
+   inside its frame rather than widening the page. */
+
+$ink: #000;
+$rule: 1px solid $ink;
+$dotted: 1px dotted $ink;
+$shade: #e8e8e8; // the grey label cells of the summary blocks
+$text: 0.6875rem; // 11px body
+$small: 0.625rem; // 10px codes and kit details
+
+.sheet {
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-05;
+  color: $ink;
+  font-size: $text;
+  line-height: 1.25;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+}
+
+.runningHead {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: layout.$spacing-05;
+  font-size: $small;
+
+  span:nth-child(2) {
+    text-align: center;
+  }
+
+  span:last-child {
+    text-align: right;
+  }
+}
+
+.sheetTitle {
+  margin: layout.$spacing-02 0 layout.$spacing-03;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+/* the referral and linkage register's title is set in a serif on the form */
+.serifTitle {
+  font-family: Georgia, 'Times New Roman', serif;
+}
+
+.tableScroll {
+  overflow-x: auto;
+}
+
+.register {
+  width: 100%;
+  min-width: 70rem;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: layout.$spacing-02 layout.$spacing-02;
+    text-align: center;
+    vertical-align: middle;
+    border: $rule;
+  }
+
+  th {
+    font-weight: 400;
+    vertical-align: top;
+  }
+
+  td {
+    height: 1.125rem;
+  }
+}
+
+/* (a), (b) ... under the headings */
+.columnIds th {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  font-weight: 700;
+  vertical-align: middle;
+}
+
+/* Columns of code lists and wide text keep a readable width */
+.codes {
+  min-width: 6.5rem;
+  text-align: left !important;
+  font-size: $small;
+}
+
+.wide {
+  min-width: 8rem;
+}
+
+.left {
+  text-align: left !important;
+}
+
+/* A heading holding two labels: upper cell above lower cell */
+.splitHeader {
+  min-width: 8rem;
+  padding: 0 !important;
+
+  span {
+    display: block;
+    padding: layout.$spacing-02;
+  }
+
+  span:first-child {
+    border-bottom: $dotted;
+  }
+}
+
+/* The two halves of a two-line cell */
+.upperCell {
+  border-bottom: $dotted !important;
+}
+
+.lowerCell {
+  border-top: $dotted !important;
+}
+
+/* An HIV test heading: kit, lot and expiry lines, then the result codes */
+.testHeader {
+  min-width: 6rem;
+  text-align: left !important;
+
+  span {
+    display: block;
+  }
+
+  span:not(:first-child) {
+    margin-top: layout.$spacing-02;
+  }
+}
+
+.dateRule {
+  letter-spacing: 1px;
+}
+
+.testCell {
+  strong {
+    display: block;
+    font-weight: 700;
+  }
+}
+
+.testDetail {
+  display: block;
+  margin-top: 1px;
+  font-size: $small;
+  color: $text-02;
+}
+
+/* Totals Clients Linked */
+.totalRow th,
+.totalRow td {
+  font-weight: 700;
+  background-color: $shade;
+}
+
+/* Summary blocks at the foot of the HTS lab register */
+
+.summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  /* one row on a wide screen, as on the form; wraps on a narrow one */
+  gap: layout.$spacing-04;
+  margin-top: layout.$spacing-05;
+}
+
+.summaryColumn {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-04;
+}
+
+.summaryTable {
+  border-collapse: collapse;
+
+  th,
+  td {
+    min-width: 2.5rem;
+    padding: layout.$spacing-02 layout.$spacing-02;
+    text-align: center;
+    border: $rule;
+  }
+
+  th {
+    font-weight: 700;
+    background-color: $shade;
+  }
+}
+
+.summaryLabel {
+  text-align: right !important;
+  white-space: nowrap;
+}
+
+.bigFigure {
+  height: 3rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.signOff {
+  display: flex;
+  justify-content: center;
+  gap: layout.$spacing-09;
+  margin-top: layout.$spacing-05;
+}
+
+.rule {
+  display: inline-block;
+  width: 12rem;
+  border-bottom: $rule;
+}

package/src/registers/moh-362/moh-362.component.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { useSession } from '@openmrs/esm-framework';
+
+import { ReportFiltersComponent, type ReportPeriod, useRestorePeriod } from '../../common/report-filters';
+import { showReportError } from '../../common/report-error';
+import { ReportPlaceholder, useGeneratedLocation } from '../../common/report-placeholder';
+import { ReportSkeleton } from '../../common/report-skeleton';
+import { getMoh362 } from '../../resources/moh-362.resource';
+import Moh362LabRegister from './moh-362-lab-register.component';
+import Moh362LinkageRegister from './moh-362-linkage-register.component';
+import { isLinked, type Moh362Row } from './moh-362.types';
+import styles from './moh-362.scss';
+
+/**
+ * MOH 362 HTS Lab, Referral & Linkage Register, opened from the landing page's
+ * Registers tab. It shares the reports' filter bar. Unlike the other registers
+ * the form holds two sheets, shown as tabs: the HTS lab register (every test,
+ * the same tests as MOH 731 1.1 HIV Tests) and the referral and linkage
+ * register (those who tested positive and were linked to care, i.e. have an ART
+ * start date).
+ */
+const Moh362Register: React.FC = () => {
+  const [rows, setRows] = useState<Moh362Row[] | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [period, setPeriod] = useState<{ startDate: string; endDate: string }>({ startDate: '', endDate: '' });
+
+  const session = useSession();
+  const locationUuids = session?.sessionLocation?.uuid ?? '';
+  /* Only a register for the current location counts */
+  const { isForCurrentLocation, hasLocationChanged, markGenerated } = useGeneratedLocation('moh362Location');
+  const isGenerated = rows !== null && isForCurrentLocation;
+
+  const generate = async ({ startDate, endDate }: ReportPeriod) => {
+    setIsLoading(true);
+    setPeriod({ startDate, endDate });
+    try {
+      setRows(await getMoh362({ locationUuids, startDate, endDate }));
+      markGenerated(locationUuids);
+    } catch (error) {
+      showReportError('the MOH 362 register', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useRestorePeriod(generate);
+
+  /* the open sheet is kept in the URL */
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedSheet = searchParams.get('sheet') === 'linkage' ? 1 : 0;
+  const selectSheet = ({ selectedIndex }: { selectedIndex: number }) => {
+    const next = new URLSearchParams(searchParams);
+    if (selectedIndex === 1) {
+      next.set('sheet', 'linkage');
+    } else {
+      next.delete('sheet');
+    }
+    setSearchParams(next, { replace: true });
+  };
+
+  return (
+    <>
+      <ReportFiltersComponent
+        reportName="MOH 362 HTS Lab, Referral & Linkage Register"
+        mode="both"
+        onGenerate={generate}
+        isLoading={isLoading}
+        isReportGenerated={isGenerated}
+        generatedPeriod={period}
+        defaultTab="custom"
+        backLink={{ label: 'All registers', to: '/?tab=registers' }}
+      />
+      {isLoading && <ReportSkeleton />}
+      {!isLoading && !isGenerated && (
+        <ReportPlaceholder reportName="MOH 362 register" isLocationChanged={rows !== null && hasLocationChanged} />
+      )}
+      {!isLoading && isGenerated && (
+        <Tabs selectedIndex={selectedSheet} onChange={selectSheet}>
+          <TabList aria-label="MOH 362 registers" className={styles.sheetTabs}>
+            <Tab>HTS Lab Register</Tab>
+            <Tab>Referral and Linkage Register</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel className={styles.sheetPanel}>
+              <Moh362LabRegister rows={rows} />
+            </TabPanel>
+            <TabPanel className={styles.sheetPanel}>
+              <Moh362LinkageRegister rows={rows.filter(isLinked)} />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      )}
+    </>
+  );
+};
+
+export default Moh362Register;

package/src/registers/moh-362/moh-362.scss

@@ -0,0 +1,11 @@
+@use '@carbon/layout';
+
+/* HTS Lab Register / Referral and Linkage Register tabs, under the filters */
+.sheetTabs {
+  margin-top: layout.$spacing-05;
+}
+
+/* each sheet brings its own frame */
+.sheetPanel {
+  padding: 0;
+}

package/src/registers/moh-362/moh-362.types.ts

@@ -0,0 +1,97 @@
+import dayjs from 'dayjs';
+
+/**
+ * One test in the MOH 362 register, as the ETL returns it (/moh-362-register):
+ * the same tests as MOH 731 1.1 HIV Tests, with the register's details.
+ */
+export interface Moh362Row {
+  serial_number?: number | string;
+  patient_id?: number;
+  nupi?: string | null;
+  amrsID?: string | null;
+  id_number?: string | null;
+  full_name?: string | null;
+  first_name?: string | null;
+  middle_name?: string | null;
+  last_name?: string | null;
+  age?: number | string | null;
+  sex?: string | null;
+  telephone?: string | null;
+  date_of_visit?: string | null;
+  hts_provider?: string | null;
+  marital_status?: number | string | null;
+  population_type?: number | string | null;
+  sub_population?: string | null;
+  setting?: number | string | null;
+  hiv_test1?: number | string | null;
+  kit1_name?: string | null;
+  lot1?: string | null;
+  expiry1?: string | null;
+  hiv_test2?: number | string | null;
+  kit2_name?: string | null;
+  lot2?: string | null;
+  expiry2?: string | null;
+  hiv_test3?: number | string | null;
+  kit3_name?: string | null;
+  lot3?: string | null;
+  expiry3?: string | null;
+  final_result?: string | null;
+  discordant_couple?: string | null;
+  referral_services?: number | string | null;
+  client_tested_as?: string | null;
+  referral_to?: string | null;
+  residence?: string | null;
+  handed_to?: string | null;
+  art_start_date?: string | null;
+  ccc_number?: string | null;
+  screening_remarks?: string | null;
+  initial_remarks?: string | null;
+}
+
+/** Blank rather than "null" / "undefined" in a cell */
+export const text = (value: unknown) => (value === null || value === undefined ? '' : String(value));
+
+/** DD/MM/YYYY, as the form asks */
+export const formDate = (value: unknown) => (value ? dayjs(String(value)).format('DD/MM/YYYY') : '');
+
+export const clientName = (row: Moh362Row) =>
+  row.full_name || [row.first_name, row.middle_name, row.last_name].filter(Boolean).join(' ');
+
+/** Tested positive and linked to care: started on ART */
+export const isLinked = (row: Moh362Row) => row.final_result === 'P' && Boolean(row.art_start_date);
+
+/** An HIV test result (the concept the ETL returns) as the form's code: N, P, I */
+export const testResult = (value: unknown) => {
+  switch (String(value ?? '')) {
+    case '664':
+      return 'N';
+    case '703':
+      return 'P';
+    case '1138':
+      return 'I';
+    default:
+      return text(value);
+  }
+};
+
+/** The final result as the form's code: N, P, Ic (inconclusive), NA */
+export const finalResult = (value: unknown) => (String(value ?? '') === 'I' ? 'Ic' : text(value));
+
+export const ageOf = (row: Moh362Row) => {
+  const age = Number(row.age);
+  return Number.isFinite(age) && row.age !== null && row.age !== '' ? age : null;
+};
+
+/** The form's age bands for the Tests (n) and Positive (n) summaries */
+export const AGE_BANDS: Array<{ label: string; min: number; max?: number }> = [
+  { label: '1-9 yrs', min: 1, max: 9 },
+  { label: '10-14 yrs', min: 10, max: 14 },
+  { label: '15-19 yrs', min: 15, max: 19 },
+  { label: '20-24 yrs', min: 20, max: 24 },
+  { label: '25+ yrs', min: 25 },
+];
+
+export const inBand = (row: Moh362Row, band: { min: number; max?: number }) => {
+  const age = ageOf(row);
+  return age !== null && age >= band.min && (band.max === undefined || age <= band.max);
+};

package/src/registers/register-catalog.ts

@@ -0,0 +1,80 @@
+import { Activity, Chemistry, Microscope } from '@carbon/react/icons';
+
+import { type ReportCategory } from '../dashboard/report-catalog';
+
+/**
+ * The registers listed on the landing page's Registers tab, grouped as the
+ * reports are. Each opens on its own route (root.component.tsx) with the same
+ * filter bar as the reports, opening on a custom range of today
+ * (`defaultTab="custom"`), where the reports open on last month.
+ */
+export const registerCategories: ReportCategory[] = [
+  {
+    id: 'hiv-testing',
+    title: 'HIV testing services',
+    description: 'HTS daily registers',
+    tone: 'violet',
+    reports: [
+      {
+        code: 'MOH 362',
+        name: 'HTS lab, referral & linkage',
+        description: 'Clients tested for HIV, their test kits and results, and referral and linkage to care.',
+        path: '/moh-362',
+        icon: Microscope,
+        keywords: ['hts', 'hiv testing', 'lab', 'referral', 'linkage', 'kits'],
+      },
+    ],
+  },
+  {
+    id: 'diabetes-and-hypertension',
+    title: 'MOH-740',
+    description: 'Diabetes and Hypertension comprehensive care',
+    tone: 'violet',
+    reports: [
+      {
+        code: 'MOH 222',
+        name: 'Diabetes and Hypertension Comprehensive Care Daily Register',
+        description: 'Diabetes and Hypertension Comprehensive Care Daily Register',
+        path: '/moh-222',
+        icon: Activity,
+        keywords: ['cdm', 'ncd', 'diabetes', 'hypertetion'],
+      },
+      {
+        code: 'MOH 270',
+        name: 'Diabetes & Hypertension Comprehensive Care Permanent register',
+        description: 'Diabetes & Hypertension Comprehensive Care Permanent register',
+        path: '/moh-270',
+        icon: Activity,
+        keywords: ['cdm', 'ncd', 'diabetes', 'hypertetion'],
+      },
+    ],
+  },
+  {
+    id: 'laboratory',
+    title: 'Laboratory',
+    description: 'Laboratory specimen and testing registers',
+    tone: 'blue',
+    reports: [
+      {
+        code: 'MOH 240',
+        name: 'Laboratory (LAB) Register',
+        description:
+          'Specimens collected and analysed by the laboratory: investigations, results, billing and referral.',
+        path: '/moh-240-register',
+        icon: Chemistry,
+        keywords: ['lab', 'laboratory', 'specimen', 'results', 'malaria', 'referral'],
+      },
+      {
+        code: 'TB LAB',
+        name: 'TB Laboratory Register',
+        description:
+          'TB specimens tested: microscopy (AFB), TB-LAMP, LF-LAM and GeneXpert/Truenat results with turnaround.',
+        path: '/tb-lab-register',
+        icon: Chemistry,
+        keywords: ['tb', 'tuberculosis', 'afb', 'microscopy', 'sputum', 'genexpert', 'truenat', 'lamp', 'tat'],
+      },
+    ],
+  },
+];
+
+export const totalRegisterCount = registerCategories.reduce((count, category) => count + category.reports.length, 0);

package/src/registers/tb-lab-register/tb-lab-register-table.component.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+
+import { TB_LAB_COLUMNS, type TbLabColumn, type TbLabRow, text } from './tb-lab-register.columns';
+import styles from './tb-lab-register-table.scss';
+
+interface TbLabRegisterTableProps {
+  rows: TbLabRow[];
+  facility?: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+interface HeaderCell {
+  /** A two-tier group spanning its member columns; undefined for a tall column */
+  group?: string;
+  /** The column's own label, repeated once per member under a group */
+  label: string;
+  /** Columns the header spans */
+  span: number;
+  /** 2 for a column that stands alone across both header rows */
+  height: number;
+}
+
+/**
+ * The printed template's two-tier header, rebuilt from the column spec:
+ * consecutive members of a group sit under one spanning group cell, standalone
+ * columns stand two rows tall.
+ */
+export function headerCellsFor(columns: TbLabColumn[]): HeaderCell[][] {
+  const top: HeaderCell[] = [];
+  const bottom: HeaderCell[] = [];
+
+  columns.forEach((column, index) => {
+    if (!column.group) {
+      top.push({ group: undefined, label: column.header, span: 1, height: 2 });
+      return;
+    }
+    const previous = columns[index - 1];
+    if (previous?.group === column.group) {
+      top[top.length - 1].span += 1;
+    } else {
+      top.push({ group: column.group, label: column.group, span: 1, height: 1 });
+    }
+    bottom.push({ group: undefined, label: column.header, span: 1, height: 1 });
+  });
+
+  return [top, bottom];
+}
+
+/**
+ * The TB Laboratory Register as the printed template lays it out: one row per
+ * specimen tested, the two-tier header over the appearance and microscopy
+ * columns, drawn as a landscape sheet that scrolls sideways in its frame.
+ */
+const TbLabRegisterTable: React.FC<TbLabRegisterTableProps> = ({ rows, facility = '', startDate, endDate }) => {
+  const [topRow, bottomRow] = headerCellsFor(TB_LAB_COLUMNS);
+  const period = [startDate, endDate]
+    .filter(Boolean)
+    .map((value) => asDay(value))
+    .join(' to ');
+
+  return (
+    <div className={styles.sheet}>
+      <div className={styles.runningHead}>
+        <span>Ministry of Health</span>
+        <span>TB LABORATORY REGISTER</span>
+        <span>{facility}</span>
+      </div>
+      {period && <div className={styles.period}>{period}</div>}
+
+      <div className={styles.tableScroll}>
+        <table className={styles.register}>
+          <thead>
+            <tr>
+              {topRow.map((cell, index) =>
+                cell.group ? (
+                  <th key={index} colSpan={cell.span}>
+                    {cell.label}
+                  </th>
+                ) : (
+                  <th key={index} rowSpan={2} className={styles.tall}>
+                    {cell.label}
+                  </th>
+                ),
+              )}
+            </tr>
+            <tr>
+              {bottomRow.map((cell, index) => (
+                <th key={index}>{cell.label}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, index) => (
+              <tr key={text(row.lab_no) || index}>
+                {TB_LAB_COLUMNS.map((column, cellIndex) => (
+                  <td key={cellIndex} className={column.align === 'left' ? styles.left : undefined}>
+                    {text(column.value(row, index))}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+/** Renders a filter-bar period (YYYY-MM-DD) the way the register reads it */
+function asDay(value: string): string {
+  const parts = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  return parts ? `${parts[3]}/${parts[2]}/${parts[1]}` : value;
+}
+
+export default TbLabRegisterTable;