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

package/src/bill-administration/billable-exemption/billable-exemptions/schema-editor/schema-viewer.scss

@@ -0,0 +1,28 @@
+@use '@carbon/colors';
+@use '@carbon/type';
+@use '@carbon/layout';
+
+.treeViewContainer {
+  @include type.type-style('body-compact-02');
+  padding: 0;
+  margin: 0;
+}
+.folderIcon {
+  margin-right: layout.$spacing-05;
+  color: colors.$red-60;
+}
+.dirIcon {
+  margin-right: layout.$spacing-05;
+  color: colors.$yellow-60;
+}
+
+.treeView {
+  &:global(.cds--tree-node) {
+    &:focus {
+      display: none;
+    }
+    &:hover {
+      color: colors.$green-60;
+    }
+  }
+}

package/src/bill-administration/billable-exemption/billable-exemptions/schema-editor/schema-viewer.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import SchemaViewer from './schema-viewer-component';
+import userEvent from '@testing-library/user-event';
+
+const mockData = {
+  services: {
+    all: [
+      {
+        concept: '167441',
+        description: 'PCR',
+      },
+      {
+        concept: '162202',
+        description: 'GeneXpert',
+      },
+    ],
+    'program:HIV': [
+      {
+        concept: '1000051',
+        description: 'Registration',
+      },
+    ],
+  },
+  commodities: {},
+};
+
+xdescribe('SchemaViewer', () => {
+  test('should render the schema viewer', async () => {
+    const user = userEvent.setup();
+    render(<SchemaViewer data={JSON.stringify(mockData)} />);
+
+    const treeView = screen.getByRole('tree');
+    expect(treeView).toBeInTheDocument();
+
+    // Tree should have 2 nodes
+    const nodes = screen.getAllByRole('treeitem');
+    expect(nodes).toHaveLength(2);
+
+    const services = screen.getByRole('treeitem', { name: 'services' });
+    const toggleButton = services.querySelector('.cds--tree-parent-node__toggle');
+    await user.click(toggleButton);
+
+    // Should be able to see all and HIV services
+    const allServices = screen.getByRole('treeitem', { name: 'all' });
+    const hivServices = screen.getByRole('treeitem', { name: 'program:HIV' });
+    expect(allServices).toBeInTheDocument();
+    expect(hivServices).toBeInTheDocument();
+  });
+});

package/src/bill-administration/billable-exemption/billable-exemptions.component.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import BillingHeader from '../../billing-header/billing-header.component';
+import { BillableExemptionsViewer } from './billable-exemptions/billable-exemptions-viewer.component';
+
+const BillableExemptions = () => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <BillingHeader title={t('billableExemptionAdministration', 'Exemption Administration')} />
+      <BillableExemptionsViewer />
+    </div>
+  );
+};
+
+export default BillableExemptions;

package/src/bill-administration/dashboard/dashboard-container.component.tsx

@@ -0,0 +1,26 @@
+import { useAssignedExtensions, ExtensionSlot } from '@openmrs/esm-framework';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { DashboardConfig } from '../../types/index';
+import styles from './dashboard-container.scss';
+
+const DashboardContainer: React.FC = () => {
+  const params = useParams();
+  const assignedExtensions = useAssignedExtensions('billing-admin-dashboard-slot');
+
+  const ungroupedDashboards = assignedExtensions.map((e) => e.meta).filter((e) => Object.keys(e).length) || [];
+  const dashboards = ungroupedDashboards as Array<DashboardConfig>;
+  const activeDashboard = dashboards.find((dashboard) => dashboard.name === params?.dashboard) || dashboards[0];
+
+  return (
+    <div className={styles.dashboardContainer}>
+      <ExtensionSlot
+        className={styles.dashboardView}
+        name={activeDashboard?.slot}
+        state={{ dashboardTitle: activeDashboard?.name }}
+      />
+    </div>
+  );
+};
+
+export default DashboardContainer;

package/src/bill-administration/dashboard/dashboard-container.scss

@@ -0,0 +1,2 @@
+@use '@carbon/layout';
+@use '@carbon/colors';

package/src/bill-administration/dashboard.meta.ts

@@ -0,0 +1,48 @@
+export const billDepositDashboardMeta = {
+  path: 'bill-deposit',
+  title: 'Bill Deposit',
+  titleKey: 'billDeposit',
+  icon: 'omrs-icon-activity',
+} as const;
+
+export const billableExemptionsDashboardMeta = {
+  path: 'billable-exemptions',
+  title: 'Billable Exemptions',
+  titleKey: 'billableExemptions',
+  icon: 'omrs-icon-view-off',
+} as const;
+
+export const paymentModeDashboardMeta = {
+  path: 'payment-modes',
+  title: 'Payment Modes',
+  titleKey: 'paymentModes',
+  icon: 'omrs-icon-sticky-note-add',
+} as const;
+
+export const clinicalChargesDashboardMeta = {
+  path: 'clinical-charges',
+  title: 'Clinical Charges',
+  titleKey: 'clinicalCharges',
+  icon: 'omrs-icon-programs',
+} as const;
+
+export const paymentHistoryDashboardMeta = {
+  path: 'payment-history',
+  title: 'Payment History',
+  titleKey: 'paymentHistory',
+  icon: 'omrs-icon-report',
+} as const;
+
+export const patientBillingDashboardMeta = {
+  path: 'patient-billing',
+  title: 'Patient Billing',
+  titleKey: 'patientBilling',
+  icon: 'omrs-icon-user-avatar',
+} as const;
+
+export const paymentPointsDashboardMeta = {
+  path: 'cashier-points',
+  title: 'Payment Points',
+  titleKey: 'paymentPoints',
+  icon: 'omrs-icon-location',
+} as const;

package/src/bill-administration/home.component.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useLeftNav, WorkspaceContainer } from '@openmrs/esm-framework';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import { billingAdminBasePath } from '../constants';
+import DashboardContainer from './dashboard/dashboard-container.component';
+
+import styles from './home.scss';
+
+const BillingAdminHome: React.FC = () => {
+  useLeftNav({ name: 'billing-admin-dashboard-slot', basePath: billingAdminBasePath });
+
+  return (
+    <BrowserRouter basename={billingAdminBasePath}>
+      <main className={styles.container}>
+        <Routes>
+          <Route path="/" element={<DashboardContainer />} />
+          <Route path="/:dashboard/*" element={<DashboardContainer />} />
+        </Routes>
+      </main>
+      <WorkspaceContainer key="billing-admin" contextKey="billing-admin" />
+    </BrowserRouter>
+  );
+};
+
+export default BillingAdminHome;

package/src/bill-administration/home.scss

@@ -0,0 +1,10 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.container {
+  background-color: colors.$white-0;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .container {
+  margin-left: var(--omrs-sidenav-width);
+}

package/src/bill-administration/index.tsx

@@ -0,0 +1,71 @@
+import { getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import {
+  billableExemptionsDashboardMeta,
+  billDepositDashboardMeta,
+  clinicalChargesDashboardMeta,
+  patientBillingDashboardMeta,
+  paymentHistoryDashboardMeta,
+  paymentModeDashboardMeta,
+  paymentPointsDashboardMeta,
+} from './dashboard.meta';
+
+const options = {
+  featureName: 'billing-admin',
+  moduleName: '@palladium-ethiopia/esm-billing-app',
+};
+
+// Bill Deposit Components
+export const billDepositSearch = getAsyncLifecycle(
+  () => import('./bill-deposit/components/search/bill-deposit-search.component'),
+  options,
+);
+export const addDepositWorkspace = getAsyncLifecycle(
+  () => import('./bill-deposit/components/forms/add-deposit.workspace'),
+  options,
+);
+export const deleteDepositModal = getAsyncLifecycle(
+  () => import('./bill-deposit/components/modal/delete-deposit.modal'),
+  options,
+);
+export const depositTransactionWorkspace = getAsyncLifecycle(
+  () => import('./bill-deposit/components/forms/deposit-transactions/deposit-transaction.workspace'),
+  options,
+);
+export const reverseTransactionModal = getAsyncLifecycle(
+  () => import('./bill-deposit/components/modal/reverse-transaction.modal'),
+  options,
+);
+
+export const billDepositDashboard = getAsyncLifecycle(
+  () => import('./bill-deposit/components/dashboard/bill-deposit-dashboard.component'),
+  options,
+);
+export const billableExemptions = getAsyncLifecycle(
+  () => import('./billable-exemption/billable-exemptions.component'),
+  options,
+);
+
+export const paymentModeDashboard = getAsyncLifecycle(
+  () => import('./payment-modes/payment-mode-dashboard.component'),
+  options,
+);
+
+export const clinicalCharges = getAsyncLifecycle(() => import('./service-catalog/clinical-charges.component'), options);
+export const paymentHistoryDashboard = getAsyncLifecycle(
+  () => import('./payment-history/payment-dashboard.component'),
+  options,
+);
+
+export const paymentPoints = getAsyncLifecycle(() => import('./payment-points/payment-points.component'), options);
+
+export const patientBilling = getAsyncLifecycle(() => import('./patient-billing/patient-billing.component'), options);
+export const billingAdmin = getAsyncLifecycle(() => import('./home.component'), options);
+
+export const billDepositDashboardLink = getSyncLifecycle(createDashboardLink(billDepositDashboardMeta), options);
+export const billableExemptionsLink = getSyncLifecycle(createDashboardLink(billableExemptionsDashboardMeta), options);
+export const paymentModeLink = getSyncLifecycle(createDashboardLink(paymentModeDashboardMeta), options);
+export const clinicalChargesLink = getSyncLifecycle(createDashboardLink(clinicalChargesDashboardMeta), options);
+export const paymentHistoryLink = getSyncLifecycle(createDashboardLink(paymentHistoryDashboardMeta), options);
+export const patientBillingLink = getSyncLifecycle(createDashboardLink(patientBillingDashboardMeta), options);
+export const paymentPointDashboardLink = getSyncLifecycle(createDashboardLink(paymentPointsDashboardMeta), options);

package/src/bill-administration/patient-billing/bill-actions/cancel-line-item.component.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
+import { LineItem, MappedBill, PaymentStatus } from '../../../types';
+
+type CancelLineItemProps = {
+  lineItem: LineItem;
+  bill: MappedBill;
+};
+
+const CancelLineItem: React.FC<CancelLineItemProps> = ({ lineItem, bill }) => {
+  const { t } = useTranslation();
+
+  if (lineItem.paymentStatus == PaymentStatus.PAID) {
+    return null;
+  }
+  const handleCancelLineItemWorkspace = () => {
+    launchWorkspace('cancel-bill-workspace', {
+      workspaceTitle: t('cancelBillForm', 'Cancel Bill Form'),
+      bill,
+      lineItem,
+    });
+  };
+
+  return <OverflowMenuItem itemText={t('cancelItem', 'Cancel item')} onClick={handleCancelLineItemWorkspace} />;
+};
+
+export default CancelLineItem;

package/src/bill-administration/patient-billing/bill-actions/delete-bill-action-button.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { TrashCan } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { MappedBill, PaymentStatus } from '../../../types';
+import { showModal } from '@openmrs/esm-framework';
+
+type DeleteBillActionButtonProps = {
+  bill: MappedBill;
+};
+
+const DeleteBillActionButton: React.FC<DeleteBillActionButtonProps> = ({ bill }) => {
+  const { t } = useTranslation();
+
+  if (bill.status == PaymentStatus.PAID) {
+    return null;
+  }
+  const handleOpenDeleteBillModal = (bill: MappedBill) => {
+    const dispose = showModal('delete-bill-modal', {
+      bill,
+      onClose: () => dispose(),
+    });
+  };
+
+  return (
+    <Button
+      onClick={() => handleOpenDeleteBillModal(bill)}
+      size="sm"
+      renderIcon={(props) => <TrashCan size={24} {...props} />}
+      kind="danger--ghost"
+      iconDescription="TrashCan">
+      {t('deleteBill', 'Delete Bill')}
+    </Button>
+  );
+};
+
+export default DeleteBillActionButton;

package/src/bill-administration/patient-billing/bill-actions/edit-line-item.component.tsx

@@ -0,0 +1,31 @@
+import { launchWorkspace } from '@openmrs/esm-framework';
+import React from 'react';
+import { LineItem, MappedBill, PaymentStatus } from '../../../types';
+import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
+
+type EditLineItemProps = {
+  lineItem: LineItem;
+  bill: MappedBill;
+};
+
+const EditLineItem: React.FC<EditLineItemProps> = ({ lineItem, bill }) => {
+  const { t } = useTranslation();
+
+  if (lineItem.paymentStatus == PaymentStatus.PAID) {
+    return null;
+  }
+
+  const handleOpenEditLineItemWorkspace = (lineItem: LineItem) => {
+    launchWorkspace('edit-bill-form', {
+      workspaceTitle: t('editBillForm', 'Edit Bill Form'),
+      lineItem,
+      bill,
+    });
+  };
+  return (
+    <OverflowMenuItem itemText={t('editItem', 'Edit item')} onClick={() => handleOpenEditLineItemWorkspace(lineItem)} />
+  );
+};
+
+export default EditLineItem;

package/src/bill-administration/patient-billing/bill-actions/refund-line-item.component.tsx

@@ -0,0 +1,34 @@
+import { OverflowMenuItem } from '@carbon/react';
+import React from 'react';
+import { LineItem, MappedBill, PaymentStatus } from '../../../types';
+import { showModal } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+type RefundLineItemProps = {
+  lineItem: LineItem;
+  bill: MappedBill;
+  isRefundedBillableService: boolean;
+};
+
+const RefundLineItem: React.FC<RefundLineItemProps> = ({ lineItem, bill, isRefundedBillableService }) => {
+  const { t } = useTranslation();
+  const handleOpenRefundLineItemModal = () => {
+    const dispose = showModal('refund-bill-modal', {
+      onClose: () => dispose(),
+      bill,
+      lineItem,
+    });
+  };
+
+  if (isRefundedBillableService) {
+    return null;
+  }
+
+  if (lineItem.paymentStatus !== PaymentStatus.PAID) {
+    return null;
+  }
+
+  return <OverflowMenuItem itemText={t('refundItem', 'Refund item')} onClick={() => handleOpenRefundLineItemModal()} />;
+};
+
+export default RefundLineItem;

package/src/bill-administration/patient-billing/bill-actions/waive-bill-action-button.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import { Scalpel } from '@carbon/react/icons';
+
+import { MappedBill, PaymentStatus } from '../../../types';
+
+type WaiveBillActionButtonProps = {
+  bill: MappedBill;
+};
+
+const WaiveBillActionButton: React.FC<WaiveBillActionButtonProps> = ({ bill }) => {
+  const { t } = useTranslation();
+
+  if (bill.status == PaymentStatus.PAID) {
+    return null;
+  }
+  const handleOpenWaiveBillWorkspace = (bill: MappedBill) => {
+    launchWorkspace('waive-bill-form', {
+      workspaceTitle: 'Waive Bill Form',
+      bill: bill,
+    });
+  };
+  return (
+    <Button
+      size="sm"
+      onClick={() => handleOpenWaiveBillWorkspace(bill)}
+      renderIcon={(props) => <Scalpel size={24} {...props} />}
+      kind="danger--ghost"
+      iconDescription="TrashCan">
+      {t('waiveBill', 'Waive Bill')}
+    </Button>
+  );
+};
+
+export default WaiveBillActionButton;

package/src/bill-administration/patient-billing/bill-line-items.component.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {
+  StructuredListHead,
+  StructuredListRow,
+  StructuredListCell,
+  StructuredListBody,
+  StructuredListWrapper,
+  Layer,
+  OverflowMenu,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { extractString } from '../../helpers';
+import { LineItem, MappedBill, PaymentStatus } from '../../types';
+import styles from './patient-billing.scss';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import { useCurrencyFormatting } from '../../helpers/currency';
+
+const BillLineItems: React.FC<{ bill: MappedBill }> = ({ bill }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Layer>
+      <StructuredListWrapper className={styles.billListContainer} selection={true} isCondensed>
+        <StructuredListHead>
+          <StructuredListRow head>
+            <StructuredListCell head>{t('billItem', 'Bill item')}</StructuredListCell>
+            <StructuredListCell head>{t('quantity', 'Quantity')}</StructuredListCell>
+            <StructuredListCell head>{t('unitPrice', 'Unit Price')}</StructuredListCell>
+            <StructuredListCell head>{t('total', 'Total')}</StructuredListCell>
+            <StructuredListCell head>{t('status', 'Status')}</StructuredListCell>
+            <StructuredListCell head>{t('actions', 'Actions')}</StructuredListCell>
+          </StructuredListRow>
+        </StructuredListHead>
+        <StructuredListBody>
+          {bill?.lineItems.map((lineItem) => (
+            <LineItemRow bill={bill} lineItem={lineItem} key={lineItem.uuid} />
+          ))}
+        </StructuredListBody>
+      </StructuredListWrapper>
+    </Layer>
+  );
+};
+
+const LineItemRow = ({ lineItem, bill }: { lineItem: LineItem; bill: MappedBill }) => {
+  const { t } = useTranslation();
+  const { format: formatCurrency } = useCurrencyFormatting();
+
+  const refundedLineItemUUIDs = bill.lineItems.filter((li) => Math.sign(li.price) === -1).map((li) => li.uuid);
+  const isRefundedLineItem = refundedLineItemUUIDs.includes(lineItem.uuid);
+
+  const refundedLineItemBillableServiceUUIDs = bill.lineItems
+    .filter((li) => Math.sign(li.price) === -1)
+    .map((li) => li.billableService.split(':').at(0));
+
+  const isRefundedBillableService = refundedLineItemBillableServiceUUIDs.includes(
+    lineItem.billableService.split(':').at(0),
+  );
+
+  const extensionHeight = lineItem.paymentStatus === PaymentStatus.PAID ? '3em' : '5em';
+
+  return (
+    <StructuredListRow className={isRefundedLineItem && styles.refundedItem}>
+      <StructuredListCell>
+        {lineItem.item === '' ? lineItem.billableService.split(':')[1] : extractString(lineItem.item)}
+      </StructuredListCell>
+      <StructuredListCell>{lineItem.quantity}</StructuredListCell>
+      <StructuredListCell>{formatCurrency(lineItem.price)}</StructuredListCell>
+      <StructuredListCell>{formatCurrency(lineItem.price * lineItem.quantity)}</StructuredListCell>
+      <StructuredListCell>{lineItem.paymentStatus}</StructuredListCell>
+
+      <StructuredListCell>
+        <OverflowMenu aria-label="overflow-menu">
+          <ExtensionSlot
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', height: extensionHeight }}
+            className="cds--overflow-menu-options__option"
+            name="bill-actions-overflow-menu-slot"
+            state={{ lineItem, bill, isRefundedBillableService }}
+          />
+        </OverflowMenu>
+      </StructuredListCell>
+    </StructuredListRow>
+  );
+};
+
+export default BillLineItems;

package/src/bill-administration/patient-billing/modals/cancel-bill.scss

@@ -0,0 +1,29 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+
+.modalHeaderLabel {
+  @include type.type-style('label-02');
+}
+
+.modalHeaderHeading {
+  @include type.type-style('heading-compact-02');
+}
+
+.button_spinner {
+  padding: 0;
+  margin-right: layout.$spacing-03;
+}
+
+.loading_wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.contentcontainer {
+  padding-left: layout.$spacing-05;
+}
+
+.contentvalue {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: layout.$spacing-03;
+}