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

package/dist/routes.json

@@ -0,0 +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":"locationsLeftPanelLink","name":"locations-left-panel-link","slot":"admin-left-panel-slot"},{"component":"facilitySetupLeftPanelLink","name":"facility-setup-left-panel-link","slot":"admin-left-panel-slot"},{"component":"providerBanner","name":"provider-banner","slot":"provider-banner-info-slot","order":1}],"workspaces":[{"name":"manage-user-workspace","component":"manageUserWorkspace","title":"Manage User Workspace","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","title":"User Rple Scope Workspace","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"add-location-workspace","title":"Add Location","component":"addLocation","type":"workspace"},{"name":"search-location-workspace","title":"Search Location","component":"searchLocationWorkspace","type":"workspace"},{"name":"hwr-sync-workspace","title":"HWR Sync Workspace","component":"hwrSyncWorkspace","type":"other-form"},{"name":"hwr-sync-modal","title":"HWR Sync Modal","component":"hwrSyncModal","type":"modal"}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"},{"component":"hwrConfirmationModal","name":"hwr-confirmation-modal"},{"component":"hwrEmptyModal","name":"hwr-empty-modal"},{"component":"hwrSyncModal","name":"hwr-syncing-modal"}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.2-pre.100"}

package/jest.config.js

@@ -0,0 +1,8 @@
+const rootConfig = require('../../jest.config.js');
+
+const packageConfig = {
+  ...rootConfig,
+  collectCoverage: false,
+};
+
+module.exports = packageConfig;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@palladium-ethiopia/esm-admin-app",
+  "version": "5.4.2-pre.100",
+  "description": "Admin app for EthiopiaEMR",
+  "keywords": [
+    "openmrs"
+  ],
+  "homepage": "https://github.com/palladium-group/ethiopiaemr-esm-3.x#readme",
+  "bugs": {
+    "url": "https://github.com/palladium-group/ethiopiaemr-esm-3.x/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/palladium-group/ethiopiaemr-esm-3.x#readme"
+  },
+  "license": "MPL-2.0",
+  "main": "src/index.ts",
+  "source": true,
+  "browser": "dist/ethiopia-esm-admin-app.js",
+  "scripts": {
+    "analyze": "rspack --mode=production --env analyze=true",
+    "build": "rspack --mode=production",
+    "coverage": "yarn test --coverage",
+    "debug": "npm run serve",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "lint": "eslint src --ext ts,tsx",
+    "serve": "rspack serve --mode=development",
+    "start": "openmrs develop",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "typescript": "tsc"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "dependencies": {
+    "lodash-es": "^4.17.15",
+    "react-to-print": "2.14.13"
+  },
+  "peerDependencies": {
+    "@carbon/react": "^1.83.0",
+    "@openmrs/esm-framework": "8.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "1.0.0"
+}

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-rspack-config');

package/src/components/confirm-modal/confirmation-operation-modal.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+
+interface OperationConfirmationModalProps {
+  close: () => void;
+  confirm: () => void;
+  operationName: string;
+  operationType: string;
+}
+
+const OperationConfirmation: React.FC<OperationConfirmationModalProps> = ({
+  close,
+  confirm,
+  operationName,
+  operationType,
+}) => {
+  const { t } = useTranslation();
+  const message = t('operationsConfirmationMessages', 'Do you want to {{operationTypeOrName}}?', {
+    operationTypeOrName: operationType || operationName,
+  });
+
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{t('confirmation', 'Confirmation')}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>{message}</p>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('noRespond', 'No')}
+        </Button>
+        <Button kind="primary" onClick={confirm}>
+          {t('yesRespond', 'Yes')}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default OperationConfirmation;

package/src/components/confirm-modal/confirmation-operation.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useTranslation } from 'react-i18next';
+import OperationConfirmation from './confirmation-operation-modal.component';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn(),
+}));
+
+describe('OperationConfirmation', () => {
+  beforeEach(() => {
+    (useTranslation as jest.Mock).mockReturnValue({
+      t: (key, defaultValue, options) =>
+        options?.operationTypeOrName ? `Do you want to ${options.operationTypeOrName}?` : defaultValue || key,
+    });
+  });
+
+  it('renders the component with provided props', () => {
+    const closeMock = jest.fn();
+    const confirmMock = jest.fn();
+    const operationName = 'refresh';
+    const operationType = 'refreshed';
+
+    render(
+      <OperationConfirmation
+        close={closeMock}
+        confirm={confirmMock}
+        operationName={operationName}
+        operationType={operationType}
+      />,
+    );
+
+    expect(screen.getByRole('heading', { name: 'Confirmation' })).toBeInTheDocument();
+    expect(screen.getByText('Do you want to refreshed?')).toBeInTheDocument();
+    expect(screen.getByText('No')).toBeInTheDocument();
+    expect(screen.getByText('Yes')).toBeInTheDocument();
+  });
+
+  it('calls close when the No button is clicked', () => {
+    const closeMock = jest.fn();
+    const confirmMock = jest.fn();
+
+    render(
+      <OperationConfirmation close={closeMock} confirm={confirmMock} operationName="delete" operationType="deleted" />,
+    );
+
+    const noButton = screen.getByText('No');
+    fireEvent.click(noButton);
+
+    expect(closeMock).toHaveBeenCalledTimes(1);
+    expect(confirmMock).not.toHaveBeenCalled();
+  });
+
+  it('calls confirm when the Yes button is clicked', () => {
+    const closeMock = jest.fn();
+    const confirmMock = jest.fn();
+
+    render(
+      <OperationConfirmation close={closeMock} confirm={confirmMock} operationName="delete" operationType="deleted" />,
+    );
+
+    const yesButton = screen.getByText('Yes');
+    fireEvent.click(yesButton);
+
+    expect(confirmMock).toHaveBeenCalledTimes(1);
+    expect(closeMock).not.toHaveBeenCalled();
+  });
+});

package/src/components/dashboard/dashboard.component.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import Header from '../header/header.component';
+import { useTranslation } from 'react-i18next';
+import { Layer, ComboButton, MenuItem, InlineLoading } from '@carbon/react';
+import styles from './dashboard.scss';
+import {
+  recreateTables,
+  refreshTables,
+  recreateDatatools,
+  refreshDwapi,
+  recreateFacilityWideTables,
+} from '../logs-table/operation-log-resource';
+import LogTable from '../logs-table/operation-log-table.component';
+import { showModal, showSnackbar } from '@openmrs/esm-framework';
+
+const Dashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentOperation, setCurrentOperation] = useState<string>('');
+  const [logData, setLogData] = useState<Array<any>>([]);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const openConfirmationModal = (
+    operation: () => Promise<any>,
+    operationName: string,
+    clearDataOnRecreate: boolean = false,
+  ) => {
+    const dispose = showModal('operation-confirmation-modal', {
+      confirm: async () => {
+        dispose();
+        setIsLoading(true);
+        setCurrentOperation(operationName);
+        if (clearDataOnRecreate) {
+          setLogData([]);
+        }
+
+        try {
+          setIsRefreshing(operationName === 'refreshTables');
+
+          const data = await operation();
+          const isRecreate = operationName.toLowerCase().includes('recreate');
+          const operationType = isRecreate ? t('recreated', 'recreated') : t('refreshed', 'refreshed');
+
+          showSnackbar({
+            title: t('operationSuccess', '{{operationName}} successfully {{operationType}}', {
+              operationName,
+              operationType,
+            }),
+            subtitle: t('operationSuccessSubtitle', 'The operation completed successfully.'),
+            kind: 'success',
+            isLowContrast: true,
+          });
+
+          if (operationName === 'refreshTables') {
+            setLogData((prevData) => [...prevData, ...data]);
+          } else {
+            setLogData(data);
+          }
+        } catch (error) {
+          showSnackbar({
+            title: t('operationError', '{{operationName}} failed', { operationName }),
+            subtitle: t('operationErrorSubtitle', 'An error occurred during the operation.'),
+            kind: 'error',
+            isLowContrast: true,
+          });
+        } finally {
+          setIsLoading(false);
+          setIsRefreshing(false);
+          setCurrentOperation('');
+        }
+      },
+      close: () => {
+        dispose();
+      },
+      operationName,
+      operationType: operationName,
+    });
+  };
+
+  return (
+    <div className="omrs-main-content">
+      <Header title={t('home', 'Home')} />
+      <Layer className={styles.btnLayer}>
+        {isLoading ? (
+          <InlineLoading
+            description={t('etlsOperationsLoading', 'Please wait {{currentOperation}} is in progress...', {
+              currentOperation,
+            })}
+            className={styles.loading}
+          />
+        ) : (
+          <ComboButton tooltipAlignment="left" label={t('etlOperation', 'ETL operations')} size="md">
+            <MenuItem
+              label={t('refreshTables', 'Refresh tables')}
+              onClick={() => openConfirmationModal(refreshTables, t('refreshTables', 'Refresh tables'), false)}
+            />
+            <MenuItem
+              label={t('refreshDwapi', 'Refresh DWAPI tables')}
+              onClick={() => openConfirmationModal(refreshDwapi, t('refreshDwapi', 'Refresh DWAPI tables'), false)}
+            />
+            <MenuItem
+              label={t('recreateTables', 'Recreate tables')}
+              onClick={() => openConfirmationModal(recreateTables, t('recreateTables', 'Recreate tables'), true)}
+            />
+            <MenuItem
+              label={t('recreateDatatools', 'Recreate datatools')}
+              onClick={() =>
+                openConfirmationModal(recreateDatatools, t('recreateDatatools', 'Recreate datatools'), true)
+              }
+            />{' '}
+            <MenuItem
+              label={t('recreateFacilityWideTables', 'Recreate facility wide tables')}
+              onClick={() =>
+                openConfirmationModal(
+                  recreateFacilityWideTables,
+                  t('recreateFacilityWideTables', 'Recreate facility wide tables'),
+                  true,
+                )
+              }
+            />
+          </ComboButton>
+        )}
+      </Layer>
+      <Layer className={styles.tableLayer}>
+        <LogTable logData={logData} isLoading={isRefreshing} />
+      </Layer>
+    </div>
+  );
+};
+
+export default Dashboard;

package/src/components/dashboard/dashboard.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/dashboard/etl-dashboard.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Dashboard from './dashboard.component';
+
+const EtlAdminDashboard: React.FC = () => {
+  return (
+    <section>
+      <Dashboard />
+    </section>
+  );
+};
+export default EtlAdminDashboard;

package/src/components/empty-state/empty-state-log.components.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './empty-state-log.scss';
+import { DataEnrichment } from '@carbon/react/icons';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+
+interface EmptyStateProps {
+  subTitle: string;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ subTitle }) => {
+  return (
+    <div className={styles.emptyStateContainer}>
+      <EmptyDataIllustration />
+      <p className={styles.subTitle}>{subTitle}</p>
+    </div>
+  );
+};
+
+export default EmptyState;

package/src/components/empty-state/empty-state-log.scss

@@ -0,0 +1,28 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.emptyStateContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  background-color: colors.$gray-10;
+  row-gap: layout.$spacing-02;
+
+  & form {
+    border: none;
+  }
+  .subTitle {
+    @include type.type-style('body-compact-01');
+    color: colors.$cool-gray-70;
+    margin-top: layout.$spacing-04;
+  }
+}
+
+svg.iconOverrides {
+  width: layout.$spacing-11;
+  height: layout.$spacing-11;
+  fill: var(--brand-03);
+}

package/src/components/empty-state/empty-state-log.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import EmptyState from './empty-state-log.components';
+import React from 'react';
+
+// Mock the EmptyDataIllustration component
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  EmptyDataIllustration: jest.fn(() => <div>Mocked EmptyDataIllustration</div>),
+}));
+
+describe('EmptyState', () => {
+  it('renders the EmptyState component with the given subtitle', () => {
+    const testSubtitle = 'No data available';
+
+    render(<EmptyState subTitle={testSubtitle} />);
+
+    const subtitleElement = screen.getByText(testSubtitle);
+    expect(subtitleElement).toBeInTheDocument();
+
+    const illustrationElement = screen.getByText('Mocked EmptyDataIllustration');
+    expect(illustrationElement).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+type CardProps = {
+  label: string;
+  value?: string;
+};
+
+const Card: React.FC<CardProps> = ({ label, value }) => {
+  return (
+    <p>
+      <strong>{label}:</strong> {value ?? '--'}
+    </p>
+  );
+};
+
+export default Card;

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

@@ -0,0 +1,142 @@
+import { Button, Column, Grid, InlineLoading, Layer, Tile } from '@carbon/react';
+import { formatDate, parseDate, showSnackbar } from '@openmrs/esm-framework';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocalFacilityInfo, useShaFacilityInfo } from '../hook/useFacilityInfo';
+import styles from './facility-info.scss';
+import Card from './card.component';
+import dayjs from 'dayjs';
+import { syncPackagesAndInterventions } from './facility-setup.resource';
+
+const FacilityInfo: React.FC = () => {
+  const { t } = useTranslation();
+  const [shouldSynchronize, setshouldSynchronize] = useState<boolean>(false);
+  const {
+    shaFacility,
+    isLoading: isShaFacilityLoading,
+    error: shaFacilityError,
+    mutate: mutateShafacility,
+  } = useShaFacilityInfo(shouldSynchronize);
+  const {
+    localFacility,
+    isLoading: isLocalFacilityLoading,
+    mutate: mutateLocalFacility,
+    error: localFacilityError,
+  } = useLocalFacilityInfo();
+  const mutateFacility = useCallback(async () => {
+    const defaultFacility = await mutateLocalFacility();
+    const shaFacility = await mutateShafacility();
+    return {
+      shaFacility,
+      defaultFacility,
+    };
+  }, [mutateLocalFacility, mutateShafacility]);
+  const shaStatus = useMemo(
+    () =>
+      shaFacility?.operationalStatus
+        ? `${shaFacility.operationalStatus.at(0).toUpperCase()}${shaFacility.operationalStatus
+            .slice(1)
+            ?.toLocaleLowerCase()}`
+        : undefined,
+    [shaFacility],
+  );
+  const shaExpiry = useMemo(
+    () =>
+      shaFacility?.shaFacilityExpiryDate && dayjs(shaFacility.shaFacilityExpiryDate).isValid()
+        ? formatDate(parseDate(shaFacility.shaFacilityExpiryDate))
+        : undefined,
+    [shaFacility],
+  );
+
+  const synchronizeFacilityData = useCallback(async () => {
+    try {
+      setshouldSynchronize(true);
+      const { shaFacility } = await mutateFacility();
+      showSnackbar({
+        title: t('syncingHieSuccess', 'Synchronization Complete'),
+        kind: 'success',
+        isLowContrast: true,
+      });
+      if (shaFacility.data?.source != 'HIE') {
+        showSnackbar({
+          kind: 'warning',
+          title: 'HIE Sync Failed. Pulling local info.',
+          isLowContrast: true,
+        });
+      }
+      // sync packages and intervensions
+      await syncPackagesAndInterventions();
+    } catch (error) {
+      const errorMessage =
+        error?.responseBody?.error?.message ??
+        t('hieSynchronizationError', 'An error occurred while synchronizing with HIE');
+      showSnackbar({
+        title: t('syncingHieError', 'Syncing with HIE Failed'),
+        subtitle: errorMessage,
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
+  }, [mutateFacility, t]);
+
+  return (
+    <div className={styles.facilityInfoContainer}>
+      <div>
+        <Layer className={styles.btnLayer}>
+          {isShaFacilityLoading || isLocalFacilityLoading ? (
+            <InlineLoading
+              description={t('synchronizingFacilityData', 'Please wait, Synchronizing Info.')}
+              className={styles.loading}
+            />
+          ) : (
+            <Button kind="primary" onClick={synchronizeFacilityData}>
+              {t('synchronizeWithHie', 'Synchronize with HIE')}
+            </Button>
+          )}
+        </Layer>
+      </div>
+
+      <Grid narrow>
+        {/* General Info Column */}
+        <Column sm={4} md={4} lg={8}>
+          <Tile className={styles.card}>
+            <h3 className={styles.cardTitle}>{t('generalInformation', 'General Information')}</h3>
+            <hr className={styles.cardDivider} />
+            <div className={styles.cardContent}>
+              <Card label={t('facilityName', 'Facility Name')} value={localFacility?.display} />
+              <Card label={t('facilityCode', 'Facility KMHFR Code')} value={shaFacility?.mflCode} />
+              <Card label={t('kephLevel', 'Keph Level')} value={shaFacility?.kephLevel} />
+              <br />
+              <br />
+            </div>
+          </Tile>
+        </Column>
+
+        {/* SHA Info Column */}
+        <Column sm={4} md={4} lg={8}>
+          <Layer>
+            <Tile className={styles.card}>
+              <h3 className={styles.cardTitle}>{t('facilityInformation', 'Facility Information')}</h3>
+              <hr className={styles.cardDivider} />
+              <div className={styles.cardContent}>
+                <Card
+                  label={t('facilityRegistryCode', 'Facility Registry Code')}
+                  value={shaFacility?.facilityRegistryCode}
+                />
+                <Card
+                  label={t('shalicenceNumber', 'SHA License Number')}
+                  value={shaFacility?.shaFacilityLicenseNumber}
+                />
+                <Card label={t('shaStatus', 'SHA Status')} value={shaStatus} />
+                <Card label={t('shaContracted', 'SHA Contracted')} value={shaFacility?.approved} />
+                <Card label={t('shaContractExpiry', 'SHA Contract Expiry Date')} value={shaExpiry} />
+              </div>
+            </Tile>
+          </Layer>
+        </Column>
+      </Grid>
+    </div>
+  );
+};
+
+export default FacilityInfo;