@kenyaemr/esm-admin-app 5.4.5-pre.795 → 5.4.5-pre.798

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"},{"name":"global-property-link","component":"globalPropertyLink","slot":"admin-left-panel-slot"},{"component":"providerBanner","name":"provider-banner","slot":"provider-banner-info-slot","order":1},{"component":"globalPropertyDashboard","name":"global-property-dashboard"}],"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"},{"component":"deleteGlobalPropertyModal","name":"delete-global-property-modal"}],"workspaces2":[{"name":"manage-user-workspace","component":"manageUserWorkspace","window":"esm-admin-extra-wide-workspace-window"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","window":"esm-admin-workspace-window"},{"name":"add-location-workspace","component":"addLocation","window":"esm-admin-workspace-window"},{"name":"search-location-workspace","component":"searchLocationWorkspace","window":"esm-admin-workspace-window"},{"name":"global-property-workspace","component":"globalPropertyWorkspace","window":"esm-admin-workspace-window"},{"name":"upload-logo-workspace","component":"uploadLogoWorkspace","window":"esm-admin-workspace-window"}],"workspaceWindows2":[{"name":"esm-admin-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"wider"},{"name":"esm-admin-extra-wide-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"extra-wide"}],"workspaceGroups2":[{"name":"esm-admin-workspace-group","scopePattern":"/admin","closeable":true}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.5-pre.795"}
+{"$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"},{"name":"global-property-link","component":"globalPropertyLink","slot":"admin-left-panel-slot"},{"component":"providerBanner","name":"provider-banner","slot":"provider-banner-info-slot","order":1},{"component":"globalPropertyDashboard","name":"global-property-dashboard"}],"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"},{"component":"deleteGlobalPropertyModal","name":"delete-global-property-modal"}],"workspaces2":[{"name":"manage-user-workspace","component":"manageUserWorkspace","window":"esm-admin-extra-wide-workspace-window"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","window":"esm-admin-workspace-window"},{"name":"add-location-workspace","component":"addLocation","window":"esm-admin-workspace-window"},{"name":"search-location-workspace","component":"searchLocationWorkspace","window":"esm-admin-workspace-window"},{"name":"global-property-workspace","component":"globalPropertyWorkspace","window":"esm-admin-workspace-window"},{"name":"upload-logo-workspace","component":"uploadLogoWorkspace","window":"esm-admin-workspace-window"}],"workspaceWindows2":[{"name":"esm-admin-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"wider"},{"name":"esm-admin-extra-wide-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"extra-wide"}],"workspaceGroups2":[{"name":"esm-admin-workspace-group","scopePattern":"/admin","closeable":true}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.5-pre.798"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-admin-app",
-  "version": "5.4.5-pre.795",
+  "version": "5.4.5-pre.798",
   "description": "Facilitates the management of ETL tables",
   "keywords": [
     "openmrs"

package/src/components/facility-setup/facility-info.component.test.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { type FacilityRegistryRecord } from './type';
+import FacilityRegistryView from './facility-info.component';
+import { syncFacilityRegistry, useFacilityRegistry } from './useFacilityRegistry';
+
+vi.mock('./useFacilityRegistry', () => ({
+  syncFacilityRegistry: vi.fn(),
+  useFacilityRegistry: vi.fn(),
+}));
+
+const facility: FacilityRegistryRecord = {
+  fr_code: 'FR-12345',
+  official_name: 'Mbagathi County Hospital',
+  registration_number: 'REG-001',
+  is_hub: false,
+  license_status: 'ACTIVE',
+  regulatory_operational_status: 'OPERATIONAL',
+  sha_operational_status: 'ACTIVE',
+  sha_contract_status: '',
+  address: {
+    country: 'Kenya',
+    county: 'Nairobi',
+    latitude: -1.301,
+    longitude: 36.805,
+  },
+  facility_administrator_name: 'Alice Wanjiku',
+  facility_administrator_phone: '+254711111111',
+  facility_administrator_email: 'alice@example.com',
+  sha_contracted_services: ['Outpatient', { name: 'Maternity' }, { code: 'DIALYSIS' } as { name?: string }],
+};
+
+const mutate = vi.fn();
+const mockUseFacilityRegistry = vi.mocked(useFacilityRegistry);
+const mockSyncFacilityRegistry = vi.mocked(syncFacilityRegistry);
+const mockShowSnackbar = vi.mocked(showSnackbar);
+
+function mockFacility(overrides: Partial<FacilityRegistryRecord> = {}) {
+  mockUseFacilityRegistry.mockReturnValue({
+    facility: { ...facility, ...overrides },
+    isLoading: false,
+    error: undefined,
+    notYetSynced: false,
+    mutate,
+  });
+}
+
+function getInfoValue(label: string) {
+  return within(screen.getByText(label).parentElement).getByText('—');
+}
+
+describe('FacilityRegistryView missing branches', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockFacility();
+  });
+
+  it('renders the uncontracted status, coordinates, and administrator details', () => {
+    render(<FacilityRegistryView />);
+
+    expect(screen.getByText('Not contracted')).toBeVisible();
+    expect(screen.getByText('-1.301, 36.805')).toBeVisible();
+    expect(screen.getByText('Alice Wanjiku')).toBeVisible();
+    expect(screen.getByText('+254711111111')).toBeVisible();
+    expect(screen.getByText('alice@example.com')).toBeVisible();
+  });
+
+  it('renders placeholders for missing facility phone and email', () => {
+    mockFacility({ facility_phone_number: undefined, facility_email: undefined });
+    render(<FacilityRegistryView />);
+
+    expect(getInfoValue('Phone')).toHaveTextContent('—');
+    expect(getInfoValue('Email')).toHaveTextContent('—');
+  });
+
+  it('shows the empty bed-occupancy state when no data is available', () => {
+    mockFacility({ bed_occupancy: undefined });
+    render(<FacilityRegistryView />);
+
+    expect(screen.getByText('No bed occupancy data')).toBeVisible();
+  });
+
+  it('renders string, named-object, and unnamed-object contracted services', () => {
+    render(<FacilityRegistryView />);
+
+    expect(screen.getByText('Outpatient')).toBeVisible();
+    expect(screen.getByText('Maternity')).toBeVisible();
+    expect(screen.getByText('{"code":"DIALYSIS"}')).toBeVisible();
+  });
+
+  it.each([
+    [{ responseBody: { error: 'Registry rejected the request' } }, 'Registry rejected the request'],
+    [new Error('Network unavailable'), 'Network unavailable'],
+    [{}, 'Unable to reach the facility registry'],
+  ])('shows the appropriate sync error message for %#', async (error, expectedSubtitle) => {
+    const user = userEvent.setup();
+    mockSyncFacilityRegistry.mockRejectedValue(error);
+    render(<FacilityRegistryView />);
+
+    await user.click(screen.getByRole('button', { name: 'Sync with facility registry' }));
+
+    await waitFor(() =>
+      expect(mockShowSnackbar).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: 'Sync failed',
+          subtitle: expectedSubtitle,
+          kind: 'error',
+        }),
+      ),
+    );
+    expect(mutate).not.toHaveBeenCalled();
+  });
+});

package/src/components/global-property/dashboard/global-property-dashboard.test.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { SWRConfig } from 'swr';
+import { openmrsFetch } from '@openmrs/esm-api';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
+import GlobalPropertyDashboard from './global-property-dashboard.component';
+
+vi.mock('@openmrs/esm-api', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@openmrs/esm-api')>()),
+  openmrsFetch: vi.fn(),
+}));
+
+const mockOpenmrsFetch = vi.mocked(openmrsFetch);
+const mockLaunchWorkspace2 = vi.mocked(launchWorkspace2);
+
+const mockProperties = [
+  { uuid: 'uuid-1', property: 'setting.one', value: 'value1', description: 'First setting' },
+  { uuid: 'uuid-2', property: 'setting.two', value: 'value2', description: 'Second setting' },
+];
+
+function mockFetchSuccess(results = mockProperties) {
+  mockOpenmrsFetch.mockResolvedValue({
+    data: { results, links: [], totalCount: results.length },
+  } as unknown as Awaited<ReturnType<typeof openmrsFetch>>);
+}
+
+// Fresh SWR cache per render so responses do not leak between tests.
+function renderDashboard() {
+  return render(
+    <SWRConfig value={{ provider: () => new Map(), dedupingInterval: 0 }}>
+      <GlobalPropertyDashboard />
+    </SWRConfig>,
+  );
+}
+
+describe('GlobalPropertyDashboard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the page header with the dashboard title and illustration', async () => {
+    mockFetchSuccess();
+    renderDashboard();
+    expect(screen.getByText('FacilityPictogram')).toBeInTheDocument();
+    expect(screen.getAllByText('Global Property').length).toBeGreaterThan(0);
+    await screen.findByText('setting.one');
+  });
+
+  it('requests global properties from the paginated systemsetting endpoint', async () => {
+    mockFetchSuccess();
+    renderDashboard();
+    await screen.findByText('setting.one');
+    expect(mockOpenmrsFetch).toHaveBeenCalledWith(
+      expect.stringContaining('/openmrs/ws/rest/v1/systemsetting?v=default&limit=10&startIndex=0&totalCount=true'),
+    );
+  });
+
+  it('renders the fetched global properties in the table', async () => {
+    mockFetchSuccess();
+    renderDashboard();
+    expect(await screen.findByText('setting.one')).toBeInTheDocument();
+    expect(screen.getByText('value1')).toBeInTheDocument();
+    expect(screen.getByText('setting.two')).toBeInTheDocument();
+    expect(screen.getByText('value2')).toBeInTheDocument();
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByText('Property')).toBeInTheDocument();
+    expect(screen.getByText('Value')).toBeInTheDocument();
+  });
+
+  it('renders the toolbar actions for adding a property and uploading an image', async () => {
+    mockFetchSuccess();
+    renderDashboard();
+    expect(screen.getByRole('button', { name: /add global property/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /upload image/i })).toBeInTheDocument();
+    await screen.findByText('setting.one');
+  });
+
+  it('opens the add workspace when "Add global property" is clicked from the dashboard', async () => {
+    mockFetchSuccess();
+    renderDashboard();
+    await screen.findByText('setting.one');
+    fireEvent.click(screen.getByRole('button', { name: /add global property/i }));
+    expect(mockLaunchWorkspace2).toHaveBeenCalledWith(
+      'global-property-workspace',
+      expect.objectContaining({
+        systemSetting: undefined,
+        mutateGlobalProperty: expect.any(Function),
+      }),
+    );
+  });
+
+  it('refetches with the search term as a query param when the user searches', async () => {
+    mockFetchSuccess();
+    renderDashboard();
+    await screen.findByText('setting.one');
+    const searchInput = screen.getByPlaceholderText('Search for global properties');
+    fireEvent.change(searchInput, { target: { value: 'setting.two' } });
+    await waitFor(() => {
+      expect(mockOpenmrsFetch).toHaveBeenCalledWith(expect.stringContaining('q=setting.two'));
+    });
+  });
+
+  it('keeps the page header visible and shows an error card when the request fails', async () => {
+    mockOpenmrsFetch.mockRejectedValue(new Error('Network error'));
+    renderDashboard();
+    expect(await screen.findByRole('heading', { name: 'Global property' })).toBeInTheDocument();
+    expect(screen.getByText('FacilityPictogram')).toBeInTheDocument();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+});

package/src/components/locations/auto-suggest/autosuggest.component.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Autosuggest } from './autosuggest.component';
+
+const suggestions = [
+  { uuid: 'location-1', display: 'Mbagathi Hospital' },
+  { uuid: 'location-2', display: 'Kenyatta National Hospital' },
+];
+
+const defaultProps = {
+  id: 'location',
+  labelText: 'Location',
+  placeholder: 'Search locations',
+  getDisplayValue: (item) => item.display,
+  getFieldValue: (item) => item.uuid,
+  getSearchResults: vi.fn().mockResolvedValue(suggestions),
+  onSuggestionSelected: vi.fn(),
+};
+
+describe('Autosuggest', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    defaultProps.getSearchResults.mockResolvedValue(suggestions);
+  });
+
+  it('searches with a trimmed query and selects a suggestion', async () => {
+    const user = userEvent.setup();
+    render(<Autosuggest {...defaultProps} />);
+
+    const input = screen.getByRole('searchbox', { name: 'Location' });
+    await user.type(input, '  Mbagathi  ');
+
+    expect(await screen.findByText('Mbagathi Hospital')).toBeVisible();
+    expect(defaultProps.getSearchResults).toHaveBeenLastCalledWith('Mbagathi');
+
+    await user.click(screen.getByText('Mbagathi Hospital'));
+
+    expect(input).toHaveValue('Mbagathi Hospital');
+    expect(defaultProps.onSuggestionSelected).toHaveBeenLastCalledWith('location', 'location-1');
+    expect(screen.queryByText('Kenyatta National Hospital')).not.toBeInTheDocument();
+  });
+
+  it('clears suggestions without searching a blank query', async () => {
+    const user = userEvent.setup();
+    render(<Autosuggest {...defaultProps} />);
+
+    const input = screen.getByRole('searchbox', { name: 'Location' });
+    await user.type(input, 'M');
+    await screen.findByText('Mbagathi Hospital');
+    await user.clear(input);
+
+    expect(defaultProps.onSuggestionSelected).toHaveBeenLastCalledWith('location', undefined);
+    expect(defaultProps.getSearchResults).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText('Mbagathi Hospital')).not.toBeInTheDocument();
+  });
+
+  it('closes results on an outside click and displays validation feedback', async () => {
+    render(<Autosuggest {...defaultProps} invalid invalidText="Select a valid location" />);
+
+    fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'Mbagathi' } });
+    await screen.findByText('Mbagathi Hospital');
+    fireEvent.mouseDown(document.body);
+
+    expect(screen.queryByText('Mbagathi Hospital')).not.toBeInTheDocument();
+    expect(screen.getByText('Select a valid location')).toBeVisible();
+  });
+
+  it('renders a custom empty state when no suggestions are returned', async () => {
+    defaultProps.getSearchResults.mockResolvedValue([]);
+    render(<Autosuggest {...defaultProps} renderEmptyState={(value) => <div>No locations found for {value}</div>} />);
+
+    fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'Unknown' } });
+
+    expect(await screen.findByText('No locations found for Unknown')).toBeVisible();
+  });
+
+  it('stops loading and clears suggestions when a search fails', async () => {
+    defaultProps.getSearchResults.mockRejectedValue(new Error('Request failed'));
+    render(<Autosuggest {...defaultProps} renderEmptyState={(value) => <div>No locations found for {value}</div>} />);
+
+    fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'Unknown' } });
+    expect(screen.getByText('Loading...')).toBeVisible();
+
+    await waitFor(() => expect(screen.queryByText('Loading...')).not.toBeInTheDocument());
+    expect(screen.getByText('No locations found for Unknown')).toBeVisible();
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+  });
+});

package/src/components/locations/auto-suggest/location-autosuggest.component.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { searchLocation } from '../hooks/UseFacilityLocations';
+import { type LocationResponse } from '../types';
+import { LocationAutosuggest } from './location-autosuggest.component';
+
+vi.mock('../hooks/UseFacilityLocations', () => ({
+  searchLocation: vi.fn(),
+}));
+
+const locations: Array<LocationResponse> = [
+  {
+    uuid: 'location-1',
+    display: 'Mbagathi Hospital',
+    name: 'Mbagathi',
+    description: 'County hospital',
+    stateProvince: 'Nairobi',
+    country: 'Kenya',
+    countyDistrict: '',
+    address5: '',
+    address6: '',
+    tags: [],
+    attributes: [],
+  },
+];
+
+const mockSearchLocation = vi.mocked(searchLocation);
+
+describe('LocationAutosuggest', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockSearchLocation.mockResolvedValue(locations);
+  });
+
+  it('searches for locations and returns the selected location', async () => {
+    const user = userEvent.setup();
+    const onLocationSelected = vi.fn();
+    render(<LocationAutosuggest onLocationSelected={onLocationSelected} />);
+
+    await user.type(screen.getByRole('searchbox', { name: 'Select Location' }), 'Mbagathi');
+
+    expect(await screen.findByText('Mbagathi Hospital')).toBeVisible();
+    expect(mockSearchLocation).toHaveBeenLastCalledWith('Mbagathi');
+
+    await user.click(screen.getByText('Mbagathi Hospital'));
+    expect(onLocationSelected).toHaveBeenCalledWith('location-1', locations[0]);
+  });
+
+  it('supports custom input and validation labels', () => {
+    render(
+      <LocationAutosuggest
+        onLocationSelected={vi.fn()}
+        labelText="Facility"
+        placeholder="Find a facility"
+        invalid
+        invalidText="Facility is required"
+      />,
+    );
+
+    expect(screen.getByRole('searchbox', { name: 'Facility' })).toHaveAttribute('placeholder', 'Find a facility');
+    expect(screen.getByText('Facility is required')).toBeVisible();
+  });
+
+  it('shows an empty state when a search has no matches', async () => {
+    const user = userEvent.setup();
+    mockSearchLocation.mockResolvedValue([]);
+    render(<LocationAutosuggest onLocationSelected={vi.fn()} />);
+
+    await user.type(screen.getByRole('searchbox', { name: 'Select Location' }), 'Unknown');
+
+    expect(await screen.findByText('Found no matching results')).toBeVisible();
+    expect(screen.getByText('Try searching for a different term')).toBeVisible();
+  });
+});

package/src/components/locations/common/results-tile.component.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { type LocationResponse } from '../types';
+import ResultsTile from './results-tile.component';
+
+const location: LocationResponse = {
+  uuid: 'location-1',
+  display: 'Mbagathi Hospital',
+  name: 'Mbagathi',
+  description: 'County hospital',
+  stateProvince: 'Nairobi',
+  country: 'Kenya',
+  countyDistrict: '',
+  address5: '',
+  address6: '',
+  tags: [
+    { uuid: 'tag-1', display: 'Facility', name: 'Facility', description: '' },
+    { uuid: 'tag-2', display: '', name: 'Clinical location', description: '' },
+  ],
+  attributes: [],
+};
+
+describe('ResultsTile', () => {
+  it('renders the location details and tags', () => {
+    render(<ResultsTile location={location} />);
+
+    expect(screen.getByText('Mbagathi Hospital')).toBeVisible();
+    expect(screen.getByText('County hospital')).toBeVisible();
+    expect(screen.getByText('Nairobi, Kenya')).toBeVisible();
+    expect(screen.getByText('Facility')).toBeVisible();
+    expect(screen.getByText('Clinical location')).toBeVisible();
+  });
+
+  it('falls back to the location and tag names and omits missing optional details', () => {
+    render(
+      <ResultsTile
+        location={{
+          ...location,
+          display: '',
+          description: '',
+          stateProvince: '',
+          country: '',
+          tags: [{ uuid: 'tag-1', display: '', name: 'Ward', description: '' }],
+        }}
+      />,
+    );
+
+    expect(screen.getByText('Mbagathi')).toBeVisible();
+    expect(screen.getByText('Ward')).toBeVisible();
+    expect(screen.queryByText('County hospital')).not.toBeInTheDocument();
+    expect(screen.queryByText('Nairobi, Kenya')).not.toBeInTheDocument();
+  });
+
+  it('calls onClose when the close icon is clicked', async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    const { container } = render(<ResultsTile location={location} onClose={onClose} />);
+
+    await user.click(container.querySelector('svg'));
+
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+});

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { HWR_API_NO_CREDENTIALS, RESOURCE_NOT_FOUND, UNKNOWN } from '../../constants';
+import HWREmptyModal from './hwr-empty.modal.component';
+
+const errorMessages = [
+  [
+    RESOURCE_NOT_FOUND,
+    '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,
+    'Health Care Worker Registry API credentials not configured, Kindly contact system admin. Do you want to continue to create an account',
+  ],
+  [
+    UNKNOWN,
+    'An error occurred while searching Health Worker Registry, kindly contact system admin. Do you want to continue to create an account',
+  ],
+] as const;
+
+describe('HWREmptyModal', () => {
+  it('renders the modal heading and registration actions', () => {
+    render(<HWREmptyModal close={vi.fn()} />);
+
+    expect(screen.getByRole('heading', { name: 'Create an Account' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Continue to registration' })).toBeVisible();
+  });
+
+  it.each(errorMessages)('renders the message for the %s error', (errorCode, expectedMessage) => {
+    render(<HWREmptyModal close={vi.fn()} errorCode={errorCode} />);
+    expect(screen.getByText(expectedMessage)).toBeVisible();
+  });
+
+  it('uses the health-worker-not-found message for an absent or unrecognized error code', () => {
+    const { rerender } = render(<HWREmptyModal close={vi.fn()} />);
+    const defaultMessage =
+      'The health worker records could not be found in Health Worker registry, do you want to continue to create an account';
+
+    expect(screen.getByText(defaultMessage)).toBeVisible();
+
+    rerender(<HWREmptyModal close={vi.fn()} errorCode="UNRECOGNIZED" />);
+    expect(screen.getByText(defaultMessage)).toBeVisible();
+  });
+
+  it('closes the modal when Cancel is clicked', async () => {
+    const user = userEvent.setup();
+    const close = vi.fn();
+    render(<HWREmptyModal close={close} />);
+
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    expect(close).toHaveBeenCalledOnce();
+  });
+
+  it('closes the modal when registration is continued', async () => {
+    const user = userEvent.setup();
+    const close = vi.fn();
+    render(<HWREmptyModal close={close} />);
+
+    await user.click(screen.getByRole('button', { name: 'Continue to registration' }));
+
+    expect(close).toHaveBeenCalledOnce();
+  });
+});

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

@@ -9,7 +9,7 @@ import upperCase from 'lodash-es/upperCase';
 const ProviderBannerTag: React.FC = () => {
   const { currentProvider } = useSession();
   const { t } = useTranslation();
-  const currentProviderUuid = currentProvider?.uuid;
+  const currentProviderUuid = currentProvider?.uuid ?? '';
   const { isLoading, error, providerAttributes } = useProviderAttributes(currentProviderUuid);
 
   const getAttributeValue = (attributes: Array<Attribute>, displayName: string): string => {
@@ -59,12 +59,30 @@ const ProviderBannerTag: React.FC = () => {
   }
 
   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 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);
 
+  if (error) {
+    return (
+      <div className={styles.providerBanner}>
+        <div className={styles.bannerContent}>
+          <div className={styles.divider} />
+          <div className={styles.infoItem}>
+            <span className={styles.label}>{t('providerLabel', 'Provider:')}</span>
+            <span className={styles.statusIndicator} title={error?.message ?? String(error)}>
+              <Tag size="md" type="red">
+                {t('errorLoadingProvider', 'Error loading provider information')}
+              </Tag>
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.providerBanner}>
       <div className={styles.bannerContent}>
@@ -76,28 +94,22 @@ const ProviderBannerTag: React.FC = () => {
 
         <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>
+        <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>
-              </>
-            )}
+          {shouldShowLicenseExpiry && <span className={styles.value}>{formattedExpiry}</span>}
 
-            <span className={styles.statusIndicator}>
-              <Tag size="md" type={licenseStatus.tagType}>
-                {licenseStatus.message}
-              </Tag>
-            </span>
-          </div>
-        </>
+          <span className={styles.statusIndicator}>
+            <Tag size="md" type={licenseStatus.tagType}>
+              {licenseStatus.message}
+            </Tag>
+          </span>
+        </div>
       </div>
     </div>
   );