@ampath/esm-reports-app 1.0.0-next.63 → 1.0.0-next.64

package/src/dashboard/reports-dashboard.module.scss

@@ -25,78 +25,93 @@ $tones: (
 );
 
 .dashboard {
-  /* Horizontal gutter comes from `.page` in root.scss */
-  padding: layout.$spacing-05 0 layout.$spacing-07;
+  /* `.page` in root.scss gives every route this side gutter. The dashboard
+     reaches over it so its grey runs edge to edge, then pads it back. */
+  --page-gutter: #{layout.$spacing-06};
+
+  box-sizing: border-box;
+  margin: 0 calc(-1 * var(--page-gutter));
+  padding: 0 var(--page-gutter) layout.$spacing-07;
+  /* the original grey behind the reports; the tab row above it is white */
   background-color: $openmrs-background-grey;
-  min-height: 100%;
+  /* grey down to the foot of the window, below the 3rem top bar, however few
+     reports are listed */
+  min-height: calc(100vh - 3rem);
 }
 
 /* Header */
 
-.header {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: layout.$spacing-03 layout.$spacing-04;
-  padding: layout.$spacing-03 layout.$spacing-05;
-  margin-bottom: layout.$spacing-04;
-  background-color: $ui-02;
-  border: 1px solid $ui-03;
-  border-left: layout.$spacing-02 solid var(--brand-01);
-}
-
-.headerIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: layout.$spacing-06;
-  height: layout.$spacing-06;
-  color: var(--brand-01);
-  background-color: $brand-primary-10;
-}
-
-.headerTitle {
-  @include type.type-style('productive-heading-03');
-  color: $color-gray-100;
+/* Tabs, with the facility and date at the right end of the tab row */
+.tabsArea {
+  position: relative;
+  padding-top: layout.$spacing-05;
+
+  /* a white band behind the tab row, edge to edge over the page gutter, with
+     the tabs' 2px rule along its foot; the reports below sit on grey */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: calc(-1 * var(--page-gutter));
+    right: calc(-1 * var(--page-gutter));
+    height: calc(#{layout.$spacing-05} + #{layout.$spacing-08});
+    background-color: $ui-02;
+    box-shadow: inset 0 -2px 0 $ui-03;
+  }
 }
 
 .headerMeta {
+  @include type.type-style('body-compact-01');
+  position: absolute;
+  /* level with the tab row, below the white band's top padding, and drawn
+     over the band */
+  top: layout.$spacing-05;
+  right: 0;
+  z-index: 1;
   display: flex;
   align-items: center;
-  gap: layout.$spacing-05;
-  margin-left: auto;
-}
-
-.metaItem {
-  @include type.type-style('label-01');
-  display: inline-flex;
-  align-items: center;
-  gap: layout.$spacing-02;
+  /* the height of the tab row, so the line sits level with the tab labels */
+  height: layout.$spacing-08;
   color: $text-02;
   white-space: nowrap;
-
-  svg {
-    fill: var(--brand-01);
-  }
 }
 
 /* Toolbar */
 
 .toolbar {
-  display: flex;
+  /* the tiles' columns, so the search box is exactly one tile wide and the
+     count ends at the grid's right edge */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   align-items: center;
-  gap: layout.$spacing-05;
+  gap: layout.$spacing-04;
   margin-bottom: layout.$spacing-05;
 }
 
 .searchLayer {
-  flex: 1 1 auto;
-  max-width: 24rem;
+  /* two tiles wide, edges lined up with the first two tiles */
+  grid-column: 1 / span 2;
+
+  /* a white field with a thin outline, and the brand colour on focus */
+  :global(.cds--search-input) {
+    background-color: $ui-02;
+    border: 1px solid $ui-03;
+
+    &:hover {
+      border-color: $ui-04;
+    }
+
+    &:focus {
+      outline: 2px solid var(--brand-01);
+      outline-offset: -2px;
+    }
+  }
 }
 
 .resultCount {
   @include type.type-style('label-01');
+  grid-column: -2 / -1;
+  justify-self: end;
   color: $text-02;
   white-space: nowrap;
 }
@@ -216,6 +231,54 @@ $tones: (
 
 /* Empty state */
 
+/* Reports / Registers tabs, between the header and the panels */
+
+.tabList {
+  /* above the white band drawn behind it (.tabsArea::before) */
+  position: relative;
+  z-index: 1;
+  margin-bottom: layout.$spacing-05;
+
+  /* the first tab's label lines up with the content's left edge */
+  :global(.cds--tabs__nav-item:first-child) {
+    padding-left: 0;
+  }
+
+  /* keyboard / click focus in the brand colour too */
+  :global(.cds--tabs__nav-item:focus) {
+    outline-color: var(--brand-01);
+  }
+
+  /* the open tab in the AMPATH brand colour rather than Carbon blue */
+  :global(.cds--tabs__nav-item--selected) {
+    border-bottom-color: var(--brand-01);
+
+    .tabLabel svg {
+      fill: var(--brand-01);
+    }
+  }
+}
+
+/* Icon, name and count inside a tab */
+.tabLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+
+  svg {
+    fill: $text-02;
+  }
+}
+
+.tabCount {
+  margin: 0;
+}
+
+/* Each panel keeps the spacing its content already brings */
+.tabPanel {
+  padding: 0;
+}
+
 .emptyState {
   display: flex;
   flex-direction: column;
@@ -242,31 +305,53 @@ $tones: (
 }
 
 @media (max-width: $breakpoint-tablet-max) {
+  /* the gutter `.page` uses at this size */
   .dashboard {
-    padding: layout.$spacing-05 0;
-  }
+    --page-gutter: #{layout.$spacing-05};
 
-  .headerMeta {
-    align-items: flex-start;
-    flex-wrap: wrap;
-    margin-left: 0;
+    padding-bottom: layout.$spacing-05;
   }
 
-  .toolbar {
-    flex-wrap: wrap;
+  .toolbar,
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 
+  /* two columns: one and a half tiles, leaving the count room beside it */
   .searchLayer {
-    max-width: none;
-  }
-
-  .grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-column: 1;
+    width: 150%;
   }
 }
 
 @media (max-width: $breakpoint-phone-max) {
+  /* no room beside the tabs: the facility and date sit above them, and the
+     white band grows to hold both */
+  .headerMeta {
+    /* in the flow, but still painted over the band */
+    position: relative;
+    top: auto;
+    right: auto;
+    height: 1.125rem;
+    margin-bottom: layout.$spacing-03;
+  }
+
+  .tabsArea::before {
+    height: calc(#{layout.$spacing-05} + 1.125rem + #{layout.$spacing-03} + #{layout.$spacing-08});
+  }
+
+  .toolbar,
   .grid {
     grid-template-columns: 1fr;
   }
+
+  /* one column: full width, with the count under the search box */
+  .searchLayer {
+    grid-column: 1;
+    width: 100%;
+  }
+
+  .resultCount {
+    justify-self: start;
+  }
 }

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

@@ -0,0 +1,392 @@
+import React from 'react';
+
+import {
+  AGE_BANDS,
+  clientName,
+  finalResult,
+  formDate,
+  inBand,
+  testResult,
+  text,
+  type Moh362Row,
+} from './moh-362.types';
+import styles from './moh-362-register.scss';
+
+interface Moh362LabRegisterProps {
+  rows: Moh362Row[];
+}
+
+const COLUMN_IDS = 'abcdefghijklmnopqr'.split('');
+
+const count = (rows: Moh362Row[], test: (row: Moh362Row) => boolean) => rows.filter(test).length;
+
+/** One HIV test's header cell: the test, then kit, lot and expiry lines, then its result codes */
+const TestHeader: React.FC<{ test: string; codes: string }> = ({ test, codes }) => (
+  <th className={styles.testHeader}>
+    <span>{test}</span>
+    <span>Kit Name:</span>
+    <span>Lot No.</span>
+    <span>Expiry Date</span>
+    <span className={styles.dateRule}>____/____/____</span>
+    <span>{codes}</span>
+  </th>
+);
+
+/** One client's HIV test: the result, with the kit, lot and expiry used beneath it */
+const TestCell: React.FC<{ result: unknown; kit: unknown; lot: unknown; expiry: unknown }> = ({
+  result,
+  kit,
+  lot,
+  expiry,
+}) => {
+  const detail = [text(kit), text(lot), formDate(expiry)].filter(Boolean).join(' · ');
+  return (
+    <td rowSpan={2} className={styles.testCell}>
+      <strong>{testResult(result)}</strong>
+      {detail && <span className={styles.testDetail}>{detail}</span>}
+    </td>
+  );
+};
+
+/** A Tests (n) / Positive (n) block: age bands by sex, with totals */
+const AgeSexSummary: React.FC<{ title: string; rows: Moh362Row[] }> = ({ title, rows }) => {
+  const sexes: Array<{ label: string; code: string }> = [
+    { label: 'Male', code: 'M' },
+    { label: 'Female', code: 'F' },
+  ];
+  return (
+    <table className={styles.summaryTable}>
+      <thead>
+        <tr>
+          <th className={styles.summaryLabel}>{title}</th>
+          {AGE_BANDS.map((band) => (
+            <th key={band.label}>{band.label}</th>
+          ))}
+          <th>Total</th>
+        </tr>
+      </thead>
+      <tbody>
+        {sexes.map((sex) => {
+          const ofSex = rows.filter((row) => row.sex === sex.code);
+          return (
+            <tr key={sex.code}>
+              <th className={styles.summaryLabel}>{sex.label}</th>
+              {AGE_BANDS.map((band) => (
+                <td key={band.label}>{count(ofSex, (row) => inBand(row, band))}</td>
+              ))}
+              <td>{ofSex.length}</td>
+            </tr>
+          );
+        })}
+        <tr>
+          <th className={styles.summaryLabel}>Total</th>
+          {AGE_BANDS.map((band) => (
+            <td key={band.label}>{count(rows, (row) => inBand(row, band))}</td>
+          ))}
+          <td>{rows.length}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+/**
+ * MOH 362: HTS LAB REGISTER (Ver. July 2023), page 5 of the MOH 362 form: one
+ * row per client tested, columns (a) to (r), and the summary blocks beneath.
+ */
+const Moh362LabRegister: React.FC<Moh362LabRegisterProps> = ({ rows }) => {
+  const positives = rows.filter((row) => row.final_result === 'P');
+  const isKvp = (row: Moh362Row) => String(row.population_type ?? '') === '2';
+  const testTotals = (field: 'hiv_test1' | 'hiv_test2' | 'hiv_test3') => {
+    const by = (code: string) => count(rows, (row) => testResult(row[field]) === code);
+    const n = by('N');
+    const p = by('P');
+    const i = by('I');
+    return { n, p, i, total: n + p + i };
+  };
+  const tests = [
+    { label: 'HIV Test 1 (k)', ...testTotals('hiv_test1') },
+    { label: 'HIV Test 2 (l)', ...testTotals('hiv_test2') },
+    { label: 'HIV Test 3 (m)', ...testTotals('hiv_test3') },
+  ];
+
+  return (
+    <div className={styles.sheet}>
+      <div className={styles.runningHead}>
+        <span>Ministry Of Health</span>
+        <span>MOH 362 HTS LAB, REFERRAL AND LINKAGE REGISTER</span>
+        <span>Ver. July 2023</span>
+      </div>
+      <h4 className={styles.sheetTitle}>MOH 362: HTS LAB REGISTER</h4>
+
+      <div className={styles.tableScroll}>
+        <table className={styles.register}>
+          <thead>
+            <tr>
+              <th>
+                Serial
+                <br />
+                Number
+              </th>
+              <th className={styles.splitHeader}>
+                <span>National Identification Number</span>
+                <span>National Unique Patient Identifier (NUPI) Number</span>
+              </th>
+              <th>
+                Date of visit
+                <br />
+                (DD/MM/YYYY)
+              </th>
+              <th className={styles.wide}>
+                Client Name
+                <br />
+                (First, Middle, Last)
+              </th>
+              <th>Age</th>
+              <th>
+                Sex
+                <br />
+                (M/F)
+              </th>
+              <th>Telephone Number</th>
+              <th className={styles.codes}>
+                Marital Status
+                <br />
+                1=Married
+                <br />
+                2=Widowed
+                <br />
+                3=Single
+                <br />
+                4=Divorced
+                <br />
+                5=Separated
+              </th>
+              <th className={styles.codes}>
+                Population Type
+                <br />
+                1. Gen Pop
+                <br />
+                2. Key and Vulnerable Pop.
+                <br />
+                Codes for KVP
+                <br />- DC
+                <br />- MSM/MSW
+                <br />- FSW
+                <br />- PWID/PWUD
+                <br />- VP
+              </th>
+              <th className={styles.codes}>
+                Setting
+                <br />
+                (1=Facility
+                <br />
+                2=Community)
+              </th>
+              <TestHeader test="HIV Test 1" codes="(N,P,I)" />
+              <TestHeader test="HIV Test 2" codes="(N,P,I,NA)" />
+              <TestHeader test="HIV Test 3" codes="(N,P,I,NA)" />
+              <th>
+                Final HIV
+                <br />
+                Result
+                <br />
+                <br />
+                (N,P,Ic,NA)
+              </th>
+              <th>
+                Discordant
+                <br />
+                Couple
+                <br />
+                <br />
+                (Y/N/NA)
+              </th>
+              <th className={styles.codes}>
+                Referred for Prevention Services
+                <br />
+                1. PrEP
+                <br />
+                2. PEP
+                <br />
+                3. VMMC
+                <br />
+                4. PMTCT
+                <br />
+                5.NA
+              </th>
+              <th className={styles.wide}>
+                HTS Provider
+                <br />
+                (Name)
+              </th>
+              <th className={styles.wide}>Remarks</th>
+            </tr>
+            <tr className={styles.columnIds}>
+              {COLUMN_IDS.map((id) => (
+                <th key={id}>({id})</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, index) => (
+              <React.Fragment key={`${row.patient_id}-${row.serial_number}-${index}`}>
+                <tr>
+                  <td rowSpan={2}>{text(row.serial_number) || index + 1}</td>
+                  <td className={styles.upperCell}>{text(row.id_number)}</td>
+                  <td rowSpan={2}>{formDate(row.date_of_visit)}</td>
+                  <td rowSpan={2} className={styles.left}>
+                    {clientName(row)}
+                  </td>
+                  <td rowSpan={2}>{text(row.age)}</td>
+                  <td rowSpan={2}>{text(row.sex)}</td>
+                  <td rowSpan={2}>{text(row.telephone)}</td>
+                  <td rowSpan={2}>{text(row.marital_status)}</td>
+                  <td className={styles.upperCell}>{text(row.population_type)}</td>
+                  <td rowSpan={2}>{text(row.setting)}</td>
+                  <TestCell result={row.hiv_test1} kit={row.kit1_name} lot={row.lot1} expiry={row.expiry1} />
+                  <TestCell result={row.hiv_test2} kit={row.kit2_name} lot={row.lot2} expiry={row.expiry2} />
+                  <TestCell result={row.hiv_test3} kit={row.kit3_name} lot={row.lot3} expiry={row.expiry3} />
+                  <td rowSpan={2}>{finalResult(row.final_result)}</td>
+                  <td rowSpan={2}>{text(row.discordant_couple)}</td>
+                  <td rowSpan={2}>{text(row.referral_services)}</td>
+                  <td rowSpan={2} className={styles.left}>
+                    {text(row.hts_provider)}
+                  </td>
+                  <td rowSpan={2} className={styles.left}>
+                    {text(row.initial_remarks)}
+                  </td>
+                </tr>
+                <tr>
+                  <td className={styles.lowerCell}>{text(row.nupi)}</td>
+                  <td className={styles.lowerCell}>{text(row.sub_population)}</td>
+                </tr>
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* The summary blocks at the foot of the sheet, laid out as on the form */}
+      <div className={styles.summary}>
+        <div className={styles.summaryColumn}>
+          <AgeSexSummary title="Tests (n )" rows={rows} />
+          <AgeSexSummary title="Positive (n)" rows={positives} />
+        </div>
+
+        <div className={styles.summaryColumn}>
+          <table className={styles.summaryTable}>
+            <thead>
+              <tr>
+                <th>Total Negative (n)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className={styles.bigFigure}>{count(rows, (row) => row.final_result === 'N')}</td>
+              </tr>
+            </tbody>
+          </table>
+          <table className={styles.summaryTable}>
+            <thead>
+              <tr>
+                <th>Inconclusive test (n)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className={styles.bigFigure}>{count(rows, (row) => finalResult(row.final_result) === 'Ic')}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div className={styles.summaryColumn}>
+          <table className={styles.summaryTable}>
+            <tbody>
+              <tr>
+                <th className={styles.summaryLabel}>Tests Facility (j)</th>
+                <td>{count(rows, (row) => String(row.setting ?? '') === '1')}</td>
+              </tr>
+              <tr>
+                <th className={styles.summaryLabel}>Tests Community (j)</th>
+                <td>{count(rows, (row) => String(row.setting ?? '') === '2')}</td>
+              </tr>
+            </tbody>
+          </table>
+          <table className={styles.summaryTable}>
+            <tbody>
+              <tr>
+                <th className={styles.summaryLabel}>Discordant (o)</th>
+                <td>{count(rows, (row) => row.discordant_couple === 'Y')}</td>
+              </tr>
+            </tbody>
+          </table>
+          <table className={styles.summaryTable}>
+            <tbody>
+              <tr>
+                <th className={styles.summaryLabel}>Tests Key pops (i)</th>
+                <td>{count(rows, isKvp)}</td>
+              </tr>
+              <tr>
+                <th className={styles.summaryLabel}>
+                  Positive Key pops
+                  <br />
+                  (i) &amp; (n)
+                </th>
+                <td>{count(positives, isKvp)}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div className={styles.summaryColumn}>
+          <table className={styles.summaryTable}>
+            <thead>
+              <tr>
+                {tests.map((test) => (
+                  <React.Fragment key={test.label}>
+                    <th className={styles.summaryLabel}>{test.label}</th>
+                    <th>Number</th>
+                  </React.Fragment>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {(
+                [
+                  ['N: Negative', 'n'],
+                  ['P: Positive', 'p'],
+                  ['I: Invalid', 'i'],
+                  ['Wastage:', null],
+                  ['Total:', 'total'],
+                ] as Array<[string, 'n' | 'p' | 'i' | 'total' | null]>
+              ).map(([label, key]) => (
+                <tr key={label}>
+                  {tests.map((test) => (
+                    <React.Fragment key={test.label}>
+                      <th className={styles.summaryLabel}>{label}</th>
+                      {/* wastage is counted on the kits, not recorded per client */}
+                      <td>{key ? test[key] : ''}</td>
+                    </React.Fragment>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className={styles.signOff}>
+        <span>
+          Supervisor&apos;s Name: <span className={styles.rule} />
+        </span>
+        <span>
+          Signature: <span className={styles.rule} />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default Moh362LabRegister;