@kenyaemr/esm-billing-app 5.4.2-pre.2710 → 5.4.2-pre.2714

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":"addCommodityForm","title":"Create Charge Item 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":"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.2710"}
+{"$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":"addCommodityForm","title":"Create Charge Item 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":"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.2714"}

package/package.json

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

package/src/billing-dashboard/billing-dashboard.scss

@@ -29,7 +29,8 @@
 .clockOutStrip {
   display: flex;
   justify-content: space-between;
-  padding: layout.$spacing-05 layout.$spacing-05 0 layout.$spacing-05;
+  padding: layout.$spacing-03 layout.$spacing-05;
+  border-bottom: 1px solid colors.$gray-20;
 }
 
 .clockOutInfo {
@@ -47,8 +48,25 @@
     color: colors.$gray-60;
   }
 
+  .clockInTime {
+    @include type.type-style('body-01');
+    color: colors.$gray-90;
+  }
+
   .cashPointName {
     font-size: smaller;
     color: colors.$gray-60;
   }
 }
+
+.clockInSkeleton,
+.clockIn {
+  margin-right: layout.$spacing-05;
+}
+
+.clockInContainer {
+  display: flex;
+  justify-content: flex-end;
+  padding: layout.$spacing-03;
+  border-bottom: 1px solid colors.$gray-20;
+}

package/src/billing-dashboard/clock-in-button.component.tsx

@@ -0,0 +1,40 @@
+import { Button, ButtonSkeleton } from '@carbon/react';
+import { IbmCloudLogging } from '@carbon/react/icons';
+import { showModal, useLayoutType } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useClockInStatus } from '../bill-administration/payment-points/use-clock-in-status';
+import styles from './billing-dashboard.scss';
+
+const ClockInButton = () => {
+  const { t } = useTranslation();
+  const { isClockedIn, isLoading } = useClockInStatus();
+  const controlSize = useLayoutType() === 'tablet' ? 'md' : 'sm';
+
+  const openClockInModal = () => {
+    const dispose = showModal('clock-in-modal', {
+      closeModal: () => dispose(),
+    });
+  };
+
+  if (isLoading) {
+    return <ButtonSkeleton className={styles.clockInSkeleton} />;
+  }
+
+  if (isClockedIn) {
+    return null;
+  }
+
+  return (
+    <Button
+      onClick={openClockInModal}
+      className={styles.clockIn}
+      renderIcon={IbmCloudLogging}
+      iconDescription="Clock In"
+      size={controlSize}>
+      {t('clockIn', 'Clock In')}
+    </Button>
+  );
+};
+
+export default ClockInButton;

package/src/billing-dashboard/clock-out-strip.component.tsx

@@ -1,18 +1,25 @@
-import { Button } from '@carbon/react';
-import { Alarm, IbmCloudSysdigSecure, Shuffle } from '@carbon/react/icons';
-import { showModal } from '@openmrs/esm-framework';
-import dayjs from 'dayjs';
 import React from 'react';
+import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { IbmCloudSysdigSecure, Shuffle, Location as LocationIcon } from '@carbon/react/icons';
+import { formatDate, parseDate, showModal, useLayoutType } from '@openmrs/esm-framework';
+
 import { useClockInStatus } from '../bill-administration/payment-points/use-clock-in-status';
+
+import ClockInButton from './clock-in-button.component';
 import styles from './billing-dashboard.scss';
 
 export const ClockOutStrip = () => {
   const { isClockedIn, globalActiveSheet } = useClockInStatus();
+  const controlSize = useLayoutType() === 'tablet' ? 'md' : 'sm';
   const { t } = useTranslation();
 
   if (!isClockedIn) {
-    return null;
+    return (
+      <div className={styles.clockInContainer}>
+        <ClockInButton />
+      </div>
+    );
   }
 
   const openClockOutModal = () => {
@@ -30,20 +37,24 @@ export const ClockOutStrip = () => {
   return (
     <div className={styles.clockOutStrip}>
       <div className={styles.clockOutInfo}>
-        <Alarm />
         <p className={styles.clockInTime}>
           {t('clockInTime', 'Clocked in on {{clockInDate}}', {
-            clockInDate: dayjs(globalActiveSheet.clockIn).format('D MMM YYYY, HH:mm A'),
+            clockInDate: formatDate(parseDate(globalActiveSheet.clockIn), { noToday: true, mode: 'wide' }),
           })}
         </p>
         <span className={styles.middot}>&middot;</span>
         <p className={styles.cashPointName}>{globalActiveSheet.cashPoint.name}</p>
       </div>
       <div>
-        <Button kind="ghost" renderIcon={Shuffle} onClick={openClockInModal}>
+        <Button size={controlSize} kind="ghost" renderIcon={Shuffle} onClick={openClockInModal}>
           {t('switchPaymentPoint', 'Switch Payment Point')}
         </Button>
-        <Button className={styles.clockIn} onClick={openClockOutModal} kind="danger" renderIcon={IbmCloudSysdigSecure}>
+        <Button
+          size={controlSize}
+          className={styles.clockIn}
+          onClick={openClockOutModal}
+          kind="danger"
+          renderIcon={IbmCloudSysdigSecure}>
           {t('clockOut', 'Clock Out')}
         </Button>
       </div>

package/src/billing-form/billing-form.component.tsx

@@ -1,3 +1,7 @@
+import React, { useState } from 'react';
+import { mutate } from 'swr';
+import { getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
+import { type DefaultWorkspaceProps, showSnackbar, useConfig } from '@openmrs/esm-framework';
 import {
   Button,
   ButtonSet,
@@ -12,34 +16,31 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
-import React, { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
+import { TrashCan } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+
 import { Autosuggest } from '../autosuggest/autosuggest.component';
-import { billingFormSchema, processBillItems } from '../billing.resource';
 import useBillableServices from '../hooks/useBillableServices';
-import { BillingService } from '../types';
+import { billingFormSchema, processBillItems } from '../billing.resource';
+import { type BillingService } from '../types';
+import { type BillingConfig } from '../config-schema';
+
 import styles from './billing-form.scss';
-import { mutate } from 'swr';
-import { showSnackbar, useConfig } from '@openmrs/esm-framework';
-import { BillingConfig } from '../config-schema';
-import { TrashCan } from '@carbon/react/icons';
 
-type BillingFormProps = {
+type BillingFormProps = DefaultWorkspaceProps & {
   patientUuid: string;
-  closeWorkspace: () => void;
 };
 
 type FormType = z.infer<typeof billingFormSchema>;
 
-const BillingForm: React.FC<BillingFormProps> = ({ closeWorkspace }) => {
+const BillingForm: React.FC<BillingFormProps> = ({ closeWorkspace, patientUuid: patientUuidProp }) => {
   const { t } = useTranslation();
-  const patientUuid = getPatientUuidFromStore();
+  const patientUuid = patientUuidProp || getPatientUuidFromStore();
   const { billableServices, error, isLoading } = useBillableServices();
-  const [searchVal, setsearchVal] = useState('');
+  const [searchTermValue, setSearchTermValue] = useState('');
   const { cashPointUuid, cashierUuid } = useConfig<BillingConfig>();
 
   const form = useForm<FormType>({
@@ -73,42 +74,49 @@ const BillingForm: React.FC<BillingFormProps> = ({ closeWorkspace }) => {
   };
 
   const handleSearch = async (searchText: string) => {
-    setsearchVal(searchText);
+    setSearchTermValue(searchText);
     return billableServices.filter(
       (service) =>
         service?.name.toLocaleLowerCase().includes(searchText.toLocaleLowerCase()) &&
-        lineItemsOnservable.findIndex((item) => item.billableService === service?.uuid) === -1,
+        lineItemsToWatch.findIndex((item) => item.billableService === service?.uuid) === -1,
     );
   };
 
-  const lineItemsOnservable = form.watch('lineItems');
+  const lineItemsToWatch = form.watch('lineItems');
+
+  const handleSuggestionSelected = (field: string, value: string) => {
+    if (value) {
+      form.setValue('lineItems', [
+        ...lineItemsToWatch,
+        {
+          billableService: value,
+          lineItemOrder: 0,
+          quantity: 1,
+          price: 0,
+          paymentStatus: 'PENDING',
+          priceName: 'Default',
+        },
+      ]);
+    }
+    setSearchTermValue('');
+  };
+
+  const handleError = (errors: any) => {
+    console.error('errors', errors);
+    showSnackbar({ title: t('error', 'Error'), kind: 'error', subtitle: JSON.stringify(errors) });
+  };
 
   return (
-    <Form onSubmit={form.handleSubmit(onSubmit)}>
+    <Form onSubmit={form.handleSubmit(onSubmit, handleError)}>
       <Stack gap={4} className={styles.grid}>
         <Column>
           <Autosuggest
-            value={searchVal}
-            onClear={() => setsearchVal('')}
+            value={searchTermValue}
+            onClear={() => setSearchTermValue('')}
             getDisplayValue={(item: BillingService) => item.name}
             getFieldValue={(item: BillingService) => item.uuid}
             getSearchResults={handleSearch}
-            onSuggestionSelected={(field, value) => {
-              if (value) {
-                form.setValue('lineItems', [
-                  ...lineItemsOnservable,
-                  {
-                    billableService: value,
-                    lineItemOrder: 0,
-                    quantity: 1,
-                    price: 0,
-                    paymentStatus: 'PENDING',
-                    priceName: 'Default',
-                  },
-                ]);
-              }
-              setsearchVal('');
-            }}
+            onSuggestionSelected={handleSuggestionSelected}
             labelText={t('search', 'Search')}
             placeholder={t('searchPlaceHolder', 'Find your billables here...')}
           />
@@ -117,16 +125,16 @@ const BillingForm: React.FC<BillingFormProps> = ({ closeWorkspace }) => {
           <Table aria-label="sample table">
             <TableHead>
               <TableRow>
-                <TableHeader>Item</TableHeader>
-                <TableHeader>Quantity</TableHeader>
-                <TableHeader>PaymentMethod</TableHeader>
-                <TableHeader>Price</TableHeader>
-                <TableHeader>Total</TableHeader>
+                <TableHeader>{t('item', 'Item')}</TableHeader>
+                <TableHeader>{t('quantity', 'Quantity')}</TableHeader>
+                <TableHeader>{t('paymentMethod', 'Payment Method')}</TableHeader>
+                <TableHeader>{t('price', 'Price')}</TableHeader>
+                <TableHeader>{t('total', 'Total')}</TableHeader>
                 <TableHeader></TableHeader>
               </TableRow>
             </TableHead>
             <TableBody>
-              {lineItemsOnservable.map(({ billableService, quantity, price }, index) => {
+              {lineItemsToWatch.map(({ billableService, quantity, price }, index) => {
                 const service = billableServices.find((serv) => serv.uuid === billableService);
                 return (
                   <TableRow key={billableService}>
@@ -180,12 +188,13 @@ const BillingForm: React.FC<BillingFormProps> = ({ closeWorkspace }) => {
                     <TableCell id={service?.name + 'Delete'}>
                       <Button
                         renderIcon={TrashCan}
+                        iconDescription={t('delete', 'Delete')}
                         kind="danger"
                         hasIconOnly
                         onClick={() => {
                           form.setValue(
                             'lineItems',
-                            lineItemsOnservable.filter((item) => item.billableService !== billableService),
+                            lineItemsToWatch.filter((item) => item.billableService !== billableService),
                           );
                         }}
                       />
@@ -198,11 +207,11 @@ const BillingForm: React.FC<BillingFormProps> = ({ closeWorkspace }) => {
                 <TableCell></TableCell>
                 <TableCell></TableCell>
 
-                <TableCell style={{ fontWeight: 'bold' }}>Grand Total:</TableCell>
+                <TableCell style={{ fontWeight: 'bold' }}>{t('grandTotal', 'Grand Total')}:</TableCell>
                 <TableCell id="GrandTotalSum">
-                  {lineItemsOnservable.reduce((prev, curr) => {
-                    const totoal = curr.quantity * curr.price;
-                    return prev + totoal;
+                  {lineItemsToWatch.reduce((prev, curr) => {
+                    const total = curr.quantity * curr.price;
+                    return prev + total;
                   }, 0)}
                 </TableCell>
                 <TableCell></TableCell>
@@ -213,7 +222,7 @@ const BillingForm: React.FC<BillingFormProps> = ({ closeWorkspace }) => {
       </Stack>
 
       <ButtonSet className={styles.buttonSet}>
-        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
           {t('discard', 'Discard')}
         </Button>
         <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>

package/src/billing-tabs/billing-tabs.scss

@@ -1,6 +1,8 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 
-.clockInSkeleton,
-.clockIn {
-  margin-right: layout.$spacing-05;
+.tabsContainer {
+  border: 1px solid colors.$gray-20;
+  margin: layout.$spacing-05;
+  padding-top: layout.$spacing-05;
 }

package/src/billing-tabs/billling-tabs.component.tsx

@@ -1,15 +1,15 @@
-import { Button, ButtonSkeleton, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
-import { IbmCloudLogging } from '@carbon/react/icons';
-import { showModal } from '@openmrs/esm-framework';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { List, Search, BaggageClaim, TwoFactorAuthentication } from '@carbon/react/icons';
+
 import BillsTable from '../bills-table/bills-table.component';
 import PatientBillsScreen from '../past-patient-bills/patient-bills-dashboard/patient-bills-dashboard';
-import { useClockInStatus } from '../bill-administration/payment-points/use-clock-in-status';
-import styles from './billing-tabs.scss';
 import ClaimsManagementTable from '../claims/claims-management/table/claims-list-table.component';
 import PreauthTableTemporary from '../claims/claims-management/table/preauth-table.tmp.component';
 
+import styles from './billing-tabs.scss';
+
 const BillingTabs = () => {
   const { t } = useTranslation();
   const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
@@ -18,44 +18,23 @@ const BillingTabs = () => {
     setActiveTabIndex(selectedIndex);
   };
 
-  const { isClockedIn, isLoading } = useClockInStatus();
-
-  const openClockInModal = () => {
-    const dispose = showModal('clock-in-modal', {
-      closeModal: () => dispose(),
-    });
-  };
-
   return (
-    <div data-testid="BillingsList-list">
+    <div className={styles.tabsContainer} data-testid="BillingsList-list">
       <Tabs selectedIndex={activeTabIndex} onChange={handleTabChange}>
         <div style={{ display: 'flex' }}>
-          <TabList style={{ paddingLeft: '1rem' }} aria-label="Billing tabs" contained>
-            <Tab>{t('todayBills', "Today's bills")}</Tab>
-            <Tab>{t('patientBills', 'Patient Bill')}</Tab>
-            <Tab>{t('claims', 'Claims')}</Tab>
-            <Tab>{t('preAuth', 'Pre-Authorization')}</Tab>
+          <TabList style={{ paddingLeft: '1rem' }} aria-label={t('billingTabs', 'Billing tabs')} contained>
+            <Tab renderIcon={Search}>{t('patientBills', 'Patient Bills')}</Tab>
+            <Tab renderIcon={List}>{t('billsToday', 'Bills Today')}</Tab>
+            <Tab renderIcon={BaggageClaim}>{t('claims', 'Claims')}</Tab>
+            <Tab renderIcon={TwoFactorAuthentication}>{t('preAuth', 'Pre-Authorization')}</Tab>
           </TabList>
-          {isLoading ? (
-            <ButtonSkeleton className={styles.clockInSkeleton} />
-          ) : (
-            !isClockedIn && (
-              <Button
-                onClick={openClockInModal}
-                className={styles.clockIn}
-                renderIcon={IbmCloudLogging}
-                iconDescription="Clock In">
-                Clock In
-              </Button>
-            )
-          )}
         </div>
         <TabPanels>
           <TabPanel>
-            <BillsTable />
+            <PatientBillsScreen />
           </TabPanel>
           <TabPanel>
-            <PatientBillsScreen />
+            <BillsTable />
           </TabPanel>
           <TabPanel>
             <ClaimsManagementTable />

package/src/past-patient-bills/patient-bills.component.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useMemo } from 'react';
 import {
   DataTable,
   TableContainer,
@@ -11,15 +11,18 @@ import {
   Button,
   InlineLoading,
 } from '@carbon/react';
-import { Close } from '@carbon/react/icons';
-import { convertToCurrency } from '../helpers';
+import { Add, Close } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { MappedBill } from '../types';
-import styles from './patient-bills.scss';
-import { ConfigurableLink, getPatientName, usePatient } from '@openmrs/esm-framework';
+import { ConfigurableLink, getPatientName, usePatient, setCurrentVisit } from '@openmrs/esm-framework';
+import { getPatientChartStore, useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
 import capitalize from 'lodash/capitalize';
+
+import { convertToCurrency } from '../helpers';
+import { type MappedBill } from '../types';
 import EmptyPatientBill from './patient-bills-dashboard/empty-patient-bill.component';
 
+import styles from './patient-bills.scss';
+
 type PatientBillsProps = {
   patientUuid: string;
   bills: Array<MappedBill>;
@@ -125,6 +128,20 @@ export const PatientHeader: React.FC<PatientHeaderProps> = ({ patient, onCancel
   const { t } = useTranslation();
   const patientName = getPatientName(patient);
   const identifier = patient?.identifier[0]?.value ?? '--';
+  const state = useMemo(() => ({ patient, patientUuid: patient.id }), [patient]);
+  const launchPatientWorkspace = useLaunchWorkspaceRequiringVisit('billing-form');
+
+  const handleAddNewBill = () => {
+    setCurrentVisit(patient.id, null);
+    launchPatientWorkspace({ workspaceTitle: t('billingForm', 'Billing Form'), patientUuid: patient.id, patient });
+  };
+
+  useEffect(() => {
+    getPatientChartStore().setState({ ...state });
+    return () => {
+      getPatientChartStore().setState({});
+    };
+  }, [state]);
 
   return (
     <div className={styles.patientHeaderContainer}>
@@ -137,6 +154,9 @@ export const PatientHeader: React.FC<PatientHeaderProps> = ({ patient, onCancel
         <Button kind="ghost" onClick={() => onCancel('')} renderIcon={Close}>
           {t('close', 'Close')}
         </Button>
+        <Button kind="ghost" onClick={handleAddNewBill} renderIcon={Add}>
+          {t('addNewBillItem', 'Add New Bill Item')}
+        </Button>
       </div>
     </div>
   );

package/translations/am.json

@@ -6,6 +6,7 @@
   "addBill": "የሂሳብ ዕቃ(ዎች) ይጨምሩ",
   "addCommodityChargeItem": "የክፍያ ዕቃ ይጨምሩ",
   "additionalPayment": "ተቀማጭ ክፍያ",
+  "addNewBillItem": "አዲስ የክፍያ ዕቃ ጨምር",
   "addPaymentMode": "Add Payment Mode",
   "addPaymentOptions": "የክፍያ አማራጭ ይጨምሩ",
   "addSchema": "ስኬማ ይጨምሩ",
@@ -40,6 +41,7 @@
   "billingForm": "የሂሳብ ቅጽ",
   "billingService": "አገልግሎት",
   "billingStatus": "የሂሳብ ሁኔታ",
+  "billingTabs": "የክፍያ ትሮች",
   "billItem": "የሂሳብ ዕቃ",
   "billItems": "ሂሳብ አስቀምጥ",
   "billList": "የሂሳብ ዝርዝር",
@@ -48,6 +50,7 @@
   "billPaymentRequiredMessage": "አሁን ያለው ታካሚ ቀሪ ሂሳብ አለው። ታካሚው ሂሳቡን እንዲከፍል ይመከራል።",
   "billsList": "የሂሳብ ዝርዝር",
   "billStatement": "የሂሳብ መግለጫ",
+  "billsToday": "የሂሳብ ቀናት",
   "billTotal": "የሂሳብ ጠቅላላ",
   "bulkUpload": "ብዛት ማስገባት",
   "cancel": "ይሰርዝ",
@@ -80,6 +83,7 @@
   "clear": "ይጽዳ",
   "clearSearch": "የፍለጋ ግቤት ይጽዳ",
   "clinicalCharges": "Clinical Charges",
+  "clockIn": "መቁጠሪያ ተጀመረ",
   "clockInTime": "በ{{clockInDate}} ሰዓት መቁጠሪያ ተጀመረ",
   "clockOut": "ሰዓት መውጣት",
   "close": "ይዝጋ",
@@ -145,6 +149,7 @@
   "filterTable": "ሰንጠረዥ ያጣሩ",
   "finalDiagnosis": "የመጨረሻ ምርመራ",
   "formTitle": "የቅጽ ዝርዝሮችን ይሙሉ",
+  "grandTotal": "ጠቅላላ ጠቅላላ",
   "hieVerificationFailure": "HIE ማረጋገጫ ውድቀት",
   "home": "ቤት",
   "identifier": "መለያ",
@@ -320,7 +325,6 @@
   "successfullyCreatedPaymentPoint": "የክፍያ ነጥብ በተሳካ ሁኔታ ተፈጥሯል",
   "switchPaymentPoint": "የክፍያ ነጥብ ያረጋግጡ",
   "timesheet": "የሰዓት ሉህ",
-  "todayBills": "የዛሬ ሂሳቦች",
   "todayExemptedBills": "የዛሬ ነጻ የወጡ ሂሳቦች",
   "todayPaidBills": "የዛሬ የተከፈሉ ሂሳቦች",
   "todayPendingBills": "የዛሬ በመጠባበቅ ላይ ያሉ ሂሳቦች",

package/translations/en.json

@@ -6,6 +6,7 @@
   "addBill": "Add bill item(s)",
   "addCommodityChargeItem": "Add charge item",
   "additionalPayment": "Additional Payment",
+  "addNewBillItem": "Add New Bill Item",
   "addPaymentMode": "Add Payment Mode",
   "addPaymentOptions": "Add payment option",
   "addSchema": "Add Schema",
@@ -40,6 +41,7 @@
   "billingForm": "Billing Form",
   "billingService": "Service",
   "billingStatus": "Billing status",
+  "billingTabs": "Billing tabs",
   "billItem": "Bill Item",
   "billItems": "Save Bill",
   "billList": "Bill list",
@@ -48,6 +50,7 @@
   "billPaymentRequiredMessage": "The current patient has pending bill. Advice patient to settle bill.",
   "billsList": "Bill list",
   "billStatement": "Bill Statement",
+  "billsToday": "Bills Today",
   "billTotal": "Bill total",
   "bulkUpload": "Bulk Upload",
   "cancel": "Cancel",
@@ -80,6 +83,7 @@
   "clear": "Clear",
   "clearSearch": "Clear search input",
   "clinicalCharges": "Clinical Charges",
+  "clockIn": "Clock In",
   "clockInTime": "Clocked in on {{clockInDate}}",
   "clockOut": "Clock Out",
   "close": "Close",
@@ -145,6 +149,7 @@
   "filterTable": "Filter table",
   "finalDiagnosis": "Final Diagnosis",
   "formTitle": "Fill in the form details",
+  "grandTotal": "Grand Total",
   "hieVerificationFailure": "HIE verification failure",
   "home": "Home",
   "identifier": "Identifier",
@@ -320,7 +325,6 @@
   "successfullyCreatedPaymentPoint": "Successfully created payment point",
   "switchPaymentPoint": "Switch Payment Point",
   "timesheet": "Timesheet",
-  "todayBills": "Today's bills",
   "todayExemptedBills": "Today's Exempted Bills",
   "todayPaidBills": "Today's Paid Bills",
   "todayPendingBills": "Today's Pending Bills",