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

package/src/bill-deposit/components/modal/reverse-transaction.modal.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import { mutate } from 'swr';
+import { type BillDepositTransaction } from '../../types/bill-deposit.types';
+import { reverseTransaction } from '../../utils/bill-deposit.utils';
+
+type ReverseTransactionModalProps = {
+  onClose: () => void;
+  depositUuid: string;
+  transaction: BillDepositTransaction;
+};
+
+const ReverseTransactionModal: React.FC<ReverseTransactionModalProps> = ({ onClose, depositUuid, transaction }) => {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleReverse = async () => {
+    setIsLoading(true);
+    const response = await reverseTransaction(depositUuid, transaction.uuid);
+    if (response.status === 204) {
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: t('transactionReversed', 'Transaction reversed 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('transactionReverseError', 'Error reversing transaction'),
+      });
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <div>
+      <ModalHeader onClose={onClose}>{t('reverseTransaction', 'Reverse Transaction')}</ModalHeader>
+      <ModalBody>{t('reverseTransactionConfirmation', 'Are you sure you want to reverse this transaction?')}</ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={onClose}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleReverse} disabled={isLoading}>
+          {t('reverse', 'Reverse')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default ReverseTransactionModal;

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

@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from 'react';
+import { formatDate, launchWorkspace, parseDate } from '@openmrs/esm-framework';
+import { useBillDeposit } from '../../hooks/useBillDeposit';
+import { Button, InlineLoading } from '@carbon/react';
+import styles from './bill-deposit-search.scss';
+import { useTranslation } from 'react-i18next';
+import { Add } from '@carbon/react/icons';
+import EmptyPatientBill from '../../../past-patient-bills/patient-bills-dashboard/empty-patient-bill.component';
+import PatientSearch from './components/patient-search';
+import PatientInfo from './components/patient-info';
+import DepositTable from './components/deposit-table';
+
+const BillDepositSearch: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedPatientUuid, setSelectedPatientUuid] = useState<string | null>(null);
+  const [isInitialLoad, setIsInitialLoad] = useState(false);
+  const { deposits, isLoading } = useBillDeposit(selectedPatientUuid);
+
+  useEffect(() => {
+    if (selectedPatientUuid) {
+      setIsInitialLoad(true);
+    }
+  }, [selectedPatientUuid]);
+
+  useEffect(() => {
+    if (!isLoading && isInitialLoad) {
+      setIsInitialLoad(false);
+    }
+  }, [isLoading, isInitialLoad]);
+
+  const formattedDeposits = deposits.map((deposit) => ({
+    id: deposit.uuid,
+    depositType: deposit.depositType,
+    amount: deposit.amount,
+    status: deposit.status,
+    dateCreated: formatDate(parseDate(deposit.dateCreated)),
+    referenceNumber: deposit.referenceNumber,
+    availableBalance: deposit.availableBalance,
+    patient: deposit.patient,
+    description: deposit.description,
+    transactions: deposit.transactions,
+  }));
+
+  const handleLaunchDepositForm = () => {
+    launchWorkspace('add-deposit-workspace', {
+      patientUuid: selectedPatientUuid,
+    });
+  };
+
+  const handlePatientSelect = (uuid: string) => {
+    setSelectedPatientUuid(uuid);
+  };
+
+  const renderContent = () => {
+    if (!selectedPatientUuid) {
+      return <EmptyPatientBill />;
+    }
+
+    if (isInitialLoad) {
+      return (
+        <div className={styles.initialLoadingContainer}>
+          <InlineLoading description={t('loading', 'Loading...')} />
+        </div>
+      );
+    }
+
+    return (
+      <>
+        <div className={styles.depositResultsHeader}>
+          <PatientInfo patientUuid={selectedPatientUuid} />
+          <div className={styles.actions}>
+            <Button renderIcon={Add} kind="ghost" onClick={handleLaunchDepositForm}>
+              {t('newDeposit', 'New Deposit')}
+            </Button>
+          </div>
+        </div>
+        {deposits.length === 0 ? (
+          <EmptyPatientBill
+            launchForm={handleLaunchDepositForm}
+            buttonText={t('newDeposit', 'New Deposit')}
+            title={t('noDepositsFound', 'No deposits found')}
+            subTitle={t('createNewDeposit', 'Create a new deposit for this patient')}
+          />
+        ) : (
+          <DepositTable deposits={formattedDeposits} />
+        )}
+      </>
+    );
+  };
+
+  return (
+    <div className={styles.billDepositSearchContainer}>
+      <PatientSearch onPatientSelect={handlePatientSelect} />
+      <div className={styles.searchResultsContainer}>
+        {renderContent()}
+        {isLoading && !isInitialLoad && (
+          <div className={styles.loadingOverlay}>
+            <InlineLoading description={t('loading', 'Loading...')} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BillDepositSearch;

package/src/bill-deposit/components/search/bill-deposit-search.scss

@@ -0,0 +1,107 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@carbon/type';
+
+.searchResultsContainer {
+  margin-top: layout.$spacing-05;
+  position: relative;
+  min-height: 200px;
+  padding: layout.$spacing-03;
+  border: 1px solid colors.$gray-20;
+}
+.searchBar {
+  & form {
+    border: none;
+  }
+}
+
+.billDepositSearchContainer {
+  background-color: colors.$white-0;
+}
+
+.depositResultsHeader {
+  height: layout.$layout-04;
+  background-color: colors.$white-0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  opacity: 0;
+  transform: translateY(-10px);
+  animation: fadeInDown 0.3s ease-out forwards;
+  margin-bottom: layout.$spacing-05;
+  border-bottom: 1px solid colors.$gray-20;
+
+  & .patientInfo {
+    align-items: center;
+    display: flex;
+    column-gap: layout.$spacing-03;
+
+    & .patientName {
+      @include type.type-style('heading-03');
+      color: colors.$gray-100;
+      margin: 0 layout.$spacing-03 0 layout.$spacing-05;
+    }
+
+    & .patientGender {
+      @include type.type-style('body-compact-02');
+      color: colors.$gray-70;
+    }
+
+    & .patientIdentifier {
+      @include type.type-style('body-compact-02');
+      color: colors.$gray-70;
+      margin: 0 layout.$spacing-03;
+    }
+  }
+
+  & .actions {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.initialLoadingContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  width: 100%;
+}
+
+.loadingOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  backdrop-filter: blur(2px);
+  transition: opacity 0.2s ease-in-out;
+  opacity: 1;
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/bill-deposit/components/search/components/deposit-table.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+  OverflowMenu,
+  OverflowMenuItem,
+  Pagination,
+} from '@carbon/react';
+import { launchWorkspace, showModal, usePagination } from '@openmrs/esm-framework';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import { type FormattedDeposit } from '../../../types/bill-deposit.types';
+import { BILL_DEPOSIT_STATUS } from '../../../constants/bill-deposit.constants';
+import TransactionList from './transaction-list/transaction-list.component';
+
+interface DepositTableProps {
+  deposits: Array<FormattedDeposit>;
+}
+
+const DepositTable: React.FC<DepositTableProps> = ({ deposits }) => {
+  const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(10);
+  const { results, totalPages, currentPage, goTo } = usePagination(deposits, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+
+  const headers = [
+    { header: t('dateCreated', 'Date Created'), key: 'dateCreated' },
+    { header: t('referenceNumber', 'Reference Number'), key: 'referenceNumber' },
+    { header: t('depositType', 'Deposit Type'), key: 'depositType' },
+    { header: t('amount', 'Amount'), key: 'amount' },
+    { header: t('availableBalance', 'Available Balance'), key: 'availableBalance' },
+    { header: t('status', 'Status'), key: 'status' },
+  ];
+
+  const handleEditDeposit = (deposit: FormattedDeposit) => {
+    launchWorkspace('add-deposit-workspace', {
+      deposit: { ...deposit, uuid: deposit.id },
+      patientUuid: deposit?.patient?.uuid,
+    });
+  };
+
+  const handleDeleteDeposit = (deposit: FormattedDeposit) => {
+    const dispose = showModal('delete-deposit-modal', {
+      depositUuid: deposit.id,
+      onClose: () => dispose(),
+      isOpen: true,
+    });
+  };
+
+  const handleApplyDepositToBill = (deposit: FormattedDeposit) => {
+    launchWorkspace('deposit-transaction-workspace', {
+      deposit: { ...deposit, uuid: deposit.id },
+      patientUuid: deposit?.patient?.uuid,
+    });
+  };
+
+  return (
+    <>
+      <DataTable size="sm" useZebraStyles rows={results} headers={headers} isExpandable>
+        {({
+          rows,
+          headers,
+          getTableProps,
+          getHeaderProps,
+          getRowProps,
+          getTableContainerProps,
+          getExpandHeaderProps,
+        }) => (
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                <TableExpandHeader {...getExpandHeaderProps()} />
+                {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) => (
+                <React.Fragment key={row.id}>
+                  <TableExpandRow {...getRowProps({ row })} isExpanded={row.isExpanded}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                    <TableCell className="cds--table-column-menu">
+                      <OverflowMenu size="sm" flipped>
+                        {deposits[index].status !== BILL_DEPOSIT_STATUS.USED && (
+                          <>
+                            <OverflowMenuItem
+                              itemText={t('applyDepositToBill', 'Apply Deposit to Bill')}
+                              onClick={() => handleApplyDepositToBill(deposits[index])}
+                            />
+                            <OverflowMenuItem
+                              itemText={t('editDeposit', 'Edit Deposit')}
+                              onClick={() => handleEditDeposit(deposits[index])}
+                            />
+                            <OverflowMenuItem
+                              hasDivider
+                              isDelete
+                              itemText={t('deleteDeposit', 'Delete Deposit')}
+                              onClick={() => handleDeleteDeposit(deposits[index])}
+                            />
+                          </>
+                        )}
+                      </OverflowMenu>
+                    </TableCell>
+                  </TableExpandRow>
+                  {row.isExpanded && (
+                    <TableExpandedRow colSpan={headers.length + 2}>
+                      <TransactionList transactions={deposits[index].transactions} depositUuid={deposits[index].id} />
+                    </TableExpandedRow>
+                  )}
+                </React.Fragment>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+
+      <Pagination
+        backwardText="Previous page"
+        forwardText="Next page"
+        itemsPerPageText="Items per page:"
+        page={currentPage}
+        pageNumberText="Page Number"
+        pageSize={pageSize}
+        pageSizes={pageSizes}
+        size="md"
+        totalItems={deposits.length}
+        onChange={({ page, pageSize: newPageSize }) => {
+          goTo(page);
+          setPageSize(newPageSize);
+        }}
+      />
+    </>
+  );
+};
+
+export default DepositTable;

package/src/bill-deposit/components/search/components/patient-info.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { InlineLoading } from '@carbon/react';
+import { usePatient, getPatientName, ErrorState } from '@openmrs/esm-framework';
+import styles from '../bill-deposit-search.scss';
+import { useTranslation } from 'react-i18next';
+import capitalize from 'lodash-es/capitalize';
+
+interface PatientInfoProps {
+  patientUuid: string | null;
+}
+
+const PatientInfo: React.FC<PatientInfoProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { patient, isLoading, error } = usePatient(patientUuid);
+
+  const patientName = patient ? getPatientName(patient) : '--';
+  const patientGender = capitalize(patient?.gender ?? '--');
+  const patientIdentifier = Array.isArray(patient?.identifier)
+    ? patient?.identifier[0]?.value ?? '--'
+    : patient?.identifier ?? '--';
+
+  if (isLoading) {
+    return <InlineLoading description={t('loading', 'Loading...')} />;
+  }
+  if (error || !patient) {
+    return <ErrorState error={error} headerTitle={t('error', 'Error')} />;
+  }
+
+  return (
+    <div className={styles.patientInfo}>
+      <span className={styles.patientName}>{patientName}</span>
+      <span className={styles.patientGender}>• {patientGender} •</span>
+      <span className={styles.patientIdentifier}>{patientIdentifier}</span>
+    </div>
+  );
+};
+
+export default PatientInfo;

package/src/bill-deposit/components/search/components/patient-search.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from '../bill-deposit-search.scss';
+
+interface PatientSearchProps {
+  onPatientSelect: (uuid: string) => void;
+}
+
+const PatientSearch: React.FC<PatientSearchProps> = ({ onPatientSelect }) => {
+  return (
+    <ExtensionSlot
+      className={styles.searchBar}
+      name="patient-search-bar-slot"
+      state={{
+        selectPatientAction: onPatientSelect,
+        buttonProps: {
+          kind: 'secondary',
+        },
+      }}
+    />
+  );
+};
+
+export default PatientSearch;

package/src/bill-deposit/components/search/components/transaction-list/transaction-list.component.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ContainedList, ContainedListItem, OverflowMenu, OverflowMenuItem, InlineNotification } from '@carbon/react';
+import { BillDepositTransaction } from '../../../../types/bill-deposit.types';
+import { formatDate, parseDate, showModal } from '@openmrs/esm-framework';
+import { convertToCurrency } from '../../../../../helpers';
+import styles from './transaction-list.scss';
+
+type TransactionListProps = {
+  transactions: Array<BillDepositTransaction>;
+  depositUuid: string;
+};
+
+const TransactionList: React.FC<TransactionListProps> = ({ transactions, depositUuid }) => {
+  const { t } = useTranslation();
+
+  const handleReverse = (transaction: BillDepositTransaction) => {
+    const dispose = showModal('reverse-transaction-modal', {
+      depositUuid: depositUuid,
+      transaction,
+      onClose: () => dispose(),
+    });
+  };
+
+  const filterTransactions = (transactions: Array<BillDepositTransaction>) => {
+    return transactions.filter((transaction) => transaction.voided === false);
+  };
+
+  if (filterTransactions(transactions).length === 0) {
+    return (
+      <InlineNotification
+        aria-label="closes notification"
+        kind="error"
+        lowContrast
+        statusIconDescription="notification"
+        subtitle={t('noTransactions', 'No transactions found')}
+        title={t('noTransactions', 'No transactions found')}
+      />
+    );
+  }
+
+  return (
+    <ContainedList
+      className={styles.transactionListContainer}
+      size="sm"
+      label={t('transactionList', 'Transaction List')}>
+      {filterTransactions(transactions).map((transaction) => (
+        <ContainedListItem
+          key={transaction.uuid}
+          action={
+            <OverflowMenu flipped size="sm" ariaLabel={t('transactionListOptions', 'Transaction list options')}>
+              <OverflowMenuItem onClick={() => handleReverse(transaction)} itemText={t('reverse', 'Reverse')} />
+              <OverflowMenuItem itemText={t('remove', 'Remove')} isDelete hasDivider />
+            </OverflowMenu>
+          }>
+          {`${formatDate(parseDate(transaction.dateCreated))} - ${transaction.transactionType} - ${convertToCurrency(
+            transaction.amount,
+          )}${transaction.reason ? ' - ' + transaction.reason : ''}`}
+        </ContainedListItem>
+      ))}
+    </ContainedList>
+  );
+};
+
+export default TransactionList;

package/src/bill-deposit/components/search/components/transaction-list/transaction-list.scss

@@ -0,0 +1,5 @@
+@use '@carbon/colors';
+
+.transactionListContainer {
+  background-color: colors.$white-0;
+}

package/src/bill-deposit/constants/bill-deposit.constants.ts

@@ -0,0 +1,25 @@
+export const BILL_DEPOSIT_STATUS = {
+  PENDING: 'PENDING',
+  ACTIVE: 'ACTIVE',
+  USED: 'USED',
+  REFUNDED: 'REFUNDED',
+  VOIDED: 'VOIDED',
+} as const;
+
+export const BILL_DEPOSIT_TYPES = {
+  CASH: 'CASH',
+  INSURANCE: 'INSURANCE',
+  MOBILE_MONEY: 'MOBILE_MONEY',
+  WAIVER: 'WAIVER',
+} as const;
+
+export const CUSTOM_REPRESENTATION =
+  'custom:(uuid,display,voided,patient:(uuid,display,person,identifiers:(uuid,display,identifier)),amount,depositType,status,referenceNumber,description,transactions:full,dateCreated,availableBalance)';
+
+export const MAX_REFERENCE_NUMBER_COUNTER = 999;
+
+export const BILL_DEPOSIT_TRANSACTION_TYPES = {
+  APPLY: 'APPLY',
+  REFUND: 'REFUND',
+  TRANSFER: 'REVERSE',
+};

package/src/bill-deposit/hooks/useBillDeposit.ts

@@ -0,0 +1,43 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type BillDeposit, type CreateDepositPayload } from '../types/bill-deposit.types';
+import { CUSTOM_REPRESENTATION } from '../constants/bill-deposit.constants';
+import { saveDeposit, deleteDeposit } from '../utils/bill-deposit.utils';
+
+export const useBillDeposit = (patientUuid: string) => {
+  const { data, error, isLoading, mutate } = useSWR<{ data: { results: Array<BillDeposit> } }>(
+    patientUuid
+      ? `${restBaseUrl}/cashier/deposit?patient=${patientUuid}&includeAll=false&v=${CUSTOM_REPRESENTATION}`
+      : null,
+    openmrsFetch,
+  );
+
+  const deposits = data?.data.results ?? [];
+
+  const createDeposit = async (deposit: CreateDepositPayload) => {
+    const response = await saveDeposit(deposit);
+    await mutate();
+    return response;
+  };
+
+  const updateDeposit = async (deposit: Partial<BillDeposit>, uuid: string) => {
+    const response = await saveDeposit(deposit, uuid);
+    await mutate();
+    return response;
+  };
+
+  const removeDeposit = async (uuid: string) => {
+    const response = await deleteDeposit(uuid);
+    await mutate();
+    return response;
+  };
+
+  return {
+    deposits,
+    isLoading,
+    error,
+    createDeposit,
+    updateDeposit,
+    removeDeposit,
+  };
+};

package/src/bill-deposit/styles/bill-deposit-dashboard.scss

@@ -0,0 +1,11 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.billDepositDashboard {
+  border-bottom: 1px solid colors.$gray-20;
+}
+
+.tabsContainer {
+  margin: layout.$layout-01;
+  background-color: colors.$white-0;
+}