@kenyaemr/esm-admin-app 5.4.4-pre.142 → 5.4.4-pre.15

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/user-details/user-detail.scss

@@ -1,75 +1,203 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/colors';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
-.patientName {
-  @include type.type-style('label-02');
-  color: colors.$gray-100;
-  font-weight: 800;
-  margin-left: layout.$spacing-04;
-  margin-right: layout.$spacing-01;
-}
-.middot {
-  margin: 0 layout.$spacing-01;
-}
-.spanField {
-  margin-left: layout.$spacing-04;
-  margin-right: layout.$spacing-01;
+.providerDetailsContainer {
+  width: 100%;
+  background-color: colors.$gray-10;
+  padding: layout.$spacing-04;
 }
 
-.gender {
-  display: flex;
-  align-items: center;
-  color: colors.$gray-70;
-  gap: layout.$spacing-01;
-  margin-left: layout.$spacing-02;
-}
-.statusTag {
+.patientBanner {
   display: flex;
-  align-items: center;
-  color: colors.$gray-70;
-  gap: layout.$spacing-01;
-  margin-left: layout.$spacing-02;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05 layout.$spacing-06;
+  background-color: colors.$white;
+  border-radius: 6px;
+  border: 1px solid colors.$gray-20;
 }
-.demographics {
+
+.patientAvatar {
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
   display: flex;
   align-items: center;
-  margin-bottom: layout.$spacing-02;
-  color: $text-02;
-  text-transform: uppercase;
+  justify-content: center;
+  background-color: colors.$gray-10;
+  overflow: hidden;
+
+  :global(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 
-.patientBanner {
+.patientInfo {
   display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: layout.$spacing-04;
 }
 
-.patientInfo {
+.row {
   display: flex;
   flex-direction: column;
-  width: 100%;
+}
+
+.patientNameRow {
+  align-items: flex-start;
 }
 
 .flexRow {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  margin-top: layout.$spacing-04;
+  gap: layout.$spacing-03;
+  row-gap: layout.$spacing-02;
 }
-.patientAvatar {
-  margin-top: layout.$spacing-06;
+
+.tagRow {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
+}
+
+.patientName {
+  @include type.type-style('heading-03');
+  color: colors.$gray-100;
+  font-weight: 600;
+  margin: 0;
+}
+
+.gender {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+}
+
+.statusTag {
+  display: inline-flex;
+  align-items: center;
+}
+
+.puidBadge {
+  @include type.type-style('label-02');
+  display: inline-block;
+  background-color: colors.$gray-10;
+  color: colors.$gray-90;
+  padding: layout.$spacing-02 layout.$spacing-03;
+  border-radius: 4px;
+  border: 1px solid colors.$gray-20;
+  align-self: flex-start;
+
+  strong {
+    color: colors.$gray-100;
+    font-weight: 600;
+  }
+}
+
+.spanField {
+  @include type.type-style('body-01');
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-01;
+  color: colors.$gray-90;
+}
+
+.fieldLabel {
+  color: colors.$gray-70;
+  font-weight: 400;
+}
+
+.fieldValue {
+  color: colors.$gray-100;
+  font-weight: 500;
+}
+
+.middot {
+  color: colors.$gray-50;
+  user-select: none;
 }
+
+.demographics {
+  display: flex;
+  align-items: center;
+  margin-bottom: layout.$spacing-02;
+  color: $text-02;
+  text-transform: uppercase;
+}
+
 .viewRoles {
-  margin-top: layout.$spacing-06;
+  margin-top: layout.$spacing-04;
+  padding-top: layout.$spacing-04;
+  border-top: 1px solid colors.$gray-20;
+
+  :global(.cds--accordion) {
+    border-top: none;
+  }
+
+  :global(.cds--accordion__heading) {
+    @include type.type-style('label-02');
+    padding: layout.$spacing-03 0;
+  }
+
+  :global(.cds--accordion__title) {
+    color: colors.$gray-100;
+    font-weight: 600;
+  }
 }
+
 .roleContainer {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: layout.$spacing-02;
+  padding: layout.$spacing-03 0;
+}
+
+.roleName {
+  color: colors.$gray-100;
+  font-weight: 600;
 }
 
 .roleDescription {
+  @include type.type-style('body-01');
   margin: 0;
   color: colors.$gray-70;
-  font-size: type.type-scale(1);
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+  .patientBanner {
+    flex-direction: column;
+    gap: layout.$spacing-04;
+    padding: layout.$spacing-04;
+  }
+
+  .patientAvatar {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .patientName {
+    @include type.type-style('heading-02');
+  }
+
+  .flexRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: layout.$spacing-02;
+  }
+
+  .middot {
+    display: none;
+  }
+
+  .spanField {
+    width: 100%;
+  }
 }