@ampath/esm-reports-app 1.0.0-next.40 → 1.0.0-next.42

package/src/dashboard/reports-dasboard.tsx

@@ -1,46 +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>
-        <ClickableTile onClick={() => navigate('/moh-505')} className={styles.tile}>
-          MOH-505 REPORT
-        </ClickableTile>
-        <ClickableTile onClick={() => navigate('/moh-705a')} className={styles.tile}>
-          MOH-705A REPORT
-        </ClickableTile>
-        <ClickableTile onClick={() => navigate('/moh-705b')} className={styles.tile}>
-          MOH-705B REPORT
-        </ClickableTile>
-        <ClickableTile onClick={() => navigate('/moh-745')} className={styles.tile}>
-          MOH-745 REPORT
-        </ClickableTile>
-        <ClickableTile onClick={() => navigate('/moh-740')} className={styles.tile}>
-          MOH-740 REPORT
-        </ClickableTile>
-        <ClickableTile onClick={() => navigate('/moh-731')} className={styles.tile}>
-          MOH-731 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

@@ -1,54 +1,56 @@
-import { DataTable, type DataTableHeader, type DataTableRow, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@carbon/react";
-import React from "react";
+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[];
+  rows: Omit<DataTableRow<any[]>, 'cells'>[];
+  headers: DataTableHeader[];
+  subHeaders?: string[];
+  /** Applied to the table, so a register can use its own stylesheet */
+  className?: string;
 }
 
-const DatatableWrapper: React.FC<DatatableWrapperProps> = ({ rows, headers, subHeaders = [] }) => {
-    return <DataTable rows={rows} headers={headers}>
-        {({
-            rows,
-            headers,
-            getTableProps,
-            getHeaderProps,
-            getRowProps,
-            getCellProps,
-        }) => (
-            <Table {...getTableProps()}>
-                <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) => (
-                                <TableCell {...getCellProps({ cell })}>{cell.value}</TableCell>
-                            ))}
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        )}
+const DatatableWrapper: React.FC<DatatableWrapperProps> = ({ rows, headers, subHeaders = [], 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) => (
+                  <TableCell {...getCellProps({ cell })}>{cell.value}</TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
     </DataTable>
-}
+  );
+};
 
-export default DatatableWrapper;
+export default DatatableWrapper;

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

@@ -1,61 +1,59 @@
-import React, { useMemo } from "react";
-import TableWrapper from "../table-wrapper/table-wrapper.component";
-import TableRowMapper from "../table-wrapper/table-row-mapper.component";
-import { getCell } from "../../utils/utils";
+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 styles from './moh-240.scss';
 
-const MOH240Header: React.FC = () => {
-    const tableRows = useMemo(() => {
-        return [
-            {
-                tableCells: [
-                    getCell("", "County:", 1, 1, true),
-                    getCell("", "", 3),
-                ],
-            },
-            {
-                tableCells: [
-                    getCell("", "Sub-County:", 1, 1, true),
-                    getCell("", "", 3),
-                ],
-            },
-            {
-                tableCells: [
-                    getCell("", "Health Facility:", 1, 1, true),
-                    getCell("", "", 3),
-                ],
-            },
-            {
-                tableCells: [
-                    getCell("", "KMHFL Code:", 1, 1, true),
-                    getCell("", "", 3),
-                ],
-            },
-            {
-                tableCells: [
-                    getCell("", "Type:", 1, 1, true),
-                    getCell("", ""),
-                    getCell("", "Man. Agency:", 1, 1, true),
-                    getCell("", ""),
-                ],
-            },
-            {
-                tableCells: [
-                    getCell("", "Start date:", 1, 1, true),
-                    getCell("", ""),
-                    getCell("", "End date:", 1, 1, true),
-                    getCell("", ""),
-                ],
-            },
-        ];
-    }, []);
+interface MOH240HeaderProps {
+  facility?: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+const asDate = (value?: string) => (value ? dayjs(value).format('DD/MM/YYYY') : '');
 
-    return <div className={styles.headerSection}>
-        <h3>Laboratory (LAB) Register MOH 240</h3>
-        <TableWrapper>
-            <TableRowMapper tableRows={tableRows} />
-        </TableWrapper>
+const MOH240Header: React.FC<MOH240HeaderProps> = ({ facility = '', startDate, endDate }) => {
+  const tableRows = useMemo(() => {
+    return [
+      {
+        tableCells: [getCell('', 'County:', 1, 1, true), getCell('', '', 3)],
+      },
+      {
+        tableCells: [getCell('', 'Sub-County:', 1, 1, true), getCell('', '', 3)],
+      },
+      {
+        tableCells: [getCell('', 'Health Facility:', 1, 1, true), getCell('', facility, 3)],
+      },
+      {
+        tableCells: [getCell('', 'KMHFL Code:', 1, 1, true), getCell('', '', 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)),
+        ],
+      },
+    ];
+  }, [facility, startDate, endDate]);
+
+  return (
+    <div className={styles.headerSection}>
+      <TableWrapper className={styles.formTable}>
+        <TableRowMapper tableRows={tableRows} />
+      </TableWrapper>
     </div>
-}
+  );
+};
 
-export default MOH240Header;
+export default MOH240Header;