@kenyaemr/esm-admin-app 5.4.2-pre.2430 → 5.4.2-pre.2432

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"adminLeftPanelLink","name":"admin-left-panel-link","slot":"admin-left-panel-slot"},{"component":"userManagementLeftPannelLink","name":"user-management-left-panel-link","slot":"admin-left-panel-slot"},{"component":"etlAdministrationLeftPannelLink","name":"etl-administration-left-panel-link","slot":"admin-left-panel-slot"},{"component":"locationsLeftPanelLink","name":"locations-left-panel-link","slot":"admin-left-panel-slot"},{"component":"facilitySetupLeftPanelLink","name":"facility-setup-left-panel-link","slot":"admin-left-panel-slot"}],"workspaces":[{"name":"manage-user-workspace","component":"manageUserWorkspace","title":"Manage User Workspace","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","title":"User Rple Scope Workspace","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"add-location-workspace","title":"Add Location","component":"addLocation","type":"workspace"},{"name":"search-location-workspace","title":"Search Location","component":"searchLocationWorkspace","type":"workspace"},{"name":"hwr-sync-workspace","title":"HWR Sync Workspace","component":"hwrSyncWorkspace","type":"other-form"},{"name":"hwr-sync-modal","title":"HWR Sync Modal","component":"hwrSyncModal","type":"modal"}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"},{"component":"hwrConfirmationModal","name":"hwr-confirmation-modal"},{"component":"hwrEmptyModal","name":"hwr-empty-modal"},{"component":"hwrSyncModal","name":"hwr-syncing-modal"}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.2-pre.2430"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"adminLeftPanelLink","name":"admin-left-panel-link","slot":"admin-left-panel-slot"},{"component":"userManagementLeftPannelLink","name":"user-management-left-panel-link","slot":"admin-left-panel-slot"},{"component":"etlAdministrationLeftPannelLink","name":"etl-administration-left-panel-link","slot":"admin-left-panel-slot"},{"component":"locationsLeftPanelLink","name":"locations-left-panel-link","slot":"admin-left-panel-slot"},{"component":"facilitySetupLeftPanelLink","name":"facility-setup-left-panel-link","slot":"admin-left-panel-slot"},{"component":"providerBanner","name":"provider-banner","slot":"top-nav-info-slot","order":1}],"workspaces":[{"name":"manage-user-workspace","component":"manageUserWorkspace","title":"Manage User Workspace","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","title":"User Rple Scope Workspace","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"add-location-workspace","title":"Add Location","component":"addLocation","type":"workspace"},{"name":"search-location-workspace","title":"Search Location","component":"searchLocationWorkspace","type":"workspace"},{"name":"hwr-sync-workspace","title":"HWR Sync Workspace","component":"hwrSyncWorkspace","type":"other-form"},{"name":"hwr-sync-modal","title":"HWR Sync Modal","component":"hwrSyncModal","type":"modal"}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"},{"component":"hwrConfirmationModal","name":"hwr-confirmation-modal"},{"component":"hwrEmptyModal","name":"hwr-empty-modal"},{"component":"hwrSyncModal","name":"hwr-syncing-modal"}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.2-pre.2432"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-admin-app",
-  "version": "5.4.2-pre.2430",
+  "version": "5.4.2-pre.2432",
   "description": "Facilitates the management of ETL tables",
   "browser": "dist/kenyaemr-esm-admin-app.js",
   "main": "src/index.ts",

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

@@ -0,0 +1,99 @@
+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) {
+      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 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('healthWorkerIdentifier', 'Health Worker Identifier' + ':')}</span>
+          <span className={styles.value}>{hwi}</span>
+        </div>
+
+        <div className={styles.divider} />
+
+        <div className={styles.infoItem}>
+          <span className={styles.label}>{t('licenseExpiry', 'License Expiry' + ':')}</span>
+          <span className={styles.value}>{formattedExpiry}</span>
+          <span className={styles.statusIndicator}>
+            <Tag size="md" type={licenseStatus.tagType}>
+              {licenseStatus.message}
+            </Tag>
+          </span>
+        </div>
+
+        <div className={styles.divider} />
+
+        <div className={styles.infoItem}>
+          <span className={styles.label}>{t('name', 'Name' + ':')}</span>
+          <span className={styles.value}>{name}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProviderBannerTag;

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

@@ -0,0 +1,50 @@
+@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;
+  gap: layout.$spacing-04;
+}
+
+.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.$white;
+  font-weight: 500;
+  white-space: nowrap;
+
+  &::after {
+    content: '';
+    margin-left: layout.$spacing-01;
+  }
+}
+
+.value {
+  color: colors.$white;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.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/index.ts

@@ -11,6 +11,7 @@ import UserRoleScopeWorkspace from './components/users/manage-users/manage-user-
 import HWRSyncModal from './components/modal/hwr-sync.modal';
 import AddLocationWorkspace from './components/locations/forms/add-location/add-location.workspace';
 import SearchLocationWorkspace from './components/locations/forms/search-location/search-location.workspace';
+import ProviderBannerTag from './components/provider-banner/provider-banner.component';
 
 const options = {
   featureName: 'esm-admin-app',
@@ -53,3 +54,6 @@ export const hwrSyncModal = getSyncLifecycle(HWRSyncModal, options);
 
 export const addLocation = getSyncLifecycle(AddLocationWorkspace, options);
 export const searchLocationWorkspace = getSyncLifecycle(SearchLocationWorkspace, options);
+
+// t('providerBanner', 'Provider banner')
+export const providerBanner = getSyncLifecycle(ProviderBannerTag, options);

package/src/routes.json

@@ -28,6 +28,12 @@
       "component": "facilitySetupLeftPanelLink",
       "name": "facility-setup-left-panel-link",
       "slot": "admin-left-panel-slot"
+    },
+    {
+      "component": "providerBanner",
+      "name": "provider-banner",
+      "slot": "top-nav-info-slot",
+      "order":1
     }
   ],
   "workspaces": [