@ampath/esm-dha-workflow-app 4.0.0-next.44 → 4.0.0-next.445

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampath/esm-dha-workflow-app",
-  "version": "4.0.0-next.44",
+  "version": "4.0.0-next.445",
   "license": "MPL-2.0",
   "description": "An OpenMRS seed application for building microfrontends",
   "browser": "dist/esm-dha-workflow-app.js",
@@ -8,18 +8,21 @@
   "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",
+    "dev": "openmrs develop --backend=https://kibana.ampath.or.ke --api-url=/openmrs --config-url=https://ngx.ampath.or.ke/o3-config.json --port=9000",
+    "dev:local-config": "openmrs develop --backend=https://kibana.ampath.or.ke --api-url=/openmrs --config-url=https://ngx.ampath.or.ke/o3-config.json --config-file=./local-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",
+    "typescript": "node ./tools/strip-openmrs-declaration-maps.mjs && tsc",
     "test": "jest --config jest.config.js --passWithNoTests",
     "verify": "turbo lint typescript coverage",
     "coverage": "yarn test --coverage",
     "prepare": "husky install",
+    "postinstall": "node ./tools/strip-openmrs-declaration-maps.mjs",
     "extract-translations": "i18next 'src/**/*.component.tsx' --config ./tools/i18next-parser.config.js",
+    "update-shr-code-systems": "node ./tools/fetch-shr-code-systems.mjs",
     "test-e2e": "playwright test"
   },
   "browserslist": [
@@ -42,16 +45,26 @@
   },
   "dependencies": {
     "@carbon/react": "^1.83.0",
-    "lodash-es": "^4.17.21"
+    "@hookform/resolvers": "^3.1.1",
+    "@superset-ui/embedded-sdk": "^0.3.0",
+    "html2canvas": "^1.4.1",
+    "html2pdf.js": "^0.14.0",
+    "jspdf": "^4.2.1",
+    "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": "*",
+    "@openmrs/esm-framework": "10.x",
+    "@openmrs/esm-patient-common-lib": "12.x",
     "dayjs": "1.x",
+    "i18next": "25.x",
     "react": "18.x",
     "react-i18next": "16.x",
     "react-router-dom": "6.x",
-    "rxjs": "6.x"
+    "rxjs": "6.x",
+    "swr": "2.x"
   },
   "devDependencies": {
     "@openmrs/esm-framework": "next",
@@ -97,15 +110,20 @@
     "react-router-dom": "^6.14.1",
     "rxjs": "^6.6.7",
     "swc-loader": "^0.2.3",
+    "swr": "^2.2.5",
     "turbo": "^2.5.2",
     "typescript": "^5.0.0",
-    "webpack": "^5.99.9",
+    "webpack": "5.105.3",
     "webpack-cli": "^6.0.1"
   },
+  "resolutions": {
+    "@internationalized/date": "3.12.3",
+    "dompurify": "^3.4.11",
+    "webpack": "5.105.3"
+  },
   "lint-staged": {
-    "packages/**/src/**/*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
+    "*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
     "*.{css,scss,ts,tsx}": "prettier --write --list-different"
   },
-  "packageManager": "yarn@4.10.3",
-  "stableVersion": "4.0.0"
+  "packageManager": "yarn@4.10.3"
 }

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

@@ -0,0 +1,263 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import {
+  type FacilityAdmissionRequest,
+  type BedLayout,
+  CLAIM_VISIT_START_SERVICE_POINTS_UUID,
+  SERVICE_POINT_NAME,
+  type LocationAttribute,
+} from '../types';
+import AdmitPatientModal from '../modal/admit-patient/admit-patient.modal';
+import { formatDate, launchWorkspace2, showSnackbar, useSession, type Visit } from '@openmrs/esm-framework';
+import CancelAdmissionRequestModal from '../modal/cancel-admission-request/cancel-admission-request';
+import { fetchLocationDetails } from '../admissions.resource';
+import { createVisit } from '../../resources/visit.resource';
+import { type VisitAttribute, type CreateVisitDto } from '../../registry/types';
+import { VisitTypeUuids } from '../../shared/constants/visit-types';
+import { SEND_TO_QUEUE_WORKSPACE } from '../../registry/modal/send-to-triage/send-to-queue.modal';
+import { type PaymentMode } from '../../shared/types';
+import { fetchPaymentModes } from '../../shared/services/billing.resource';
+
+interface AdmissionListProps {
+  admissionRequests: FacilityAdmissionRequest[];
+  bedLayouts: BedLayout[];
+  refresh: () => void;
+}
+
+const AdmissionsRequestList: React.FC<AdmissionListProps> = ({ admissionRequests, bedLayouts, refresh }) => {
+  const [selectedAdmissionRequest, setSelectedAdmissionRequest] = useState<FacilityAdmissionRequest>();
+  const [showAdmitModal, setShowAdmitModal] = useState<boolean>(false);
+  const [showCancelAdmissionModal, setShowCancelAdmissionModal] = useState<boolean>(false);
+  const [startClaimVisit, setStartClaimVisit] = useState<boolean>(false);
+  const [admissionInpatientVisit, setAdmissionInpatientVisit] = useState<Visit>();
+  // const [selectedPaymentMode, setSelectedPaymentMode] = useState<PaymentMode>();
+  const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation?.uuid ?? '';
+  const selectedPaymentMode = useMemo(() => {
+    return paymentModes.find((p) => {
+      return p.name === 'SHA';
+    });
+  }, [paymentModes]);
+  useEffect(() => {
+    if (locationUuid) {
+      getLocationDetails();
+    }
+    getPaymentMethods();
+  }, [locationUuid]);
+  if (!admissionRequests || admissionRequests.length === 0) {
+    return <>No Data</>;
+  }
+  async function getPaymentMethods() {
+    const methods = await fetchPaymentModes();
+    setPaymentModes(methods);
+  }
+  const handleCancelRequest = (admissionRequest: FacilityAdmissionRequest) => {
+    setSelectedAdmissionRequest(admissionRequest);
+    setShowCancelAdmissionModal(true);
+  };
+  const handleAdmitPatient = (admissionRequest: FacilityAdmissionRequest) => {
+    setShowAdmitModal(true);
+    setSelectedAdmissionRequest(admissionRequest);
+  };
+  const handleAdmitModalClose = () => {
+    setShowAdmitModal(false);
+  };
+  const handeSuccessfullAdmission = () => {
+    handleAdmitModalClose();
+    refresh();
+  };
+  const handleCancelAdmissionClose = () => {
+    setShowCancelAdmissionModal(false);
+    refresh();
+  };
+  const handleCancelAdmissionSuccess = () => {
+    handleCancelAdmissionClose();
+  };
+  const handleStartClaimAndAdmit = (admissionRequest: FacilityAdmissionRequest) => {
+    setSelectedAdmissionRequest(admissionRequest);
+    createInpatientVisit(admissionRequest);
+  };
+  async function createInpatientVisit(admissionRequest: FacilityAdmissionRequest) {
+    const resp = await createPatientVisit(admissionRequest);
+    if (resp) {
+      setAdmissionInpatientVisit(resp);
+      // The claim panel is an OpenMRS workspace now, so it is launched rather than
+      // rendered — the visit it is for has only just been created, hence opening it here
+      // rather than from the row that asked for it.
+      await launchWorkspace2(SEND_TO_QUEUE_WORKSPACE, {
+        workspaceTitle: 'Initiate SHA claim',
+        patientUuid: admissionRequest?.patient_uuid,
+        visitUuid: resp?.uuid,
+        visitTypeUuid: VisitTypeUuids.INPATIENT_VISIT_TYPE_UUID,
+      });
+    }
+  }
+  async function getLocationDetails() {
+    const resp = await fetchLocationDetails(locationUuid);
+    if (resp) {
+      const locationAttributes: LocationAttribute[] = resp?.attributes ?? [];
+      const startClaimVisitAttr = getLocationAttribute(locationAttributes, CLAIM_VISIT_START_SERVICE_POINTS_UUID);
+      if (startClaimVisitAttr) {
+        const val = canStartClaimVisit(startClaimVisitAttr);
+        setStartClaimVisit(val);
+      } else {
+        setStartClaimVisit(false);
+      }
+    }
+  }
+  function getLocationAttribute(attributes: LocationAttribute[], attributeTypeUuid: string) {
+    return attributes.find((a) => {
+      return a.attributeType.uuid === attributeTypeUuid;
+    });
+  }
+  function canStartClaimVisit(startClaimVisitAttr: LocationAttribute): boolean {
+    if (!startClaimVisitAttr) {
+      return false;
+    }
+    const attrValue: string = startClaimVisitAttr?.value ?? '';
+    return attrValue.toLowerCase().trim().includes(SERVICE_POINT_NAME.toLowerCase());
+  }
+  const createPatientVisit = async (admissionRequest: FacilityAdmissionRequest) => {
+    const visitDto = getCreateVisitDto(admissionRequest);
+    if (!isValidCreateVisitDto(visitDto)) {
+      return false;
+    }
+    const result = await createVisit(visitDto);
+    if (result) {
+      showAlert('success', 'Inpatient Visit has been created succesfully', '');
+      return result;
+    } else {
+      showAlert('error', 'Error creating patient visit', '');
+      throw new Error('Error creating patient visit');
+    }
+  };
+  const isValidCreateVisitDto = (createVisitDto: CreateVisitDto): boolean => {
+    if (!createVisitDto.location) {
+      showAlert('error', 'Missing location in create visits', '');
+      return false;
+    }
+    if (!createVisitDto.patient) {
+      showAlert('error', 'Please select a patient', '');
+      return false;
+    }
+
+    if (!createVisitDto.visitType) {
+      showAlert('error', 'Please select a visit', '');
+      return false;
+    }
+    return true;
+  };
+  const getCreateVisitDto = (admissionRequest: FacilityAdmissionRequest): CreateVisitDto => {
+    const visitAttributes = getVisitAttributes();
+    const visitDto: CreateVisitDto = {
+      visitType: VisitTypeUuids.INPATIENT_VISIT_TYPE_UUID,
+      location: locationUuid,
+      startDatetime: null,
+      stopDatetime: null,
+      patient: admissionRequest?.patient_uuid ?? '',
+    };
+    if (visitAttributes.length > 0) {
+      visitDto['attributes'] = visitAttributes;
+    }
+    return visitDto;
+  };
+  function getVisitAttributes(): VisitAttribute[] {
+    const attributes: VisitAttribute[] = [];
+    if (selectedPaymentMode) {
+      attributes.push({
+        attributeType: '8553afa0-bdb9-4d3c-8a98-05fa9350aa85',
+        value: selectedPaymentMode.uuid,
+      });
+    }
+    return attributes;
+  }
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>Date</TableHeader>
+            <TableHeader>Name</TableHeader>
+            <TableHeader>Visit Type</TableHeader>
+            <TableHeader>Identifiers</TableHeader>
+            <TableHeader>Gender</TableHeader>
+            <TableHeader>Age</TableHeader>
+            <TableHeader>Action</TableHeader>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {admissionRequests &&
+            admissionRequests.map((val, index) => (
+              <TableRow key={val.patient_uuid ?? index}>
+                <TableCell>{index + 1}</TableCell>
+                <TableCell>{formatDate(new Date(val.admission_request_date))}</TableCell>
+                <TableCell>{val.patient_name}</TableCell>
+                <TableCell>{val.visit_type}</TableCell>
+                <TableCell>{val.identifiers}</TableCell>
+                <TableCell>{val.gender}</TableCell>
+                <TableCell>{val.age}</TableCell>
+                <TableCell>
+                  <>
+                    <OverflowMenu aria-label="overflow-menu">
+                      <OverflowMenuItem itemText="Cancel" onClick={() => handleCancelRequest(val)} />
+                        {
+                           startClaimVisit &&  <OverflowMenuItem itemText="Start Claim and Admit" onClick={() => handleStartClaimAndAdmit(val)} />
+                        }
+                      <OverflowMenuItem itemText="Admit" onClick={() => handleAdmitPatient(val)} />
+                    </OverflowMenu>
+                  </>
+                </TableCell>
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+      {showAdmitModal && selectedAdmissionRequest ? (
+        <>
+          <AdmitPatientModal
+            onModalClose={handleAdmitModalClose}
+            open={showAdmitModal}
+            onSuccessfullAdmission={handeSuccessfullAdmission}
+            facilityAdmissionRequest={selectedAdmissionRequest}
+            bedLayouts={bedLayouts}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+      {showCancelAdmissionModal && selectedAdmissionRequest ? (
+        <>
+          <CancelAdmissionRequestModal
+            open={showCancelAdmissionModal}
+            onModalClose={handleCancelAdmissionClose}
+            onCancelAdmission={handleCancelAdmissionSuccess}
+            facilityAdmissionRequest={selectedAdmissionRequest}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+
+    </>
+  );
+};
+
+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,277 @@
+import React, { useEffect, useMemo, useState, useCallback } 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 { type Patient, useConfig, useSession } from '@openmrs/esm-framework';
+import {
+  fetchFacilityEncounterBills,
+  getAdmissionLoactionData,
+  getAdmissionRequests,
+  getAdmittedPatientsData,
+  getDichargedEncounters,
+  fetchFacilityAdmissionRequests,
+  useActiveVisitEncounterUuids,
+} from './admissions.resource';
+import {
+  type Disposition,
+  type AdmissionLocationData,
+  type BedLayout,
+  type FhirEncounter,
+  type FhirEncounterBundle,
+  type FacilityEncounterBill,
+  type FacilityAdmissionRequest,
+} 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';
+import AwaitingDischargeList from './awaiting-discharge-list/awaiting-discharge-list';
+import { type ConfigObject } from '../config-schema';
+import dayjs from 'dayjs';
+import FacilityAndWorkerSlot from '../shared/ui/facility-worker-slot/facility-worker.component-slot.component';
+import AdmittedList from './bed-assigment-request/bed-assignment-request-list';
+import BedAssignmentRequestList from './bed-assigment-request/bed-assignment-request-list';
+
+const AdmissionsDashboard: React.FC = () => {
+  const [dashboardData, setDashboardData] = useState<AdmissionLocationData>(null);
+  const [admissionRequests, setAdmissionRequests] = useState<FacilityAdmissionRequest[]>([]);
+  const [admissionListData, setAdmissionListData] = useState<Disposition[]>([]);
+  const [admittedPatientsData, setAdmittedPatientsData] = useState<BedLayout[]>([]);
+  const [facilityBills, setFacilityBills] = useState<FacilityEncounterBill[]>([]);
+  const [dischargeEncounterBundle, setDischargeEncounterBundle] = useState<FhirEncounterBundle>();
+  const [awaitingDischargeEncounterBundle, setAwaitingDischargeEncounterBundle] = useState<FhirEncounterBundle>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const { maternityDischargeEncounterTypeUuid } = useConfig<ConfigObject>();
+  const { activeVisitEncounterUuids } = useActiveVisitEncounterUuids(locationUuid);
+  const sortedDischargeEncounters = useMemo(() => generateDischargeEncounters(), [dischargeEncounterBundle]);
+
+  const getPatient = (patients: Patient[]) => {
+    if (patients) {
+      return patients[0];
+    }
+  };
+
+  const { awaiting, admitted } = useMemo(() => {
+    if (admittedPatientsData && awaitingDischargeEncounterBundle) {
+      const fhirEntries = awaitingDischargeEncounterBundle.entry;
+      let patientUuids = [];
+      if (fhirEntries) {
+        fhirEntries.forEach((fe) => {
+          const resource = fe.resource;
+          if (resource && resource.resourceType === 'Encounter') {
+            const subject = resource.subject.reference.split('/');
+            const patientUuid = subject[1];
+            patientUuids.push(patientUuid);
+          }
+        });
+      }
+
+      const awaiting = admittedPatientsData.filter((p) => patientUuids.includes(getPatient(p.patients)?.uuid));
+      const admitted = admittedPatientsData.filter((p) => !patientUuids.includes(getPatient(p.patients)?.uuid));
+
+      return {
+        awaiting,
+        admitted,
+      };
+    }
+    return {
+      awaiting: [],
+      admitted: [],
+    };
+  }, [admittedPatientsData, awaitingDischargeEncounterBundle]);
+
+  useEffect(() => {
+    fetchData();
+  }, [locationUuid]);
+
+  useEffect(() => {
+    if (activeVisitEncounterUuids.length > 0) {
+      getAwaitingDischargeEncounters();
+      getDisachargedEncounters();
+    }
+  }, [activeVisitEncounterUuids]);
+
+  const fetchData = () => {
+    setLoading(true);
+    getDashboardData();
+    getAdmissionRequests(), getFacilityEncounterBills();
+    // getAdmissionListData();
+    getAwaitingDischargeEncounters();
+    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 getAdmittedPatients = async () => {
+    const res = await getAdmittedPatientsData(locationUuid);
+    console.log('admitted Patients', res);
+    setAdmittedPatientsData(res);
+    setLoading(false);
+  };
+  const getAwaitingDischargeEncounters = useCallback(async () => {
+    const res = await getDichargedEncounters(maternityDischargeEncounterTypeUuid, locationUuid);
+
+    if (res && res.entry) {
+      const filteredEntries = res.entry.filter((entry) => {
+        const resource = entry.resource;
+        return resource && resource.resourceType === 'Encounter' && activeVisitEncounterUuids.includes(resource.id);
+      });
+      setAwaitingDischargeEncounterBundle({
+        ...res,
+        entry: filteredEntries,
+        total: filteredEntries.length,
+      });
+    } else {
+      setAwaitingDischargeEncounterBundle(res);
+    }
+  }, [maternityDischargeEncounterTypeUuid, locationUuid, activeVisitEncounterUuids]);
+
+  const getDisachargedEncounters = useCallback(async () => {
+    const res = await getDichargedEncounters(AdmissionEncounterTypeUuids.DISCHARGE_ENCOUNTER_TYPE_UUID, locationUuid);
+    setDischargeEncounterBundle(res);
+  }, [locationUuid, activeVisitEncounterUuids]);
+  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 getFacilityEncounterBills = async () => {
+    const billingFrom = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
+    const res = await fetchFacilityEncounterBills(locationUuid, maternityDischargeEncounterTypeUuid, billingFrom);
+    setFacilityBills(res);
+    setLoading(false);
+  };
+  const getAdmissionRequests = async () => {
+    const admissionRequests = await fetchFacilityAdmissionRequests(locationUuid);
+    if (admissionRequests) {
+      setAdmissionRequests(admissionRequests);
+    } else {
+      setAdmissionRequests([]);
+    }
+  };
+  const handleRefresh = () => {
+    fetchData();
+  };
+  return (
+    <>
+      <div className={styles.admissionsLayout}>
+        <div className={styles.hwrSection}>
+          <FacilityAndWorkerSlot />
+        </div>
+        <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>Bed Assignment Requests</Tab>
+                    */}
+
+                  <Tab>Admitted</Tab>
+                  <Tab>Awaiting Discharge</Tab>
+                  <Tab>Discharged</Tab>
+                </TabList>
+                <TabPanels>
+                  <TabPanel>
+                    {admissionRequests ? (
+                      <AdmissionsRequestList
+                        admissionRequests={admissionRequests}
+                        bedLayouts={admittedPatientsData}
+                        refresh={handleRefresh}
+                      />
+                    ) : (
+                      <></>
+                    )}
+                  </TabPanel>
+                  {/* 
+                      <TabPanel>
+                   <BedAssignmentRequestList locationUuid={locationUuid} refresh={handleRefresh}/>
+                  </TabPanel>
+
+                    */}
+
+                  <TabPanel>
+                    {admittedPatientsData ? (
+                      <AdmittedPatientsList admittedPatientsData={admitted} refresh={handleRefresh} />
+                    ) : (
+                      <></>
+                    )}
+                  </TabPanel>
+                  <TabPanel>
+                    {admittedPatientsData ? (
+                      <AwaitingDischargeList
+                        locationUuid={locationUuid}
+                        refresh={handleRefresh}
+                        facilityBills={facilityBills}
+                      />
+                    ) : (
+                      <></>
+                    )}
+                  </TabPanel>
+                  <TabPanel>
+                    {sortedDischargeEncounters ? (
+                      <>
+                        <DischargedList dischargedEncounters={sortedDischargeEncounters} refresh={handleRefresh} />
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+export default AdmissionsDashboard;