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

package/src/admissions/admissions.resource.ts

@@ -0,0 +1,233 @@
+import { type Encounter, fhirBaseUrl, FHIRResource, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { VisitTypeUuids } from '../shared/constants/visit-types';
+import {
+  type AdmitPatientDto,
+  type AdmittedListData,
+  type AssignBedToPatientDto,
+  type BedLayout,
+  type BedSwapDto,
+  type CancelAdmissionDto,
+  type DischargePatientDto,
+  type Disposition,
+  type FacilityBillsEncounterResponse,
+  type FacilityEncounterBill,
+  type FhirEncounterBundle,
+  type TransferPatientDto,
+  type UnAssignBedDto,
+  type AdmissionLocationData,
+  type AwaitingDischargePatientList,
+} from './types';
+import { getEtlBaseUrl } from '../shared/utils/get-base-url';
+
+const customRep =
+  'custom:(ward,totalBeds,occupiedBeds,bedLayouts:(rowNumber,columnNumber,bedNumber,bedId,bedUuid,status,location,patients:(person:full,identifiers,uuid)))';
+
+export async function getPatientByUuid(patientUuid: string) {
+  if (!patientUuid) {
+    throw new Error('PatientUuid is required');
+  }
+  const params = {
+    v: 'full',
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const patientUrl = `${restBaseUrl}/patient/${patientUuid}?${queryString}`;
+  const response = await openmrsFetch(patientUrl);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch patient with ${patientUuid}`);
+  }
+  const result = await response.json();
+  return result ?? null;
+}
+
+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 fetchFacilityAdmissionRequests(locationUuid: string): Promise<[]> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const admissionRequestsUrl = `${etlBaseUrl}/admissions/requests?locationUuid=${locationUuid}`;
+  const response = await openmrsFetch(admissionRequestsUrl);
+  const result = await response.json();
+  return result.results ?? [];
+}
+
+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;
+}
+
+export async function getActiveVisitEncountersUuids(locationUuid: string): Promise<string[]> {
+  const rep = 'custom:(uuid,visitType:(uuid,display),encounters:(uuid))';
+  const params = {
+    location: locationUuid,
+    includeInactive: 'false',
+    v: rep,
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const visitsUrl = `${restBaseUrl}/visit?${queryString}`;
+  const resp = await openmrsFetch(visitsUrl);
+  const data = await resp.json();
+
+  const encounterUuids: string[] = [];
+  if (data.results && Array.isArray(data.results)) {
+    data.results?.forEach((visit: any) => {
+      if (visit.visitType?.uuid !== VisitTypeUuids.INPATIENT_VISIT_TYPE_UUID) {
+        return;
+      }
+      if (visit.encounters && Array.isArray(visit.encounters)) {
+        visit.encounters?.forEach((encounter: any) => {
+          if (encounter.uuid) {
+            encounterUuids.push(encounter.uuid);
+          }
+        });
+      }
+    });
+  }
+
+  return encounterUuids;
+}
+
+export function useActiveVisitEncounterUuids(locationUuid: string) {
+  const { data, error, isLoading } = useSWR<string[]>(
+    locationUuid ? `active-visit-encounters-${locationUuid}` : null,
+    () => getActiveVisitEncountersUuids(locationUuid),
+  );
+
+  return useMemo(
+    () => ({
+      activeVisitEncounterUuids: data ?? [],
+      isLoading,
+      error,
+    }),
+    [data, isLoading, error],
+  );
+}
+
+export async function fetchFacilityEncounterBills(
+  locationUuid: string,
+  encounterTypeUuid: string,
+  billingFrom: string,
+): Promise<FacilityEncounterBill[]> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const facilityBillsUrl = `${etlBaseUrl}/facility/encounter-bills?locationUuid=${locationUuid}&billingFrom=${billingFrom}&encounterTypeUuid=${encounterTypeUuid}`;
+  const response = await openmrsFetch(facilityBillsUrl);
+  const data = (await response.json()) as FacilityBillsEncounterResponse;
+  return data.results ?? [];
+}
+
+export async function fetchLocationDetails(locationUuid: string) {
+  const v = 'custom:(uuid,display,attributes:(uuid,display,value,attributeType:(uuid,display)))';
+  const locationDetailsUrl = `${restBaseUrl}/location/${locationUuid}?v=${v}`;
+  const resp = await openmrsFetch(locationDetailsUrl);
+  const data = await resp.json();
+  return data ?? [];
+}
+
+export async function fetchAdmittedPatients(locationUuid: string): Promise<AdmittedListData[]> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const admittedListUrl = `${etlBaseUrl}/admissions/admitted?locationUuid=${locationUuid}`;
+  const resp = await openmrsFetch(admittedListUrl);
+  const data = await resp.json();
+  return data.results ?? [];
+}
+
+export async function fetchPatientsAwaitingDischarge(locationUuid: string): Promise<AwaitingDischargePatientList[]> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const awaitingDaischargeListUrl = `${etlBaseUrl}/admissions/awaiting-dicharge?locationUuid=${locationUuid}`;
+  const resp = await openmrsFetch(awaitingDaischargeListUrl);
+  const data = await resp.json();
+  return data.results ?? [];
+}

package/src/admissions/admitted-list/admitted-patients-list.tsx

@@ -0,0 +1,268 @@
+import React, { useState } from 'react';
+import {
+  Link,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { type BedLayout } from '../types';
+import BedSwapModal from '../modal/bed-swap/bed-swap.modal';
+import { launchWorkspace2, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
+import { getPatientByUuid } from '../admissions.resource';
+
+interface AdmittedPatientsListProps {
+  admittedPatientsData: BedLayout[];
+  refresh: () => void;
+}
+
+const AdmittedPatientsList: React.FC<AdmittedPatientsListProps> = ({ admittedPatientsData, refresh }) => {
+  const [showBedSwapModal, setShowBedSwapModal] = useState<boolean>(false);
+  const [selectedLayout, setSelectedLayout] = useState<any>();
+  const { maternityDischargeFormUuid, formUuids, observationValueCodableConcepts } = useConfig<ConfigObject>();
+  const generalDischargeFormUuid = 'b4218b80-22da-3299-af36-c865fdf07696';
+
+  const hasDeceasedOutcome = (encounter: any): boolean => {
+    const pending = [...(encounter?.obs ?? [])];
+
+    while (pending.length) {
+      const observation = pending.pop();
+      if (!observation || observation.voided) {
+        continue;
+      }
+
+      const value = observation.value;
+      const codedValue = observation.valueCoded ?? (typeof value === 'object' ? value : undefined);
+      const codedUuid = typeof codedValue === 'string' ? codedValue : codedValue?.uuid;
+      const codedDisplay =
+        typeof codedValue === 'object'
+          ? codedValue?.display ?? observation.valueCodedName?.name ?? observation.valueCodedName?.display
+          : undefined;
+
+      if (
+        codedUuid === observationValueCodableConcepts.deceasedUuid ||
+        (typeof codedDisplay === 'string' && codedDisplay.trim().toLowerCase() === 'deceased')
+      ) {
+        return true;
+      }
+
+      pending.push(...(observation.groupMembers ?? []), ...(observation.obs ?? []));
+    }
+
+    return false;
+  };
+
+  if (!admittedPatientsData) {
+    return <>No data to display</>;
+  }
+  const handleTransferRequest = (layout: BedLayout) => {
+    setSelectedLayout(layout);
+  };
+  const handleBedSwapRequest = (layout: BedLayout) => {
+    setSelectedLayout(layout);
+    setShowBedSwapModal(true);
+  };
+  const handleDischargeRequest = async (layout: any) => {
+    setSelectedLayout(layout);
+
+    if (!layout) {
+      console.error('Layout is null');
+      return;
+    }
+
+    const patientUuid = layout.patientUuid || layout.uuid;
+    if (!patientUuid) {
+      console.error('No patientUuid', layout);
+      return;
+    }
+
+    try {
+      const patientData = await getPatientByUuid(patientUuid);
+      await launchWorkspace2(
+        'admissions-form-entry',
+        {
+          workspaceTitle: 'Maternity Discharge Form',
+          formUuid: maternityDischargeFormUuid,
+          patientUuid,
+        },
+        {
+          patient: patientData,
+          patientUuid,
+        },
+      );
+    } catch (error) {
+      console.error('Failed to fetch patient data:', error);
+    }
+  };
+  const handleGeneralDischargeRequest = async (layout: any) => {
+    setSelectedLayout(layout);
+
+    if (!layout) {
+      console.error('Layout is null');
+      return;
+    }
+
+    const patientUuid = layout.patientUuid || layout.uuid;
+    if (!patientUuid) {
+      console.error('No patientUuid', layout);
+      return;
+    }
+
+    try {
+      const patientData = await getPatientByUuid(patientUuid);
+
+      const handleGeneralDischargePostResponse = async (response: any) => {
+        const savedEncounter = response?.data ?? response;
+        const encounterUuid = savedEncounter?.uuid;
+        let encounterWithObs = savedEncounter;
+
+        if (encounterUuid) {
+          try {
+            const result = await openmrsFetch(`${restBaseUrl}/encounter/${encounterUuid}?v=full`);
+            encounterWithObs = result?.data ?? savedEncounter;
+          } catch (error) {
+            console.error('Failed to load saved discharge encounter:', error);
+          }
+        }
+
+        if (!hasDeceasedOutcome(encounterWithObs)) {
+          return;
+        }
+
+        await launchWorkspace2(
+          'admissions-form-entry',
+          {
+            workspaceTitle: 'Death Reporting Form',
+            formUuid: formUuids.deathReportingFormUuid,
+            patientUuid,
+          },
+          {
+            patient: patientData,
+            patientUuid,
+          },
+        );
+      };
+
+      await launchWorkspace2(
+        'admissions-form-entry',
+        {
+          workspaceTitle: 'POC Inpatient Discharge Form v1.0',
+          formUuid: generalDischargeFormUuid,
+          patientUuid,
+          handlePostResponse: handleGeneralDischargePostResponse,
+        },
+        {
+          patient: patientData,
+          patientUuid,
+        },
+      );
+    } catch (error) {
+      console.error('Failed to fetch patient data:', error);
+    }
+  };
+  const handleBedSwapModalClose = () => {
+    setShowBedSwapModal(false);
+    refresh();
+  };
+
+  const rows =
+    admittedPatientsData?.flatMap((layout) =>
+      (layout.patients ?? []).map((patient) => ({
+        key: `${layout.bedUuid}-${patient.uuid}`,
+        bedNumber: layout.bedNumber,
+        bedId: layout.bedId,
+        status: layout.status,
+        location: layout.location,
+        name: patient.person.display,
+        gender: patient.person.gender,
+        age: patient.person.age,
+        identifier: patient.identifiers?.[0]?.identifier ?? 'N/A',
+        person: patient.person,
+        patientUuid: patient.uuid,
+        patient: patient,
+      })),
+    ) ?? [];
+
+  if (!rows.length) {
+    return <>No Data</>;
+  }
+
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>Bed No</TableHeader>
+            <TableHeader>Patient Name</TableHeader>
+            <TableHeader>Gender</TableHeader>
+            <TableHeader>Age</TableHeader>
+            <TableHeader>Identifier</TableHeader>
+            <TableHeader>Status</TableHeader>
+            <TableHeader>Location</TableHeader>
+            <TableHeader>Action</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <TableRow key={row.key}>
+              <TableCell>{index + 1}</TableCell>
+              <TableCell>{row.bedNumber}</TableCell>
+              <TableCell>
+                {row.patientUuid ? (
+                  <Link href={`${window.spaBase}/patient/${row.patientUuid}/chart/`}>{row.name}</Link>
+                ) : (
+                  row.name
+                )}
+              </TableCell>
+              <TableCell>{row.gender}</TableCell>
+              <TableCell>{row.age}</TableCell>
+              <TableCell>{row.identifier}</TableCell>
+              <TableCell>{row.status}</TableCell>
+              <TableCell>{row.location}</TableCell>
+              <TableCell>
+                <>
+                  <OverflowMenu aria-label="overflow-menu">
+                    <OverflowMenuItem itemText="Transfer" onClick={() => handleTransferRequest(row as any)} />
+                    <OverflowMenuItem itemText="Bed Swap" onClick={() => handleBedSwapRequest(row as any)} />
+                    <OverflowMenuItem
+                      itemText="Fill General Discharge Form"
+                      onClick={() => handleGeneralDischargeRequest(row as any)}
+                    />
+                  </OverflowMenu>
+                </>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+/*
+
+ {showBedSwapModal && selectedLayout ? (
+        <>
+          <BedSwapModal
+            open={showBedSwapModal}
+            onModalClose={handleBedSwapModalClose}
+            onSuccessfullBedSwap={handleBedSwapModalClose}
+            disposition={null}
+            person={selectedLayout.person}
+            bedLayouts={admittedPatientsData}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+
+
+*/
+
+export default AdmittedPatientsList;

package/src/admissions/awaiting-discharge-list/awaiting-discharge-list.tsx

@@ -0,0 +1,197 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Link,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+} from '@carbon/react';
+import {
+  type BillStatus,
+  type FacilityEncounterBill,
+  type BedLayout,
+  type AwaitingDischargePatientList,
+} from '../types';
+import DischargeModal from '../modal/discharge/discharge-patient.modal';
+import { fetchPatientsAwaitingDischarge } from '../admissions.resource';
+import { type FacilityBill } from '../../billing/dashboard/v3/types';
+import AddBillItemsModal from '../modal/add-bill-items/add-bill-items.modal';
+
+interface AwaitingDischargeListProps {
+  locationUuid: string;
+  facilityBills: FacilityEncounterBill[];
+  refresh: () => void;
+}
+
+const AwaitingDischargeList: React.FC<AwaitingDischargeListProps> = ({ locationUuid, facilityBills, refresh }) => {
+  const [showDischargeModal, setShowDischargeModal] = useState<boolean>(false);
+  const [selectedDischargePatient, setSelectedDischargePatient] = useState<AwaitingDischargePatientList & {}>();
+  const [awaitingDischargePatientList, setAwaitingDischargePatientList] = useState<AwaitingDischargePatientList[]>([]);
+  const [showAddBillItemsModal, setShowBillItemsModal] = useState<boolean>(false);
+  useEffect(() => {
+    getPatientsAwaitingDischarge();
+  }, []);
+  const rows = useMemo(() => {
+    return awaitingDischargePatientList?.map((p) => {
+      return {
+        ...p,
+        billStatus:
+          getBillStatus(facilityBills.find((fB) => fB.patient_uuid === p?.person_uuid)?.bill_status) ?? 'PENDING',
+      };
+    });
+  }, [awaitingDischargePatientList, facilityBills]);
+  if (!locationUuid) {
+    return <>No data to display</>;
+  }
+  const handleDischargeRequest = (dischargePatient: AwaitingDischargePatientList) => {
+    setSelectedDischargePatient(dischargePatient);
+    setShowDischargeModal(true);
+  };
+  const handleDischargeModalClose = () => {
+    setShowDischargeModal(false);
+  };
+  const handleSuccessfullDischarge = () => {
+    refresh();
+  };
+  function getBillStatus(billStatus: string): BillStatus {
+    if (!billStatus) {
+      return 'NOT_BILLED';
+    }
+    if (billStatus.toUpperCase().trim() === 'PAID') {
+      return 'PAID';
+    }
+    if (billStatus.toUpperCase().trim() === 'PENDING') {
+      return 'PENDING';
+    }
+  }
+
+  if (!rows.length) {
+    return <>No Data</>;
+  }
+
+  async function getPatientsAwaitingDischarge() {
+    const resp = await fetchPatientsAwaitingDischarge(locationUuid);
+    if (resp) {
+      setAwaitingDischargePatientList(resp);
+    }
+  }
+
+  function handleAddBillItems(data: any) {
+    setSelectedDischargePatient(data);
+    setShowBillItemsModal(true);
+  }
+  function handleSuccessFullAddBillItems() {
+    setShowBillItemsModal(false);
+  }
+  function handleAddBillItemsClose() {
+    setShowBillItemsModal(false);
+  }
+
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>Bed No</TableHeader>
+            <TableHeader>Patient Name</TableHeader>
+            <TableHeader>Gender</TableHeader>
+            <TableHeader>Age</TableHeader>
+            <TableHeader>Identifier</TableHeader>
+            <TableHeader>Bill Status</TableHeader>
+            <TableHeader>Location</TableHeader>
+            <TableHeader>Action</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <TableRow key={row.bed_id}>
+              <TableCell>{index + 1}</TableCell>
+              <TableCell></TableCell>
+              <TableCell>
+                {row.person_uuid ? (
+                  <Link href={`${window.spaBase}/patient/${row.person_uuid}/chart/`}>{row.patient_name}</Link>
+                ) : (
+                  row.patient_name
+                )}
+              </TableCell>
+              <TableCell></TableCell>
+              <TableCell></TableCell>
+              <TableCell>
+                {row.cr_id} {row.national_id}
+              </TableCell>
+              <TableCell>
+                <BillStatusTag status={row.billStatus} />
+              </TableCell>
+              <TableCell>{row.location}</TableCell>
+              <TableCell>
+                <>
+                  {row.billStatus === 'PAID' ? (
+                    <OverflowMenu aria-label="overflow-menu">
+                      <OverflowMenuItem itemText="Discharge" onClick={() => handleDischargeRequest(row as any)} />
+                    </OverflowMenu>
+                  ) : (
+                    <>
+                      <OverflowMenu aria-label="overflow-menu">
+                        <OverflowMenuItem itemText="Discharge" onClick={() => handleDischargeRequest(row as any)} />
+                        <OverflowMenuItem itemText="Add Bill Items" onClick={() => handleAddBillItems(row as any)} />
+                      </OverflowMenu>
+                    </>
+                  )}
+                </>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      {showAddBillItemsModal && selectedDischargePatient ? (
+        <>
+          <AddBillItemsModal
+            crId={selectedDischargePatient.cr_id ?? ''}
+            patientUuid={selectedDischargePatient.person_uuid}
+            onModalClose={handleAddBillItemsClose}
+            onAddBillItems={handleSuccessFullAddBillItems}
+            open={showAddBillItemsModal}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+      {showDischargeModal && selectedDischargePatient ? (
+        <>
+          <DischargeModal
+            open={showDischargeModal}
+            onModalClose={handleDischargeModalClose}
+            onDischarge={handleSuccessfullDischarge}
+            patientUuid={selectedDischargePatient.person_uuid}
+            locationUuid={selectedDischargePatient.location_uuid}
+            bedId={selectedDischargePatient.bed_id}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+type CarbonTagColor = 'red' | 'green' | 'gray' | 'blue' | 'cyan' | 'purple' | 'magenta' | 'teal';
+
+const BILL_STATUS_CONFIG: Record<BillStatus, { color: CarbonTagColor; label: string }> = {
+  PAID: { color: 'green', label: 'Paid' },
+  PENDING: { color: 'red', label: 'Pending' },
+  NOT_BILLED: { color: 'blue', label: 'Not billed' },
+};
+
+function BillStatusTag({ status }: { status: BillStatus }) {
+  const config = BILL_STATUS_CONFIG[status] ?? BILL_STATUS_CONFIG.NOT_BILLED;
+  return <Tag type={config.color}>{config.label}</Tag>;
+}
+
+export default AwaitingDischargeList;