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

package/src/components/logs-table/operation-log.test.tsx

@@ -1,47 +1,153 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
 import LogTable from './operation-log-table.component';
 import { ETLResponse } from '../../types';
 
-describe('LogTable Component', () => {
-  const mockLogData: ETLResponse[] = [
-    {
-      script_name: 'Initial Population of Tables',
-      start_time: '2024-11-28T09:30:12',
-      stop_time: '2024-11-28T09:33:15',
-      status: 'Success',
-    },
-    {
-      script_name: 'Initial Creation of Tables',
-      start_time: '2024-11-28T09:30:12',
-      stop_time: '2024-11-28T09:33:15',
-      status: 'Failed',
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string, fallback: string) => fallback }),
+}));
+
+vi.mock('@openmrs/esm-framework', () => ({
+  useLayoutType: vi.fn(() => 'desktop'),
+  usePagination: vi.fn((data) => ({
+    results: data,
+    currentPage: 1,
+    goTo: vi.fn(),
+  })),
+  formatDate: vi.fn((date: Date) => date.toISOString()),
+}));
+
+vi.mock('@openmrs/esm-patient-common-lib', () => ({
+  CardHeader: ({ title }: { title: string }) => <div>{title}</div>,
+  PatientChartPagination: ({ currentItems, totalItems }: { currentItems: number; totalItems: number }) => (
+    <div data-testid="pagination">
+      {currentItems}/{totalItems}
+    </div>
+  ),
+}));
+
+vi.mock('../empty-state/empty-state-log.components', () => ({
+  default: ({ subTitle }: { subTitle: string }) => <div data-testid="empty-state">{subTitle}</div>,
+}));
+
+vi.mock('@carbon/react', async (importOriginal) => {
+  const original = await importOriginal<typeof import('@carbon/react')>();
+  return {
+    ...original,
+    DataTable: ({
+      children,
+      rows,
+      headers,
+    }: {
+      children: (props: any) => React.ReactNode;
+      rows: any[];
+      headers: any[];
+    }) => {
+      if (typeof children === 'function') {
+        const renderRows = rows.map((row) => ({
+          ...row,
+          cells: headers.map((h) => ({
+            id: `${row.id}:${h.key}`,
+            value: row[h.key],
+            info: { header: h.key },
+          })),
+        }));
+        return children({
+          rows: renderRows,
+          headers,
+          getTableProps: () => ({}),
+          getHeaderProps: ({ header }: any) => ({ key: header.key }),
+          getRowProps: () => ({}),
+        });
+      }
+      return children;
     },
-  ];
+  };
+});
 
-  it('renders the table with correct headers and rows', () => {
-    render(<LogTable logData={mockLogData} isLoading={false} />);
+vi.mock('classnames', () => ({ default: (...args: string[]) => args.filter(Boolean).join(' ') }));
 
-    const headers = ['Procedure', 'Start time', 'End time', 'Completion status'];
-    headers.forEach((header) => {
-      expect(screen.getByText(header)).toBeInTheDocument();
-    });
+vi.mock('./operation-log.scss', () => ({ default: {} }));
 
-    const rows = screen.getAllByRole('row');
-    expect(rows.length).toBe(3);
+const mockLogData: ETLResponse[] = [
+  {
+    script_name: 'Script A',
+    start_time: '2024-01-01T08:00:00Z',
+    stop_time: '2024-01-01T09:00:00Z',
+    status: 'Success',
+  },
+  {
+    script_name: 'Script B',
+    start_time: '2024-01-02T10:00:00Z',
+    stop_time: '2024-01-02T11:00:00Z',
+    status: 'Failed',
+  },
+];
+
+describe('LogTable', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
   });
 
-  it('displays "No ETL Operation logs found" when logData is empty', () => {
-    render(<LogTable logData={[]} isLoading={false} />);
+  it('renders the card header', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    expect(screen.getByText('Facility Info')).toBeInTheDocument();
+  });
+
+  it('shows skeleton while loading with no data', () => {
+    render(<LogTable logData={[]} isLoading={true} />);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
 
+  it('shows empty state when not loading and no data', () => {
+    render(<LogTable logData={[]} isLoading={false} />);
+    expect(screen.getByTestId('empty-state')).toBeInTheDocument();
     expect(screen.getByText('No ETL Operation logs found')).toBeInTheDocument();
   });
 
-  it('shows skeleton loading state when isLoading is true', () => {
-    render(<LogTable logData={[]} isLoading={true} />);
+  it('renders table headers when data is present', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    expect(screen.getByText('Procedure')).toBeInTheDocument();
+    expect(screen.getByText('Start time')).toBeInTheDocument();
+    expect(screen.getByText('End time')).toBeInTheDocument();
+    expect(screen.getByText('Completion status')).toBeInTheDocument();
+  });
+
+  it('renders script names in the table', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    expect(screen.getByText('Script A')).toBeInTheDocument();
+    expect(screen.getByText('Script B')).toBeInTheDocument();
+  });
+
+  it('renders Success status as a green tag', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    const successTag = screen.getByText('Success');
+    expect(successTag).toBeInTheDocument();
+  });
+
+  it('renders Failed status as a red tag', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    const failedTag = screen.getByText('Failed');
+    expect(failedTag).toBeInTheDocument();
+  });
+
+  it('renders pagination when data is present', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    expect(screen.getByTestId('pagination')).toBeInTheDocument();
+  });
+
+  it('renders -- for missing start_time', () => {
+    const dataWithMissingTime: ETLResponse[] = [
+      { script_name: 'Script C', start_time: '', stop_time: '', status: 'Success' },
+    ];
+    render(<LogTable logData={dataWithMissingTime} isLoading={false} />);
+    expect(screen.getAllByText('--').length).toBeGreaterThanOrEqual(2);
+  });
 
-    const skeleton = screen.getByLabelText('etl table');
-    expect(skeleton).toBeInTheDocument();
+  it('does not show empty state when data is present', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    expect(screen.queryByTestId('empty-state')).not.toBeInTheDocument();
   });
 });

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

@@ -2,20 +2,96 @@
 @use '@carbon/layout';
 @use '@carbon/type';
 
+.modalIntro {
+  margin-bottom: layout.$spacing-05;
+  color: colors.$gray-70;
+}
+
 .healthWorkerInfoContainer {
   display: grid;
-  grid-template-columns: 0.25fr 0.75fr;
-  margin: layout.$spacing-02;
+  grid-template-columns: 0.4fr 0.6fr;
+  margin: layout.$spacing-02 0;
+  font-size: 0.875rem;
 }
+
 .healthWorkerInfoLabel {
   min-width: layout.$spacing-11;
-  font-weight: bold;
+  font-weight: 600;
+  color: colors.$gray-70;
 }
+
 .healthWorkerOverview {
   display: flex;
-  margin: layout.$spacing-05;
+  align-items: center;
+  margin: layout.$spacing-05 0;
+  padding: layout.$spacing-05;
+  background-color: colors.$gray-10;
+  border-radius: 4px;
 }
+
 .healthWorkerPhoto {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+}
+
+.healthWorkerSummary {
+  flex: 1;
+  margin-left: layout.$spacing-05;
+}
+
+.healthWorkerName {
+  margin: 0 0 layout.$spacing-02 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.healthWorkerSubtitle {
+  color: colors.$gray-70;
+  font-size: 0.875rem;
+  margin-bottom: layout.$spacing-03;
+}
+
+.tagRow {
+  display: flex;
+  gap: layout.$spacing-02;
+  flex-wrap: wrap;
+}
+
+.sectionHeading {
+  margin: layout.$spacing-05 0 layout.$spacing-03 0;
+  padding-bottom: layout.$spacing-02;
+  border-bottom: 1px solid colors.$gray-20;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: colors.$gray-70;
+}
+
+.licenseList {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.licenseCard {
+  padding: layout.$spacing-04;
+  border: 1px solid colors.$gray-20;
+  border-radius: 4px;
+  background-color: colors.$white;
+}
+
+.licenseHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: layout.$spacing-03;
+}
+
+.licenseType {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
 }

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

@@ -1,162 +1,152 @@
-import { Button, Tag } from '@carbon/react';
+import { Button, Tag, SkeletonText } from '@carbon/react';
 import { ExtensionSlot } from '@openmrs/esm-framework';
-import capitalize from 'lodash-es/capitalize';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CustomHIEPractitionerResponse, type PractitionerResponse } from '../../types';
-import { NormalizedPractitioner } from '../hook/healthWorkerAdapter';
-import styles from './hwr-confirmation.modal.scss';
+import { ProfessionalRegistryResponse } from '../hook/healthWorkerRegistry';
 import { formatDateTime } from '../../utils/utils';
-
-interface HealthWorkerInfoProps {
-  label: string;
-  value: string | boolean | React.ReactNode;
-}
-
-const HealthWorkerInfo: React.FC<HealthWorkerInfoProps> = ({ label, value }) => {
-  return (
-    <div className={styles.healthWorkerInfoContainer}>
-      <span className={styles.healthWorkerInfoLabel}>{label}</span>
-      <span>{value}</span>
-    </div>
-  );
-};
+import styles from './hwr-confirmation.modal.scss';
 
 interface HWRConfirmModalProps {
   onConfirm: () => void;
   close: () => void;
-  healthWorker: CustomHIEPractitionerResponse | PractitionerResponse;
-  normalizedData: NormalizedPractitioner;
-  fhirFormat: boolean;
+  healthWorker: ProfessionalRegistryResponse;
 }
 
-const HWRConfirmModal: React.FC<HWRConfirmModalProps> = ({
-  close,
-  onConfirm,
-  healthWorker,
-  normalizedData,
-  fhirFormat,
-}) => {
+type License = NonNullable<ProfessionalRegistryResponse['professional']['licenses']>[number];
+
+const InfoRow: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => (
+  <div className={styles.healthWorkerInfoContainer}>
+    <span className={styles.healthWorkerInfoLabel}>{label}</span>
+    <span>{value || '--'}</span>
+  </div>
+);
+
+const SectionHeading: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className={styles.sectionHeading}>{children}</div>
+);
+
+const useCurrentLicense = (licenses: Array<License> = []): License | undefined =>
+  useMemo(() => {
+    if (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];
+  }, [licenses]);
+
+const HWRConfirmModal: React.FC<HWRConfirmModalProps> = ({ close, onConfirm, healthWorker }) => {
   const { t } = useTranslation();
+  const { professional } = healthWorker;
+  const { membership, licenses, contacts, identifiers, professional_details } = professional;
 
-  const isLicenseValid = normalizedData.licenseEndDate ? new Date(normalizedData.licenseEndDate) > new Date() : false;
+  const currentLicense = useCurrentLicense(licenses);
+  const isLicenseValid = currentLicense?.license_end ? new Date(currentLicense.license_end) > new Date() : 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>
+        <p className={styles.modalIntro}>
           {t(
             'healthWorkerDetailsFound',
-            'Health worker information found in the registry, do you want to use the information to continue with registration?',
+            'Health worker found in the registry. Use this information to pre-fill the registration form?',
           )}
         </p>
+
         <div className={styles.healthWorkerOverview}>
           <ExtensionSlot
             className={styles.healthWorkerPhoto}
             name="patient-photo-slot"
-            state={{
-              patientName: normalizedData.fullName || '',
-            }}
+            state={{ patientName: membership.full_name || '' }}
           />
-          <div style={{ width: '100%', marginLeft: '0.625rem' }}>
-            <HealthWorkerInfo
-              label={t('healthWorkerName', 'Health worker name')}
-              value={normalizedData.fullName || '--'}
-            />
-
-            <HealthWorkerInfo
-              label={t('providerUniqueIdentifier', 'Provider unique identifier')}
-              value={normalizedData.providerUniqueIdentifier || '--'}
-            />
-
-            <HealthWorkerInfo
-              label={t('registrationId', 'Registration ID')}
-              value={normalizedData.registrationId || '--'}
-            />
-
-            <HealthWorkerInfo
-              label={t('externalReferenceId', 'External Reference ID')}
-              value={normalizedData.externalReferenceId || '--'}
-            />
-
-            <HealthWorkerInfo label={t('gender', 'Gender')} value={normalizedData.gender || '--'} />
-
-            <HealthWorkerInfo label={t('status', 'Status')} value={normalizedData.status || '--'} />
-
-            {normalizedData.phoneNumber && (
-              <HealthWorkerInfo label={t('phone', 'Phone')} value={normalizedData.phoneNumber} />
-            )}
-
-            {normalizedData.email && <HealthWorkerInfo label={t('email', 'Email')} value={normalizedData.email} />}
-
-            {normalizedData.nationalId && (
-              <HealthWorkerInfo
-                label={t('identificationNumber', 'Identification Number')}
-                value={normalizedData.nationalId}
-              />
-            )}
-
-            <HealthWorkerInfo
-              label={t('licensingBody', 'Licensing Body')}
-              value={normalizedData.licensingBody || '--'}
-            />
-
-            <HealthWorkerInfo label={t('specialty', 'Specialty')} value={normalizedData.specialty || '--'} />
-
-            {normalizedData.professionalCadre && (
-              <HealthWorkerInfo
-                label={t('professionalCadre', 'Professional Cadre')}
-                value={normalizedData.professionalCadre}
-              />
-            )}
-
-            {normalizedData.practiceType && (
-              <HealthWorkerInfo label={t('practiceType', 'Practice Type')} value={normalizedData.practiceType} />
-            )}
-
-            {normalizedData.licenses && normalizedData.licenses.length > 0 && (
-              <>
-                <div style={{ marginTop: '1rem', marginBottom: '0.5rem' }}>
-                  <strong>{t('licenses', 'Licenses')}</strong>
-                </div>
-                {normalizedData.licenses.map((license, index) => (
-                  <div key={index} style={{ marginBottom: '0.5rem', paddingLeft: '1rem' }}>
-                    <HealthWorkerInfo
-                      label={`${license.license_type} ${t('license', 'License')}`}
-                      value={license.external_reference_id || '--'}
-                    />
-                    <HealthWorkerInfo
+          <div className={styles.healthWorkerSummary}>
+            <h4 className={styles.healthWorkerName}>{membership.full_name || '--'}</h4>
+            <div className={styles.healthWorkerSubtitle}>
+              {membership.specialty || t('practitioner', 'Practitioner')}
+              {membership.licensing_body && ` · ${membership.licensing_body}`}
+            </div>
+            <div className={styles.tagRow}>
+              <Tag type={membership.is_active === 1 ? 'green' : 'gray'} size="md">
+                {membership.is_active === 1 ? t('active', 'Active') : t('inactive', 'Inactive')}
+              </Tag>
+              <Tag type={isLicenseValid ? 'green' : 'red'} size="md">
+                {isLicenseValid ? t('licenseValid', 'License valid') : t('licenseExpired', 'License expired')}
+              </Tag>
+            </div>
+          </div>
+        </div>
+
+        <SectionHeading>{t('identity', 'Identity')}</SectionHeading>
+        <InfoRow label={t('providerUniqueIdentifier', 'Provider unique identifier')} value={membership.id} />
+        <InfoRow label={t('registrationId', 'Registration ID')} value={membership.registration_id} />
+        <InfoRow label={t('externalReferenceId', 'External reference ID')} value={membership.external_reference_id} />
+        <InfoRow label={t('gender', 'Gender')} value={membership.gender} />
+        {identifiers?.identification_number && (
+          <InfoRow
+            label={t('identificationNumber', 'Identification number')}
+            value={`${identifiers.identification_type ?? ''} ${identifiers.identification_number}`.trim()}
+          />
+        )}
+
+        <SectionHeading>{t('licensing', 'Licensing & qualifications')}</SectionHeading>
+        <InfoRow label={t('licensingBody', 'Licensing body')} value={membership.licensing_body} />
+        <InfoRow label={t('specialty', 'Specialty')} value={membership.specialty} />
+        {professional_details?.professional_cadre && (
+          <InfoRow
+            label={t('professionalCadre', 'Professional cadre')}
+            value={professional_details.professional_cadre}
+          />
+        )}
+        {professional_details?.practice_type && (
+          <InfoRow label={t('practiceType', 'Practice type')} value={professional_details.practice_type} />
+        )}
+        {professional_details?.educational_qualifications && (
+          <InfoRow
+            label={t('qualification', 'Qualification')}
+            value={professional_details.educational_qualifications}
+          />
+        )}
+
+        {licenses && licenses.length > 0 && (
+          <>
+            <SectionHeading>{t('licenses', 'Licenses')}</SectionHeading>
+            <div className={styles.licenseList}>
+              {licenses.map((license) => {
+                const expired = license.license_end && new Date(license.license_end) < new Date();
+                return (
+                  <div key={license.id} className={styles.licenseCard}>
+                    <div className={styles.licenseHeader}>
+                      <span className={styles.licenseType}>{license.license_type}</span>
+                      <Tag type={expired ? 'red' : 'green'} size="sm">
+                        {expired ? t('expired', 'Expired') : t('valid', 'Valid')}
+                      </Tag>
+                    </div>
+                    <InfoRow label={t('licenseNumber', 'License no.')} value={license.external_reference_id} />
+                    <InfoRow
                       label={t('validity', 'Validity')}
-                      value={`${formatDateTime(license.license_start)} - ${formatDateTime(license.license_end)}`}
+                      value={`${formatDateTime(license.license_start)} → ${formatDateTime(license.license_end)}`}
                     />
                   </div>
-                ))}
-              </>
-            )}
-
-            {normalizedData.licenseStartDate && normalizedData.licenseEndDate && (
-              <HealthWorkerInfo
-                label={t('licenseValidity', 'License Validity Period')}
-                value={`${formatDateTime(normalizedData.licenseStartDate)} - ${formatDateTime(
-                  normalizedData.licenseEndDate,
-                )}`}
-              />
-            )}
-
-            <HealthWorkerInfo
-              label={t('licenseValid', 'License Validity')}
-              value={
-                <Tag type={isLicenseValid ? 'green' : 'red'}>
-                  {isLicenseValid ? t('licenseValid', 'License Valid') : t('licenseExpired', 'License Expired')}
-                </Tag>
-              }
-            />
-          </div>
-        </div>
+                );
+              })}
+            </div>
+          </>
+        )}
+
+        <SectionHeading>{t('contact', 'Contact')}</SectionHeading>
+        <InfoRow label={t('phone', 'Phone')} value={contacts?.phone} />
+        <InfoRow label={t('email', 'Email')} value={contacts?.email} />
+        {contacts?.postal_address && (
+          <InfoRow label={t('postalAddress', 'Postal address')} value={contacts.postal_address} />
+        )}
       </div>
+
       <div className="cds--modal-footer">
         <Button kind="secondary" onClick={close}>
           {t('cancel', 'Cancel')}