@ampath/esm-dha-workflow-app 4.0.0-claim-workflows.159

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@ampath/esm-dha-workflow-app",
+  "version": "4.0.0-claim-workflows.159",
+  "license": "MPL-2.0",
+  "description": "An OpenMRS seed application for building microfrontends",
+  "browser": "dist/esm-dha-workflow-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "dev": "openmrs develop --backend=https://staging.ampath.or.ke --api-url=/openmrs --config-url=https://ngx.ampath.or.ke/o3-config.json --port=9000",
+    "serve": "webpack serve --mode=development",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env analyze=true",
+    "lint": "eslint src --ext js,jsx,ts,tsx --max-warnings 0",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\" --list-different",
+    "typescript": "tsc",
+    "test": "jest --config jest.config.js --passWithNoTests",
+    "verify": "turbo lint typescript coverage",
+    "coverage": "yarn test --coverage",
+    "prepare": "husky install",
+    "extract-translations": "i18next 'src/**/*.component.tsx' --config ./tools/i18next-parser.config.js",
+    "test-e2e": "playwright test"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs",
+    "microfrontends"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-home-app.git"
+  },
+  "homepage": "https://github.com/openmrs/openmrs-esm-home-app#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-home-app/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.83.0",
+    "@hookform/resolvers": "^3.1.1",
+    "@superset-ui/embedded-sdk": "^0.3.0",
+    "lodash-es": "^4.17.21",
+    "react-hook-form": "^7.45.1",
+    "react-to-print": "^3.1.1",
+    "zod": "^3.21.4"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "*",
+    "@openmrs/esm-patient-common-lib": "*",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "16.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-patient-common-lib": "next",
+    "@openmrs/esm-styleguide": "next",
+    "@playwright/test": "^1.52.0",
+    "@swc/cli": "^0.3.12",
+    "@swc/core": "^1.3.68",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/webpack-env": "^1.18.1",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "css-loader": "^6.8.1",
+    "dayjs": "^1.11.13",
+    "dotenv": "^16.0.3",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "husky": "^8.0.3",
+    "i18next": "^25.0.0",
+    "i18next-parser": "^9.3.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.2",
+    "openmrs": "next",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^16.0.0",
+    "react-router-dom": "^6.14.1",
+    "rxjs": "^6.6.7",
+    "swc-loader": "^0.2.3",
+    "swr": "^2.2.4",
+    "turbo": "^2.5.2",
+    "typescript": "^5.0.0",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1"
+  },
+  "lint-staged": {
+    "packages/**/src/**/*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
+    "*.{css,scss,ts,tsx}": "prettier --write --list-different"
+  },
+  "packageManager": "yarn@4.10.3"
+}

package/playwright.config.ts

@@ -0,0 +1,32 @@
+import { devices, PlaywrightTestConfig } from '@playwright/test';
+import * as dotenv from 'dotenv';
+dotenv.config();
+
+// See https://playwright.dev/docs/test-configuration.
+const config: PlaywrightTestConfig = {
+  testDir: './e2e/specs',
+  timeout: 3 * 60 * 1000,
+  expect: {
+    timeout: 40 * 1000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  reporter: process.env.CI ? [['junit', { outputFile: 'results.xml' }], ['html']] : [['html']],
+  globalSetup: require.resolve('./e2e/core/global-setup'),
+  use: {
+    baseURL: `${process.env.E2E_BASE_URL}/spa/`,
+    storageState: 'e2e/storageState.json',
+    video: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+};
+
+export default config;

package/prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  bracketSpacing: true,
+  printWidth: 120,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+};

package/src/accounting/accounting.component.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect, useState } from 'react';
+import { ExtensionSlot, WorkspaceContainer } from '@openmrs/esm-framework';
+
+const AccountingComponent: React.FC = () => {
+  
+  return (
+    <div>
+      <ExtensionSlot name="poc-accounting-dashboard-slot" />
+    </div>
+  );
+};
+
+export default AccountingComponent;

package/src/admissions/admission-request-list/admission-request-list.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { Button, OverflowMenu, OverflowMenuItem, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { BedLayout, Disposition } from '../types';
+import AdmitPatientModal from '../modal/admit-patient/admit-patient.modal';
+import { formatDate, Patient } from '@openmrs/esm-framework';
+import CancelAdmissionRequestModal from '../modal/cancel-admission-request/cancel-admission-request';
+import AdmitElsewhereModal from '../modal/admit-elsewhere/admit-elsewhere.modal';
+
+interface AdmissionListProps {
+  admissionListData: Disposition[];
+  bedLayouts: BedLayout[];
+  refresh: () => void;
+}
+
+const AdmissionsRequestList: React.FC<AdmissionListProps> = ({ admissionListData, bedLayouts, refresh }) => {
+  const [selectedPatient, setSelectedPatient] = useState<Patient>();
+  const [selectedDisposition, setSelectedDisposition] = useState<Disposition>();
+  const [showAdmitModal, setShowAdmitModal] = useState<boolean>(false);
+  const [showAdmitElsewhereModal, setShowAdmitElsewhereModal] = useState<boolean>(false);
+  const [showCancelAdmissionModal, setShowCancelAdmissionModal] = useState<boolean>(false);
+  if (!admissionListData || admissionListData.length === 0) {
+    return <>No Data</>;
+  }
+  const handleCancelRequest = (disposition: Disposition) => {
+    setSelectedDisposition(disposition);
+    setShowCancelAdmissionModal(true);
+  };
+  const handleAdmitPatient = (disposition: Disposition) => {
+    setShowAdmitModal(true);
+    setSelectedPatient(disposition.patient);
+    setSelectedDisposition(disposition);
+  };
+  const handleAdmitElsewhere = (disposition: Disposition) => {
+    setSelectedPatient(disposition.patient);
+    setSelectedDisposition(disposition);
+    setShowAdmitElsewhereModal(true);
+  };
+  const handleAdmitModalClose = () => {
+    setShowAdmitModal(false);
+  };
+  const handeSuccessfullAdmission = () => {
+    handleAdmitModalClose();
+    refresh();
+  };
+  const handleCancelAdmissionClose = () => {
+    setShowCancelAdmissionModal(false);
+    refresh();
+  };
+  const handleCancelAdmissionSuccess = () => {
+    handleCancelAdmissionClose();
+  };
+  const handleCancelAdmitElsewhere = () => {
+    setShowAdmitElsewhereModal(false);
+  };
+  const handleSuccessfullTransfer = () => {
+    handleCancelAdmitElsewhere();
+    refresh();
+  }
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>Date</TableHeader>
+            <TableHeader>Name</TableHeader>
+            <TableHeader>Gender</TableHeader>
+            <TableHeader>Age</TableHeader>
+            <TableHeader>Action</TableHeader>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {admissionListData &&
+            admissionListData.map((val, index) => (
+              <TableRow key={val.dispositionLocation.uuid ?? index}>
+                <TableCell>{index + 1}</TableCell>
+                <TableCell>{formatDate(new Date(val.dispositionEncounter.encounterDatetime))}</TableCell>
+                <TableCell>{val.patient.person.display}</TableCell>
+                <TableCell>{val.patient.person.gender}</TableCell>
+                <TableCell>{val.patient.person.age}</TableCell>
+                <TableCell>
+                  <>
+                    <OverflowMenu aria-label="overflow-menu">
+                      <OverflowMenuItem itemText="Cancel" onClick={() => handleCancelRequest(val)} />
+                      <OverflowMenuItem itemText="Admit" onClick={() => handleAdmitPatient(val)} />
+                      <OverflowMenuItem itemText="Admit Elsewhere" onClick={() => handleAdmitElsewhere(val)} />
+                    </OverflowMenu>
+                  </>
+                </TableCell>
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+      {
+        showAdmitModal ? (<>
+          <AdmitPatientModal
+            onModalClose={handleAdmitModalClose}
+            open={showAdmitModal}
+            onSuccessfullAdmission={handeSuccessfullAdmission}
+            disposition={selectedDisposition}
+            bedLayouts={bedLayouts}
+          />
+        </>) : (<></>)
+      }
+      {
+        showCancelAdmissionModal ? (<>
+          <CancelAdmissionRequestModal
+            open={showCancelAdmissionModal}
+            onModalClose={handleCancelAdmissionClose}
+            onCancelAdmission={handleCancelAdmissionSuccess}
+            admissionRequest={selectedDisposition}
+
+          />
+        </>) : (<></>)
+      }
+      {
+        showAdmitElsewhereModal ? (<>
+          <AdmitElsewhereModal
+            open={showAdmitElsewhereModal}
+            onModalClose={handleCancelAdmitElsewhere}
+            patient={selectedPatient}
+            visit={selectedDisposition.visit}
+            onSuccessfullTransfer={handleSuccessfullTransfer} />
+        </>) : (<></>)
+
+      }
+
+    </>
+
+  );
+};
+
+export default AdmissionsRequestList;

package/src/admissions/admissions-dashboard.component.scss

@@ -0,0 +1,15 @@
+.admissionsLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+    padding: 2% 2%;
+}
+
+.statsSection{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 15px;
+    margin-bottom: 15px;
+}

package/src/admissions/admissions-dashboard.component.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import styles from './admissions-dashboard.component.scss';
+import StatCard from '../shared/ui/stat-card/stat-card.component';
+import { InlineLoading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { useSession } from '@openmrs/esm-framework';
+import {
+  getAdmissionLoactionData,
+  getAdmissionRequests,
+  getAdmittedPatientsData,
+  getDichargedEncounters,
+} from './admissions.resource';
+import {
+  type Disposition,
+  type AdmissionLocationData,
+  type BedLayout,
+  type FhirEncounter,
+  type FhirEncounterBundle,
+} from './types';
+import AdmittedPatientsList from './admitted-list/admitted-patients-list';
+import AdmissionsRequestList from './admission-request-list/admission-request-list';
+import { AdmissionEncounterTypeUuids } from './constants';
+import DischargedList from './discharged-list/discharged-list';
+
+const AdmissionsDashboard: React.FC = () => {
+  const [dashboardData, setDashboardData] = useState<AdmissionLocationData>(null);
+  const [admissionListData, setAdmissionListData] = useState<Disposition[]>([]);
+  const [admittedPatientsData, setAdmittedPatientsData] = useState<BedLayout[]>([]);
+  const [dischargeEncounterBundle, setDischargeEncounterBundle] = useState<FhirEncounterBundle>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const sortedDischargeEncounters = useMemo(() => generateDischargeEncounters(), [dischargeEncounterBundle]);
+  useEffect(() => {
+    fetchData();
+  }, [locationUuid]);
+  const fetchData = () => {
+    setLoading(true);
+    getDashboardData();
+    getAdmissionListData();
+    getAdmittedPatients();
+    getDisachargedEncounters();
+  };
+  const getDashboardData = async () => {
+    const res = await getAdmissionLoactionData(locationUuid);
+    setDashboardData(res);
+    setLoading(false);
+  };
+  const getFreeBeds = (dashboardData: AdmissionLocationData): number => {
+    return (dashboardData?.totalBeds ?? 0) - (dashboardData.occupiedBeds ?? 0);
+  };
+  const getBedOccupancy = (dashboardData: AdmissionLocationData): number => {
+    return parseFloat(((dashboardData?.occupiedBeds / dashboardData.totalBeds) * 100).toFixed(2));
+  };
+  const getAdmissionListData = async () => {
+    const res = await getAdmissionRequests(locationUuid);
+    setAdmissionListData(res);
+    setLoading(false);
+  };
+  const getAdmittedPatients = async () => {
+    const res = await getAdmittedPatientsData(locationUuid);
+    setAdmittedPatientsData(res);
+    setLoading(false);
+  };
+  const getDisachargedEncounters = async () => {
+    const res = await getDichargedEncounters(AdmissionEncounterTypeUuids.DISCHARGE_ENCOUNTER_TYPE_UUID, locationUuid);
+    setDischargeEncounterBundle(res);
+  };
+  function generateDischargeEncounters(): FhirEncounter[] {
+    if (dischargeEncounterBundle && dischargeEncounterBundle.entry) {
+      const fhirEntries = dischargeEncounterBundle.entry ?? [];
+      let dischargeEncounters: FhirEncounter[] = [];
+      fhirEntries.forEach((fe) => {
+        const resource = fe.resource;
+        if (resource && resource.resourceType === 'Encounter') {
+          dischargeEncounters.push(resource);
+        }
+      });
+      // order encounters in desc order
+      const sortedEnc = dischargeEncounters.sort((a, b) => {
+        return new Date(b.period.start).getTime() - new Date(a.period.start).getTime();
+      });
+      return sortedEnc;
+    } else {
+      return [];
+    }
+  }
+  const handleRefresh = () => {
+    fetchData();
+  };
+  return (
+    <>
+      <div className={styles.admissionsLayout}>
+        <div className={styles.headerSection}>
+          <h4>Admissions</h4>
+        </div>
+        <div className={styles.statsSection}>
+          <>
+            {dashboardData ? (
+              <>
+                <StatCard title="Number of beds" count={dashboardData.totalBeds} />
+                <StatCard title="Admitted Patients" count={dashboardData.occupiedBeds} />
+                <StatCard title="Free Beds" count={getFreeBeds(dashboardData)} />
+                <StatCard title="Bed Occupancy" count={getBedOccupancy(dashboardData)} other="%" />
+              </>
+            ) : (
+              <></>
+            )}
+          </>
+        </div>
+        <div className={styles.contentSection}>
+          {loading ? (
+            <>
+              <InlineLoading description="Fetching Data...please wait...." />
+            </>
+          ) : (
+            <>
+              <Tabs>
+                <TabList contained>
+                  <Tab>Admission Requests</Tab>
+                  <Tab>Admitted</Tab>
+                  <Tab>Discharged</Tab>
+                </TabList>
+                <TabPanels>
+                  <TabPanel>
+                    {admissionListData ? (
+                      <AdmissionsRequestList
+                        admissionListData={admissionListData}
+                        bedLayouts={admittedPatientsData}
+                        refresh={handleRefresh}
+                      />
+                    ) : (
+                      <></>
+                    )}
+                  </TabPanel>
+                  <TabPanel>
+                    {admittedPatientsData ? (
+                      <AdmittedPatientsList admittedPatientsData={admittedPatientsData} refresh={handleRefresh} />
+                    ) : (
+                      <></>
+                    )}
+                  </TabPanel>
+                  <TabPanel>
+                    {sortedDischargeEncounters ? (
+                      <>
+                        <DischargedList dischargedEncounters={sortedDischargeEncounters} refresh={handleRefresh} />
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+export default AdmissionsDashboard;

package/src/admissions/admissions.resource.ts

@@ -0,0 +1,101 @@
+import { Encounter, fhirBaseUrl, FHIRResource, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { AdmitPatientDto, AssignBedToPatientDto, BedLayout, BedSwapDto, CancelAdmissionDto, DischargePatientDto, Disposition, DispositionResponse, FhirEncounterBundle, TransferPatientDto, UnAssignBedDto, type AdmissionLocationData } from './types';
+
+const customRep =
+  'custom:(ward,totalBeds,occupiedBeds,bedLayouts:(rowNumber,columnNumber,bedNumber,bedId,bedUuid,status,location,patients:(person:full,identifiers,uuid)))';
+
+export async function getAdmissionLoactionData(locationUuid: string): Promise<AdmissionLocationData> {
+  const admissionLocationUrl = `${restBaseUrl}/admissionLocation/${locationUuid}?v=${customRep}`;
+  const response = await openmrsFetch(admissionLocationUrl);
+  const result = await response.json();
+  return result ?? null;
+}
+
+export async function getAdmissionRequests(locationUuid: string): Promise<Disposition[]> {
+  const admissionRep = 'custom:(dispositionLocation,dispositionType,disposition,dispositionEncounter:full,patient:(uuid,identifiers,voided,person:(uuid,display,gender,age,birthdate,birthtime,preferredName,preferredAddress,dead,deathDate)),dispositionObsGroup,visit)';
+  const params = {
+    v: admissionRep,
+    dispositionLocation: locationUuid,
+    dispositionType: 'ADMIT,TRANSFER'
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const admissionRequestUrl = `${restBaseUrl}/emrapi/inpatient/request?${queryString}`;
+  const response = await openmrsFetch(admissionRequestUrl);
+  const result = await response.json();
+  return result.results ?? null;
+}
+
+export async function getAdmittedPatientsData(locationUuid: string): Promise<BedLayout[]> {
+  const admissionLocationData = await getAdmissionLoactionData(locationUuid);
+  if (admissionLocationData.bedLayouts && admissionLocationData.bedLayouts.length > 0) {
+    const bedLayouts = admissionLocationData.bedLayouts;
+    return bedLayouts;
+  } else {
+    return [];
+  }
+}
+
+export async function postRequest(url: string, dto: any) {
+  const resp = await openmrsFetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(dto),
+  });
+  const result = await resp.json();
+  return result;
+}
+
+export async function admitPatientToWard(admitPatientDto: AdmitPatientDto): Promise<Encounter> {
+  const admitPatientUrl = `${restBaseUrl}/encounter`;
+  return postRequest(admitPatientUrl, admitPatientDto);
+}
+
+export async function assignBedToPatient(bedId: number, assignBedToPatientDto: AssignBedToPatientDto) {
+  const assignBedUrl = `${restBaseUrl}/beds/${bedId}`;
+  return postRequest(assignBedUrl, assignBedToPatientDto);
+}
+
+export async function cancelAdmissionRequest(cancelAdmissionDto: CancelAdmissionDto) {
+  const cancelAdmissionUrl = `${restBaseUrl}/encounter`;
+  return postRequest(cancelAdmissionUrl, cancelAdmissionDto);
+}
+
+export async function bedSwapRequest(bedSwapDto: BedSwapDto) {
+  const cancelAdmissionUrl = `${restBaseUrl}/encounter`;
+  return postRequest(cancelAdmissionUrl, bedSwapDto);
+}
+
+export async function dischargePatientFromWard(dischargePatientDto: DischargePatientDto) {
+  const cancelAdmissionUrl = `${restBaseUrl}/encounter`;
+  return postRequest(cancelAdmissionUrl, dischargePatientDto);
+}
+
+export async function unassignBed(unAssignBedDto: UnAssignBedDto) {
+  const params = {
+    patientUuid: unAssignBedDto.patientUuid
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const unassignBedUrl = `${restBaseUrl}/beds/${unAssignBedDto.bedId}?${queryString}`;
+  await openmrsFetch(unassignBedUrl, {
+    method: 'DELETE'
+  });
+  return true;
+}
+export async function admitPatientElseWhere(transferPatientDto: TransferPatientDto) {
+  const transferUrl = `${restBaseUrl}/encounter`;
+  return postRequest(transferUrl, transferPatientDto);
+}
+export async function getDichargedEncounters(encounterTypeUuid: string,locationUuid: string): Promise<FhirEncounterBundle>{
+  const params = {
+    _summary: 'data',
+    type: encounterTypeUuid,
+    location: locationUuid,
+    _count: '100',
+    _getpagesoffset: '0'
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const encountersUrl = `${fhirBaseUrl}/Encounter?${queryString}`;
+  const resp = await openmrsFetch(encountersUrl);
+  const result = await resp.json();
+  return result;
+}