@palladium-ethiopia/esm-admin-app 5.4.2-pre.100

package/src/components/facility-setup/facility-info.scss

@@ -0,0 +1,87 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.omrs-main-content {
+  background-color: colors.$white;
+}
+
+.bottomBorder {
+  margin-bottom: layout.$spacing-05;
+}
+
+.btnLayer {
+  display: flex;
+  padding-top: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+  flex-direction: row;
+  justify-content: flex-end;
+  background-color: white;
+  width: 100%;
+}
+
+.tableLayer {
+  padding-left: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+  background: white;
+  padding-top: layout.$spacing-01;
+}
+
+.loading {
+  display: flex;
+  padding-top: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+  flex-direction: row;
+  justify-content: flex-end;
+  background-color: white;
+  width: 100%;
+}
+
+.facilityInfoContainer {
+  margin: layout.$spacing-05;
+}
+
+.card {
+  padding: 1rem;
+  background-color: colors.$gray-10;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.cardTitle {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.cardDivider {
+  border: none;
+  border-top: 1px solid #e0e0e0;
+  margin: 0.5rem 0;
+}
+.cardContent {
+  font-size: 1rem;
+  line-height: 1.8;
+}
+
+.cardContent p {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.cardContent br {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.cardContent strong {
+  min-width: 150px;
+  display: inline-block;
+  color: #393939;
+}

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

@@ -0,0 +1,21 @@
+import { Layer } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import FacilityInfo from './facility-info.component';
+import styles from './facility-setup.scss';
+import Header from './header/header.component';
+
+const FacilitySetup: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="omrs-main-content">
+      <Header title={t('facilityDetails', 'Facility Details')} />
+
+      <Layer className={styles.tableLayer}>
+        <FacilityInfo />
+      </Layer>
+    </div>
+  );
+};
+
+export default FacilitySetup;

package/src/components/facility-setup/facility-setup.resource.tsx

@@ -0,0 +1,7 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+export const syncPackagesAndInterventions = async () => {
+  const packagesSyncURL = `${restBaseUrl}/kenyaemr/sha-benefits-package?synchronize=true`;
+  const intervesionSyncUrl = `${restBaseUrl}/kenyaemr/sha-interventions?synchronize=true`;
+  await Promise.all([packagesSyncURL, intervesionSyncUrl].map((url) => openmrsFetch(url)));
+};

package/src/components/facility-setup/facility-setup.scss

@@ -0,0 +1,38 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.omrs-main-content {
+  background-color: white;
+}
+
+.btnLayer {
+  display: flex;
+  padding-top: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+  flex-direction: row;
+  justify-content: flex-end;
+  background-color: white;
+  width: 100%;
+}
+
+.tableLayer {
+  padding-left: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+  background: white;
+  padding-top: layout.$spacing-01;
+}
+
+.loading {
+  display: flex;
+  padding-top: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+  flex-direction: row;
+  justify-content: flex-end;
+  background-color: white;
+  width: 100%;
+}

package/src/components/facility-setup/header/header.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Development } from '@carbon/react/icons';
+import { useSession, PageHeader } from '@openmrs/esm-framework';
+import styles from './header.scss';
+
+interface HeaderProps {
+  title: string;
+}
+
+const Header: React.FC<HeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <PageHeader title={title} illustration={<Development size={32} />} className={styles.header} />
+    </div>
+  );
+};
+
+export default Header;

package/src/components/facility-setup/header/header.scss

@@ -0,0 +1,19 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.header {
+  @include type.type-style('body-compact-02');
+  height: layout.$spacing-12;
+  display: flex;
+  justify-content: space-between;
+  padding: layout.$spacing-05;
+  background: white;
+  border: 1px solid colors.$gray-20;
+}
+.svgContainer svg {
+  width: layout.$spacing-10;
+  height: layout.$spacing-10;
+  margin-right: layout.$spacing-06;
+  fill: var(--brand-03);
+}

package/src/components/header/header-illustration.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './header.scss';
+import { IbmCloudant } from '@carbon/react/icons';
+
+const ETLIllustration: React.FC = () => {
+  return (
+    <div className={styles.svgContainer}>
+      <IbmCloudant className={styles.iconOveriders} />
+    </div>
+  );
+};
+
+export default ETLIllustration;

package/src/components/header/header.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { formatDate, useSession, PageHeader } from '@openmrs/esm-framework';
+import styles from './header.scss';
+import ETLIllustration from './header-illustration.component';
+
+interface HeaderProps {
+  title: string;
+}
+
+const Header: React.FC<HeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <PageHeader
+        title={t('etlAdministration', 'ETL Administration')}
+        illustration={<ETLIllustration />}
+        className={styles.header}
+      />
+    </div>
+  );
+};
+
+export default Header;

package/src/components/header/header.scss

@@ -0,0 +1,19 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.header {
+  @include type.type-style('body-compact-02');
+  height: layout.$spacing-12;
+  display: flex;
+  justify-content: space-between;
+  padding: layout.$spacing-05;
+  background: white;
+  border: 1px solid colors.$gray-20;
+}
+.svgContainer svg {
+  width: layout.$spacing-10;
+  height: layout.$spacing-10;
+  margin-right: layout.$spacing-06;
+  fill: var(--brand-03);
+}

package/src/components/hook/healthWorkerAdapter.ts

@@ -0,0 +1,213 @@
+import { FetchResponse, makeUrl, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { HWR_API_NO_CREDENTIALS, PROVIDER_NOT_FOUND, RESOURCE_NOT_FOUND, UNKNOWN } from '../../constants';
+import { CustomHIEPractitionerResponse, PractitionerResponse } from '../../types';
+import { useState } from 'react';
+
+/**
+ * Unified response type that can handle both FHIR and custom HIE formats
+ */
+export interface UnifiedHealthWorkerResponse {
+  fhirFormat: boolean;
+  data: PractitionerResponse | CustomHIEPractitionerResponse;
+}
+
+/**
+ * Adapter to normalize health worker data based on response format
+ */
+export class HealthWorkerAdapter {
+  /**
+   * Extracts common practitioner information from either response format
+   */
+  static normalize(response: UnifiedHealthWorkerResponse): NormalizedPractitioner {
+    if (response.fhirFormat) {
+      return this.normalizeFHIRResponse(response.data as PractitionerResponse);
+    } else {
+      return this.normalizeCustomResponse(response.data as CustomHIEPractitionerResponse);
+    }
+  }
+
+  private static normalizeFHIRResponse(data: PractitionerResponse): NormalizedPractitioner {
+    const resource = data.entry?.[0]?.resource;
+    if (!resource) {
+      throw new Error('Invalid FHIR response: No resource found');
+    }
+
+    const name = resource.name?.[0];
+    const identifierByType = (code: string) =>
+      resource.identifier?.find((id) => id.type?.coding?.[0]?.code === code)?.value;
+
+    const primaryQualification = resource.qualification?.[0];
+    const licenseExtension = primaryQualification?.extension?.find(
+      (ext) => ext.url.includes('license') || ext.url.includes('registration'),
+    );
+
+    return {
+      id: resource.id,
+      fullName: name?.text || '',
+      firstName: name?.text?.split(' ')[0] || '',
+      middleName: name?.text?.split(' ')[1] || '',
+      lastName: name?.text?.split(' ')[2] || name?.text?.split(' ')[1] || '',
+      gender: resource.gender || '',
+      registrationId: identifierByType('registration') || '',
+      externalReferenceId: identifierByType('license') || '',
+      nationalId: identifierByType('national_id') || '',
+      passportNumber: identifierByType('passport') || '',
+      licenseNumber: identifierByType('license') || '',
+      licensingBody: licenseExtension?.valueCoding?.display || '',
+      specialty: primaryQualification?.code?.coding?.[0]?.display || '',
+      qualification: primaryQualification?.code?.coding?.[0]?.display || '',
+      phoneNumber: resource.telecom?.find((t) => t.system === 'phone')?.value || '',
+      email: resource.telecom?.find((t) => t.system === 'email')?.value || '',
+      licenseStartDate: primaryQualification?.period?.start || '',
+      licenseEndDate: primaryQualification?.period?.end || '',
+      isActive: resource.active,
+      providerUniqueIdentifier: resource.id,
+      status: resource.active ? 'active' : 'inactive',
+    };
+  }
+
+  private static normalizeCustomResponse(data: CustomHIEPractitionerResponse): NormalizedPractitioner {
+    const { membership, licenses, contacts, identifiers, professional_details } = data.message;
+
+    const mostRecentLicense = licenses
+      ?.filter((l) => l.license_end)
+      .sort((a, b) => new Date(b.license_end).getTime() - new Date(a.license_end).getTime())[0];
+
+    return {
+      id: membership.id,
+      fullName: membership.full_name,
+      firstName: membership.first_name,
+      middleName: membership.middle_name,
+      lastName: membership.last_name,
+      gender: membership.gender,
+      registrationId: membership.registration_id,
+      externalReferenceId: membership.external_reference_id,
+      nationalId: identifiers.identification_number,
+      passportNumber: '',
+      licenseNumber: membership.external_reference_id,
+      licensingBody: membership.licensing_body,
+      specialty: membership.specialty || professional_details?.specialty,
+      qualification: professional_details?.educational_qualifications || membership.specialty,
+      phoneNumber: contacts.phone,
+      email: contacts.email,
+      licenseStartDate: mostRecentLicense?.license_start || '',
+      licenseEndDate: mostRecentLicense?.license_end || '',
+      isActive: membership.is_active === 1,
+      providerUniqueIdentifier: membership.id,
+      status: membership.status,
+      professionalCadre: professional_details?.professional_cadre,
+      practiceType: professional_details?.practice_type,
+      licenses: licenses,
+    };
+  }
+
+  /**
+   * Type guard to check if response is FHIR format
+   */
+  static isFHIRFormat(response: any): response is PractitionerResponse {
+    return response.resourceType === 'Bundle' || (response.entry && Array.isArray(response.entry));
+  }
+}
+
+/**
+ * Normalized practitioner data structure
+ */
+export interface NormalizedPractitioner {
+  id: string;
+  fullName: string;
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  gender: string;
+  registrationId: string;
+  externalReferenceId: string;
+  nationalId: string;
+  passportNumber: string;
+  licenseNumber: string;
+  licensingBody: string;
+  specialty: string;
+  qualification: string;
+  phoneNumber: string;
+  email: string;
+  licenseStartDate: string;
+  licenseEndDate: string;
+  isActive: boolean;
+  providerUniqueIdentifier: string;
+  status: string;
+  professionalCadre?: string;
+  practiceType?: string;
+  licenses?: Array<{
+    id: string;
+    external_reference_id: string;
+    license_type: string;
+    license_start: string;
+    license_end: string;
+  }>;
+}
+
+/**
+ * Search for health care worker with automatic format detection
+ */
+export const searchHealthCareWork = async (
+  identifierType: string,
+  identifierNumber: string,
+  regulator: string,
+): Promise<UnifiedHealthWorkerResponse> => {
+  const url = `${restBaseUrl}/kenyaemr/practitionersearch?identifierType=${identifierType}&identifierNumber=${identifierNumber}&regulator=${regulator}`;
+
+  const response = await fetch(makeUrl(url));
+
+  if (!response.ok) {
+    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);
+  }
+
+  const responseData = await response.json();
+
+  // Check for error in response
+  if (responseData?.issue) {
+    throw new Error(PROVIDER_NOT_FOUND);
+  }
+
+  // Determine format based on fhirFormat flag or structure
+  const isFhir = responseData.fhirFormat === true || HealthWorkerAdapter.isFHIRFormat(responseData);
+
+  return {
+    fhirFormat: isFhir,
+    data: responseData,
+  };
+};
+
+/**
+ * Hook for searching health care worker with normalized data
+ */
+export const useHealthWorkerSearch = () => {
+  const [isSearching, setIsSearching] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const search = async (
+    identifierType: string,
+    identifierNumber: string,
+    regulator: string,
+  ): Promise<NormalizedPractitioner | null> => {
+    try {
+      setIsSearching(true);
+      setError(null);
+
+      const response = await searchHealthCareWork(identifierType, identifierNumber, regulator);
+      return HealthWorkerAdapter.normalize(response);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : UNKNOWN;
+      setError(errorMessage);
+      return null;
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  return { search, isSearching, error };
+};

package/src/components/hook/useFacilityInfo.tsx

@@ -0,0 +1,37 @@
+import { FetchResponse, openmrsFetch, restBaseUrl, useSession } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { DefaultFacility, SHAFacility } from '../../types';
+
+export function useShaFacilityInfo(shouldSynchronize: boolean = false) {
+  const { authenticated } = useSession();
+  const url = `${restBaseUrl}/kenyaemr/sha-facility-status?synchronize=${shouldSynchronize}`;
+
+  const { data, isLoading, error, mutate } = useSWR<FetchResponse<SHAFacility>>(
+    authenticated ? url : null,
+    openmrsFetch,
+  );
+
+  return {
+    isLoading,
+    shaFacility: data?.data,
+    error,
+    mutate,
+  };
+}
+
+export const useLocalFacilityInfo = () => {
+  const url = `${restBaseUrl}/kenyaemr/default-facility`;
+  const { authenticated } = useSession();
+
+  const { data, isLoading, error, mutate } = useSWR<FetchResponse<DefaultFacility>>(
+    authenticated ? url : null,
+    openmrsFetch,
+  );
+
+  return {
+    isLoading,
+    localFacility: data?.data,
+    error,
+    mutate,
+  };
+};

package/src/components/hook/useSystemRoleSetting.tsx

@@ -0,0 +1,33 @@
+import { OpenmrsResource, openmrsFetch } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+export interface RoleCategory {
+  category: string;
+  roles: Array<string>;
+}
+
+export function useSystemUserRoleConfigSetting() {
+  const { data, error, isLoading, mutate } = useSWRImmutable<{ data: { results: Array<OpenmrsResource> } }, Error>(
+    `/ws/rest/v1/systemsetting?q=kenyaemr.userRole.config&v=custom:(uuid,value,property)`,
+    openmrsFetch,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
+  );
+
+  const userRolesConfigResource = data?.data?.results?.find(
+    (resource) => resource.property === 'kenyaemr.userRole.config',
+  );
+
+  let rolesConfig: RoleCategory[] = [];
+  if (userRolesConfigResource?.value) {
+    try {
+      rolesConfig = JSON.parse(userRolesConfigResource.value) as RoleCategory[];
+    } catch (error) {
+      console.error('Error parsing roles configuration:', error);
+    }
+  }
+
+  return { rolesConfig, isLoading, mutate, error };
+}

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

@@ -0,0 +1,149 @@
+import { InlineLoading, Layer, Search } from '@carbon/react';
+import classNames from 'classnames';
+import React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './autosuggest.scss';
+
+type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+
+interface SearchProps extends InputPropsBase {
+  autoComplete?: string;
+  className?: string;
+  closeButtonLabelText?: string;
+  defaultValue?: string | number;
+  disabled?: boolean;
+  isExpanded?: boolean;
+  id?: string;
+  labelText: React.ReactNode;
+  onChange?(e: { target: HTMLInputElement; type: 'change' }): void;
+  onClear?(): void;
+  onExpand?(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void;
+  placeholder?: string;
+  renderIcon?: React.ComponentType | React.FunctionComponent;
+  role?: string;
+  size?: 'sm' | 'md' | 'lg';
+  type?: string;
+  value?: string | number;
+}
+
+interface AutosuggestProps extends SearchProps {
+  getDisplayValue: (item: any) => string;
+  getFieldValue: (item: any) => string;
+  getSearchResults: (query: string) => Promise<any>;
+  onSuggestionSelected: (field: string, value: string) => void;
+  invalid?: boolean;
+  invalidText?: string;
+  renderSuggestionItem?: (item: any) => React.ReactNode;
+  renderEmptyState?: (value: any) => React.ReactNode;
+}
+
+export const Autosuggest: React.FC<AutosuggestProps> = ({
+  getDisplayValue,
+  getFieldValue,
+  getSearchResults,
+  onSuggestionSelected,
+  invalid,
+  invalidText,
+  renderSuggestionItem,
+  renderEmptyState,
+  ...searchProps
+}) => {
+  const { t } = useTranslation();
+  const [suggestions, setSuggestions] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const searchBox = useRef<HTMLInputElement>(null);
+  const wrapper = useRef<HTMLDivElement>(null);
+  const { id: name, labelText } = searchProps;
+
+  useEffect(() => {
+    const handleClickOutsideComponent = (e: MouseEvent) => {
+      if (wrapper.current && !wrapper.current.contains(e.target as Node)) {
+        setSuggestions([]);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutsideComponent);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideComponent);
+    };
+  }, [wrapper]);
+
+  const handleChange = (e) => {
+    const query = e.target.value;
+    onSuggestionSelected(name, undefined);
+
+    if (query && query.trim()) {
+      setIsLoading(true);
+      getSearchResults(query.trim())
+        .then((results) => {
+          setSuggestions(results || []);
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          setSuggestions([]);
+          setIsLoading(false);
+        });
+    } else {
+      setSuggestions([]);
+      setIsLoading(false);
+    }
+  };
+
+  const handleClear = () => {
+    onSuggestionSelected(name, undefined);
+    setSuggestions([]);
+    setIsLoading(false);
+  };
+
+  const handleClick = (index: number) => {
+    const selectedSuggestion = suggestions[index];
+    if (selectedSuggestion) {
+      const fieldValue = getFieldValue(selectedSuggestion);
+      const displayValue = getDisplayValue(selectedSuggestion);
+      if (searchBox.current) {
+        searchBox.current.value = displayValue;
+      }
+      onSuggestionSelected(name, fieldValue);
+      setSuggestions([]);
+    }
+  };
+
+  return (
+    <div className={styles.autocomplete} ref={wrapper}>
+      <label className="cds--label">{labelText}</label>
+      <Layer className={classNames({ [styles.invalid]: invalid })}>
+        <Search
+          id="autosuggest"
+          onChange={handleChange}
+          onClear={handleClear}
+          ref={searchBox}
+          className={styles.autocompleteSearch}
+          {...searchProps}
+        />
+      </Layer>
+      {isLoading && (
+        <div className={styles.loading}>
+          <InlineLoading status="active" description={t('loading', 'Loading' + '...')} />
+        </div>
+      )}
+      {suggestions.length > 0 ? (
+        <ul className={styles.suggestions}>
+          {suggestions.map((suggestion, index) => {
+            return (
+              <li
+                key={getFieldValue(suggestion) || index}
+                onClick={() => handleClick(index)}
+                role="presentation"
+                style={{ cursor: 'pointer' }}>
+                {renderSuggestionItem ? renderSuggestionItem(suggestion) : getDisplayValue(suggestion)}
+              </li>
+            );
+          })}
+        </ul>
+      ) : (
+        !isLoading && renderEmptyState && renderEmptyState(searchBox.current?.value || '')
+      )}
+      {invalid && <label className={classNames(styles.invalidMsg)}>{invalidText}</label>}
+    </div>
+  );
+};