@ampath/esm-reports-app 1.0.0-next.7 → 1.0.0-next.71

package/src/dashboard/reports-dasboard.tsx

@@ -1,28 +1,199 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { ClickableTile } from '@carbon/react';
+import React, { useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Button, ClickableTile, Layer, Search, Tab, TabList, TabPanel, TabPanels, Tabs, Tag } from '@carbon/react';
+import { ArrowRight, DocumentMultiple_01, Report, type CarbonIconType } from '@carbon/react/icons';
+import { formatDate, useSession } from '@openmrs/esm-framework';
 
+import { registerCategories, totalRegisterCount } from '../registers/register-catalog';
+import {
+  filterCategories,
+  reportCategories,
+  totalReportCount,
+  type ReportCategory,
+  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();
+  /* each tab keeps its own search */
+  const [reportSearch, setReportSearch] = useState<string>('');
+  const [registerSearch, setRegisterSearch] = useState<string>('');
+
+  /* Reports first, Registers second; the open tab is kept in the URL */
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedTab = searchParams.get('tab') === 'registers' ? 1 : 0;
+  const selectTab = ({ selectedIndex }: { selectedIndex: number }) => {
+    const next = new URLSearchParams(searchParams);
+    if (selectedIndex === 1) {
+      next.set('tab', 'registers');
+    } else {
+      next.delete('tab');
+    }
+    setSearchParams(next, { replace: true });
+  };
+
+  const facilityName = session?.sessionLocation?.display;
+  const today = formatDate(new Date(), { mode: 'standard', time: false, noToday: true });
+
+  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>
+    );
+  };
+
+  const renderCategory = (category: ReportCategory) => (
+    <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>
+  );
+
+  /** A tab's list: search row, then its categories, or a message when nothing matches */
+  const renderCatalog = ({
+    id,
+    noun,
+    categories,
+    total,
+    term,
+    setTerm,
+    icon: Icon,
+    hint,
+  }: {
+    id: string;
+    noun: string;
+    categories: ReportCategory[];
+    total: number;
+    term: string;
+    setTerm: (term: string) => void;
+    icon: CarbonIconType;
+    hint: string;
+  }) => {
+    const visible = filterCategories(categories, term);
+    const matches = visible.reduce((count, category) => count + category.reports.length, 0);
+    const isSearching = term.trim().length > 0;
+    const label = `Search ${noun}`;
+    /* "1 register", "10 reports" */
+    const counted = (n: number) => (n === 1 ? noun.replace(/s$/, '') : noun);
+
+    return (
+      <>
+        <div className={styles.toolbar}>
+          <Layer className={styles.searchLayer}>
+            <Search
+              id={id}
+              labelText={label}
+              placeholder={label}
+              size="md"
+              value={term}
+              onChange={(event) => setTerm(event.target.value)}
+              onClear={() => setTerm('')}
+            />
+          </Layer>
+          <p className={styles.resultCount}>
+            {isSearching ? `${matches} of ${total} ${counted(total)}` : `${total} ${counted(total)} available`}
+          </p>
+        </div>
+
+        {visible.length > 0 ? (
+          visible.map(renderCategory)
+        ) : (
+          <Layer className={styles.emptyState}>
+            <Icon size={32} className={styles.emptyStateIcon} />
+            <h5>
+              No {noun} match &ldquo;{term}&rdquo;
+            </h5>
+            <p>{hint}</p>
+            <Button kind="ghost" size="sm" onClick={() => setTerm('')}>
+              Clear search
+            </Button>
+          </Layer>
+        )}
+      </>
+    );
+  };
+
   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}>
+      {/* The facility and date sit at the right end of the tab row */}
+      <div className={styles.tabsArea}>
+        <p className={styles.headerMeta}>{[facilityName, today].filter(Boolean).join(' · ')}</p>
+        <Tabs selectedIndex={selectedTab} onChange={selectTab}>
+          <TabList aria-label="Reports and registers" className={styles.tabList}>
+            <Tab>
+              <span className={styles.tabLabel}>
+                <Report size={16} />
+                Reports
+                <Tag size="sm" type="gray" className={styles.tabCount}>
+                  {totalReportCount}
+                </Tag>
+              </span>
+            </Tab>
+            <Tab>
+              <span className={styles.tabLabel}>
+                <DocumentMultiple_01 size={16} />
+                Registers
+                <Tag size="sm" type="gray" className={styles.tabCount}>
+                  {totalRegisterCount}
+                </Tag>
+              </span>
+            </Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel className={styles.tabPanel}>
+              {renderCatalog({
+                id: 'reports-search',
+                noun: 'reports',
+                categories: reportCategories,
+                total: totalReportCount,
+                term: reportSearch,
+                setTerm: setReportSearch,
+                icon: Report,
+                hint: 'Try a form number such as 731, or a service such as immunization.',
+              })}
+            </TabPanel>
+            <TabPanel className={styles.tabPanel}>
+              {/* Registers, from src/registers, listed and searched as the reports are */}
+              {renderCatalog({
+                id: 'registers-search',
+                noun: 'registers',
+                categories: registerCategories,
+                total: totalRegisterCount,
+                term: registerSearch,
+                setTerm: setRegisterSearch,
+                icon: DocumentMultiple_01,
+                hint: 'Try a register number such as 362, or a service such as HTS.',
+              })}
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
       </div>
-    </>
+    </div>
   );
 };
 

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;
+}