@ampath/esm-reports-app 1.0.0-next.6 → 1.0.0-next.60

package/src/dashboard/reports-dasboard.tsx

@@ -1,28 +1,112 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ClickableTile } from '@carbon/react';
+import { Button, ClickableTile, Layer, Search, Tag } from '@carbon/react';
+import { ArrowRight, Calendar, Location, Report } from '@carbon/react/icons';
+import { formatDate, useSession } from '@openmrs/esm-framework';
 
+import { filterCategories, reportCategories, totalReportCount, type ReportDefinition } from './report-catalog';
 import styles from './reports-dashboard.module.scss';
+
 interface ReportsDashboardProps {}
+
 const ReportsDashboard: React.FC<ReportsDashboardProps> = () => {
   const navigate = useNavigate();
+  const session = useSession();
+  const [searchTerm, setSearchTerm] = useState<string>('');
+
+  const facilityName = session?.sessionLocation?.display;
+  const today = formatDate(new Date(), { mode: 'standard', time: false, noToday: true });
+
+  const visibleCategories = useMemo(() => filterCategories(reportCategories, searchTerm), [searchTerm]);
+  const matchCount = visibleCategories.reduce((count, category) => count + category.reports.length, 0);
+  const isSearching = searchTerm.trim().length > 0;
+
+  const renderReportTile = (report: ReportDefinition, tone: string) => {
+    const Icon = report.icon;
+
+    return (
+      <ClickableTile
+        key={report.path}
+        className={styles.tile}
+        data-tone={tone}
+        onClick={() => navigate(report.path)}
+        aria-label={`${report.code} ${report.name}`}
+      >
+        <div className={styles.tileIcon}>
+          <Icon size={20} />
+        </div>
+        <div className={styles.tileCopy}>
+          <p className={styles.tileCode}>{report.code}</p>
+          <h4 className={styles.tileName}>{report.name}</h4>
+        </div>
+        <ArrowRight size={16} className={styles.tileArrow} />
+      </ClickableTile>
+    );
+  };
+
   return (
-    <>
-      <div className={styles.container}>
-        <ClickableTile onClick={() => navigate('/moh-710')} className={styles.tile}>
-          MOH-710 REPORT
-        </ClickableTile>
-        <ClickableTile onClick={() => navigate('/moh-711')} className={styles.tile}>
-          MOH-711 REPORT
-        </ClickableTile>
-        <ClickableTile onClick={() => navigate('/moh-717')} className={styles.tile}>
-          MOH-717 REPORT
-        </ClickableTile>
-        <ClickableTile onClick={() => navigate('/moh-706')} className={styles.tile}>
-          MOH-706 REPORT
-        </ClickableTile>
+    <div className={styles.dashboard}>
+      <header className={styles.header}>
+        <div className={styles.headerIcon}>
+          <Report size={20} />
+        </div>
+        <h3 className={styles.headerTitle}>Reports</h3>
+        <div className={styles.headerMeta}>
+          {facilityName && (
+            <span className={styles.metaItem}>
+              <Location size={16} />
+              {facilityName}
+            </span>
+          )}
+          <span className={styles.metaItem}>
+            <Calendar size={16} />
+            {today}
+          </span>
+        </div>
+      </header>
+
+      <div className={styles.toolbar}>
+        <Layer className={styles.searchLayer}>
+          <Search
+            id="reports-search"
+            labelText="Search reports"
+            placeholder="Search reports"
+            size="sm"
+            value={searchTerm}
+            onChange={(event) => setSearchTerm(event.target.value)}
+            onClear={() => setSearchTerm('')}
+          />
+        </Layer>
+        <p className={styles.resultCount}>
+          {isSearching ? `${matchCount} of ${totalReportCount} reports` : `${totalReportCount} reports available`}
+        </p>
       </div>
-    </>
+
+      {visibleCategories.length > 0 ? (
+        visibleCategories.map((category) => (
+          <section key={category.id} className={styles.category}>
+            <div className={styles.categoryHeader} data-tone={category.tone}>
+              <h5 className={styles.categoryTitle}>{category.title}</h5>
+              <Tag size="sm" type="outline">
+                {category.reports.length}
+              </Tag>
+            </div>
+            <div className={styles.grid}>
+              {category.reports.map((report) => renderReportTile(report, category.tone))}
+            </div>
+          </section>
+        ))
+      ) : (
+        <Layer className={styles.emptyState}>
+          <Report size={32} className={styles.emptyStateIcon} />
+          <h5>No reports match &ldquo;{searchTerm}&rdquo;</h5>
+          <p>Try a form number such as 731, or a service such as immunization.</p>
+          <Button kind="ghost" size="sm" onClick={() => setSearchTerm('')}>
+            Clear search
+          </Button>
+        </Layer>
+      )}
+    </div>
   );
 };
 

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

@@ -1,14 +1,272 @@
-.container {
-    display: flex;
+@use 'sass:list';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/motion';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+$tones: (
+  'violet': (
+    colors.$purple-60,
+    colors.$purple-10,
+  ),
+  'magenta': (
+    colors.$magenta-60,
+    colors.$magenta-10,
+  ),
+  'teal': (
+    colors.$teal-60,
+    colors.$teal-10,
+  ),
+  'blue': (
+    colors.$blue-60,
+    colors.$blue-10,
+  ),
+);
+
+.dashboard {
+  /* Horizontal gutter comes from `.page` in root.scss */
+  padding: layout.$spacing-05 0 layout.$spacing-07;
+  background-color: $openmrs-background-grey;
+  min-height: 100%;
+}
+
+/* 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;
+}
+
+.headerMeta {
+  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;
+  color: $text-02;
+  white-space: nowrap;
+
+  svg {
+    fill: var(--brand-01);
+  }
+}
+
+/* Toolbar */
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+}
+
+.searchLayer {
+  flex: 1 1 auto;
+  max-width: 24rem;
+}
+
+.resultCount {
+  @include type.type-style('label-01');
+  color: $text-02;
+  white-space: nowrap;
+}
+
+/* Categories */
+
+.category {
+  margin-bottom: layout.$spacing-06;
+}
+
+.categoryHeader {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  padding-left: layout.$spacing-03;
+  margin-bottom: layout.$spacing-04;
+  border-left: layout.$spacing-02 solid $ui-04;
+}
+
+.categoryTitle {
+  @include type.type-style('productive-heading-01');
+  color: $color-gray-100;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: layout.$spacing-04;
+}
+
+/* Report tiles. Selectors are nested under `.grid` so they win over the
+   Carbon tile styles the app shell loads globally. */
+
+.grid .tile {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+  min-height: 0;
+  padding: layout.$spacing-04;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-left: layout.$spacing-02 solid $ui-04;
+  text-decoration: none;
+  transition: all motion.$duration-fast-02 motion.motion(standard, productive);
+
+  &:hover {
+    background-color: $ui-02;
+    border-color: $ui-04;
+    box-shadow: 0 layout.$spacing-02 layout.$spacing-05 rgba(0, 0, 0, 0.1);
+
+    .tileArrow {
+      transform: translateX(layout.$spacing-02);
+    }
+  }
+}
+
+.tileIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: layout.$spacing-07;
+  height: layout.$spacing-07;
+  background-color: $ui-01;
+}
+
+.tileCopy {
+  min-width: 0;
+}
+
+.tileCode {
+  @include type.type-style('label-01');
+  color: $text-02;
+  letter-spacing: 0.04em;
+}
+
+.tileName {
+  @include type.type-style('productive-heading-01');
+  color: $color-gray-100;
+}
+
+.tileArrow {
+  flex-shrink: 0;
+  margin-left: auto;
+  fill: $text-02;
+  transition: transform motion.$duration-fast-02 motion.motion(standard, productive);
+}
+
+/* Tone accents, applied per category */
+
+@each $name, $tone in $tones {
+  $accent: list.nth($tone, 1);
+  $tint: list.nth($tone, 2);
+
+  .categoryHeader[data-tone='#{$name}'] {
+    border-left-color: $accent;
+  }
+
+  .grid .tile[data-tone='#{$name}'] {
+    border-left-color: $accent;
+
+    .tileIcon {
+      color: $accent;
+      background-color: $tint;
+    }
+
+    &:hover {
+      border-color: $accent;
+
+      .tileArrow {
+        fill: $accent;
+      }
+    }
+  }
+}
+
+/* Empty state */
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-07 layout.$spacing-05;
+  text-align: center;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+
+  h5 {
+    @include type.type-style('productive-heading-02');
+    color: $color-gray-100;
+  }
+
+  p {
+    @include type.type-style('body-long-01');
+    color: $text-02;
+  }
+}
+
+.emptyStateIcon {
+  fill: $ui-04;
+}
+
+@media (max-width: $breakpoint-tablet-max) {
+  .dashboard {
+    padding: layout.$spacing-05 0;
+  }
+
+  .headerMeta {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    margin-left: 0;
+  }
+
+  .toolbar {
     flex-wrap: wrap;
-    gap: 20px;
-    margin: 2rem;
+  }
+
+  .searchLayer {
+    max-width: none;
+  }
+
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
-.tile {
-    flex: 1 1 calc(33.333% - 40px);
-    min-width: 5rem;
-    max-width: 15rem;
-    padding: 1rem;
-    text-align: center;
-}
+@media (max-width: $breakpoint-phone-max) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}

package/src/index.ts

@@ -5,6 +5,18 @@ import { reportsDashboardMeta } from './dashboard-meta/reports-dashboard.meta';
 
 export const moduleName = '@ampath/esm-reports-app';
 
+/**
+ * The section this app's configuration is declared under.
+ *
+ * Not the package name: the AMPATH deployment's `o3-config.json` declares
+ * `@ampath/esm-reporting`, and there is no `@ampath/esm-reports-app` section in
+ * it. Registering the schema under the package name left `etlBaseUrl` on its
+ * empty default no matter what the deployment set, so every report failed with
+ * "the ETL base URL is not configured". Keep this in step with the config, not
+ * with `package.json`.
+ */
+export const configSectionName = '@ampath/esm-reporting';
+
 const options = {
   featureName: 'ampath-esm-reports',
   moduleName,
@@ -13,7 +25,7 @@ const options = {
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
 export function startupApp() {
-  defineConfigSchema(moduleName, configSchema);
+  defineConfigSchema(configSectionName, configSchema);
 }
 export const root = getAsyncLifecycle(() => import('./root.component'), options);
 

package/src/reports/datatable-wrapper/datatable-wrapper.component.tsx

@@ -0,0 +1,69 @@
+import {
+  DataTable,
+  type DataTableHeader,
+  type DataTableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import React from 'react';
+
+interface DatatableWrapperProps {
+  rows: Omit<DataTableRow<any[]>, 'cells'>[];
+  headers: DataTableHeader[];
+  subHeaders?: string[];
+  /** Header keys whose cells wrap instead of stretching the row (`wrap: true` columns) */
+  wrapKeys?: readonly string[];
+  /** Applied to the table, so a register can use its own stylesheet */
+  className?: string;
+}
+
+const DatatableWrapper: React.FC<DatatableWrapperProps> = ({
+  rows,
+  headers,
+  subHeaders = [],
+  wrapKeys = [],
+  className,
+}) => {
+  return (
+    <DataTable rows={rows} headers={headers}>
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps, getCellProps }) => (
+        <Table {...getTableProps()} className={className}>
+          <TableHead>
+            <TableRow>
+              {headers.map((header) => (
+                <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+              ))}
+            </TableRow>
+            {subHeaders && subHeaders.length && (
+              <TableRow>
+                {subHeaders.map((head, i) => (
+                  <TableHeader key={i}>{head}</TableHeader>
+                ))}
+              </TableRow>
+            )}
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow {...getRowProps({ row })}>
+                {row.cells.map((cell, i) => (
+                  <TableCell
+                    {...getCellProps({ cell })}
+                    className={wrapKeys.includes(headers[i]?.key) ? 'wrapCell' : undefined}
+                  >
+                    {cell.value}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </DataTable>
+  );
+};
+
+export default DatatableWrapper;

package/src/reports/moh-240/moh-240-header.component.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import TableWrapper from '../table-wrapper/table-wrapper.component';
+import TableRowMapper from '../table-wrapper/table-row-mapper.component';
+import { getCell } from '../../utils/utils';
+import { useLocationDetails } from '../../common/report-header';
+import styles from './moh-240.scss';
+
+interface MOH240HeaderProps {
+  facility?: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+const asDate = (value?: string) => (value ? dayjs(value).format('DD/MM/YYYY') : '');
+
+const MOH240Header: React.FC<MOH240HeaderProps> = ({ facility = '', startDate, endDate }) => {
+  const { county, subCounty, kmhflCode } = useLocationDetails();
+
+  const tableRows = useMemo(() => {
+    return [
+      {
+        tableCells: [getCell('', 'County:', 1, 1, true), getCell('', county ?? '', 3)],
+      },
+      {
+        tableCells: [getCell('', 'Sub-County:', 1, 1, true), getCell('', subCounty ?? '', 3)],
+      },
+      {
+        tableCells: [getCell('', 'Health Facility:', 1, 1, true), getCell('', facility, 3)],
+      },
+      {
+        tableCells: [getCell('', 'KMHFL Code:', 1, 1, true), getCell('', kmhflCode ?? '', 3)],
+      },
+      {
+        tableCells: [
+          getCell('', 'Type:', 1, 1, true),
+          getCell('', ''),
+          getCell('', 'Man. Agency:', 1, 1, true),
+          getCell('', ''),
+        ],
+      },
+      {
+        tableCells: [
+          getCell('', 'Start date:', 1, 1, true),
+          getCell('', asDate(startDate)),
+          getCell('', 'End date:', 1, 1, true),
+          getCell('', asDate(endDate)),
+        ],
+      },
+    ];
+  }, [county, subCounty, kmhflCode, facility, startDate, endDate]);
+
+  return (
+    <div className={styles.headerSection}>
+      <TableWrapper className={styles.formTable}>
+        <TableRowMapper tableRows={tableRows} />
+      </TableWrapper>
+    </div>
+  );
+};
+
+export default MOH240Header;

package/src/reports/moh-240/moh-240.columns.ts

@@ -0,0 +1,113 @@
+import { type RegisterColumn } from '../../common/report-register';
+import dayjs from 'dayjs';
+
+/** The register's columns, in the order the printed MOH 240 prints them */
+export const MOH_240_HEADERS = [
+  { key: 'date', header: 'Date (DD/MM/YYYY)' },
+  { key: 'opd_ip_ref_no', header: 'OPD / IPD Ref. No.' },
+  { key: 'lab_no', header: 'Lab. No. (new client)' },
+  { key: 'revisit_no', header: 'Revisit No.' },
+  { key: 'full_name', header: 'Full Names (Three names)' },
+  { key: 'age', header: 'Age' },
+  { key: 'sex', header: 'Sex' },
+  { key: 'county_sub_county', header: 'County / Sub County' },
+  { key: 'village_estate_landmark', header: 'Village / Estate / Landmark' },
+  { key: 'telephone_number', header: 'Telephone Number' },
+  { key: 'clinical_diagnosis', header: 'Clinical Diagnosis' },
+  { key: 'prior_treatment', header: 'Prior Treatment' },
+  { key: 'type_of_specimen', header: 'Type of Specimen' },
+  { key: 'condition_of_specimen', header: 'Condition of Specimen' },
+  { key: 'investigation_required', header: 'Investigation Required' },
+  { key: 'test_datetime', header: 'Date Sample Collected' },
+  { key: 'date_sample_received', header: 'Date Sample Received' },
+  { key: 'clinician_name', header: 'Clinician Name' },
+  { key: 'date_sample_analysed', header: 'Date Sample Analysed' },
+  { key: 'results', header: 'Results' },
+  { key: 'date_results_dispatched', header: 'Date Results Dispatched' },
+  { key: 'amount_charged', header: 'Amount Charged' },
+  { key: 'receipt_number', header: 'Receipt Number' },
+  { key: 'referrals', header: 'Referrals (From Other HF / To Other HF / 3rd Tier Reference Laboratories)' },
+  { key: 'comments', header: 'Comments' },
+  { key: 'testing_officer', header: 'Name of Analysing/Testing Officer' },
+  { key: 'signature', header: 'Signature' },
+] as const;
+
+/** The column letters the printed register runs across the top */
+export const MOH_240_SUB_HEADERS = MOH_240_HEADERS.map((_, i) =>
+  i < 26 ? String.fromCharCode(65 + i) : `A${String.fromCharCode(65 + i - 26)}`,
+);
+
+/**
+ * Columns whose values must stay text in the CSV: identifiers lose leading
+ * zeros and phone numbers open as `#NAME?` formulas when Excel parses them
+ * as numbers.
+ */
+export const MOH_240_TEXT_KEYS = ['lab_no', 'opd_ip_ref_no', 'telephone_number', 'receipt_number'];
+
+/**
+ * Prose columns allowed to wrap on screen; everything else stays `nowrap` so
+ * one long value cannot stretch the 27-column row past the fold.
+ * `results` wraps because full-panel rows (v1.2) compose every analyte,
+ * including 'Not done' placeholders, into one long string.
+ */
+export const MOH_240_WRAP_KEYS = [
+  'clinical_diagnosis',
+  'type_of_specimen',
+  'referrals',
+  'comments',
+  'results',
+];
+
+/**
+ * The results column carries whichever indicator the drill-down was opened for,
+ * so it is read from a field named by that indicator rather than from `results`.
+ */
+export function resultFieldFor(indicator: string): string {
+  if (indicator.startsWith('min_') || indicator.startsWith('max_')) {
+    return indicator.substring(4);
+  }
+  if (indicator.startsWith('total_')) {
+    return indicator.substring(6);
+  }
+  if (indicator.startsWith('positive_')) {
+    return indicator.substring(9);
+  }
+  return indicator;
+}
+
+/**
+ * Formats a datetime column the way the printed form reads it. Values the
+ * payload already sends as `DD/MM/YYYY` pass through untouched; only raw ISO
+ * datetimes (`2026-08-19T10:18:14.000Z`) are reformatted, so screen and CSV
+ * agree no matter which shape the endpoint returns.
+ */
+export function formatRegisterDate(value: unknown): string {
+  if (value === null || value === undefined || value === '') {
+    return '';
+  }
+  const text = String(value).trim();
+  return /^\d{4}-\d{2}-\d{2}/.test(text) ? dayjs(text).format('DD/MM/YYYY') : text;
+}
+
+/** Exported with the register's own headings, so the CSV matches the form */
+export function moh240Columns(indicator: string): RegisterColumn[] {
+  const resultField = resultFieldFor(indicator);
+
+  return MOH_240_HEADERS.map(({ key, header }) => ({
+    header,
+    value: (row: Record<string, any>) => {
+      if (key === 'results') {
+        // The lab-706 register sends the row's translated result directly;
+        // the per-indicator field remains the fallback for payloads that
+        // only carry the test slots.
+        return row.results ?? row[resultField] ?? '';
+      }
+      if (key === 'test_datetime') {
+        return formatRegisterDate(row[key]);
+      }
+      return row[key] ?? '';
+    },
+    text: (MOH_240_TEXT_KEYS as readonly string[]).includes(key) || undefined,
+    wrap: (MOH_240_WRAP_KEYS as readonly string[]).includes(key) || undefined,
+  }));
+}