@kenyaemr/esm-morgue-app 5.4.1-pre.1848 → 5.4.1-pre.1850

package/src/hook/useMorgue.resource.ts

@@ -29,88 +29,6 @@ import useSWRImmutable from 'swr/immutable';
 import { makeUrlUrl } from '../utils/utils';
 import type { Observable } from 'rxjs';
 
-const getMorguePatientStatus = async (
-  patientUuid: string,
-  morgueVisitTypeUuid: string,
-  morgueDischargeEncounter: string,
-): Promise<'discharged' | 'admitted' | 'awaiting'> => {
-  const customRepresentation = 'custom:(visitType:(uuid),startDatetime,stopDatetime,encounters:(encounterType:(uuid)))';
-  const url = `${restBaseUrl}/visit?v=${customRepresentation}&patient=${patientUuid}&limit=1`;
-  const response = await openmrsFetch<{
-    results: Array<{
-      visitType: { uuid: string };
-      startDatetime: string;
-      stopDatetime: any;
-      encounters: Array<{
-        encounterType: {
-          uuid: string;
-        };
-      }>;
-    }>;
-  }>(url);
-  const visit = response?.data?.results[0];
-  const hasDischargeEncounter = visit?.encounters?.some(
-    (encounter) => encounter.encounterType.uuid === morgueDischargeEncounter,
-  );
-  const isMorgueVisit = visit?.visitType?.uuid === morgueVisitTypeUuid;
-  const isVisitActive = !(typeof visit?.stopDatetime === 'string');
-
-  if (!isMorgueVisit) {
-    return 'awaiting';
-  }
-  if (hasDischargeEncounter) {
-    return 'discharged';
-  }
-  return 'admitted';
-};
-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 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);
-
-  useEffect(() => {
-    if (paginatedData?.length) {
-      (async () => {
-        try {
-          setIsLoadingStatus(true);
-          const status = await Promise.all(
-            paginatedData.map((data) =>
-              getMorguePatientStatus(data.person?.uuid, morgueVisitTypeUuid, morgueDischargeEncounterTypeUuid),
-            ),
-          );
-
-          setDeceasedPatient(
-            paginatedData.map((patient, index) => ({
-              ...patient,
-              status: status[index],
-            })),
-          );
-        } catch (error) {
-          setStatusError(error);
-        } finally {
-          setIsLoadingStatus(false);
-        }
-      })();
-    }
-  }, [morgueVisitTypeUuid, morgueDischargeEncounterTypeUuid, paginatedData]);
-
-  return {
-    data: deceasedPatient,
-    error: paginatedError ?? statusError,
-    isLoading: isPaginatedLoading || isLoadingStatus,
-  };
-};
-
 export const useVisitType = () => {
   const customRepresentation = 'custom:(uuid,display,name)';
   const url = `${restBaseUrl}/visittype?v=${customRepresentation}`;
@@ -137,7 +55,6 @@ export const usePaymentModes = (excludeWaiver: boolean = true) => {
     error,
   };
 };
-
 export const useBillableItems = () => {
   const url = `${restBaseUrl}/cashier/billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(uuid,display),servicePrices:(uuid,name,price,paymentMode))`;
   const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
@@ -152,53 +69,19 @@ export const useBillableItems = () => {
     setSearchTerm,
   };
 };
-
-export const useMorgueCompartment = () => {
-  const { morgueCompartmentTagUuid } = useConfig<ConfigObject>();
-  const customRepresentation = 'custom:(uuid,display,name)';
-  const url = `${restBaseUrl}/location?v=${customRepresentation}&tag=${morgueCompartmentTagUuid}`;
-  const { data, isLoading, error } = useSWR<FetchResponse<{ results: Array<Location> }>>(url, openmrsFetch);
-
-  return {
-    morgueCompartments: data?.data?.results ?? [],
-    isLoading,
-    error,
-  };
-};
-
+// // Used
 export const createPatientBill = (payload) => {
   const postUrl = `${restBaseUrl}/cashier/bill`;
   return openmrsFetch(postUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload });
 };
-
+// Used
 export const useCashPoint = () => {
   const url = `/ws/rest/v1/cashier/cashPoint`;
   const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
 
   return { isLoading, error, cashPoints: data?.data?.results ?? [] };
 };
-
-export const startVisitWithEncounter = (payload) => {
-  const postUrl = `${restBaseUrl}/encounter`;
-  return openmrsFetch(postUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload });
-};
-export const useActiveMorgueVisit = (patientUuid: string) => {
-  const customRepresentation = 'custom:(visitType:(uuid),startDatetime,stopDatetime,encounters:(encounterType:(uuid)))';
-  const url = `${restBaseUrl}/visit?v=${customRepresentation}&includeInactive=false&patient=${patientUuid}&limit=1`;
-  const { data, error, isLoading } = useSWR<FetchResponse<{ results: Array<Visit> }>>(url, openmrsFetch);
-  const activeDeceased = data?.data?.results;
-
-  return { data: activeDeceased, error, isLoading };
-};
-const usePerson = (uuid: string) => {
-  const customRepresentation = `custom:(uuid,display,gender,birthdate,dead,age,deathDate,causeOfDeath:(uuid,display))`;
-  const url = `${restBaseUrl}/person/${uuid}?v=${customRepresentation}`;
-  const { isLoading, error, data } = useSWR<FetchResponse<Patient['person']>>(url, openmrsFetch);
-  const person = data?.data;
-  return { isLoading, error, person };
-};
-
-export default usePerson;
+// // Used
 
 export function useVisitQueueEntry(patientUuid, visitUuid): UseVisitQueueEntries {
   const apiUrl = `${restBaseUrl}/visit-queue-entry?v=full&patient=${patientUuid}`;
@@ -237,7 +120,15 @@ export function useVisitQueueEntry(patientUuid, visitUuid): UseVisitQueueEntries
     mutate,
   };
 }
+export const usePerson = (uuid: string) => {
+  const customRepresentation = `custom:(uuid,display,gender,birthdate,dead,age,deathDate,causeOfDeath:(uuid,display))`;
+  const url = `${restBaseUrl}/person/${uuid}?v=${customRepresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<Patient['person']>>(url, openmrsFetch);
+  const person = data?.data;
+  return { isLoading, error, person };
+};
 
+// Used
 export function removeQueuedPatient(
   queueUuid: string,
   queueEntryUuid: string,

package/src/hook/useMortuaryAdmissionLocation.ts

@@ -0,0 +1,64 @@
+import {
+  type FetchResponse,
+  openmrsFetch,
+  restBaseUrl,
+  useFeatureFlag,
+  type Location,
+  useSession,
+} from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import useSWRImmutable from 'swr/immutable';
+import { useParams } from 'react-router-dom';
+import { type MortuaryLocationFetchResponse, type FHIREncounter } from '../types';
+
+export function useLocation(locationUuid: string, rep: string = 'custom:(display,uuid)') {
+  return useSWRImmutable<FetchResponse<Location>>(
+    locationUuid ? `${restBaseUrl}/location/${locationUuid}?v=${rep}` : null,
+    openmrsFetch,
+  );
+}
+
+export function useMortuaryLocation(): {
+  location: Location | undefined;
+  isLoadingLocation: boolean;
+  errorFetchingLocation: Error | undefined;
+  invalidLocation: boolean;
+} {
+  const { locationUuid: locationUuidFromUrl } = useParams();
+  const { sessionLocation } = useSession();
+
+  const {
+    data: locationResponse,
+    isLoading: isLoadingLocation,
+    error: errorFetchingLocation,
+  } = useLocation(locationUuidFromUrl ?? null);
+
+  const invalidLocation = !!locationUuidFromUrl && !!errorFetchingLocation;
+
+  return {
+    location: locationUuidFromUrl ? locationResponse?.data : sessionLocation,
+    isLoadingLocation,
+    errorFetchingLocation,
+    invalidLocation,
+  };
+}
+
+const requestRep =
+  'custom:(ward,totalBeds,occupiedBeds,bedLayouts:(rowNumber,columnNumber,bedNumber,bedId,bedUuid,status,location,patients:(person:full,identifiers,uuid)))';
+
+export function useAdmissionLocation(rep: string = requestRep) {
+  const { location } = useMortuaryLocation();
+  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+
+  const apiUrl = location?.uuid ? `${restBaseUrl}/admissionLocation/${location.uuid}?v=${rep}` : null;
+
+  const { data, ...rest } = useSWR<FetchResponse<MortuaryLocationFetchResponse>, Error>(
+    isBedManagementModuleInstalled ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    admissionLocation: data?.data,
+    ...rest,
+  };
+}

package/src/hook/usePersonAttributes.ts

@@ -0,0 +1,65 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { Patient, PatientInfo } from '../types';
+import useSWR from 'swr';
+
+export const usePersonAttributes = (personUuid: string) => {
+  const { data, error, isLoading } = useSWR<FetchResponse<{ results: Patient['person']['attributes'] }>>(
+    personUuid ? `${restBaseUrl}/person/${personUuid}/attribute` : null,
+    openmrsFetch,
+  );
+
+  const updatePersonAttributes = async (
+    payload: { attributeType: string; value: string },
+    personUuid: string,
+    attributeUuid: string,
+  ) => {
+    const url = `${restBaseUrl}/person/${personUuid}/attribute/${attributeUuid}`;
+    return openmrsFetch(url, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  };
+
+  const createPersonAttribute = async (payload: { attributeType: string; value: string }, personUuid: string) => {
+    const url = `${restBaseUrl}/person/${personUuid}/attribute`;
+    return openmrsFetch(url, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  };
+
+  const createOrUpdatePersonAttribute = async (
+    personUuid: string,
+    payload: { attributeType: string; value: string },
+    person: PatientInfo,
+  ) => {
+    const { attributeType, value } = payload;
+
+    const existingAttribute = person.attributes.find((attr) => attr.uuid === attributeType);
+
+    if (existingAttribute) {
+      return updatePersonAttributes(
+        { attributeType: existingAttribute.uuid, value },
+        personUuid,
+        existingAttribute.uuid,
+      );
+    } else {
+      return createPersonAttribute({ attributeType, value }, personUuid);
+    }
+  };
+
+  return {
+    personAttributes: data?.data?.results ?? [],
+    error,
+    isLoading,
+    updatePersonAttributes,
+    createPersonAttribute,
+    createOrUpdatePersonAttribute,
+  };
+};

package/src/index.ts

@@ -38,3 +38,7 @@ export const patientAdditionalInfoForm = getAsyncLifecycle(
   options,
 );
 export const dischargeBodyForm = getAsyncLifecycle(() => import('./workspaces/discharge-body.workspace'), options);
+export const admitBodyForm = getAsyncLifecycle(() => import('./workspaces/admit-body.workspace'), options);
+export const swapForm = getAsyncLifecycle(() => import('./workspaces/swap-unit.workspace'), options);
+export const actionBarButtons = getAsyncLifecycle(() => import('./extension/actionButton.component'), options);
+export const bannerInfo = getAsyncLifecycle(() => import('./extension/deceasedInfoBanner.component'), options);

package/src/routes.json

@@ -16,14 +16,19 @@
       }
     },
     {
-      "component": "peerCalendarDashboardLink",
-      "name": "peer-calendar-dashboard-link",
-      "slot": "homepage-dashboard-slot",
+      "name": "action-buttons",
+      "component": "actionBarButtons",
+      "slot": "mortuary-action-buttons-slot",
+      "meta": {
+        "fullWidth": false
+      }
+    },
+    {
+      "name": "deceased-banner-info",
+      "component": "bannerInfo",
+      "slot": "deceased-banner-info-slot",
       "meta": {
-        "name": "peer-calendar",
-        "title": "Peer Calendar",
-        "slot": "peer-calendar-dashboard-slot",
-        "path": "peer-management"
+        "fullWidth": false
       }
     },
     {
@@ -44,6 +49,18 @@
       "component": "dischargeBodyForm",
       "title": "discharge body form",
       "type": "other-form"
+    },
+    {
+      "name": "admit-body-form",
+      "component": "admitBodyForm",
+      "title": "Admission form",
+      "type": "other-form"
+    },
+    {
+      "name": "swap-unit-form",
+      "component": "swapForm",
+      "title": "Swap form",
+      "type": "other-form"
     }
   ],
   "pages": [

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

@@ -3,50 +3,46 @@ import { useTranslation } from 'react-i18next';
 import DeceasedFilter from '../header/admitted-queue-header.component';
 import styles from './admitted-queue.scss';
 import CompartmentView from '../card/compartment-view.compartment';
-import { useDeceasedPatient } from '../hook/useMorgue.resource';
+import { useAdmissionLocation } from '../hook/useMortuaryAdmissionLocation';
 import { InlineLoading } from '@carbon/react';
 import { CardHeader, ErrorState } from '@openmrs/esm-patient-common-lib';
 import EmptyMorgueAdmission from '../empty-state/empty-morgue-admission.component';
+import useEmrConfiguration from '../hook/useAdmitPatient';
+import { useDischargedPatient } from '../hook/useDischargedPatient';
 
 export const AdmittedQueue: React.FC = () => {
-  const { data: deceasedPatients, error, isLoading } = useDeceasedPatient();
   const { t } = useTranslation();
   const [searchQuery, setSearchQuery] = useState('');
-
+  const { admissionLocation, isLoading, error } = useAdmissionLocation();
   const handleSearchChange = (query: string) => {
     setSearchQuery(query);
   };
 
-  const admittedPatients = deceasedPatients?.filter((patient) => patient.status === 'admitted') || [];
   if (isLoading) {
-    return (
-      <InlineLoading
-        status="active"
-        iconDescription="Loading"
-        description={t('pullingCompartment', 'Pulling compartments data.....')}
-      />
-    );
+    return <InlineLoading description={t('loading', 'Loading...')} />;
   }
 
   if (error) {
-    return <ErrorState error={error} headerTitle={t('allocation', 'Allocation')} />;
+    return <ErrorState headerTitle={t('errorLoadingData', 'Error loading data')} error={error} />;
   }
 
-  if (admittedPatients?.length === 0) {
-    return (
-      <EmptyMorgueAdmission
-        title={t('allocations', 'Allocation')}
-        subTitle={t('noAdmittedBodies', 'There are no admitted bodies')}
-      />
-    );
-  }
+  const filteredBedLayouts = admissionLocation?.bedLayouts?.filter((bed) => {
+    return bed.patients.some((patient) => patient?.person?.display?.toLowerCase().includes(searchQuery.toLowerCase()));
+  });
 
   return (
     <div className={styles.layoutWrapper}>
       <CardHeader title={t('allocation', 'Allocation')} children={''} />
       <DeceasedFilter onSearchChange={handleSearchChange} />
       <div className={styles.patientCardContainer}>
-        <CompartmentView patientVisit={{ results: admittedPatients }} searchQuery={searchQuery} />
+        {filteredBedLayouts?.length === 0 ? (
+          <EmptyMorgueAdmission
+            title={t('allocations', 'Allocation')}
+            subTitle={t('noAdmittedBodies', 'There are no admitted bodies matching your search')}
+          />
+        ) : (
+          <CompartmentView />
+        )}
       </div>
     </div>
   );

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

@@ -1,23 +1,26 @@
+import { DataTableSkeleton } from '@carbon/react';
+import { ConfigurableLink, ErrorState, formatDate, useConfig } from '@openmrs/esm-framework';
 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';
+import styles from './generic-table.scss';
+import GenericTable from './generic-table.component';
+import { ConfigObject } from '../config-schema';
+import usePatients from '../hook/useDischargedPatient';
 
 interface DischargedProps {
+  dischargedPatientUuids: string[];
   isLoading: boolean;
-  deceasedPatients: any;
   error: any;
 }
 
-export const DischargedBodies: React.FC<DischargedProps> = ({ isLoading, deceasedPatients, error }) => {
+export const DischargedBodies: React.FC<DischargedProps> = ({ isLoading, error, dischargedPatientUuids }) => {
   const { t } = useTranslation();
   const dischargedInLine = t('dischargeBodies', 'Discharged bodies');
   const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart/deceased-panel';
+  const { patients, isLoading: isLoadingPatients, error: patientsError } = usePatients(dischargedPatientUuids);
+
+  const { nextOfKinAddressUuid, nextOfKinNameUuid, nextOfKinPhoneUuid, nextOfKinRelationshipUuid } =
+    useConfig<ConfigObject>();
 
   const genericTableHeader = [
     { header: 'Patient Name', key: 'name' },
@@ -26,7 +29,6 @@ export const DischargedBodies: React.FC<DischargedProps> = ({ isLoading, decease
     { header: 'Age', key: 'age' },
     { header: 'Date of Death', key: 'deathDate' },
     { header: 'Cause of Death', key: 'causeOfDeath' },
-    { header: 'Status', key: 'status' },
   ];
 
   if (isLoading) {
@@ -49,33 +51,37 @@ export const DischargedBodies: React.FC<DischargedProps> = ({ isLoading, decease
     return <ErrorState error={error} headerTitle={t('dischargeBodies', 'Discharged bodies')} />;
   }
 
-  const dischargedDeceased = deceasedPatients?.filter((patient) => patient?.status === 'discharged') || [];
+  const getAttributeValue = (patient, uuid) => {
+    return patient?.person?.attributes?.find((attr) => attr?.attributeType?.uuid === uuid)?.value || '--';
+  };
+
+  const rows = patients?.map((patient) => {
+    const openmrsID = patient?.identifiers?.find((id) => id.display.startsWith('OpenMRS ID'))?.display.split(' = ')[1];
 
-  const rows = dischargedDeceased.map((patient, index) => {
-    const openMrsId =
-      patient?.patient?.identifiers
-        ?.find((id) => id.display.startsWith('OpenMRS ID'))
-        ?.display.split('=')[1]
-        ?.trim() || '--';
+    const nextOfKin = {
+      name: getAttributeValue(patient, nextOfKinNameUuid),
+      phone: getAttributeValue(patient, nextOfKinPhoneUuid),
+      address: getAttributeValue(patient, nextOfKinAddressUuid),
+      relationship: getAttributeValue(patient, nextOfKinRelationshipUuid),
+    };
 
     return {
-      id: `${patient?.patient?.uuid}`,
+      id: patient?.uuid,
       name: (
         <ConfigurableLink
           style={{ textDecoration: 'none', maxWidth: '50%' }}
           to={patientChartUrl}
-          templateParams={{ patientUuid: patient?.person?.uuid }}>
-          {patient?.person?.person?.display?.toUpperCase()}
+          templateParams={{ patientUuid: patient?.uuid }}>
+          {patient?.person?.display?.toUpperCase()}
         </ConfigurableLink>
       ),
-      gender: patient?.person?.person?.gender || '--',
-      age: patient?.person?.person?.age || '--',
-      identifier: openMrsId,
-      deathDate: formatDateTime(patient?.person?.person?.deathDate) || '--',
-      causeOfDeath: patient?.person?.person?.causeOfDeath?.display || '--',
-      status: <Tag type="magenta">{patient?.status || '--'}</Tag>,
+      gender: patient?.person?.gender || '--',
+      age: patient?.person?.age || '--',
+      identifier: openmrsID || '--',
+      deathDate: formatDate(new Date(patient?.person?.deathDate)) || '--',
+      causeOfDeath: patient?.person?.causeOfDeath?.display || '--',
+      nextOfKin: nextOfKin, // Ensure nextOfKin is included in the row
     };
   });
-
   return <GenericTable rows={rows} headers={genericTableHeader} title={dischargedInLine} />;
 };

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

@@ -10,12 +10,17 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  TableExpandRow,
+  TableExpandedRow,
   Search,
+  TableExpandHeader,
 } from '@carbon/react';
 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-morgue-admission.component';
+import { Patient } from '../types';
+import NextOfKinDetails from '../component/next-of-kin-details/nextOfKinDetails.component';
 
 interface GenericTableProps {
   rows: any[];
@@ -31,7 +36,7 @@ const GenericTable: React.FC<GenericTableProps> = ({ rows, headers, actionColumn
 
   const [searchTerm, setSearchTerm] = useState('');
 
-  const filteredRows = rows.filter((row) =>
+  const filteredRows = rows?.filter((row) =>
     headers.some((header) => row[header.key]?.toString().toLowerCase().includes(searchTerm.toLowerCase())),
   );
 
@@ -53,12 +58,12 @@ const GenericTable: React.FC<GenericTableProps> = ({ rows, headers, actionColumn
         />
       </div>
 
-      {rows.length === 0 ? (
+      {rows?.length === 0 ? (
         <EmptyDeceasedSearch
           title={t('noWaitingList', 'Waiting List')}
           subTitle={t('noDeceasedPersons', 'There are no deceased persons on the waiting list')}
         />
-      ) : searchTerm && filteredRows.length === 0 ? (
+      ) : searchTerm && filteredRows?.length === 0 ? (
         <EmptyDeceasedSearch
           title={t('noResultFound', 'Sorry, no results found')}
           subTitle={t('searchForADeceased', "Try to search again using the deceased patient's unique ID number")}
@@ -66,18 +71,25 @@ const GenericTable: React.FC<GenericTableProps> = ({ rows, headers, actionColumn
       ) : (
         <div className={styles.genericTable}>
           <DataTable rows={paginatedData} headers={headers} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
-            {({ rows, headers, getHeaderProps, getTableProps }) => (
-              <TableContainer className={styles.tableContainer}>
+            {({
+              rows: tableRows,
+              headers,
+              getHeaderProps,
+              getTableProps,
+              getRowProps,
+              getTableContainerProps,
+              getExpandHeaderProps,
+            }) => (
+              <TableContainer {...getTableContainerProps()} className={styles.tableContainer}>
                 <Table {...getTableProps()}>
                   <TableHead>
                     <TableRow>
-                      {headers.map((header) => (
+                      <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                      {headers?.map((header, i) => (
                         <TableHeader
-                          key={header.key}
-                          className={classNames(styles.productiveHeading01, styles.text02)}
+                          key={i}
                           {...getHeaderProps({
                             header,
-                            isSortable: header.isSortable,
                           })}>
                           {header.header}
                         </TableHeader>
@@ -86,22 +98,35 @@ const GenericTable: React.FC<GenericTableProps> = ({ rows, headers, actionColumn
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {rows.map((row) => (
-                      <TableRow key={row.id}>
-                        {row.cells.map((cell) => (
-                          <TableCell key={cell.id}>{cell.value}</TableCell>
-                        ))}
-                        {actionColumn && <TableCell>{actionColumn(row)}</TableCell>}
-                      </TableRow>
-                    ))}
+                    {tableRows?.map((row, i) => {
+                      const originalRow = rows.find((r) => r.id === row.id);
+
+                      return (
+                        <React.Fragment key={row.id}>
+                          <TableExpandRow {...getRowProps({ row })}>
+                            {row.cells.map((cell) => (
+                              <TableCell key={cell.id}>{cell.value}</TableCell>
+                            ))}
+                            {actionColumn && <TableCell>{actionColumn(row)}</TableCell>}
+                          </TableExpandRow>
+                          {row.isExpanded && (
+                            <TableExpandedRow colSpan={headers.length + 1}>
+                              <div className={styles.expandedRowContent}>
+                                {originalRow && <NextOfKinDetails nextOfKin={originalRow.nextOfKin} />}
+                              </div>
+                            </TableExpandedRow>
+                          )}
+                        </React.Fragment>
+                      );
+                    })}
                   </TableBody>
                 </Table>
               </TableContainer>
             )}
           </DataTable>
           <PatientChartPagination
-            currentItems={paginatedData.length}
-            totalItems={filteredRows.length}
+            currentItems={paginatedData?.length}
+            totalItems={filteredRows?.length}
             onPageNumberChange={({ page }) => goTo(page)}
             pageNumber={currentPage}
             pageSize={pageSize}