@ampath/esm-dha-workflow-app 4.0.0-next.68 → 4.0.0-next.69

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,147 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import styles from './admissions-dashboard.component.scss';
+import StatCard from '../service-queues/service-queue/stats/stat-card/stat-card.component';
+import { InlineLoading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { FHIRResource, useSession } from '@openmrs/esm-framework';
+import { getAdmissionLoactionData, getAdmissionRequests, getAdmittedPatientsData, getDichargedEncounters } from './admissions.resource';
+import { type Disposition, type AdmissionLocationData, BedLayout, FhirEncounter, FhirBundleEntry, 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;
+}

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

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { OverflowMenu, OverflowMenuItem, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { BedLayout } from '../types';
+import BedSwapModal from '../modal/bed-swap/bed-swap.modal';
+import DischargeModal from '../modal/discharge/discharge-patient.modal';
+
+interface AdmittedPatientsListProps {
+  admittedPatientsData: BedLayout[];
+  refresh: ()=> void;
+}
+
+const AdmittedPatientsList: React.FC<AdmittedPatientsListProps> = ({ admittedPatientsData, refresh }) => {
+  const [showBedSwapModal,setShowBedSwapModal]= useState<boolean>(false);
+  const [showDischargeModal,setShowDischargeModal]= useState<boolean>(false);
+  const [selectedLayout,setSelectedLayout] = useState<any>();
+  if(!admittedPatientsData){
+   return <>No data to display</>
+  }
+  const handleTransferRequest = (layout: BedLayout)=>{
+    setSelectedLayout(layout);
+  };
+  const handleBedSwapRequest = (layout: BedLayout)=>{
+    setSelectedLayout(layout);
+    setShowBedSwapModal(true);
+  };
+  const handleDischargeRequest = (layout: BedLayout)=>{
+    setSelectedLayout(layout);
+    setShowDischargeModal(true);
+  };
+  const handleBedSwapModalClose = ()=>{
+    setShowBedSwapModal(false);
+    refresh()
+  }
+  const handleDischargeModalClose = ()=>{
+    setShowDischargeModal(false);
+  }
+  const handleSuccessfullDischarge = ()=>{
+    handleBedSwapModalClose();
+    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
+      })),
+    ) ?? [];
+
+  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.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="Discharge" onClick={() => handleDischargeRequest(row as any)} />
+                    </OverflowMenu>
+                </>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+    {
+      showBedSwapModal && selectedLayout ? (<>
+       <BedSwapModal 
+       open={showBedSwapModal} 
+       onModalClose={handleBedSwapModalClose} 
+       onSuccessfullBedSwap={handleBedSwapModalClose} 
+       disposition={null}
+       person={selectedLayout.person}
+       bedLayouts={admittedPatientsData}/>
+      </>): (<></>)
+    }
+
+    {
+      showDischargeModal &&  selectedLayout ? (<>
+      <DischargeModal 
+      open={showDischargeModal} 
+      onModalClose={handleDischargeModalClose}
+      onDischarge={handleSuccessfullDischarge}
+      admissionRequest={selectedLayout}
+      />
+      </>) : (<></>)
+      
+    }
+    
+    </>
+  );
+};
+
+export default AdmittedPatientsList;
+

package/src/admissions/constants/index.ts

@@ -0,0 +1,33 @@
+const ADMIT_ENCOUNTER_TYPE_UUID = 'e22e39fd-7db2-45e7-80f1-60fa0d5a4378';
+const CANCEL_ADT_ENCOUNTER_TYPE_UUID = "550e8400-e29b-41d4-a716-446655440000";
+const BED_ASSIGNMENT_ENCOUNTER_TYPE_UUID = 'f47ac10b-58cc-4372-a567-0e02b2c3d479';
+const DISCHARGE_ENCOUNTER_TYPE_UUID = '181820aa-88c9-479b-9077-af92f5364329';
+const TRANSFER_REQUEST_ENCOUNTER_TYPE_UUID = 'b2c4d5e6-7f8a-4e9b-8c1d-2e3f8e4a3b8f';
+
+const ADMISSION_TO_HOSPITAL_DECISION_UUID = 'ac4d3e94-03f3-458a-9cb1-9c2ab3c3a3f7';
+const ADMISSION_DENIED_UUID = 'cc6a6126-b8a1-4d2d-9a35-31f9be7c5e68';
+const CLINICAL_IMPRESSION_UUID = '159395AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+const CLINICAL_NOTES_UUID = '5e4dc798-2cce-4a1a-97e9-bcf22d64b07c';
+const INPATIENT_DISPOSITION_CONSTRUCT_UUID = '9ceedfb7-60e4-42ce-a11e-f2dbabc82112';
+const INTERNAL_TRANSFER_LOCATION_UUID = '731318a6-9fa9-4f68-97a9-5bd4cbc707f7';
+const INPATIENT_PATIENT_DISPOSITION_UUID = 'ce085d74-323c-4c9a-9fdf-051de81dd020';
+const TRANSFER_OUT_UUID = '5520f234-258e-49f0-97ab-701b98fab608';
+
+export const AdmissionEncounterTypeUuids = {
+    ADMIT_ENCOUNTER_TYPE_UUID,
+    CANCEL_ADT_ENCOUNTER_TYPE_UUID,
+    BED_ASSIGNMENT_ENCOUNTER_TYPE_UUID,
+    DISCHARGE_ENCOUNTER_TYPE_UUID,
+    TRANSFER_REQUEST_ENCOUNTER_TYPE_UUID
+};
+
+export const AdmissionConcepts = {
+ADMISSION_TO_HOSPITAL_DECISION_UUID,
+ADMISSION_DENIED_UUID,
+CLINICAL_IMPRESSION_UUID,
+CLINICAL_NOTES_UUID,
+INPATIENT_DISPOSITION_CONSTRUCT_UUID,
+INTERNAL_TRANSFER_LOCATION_UUID,
+INPATIENT_PATIENT_DISPOSITION_UUID,
+TRANSFER_OUT_UUID
+}

package/src/admissions/discharged-list/discharged-list.tsx

@@ -0,0 +1,58 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@carbon/react";
+import React from "react";
+import { FhirEncounter } from "../types";
+import { formatDate } from "@openmrs/esm-framework";
+interface DischargedListProps{
+    dischargedEncounters: FhirEncounter[];
+    refresh: () => void;
+}
+const DischargedList: React.FC<DischargedListProps> = ({dischargedEncounters,refresh})=>{
+    if(!dischargedEncounters){
+       return <>No Data to display</>
+    }
+    const getPatientName = (display: string): string=>{
+         const splitString = display.split("(");
+         let names = '';
+         if(splitString.length > 0){
+            names = splitString[0];
+         }
+         return names;
+    };
+    const getPatientIdentifier = (display: string): string=>{
+        const splitString = display.split("(");
+        let identifier = '';
+        if(splitString.length > 1){
+           identifier = splitString[1];
+        }
+        return identifier;
+    }
+   return <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>Discharge Date</TableHeader>
+            <TableHeader>Name</TableHeader>
+            <TableHeader>Identifier</TableHeader>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {
+          dischargedEncounters.map((val,index)=>{
+              return <>
+              <TableRow key={val.id}>
+              <TableCell>{index + 1}</TableCell>
+              <TableCell>{formatDate(new Date(val.period.start))}</TableCell>
+              <TableCell>{getPatientName(val.subject.display ?? '')}</TableCell>
+              <TableCell>{getPatientIdentifier(val.subject.display ?? '')}</TableCell>
+            </TableRow>
+            </>
+          })
+           
+            }
+        </TableBody>
+      </Table>
+   </>
+}
+export default DischargedList;

package/src/admissions/modal/admit-elsewhere/admit-elsewhere.modal.scss

@@ -0,0 +1,23 @@
+.admitModalLayout{
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+    width: 100%;
+}
+.admitModalContentSection{
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+    width: 100%;
+}
+
+.locationSelect{
+    width: 100%;
+}
+
+.formRow{
+   display: flex;
+   flex-direction: row;
+   width: 100%;
+   column-gap: 5px;
+}