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

package/src/components/locations/tables/locations-table.scss

@@ -0,0 +1,115 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.widgetCard {
+  background-color: colors.$white-0;
+  border: 1px solid colors.$gray-20;
+  margin-bottom: layout.$spacing-06;
+  margin-right: layout.$spacing-03;
+  margin-left: layout.$spacing-05;
+}
+.expandedRow {
+  background-color: colors.$white-0;
+  border: 1px solid colors.$gray-20;
+  margin-bottom: layout.$spacing-06;
+  margin-right: layout.$spacing-03;
+  margin-left: layout.$spacing-05;
+}
+.flexContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-05;
+}
+
+.filterContainer {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-05;
+}
+
+.headerActions {
+  display: flex;
+  gap: layout.$spacing-03;
+  align-items: center;
+}
+
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: layout.$spacing-05;
+  }
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.tileContainer {
+  background-color: colors.$white-0;
+  border-top: 1px solid colors.$gray-20;
+  padding: layout.$spacing-09 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}
+
+.separator {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  width: 80%;
+  margin: layout.$spacing-06 auto;
+  overflow: hidden;
+  text-align: center;
+
+  &::before,
+  &::after {
+    background-color: colors.$gray-40;
+    content: '';
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
+  }
+
+  &::before {
+    right: layout.$spacing-03;
+    margin-left: -50%;
+  }
+
+  &::after {
+    left: layout.$spacing-03;
+    margin-right: -50%;
+  }
+}

package/src/components/locations/types/index.ts

@@ -0,0 +1,120 @@
+export interface AdmissionLocationResponse {
+  uuid: string;
+  wardName: string;
+  totalBeds: number;
+  occupiedBeds: number;
+  availableBeds: number;
+  ward: {
+    uuid: string;
+    display: string;
+    name: string;
+    tags: Array<{
+      uuid: string;
+      display: string;
+    }>;
+    parentLocation: {
+      uuid: string;
+      display: string;
+    };
+  };
+}
+
+export interface LocationTagsResponse {
+  results: Array<{
+    uuid: string;
+    display: string;
+    name: string;
+    description: string;
+  }>;
+}
+
+// OpenMRS format (legacy)
+export interface LocationResponse {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  stateProvince: string;
+  country: string;
+  countyDistrict: string;
+  address5: string;
+  address6: string;
+  tags: Array<{
+    uuid: string;
+    display: string;
+    name: string;
+    description: string;
+  }>;
+  attributes: Array<{
+    display: string;
+    uuid: string;
+    attributeType: {
+      uuid: string;
+      display: string;
+    };
+    value: string;
+  }>;
+}
+
+export interface FHIRLocation {
+  resourceType: 'Location';
+  id: string;
+  meta?: {
+    versionId?: string;
+    lastUpdated?: string;
+    tag?: Array<{
+      system: string;
+      code: string;
+      display: string;
+    }>;
+  };
+  status: string;
+  name: string;
+  description?: string;
+  address?: {
+    extension?: Array<{
+      url: string;
+      extension?: Array<{
+        url: string;
+        valueString: string;
+      }>;
+    }>;
+    line?: string[];
+    city?: string;
+    district?: string;
+    state?: string;
+    country?: string;
+  };
+  identifier?: Array<{
+    system: string;
+    value: string;
+  }>;
+  partOf?: {
+    reference: string;
+    type: string;
+    display: string;
+  };
+}
+
+export interface FHIRBundle {
+  resourceType: 'Bundle';
+  id: string;
+  meta?: {
+    lastUpdated?: string;
+    tag?: Array<{
+      system: string;
+      code: string;
+      display: string;
+    }>;
+  };
+  type: string;
+  total?: number;
+  link?: Array<{
+    relation: string;
+    url: string;
+  }>;
+  entry?: Array<{
+    fullUrl: string;
+    resource: FHIRLocation;
+  }>;
+}

package/src/components/locations/utils/index.ts

@@ -0,0 +1,5 @@
+import { makeUrl } from '@openmrs/esm-framework';
+
+export function makeUrlUrl(path: string) {
+  return new URL(makeUrl(path), window.location.toString());
+}

package/src/components/logs-table/operation-log-resource.ts

@@ -0,0 +1,41 @@
+import { restBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+import { ETLResponse } from '../../types';
+
+export const recreateTables = async () => {
+  const url = `${restBaseUrl}/kemrchart/recreateTables`;
+  const response = await openmrsFetch<{
+    data: Array<ETLResponse>;
+  }>(url);
+  return response.data.data;
+};
+
+export const refreshTables = async () => {
+  const url = `${restBaseUrl}/kemrchart/refreshTables`;
+  const response = await openmrsFetch<{
+    data: Array<ETLResponse>;
+  }>(url);
+  return response.data.data;
+};
+
+export const recreateDatatools = async () => {
+  const url = `${restBaseUrl}/kemrchart/recreateDatatoolsTables`;
+  const response = await openmrsFetch<{
+    data: Array<ETLResponse>;
+  }>(url);
+  return response.data.data;
+};
+
+export const refreshDwapi = async () => {
+  const url = `${restBaseUrl}/kemrchart/recreateDwapiTables`;
+  const response = await openmrsFetch<{
+    data: Array<ETLResponse>;
+  }>(url);
+  return response.data.data;
+};
+export const recreateFacilityWideTables = async () => {
+  const url = `${restBaseUrl}/kemrchart/recreateFacilitywideTables`;
+  const response = await openmrsFetch<{
+    data: Array<ETLResponse>;
+  }>(url);
+  return response.data.data;
+};

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  DataTableSkeleton,
+  InlineLoading,
+} from '@carbon/react';
+import { CardHeader, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import { useLayoutType, usePagination, formatDate } from '@openmrs/esm-framework';
+import styles from './operation-log.scss';
+import { ETLResponse } from '../../types';
+import EmptyState from '../empty-state/empty-state-log.components';
+
+interface LogTableProps {
+  logData: ETLResponse[];
+  isLoading: boolean;
+}
+
+const LogTable: React.FC<LogTableProps> = ({ logData, isLoading }) => {
+  const { t } = useTranslation();
+  const pageSize = 10;
+  const isTablet = useLayoutType() === 'tablet';
+
+  const headers = [
+    { header: t('procedure', 'Procedure'), key: 'script_name' },
+    { header: t('startTime', 'Start time'), key: 'start_time' },
+    { header: t('endTime', 'End time'), key: 'stop_time' },
+    { header: t('completionStatus', 'Completion status'), key: 'status' },
+  ];
+
+  const rows = logData?.map((item, index) => ({
+    id: index.toString(),
+    script_name: item.script_name,
+    start_time: item?.start_time ? formatDate(new Date(item?.start_time)) : '--',
+    stop_time: item?.stop_time ? formatDate(new Date(item?.stop_time)) : '--',
+    status: item.status,
+  }));
+
+  const { results: paginatedData, currentPage, goTo } = usePagination(rows, pageSize);
+
+  return (
+    <div className={styles.table}>
+      <CardHeader title={t('facilityInfo', 'Facility Info')} children={''} />
+      <div className={styles.logTable}>
+        {isLoading && logData.length === 0 ? (
+          <DataTableSkeleton
+            headers={headers}
+            aria-label="etl table"
+            showToolbar={false}
+            showHeader={false}
+            rowCount={4}
+            zebra
+            columnCount={3}
+            className={styles.dataTableSkeleton}
+          />
+        ) : logData.length === 0 ? (
+          <EmptyState subTitle={t('noRecordsFound', 'No ETL Operation logs found')} />
+        ) : (
+          <>
+            <DataTable rows={paginatedData} headers={headers} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+              {({ rows, headers, getHeaderProps, getTableProps }) => (
+                <TableContainer className={styles.tableContainer}>
+                  <Table {...getTableProps()}>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader
+                            key={header.key}
+                            className={classNames(styles.productiveHeading01, styles.text02)}
+                            {...getHeaderProps({ header })}>
+                            {header.header}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <TableRow key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.info.header === 'status' ? (
+                                <Tag size="md" type={cell.value === 'Success' ? 'green' : 'red'}>
+                                  {cell.value}
+                                </Tag>
+                              ) : (
+                                cell.value
+                              )}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+            </DataTable>
+            <PatientChartPagination
+              currentItems={paginatedData.length}
+              totalItems={rows.length}
+              onPageNumberChange={({ page }) => goTo(page)}
+              pageNumber={currentPage}
+              pageSize={pageSize}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LogTable;

package/src/components/logs-table/operation-log.scss

@@ -0,0 +1,10 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.logTable {
+  margin: 0 auto;
+}
+.table {
+  border: 1px solid colors.$gray-30;
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+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',
+    },
+  ];
+
+  it('renders the table with correct headers and rows', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+
+    const headers = ['Procedure', 'Start time', 'End time', 'Completion status'];
+    headers.forEach((header) => {
+      expect(screen.getByText(header)).toBeInTheDocument();
+    });
+
+    const rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(3);
+  });
+
+  it('displays "No ETL Operation logs found" when logData is empty', () => {
+    render(<LogTable logData={[]} isLoading={false} />);
+
+    expect(screen.getByText('No ETL Operation logs found')).toBeInTheDocument();
+  });
+
+  it('shows skeleton loading state when isLoading is true', () => {
+    render(<LogTable logData={[]} isLoading={true} />);
+
+    const skeleton = screen.getByLabelText('etl table');
+    expect(skeleton).toBeInTheDocument();
+  });
+});

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,170 @@
+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 { CustomHIEPractitionerResponse, type PractitionerResponse } from '../../types';
+import { NormalizedPractitioner } from '../hook/healthWorkerAdapter';
+import styles from './hwr-confirmation.modal.scss';
+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>
+  );
+};
+
+interface HWRConfirmModalProps {
+  onConfirm: () => void;
+  close: () => void;
+  healthWorker: CustomHIEPractitionerResponse | PractitionerResponse;
+  normalizedData: NormalizedPractitioner;
+  fhirFormat: boolean;
+}
+
+const HWRConfirmModal: React.FC<HWRConfirmModalProps> = ({
+  close,
+  onConfirm,
+  healthWorker,
+  normalizedData,
+  fhirFormat,
+}) => {
+  const { t } = useTranslation();
+
+  const isLicenseValid = normalizedData.licenseEndDate ? new Date(normalizedData.licenseEndDate) > 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>
+          {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: normalizedData.fullName || '',
+            }}
+          />
+          <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
+                      label={t('validity', 'Validity')}
+                      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>
+      <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;