@openmrs/esm-patient-vitals-app 9.2.3-pre.7186 → 9.2.3-pre.7191

package/src/biometrics/biometrics-overview.test.tsx

@@ -96,8 +96,6 @@ describe('BiometricsOverview', () => {
     expect(screen.getByRole('tab', { name: /chart view/i })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: /see all/i })).toBeInTheDocument();
 
-    const initialRowElements = screen.getAllByRole('row');
-
     const expectedColumnHeaders = [/date/, /weight/, /height/, /bmi/, /muac/];
     expectedColumnHeaders.map((header) =>
       expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument(),
@@ -114,20 +112,43 @@ describe('BiometricsOverview', () => {
 
     const sortRowsButton = screen.getByRole('button', { name: /date and time/i });
 
+    const expectedDescendingOrder = [
+      '12 — Aug — 2021, 12:00 AM',
+      '18 — Jun — 2021, 12:00 AM',
+      '10 — Jun — 2021, 12:00 AM',
+      '26 — May — 2021, 12:00 AM',
+      '10 — May — 2021, 12:00 AM',
+    ];
+    const expectedAscendingOrder = [
+      '08 — Dec — 2020, 12:00 AM',
+      '08 — Dec — 2020, 12:00 AM',
+      '08 — Dec — 2020, 12:00 AM',
+      '08 — Dec — 2020, 12:00 AM',
+      '09 — Dec — 2020, 12:00 AM',
+    ];
+
+    const getRowDates = () =>
+      screen
+        .getAllByRole('row')
+        .slice(1) // Exclude header row
+        .map((row) => row.textContent?.match(/\d{1,2} — \w{3} — \d{4}, \d{1,2}:\d{2} (AM|PM)/)?.[0] || '');
+
+    // Initial state should be descending
+    expect(getRowDates()).toEqual(expectedDescendingOrder);
+
     // Sorting in descending order
     // Since the date order is already in descending order, the rows should be the same
     await user.click(sortRowsButton);
     // Sorting in ascending order
     await user.click(sortRowsButton);
-
-    expect(screen.getAllByRole('row')).not.toEqual(initialRowElements);
+    expect(getRowDates()).toEqual(expectedAscendingOrder);
 
     // Sorting order = NONE, hence it is still in the ascending order
     await user.click(sortRowsButton);
     // Sorting in descending order
     await user.click(sortRowsButton);
 
-    expect(screen.getAllByRole('row')).toEqual(initialRowElements);
+    expect(getRowDates()).toEqual(expectedDescendingOrder);
   });
 
   it('toggles between rendering either a tabular view or a chart view', async () => {

package/src/biometrics/paginated-biometrics.component.tsx

@@ -12,6 +12,7 @@ import {
 import { useLayoutType, usePagination } from '@openmrs/esm-framework';
 import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import type { BiometricsTableHeader, BiometricsTableRow } from './types';
+import { VitalsAndBiometricsActionMenu } from '../components/action-menu/vitals-biometrics-action-menu.component';
 import styles from './paginated-biometrics.scss';
 
 interface PaginatedBiometricsProps {
@@ -94,6 +95,7 @@ const PaginatedBiometrics: React.FC<PaginatedBiometricsProps> = ({
                       {header.header?.content ?? header.header}
                     </TableHeader>
                   ))}
+                  <TableHeader />
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -102,6 +104,9 @@ const PaginatedBiometrics: React.FC<PaginatedBiometricsProps> = ({
                     {row.cells.map((cell) => (
                       <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                     ))}
+                    <TableCell className="cds--table-column-menu" id="actions">
+                      <VitalsAndBiometricsActionMenu encounterUuid={row.id} />
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>

package/src/common/data.resource.ts

@@ -6,18 +6,20 @@ import {
   restBaseUrl,
   openmrsFetch,
   useConfig,
+  type OpenmrsResource,
 } from '@openmrs/esm-framework';
 import useSWRImmutable from 'swr/immutable';
 import useSWRInfinite from 'swr/infinite';
 import { type ConfigObject } from '../config-schema';
 import { assessValue, calculateBodyMassIndex, getReferenceRangesForConcept, interpretBloodPressure } from './helpers';
 import type { FHIRSearchBundleResponse, MappedVitals, PatientVitalsAndBiometrics, VitalsResponse } from './types';
-import { type VitalsBiometricsFormData } from '../vitals-biometrics-form/vitals-biometrics-form.workspace';
 
 const pageSize = 100;
 
 /** We use this as the first value to the SWR key to be able to invalidate all relevant cached entries */
 const swrKeyNeedle = Symbol('vitalsAndBiometrics');
+const encounterRepresentation =
+  'custom:(uuid,encounterDatetime,encounterType:(uuid,display),obs:(uuid,concept:(uuid,display),value,interpretation))';
 
 type VitalsAndBiometricsMode = 'vitals' | 'biometrics' | 'both';
 
@@ -48,6 +50,14 @@ interface VitalsConceptMetadataResponse {
   setMembers: Array<ConceptMetadata>;
 }
 
+export type VitalsAndBiometricsFieldValuesMap = Map<string, { value: number | string; obs: OpenmrsResource }>;
+
+interface PartialEncounter extends OpenmrsResource {
+  encounterType: OpenmrsResource;
+  encounterDatetime: string;
+  obs: Array<OpenmrsResource>;
+}
+
 function getInterpretationKey(header: string) {
   // Reason for `Render` string is to match the column header in the table
   return `${header}RenderInterpretation`;
@@ -105,6 +115,36 @@ export const withUnit = (label: string, unit: string | null | undefined) => {
 let vitalsHooksCounter = 0;
 const vitalsHooksMutates = new Map<number, ReturnType<typeof useSWRInfinite<VitalsFetchResponse>>['mutate']>();
 
+/**
+ * Hook to get concepts for vitals, biometrics or both
+ */
+export function useVitalsOrBiometricsConcepts(mode: VitalsAndBiometricsMode) {
+  const { concepts } = useConfig<ConfigObject>();
+
+  const conceptUuids = useMemo(() => {
+    const biometricsKeys = ['heightUuid', 'midUpperArmCircumferenceUuid', 'weightUuid'];
+
+    if (!concepts) {
+      return [];
+    }
+
+    return Object.entries(concepts)
+      .filter(([key, conceptUuid]) => {
+        if (!conceptUuid) {
+          console.warn(`Missing UUID for concept ${key}`);
+          return false;
+        }
+        if (mode === 'both') {
+          return true;
+        }
+        return mode === 'vitals' ? !biometricsKeys.includes(key) : biometricsKeys.includes(key);
+      })
+      .map(([_, conceptUuid]) => conceptUuid);
+  }, [concepts, mode]);
+
+  return conceptUuids;
+}
+
 /**
  * Hook to get the vitals and / or biometrics for a patient
  *
@@ -115,30 +155,14 @@ const vitalsHooksMutates = new Map<number, ReturnType<typeof useSWRInfinite<Vita
 export function useVitalsAndBiometrics(patientUuid: string, mode: VitalsAndBiometricsMode = 'vitals') {
   const { conceptMetadata } = useVitalsConceptMetadata();
   const { concepts } = useConfig<ConfigObject>();
-  const biometricsConcepts = useMemo(
-    () => [concepts.heightUuid, concepts.midUpperArmCircumferenceUuid, concepts.weightUuid],
-    [concepts.heightUuid, concepts.midUpperArmCircumferenceUuid, concepts.weightUuid],
-  );
-
-  const conceptUuids = useMemo(
-    () =>
-      (mode === 'both'
-        ? Object.values(concepts)
-        : Object.values(concepts).filter(
-            (uuid) =>
-              (mode === 'vitals' && !biometricsConcepts.includes(uuid)) ||
-              (mode === 'biometrics' && biometricsConcepts.includes(uuid)),
-          )
-      ).join(','),
-    [concepts, biometricsConcepts, mode],
-  );
+  const conceptUuids = useVitalsOrBiometricsConcepts(mode);
 
   const getPage = useCallback(
     (page: number, prevPageData: FHIRSearchBundleResponse): VitalsAndBiometricsSwrKey => ({
       swrKeyNeedle,
       mode,
       patientUuid,
-      conceptUuids,
+      conceptUuids: conceptUuids.join(','),
       page,
       prevPageData,
     }),
@@ -203,17 +227,20 @@ export function useVitalsAndBiometrics(patientUuid: string, mode: VitalsAndBiome
       .filter(Boolean)
       .map(vitalsProperties(conceptMetadata))
       ?.reduce((vitalsHashTable, vitalSign) => {
-        const recordedDate = new Date(new Date(vitalSign.recordedDate)).toISOString();
-
-        if (vitalsHashTable.has(recordedDate) && vitalsHashTable.get(recordedDate)) {
-          vitalsHashTable.set(recordedDate, {
-            ...vitalsHashTable.get(recordedDate),
+        const encounterId = vitalSign.encounterId;
+        if (vitalsHashTable.has(encounterId) && vitalsHashTable.get(encounterId)) {
+          vitalsHashTable.set(encounterId, {
+            ...vitalsHashTable.get(encounterId),
             [getVitalsMapKey(vitalSign.code)]: vitalSign.value,
             [getInterpretationKey(getVitalsMapKey(vitalSign.code))]: vitalSign.interpretation,
           });
         } else {
           vitalSign.value &&
-            vitalsHashTable.set(recordedDate, {
+            vitalsHashTable.set(encounterId, {
+              date:
+                typeof vitalSign.recordedDate === 'string'
+                  ? vitalSign.recordedDate
+                  : vitalSign.recordedDate.toDateString(),
               [getVitalsMapKey(vitalSign.code)]: vitalSign.value,
               [getInterpretationKey(getVitalsMapKey(vitalSign.code))]: vitalSign.interpretation,
             });
@@ -222,10 +249,10 @@ export function useVitalsAndBiometrics(patientUuid: string, mode: VitalsAndBiome
         return vitalsHashTable;
       }, new Map<string, Partial<PatientVitalsAndBiometrics>>());
 
-    return Array.from(vitalsHashTable ?? []).map(([date, vitalSigns], index) => {
+    return Array.from(vitalsHashTable ?? []).map(([encounterId, vitalSigns]) => {
       const result = {
-        id: index.toString(),
-        date: date,
+        id: encounterId,
+        date: vitalSigns.date,
         ...vitalSigns,
       };
 
@@ -262,6 +289,54 @@ export function useVitalsAndBiometrics(patientUuid: string, mode: VitalsAndBiome
   };
 }
 
+/**
+ * Hook to get the vitals and biometrics for a patient associated with a specific encounter
+ */
+export function useEncounterVitalsAndBiometrics(encounterUuid: string) {
+  const { concepts } = useConfig<ConfigObject>();
+  const fieldNameSuffix = 'Uuid';
+  const url = encounterUuid ? `${restBaseUrl}/encounter/${encounterUuid}?v=${encounterRepresentation}` : null;
+
+  const { data, isLoading, error, mutate } = useSWRImmutable<FetchResponse<PartialEncounter>, Error>(url, openmrsFetch);
+
+  const vitalsAndBiometrics: VitalsAndBiometricsFieldValuesMap = useMemo(() => {
+    if (!isLoading && data && concepts) {
+      return data.data.obs.reduce((vitalsAndBiometrics, obs) => {
+        let fieldName = Object.entries(concepts).find(([, value]) => value === obs.concept.uuid)?.[0];
+
+        if (fieldName) {
+          fieldName = fieldName.endsWith(fieldNameSuffix) ? fieldName.replace(fieldNameSuffix, '') : fieldName;
+          vitalsAndBiometrics.set(fieldName, {
+            value: obs.value,
+            obs,
+          });
+        }
+        return vitalsAndBiometrics;
+      }, new Map<string, { value: string; obs: OpenmrsResource }>());
+    }
+    return null;
+  }, [isLoading, data, concepts]);
+
+  const getRefinedInitialValues = useCallback(() => {
+    const initialValues: Record<string, string | number> = {};
+    if (vitalsAndBiometrics) {
+      vitalsAndBiometrics.forEach((value, key) => {
+        initialValues[key] = value.value;
+      });
+    }
+    return initialValues;
+  }, [vitalsAndBiometrics]);
+
+  return {
+    isLoading,
+    vitalsAndBiometrics,
+    encounter: data?.data,
+    error,
+    mutate,
+    getRefinedInitialValues,
+  };
+}
+
 /**
  * Fetcher for the useVitalsAndBiometricsHook
  * @internal
@@ -299,71 +374,49 @@ function vitalsProperties(conceptMetadata: Array<ConceptMetadata> | undefined) {
     ),
     recordedDate: resource?.effectiveDateTime,
     value: resource?.valueQuantity?.value,
+    encounterId: extractEncounterUuid(resource.encounter),
   });
 }
 
-export function saveVitalsAndBiometrics(
-  encounterTypeUuid: string,
-  formUuid: string,
-  concepts: ConfigObject['concepts'],
+export function createOrUpdateVitalsAndBiometrics(
   patientUuid: string,
-  vitals: VitalsBiometricsFormData,
-  abortController: AbortController,
+  encounterTypeUuid: string,
+  encounterUuid: string | null,
   location: string,
+  vitalsAndBiometricsObs: Array<OpenmrsResource>,
+  abortController: AbortController,
 ) {
-  return openmrsFetch<unknown>(`${restBaseUrl}/encounter`, {
+  const url = encounterUuid ? `${restBaseUrl}/encounter/${encounterUuid}` : `${restBaseUrl}/encounter`;
+
+  const encounter = {
+    patient: patientUuid,
+    obs: vitalsAndBiometricsObs,
+  };
+  if (!encounterUuid) {
+    encounter['location'] = location;
+    encounter['encounterType'] = encounterTypeUuid;
+  }
+  return openmrsFetch(url, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     signal: abortController.signal,
-    body: {
-      patient: patientUuid,
-      location: location,
-      encounterType: encounterTypeUuid,
-      form: formUuid,
-      obs: createObsObject(vitals, concepts),
-    },
+    body: encounter,
   });
 }
 
-export function updateVitalsAndBiometrics(
-  concepts: ConfigObject['concepts'],
-  patientUuid: string,
-  vitals: VitalsBiometricsFormData,
-  encounterDatetime: Date,
-  abortController: AbortController,
-  encounterUuid: string,
-  location: string,
-) {
+export function deleteEncounter(encounterUuid: string) {
   return openmrsFetch(`${restBaseUrl}/encounter/${encounterUuid}`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    signal: abortController.signal,
-    body: {
-      encounterDatetime: encounterDatetime,
-      location: location,
-      patient: patientUuid,
-      obs: createObsObject(vitals, concepts),
-      orders: [],
-    },
+    method: 'DELETE',
   });
 }
 
-function createObsObject(
-  vitals: VitalsBiometricsFormData,
-  concepts: ConfigObject['concepts'],
-): Array<{ concept: string; value: string | number }> {
-  return Object.entries(vitals)
-    .filter(([_, result]) => Boolean(result))
-    .map(([name, result]) => {
-      return {
-        concept: concepts[name + 'Uuid'],
-        value: result,
-      };
-    });
+function extractEncounterUuid(encounter: FHIRResource['resource']['encounter']): string {
+  if (!encounter || !encounter.reference) {
+    return '';
+  }
+  return encounter.reference.split('/')[1];
 }
 
 /**

package/src/common/helpers.ts

@@ -1,4 +1,7 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
 import { type ConceptMetadata } from '../common';
+import { type VitalsBiometricsFormData } from '../vitals-biometrics-form/schema';
+import { type VitalsAndBiometricsFieldValuesMap } from './data.resource';
 import type { ObsReferenceRanges, ObservationInterpretation } from './types';
 
 export function calculateBodyMassIndex(weight: number, height: number) {
@@ -98,3 +101,50 @@ export function getReferenceRangesForConcept(
 
   return conceptMetadata?.find((metadata) => metadata.uuid === conceptUuid);
 }
+
+export function prepareObsForSubmission(
+  formData: VitalsBiometricsFormData,
+  dirtyFields: Record<string, boolean>,
+  formContext: 'creating' | 'editing',
+  initialFieldValuesMap: VitalsAndBiometricsFieldValuesMap,
+  fieldToConceptMap: Record<string, string>,
+): {
+  toBeVoided: Array<OpenmrsResource>;
+  newObs: Array<OpenmrsResource>;
+} {
+  return Object.entries(formData).reduce(
+    (obsForSubmission, [field, newValue]) => {
+      if (!fieldToConceptMap[`${field}Uuid`]) {
+        console.error(`Missing concept mapping for field: ${field}`);
+        return obsForSubmission;
+      }
+      if (formContext === 'editing' && initialFieldValuesMap.has(field) && dirtyFields[field]) {
+        // void old obs
+        const { obs } = initialFieldValuesMap.get(field);
+        obsForSubmission.toBeVoided.push({
+          uuid: obs.uuid,
+          voided: true,
+        });
+
+        if (newValue) {
+          obsForSubmission.newObs.push({
+            concept: fieldToConceptMap[`${field}Uuid`],
+            value: newValue,
+          });
+        }
+      } else if (dirtyFields[field] && newValue) {
+        // create new obs
+        obsForSubmission.newObs.push({
+          concept: fieldToConceptMap[`${field}Uuid`],
+          value: newValue,
+        });
+      }
+
+      return obsForSubmission;
+    },
+    {
+      toBeVoided: [],
+      newObs: [],
+    },
+  );
+}

package/src/common/index.ts

@@ -1,9 +1,10 @@
 export {
+  deleteEncounter,
   invalidateCachedVitalsAndBiometrics,
   useVitalsAndBiometrics,
   useVitalsConceptMetadata,
-  updateVitalsAndBiometrics,
-  saveVitalsAndBiometrics,
+  createOrUpdateVitalsAndBiometrics,
+  useEncounterVitalsAndBiometrics,
   withUnit,
   type ConceptMetadata,
 } from './data.resource';

package/src/common/types.ts

@@ -21,8 +21,9 @@ export type ObservationInterpretation = 'critically_low' | 'critically_high' | '
 export type MappedVitals = {
   code: string;
   interpretation: string;
-  recordedDate: Date;
+  recordedDate: string | Date;
   value: number;
+  encounterId: string;
 };
 
 export interface PatientVitalsAndBiometrics {

package/src/components/action-menu/vitals-biometrics-action-menu.component.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
+import { launchWorkspace, showModal, useLayoutType } from '@openmrs/esm-framework';
+import styles from './vitals-biometrics-action-menu.scss';
+import { patientVitalsBiometricsFormWorkspace } from '../../constants';
+
+interface VitalsAndBiometricsActionMenuProps {
+  encounterUuid: string;
+}
+
+export const VitalsAndBiometricsActionMenu = ({ encounterUuid }: VitalsAndBiometricsActionMenuProps) => {
+  const { t } = useTranslation();
+  const patientUuid = getPatientUuidFromStore();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const handleLaunchVitalsAndBiometricsForm = useCallback(() => {
+    launchWorkspace(patientVitalsBiometricsFormWorkspace, {
+      workspaceTitle: t('editVitalsAndBiometrics', 'Edit Vitals and Biometrics'),
+      editEncounterUuid: encounterUuid,
+      formContext: 'editing',
+    });
+  }, [encounterUuid, t]);
+
+  const handleLaunchDeleteVitalsAndBiometricsModal = useCallback(() => {
+    const dispose = showModal('vitals-biometrics-delete-confirmation-modal', {
+      closeDeleteModal: () => dispose(),
+      encounterUuid,
+      patientUuid,
+    });
+  }, [encounterUuid, patientUuid]);
+
+  return (
+    <Layer className={styles.layer}>
+      <OverflowMenu
+        aria-label={t('editOrDeleteVitalsAndBiometrics', 'Edit or delete Vitals and Biometrics')}
+        size={isTablet ? 'lg' : 'sm'}
+        flipped
+        align="left"
+        id={encounterUuid}
+      >
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="editVitalsAndBiometrics"
+          onClick={handleLaunchVitalsAndBiometricsForm}
+          itemText={t('edit', 'Edit')}
+        />
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="deleteVitalsAndBiometrics"
+          itemText={t('delete', 'Delete')}
+          onClick={handleLaunchDeleteVitalsAndBiometricsModal}
+          isDelete
+          hasDivider
+        />
+      </OverflowMenu>
+    </Layer>
+  );
+};

package/src/components/action-menu/vitals-biometrics-action-menu.scss

@@ -0,0 +1,11 @@
+.layer {
+  height: 100%;
+
+  :global(.cds--overflow-menu) {
+    min-height: unset;
+  }
+}
+
+.menuItem {
+  max-width: none;
+}

package/src/components/delete-vitals-biometrics-modal/delete-vitals-biometrics.modal.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useCallback } from 'react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { deleteEncounter, invalidateCachedVitalsAndBiometrics } from '../../common';
+import { ModalHeader, ModalBody, ModalFooter, Button, InlineLoading } from '@carbon/react';
+
+interface DeleteVitalsAndBiometricsModalProps {
+  patientUuid: string;
+  encounterUuid: string;
+  closeDeleteModal: () => void;
+}
+
+const DeleteVitalsAndBiometricsModal: React.FC<DeleteVitalsAndBiometricsModalProps> = ({
+  encounterUuid,
+  closeDeleteModal,
+}) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = useCallback(async () => {
+    if (!encounterUuid) {
+      showSnackbar({
+        isLowContrast: false,
+        kind: 'error',
+        title: t('errorDeleting', 'Error deleting vitals and biometrics'),
+        subtitle: t('encounterUuidRequired', 'Encounter UUID is required to delete vitals and biometrics'),
+      });
+      return;
+    }
+
+    setIsDeleting(true);
+    deleteEncounter(encounterUuid)
+      .then(() => {
+        invalidateCachedVitalsAndBiometrics();
+        closeDeleteModal();
+        showSnackbar({
+          isLowContrast: true,
+          kind: 'success',
+          title: t('vitalsAndBiometricsDeleted', 'Vitals and biometrics deleted'),
+        });
+      })
+      .catch((error) => {
+        console.error('Error deleting encounter: ', error);
+        showSnackbar({
+          isLowContrast: false,
+          kind: 'error',
+          title: t('errorDeleting', 'Error deleting vitals and biometrics'),
+          subtitle: error?.message,
+        });
+      })
+      .finally(() => setIsDeleting(false));
+  }, [encounterUuid, t, closeDeleteModal]);
+
+  return (
+    <>
+      <ModalHeader
+        closeModal={closeDeleteModal}
+        title={t('deleteVitalsAndBiometrics', 'Delete vitals and biometrics')}
+      />
+      <ModalBody>
+        <p>
+          {t(
+            'deleteConfirmationText',
+            'Note: Deleting these entries will also remove related vitals or biometrics data. Are you sure you want to continue?',
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeDeleteModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete} disabled={isDeleting}>
+          {isDeleting ? (
+            <InlineLoading description={t('deleting', 'Deleting') + '...'} />
+          ) : (
+            <span>{t('delete', 'Delete')}</span>
+          )}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeleteVitalsAndBiometricsModal;

package/src/{weight-tile → components/weight-tile}/weight-tile.component.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { InlineLoading } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { useVitalsAndBiometrics, useVitalsConceptMetadata } from '../common';
-import { type ConfigObject } from '../config-schema';
+import { useVitalsAndBiometrics, useVitalsConceptMetadata } from '../../common';
+import { type ConfigObject } from '../../config-schema';
 import styles from './weight-tile.scss';
 
 interface WeightTileInterface {

package/src/{weight-tile → components/weight-tile}/weight-tile.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { configSchema, type ConfigObject } from '../config-schema';
+import { configSchema, type ConfigObject } from '../../config-schema';
 import { getByTextWithMarkup, mockPatient, renderWithSwr, waitForLoadingToFinish } from 'tools';
 import { formattedBiometrics, mockBiometricsConfig, mockConceptMetadata, mockVitalsSignsConcepts } from '__mocks__';
-import { useVitalsAndBiometrics } from '../common';
+import { useVitalsAndBiometrics } from '../../common';
 import WeightTile from './weight-tile.component';
 
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
@@ -13,8 +13,8 @@ const mockConceptUnits = new Map<string, string>(
   mockVitalsSignsConcepts.data.results[0].setMembers.map((concept) => [concept.uuid, concept.units]),
 );
 
-jest.mock('../common', () => {
-  const originalModule = jest.requireActual('../common');
+jest.mock('../../common', () => {
+  const originalModule = jest.requireActual('../../common');
 
   return {
     ...originalModule,

package/src/index.ts

@@ -58,10 +58,15 @@ export const vitalsAndBiometricsDashboardLink =
     options,
   );
 
-export const weightTile = getAsyncLifecycle(() => import('./weight-tile/weight-tile.component'), options);
+export const weightTile = getAsyncLifecycle(() => import('./components/weight-tile/weight-tile.component'), options);
 
 // t('recordVitalsAndBiometrics', 'Record Vitals and Biometrics')
 export const vitalsBiometricsFormWorkspace = getAsyncLifecycle(
   () => import('./vitals-biometrics-form/vitals-biometrics-form.workspace'),
   options,
 );
+
+export const vitalsAndBiometricsDeleteConfirmationModal = getAsyncLifecycle(
+  () => import('./components/delete-vitals-biometrics-modal/delete-vitals-biometrics.modal'),
+  options,
+);