@digihmis/esm-patient-registration-app 1.0.0

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"extensions":[{"name":"registration-dashboard-link","slot":"registration-dashboard-slot","component":"leftPanelLink","meta":{"name":"patient-registration","slot":"registration-homepage-dashboard-slot","title":"search"}},{"name":"search-dashboard","slot":"search-dashboard-slot","component":"searchDashboard"},{"name":"registration-form","slot":"registration-form-slot","component":"registrationForm"},{"name":"visit-tag","slot":"patient-banner-tags-slot","component":"visitTag","online":true,"offline":true},{"name":"deceased-patient-tag","slot":"patient-banner-tags-slot","component":"deceasedPatientTag","online":true,"offline":true}],"workspaces":[{"name":"configure-identifiers","component":"identifierConfigureForm","title":"configureIdentifiersForm","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"check-in-form","component":"checkInWorkspace","title":"checkInFormTitle","type":"other-form","canMaximize":true,"width":"extra-wide"}],"version":"1.0.0"}

package/jest.config.js

@@ -0,0 +1,26 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  clearMocks: true,
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest'],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs|.+\\.pnp\\.[^\\/]+$)'],
+  moduleNameMapper: {
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    'lodash-es': 'lodash',
+    '^dexie$': require.resolve('dexie'),
+  },
+  collectCoverageFrom: [
+    '**/src/**/*.tsx',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+    '!**/src/**/*.test.*',
+    '!**/src/declarations.d.ts',
+  ],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@digihmis/esm-patient-registration-app",
+  "version": "1.0.0",
+  "description": "Patient Registration microfrontend for the OpenMRS SPA",
+  "browser": "dist/digihmis-esm-patient-registration-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/its-kios09/DigiHMIS-apps#readme",
+  "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"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/its-kios09/DigiHMIS-apps.git#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/its-kios09/DigiHMIS-apps/issues"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.15",
+    "react-to-print": "2.14.13"
+  },
+  "peerDependencies": {
+    "@carbon/react": "1.x",
+    "@openmrs/esm-framework": "8.x",
+    "react": "^18.1.0",
+    "react-i18next": "16.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  }
+}

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('../../tools/rs-pack-code-spliting');

package/src/active-visit-table/active-visit-table.component.tsx

@@ -0,0 +1,240 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Layer,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  ConfigurableLink,
+  ErrorState,
+  ExtensionSlot,
+  isDesktop,
+  useConfig,
+  useLayoutType,
+  usePagination,
+} from '@openmrs/esm-framework';
+import styles from './active-visits.scss';
+import { type ActiveVisitsConfigSchema } from '../config-schema';
+import { type ActiveVisit } from '../type';
+import { useActiveVisits, useActiveVisitsSorting, useObsConcepts, useTableHeaders } from './active-visits.resource';
+import { EmptyDataIllustration } from './empty-data-illustration.component';
+import upperCase from 'lodash-es/upperCase';
+
+interface ActiveVisitsTableProps {
+  mutate?: () => void;
+}
+
+const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ mutate }) => {
+  const { t } = useTranslation();
+  const config = useConfig<ActiveVisitsConfigSchema>();
+  const layout = useLayoutType();
+  const pageSizes = config?.activeVisits?.pageSizes ?? [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState(config?.activeVisits?.pageSize ?? 10);
+  const { obsConcepts, isLoadingObsConcepts } = useObsConcepts(config.activeVisits.obs);
+  const { activeVisits, isLoading, isValidating, error, mutate: mutateActiveVisits } = useActiveVisits();
+  const [searchString, setSearchString] = useState('');
+  const headerData = useTableHeaders(obsConcepts);
+
+  const transformVisitForDisplay = useCallback((visit: ActiveVisit) => {
+    const displayData = { ...visit };
+
+    return displayData;
+  }, []);
+
+  const searchResults = useMemo(() => {
+    if (activeVisits !== undefined && activeVisits.length > 0) {
+      if (searchString && searchString.trim() !== '') {
+        const search = searchString.toLowerCase();
+        return activeVisits?.filter((activeVisitRow) =>
+          Object.entries(activeVisitRow).some(([header, value]) => {
+            if (header === 'patientUuid') {
+              return false;
+            }
+            return `${value}`.toLowerCase().includes(search);
+          }),
+        );
+      }
+    }
+
+    return activeVisits.map(transformVisitForDisplay);
+  }, [searchString, activeVisits, transformVisitForDisplay]);
+
+  const { sortedRows, sortRow } = useActiveVisitsSorting(searchResults);
+  const { paginated, goTo, results, currentPage } = usePagination(sortedRows, pageSize as number);
+
+  const handleSearch = useCallback(
+    (e) => {
+      goTo(1);
+      setSearchString(e.target.value);
+    },
+    [goTo, setSearchString],
+  );
+
+  if (isLoading || isLoadingObsConcepts) {
+    return (
+      <div className={styles.activeVisitsContainer}>
+        <div className={styles.activeVisitsDetailHeaderContainer}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{t('activeVisits', 'Active Visits')}</h4>
+          </div>
+          <div className={styles.backgroundDataFetchingIndicator}>
+            <span>{isValidating ? <InlineLoading /> : null}</span>
+          </div>
+        </div>
+        <Search
+          labelText={t('filterActiveVisits', 'Filter active visits')}
+          placeholder={t('filterTable', 'Filter table')}
+          onChange={handleSearch}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+          disabled
+        />
+        <DataTableSkeleton
+          rowCount={pageSize}
+          showHeader={false}
+          showToolbar={false}
+          zebra
+          columnCount={headerData?.length}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+        />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.activeVisitsContainer}>
+        <Layer>
+          <ErrorState error={error} headerTitle={t('activeVisits', 'Active Visits')} />
+        </Layer>
+      </div>
+    );
+  }
+
+  if (!activeVisits.length) {
+    return (
+      <div className={styles.activeVisitsContainer}>
+        <Layer>
+          <Tile className={styles.tile}>
+            <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+              <h4>{t('activeVisits', 'Active Visits')}</h4>
+            </div>
+            <p className={styles.content}>
+              {t('noActiveVisitsForLocation', 'There are no active visits to display for this location.')}
+            </p>
+          </Tile>
+        </Layer>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.activeVisitsContainer}>
+      <div className={styles.activeVisitsDetailHeaderContainer}>
+        <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{t('activeVisits', 'Active Visits')}</h4>
+        </div>
+        <div className={styles.backgroundDataFetchingIndicator}>
+          <span>{isValidating ? <InlineLoading /> : null}</span>
+        </div>
+      </div>
+      <Search
+        labelText={t('filterActiveVisits', 'Filter active visits')}
+        placeholder={t('filterTable', 'Filter table')}
+        onChange={handleSearch}
+        size={isDesktop(layout) ? 'sm' : 'lg'}
+      />
+      <DataTable
+        isSortable
+        useStaticWidth
+        rows={results}
+        headers={headerData}
+        sortRow={sortRow}
+        size={isDesktop(layout) ? 'sm' : 'lg'}
+        useZebraStyles={activeVisits?.length > 1}>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+          <TableContainer className={styles.tableContainer}>
+            <Table className={styles.activeVisitsTable} {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => {
+                  const currentVisit = activeVisits.find((visit) => visit.id === row.id);
+
+                  if (!currentVisit) {
+                    return null;
+                  }
+
+                  return (
+                    <TableRow
+                      key={`active-visit-row-${index}`}
+                      {...getRowProps({ row })}
+                      data-testid={`activeVisitRow${currentVisit.patientUuid || 'unknown'}`}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={`active-visit-row-${index}-cell-${cell.id}`} data-testid={cell.id}>
+                          {cell.info.header === 'name' || cell.info.header === 'status'
+                            ? upperCase(cell.value)
+                            : cell.value}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {searchResults?.length === 0 && (
+        <div className={styles.filterEmptyState}>
+          <Layer level={0}>
+            <Tile className={styles.filterEmptyStateTile}>
+              <p className={styles.filterEmptyStateContent}>{t('noVisitsToDisplay', 'No visits to display')}</p>
+              <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+            </Tile>
+          </Layer>
+        </div>
+      )}
+      {paginated && (
+        <Pagination
+          forwardText="Next page"
+          backwardText="Previous page"
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={pageSizes}
+          totalItems={searchResults?.length}
+          className={styles.pagination}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+          onChange={({ pageSize: newPageSize, page: newPage }) => {
+            if (newPageSize !== pageSize) {
+              setPageSize(newPageSize);
+            }
+            if (newPage !== currentPage) {
+              goTo(newPage);
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ActiveVisitsTable;

package/src/active-visit-table/active-visits.resource.ts

@@ -0,0 +1,338 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import last from 'lodash-es/last';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';
+import {
+  type FetchResponse,
+  type OpenmrsResource,
+  type Visit,
+  formatDatetime,
+  openmrsFetch,
+  parseDate,
+  restBaseUrl,
+  useConfig,
+  useSession,
+} from '@openmrs/esm-framework';
+import { type ActiveVisitsConfigSchema } from '../config-schema';
+import { VisitResponse, type ActiveVisit } from '../type';
+
+dayjs.extend(isToday);
+
+export function useActiveVisits() {
+  const session = useSession();
+  const config = useConfig<ActiveVisitsConfigSchema>();
+  const sessionLocation = session?.sessionLocation?.uuid;
+
+  const customRepresentation =
+    'custom:(uuid,patient:(uuid,identifiers:(identifier,uuid,identifierType:(name,uuid)),' +
+    'person:(age,display,gender,uuid,attributes:(value,attributeType:(uuid,display)))),' +
+    'visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,stopDatetime,' +
+    'encounters:(encounterDatetime,obs:(uuid,concept:(uuid,display),value)))';
+
+  const getUrl = (pageIndex, previousPageData: FetchResponse<VisitResponse>) => {
+    if (pageIndex && !previousPageData?.data?.links?.some((link) => link.rel === 'next')) {
+      return null;
+    }
+
+    let url = `${restBaseUrl}/visit?v=${customRepresentation}&`;
+    let urlSearchParams = new URLSearchParams();
+
+    urlSearchParams.append('includeParentLocations', 'true');
+    urlSearchParams.append('includeInactive', 'false');
+    urlSearchParams.append('totalCount', 'true');
+    urlSearchParams.append('location', `${sessionLocation}`);
+
+    if (pageIndex) {
+      urlSearchParams.append('startIndex', `${pageIndex * 50}`);
+    }
+
+    return url + urlSearchParams.toString();
+  };
+
+  const {
+    data,
+    error,
+    isLoading,
+    isValidating,
+    size: pageNumber,
+    setSize,
+    mutate,
+  } = useSWRInfinite<FetchResponse<VisitResponse>, Error>(sessionLocation ? getUrl : null, openmrsFetch);
+
+  useEffect(() => {
+    if (data && data?.[pageNumber - 1]?.data?.links?.some((link) => link.rel === 'next')) {
+      setSize((currentSize) => currentSize + 1);
+    }
+  }, [data, pageNumber, setSize]);
+
+  const mapVisitProperties = (visit: Visit): ActiveVisit => {
+    // create base object
+    const age = visit?.patient?.person?.age;
+    const activeVisits: ActiveVisit = {
+      age: age ? String(age) : null,
+      id: visit.uuid,
+      idNumber: null,
+      gender: visit?.patient?.person?.gender,
+      location: visit?.location?.uuid,
+      name: visit?.patient?.person?.display,
+      patientUuid: visit?.patient?.uuid,
+      visitStartTime: formatDatetime(parseDate(visit?.startDatetime)),
+      visitType: visit?.visitType?.display,
+      visitUuid: visit.uuid,
+    };
+
+    // in case no configuration is given the previous behavior remains the same
+    if (!config?.activeVisits?.identifiers) {
+      activeVisits.idNumber = visit?.patient?.identifiers[0]?.identifier ?? '--';
+    } else {
+      // map identifiers on config
+      config?.activeVisits?.identifiers?.map((configIdentifier) => {
+        // check if in the current visit the patient has in his identifiers the current identifierType name
+        const visitIdentifier = visit?.patient?.identifiers.find(
+          (visitIdentifier) => visitIdentifier?.identifierType?.name === configIdentifier?.identifierName,
+        );
+
+        // add the new identifier or rewrite existing one to activeVisit object
+        // the parameter will corresponds to the name of the key value of the configuration
+        // and the respective value is the visit identifier
+        // If there isn't a identifier we display this default text '--'
+        activeVisits[configIdentifier.header?.key] = visitIdentifier?.identifier ?? '--';
+      });
+    }
+
+    // map attributes on config
+    config?.activeVisits?.attributes?.map(({ display, header }) => {
+      // check if in the current visit the person has in his attributes the current display
+      const personAttributes = visit?.patient?.person?.attributes.find(
+        (personAttributes) => personAttributes?.attributeType?.display === display,
+      );
+
+      // add the new attribute or rewrite existing one to activeVisit object
+      // the parameter will correspond to the name of the key value of the configuration
+      // and the respective value is the persons value
+      // If there isn't a attribute we display this default text '--'
+      activeVisits[header?.key] = personAttributes?.value ?? '--';
+    });
+
+    // Add flattened observations
+    const allObs = visit.encounters.reduce((accumulator, encounter) => {
+      return [...accumulator, ...(encounter.obs || [])];
+    }, []);
+
+    activeVisits.observations = allObs.reduce((map, obs) => {
+      const key = obs.concept.uuid;
+      if (!map[key]) {
+        map[key] = [];
+      }
+      map[key].push({
+        value: obs.value,
+        uuid: obs.uuid,
+      });
+      return map;
+    }, {});
+
+    return activeVisits;
+  };
+
+  const formattedActiveVisits: Array<ActiveVisit> = data
+    ? [].concat(...data?.map((res) => res?.data?.results?.map(mapVisitProperties)))
+    : [];
+
+  return {
+    activeVisits: formattedActiveVisits,
+    error,
+    isLoading,
+    isValidating,
+    mutate,
+    totalResults: data?.[0]?.data?.totalCount ?? 0,
+  };
+}
+
+export function useObsConcepts(uuids: Array<string>): {
+  obsConcepts: Array<OpenmrsResource> | undefined;
+  isLoadingObsConcepts: boolean;
+} {
+  const fetchConcept = async (uuid: string): Promise<OpenmrsResource | null> => {
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/concept/${uuid}?v=custom:(uuid,display)`);
+      return response?.data;
+    } catch (error) {
+      console.error(`Error fetching concept for UUID: ${uuid}`, error);
+      return null;
+    }
+  };
+
+  const { data, isLoading, error } = useSWR(uuids.length > 0 ? ['obs-concepts', uuids] : null, async () => {
+    const results = await Promise.all(uuids.map(fetchConcept));
+    return results.filter((concept) => concept !== null);
+  });
+
+  return useMemo(
+    () => ({
+      obsConcepts: data ?? [],
+      isLoadingObsConcepts: isLoading,
+    }),
+    [data, isLoading],
+  );
+}
+
+export function useActiveVisitsSorting(tableRows: Array<any>) {
+  const [sortParams, setSortParams] = useState<{
+    key: string;
+    sortDirection: 'ASC' | 'DESC' | 'NONE';
+  }>({ key: 'visitStartTime', sortDirection: 'DESC' });
+
+  const sortRow = (cellA, cellB, { key, sortDirection }) => {
+    setSortParams({ key, sortDirection });
+  };
+
+  const getSortValue = (item: any, key: string) => {
+    // For observation columns
+    if (key.startsWith('obs-')) {
+      const conceptUuid = key.replace('obs-', '');
+      const obsValue = item?.observations?.[conceptUuid]?.[0]?.value;
+
+      if (!obsValue) {
+        return null;
+      }
+      if (typeof obsValue === 'object' && obsValue.display) {
+        return obsValue.display.toLowerCase();
+      }
+      return obsValue;
+    }
+
+    const value = item[key];
+    if (value == null) {
+      return null;
+    }
+
+    if (key === 'visitStartTime') {
+      return new Date(value).getTime();
+    }
+
+    if (key === 'age' && !isNaN(value)) {
+      return Number(value);
+    }
+
+    return String(value).toLowerCase();
+  };
+
+  const sortedRows = useMemo(() => {
+    if (sortParams.sortDirection === 'NONE') {
+      return tableRows;
+    }
+
+    return [...tableRows].sort((a, b) => {
+      const valueA = getSortValue(a, sortParams.key);
+      const valueB = getSortValue(b, sortParams.key);
+
+      if (valueA === null && valueB === null) {
+        return 0;
+      }
+      if (valueA === null) {
+        return 1;
+      }
+      if (valueB === null) {
+        return -1;
+      }
+
+      if (typeof valueA === 'number' && typeof valueB === 'number') {
+        return sortParams.sortDirection === 'DESC' ? valueB - valueA : valueA - valueB;
+      }
+
+      const compareResult = String(valueA).localeCompare(String(valueB), undefined, {
+        numeric: true,
+      });
+
+      return sortParams.sortDirection === 'DESC' ? -compareResult : compareResult;
+    });
+  }, [sortParams, tableRows]);
+
+  return {
+    sortedRows,
+    sortRow,
+  };
+}
+
+export function useTableHeaders(obsConcepts: OpenmrsResource[]) {
+  const { t } = useTranslation();
+  const config = useConfig<ActiveVisitsConfigSchema>();
+
+  return useMemo(() => {
+    let headersIndex = 0;
+
+    const headers = [
+      {
+        id: headersIndex++,
+        header: t('visitStartTime', 'Visit Time'),
+        key: 'visitStartTime',
+      },
+    ];
+
+    config?.activeVisits?.identifiers?.forEach((identifier) => {
+      headers.push({
+        id: headersIndex++,
+        header: t(identifier?.header?.key, identifier?.header?.default),
+        key: identifier?.header?.key,
+      });
+    });
+
+    if (!config?.activeVisits?.identifiers) {
+      headers.push({
+        id: headersIndex++,
+        header: t('idNumber', 'ID Number'),
+        key: 'idNumber',
+      });
+    }
+
+    config?.activeVisits?.attributes?.forEach((attribute) => {
+      headers.push({
+        id: headersIndex++,
+        header: t(attribute?.header?.key, attribute?.header?.default),
+        key: attribute?.header?.key,
+      });
+    });
+
+    // Add headers for obs concepts
+    obsConcepts?.forEach((concept) => {
+      headers.push({
+        id: headersIndex++,
+        header: concept.display,
+        key: `obs-${concept.uuid}`,
+      });
+    });
+
+    headers.push(
+      {
+        id: headersIndex++,
+        header: t('name', 'Name'),
+        key: 'name',
+      },
+      {
+        id: headersIndex++,
+        header: t('gender', 'Gender'),
+        key: 'gender',
+      },
+      {
+        id: headersIndex++,
+        header: t('age', 'Age'),
+        key: 'age',
+      },
+      {
+        id: headersIndex++,
+        header: t('visitType', 'Visit Type'),
+        key: 'visitType',
+      },
+    );
+
+    return headers;
+  }, [t, config, obsConcepts]);
+}
+
+export const getOriginFromPathName = (pathname = '') => {
+  const from = pathname.split('/');
+  return last(from);
+};