@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.20

package/src/triage/patient-banner.component.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { ExtensionSlot, usePatient, useVisit } from '@openmrs/esm-framework';
+import { Button, InlineLoading } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { Close, Stethoscope } from '@carbon/react/icons';
+import { useStartVisitAndLaunchTriageForm, launchTriageFormWorkspace } from './useStartVisitAndLaunchTriageForm';
+
+import styles from './patient-banner.scss';
+
+type PatientBannerProps = {
+  patientUuid: string;
+  formUuid: string;
+  formName: string;
+  setPatientUuid: (patientUuid: string | undefined) => void;
+};
+
+const PatientBanner: React.FC<PatientBannerProps> = ({ patientUuid, formUuid, formName, setPatientUuid }) => {
+  const { t } = useTranslation();
+  const { isLoading: isVisitLoading, activeVisit } = useVisit(patientUuid);
+  const { handleStartVisitAndLaunchTriageForm } = useStartVisitAndLaunchTriageForm();
+  const { isLoading, error, patient } = usePatient(patientUuid);
+
+  const handleLaunchTriageForm = () => {
+    if (activeVisit) {
+      launchTriageFormWorkspace(patient, patientUuid, activeVisit, formUuid, formName, t);
+    } else {
+      handleStartVisitAndLaunchTriageForm(patientUuid, formUuid, formName);
+    }
+  };
+
+  if (isLoading || isVisitLoading) {
+    return <InlineLoading description={t('loading', 'Loading...')} />;
+  }
+
+  return (
+    <div className={styles.patientBannerContainer}>
+      <div className={styles.patientBannerHeader}>
+        <Button kind="ghost" renderIcon={Stethoscope} onClick={() => handleLaunchTriageForm()}>
+          {t('triageForm', 'Triage form')}
+        </Button>
+        <Button kind="danger--ghost" renderIcon={Close} onClick={() => setPatientUuid(undefined)}>
+          {t('close', 'Close')}
+        </Button>
+      </div>
+      {patient && (
+        <ExtensionSlot
+          name="patient-header-slot"
+          state={{
+            patient,
+            patientUuid: patientUuid,
+            hideActionsOverflow: true,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default PatientBanner;

package/src/triage/patient-banner.scss

@@ -0,0 +1,14 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.patientBannerContainer {
+  margin: layout.$spacing-05;
+  border: 1px solid colors.$gray-20;
+  background-color: colors.$white;
+}
+
+.patientBannerHeader {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}

package/src/triage/triage-dashboard.component.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, InlineNotification, Tile } from '@carbon/react';
+import { Add, Search } from '@carbon/react/icons';
+import {
+  ExtensionSlot,
+  TriagePictogram,
+  launchWorkspace,
+  PageHeader,
+  useConfig,
+  useSession,
+} from '@openmrs/esm-framework';
+
+import styles from './triage-dashboard.scss';
+import type { ClinicalWorkflowConfig } from '../config-schema';
+import PatientBanner from './patient-banner.component';
+import { getTriageFormForLocation } from './triage.resource';
+
+const TriageDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { sessionLocation } = useSession();
+  const { triageLocationForms } = useConfig<ClinicalWorkflowConfig>();
+  const [patientUuid, setPatientUuid] = useState<string | null>(null);
+
+  const triageFormConfig = getTriageFormForLocation(sessionLocation?.uuid, triageLocationForms);
+
+  if (!sessionLocation) {
+    return (
+      <div className={styles.triageDashboardContainer}>
+        <PageHeader
+          className={styles.pageHeader}
+          title={t('triageDashboard', 'Triage Dashboard')}
+          illustration={<TriagePictogram />}
+        />
+        <InlineNotification
+          kind="error"
+          title={t('noSessionLocation', 'No session location')}
+          subtitle={t('noSessionLocationSubtitle', 'Please select a location to continue')}
+          lowContrast
+        />
+      </div>
+    );
+  }
+
+  if (!triageFormConfig) {
+    return (
+      <div className={styles.triageDashboardContainer}>
+        <PageHeader
+          className={styles.pageHeader}
+          title={t('triageDashboard', 'Triage Dashboard')}
+          illustration={<TriagePictogram />}
+        />
+        <InlineNotification
+          kind="warning"
+          title={t('noTriageFormConfigured', 'No triage form configured')}
+          subtitle={t('noTriageFormConfiguredSubtitle', 'No triage form is configured for location: {{location}}', {
+            location: sessionLocation.display,
+          })}
+          lowContrast
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.triageDashboardContainer}>
+      <PageHeader
+        className={styles.pageHeader}
+        title={t('triageDashboard', 'Triage Dashboard')}
+        illustration={<TriagePictogram />}
+      />
+      <div className={styles.headerActions}>
+        <ExtensionSlot
+          className={styles.patientSearchBar}
+          name="patient-search-bar-slot"
+          state={{
+            selectPatientAction: (patientUuid: string) => setPatientUuid(patientUuid),
+            buttonProps: {
+              kind: 'secondary',
+            },
+          }}
+        />
+        <Button onClick={() => launchWorkspace('patient-registration-workspace')} kind="tertiary" renderIcon={Add}>
+          {t('registerNewPatient', 'Register New Patient')}
+        </Button>
+      </div>
+      {!patientUuid ? (
+        <div className={styles.emptyStateContainer}>
+          <Tile className={styles.emptyStateTile}>
+            <div className={styles.emptyStateContent}>
+              <div className={styles.emptyStateIcon}>
+                <Search size={48} />
+              </div>
+              <h3 className={styles.emptyStateHeading}>{t('noPatientSelected', 'No patient selected')}</h3>
+              <p className={styles.emptyStateDescription}>
+                {t(
+                  'searchForPatientToStartTriage',
+                  'Search for a patient using the search bar above to start the triage process, or register a new patient.',
+                )}
+              </p>
+            </div>
+          </Tile>
+        </div>
+      ) : (
+        <PatientBanner
+          patientUuid={patientUuid}
+          formUuid={triageFormConfig.formUuid}
+          formName={triageFormConfig.name}
+          setPatientUuid={setPatientUuid}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TriageDashboard;

package/src/triage/triage-dashboard.scss

@@ -0,0 +1,107 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.contentSwitcher {
+  margin: layout.$spacing-05;
+}
+
+.headerActions {
+  display: flex;
+  column-gap: layout.$spacing-05;
+  margin: layout.$spacing-05;
+}
+
+.patientSearchBar {
+  width: 100%;
+
+  & form {
+    border: none;
+  }
+}
+
+.pageHeader {
+  border-bottom: 1px solid colors.$gray-20;
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+
+  button {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.emptyStateContainer {
+  margin: layout.$spacing-05;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.emptyStateTile {
+  width: 100%;
+  padding: layout.$spacing-07;
+  text-align: center;
+}
+
+.emptyStateContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: layout.$spacing-05;
+}
+
+.emptyStateIcon {
+  color: colors.$gray-50;
+  margin-bottom: layout.$spacing-03;
+
+  :global(svg) {
+    display: block;
+  }
+}
+
+.emptyStateHeading {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  color: colors.$gray-100;
+}
+
+.emptyStateDescription {
+  font-size: 0.875rem;
+  color: colors.$gray-70;
+  margin: 0;
+  line-height: 1.5;
+  max-width: 500px;
+}
+
+.emptyStateActions {
+  margin-top: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+  text-align: left;
+  width: 100%;
+  max-width: 500px;
+}
+
+.actionItem {
+  display: flex;
+  align-items: flex-start;
+  gap: layout.$spacing-03;
+  font-size: 0.875rem;
+  color: colors.$gray-70;
+}
+
+.actionIcon {
+  flex-shrink: 0;
+  color: colors.$blue-60;
+  margin-top: 2px;
+}
+
+.actionLabel {
+  line-height: 1.5;
+}

package/src/triage/triage.resource.tsx

@@ -0,0 +1,44 @@
+import { openmrsFetch, restBaseUrl, Visit } from '@openmrs/esm-framework';
+import type { ClinicalWorkflowConfig } from '../config-schema';
+
+const queueEntryCustomRepresentation =
+  'custom:(uuid,display,queue,status,patient:(uuid,display,person,identifiers:(uuid,display,identifier,identifierType)),visit:(uuid,display,startDatetime,encounters:(uuid,display,diagnoses,encounterDatetime,encounterType,obs,encounterProviders,voided),attributes:(uuid,display,value,attributeType)),priority,priorityComment,sortWeight,startedAt,endedAt,locationWaitingFor,queueComingFrom,providerWaitingFor,previousQueueEntry)';
+
+export const createVisitForPatient = async (patientUuid: string, visitTypeUuid: string) => {
+  const url = `${restBaseUrl}/visit?v=full`;
+  const payload = {
+    patient: patientUuid,
+    visitType: visitTypeUuid,
+  };
+
+  return openmrsFetch<Visit>(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  });
+};
+
+export const getCurrentVisitForPatient = async (patientUuid: string): Promise<Visit | undefined> => {
+  const url = `${restBaseUrl}/visit?v=full&patient=${patientUuid}&includeInactive=false`;
+  const { data } = await openmrsFetch<{ results: Array<Visit> }>(url);
+  const currentVisit = data.results?.find((visit) => visit.stopDatetime === null);
+  return currentVisit;
+};
+
+export const fetchQueueEntryForPatient = async (patientUuid: string): Promise<any | undefined> => {
+  const url = `${restBaseUrl}/queue-entry?v=${queueEntryCustomRepresentation}&patient=${patientUuid}&includeInactive=false`;
+  const { data } = await openmrsFetch<{ results: Array<unknown> }>(url);
+  return data.results[0];
+};
+
+export const getTriageFormForLocation = (
+  locationUuid: string | undefined,
+  triageLocationForms: ClinicalWorkflowConfig['triageLocationForms'],
+): { formUuid: string; name: string } | undefined => {
+  if (!locationUuid) {
+    return undefined;
+  }
+  return triageLocationForms[locationUuid];
+};

package/src/triage/useStartVisitAndLaunchTriageForm.ts

@@ -0,0 +1,156 @@
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import {
+  Encounter,
+  fetchCurrentPatient,
+  launchWorkspace2,
+  showModal,
+  showSnackbar,
+  useConfig,
+  Visit,
+} from '@openmrs/esm-framework';
+
+import { createVisitForPatient, getCurrentVisitForPatient } from './triage.resource';
+import type { ClinicalWorkflowConfig } from '../config-schema';
+
+export const launchTriageFormWorkspace = (
+  patient: Awaited<ReturnType<typeof fetchCurrentPatient>>,
+  patientUuid: string,
+  visit: Visit,
+  formUuid: string,
+  formName: string,
+  t: TFunction<'translation', undefined>,
+) => {
+  const handleShowModal = (encounter: Encounter) => {
+    const dispose = showModal('transition-patient-to-latest-queue-modal', {
+      activeVisit: visit,
+      closeModal: () => dispose(),
+    });
+  };
+
+  if (!visit?.uuid || !visit?.visitType?.uuid) {
+    throw new Error('Invalid visit data received');
+  }
+
+  // Launch triage form workspace
+  launchWorkspace2(
+    'clinical-workflow-patient-form-entry-workspace',
+    {
+      formEntryWorkspaceName: formName,
+      patient,
+      visitContext: visit,
+      form: {
+        visitUuid: visit.uuid,
+        uuid: formUuid,
+        visitTypeUuid: visit.visitType.uuid,
+      },
+      encounterUuid: '',
+      handlePostResponse: handleShowModal,
+    },
+    {
+      patientUuid: patientUuid,
+      patient: patient,
+      visitContext: visit,
+    },
+  );
+
+  // Set z-index for workspace container
+  setTimeout(() => {
+    const workspaceContainer = document.getElementById('omrs-workspaces-container');
+    if (workspaceContainer) {
+      workspaceContainer.style.zIndex = '100';
+    }
+  }, 0);
+};
+
+interface UseStartVisitAndLaunchTriageFormReturn {
+  handleStartVisitAndLaunchTriageForm: (patientUuid: string, formUuid: string, formName: string) => Promise<void>;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export const useStartVisitAndLaunchTriageForm = (): UseStartVisitAndLaunchTriageFormReturn => {
+  const { t } = useTranslation();
+  const { visitTypeUuid } = useConfig<ClinicalWorkflowConfig>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const handleStartVisitAndLaunchTriageForm = useCallback(
+    async (patientUuid: string, formUuid: string, formName: string) => {
+      if (!patientUuid?.trim()) {
+        const validationError = new Error('Patient UUID is required');
+        setError(validationError);
+        showSnackbar({
+          title: t('triageDashboardError', 'Error'),
+          kind: 'error',
+          subtitle: t('triageDashboardInvalidPatientUuid', 'Invalid patient identifier'),
+          isLowContrast: true,
+        });
+        return;
+      }
+
+      if (!formUuid?.trim()) {
+        const validationError = new Error('Form UUID is required');
+        setError(validationError);
+        showSnackbar({
+          title: t('triageDashboardError', 'Error'),
+          kind: 'error',
+          subtitle: t('triageDashboardInvalidFormUuid', 'Invalid form identifier'),
+          isLowContrast: true,
+        });
+        return;
+      }
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        // Fetch patient data
+        const patient = await fetchCurrentPatient(patientUuid);
+
+        if (!patient) {
+          throw new Error('Failed to fetch patient data');
+        }
+
+        let visit = await getCurrentVisitForPatient(patientUuid);
+        if (!visit) {
+          const visitResponse = await createVisitForPatient(patientUuid, visitTypeUuid);
+
+          if (!visitResponse.ok) {
+            throw new Error(
+              visitResponse.data?.error?.message ||
+                t('triageDashboardErrorStartingVisit', 'Error starting visit for patient'),
+            );
+          }
+
+          visit = visitResponse.data;
+        }
+
+        // Launch triage form workspace with visit
+        launchTriageFormWorkspace(patient, patientUuid, visit, formUuid, formName, t);
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : t('triageDashboardUnexpectedError', 'An unexpected error occurred');
+
+        setError(err instanceof Error ? err : new Error(errorMessage));
+
+        showSnackbar({
+          title: t('triageDashboardErrorStartingVisit', 'Error starting visit for patient'),
+          kind: 'error',
+          subtitle: errorMessage,
+          isLowContrast: true,
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [t, visitTypeUuid],
+  );
+
+  return {
+    handleStartVisitAndLaunchTriageForm,
+    isLoading,
+    error,
+  };
+};

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+}