@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.1

package/src/components/radiology-and-imaging/radiology-and-imaging.component.tsx

@@ -1,28 +1,12 @@
 import React from 'react';
-import { useConfig } from '@openmrs/esm-framework';
-import OrdersTabs from '../../shared/orders/OrdersTabs';
-import LabTable from './radiology-and-imaging-table.component';
-import { ExpressWorkflowConfig } from '../../config-schema';
+import ExtensionTabs from '../../shared/tabs/extension-tabs.component';
 
 type RadiologyAndImagingTabsProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
-const imagingRadiologyConceptClassUuid = '8caa332c-efe4-4025-8b18-3398328e1323';
 
-const RadiologyAndImagingTabs: React.FC<RadiologyAndImagingTabsProps> = ({ patientUuid, patient }) => {
-  const { imagingOrderTypeUuid } = useConfig<ExpressWorkflowConfig>();
-  return (
-    <OrdersTabs
-      patientUuid={patientUuid}
-      patient={patient}
-      basePath="radiology-and-imaging"
-      resultsSlotName="ewf-radiology-and-imaging-results-slot"
-      orderTypeUuid={imagingOrderTypeUuid}
-      filter={(order) => order.concept?.conceptClass?.uuid === imagingRadiologyConceptClassUuid}
-      Table={({ orders }) => <LabTable orders={orders} />}
-    />
-  );
+const RadiologyAndImagingTabs: React.FC<RadiologyAndImagingTabsProps> = ({ patientUuid }) => {
+  return <ExtensionTabs extensionSlotName="patient-imaging-tabs-slot" patientUuid={patientUuid} />;
 };
 
 export default RadiologyAndImagingTabs;

package/src/components/registration/card/HIE-card/hie-card.component.tsx

@@ -7,13 +7,21 @@ import styles from '../card.scss';
 import DependentsComponent from '../../dependants/dependants.component';
 import { LocalResponse, type HIEBundleResponse, type EligibilityResponse } from '../../type';
 import { hasDependents } from '../../helper';
-import { launchWorkspace, PatientPhoto, showModal, navigate, closeWorkspace } from '@openmrs/esm-framework';
+import {
+  launchWorkspace2,
+  launchWorkspaceGroup2,
+  PatientPhoto,
+  showModal,
+  navigate,
+  type Visit,
+} from '@openmrs/esm-framework';
 import { EnhancedPatientBannerPatientInfo } from '../../patient-banner/patient-banner.component';
 import { findExistingLocalPatient, registerOrLaunchHIEPatient } from '../../search-bar/search-bar.resource';
 import { launchOtpVerificationModal } from '../../../../shared/otp-verification';
 import { otpManager, useOtpSource, cleanupAllOTPs } from './hie-card.resource';
 import { useMultipleActiveVisits } from '../../dependants/dependants.resource';
 import { sanitizePhoneNumber } from '../../../../shared/utils';
+import { VisitFormProps } from '../../start-visit-form/visit-form-workspace/visit-form.workspace';
 
 interface HIEDisplayCardProps {
   bundle: HIEBundleResponse;
@@ -140,6 +148,25 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
     return '254700000000';
   };
 
+  const launchCheckInWorkspace = async (patient: any, patientUuid: string) => {
+    await launchWorkspaceGroup2('ewf-patient-chart', {
+      patient,
+      patientUuid,
+      visitContext: null as unknown as Visit,
+      mutateVisitContext: () => {},
+    });
+
+    launchWorkspace2<VisitFormProps, {}, {}>(
+      'custom-start-visit-workspace-form',
+      {
+        openedFrom: 'registration-check-in',
+        showPatientHeader: false,
+      },
+      {},
+      null,
+    );
+  };
+
   const handleOTPRequest = (patientUuid: string) => {
     setOtpRequestedFor((prev) => new Set(prev).add(patientUuid));
   };
@@ -170,9 +197,7 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
           if (!otpSource) {
             throw new Error('OTP source not configured. Please contact your administrator.');
           }
-
           otpManager.setOtpSource(otpSource);
-
           await otpManager.requestOTP(sanitizedPhone, patientName, otpExpiryMinutes, searchedNationalId, patientUuid);
         } catch (error) {
           throw error;
@@ -184,9 +209,7 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
           if (!otpSource) {
             throw new Error('OTP source not configured. Please contact your administrator.');
           }
-
           otpManager.setOtpSource(otpSource);
-
           const isValid = await otpManager.verifyOTP(sanitizedPhone, otp, patientUuid);
           if (!isValid) {
             throw new Error('OTP verification failed');
@@ -312,21 +335,7 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
                         <Button
                           kind="secondary"
                           size="sm"
-                          onClick={() => {
-                            const localPatientName =
-                              localPatient?.person?.personName?.display ||
-                              `${localPatient?.person?.personName?.givenName || ''} ${
-                                localPatient?.person?.personName?.middleName || ''
-                              } ${localPatient?.person?.personName?.familyName || ''}`.trim() ||
-                              patientName;
-
-                            launchWorkspace('start-visit-workspace-form', {
-                              patientUuid: localPatient.uuid,
-                              workspaceTitle: t('startVisitWorkspaceTitle', 'Start Visit for {{patientName}}', {
-                                patientName: localPatientName,
-                              }),
-                            });
-                          }}>
+                          onClick={() => launchCheckInWorkspace(localPatient, localPatient.uuid)}>
                           {t('checkIn', 'Check In')}
                         </Button>
                       )}
@@ -345,27 +354,8 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
                           kind="secondary"
                           size="sm"
                           onClick={async () => {
-                            const localPatient = await registerOrLaunchHIEPatient(patient, t);
-                            launchWorkspace('start-visit-workspace-form', {
-                              patientUuid: localPatient.uuid,
-                              workspaceTitle: t('checkInPatientWorkspaceTitle', 'Check in patient'),
-                              closeWorkspace: () => {
-                                closeWorkspace('start-visit-workspace-form', {
-                                  onWorkspaceClose: () => {
-                                    navigate({ to: `\${openmrsSpaBase}/patient/${localPatient.uuid}/chart` });
-                                  },
-                                  ignoreChanges: true,
-                                });
-                              },
-                              closeWorkspaceWithSavedChanges: () => {
-                                closeWorkspace('start-visit-workspace-form', {
-                                  onWorkspaceClose: () => {
-                                    navigate({ to: `\${openmrsSpaBase}/patient/${localPatient.uuid}/chart` });
-                                  },
-                                  ignoreChanges: true,
-                                });
-                              },
-                            });
+                            const registeredPatient = await registerOrLaunchHIEPatient(patient, t);
+                            await launchCheckInWorkspace(registeredPatient, registeredPatient.uuid);
                           }}>
                           {t('checkIn', 'Check In')}
                         </Button>
@@ -376,9 +366,7 @@ const HIEDisplayCard: React.FC<HIEDisplayCardProps> = ({
                           iconDescription={showDependents ? 'Hide dependents' : 'Show dependents'}
                           kind="tertiary"
                           size="sm"
-                          onClick={() => {
-                            toggleDependentsVisibility(patientKey);
-                          }}
+                          onClick={() => toggleDependentsVisibility(patientKey)}
                           renderIcon={showDependents ? ChevronUp : ChevronDown}>
                           {showDependents
                             ? t('hideDependents', 'Hide dependents')

package/src/components/registration/card/Local-card/local-card.component.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import styles from '../card.scss';
 import { LocalResponse, type HIEBundleResponse, type EligibilityResponse } from '../../type';
-import { launchWorkspace, PatientPhoto, showModal, closeWorkspace, navigate } from '@openmrs/esm-framework';
+import { launchWorkspace2, launchWorkspaceGroup2, PatientPhoto, showModal, type Visit } from '@openmrs/esm-framework';
 import { EnhancedPatientBannerPatientInfo } from '../../patient-banner/patient-banner.component';
 import { convertLocalPatientToFHIR, getNationalIdFromPatient, hasDependents } from '../../helper';
 import { launchOtpVerificationModal } from '../../../../shared/otp-verification';
@@ -13,6 +13,7 @@ import DependentsComponent from '../../dependants/dependants.component';
 import { useMultipleActiveVisits } from '../../dependants/dependants.resource';
 import { otpManager, useOtpSource, cleanupAllOTPs } from '../HIE-card/hie-card.resource';
 import { sanitizePhoneNumber } from '../../../../shared/utils';
+import { VisitFormProps } from '../../start-visit-form/visit-form-workspace/visit-form.workspace';
 
 interface LocalPatientCardProps {
   localSearchResults: LocalResponse;
@@ -46,7 +47,6 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
     }
   }, [otpSource]);
 
-  // Clean up OTPs when component unmounts
   useEffect(() => {
     return () => {
       cleanupAllOTPs();
@@ -114,6 +114,25 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
     return '254700000000';
   }, []);
 
+  const launchCheckInWorkspace = async (patient: any, patientUuid: string) => {
+    const groupProps = {
+      patient,
+      patientUuid,
+      visitContext: null as unknown as Visit,
+      mutateVisitContext: () => {},
+    };
+
+    launchWorkspace2<VisitFormProps, {}, {}>(
+      'custom-start-visit-workspace-form',
+      {
+        openedFrom: 'registration-check-in',
+        showPatientHeader: false,
+      },
+      {},
+      groupProps,
+    );
+  };
+
   const handleOTPRequest = useCallback((patientUuid: string) => {
     setOtpRequestedFor((prev) => new Set(prev).add(patientUuid));
   }, []);
@@ -141,9 +160,7 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
             if (!otpSource) {
               throw new Error('OTP source not configured. Please contact your administrator.');
             }
-
             otpManager.setOtpSource(otpSource);
-
             await otpManager.requestOTP(sanitizedPhone, patientName, otpExpiryMinutes, searchedNationalId, patientUuid);
           } catch (error) {
             throw error;
@@ -155,9 +172,7 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
             if (!otpSource) {
               throw new Error('OTP source not configured. Please contact your administrator.');
             }
-
             otpManager.setOtpSource(otpSource);
-
             const isValid = await otpManager.verifyOTP(sanitizedPhone, otp, patientUuid);
             if (!isValid) {
               throw new Error('OTP verification failed');
@@ -207,7 +222,6 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
         const hasActiveVisit = !!activeVisit;
 
         const hiePatientData: any = findHIEPatientData(localPatient);
-
         const patientHasDependents: boolean = hiePatientData ? hasDependents(hiePatientData) : false;
         const showDependents: boolean = showDependentsForPatient.has(patientUuid);
 
@@ -230,7 +244,6 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
                 <div className={styles.patientAvatar} role="img">
                   <PatientPhoto patientUuid={patientUuid} patientName={patientName} />
                 </div>
-
                 <EnhancedPatientBannerPatientInfo
                   patient={fhirPatient}
                   renderedFrom="local-search"
@@ -291,22 +304,7 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
                         <Button
                           kind="primary"
                           size="sm"
-                          onClick={() => {
-                            launchWorkspace('start-visit-workspace-form', {
-                              patientUuid: patientUuid,
-                              workspaceTitle: t('checkInPatientWorkspaceTitle', 'Check in patient'),
-                              closeWorkspace: () => {
-                                closeWorkspace('start-visit-workspace-form', {
-                                  ignoreChanges: true,
-                                });
-                              },
-                              closeWorkspaceWithSavedChanges: () => {
-                                closeWorkspace('start-visit-workspace-form', {
-                                  ignoreChanges: true,
-                                });
-                              },
-                            });
-                          }}>
+                          onClick={() => launchCheckInWorkspace(localPatient, patientUuid)}>
                           {t('checkIn', 'Check In')}
                         </Button>
                       )}

package/src/components/registration/checkin-form-extra/checkin-form-extra.extension.tsx

@@ -13,6 +13,7 @@ export interface CheckinFormExtraExtensionProps {
     isDHAWorkflow: boolean;
   };
   patientUuid: string;
+  visitStatus: string;
 }
 
 /**
@@ -20,9 +21,14 @@ export interface CheckinFormExtraExtensionProps {
  * It is used slotted into the patient-chart's start visit form
  */
 const CheckinFormExtraExtension: React.FC<CheckinFormExtraExtensionProps> = (props) => {
-  const { setVisitFormCallbacks, visitFormOpenedFrom, patientChartConfig } = props;
+  const { setVisitFormCallbacks, visitFormOpenedFrom, patientChartConfig, visitStatus } = props;
   if (patientChartConfig.isDHAWorkflow || visitFormOpenedFrom == 'service-queues-add-patient') {
-    return <QueueFields setOnSubmit={(onSubmit) => setVisitFormCallbacks({ onVisitCreatedOrUpdated: onSubmit })} />;
+    return (
+      <QueueFields
+        setOnSubmit={(onSubmit) => setVisitFormCallbacks({ onVisitCreatedOrUpdated: onSubmit })}
+        visitStatus={visitStatus}
+      />
+    );
   } else {
     return <></>;
   }

package/src/components/registration/checkin-form-extra/queue-fields.component.tsx

@@ -1,12 +1,4 @@
-import {
-  InlineNotification,
-  RadioButton,
-  RadioButtonGroup,
-  RadioButtonSkeleton,
-  Select,
-  SelectItem,
-  SelectSkeleton,
-} from '@carbon/react';
+import { InlineNotification, RadioButton, RadioButtonGroup, Select, SelectItem, SelectSkeleton } from '@carbon/react';
 import { ResponsiveWrapper, showSnackbar, useConfig, useSession, type Visit } from '@openmrs/esm-framework';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,21 +8,23 @@ import { ExpressWorkflowConfig } from '../../../config-schema';
 
 export interface QueueFieldsProps {
   setOnSubmit(onSubmit: (visit: Visit) => Promise<any>);
+  visitStatus: string;
 }
 
-const PATIENT_CATEGORIES = [
-  { id: 'triage', name: 'Triage' },
-  { id: 'walk-in', name: 'Walk-in' },
-];
-
 /**
  * This component contains form fields for starting a patient's queue entry.
  */
-const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
+const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit, visitStatus }) => {
   const { t } = useTranslation();
+  const patientCategory = useMemo(
+    () => [
+      { id: 'triage', name: t('triage', 'Triage') },
+      { id: 'walk-in', name: t('walkIn', 'Walk-in') },
+    ],
+    [t],
+  );
   const { queueRooms, isLoading: isLoadingQueueRooms } = useQueueRooms();
   const { sessionLocation } = useSession();
-
   const {
     visitQueueNumberAttributeUuid,
     triageServiceConceptUuid,
@@ -84,7 +78,7 @@ const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
 
   const onSubmit = useCallback(
     (visit: Visit) => {
-      if (selectedQueueRoom) {
+      if (selectedQueueRoom && visitStatus !== 'past') {
         const selectedRoom = filteredQueueRooms.find((room) => room.uuid === selectedQueueRoom);
         const queueUuid = selectedRoom?.queue?.uuid;
 
@@ -140,6 +134,7 @@ const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
       sessionLocation.uuid,
       filteredQueueRooms,
       t,
+      visitStatus,
     ],
   );
 
@@ -157,6 +152,10 @@ const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
     }
   }, [filteredQueueRooms, selectedQueueRoom]);
 
+  if (visitStatus === 'past') {
+    return null;
+  }
+
   return (
     <div>
       <section className={styles.section}>
@@ -169,7 +168,7 @@ const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
             orientation="vertical"
             valueSelected={selectedCategory}
             onChange={(value) => setSelectedCategory(String(value))}>
-            {PATIENT_CATEGORIES.map((category) => (
+            {patientCategory.map((category) => (
               <RadioButton
                 key={category.id}
                 className={styles.radioButtonOption}
@@ -218,4 +217,4 @@ const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
   );
 };
 
-export default QueueFields;
+export default React.memo(QueueFields);

package/src/components/registration/dependants/dependants.component.tsx

@@ -2,16 +2,17 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { DataTable, Table, TableHead, TableBody, TableRow, TableCell, TableHeader, Button, Tag } from '@carbon/react';
 import { TwoFactorAuthentication } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { launchWorkspace, showSnackbar, showModal, navigate, Visit } from '@openmrs/esm-framework';
+import { launchWorkspace2, launchWorkspaceGroup2, showSnackbar, showModal, type Visit } from '@openmrs/esm-framework';
 import capitalize from 'lodash/capitalize';
 import styles from './dependants.scss';
 import { maskName } from '../helper';
 import { findExistingLocalPatient, registerOrLaunchDependent } from '../search-bar/search-bar.resource';
 import { getDependentsFromContacts, useMultipleActiveVisits } from './dependants.resource';
-import { DependentWithPhone, HIEBundleResponse, HIEPatient, LocalPatient } from '../type';
+import { DependentWithPhone, HIEPatient } from '../type';
 import { otpManager, useOtpSource, cleanupAllOTPs } from '../card/HIE-card/hie-card.resource';
 import { launchOtpVerificationModal } from '../../../shared/otp-verification';
 import { sanitizePhoneNumber } from '../../../shared/utils';
+import { VisitFormProps } from '../start-visit-form/visit-form-workspace/visit-form.workspace';
 
 type DependentProps = {
   patient: HIEPatient;
@@ -28,12 +29,11 @@ const DependentsComponent: React.FC<DependentProps> = ({
   const [submittingStates, setSubmittingStates] = useState<Record<string, boolean>>({});
   const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({});
   const [localPatientCache, setLocalPatientCache] = useState<Map<string, any>>(new Map());
-
   const [verifiedSpouses, setVerifiedSpouses] = useState<Set<string>>(new Set());
   const [otpRequestedForSpouse, setOtpRequestedForSpouse] = useState<Set<string>>(new Set());
   const [activePhoneNumbers, setActivePhoneNumbers] = useState<Map<string, string>>(new Map());
 
-  const { otpSource, isLoading: isLoadingOtpSource, error: otpSourceError } = useOtpSource();
+  const { otpSource, isLoading: isLoadingOtpSource } = useOtpSource();
 
   useEffect(() => {
     if (otpSource) {
@@ -74,7 +74,7 @@ const DependentsComponent: React.FC<DependentProps> = ({
   }, []);
 
   const getDependentPhoneNumber = useCallback(
-    (dependent: HIEPatient | DependentWithPhone): string | undefined => {
+    (dependent: HIEPatient | DependentWithPhone): string => {
       if ('contact' in dependent && dependent.contact && Array.isArray(dependent.contact)) {
         for (const contact of dependent.contact) {
           if (contact.telecom && Array.isArray(contact.telecom)) {
@@ -82,7 +82,6 @@ const DependentsComponent: React.FC<DependentProps> = ({
               (telecom) =>
                 telecom.system === 'phone' && telecom.value && telecom.value !== 'N/A' && telecom.value.trim() !== '',
             );
-
             if (phoneTelecom) {
               return sanitizePhoneNumber(phoneTelecom.value);
             }
@@ -99,7 +98,6 @@ const DependentsComponent: React.FC<DependentProps> = ({
             attr.value.trim() !== '' &&
             attr.value.trim().length > 0,
         );
-
         if (phoneAttribute?.value) {
           return sanitizePhoneNumber(phoneAttribute.value);
         }
@@ -152,16 +150,12 @@ const DependentsComponent: React.FC<DependentProps> = ({
       return {
         onRequestOtp: async (phoneNumber: string): Promise<void> => {
           const sanitizedPhone = sanitizePhoneNumber(phoneNumber);
-
           try {
             if (!otpSource) {
               throw new Error('OTP source not configured. Please contact your administrator.');
             }
-
             otpManager.setOtpSource(otpSource);
-
             setActivePhoneNumbers((prev) => new Map(prev.set(dependentId, sanitizedPhone)));
-
             await otpManager.requestOTP(sanitizedPhone, dependentName, otpExpiryMinutes, null, dependentId);
           } catch (error) {
             throw error;
@@ -172,12 +166,9 @@ const DependentsComponent: React.FC<DependentProps> = ({
             if (!otpSource) {
               throw new Error('OTP source not configured. Please contact your administrator.');
             }
-
             otpManager.setOtpSource(otpSource);
-
             const activePhone = activePhoneNumbers.get(dependentId) || initialPhone;
             const sanitizedPhone = sanitizePhoneNumber(activePhone);
-
             const isValid = await otpManager.verifyOTP(sanitizedPhone, otp, dependentId);
             if (!isValid) {
               throw new Error('OTP verification failed');
@@ -211,20 +202,29 @@ const DependentsComponent: React.FC<DependentProps> = ({
       }
 
       if (localPatient) {
-        const localPatientName =
-          localPatient.person?.personName?.display ||
-          `${localPatient.person?.personName?.givenName || ''} ${localPatient.person?.personName?.middleName || ''} ${
-            localPatient.person?.personName?.familyName || ''
-          }`.trim() ||
-          dependent.name;
-
-        launchWorkspace('start-visit-workspace-form', {
+        await launchWorkspaceGroup2('ewf-patient-chart', {
+          patient: localPatient,
           patientUuid: localPatient.uuid,
-          workspaceTitle: t('checkInPatientWorkspaceTitle', 'Check in patient'),
+          visitContext: null as unknown as Visit,
+          mutateVisitContext: () => {},
         });
+
+        launchWorkspace2<VisitFormProps, {}, {}>(
+          'custom-start-visit-workspace-form',
+          {
+            openedFrom: 'dependants-check-in',
+            showPatientHeader: false,
+          },
+          {},
+          {
+            patient: localPatient,
+            patientUuid: localPatient.uuid,
+            visitContext: null as unknown as Visit,
+            mutateVisitContext: () => {},
+          },
+        );
       } else {
         setSubmittingStates((prev) => ({ ...prev, [dependent.id]: true }));
-
         try {
           await registerOrLaunchDependent(dependent, t);
         } catch (error) {
@@ -246,34 +246,13 @@ const DependentsComponent: React.FC<DependentProps> = ({
 
   const headers = useMemo(
     () => [
-      {
-        key: 'name',
-        header: t('name', 'Name'),
-      },
-      {
-        key: 'relationship',
-        header: t('relationship', 'Relationship'),
-      },
-      {
-        key: 'gender',
-        header: t('gender', 'Gender'),
-      },
-      {
-        key: 'birthDate',
-        header: t('birthDate', 'Birth Date'),
-      },
-      {
-        key: 'identifiers',
-        header: t('identifiers', 'Identifiers'),
-      },
-      {
-        key: 'status',
-        header: t('status', 'Status'),
-      },
-      {
-        key: 'actions',
-        header: t('actions', 'Actions'),
-      },
+      { key: 'name', header: t('name', 'Name') },
+      { key: 'relationship', header: t('relationship', 'Relationship') },
+      { key: 'gender', header: t('gender', 'Gender') },
+      { key: 'birthDate', header: t('birthDate', 'Birth Date') },
+      { key: 'identifiers', header: t('identifiers', 'Identifiers') },
+      { key: 'status', header: t('status', 'Status') },
+      { key: 'actions', header: t('actions', 'Actions') },
     ],
     [t],
   );
@@ -475,18 +454,16 @@ const DependentsComponent: React.FC<DependentProps> = ({
           <Table {...getTableProps()}>
             <TableHead>
               <TableRow>
-                {headers.map((header, index) => (
-                  <TableHeader key={index} {...getHeaderProps({ header })}>
-                    {header.header}
-                  </TableHeader>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
                 ))}
               </TableRow>
             </TableHead>
             <TableBody>
-              {rows.map((row, index) => (
-                <TableRow key={index} {...getRowProps({ row })}>
-                  {row.cells.map((cell, cellIndex) => (
-                    <TableCell key={cellIndex}>{cell.value}</TableCell>
+              {rows.map((row) => (
+                <TableRow {...getRowProps({ row })}>
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id}>{cell.value}</TableCell>
                   ))}
                 </TableRow>
               ))}