@ampath/esm-reports-app 1.0.0-next.41 → 1.0.0-next.45

package/src/config-schema.ts

@@ -3,10 +3,18 @@ export const configSchema = {
   etlBaseUrl: {
     _type: Type.String,
     _default: '',
-    _description: 'ETL endpoint',
+    _description: 'Base URL of the ETL service every report reads from, e.g. "/etl"',
+  },
+  /* Declared because the deployment sets it in this section. Nothing reads it
+     yet; without it the config validator reports it as an unknown key. */
+  subDomainUrl: {
+    _type: Type.String,
+    _default: '',
+    _description: 'Origin this instance is served from',
   },
 };
 
 export type Config = {
   etlBaseUrl: string;
+  subDomainUrl: string;
 };

package/src/dashboard/report-catalog.ts

@@ -0,0 +1,173 @@
+import {
+  Activity,
+  ChartColumn,
+  Document,
+  DocumentTasks,
+  GenderFemale,
+  Growth,
+  HealthCross,
+  Microscope,
+  UserMultiple,
+  Warning,
+  type CarbonIconType,
+} from '@carbon/react/icons';
+
+export type ReportTone = 'violet' | 'magenta' | 'teal' | 'blue';
+
+export interface ReportDefinition {
+  /** The MOH form number, e.g. `MOH 731` */
+  code: string;
+  /** Human readable name of the form */
+  name: string;
+  description: string;
+  /** Route registered in root.component.tsx */
+  path: string;
+  icon: CarbonIconType;
+  /** Extra terms matched by the search field */
+  keywords: string[];
+}
+
+export interface ReportCategory {
+  id: string;
+  title: string;
+  description: string;
+  tone: ReportTone;
+  reports: ReportDefinition[];
+}
+
+export const reportCategories: ReportCategory[] = [
+  {
+    id: 'hiv-and-chronic-care',
+    title: 'HIV & chronic care',
+    description: 'Comprehensive care programme summaries',
+    tone: 'violet',
+    reports: [
+      {
+        code: 'MOH 731',
+        name: 'Comprehensive HIV/AIDS',
+        description: 'NASCOP monthly summary for HIV testing, EMTCT, care and treatment.',
+        path: '/moh-731',
+        icon: HealthCross,
+        keywords: ['hiv', 'nascop', 'art', 'prep', 'emtct', 'pmtct', 'tb'],
+      },
+      {
+        code: 'MOH 740',
+        name: 'Diabetes & hypertension',
+        description: 'Monthly summary for the NCD comprehensive care clinic.',
+        path: '/moh-740',
+        icon: Activity,
+        keywords: ['ncd', 'diabetes', 'hypertension', 'chronic'],
+      },
+    ],
+  },
+  {
+    id: 'reproductive-and-child-health',
+    title: 'Reproductive & child health',
+    description: 'RMNCAH service delivery summaries',
+    tone: 'magenta',
+    reports: [
+      {
+        code: 'MOH 710',
+        name: 'Immunization',
+        description: 'Child immunization and vitamin A supplementation summary.',
+        path: '/moh-710',
+        icon: Growth,
+        keywords: ['immunization', 'vaccine', 'child', 'khis', 'bcg', 'polio'],
+      },
+      {
+        code: 'MOH 711',
+        name: 'Integrated programme summary',
+        description: 'Reproductive and child health, medical and rehabilitation services.',
+        path: '/moh-711',
+        icon: UserMultiple,
+        keywords: ['rmncah', 'anc', 'pnc', 'maternity', 'family planning', 'gbv', 'physiotherapy'],
+      },
+      {
+        code: 'MOH 745',
+        name: 'Cancer screening',
+        description: 'Monthly cervical and breast cancer screening summary.',
+        path: '/moh-745',
+        icon: GenderFemale,
+        keywords: ['cancer', 'cervical', 'screening', 'via', 'hpv'],
+      },
+    ],
+  },
+  {
+    id: 'outpatient-and-workload',
+    title: 'Outpatient & workload',
+    description: 'Morbidity and facility workload returns',
+    tone: 'teal',
+    reports: [
+      {
+        code: 'MOH 705A',
+        name: 'Outpatient morbidity, under 5',
+        description: 'Summary of diagnoses for children under five years.',
+        path: '/moh-705a',
+        icon: DocumentTasks,
+        keywords: ['morbidity', 'outpatient', 'under five', 'children', 'khis'],
+      },
+      {
+        code: 'MOH 705B',
+        name: 'Outpatient morbidity, over 5',
+        description: 'Summary of diagnoses for clients aged five years and above.',
+        path: '/moh-705b',
+        icon: Document,
+        keywords: ['morbidity', 'outpatient', 'above five', 'adults', 'khis'],
+      },
+      {
+        code: 'MOH 717',
+        name: 'Service workload',
+        description: 'Monthly service workload across facility departments.',
+        path: '/moh-717',
+        icon: ChartColumn,
+        keywords: ['workload', 'inpatient', 'pharmacy', 'mortuary', 'theatre', 'maternity'],
+      },
+    ],
+  },
+  {
+    id: 'diagnostics-and-surveillance',
+    title: 'Diagnostics & surveillance',
+    description: 'Laboratory and disease surveillance returns',
+    tone: 'blue',
+    reports: [
+      {
+        code: 'MOH 706',
+        name: 'Laboratory services',
+        description: 'Monthly summary of laboratory investigations and results.',
+        path: '/moh-706',
+        icon: Microscope,
+        keywords: ['laboratory', 'lab', 'urine', 'parasitology', 'blood chemistry'],
+      },
+      {
+        code: 'MOH 505',
+        name: 'IDSR epidemic monitoring',
+        description: 'Weekly monitoring form for priority notifiable diseases.',
+        path: '/moh-505',
+        icon: Warning,
+        keywords: ['idsr', 'surveillance', 'epidemic', 'notifiable', 'outbreak'],
+      },
+    ],
+  },
+];
+
+export const totalReportCount = reportCategories.reduce((count, category) => count + category.reports.length, 0);
+
+export function filterCategories(categories: ReportCategory[], searchTerm: string): ReportCategory[] {
+  const term = searchTerm.trim().toLowerCase();
+
+  if (!term) {
+    return categories;
+  }
+
+  return categories
+    .map((category) => ({
+      ...category,
+      reports: category.reports.filter((report) =>
+        [report.code, report.name, report.description, category.title, ...report.keywords]
+          .join(' ')
+          .toLowerCase()
+          .includes(term),
+      ),
+    }))
+    .filter((category) => category.reports.length > 0);
+}

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);