@digihmis/esm-procedures-app 1.0.1

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@digihmis/esm-procedures-app",
+  "version": "1.0.1",
+  "description": "Procedures microfrontend for the OpenMRS SPA",
+  "browser": "dist/digihmis-esm-procedures-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/its-kios09/DigiHMIS-apps#readme",
+  "scripts": {
+    "analyze": "rspack --mode=production --env analyze=true",
+    "build": "rspack --mode=production",
+    "coverage": "yarn test --coverage",
+    "debug": "npm run serve",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "lint": "eslint src --ext ts,tsx",
+    "serve": "rspack serve --mode=development",
+    "start": "openmrs develop",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "typescript": "tsc"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/its-kios09/DigiHMIS-apps.git#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/its-kios09/DigiHMIS-apps/issues"
+  },
+  "dependencies": {
+    "@digihmis/esm-commons-lib": "1.0.0",
+    "lodash-es": "^4.17.15"
+  },
+  "peerDependencies": {
+    "@carbon/react": "1.x",
+    "@openmrs/esm-framework": "8.x",
+    "react": "^18.1.0",
+    "react-i18next": "16.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  }
+}

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('../../tools/rs-pack-code-spliting');

package/src/config-schema.ts

@@ -0,0 +1,31 @@
+import { Type, validators, type ConfigSchema } from '@openmrs/esm-framework';
+
+export const configSchema: ConfigSchema = {
+  proceduresIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/procedure.svg',
+      _description:
+        'The path or URL to the logo image. If set to an empty string, the default OpenMRS SVG sprite will be used.',
+      _validators: [validators.isUrl],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Procedures',
+      _description: 'The alternative text for the logo image.',
+    },
+  },
+  proceduresQueueUuid: {
+    _type: Type.UUID,
+    _description: 'The UUID of the procedures queue, used to scope the provider clock-in session and metrics.',
+    _default: '7c9e1d2f-8b6a-4c3e-9f1b-0d2e3f4a5b6c',
+  },
+};
+
+export type ConfigObject = {
+  proceduresIcon: {
+    src: string;
+    alt?: string;
+  };
+  proceduresQueueUuid: string;
+};

package/src/dashboard.meta.ts

@@ -0,0 +1,8 @@
+import { ImageMedical } from '@carbon/react/icons';
+
+export const dashboardMeta = {
+  name: 'procedures',
+  slot: 'procedures-dashboard-slot',
+  title: 'Procedures worklist',
+  icon: ImageMedical,
+};

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/index.ts

@@ -0,0 +1,27 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createDashboardLink } from '@digihmis/esm-commons-lib';
+import { dashboardMeta } from './dashboard.meta';
+import ImagingWorklist from './procedures-worklist/procedures-worklist.component';
+
+const moduleName = '@digihmis/esm-procedures-app';
+
+const options = {
+  featureName: 'procedures',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+// The dashboard link shown in the home left-nav (procedures-dashboard-slot).
+export const leftPanelLink = getSyncLifecycle(createDashboardLink(dashboardMeta), options);
+
+// The worklist content rendered on /home/radiology (procedures-homepage-dashboard-slot).
+export const proceduresWorklistDashboard = getSyncLifecycle(ImagingWorklist, options);
+
+// Enter-report / verify / view side panel launched from the worklist tabs.
+export const procedureReportWorkspace = getAsyncLifecycle(() => import('./report-workspace/report.workspace'), options);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/page-header/page-header.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
+import { PageHeader as CommonPageHeader } from '@digihmis/esm-commons-lib';
+import { ConfigObject } from '../config-schema';
+
+// The shared header lives in @digihmis/esm-commons-lib; this passes the module's title + icon.
+export const PageHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const { proceduresIcon } = useConfig<ConfigObject>();
+  return <CommonPageHeader title={t('procedures', 'Procedures')} iconSrc={proceduresIcon.src} iconAlt={proceduresIcon.alt} />;
+};

package/src/procedures-tab/procedures-orders-table/procedures-orders-table.component.tsx

@@ -0,0 +1,229 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  Tile,
+} from '@carbon/react';
+import { formatDatetime, parseDate } from '@openmrs/esm-framework';
+import { type ImagingStatus, type WorklistEntry } from '../../procedures.resource';
+import styles from './procedures-orders-table.scss';
+
+interface ImagingOrdersTableProps {
+  entries: Array<WorklistEntry>;
+  isLoading?: boolean;
+  responsiveSize?: 'lg' | 'sm';
+  dateField?: 'dateActivated' | 'scheduledDate';
+  dateHeader?: string;
+  emptyLabel?: string;
+  /** Row action cell for a single study, shown per study in the expanded panel. */
+  renderActions?: (entry: WorklistEntry) => React.ReactNode;
+}
+
+interface PatientGroup {
+  id: string;
+  patient: string;
+  orderer: string;
+  date?: string;
+  studies: Array<WorklistEntry>;
+}
+
+const PAGE_SIZES = [10, 20, 30, 50];
+
+/** A study's workflow status → the tag that reads it at a glance. */
+function statusTag(status: ImagingStatus | undefined, t: (k: string, f: string) => string) {
+  switch (status) {
+    case 'scheduled':
+      return <Tag type="teal">{t('scheduled', 'Scheduled')}</Tag>;
+    case 'in_progress':
+      return <Tag type="blue">{t('inProgress', 'In progress')}</Tag>;
+    case 'reported':
+      return <Tag type="purple">{t('reported', 'Reported')}</Tag>;
+    case 'verified':
+      return <Tag type="green">{t('verified', 'Verified')}</Tag>;
+    case 'declined':
+      return <Tag type="red">{t('cancelled', 'Cancelled')}</Tag>;
+    default:
+      return <Tag type="gray">{t('ordered', 'Ordered')}</Tag>;
+  }
+}
+
+/** The reusable radiology worklist table: studies grouped by patient into paginated, expandable rows. */
+const ImagingOrdersTable: React.FC<ImagingOrdersTableProps> = ({
+  entries,
+  isLoading,
+  responsiveSize = 'sm',
+  dateField = 'dateActivated',
+  dateHeader,
+  emptyLabel,
+  renderActions,
+}) => {
+  const { t } = useTranslation();
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const groups = useMemo<Array<PatientGroup>>(() => {
+    const map = new Map<string, PatientGroup>();
+    for (const entry of entries) {
+      const key = entry.visit?.uuid ?? entry.patient?.uuid ?? entry.order.uuid;
+      let group = map.get(key);
+      if (!group) {
+        group = {
+          id: key,
+          patient: entry.patient?.display ?? '—',
+          orderer: entry.orderer?.display ?? '—',
+          date: entry[dateField],
+          studies: [],
+        };
+        map.set(key, group);
+      }
+      group.studies.push(entry);
+      const d = entry[dateField];
+      if (d && (!group.date || d < group.date)) {
+        group.date = d;
+      }
+    }
+    return Array.from(map.values());
+  }, [entries, dateField]);
+
+  const pageCount = Math.max(1, Math.ceil(groups.length / pageSize));
+  useEffect(() => {
+    setPage((current) => Math.min(current, pageCount));
+  }, [pageCount]);
+
+  const paginated = useMemo(() => groups.slice((page - 1) * pageSize, page * pageSize), [groups, page, pageSize]);
+  const byId = useMemo(() => new Map(groups.map((g) => [g.id, g])), [groups]);
+
+  const headers = [
+    { key: 'patient', header: t('patient', 'Patient') },
+    { key: 'studies', header: t('studies', 'Studies') },
+    { key: 'orderer', header: t('orderedBy', 'Ordered by') },
+    { key: 'date', header: dateHeader ?? t('date', 'Date') },
+  ];
+
+  const rows = paginated.map((g) => ({
+    id: g.id,
+    patient: g.patient,
+    studies: g.studies.length,
+    orderer: g.orderer,
+    date: g.date ? formatDatetime(parseDate(g.date), { mode: 'standard' }) : '—',
+  }));
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" compact={responsiveSize === 'sm'} zebra={false} />;
+  }
+
+  if (entries.length === 0) {
+    return (
+      <Layer>
+        <Tile className={styles.emptyTile}>{emptyLabel ?? t('noStudiesHere', 'No studies in this list.')}</Tile>
+      </Layer>
+    );
+  }
+
+  return (
+    <Layer className={styles.tableContainer}>
+      <DataTable rows={rows} headers={headers} size={responsiveSize}>
+        {({ rows, headers, getHeaderProps, getRowProps, getExpandedRowProps, getTableProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()} aria-label={t('proceduresWorklist', 'Procedures worklist')}>
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader aria-label={t('expandRow', 'Expand row')} />
+                  {headers.map((header) => {
+                    const { key, ...headerProps } = getHeaderProps({ header });
+                    return (
+                      <TableHeader key={header.key} {...headerProps}>
+                        {header.header}
+                      </TableHeader>
+                    );
+                  })}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => {
+                  const { key, ...rowProps } = getRowProps({ row });
+                  const group = byId.get(row.id);
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableExpandRow {...rowProps}>
+                        {row.cells.map((cell) =>
+                          cell.info.header === 'studies' ? (
+                            <TableCell key={cell.id}>
+                              <Tag type="cool-gray">{t('studyCount', '{{count}} study(ies)', { count: cell.value })}</Tag>
+                            </TableCell>
+                          ) : (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ),
+                        )}
+                      </TableExpandRow>
+                      <TableExpandedRow
+                        className={styles.expandedRow}
+                        colSpan={headers.length + 1}
+                        {...getExpandedRowProps({ row })}>
+                        {group && (
+                          <ul className={styles.studyList}>
+                            {group.studies.map((entry) => (
+                              <li className={styles.studyRow} key={entry.order.uuid}>
+                                <div className={styles.studyInfo}>
+                                  <span className={styles.studyName}>{entry.concept?.display ?? entry.order.display}</span>
+                                  {entry.urgency === 'STAT' && <Tag type="magenta">{t('stat', 'STAT')}</Tag>}
+                                  {statusTag(entry.status, t)}
+                                  {entry.procedure?.modality && (
+                                    <span className={styles.meta}>{entry.procedure.modality.display}</span>
+                                  )}
+                                  {entry.status === 'reported' && entry.procedure?.reportedBy && (
+                                    <span className={styles.meta}>
+                                      {t('reportedByLabel', 'Reported by {{who}}', { who: entry.procedure.reportedBy })}
+                                    </span>
+                                  )}
+                                  {entry.status === 'verified' && entry.procedure?.approvedBy && (
+                                    <span className={styles.meta}>
+                                      {t('verifiedByLabel', 'Verified by {{who}}', { who: entry.procedure.approvedBy })}
+                                    </span>
+                                  )}
+                                </div>
+                                {renderActions && <div className={styles.studyActions}>{renderActions(entry)}</div>}
+                              </li>
+                            ))}
+                          </ul>
+                        )}
+                      </TableExpandedRow>
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+
+      <Pagination
+        page={page}
+        pageSize={pageSize}
+        pageSizes={PAGE_SIZES}
+        totalItems={groups.length}
+        size={responsiveSize}
+        onChange={({ page: p, pageSize: ps }) => {
+          setPage(ps === pageSize ? p : 1);
+          setPageSize(ps);
+        }}
+      />
+    </Layer>
+  );
+};
+
+export default ImagingOrdersTable;

package/src/procedures-tab/procedures-orders-table/procedures-orders-table.scss

@@ -0,0 +1,78 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.tableContainer {
+  background-color: colors.$white;
+}
+
+.emptyTile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: layout.$spacing-07;
+  color: colors.$gray-70;
+  background: colors.$gray-10;
+}
+
+.expandedRow {
+  td {
+    padding: 0;
+  }
+}
+
+.studyList {
+  list-style: none;
+  margin: 0;
+  padding: layout.$spacing-05;
+  background: colors.$white;
+  box-shadow:
+    inset 0 1px 0 colors.$gray-20,
+    inset 0 -1px 0 colors.$gray-20;
+}
+
+.studyRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-03 0;
+  border-bottom: 1px solid colors.$gray-20;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.studyInfo {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  flex-wrap: wrap;
+}
+
+.studyName {
+  @include type.type-style('body-compact-01');
+  font-weight: 600;
+  color: colors.$gray-100;
+}
+
+.meta {
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+}
+
+.studyActions {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+  flex-shrink: 0;
+}
+
+@media (max-width: 42rem) {
+  .studyRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: layout.$spacing-02;
+  }
+}

package/src/procedures-tab/procedures-tab.component.tsx

@@ -0,0 +1,183 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { Calendar, CheckmarkOutline, DocumentAdd, InProgress, Printer, View, ImageMedical } from '@carbon/react/icons';
+import { launchWorkspace, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import {
+  bucketByStatus,
+  cancelStudy,
+  openImagingReport,
+  scheduleStudy,
+  startStudy,
+  useImagingWorklist,
+  type WorklistEntry,
+} from '../procedures.resource';
+import ImagingOrdersTable from './procedures-orders-table/procedures-orders-table.component';
+import styles from './procedures-tab.scss';
+
+/** The radiology queue: procedure orders bucketed by workflow stage, one tab each. */
+const ImagingWorklistQueue: React.FC = () => {
+  const { t } = useTranslation();
+  const { entries, isLoading, mutate } = useImagingWorklist();
+  const responsiveSize = useLayoutType() === 'tablet' ? 'lg' : 'sm';
+  const buckets = useMemo(() => bucketByStatus(entries), [entries]);
+
+  const notify = (promise: Promise<unknown>, title: string) =>
+    promise.then(
+      () => {
+        showSnackbar({ kind: 'success', isLowContrast: true, title });
+        mutate();
+      },
+      (err: { responseBody?: { error?: { message?: string } }; message?: string }) =>
+        showSnackbar({
+          kind: 'error',
+          title: t('actionFailed', 'Could not complete the action'),
+          subtitle: err?.responseBody?.error?.message ?? err?.message,
+        }),
+    );
+
+  const schedule = (entry: WorklistEntry) => notify(scheduleStudy(entry), t('studyScheduled', 'Study scheduled'));
+  const start = (entry: WorklistEntry) => notify(startStudy(entry), t('studyStarted', 'Study started'));
+  const cancel = (entry: WorklistEntry) => notify(cancelStudy(entry), t('studyCancelled', 'Study cancelled'));
+  const report = (entry: WorklistEntry) =>
+    launchWorkspace('procedure-report-workspace', {
+      workspaceTitle: entry.concept?.display ?? entry.order.display,
+      order: entry,
+      mode: 'report',
+      onSaved: mutate,
+    });
+  const verify = (entry: WorklistEntry) =>
+    launchWorkspace('procedure-report-workspace', {
+      workspaceTitle: entry.concept?.display ?? entry.order.display,
+      order: entry,
+      mode: 'verify',
+      onSaved: mutate,
+    });
+  const view = (entry: WorklistEntry) =>
+    launchWorkspace('procedure-report-workspace', {
+      workspaceTitle: entry.concept?.display ?? entry.order.display,
+      order: entry,
+      mode: 'view',
+    });
+  const print = (entry: WorklistEntry) => entry.procedure?.uuid && openImagingReport(entry.procedure.uuid);
+
+  return (
+    <div className={styles.tabsContainer}>
+      <Tabs>
+        <TabList contained aria-label={t('proceduresWorklist', 'Procedures worklist')}>
+          <Tab renderIcon={ImageMedical}>
+            {t('ordered', 'Ordered')} ({buckets.ordered.length})
+          </Tab>
+          <Tab renderIcon={Calendar}>
+            {t('scheduled', 'Scheduled')} ({buckets.scheduled.length})
+          </Tab>
+          <Tab renderIcon={InProgress}>
+            {t('inProgress', 'In progress')} ({buckets.in_progress.length})
+          </Tab>
+          <Tab renderIcon={DocumentAdd}>
+            {t('reported', 'Reported')} ({buckets.reported.length})
+          </Tab>
+          <Tab renderIcon={CheckmarkOutline}>
+            {t('verified', 'Verified')} ({buckets.verified.length})
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <ImagingOrdersTable
+              entries={buckets.ordered}
+              isLoading={isLoading}
+              responsiveSize={responsiveSize}
+              emptyLabel={t('noNewOrders', 'No new procedure orders.')}
+              renderActions={(entry) => (
+                <div className={styles.rowActions}>
+                  <Button kind="ghost" size={responsiveSize} renderIcon={Calendar} onClick={() => schedule(entry)}>
+                    {t('schedule', 'Schedule')}
+                  </Button>
+                  <Button kind="ghost" size={responsiveSize} renderIcon={InProgress} onClick={() => start(entry)}>
+                    {t('startNow', 'Start now')}
+                  </Button>
+                  <Button kind="danger--ghost" size={responsiveSize} onClick={() => cancel(entry)}>
+                    {t('cancel', 'Cancel')}
+                  </Button>
+                </div>
+              )}
+            />
+          </TabPanel>
+          <TabPanel>
+            <ImagingOrdersTable
+              entries={buckets.scheduled}
+              isLoading={isLoading}
+              responsiveSize={responsiveSize}
+              dateField="scheduledDate"
+              dateHeader={t('scheduledFor', 'Scheduled for')}
+              emptyLabel={t('noneScheduled', 'Nothing scheduled.')}
+              renderActions={(entry) => (
+                <div className={styles.rowActions}>
+                  <Button kind="ghost" size={responsiveSize} renderIcon={InProgress} onClick={() => start(entry)}>
+                    {t('startStudy', 'Start study')}
+                  </Button>
+                  <Button kind="danger--ghost" size={responsiveSize} onClick={() => cancel(entry)}>
+                    {t('cancel', 'Cancel')}
+                  </Button>
+                </div>
+              )}
+            />
+          </TabPanel>
+          <TabPanel>
+            <ImagingOrdersTable
+              entries={buckets.in_progress}
+              isLoading={isLoading}
+              responsiveSize={responsiveSize}
+              emptyLabel={t('noneInProgress', 'No studies in progress.')}
+              renderActions={(entry) => (
+                <div className={styles.rowActions}>
+                  <Button kind="ghost" size={responsiveSize} renderIcon={DocumentAdd} onClick={() => report(entry)}>
+                    {t('enterReport', 'Enter report')}
+                  </Button>
+                </div>
+              )}
+            />
+          </TabPanel>
+          <TabPanel>
+            <ImagingOrdersTable
+              entries={buckets.reported}
+              isLoading={isLoading}
+              responsiveSize={responsiveSize}
+              emptyLabel={t('noneReported', 'Nothing awaiting verification.')}
+              renderActions={(entry) => (
+                <div className={styles.rowActions}>
+                  <Button kind="ghost" size={responsiveSize} renderIcon={CheckmarkOutline} onClick={() => verify(entry)}>
+                    {t('reviewVerify', 'Review & verify')}
+                  </Button>
+                  <Button kind="ghost" size={responsiveSize} renderIcon={Printer} onClick={() => print(entry)}>
+                    {t('print', 'Print')}
+                  </Button>
+                </div>
+              )}
+            />
+          </TabPanel>
+          <TabPanel>
+            <ImagingOrdersTable
+              entries={buckets.verified}
+              isLoading={isLoading}
+              responsiveSize={responsiveSize}
+              emptyLabel={t('noneVerified', 'No verified reports yet.')}
+              renderActions={(entry) => (
+                <div className={styles.rowActions}>
+                  <Button kind="ghost" size={responsiveSize} renderIcon={View} onClick={() => view(entry)}>
+                    {t('viewReport', 'View report')}
+                  </Button>
+                  <Button kind="ghost" size={responsiveSize} renderIcon={Printer} onClick={() => print(entry)}>
+                    {t('print', 'Print')}
+                  </Button>
+                </div>
+              )}
+            />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default ImagingWorklistQueue;

package/src/procedures-tab/procedures-tab.scss

@@ -0,0 +1,19 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.tabsContainer {
+  padding: 0;
+  margin-top: layout.$spacing-03;
+
+  :global(.cds--tab-content) {
+    border: 1px solid colors.$gray-20;
+    border-top: 0;
+    padding: 0;
+  }
+}
+
+.rowActions {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+}