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

package/src/helpers/expression-helper.ts

@@ -1,3 +1,5 @@
+import { EnhancedPatient, MortuaryPatient, Patient } from '../types';
+
 /**
  * Converts a string to uppercase.
  * @param {string} str - The string to convert.
@@ -9,3 +11,123 @@ export const toUpperCase = (str) => {
   } // Handle empty or undefined input
   return str.toUpperCase();
 };
+
+/**
+ * Transforms a MortuaryPatient object into an EnhancedPatient.
+ * @param {MortuaryPatient} mortuaryPatient - The MortuaryPatient object to transform.
+ * @return {EnhancedPatient} - The transformed EnhancedPatient.
+ */
+export const transformMortuaryPatient = (mortuaryPatient: MortuaryPatient): EnhancedPatient => ({
+  uuid: mortuaryPatient.person?.person?.uuid || mortuaryPatient.person?.uuid,
+  person: {
+    display: mortuaryPatient.person?.person?.display || mortuaryPatient.person?.display,
+    gender: mortuaryPatient.person?.person?.gender || mortuaryPatient.person?.gender,
+    age: mortuaryPatient.person?.person?.age || mortuaryPatient.person?.age,
+    deathDate: mortuaryPatient.person?.person?.deathDate || mortuaryPatient.person?.deathDate,
+    causeOfDeath: mortuaryPatient.person?.person?.causeOfDeath || mortuaryPatient.person?.causeOfDeath,
+  },
+  originalMortuaryPatient: mortuaryPatient,
+});
+
+/**
+ * Transforms a Patient object into an EnhancedPatient with bed information.
+ * @param {Patient} patient - The Patient object to transform.
+ * @param {Object} bedInfo - The bed information associated with the patient.
+ * @param {string} bedInfo.bedNumber - The bed number assigned to the patient.
+ * @param {number} bedInfo.bedId - The unique identifier for the bed.
+ * @param {string} [bedInfo.bedType] - The type of bed assigned, if available.
+ * @return {EnhancedPatient} - The transformed EnhancedPatient with bed details.
+ */
+
+export const transformAdmittedPatient = (
+  patient: Patient,
+  bedInfo: { bedNumber: string; bedId: number; bedType?: string },
+): EnhancedPatient => ({
+  uuid: patient.uuid,
+  person: {
+    display: patient.person?.display,
+    gender: patient.person?.gender,
+    age: patient.person?.age,
+    deathDate: patient.person?.deathDate,
+    causeOfDeath: patient.person?.causeOfDeath,
+  },
+  bedInfo,
+  originalPatient: patient,
+});
+
+/**
+ * Transforms a Patient object into an EnhancedPatient with a discharged status and optional encounter date.
+ * @param {Patient} patient - The Patient object to transform.
+ * @param {string} [encounterDate] - The date of the encounter for the patient's discharge.
+ * @return {EnhancedPatient} - The transformed EnhancedPatient with a discharged status.
+ */
+export const transformDischargedPatient = (patient: Patient, encounterDate?: string): EnhancedPatient => ({
+  uuid: patient.uuid,
+  person: {
+    display: patient.person?.display,
+    gender: patient.person?.gender,
+    age: patient.person?.age,
+    deathDate: patient.person?.deathDate,
+    causeOfDeath: patient.person?.causeOfDeath,
+  },
+  isDischarged: true,
+  encounterDate,
+  originalPatient: patient,
+});
+
+/**
+ * Retrieves the original MortuaryPatient or Patient object from an EnhancedPatient,
+ * if present. If neither is available, returns null.
+ * @param {EnhancedPatient} enhancedPatient - The EnhancedPatient object to extract the original patient from.
+ * @return {MortuaryPatient | Patient | null} - The original MortuaryPatient or Patient if available, or null.
+ */
+export const getOriginalPatient = (enhancedPatient: EnhancedPatient): MortuaryPatient | Patient | null => {
+  if (enhancedPatient.originalMortuaryPatient) {
+    return enhancedPatient.originalMortuaryPatient;
+  }
+  if (enhancedPatient.originalPatient) {
+    return enhancedPatient.originalPatient;
+  }
+  return null;
+};
+
+/**
+ * Extracts the original Patient object from an EnhancedPatient, if available.
+ * @param {EnhancedPatient} enhancedPatient - The EnhancedPatient object to extract the original patient from.
+ * @return {Patient | null} - The original Patient if available, or null.
+ * If the EnhancedPatient has an originalPatient property, that will be returned directly.
+ * If the EnhancedPatient has an originalMortuaryPatient property with a patient property, that will be returned.
+ * If neither of the above conditions are met, a partial Patient object will be created from the EnhancedPatient data.
+ * Note that this partial Patient object will not have the full set of properties a real Patient object would have.
+ */
+export const extractPatientFromEnhanced = (enhancedPatient: EnhancedPatient): Patient | null => {
+  if (enhancedPatient.originalPatient) {
+    return enhancedPatient.originalPatient;
+  }
+
+  if (enhancedPatient.originalMortuaryPatient?.patient) {
+    return enhancedPatient.originalMortuaryPatient.patient;
+  }
+  return {
+    uuid: enhancedPatient.uuid,
+    display: enhancedPatient.person.display,
+    identifiers: [],
+    person: {
+      uuid: enhancedPatient.uuid,
+      display: enhancedPatient.person.display,
+      gender: enhancedPatient.person.gender,
+      age: enhancedPatient.person.age,
+      birthdate: '',
+      birthdateEstimated: false,
+      dead: true,
+      deathDate: enhancedPatient.person.deathDate,
+      causeOfDeath: enhancedPatient.person.causeOfDeath || { uuid: '', display: '' },
+      preferredAddress: { uuid: '', display: '' },
+      attributes: [],
+      voided: false,
+      birthtime: null,
+      deathdateEstimated: false,
+      identifiers: [],
+    },
+  } as Patient;
+};

package/src/home/home.component.tsx

@@ -6,10 +6,10 @@ import Summary from '../summary/summary.component';
 import CustomContentSwitcher from '../switcher/content-switcher.component';
 import { useAwaitingPatients, useAwaitingQueuePatients } from './home.resource';
 import { useLocation, useMortuaryAdmissionLocation } from '../bed-layout/bed-layout.resource';
+import { DataTableSkeleton } from '@carbon/react';
 
 const HomeViewComponent: React.FC = () => {
   const { t } = useTranslation();
-
   const [selectedLocation, setSelectedLocation] = React.useState<string>('');
 
   const { locations, isLoading: isLoadingLocation, error: locationError } = useLocation();
@@ -34,6 +34,24 @@ const HomeViewComponent: React.FC = () => {
     mutateAll,
   } = useAwaitingQueuePatients(admissionLocation);
 
+  const isInitialDataLoading = React.useMemo(() => {
+    return (
+      isLoadingLocation ||
+      isLoadingAdmission ||
+      isLoadingAwaitingQueuePatients ||
+      isLoadingDischarge ||
+      (!selectedLocation && locationItems?.length === 0)
+    );
+  }, [isLoadingLocation, isLoadingAdmission, isLoadingAwaitingQueuePatients, isLoadingDischarge, selectedLocation]);
+
+  const [hasInitialDataLoaded, setHasInitialDataLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!isInitialDataLoading && selectedLocation) {
+      setHasInitialDataLoaded(true);
+    }
+  }, [isInitialDataLoading, selectedLocation]);
+
   const mutateAllData = React.useCallback(() => {
     mutateAdmissionLocation();
     mutateAll();
@@ -48,7 +66,7 @@ const HomeViewComponent: React.FC = () => {
   }, [locations]);
 
   React.useEffect(() => {
-    if (locationItems.length === 1 && !selectedLocation) {
+    if (locationItems?.length === 1 && !selectedLocation) {
       setSelectedLocation(locationItems[0].id);
     }
   }, [locationItems, selectedLocation]);
@@ -58,6 +76,7 @@ const HomeViewComponent: React.FC = () => {
   const handleLocationChange = React.useCallback((data: { selectedItem: { id: string; text: string } }) => {
     if (data.selectedItem) {
       setSelectedLocation(data.selectedItem.id);
+      setHasInitialDataLoaded(false);
     }
   }, []);
 
@@ -68,11 +87,11 @@ const HomeViewComponent: React.FC = () => {
         awaitingQueueCount={trulyAwaitingPatients.length}
         admittedCount={admittedPatients.length}
         dischargedCount={dischargedPatientsCount}
-        isLoading={isLoadingAll}
+        isLoading={isInitialDataLoading && !hasInitialDataLoaded}
       />
       <CustomContentSwitcher
         awaitingQueueDeceasedPatients={trulyAwaitingPatients}
-        isLoading={isLoadingAwaitingQueuePatients}
+        isLoading={isInitialDataLoading && !hasInitialDataLoaded}
         locationItems={locationItems}
         selectedLocation={selectedLocation}
         admissionLocation={admissionLocation}

package/src/index.ts

@@ -8,7 +8,6 @@ import {
 import { configSchema } from './config-schema';
 import { createLeftPanelLink } from './left-panel/morgue-left-panel-link.component';
 import FormEntryWorkspace from './forms/form-entry-workspace/form-entry-workspace.workspace';
-import DisposeForm from './forms/dispose-deceased-person-workspace/dispose-deceased-person.workspace';
 import PrintPostMortemOverflowMenuItem from './extension/overflow-menu-item-postmortem/print-postmorterm-report.component';
 const moduleName = '@kenyaemr/esm-morgue-app';
 
@@ -57,7 +56,6 @@ export const dischargeBodyForm = getAsyncLifecycle(
   options,
 );
 export const mortuaryFormEntry = getSyncLifecycle(FormEntryWorkspace, options);
-export const disposeDeceasedPersonForm = getSyncLifecycle(DisposeForm, options);
 export const mortuaryChartView = getAsyncLifecycle(() => import('./view-details/main/main.component'), options);
 export const printConfirmationModal = getAsyncLifecycle(
   () => import('./modals/mortuary-gate-pass/print-preview-confirmation.modal'),

package/src/metrics/metrics-card.component.tsx

@@ -3,9 +3,9 @@ import { Layer, Tile } from '@carbon/react';
 import styles from './metrics-card.scss';
 
 interface MetricsCardProps {
-  label: string;
+  label: string | React.ReactNode;
   value: number | string | React.ReactNode;
-  headerLabel: string;
+  headerLabel: string | React.ReactNode;
   children?: React.ReactNode;
 }
 

package/src/routes.json

@@ -87,12 +87,6 @@
       "width": "extra-wide",
       "canMaximize": true,
       "canHide": true
-    },
-    {
-      "name": "dispose-deceased-person-form",
-      "component": "disposeDeceasedPersonForm",
-      "title": "Dispose Deceased Person",
-      "type": "other-form"
     }
   ],
     "modals": [

package/src/schemas/index.ts

@@ -1,66 +1,258 @@
 import { z } from 'zod';
+import { ConfigObject } from '../config-schema';
 
-export const deceasedPatientAdmitSchema = z.object({
-  dateOfAdmission: z
-    .date({ coerce: true })
-    .refine((date) => !!date, 'Date of admission is required')
-    .refine((date) => date <= new Date(), 'Date of admission cannot be in the future'),
-  timeOfDeath: z.string().nonempty('Time of death is required'),
-  period: z
-    .string()
-    .nonempty('AM/PM is required')
-    .regex(/^(AM|PM)$/i, 'Invalid period'),
-  tagNumber: z.string().nonempty('Tag number is required'),
-  obNumber: z.string().optional(),
-  policeName: z.string().optional(),
-  policeIDNo: z.string().optional(),
-  dischargeArea: z.string().optional(),
-  visitType: z.string().uuid('invalid visit type'),
-  availableCompartment: z
-    .union([z.number(), z.string()])
-    .refine((val) => {
-      if (typeof val === 'string') {
-        return val.length > 0 && !isNaN(Number(val)) && Number(val) > 0;
+const getConceptCodes = (config: ConfigObject) => ({
+  hospitalDeathCodes: [
+    config.locationOfDeathTypesList.find((item) => item.label === 'InPatient')?.concept,
+    config.locationOfDeathTypesList.find((item) => item.label === 'Outpatient')?.concept,
+    config.locationOfDeathTypesList.find((item) => item.label === 'Dead on arrival')?.concept,
+  ].filter(Boolean) as string[],
+  homeDeathCode: config.locationOfDeathTypesList.find((item) => item.label === 'Home')?.concept,
+  policeCaseCode: config.locationOfDeathTypesList.find((item) => item.label === 'Unknown (Police case)')?.concept,
+  yesConfirmationCode: config.deathConfirmationTypes.find((type) => type.label === 'Yes')?.concept,
+  noConfirmationCode: config.deathConfirmationTypes.find((type) => type.label === 'No')?.concept,
+  bodyEmbalmmentCode: config.deadBodyPreservationTypeUuid.find((type) => type.label === 'Body embalment')?.concept,
+});
+
+export const createDeceasedPatientAdmitSchema = (config?: ConfigObject) => {
+  const baseSchema = z.object({
+    dateOfAdmission: z
+      .date({ coerce: true })
+      .refine((date) => !!date, 'Date of admission is required')
+      .refine((date) => date <= new Date(), 'Date of admission cannot be in the future'),
+    placeOfDeath: z.string().min(1, 'Place of death is required'),
+    tagNumber: z.string().min(1, 'Tag number is required'),
+    visitType: z.string().uuid('Invalid visit type'),
+    availableCompartment: z
+      .union([z.number(), z.string()])
+      .refine((val) => {
+        if (typeof val === 'string') {
+          return val.length > 0 && !isNaN(Number(val)) && Number(val) > 0;
+        }
+        return typeof val === 'number' && !isNaN(val) && val > 0;
+      }, 'Please select a valid compartment')
+      .transform((val) => (typeof val === 'string' ? Number(val) : val)),
+    paymentMethod: z.string().uuid('Invalid payment method'),
+    services: z.array(z.string().uuid('Invalid service')).min(1, 'Must select at least one service'),
+
+    deathConfirmed: z.string().min(1, 'Death confirmation is required'),
+    autopsyPermission: z.string().min(1, 'Autopsy permission is required'),
+
+    dateOfDeath: z.date({ coerce: true }).optional(),
+    timeOfDeath: z.string().optional(),
+    period: z.string().optional(),
+    deathNotificationNumber: z.string().optional(),
+    attendingClinician: z.string().optional(),
+    doctorsRemarks: z.string().optional(),
+    causeOfDeath: z.string().optional(),
+    deadBodyPreservation: z.string().optional(),
+    bodyEmbalmentType: z.string().optional(),
+    obNumber: z.string().optional(),
+    policeName: z.string().optional(),
+    policeIDNo: z.string().optional(),
+    insuranceScheme: z.string().optional(),
+    policyNumber: z.string().optional(),
+  });
+
+  if (!config) {
+    return baseSchema;
+  }
+
+  return baseSchema.superRefine((data, ctx) => {
+    const conceptCodes = getConceptCodes(config);
+
+    const isHospitalDeath = conceptCodes.hospitalDeathCodes.includes(data.placeOfDeath);
+    const isHomeDeath = data.placeOfDeath === conceptCodes.homeDeathCode;
+    const isPoliceCaseDeath = data.placeOfDeath === conceptCodes.policeCaseCode;
+
+    if (data.visitType !== config.morgueVisitTypeUuid) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Invalid visit type for mortuary',
+        path: ['visitType'],
+      });
+    }
+
+    const validConfirmationCodes = [conceptCodes.yesConfirmationCode, conceptCodes.noConfirmationCode].filter(Boolean);
+    if (validConfirmationCodes.length > 0 && !validConfirmationCodes.includes(data.deathConfirmed)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Invalid death confirmation value',
+        path: ['deathConfirmed'],
+      });
+    }
+
+    if (validConfirmationCodes.length > 0 && !validConfirmationCodes.includes(data.autopsyPermission)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Invalid autopsy permission value',
+        path: ['autopsyPermission'],
+      });
+    }
+
+    if (!isHomeDeath && data.placeOfDeath !== '') {
+      if (!data.dateOfDeath) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Date of death is required for non-home deaths',
+          path: ['dateOfDeath'],
+        });
+      }
+      if (!data.timeOfDeath || data.timeOfDeath.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Time of death is required for non-home deaths',
+          path: ['timeOfDeath'],
+        });
+      }
+      if (!data.period || data.period.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'AM/PM is required for non-home deaths',
+          path: ['period'],
+        });
+      }
+    }
+
+    if (isHospitalDeath) {
+      if (!data.attendingClinician || data.attendingClinician.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Attending clinician is required for hospital deaths',
+          path: ['attendingClinician'],
+        });
+      }
+      if (!data.doctorsRemarks || data.doctorsRemarks.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Doctor's remarks are required for hospital deaths",
+          path: ['doctorsRemarks'],
+        });
+      }
+    }
+
+    if (isPoliceCaseDeath) {
+      if (!data.policeName || data.policeName.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Police name is required for police cases',
+          path: ['policeName'],
+        });
+      }
+      if (!data.policeIDNo || data.policeIDNo.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Police ID number is required for police cases',
+          path: ['policeIDNo'],
+        });
+      }
+      if (!data.obNumber || data.obNumber.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'OB number is required for police cases',
+          path: ['obNumber'],
+        });
       }
-      return typeof val === 'number' && !isNaN(val) && val > 0;
-    }, 'Please select a valid compartment')
-    .transform((val) => (typeof val === 'string' ? Number(val) : val)),
-  services: z.array(z.string().uuid('invalid service')).nonempty('Must select one service'),
-  paymentMethod: z.string().uuid('invalid payment method'),
-  insuranceScheme: z.string().optional(),
-  policyNumber: z.string().optional(),
+    }
+
+    if (data.deadBodyPreservation) {
+      const validPreservationTypes = config.deadBodyPreservationTypeUuid.map((type) => type.concept);
+      if (!validPreservationTypes.includes(data.deadBodyPreservation)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Invalid body preservation type',
+          path: ['deadBodyPreservation'],
+        });
+      }
+
+      if (data.deadBodyPreservation === conceptCodes.bodyEmbalmmentCode) {
+        if (!data.bodyEmbalmentType || data.bodyEmbalmentType.trim() === '') {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'Body embalment type is required when body embalment is selected',
+            path: ['bodyEmbalmentType'],
+          });
+        } else {
+          const validEmbalmmentTypes = config.bodyEmbalmmentTypesUuid.map((type) => type.concept);
+          if (!validEmbalmmentTypes.includes(data.bodyEmbalmentType)) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: 'Invalid body embalment type',
+              path: ['bodyEmbalmentType'],
+            });
+          }
+        }
+      }
+    }
+
+    if (data.paymentMethod === config.insurancepaymentModeUuid) {
+      if (!data.insuranceScheme || data.insuranceScheme.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Insurance scheme is required when insurance payment method is selected',
+          path: ['insuranceScheme'],
+        });
+      }
+      if (!data.policyNumber || data.policyNumber.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Policy number is required when insurance is selected',
+          path: ['policyNumber'],
+        });
+      }
+    }
+  });
+};
+
+export const deceasedPatientAdmitSchema = createDeceasedPatientAdmitSchema();
+
+const baseDischargeSchema = z.object({
+  burialPermitNumber: z.string().min(1, 'Burial Permit Number is required'),
+  nextOfKinNames: z.string().min(1, 'Next of kin names is required'),
+  relationshipType: z.string().min(1, 'Next of kin relationship is required'),
+  nextOfKinNationalId: z.string().min(1, 'Next of kin national ID is required'),
+  nextOfKinContact: z
+    .string()
+    .regex(/^\d{10}$/, 'Phone number must be exactly 10 digits')
+    .min(1, 'Next of kin phone number is required'),
 });
-export const dischargeSchema = z.object({
+
+const dischargeSchema = baseDischargeSchema.extend({
+  dischargeType: z.literal('discharge'),
   dateOfDischarge: z.date({ coerce: true }).refine((date) => !!date, 'Date of discharge is required'),
-  timeOfDischarge: z.string().nonempty('Time of discharge is required'),
+  timeOfDischarge: z.string().min(1, 'Time of discharge is required'),
   period: z
     .string()
-    .nonempty('AM/PM is required')
+    .min(1, 'AM/PM is required')
     .regex(/^(AM|PM)$/i, 'Invalid period'),
-  burialPermitNumber: z.string().nonempty('Burial Permit Number is required'),
-  nextOfKinNames: z.string().nonempty('Next of kin names is required'),
-  relationshipType: z.string().nonempty('Next of kin relationship is required'),
-  nextOfKinAddress: z.string().nonempty('Next of kin address is required'),
-  nextOfKinContact: z
-    .string()
-    .regex(/^\d{10}$/, 'Phone number must be exactly 10 digits')
-    .nonempty('Next of kin phone number is required'),
+  dischargeArea: z.string().min(1, 'Discharge Area is required'),
 });
 
-export const disposeSchema = z.object({
+const transferSchema = baseDischargeSchema.extend({
+  dischargeType: z.literal('transfer'),
   dateOfDischarge: z.date({ coerce: true }).refine((date) => !!date, 'Date of discharge is required'),
-  timeOfDischarge: z.string().nonempty('Time of discharge is required'),
+  timeOfDischarge: z.string().min(1, 'Time of discharge is required'),
   period: z
     .string()
-    .nonempty('AM/PM is required')
+    .min(1, 'AM/PM is required')
     .regex(/^(AM|PM)$/i, 'Invalid period'),
-  serialNumber: z.string().nonempty('Serial Number is required'),
-  courtOrderCaseNumber: z.string().nonempty('Court Order Case Number is required'),
-  nextOfKinNames: z.string().nonempty('Next of kin names is required'),
-  relationshipType: z.string().nonempty('Next of kin relationship is required'),
-  nextOfKinAddress: z.string().nonempty('Next of kin address is required'),
-  nextOfKinContact: z
-    .string()
-    .regex(/^\d{10}$/, 'Phone number must be exactly 10 digits')
-    .nonempty('Next of kin phone number is required'),
+  dischargeArea: z.string().min(1, 'Discharge Area is required'),
+  receivingArea: z.string().min(1, 'Receiving mortuary is required'),
+  reasonForTransfer: z.string().min(1, 'Reason for transfer is required'),
+});
+
+const disposeSchema = baseDischargeSchema.extend({
+  dischargeType: z.literal('dispose'),
+  dischargeArea: z.string().min(1, 'Discharge Area is required'),
+  serialNumber: z.string().min(1, 'Serial Number is required'),
+  courtOrderCaseNumber: z.string().min(1, 'Court Order Case Number is required'),
 });
+
+export const dischargeFormSchema = z.discriminatedUnion('dischargeType', [
+  dischargeSchema,
+  transferSchema,
+  disposeSchema,
+]);
+
+export type DischargeFormValues = z.infer<typeof dischargeFormSchema>;
+export type DischargeType = 'discharge' | 'transfer' | 'dispose';

package/src/summary/summary.component.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { DataTableSkeleton, ContentSwitcher, Switch, InlineLoading } from '@carbon/react';
+import {
+  DataTableSkeleton,
+  ContentSwitcher,
+  Switch,
+  InlineLoading,
+  SkeletonText,
+  RadioButtonSkeleton,
+} from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { ConfigurableLink, ErrorState } from '@openmrs/esm-framework';
@@ -20,19 +27,19 @@ const Summary: React.FC<SummaryProps> = ({ awaitingQueueCount, admittedCount, di
     <>
       <div className={styles.cardContainer}>
         <MetricsCard
-          headerLabel={t('awaitingAdmissionHeader', 'Awaiting Admission')}
-          label={t('totalCount', 'total')}
+          headerLabel={isLoading ? <RadioButtonSkeleton /> : t('awaitingAdmissionHeader', 'Awaiting Admission')}
+          label={isLoading ? <SkeletonText /> : t('totalCount', 'total')}
           value={isLoading ? <InlineLoading /> : awaitingQueueCount.toString()}
         />
         <MetricsCard
-          headerLabel={t('admittedHeader', 'Admitted')}
-          label={t('totalCount', 'total')}
-          value={admittedCount.toString()}
+          headerLabel={isLoading ? <RadioButtonSkeleton /> : t('admittedHeader', 'Admitted')}
+          label={isLoading ? <SkeletonText /> : t('totalCount', 'total')}
+          value={isLoading ? <InlineLoading /> : admittedCount.toString()}
         />
         <MetricsCard
-          headerLabel={t('dischargedHeader', 'Discharged')}
-          label={t('totalCount', 'total')}
-          value={dischargedCount.toString()}
+          headerLabel={isLoading ? <RadioButtonSkeleton /> : t('dischargedHeader', 'Discharged')}
+          label={isLoading ? <SkeletonText /> : t('totalCount', 'total')}
+          value={isLoading ? <InlineLoading /> : dischargedCount.toString()}
         />
       </div>
     </>