@kenyaemr/esm-admin-app 5.4.1-pre.1908 → 5.4.1-pre.1912

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":"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"}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.1-pre.1908"}
+{"$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":"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"}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"},{"component":"hwrConfirmationModal","name":"hwr-confirmation-modal"},{"component":"hwrEmptyModal","name":"hwr-empty-modal"}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.1-pre.1912"}

package/package.json

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

package/src/components/hook/useHWR.ts

@@ -0,0 +1,22 @@
+import { FetchResponse, makeUrl, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { HWR_API_NO_CREDENTIALS, PROVIDER_NOT_FOUND, RESOURCE_NOT_FOUND, UNKNOWN } from '../../constants';
+import useSWR from 'swr';
+import { useState } from 'react';
+
+export const searchHealthCareWork = async (identifierType: string, identifierNumber: string) => {
+  const url = `${restBaseUrl}/kenyaemr/practitionersearch?identifierType=${identifierType}&identifierNumber=${identifierNumber}`;
+  const response = await fetch(makeUrl(url));
+  if (response.ok) {
+    const responseData = await response.json();
+    if (responseData?.issue) {
+      throw new Error(PROVIDER_NOT_FOUND);
+    }
+    return responseData;
+  }
+  if (response.status === 401) {
+    throw new Error(HWR_API_NO_CREDENTIALS);
+  } else if (response.status === 404) {
+    throw new Error(RESOURCE_NOT_FOUND);
+  }
+  throw new Error(UNKNOWN);
+};

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

@@ -0,0 +1,21 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.healthWorkerInfoContainer {
+  display: grid;
+  grid-template-columns: 0.25fr 0.75fr;
+  margin: layout.$spacing-02;
+}
+.healthWorkerInfoLabel {
+  min-width: layout.$spacing-11;
+  font-weight: bold;
+}
+.healthWorkerOverview {
+  display: flex;
+  margin: layout.$spacing-05;
+}
+.healthWorkerPhoto {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,130 @@
+import { Button, Tag } from '@carbon/react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import capitalize from 'lodash-es/capitalize';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type PractitionerResponse } from '../../types';
+import styles from './hwr-confirmation.modal.scss';
+
+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>
+  );
+};
+
+interface HWRConfirmModalProps {
+  onConfirm: () => void;
+  close: () => void;
+  healthWorker: PractitionerResponse;
+}
+
+const HWRConfirmModal: React.FC<HWRConfirmModalProps> = ({ close, onConfirm, healthWorker }) => {
+  const { t } = useTranslation();
+  const passportNumber = healthWorker?.link
+    ?.find(
+      (link: { relation: string; url: string }) =>
+        link.relation === 'self' && link.url.includes('identifierType=Passport'),
+    )
+    ?.url.split('identifierNumber=')[1]
+    ?.split('&')[0];
+
+  const practitioner = healthWorker?.entry?.[0]?.resource;
+
+  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(
+            'healthWorkerDetailsFound',
+            'Health worker information found in the registry, do you want to use the information to continue with registration?',
+          )}
+        </p>
+        <div className={styles.healthWorkerOverview}>
+          <ExtensionSlot
+            className={styles.healthWorkerPhoto}
+            name="patient-photo-slot"
+            state={{
+              patientName: practitioner?.name?.[0]?.text || '',
+            }}
+          />
+          <div style={{ width: '100%', marginLeft: '0.625rem' }}>
+            <HealthWorkerInfo
+              label={t('healthWorkerName', 'Health worker name')}
+              value={practitioner?.name?.[0]?.text}
+            />
+
+            {practitioner?.telecom?.map((telecom, index) => (
+              <HealthWorkerInfo key={index} label={capitalize(telecom?.system)} value={telecom?.value || '--'} />
+            ))}
+
+            {practitioner?.identifier?.map((identifier, index) => (
+              <HealthWorkerInfo
+                key={index}
+                label={identifier.type?.coding?.map((code) => code.display).join(' ') || '--'}
+                value={identifier.value || '--'}
+              />
+            ))}
+
+            {passportNumber && (
+              <HealthWorkerInfo label={t('passportNumber', 'Passport Number')} value={passportNumber} />
+            )}
+
+            <HealthWorkerInfo
+              label={t('renewalDate', 'Renewal Date')}
+              value={
+                practitioner?.identifier?.find((id) => id.type?.coding?.some((code) => code.code === 'license-number'))
+                  ?.period?.end || '--'
+              }
+            />
+
+            <HealthWorkerInfo
+              label={t('licensingBody', 'Licensing Body')}
+              value={
+                practitioner?.qualification?.[0]?.extension?.find(
+                  (ext) => ext.url === 'https://hwr-kenyahie/StructureDefinition/licensing-body',
+                )?.valueCodeableConcept?.coding?.[0]?.display || '--'
+              }
+            />
+            <HealthWorkerInfo
+              label={t('qualification', 'Qualification')}
+              value={
+                practitioner?.qualification?.[0]?.code?.coding?.[0]?.display ||
+                practitioner?.extension?.find((ext) => ext.url === 'https://ts.kenya-hie.health/Codesystem/specialty')
+                  ?.valueCodeableConcept?.coding?.[0]?.display ||
+                '--'
+              }
+            />
+
+            <HealthWorkerInfo
+              label={t('licenseValid', 'License Validity')}
+              value={
+                <Tag type={practitioner?.active ? 'green' : 'red'}>
+                  {practitioner?.active ? t('licenseValid', 'License Valid') : t('licenseExpired', 'License Expired')}
+                </Tag>
+              }
+            />
+          </div>
+        </div>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button onClick={onConfirm}>{t('useValues', 'Use values')}</Button>
+      </div>
+    </>
+  );
+};
+
+export default HWRConfirmModal;

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/users/manage-users/user-list/user-list.component.tsx

@@ -15,10 +15,13 @@ import {
   Button,
   Pagination,
   ButtonSet,
+  OverflowMenuItem,
+  MenuItemDivider,
+  OverflowMenu,
 } from '@carbon/react';
 import { Edit, UserFollow } from '@carbon/react/icons';
 import styles from './user-list.scss';
-import { launchWorkspace, useDebounce, WorkspaceContainer } from '@openmrs/esm-framework';
+import { launchWorkspace, showModal, useDebounce, WorkspaceContainer } from '@openmrs/esm-framework';
 import { useUser } from '../../../../user-management.resources';
 
 const UserList: React.FC = () => {
@@ -28,6 +31,7 @@ const UserList: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
+  const [syncLoading, setSyncLoading] = useState(false);
 
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
 
@@ -59,7 +63,6 @@ const UserList: React.FC = () => {
     setSearchTerm(searchTerm);
     setCurrentPage(1);
   };
-
   if (isLoading) {
     return <DataTableSkeleton />;
   }
@@ -118,26 +121,28 @@ const UserList: React.FC = () => {
       familyName: familyName,
       roles: rolesDisplay,
       actions: (
-        <ButtonSet className={styles.btnSet}>
-          <Button
-            className={styles.btn}
-            renderIcon={Edit}
-            hasIconOnly
-            kind="ghost"
-            iconDescription={t('edit', 'Edit')}
-            onClick={() => {
-              const selectedUser = users.find((u) => u.uuid === user.uuid);
-              if (selectedUser) {
-                launchWorkspace('manage-user-workspace', {
-                  workspaceTitle: t('editUser', 'Edit User'),
-                  initialUserValue: selectedUser,
-                });
-              } else {
-                console.error('User not found:', user.uuid);
-              }
-            }}
-          />
-        </ButtonSet>
+        <>
+          <ButtonSet className={styles.btnSet}>
+            <Button
+              className={styles.btn}
+              renderIcon={Edit}
+              hasIconOnly
+              kind="ghost"
+              iconDescription={t('edit', 'Edit')}
+              onClick={() => {
+                const selectedUser = users.find((u) => u.uuid === user.uuid);
+                if (selectedUser) {
+                  launchWorkspace('manage-user-workspace', {
+                    workspaceTitle: t('editUser', 'Edit User'),
+                    initialUserValue: selectedUser,
+                  });
+                } else {
+                  console.error('User not found:', user.uuid);
+                }
+              }}
+            />
+          </ButtonSet>
+        </>
       ),
     };
   });

package/src/components/users/manage-users/user-management.workspace.scss

@@ -136,3 +136,39 @@
   word-wrap: break-word;
   line-height: 1.4;
 }
+
+.formHeaderSection {
+  @include type.type-style('heading-02');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  row-gap: layout.$spacing-06;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    border-bottom: 0.375rem solid var(--brand-03);
+    position: absolute;
+    bottom: -0.75rem;
+    left: 0;
+  }
+
+  & > span {
+    @include type.type-style('body-01');
+  }
+}
+.formIdentifierType {
+  color: colors.$gray-70;
+  display: inline-block;
+  font-size: layout.$spacing-04;
+  line-height: layout.$spacing-05;
+  line-height: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+  vertical-align: baseline;
+}
+.formRow {
+  display: flex;
+  align-items: center;
+}