@ampath/esm-reports-app 1.0.0-next.8 → 1.0.0-next.80

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

@@ -1,14 +1,357 @@
-.container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    margin: 2rem;
-}
-
-.tile {
-    flex: 1 1 calc(33.333% - 40px);
-    min-width: 5rem;
-    max-width: 15rem;
-    padding: 1rem;
-    text-align: center;
-}
+@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 {
+  /* `.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;
+  /* grey down to the foot of the window, below the 3rem top bar, however few
+     reports are listed */
+  min-height: calc(100vh - 3rem);
+}
+
+/* Header */
+
+/* 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;
+  /* 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;
+}
+
+/* Toolbar */
+
+.toolbar {
+  /* 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-04;
+  margin-bottom: layout.$spacing-05;
+}
+
+.searchLayer {
+  /* 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;
+}
+
+/* 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 */
+
+/* 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;
+  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) {
+  /* the gutter `.page` uses at this size */
+  .dashboard {
+    --page-gutter: #{layout.$spacing-05};
+
+    padding-bottom: layout.$spacing-05;
+  }
+
+  .toolbar,
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  /* two columns: one and a half tiles, leaving the count room beside it */
+  .searchLayer {
+    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/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/registers/moh-240/moh-240-register.scss

@@ -0,0 +1,41 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* Page furniture for the standalone Laboratory (LAB) Register MOH 240. The
+   printed sheet itself -- masthead, the A-AA table and the page summary -- is
+   the drill-down register's own (reports/moh-240), reused so the register is
+   identical wherever it opens from. What is styled here is only what the
+   standalone page adds around it: the export toolbar, the pager and the
+   empty state. */
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+}
+
+.total {
+  margin-right: auto;
+  font-size: 0.8125rem;
+  color: $text-02;
+}
+
+.pager {
+  margin-top: layout.$spacing-04;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: layout.$spacing-03;
+  margin-top: layout.$spacing-06;
+  padding: layout.$spacing-08 layout.$spacing-05;
+  text-align: center;
+}
+
+.emptyIcon {
+  fill: $text-03;
+}

package/src/registers/moh-240/moh-240.component.test.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+
+import Moh240LabRegister from './moh-240.component';
+import { MOH_240_HEADERS, MOH_240_SUB_HEADERS } from '../../reports/moh-240/moh-240.columns';
+import { downloadCsv } from '../../common/report-register';
+import { getMoh706PatientList } from '../../resources/moh-706.resource';
+
+jest.mock('../../common/report-register', () => ({
+  ...jest.requireActual('../../common/report-register'),
+  downloadCsv: jest.fn(),
+}));
+
+jest.mock('../../resources/moh-706.resource', () => ({
+  getMoh706PatientList: jest.fn(),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useSession: () => ({ sessionLocation: { uuid: 'loc-uuid', display: 'Test Facility' } }),
+  openmrsFetch: jest.fn().mockResolvedValue({ ok: false }),
+  showSnackbar: jest.fn(),
+}));
+
+/* The filter bar is Carbon-heavy and its period picking is not what this page
+   is about, so it is stood in by a button that generates a fixed period. The
+   restore-from-URL hook stays real, as it is part of the page's behaviour. */
+jest.mock('../../common/report-filters', () => {
+  const actual = jest.requireActual('../../common/report-filters');
+  return {
+    ...actual,
+    ReportFiltersComponent: ({
+      onGenerate,
+    }: {
+      onGenerate: (period: { startDate: string; endDate: string; label?: string }) => void;
+    }) => (
+      <button onClick={() => onGenerate({ startDate: '2026-10-01', endDate: '2026-10-02', label: 'period' })}>
+        generate
+      </button>
+    ),
+  };
+});
+
+/** A row carrying every register field, so a missing column shows as a blank cell */
+const aRow = (overrides: Record<string, unknown> = {}) => {
+  const row: Record<string, any> = {};
+  MOH_240_HEADERS.forEach(({ key }, index) => {
+    row[key] = `${key}-${index}`;
+  });
+  return { ...row, ...overrides };
+};
+
+const renderRegister = () =>
+  render(
+    <MemoryRouter>
+      <Moh240LabRegister />
+    </MemoryRouter>,
+  );
+
+/** The register table itself: the page also holds the masthead and page
+    summary tables, so the queries are scoped to it rather than to the page */
+const registerTable = (container: HTMLElement) => {
+  const table = container.querySelector('table.table');
+  expect(table).not.toBeNull();
+  return table as HTMLTableElement;
+};
+
+const page = (results: Array<Record<string, unknown>>, total = results.length) => ({
+  results,
+  total,
+  isTotalExact: true,
+});
+
+describe('Moh240LabRegister', () => {
+  beforeEach(() => {
+    jest.mocked(downloadCsv).mockClear();
+    jest.mocked(getMoh706PatientList).mockReset();
+  });
+
+  it('asks for the register to be generated before showing anything', () => {
+    renderRegister();
+
+    expect(screen.getByText('No report generated yet')).toBeInTheDocument();
+    expect(getMoh706PatientList).not.toHaveBeenCalled();
+  });
+
+  it('renders the printed register under its own columns (A-AA) once generated', async () => {
+    jest
+      .mocked(getMoh706PatientList)
+      .mockResolvedValue(page([aRow({ date: '01/10/2026', full_name: 'Jane Akinyi' }), aRow()]));
+
+    const { container } = renderRegister();
+    await userEvent.click(screen.getByRole('button', { name: 'generate' }));
+
+    await waitFor(() => expect(screen.getByText('2 records')).toBeInTheDocument());
+
+    /* the whole register asked for, not a drill-down's indicator subset */
+    expect(getMoh706PatientList).toHaveBeenCalledWith(
+      expect.objectContaining({ locationUuids: 'loc-uuid', startDate: '2026-10-01', endDate: '2026-10-02' }),
+    );
+
+    const table = within(registerTable(container));
+    const headerRows = within(table.getAllByRole('rowgroup')[0]).getAllByRole('row');
+    expect(
+      headerRows.map((row) =>
+        within(row)
+          .getAllByRole('columnheader')
+          .map((cell) => cell.textContent),
+      ),
+    ).toEqual([MOH_240_HEADERS.map(({ header }) => header), [...MOH_240_SUB_HEADERS]]);
+
+    const firstRow = within(table.getAllByRole('rowgroup')[1]).getAllByRole('row')[0];
+    const cells = within(firstRow)
+      .getAllByRole('cell')
+      .map((cell) => cell.textContent);
+    expect(cells[0]).toBe('01/10/2026');
+    expect(cells[4]).toBe('Jane Akinyi');
+  });
+
+  it('exports every page as the form\u2019s columns with the letter row beneath', async () => {
+    jest
+      .mocked(getMoh706PatientList)
+      .mockImplementation(({ startIndex }: any) =>
+        Promise.resolve(page([aRow({ lab_no: '001234' })], startIndex === 0 ? 2 : 2)),
+      );
+
+    renderRegister();
+    await userEvent.click(screen.getByRole('button', { name: 'generate' }));
+    await waitFor(() => expect(screen.getByRole('button', { name: /Export CSV/ })).toBeInTheDocument());
+
+    await userEvent.click(screen.getByRole('button', { name: /Export CSV/ }));
+
+    await waitFor(() => expect(jest.mocked(downloadCsv)).toHaveBeenCalledTimes(1));
+    const [csv, filename] = jest.mocked(downloadCsv).mock.calls[0];
+    const lines = (csv as string).split('\r\n');
+    expect(lines[0]).toBe(MOH_240_HEADERS.map(({ header }) => header).join(','));
+    expect(lines[1]).toBe(MOH_240_SUB_HEADERS.join(','));
+    /* identifier columns survive Excel as text */
+    expect(lines[2]).toContain('="001234"');
+    expect(filename).toBe('laboratory-lab-register-moh-240-2026-10-01-2026-10-02.csv');
+  });
+
+  it('pagers past the first page when the period holds more rows than one page', async () => {
+    jest.mocked(getMoh706PatientList).mockResolvedValue(
+      page(
+        Array.from({ length: 50 }, () => aRow()),
+        120,
+      ),
+    );
+
+    renderRegister();
+    await userEvent.click(screen.getByRole('button', { name: 'generate' }));
+
+    await waitFor(() => expect(screen.getByText(/120 items/)).toBeInTheDocument());
+  });
+
+  it('falls back to the placeholder when the register cannot be fetched', async () => {
+    jest.mocked(getMoh706PatientList).mockRejectedValue(new Error('etl down'));
+
+    renderRegister();
+    await userEvent.click(screen.getByRole('button', { name: 'generate' }));
+
+    await waitFor(() => expect(screen.getByText('No report generated yet')).toBeInTheDocument());
+  });
+});