@palladium-ethiopia/esm-billing-app 5.4.2-pre.30

package/src/bill-administration/service-catalog/bulk-import-billable-service.modal.tsx

@@ -0,0 +1,194 @@
+import { Button, Loading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { DocumentAttachment, Download } from '@carbon/react/icons';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePaymentModes } from '../../billing.resource';
+import { MAX_ALLOWED_FILE_SIZE } from '../../constants';
+import { ExcelFileRow } from '../../types';
+import { createBillableService, useServiceTypes } from './billable-service.resource';
+import { useChargeSummaries } from './charge-summary.resource';
+import { BillableServicePayload, getBulkUploadPayloadFromExcelFile } from './form-helper';
+import styles from './clinical-charges.scss';
+import {
+  createAndDownloadFailedUploadsExcelFile,
+  createAndDownloadFilteredRowsFile,
+} from '../../billable-services/utils';
+
+const BulkImportBillableServices = ({ closeModal }) => {
+  const [isImporting, setIsImporting] = useState(false);
+  const { t } = useTranslation();
+  const inputFileRef = useRef<HTMLInputElement>();
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+
+  const { chargeSummaryItems, mutate } = useChargeSummaries();
+  const { serviceTypes } = useServiceTypes();
+  const { paymentModes } = usePaymentModes();
+
+  const attachFiles = () => {
+    inputFileRef.current.click();
+  };
+
+  const handleFileChange = () => {
+    if (inputFileRef.current && inputFileRef.current.files) {
+      const file = inputFileRef.current.files[0];
+      if (file.size > MAX_ALLOWED_FILE_SIZE) {
+        showSnackbar({
+          title: t('fileTooBig', 'fileTooBig'),
+          kind: 'error',
+        });
+
+        return;
+      }
+      setUploadedFile(file);
+    }
+  };
+
+  const importBillableServices = () => {
+    const file = inputFileRef.current.files[0];
+    const reader = new FileReader();
+
+    reader.onload = async (e) => {
+      setIsImporting(true);
+      const data = new Uint8Array(e.target.result as ArrayBuffer);
+      let fileReadResponse: ReturnType<typeof getBulkUploadPayloadFromExcelFile> = [];
+
+      try {
+        fileReadResponse = getBulkUploadPayloadFromExcelFile(data, chargeSummaryItems, paymentModes, serviceTypes);
+      } catch (error) {
+        setIsImporting(false);
+        closeModal();
+        showSnackbar({
+          title: t('errorOccurred', 'an error occurred'),
+          subtitle: t('uploadError', 'an unknown error occurred. Please try reuploading the file'),
+        });
+      }
+
+      if (fileReadResponse === 'INVALID_TEMPLATE') {
+        closeModal();
+        showSnackbar({
+          title: t(
+            'invalidFile',
+            'The file you uploaded is invalid. A valid template should include [concept_id, name, short_name, price, disable, category]',
+          ),
+          kind: 'error',
+        });
+        setIsImporting(false);
+        return;
+      }
+
+      const correctRowsPayload = fileReadResponse.at(0) ?? [];
+      const filteredOutRows = fileReadResponse.at(1) ?? [];
+
+      if (filteredOutRows?.length > 0) {
+        createAndDownloadFilteredRowsFile(filteredOutRows as ExcelFileRow[]);
+        showSnackbar({
+          title: t(
+            'filteredOutRows',
+            'Some rows were missing categories and were filtered out. An excel file of the rows has been downloaded',
+          ),
+          kind: 'error',
+        });
+      }
+
+      const erroredPayloads: BillableServicePayload[] = [];
+
+      const chunkSize = 50;
+      for (let i = 0; i < correctRowsPayload.length; i += chunkSize) {
+        const chunk = correctRowsPayload.slice(i, i + chunkSize);
+
+        const promises = chunk.map(async (formPayload) => {
+          try {
+            await createBillableService(formPayload);
+          } catch (error) {
+            erroredPayloads.push(formPayload);
+          }
+        });
+
+        await Promise.all(promises);
+      }
+
+      setIsImporting(false);
+      closeModal();
+
+      if (erroredPayloads.length === 0 && correctRowsPayload.length >= 1) {
+        showSnackbar({
+          title: t('success', 'successfully'),
+          subtitle: t(
+            'successFullyUploadedItems',
+            `Successfully uploaded ${correctRowsPayload.length} billable service${
+              correctRowsPayload.length > 1 ? 's' : ''
+            }.`,
+          ),
+          kind: 'success',
+        });
+
+        mutate();
+        return;
+      }
+
+      if (erroredPayloads.length) {
+        createAndDownloadFailedUploadsExcelFile(erroredPayloads);
+        showSnackbar({
+          title: t('anErrorOccurred', 'anErrorOccurred'),
+          subtitle: t(
+            'anErrorOccurred',
+            `An error occurred uploading some items. A file has been downloaded with the failed services`,
+          ),
+          kind: 'error',
+        });
+      }
+    };
+
+    reader.onerror = () => {
+      showSnackbar({
+        title: t('errorReadingFile', 'An error occurred reading your file'),
+        kind: 'error',
+      });
+      setIsImporting(false);
+    };
+
+    reader.readAsArrayBuffer(file);
+    setIsImporting(false);
+  };
+
+  return (
+    <React.Fragment>
+      <ModalHeader closeModal={closeModal}>Bulk Import Billable Services</ModalHeader>
+      <ModalBody>
+        <input
+          type="file"
+          ref={inputFileRef}
+          hidden
+          onChange={handleFileChange}
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+        />
+        <p className={styles.csvreq}>Only excel files at 2mb or less</p>
+        <div className={styles.uploadButtonWrapper}>
+          <Button onClick={attachFiles}>
+            Upload File <DocumentAttachment className={styles.iconMarginLeft} />
+          </Button>
+          {uploadedFile ? <p className={styles.selectedFile}>{uploadedFile.name}</p> : 'No file selected'}
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal} type="button">
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button type="submit" onClick={importBillableServices} disabled={!uploadedFile || isImporting}>
+          {isImporting ? (
+            <>
+              <Loading withOverlay={false} small />
+              {t('importing', 'importing')}
+            </>
+          ) : (
+            t('import', 'Import')
+          )}
+          <Download className={styles.iconMarginLeft} />
+        </Button>
+      </ModalFooter>
+    </React.Fragment>
+  );
+};
+
+export default BulkImportBillableServices;

package/src/bill-administration/service-catalog/charge-summary-table.component.test.tsx

@@ -0,0 +1,199 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useTranslation } from 'react-i18next';
+import { useLayoutType, usePagination, showModal, launchWorkspace, LayoutType } from '@openmrs/esm-framework';
+import ChargeSummaryTable from './charge-summary-table.component';
+import { useChargeSummaries, type ChargeAble } from './charge-summary.resource';
+import { downloadExcelTemplateFile } from './form-helper';
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    useLayoutType: jest.fn(),
+    usePagination: jest.fn(),
+    showModal: jest.fn(),
+    launchWorkspace: jest.fn(),
+  };
+});
+jest.mock('./charge-summary.resource', () => ({
+  useChargeSummaries: jest.fn(),
+}));
+
+jest.mock('./form-helper', () => ({
+  downloadExcelTemplateFile: jest.fn(),
+  searchTableData: jest.fn((data, searchString) => data),
+}));
+
+const mockChargeSummaryItems: ChargeAble[] = [
+  {
+    uuid: '1',
+    name: 'Test Service',
+    shortName: 'TS',
+    serviceStatus: 'ENABLED',
+    serviceType: { uuid: 'type-1', display: 'Laboratory' },
+    servicePrices: [
+      { uuid: 'price-1', name: 'Cash', price: 100 },
+      { uuid: 'price-2', name: 'Insurance', price: 150 },
+    ],
+    concept: { uuid: 'concept-1', display: 'Test Concept' },
+    stockItem: '',
+  },
+  {
+    uuid: '2',
+    name: 'Test Commodity',
+    shortName: 'TC',
+    serviceStatus: 'DISABLED',
+    serviceType: { uuid: 'type-2', display: 'Stock Item' },
+    servicePrices: [{ uuid: 'price-3', name: 'Cash', price: 200 }],
+    concept: { uuid: 'concept-2', display: 'Test Concept 2' },
+    stockItem: 'stock-1',
+  },
+];
+
+describe('ChargeSummaryTable', () => {
+  const mockUseLayoutType = useLayoutType as jest.MockedFunction<typeof useLayoutType>;
+  const mockUsePagination = usePagination as jest.MockedFunction<typeof usePagination>;
+  const mockShowModal = showModal as jest.MockedFunction<typeof showModal>;
+  const mockLaunchWorkspace = launchWorkspace as jest.MockedFunction<typeof launchWorkspace>;
+  const mockUseChargeSummaries = useChargeSummaries as jest.MockedFunction<typeof useChargeSummaries>;
+
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('desktop' as LayoutType);
+    mockUsePagination.mockReturnValue({
+      results: mockChargeSummaryItems,
+      currentPage: 1,
+      totalPages: 1,
+      paginated: true,
+      showNextButton: false,
+      showPreviousButton: false,
+      goTo: jest.fn(),
+      goToNext: jest.fn(),
+      goToPrevious: jest.fn(),
+    });
+    mockUseChargeSummaries.mockReturnValue({
+      chargeSummaryItems: mockChargeSummaryItems,
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+  });
+
+  test('renders loading state', () => {
+    mockUseChargeSummaries.mockReturnValue({
+      chargeSummaryItems: [],
+      isLoading: true,
+      isValidating: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(<ChargeSummaryTable />);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
+
+  test('renders error state', () => {
+    mockUseChargeSummaries.mockReturnValue({
+      chargeSummaryItems: [],
+      isLoading: false,
+      isValidating: false,
+      error: new Error('Test error'),
+      mutate: jest.fn(),
+    });
+
+    render(<ChargeSummaryTable />);
+    expect(screen.getByText('Error State')).toBeInTheDocument();
+  });
+
+  test('renders empty state', async () => {
+    const user = userEvent.setup();
+    mockUseChargeSummaries.mockReturnValue({
+      chargeSummaryItems: [],
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(<ChargeSummaryTable />);
+    expect(screen.getByText('There are no {{displayText}} to display for this patient')).toBeInTheDocument();
+    const launchFormButton = screen.getByRole('button', { name: /Record/i });
+    expect(launchFormButton).toBeInTheDocument();
+    await user.click(launchFormButton);
+    expect(mockLaunchWorkspace).toHaveBeenCalledWith('billable-service-form');
+  });
+
+  test('renders table with data', () => {
+    render(<ChargeSummaryTable />);
+
+    // Check if table headers are present
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Short Name')).toBeInTheDocument();
+    expect(screen.getByText('Status')).toBeInTheDocument();
+    expect(screen.getByText('Type')).toBeInTheDocument();
+    expect(screen.getByText('Prices')).toBeInTheDocument();
+
+    // Check if data is rendered
+    expect(screen.getByText('Test Service')).toBeInTheDocument();
+    expect(screen.getByText('TS')).toBeInTheDocument();
+    expect(screen.getByText('Laboratory')).toBeInTheDocument();
+    expect(screen.getByText('ENABLED')).toBeInTheDocument();
+  });
+
+  test('handles search functionality', async () => {
+    const user = userEvent.setup();
+    render(<ChargeSummaryTable />);
+
+    const searchInput = screen.getByPlaceholderText('Search for charge item');
+    await user.type(searchInput, 'Test');
+
+    expect(searchInput).toHaveValue('Test');
+  });
+
+  test('handles edit service action', async () => {
+    const user = userEvent.setup();
+    render(<ChargeSummaryTable />);
+
+    const overflowMenu = screen.getAllByRole('img', { name: 'Options' })[0];
+    await user.click(overflowMenu);
+
+    const editButton = screen.getByText('Edit charge item');
+    await user.click(editButton);
+
+    expect(mockLaunchWorkspace).toHaveBeenCalledWith('billable-service-form', {
+      initialValues: mockChargeSummaryItems[0],
+      workspaceTitle: 'Edit Service Charge Item',
+    });
+  });
+
+  test('handles edit commodity action', async () => {
+    const user = userEvent.setup();
+    render(<ChargeSummaryTable />);
+
+    const overflowMenu = screen.getAllByRole('img', { name: 'Options' })[0];
+    await user.click(overflowMenu);
+
+    const editButton = screen.getByText('Edit charge item');
+    await user.click(editButton);
+
+    expect(mockLaunchWorkspace).toHaveBeenCalled();
+  });
+
+  test('handles delete action', async () => {
+    const user = userEvent.setup();
+    render(<ChargeSummaryTable />);
+
+    const overflowMenu = screen.getAllByRole('img', { name: 'Options' })[0];
+    await user.click(overflowMenu);
+
+    const deleteButton = screen.getByText('Delete charge item');
+    await user.click(deleteButton);
+
+    expect(mockShowModal).toHaveBeenCalledWith('delete-billableservice-modal', {
+      closeModal: expect.any(Function),
+      chargeableItem: mockChargeSummaryItems[0],
+    });
+  });
+});

package/src/bill-administration/service-catalog/charge-summary-table.component.tsx

@@ -0,0 +1,236 @@
+import {
+  ComboButton,
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  MenuItem,
+  OverflowMenu,
+  OverflowMenuItem,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+} from '@carbon/react';
+import { CategoryAdd, Download, Upload, WatsonHealthScalpelSelect } from '@carbon/react/icons';
+import { ErrorState, launchWorkspace, showModal, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { EmptyState, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import React, { ChangeEvent, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './charge-summary-table.scss';
+import { type ChargeAble, useChargeSummaries } from './charge-summary.resource';
+import { downloadExcelTemplateFile, searchTableData } from './form-helper';
+import { useCurrencyFormatting } from '../../helpers/currency';
+
+const defaultPageSize = 10;
+
+const ChargeSummaryTable: React.FC = () => {
+  const { t } = useTranslation();
+  const { format: formatCurrency } = useCurrencyFormatting();
+
+  const layout = useLayoutType();
+  const size = layout === 'tablet' ? 'lg' : 'md';
+  const { isLoading, isValidating, error, mutate, chargeSummaryItems } = useChargeSummaries();
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+  const [searchString, setSearchString] = useState('');
+
+  const searchResults = useMemo(
+    () => searchTableData(chargeSummaryItems, searchString),
+    [chargeSummaryItems, searchString],
+  );
+
+  const { results, goTo, currentPage } = usePagination(searchResults, pageSize);
+  const { pageSizes } = usePaginationInfo(defaultPageSize, chargeSummaryItems.length, currentPage, results.length);
+
+  const headers = [
+    {
+      key: 'name',
+      header: t('name', 'Name'),
+    },
+    {
+      key: 'shortName',
+      header: t('shortName', 'Short Name'),
+    },
+    {
+      key: 'serviceStatus',
+      header: t('status', 'Status'),
+    },
+    {
+      key: 'serviceType',
+      header: t('type', 'Type'),
+    },
+    {
+      key: 'servicePrices',
+      header: t('prices', 'Prices'),
+    },
+  ];
+
+  const rows = results.map((service) => {
+    return {
+      id: service.uuid,
+      name: service.name,
+      shortName: service.shortName,
+      serviceStatus: service.serviceStatus,
+      serviceType: service?.serviceType?.display ?? t('stockItem', 'Stock Item'),
+      servicePrices: service.servicePrices.map((price) => `${price.name} : ${formatCurrency(price.price)}`).join(', '),
+    };
+  });
+
+  const handleDelete = (chargeableItem: ChargeAble) => {
+    const dispose = showModal('delete-billableservice-modal', {
+      closeModal: () => dispose(),
+      chargeableItem,
+    });
+  };
+
+  const handleEdit = (service) => {
+    Boolean(service?.serviceType?.display)
+      ? launchWorkspace('billable-service-form', {
+          initialValues: service,
+          workspaceTitle: t('editServiceChargeItem', 'Edit Service Charge Item'),
+        })
+      : launchWorkspace('commodity-form', {
+          initialValues: service,
+          workspaceTitle: t('editChargeItem', 'Edit Charge Item'),
+        });
+  };
+
+  const openBulkUploadModal = () => {
+    const dispose = showModal('bulk-import-billable-services-modal', {
+      closeModal: () => dispose(),
+    });
+  };
+
+  if (isLoading) {
+    return <DataTableSkeleton headers={headers} aria-label="sample table" showHeader={false} showToolbar={false} />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('billableServicesError', 'Billable services error')} />;
+  }
+
+  if (!chargeSummaryItems.length) {
+    return (
+      <EmptyState
+        headerTitle={t('chargeItems', 'Charge Items')}
+        launchForm={() => launchWorkspace('billable-service-form')}
+        displayText={t('chargeItemsDescription', 'Charge Items')}
+      />
+    );
+  }
+
+  return (
+    <>
+      <DataTable size={layout === 'tablet' ? 'md' : 'sm'} useZebraStyles rows={rows} headers={headers}>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getToolbarProps, getTableContainerProps }) => (
+          <TableContainer className={styles.tableContainer} {...getTableContainerProps()}>
+            <TableToolbar {...getToolbarProps()} aria-label="data table toolbar">
+              <TableToolbarContent>
+                <TableToolbarSearch
+                  placeholder={t('searchForChargeItem', 'Search for charge item')}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchString(e.target.value)}
+                  persistent
+                  size={size}
+                />
+                {isValidating && (
+                  <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+                )}
+                <ComboButton tooltipAlignment="left" label={t('actions', 'Action')}>
+                  <MenuItem
+                    renderIcon={CategoryAdd}
+                    onClick={() =>
+                      launchWorkspace('billable-service-form', {
+                        workspaceTitle: t('chargeServiceForm', 'Charge Service Form'),
+                      })
+                    }
+                    label={t('addServiceChargeItem', 'Add charge service')}
+                  />
+                  <MenuItem
+                    renderIcon={WatsonHealthScalpelSelect}
+                    onClick={() =>
+                      launchWorkspace('commodity-form', {
+                        workspaceTitle: t('chargeCommodityForm', 'Charge Commodity Form'),
+                      })
+                    }
+                    label={t('addCommodityChargeItem', 'Add charge item')}
+                  />
+                  <MenuItem onClick={openBulkUploadModal} label={t('bulkUpload', 'Bulk Upload')} renderIcon={Upload} />
+                  <MenuItem
+                    onClick={downloadExcelTemplateFile}
+                    label={t('downloadTemplate', 'Download template')}
+                    renderIcon={Download}
+                  />
+                </ComboButton>
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()} aria-label={t('chargeItem', 'Charge items table')}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      key={header.key}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                  <TableHeader aria-label={t('overflowMenu', 'Overflow menu')} />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => (
+                  <TableRow
+                    key={row.id}
+                    {...getRowProps({
+                      row,
+                    })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                    <TableCell className="cds--table-column-menu">
+                      <OverflowMenu size="sm" flipped>
+                        <OverflowMenuItem
+                          itemText={t('editChargeItem', 'Edit charge item')}
+                          onClick={() => handleEdit(results[index])}
+                        />
+                        <OverflowMenuItem
+                          hasDivider
+                          isDelete
+                          itemText={t('deleteChargeItem', 'Delete charge item')}
+                          onClick={() => handleDelete(results[index])}
+                        />
+                      </OverflowMenu>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      <Pagination
+        backwardText={t('previousPage', 'Previous page')}
+        forwardText={t('nextPage', 'Next page')}
+        itemsPerPageText={t('itemsPerPage', 'Items per page')}
+        onChange={({ page, pageSize }) => {
+          setPageSize(pageSize);
+          goTo(page);
+        }}
+        page={currentPage}
+        pageSize={defaultPageSize}
+        pageSizes={pageSizes}
+        size="sm"
+        totalItems={chargeSummaryItems.length}
+      />
+    </>
+  );
+};
+
+export default ChargeSummaryTable;

package/src/bill-administration/service-catalog/charge-summary-table.scss

@@ -0,0 +1,19 @@
+@use '@carbon/layout';
+
+.tableContainer {
+  display: flex;
+  flex-direction: column;
+
+  & > section {
+    position: relative;
+    margin-bottom: layout.$spacing-01;
+  }
+}
+
+.iconMarginLeft {
+  margin-left: layout.$spacing-05;
+}
+
+.bulkUploadButton {
+  margin-right: layout.$spacing-05;
+}

package/src/bill-administration/service-catalog/charge-summary.resource.tsx

@@ -0,0 +1,42 @@
+import { openmrsFetch, restBaseUrl, type OpenmrsResource } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export type ChargeAble = {
+  uuid: string;
+  name: string;
+  shortName: string;
+  serviceStatus: 'ENABLED' | 'DISABLED';
+  stockItem: OpenmrsResource;
+  serviceType: {
+    uuid: string;
+    display: string;
+  };
+  servicePrices: Array<{
+    uuid: string;
+    name: string;
+    price: number;
+  }>;
+  concept: {
+    uuid: string;
+    display: string;
+  };
+};
+
+type ChargeAblesResponse = {
+  results: Array<ChargeAble>;
+};
+
+export const useChargeSummaries = () => {
+  const url = `${restBaseUrl}/cashier/billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(uuid,display),servicePrices:(uuid,name,paymentMode,price),concept:(uuid,display),stockItem:(uuid,display))`;
+  const { data, isLoading, isValidating, error, mutate } = useSWR<{ data: ChargeAblesResponse }>(url, openmrsFetch, {
+    errorRetryCount: 0,
+  });
+
+  return {
+    chargeSummaryItems: data?.data?.results ?? [],
+    isLoading,
+    isValidating,
+    error,
+    mutate,
+  };
+};