@ampath/esm-laboratory-app 1.3.0-next.2

package/src/lab-tiles/pending-review-lab-results-tile.component.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLabOrders } from '../laboratory.resource';
+import LabSummaryTile from '../components/summary-tile/lab-summary-tile.component';
+
+const PendingReviewLabRequestsTile = () => {
+  const { t } = useTranslation();
+  const { labOrders } = useLabOrders({
+    status: 'DRAFT',
+    excludeCanceled: false,
+  });
+
+  return (
+    <LabSummaryTile
+      label={t('pendingReview', 'Pending Review')}
+      value={labOrders?.length}
+      headerLabel={t('awaitingApproval', 'Awaiting Approval')}
+    />
+  );
+};
+
+export default PendingReviewLabRequestsTile;

package/src/laboratory-dashboard.component.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { LaboratoryPictogram, PageHeader, useDefineAppContext } from '@openmrs/esm-framework';
+import { type DateFilterContext } from './types';
+import LaboratoryOrdersTabs from './lab-tabs/laboratory-tabs.component';
+import LaboratorySummaryTiles from './lab-tiles/laboratory-summary-tiles.component';
+import styles from './laboratory-dashboard.scss';
+
+const LaboratoryDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const [dateRange, setDateRange] = useState<[Date, Date]>([dayjs().startOf('day').toDate(), new Date()]);
+  useDefineAppContext<DateFilterContext>('laboratory-date-filter', { dateRange, setDateRange });
+
+  return (
+    <div>
+      <PageHeader
+        illustration={<LaboratoryPictogram />}
+        title={t('laboratory', 'Laboratory')}
+        className={styles.pageHeader}
+      />
+      <div>
+        <LaboratorySummaryTiles />
+        <LaboratoryOrdersTabs />
+      </div>
+    </div>
+  );
+};
+
+export default LaboratoryDashboard;

package/src/laboratory-dashboard.scss

@@ -0,0 +1,5 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.pageHeader {
+  border-bottom: 1px solid $ui-03;
+}

package/src/laboratory.resource.ts

@@ -0,0 +1,108 @@
+import { useCallback } from 'react';
+import dayjs from 'dayjs';
+import useSWR, { mutate } from 'swr';
+import { openmrsFetch, type Order, restBaseUrl, useAppContext, useConfig } from '@openmrs/esm-framework';
+import type { DateFilterContext, FulfillerStatus } from './types';
+import { type Config } from './config-schema';
+
+const useLabOrdersDefaultParams: UseLabOrdersParams = {
+  status: null,
+  newOrdersOnly: false,
+  excludeCanceled: true,
+  includePatientId: false,
+};
+
+interface UseLabOrdersParams {
+  status: FulfillerStatus;
+  newOrdersOnly: boolean;
+  excludeCanceled: boolean;
+  includePatientId: boolean;
+}
+
+/**
+ * Custom hook for retrieving laboratory orders.
+ *
+ * @param status - The fulfiller status to filter by (e.g. 'IN_PROGRESS', 'COMPLETED')
+ * @param newOrdersOnly - Whether to return only new orders that haven't been picked (action=NEW, fulfillerStatus=null). Filtered client-side as the REST API doesn't support this query natively.
+ * @param excludeCanceled - Whether to exclude canceled, discontinued and expired orders
+ * @param includePatientId - Whether to include patient identifiers in the response
+ */
+export function useLabOrders(params: Partial<UseLabOrdersParams> = useLabOrdersDefaultParams) {
+  const definedParams = Object.fromEntries(Object.entries(params).filter(([, v]) => v !== undefined));
+  const { status, newOrdersOnly, excludeCanceled, includePatientId } = {
+    ...useLabOrdersDefaultParams,
+    ...definedParams,
+  };
+  const { dateRange } = useAppContext<DateFilterContext>('laboratory-date-filter') ?? {
+    dateRange: [dayjs().startOf('day').toDate(), new Date()],
+  };
+
+  const { laboratoryOrderTypeUuid } = useConfig();
+  const customRepresentation = `custom:(uuid,orderNumber,patient:(uuid,display,person:(uuid,display,age,birthdate,gender)${
+    includePatientId ? ',identifiers' : ''
+  }),concept:(uuid,display),action,careSetting:(uuid,display,description,careSettingType,display),previousOrder,dateActivated,scheduledDate,dateStopped,autoExpireDate,encounter:(uuid,display),orderer:(uuid,display),orderReason,orderReasonNonCoded,orderType:(uuid,display,name,description,conceptClasses,parent),urgency,instructions,commentToFulfiller,display,fulfillerStatus,fulfillerComment,accessionNumber,specimenSource,laterality,clinicalHistory,frequency,numberOfRepeats)`;
+  let url = `${restBaseUrl}/order?orderTypes=${laboratoryOrderTypeUuid}&v=${customRepresentation}`;
+  url = status ? url + `&fulfillerStatus=${status}` : url;
+  url = excludeCanceled ? `${url}&excludeCanceledAndExpired=true&excludeDiscontinueOrders=true` : url;
+  url = dateRange
+    ? `${url}&activatedOnOrAfterDate=${dateRange.at(0).toISOString()}&activatedOnOrBeforeDate=${dateRange
+        .at(1)
+        .toISOString()}`
+    : url;
+
+  const { data, error, mutate, isLoading, isValidating } = useSWR<{
+    data: { results: Array<Order> };
+  }>(`${url}`, openmrsFetch);
+
+  const filteredOrders = data?.data?.results?.filter(
+    (order) => !newOrdersOnly || (order?.action === 'NEW' && order?.fulfillerStatus === null),
+  );
+  return {
+    labOrders: filteredOrders ?? [],
+    isLoading,
+    isError: error,
+    mutate,
+    isValidating,
+  };
+}
+
+export function setFulfillerStatus(orderId: string, status: FulfillerStatus, abortController: AbortController) {
+  return openmrsFetch(`${restBaseUrl}/order/${orderId}/fulfillerdetails/`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: { fulfillerStatus: status },
+  });
+}
+
+export function rejectLabOrder(orderId: string, comment: string, abortController: AbortController) {
+  return openmrsFetch(`${restBaseUrl}/order/${orderId}/fulfillerdetails/`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      fulfillerStatus: 'DECLINED',
+      fulfillerComment: comment,
+    },
+  });
+}
+
+/**
+ * Custom hook that returns a function to invalidate and refetch all lab orders.
+ * Use this after mutations to ensure the UI reflects the latest data.
+ */
+export function useInvalidateLabOrders() {
+  const { laboratoryOrderTypeUuid } = useConfig<Config>();
+
+  return useCallback(() => {
+    mutate(
+      (key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/order?orderTypes=${laboratoryOrderTypeUuid}`),
+      undefined,
+      { revalidate: true },
+    );
+  }, [laboratoryOrderTypeUuid]);
+}

package/src/root.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import LaboratoryDashboard from './laboratory-dashboard.component';
+
+const Root: React.FC = () => {
+  return (
+    <BrowserRouter basename={`${window.spaBase}/home/laboratory`}>
+      <Routes>
+        <Route path="/" element={<LaboratoryDashboard />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/routes.json

@@ -0,0 +1,204 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": ">=2.2.0"
+  },
+  "pages": [
+    {
+      "component": "root",
+      "route": "laboratory"
+    }
+  ],
+  "extensions": [
+    {
+      "name": "laboratory-dashboard",
+      "slot": "laboratory-dashboard-slot",
+      "component": "root"
+    },
+    {
+      "name": "laboratory-dashboard-link",
+      "slot": "homepage-dashboard-slot",
+      "component": "laboratoryDashboardLink",
+      "meta": {
+        "name": "laboratory",
+        "slot": "laboratory-dashboard-slot",
+        "title": "Laboratory"
+      }
+    },
+    {
+      "name": "pickup-lab-request-modal",
+      "component": "pickupLabRequestModal"
+    },
+    {
+      "name": "approval-lab-results-modal",
+      "component": "approvalLabResultsModal"
+    },
+    {
+      "name": "reject-lab-request-modal",
+      "component": "rejectLabRequestModal"
+    },
+    {
+      "name": "all-lab-requests-table",
+      "slot": "lab-panels-slot",
+      "order": 0,
+      "component": "allLabRequestsTable",
+      "meta": {
+        "name": "testsOrderedPanel",
+        "title": "Tests ordered"
+      }
+    },
+    {
+      "name": "inprogress-lab-requests-table",
+      "slot": "lab-panels-slot",
+      "component": "inprogressLabRequestsTable",
+      "order": 1,
+      "meta": {
+        "name": "inprogressPanel",
+        "title": "In progress"
+      }
+    },
+    {
+      "name": "completed-lab-requests-table",
+      "slot": "lab-panels-slot",
+      "component": "completedLabRequestsTable",
+      "order": 3,
+      "meta": {
+        "name": "completedPanel",
+        "title": "Completed"
+      }
+    },
+    {
+      "name": "tests-ordered-tile-component",
+      "slot": "lab-tiles-slot",
+      "component": "testOrderedTile",
+      "meta": {
+        "name": "testsOrderedTileSlot",
+        "title": "Ordered tests"
+      }
+    },
+    {
+      "name": "pending-review-lab-requests-table",
+      "slot": "lab-panels-slot",
+      "component": "pendingReviewLabRequestsTable",
+      "order": 2,
+      "meta": {
+        "name": "pendingReviewPanel",
+        "title": "Pending review tests"
+      }
+    },
+    {
+      "name": "worklist-tile-component",
+      "slot": "lab-tiles-slot",
+      "component": "worklistTile",
+      "meta": {
+        "name": "worklistTileSlot",
+        "title": "Worklist"
+      }
+    },
+    {
+      "name": "pending-review-list-tile-component",
+      "slot": "lab-tiles-slot",
+      "component": "pendingReviewListTile",
+      "meta": {
+        "name": "pendingReviewTileSlot",
+        "title": "Pending review tests"
+      }
+    },
+    {
+      "name": "completed-tile-component",
+      "slot": "lab-tiles-slot",
+      "component": "completedTile",
+      "meta": {
+        "name": "completedTileSlot",
+        "title": "Completed"
+      }
+    },
+    {
+      "name": "declined-tile-component",
+      "slot": "lab-panels-slot",
+      "component": "declinedLabRequestsTable",
+      "order": 4,
+      "meta": {
+        "name": "declinedPanel",
+        "title": "Declined tests"
+      }
+    },
+    {
+      "name": "pick-lab-request-action",
+      "component": "pickupLabRequestAction",
+      "slot": "tests-ordered-actions-slot"
+    },
+    {
+      "name": "approve-lab-results-tests-ordered-action",
+      "component": "approveLabResultsAction",
+      "slot": "approved-ordered-actions-slot"
+    },
+    {
+      "name": "amend-lab-results-tests-ordered-action",
+      "component": "amendLabResultsAction",
+      "slot": "amended-ordered-actions-slot"
+    },
+    {
+      "name": "reject-lab-request-tests-ordered-action",
+      "component": "rejectLabRequestAction",
+      "slot": "rejected-ordered-actions-slot"
+    },
+    {
+      "name": "reject-lab-request-worklist-action",
+      "component": "rejectLabRequestAction",
+      "slot": "inprogress-tests-actions-slot"
+    },
+    {
+      "name": "add-lab-request-results-action",
+      "component": "addLabRequestResultsAction",
+      "slot": "inprogress-tests-actions-slot"
+    }
+  ],
+  "workspaces2": [
+    {
+      "name": "lab-app-test-results-form-workspace",
+      "component": "@openmrs/esm-patient-orders-app#exportedTestResultsFormWorkspace",
+      "window": "labs-app-test-results-window"
+    },
+    {
+      "name": "add-test-order-patient-search-workspace",
+      "component": "@openmrs/esm-patient-search-app#patientSearchWorkspace2",
+      "window": "add-test-order-window"
+    },
+    {
+      "name": "add-test-order-start-visit-workspace",
+      "component": "@openmrs/esm-patient-chart-app#exportedVisitForm",
+      "window": "add-test-order-window"
+    },
+    {
+      "name": "add-test-order-basket-workspace",
+      "component": "@openmrs/esm-patient-orders-app#exportedOrderBasketWorkspace",
+      "window": "add-test-order-window"
+    },
+    {
+      "name": "add-test-order-basket-add-lab-order-workspace",
+      "component": "@openmrs/esm-patient-tests-app#exportedAddLabOrderWorkspace",
+      "window": "add-test-order-window"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "labs-app-test-results-window",
+      "group": "labs-app-group"
+    },
+    {
+      "name": "add-test-order-window",
+      "group": "add-test-order-group"
+    }
+  ],
+  "workspaceGroups2": [
+    {
+      "name": "labs-app-group",
+      "scopePattern": "/home/laboratory"
+    },
+    {
+      "name": "add-test-order-group",
+      "scopePattern": "/home/laboratory"
+    }
+  ]
+}

package/src/types.ts

@@ -0,0 +1,39 @@
+import { type Order as FrameworkOrder, type OrderUrgency } from '@openmrs/esm-framework';
+
+type FrameworkFulfillerStatus = FrameworkOrder['fulfillerStatus'];
+export type FulfillerStatus = FrameworkFulfillerStatus | 'DRAFT' | null;
+
+export type Order = Omit<FrameworkOrder, 'fulfillerStatus' | 'fulfillerComment'> & {
+  fulfillerStatus?: FulfillerStatus;
+  fulfillerComment?: string | null;
+};
+
+export interface FlattenedOrder {
+  id: string;
+  patientUuid: string;
+  orderNumber: string;
+  display: string;
+  dateActivated: string;
+  fulfillerStatus: FulfillerStatus;
+  urgency: OrderUrgency;
+  orderer?: string;
+  instructions?: string;
+  fulfillerComment?: string;
+}
+
+export interface GroupedOrders {
+  patientUuid: string;
+  patientId?: string;
+  patientName?: string;
+  patientAge?: number;
+  patientDob?: string;
+  patientSex?: string;
+  totalOrders: number;
+  orders: Array<FlattenedOrder>;
+  originalOrders: Array<Order>;
+}
+
+export type DateFilterContext = {
+  dateRange: [Date, Date] | null;
+  setDateRange: React.Dispatch<React.SetStateAction<[Date, Date] | null>>;
+};

package/tools/i18next-parser.config.js

@@ -0,0 +1,93 @@
+module.exports = {
+  contextSeparator: false,
+  // Key separator used in your translation keys
+
+  createOldCatalogs: false,
+  // Save the \_old files
+
+  defaultNamespace: "translations",
+  // Default namespace used in your i18next config
+
+  defaultValue: (_, __, key) => key,
+  // Default value to give to empty keys
+  // You may also specify a function accepting the locale, namespace, and key as arguments
+
+  indentation: 2,
+  // Indentation of the catalog files
+
+  keepRemoved: false,
+  // Keep keys from the catalog that are no longer in code
+
+  keySeparator: ".",
+  // Key separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  // see below for more details
+  lexers: {
+    hbs: ["HandlebarsLexer"],
+    handlebars: ["HandlebarsLexer"],
+
+    htm: ["HTMLLexer"],
+    html: ["HTMLLexer"],
+
+    mjs: ["JavascriptLexer"],
+    js: ["JavascriptLexer"], // if you're writing jsx inside .js files, change this to JsxLexer
+    ts: ["JavascriptLexer"],
+    jsx: ["JsxLexer"],
+    tsx: ["JsxLexer"],
+
+    default: ["JavascriptLexer"],
+  },
+
+  lineEnding: "lf",
+  // Control the line ending. See options at https://github.com/ryanve/eol
+
+  locales: ["en"],
+  // An array of the locales in your applications
+
+  namespaceSeparator: ":",
+  // Namespace separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  output: "$NAMESPACE/$LOCALE.json",
+  // Supports $LOCALE and $NAMESPACE injection
+  // Supports JSON (.json) and YAML (.yml) file formats
+  // Where to write the locale files relative to process.cwd()
+
+  pluralSeparator: "_",
+  // Plural separator used in your translation keys
+  // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+
+  input: undefined,
+  // An array of globs that describe where to look for source files
+  // relative to the location of the configuration file
+
+  sort: true,
+  // Whether or not to sort the catalog
+
+  skipDefaultValues: false,
+  // Whether to ignore default values
+  // You may also specify a function accepting the locale and namespace as arguments
+
+  useKeysAsDefaultValue: false,
+  // Whether to use the keys as the default value; ex. "Hello": "Hello", "World": "World"
+  // This option takes precedence over the `defaultValue` and `skipDefaultValues` options
+  // You may also specify a function accepting the locale and namespace as arguments
+
+  verbose: false,
+  // Display info about the parsing including some stats
+
+  failOnWarnings: false,
+  // Exit with an exit code of 1 on warnings
+
+  customValueTemplate: null,
+  // If you wish to customize the value output the value as an object, you can set your own format.
+  // ${defaultValue} is the default value you set in your translation function.
+  // Any other custom property will be automatically extracted.
+  //
+  // Example:
+  // {
+  //   message: "${defaultValue}",
+  //   description: "${maxLength}", // t('my-key', {maxLength: 150})
+  // }
+};

package/tools/index.ts

@@ -0,0 +1 @@
+export { mockPatient } from './test-utils';

package/tools/setup-tests.ts

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom';
+
+// Mock ResizeObserver which is not available in jsdom
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};

package/tools/test-utils.ts

@@ -0,0 +1,44 @@
+const mockPatient = {
+  resourceType: 'Patient',
+  id: '8673ee4f-e2ab-4077-ba55-4980f408773e',
+  extension: [
+    {
+      url: 'http://fhir-es.transcendinsights.com/stu3/StructureDefinition/resource-date-created',
+      valueDateTime: '2017-01-18T09:42:40+00:00',
+    },
+    {
+      url: 'https://purl.org/elab/fhir/StructureDefinition/Creator-crew-version1',
+      valueString: 'daemon',
+    },
+  ],
+  identifier: [
+    {
+      id: '1f0ad7a1-430f-4397-b571-59ea654a52db',
+      use: 'secondary',
+      system: 'Old Identification Number',
+      value: '100732HE',
+    },
+    {
+      id: '1f0ad7a1-430f-4397-b571-59ea654a52db',
+      use: 'usual',
+      system: 'OpenMRS ID',
+      value: '100GEJ',
+    },
+  ],
+  active: true,
+  name: [
+    {
+      id: 'efdb246f-4142-4c12-a27a-9be60b9592e9',
+      use: 'usual',
+      family: 'Wilson',
+      given: ['John'],
+      text: 'Wilson, John',
+    },
+  ],
+  gender: 'male',
+  birthDate: '1972-04-04',
+  deceasedBoolean: false,
+  address: [],
+};
+
+export { mockPatient };

package/tools/update-openmrs-deps.mjs

@@ -0,0 +1,42 @@
+import { execSync } from 'node:child_process';
+
+try {
+  execSync(`yarn up --fixed '@openmrs/*@next' 'openmrs@next'`, {
+    stdio: ['ignore', 'inherit', 'inherit'],
+    windowsHide: true,
+  });
+} catch (error) {
+  console.error(`Error while updating dependencies: ${error.message ?? error}`);
+  process.exit(1);
+}
+
+try {
+  execSync(`yarn dedupe`, {
+    stdio: ['ignore', 'inherit', 'inherit'],
+    windowsHide: true,
+  });
+} catch (error) {
+  console.error(`Error while deduplicating dependencies: ${error.message ?? error}`);
+  process.exit(1);
+}
+
+try {
+  execSync(`git diff-index --quiet HEAD --`, {
+    stdio: 'ignore',
+    windowsHide: true,
+  });
+  process.exit(0);
+} catch (error) {
+  // git diff-index --quite HEAD --
+  // exits with status 1 if there are changes; we only need to run yarn verify if there are changes
+}
+
+try {
+  execSync(`yarn verify`, {
+    stdio: ['ignore', 'inherit', 'inherit'],
+    windowsHide: true,
+  });
+} catch (error) {
+  console.error(`Error while running yarn verify: ${error.message ?? error}. Updates require manual intervention.`);
+  process.exit(1);
+}