@kenyaemr/esm-morgue-app 5.4.2-pre.2344 → 5.4.2-pre.2349

package/src/bed-layout/discharged/discharged-bed-layout.component.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { launchWorkspace, showModal, useConfig } from '@openmrs/esm-framework';
-import { DataTableSkeleton, InlineLoading, Pagination } from '@carbon/react';
+import { showModal, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import { InlineLoading, Pagination, Search } from '@carbon/react';
 import styles from '../bed-layout.scss';
-import { Patient, type MortuaryLocationResponse } from '../../types';
+import { Patient, type MortuaryLocationResponse, EnhancedPatient } from '../../types';
 import { ConfigObject } from '../../config-schema';
-import { mutate as mutateSWR } from 'swr';
 import usePatients, { useMortuaryDischargeEncounter } from './discharged-bed-layout.resource';
 import BedCard from '../../bed/bed.component';
-
+import EmptyMorgueAdmission from '../../empty-state/empty-morgue-admission.component';
+import { transformDischargedPatient, extractPatientFromEnhanced } from '../../helpers/expression-helper';
+import { PatientProvider } from '../../context/deceased-person-context';
 interface BedLayoutProps {
   AdmittedDeceasedPatient: MortuaryLocationResponse | null;
   isLoading: boolean;
@@ -17,15 +18,12 @@ interface BedLayoutProps {
   mutate?: () => void;
 }
 
-const DischargedBedLayout: React.FC<BedLayoutProps> = ({
-  AdmittedDeceasedPatient,
-  isLoading,
-  onPrintGatePass,
-  onPrintPostmortem,
-  mutate,
-}) => {
+const DischargedBedLayout: React.FC<BedLayoutProps> = ({ AdmittedDeceasedPatient, isLoading, onPrintGatePass }) => {
   const { t } = useTranslation();
   const { morgueDischargeEncounterTypeUuid } = useConfig<ConfigObject>();
+  const [searchTerm, setSearchTerm] = useState('');
+  const isTablet = useLayoutType() === 'tablet';
+  const controlSize = isTablet ? 'md' : 'sm';
 
   const {
     dischargedPatientUuids,
@@ -45,6 +43,32 @@ const DischargedBedLayout: React.FC<BedLayoutProps> = ({
     error: patientsError,
   } = usePatients(dischargedPatientUuids || []);
 
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+  };
+
+  const filteredPatients = useMemo(() => {
+    if (!dischargedPatients || !searchTerm.trim()) {
+      return dischargedPatients || [];
+    }
+
+    const lowerSearchTerm = searchTerm.toLowerCase().trim();
+
+    return dischargedPatients.filter((patient) => {
+      const patientName = patient?.person?.display?.toLowerCase() || '';
+      const gender = patient?.person?.gender?.toLowerCase() || '';
+      const patientId = patient?.uuid?.toLowerCase() || '';
+      const causeOfDeath = patient?.person?.causeOfDeath?.display?.toLowerCase() || '';
+
+      return (
+        patientName.includes(lowerSearchTerm) ||
+        gender.includes(lowerSearchTerm) ||
+        patientId.includes(lowerSearchTerm) ||
+        causeOfDeath.includes(lowerSearchTerm)
+      );
+    });
+  }, [dischargedPatients, searchTerm]);
+
   const getEncounterDateForPatient = (patientUuid: string): string | null => {
     if (!encounters || encounters.length === 0) {
       return null;
@@ -55,29 +79,30 @@ const DischargedBedLayout: React.FC<BedLayoutProps> = ({
     return patientEncounter?.encounterDateTime || null;
   };
 
-  const handlePrintGatePass = (patient: Patient, encounterDate?: string) => {
-    if (onPrintGatePass) {
-      onPrintGatePass(patient, encounterDate);
+  const handlePrintGatePass = (patient: EnhancedPatient | Patient, encounterDate?: string) => {
+    let originalPatient: Patient | null = null;
+
+    if ('originalPatient' in patient || 'originalMortuaryPatient' in patient) {
+      originalPatient = extractPatientFromEnhanced(patient as EnhancedPatient);
     } else {
+      originalPatient = patient as Patient;
+    }
+
+    if (onPrintGatePass && originalPatient) {
+      onPrintGatePass(originalPatient, encounterDate);
+    } else if (originalPatient) {
       const dispose = showModal('print-confirmation-modal', {
         onClose: () => dispose(),
-        patient: patient,
+        patient: originalPatient,
         encounterDate: encounterDate,
       });
     }
   };
 
-  const handlePrintPostmortem = (patientUuid: string) => {
-    if (onPrintPostmortem) {
-      onPrintPostmortem(patientUuid);
-    }
-  };
-
-  const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const newPageSize = parseInt(event.target.value, 10);
-    setCurrPageSize(newPageSize);
-    // Reset to first page when changing page size
-    goTo(1);
+  const patientContextValue = {
+    mortuaryLocation: AdmittedDeceasedPatient,
+    isLoading: isLoading || encountersLoading || patientsLoading,
+    onPrintGatePass: handlePrintGatePass,
   };
 
   if (isLoading || encountersLoading || patientsLoading) {
@@ -98,57 +123,90 @@ const DischargedBedLayout: React.FC<BedLayoutProps> = ({
 
   if (!dischargedPatients || dischargedPatients.length === 0) {
     return (
-      <div className={styles.loadingContainer}>
-        <DataTableSkeleton columnCount={5} rowCount={5} zebra />
-      </div>
+      <EmptyMorgueAdmission
+        title={t('noDischargedPatient', 'No deceased patients currently discharged')}
+        subTitle={t(
+          'noDischargedPatientsDescription',
+          'There are no discharged deceased patients to display at this time.',
+        )}
+      />
     );
   }
 
-  return (
-    <div className={styles.bedLayoutWrapper}>
-      <div className={styles.bedLayoutContainer}>
-        {dischargedPatients.map((patient) => {
-          const patientUuid = patient?.uuid;
-          const patientName = patient?.person?.display;
-          const gender = patient?.person?.gender;
-          const age = patient?.person?.age;
-          const causeOfDeath = patient?.person?.causeOfDeath?.display;
-          const dateOfDeath = patient?.person?.deathDate;
-          const encounterDate = getEncounterDateForPatient(patientUuid);
-
-          return (
-            <BedCard
-              key={patientUuid}
-              patientName={patientName}
-              gender={gender}
-              age={age}
-              causeOfDeath={causeOfDeath}
-              dateOfDeath={dateOfDeath}
-              patientUuid={patientUuid}
-              onPrintGatePass={() => handlePrintGatePass(patient, encounterDate)}
-              isDischarged={true}
-            />
-          );
-        })}
-      </div>
+  const patientsToShow = filteredPatients;
+
+  if (searchTerm.trim() && patientsToShow.length === 0) {
+    return (
+      <>
+        <div className={styles.searchContainer}>
+          <Search
+            labelText={t('searchDeceasedPatients', 'Search deceased patients')}
+            placeholder={t(
+              'searchPatientsPlaceholder',
+              'Search by name, ID number, gender, compartment, or bed type...',
+            )}
+            value={searchTerm}
+            onChange={handleSearchChange}
+            size={controlSize}
+          />
+        </div>
+        <EmptyMorgueAdmission
+          title={t('noMatchingDischargedPatients', 'No matching discharged patients found')}
+          subTitle={t(
+            'noMatchingDischargedPatientsDescription',
+            'Try adjusting your search terms to find discharged patients.',
+          )}
+        />
+      </>
+    );
+  }
 
-      <div className={styles.paginationFooter}>
-        <Pagination
-          page={currentPage || 1}
-          totalItems={totalCount || 0}
-          pageSize={currPageSize}
-          pageSizes={[10, 20, 50, 100]}
-          onChange={({ page, pageSize }: { page: number; pageSize: number }) => {
-            if (pageSize !== currPageSize) {
-              setCurrPageSize(pageSize);
-              goTo(1);
-            } else {
-              goTo(page);
-            }
-          }}
+  return (
+    <PatientProvider value={patientContextValue}>
+      <div className={styles.searchContainer}>
+        <Search
+          labelText={t('searchDeceasedPatients', 'Search deceased patients')}
+          placeholder={t('searchPatientsPlaceholder', 'Search by name, ID number, gender, compartment, or bed type...')}
+          value={searchTerm}
+          onChange={handleSearchChange}
+          size="sm"
         />
       </div>
-    </div>
+      <div className={styles.bedLayoutWrapper}>
+        <div className={styles.bedLayoutContainer}>
+          {patientsToShow.map((patient) => {
+            const encounterDate = getEncounterDateForPatient(patient.uuid);
+
+            return (
+              <BedCard
+                key={patient.uuid}
+                patient={transformDischargedPatient(patient, encounterDate)}
+                showActions={{
+                  printGatePass: true,
+                }}
+              />
+            );
+          })}
+        </div>
+
+        <div className={styles.paginationFooter}>
+          <Pagination
+            page={currentPage || 1}
+            totalItems={totalCount || 0}
+            pageSize={currPageSize}
+            pageSizes={[10, 20, 50, 100]}
+            onChange={({ page, pageSize }: { page: number; pageSize: number }) => {
+              if (pageSize !== currPageSize) {
+                setCurrPageSize(pageSize);
+                goTo(1);
+              } else {
+                goTo(page);
+              }
+            }}
+          />
+        </div>
+      </div>
+    </PatientProvider>
   );
 };
 

package/src/bed-linelist-view/admitted/admitted-bed-linelist-view.component.tsx

@@ -14,14 +14,15 @@ import {
   OverflowMenuItem,
   Tag,
   DataTableSkeleton,
+  Search,
 } from '@carbon/react';
-import { launchWorkspace, navigate, useConfig, useVisit } from '@openmrs/esm-framework';
+import { launchWorkspace, navigate, useConfig, useLayoutType, useVisit } from '@openmrs/esm-framework';
 import styles from '../bed-linelist-view.scss';
 import { convertDateToDays, formatDateTime } from '../../utils/utils';
 import { Patient, Person, type MortuaryLocationResponse } from '../../types';
 import { ConfigObject } from '../../config-schema';
 import { mutate as mutateSWR } from 'swr';
-import { EmptyState } from '@openmrs/esm-patient-common-lib/src';
+import EmptyMorgueAdmission from '../../empty-state/empty-morgue-admission.component';
 
 interface AdmittedBedLineListViewProps {
   AdmittedDeceasedPatient: MortuaryLocationResponse | null;
@@ -50,9 +51,12 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
 }) => {
   const { t } = useTranslation();
   const { autopsyFormUuid } = useConfig<ConfigObject>();
+  const isTablet = useLayoutType() === 'tablet';
+  const controlSize = isTablet ? 'md' : 'sm';
 
   const [currentPage, setCurrentPage] = useState(1);
   const [currPageSize, setCurrPageSize] = useState(initialPageSize);
+  const [searchTerm, setSearchTerm] = useState('');
 
   const DaysInMortuary = ({ patientUuid }: { patientUuid: string }) => {
     const { activeVisit } = useVisit(patientUuid);
@@ -84,7 +88,9 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
     { key: 'action', header: t('action', 'Action') },
   ];
 
-  const handlePostmortem = (patientUuid: string) => {
+  const handlePostmortem = (patientUuid: string, bedInfo?: { bedNumber: string; bedId: number }) => {
+    const hasBedInfo = bedInfo?.bedNumber && bedInfo?.bedId;
+
     if (onPostmortem) {
       onPostmortem(patientUuid);
     } else {
@@ -100,8 +106,12 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
         },
       });
     }
+    const base = `${window.getOpenmrsSpaBase()}home/morgue/patient/${patientUuid}`;
+    const to = hasBedInfo
+      ? `${base}/compartment/${bedInfo.bedNumber}/${bedInfo.bedId}/mortuary-chart`
+      : `${base}/mortuary-chart`;
+    navigate({ to });
   };
-
   const handleDischarge = (patientUuid: string, bedId: number) => {
     if (onDischarge) {
       onDischarge(patientUuid);
@@ -129,19 +139,6 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
     }
   };
 
-  const handleDispose = (patientUuid: string, bedId: number) => {
-    if (onDispose) {
-      onDispose(patientUuid);
-    } else {
-      launchWorkspace('dispose-deceased-person-form', {
-        workspaceTitle: t('disposeForm', 'Dispose form'),
-        patientUuid: patientUuid,
-        bedId,
-        mutate,
-      });
-    }
-  };
-
   const calculateDaysAdmitted = (dateOfDeath: string): number => {
     if (!dateOfDeath) {
       return 0;
@@ -226,6 +223,7 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
           daysAdmitted: '-',
           isEmpty: true,
           bedId,
+          searchableText: `${bedNumber} ${bedType}`.toLowerCase(),
         });
       } else {
         for (const patient of patients) {
@@ -236,6 +234,7 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
           const causeOfDeath = patient.person?.causeOfDeath?.display || t('unknown', 'Unknown');
           const dateOfDeath = patient.person?.deathDate;
           const daysAdmitted = calculateDaysAdmitted(dateOfDeath).toString();
+          const idNumber = getIdNumber(patient);
 
           rows.push({
             id: `${bedUuid}-${patientUuid}`,
@@ -244,7 +243,7 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
             bedType,
             status: bedStatus,
             patientName,
-            idNumber: getIdNumber(patient),
+            idNumber,
             gender,
             age,
             dateOfDeath: formatDateTime(dateOfDeath),
@@ -255,6 +254,7 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
             bedUuid,
             bedId,
             personUuid: patient.person?.uuid || '',
+            searchableText: `${patientName} ${idNumber} ${gender} ${bedNumber} ${bedType}`.toLowerCase(),
           });
         }
       }
@@ -263,6 +263,32 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
     return rows;
   }, [getCompartmentShare, AdmittedDeceasedPatient, t, isLoading]);
 
+  const filteredRows = useMemo(() => {
+    if (!searchTerm.trim()) {
+      return allRows;
+    }
+
+    const searchLower = searchTerm.toLowerCase().trim();
+    return allRows.filter(
+      (row) =>
+        row.searchableText.includes(searchLower) ||
+        row.patientName.toLowerCase().includes(searchLower) ||
+        row.idNumber.toLowerCase().includes(searchLower) ||
+        row.gender.toLowerCase().includes(searchLower) ||
+        row.bedNumber?.toString().includes(searchLower) ||
+        row.bedType.toLowerCase().includes(searchLower),
+    );
+  }, [allRows, searchTerm]);
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+    setCurrentPage(1);
+  };
+
+  const hasSearchTerm = searchTerm.trim().length > 0;
+  const hasNoSearchResults = hasSearchTerm && filteredRows.length === 0;
+  const totalCount = filteredRows.length;
+
   if (isLoading) {
     return (
       <div className={styles.loadingContainer}>
@@ -274,18 +300,20 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
   if (!AdmittedDeceasedPatient) {
     return (
       <div className={styles.loadingContainer}>
-        <EmptyState
-          headerTitle={t('noAdmittedPatients', 'No admitted patients found')}
-          displayText={t('noAdmittedPatientsDescription', 'There are currently no admitted patients to display.')}
+        <EmptyMorgueAdmission
+          title={t('noAdmittedPatient', 'No deceased patients currently admitted')}
+          subTitle={t(
+            'noAdmittedPatientsDescription',
+            'There are no admitted deceased patients to display at this time.',
+          )}
         />
       </div>
     );
   }
 
-  const totalCount = allRows.length;
   const startIndex = (currentPage - 1) * currPageSize;
   const endIndex = startIndex + currPageSize;
-  const paginatedRows = paginated ? allRows.slice(startIndex, endIndex) : allRows;
+  const paginatedRows = paginated ? filteredRows.slice(startIndex, endIndex) : filteredRows;
 
   const goTo = (page: number) => setCurrentPage(page);
 
@@ -299,120 +327,140 @@ const AdmittedBedLineListView: React.FC<AdmittedBedLineListViewProps> = ({
     }
   };
 
+  const NoSearchResults = () => (
+    <div className={styles.emptyState}>
+      <EmptyMorgueAdmission
+        title={t('noSearchResults', 'We couldn’t find anything')}
+        subTitle={t('tryAgain', 'Try adjusting your search {{searchTerm}} and try again', { searchTerm })}
+      />
+    </div>
+  );
+
   return (
     <div className={styles.bedLayoutWrapper}>
-      <DataTable rows={paginatedRows} headers={headers} isSortable useZebraStyles>
-        {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
-          <TableContainer>
-            <Table {...getTableProps()} aria-label="mortuary beds table">
-              <TableHead>
-                <TableRow>
-                  {headers.map((header) => (
-                    <TableHeader key={header.key} {...getHeaderProps({ header })}>
-                      {header.header}
-                    </TableHeader>
-                  ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {rows.map((row) => {
-                  const rowData = allRows.find((r) => r.id === row.id);
-                  if (!rowData) {
-                    return null;
-                  }
-
-                  return (
-                    <TableRow key={row.id} {...getRowProps({ row })}>
-                      {row.cells.map((cell) => {
-                        const cellKey = cell.info.header as keyof typeof rowData;
-
-                        if (cell.info.header === 'daysAdmitted' && !rowData.isEmpty) {
-                          return (
-                            <TableCell key={cell.id}>
-                              <DaysInMortuary patientUuid={rowData.patientUuid} />
-                            </TableCell>
-                          );
-                        }
-
-                        if (cell.info.header === 'admissionDate' && !rowData.isEmpty) {
-                          return (
-                            <TableCell key={cell.id}>
-                              <AdmissionDate patientUuid={rowData.patientUuid} />
-                            </TableCell>
-                          );
-                        }
-
-                        if (cell.info.header === 'status') {
-                          return (
-                            <TableCell key={cell.id}>
-                              <Tag type={rowData.status === 'AVAILABLE' ? 'green' : 'red'} size="sm">
-                                {rowData.status === 'AVAILABLE'
-                                  ? t('available', 'Available')
-                                  : t('occupied', 'Occupied')}
-                              </Tag>
-                            </TableCell>
-                          );
-                        }
-
-                        if (cell.info.header === 'action') {
-                          return (
-                            <TableCell key={cell.id}>
-                              {!rowData.isEmpty && (
-                                <OverflowMenu flipped>
-                                  <OverflowMenuItem
-                                    onClick={() => {
-                                      const hasBedInfo = rowData.bedNumber && rowData.bedId;
-                                      const base = `${window.getOpenmrsSpaBase()}home/morgue/patient/${
-                                        rowData.patientUuid
-                                      }`;
-                                      const to = hasBedInfo
-                                        ? `${base}/compartment/${rowData.bedNumber}/${rowData.bedId}/mortuary-chart`
-                                        : `${base}/mortuary-chart`;
-                                      navigate({ to });
-                                    }}
-                                    itemText={t('viewDetails', 'View details')}
-                                  />
-                                  <OverflowMenuItem
-                                    onClick={() => handlePostmortem(rowData.patientUuid)}
-                                    itemText={t('postmortemForm', 'Postmortem')}
-                                  />
-                                  <OverflowMenuItem
-                                    onClick={() => handleSwapCompartment(rowData.patientUuid, rowData.bedId)}
-                                    itemText={t('compartmentSwap', 'Compartment swap')}
-                                  />
-                                  <OverflowMenuItem
-                                    onClick={() => handleDispose(rowData.patientUuid, rowData.bedId)}
-                                    itemText={t('disposeForm', 'Dispose')}
-                                  />
-                                  <OverflowMenuItem
-                                    onClick={() => handleDischarge(rowData.patientUuid, rowData.bedId)}
-                                    itemText={t('dischargeForm', 'Discharge')}
-                                  />
-                                </OverflowMenu>
-                              )}
-                            </TableCell>
-                          );
-                        }
-                        return <TableCell key={cell.id}>{rowData[cellKey] || '-'}</TableCell>;
-                      })}
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        )}
-      </DataTable>
-
-      {paginated && !isLoading && totalCount > 0 && (
-        <Pagination
-          page={currentPage}
-          pageSize={currPageSize}
-          pageSizes={pageSizes}
-          totalItems={totalCount}
-          size={'sm'}
-          onChange={handlePaginationChange}
+      <div className={styles.searchContainer}>
+        <Search
+          labelText={t('noSearchDeceasedPatients', 'Search deceased patients')}
+          placeholder={t('searchPatientsPlaceholder', 'Search by name, ID number, gender, compartment, or bed type...')}
+          value={searchTerm}
+          onChange={handleSearchChange}
+          size={controlSize}
         />
+      </div>
+      {hasNoSearchResults ? (
+        <NoSearchResults />
+      ) : (
+        <>
+          <DataTable rows={paginatedRows} headers={headers} isSortable useZebraStyles>
+            {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+              <TableContainer>
+                <Table {...getTableProps()} aria-label="mortuary beds table">
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                          {header.header}
+                        </TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => {
+                      const rowData = allRows.find((r) => r.id === row.id);
+                      if (!rowData) {
+                        return null;
+                      }
+
+                      return (
+                        <TableRow key={row.id} {...getRowProps({ row })}>
+                          {row.cells.map((cell) => {
+                            const cellKey = cell.info.header as keyof typeof rowData;
+
+                            if (cell.info.header === 'daysAdmitted' && !rowData.isEmpty) {
+                              return (
+                                <TableCell key={cell.id}>
+                                  <DaysInMortuary patientUuid={rowData.patientUuid} />
+                                </TableCell>
+                              );
+                            }
+
+                            if (cell.info.header === 'admissionDate' && !rowData.isEmpty) {
+                              return (
+                                <TableCell key={cell.id}>
+                                  <AdmissionDate patientUuid={rowData.patientUuid} />
+                                </TableCell>
+                              );
+                            }
+
+                            if (cell.info.header === 'status') {
+                              return (
+                                <TableCell key={cell.id}>
+                                  <Tag type={rowData.status === 'AVAILABLE' ? 'green' : 'red'} size="sm">
+                                    {rowData.status === 'AVAILABLE'
+                                      ? t('available', 'Available')
+                                      : t('occupied', 'Occupied')}
+                                  </Tag>
+                                </TableCell>
+                              );
+                            }
+
+                            if (cell.info.header === 'action') {
+                              return (
+                                <TableCell key={cell.id}>
+                                  {!rowData.isEmpty && (
+                                    <OverflowMenu flipped>
+                                      <OverflowMenuItem
+                                        onClick={() => {
+                                          const hasBedInfo = rowData.bedNumber && rowData.bedId;
+                                          const base = `${window.getOpenmrsSpaBase()}home/morgue/patient/${
+                                            rowData.patientUuid
+                                          }`;
+                                          const to = hasBedInfo
+                                            ? `${base}/compartment/${rowData.bedNumber}/${rowData.bedId}/mortuary-chart`
+                                            : `${base}/mortuary-chart`;
+                                          navigate({ to });
+                                        }}
+                                        itemText={t('viewDetails', 'View details')}
+                                      />
+                                      <OverflowMenuItem
+                                        onClick={() => handlePostmortem(rowData.patientUuid)}
+                                        itemText={t('postmortemForm', 'Postmortem')}
+                                      />
+                                      <OverflowMenuItem
+                                        onClick={() => handleSwapCompartment(rowData.patientUuid, rowData.bedId)}
+                                        itemText={t('compartmentSwap', 'Compartment swap')}
+                                      />
+                                      <OverflowMenuItem
+                                        onClick={() => handleDischarge(rowData.patientUuid, rowData.bedId)}
+                                        itemText={t('dischargeForm', 'Discharge')}
+                                      />
+                                    </OverflowMenu>
+                                  )}
+                                </TableCell>
+                              );
+                            }
+                            return <TableCell key={cell.id}>{rowData[cellKey] || '-'}</TableCell>;
+                          })}
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+
+          {paginated && !isLoading && totalCount > 0 && (
+            <Pagination
+              page={currentPage}
+              pageSize={currPageSize}
+              pageSizes={pageSizes}
+              totalItems={totalCount}
+              size={'sm'}
+              onChange={handlePaginationChange}
+            />
+          )}
+        </>
       )}
     </div>
   );