From 03dc1984dae85f92d87aa79d5ab83d0533fc644d Mon Sep 17 00:00:00 2001
From: Laurent Ouma <98098891+Omoshlawi@users.noreply.github.com>
Date: Fri, 17 Jan 2025 10:55:30 +0400
Subject: [PATCH 1/2] Using mock data for claims preauth and filtering
 interventions with patient gender (#549)

* fix: Update use preauth hook to use mock preauth payload;mock fetch;properly rename interventions

* feat: Enhance PackageInterventions component to utilize patient UUID and apply gender-based filtering

* refactor: Cleanup preauth

* update translations
---
 .../benefits-package/benefits-package.mock.ts |   6 +-
 .../forms/benefit-pre-auth-form.workspace.tsx |   9 +-
 ...sx => package-interventions.component.tsx} |  40 +-
 .../dashboard/form/claims-form.component.tsx  |   5 +-
 .../pre-auth/form/pre-auth-form.component.tsx | 364 ------------------
 .../pre-auth/form/pre-auth-form.resource.ts   |  20 -
 .../claims/pre-auth/form/pre-auth-form.scss   | 141 -------
 .../pre-auth/form/pre-auth-mock-data.ts       |  44 ---
 .../src/claims/pre-auth/hook/pre-auth.mock.ts |  40 --
 .../pre-auth/pre-auth-dashboard.component.tsx |  79 ----
 .../claims/pre-auth/pre-auth-dashboard.scss   |  42 --
 .../table/pre-auth-table.component.tsx        | 234 -----------
 .../claims/pre-auth/table/pre-auth-table.scss | 111 ------
 packages/esm-billing-app/src/config-schema.ts |   2 +-
 .../src/hooks/use-pre-auth-requests.ts        |  14 +-
 .../src/hooks/useInterventions.ts             |  32 +-
 .../esm-billing-app/src/root.component.tsx    |   2 -
 packages/esm-billing-app/src/types/index.ts   |   2 +-
 packages/esm-billing-app/translations/en.json |  19 +-
 19 files changed, 85 insertions(+), 1121 deletions(-)
 rename packages/esm-billing-app/src/benefits-package/forms/{package-intervensions.component.tsx => package-interventions.component.tsx} (53%)
 delete mode 100644 packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.component.tsx
 delete mode 100644 packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.resource.ts
 delete mode 100644 packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.scss
 delete mode 100644 packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-mock-data.ts
 delete mode 100644 packages/esm-billing-app/src/claims/pre-auth/hook/pre-auth.mock.ts
 delete mode 100644 packages/esm-billing-app/src/claims/pre-auth/pre-auth-dashboard.component.tsx
 delete mode 100644 packages/esm-billing-app/src/claims/pre-auth/pre-auth-dashboard.scss
 delete mode 100644 packages/esm-billing-app/src/claims/pre-auth/table/pre-auth-table.component.tsx
 delete mode 100644 packages/esm-billing-app/src/claims/pre-auth/table/pre-auth-table.scss

diff --git a/packages/esm-billing-app/src/benefits-package/benefits-package.mock.ts b/packages/esm-billing-app/src/benefits-package/benefits-package.mock.ts
index a1c59b684..15e7cc376 100644
--- a/packages/esm-billing-app/src/benefits-package/benefits-package.mock.ts
+++ b/packages/esm-billing-app/src/benefits-package/benefits-package.mock.ts
@@ -4,7 +4,7 @@ import {
   Diagnosis,
   Package,
   PatientBenefit,
-  SHAIntervension,
+  SHAIntervention,
   shifIdentifiersResponse,
 } from '../types';
 
@@ -52,10 +52,10 @@ export const packages = [
   },
 ] as Array<Package>;
 
-export const intervensions = patientBenefits.map(({ interventionCode, interventionName }) => ({
+export const interventions = patientBenefits.map(({ interventionCode, interventionName }) => ({
   interventionCode,
   interventionName,
-})) as Array<SHAIntervension>;
+})) as Array<SHAIntervention>;
 
 export const coverageEligibilityResponse = [
   {
diff --git a/packages/esm-billing-app/src/benefits-package/forms/benefit-pre-auth-form.workspace.tsx b/packages/esm-billing-app/src/benefits-package/forms/benefit-pre-auth-form.workspace.tsx
index edf169c07..e03f3f6ad 100644
--- a/packages/esm-billing-app/src/benefits-package/forms/benefit-pre-auth-form.workspace.tsx
+++ b/packages/esm-billing-app/src/benefits-package/forms/benefit-pre-auth-form.workspace.tsx
@@ -28,7 +28,7 @@ import useProvider from '../../hooks/useProvider';
 import { PatientBenefit } from '../../types';
 import { preAuthenticateBenefit, preauthSchema } from '../benefits-package.resources';
 import styles from './benefits-pre-auth-form.scss';
-import PackageIntervensions from './package-intervensions.component';
+import PackageInterventions from './package-interventions.component';
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
 
 type BenefitsPreAuth = z.infer<typeof preauthSchema>;
@@ -240,8 +240,9 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
           </Column>
           {selectedPackageObservable && (
             <Column>
-              <PackageIntervensions
+              <PackageInterventions
                 category={packages.find((package_) => package_.uuid === selectedPackageObservable)?.packageCode ?? ''}
+                patientUuid={patientUuid}
               />
             </Column>
           )}
@@ -255,7 +256,7 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
                   invalid={form.formState.errors[field.name]?.message}
                   invalidText={form.formState.errors[field.name]?.message}
                   id="diagnoses"
-                  titleText={t('diagnosis', 'Diagnosis')}
+                  titleText={t('finalDiagnosis', 'Final Diagnosis')}
                   selectedItems={field.value}
                   label="Choose option"
                   items={diagnoses.map((r) => r.id)}
@@ -279,7 +280,7 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
           <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
             {t('discard', 'Discard')}
           </Button>
-          <Button className={styles.button} kind="primary" type="submit">
+          <Button className={styles.button} kind="primary" type="submit" disabled={isSubmitting}>
             {isSubmitting ? (
               <>
                 <Loading className={styles.button_spinner} withOverlay={false} small /> {t('submitting', 'Submitting')}
diff --git a/packages/esm-billing-app/src/benefits-package/forms/package-intervensions.component.tsx b/packages/esm-billing-app/src/benefits-package/forms/package-interventions.component.tsx
similarity index 53%
rename from packages/esm-billing-app/src/benefits-package/forms/package-intervensions.component.tsx
rename to packages/esm-billing-app/src/benefits-package/forms/package-interventions.component.tsx
index c42f3703b..e2a7324c9 100644
--- a/packages/esm-billing-app/src/benefits-package/forms/package-intervensions.component.tsx
+++ b/packages/esm-billing-app/src/benefits-package/forms/package-interventions.component.tsx
@@ -1,37 +1,57 @@
 import { InlineLoading, InlineNotification, MultiSelect } from '@carbon/react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { useInterventions } from '../../hooks/useInterventions';
+import { InterventionsFilter, toQueryParams, useInterventions } from '../../hooks/useInterventions';
 import { eligibilityRequestShema } from '../benefits-package.resources';
+import { usePatient } from '@openmrs/esm-framework';
 
 type EligibilityRequest = z.infer<typeof eligibilityRequestShema>;
 
-type PackageIntervensionsProps = {
+type PackageInterventionsProps = {
   category: string;
+  patientUuid: string;
 };
-const PackageIntervensions: React.FC<PackageIntervensionsProps> = ({ category }) => {
-  const { error, interventions, isLoading } = useInterventions(category);
+const PackageInterventions: React.FC<PackageInterventionsProps> = ({ category, patientUuid }) => {
+  const [filters, setFilters] = useState<InterventionsFilter>({ package_code: category });
+  const { error: patientError, isLoading: isPatientLoading, patient } = usePatient(patientUuid);
+  const { error, interventions, isLoading } = useInterventions(filters);
+
   const form = useFormContext<EligibilityRequest>();
   const { t } = useTranslation();
 
+  useEffect(() => {
+    setFilters((state) => ({
+      ...state,
+      package_code: category,
+      applicable_gender: patient?.gender === 'male' ? 'MALE' : patient?.gender === 'female' ? 'FEMALE' : undefined,
+    }));
+  }, [category, patient]);
+
   useEffect(() => {
     form.setValue('interventions', []);
   }, [category]);
 
-  if (isLoading) {
-    return <InlineLoading status="active" iconDescription="Loading" description="Loading intervensions..." />;
+  if (isLoading || isPatientLoading) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription="Loading"
+        description={t('loadingInterventions', 'Loading interventions') + '...'}
+      />
+    );
   }
 
-  if (error) {
+  if (error || patientError) {
     return (
       <InlineNotification
         aria-label="closes notification"
         kind="error"
         lowContrast={true}
         statusIconDescription="notification"
-        title={t('failure', 'Error loading intervensions')}
+        title={t('failure', 'Error loading interventions')}
+        subtitle={error?.message ?? patientError?.message}
       />
     );
   }
@@ -60,4 +80,4 @@ const PackageIntervensions: React.FC<PackageIntervensionsProps> = ({ category })
   );
 };
 
-export default PackageIntervensions;
+export default PackageInterventions;
diff --git a/packages/esm-billing-app/src/claims/dashboard/form/claims-form.component.tsx b/packages/esm-billing-app/src/claims/dashboard/form/claims-form.component.tsx
index 326f1a8cf..b8cbc38d3 100644
--- a/packages/esm-billing-app/src/claims/dashboard/form/claims-form.component.tsx
+++ b/packages/esm-billing-app/src/claims/dashboard/form/claims-form.component.tsx
@@ -21,7 +21,7 @@ import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { z } from 'zod';
-import PackageIntervensions from '../../../benefits-package/forms/package-intervensions.component';
+import PackageInterventions from '../../../benefits-package/forms/package-interventions.component';
 import { formatDate } from '../../../helpers/functions';
 import { useSystemSetting } from '../../../hooks/getMflCode';
 import usePackages from '../../../hooks/usePackages';
@@ -314,8 +314,9 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
           {selectedPackageObservable && (
             <Column>
               <Layer className={styles.input}>
-                <PackageIntervensions
+                <PackageInterventions
                   category={packages.find((package_) => package_.uuid === selectedPackageObservable)?.packageCode ?? ''}
+                  patientUuid={patientUuid}
                 />
               </Layer>
             </Column>
diff --git a/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.component.tsx b/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.component.tsx
deleted file mode 100644
index 9b373c312..000000000
--- a/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.component.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Column,
-  TextArea,
-  Form,
-  Layer,
-  Stack,
-  TextInput,
-  Row,
-  Button,
-  ButtonSet,
-  MultiSelect,
-  Tag,
-  InlineLoading,
-} from '@carbon/react';
-import { navigate, showSnackbar } from '@openmrs/esm-framework';
-import { useSystemSetting } from '../../../hooks/getMflCode';
-import { useParams } from 'react-router-dom';
-import { useForm, Controller } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useVisit } from '../../dashboard/form/claims-form.resource';
-import styles from './pre-auth-form.scss';
-import { LineItem, MappedBill } from '../../../types';
-import { useInterventions, usePackages } from './pre-auth-form.resource';
-import { Service } from '../../../../../esm-lab-manifest-app/src/metrics/lab-manifest-metrics.component';
-
-type PreAuthFormProps = {
-  bill: MappedBill;
-  selectedLineItems: LineItem[];
-};
-
-const PreAuthFormSchema = z.object({
-  claimCode: z.string().nonempty({ message: 'Claim code is required' }),
-  guaranteeId: z.string().nonempty({ message: 'Guarantee Id is required' }),
-  preAuthJustification: z.string().nonempty({ message: 'Claim justification is required' }),
-  diagnoses: z
-    .array(
-      z.object({
-        id: z.string(),
-        text: z.string(),
-      }),
-    )
-    .nonempty({ message: 'At least one diagnosis is required' }),
-  visitType: z.string().nonempty({ message: 'Visit type is required' }),
-  facility: z.string().nonempty({ message: 'Facility is required' }),
-  packages: z.array(z.string()).nonempty({ message: 'At least one package is required' }),
-  interventions: z.array(z.string()).nonempty({ message: 'At least one intervention is required' }),
-});
-
-const PreAuthForm: React.FC<PreAuthFormProps> = ({ bill, selectedLineItems }) => {
-  const { t } = useTranslation();
-  const { mflCodeValue } = useSystemSetting('facility.mflcode');
-  const { patientUuid, billUuid } = useParams();
-  const { visits: recentVisit } = useVisit(patientUuid);
-  const { interventions } = useInterventions();
-  const { packages } = usePackages();
-
-  const [loading, setLoading] = useState(false);
-
-  const handleNavigateToBillingOptions = () =>
-    navigate({
-      to: window.getOpenmrsSpaBase() + `home/billing/patient/${patientUuid}/${billUuid}`,
-    });
-
-  const diagnoses = useMemo(() => {
-    return (
-      recentVisit?.encounters?.flatMap(
-        (encounter) =>
-          encounter.diagnoses.map((diagnosis) => ({
-            id: diagnosis.diagnosis.coded.uuid,
-            text: diagnosis.display,
-            certainty: diagnosis.certainty,
-          })) || [],
-      ) || []
-    );
-  }, [recentVisit]);
-
-  const confirmedDiagnoses = useMemo(() => {
-    return diagnoses.filter((diagnosis) => diagnosis.certainty === 'CONFIRMED');
-  }, [diagnoses]);
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isValid },
-    setValue,
-    reset,
-  } = useForm({
-    mode: 'all',
-    resolver: zodResolver(PreAuthFormSchema),
-    defaultValues: {
-      claimCode: '',
-      guaranteeId: '',
-      preAuthJustification: '',
-      diagnoses: [],
-      visitType: '',
-      facility: '',
-      packages: [],
-      interventions: [],
-    },
-  });
-
-  const onSubmit = async (data) => {
-    setLoading(true);
-    try {
-      showSnackbar({
-        kind: 'success',
-        title: t('requestPreAuth', 'Pre Authorization'),
-        subtitle: t('sendClaim', 'Pre authorization request sent successfully'),
-        timeoutInMs: 3000,
-        isLowContrast: true,
-      });
-      reset();
-      setTimeout(() => {
-        navigate({
-          to: window.getOpenmrsSpaBase() + `home/billing/`,
-        });
-      }, 2000);
-    } catch (err) {
-      console.error(err);
-      showSnackbar({
-        kind: 'error',
-        title: t('requestPreAuthError', 'Pre Authorization Error'),
-        subtitle: t('sendClaimError', 'Pre authorization request failed, please try later'),
-        timeoutInMs: 2500,
-        isLowContrast: true,
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    reset({
-      diagnoses: confirmedDiagnoses,
-      visitType: recentVisit?.visitType?.display || '',
-      facility: `${recentVisit?.location?.display || ''} - ${mflCodeValue || ''}`,
-      claimCode: '',
-      guaranteeId: '',
-      preAuthJustification: '',
-      packages: [],
-      interventions: [],
-    });
-  }, [confirmedDiagnoses, recentVisit, mflCodeValue, reset]);
-
-  return (
-    <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={4} className={styles.grid}>
-        <span className={styles.preAuthFormTitle}>{t('formTitle', 'Fill in the form details')}</span>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              control={control}
-              name="preAuthJustification"
-              render={({ field }) => (
-                <TextArea
-                  {...field}
-                  labelText={t('preAuthJustification', 'Pre-Auth Justification')}
-                  rows={3}
-                  placeholder="Claim Justification"
-                  id="preAuthJustification"
-                  invalid={!!errors.preAuthJustification}
-                  invalidText={errors.preAuthJustification?.message}
-                />
-              )}
-            />
-          </Layer>
-        </Column>
-        <Row className={styles.formPreAuthRow}>
-          <Column className={styles.formPreAuthColumn}>
-            <Layer className={styles.input}>
-              <Controller
-                control={control}
-                name="visitType"
-                render={({ field }) => (
-                  <TextInput
-                    {...field}
-                    id="visittype"
-                    labelText={t('visittype', 'Visit Type')}
-                    readOnly
-                    value={field.value}
-                  />
-                )}
-              />
-            </Layer>
-          </Column>
-          <Column className={styles.formPreAuthColumn}>
-            <Layer className={styles.input}>
-              <Controller
-                control={control}
-                name="facility"
-                render={({ field }) => (
-                  <TextInput
-                    {...field}
-                    id="facility"
-                    labelText={t('facility', 'Facility')}
-                    readOnly
-                    value={field.value}
-                  />
-                )}
-              />
-            </Layer>
-          </Column>
-        </Row>
-        <Row className={styles.formPreAuthRow}>
-          <Column className={styles.formPreAuthColumn}>
-            <Layer className={styles.input}>
-              <Controller
-                control={control}
-                name="guaranteeId"
-                render={({ field }) => (
-                  <TextInput
-                    {...field}
-                    id="guaranteeId"
-                    placeholder="Guarantee Id"
-                    labelText={t('guaranteeId', 'Guarantee Id')}
-                    invalid={!!errors.guaranteeId}
-                    invalidText={errors.guaranteeId?.message}
-                  />
-                )}
-              />
-            </Layer>
-          </Column>
-          <Column className={styles.formPreAuthColumn}>
-            <Layer className={styles.input}>
-              <Controller
-                control={control}
-                name="claimCode"
-                render={({ field }) => (
-                  <TextInput
-                    {...field}
-                    id="claimcode"
-                    placeholder="Claim Code"
-                    labelText={t('claimcode', 'Claim Code')}
-                    invalid={!!errors.claimCode}
-                    invalidText={errors.claimCode?.message}
-                  />
-                )}
-              />
-            </Layer>
-          </Column>
-        </Row>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              control={control}
-              name="packages"
-              render={({ field }) => (
-                <>
-                  <>
-                    <div>
-                      {field.value.map((item, index) => (
-                        <Tag key={index} type="high-contrast">
-                          {item}
-                        </Tag>
-                      ))}
-                    </div>
-                  </>
-                  <MultiSelect
-                    {...field}
-                    items={packages}
-                    titleText={t('packages', 'Packages')}
-                    itemToString={(item) => (item ? item.shaPackageName : '')}
-                    label={field.value.length === 0 ? t('packagesOptions', 'Choose packages') : ''}
-                    id="packages"
-                    invalid={!!errors.packages}
-                    invalidText={errors.packages?.message}
-                    placeholder="Select Packages"
-                    onChange={({ selectedItems }) => {
-                      field.onChange(selectedItems.map((item) => item.shaPackageCode));
-                    }}
-                  />
-                </>
-              )}
-            />
-          </Layer>
-        </Column>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              control={control}
-              name="interventions"
-              render={({ field }) => (
-                <>
-                  <div>
-                    {field.value.map((item, index) => {
-                      const intervention = interventions.find((interv) => interv.shaInterventionCode === item);
-                      return (
-                        <Tag key={index} type="high-contrast">
-                          {intervention ? intervention.shaInterventionName : ''}
-                        </Tag>
-                      );
-                    })}
-                  </div>
-                  <MultiSelect
-                    {...field}
-                    items={interventions}
-                    titleText={t('interventions', 'Interventions')}
-                    itemToString={(item) => (item ? item.shaInterventionName : '')}
-                    label={field.value.length === 0 ? t('interventionsOption', 'Choose interventions') : ''}
-                    id="interventions"
-                    invalid={!!errors.interventions}
-                    invalidText={errors.interventions?.message}
-                    placeholder="Select Interventions"
-                    onChange={({ selectedItems }) => {
-                      field.onChange(selectedItems.map((item) => item.shaInterventionCode));
-                    }}
-                  />
-                </>
-              )}
-            />
-          </Layer>
-        </Column>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              control={control}
-              name="diagnoses"
-              render={({ field }) => (
-                <>
-                  <div>
-                    {field.value.map((item, index) => (
-                      <Tag key={index} type="high-contrast">
-                        {item.text}
-                      </Tag>
-                    ))}
-                  </div>
-                  <MultiSelect
-                    {...field}
-                    id="diagnoses"
-                    titleText={t('diagnoses', 'Diagnoses')}
-                    items={diagnoses}
-                    itemToString={(item) => (item ? item.text : '')}
-                    selectionFeedback="top-after-reopen"
-                    label={field.value.length === 0 ? t('chooseDiagnosis', 'Choose diagnosis') : ''}
-                    selectedItems={field.value}
-                    onChange={({ selectedItems }) => field.onChange(selectedItems)}
-                  />
-                </>
-              )}
-            />
-          </Layer>
-        </Column>
-
-        <ButtonSet className={styles.buttonSet}>
-          <Button className={styles.button} kind="secondary" onClick={handleNavigateToBillingOptions}>
-            {t('discard', 'Discard')}
-          </Button>
-          <Button className={styles.button} kind="primary" type="submit" disabled={!isValid || loading}>
-            {loading ? (
-              <InlineLoading description={t('processing', 'Processing...')} />
-            ) : (
-              t('preAuthRequest', 'Pre-Auth Request')
-            )}
-          </Button>
-        </ButtonSet>
-      </Stack>
-    </Form>
-  );
-};
-
-export default PreAuthForm;
diff --git a/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.resource.ts b/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.resource.ts
deleted file mode 100644
index 90ef6e528..000000000
--- a/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.resource.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useMemo } from 'react';
-import { mockInterventions, mockPackages } from './pre-auth-mock-data';
-
-export const useInterventions = () => {
-  const interventions = useMemo(() => mockInterventions, []);
-  return {
-    isLoading: false,
-    interventions: interventions,
-    error: undefined,
-  };
-};
-
-export const usePackages = () => {
-  const packages = useMemo(() => mockPackages, []);
-  return {
-    isLoading: false,
-    packages: packages,
-    error: undefined,
-  };
-};
diff --git a/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.scss b/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.scss
deleted file mode 100644
index 99442cf9c..000000000
--- a/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-form.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@carbon/colors';
-
-.heading {
-  @include type.type-style('heading-compact-01');
-  margin: layout.$spacing-05 0 layout.$spacing-05;
-}
-
-.warningContainer {
-  background-color: colors.$red-50;
-  padding: layout.$spacing-04;
-  margin: layout.$spacing-03 0 layout.$spacing-03;
-  display: flex;
-  justify-content: space-between;
-  .warning {
-    @include type.type-style('heading-compact-01');
-  }
-}
-
-.form {
-  width: 100%;
-  margin: layout.$spacing-09 layout.$spacing-05 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: white;
-
-  :global(.omrs-breakpoint-lt-desktop) {
-    width: 50%;
-    padding: layout.$spacing-06 layout.$spacing-05;
-  }
-
-  .preAuthFormTitle {
-    @include type.type-style('heading-02');
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: layout.$spacing-05 0 1rem;
-    row-gap: layout.$spacing-06;
-    position: relative;
-
-    &::after {
-      content: '';
-      display: block;
-      width: layout.$spacing-07;
-      border-bottom: 0.375rem solid var(--brand-03);
-      position: absolute;
-      bottom: -0.75rem;
-      left: 0;
-    }
-
-    & > span {
-      @include type.type-style('body-01');
-    }
-  }
-
-  .buttonSet {
-    padding: 0;
-    margin-top: layout.$spacing-03;
-    display: flex;
-    justify-content: flex-end;
-    gap: layout.$spacing-05;
-    margin-bottom: layout.$spacing-07;
-
-    :global(.omrs-breakpoint-lt-desktop) {
-      justify-content: center;
-    }
-  }
-
-  :global(.omrs-breakpoint-lt-desktop) {
-    width: 768px;
-  }
-}
-
-.grid {
-  margin: 0 layout.$spacing-05;
-}
-
-.input {
-  margin-top: layout.$spacing-05;
-}
-
-.button {
-  height: layout.$spacing-08;
-  display: flex;
-  align-content: flex-start;
-  align-items: baseline;
-  min-width: 20%;
-}
-
-.buttonSet {
-  padding: 0;
-  margin-top: layout.$spacing-05;
-  display: flex;
-  justify-content: flex-end;
-  gap: layout.$spacing-05;
-  margin-bottom: layout.$spacing-07;
-}
-
-.preAuthFormTitle {
-  @include type.type-style('heading-02');
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: layout.$spacing-05 0 layout.$spacing-03;
-  row-gap: layout.$spacing-06;
-  position: relative;
-
-  &::after {
-    content: '';
-    display: block;
-    width: layout.$spacing-07;
-    border-bottom: 0.375rem solid var(--brand-03);
-    position: absolute;
-    bottom: -0.75rem;
-    left: 0;
-  }
-
-  & > span {
-    @include type.type-style('body-01');
-  }
-}
-
-:global(.omrs-breakpoint-lt-desktop) {
-  .buttonSet {
-    padding: layout.$spacing-06 layout.$spacing-05;
-    justify-content: flex-end;
-    gap: layout.$spacing-05;
-  }
-}
-
-.formPreAuthRow {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: layout.$spacing-05;
-}
-
-.formPreAuthColumn {
-  flex: 1 1 0%;
-}
diff --git a/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-mock-data.ts b/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-mock-data.ts
deleted file mode 100644
index 933a59658..000000000
--- a/packages/esm-billing-app/src/claims/pre-auth/form/pre-auth-mock-data.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { SHAPackage, Benefits, Intervention } from '../../../types';
-
-export const benefits: Benefits[] = [
-  {
-    shaPackageCode: 'SHA-001',
-    shaPackageName: 'Eye Care',
-    shaInterventionCode: 'SHA-001-01',
-    shaInterventionName: 'Intervention 1',
-  },
-  {
-    shaPackageCode: 'SHA-002',
-    shaPackageName: 'Malaria',
-    shaInterventionCode: 'SHA-002-01',
-    shaInterventionName: 'Intervention 2',
-  },
-];
-
-export const mockPackages: SHAPackage[] = [
-  {
-    uuid: 'SHA-PKG-001',
-    shaPackageCode: 'SHA-001',
-    shaPackageName: 'Eye Care',
-  },
-  {
-    uuid: 'SHA-PKG-002',
-    shaPackageCode: 'SHA-002',
-    shaPackageName: 'Dental Care',
-  },
-  {
-    uuid: 'SHA-PKG-003',
-    shaPackageCode: 'SHA-003',
-    shaPackageName: 'Surgical',
-  },
-  {
-    uuid: 'SHA-PKG-004',
-    shaPackageCode: 'SHA-004',
-    shaPackageName: 'Haemo-oncology',
-  },
-];
-
-export const mockInterventions: Intervention[] = benefits.map(({ shaInterventionCode, shaInterventionName }) => ({
-  shaInterventionCode,
-  shaInterventionName,
-}));
diff --git a/packages/esm-billing-app/src/claims/pre-auth/hook/pre-auth.mock.ts b/packages/esm-billing-app/src/claims/pre-auth/hook/pre-auth.mock.ts
deleted file mode 100644
index de4545fcc..000000000
--- a/packages/esm-billing-app/src/claims/pre-auth/hook/pre-auth.mock.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export interface Package {
-  uuid: string;
-  packageCode: string;
-  packageName: string;
-  packageAccessPoint: 'OP' | 'IP' | 'Both';
-}
-
-export interface SHAintervention {
-  interventionCode: string;
-  interventionName?: string;
-}
-
-export const packages = [
-  {
-    packageCode: 'SHA-001',
-    packageName: 'Eye Care',
-    packageAccessPoint: 'OPD',
-  },
-  {
-    packageCode: 'SHA-002',
-    packageName: 'Dental Care',
-    packageAccessPoint: 'IPD',
-  },
-  {
-    packageCode: 'SHA-003',
-    packageName: 'Surgical',
-    packageAccessPoint: 'OPD',
-  },
-  {
-    packageCode: 'SHA-004',
-    packageName: 'Haemo-oncology',
-    packageAccessPoint: 'OP',
-  },
-] as Array<Package>;
-
-export const interventions: SHAintervention[] = [
-  { interventionCode: 'SHA-001-01', interventionName: 'Intervention 1' },
-  { interventionCode: 'SHA-001-02', interventionName: 'Intervention 2' },
-  { interventionCode: 'SHA-001-03', interventionName: 'Intervention 3' },
-];
diff --git a/packages/esm-billing-app/src/claims/pre-auth/pre-auth-dashboard.component.tsx b/packages/esm-billing-app/src/claims/pre-auth/pre-auth-dashboard.component.tsx
deleted file mode 100644
index 2461bea42..000000000
--- a/packages/esm-billing-app/src/claims/pre-auth/pre-auth-dashboard.component.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { usePatient, ErrorState, ExtensionSlot, navigate } from '@openmrs/esm-framework';
-import { InlineLoading, Button } from '@carbon/react';
-import { useBill } from '../../billing.resource';
-import { CardHeader } from '@openmrs/esm-patient-common-lib';
-import { PreviousOutline } from '@carbon/react/icons';
-import { spaBasePath } from '../../constants';
-import { LineItem } from '../../types';
-import styles from './pre-auth-dashboard.scss';
-import PreAuthTable from './table/pre-auth-table.component';
-import PreAuthForm from './form/pre-auth-form.component';
-
-const PreAuthRequestDashboard: React.FC = () => {
-  const { billUuid, patientUuid } = useParams();
-  const { t } = useTranslation();
-  const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
-  const { bill, isLoading: isLoadingBill, error } = useBill(billUuid);
-  const preAuthTitle = t('makePreauthRequest', 'Make Pre-auth Request');
-
-  const [selectedLineItems, setSelectedLineItems] = useState<LineItem[]>([]);
-
-  const handleSelectItem = (selectedItems: LineItem[]) => {
-    setSelectedLineItems(selectedItems);
-  };
-
-  if (isLoadingPatient && isLoadingBill) {
-    return (
-      <div className={styles.preAuthContainer}>
-        <InlineLoading
-          className={styles.loader}
-          status="active"
-          iconDescription="Loading"
-          description="Loading patient header..."
-        />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className={styles.preAuthContainer}>
-        <ErrorState headerTitle={t('preAuthRequestError', 'Pre-authorization request error page')} error={error} />
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.preAuthContainer}>
-      {patient && (
-        <ExtensionSlot
-          name="patient-header-slot"
-          state={{ patientUuid: patient.id, patient }}
-          className={styles.preAuthContainer}
-        />
-      )}
-      <CardHeader title={preAuthTitle}>
-        <Button
-          kind="secondary"
-          size="sm"
-          className={styles.backButton}
-          onClick={() => navigate({ to: `${spaBasePath}/billing/patient/${patientUuid}/${billUuid}` })}
-          renderIcon={PreviousOutline}
-          iconDescription="back">
-          {t('backButton', 'Back')}
-        </Button>{' '}
-      </CardHeader>
-      <div className={styles.preAuthMainContainer}>
-        <div className={styles.content}>
-          <PreAuthTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
-          <PreAuthForm bill={bill} selectedLineItems={selectedLineItems} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PreAuthRequestDashboard;
diff --git a/packages/esm-billing-app/src/claims/pre-auth/pre-auth-dashboard.scss b/packages/esm-billing-app/src/claims/pre-auth/pre-auth-dashboard.scss
deleted file mode 100644
index 2df79884b..000000000
--- a/packages/esm-billing-app/src/claims/pre-auth/pre-auth-dashboard.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@use '@carbon/colors';
-@use '@carbon/layout';
-@use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-.backButton {
-  margin: layout.$spacing-04;
-}
-.loader {
-  display: flex;
-  min-height: layout.$spacing-09;
-  justify-content: center;
-}
-.errorContainer {
-  margin: layout.$spacing-05;
-}
-
-.preAuthMainContainer {
-  display: flex;
-  margin: 0 auto;
-  padding: 0 layout.$spacing-05;
-}
-
-.content {
-  display: flex;
-  width: 100%;
-}
-
-:global(.omrs-breakpoint-lt-desktop) {
-  .preAuthMainContainer {
-    flex-direction: column;
-  }
-
-  .content {
-    flex-direction: column;
-  }
-}
-
-.preAuthMainContainer,
-.form {
-  flex: 1;
-}
diff --git a/packages/esm-billing-app/src/claims/pre-auth/table/pre-auth-table.component.tsx b/packages/esm-billing-app/src/claims/pre-auth/table/pre-auth-table.component.tsx
deleted file mode 100644
index d9162ed80..000000000
--- a/packages/esm-billing-app/src/claims/pre-auth/table/pre-auth-table.component.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import fuzzy from 'fuzzy';
-import {
-  DataTable,
-  DataTableSkeleton,
-  Layer,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-  TableToolbar,
-  TableToolbarContent,
-  TableToolbarSearch,
-  TableSelectRow,
-  Tile,
-  Pagination,
-  type DataTableHeader,
-  type DataTableRow,
-} from '@carbon/react';
-import { formatDate, isDesktop, useDebounce, useLayoutType } from '@openmrs/esm-framework';
-import styles from './pre-auth-table.scss';
-import { LineItem, MappedBill } from '../../../types';
-import { EmptyDataIllustration, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
-
-type PreAuthTableProps = {
-  bill: MappedBill;
-  isSelectable?: boolean;
-  isLoadingBill?: boolean;
-  onSelectItem?: (selectedLineItems: LineItem[]) => void;
-};
-
-const PreAuthTable: React.FC<PreAuthTableProps> = ({ bill, isSelectable = true, isLoadingBill, onSelectItem }) => {
-  const { t } = useTranslation();
-  const { lineItems } = bill;
-  const layout = useLayoutType();
-  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
-  const [selectedLineItems, setSelectedLineItems] = useState<LineItem[]>([]);
-  const [searchTerm, setSearchTerm] = useState('');
-  const debouncedSearchTerm = useDebounce(searchTerm);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-
-  const pendingLineItems = useMemo(
-    () => (lineItems ? lineItems.filter((item) => item.paymentStatus === 'PENDING') : []),
-    [lineItems],
-  );
-
-  const filteredLineItems = useMemo(() => {
-    if (!debouncedSearchTerm) {
-      return pendingLineItems || [];
-    }
-
-    return fuzzy
-      .filter(debouncedSearchTerm, pendingLineItems || [], {
-        extract: (lineItem: LineItem) => `${lineItem.item}`,
-      })
-      .sort((r1, r2) => r1.score - r2.score)
-      .map((result) => result.original);
-  }, [debouncedSearchTerm, pendingLineItems]);
-
-  const paginatedLineItems = useMemo(() => {
-    const startIndex = (currentPage - 1) * pageSize;
-    const endIndex = startIndex + pageSize;
-    return filteredLineItems.slice(startIndex, endIndex);
-  }, [filteredLineItems, currentPage, pageSize]);
-
-  const tableHeaders: Array<typeof DataTableHeader> = [
-    {
-      header: t('serialNo', 'Serial No.'),
-      key: 'serialno',
-    },
-    {
-      header: t('billItem', 'Bill Item'),
-      key: 'inventoryname',
-    },
-    {
-      header: t('status', 'Status'),
-      key: 'status',
-    },
-    {
-      header: t('totalAmount', 'Total amount'),
-      key: 'total',
-    },
-    {
-      header: t('billCreationDate', 'Bill creation date'),
-      key: 'dateofbillcreation',
-    },
-  ];
-
-  const processBillItem = (item) => (item.item || item?.billableService)?.split(':')[1];
-
-  const tableRows: Array<typeof DataTableRow> = useMemo(
-    () =>
-      paginatedLineItems?.map((item) => {
-        return {
-          id: `${item.uuid}`,
-          inventoryname: processBillItem(item),
-          serialno: bill.receiptNumber,
-          status: item.paymentStatus,
-          total: item.price * item.quantity,
-          dateofbillcreation: formatDate(new Date(bill.dateCreated), { mode: 'standard' }),
-        };
-      }) ?? [],
-    [bill.dateCreated, bill.receiptNumber, paginatedLineItems],
-  );
-
-  if (isLoadingBill) {
-    return (
-      <div className={styles.loaderContainer}>
-        <DataTableSkeleton
-          columnCount={tableHeaders.length}
-          showHeader={false}
-          showToolbar={false}
-          size={responsiveSize}
-          zebra
-        />
-      </div>
-    );
-  }
-
-  const handleRowSelection = (row: typeof DataTableRow, checked: boolean) => {
-    const matchingRow = filteredLineItems.find((item) => item.uuid === row.id);
-    let newSelectedLineItems;
-
-    if (checked) {
-      newSelectedLineItems = [...selectedLineItems, matchingRow];
-    } else {
-      newSelectedLineItems = selectedLineItems.filter((item) => item.uuid !== row.id);
-    }
-    setSelectedLineItems(newSelectedLineItems);
-    onSelectItem(newSelectedLineItems);
-  };
-
-  const handlePageChange = (pageNumber: number) => {
-    setCurrentPage(pageNumber);
-  };
-
-  return (
-    <div className={styles.preAuthContainer}>
-      <DataTable headers={tableHeaders} isSortable rows={tableRows} size={responsiveSize} useZebraStyles>
-        {({ rows, headers, getRowProps, getSelectionProps, getTableProps, getToolbarProps }) => (
-          <TableContainer
-            className={styles.tableContainer}
-            description={
-              <span className={styles.tableDescription}>
-                <span>
-                  {t(
-                    'selectitemstorequestforpreauth',
-                    'Select items that are to be included in the pre authorization request',
-                  )}
-                </span>
-              </span>
-            }
-            title={t('lineItems', 'Line items')}>
-            <div className={styles.toolbarWrapper}>
-              <TableToolbar {...getToolbarProps()} className={styles.tableToolbar} size={responsiveSize}>
-                <TableToolbarContent className={styles.headerContainer}>
-                  <TableToolbarSearch
-                    className={styles.searchbox}
-                    expanded
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
-                    placeholder={t('searchThisTable', 'Search this table')}
-                    size={responsiveSize}
-                  />
-                </TableToolbarContent>
-              </TableToolbar>
-            </div>
-            <Table {...getTableProps()} aria-label="line items" className={styles.table}>
-              <TableHead>
-                <TableRow>
-                  {rows.length > 1 && isSelectable ? <TableHeader /> : null}
-                  {headers.map((header) => (
-                    <TableHeader key={header.key}>{header.header}</TableHeader>
-                  ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {rows.map((row, index) => {
-                  return (
-                    <TableRow
-                      key={row.id}
-                      {...getRowProps({
-                        row,
-                      })}>
-                      {rows.length > 1 && isSelectable && (
-                        <TableSelectRow
-                          aria-label="Select row"
-                          {...getSelectionProps({ row })}
-                          onChange={(checked: boolean) => handleRowSelection(row, checked)}
-                          checked={Boolean(selectedLineItems?.find((item) => item?.uuid === row?.id))}
-                        />
-                      )}
-                      {row.cells.map((cell) => (
-                        <TableCell key={cell.id}>{cell.value}</TableCell>
-                      ))}
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        )}
-      </DataTable>
-      {filteredLineItems?.length === 0 && (
-        <div className={styles.filterEmptyState}>
-          <Layer>
-            <Tile className={styles.filterEmptyStateTile}>
-              <div className={styles.empty__state}>
-                <EmptyDataIllustration />
-              </div>
-              <p className={styles.filterEmptyStateContent}>
-                {t('noMatchingItemsToDisplay', 'No matching items to display')}
-              </p>
-              <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
-            </Tile>
-          </Layer>
-        </div>
-      )}
-      <PatientChartPagination
-        currentItems={filteredLineItems.length}
-        onPageNumberChange={handlePageChange}
-        pageNumber={currentPage}
-        pageSize={pageSize}
-        totalItems={filteredLineItems.length}
-      />
-    </div>
-  );
-};
-
-export default PreAuthTable;
diff --git a/packages/esm-billing-app/src/claims/pre-auth/table/pre-auth-table.scss b/packages/esm-billing-app/src/claims/pre-auth/table/pre-auth-table.scss
deleted file mode 100644
index e98c73649..000000000
--- a/packages/esm-billing-app/src/claims/pre-auth/table/pre-auth-table.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-@use '@carbon/colors';
-@use '@carbon/layout';
-@use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-.filterEmptyState {
-  align-items: center;
-  background-color: white;
-  display: flex;
-  justify-content: center;
-  padding: layout.$spacing-09 !important;
-  text-align: center;
-}
-
-.filterEmptyStateTile {
-  margin: auto;
-}
-
-.filterEmptyStateContent {
-  @include type.type-style('heading-compact-02');
-  color: $text-02;
-  margin-bottom: 0.5rem;
-}
-
-.filterEmptyStateHelper {
-  @include type.type-style('body-compact-01');
-  color: $text-02;
-}
-
-.headerContainer {
-  background-color: colors.$gray-10;
-}
-
-.preAuthContainer {
-  width: 100%;
-  margin: layout.$spacing-09 layout.$spacing-05 0;
-  border: 1px solid $ui-03;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-:global(.omrs-breakpoint-lt-desktop) {
-  .preAuthContainer {
-    width: 100%;
-  }
-}
-
-.searchbox {
-  input:focus {
-    outline: 2px solid colors.$orange-40 !important;
-  }
-}
-
-.table {
-  td {
-    border-bottom: none !important;
-  }
-}
-
-.tableDescription {
-  display: flex;
-  align-items: flex-start;
-  margin-top: layout.$spacing-02;
-  column-gap: layout.$spacing-01;
-
-  ::after {
-    content: '';
-    display: block;
-    width: 2rem;
-    padding-top: 0.188rem;
-    border-bottom: 0.375rem solid var(--brand-03);
-  }
-
-  & > span {
-    @include type.type-style('body-01');
-  }
-}
-
-.tableToolbar {
-  width: 20%;
-  min-width: 12.5rem;
-}
-
-.toolbarWrapper {
-  position: relative;
-  display: flex;
-  justify-content: flex-end;
-}
-
-:global(.omrs-breakpoint-lt-desktop) {
-  .toolbarWrapper {
-    height: layout.$spacing-09;
-  }
-}
-
-:global(.omrs-breakpoint-gt-tablet) {
-  .toolbarWrapper {
-    height: layout.$spacing-07;
-  }
-}
-
-.tableContainer {
-  width: 100%;
-}
-.pagination {
-  background: white;
-}
-.empty__state {
-  margin-top: layout.$spacing-05;
-}
diff --git a/packages/esm-billing-app/src/config-schema.ts b/packages/esm-billing-app/src/config-schema.ts
index 2553bedfc..44bf0a173 100644
--- a/packages/esm-billing-app/src/config-schema.ts
+++ b/packages/esm-billing-app/src/config-schema.ts
@@ -62,7 +62,7 @@ export const configSchema: ConfigSchema = {
   },
   hieBaseUrl: {
     _type: Type.String,
-    _description: 'HIE Base URL for getting intervensions and benefit packages',
+    _description: 'HIE Base URL for getting interventions and benefit packages',
     _default: 'https://payers.apeiro-digital.com/api/v1',
   },
   visitAttributeTypes: {
diff --git a/packages/esm-billing-app/src/hooks/use-pre-auth-requests.ts b/packages/esm-billing-app/src/hooks/use-pre-auth-requests.ts
index d7900a8e6..df67c16fa 100644
--- a/packages/esm-billing-app/src/hooks/use-pre-auth-requests.ts
+++ b/packages/esm-billing-app/src/hooks/use-pre-auth-requests.ts
@@ -195,7 +195,19 @@ export const usePreAuthRequests = () => {
   const { hieBaseUrl } = useConfig<BillingConfig>();
   const url = `${hieBaseUrl}/claim/byFacility?facilityCode=Organization/${mflCodeValue}&type=preauthorization&claimResponseId=`;
 
-  const { data, error, isLoading, mutate } = useSWR<{ data: Array<PreAuthRequest> }>(url, openmrsFetch);
+  const { data, error, isLoading, mutate } = useSWR<{ data: Array<PreAuthRequest> }>(
+    url,
+    () =>
+      new Promise<{ data: Array<PreAuthRequest> }>((resolve) =>
+        setTimeout(
+          () =>
+            resolve({
+              data: preAuthRequests as any,
+            }),
+          3000,
+        ),
+      ),
+  );
 
   return {
     preAuthRequests: (data?.data?.length ? data?.data : preAuthRequests).map((r) => {
diff --git a/packages/esm-billing-app/src/hooks/useInterventions.ts b/packages/esm-billing-app/src/hooks/useInterventions.ts
index 9a56eb621..ea82027b8 100644
--- a/packages/esm-billing-app/src/hooks/useInterventions.ts
+++ b/packages/esm-billing-app/src/hooks/useInterventions.ts
@@ -1,20 +1,42 @@
 import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWR from 'swr';
-import { SHAIntervension } from '../types';
+import { SHAIntervention } from '../types';
 
-export const useInterventions = (code: string) => {
+export type InterventionsFilter = {
+  package_code?: string;
+  scheme_code?: string;
+  applicable_gender?: 'MALE' | 'FEMALE';
+};
+
+export const toQueryParams = (q: Record<string, any>) => {
+  return (
+    '?' +
+    Object.entries(q)
+      .reduce((prev, [key, val]) => {
+        if (val !== undefined && val !== null) {
+          return [...prev, `${key}=${val}`];
+        }
+        return prev;
+      }, [])
+      .join('&')
+  );
+};
+
+export const useInterventions = (filters: InterventionsFilter) => {
   const fetcher = (url: string) => {
     return openmrsFetch(url, {
       method: 'POST',
       body: {
         searchKeyAndValues: {
+          ...filters,
           // scheme_code: 'UHC',
-          package_code: code,
+          applicable_gender: filters.applicable_gender ? `ALL,${filters.applicable_gender}` : undefined,
         },
       },
     });
   };
-  const url = `${restBaseUrl}/insuranceclaims/claims/interventions/query?code=${code}`;
+
+  const url = `${restBaseUrl}/insuranceclaims/claims/interventions/query${toQueryParams(filters)}`;
   const { isLoading, error, data } = useSWR<
     FetchResponse<{
       status: string;
@@ -35,7 +57,7 @@ export const useInterventions = (code: string) => {
           interventionCode,
           subCategoryBenefitsPackage: interventionSubPackage,
           interventionName,
-        } as SHAIntervension),
+        } as SHAIntervention),
     ),
     error,
   };
diff --git a/packages/esm-billing-app/src/root.component.tsx b/packages/esm-billing-app/src/root.component.tsx
index 7a25205be..4dc815072 100644
--- a/packages/esm-billing-app/src/root.component.tsx
+++ b/packages/esm-billing-app/src/root.component.tsx
@@ -8,7 +8,6 @@ import { BillingDashboard } from './billing-dashboard/billing-dashboard.componen
 import ClaimsManagementOverview from './claims/claims-management/main/claims-overview-main.component';
 import ClaimsManagementPreAuthRequest from './claims/claims-management/main/claims-pre-auth-main.component';
 import ClaimScreen from './claims/dashboard/claims-dashboard.component';
-import PreAuthRequestDashboard from './claims/pre-auth/pre-auth-dashboard.component';
 import Invoice from './invoice/invoice.component';
 import PaymentModeHome from './payment-modes/payment-mode-home.component';
 import { ClockInBoundary } from './payment-points/clock-in-boundary.component';
@@ -24,7 +23,6 @@ const RootComponent: React.FC = () => {
         <Route path="/" element={<BillingDashboard />} />
         <Route path="/claims-overview" element={<ClaimsManagementOverview />} />
         <Route path="/preauth-requests" element={<ClaimsManagementPreAuthRequest />} />
-        <Route path="/patient/:patientUuid/:billUuid/pre-auth-request" element={<PreAuthRequestDashboard />} />
         <Route
           path="/patient/:patientUuid/:billUuid"
           element={
diff --git a/packages/esm-billing-app/src/types/index.ts b/packages/esm-billing-app/src/types/index.ts
index ef9046354..bbe17c560 100644
--- a/packages/esm-billing-app/src/types/index.ts
+++ b/packages/esm-billing-app/src/types/index.ts
@@ -491,7 +491,7 @@ export type PaymentMode = {
   resourceVersion?: string;
 };
 
-export type SHAIntervension = {
+export type SHAIntervention = {
   interventionCode: string;
   shaCategory: string;
   accessCode: string;
diff --git a/packages/esm-billing-app/translations/en.json b/packages/esm-billing-app/translations/en.json
index 1744a06fb..e73d3d205 100644
--- a/packages/esm-billing-app/translations/en.json
+++ b/packages/esm-billing-app/translations/en.json
@@ -21,7 +21,6 @@
   "attributeRequired": "Attribute required",
   "attributeRetired": "Attribute retired",
   "attributeRetiredReason": "Attribute retired reason",
-  "backButton": "Back",
   "benefits": "Benefits",
   "billableExemptionAdministration": "Exemption Administration",
   "billableServicesError": "Billable services error",
@@ -56,9 +55,7 @@
   "chargeItemsDescription": "Charge Items and Services Dashboard",
   "checked": "Checked",
   "checkFilters": "Check the filters above",
-  "chooseDiagnosis": "Choose diagnosis",
   "claim": "Process claims",
-  "claimcode": "Claim Code",
   "claimCode": "Claim Code",
   "claimedAmount": "Claimed Amount",
   "claimError": "Claim Error",
@@ -81,7 +78,6 @@
   "delete": "Delete",
   "deleteBill": "Delete Bill",
   "description": "Description",
-  "diagnoses": "Diagnoses",
   "diagnosis": "Diagnosis",
   "discard": "Discard",
   "discardClaim": "Discard Claim",
@@ -120,16 +116,14 @@
   "errorOnLine": "Error on line",
   "errorRetrievingHIESubscription": "Error retrieving HIE subscription",
   "exemptionCategory": "Exemption category",
-  "exemptionSchema": "Exemption Schema",
   "facility": "Facility",
   "failedBillPayment": "Bill payment failed",
-  "failure": "Error loading intervensions",
+  "failure": "Error loading interventions",
   "filterBy": "Filter by",
   "filterByTimesheet": "Filter by timesheet",
   "filterTable": "Filter table",
   "formTitle": "Fill in the form details",
   "generatedMessage": "The invoice has been electronically generated and is a valid document. It was created by {{userName}} on {{date}} at {{time}}",
-  "guaranteeId": "Guarantee Id",
   "home": "Home",
   "identifier": "Identifier",
   "inactive": "Inactive",
@@ -141,7 +135,6 @@
   "insurer": "Insurer",
   "interventionCode": "Intervention Code",
   "interventions": "Interventions",
-  "interventionsOption": "Choose interventions",
   "invalidJsonError": "Invalid JSON received for the schema.",
   "invoice": "Invoice",
   "invoiceError": "Invoice error",
@@ -156,9 +149,9 @@
   "loadingBillingServices": "Loading billing services...",
   "loadingData": "Loading data...",
   "loadingDescription": "Loading",
+  "loadingInterventions": "Loading interventions",
   "loadingSchema": "Loading schema",
   "makeclaims": "Make Claims",
-  "makePreauthRequest": "Make Pre-auth Request",
   "makePreAuthRequests": "Make Pre Auth Request",
   "mpesaPayment": "MPESA Payment",
   "name": "Name",
@@ -185,8 +178,6 @@
   "overPayment": "Over payment",
   "overPaymentSubtitle": "Amount paid {{totalAmountTendered}} should not be greater than amount due {{selectedLineItemsAmountDue}} for selected line items",
   "package": "Package",
-  "packages": "Packages",
-  "packagesOptions": "Choose packages",
   "patient": "Patient",
   "patientBilling": "Verifying patient bills",
   "patientBillingAlert": "Patient Billing Alert",
@@ -213,10 +204,7 @@
   "Phone Number": "Phone Number",
   "pickLabRequest": "Pick Lab Request",
   "policyNumber": "Policy number",
-  "preAuthJustification": "Pre-Auth Justification",
   "preauthRequest": "Preauth requests",
-  "preAuthRequest": "Pre-Auth Request",
-  "preAuthRequestError": "Pre-authorization request error page",
   "preAuthRequests": "Pre-auth requests",
   "preAuthRequets": "Pre-Auth Requests",
   "preauthStatus": "Filter by Status",
@@ -242,8 +230,6 @@
   "regExp": "Regular expression",
   "rejected": "Rejected",
   "remove": "Remove",
-  "requestPreAuth": "Pre Authorization",
-  "requestPreAuthError": "Pre Authorization Error",
   "retryRequest": "Retry request",
   "saveAndClose": "Save & Close",
   "saveError": "Failed to save schema.",
@@ -265,7 +251,6 @@
   "selectExemptionCategory": "Select exemption category",
   "selectInsuranceScheme": "Select insurance scheme",
   "selectitemstobeclaimed": "Select items that are to be included in the claims",
-  "selectitemstorequestforpreauth": "Select items that are to be included in the pre authorization request",
   "selectPaymentMethod": "Select payment method",
   "selectPaymentMode": "Select payment mode",
   "selectTimesheet": "Select timesheet",

From f5c61683afe48065c232e73aeedf3f46662b0387 Mon Sep 17 00:00:00 2001
From: Amos Machora <amosmachora13@gmail.com>
Date: Fri, 17 Jan 2025 10:14:51 +0300
Subject: [PATCH 2/2] fix: removed claim modal step and verified SHA number
 billing check (#551)

* refactor: end visit and redirect to claim page

* fix: do not make eligibility request for patients without sha id

* fix: use eligibility reponse message

* applied CR changes and made more code refators

* fix: use array length instead of array presence to check for sha id during request prep

* code review suggestion from @donaldkibet

Co-authored-by: Donald Kibet <chelashawdonald@yahoo.com>

---------

Co-authored-by: Donald Kibet <chelashawdonald@yahoo.com>
---
 .../src/billing-form/hie.resource.tsx         |  53 ++++++--
 .../sha-number-validity.component.tsx         | 119 +++++++++---------
 .../src/invoice/invoice.component.tsx         |  61 ++++++++-
 .../src/invoice/invoice.resource.ts           |  81 ++++++++++++
 4 files changed, 240 insertions(+), 74 deletions(-)
 create mode 100644 packages/esm-billing-app/src/invoice/invoice.resource.ts

diff --git a/packages/esm-billing-app/src/billing-form/hie.resource.tsx b/packages/esm-billing-app/src/billing-form/hie.resource.tsx
index f73c6604b..df343c8b8 100644
--- a/packages/esm-billing-app/src/billing-form/hie.resource.tsx
+++ b/packages/esm-billing-app/src/billing-form/hie.resource.tsx
@@ -2,7 +2,41 @@ import { openmrsFetch, restBaseUrl, useConfig, usePatient } from '@openmrs/esm-f
 import useSWR from 'swr';
 import { BillingConfig } from '../config-schema';
 
-type EligibilityResponse = { message: { eligible: 0 | 1; possible_solution: string; reason: string } };
+export interface EligibilityResponse {
+  requestIdType: number;
+  requestIdNumber: string;
+  memberCrNumber: string;
+  fullName: string;
+  memberType: string;
+  coverageStartDate: Date;
+  coverageEndDate: Date;
+  status: number;
+  message: string;
+  reason: string;
+  possibleSolution: null;
+  coverageType: string;
+  primaryContributor: null;
+  employerDetails: EmployerDetails;
+  dependants: Array<unknown>;
+  active: boolean;
+}
+
+export interface EmployerDetails {
+  employerName: string;
+  jobGroup: string;
+  scheme: Scheme;
+}
+
+export interface Scheme {
+  schemeCode: string;
+  schemeName: string;
+  schemeCategoryCode: string;
+  schemeCategoryName: string;
+  memberPolicyStartDate: string;
+  memberPolicyEndDate: string;
+  joinDate: string;
+  leaveDate: string;
+}
 
 type HIEEligibilityResponse = {
   insurer: string;
@@ -11,7 +45,7 @@ type HIEEligibilityResponse = {
   eligibility_response: EligibilityResponse;
 };
 
-export const useHIEEligibility = (patientUuid: string) => {
+export const useSHAEligibility = (patientUuid: string, shaIdentificationNumber?: fhir.Identifier[]) => {
   const { patient } = usePatient(patientUuid);
   const { nationalIdUUID } = useConfig<BillingConfig>();
 
@@ -20,19 +54,18 @@ export const useHIEEligibility = (patientUuid: string) => {
     .filter((identifier) => identifier.type.coding.some((coding) => coding.code === nationalIdUUID))
     ?.at(0)?.value;
 
-  const url = `${restBaseUrl}/insuranceclaims/CoverageEligibilityRequest?patientUuid=${patientUuid}&nationalId=${nationalId}`;
+  const url =
+    shaIdentificationNumber?.length > 0
+      ? `${restBaseUrl}/insuranceclaims/CoverageEligibilityRequest?patientUuid=${patientUuid}&nationalId=${nationalId}`
+      : undefined; // this is to avoid making the request if the patient does not have a SHA Id.
   const { data, error, isLoading, mutate } = useSWR<{ data: Array<HIEEligibilityResponse> }>(url, openmrsFetch, {
     errorRetryCount: 0,
   });
 
   return {
-    data:
-      data?.data.map((d) => {
-        return {
-          ...d,
-          eligibility_response: JSON.parse(d.eligibility_response as unknown as string) as EligibilityResponse,
-        };
-      }) ?? [],
+    data: data
+      ? { ...(JSON.parse(data?.data.at(0)?.eligibility_response as unknown as string) as EligibilityResponse) }
+      : undefined,
     isLoading,
     error,
     mutate,
diff --git a/packages/esm-billing-app/src/billing-form/social-health-authority/sha-number-validity.component.tsx b/packages/esm-billing-app/src/billing-form/social-health-authority/sha-number-validity.component.tsx
index dfa24b480..a7937db28 100644
--- a/packages/esm-billing-app/src/billing-form/social-health-authority/sha-number-validity.component.tsx
+++ b/packages/esm-billing-app/src/billing-form/social-health-authority/sha-number-validity.component.tsx
@@ -1,12 +1,12 @@
 import { ActionableNotification, Form, InlineLoading, InlineNotification, Tooltip } from '@carbon/react';
 import { CheckboxCheckedFilled, Information } from '@carbon/react/icons';
 import { formatDate, navigate, useConfig, usePatient } from '@openmrs/esm-framework';
-import capitalize from 'lodash/capitalize';
+import { isWithinInterval } from 'date-fns';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { BillingConfig } from '../../config-schema';
-import { useHIEEligibility } from '../hie.resource';
+import { useSHAEligibility } from '../hie.resource';
 import styles from './sha-number-validity.scss';
 
 type SHANumberValidityProps = {
@@ -17,36 +17,27 @@ type SHANumberValidityProps = {
 const SHANumberValidity: React.FC<SHANumberValidityProps> = ({ paymentMethod, patientUuid }) => {
   const { t } = useTranslation();
   const { shaIdentificationNumberUUID } = useConfig<BillingConfig>();
-  const { patient, isLoading } = usePatient(patientUuid);
+  const { patient, isLoading: isLoadingPatientUuid } = usePatient(patientUuid);
   const { watch } = useFormContext();
   const isSHA = watch('insuranceScheme')?.includes('SHA');
-  const { data, isLoading: isLoadingHIEEligibility, error } = useHIEEligibility(patientUuid);
-
   const shaIdentificationNumber = patient?.identifier
     ?.filter((identifier) => identifier)
     .filter((identifier) => identifier.type.coding.some((coding) => coding.code === shaIdentificationNumberUUID));
 
-  const isHIEEligible = true;
+  const { data, isLoading: isLoadingHIEEligibility, error } = useSHAEligibility(patientUuid, shaIdentificationNumber);
 
-  if (!isSHA) {
-    return null;
-  }
+  const isRegisteredOnSHA = Boolean(data?.coverageEndDate) && Boolean(data?.coverageStartDate);
+  const isNotRegisteredOnSHA = data?.active === false;
 
-  if (isLoadingHIEEligibility || isLoading) {
-    return <InlineLoading status="active" description={t('loading', 'Loading ...')} />;
-  }
+  const isActive = isRegisteredOnSHA
+    ? isWithinInterval(new Date(), {
+        start: new Date(data?.coverageStartDate),
+        end: new Date(data?.coverageEndDate),
+      })
+    : false;
 
-  if (error) {
-    return (
-      <InlineNotification
-        aria-label="closes notification"
-        kind="error"
-        lowContrast={true}
-        statusIconDescription="notification"
-        title={t('error', 'Error')}
-        subtitle={t('errorRetrievingHIESubscription', 'Error retrieving HIE subscription')}
-      />
-    );
+  if (!isSHA) {
+    return null;
   }
 
   if (shaIdentificationNumber?.length === 0) {
@@ -68,49 +59,61 @@ const SHANumberValidity: React.FC<SHANumberValidityProps> = ({ paymentMethod, pa
     );
   }
 
-  if (!isHIEEligible) {
+  if (isLoadingHIEEligibility || isLoadingPatientUuid) {
+    return <InlineLoading status="active" description={t('loading', 'Loading ...')} />;
+  }
+
+  if (error) {
+    return (
+      <InlineNotification
+        aria-label="closes notification"
+        kind="error"
+        lowContrast={true}
+        statusIconDescription="notification"
+        title={t('error', 'Error')}
+        subtitle={t('errorRetrievingHIESubscription', 'Error retrieving HIE subscription')}
+      />
+    );
+  }
+
+  if (isNotRegisteredOnSHA) {
     return (
-      <ActionableNotification
+      <InlineNotification
         title={t('pendingHIEVerification', 'Pending HIE verification')}
-        subtitle={t('pendingVerificationReason', data[0].eligibility_response.message.reason)}
-        closeOnEscape
-        inline={false}
-        actionButtonLabel={t('verify', 'Verify')}
+        subtitle={data?.message}
         className={styles.missingSHANumber}
-        onActionButtonClick={() => {
-          navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/edit` });
-        }}
       />
     );
   }
 
-  return (
-    <Form className={styles.formContainer}>
-      {data?.map(({ inforce, insurer, start }, index) => {
-        return (
-          <div key={`${index}${insurer}`} className={styles.hieCard}>
-            <div className={Boolean(inforce) ? styles.hieCardItemActive : styles.hieCardItemInActive}>
-              <span className={styles.hieInsurerTitle}>{t('insurer', 'Insurer:')}</span>{' '}
-              <span className={styles.hieInsurerValue}>{capitalize(insurer)}</span>
-              {start && (
-                <Tooltip className={styles.tooltip} align="bottom" label={`Active from ${formatDate(new Date(start))}`}>
-                  <button className="sb-tooltip-trigger" type="button">
-                    <Information />
-                  </button>
-                </Tooltip>
-              )}
-            </div>
-            <div className={Boolean(inforce) ? styles.hieCardItemActive : styles.hieCardItemInActive}>
-              <CheckboxCheckedFilled />
-              <span className={Boolean(inforce) ? styles.activeSubscription : styles.inActiveSubscription}>
-                {inforce ? t('active', 'Active') : t('inactive', 'Inactive')}
-              </span>
-            </div>
+  if (isRegisteredOnSHA) {
+    return (
+      <Form className={styles.formContainer}>
+        <div className={styles.hieCard}>
+          <div className={isActive ? styles.hieCardItemActive : styles.hieCardItemInActive}>
+            <span className={styles.hieInsurerTitle}>{t('insurer', 'Insurer:')}</span>{' '}
+            <span className={styles.hieInsurerValue}>SHA</span>
+            {isActive && (
+              <Tooltip
+                className={styles.tooltip}
+                align="bottom"
+                label={`Active from ${formatDate(new Date(data?.coverageStartDate))}`}>
+                <button className="sb-tooltip-trigger" type="button">
+                  <Information />
+                </button>
+              </Tooltip>
+            )}
+          </div>
+          <div className={isActive ? styles.hieCardItemActive : styles.hieCardItemInActive}>
+            <CheckboxCheckedFilled />
+            <span className={isActive ? styles.activeSubscription : styles.inActiveSubscription}>
+              {isActive ? t('active', 'Active') : t('inactive', 'Inactive')}
+            </span>
           </div>
-        );
-      })}
-    </Form>
-  );
+        </div>
+      </Form>
+    );
+  }
 };
 
 export default SHANumberValidity;
diff --git a/packages/esm-billing-app/src/invoice/invoice.component.tsx b/packages/esm-billing-app/src/invoice/invoice.component.tsx
index 809ffd279..c87bec148 100644
--- a/packages/esm-billing-app/src/invoice/invoice.component.tsx
+++ b/packages/esm-billing-app/src/invoice/invoice.component.tsx
@@ -5,7 +5,10 @@ import {
   formatDatetime,
   navigate,
   parseDate,
+  setCurrentVisit,
   showModal,
+  showSnackbar,
+  updateVisit,
   useFeatureFlag,
   usePatient,
   useVisit,
@@ -21,6 +24,7 @@ import { convertToCurrency } from '../helpers';
 import { usePaymentsReconciler } from '../hooks/use-payments-reconciler';
 import { LineItem } from '../types';
 import InvoiceTable from './invoice-table.component';
+import { removeQueuedPatient, useVisitQueueEntry } from './invoice.resource';
 import styles from './invoice.scss';
 import Payments from './payments/payments.component';
 import ReceiptPrintButton from './print-bill-receipt/receipt-print-button.component';
@@ -39,7 +43,14 @@ const Invoice: React.FC = () => {
   const { patient, isLoading: isLoadingPatient, error: patientError } = usePatient(patientUuid);
   const { bill, isLoading: isLoadingBill, error: billingError } = useBill(billUuid);
   usePaymentsReconciler(billUuid);
-  const { currentVisit, isLoading: isVisitLoading, error: visitError } = useVisit(patientUuid);
+  const {
+    currentVisit,
+    isLoading: isVisitLoading,
+    error: visitError,
+    currentVisitIsRetrospective,
+    mutate: mutateVisit,
+  } = useVisit(patientUuid);
+  const { queueEntry } = useVisitQueueEntry(patientUuid, currentVisit?.uuid);
   const [selectedLineItems, setSelectedLineItems] = useState([]);
   const componentRef = useRef<HTMLDivElement>(null);
   const isProcessClaimsFormEnabled = useFeatureFlag('healthInformationExchange');
@@ -108,12 +119,49 @@ const Invoice: React.FC = () => {
     );
   }
 
-  const handleViewClaims = () => {
+  const handleEndVisit = async () => {
+    if (currentVisitIsRetrospective) {
+      setCurrentVisit(null, null);
+    } else {
+      const endVisitPayload = {
+        stopDatetime: new Date(),
+      };
+
+      const abortController = new AbortController();
+
+      updateVisit(currentVisit.uuid, endVisitPayload, abortController)
+        .then((response) => {
+          if (queueEntry) {
+            removeQueuedPatient(
+              queueEntry.queue.uuid,
+              queueEntry.queueEntryUuid,
+              abortController,
+              response?.data.stopDatetime,
+            );
+          }
+          mutateVisit();
+          showSnackbar({
+            isLowContrast: true,
+            kind: 'success',
+            subtitle: t('visitEndSuccessfully', `${response?.data?.visitType?.display} ended successfully`),
+            title: t('visitEnded', 'Visit ended'),
+          });
+        })
+        .catch((error) => {
+          showSnackbar({
+            title: t('errorEndingVisit', 'Error ending visit'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: error?.message,
+          });
+        });
+    }
+  };
+
+  const handleViewClaims = async () => {
     if (currentVisit) {
-      const dispose = showModal('end-visit-dialog', {
-        closeModal: () => dispose(),
-        patientUuid,
-      });
+      await handleEndVisit();
+      navigate({ to: `${spaBasePath}/billing/patient/${patientUuid}/${billUuid}/claims` });
     } else {
       navigate({ to: `${spaBasePath}/billing/patient/${patientUuid}/${billUuid}/claims` });
     }
@@ -153,6 +201,7 @@ const Invoice: React.FC = () => {
         {isProcessClaimsFormEnabled && (
           <Button
             onClick={handleViewClaims}
+            disabled={bill?.status !== 'PAID'}
             kind="danger"
             size="sm"
             renderIcon={BaggageClaim}
diff --git a/packages/esm-billing-app/src/invoice/invoice.resource.ts b/packages/esm-billing-app/src/invoice/invoice.resource.ts
new file mode 100644
index 000000000..0609de4de
--- /dev/null
+++ b/packages/esm-billing-app/src/invoice/invoice.resource.ts
@@ -0,0 +1,81 @@
+import { Concept, openmrsFetch, restBaseUrl, toDateObjectStrict, toOmrsIsoString, Visit } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export interface VisitQueueEntry {
+  queueEntry: VisitQueueEntry;
+  uuid: string;
+  visit: Visit;
+  queue: Queue;
+}
+
+export interface Queue {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  location: Location;
+  service: string;
+  allowedPriorities: Array<Concept>;
+  allowedStatuses: Array<Concept>;
+}
+
+export interface MappedVisitQueueEntry {
+  visitUuid: string;
+  queue: Queue;
+  queueEntryUuid: string;
+}
+
+export function useVisitQueueEntry(
+  patientUuid: string,
+  visitUuid: string,
+): {
+  queueEntry: MappedVisitQueueEntry | null;
+  isLoading: boolean;
+  error: Error;
+  isValidating?: boolean;
+  mutate: () => void;
+} {
+  const apiUrl = `${restBaseUrl}/visit-queue-entry?v=full&patient=${patientUuid}`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<VisitQueueEntry> } }, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+
+  const mappedVisitQueueEntry =
+    data?.data?.results
+      ?.map(
+        (visitQueueEntry: VisitQueueEntry): MappedVisitQueueEntry => ({
+          queue: visitQueueEntry.queueEntry.queue,
+          queueEntryUuid: visitQueueEntry.queueEntry.uuid,
+          visitUuid: visitQueueEntry.visit?.uuid,
+        }),
+      )
+      .filter((visitQueueEntry) => visitUuid !== undefined && visitUuid === visitQueueEntry.visitUuid)
+      .shift() ?? null;
+
+  return {
+    queueEntry: mappedVisitQueueEntry,
+    isLoading,
+    error: error,
+    isValidating,
+    mutate,
+  };
+}
+
+export function removeQueuedPatient(
+  queueUuid: string,
+  queueEntryUuid: string,
+  abortController: AbortController,
+  endedAt?: Date,
+) {
+  return openmrsFetch(`${restBaseUrl}/queue/${queueUuid}/entry/${queueEntryUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: {
+      endedAt: toDateObjectStrict(toOmrsIsoString(endedAt) ?? toOmrsIsoString(new Date())),
+    },
+    signal: abortController.signal,
+  });
+}