@kenyaemr/esm-morgue-app 5.3.8-pre.1562 → 5.3.8-pre.1570

package/src/component/main.component.tsx

@@ -2,9 +2,16 @@ import React from 'react';
 import { MorgueHeader } from '../header/morgue-header.component';
 import { MorgueTabs } from '../tabs/tabs.component';
 import { useTranslation } from 'react-i18next';
+import { useDeceasedPatient } from '../hook/useMorgue.resource';
 
 const MainComponent: React.FC = () => {
   const { t } = useTranslation();
+  const { data: deceasedPatients, isLoading } = useDeceasedPatient();
+
+  const awaitingCount = isLoading ? null : deceasedPatients?.filter((p) => p.status === 'awaiting').length || 0;
+  const admittedCount = isLoading ? null : deceasedPatients?.filter((p) => p.status === 'admitted').length || 0;
+  const dischargedCount = isLoading ? null : deceasedPatients?.filter((p) => p.status === 'discharged').length || 0;
+
   return (
     <div className={`omrs-main-content`}>
       <MorgueHeader title={t('mortuary', 'Mortuary')} />

package/src/config-schema.ts

@@ -46,7 +46,7 @@ export const configSchema = {
   morgueDischargeEncounterTypeUuid: {
     type: Type.String,
     _description: 'Encounter type for morgue discharge',
-    _default: ' d618f40b-b5a3-4f17-81c8-2f04e2aad58e',
+    _default: 'd618f40b-b5a3-4f17-81c8-2f04e2aad58e',
   },
   visitPaymentMethodAttributeUuid: {
     _type: Type.String,
@@ -83,6 +83,11 @@ export const configSchema = {
     _description: 'UUID for discharge area concept',
     _default: 'a458fd00-199e-4d08-ad5c-1be322a6ccbe',
   },
+  adminUuid: {
+    _type: Type.String,
+    _description: 'UUID for admin user',
+    _default: 'e02c40e5-04e7-11e5-ae3c-a0b3cc4f922f',
+  },
 };
 
 export interface BillingConfig {
@@ -127,4 +132,5 @@ export type ConfigObject = {
   policeIDNumber: string;
   dischargeAreaUuid: string;
   morgueDischargeEncounterTypeUuid: string;
+  adminUuid: string;
 };

package/src/empty-state/{empty-search-deceased.component.tsx → empty-morgue-admission.component.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import styles from './empty-deceased.scss';
+import styles from './empty-morgue-admission.scss';
 import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
 import { DocumentUnknown, IbmWatsonKnowledgeStudio } from '@carbon/react/icons';
 
@@ -9,7 +9,7 @@ interface EmptyDeceasedSearchProps {
   subTitle: string;
 }
 
-const EmptyDeceasedSearch: React.FC<EmptyDeceasedSearchProps> = ({ title, subTitle }) => {
+const EmptyMorgueAdmission: React.FC<EmptyDeceasedSearchProps> = ({ title, subTitle }) => {
   const { t } = useTranslation();
 
   return (
@@ -21,4 +21,4 @@ const EmptyDeceasedSearch: React.FC<EmptyDeceasedSearchProps> = ({ title, subTit
   );
 };
 
-export default EmptyDeceasedSearch;
+export default EmptyMorgueAdmission;

package/src/header/morgue-header.component.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Calendar, Location } from '@carbon/react/icons';
+import { Calendar, Location, UserFollow } from '@carbon/react/icons';
 import { useSession, formatDate } from '@openmrs/esm-framework';
 import styles from './morgue-header.scss';
 import MorgueIllustration from './morgue-illustration.component';
+import { InlineLoading } from '@carbon/react';
 
 interface MorgueHeaderProps {
   title: string;
@@ -11,8 +12,8 @@ interface MorgueHeaderProps {
 
 export const MorgueHeader: React.FC<MorgueHeaderProps> = ({ title }) => {
   const { t } = useTranslation();
-  const userSession = useSession();
-  const userLocation = userSession?.sessionLocation?.display;
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
 
   return (
     <div className={styles.header}>
@@ -23,18 +24,13 @@ export const MorgueHeader: React.FC<MorgueHeaderProps> = ({ title }) => {
           <p>{t('mortuaryManagement', 'Mortuary management')}</p>
         </div>
       </div>
-      <div className={styles.metrics}>
-        <div className={styles.wrapMetrics}>
-          <span className={styles.metricLabel}>{t('awaiting', 'Awaiting')}</span>
-          <span className={styles.metricValue}>0</span>
-        </div>
-        <div className={styles.wrapMetrics}>
-          <span className={styles.metricLabel}>{t('admittedOnes', 'Admitted')}</span>
-          <span className={styles.metricValue}>0</span>
-        </div>
-        <div className={styles.wrapMetrics}>
-          <span className={styles.metricLabel}>{t('discharges', 'Discharges')}</span>
-          <span className={styles.metricValue}>0</span>
+      <div className={styles['right-justified-items']}>
+        <div className={styles['date-and-location']}>
+          <Location size={16} />
+          <span className={styles.value}>{location}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
         </div>
       </div>
     </div>

package/src/header/morgue-header.scss

@@ -43,59 +43,53 @@ svg.iconOverrides {
   fill: var(--brand-03);
 }
 
-.metrics {
+.left-justified-items {
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
   align-items: center;
-  gap: layout.$spacing-06;
-  flex-wrap: wrap;
-  padding: layout.$spacing-04 layout.$spacing-05 0 0;
-  width: auto;
-  height: auto;
+  cursor: pointer;
+  align-items: center;
 }
 
-.wrapMetrics {
-  width: auto;
-  height: auto;
-  flex-grow: 1;
+.right-justified-items {
+  @include type.type-style('body-compact-02');
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: layout.$spacing-03;
-  padding: 0;
-  min-width: layout.$spacing-12;
+  justify-content: space-between;
 }
 
-.metricLabel {
-  flex-grow: 0;
-  font-size: layout.$spacing-04;
-  line-height: 1.33;
-  letter-spacing: 0.32px;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.page-name {
+  @include type.type-style('heading-04');
 }
 
-.metricValue {
-  flex-grow: 0;
-  font-family: IBMPlexSans;
-  font-size: layout.$spacing-06;
-  line-height: 1.4;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.page-labels {
+  margin: layout.$spacing-05;
+
+  p:first-of-type {
+    margin-bottom: layout.$spacing-02;
+  }
 }
 
-.metricLocationDate {
+.date-and-location {
   display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.userContainer {
+  display: flex;
+  justify-content: flex-end;
   gap: layout.$spacing-05;
-  width: auto;
-  max-width: 120px;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('label-01');
 }

package/src/hook/useMorgue.resource.ts

@@ -1,17 +1,33 @@
 import {
   FetchResponse,
   openmrsFetch,
+  openmrsObservableFetch,
   OpenmrsResource,
   restBaseUrl,
+  toDateObjectStrict,
+  toOmrsIsoString,
   useConfig,
   useOpenmrsPagination,
 } from '@openmrs/esm-framework';
-import { DeceasedPatientResponse, PaymentMethod, VisitTypeResponse, Location, Patient, Visit } from '../types';
+import {
+  DeceasedPatientResponse,
+  PaymentMethod,
+  VisitTypeResponse,
+  Location,
+  Patient,
+  Visit,
+  UseVisitQueueEntries,
+  VisitQueueEntry,
+  MappedVisitQueueEntry,
+  UpdateVisitPayload,
+  PaginatedResponse,
+} from '../types';
 import useSWR from 'swr';
 import { BillingConfig, ConfigObject } from '../config-schema';
 import { useEffect, useState } from 'react';
 import useSWRImmutable from 'swr/immutable';
 import { makeUrlUrl } from '../utils/utils';
+import type { Observable } from 'rxjs';
 
 const getMorguePatientStatus = async (
   patientUuid: string,
@@ -19,7 +35,7 @@ const getMorguePatientStatus = async (
   morgueDischargeEncounter: string,
 ): Promise<'discharged' | 'admitted' | 'awaiting'> => {
   const customRepresentation = 'custom:(visitType:(uuid),startDatetime,stopDatetime,encounters:(encounterType:(uuid)))';
-  const url = `${restBaseUrl}/visit?v=${customRepresentation}&includeInactive=false&patient=${patientUuid}&limit=1`;
+  const url = `${restBaseUrl}/visit?v=${customRepresentation}&patient=${patientUuid}&limit=1`;
   const response = await openmrsFetch<{
     results: Array<{
       visitType: { uuid: string };
@@ -38,6 +54,7 @@ const getMorguePatientStatus = async (
   );
   const isMorgueVisit = visit?.visitType?.uuid === morgueVisitTypeUuid;
   const isVisitActive = !(typeof visit?.stopDatetime === 'string');
+
   if (!isMorgueVisit) {
     return 'awaiting';
   }
@@ -46,28 +63,33 @@ const getMorguePatientStatus = async (
   }
   return 'admitted';
 };
-export const useDeceasedPatient = () => {
+export const useDeceasedPatient = (searchTerm?: string) => {
   const { morgueVisitTypeUuid, morgueDischargeEncounterTypeUuid } = useConfig<ConfigObject>();
   const [deceasedPatient, setDeceasedPatient] = useState([]);
   const [isLoadingStatus, setIsLoadingStatus] = useState(false);
   const [statusError, setStatusError] = useState();
   const customRepresentation =
     'custom:(uuid,display,identifiers:(identifier,uuid,preferred,location:(uuid,name)),person:(uuid,display,gender,birthdate,dead,age,deathDate,causeOfDeath:(uuid,display),preferredAddress:(uuid,stateProvince,countyDistrict,address4)))';
-  const url = `${restBaseUrl}/morgue/patient?v=${customRepresentation}&dead=true`;
+  const uril = makeUrlUrl(`${restBaseUrl}/morgue/patient?v=${customRepresentation}&dead=true&q=${searchTerm}`);
+  const pageSize = 10;
+  const {
+    data: paginatedData,
+    error: paginatedError,
+    isLoading: isPaginatedLoading,
+  } = useOpenmrsPagination<PaginatedResponse>(uril, pageSize);
 
-  const { data, error, isLoading } = useSWRImmutable<{ data: DeceasedPatientResponse }>(url, openmrsFetch);
   useEffect(() => {
-    if (data?.data?.results?.length) {
+    if (paginatedData?.length) {
       (async () => {
         try {
           setIsLoadingStatus(true);
           const status = await Promise.all(
-            data.data.results.map((data) => {
+            paginatedData?.map((data) => {
               return getMorguePatientStatus(data?.uuid, morgueVisitTypeUuid, morgueDischargeEncounterTypeUuid);
             }),
           );
 
-          setDeceasedPatient(data.data.results.map((patient, index) => ({ ...patient, status: status[index] })));
+          setDeceasedPatient(paginatedData?.map((patient, index) => ({ ...patient, status: status[index] })));
         } catch (error) {
           setStatusError(error);
         } finally {
@@ -75,18 +97,13 @@ export const useDeceasedPatient = () => {
         }
       })();
     }
-  }, [morgueVisitTypeUuid, morgueDischargeEncounterTypeUuid, data]);
+  }, [morgueVisitTypeUuid, morgueDischargeEncounterTypeUuid, paginatedData]);
 
-  return { data: deceasedPatient, error: error ?? statusError, isLoading: isLoading || isLoadingStatus };
-};
-
-export const usePatientPaginatedEncounters = (patientUuid: string) => {
-  const customRepresentation =
-    'custom:(visitType:(uuid,name,display),uuid,encounters:(uuid,diagnoses:(uuid,display,rank,diagnosis),form:(uuid,display),encounterDatetime,orders:full,obs:(uuid,concept:(uuid,display,conceptClass:(uuid,display)),display,groupMembers:(uuid,concept:(uuid,display),value:(uuid,display),display),value,obsDatetime),encounterType:(uuid,display,viewPrivilege,editPrivilege),encounterProviders:(uuid,display,encounterRole:(uuid,display),provider:(uuid,person:(uuid,display)))),visitType:(uuid,name,display),startDatetime,stopDatetime,patient,attributes:(attributeType:ref,display,uuid,value)';
-  const url = makeUrlUrl(`${restBaseUrl}/encounter?patient=${patientUuid}&v=full`);
-
-  const paginatedEncounter = useOpenmrsPagination(url, 10);
-  return paginatedEncounter;
+  return {
+    data: deceasedPatient,
+    error: paginatedError ?? statusError,
+    isLoading: isPaginatedLoading || isLoadingStatus,
+  };
 };
 
 export const useVisitType = () => {
@@ -177,3 +194,74 @@ const usePerson = (uuid: string) => {
 };
 
 export default usePerson;
+
+export function useVisitQueueEntry(patientUuid, visitUuid): UseVisitQueueEntries {
+  const apiUrl = `${restBaseUrl}/visit-queue-entry?v=full&patient=${patientUuid}`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<VisitQueueEntry> } }, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+  const mapVisitQueueEntryProperties = (visitQueueEntry: VisitQueueEntry): MappedVisitQueueEntry => ({
+    id: visitQueueEntry.uuid,
+    name: visitQueueEntry.queueEntry.queue.display,
+    patientUuid: visitQueueEntry.queueEntry.patient.uuid,
+    priority:
+      visitQueueEntry.queueEntry.priority.display === 'Urgent'
+        ? 'Priority'
+        : visitQueueEntry.queueEntry.priority.display,
+    priorityUuid: visitQueueEntry.queueEntry.priority.uuid,
+    service: visitQueueEntry.queueEntry.queue?.display,
+    status: visitQueueEntry.queueEntry.status.display,
+    statusUuid: visitQueueEntry.queueEntry.status.uuid,
+    visitUuid: visitQueueEntry.visit?.uuid,
+    visitType: visitQueueEntry.visit?.visitType?.display,
+    queue: visitQueueEntry.queueEntry.queue,
+    queueEntryUuid: visitQueueEntry.queueEntry.uuid,
+  });
+
+  const mappedVisitQueueEntry =
+    data?.data?.results
+      ?.map(mapVisitQueueEntryProperties)
+      .filter((visitQueueEntry) => visitUuid !== undefined && visitUuid === visitQueueEntry.visitUuid)
+      .shift() ?? null;
+  return {
+    queueEntry: mappedVisitQueueEntry,
+    isLoading,
+    error: error,
+    isValidating,
+    mutate,
+  };
+}
+
+export function removeQueuedPatient(
+  queueUuid: string,
+  queueEntryUuid: string,
+  abortController: AbortController,
+  endedAt?: Date,
+) {
+  return openmrsFetch(`${restBaseUrl}/queue/${queueUuid}/entry/${queueEntryUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: {
+      endedAt: toDateObjectStrict(toOmrsIsoString(endedAt) ?? toOmrsIsoString(new Date())),
+    },
+    signal: abortController.signal,
+  });
+}
+
+export function updateVisit(
+  uuid: string,
+  payload: UpdateVisitPayload,
+  abortController: AbortController,
+): Observable<any> {
+  return openmrsObservableFetch(`${restBaseUrl}/visit/${uuid}`, {
+    signal: abortController.signal,
+    method: 'POST',
+    headers: {
+      'Content-type': 'application/json',
+    },
+    body: payload,
+  });
+}

package/src/tables/admitted-queue.component.tsx

@@ -6,6 +6,7 @@ import CompartmentView from '../card/compartment-view.compartment';
 import { useDeceasedPatient } from '../hook/useMorgue.resource';
 import { InlineLoading } from '@carbon/react';
 import { CardHeader, ErrorState } from '@openmrs/esm-patient-common-lib';
+import EmptyMorgueAdmission from '../empty-state/empty-morgue-admission.component';
 
 export const AdmittedQueue: React.FC = () => {
   const { data: deceasedPatients, error, isLoading } = useDeceasedPatient();
@@ -17,7 +18,6 @@ export const AdmittedQueue: React.FC = () => {
   };
 
   const admittedPatients = deceasedPatients?.filter((patient) => patient.status === 'admitted') || [];
-
   if (isLoading) {
     return (
       <InlineLoading
@@ -32,14 +32,21 @@ export const AdmittedQueue: React.FC = () => {
     return <ErrorState error={error} headerTitle={t('allocation', 'Allocation')} />;
   }
 
+  if (admittedPatients?.length === 0) {
+    return (
+      <EmptyMorgueAdmission
+        title={t('allocations', 'Allocation')}
+        subTitle={t('noAdmittedBodies', 'There are no admitted bodies')}
+      />
+    );
+  }
+
   return (
     <div className={styles.layoutWrapper}>
       <CardHeader title={t('allocation', 'Allocation')} children={''} />
       <DeceasedFilter onSearchChange={handleSearchChange} />
       <div className={styles.patientCardContainer}>
-        <div className={styles.patientCardContainer}>
-          <CompartmentView patientVisit={{ results: admittedPatients }} searchQuery={searchQuery} />
-        </div>
+        <CompartmentView patientVisit={{ results: admittedPatients }} searchQuery={searchQuery} />
       </div>
     </div>
   );

package/src/tables/discharge-queue.component.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import GenericTable from './generic-table.component';
+import { ConfigurableLink, ErrorState, formatDate, launchWorkspace } from '@openmrs/esm-framework';
+import { toUpperCase } from '../helpers/expression-helper';
+import { Tag, Button, DataTableSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import styles from './generic-table.scss';
+import { useTranslation } from 'react-i18next';
+import { useDeceasedPatient } from '../hook/useMorgue.resource';
+import { formatDateTime } from '../utils/utils';
+
+interface DischargedProps {
+  isLoading: boolean;
+  deceasedPatients: any;
+  error: any;
+}
+
+export const DischargedBodies: React.FC<DischargedProps> = ({ isLoading, deceasedPatients, error }) => {
+  const { t } = useTranslation();
+  const dischargedInLine = t('dischargeBodies', 'Discharged bodies');
+  const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart/deceased-panel';
+
+  const genericTableHeader = [
+    { header: 'Patient Name', key: 'name' },
+    { header: 'Gender', key: 'gender' },
+    { header: 'Identifier', key: 'identifier' },
+    { header: 'Age', key: 'age' },
+    { header: 'Date of Death', key: 'deathDate' },
+    { header: 'Cause of Death', key: 'causeOfDeath' },
+    { header: 'Status', key: 'status' },
+  ];
+
+  if (isLoading) {
+    return (
+      <div className={styles.table}>
+        <DataTableSkeleton
+          headers={genericTableHeader}
+          aria-label="discharged-datatable"
+          showToolbar={false}
+          showHeader={false}
+          rowCount={10}
+          zebra
+          columnCount={7}
+        />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('dischargeBodies', 'Discharged bodies')} />;
+  }
+
+  const dischargedDeceased = deceasedPatients?.filter((patient) => patient?.status === 'discharged') || [];
+
+  const rows = dischargedDeceased.map((patient) => ({
+    id: patient.uuid,
+    name: (
+      <ConfigurableLink
+        style={{ textDecoration: 'none', maxWidth: '50%' }}
+        to={patientChartUrl}
+        templateParams={{ patientUuid: patient?.person?.uuid }}>
+        {patient.person.display?.toUpperCase()}
+      </ConfigurableLink>
+    ),
+    gender: patient.person.gender,
+    age: patient?.person?.age,
+    identifier: patient?.identifiers[0]?.identifier,
+    deathDate: new Date(patient.person.deathDate).toLocaleString(),
+    causeOfDeath: patient.person.causeOfDeath?.display,
+    status: <Tag type="magenta">{patient.status}</Tag>,
+  }));
+
+  return <GenericTable rows={rows} headers={genericTableHeader} title={dischargedInLine} />;
+};

package/src/tables/generic-table.component.tsx

@@ -15,7 +15,7 @@ import {
 import { CardHeader, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import { useLayoutType, usePagination } from '@openmrs/esm-framework';
 import styles from './generic-table.scss';
-import EmptyDeceasedSearch from '../empty-state/empty-search-deceased.component';
+import EmptyDeceasedSearch from '../empty-state/empty-morgue-admission.component';
 
 interface GenericTableProps {
   rows: any[];

package/src/tables/waiting-queue.component.tsx

@@ -6,9 +6,15 @@ import { Tag, Button, DataTableSkeleton, OverflowMenu, OverflowMenuItem } from '
 import styles from './generic-table.scss';
 import { useTranslation } from 'react-i18next';
 import { useDeceasedPatient } from '../hook/useMorgue.resource';
+import { formatDateTime } from '../utils/utils';
 
-export const WaitingQueue: React.FC = () => {
-  const { data: deceasedPatients, error, isLoading } = useDeceasedPatient();
+interface WaitingQueueProps {
+  isLoading: boolean;
+  deceasedPatients: any;
+  error: any;
+}
+
+export const WaitingQueue: React.FC<WaitingQueueProps> = ({ isLoading, deceasedPatients, error }) => {
   const { t } = useTranslation();
   const waitingInLine = t('waitingInLine', 'Waiting In Line');
 
@@ -46,11 +52,11 @@ export const WaitingQueue: React.FC = () => {
 
   const rows = awaitingPatients.map((patient) => ({
     id: patient.uuid,
-    name: toUpperCase(patient.person.display),
+    name: patient.person.display?.toUpperCase(),
     gender: patient.person.gender,
     age: patient?.person?.age,
     identifier: patient?.identifiers[0]?.identifier,
-    deathDate: formatDate(new Date(patient.person.deathDate)),
+    deathDate: patient.person.deathDate ? new Date(patient.person.deathDate).toLocaleString() : t('nullDate', '--'),
     causeOfDeath: patient.person.causeOfDeath?.display,
     status: <Tag type="magenta">{patient.status}</Tag>,
   }));
@@ -62,17 +68,9 @@ export const WaitingQueue: React.FC = () => {
     });
   };
 
-  const handleDischargeForm = (patientUuid: string) => {
-    launchWorkspace('discharge-body-form', {
-      workspaceTitle: t('dischargeForm', 'Discharge form'),
-      patientUuid,
-    });
-  };
-
   const actionColumn = (row) => (
     <OverflowMenu size="sm" flipped>
       <OverflowMenuItem itemText={t('admit', 'Admit')} onClick={() => handleAdmissionForm(row.id)} />
-      <OverflowMenuItem isDelete itemText={t('release', 'Release')} onClick={() => handleDischargeForm(row.id)} />
     </OverflowMenu>
   );
 

package/src/tabs/tabs.component.tsx

@@ -1,42 +1,60 @@
-import React, { useState } from 'react';
-import { Tabs, Tab, TabList, TabPanel, TabPanels, Button, Layer } from '@carbon/react';
+import React from 'react';
+import { Tabs, Tab, TabList, TabPanel, TabPanels, InlineLoading, Layer } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import styles from './tabs.scss';
 import { WaitingQueue } from '../tables/waiting-queue.component';
 import { AdmittedQueue } from '../tables/admitted-queue.component';
-import { launchWorkspace } from '@openmrs/esm-framework';
-import { Touch_1Filled } from '@carbon/react/icons';
+import { useDeceasedPatient } from '../hook/useMorgue.resource';
+import { DischargedBodies } from '../tables/discharge-queue.component';
 
 export const MorgueTabs: React.FC = () => {
   const { t } = useTranslation();
+  const { data: deceasedPatients, error, isLoading } = useDeceasedPatient();
+
+  const awaitingCount = deceasedPatients?.filter((p) => p.status === 'awaiting').length || 0;
+  const admittedCount = deceasedPatients?.filter((p) => p.status === 'admitted').length || 0;
+  const dischargedCount = deceasedPatients?.filter((p) => p.status === 'discharged').length || 0;
+
+  const getTabLabel = (baseLabel: string, count: number | null) => (
+    <span className={styles.tabLabel}>
+      {baseLabel} {isLoading ? '' : `(${count})`}
+    </span>
+  );
 
   const tabPanels = [
-    { name: t('waitQueue', 'Waiting queue'), component: <WaitingQueue /> },
-    { name: t('admitted', 'Admitted'), component: <AdmittedQueue /> },
-    { name: t('discharged', 'Discharged'), component: '' },
+    {
+      name: getTabLabel(t('waitQueue', 'Waiting queue'), awaitingCount),
+      component: <WaitingQueue isLoading={isLoading} deceasedPatients={deceasedPatients} error={error} />,
+    },
+    {
+      name: getTabLabel(t('admitted', 'Admitted'), admittedCount),
+      component: <AdmittedQueue />,
+    },
+    {
+      name: getTabLabel(t('discharged', 'Discharged'), dischargedCount),
+      component: <DischargedBodies isLoading={isLoading} deceasedPatients={deceasedPatients} error={error} />,
+    },
   ];
 
   return (
-    <>
-      <div className={styles.referralsList} data-testid="referralsList-list">
-        <Tabs selected={0} role="navigation">
-          <div className={styles.tabsContainer}>
-            <TabList aria-label="Content Switcher as Tabs" contained>
-              {tabPanels.map((tab, index) => (
-                <Tab key={index}>{tab.name}</Tab>
-              ))}
-            </TabList>
-          </div>
-
-          <TabPanels>
+    <div className={styles.referralsList} data-testid="referralsList-list">
+      <Tabs selected={0} role="navigation">
+        <div className={styles.tabsContainer}>
+          <TabList aria-label="Content Switcher as Tabs" contained>
             {tabPanels.map((tab, index) => (
-              <TabPanel key={index}>
-                <Layer>{tab.component}</Layer>
-              </TabPanel>
+              <Tab key={index}>{tab.name}</Tab>
             ))}
-          </TabPanels>
-        </Tabs>
-      </div>
-    </>
+          </TabList>
+        </div>
+
+        <TabPanels>
+          {tabPanels.map((tab, index) => (
+            <TabPanel key={index}>
+              <Layer>{tab.component}</Layer>
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </div>
   );
 };