@palladium-ethiopia/esm-admin-app 5.4.2-pre.100

package/src/components/modal/hwr-empty.modal.component.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { HWR_API_NO_CREDENTIALS, RESOURCE_NOT_FOUND, UNKNOWN } from '../../constants';
+
+interface HWREmptyModalProps {
+  close: () => void;
+  errorCode?: string;
+}
+
+const HWREmptyModal: React.FC<HWREmptyModalProps> = ({ close, errorCode }) => {
+  const { t } = useTranslation();
+
+  const errorMessages = {
+    [RESOURCE_NOT_FOUND]: t(
+      'ResourceNotFound',
+      'The Health Work Registry is not reachable, kindly confirm your internet connectivity and try again. Do you want to continue to create an account',
+    ),
+    [HWR_API_NO_CREDENTIALS]: t(
+      'noHwrApi',
+      'Health Care Worker Registry API credentials not configured, Kindly contact system admin. Do you want to continue to create an account',
+    ),
+    [UNKNOWN]: t(
+      'unknownError',
+      'An error occurred while searching Health Worker Registry, kindly contact system admin. Do you want to continue to create an account',
+    ),
+  };
+
+  const defaultMessage = t(
+    'HealthworkerNotFound',
+    'The health worker records could not be found in Health Worker registry, do you want to continue to create an account',
+  );
+
+  const message = errorMessages[errorCode] || defaultMessage;
+
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{t('healthWorkerRegistryEmpty', 'Create an Account')}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>{message}</p>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button onClick={close}>{t('continue', 'Continue to registration')}</Button>
+      </div>
+    </>
+  );
+};
+
+export default HWREmptyModal;

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

@@ -0,0 +1,30 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.modalContainer {
+  display: flex;
+  justify-content: center;
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-03;
+  margin-bottom: layout.$spacing-10;
+  height: auto;
+  align-items: center;
+  width: 100%;
+}
+
+.identifierTypeColumn {
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-10;
+  flex-grow: 1;
+  min-width: 250px;
+}
+
+.identifierTypeHeader {
+  color: colors.$gray-70;
+  display: inline-block;
+  font-size: layout.$spacing-04;
+  line-height: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+  vertical-align: baseline;
+}

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

@@ -0,0 +1,209 @@
+import React, { 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 { mutate } from 'swr';
+import { CustomHIEPractitionerResponse, type PractitionerResponse, type ProviderResponse } from '../../types';
+import { ConfigObject } from '../../config-schema';
+import { searchHealthCareWork, HealthWorkerAdapter } from '../hook/healthWorkerAdapter';
+import { createProviderAttribute, updateProviderAttributes } from './hwr-sync.resource';
+
+interface HWRSyncModalProps {
+  close: () => void;
+  provider: ProviderResponse;
+}
+
+const HWRSyncModal: React.FC<HWRSyncModalProps> = ({ close, provider }) => {
+  const { t } = useTranslation();
+  const [syncLoading, setSyncLoading] = useState(false);
+
+  const config = useConfig<ConfigObject>();
+  const {
+    providerNationalIdUuid,
+    licenseBodyUuid,
+    licenseExpiryDateUuid,
+    passportNumberUuid,
+    licenseNumberUuid,
+    identifierTypes,
+    phoneNumberUuid,
+    qualificationUuid,
+    providerAddressUuid,
+    providerHieFhirReference,
+    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 || '--',
+  };
+
+  const [searchHWR, setSearchHWR] = useState({
+    identifierType: identifierTypes[0]?.key,
+    identifier: attributeMapping[identifierTypes[0]?.key],
+    regulator: regulatorOptions[0]?.key,
+  });
+
+  const handleIdentifierTypeChange = (selectedItem: { key: string; name: string } | null) => {
+    const selectedKey = selectedItem?.key ?? '';
+    setSearchHWR((prev) => ({
+      ...prev,
+      identifierType: selectedKey,
+      identifier: attributeMapping[selectedKey] || '',
+    }));
+  };
+
+  const handleRegulatorChange = (selectedItem: { key: string; name: string } | null) => {
+    const selectedKey = selectedItem?.key ?? '';
+    setSearchHWR((prev) => ({
+      ...prev,
+      regulator: selectedKey,
+    }));
+  };
+
+  const isSearchDisabled = () => !searchHWR.identifier;
+
+  const handleSync = async () => {
+    try {
+      setSyncLoading(true);
+      const unifiedResponse = await searchHealthCareWork(
+        searchHWR.identifierType,
+        searchHWR.identifier,
+        searchHWR.regulator,
+      );
+
+      const normalizedData = HealthWorkerAdapter.normalize(unifiedResponse);
+
+      if (!normalizedData) {
+        throw new Error(t('noResults', 'No results found'));
+      }
+
+      const updatableAttributes = [
+        { attributeType: licenseNumberUuid, value: normalizedData.licenseNumber },
+        { attributeType: licenseBodyUuid, value: normalizedData.registrationId },
+        {
+          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,
+        },
+      ].filter((attr) => 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);
+        }),
+      );
+
+      mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/provider`));
+      showSnackbar({
+        title: 'Success',
+        kind: 'success',
+        subtitle: t('syncMessage', 'user details synced successfully'),
+      });
+      close();
+    } catch (err) {
+      showToast({
+        critical: false,
+        kind: 'error',
+        description: t('errorSyncMsg', `Failed to sync the account with ${searchHWR.identifier}. ${err}`),
+        title: t('hwrERROR', 'Sync Failed'),
+      });
+    } finally {
+      setSyncLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <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>
+        <div className={styles.modalContainer}>
+          <Column className={styles.identifierTypeColumn}>
+            <ComboBox
+              onChange={({ selectedItem }) => handleIdentifierTypeChange(selectedItem)}
+              id="formIdentifierType"
+              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}
+            />
+          </Column>
+          <Column className={styles.identifierTypeColumn}>
+            <ComboBox
+              onChange={({ selectedItem }) => handleRegulatorChange(selectedItem)}
+              id="regulatorOptions"
+              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}
+            />
+          </Column>
+          <Column className={styles.identifierTypeColumn}>
+            <span className={styles.identifierTypeHeader}>{t('identifierNumber', 'Identifier number*')}</span>
+            <Search
+              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 })}
+            />
+          </Column>
+        </div>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={isSearchDisabled() || syncLoading} onClick={handleSync}>
+          {syncLoading ? <InlineLoading status="active" description={t('syncing', 'Syncing...')} /> : t('sync', 'Sync')}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default HWRSyncModal;

package/src/components/modal/hwr-sync.resource.ts

@@ -0,0 +1,23 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+export const createProviderAttribute = (payload, providerUuid: string) => {
+  const url = `${restBaseUrl}/provider/${providerUuid}/attribute`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const updateProviderAttributes = (payload, providerUuid: string, attributeUuid: string) => {
+  const url = `${restBaseUrl}/provider/${providerUuid}/attribute/${attributeUuid}`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};

package/src/components/provider-banner/provider-banner.component.tsx

@@ -0,0 +1,106 @@
+import { useSession } from '@openmrs/esm-framework';
+import React from 'react';
+import { type Attribute, useProviderAttributes } from './provider-banner.resource';
+import styles from './provider-banner.module.scss';
+import { InlineLoading, Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import upperCase from 'lodash-es/upperCase';
+
+const ProviderBannerTag: React.FC = () => {
+  const { currentProvider } = useSession();
+  const { t } = useTranslation();
+  const currentProviderUuid = currentProvider?.uuid;
+  const { isLoading, error, providerAttributes } = useProviderAttributes(currentProviderUuid);
+
+  const getAttributeValue = (attributes: Array<Attribute>, displayName: string): string => {
+    const attribute = attributes?.find((attr) => attr.attributeType.display === displayName);
+    return attribute?.value || '';
+  };
+
+  const getLicenseStatus = (expiryDate: string) => {
+    if (!expiryDate || expiryDate === '0000-00-00') {
+      return { status: 'unknown', message: t('unlicensed', 'Unlicensed'), tagType: 'magenta' as const };
+    }
+
+    const today = new Date();
+    const expiry = new Date(expiryDate);
+    const timeDiff = expiry.getTime() - today.getTime();
+    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
+
+    if (daysDiff < 0) {
+      return { status: 'expired', message: t('licenseExpired', 'License Expired'), tagType: 'red' as const };
+    } else if (daysDiff <= 30) {
+      return { status: 'warning', message: t('expiresSoon', 'Expires Soon'), tagType: 'blue' as const };
+    } else if (daysDiff <= 90) {
+      return { status: 'caution', message: t('expiresIn3Months', 'Expires in 3 months'), tagType: 'teal' as const };
+    } else {
+      return { status: 'valid', message: t('validLicense', 'Valid License'), tagType: 'green' as const };
+    }
+  };
+
+  const formatDate = (dateString: string): string => {
+    if (!dateString || dateString === '000-000-00') {
+      return '0000-00-00';
+    }
+    try {
+      const date = new Date(dateString);
+      return date.toISOString().split('T')[0];
+    } catch {
+      return '0000-00-00';
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className={styles.loading}>
+        <InlineLoading description={t('loadingState', 'loading' + '...')} />
+      </div>
+    );
+  }
+
+  const name = upperCase(providerAttributes?.person?.display) || 'NONE';
+  const hwi = getAttributeValue(providerAttributes?.attributes, 'Provider unique identifier') || 'NONE';
+  const licenseExpiry = getAttributeValue(providerAttributes?.attributes, 'License Expiry Date');
+  const formattedExpiry = formatDate(licenseExpiry) || '0000-00-00';
+  const shouldShowLicenseExpiry = !!licenseExpiry;
+  const licenseStatus = getLicenseStatus(licenseExpiry);
+
+  return (
+    <div className={styles.providerBanner}>
+      <div className={styles.bannerContent}>
+        <div className={styles.divider} />
+        <div className={styles.infoItem}>
+          <span className={styles.label}>{t('identifierProvider', 'Identifier:')}</span>
+          <span className={`${styles.value} ${styles.hwiValue}`}>{hwi}</span>
+        </div>
+
+        <div className={styles.divider} />
+
+        <>
+          <div className={styles.infoItem}>
+            <span className={styles.label}>{t('nameProvider', 'Name:')}</span>
+            <span className={styles.value}>{name}</span>
+          </div>
+          <div className={styles.divider} />
+          <div className={styles.infoItem}>
+            <span className={styles.label}>{t('licenseProvider', 'License:')}</span>
+
+            {shouldShowLicenseExpiry && (
+              <>
+                <span className={styles.value}>{formattedExpiry}</span>
+              </>
+            )}
+
+            <span className={styles.statusIndicator}>
+              <Tag size="md" type={licenseStatus.tagType}>
+                {licenseStatus.message}
+              </Tag>
+            </span>
+          </div>
+        </>
+      </div>
+    </div>
+  );
+};
+
+export default ProviderBannerTag;

package/src/components/provider-banner/provider-banner.module.scss

@@ -0,0 +1,51 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.providerBanner {
+  position: relative;
+  padding: layout.$spacing-03 layout.$spacing-05;
+}
+
+.bannerContent {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  @include type.type-style('caption-01');
+}
+
+.infoItem {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.divider {
+  width: 1px;
+  height: layout.$spacing-06;
+  background-color: rgba(244, 244, 244, 0.4);
+  margin-inline-start: layout.$spacing-04;
+}
+.label {
+  color: colors.$gray-90;
+  content: '';
+  margin-left: layout.$spacing-01;
+}
+
+.value {
+  color: colors.$gray-90;
+  font-weight: 600;
+  font-size: 1rem;
+  white-space: nowrap;
+  @include type.type-style('caption-01');
+}
+
+.hwiValue {
+  font-size: 0.875rem;
+}
+
+.loading {
+  text-align: center;
+  padding: layout.$spacing-03 0;
+}

package/src/components/provider-banner/provider-banner.resource.ts

@@ -0,0 +1,29 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export interface ProviderAttributesResponse {
+  person: Person;
+  attributes: Array<Attribute>;
+}
+
+export interface Person {
+  display: string;
+}
+
+export interface Attribute {
+  attributeType: AttributeType;
+  value: string;
+}
+
+export interface AttributeType {
+  display: string;
+}
+
+export const useProviderAttributes = (uuid: string) => {
+  const customRepresentation = 'custom:(person:(display),attributes:(attributeType:(display),value))';
+  const url = `${restBaseUrl}/provider/${uuid}?v=${customRepresentation}`;
+
+  const { isLoading, error, data } = useSWR<FetchResponse<ProviderAttributesResponse>>(url, openmrsFetch);
+  const providerAttributes = data?.data;
+  return { isLoading, error, providerAttributes };
+};

package/src/components/side-menu/left-panel.scss

@@ -0,0 +1,42 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.leftPanel {
+  border-right: 1px solid colors.$gray-20;
+  padding-top: layout.$spacing-05;
+
+  // Left nav menu item
+  :global(.cds--side-nav__link) {
+    color: colors.$gray-70;
+    @include type.type-style('heading-compact-01');
+
+    &:focus,
+    &:hover {
+      background-color: colors.$gray-10-hover;
+    }
+
+    // Active menu item
+    &:global(.active-left-nav-link) {
+      color: colors.$gray-100;
+      border-left: layout.$spacing-02 solid var(--brand-01);
+      outline: none;
+      padding: 0 layout.$spacing-04;
+      background-color: colors.$gray-20;
+    }
+  }
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  :global(.cds--side-nav__link) {
+    height: layout.$spacing-07;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  :global(.cds--side-nav__link) {
+    height: layout.$spacing-09;
+  }
+}

package/src/components/side-menu/left-pannel.component.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SideNav } from '@carbon/react';
+import { attach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import styles from './left-panel.scss';
+
+attach('nav-menu-slot', 'admin-left-panel');
+
+const LeftPanel: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+
+  return (
+    isDesktop(layout) && (
+      <SideNav aria-label={t('adminLeftPannel', 'Admin left panel')} className={styles.leftPanel} expanded>
+        <ExtensionSlot name="admin-left-panel-slot" />
+      </SideNav>
+    )
+  );
+};
+
+export default LeftPanel;

package/src/components/users/header/header.scss

@@ -0,0 +1,90 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: layout.$spacing-12;
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
+  display: flex;
+  justify-content: space-between;
+  padding: layout.$spacing-05;
+}
+
+.leftJustifiedItems {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  align-items: center;
+}
+
+.rightJustifiedItems {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.pageName {
+  @include type.type-style('heading-04');
+}
+
+.pageLabels {
+  margin: layout.$spacing-05;
+
+  p:first-of-type {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.dateAndLocation {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.userContainer {
+  display: flex;
+  justify-content: flex-end;
+  gap: layout.$spacing-05;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .date-and-location {
+    & > svg {
+      order: -1;
+    }
+    & > span:nth-child(2) {
+      order: -2;
+    }
+  }
+}
+
+.userIcon {
+  fill: $ui-05;
+  margin: layout.$spacing-01;
+}
+
+.svgContainer svg {
+  width: layout.$spacing-10;
+  height: layout.$spacing-10;
+  margin-right: layout.$spacing-06;
+  fill: var(--brand-03);
+}