@kenyaemr/esm-shr-app 5.4.4-pre.43 → 5.4.4-pre.430

package/src/workspace/referrals.workspace.component.tsx

@@ -1,41 +1,41 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
 import {
-  Column,
-  Form,
-  Stack,
-  Search,
+  Button,
   ButtonSet,
+  Column,
   ComboBox,
-  Button,
-  Tile,
-  TextArea,
+  Form,
   InlineLoading,
+  Search,
+  Stack,
   Tag,
+  TextArea,
+  Tile,
 } from '@carbon/react';
-import { ExtensionSlot, showSnackbar, useSession, useConfig, formatDate, formatDatetime } from '@openmrs/esm-framework';
-import { z } from 'zod';
-import PatientInfo from './referral-patient-info.component';
-import styles from './referral.workspace.scss';
-import { Hospital, Close } from '@carbon/react/icons';
-import {
-  useFacilities,
-  useReasons,
-  useSendReferralToArtDirectory,
-  useSystemSetting,
-} from './referral-workspace.resource';
+import { Close, Hospital } from '@carbon/react/icons';
+import { ExtensionSlot, formatDate, formatDatetime, showSnackbar, Workspace2 } from '@openmrs/esm-framework';
 import usePatient from '../hooks/usePatient';
-import { type Concept, type Facility, type ReferralPayload } from '../types';
 import { FacilityReferralFormData, facilityReferralSchema, ValidationErrors } from '../schema';
+import { type Concept, type Facility, type ReferralPayload } from '../types';
 import {
-  getPatientName,
-  getPatientGender,
-  getPatientIdentifiers,
   formatBirthDate,
   getPatientAddress,
   getPatientDeathInfo,
+  getPatientGender,
+  getPatientIdentifiers,
+  getPatientName,
   getPhoneNumber,
 } from '../utils/function';
+import PatientInfo from './referral-patient-info.component';
+import {
+  useFacilities,
+  useReasons,
+  useSendReferralToArtDirectory,
+  useSystemSetting,
+} from './referral-workspace.resource';
+import styles from './referral.workspace.scss';
 
 interface FacilityReferralProps {
   closeWorkspace: () => void;
@@ -234,7 +234,7 @@ const FacilityReferralForm: React.FC<FacilityReferralProps> = ({ closeWorkspace,
       showSnackbar({
         kind: 'error',
         title: t('referError', 'Referral Failed'),
-        subtitle: t('referErrorDetails', error.message || 'An unexpected error occurred'),
+        subtitle: t('referErrorDetails', String(error.message) || 'An unexpected error occurred'),
         timeoutInMs: 6000,
       });
     } finally {
@@ -301,171 +301,178 @@ const FacilityReferralForm: React.FC<FacilityReferralProps> = ({ closeWorkspace,
   ]);
 
   return (
-    <Form className={styles.form} onSubmit={onSubmit}>
-      <Stack gap={4} className={styles.grid}>
-        <h3 className={styles.formTitle}>{t('facilityReferral', 'Facility Referral')}</h3>
-
-        <Column>
-          <ComboBox
-            id="referral-type"
-            titleText={t('referralType', 'Referral Type')}
-            items={['Facility to Facility']}
-            onChange={({ selectedItem }) => {
-              setReferralType(selectedItem);
-            }}
-            placeholder={t('selectReferralType', 'Select referral type')}
-            selectedItem={referralType}
-            invalid={!!validationErrors.referralType}
-            invalidText={validationErrors.referralType}
-          />
-        </Column>
-
-        {referralType && (
-          <>
-            <Column>
-              <h4 className={styles.sectionHeader}>{t('destinationFacility', 'Destination Facility')}</h4>
-              {!selectedFacility ? (
-                <>
-                  <Search
-                    size="lg"
-                    placeholder={t('searchFacility', 'Search for facility')}
-                    labelText={t('search', 'Search')}
-                    value={facilitySearchTerm}
-                    onChange={(e) => {
-                      const value = e.target.value;
-                      setFacilitySearchTerm(value);
-                    }}
-                  />
-                  {facilitySearchTerm && facilities?.length > 0 && (
-                    <div className={styles.searchResults}>
-                      {facilities.map((facility) => (
-                        <Tile
-                          key={facility.uuid}
-                          className={styles.resultTile}
-                          onClick={() => handleFacilitySelect(facility)}>
-                          <div className={styles.tileContent}>
-                            <Hospital size={20} className={styles.illustrationPictogram} />
-                            <div className={styles.facilityInfo}>
-                              <strong>{facility.name}</strong>
-                              <div>MFL: {facility.attributes?.[0]?.value || 'N/A'}</div>
-                            </div>
-                          </div>
-                        </Tile>
-                      ))}
-                    </div>
-                  )}
-                </>
-              ) : (
-                <Tile className={styles.selectedItem}>
-                  <div className={styles.tileContent}>
-                    <Hospital size={20} className={styles.illustrationPictogram} />
-                    <div className={styles.facilityInfo}>
-                      <strong>{selectedFacility.name}</strong>
-                      <div>MFL: {selectedFacility.attributes?.[0]?.value || 'N/A'}</div>
-                    </div>
-                    <Button
-                      hasIconOnly
-                      renderIcon={Close}
-                      iconDescription={t('remove', 'Remove')}
-                      kind="ghost"
-                      onClick={() => {
-                        setSelectedFacility(null);
+    <Workspace2 title={t('referralForm', 'Referral Form')}>
+      <Form className={styles.form} onSubmit={onSubmit}>
+        <Stack gap={4} className={styles.grid}>
+          <h3 className={styles.formTitle}>{t('facilityReferral', 'Facility Referral')}</h3>
+
+          <Column>
+            <ComboBox
+              id="referral-type"
+              titleText={t('referralType', 'Referral Type')}
+              items={['Facility to Facility']}
+              onChange={({ selectedItem }) => {
+                setReferralType(selectedItem);
+              }}
+              placeholder={t('selectReferralType', 'Select referral type')}
+              selectedItem={referralType}
+              invalid={!!validationErrors.referralType}
+              invalidText={validationErrors.referralType}
+            />
+          </Column>
+
+          {referralType && (
+            <>
+              <Column>
+                <h4 className={styles.sectionHeader}>{t('destinationFacility', 'Destination Facility')}</h4>
+                {!selectedFacility ? (
+                  <>
+                    <Search
+                      size="lg"
+                      placeholder={t('searchFacility', 'Search for facility')}
+                      labelText={t('search', 'Search')}
+                      value={facilitySearchTerm}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        setFacilitySearchTerm(value);
                       }}
                     />
+                    {facilitySearchTerm && facilities?.length > 0 && (
+                      <div className={styles.searchResults}>
+                        {facilities.map((facility) => (
+                          <Tile
+                            key={facility.uuid}
+                            className={styles.resultTile}
+                            onClick={() => handleFacilitySelect(facility)}>
+                            <div className={styles.tileContent}>
+                              <Hospital size={20} className={styles.illustrationPictogram} />
+                              <div className={styles.facilityInfo}>
+                                <strong>{facility.name}</strong>
+                                <div>MFL: {facility.attributes?.[0]?.value || 'N/A'}</div>
+                              </div>
+                            </div>
+                          </Tile>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <Tile className={styles.selectedItem}>
+                    <div className={styles.tileContent}>
+                      <Hospital size={20} className={styles.illustrationPictogram} />
+                      <div className={styles.facilityInfo}>
+                        <strong>{selectedFacility.name}</strong>
+                        <div>MFL: {selectedFacility.attributes?.[0]?.value || 'N/A'}</div>
+                      </div>
+                      <Button
+                        hasIconOnly
+                        renderIcon={Close}
+                        iconDescription={t('remove', 'Remove')}
+                        kind="ghost"
+                        onClick={() => {
+                          setSelectedFacility(null);
+                        }}
+                      />
+                    </div>
+                  </Tile>
+                )}
+                {validationErrors.selectedFacility && (
+                  <div className={styles.errorMessage}>{validationErrors.selectedFacility}</div>
+                )}
+              </Column>
+
+              <Column>
+                <h4 className={styles.sectionHeader}>{t('patient', 'Patient')}</h4>
+                {patientSelected && patientUuid ? (
+                  <PatientInfo patientUuid={patientUuid} />
+                ) : (
+                  <ExtensionSlot
+                    name="patient-search-bar-slot"
+                    state={{
+                      selectPatientAction: selectPatient,
+                      buttonProps: { kind: 'primary' },
+                    }}
+                  />
+                )}
+                {validationErrors.patientUuid && (
+                  <div className={styles.errorMessage}>{validationErrors.patientUuid}</div>
+                )}
+              </Column>
+
+              <Column>
+                <h4 className={styles.sectionHeader}>{t('referralReasons', 'Referral Reasons')}</h4>
+                <Search
+                  size="lg"
+                  placeholder={t('searchReasons', 'Search for referral reasons')}
+                  labelText={t('search', 'Search')}
+                  value={reasonSearchTerm}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    setReasonSearchTerm(value);
+                  }}
+                />
+                {reasonSearchTerm && reasons?.length > 0 && (
+                  <div className={styles.searchResults}>
+                    {reasons.map((reason) => (
+                      <Tile key={reason.uuid} className={styles.resultTile} onClick={() => handleReasonSelect(reason)}>
+                        {reason.name.name}
+                      </Tile>
+                    ))}
+                  </div>
+                )}
+                {selectedReasons.length > 0 && (
+                  <div className={styles.selectedItems}>
+                    {selectedReasons.map((reason) => (
+                      <Tag
+                        key={reason.uuid}
+                        size="lg"
+                        type="gray"
+                        filter
+                        onClose={() => handleRemoveReason(reason.uuid)}>
+                        {reason.name.name}
+                      </Tag>
+                    ))}
                   </div>
-                </Tile>
-              )}
-              {validationErrors.selectedFacility && (
-                <div className={styles.errorMessage}>{validationErrors.selectedFacility}</div>
-              )}
-            </Column>
-
-            <Column>
-              <h4 className={styles.sectionHeader}>{t('patient', 'Patient')}</h4>
-              {patientSelected && patientUuid ? (
-                <PatientInfo patientUuid={patientUuid} />
-              ) : (
-                <ExtensionSlot
-                  name="patient-search-bar-slot"
-                  state={{
-                    selectPatientAction: selectPatient,
-                    buttonProps: { kind: 'primary' },
+                )}
+                {validationErrors.selectedReasons && (
+                  <div className={styles.errorMessage}>{validationErrors.selectedReasons}</div>
+                )}
+              </Column>
+              <Column>
+                <h4 className={styles.sectionHeader}>{t('clinicalNotes', 'Clinical Notes')}</h4>
+                <TextArea
+                  labelText={t('clinicalNotes', 'Clinical Notes')}
+                  rows={4}
+                  value={clinicalNotes}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    setClinicalNotes(value);
+
+                    if (validationErrors.clinicalNotes) {
+                      setValidationErrors((prev) => ({ ...prev, clinicalNotes: undefined }));
+                    }
                   }}
+                  invalid={!!validationErrors.clinicalNotes}
+                  invalidText={validationErrors.clinicalNotes}
                 />
-              )}
-              {validationErrors.patientUuid && (
-                <div className={styles.errorMessage}>{validationErrors.patientUuid}</div>
-              )}
-            </Column>
-
-            <Column>
-              <h4 className={styles.sectionHeader}>{t('referralReasons', 'Referral Reasons')}</h4>
-              <Search
-                size="lg"
-                placeholder={t('searchReasons', 'Search for referral reasons')}
-                labelText={t('search', 'Search')}
-                value={reasonSearchTerm}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  setReasonSearchTerm(value);
-                }}
-              />
-              {reasonSearchTerm && reasons?.length > 0 && (
-                <div className={styles.searchResults}>
-                  {reasons.map((reason) => (
-                    <Tile key={reason.uuid} className={styles.resultTile} onClick={() => handleReasonSelect(reason)}>
-                      {reason.name.name}
-                    </Tile>
-                  ))}
-                </div>
-              )}
-              {selectedReasons.length > 0 && (
-                <div className={styles.selectedItems}>
-                  {selectedReasons.map((reason) => (
-                    <Tag key={reason.uuid} size="lg" type="gray" filter onClose={() => handleRemoveReason(reason.uuid)}>
-                      {reason.name.name}
-                    </Tag>
-                  ))}
-                </div>
-              )}
-              {validationErrors.selectedReasons && (
-                <div className={styles.errorMessage}>{validationErrors.selectedReasons}</div>
-              )}
-            </Column>
-            <Column>
-              <h4 className={styles.sectionHeader}>{t('clinicalNotes', 'Clinical Notes')}</h4>
-              <TextArea
-                labelText={t('clinicalNotes', 'Clinical Notes')}
-                rows={4}
-                value={clinicalNotes}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  setClinicalNotes(value);
-
-                  if (validationErrors.clinicalNotes) {
-                    setValidationErrors((prev) => ({ ...prev, clinicalNotes: undefined }));
-                  }
-                }}
-                invalid={!!validationErrors.clinicalNotes}
-                invalidText={validationErrors.clinicalNotes}
-              />
-            </Column>
-          </>
-        )}
-      </Stack>
-      <ButtonSet className={styles.buttonSet}>
-        <Button kind="secondary" onClick={closeWorkspace} disabled={isSubmitting}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button kind="primary" type="submit" disabled={isSubmitting || !isFormValid || isLoadingPatient}>
-          {isSubmitting ? (
-            <InlineLoading description={t('submitting', 'Submitting...')} />
-          ) : (
-            t('submitReferral', 'Submit Referral')
+              </Column>
+            </>
           )}
-        </Button>
-      </ButtonSet>
-    </Form>
+        </Stack>
+        <ButtonSet className={styles.buttonSet}>
+          <Button kind="secondary" onClick={closeWorkspace} disabled={isSubmitting}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" type="submit" disabled={isSubmitting || !isFormValid || isLoadingPatient}>
+            {isSubmitting ? (
+              <InlineLoading description={t('submitting', 'Submitting...')} />
+            ) : (
+              t('submitReferral', 'Submit Referral')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
   );
 };
 

package/translations/am.json

@@ -2,6 +2,7 @@
   "actions": "ድርጊቶች",
   "allergen": "አለርጂ",
   "allergies": "አለርጂዎች",
+  "authorizeFailed": "Authorization failed",
   "birthdate": "የትውልድ ቀን",
   "cancel": "ይቅር",
   "Category": "ምድብ",
@@ -26,16 +27,18 @@
   "fromCommunity": "ከማህበረሰብ",
   "fromFacility": "ከተቋም",
   "gender": "ፆታ",
+  "hieDependants": "HIE Dependants",
   "labresults": "የላብራቶሪ ውጤቶች",
   "loading": "በመጫን ላይ...",
   "medications": "መድሃኒቶች",
   "missingNupiIdentiferMessage": "ታካሚው ብሔራዊ የታካሚ ልዩ መለያ (NUPI) የለውም። ሪፈራሎቻቸውን ለማግኘት ታካሚውን በደንበኛ መዝገብ ቤት ያስመዝግቡ።",
   "name": "ስም",
-  "noDependentsFoundFromHIE": "ከHIE ምንም ጥገኞች አልተገኙም",
   "noRecordsToDisplay": "ወደዚህ ተቋም ምንም አዲስ ሪፈራሎች የሉም",
   "noSHRRecords": "የSHR መዝገቦች አልተሳቡም",
   "nupi": "UPI",
   "onsetDate": "የጀመረበት ቀን",
+  "otpFailed": "Failed to send OTP",
+  "otpVerificationSuccessMessage": "OTP Vefification succesfull",
   "patient": "Patient",
   "patientDataMissing": "Patient Data Missing",
   "patientDataNotLoaded": "Patient data could not be loaded. Please try selecting the patient again.",
@@ -51,7 +54,6 @@
   "reaction": "ምላሽ",
   "reasonCode": "የምክንያት ኮድ",
   "referError": "የተቋም ሪፈራል ስህተት",
-  "referErrorDetails": "",
   "referral": "ሪፈራሎች",
   "referralDate": "የሪፈራል ቀን",
   "referralError": "ሪፈራል በማስተናገድ ላይ ስህተት",

package/translations/en.json

@@ -2,6 +2,7 @@
   "actions": "Actions",
   "allergen": "Allergen",
   "allergies": "Allergies",
+  "authorizeFailed": "Authorization failed",
   "birthdate": "Birth Date",
   "cancel": "Cancel",
   "Category": "Category",
@@ -26,16 +27,18 @@
   "fromCommunity": "From Community",
   "fromFacility": "From Facility",
   "gender": "Gender",
+  "hieDependants": "HIE Dependants",
   "labresults": "labResults",
   "loading": "Loading...",
   "medications": "Medications",
   "missingNupiIdentiferMessage": "The patient is missing  national patient unique identifier (NUPI). Please register the patient with the client registry to retrieve their referrals.",
   "name": "Name",
-  "noDependentsFoundFromHIE": "No dependents found from HIE",
   "noRecordsToDisplay": "There are no new referrals to this facility",
   "noSHRRecords": "SHR Records have not been pulled",
   "nupi": "UPI",
   "onsetDate": "Onset Date",
+  "otpFailed": "Failed to send OTP",
+  "otpVerificationSuccessMessage": "OTP Vefification succesfull",
   "patient": "Patient",
   "patientDataMissing": "Patient Data Missing",
   "patientDataNotLoaded": "Patient data could not be loaded. Please try selecting the patient again.",
@@ -51,7 +54,6 @@
   "reaction": "Reaction",
   "reasonCode": "Reason Code",
   "referError": "Facility Referal Error",
-  "referErrorDetails": "",
   "referral": "Referrals",
   "referralDate": "Referral Date",
   "referralError": "Error processing referral",

package/translations/fr.json

@@ -2,6 +2,7 @@
   "actions": "Actions",
   "allergen": "Allergène",
   "allergies": "Allergies",
+  "authorizeFailed": "Authorization failed",
   "birthdate": "Date de naissance",
   "cancel": "Annuler",
   "Category": "Catégorie",
@@ -26,16 +27,18 @@
   "fromCommunity": "De la communauté",
   "fromFacility": "De l'établissement",
   "gender": "Sexe",
+  "hieDependants": "HIE Dependants",
   "labresults": "Résultats de laboratoire",
   "loading": "Chargement...",
   "medications": "Médicaments",
   "missingNupiIdentiferMessage": "Le patient n'a pas d'identifiant national unique (NUPI). Veuillez enregistrer le patient dans le registre des clients pour récupérer ses références.",
   "name": "Nom",
-  "noDependentsFoundFromHIE": "Aucun dépendant trouvé dans le HIE",
   "noRecordsToDisplay": "Il n'y a aucune nouvelle référence pour cet établissement",
   "noSHRRecords": "Les enregistrements SHR n'ont pas été récupérés",
   "nupi": "UPI",
   "onsetDate": "Date de début",
+  "otpFailed": "Failed to send OTP",
+  "otpVerificationSuccessMessage": "OTP Vefification succesfull",
   "patient": "Patient",
   "patientDataMissing": "Données du patient manquantes",
   "patientDataNotLoaded": "Les données du patient n'ont pas pu être chargées. Veuillez essayer de sélectionner à nouveau le patient.",
@@ -51,7 +54,6 @@
   "reaction": "Réaction",
   "reasonCode": "Code de raison",
   "referError": "Erreur de référence de l'établissement",
-  "referErrorDetails": "",
   "referral": "Références",
   "referralDate": "Date de référence",
   "referralError": "Erreur lors du traitement de la référence",

package/translations/sw.json

@@ -2,6 +2,7 @@
   "actions": "Actions",
   "allergen": "Allergen",
   "allergies": "Allergies",
+  "authorizeFailed": "Authorization failed",
   "birthdate": "Date of birth",
   "cancel": "Cancel",
   "Category": "Category",
@@ -26,16 +27,18 @@
   "fromCommunity": "From Community",
   "fromFacility": "From Facility",
   "gender": "Gender",
+  "hieDependants": "HIE Dependants",
   "labresults": "labResults",
   "loading": "Loading...",
   "medications": "Medications",
   "missingNupiIdentiferMessage": "The patient is missing  national patient unique identifier (NUPI). Please register the patient with the client registry to retrieve their referrals.",
   "name": "Name",
-  "noDependentsFoundFromHIE": "No dependents found from HIE",
   "noRecordsToDisplay": "There are no new referrals to this facility",
   "noSHRRecords": "SHR Records have not been pulled",
   "nupi": "UPI",
   "onsetDate": "Onset Date",
+  "otpFailed": "Failed to send OTP",
+  "otpVerificationSuccessMessage": "OTP Vefification succesfull",
   "patient": "Patient",
   "patientDataMissing": "Patient Data Missing",
   "patientDataNotLoaded": "Patient data could not be loaded. Please try selecting the patient again.",
@@ -51,7 +54,6 @@
   "reaction": "Reaction",
   "reasonCode": "Reason Code",
   "referError": "Facility Referral Error",
-  "referErrorDetails": "",
   "referral": "Referrals",
   "referralDate": "Referral Date",
   "referralError": "Error processing referral",

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.tsx", "src/**/*.outdated.tsx"]
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/**/*.outdated.tsx"]
 }