@kenyaemr/esm-billing-app 5.4.1-pre.2075 → 5.4.1-pre.2083

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":{"name":"billing","title":"billing","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":"retry-claim-request-modal","component":"retryClaimRequestModal"},{"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.1-pre.2075"}
+{"$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":{"name":"billing","title":"billing","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":"retry-claim-request-modal","component":"retryClaimRequestModal"},{"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.1-pre.2083"}

package/package.json

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

package/src/billable-services/bill-manager/workspaces/create-bill/create-bill.workspace.test.tsx

@@ -0,0 +1,271 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useConfig, useLayoutType } from '@openmrs/esm-framework';
+import { type Order, type OrderAction } from '@openmrs/esm-patient-common-lib';
+import { processBillItems } from '../../../../billing.resource';
+import CreateBillWorkspace from './create-bill.workspace';
+import { useBillableItem } from '../../../billiable-item/useBillableItem';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, defaultText, options) => {
+      if (options) {
+        return defaultText.replace(/\{\{(\w+)\}\}/g, (_, key) => options[key] || '');
+      }
+      return defaultText || key;
+    },
+  }),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useConfig: jest.fn(),
+  useLayoutType: jest.fn(),
+  showSnackbar: jest.fn(),
+  ResponsiveWrapper: ({ children }) => <div>{children}</div>,
+  restBaseUrl: '/openmrs/ws/rest/v1',
+}));
+
+jest.mock('../../../billiable-item/useBillableItem', () => ({
+  useBillableItem: jest.fn(),
+}));
+
+jest.mock('../../../../billing.resource', () => ({
+  processBillItems: jest.fn(),
+}));
+
+jest.mock('swr', () => ({
+  mutate: jest.fn(),
+}));
+
+describe('CreateBillWorkspace', () => {
+  // Mock data
+  const mockOrder: Order = {
+    uuid: 'order-uuid',
+    orderNumber: 'ORD-123',
+    concept: {
+      uuid: 'concept-uuid',
+      display: 'Test Service',
+    },
+    action: 'NEW' as OrderAction,
+    asNeeded: false,
+    autoExpireDate: null,
+    careSetting: {
+      uuid: 'care-setting-uuid',
+      display: 'Outpatient',
+    },
+    dateActivated: '2024-01-01',
+    dateStopped: null,
+    drug: null,
+    dosingType: 'org.openmrs.FreeTextDosingInstructions',
+    dose: null,
+    doseUnits: null,
+    frequency: null,
+    instructions: null,
+    numRefills: 0,
+    orderType: {
+      uuid: 'order-type-uuid',
+      display: 'Test Order Type',
+      conceptClasses: [],
+      description: 'Test Order Type Description',
+      name: 'Test Order Type',
+      parent: 'parent-uuid',
+      retired: false,
+    },
+    orderer: {
+      uuid: 'orderer-uuid',
+      display: 'Test Orderer',
+      person: {
+        display: 'Test Person',
+      },
+    },
+    previousOrder: null,
+    quantity: 1,
+    quantityUnits: null,
+    route: null,
+    scheduledDate: null,
+    scheduleDate: null,
+    numberOfRepeats: '0',
+    urgency: 'ROUTINE',
+    accessionNumber: null,
+    auditInfo: {
+      creator: {
+        uuid: 'creator-uuid',
+        display: 'Test Creator',
+      },
+      dateCreated: '2024-01-01',
+      changedBy: null,
+      dateChanged: null,
+    },
+    fulfillerStatus: null,
+    fulfillerComment: null,
+    specimenSource: null,
+    laterality: null,
+    clinicalHistory: null,
+    commentToFulfiller: null,
+    display: 'Test Order',
+    type: 'order',
+    dispenseAsWritten: false,
+    dosingInstructions: null,
+    duration: null,
+    durationUnits: null,
+    brandName: null,
+    orderReason: null,
+    orderReasonNonCoded: null,
+    encounter: {
+      uuid: 'encounter-uuid',
+      display: 'Test Encounter',
+    },
+    patient: {
+      uuid: 'patient-uuid',
+      display: 'Test Patient',
+    },
+  };
+
+  const mockBillableItem = {
+    uuid: 'billable-uuid',
+    name: 'Test Service',
+    servicePrices: [
+      {
+        uuid: 'price-uuid-1',
+        price: 100,
+        paymentMode: { name: 'Cash' },
+      },
+      {
+        uuid: 'price-uuid-2',
+        price: 150,
+        paymentMode: { name: 'Insurance' },
+      },
+    ],
+  };
+
+  const defaultProps = {
+    patientUuid: 'patient-uuid',
+    order: mockOrder,
+    closeWorkspace: jest.fn(),
+    closeWorkspaceWithSavedChanges: jest.fn(),
+    promptBeforeClosing: jest.fn(),
+    setTitle: jest.fn(),
+    closeModal: jest.fn(),
+  };
+
+  // Reset mocks before each test
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Setup default mock implementations
+    (useConfig as jest.Mock).mockReturnValue({
+      cashPointUuid: 'cash-point-uuid',
+      cashierUuid: 'cashier-uuid',
+    });
+
+    (useLayoutType as jest.Mock).mockReturnValue('desktop');
+
+    (useBillableItem as jest.Mock).mockReturnValue({
+      billableItem: mockBillableItem,
+      isLoading: false,
+    });
+
+    (processBillItems as jest.Mock).mockResolvedValue({});
+  });
+
+  test('renders the form with correct initial state', async () => {
+    render(<CreateBillWorkspace {...defaultProps} />);
+
+    // Check that the title and description are rendered
+    expect(screen.getByText(/Create bill for order Test Service/)).toBeInTheDocument();
+    expect(screen.getByText(/Order Bill Creation ORD-123/)).toBeInTheDocument();
+
+    // Check form elements are rendered
+    const quantityInput = screen.getByRole('spinbutton', { name: /quantity/i });
+    expect(quantityInput).toHaveValue(1);
+
+    const priceDropdown = screen.getByRole('combobox', { name: /Unit Price/i });
+    expect(priceDropdown).toBeInTheDocument();
+  });
+
+  test('submits the form successfully', async () => {
+    const user = userEvent.setup();
+
+    render(<CreateBillWorkspace {...defaultProps} />);
+
+    // Get form elements
+    const quantityInput = screen.getByRole('spinbutton', { name: /quantity/i });
+    const priceDropdown = screen.getByRole('combobox', { name: /Unit Price/i });
+
+    // Set quantity
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '2');
+
+    // Open and select from dropdown
+    await user.click(priceDropdown);
+
+    // Since Carbon dropdown items might be rendered in a portal or with complex structure,
+    // we need to find them by their text content regardless of their exact structure
+    const dropdownItem = await screen.findByText(/Cash - Ksh 100.00/);
+    await user.click(dropdownItem);
+
+    // Submit form
+    const submitButton = screen.getByRole('button', { name: /save & close/i });
+
+    // Wait for button to be enabled after form validation
+    await waitFor(() => {
+      expect(submitButton).not.toBeDisabled();
+    });
+
+    await user.click(submitButton);
+  });
+
+  test('handles loading state correctly', () => {
+    // Mock loading state
+    (useBillableItem as jest.Mock).mockReturnValue({
+      billableItem: null,
+      isLoading: true,
+    });
+
+    render(<CreateBillWorkspace {...defaultProps} />);
+
+    expect(screen.getByText(/Loading billable items/i)).toBeInTheDocument();
+  });
+
+  test('handles form errors correctly', async () => {
+    const user = userEvent.setup();
+
+    // Mock API error
+    const mockError = new Error('Failed to process bill');
+    (processBillItems as jest.Mock).mockRejectedValue(mockError);
+
+    render(<CreateBillWorkspace {...defaultProps} />);
+
+    // Fill form
+    const quantityInput = screen.getByRole('spinbutton', { name: /quantity/i });
+    const priceDropdown = screen.getByRole('combobox', { name: /Unit Price/i });
+
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '2');
+
+    await user.click(priceDropdown);
+    const dropdownItem = await screen.findByText(/Cash - Ksh 100.00/);
+    await user.click(dropdownItem);
+
+    // Submit form
+    const submitButton = screen.getByRole('button', { name: /save & close/i });
+
+    await waitFor(() => {
+      expect(submitButton).not.toBeDisabled();
+    });
+
+    await user.click(submitButton);
+  });
+
+  test('cancel button closes workspace', async () => {
+    const user = userEvent.setup();
+
+    render(<CreateBillWorkspace {...defaultProps} />);
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await user.click(cancelButton);
+
+    expect(defaultProps.closeWorkspace).toHaveBeenCalled();
+  });
+});

package/src/billable-services/bill-manager/workspaces/create-bill/create-bill.workspace.tsx

@@ -1,49 +1,162 @@
 import React, { useEffect } from 'react';
-import { Dropdown, Button, ButtonSet, Form, InlineLoading, InlineNotification } from '@carbon/react';
-import { type Order } from '@openmrs/esm-patient-common-lib';
-import { useBillableItem } from '../../../billiable-item/useBillableItem';
-import styles from './create-bill.style.scss';
+import { useTranslation } from 'react-i18next';
 import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import classNames from 'classnames';
+import {
+  Dropdown,
+  Button,
+  ButtonSet,
+  InlineLoading,
+  InlineNotification,
+  NumberInput,
+  Stack,
+  Column,
+} from '@carbon/react';
 import {
   type DefaultWorkspaceProps,
   ResponsiveWrapper,
   restBaseUrl,
   useConfig,
   useLayoutType,
+  showSnackbar,
 } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
-import classNames from 'classnames';
+import { type Order } from '@openmrs/esm-patient-common-lib';
+import { useBillableItem } from '../../../billiable-item/useBillableItem';
+import styles from './create-bill.style.scss';
 import { convertToCurrency } from '../../../../helpers';
 import { BillingConfig } from '../../../../config-schema';
-import { z } from 'zod';
 import { processBillItems } from '../../../../billing.resource';
 import { mutate } from 'swr';
 
 type CreateBillWorkspaceProps = DefaultWorkspaceProps & {
   patientUuid: string;
   order: Order;
+  closeModal: () => void;
+  medicationRequestBundle?: {
+    request: fhir.MedicationRequest;
+  };
 };
 
 const createBillFormSchema = z.object({
   id: z.string().min(1),
   text: z.string().min(1),
   unitPrice: z.string().min(1),
+  quantity: z.number().min(1),
 });
 
 type CreateBillFormSchema = z.infer<typeof createBillFormSchema>;
 
+interface BillFormProps {
+  billableItem: any;
+  quantityToDispense: number;
+  createBillForm: any;
+  errors: any;
+  calculateTotal: () => number;
+  comboBoxItems: Array<{
+    id: string;
+    text: string;
+    unitPrice: number;
+  }>;
+}
+
+interface MedicationBillFormProps extends Omit<BillFormProps, 'quantityToDispense'> {
+  medicationRequestBundle: {
+    request: fhir.MedicationRequest;
+  };
+}
+
+const BillForm: React.FC<BillFormProps> = ({
+  billableItem,
+  quantityToDispense,
+  createBillForm,
+  errors,
+  calculateTotal,
+  comboBoxItems,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap={4}>
+      <Column>
+        <div className={styles.formField}>
+          <label className={styles.label}>{t('item', 'Item')}</label>
+          <div className={styles.value}>{billableItem?.name ?? 'Service Not Found'}</div>
+        </div>
+      </Column>
+      <Column>
+        <Controller
+          control={createBillForm.control}
+          name="quantity"
+          render={({ field }) => (
+            <NumberInput
+              {...field}
+              id="quantity"
+              label={t('quantity', 'Quantity')}
+              min={1}
+              max={quantityToDispense}
+              value={field.value}
+              onChange={(e, { value }) => field.onChange(value)}
+            />
+          )}
+        />
+      </Column>
+      <Column>
+        <Controller
+          control={createBillForm.control}
+          name="unitPrice"
+          render={({ field }) => (
+            <Dropdown
+              {...field}
+              onChange={({ selectedItem }) => {
+                field.onChange(selectedItem?.unitPrice?.toString() ?? '');
+                createBillForm.setValue('id', selectedItem?.id ?? '');
+                createBillForm.setValue('text', selectedItem?.text ?? '');
+              }}
+              id="unit-price"
+              itemToString={(item) => item?.text ?? ''}
+              items={comboBoxItems}
+              label={t('selectUnitPrice', 'Select Unit Price')}
+              titleText={t('unitPrice', 'Unit Price')}
+              type="default"
+              invalid={!!errors.unitPrice}
+              invalidText={errors.unitPrice?.message}
+            />
+          )}
+        />
+      </Column>
+      <Column>
+        <div className={styles.formField}>
+          <label className={styles.label}>{t('total', 'Total')}</label>
+          <div className={styles.value}>{convertToCurrency(calculateTotal())}</div>
+        </div>
+      </Column>
+    </Stack>
+  );
+};
+
+const MedicationBillForm: React.FC<MedicationBillFormProps> = ({ medicationRequestBundle, ...props }) => {
+  const quantityToDispense = medicationRequestBundle?.request?.dispenseRequest?.quantity?.value ?? 1;
+  return <BillForm {...props} quantityToDispense={quantityToDispense} />;
+};
+
+const StandardBillForm: React.FC<Omit<BillFormProps, 'quantityToDispense'>> = (props) => {
+  return <BillForm {...props} quantityToDispense={1} />;
+};
+
 const CreateBillWorkspace: React.FC<CreateBillWorkspaceProps> = ({
   patientUuid,
   order,
   closeWorkspace,
   closeWorkspaceWithSavedChanges,
   promptBeforeClosing,
+  medicationRequestBundle,
 }) => {
   const { t } = useTranslation();
   const defaultPaymentStatus = 'PENDING';
   const isTablet = useLayoutType() === 'tablet';
   const { cashPointUuid, cashierUuid } = useConfig<BillingConfig>();
-  const { billableItem, isLoading } = useBillableItem(order.concept.uuid);
+  const { billableItem, isLoading } = useBillableItem(order?.concept?.uuid ?? order?.drug?.concept?.uuid);
 
   const comboBoxItems =
     billableItem?.servicePrices?.map((item) => ({
@@ -57,14 +170,22 @@ const CreateBillWorkspace: React.FC<CreateBillWorkspaceProps> = ({
       id: '',
       text: '',
       unitPrice: '0',
+      quantity: medicationRequestBundle?.request?.dispenseRequest?.quantity?.value ?? 1,
     },
   });
 
   const {
     handleSubmit,
     formState: { isValid, isDirty, isSubmitting, errors },
+    watch,
   } = createBillForm;
 
+  const calculateTotal = () => {
+    const price = parseFloat(watch('unitPrice')) || 0;
+    const quantity = watch('quantity') || 1;
+    return price * quantity;
+  };
+
   const handleCreateBill = async (formData: CreateBillFormSchema) => {
     const unitPrice = parseFloat(formData.unitPrice);
     const createBillPayload = {
@@ -76,21 +197,37 @@ const CreateBillWorkspace: React.FC<CreateBillWorkspaceProps> = ({
         {
           billableService: billableItem?.uuid,
           lineItemOrder: 0,
-          quantity: 1,
+          quantity: formData.quantity,
           price: unitPrice,
           paymentStatus: defaultPaymentStatus,
-          priceUuid: '',
+          priceUuid: formData.id,
           priceName: formData.text,
           order: order.uuid,
         },
       ],
       payments: [],
     };
-    await processBillItems(createBillPayload);
-    mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/cashier/bill`), undefined, {
-      revalidate: true,
-    });
-    closeWorkspaceWithSavedChanges();
+
+    try {
+      await processBillItems(createBillPayload);
+      showSnackbar({
+        title: t('billItems', 'Save Bill'),
+        subtitle: 'Bill processing has been successful',
+        kind: 'success',
+        timeoutInMs: 3000,
+      });
+      mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/cashier/bill`), undefined, {
+        revalidate: true,
+      });
+      closeWorkspaceWithSavedChanges();
+    } catch (error) {
+      console.error('Bill processing error:', error);
+      showSnackbar({
+        title: 'Bill processing error',
+        kind: 'error',
+        subtitle: error instanceof Error ? error.message : 'Unknown error occurred',
+      });
+    }
   };
 
   useEffect(() => {
@@ -99,8 +236,22 @@ const CreateBillWorkspace: React.FC<CreateBillWorkspaceProps> = ({
     }
   }, [isDirty, promptBeforeClosing]);
 
+  if (isLoading) {
+    return <InlineLoading description={t('loadingBillableItems', 'Loading billable items...')} />;
+  }
+
+  const commonFormProps = {
+    billableItem,
+    createBillForm,
+    errors,
+    calculateTotal,
+    comboBoxItems,
+  };
+
   return (
-    <Form className={styles.form} onSubmit={handleSubmit(handleCreateBill)}>
+    <form
+      className={styles.form}
+      onSubmit={handleSubmit(handleCreateBill, (errors) => console.error('errors', errors))}>
       <div className={styles.formContainer}>
         <ResponsiveWrapper>
           <InlineNotification
@@ -109,34 +260,17 @@ const CreateBillWorkspace: React.FC<CreateBillWorkspaceProps> = ({
             lowContrast
             statusIconDescription="notification"
             subtitle={t('createBillForOrder', 'Create bill for order {{order}} by selecting the correct unit price', {
-              order: order.concept.display,
+              order: order?.concept?.display ?? order?.drug?.display,
             })}
             title={t('orderBillCreation', 'Order Bill Creation {{orderNumber}}', { orderNumber: order.orderNumber })}
           />
         </ResponsiveWrapper>
         <ResponsiveWrapper>
-          <Controller
-            control={createBillForm.control}
-            name="unitPrice"
-            render={({ field }) => (
-              <Dropdown
-                {...field}
-                onChange={({ selectedItem }) => {
-                  field.onChange(selectedItem?.unitPrice?.toString() || '');
-                  createBillForm.setValue('id', selectedItem?.id || '');
-                  createBillForm.setValue('text', selectedItem?.text || '');
-                }}
-                id="unit-price"
-                itemToString={(item) => item?.text || ''}
-                items={comboBoxItems}
-                label={t('selectUnitPrice', 'Select Unit Price')}
-                titleText={t('unitPrice', 'Unit Price')}
-                type="default"
-                invalid={!!errors.unitPrice}
-                invalidText={errors.unitPrice?.message}
-              />
-            )}
-          />
+          {medicationRequestBundle ? (
+            <MedicationBillForm {...commonFormProps} medicationRequestBundle={medicationRequestBundle} />
+          ) : (
+            <StandardBillForm {...commonFormProps} />
+          )}
         </ResponsiveWrapper>
       </div>
       <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
@@ -151,7 +285,7 @@ const CreateBillWorkspace: React.FC<CreateBillWorkspaceProps> = ({
           )}
         </Button>
       </ButtonSet>
-    </Form>
+    </form>
   );
 };
 

package/src/billable-services/billables/charge-summary.resource.tsx

@@ -1,4 +1,4 @@
-import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { openmrsFetch, restBaseUrl, type OpenmrsResource } from '@openmrs/esm-framework';
 import useSWR from 'swr';
 
 export type ChargeAble = {
@@ -6,7 +6,7 @@ export type ChargeAble = {
   name: string;
   shortName: string;
   serviceStatus: 'ENABLED' | 'DISABLED';
-  stockItem: string;
+  stockItem: OpenmrsResource;
   serviceType: {
     uuid: string;
     display: string;