@kenyaemr/esm-billing-app 5.4.2-pre.2135 → 5.4.2-pre.2138

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}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"slot":"billing-dashboard-slot"}},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","slot":"patient-chart-dashboard-slot","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","slot":"patient-chart-dashboard-slot","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":"require-billing-modal","component":"requirePaymentModal"},{"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":"billingOverviewLink","name":"billing-overview-link","order":0,"slot":"billing-dashboard-link-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-link-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-link-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-link-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-link-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-link-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-link-slot"},{"component":"claimsManagementSideNavGroup","name":"claims-management-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"claims-management","title":"Claims management Overview","slot":"case-management-slot"},"featureFlag":"healthInformationExchange"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","order":0,"slot":"claims-management-dashboard-link-slot"},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slot":"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"}],"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":"bill-deposit-workspace","component":"billDepositWorkspace","title":"Bill Deposit 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":"paid-bill-receipt-print-preview-modal","component":"paidBillReceiptPrintPreviewModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"}],"version":"5.4.2-pre.2135"}
+{"$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}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"slot":"billing-dashboard-slot"}},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","slot":"patient-chart-dashboard-slot","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","slot":"patient-chart-dashboard-slot","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":"require-billing-modal","component":"requirePaymentModal"},{"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":"billingOverviewLink","name":"billing-overview-link","order":0,"slot":"billing-dashboard-link-slot"},{"component":"billDepositDashboardLink","name":"bill-deposit-dashboard-link","slots":["billing-dashboard-link-slot","billing-dashboard-group-nav-slot"]},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-link-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-link-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-link-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-link-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-link-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-link-slot"},{"component":"claimsManagementSideNavGroup","name":"claims-management-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"claims-management","title":"Claims management Overview","slot":"case-management-slot"},"featureFlag":"healthInformationExchange"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","order":0,"slot":"claims-management-dashboard-link-slot"},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slot":"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"}],"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"}],"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":"paid-bill-receipt-print-preview-modal","component":"paidBillReceiptPrintPreviewModal"},{"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"}],"version":"5.4.2-pre.2138"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-billing-app",
-  "version": "5.4.2-pre.2135",
+  "version": "5.4.2-pre.2138",
   "description": "Billing app for KenyaEMR",
   "browser": "dist/kenyaemr-esm-billing-app.js",
   "main": "src/index.ts",

package/src/bill-deposit/components/dashboard/bill-deposit-dashboard.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { HomePictogram, PageHeader, PageHeaderContent } from '@openmrs/esm-framework';
+import styles from '../../styles/bill-deposit-dashboard.scss';
+import { Tabs, TabList, Tab, TabPanels, TabPanel, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { Search } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import BillDepositSearch from '../search/bill-deposit-search.component';
+
+const BillDepositDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <PageHeader className={styles.billDepositDashboard}>
+        <PageHeaderContent title="Bill Deposit" illustration={<HomePictogram />} />
+        <OverflowMenu flipped aria-label="overflow-menu">
+          <OverflowMenuItem itemText={t('addDeposit', 'Add Deposit')} />
+        </OverflowMenu>
+      </PageHeader>
+      <div className={styles.tabsContainer}>
+        <Tabs>
+          <TabList contained>
+            <Tab renderIcon={Search}>{t('search', 'Search')}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <BillDepositSearch />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default BillDepositDashboard;

package/src/bill-deposit/components/forms/add-deposit.workspace.scss

@@ -0,0 +1,26 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+}

package/src/bill-deposit/components/forms/add-deposit.workspace.tsx

@@ -0,0 +1,212 @@
+import React, { useEffect } from 'react';
+import {
+  type DefaultWorkspaceProps,
+  ResponsiveWrapper,
+  useLayoutType,
+  useSession,
+  showToast,
+  showSnackbar,
+  restBaseUrl,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import styles from './add-deposit.workspace.scss';
+import { ButtonSet, Button, InlineLoading, TextInput, NumberInput } from '@carbon/react';
+import classNames from 'classnames';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { mutate } from 'swr';
+import { type BillDeposit } from '../../types/bill-deposit.types';
+import { generateReferenceNumber, saveDeposit } from '../../utils/bill-deposit.utils';
+
+type AddDepositWorkspaceProps = DefaultWorkspaceProps & {
+  patientUuid: string;
+  deposit?: BillDeposit;
+};
+
+const depositFormSchema = z.object({
+  patient: z.string().min(1),
+  amount: z.number().min(1),
+  depositType: z.string().min(1),
+  referenceNumber: z.string().min(1),
+  description: z.string().min(1),
+});
+
+type DepositFormType = z.infer<typeof depositFormSchema>;
+
+const AddDepositWorkspace: React.FC<AddDepositWorkspaceProps> = ({
+  patientUuid,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+  deposit,
+}) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+  const isTablet = useLayoutType() === 'tablet';
+  const defaultValues = deposit
+    ? {
+        patient: deposit.patient.uuid,
+        amount: deposit.amount,
+        depositType: deposit.depositType,
+        referenceNumber: deposit.referenceNumber,
+        description: deposit.description,
+      }
+    : {
+        patient: patientUuid,
+        amount: 0,
+        depositType: '',
+        referenceNumber: generateReferenceNumber(location ?? ''),
+        description: '',
+      };
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty, errors },
+  } = useForm<DepositFormType>({
+    resolver: zodResolver(depositFormSchema),
+    defaultValues: defaultValues,
+  });
+
+  const onSubmit = async (data: DepositFormType) => {
+    const deposityPayload: Partial<BillDeposit> = {
+      patient: patientUuid as any,
+      amount: data.amount,
+      depositType: data.depositType,
+      referenceNumber: data.referenceNumber,
+      description: data.description,
+      status: deposit?.status ?? 'PENDING',
+    };
+
+    try {
+      const response = await saveDeposit(deposityPayload, deposit?.uuid);
+      if (response.status === 201 || response.status === 200) {
+        showSnackbar({
+          title: t('success', 'Success'),
+          kind: 'success',
+          subtitle:
+            response.status === 201
+              ? t('depositCreated', 'Deposit created successfully')
+              : t('depositSaved', 'Deposit saved successfully'),
+        });
+      }
+      mutate(
+        (key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/cashier/deposit?patient=${patientUuid}`),
+        undefined,
+        { revalidate: true },
+      );
+      closeWorkspaceWithSavedChanges();
+    } catch (error: any) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        kind: 'error',
+        subtitle: error?.message ?? t('depositSaveError', 'Error saving deposit'),
+      });
+    }
+  };
+
+  const handleError = (err) => {
+    showToast({
+      title: t('error', 'Error'),
+      kind: 'error',
+      description: t('formError', 'Please check the form for errors'),
+    });
+  };
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit, handleError)} className={styles.form}>
+      <div className={styles.formContainer}>
+        <ResponsiveWrapper>
+          <Controller
+            control={control}
+            name="depositType"
+            render={({ field }) => (
+              <TextInput
+                id="depositType"
+                placeholder={t('depositType', 'Deposit Type')}
+                labelText={t('depositType', 'Deposit Type')}
+                value={field.value}
+                onChange={field.onChange}
+                invalid={!!errors.depositType?.message}
+                invalidText={errors.depositType?.message}
+              />
+            )}
+          />
+        </ResponsiveWrapper>
+        <ResponsiveWrapper>
+          <Controller
+            control={control}
+            name="amount"
+            render={({ field }) => (
+              <NumberInput
+                id="amount"
+                invalidText={errors.amount?.message}
+                label={t('amount', 'Amount')}
+                onChange={(e, { value }) => field.onChange(parseInt(value, 10))}
+                size="md"
+                step={1}
+                value={field.value}
+              />
+            )}
+          />
+        </ResponsiveWrapper>
+        <ResponsiveWrapper>
+          <Controller
+            control={control}
+            name="referenceNumber"
+            render={({ field }) => (
+              <TextInput
+                id="referenceNumber"
+                placeholder={t('referenceNumber', 'Reference Number')}
+                labelText={t('referenceNumber', 'Reference Number')}
+                value={field.value}
+                onChange={field.onChange}
+                invalid={!!errors.referenceNumber?.message}
+                invalidText={errors.referenceNumber?.message}
+                readOnly
+              />
+            )}
+          />
+        </ResponsiveWrapper>
+        <ResponsiveWrapper>
+          <Controller
+            control={control}
+            name="description"
+            render={({ field }) => (
+              <TextInput
+                id="description"
+                placeholder={t('description', 'Description')}
+                labelText={t('description', 'Description')}
+                value={field.value}
+                onChange={field.onChange}
+                invalid={!!errors.description?.message}
+                invalidText={errors.description?.message}
+              />
+            )}
+          />
+        </ResponsiveWrapper>
+      </div>
+      <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+        <Button style={{ maxWidth: '50%' }} kind="secondary" onClick={closeWorkspace}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={isSubmitting || !isDirty} style={{ maxWidth: '50%' }} kind="primary" type="submit">
+          {isSubmitting ? (
+            <span style={{ display: 'flex', justifyItems: 'center' }}>
+              {t('submitting', 'Submitting...')} <InlineLoading status="active" iconDescription="Loading" />
+            </span>
+          ) : (
+            t('saveAndClose', 'Save & close')
+          )}
+        </Button>
+      </ButtonSet>
+    </form>
+  );
+};
+
+export default AddDepositWorkspace;

package/src/{billing-form/bill-deposit/bill-deposit.scss → bill-deposit/components/forms/deposit-transactions/deposit-transaction.workspace.scss}

@@ -10,31 +10,24 @@
 }
 
 .formContainer {
-  display: flex;
-  flex-direction: column;
   margin: layout.$spacing-05;
-  row-gap: layout.$spacing-03;
-}
-
-.formField {
-  margin-bottom: layout.$spacing-05;
-  @include type.type-style('label-02');
-  color: colors.$gray-70;
-}
-
-.button {
-  height: layout.$spacing-10;
   display: flex;
-  align-content: flex-start;
-  align-items: baseline;
-  min-width: 50%;
+  flex-direction: column;
+  gap: layout.$spacing-05;
 }
 
 .tablet {
   padding: layout.$spacing-06 layout.$spacing-05;
-  background-color: colors.$white-0;
+  background-color: colors.$white;
 }
 
 .desktop {
   padding: 0;
 }
+
+.loadingContainer {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/bill-deposit/components/forms/deposit-transactions/deposit-transaction.workspace.tsx

@@ -0,0 +1,254 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DefaultWorkspaceProps,
+  ResponsiveWrapper,
+  restBaseUrl,
+  showSnackbar,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import { usePatientBills } from '../../../../prompt-payment/prompt-payment.resource';
+import { type LineItem, PaymentStatus } from '../../../../types';
+import { ButtonSet, Button, InlineLoading, ComboBox, NumberInput, TextInput, InlineNotification } from '@carbon/react';
+import { useForm, Controller } from 'react-hook-form';
+import styles from './deposit-transaction.workspace.scss';
+import classNames from 'classnames';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { convertToCurrency, extractString } from '../../../../helpers';
+import uniqBy from 'lodash-es/uniqBy';
+import { mutate } from 'swr';
+import { BILL_DEPOSIT_TRANSACTION_TYPES } from '../../../constants/bill-deposit.constants';
+import { type FormattedDeposit } from '../../../types/bill-deposit.types';
+import { addDepositTransaction } from '../../../utils/bill-deposit.utils';
+
+type DepositTransactionWorkspaceProps = DefaultWorkspaceProps & {
+  deposit: FormattedDeposit;
+  patientUuid: string;
+};
+
+const DepositTransactionWorkspace: React.FC<DepositTransactionWorkspaceProps> = ({
+  deposit,
+  patientUuid,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { isLoading, patientBills, error } = usePatientBills(patientUuid);
+  const pendingLineItems: Array<LineItem> = uniqBy(
+    patientBills
+      ?.filter((bill) => bill.status !== PaymentStatus.PAID && bill.status !== PaymentStatus.EXEMPTED)
+      .map((bill) => bill.lineItems)
+      .flat() ?? [],
+    'uuid',
+  );
+
+  const transactionTypes = Object.entries(BILL_DEPOSIT_TRANSACTION_TYPES).map(([key, value]) => ({
+    key,
+    value,
+  }));
+
+  const depositTransactionFormSchema = z.object({
+    billLineItem: z.string().min(1),
+    amount: z
+      .number()
+      .min(1)
+      .max(deposit?.availableBalance ?? 0),
+    transactionType: z.string().min(1),
+    reason: z.string().min(1),
+  });
+  type DepositTransactionFormType = z.infer<typeof depositTransactionFormSchema>;
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isDirty, isSubmitting, errors },
+  } = useForm({
+    resolver: zodResolver(depositTransactionFormSchema),
+    defaultValues: {
+      billLineItem: '',
+      amount: 0,
+      transactionType: '',
+      reason: '',
+    },
+  });
+
+  const onSubmit = async (data: DepositTransactionFormType) => {
+    const payload = {
+      billLineItem: data.billLineItem,
+      amount: parseFloat(data.amount.toString()),
+      transactionType: data.transactionType,
+      reason: data.reason,
+    };
+
+    try {
+      const response = await addDepositTransaction(deposit.id, payload);
+      if (response.ok) {
+        showSnackbar({
+          title: t('transactionAdded', 'Transaction added successfully'),
+          kind: 'success',
+          subtitle: t('transactionAddedDetails', 'The transaction has been added successfully.'),
+          isLowContrast: true,
+          timeoutInMs: 5000,
+          autoClose: true,
+        });
+        mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/cashier/deposit`), undefined, {
+          revalidate: true,
+        });
+      } else {
+        showSnackbar({
+          title: t('errorAddingTransaction', 'Error adding transaction'),
+          kind: 'error',
+          subtitle: t('errorAddingTransactionDetails', 'Please try again later. Check the console for more details.'),
+          isLowContrast: true,
+          timeoutInMs: 5000,
+          autoClose: true,
+        });
+      }
+    } catch (error) {
+      console.error('Error submitting form:', error);
+      showSnackbar({
+        title: t('errorSubmittingForm', 'Error submitting form'),
+        kind: 'error',
+        subtitle: t('errorSubmittingFormDetails', 'Please try again later. Check the console for more details.'),
+        isLowContrast: true,
+        timeoutInMs: 5000,
+        autoClose: true,
+      });
+    } finally {
+      closeWorkspaceWithSavedChanges();
+    }
+  };
+  const handleError = (error: any) => {
+    console.error('Error submitting form:', error);
+  };
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty]);
+
+  if (error) {
+    return (
+      <InlineNotification
+        aria-label="closes notification"
+        kind="error"
+        lowContrast={true}
+        statusIconDescription="notification"
+        subtitle={error.message ?? 'An error occurred while fetching the patient bills'}
+        title={t('error', 'Error')}
+      />
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className={styles.loadingContainer}>
+        <InlineLoading status="active" iconDescription="Loading" />
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit, handleError)} className={styles.form}>
+      <div className={styles.formContainer}>
+        <ResponsiveWrapper>
+          <Controller
+            control={control}
+            name="billLineItem"
+            render={({ field }) => (
+              <ComboBox
+                id="billLineItem"
+                itemToString={(item: LineItem) =>
+                  item ? `${extractString(item.billableService)} - ${convertToCurrency(item.price)}` : ''
+                }
+                items={pendingLineItems ?? []}
+                onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
+                placeholder={t('selectBillLineItem', 'Select bill line item')}
+                invalid={!!errors.billLineItem}
+                invalidText={errors.billLineItem?.message}
+                titleText={t('billLineItem', 'Bill line item')}
+                onToggleClick={() => {}}
+              />
+            )}
+          />
+        </ResponsiveWrapper>
+        <ResponsiveWrapper>
+          <Controller
+            control={control}
+            name="amount"
+            render={({ field }) => (
+              <NumberInput
+                id="amount"
+                invalid={!!errors.amount}
+                invalidText={errors.amount?.message}
+                label={t('amount', 'Amount')}
+                onChange={({ target }) => field.onChange(Number(target.value))}
+                max={deposit?.availableBalance}
+                min={0}
+                size="md"
+                hideSteppers
+                value={field.value}
+              />
+            )}
+          />
+        </ResponsiveWrapper>
+        <ResponsiveWrapper>
+          <Controller
+            control={control}
+            name="transactionType"
+            render={({ field }) => (
+              <ComboBox
+                id="transactionType"
+                itemToString={(item) => item?.key}
+                items={transactionTypes ?? []}
+                onChange={({ selectedItem }) => field.onChange(selectedItem.value)}
+                placeholder={t('selectTransactionType', 'Select transaction type')}
+                invalid={!!errors.transactionType}
+                invalidText={errors.transactionType?.message}
+                titleText={t('transactionType', 'Transaction type')}
+                size="md"
+              />
+            )}
+          />
+        </ResponsiveWrapper>
+        <ResponsiveWrapper>
+          <Controller
+            control={control}
+            name="reason"
+            render={({ field }) => (
+              <TextInput
+                labelText={t('reason', 'Reason')}
+                id="reason"
+                invalid={!!errors.reason}
+                invalidText={errors.reason?.message}
+                label={t('reason', 'Reason')}
+                onChange={({ target }) => field.onChange(target.value)}
+                max={deposit?.availableBalance}
+                size="md"
+                value={field.value}
+              />
+            )}
+          />
+        </ResponsiveWrapper>
+      </div>
+      <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+        <Button style={{ maxWidth: '50%' }} kind="secondary" onClick={closeWorkspace}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={isSubmitting || !isDirty} style={{ maxWidth: '50%' }} kind="primary" type="submit">
+          {isSubmitting ? (
+            <span style={{ display: 'flex', justifyItems: 'center' }}>
+              {t('submitting', 'Submitting...')} <InlineLoading status="active" iconDescription="Loading" />
+            </span>
+          ) : (
+            t('saveAndClose', 'Save & close')
+          )}
+        </Button>
+      </ButtonSet>
+    </form>
+  );
+};
+
+export default DepositTransactionWorkspace;

package/src/bill-deposit/components/modal/delete-deposit.modal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { deleteDeposit } from '../../utils/bill-deposit.utils';
+import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import { mutate } from 'swr';
+
+type DeleteDepositModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  depositUuid: string;
+};
+
+const DeleteDepositModal: React.FC<DeleteDepositModalProps> = ({ isOpen, onClose, depositUuid }) => {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleDelete = async () => {
+    setIsLoading(true);
+    const response = await deleteDeposit(depositUuid);
+    if (response.status === 204) {
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: t('depositDeleted', 'Deposit deleted successfully'),
+      });
+      mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/cashier/deposit`), undefined, {
+        revalidate: true,
+      });
+
+      onClose();
+    } else {
+      showSnackbar({
+        title: t('error', 'Error'),
+        kind: 'error',
+        subtitle: t('depositDeleteError', 'Error deleting deposit'),
+      });
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <div>
+      <ModalHeader onClose={onClose}>{t('deleteDeposit', 'Delete Deposit')}</ModalHeader>
+      <ModalBody>{t('deleteDepositConfirmation', 'Are you sure you want to delete this deposit?')}</ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={onClose}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete} disabled={isLoading}>
+          {t('delete', 'Delete')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default DeleteDepositModal;