@kenyaemr/esm-admin-app 5.4.4-pre.34 → 5.4.4-pre.340

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')}