@kenyaemr/esm-billing-app 5.4.2-pre.2835 → 5.4.2-pre.2843

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false},{"component":"billingAdmin","route":"billing-admin"}],"extensions":[{"component":"accountingDashboardLink","name":"accounting-dashboard-link","slots":["homepage-dashboard-slot"],"meta":{"name":"accounting","slot":"accounting-dashboard-slot","title":"Accounting"}},{"name":"billing-dashboard","component":"billingDashboard","slot":"accounting-dashboard-slot"},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","component":"labOrder","slot":"top-of-lab-order-form-slot"},{"name":"procedure-order-billable-item","component":"procedureOrder","slot":"top-of-procedure-order-form-slot"},{"name":"imaging-order-billable-item","component":"imagingOrder","slot":"top-of-imaging-order-form-slot"},{"name":"price-info-order","component":"priceInfoOrder"},{"name":"drug-order-billable-item","component":"drugOrder","slot":"medication-info-slot"},{"name":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"patient-info-sha-status","component":"patientBannerShaStatus","slot":"patient-banner-tags-slot"},{"name":"payments-points-dashboard-link","component":"paymentPointDashboardLink","slot":"billing-admin-dashboard-slot","meta":{"name":"cashier-points","title":"Payment Point","slot":"payment-point-dashboard-slot"}},{"name":"payment-points-dashboard","component":"paymentPoints","slot":"payment-point-dashboard-slot"},{"name":"payment-mode-dashboard-link","component":"paymentModeLink","slot":"billing-admin-dashboard-slot","meta":{"name":"payment-modes","title":"Payment Mode","slot":"payment-mode-dashboard-slot"}},{"name":"payment-mode-dashboard","component":"paymentModeDashboard","slot":"payment-mode-dashboard-slot"},{"name":"bill-deposit-dashboard-link","component":"billDepositDashboardLink","slot":"billing-admin-dashboard-slot","meta":{"name":"bill-deposit","title":"Bill Deposit","slot":"billing-deposit-dashboard-slot"}},{"name":"bill-deposit-dashboard","component":"billDepositDashboard","slot":"billing-deposit-dashboard-slot"},{"name":"billable-exemptions-dashboard-link","component":"billableExemptionsLink","slot":"billing-admin-dashboard-slot","meta":{"name":"billable-exemptions","title":"Billable Exemptions","slot":"billing-exemptions-dashboard-slot"}},{"name":"billable-exemptions-dashboard","component":"billableExemptions","slot":"billing-exemptions-dashboard-slot"},{"name":"clinical-charges-dashboard-link","component":"clinicalChargesLink","slot":"billing-admin-dashboard-slot","meta":{"name":"clinical-charges","title":"Clinical Charges","slot":"clinical-charges-dashboard-slot"}},{"name":"clinical-charges-dashboard","component":"clinicalCharges","slot":"clinical-charges-dashboard-slot"},{"name":"payment-history-dashboard-link","component":"paymentHistoryLink","slot":"billing-admin-dashboard-slot","meta":{"name":"payment-history","title":"Payment History","slot":"payment-history-dashboard-slot"}},{"name":"payment-history-dashboard","component":"paymentHistoryDashboard","slot":"payment-history-dashboard-slot"},{"name":"patient-billing-dashboard-link","component":"patientBillingLink","slot":"billing-admin-dashboard-slot","meta":{"name":"patient-billing","title":"Patient Billing","slot":"patient-billing-dashboard-slot"}},{"name":"patient-billing-dashboard","component":"patientBilling","slot":"patient-billing-dashboard-slot"}],"workspaces":[{"name":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"commodityForm","title":"Charge Commodity Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"},{"name":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"},{"name":"payment-workspace","component":"paymentWorkspace","title":"Payment Workspace","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"claim-summary-modal","component":"claimSummaryModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"},{"name":"print-preview-modal","component":"printPreviewModal"},{"name":"bill-action-modal","component":"billActionModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"version":"5.4.2-pre.2835"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false},{"component":"billingAdmin","route":"billing-admin"}],"extensions":[{"component":"accountingDashboardLink","name":"accounting-dashboard-link","slots":["homepage-dashboard-slot"],"meta":{"name":"accounting","slot":"accounting-dashboard-slot","title":"Accounting"}},{"name":"billing-dashboard","component":"billingDashboard","slot":"accounting-dashboard-slot"},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","component":"labOrder","slot":"top-of-lab-order-form-slot"},{"name":"procedure-order-billable-item","component":"procedureOrder","slot":"top-of-procedure-order-form-slot"},{"name":"imaging-order-billable-item","component":"imagingOrder","slot":"top-of-imaging-order-form-slot"},{"name":"price-info-order","component":"priceInfoOrder"},{"name":"drug-order-billable-item","component":"drugOrder","slot":"medication-info-slot"},{"name":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"patient-info-sha-status","component":"patientBannerShaStatus","slot":"patient-banner-tags-slot"},{"name":"payments-points-dashboard-link","component":"paymentPointDashboardLink","slot":"billing-admin-dashboard-slot","meta":{"name":"cashier-points","title":"Payment Point","slot":"payment-point-dashboard-slot"}},{"name":"payment-points-dashboard","component":"paymentPoints","slot":"payment-point-dashboard-slot"},{"name":"payment-mode-dashboard-link","component":"paymentModeLink","slot":"billing-admin-dashboard-slot","meta":{"name":"payment-modes","title":"Payment Mode","slot":"payment-mode-dashboard-slot"}},{"name":"payment-mode-dashboard","component":"paymentModeDashboard","slot":"payment-mode-dashboard-slot"},{"name":"bill-deposit-dashboard-link","component":"billDepositDashboardLink","slot":"billing-admin-dashboard-slot","meta":{"name":"bill-deposit","title":"Bill Deposit","slot":"billing-deposit-dashboard-slot"}},{"name":"bill-deposit-dashboard","component":"billDepositDashboard","slot":"billing-deposit-dashboard-slot"},{"name":"billable-exemptions-dashboard-link","component":"billableExemptionsLink","slot":"billing-admin-dashboard-slot","meta":{"name":"billable-exemptions","title":"Billable Exemptions","slot":"billing-exemptions-dashboard-slot"}},{"name":"billable-exemptions-dashboard","component":"billableExemptions","slot":"billing-exemptions-dashboard-slot"},{"name":"clinical-charges-dashboard-link","component":"clinicalChargesLink","slot":"billing-admin-dashboard-slot","meta":{"name":"clinical-charges","title":"Clinical Charges","slot":"clinical-charges-dashboard-slot"}},{"name":"clinical-charges-dashboard","component":"clinicalCharges","slot":"clinical-charges-dashboard-slot"},{"name":"payment-history-dashboard-link","component":"paymentHistoryLink","slot":"billing-admin-dashboard-slot","meta":{"name":"payment-history","title":"Payment History","slot":"payment-history-dashboard-slot"}},{"name":"payment-history-dashboard","component":"paymentHistoryDashboard","slot":"payment-history-dashboard-slot"},{"name":"patient-billing-dashboard-link","component":"patientBillingLink","slot":"billing-admin-dashboard-slot","meta":{"name":"patient-billing","title":"Patient Billing","slot":"patient-billing-dashboard-slot"}},{"name":"patient-billing-dashboard","component":"patientBilling","slot":"patient-billing-dashboard-slot"}],"workspaces":[{"name":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"commodityForm","title":"Charge Commodity Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"},{"name":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"},{"name":"payment-workspace","component":"paymentWorkspace","title":"Payment Workspace","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"claim-summary-modal","component":"claimSummaryModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"},{"name":"print-preview-modal","component":"printPreviewModal"},{"name":"bill-action-modal","component":"billActionModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"version":"5.4.2-pre.2843"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-billing-app",
-  "version": "5.4.2-pre.2835",
+  "version": "5.4.2-pre.2843",
   "description": "Billing app for KenyaEMR",
   "keywords": [
     "openmrs"

package/src/autosuggest/autosuggest.component.tsx

@@ -1,6 +1,6 @@
-import React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';
 import { Layer, Search } from '@carbon/react';
 import classNames from 'classnames';
+import React, { type HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react';
 import styles from './autosuggest.scss';
 
 // FIXME Temporarily included types from Carbon
@@ -104,6 +104,8 @@ interface AutosuggestProps extends SearchProps {
   onSuggestionSelected: (field: string, value: string) => void;
   invalid?: boolean | undefined;
   invalidText?: string | undefined;
+  renderEmptyState?: (searchValue: string) => ReactNode;
+  renderSuggestionItem?: (item: any) => ReactNode;
 }
 
 export const Autosuggest: React.FC<AutosuggestProps> = ({
@@ -113,9 +115,12 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
   onSuggestionSelected,
   invalid,
   invalidText,
+  renderEmptyState,
+  renderSuggestionItem,
   ...searchProps
 }) => {
   const [suggestions, setSuggestions] = useState([]);
+  const [showEmptyState, setShowEmptyState] = useState(false);
   const searchBox = useRef(null);
   const wrapper = useRef(null);
   const { id: name, labelText } = searchProps;
@@ -131,6 +136,7 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
   const handleClickOutsideComponent = (e) => {
     if (wrapper.current && !wrapper.current.contains(e.target)) {
       setSuggestions([]);
+      setShowEmptyState(false);
     }
   };
 
@@ -140,6 +146,7 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
 
     if (query) {
       getSearchResults(query).then((suggestions) => {
+        setShowEmptyState(suggestions.length < 1);
         setSuggestions(suggestions);
       });
     } else {
@@ -175,12 +182,21 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
       {suggestions.length > 0 && (
         <ul className={styles.suggestions}>
           {suggestions.map((suggestion, index) => (
-            <li key={index} onClick={(e) => handleClick(index)} role="presentation">
-              {getDisplayValue(suggestion)}
+            <li
+              key={index}
+              onClick={(e) => handleClick(index)}
+              role="presentation"
+              className={typeof renderSuggestionItem !== 'function' && styles.displayText}>
+              {typeof renderSuggestionItem === 'function'
+                ? renderSuggestionItem(suggestion)
+                : getDisplayValue(suggestion)}
             </li>
           ))}
         </ul>
       )}
+      {showEmptyState && searchBox.current?.value?.length >= 3 && typeof renderEmptyState === 'function' && (
+        <span className={styles.suggestions}>{renderEmptyState(searchBox.current?.value)}</span>
+      )}
       {invalid ? <label className={classNames(styles.invalidMsg)}>{invalidText}</label> : <></>}
     </div>
   );

package/src/autosuggest/autosuggest.scss

@@ -1,6 +1,7 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .label01 {
   @include type.type-style('label-01');
@@ -11,32 +12,35 @@
   border-top-width: 0;
   list-style: none;
   margin-top: 0;
-  max-height: 143px;
+  max-height: 400px;
   overflow-y: auto;
   padding-left: 0;
   width: 100%;
   position: absolute;
   left: 0;
-  background-color: #fff;
+  background-color: colors.$white;
   margin-bottom: 20px;
   z-index: 99;
+  box-shadow: layout.$spacing-03 layout.$spacing-03 layout.$spacing-03 layout.$spacing-03 colors.$gray-30;
 }
 
 .suggestions li {
-  padding: spacing.$spacing-05;
-  line-height: 1.29;
-  color: #525252;
-  border-bottom: 1px solid #8d8d8d;
+  color: colors.$gray-70;
+  border-bottom: 1px solid colors.$gray-50;
+}
+
+.displayText {
+  padding: layout.$spacing-05;
 }
 
 .suggestions li:hover {
   background-color: #e5e5e5;
-  color: #161616;
+  color: colors.$gray-100;
   cursor: pointer;
 }
 
 .suggestions li:not(:last-of-type) {
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid colors.$gray-40-hover;
 }
 
 .autocomplete {
@@ -53,10 +57,12 @@
 }
 
 .invalid input {
-  outline: 2px solid var(--cds-support-error, #da1e28);
+  outline: 2px solid var(--cds-support-error, colors.$red-60);
   outline-offset: -2px;
+  margin-bottom: layout.$spacing-02;
 }
 
 .invalidMsg {
-  color: var(--cds-text-error, #da1e28);
+  color: var(--cds-text-error, colors.$red-60);
+  font-size: small;
 }

package/src/autosuggest/patient-search-info.component.tsx

@@ -0,0 +1,29 @@
+import { Tag, Tile } from '@carbon/react';
+import { Patient, PatientPhoto } from '@openmrs/esm-framework';
+import React from 'react';
+import styles from './patient-search-info.scss';
+type PatientSearchInfoProps = {
+  patient: Patient;
+};
+
+const PatientSearchInfo: React.FC<PatientSearchInfoProps> = ({ patient }) => {
+  return (
+    <Tile className={styles.patientInfo}>
+      <div className={styles.patientAvatar} role="img">
+        <PatientPhoto patientUuid={patient.uuid} patientName={patient.person.display} />
+      </div>
+      <div className={styles.patientDetails}>
+        <h2 className={styles.patientName}>{patient.person.display}</h2>
+        <div className={styles.demographics}>
+          {patient?.person?.gender} <span className={styles.middot}>&middot;</span> {patient?.person?.age}
+          <span className={styles.middot}>&middot;</span>
+          <Tag>
+            OpenmrsId:{patient.identifiers.find((id) => id.identifierType.display === 'OpenMRS ID')?.identifier}
+          </Tag>
+        </div>
+      </div>
+    </Tile>
+  );
+};
+
+export default PatientSearchInfo;

package/src/autosuggest/patient-search-info.scss

@@ -0,0 +1,37 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.patientInfo {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 2rem;
+  background-color: colors.$white;
+}
+
+.patientInfo:hover {
+  background-color: colors.$gray-10;
+}
+
+.patientDetails {
+  flex: 1;
+}
+
+.patientName {
+  @include type.type-style('heading-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-02;
+}
+
+.demographics {
+  display: flex;
+  align-items: center;
+  margin-bottom: layout.$spacing-02;
+  color: colors.$gray-70;
+  text-transform: uppercase;
+}
+
+.middot {
+  margin: 0 0.25rem;
+}

package/src/autosuggest/search-empty-state.component.tsx

@@ -0,0 +1,27 @@
+import { Button, Tile } from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import React from 'react';
+import styles from './search-empty-state.scss';
+
+type SearchEmptyStateProps = {
+  searchValue?: string;
+  message: string;
+  onAdd?: () => void;
+};
+
+const SearchEmptyState: React.FC<SearchEmptyStateProps> = ({ searchValue, message, onAdd }) => {
+  return (
+    <Tile className={styles.container}>
+      <EmptyDataIllustration height="50" width="50" />
+      <p>{message}</p>
+      {typeof onAdd === 'function' && (
+        <Button kind="ghost" renderIcon={Add} onClick={onAdd}>
+          Create patient
+        </Button>
+      )}
+    </Tile>
+  );
+};
+
+export default SearchEmptyState;

package/src/autosuggest/search-empty-state.scss

@@ -0,0 +1,18 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: layout.$spacing-01;
+  font-size: xx-small;
+  background-color: colors.$white;
+  border: solid 1px colors.$gray-30;
+  color: colors.$gray-50;
+}
+
+.emptyIllustration {
+  color: colors.$teal-70;
+}

package/src/benefits-package/forms/benefit-pre-auth-form.workspace.tsx

@@ -12,31 +12,33 @@ import {
 } from '@carbon/react';
 import { DocumentAttachment } from '@carbon/react/icons';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { DefaultWorkspaceProps, showSnackbar, useSession } from '@openmrs/esm-framework';
+import { DefaultWorkspaceProps, Patient, restBaseUrl, showSnackbar, useSession } from '@openmrs/esm-framework';
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { FC, useEffect, useRef, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
+import { Autosuggest } from '../../autosuggest/autosuggest.component';
+import PatientSearchInfo from '../../autosuggest/patient-search-info.component';
+import SearchEmptyState from '../../autosuggest/search-empty-state.component';
 import { useVisit } from '../../claims/dashboard/form/claims-form.resource';
 import { MAX_ALLOWED_FILE_SIZE } from '../../constants';
 import { useSystemSetting } from '../../hooks/getMflCode';
 import usePatientDiagnosis from '../../hooks/usePatientDiagnosis';
 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 SHABenefitPackangesAndInterventions from './packages-and-interventions-form.component';
+import { searchPatient } from './preauth.resources';
+import { mutate } from 'swr';
 
 type BenefitsPreAuth = z.infer<typeof preauthSchema>;
 
-interface BenefitPreAuthFormProps extends DefaultWorkspaceProps {
+interface BenefitPreAuthFormProps extends Pick<DefaultWorkspaceProps, 'closeWorkspace'> {
   patientUuid: string;
-  benefit: PatientBenefit;
-  onSuccess: (benefits: Array<PatientBenefit>) => void;
 }
 
-const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace, patientUuid }) => {
+const FormFields: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace, patientUuid }) => {
   const { t } = useTranslation();
   const { visits: recentVisit, isLoading, error: visitError } = useVisit(patientUuid);
   const { isLoading: diagnosesLoading, diagnoses } = usePatientDiagnosis(patientUuid);
@@ -93,6 +95,9 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
     try {
       await preAuthenticateBenefit(values, recentVisit, mflCodeValue);
       showSnackbar({ title: 'Success', kind: 'success', subtitle: 'Preauth Approved succesfully' });
+      mutate((key) => {
+        return typeof key === 'string' && key.startsWith(`${restBaseUrl}/claim`);
+      });
       closeWorkspace();
     } catch (error) {
       showSnackbar({ title: 'Failure', kind: 'error', subtitle: 'Error requesting Eligibility' });
@@ -251,4 +256,37 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
   );
 };
 
+const BenefitPreAuthForm: FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
+  const { t } = useTranslation();
+  const [patientUuid, setPatientUuid] = useState<string | null>(null);
+
+  return (
+    <>
+      {patientUuid ? (
+        <FormFields patientUuid={patientUuid} closeWorkspace={closeWorkspace} />
+      ) : (
+        <div className={styles.input}>
+          <Autosuggest
+            labelText={t('patient', 'Patient')}
+            placeholder={t('patientPlaceHolder', 'Search patient')}
+            getDisplayValue={(item: Patient) => item.person.display}
+            renderSuggestionItem={(item: Patient) => <PatientSearchInfo patient={item} />}
+            getFieldValue={(item: Patient) => item.uuid}
+            getSearchResults={searchPatient}
+            renderEmptyState={(value) => (
+              <SearchEmptyState searchValue={value} message={t('patientNotFound', 'Patient Not Found')} />
+            )}
+            onClear={() => setPatientUuid(null)}
+            onSuggestionSelected={(_, value) => {
+              if (value) {
+                setPatientUuid(value);
+              }
+            }}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
 export default BenefitPreAuthForm;

package/src/benefits-package/forms/benefits-pre-auth-form.scss

@@ -60,3 +60,7 @@
     padding-left: layout.$spacing-05;
   }
 }
+
+.input {
+  margin: 0 layout.$spacing-05 0 layout.$spacing-05;
+}

package/src/benefits-package/forms/preauth.resources.ts

@@ -0,0 +1,17 @@
+import { openmrsFetch, Patient, restBaseUrl } from '@openmrs/esm-framework';
+
+export async function fetchPerson(query: string, abortController: AbortController) {
+  const customREp = 'custom:(uuid,identifiers,person:(uuid,display,gender,age,birthdate,attributes))';
+  const patientsRes = await openmrsFetch<{ results: Array<Patient> }>(
+    `${restBaseUrl}/patient?q=${query}&v=${customREp}`,
+    {
+      signal: abortController.signal,
+    },
+  );
+  return patientsRes?.data?.results ?? [];
+}
+
+export const searchPatient = async (query: string) => {
+  const abortController = new AbortController();
+  return await fetchPerson(query, abortController);
+};

package/src/claims/claims-management/table/claim-table.component.tsx

@@ -45,6 +45,7 @@ const ClaimsTable: React.FC<TableProps> = ({
   emptyStateHeader,
   includeClaimCode = false,
   use = 'claim',
+  renderActionButton,
 }) => {
   const { claims, isLoading } = useFacilityClaims();
   const { t } = useTranslation();
@@ -140,6 +141,7 @@ const ClaimsTable: React.FC<TableProps> = ({
   if (claimsByUse.length === 0) {
     return (
       <div className={styles.claimsTable}>
+        <div className={styles.actionsContainer}>{renderActionButton && renderActionButton()}</div>
         <EmptyState displayText={t(emptyStateText)} headerTitle={t(emptyStateHeader)} />
       </div>
     );
@@ -219,6 +221,7 @@ const ClaimsTable: React.FC<TableProps> = ({
 
   return (
     <div className={styles.dataTableSkeleton}>
+      <div className={styles.actionsContainer}>{renderActionButton && renderActionButton()}</div>
       <div className={styles.tableHeader}>
         <CardHeader title={t(title)}>{''}</CardHeader>
         <ClaimsFilterHeader

package/src/claims/claims-management/table/claims-list-table.scss

@@ -26,6 +26,14 @@
   padding: layout.$spacing-05;
 }
 
+.actionsContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
 .claimStatus {
   display: flex;
   align-items: center;

package/src/claims/claims-management/table/preauth-table.tmp.component.tsx

@@ -1,7 +1,17 @@
 import React from 'react';
 import ClaimsTable from './claim-table.component';
+import { Button } from '@carbon/react';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { Add } from '@carbon/react/icons';
 
 const PreauthTableTemporary: React.FC = () => {
+  const handleLaunchPreAuthForm = () => {
+    launchWorkspace('benefits-pre-auth-form', {
+      workspaceTitle: t('preAuthForm', 'Pre Auth Form'),
+    });
+  };
+  const { t } = useTranslation();
   return (
     <ClaimsTable
       title="preauthsRequests"
@@ -9,6 +19,11 @@ const PreauthTableTemporary: React.FC = () => {
       emptyStateHeader="Preauth"
       includeClaimCode={false}
       use="preauthorization"
+      renderActionButton={() => (
+        <Button kind="primary" renderIcon={Add} onClick={handleLaunchPreAuthForm}>
+          {t('addPreauthRequest', 'Add Preauth Request')}
+        </Button>
+      )}
     />
   );
 };

package/src/types/index.ts

@@ -621,6 +621,7 @@ export interface TableProps {
   emptyStateHeader: string;
   includeClaimCode?: boolean;
   use?: string;
+  renderActionButton?: () => React.ReactNode;
 }
 
 export interface ProgressTracker {