@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.1

package/src/shared/queue/queue-workflow-context.tsx

@@ -0,0 +1,90 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import { Queue, QueueFilter, QueueEntry, QueueEntriesPagination } from '../../types';
+import { useQueueEntries } from '../../hooks/useServiceQueues';
+
+const startedOnOrAfter = dayjs().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss');
+
+export type QueueWorkflowContextValue = {
+  activeQueue: Queue | undefined;
+  setCurrQueue: (queue: Queue | undefined) => void;
+  filters: QueueFilter[];
+  setFilters: React.Dispatch<React.SetStateAction<QueueFilter[]>>;
+  queueEntries: QueueEntry[];
+  isLoadingQueueEntries: boolean;
+  isValidatingQueueEntries: boolean;
+  queueEntriesError: Error | null;
+  queueEntriesPagination: QueueEntriesPagination | undefined;
+  pageSize: number;
+  setPageSize: (size: number) => void;
+};
+
+const QueueWorkflowContext = createContext<QueueWorkflowContextValue | null>(null);
+
+export type QueueWorkflowProviderProps = {
+  queues: Queue[];
+  children: React.ReactNode;
+};
+
+export const QueueWorkflowProvider: React.FC<QueueWorkflowProviderProps> = ({ queues, children }) => {
+  const [currQueue, setCurrQueue] = useState<Queue>();
+  const [filters, setFilters] = useState<QueueFilter[]>([]);
+  const [pageSize, setPageSize] = useState(10);
+
+  const activeQueue = currQueue ?? queues[0];
+
+  const {
+    queueEntries,
+    isLoading: isLoadingQueueEntries,
+    isValidating: isValidatingQueueEntries,
+    error: queueEntriesError,
+    pagination: queueEntriesPagination,
+  } = useQueueEntries(
+    activeQueue
+      ? {
+          location: activeQueue.location?.uuid ? [activeQueue.location.uuid] : undefined,
+          startedOnOrAfter,
+          queues: [activeQueue.uuid],
+        }
+      : { queues: ['00000000-0000-0000-0000-000000000000'], startedOnOrAfter },
+    pageSize,
+  );
+
+  const value = useMemo(
+    () => ({
+      activeQueue,
+      setCurrQueue,
+      filters,
+      setFilters,
+      queueEntries: queueEntries ?? [],
+      isLoadingQueueEntries,
+      isValidatingQueueEntries,
+      queueEntriesError: queueEntriesError ?? null,
+      queueEntriesPagination,
+      pageSize,
+      setPageSize,
+    }),
+    [
+      activeQueue,
+      filters,
+      queueEntries,
+      isLoadingQueueEntries,
+      isValidatingQueueEntries,
+      queueEntriesError,
+      queueEntriesPagination,
+      pageSize,
+    ],
+  );
+
+  return <QueueWorkflowContext.Provider value={value}>{children}</QueueWorkflowContext.Provider>;
+};
+
+export const useQueueWorkflowContext = () => {
+  const ctx = useContext(QueueWorkflowContext);
+  if (!ctx) {
+    throw new Error('useQueueWorkflowContext must be used within QueueWorkflowProvider');
+  }
+  return ctx;
+};
+
+export const useQueueWorkflowContextOptional = () => useContext(QueueWorkflowContext);

package/src/shared/tabs/create-tab-extension.tsx

@@ -0,0 +1,33 @@
+import { ExtensionSlot, FHIRResource } from '@openmrs/esm-framework';
+import React from 'react';
+import styles from './patient-summary-dashboard.scss';
+export const createTabExtension = (extensionSlotName?: string) => {
+  return function TabExtension(props: any) {
+    return <TabWithExtensionSlot extensionSlotName={extensionSlotName} {...props} />;
+  };
+};
+
+const TabWithExtensionSlot: React.FC<{
+  extensionSlotName?: string;
+  patientUuid: string;
+  patient: FHIRResource;
+  _meta?: {
+    slot?: string;
+    [key: string]: any;
+  };
+}> = ({ extensionSlotName, patientUuid, patient, _meta }) => {
+  if (!_meta?.slot && !extensionSlotName) {
+    console.warn(
+      'No slot provided for TabExtension. Please provide a slot in the route meta or as an argument to createTabExtension.',
+    );
+    return null;
+  }
+  const { slot, ...others } = _meta || {};
+  return (
+    <ExtensionSlot
+      name={_meta?.slot ?? (extensionSlotName as string)}
+      state={{ patientUuid, patient, ...others }}
+      className={styles.ewfExtensionSlot}
+    />
+  );
+};

package/src/shared/tabs/extension-tabs.component.tsx

@@ -1,38 +1,59 @@
-import React from 'react';
-import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@carbon/react';
-import { ExtensionSlot } from '@openmrs/esm-framework';
-
-export type ExtensionTabItem = {
-  label: React.ReactNode;
-  icon?: React.ComponentType<unknown>;
-  slotName: string;
-  slotClassName?: string;
-};
+import { Layer, Tab, TabList, TabPanel, TabPanels, Tabs, TabsSkeleton } from '@carbon/react';
+import { ErrorState, Extension, translateFrom, usePatient } from '@openmrs/esm-framework';
+import { ComponentContext, useExtensionSlot } from '@openmrs/esm-framework/src/internal';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type ExtensionTabsProps = {
-  items: Array<ExtensionTabItem>;
-  state?: Record<string, unknown>;
-  contained?: boolean;
+  extensionSlotName: string;
+  patientUuid: string;
 };
 
-const ExtensionTabs: React.FC<ExtensionTabsProps> = ({ items, state, contained = true }) => {
+const ExtensionTabs: React.FC<ExtensionTabsProps> = ({ extensionSlotName, patientUuid }) => {
+  const { t } = useTranslation();
+  const { patient, isLoading, error } = usePatient(patientUuid);
+  const state = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
+
+  const { extensions, extensionSlotModuleName } = useExtensionSlot(extensionSlotName, state);
+  if (isLoading) {
+    return <TabsSkeleton />;
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={t('error', 'Error')} error={error} />;
+  }
+
   return (
-    <Tabs>
-      <TabList contained={contained}>
-        {items.map((item, index) => (
-          <Tab key={`tab-${index}`} renderIcon={item.icon}>
-            {item.label}
-          </Tab>
-        ))}
-      </TabList>
-      <TabPanels>
-        {items.map((item, index) => (
-          <TabPanel key={`panel-${index}`}>
-            <ExtensionSlot className={item.slotClassName} name={item.slotName} state={state} />
-          </TabPanel>
-        ))}
-      </TabPanels>
-    </Tabs>
+    <Layer>
+      <Tabs>
+        <TabList contained>
+          {extensions.map((ext) => (
+            <Tab key={ext.name}>{translateFrom(extensionSlotModuleName, ext.meta.title, ext.meta.title)}</Tab>
+          ))}
+        </TabList>
+        <TabPanels
+          data-extension-slot-name={extensionSlotName}
+          data-extension-slot-module-name={extensionSlotModuleName}>
+          {extensions.map((ext) => (
+            <TabPanel key={ext.name}>
+              <ComponentContext.Provider
+                key={ext.id}
+                value={{
+                  featureName: ext.meta.featureName,
+                  moduleName: ext.moduleName,
+                  extension: {
+                    extensionId: ext.id,
+                    extensionSlotName: extensionSlotName,
+                    extensionSlotModuleName: ext.moduleName,
+                  },
+                }}>
+                <Extension state={state} />
+              </ComponentContext.Provider>
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </Layer>
   );
 };
 

package/src/shared/utils/index.ts

@@ -100,8 +100,6 @@ export function buildGeneralOrder(order: Order, action?: OrderAction): OrderBask
     action: action,
     display: order.display,
     previousOrder: action !== 'NEW' ? order.uuid : null,
-    orderer: order.orderer.uuid,
-    careSetting: order.careSetting.uuid,
     instructions: order.instructions,
     urgency: order.urgency,
     accessionNumber: order.accessionNumber,
@@ -109,6 +107,7 @@ export function buildGeneralOrder(order: Order, action?: OrderAction): OrderBask
     orderNumber: order.orderNumber,
     orderType: order.orderType.uuid,
     scheduledDate: order.scheduledDate ? new Date(order.scheduledDate) : null,
+    visit: order.encounter.visit,
   };
 }
 
@@ -151,15 +150,130 @@ export function sanitizePhoneNumber(phoneNumber: string): string {
  * @returns The masked phone number
  */
 export const maskPhoneNumber = (phoneNumber: string): string => {
+  if (!phoneNumber) {
+    return '';
+  }
   const digits = phoneNumber.replace(/\D/g, '');
-
   if (digits.length < 8) {
     return phoneNumber;
   }
-
   const firstPart = digits.slice(0, -6);
   const maskedPart = '*'.repeat(4);
   const lastPart = digits.slice(-2);
-
   return `${firstPart}${maskedPart}${lastPart}`;
 };
+
+/**
+ * Extracts the most meaningful error message from a Savannah IL / SHA upstream error response.
+ *
+ * Savannah errors come in several shapes:
+ *   { success: false, error: "...", upstream_error: { error: "Bad Request", message: "specific reason" } }
+ *   { success: false, error: "..." }
+ *   { error: "...", message: "..." }
+ *   "plain string"
+ */
+
+export interface UpstreamErrorBody {
+  error?: string;
+  message?: string;
+}
+
+export interface SavannahErrorResponse {
+  success?: boolean;
+  error?: string;
+  upstream_error?: UpstreamErrorBody;
+  message?: string;
+}
+
+/**
+ * Returns the most specific human-readable error message available.
+ * Priority: upstream_error.message > upstream_error.error > message > error > fallback
+ */
+export function extractUpstreamError(
+  response: SavannahErrorResponse | string | unknown,
+  fallback = 'An unexpected error occurred. Please try again.',
+): string {
+  if (!response) {
+    return fallback;
+  }
+
+  if (typeof response === 'string') {
+    return response || fallback;
+  }
+
+  const res = response as SavannahErrorResponse;
+
+  const upstreamMsg = res.upstream_error?.message?.trim();
+  if (upstreamMsg) {
+    return upstreamMsg;
+  }
+
+  const upstreamErr = res.upstream_error?.error?.trim();
+  if (upstreamErr && upstreamErr.toLowerCase() !== 'bad request') {
+    return upstreamErr;
+  }
+
+  const topMsg = res.message?.trim();
+  if (topMsg) {
+    return topMsg;
+  }
+
+  const topError = res.error?.trim();
+  if (topError && !res.upstream_error) {
+    return topError;
+  }
+
+  if (topError) {
+    return topError;
+  }
+
+  return fallback;
+}
+
+/**
+ * Extracts error from a caught Error/unknown in catch blocks.
+ * Handles: openmrsFetch errors (with .responseBody), Error objects, raw response objects.
+ *
+ * IMPORTANT: openmrsFetch errors are Error instances AND carry a .responseBody field.
+ * We must check responseBody FIRST, otherwise we'd fall into the Error branch and surface
+ * the raw "Server responded with 400..." technical message instead of the upstream message.
+ */
+export function extractFetchError(err: unknown, fallback = 'An unexpected error occurred. Please try again.'): string {
+  if (!err) {
+    return fallback;
+  }
+
+  if (typeof err === 'object' && err !== null) {
+    const e = err as Record<string, unknown>;
+
+    if (e.responseBody) {
+      return extractUpstreamError(e.responseBody as SavannahErrorResponse, fallback);
+    }
+
+    if (e.data) {
+      return extractUpstreamError(e.data as SavannahErrorResponse, fallback);
+    }
+  }
+
+  if (err instanceof Error) {
+    const msg = err.message;
+    if (msg) {
+      try {
+        const parsed = JSON.parse(msg);
+        return extractUpstreamError(parsed, msg);
+      } catch {
+        return msg;
+      }
+    }
+    return fallback;
+  }
+
+  if (typeof err === 'object' && err !== null) {
+    const e = err as Record<string, unknown>;
+    if ('upstream_error' in e || 'error' in e || 'message' in e) {
+      return extractUpstreamError(e as SavannahErrorResponse, fallback);
+    }
+  }
+
+  return fallback;
+}

package/src/types/index.ts

@@ -1,4 +1,5 @@
 import { type OpenmrsResource, type OpenmrsResourceStrict, type Visit } from '@openmrs/esm-framework';
+import { MutableRefObject } from 'react';
 
 export interface DashboardConfig {
   name: string;
@@ -11,8 +12,8 @@ export type Queue = {
   name: string;
   location: OpenmrsResource;
   service: OpenmrsResource;
-  allowedPriorities: Array<OpenmrsResource>;
-  allowedStatuses: Array<OpenmrsResource>;
+  allowedPriorities?: Array<OpenmrsResource>;
+  allowedStatuses?: Array<OpenmrsResource>;
   queueRooms: Array<OpenmrsResource>;
 };
 
@@ -95,3 +96,29 @@ export type QueueFilter = {
   value: string;
   label: string;
 };
+
+export type QueueEntriesPagination = {
+  totalPages: number;
+  totalCount: number;
+  currentPage: number;
+  currentPageSize: MutableRefObject<number>;
+  paginated: boolean;
+  showNextButton: boolean;
+  showPreviousButton: boolean;
+  goTo: (page: number) => void;
+  goToNext: () => void;
+  goToPrevious: () => void;
+  defaultPageSize: number;
+};
+
+export interface QueueEntryPayload {
+  visit: { uuid: string };
+  queueEntry: {
+    status: { uuid: string };
+    priority: { uuid: string };
+    queue: { uuid: string };
+    patient: { uuid: string };
+    startedAt: Date;
+    sortWeight: number;
+  };
+}