@kenyaemr/esm-admin-app 5.4.4-pre.28 → 5.4.4-pre.281

package/src/components/modal/hwr-sync.modal.tsx

@@ -1,147 +1,218 @@
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Column, Search, ComboBox, InlineLoading } from '@carbon/react';
-import styles from './hwr-sync.modal.scss';
-import { useConfig, showSnackbar, formatDate, parseDate, showToast, restBaseUrl } from '@openmrs/esm-framework';
+import { useConfig, showSnackbar, showToast, restBaseUrl } from '@openmrs/esm-framework';
 import { mutate } from 'swr';
-import { CustomHIEPractitionerResponse, type PractitionerResponse, type ProviderResponse } from '../../types';
+
+import styles from './hwr-sync.modal.scss';
+import { type ProviderResponse } from '../../types';
 import { ConfigObject } from '../../config-schema';
-import { searchHealthCareWork, HealthWorkerAdapter } from '../hook/healthWorkerAdapter';
 import { createProviderAttribute, updateProviderAttributes } from './hwr-sync.resource';
+import { searchHealthCareWork, ProfessionalRegistryResponse } from '../hook/healthWorkerRegistry';
+import {
+  useProfessionalRegistryIdentificationTypes,
+  useProfessionalRegistryRegulators,
+} from '../hook/useProfessionalRegistryEnums';
 
 interface HWRSyncModalProps {
   close: () => void;
   provider: ProviderResponse;
 }
 
+interface EnumEntry {
+  code: string;
+  label: string;
+}
+
+const pickCurrentLicense = (licenses: ProfessionalRegistryResponse['professional']['licenses']) => {
+  if (!licenses || licenses.length === 0) {
+    return undefined;
+  }
+  const sorted = [...licenses]
+    .filter((l) => l.license_end)
+    .sort((a, b) => new Date(b.license_end).getTime() - new Date(a.license_end).getTime());
+  const now = Date.now();
+  return sorted.find((l) => new Date(l.license_end).getTime() >= now) ?? sorted[0];
+};
+
 const HWRSyncModal: React.FC<HWRSyncModalProps> = ({ close, provider }) => {
   const { t } = useTranslation();
   const [syncLoading, setSyncLoading] = useState(false);
 
-  const config = useConfig<ConfigObject>();
   const {
-    providerNationalIdUuid,
-    licenseBodyUuid,
+    licenseNumberUuid,
     licenseExpiryDateUuid,
+    licenseBodyUuid,
+    qualificationUuid,
+    specialtyUuid,
+    providerCadreUuid,
+    practiceTypeUuid,
+    providerNationalIdUuid,
     passportNumberUuid,
-    licenseNumberUuid,
-    identifierTypes,
+    providerUniqueIdentifierAttributeTypeUuid,
+    externalProviderIdentifierUuid,
+    providerHieFhirReference,
     phoneNumberUuid,
-    qualificationUuid,
     providerAddressUuid,
-    providerHieFhirReference,
+  } = useConfig<ConfigObject>();
+  const { regulators } = useProfessionalRegistryRegulators();
+  const { identificationTypes } = useProfessionalRegistryIdentificationTypes();
+
+  const storedIdentifiers = useMemo(() => {
+    const attrValue = (uuid: string) => provider?.attributes?.find((a) => a.attributeType?.uuid === uuid)?.value || '';
+
+    return {
+      nationalId: attrValue(providerNationalIdUuid),
+      puid: attrValue(providerUniqueIdentifierAttributeTypeUuid),
+      externalRef: attrValue(externalProviderIdentifierUuid),
+      passport: attrValue(passportNumberUuid),
+      licenseBody: attrValue(licenseBodyUuid),
+    };
+  }, [
+    provider,
+    providerNationalIdUuid,
     providerUniqueIdentifierAttributeTypeUuid,
-    regulatorOptions,
-  } = config;
-
-  const attributeMapping = {
-    [identifierTypes[0]?.key]:
-      provider.attributes.find((attr) => attr.attributeType.uuid === providerNationalIdUuid)?.value || '--',
-    [identifierTypes[1]?.key]:
-      provider.attributes.find((attr) => attr.attributeType.uuid === licenseBodyUuid)?.value || '--',
-    [identifierTypes[2]?.key]:
-      provider.attributes.find((attr) => attr.attributeType.uuid === passportNumberUuid)?.value || '--',
-  };
+    externalProviderIdentifierUuid,
+    passportNumberUuid,
+    licenseBodyUuid,
+  ]);
+
+  const initialIdentifierType = useMemo(() => {
+    if (storedIdentifiers.nationalId) {
+      return 'National ID';
+    }
+    if (storedIdentifiers.externalRef) {
+      return 'registration_number';
+    }
+    if (storedIdentifiers.passport) {
+      return 'Passport';
+    }
+    return '';
+  }, [storedIdentifiers]);
+
+  const initialIdentifier = useMemo(() => {
+    if (storedIdentifiers.nationalId) {
+      return storedIdentifiers.nationalId;
+    }
+    if (storedIdentifiers.externalRef) {
+      return storedIdentifiers.externalRef;
+    }
+    if (storedIdentifiers.passport) {
+      return storedIdentifiers.passport;
+    }
+    return '';
+  }, [storedIdentifiers]);
+
+  const initialRegulator = storedIdentifiers.licenseBody;
 
   const [searchHWR, setSearchHWR] = useState({
-    identifierType: identifierTypes[0]?.key,
-    identifier: attributeMapping[identifierTypes[0]?.key],
-    regulator: regulatorOptions[0]?.key,
+    identifierType: initialIdentifierType,
+    identifier: initialIdentifier,
+    regulator: initialRegulator,
   });
 
-  const handleIdentifierTypeChange = (selectedItem: { key: string; name: string } | null) => {
-    const selectedKey = selectedItem?.key ?? '';
+  useEffect(() => {
     setSearchHWR((prev) => ({
       ...prev,
-      identifierType: selectedKey,
-      identifier: attributeMapping[selectedKey] || '',
+      identifierType: prev.identifierType || initialIdentifierType,
+      identifier: prev.identifier || initialIdentifier,
+      regulator: prev.regulator || initialRegulator,
     }));
-  };
+  }, [initialIdentifierType, initialIdentifier, initialRegulator]);
+
+  const handleIdentifierTypeChange = (newType: string) => {
+    const valueForType: Record<string, string> = {
+      'National ID': storedIdentifiers.nationalId,
+      registration_number: storedIdentifiers.externalRef,
+      Passport: storedIdentifiers.passport,
+    };
 
-  const handleRegulatorChange = (selectedItem: { key: string; name: string } | null) => {
-    const selectedKey = selectedItem?.key ?? '';
     setSearchHWR((prev) => ({
       ...prev,
-      regulator: selectedKey,
+      identifierType: newType,
+      identifier: valueForType[newType] ?? '',
     }));
   };
 
-  const isSearchDisabled = () => !searchHWR.identifier;
+  const selectedIdentificationType = useMemo<EnumEntry | null>(
+    () => identificationTypes?.find((i) => i.code === searchHWR.identifierType) ?? null,
+    [identificationTypes, searchHWR.identifierType],
+  );
+
+  const selectedRegulator = useMemo<EnumEntry | null>(
+    () => regulators?.find((r) => r.code === searchHWR.regulator) ?? null,
+    [regulators, searchHWR.regulator],
+  );
+
+  const isSearchDisabled = () =>
+    !searchHWR.identifier || !searchHWR.identifierType || !searchHWR.regulator || syncLoading;
 
   const handleSync = async () => {
-    try {
-      setSyncLoading(true);
-      const unifiedResponse = await searchHealthCareWork(
-        searchHWR.identifierType,
-        searchHWR.identifier,
-        searchHWR.regulator,
-      );
+    setSyncLoading(true);
 
-      const normalizedData = HealthWorkerAdapter.normalize(unifiedResponse);
+    try {
+      const response = await searchHealthCareWork(searchHWR.identifierType, searchHWR.identifier, searchHWR.regulator);
 
-      if (!normalizedData) {
+      if (!response?.professional) {
         throw new Error(t('noResults', 'No results found'));
       }
 
+      const { membership, contacts, identifiers, professional_details, licenses } = response.professional;
+      const currentLicense = pickCurrentLicense(licenses);
+
       const updatableAttributes = [
-        { attributeType: licenseNumberUuid, value: normalizedData.licenseNumber },
-        { attributeType: licenseBodyUuid, value: normalizedData.registrationId },
+        { attributeType: licenseNumberUuid, value: currentLicense?.external_reference_id },
         {
           attributeType: licenseExpiryDateUuid,
-          value: normalizedData.licenseEndDate ? parseDate(normalizedData.licenseEndDate) : null,
-        },
-        { attributeType: phoneNumberUuid, value: normalizedData.phoneNumber },
-        { attributeType: qualificationUuid, value: normalizedData.qualification },
-        {
-          attributeType: providerHieFhirReference,
-          value: JSON.stringify({
-            ...unifiedResponse.data,
-            fhirFormat: unifiedResponse.fhirFormat,
-            searchParameters: {
-              regulator: searchHWR.regulator,
-              identifierType: searchHWR.identifierType,
-            },
-          }),
-        },
-        { attributeType: providerAddressUuid, value: normalizedData.email },
-        { attributeType: providerNationalIdUuid, value: normalizedData.nationalId },
-        {
-          attributeType: providerUniqueIdentifierAttributeTypeUuid,
-          value: normalizedData.providerUniqueIdentifier,
+          value: currentLicense?.license_end ? new Date(currentLicense.license_end).toISOString() : null,
         },
-      ].filter((attr) => attr.value !== undefined && attr.value !== null && attr.value !== '');
+        { attributeType: licenseBodyUuid, value: membership?.licensing_body },
+        { attributeType: qualificationUuid, value: professional_details?.educational_qualifications },
+        { attributeType: specialtyUuid, value: membership?.specialty },
+        { attributeType: providerCadreUuid, value: professional_details?.professional_cadre },
+        { attributeType: practiceTypeUuid, value: professional_details?.practice_type },
+
+        { attributeType: providerNationalIdUuid, value: identifiers?.identification_number },
+        { attributeType: providerUniqueIdentifierAttributeTypeUuid, value: membership?.id },
+        { attributeType: externalProviderIdentifierUuid, value: membership?.external_reference_id },
+        { attributeType: providerHieFhirReference, value: membership?.id },
+
+        { attributeType: phoneNumberUuid, value: contacts?.phone },
+        { attributeType: providerAddressUuid, value: contacts?.email },
+      ].filter(
+        (attr): attr is { attributeType: string; value: string } =>
+          attr.value !== undefined && attr.value !== null && attr.value !== '',
+      );
 
       await Promise.all(
         updatableAttributes.map((attr) => {
-          const existingAttribute = provider.attributes.find(
-            (at) => at.attributeType.uuid === attr.attributeType,
-          )?.uuid;
-
-          const payload = {
-            attributeType: attr.attributeType,
-            value: attr.value,
-          };
-
-          if (!existingAttribute) {
-            return createProviderAttribute(payload, provider.uuid);
-          }
-          return updateProviderAttributes(payload, provider.uuid, existingAttribute);
+          const existing = provider.attributes?.find((at) => at.attributeType?.uuid === attr.attributeType)?.uuid;
+          const payload = { attributeType: attr.attributeType, value: attr.value };
+          return existing
+            ? updateProviderAttributes(payload, provider.uuid, existing)
+            : createProviderAttribute(payload, provider.uuid);
         }),
       );
 
       mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/provider`));
+
       showSnackbar({
-        title: 'Success',
+        title: t('syncSuccess', 'Sync successful'),
         kind: 'success',
-        subtitle: t('syncMessage', 'user details synced successfully'),
+        subtitle: t('syncMessage', 'Provider details synced from the registry'),
+        isLowContrast: true,
       });
+
       close();
-    } catch (err) {
+    } catch (err: any) {
       showToast({
         critical: false,
         kind: 'error',
-        description: t('errorSyncMsg', `Failed to sync the account with ${searchHWR.identifier}. ${err}`),
-        title: t('hwrERROR', 'Sync Failed'),
+        description: t('errorSyncMsg', 'Failed to sync {{identifier}}: {{error}}', {
+          identifier: searchHWR.identifier,
+          error: err?.message ?? 'unknown error',
+        }),
+        title: t('hwrError', 'Sync failed'),
       });
     } finally {
       setSyncLoading(false);
@@ -153,53 +224,70 @@ const HWRSyncModal: React.FC<HWRSyncModalProps> = ({ close, provider }) => {
       <div className="cds--modal-header">
         <h3 className="cds--modal-header__heading">{t('healthWorkerRegistry', 'Health worker registry')}</h3>
       </div>
+
       <div className="cds--modal-content">
-        <p>{t('healthWorkerSync', 'Health worker information to be synced with the registry.')}</p>
+        <p className={styles.intro}>
+          {t(
+            'healthWorkerSync',
+            'Look up this provider in the Kenya health worker registry and overwrite local attributes with registry values.',
+          )}
+        </p>
+
         <div className={styles.modalContainer}>
           <Column className={styles.identifierTypeColumn}>
             <ComboBox
-              onChange={({ selectedItem }) => handleIdentifierTypeChange(selectedItem)}
-              id="formIdentifierType"
+              id="syncIdentifierType"
               titleText={t('identificationType', 'Identification Type')}
               placeholder={t('chooseIdentifierType', 'Choose identifier type')}
-              initialSelectedItem={identifierTypes.find((item) => item.key === searchHWR.identifierType)}
-              items={identifierTypes}
-              itemToString={(item) => (item ? item.name : '')}
-              className={styles.ComboBox}
+              items={identificationTypes ?? []}
+              itemToString={(item) => item?.label ?? ''}
+              selectedItem={selectedIdentificationType}
+              onChange={({ selectedItem }) => handleIdentifierTypeChange(selectedItem?.code ?? '')}
+              className={styles.comboBox}
             />
           </Column>
+
           <Column className={styles.identifierTypeColumn}>
             <ComboBox
-              onChange={({ selectedItem }) => handleRegulatorChange(selectedItem)}
-              id="regulatorOptions"
+              id="syncRegulator"
               titleText={t('regulator', 'Regulator')}
               placeholder={t('chooseRegulator', 'Choose regulator')}
-              initialSelectedItem={regulatorOptions.find((item) => item.key === searchHWR.regulator)}
-              items={regulatorOptions}
-              itemToString={(item) => (item ? item.name : '')}
-              className={styles.ComboBox}
+              items={regulators ?? []}
+              itemToString={(item) => item?.label ?? ''}
+              selectedItem={selectedRegulator}
+              onChange={({ selectedItem }) =>
+                setSearchHWR((prev) => ({ ...prev, regulator: selectedItem?.code ?? '' }))
+              }
+              className={styles.comboBox}
             />
           </Column>
+
           <Column className={styles.identifierTypeColumn}>
             <span className={styles.identifierTypeHeader}>{t('identifierNumber', 'Identifier number*')}</span>
             <Search
+              id="syncSearch"
               labelText={t('enterIdentifierNumber', 'Enter identifier number')}
-              className={styles.formSearch}
-              value={searchHWR.identifier}
               placeholder={t('enterIdentifierNumber', 'Enter identifier number')}
-              id="formSearchHealthWorkers"
-              disabled={isSearchDisabled()}
-              onChange={(value) => setSearchHWR({ ...searchHWR, identifier: value.target.value })}
+              value={searchHWR.identifier}
+              onChange={(e) => setSearchHWR((prev) => ({ ...prev, identifier: e.target.value }))}
+              className={styles.formSearch}
             />
           </Column>
         </div>
       </div>
+
       <div className="cds--modal-footer">
-        <Button kind="secondary" onClick={close}>
+        <Button kind="secondary" onClick={close} disabled={syncLoading}>
           {t('cancel', 'Cancel')}
         </Button>
-        <Button disabled={isSearchDisabled() || syncLoading} onClick={handleSync}>
-          {syncLoading ? <InlineLoading status="active" description={t('syncing', 'Syncing...')} /> : t('sync', 'Sync')}
+        <Button onClick={handleSync} disabled={isSearchDisabled()}>
+          {syncLoading ? (
+            <span className={styles.syncingLabel}>
+              <InlineLoading status="active" description={t('syncing', 'Syncing...')} />
+            </span>
+          ) : (
+            t('sync', 'Sync')
+          )}
         </Button>
       </div>
     </>

package/src/components/users/manage-users/manage-user-role-scope/user-role-scope-workspace/user-role-scope.workspace.tsx

@@ -6,6 +6,8 @@ import {
   restBaseUrl,
   showSnackbar,
   useLayoutType,
+  Workspace2,
+  Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 import styles from '../../../manage-users/user-management.workspace.scss';
@@ -29,15 +31,13 @@ import { useSystemUserRoleConfigSetting } from '../../../../hook/useSystemRoleSe
 import UserRoleScopeFormFields from './user-role-scope-fields.component';
 import StockUserRoleScopesList from '../user-role-scope-list/user-role-scope-list.component';
 
-type UserRoleScopeWorkspaceProps = DefaultWorkspaceProps & {
+type UserRoleScopeWorkspaceProps = {
   user?: User;
 };
 
-const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
+const UserRoleScopeWorkspace: React.FC<Workspace2DefinitionProps<UserRoleScopeWorkspaceProps, {}, {}>> = ({
   closeWorkspace,
-  promptBeforeClosing,
-  closeWorkspaceWithSavedChanges,
-  user = {} as User,
+  workspaceProps: { user = {} as User },
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -46,7 +46,7 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
   const { stockLocations, isLoading: loadinglocation } = useStockTagLocations();
   const { rolesConfig, error } = useSystemUserRoleConfigSetting();
   const { items, loadingRoleScope } = useUserRoleScopes();
-
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [userRoleScopeInitialValues, setUserRoleScopeInitialValues] = useState<UserRoleScope | null>(null);
   const handleEditUserRoleScope = useCallback((userRoleScope: UserRoleScope) => {
     setUserRoleScopeInitialValues(userRoleScope);
@@ -93,9 +93,9 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
   const { errors, isSubmitting, isDirty } = roleScopeformMethods.formState;
   useEffect(() => {
     if (isDirty) {
-      promptBeforeClosing(() => isDirty);
+      setHasUnsavedChanges(true);
     }
-  }, [isDirty, promptBeforeClosing]);
+  }, [isDirty, setHasUnsavedChanges]);
 
   useEffect(() => {
     if (userRoleScopeInitialValues && !loadingStock) {
@@ -154,7 +154,7 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
           const response = await createOrUpdateUserRoleScope(userRoleScopeUrl, roleScope, user?.uuid ?? '');
           if (response.ok) {
             showNotification('userRoleScopeSaved', 'User role scope saved successfully', 'success');
-            closeWorkspaceWithSavedChanges();
+            closeWorkspace({ discardUnsavedChanges: true });
           }
         }),
       );
@@ -184,9 +184,9 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
 
   useEffect(() => {
     if (isDirty) {
-      promptBeforeClosing(() => isDirty);
+      setHasUnsavedChanges(true);
     }
-  }, [isDirty, promptBeforeClosing]);
+  }, [isDirty, setHasUnsavedChanges]);
 
   function extractInventoryRoleNames(rolesConfig) {
     return rolesConfig.find((category) => category.category === ROLE_CATEGORIES.CORE_INVENTORY)?.roles || [];
@@ -225,7 +225,7 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
   );
 
   return (
-    <>
+    <Workspace2 title={t('userRoleScopeWorkspace', 'User Role Scope Workspace')} hasUnsavedChanges={hasUnsavedChanges}>
       <div>
         <StockUserRoleScopesList onEditUserRoleScope={handleEditUserRoleScope} user={user} />
       </div>
@@ -309,7 +309,7 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
           </form>
         </FormProvider>
       )}
-    </>
+    </Workspace2>
   );
 };