@digihmis/esm-billing-app 1.0.0

package/src/billing-timesheet-modal/billing-timesheet-modal.scss

@@ -0,0 +1,56 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.patientHeader {
+  padding: layout.$spacing-05;
+  border-bottom: 1px solid colors.$gray-20;
+  background-color: colors.$gray-10;
+
+  .patientName {
+    @include type.type-style('heading-compact-01');
+    font-weight: 600;
+    margin-right: layout.$spacing-03;
+  }
+
+  .patientId {
+    @include type.type-style('body-compact-01');
+    font-weight: 600;
+    margin-right: layout.$spacing-02;
+  }
+
+  .patientDetails {
+    @include type.type-style('body-compact-01');
+    color: colors.$gray-70;
+  }
+  .currentLocation {
+    @include type.type-style('body-compact-01');
+    color: red;
+    float: right;
+  }
+}
+:global(.cds--select-input) {
+  background-color: colors.$gray-20;
+}
+
+@media (min-width: 82rem) {
+  :global(.cds--modal-container) {
+    width: 38%;
+  }
+}
+
+.providerInfo {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  background-color: $ui-01;
+}
+
+.providerLabel {
+  margin: 0;
+}
+
+.providerName {
+  margin: 0;
+}

package/src/billing-timesheet-modal/billing-timesheet-modal.tsx

@@ -0,0 +1,281 @@
+import {
+  Button,
+  ModalFooter,
+  ModalHeader,
+  ModalBody,
+  InlineLoading,
+  Select,
+  SelectItem,
+  InlineNotification,
+} from '@carbon/react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import { Logout } from '@carbon/react/icons';
+import styles from './billing-timesheet-modal.scss';
+import { useCashPoints, useCurrentTimesheet } from '../billing-dashboard/billing-dashboard.resource';
+import { clockIn, clockOut } from './billing-timesheet-resource-modal';
+
+interface BillingTimesheetModalProps {
+  closeModal?: () => void;
+  onClockInSuccess?: (sessionData: any) => void;
+  onClockOutSuccess?: () => void;
+}
+
+export const BillingTimesheetModal: React.FC<BillingTimesheetModalProps> = ({
+  closeModal,
+  onClockInSuccess,
+  onClockOutSuccess,
+}) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const currentProvider = session?.currentProvider;
+  const providerUuid = currentProvider?.uuid;
+
+  const { activeTimesheet, isClockedIn, mutate: mutateTimesheet } = useCurrentTimesheet();
+  const { cashPoints, isLoading: loadingCashPoints, error: cashPointsError } = useCashPoints();
+
+  const [selectedCashPoint, setSelectedCashPoint] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleCashPointChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedCashPoint(event.target.value);
+    setErrorMessage('');
+  };
+
+  const handleClockIn = async () => {
+    if (!selectedCashPoint) {
+      setErrorMessage(t('selectCashPointRequired', 'Please select a cash point'));
+      return;
+    }
+
+    if (!providerUuid) {
+      setErrorMessage(t('providerNotFound', 'Provider information not found'));
+      return;
+    }
+
+    setErrorMessage('');
+    setIsSubmitting(true);
+
+    try {
+      const response = await clockIn(providerUuid, selectedCashPoint);
+      await mutateTimesheet();
+
+      showSnackbar({
+        title: t('clockedIn', 'Clocked In'),
+        kind: 'success',
+        subtitle: t('successfullyClocked', 'You have successfully clocked in'),
+      });
+
+      if (onClockInSuccess) {
+        onClockInSuccess(response?.data);
+      }
+
+      closeModal?.();
+    } catch (error) {
+      const errorMsg =
+        error?.responseBody?.error?.message || t('clockInFailed', 'Failed to clock in. Please try again.');
+      setErrorMessage(errorMsg);
+
+      showSnackbar({
+        title: t('clockInError', 'Clock In Error'),
+        kind: 'error',
+        subtitle: errorMsg,
+      });
+
+      console.error('Clock in error:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleSwitchCashPoint = async () => {
+    if (!selectedCashPoint) {
+      setErrorMessage(t('selectCashPointRequired', 'Please select a cash point'));
+      return;
+    }
+
+    if (!activeTimesheet?.uuid) {
+      setErrorMessage(t('noActiveSession', 'No active session found'));
+      return;
+    }
+
+    if (!providerUuid) {
+      setErrorMessage(t('providerNotFound', 'Provider information not found'));
+      return;
+    }
+
+    setErrorMessage('');
+    setIsSubmitting(true);
+
+    try {
+      // Clock out from current cash point
+      await clockOut(activeTimesheet.uuid);
+
+      // Clock in to new cash point
+      const response = await clockIn(providerUuid, selectedCashPoint);
+      await mutateTimesheet();
+
+      showSnackbar({
+        title: t('switchedCashPoint', 'Cash Point Switched'),
+        kind: 'success',
+        subtitle: t('successfullySwitched', 'You have successfully switched cash points'),
+      });
+
+      if (onClockInSuccess) {
+        onClockInSuccess(response?.data);
+      }
+
+      closeModal?.();
+    } catch (error) {
+      const errorMsg =
+        error?.responseBody?.error?.message || t('switchFailed', 'Failed to switch cash points. Please try again.');
+      setErrorMessage(errorMsg);
+
+      showSnackbar({
+        title: t('switchError', 'Switch Error'),
+        kind: 'error',
+        subtitle: errorMsg,
+      });
+
+      console.error('Switch cash point error:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Handle loading and error states
+  if (cashPointsError) {
+    return (
+      <>
+        <ModalHeader closeModal={closeModal} title={t('billingSession', 'Billing Session')} />
+        <ModalBody>
+          <InlineNotification
+            kind="error"
+            title={t('error', 'Error')}
+            subtitle={t('errorLoadingCashPoints', 'Error loading cash points. Please try again.')}
+            lowContrast
+            hideCloseButton
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal} type="button">
+            {t('close', 'Close')}
+          </Button>
+        </ModalFooter>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal}>
+        <div className={styles.patientHeader}>
+          <span className={styles.patientName}>
+            {isClockedIn ? t('switchCashPoint', 'Switch Cash Point') : t('clockInToBilling', 'Clock In to Billing')}
+          </span>
+          {isClockedIn && activeTimesheet && (
+            <span className={styles.currentLocation}>
+              ·{' '}
+              {t('currentlyActiveAt', 'Currently active at {{location}}', {
+                location: activeTimesheet.cashPoint?.name || t('unknown', 'Unknown'),
+              })}
+            </span>
+          )}
+        </div>
+      </ModalHeader>
+
+      <ModalBody>
+        {errorMessage && (
+          <InlineNotification
+            kind="error"
+            title={t('error', 'Error')}
+            subtitle={errorMessage}
+            lowContrast
+            hideCloseButton
+            className={styles.errorNotification}
+          />
+        )}
+
+        {loadingCashPoints ? (
+          <InlineLoading description={t('loadingCashPoints', 'Loading cash points...')} />
+        ) : (
+          <div className={styles.modalContent}>
+            {isClockedIn && activeTimesheet && (
+              <div
+                style={{
+                  marginBottom: '1rem',
+                  padding: '0.75rem',
+                  backgroundColor: '#fff3cd',
+                  borderLeft: '4px solid #ffc107',
+                  borderRadius: '4px',
+                }}>
+                <p style={{ margin: 0, fontSize: '0.875rem' }}>
+                  <strong>{t('switchingCashPoints', 'Switching Cash Points')}</strong>
+                </p>
+                <p style={{ margin: '0.25rem 0 0 0', fontSize: '0.875rem' }}>
+                  {t(
+                    'willAutoTimesheetClockOut',
+                    'You will be automatically clocked out from {{current}} and clocked in to your selected cash point.',
+                    {
+                      current: activeTimesheet?.cashPoint?.name,
+                    },
+                  )}
+                </p>
+              </div>
+            )}
+
+            <Select
+              id="cashPoint"
+              labelText={
+                isClockedIn
+                  ? t('selectCashPointToSwitch', 'Select a cash point to switch to:')
+                  : t('selectCashPointToClockIn', 'Select a cash point to clock in:')
+              }
+              value={selectedCashPoint}
+              onChange={handleCashPointChange}
+              disabled={isSubmitting}
+              className={styles.cashPointSelect}>
+              <SelectItem value="" text={t('chooseCashPoint', 'Choose a cash point')} />
+              {cashPoints?.map((cashPoint) => (
+                <SelectItem key={cashPoint.uuid} value={cashPoint.uuid} text={`${cashPoint.name}`} />
+              ))}
+            </Select>
+          </div>
+        )}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal} type="button" disabled={isSubmitting}>
+          {t('cancel', 'Cancel')}
+        </Button>
+
+        {isClockedIn ? (
+          <Button
+            onClick={handleSwitchCashPoint}
+            type="button"
+            disabled={isSubmitting || !selectedCashPoint || loadingCashPoints}
+            renderIcon={Logout}>
+            {isSubmitting ? (
+              <InlineLoading description={t('switchingCashPoint', 'Switching cash point...')} />
+            ) : (
+              t('switchCashPoint', 'Switch Cash Point')
+            )}
+          </Button>
+        ) : (
+          <Button
+            onClick={handleClockIn}
+            type="button"
+            disabled={isSubmitting || !selectedCashPoint || loadingCashPoints}>
+            {isSubmitting ? (
+              <InlineLoading description={t('clockingIn', 'Clocking in...')} />
+            ) : (
+              t('clockIn', 'Clock In')
+            )}
+          </Button>
+        )}
+      </ModalFooter>
+    </>
+  );
+};

package/src/billing-timesheet-modal/billing-timesheet-resource-modal.ts

@@ -0,0 +1,37 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+/**
+ * Clock in a cashier to a cash point
+ */
+export const clockIn = async (cashierUuid: string, cashPointUuid: string) => {
+  const url = `${restBaseUrl}/cashier/timesheet`;
+
+  return openmrsFetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: {
+      cashier: cashierUuid,
+      cashPoint: cashPointUuid,
+      clockIn: new Date().toISOString(),
+    },
+  });
+};
+
+/**
+ * Clock out the current cashier (close the timesheet)
+ */
+export const clockOut = async (timesheetUuid: string) => {
+  const url = `${restBaseUrl}/cashier/timesheet/${timesheetUuid}`;
+
+  return openmrsFetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: {
+      clockOut: new Date().toISOString(),
+    },
+  });
+};

package/src/bills-table/bills-table.component.tsx

@@ -0,0 +1,323 @@
+import React, { useCallback, useId, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  InlineLoading,
+  Layer,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  usePagination,
+  ErrorState,
+  ConfigurableLink,
+} from '@openmrs/esm-framework';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import styles from './bills-table.scss';
+import { useBills } from '../billing-dashboard/metrics/metrics.resource';
+import { extractString, useCurrencyFormatting } from '../utils';
+
+const filterItems = [
+  { id: '', text: 'All bills' },
+  { id: 'PENDING', text: 'Pending bills' },
+  { id: 'PAID', text: 'Paid bills' },
+  // { id: 'EXEMPTED', text: 'Exempted bills' },
+];
+
+type BillTableProps = {
+  defaultBillPaymentStatus?: string;
+};
+
+const BillsTable: React.FC<BillTableProps> = ({ defaultBillPaymentStatus = '' }) => {
+  const { t } = useTranslation();
+  const id = useId();
+  const config = useConfig();
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const [billPaymentStatus, setBillPaymentStatus] = useState(defaultBillPaymentStatus);
+  const pageSizes = config?.bills?.pageSizes ?? [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState(config?.bills?.pageSize ?? 10);
+  const [searchString, setSearchString] = useState('');
+  const { format: formatCurrency } = useCurrencyFormatting();
+
+  const { bills, isLoading, isValidating, error } = useBills(
+    '',
+    billPaymentStatus,
+    dayjs().startOf('day').toDate(),
+    dayjs().endOf('day').toDate(),
+  );
+
+  const headerData = [
+    {
+      header: t('visitTime', 'Visit time'),
+      key: 'visitTime',
+    },
+    {
+      header: t('identifier', 'Identifier'),
+      key: 'identifier',
+    },
+    {
+      header: t('name', 'Name'),
+      key: 'patientName',
+    },
+    {
+      header: t('billedItems', 'Billed Items'),
+      key: 'billedItems',
+    },
+    {
+      header: t('totalAmount', 'Total Amount'),
+      key: 'totalAmount',
+    },
+    {
+      header: t('status', 'Status'),
+      key: 'status',
+    },
+  ];
+
+  const searchResults = useMemo(() => {
+    if (bills !== undefined && bills.length > 0) {
+      if (searchString && searchString.trim() !== '') {
+        const search = searchString.toLowerCase();
+        return bills?.filter((activeBillRow) =>
+          Object.entries(activeBillRow).some(([header, value]) => {
+            if (header === 'patientUuid') {
+              return false;
+            }
+            return `${value}`.toLowerCase().includes(search);
+          }),
+        );
+      }
+    }
+
+    return bills;
+  }, [searchString, bills]);
+
+  const { paginated, goTo, results, currentPage } = usePagination(searchResults, pageSize);
+
+  // Improved function using extractString utility
+  const setBilledItems = (bill) => {
+    if (!bill?.lineItems || bill.lineItems.length === 0) {
+      return '--';
+    }
+
+    return bill.lineItems
+      .map((item) => extractString(item?.billableService || item?.item || ''))
+      .filter(Boolean)
+      .join(' & ');
+  };
+
+  const rowData = results?.map((bill, index) => ({
+    id: `${index}`,
+    uuid: bill.uuid,
+    patientName: (
+      <ConfigurableLink
+        style={{ textDecoration: 'none', maxWidth: '50%' }}
+        to={`\${openmrsSpaBase}/home/accounting/patient/\${patientUuid}/\${uuid}`}
+        templateParams={{ patientUuid: bill.patientUuid, uuid: bill.uuid }}>
+        {bill.patientName}
+      </ConfigurableLink>
+    ),
+    visitTime: bill.dateCreated,
+    identifier: bill.identifier,
+    billedItems: setBilledItems(bill),
+    totalAmount: formatCurrency(bill.totalAmount || 0),
+    status: (
+      <span
+        className={classNames(styles.statusBadge, {
+          [styles.statusPaid]: bill.status === 'PAID',
+          [styles.statusPending]: bill.status === 'PENDING',
+          [styles.statusExempted]: bill.status === 'EXEMPTED',
+        })}>
+        {bill.status}
+      </span>
+    ),
+  }));
+
+  const handleSearch = useCallback(
+    (e) => {
+      goTo(1);
+      setSearchString(e.target.value);
+    },
+    [goTo, setSearchString],
+  );
+
+  const handleFilterChange = ({ selectedItem }) => setBillPaymentStatus(selectedItem.id);
+
+  if (isLoading) {
+    return (
+      <div className={styles.loaderContainer}>
+        <DataTableSkeleton
+          rowCount={pageSize}
+          showHeader={false}
+          showToolbar={false}
+          zebra
+          columnCount={headerData?.length}
+        />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorContainer}>
+        <Layer>
+          <ErrorState error={error} headerTitle={t('billsList', 'Bill list')} />
+        </Layer>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        {bills?.length > 0 ? (
+          <Dropdown
+            className={styles.filterDropdown}
+            direction="bottom"
+            id={`filter-${id}`}
+            initialSelectedItem={filterItems.find((item) => item.id === billPaymentStatus)}
+            items={filterItems}
+            itemToString={(item) => (item ? item.text : '')}
+            label=""
+            onChange={handleFilterChange}
+            size={responsiveSize}
+            titleText={t('filterBy', 'Filter by') + ':'}
+            type="inline"
+          />
+        ) : null}
+      </div>
+
+      {bills?.length > 0 ? (
+        <div className={styles.billListContainer}>
+          <FilterableTableHeader
+            handleSearch={handleSearch}
+            isValidating={isValidating}
+            layout={layout}
+            responsiveSize={responsiveSize}
+            t={t}
+          />
+          <DataTable
+            isSortable
+            rows={rowData}
+            headers={headerData}
+            size={responsiveSize}
+            useZebraStyles={rowData?.length > 1 ? true : false}>
+            {({ rows, headers, getRowProps, getTableProps }) => (
+              <TableContainer>
+                <Table {...getTableProps()} aria-label="bill list">
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key}>{header.header}</TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        {...getRowProps({
+                          row,
+                        })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+          {searchResults?.length === 0 && (
+            <>
+              <div className={styles.emptyStateContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>{t('noMatchingBillsToDisplay', 'No matching bills to display')}</p>
+                    <p className={styles.emptyStateHelperText}>{t('checkFilters', 'Check the filters above')}</p>
+                  </div>
+                </Tile>
+              </div>
+            </>
+          )}
+          {paginated && (
+            <Pagination
+              forwardText="Next page"
+              backwardText="Previous page"
+              page={currentPage}
+              pageSize={pageSize}
+              pageSizes={pageSizes}
+              totalItems={searchResults?.length}
+              className={styles.pagination}
+              size={responsiveSize}
+              onChange={({ pageSize: newPageSize, page: newPage }) => {
+                if (newPageSize !== pageSize) {
+                  setPageSize(newPageSize);
+                }
+                if (newPage !== currentPage) {
+                  goTo(newPage);
+                }
+              }}
+            />
+          )}
+        </div>
+      ) : (
+        <>
+          <div className={styles.emptyStateContainer}>
+            <Tile className={styles.tile}>
+              <div className={styles.tileContent}>
+                <p className={styles.content}> {t('noBillsAvailable', 'No bills available')}</p>
+                <p className={styles.emptyStateHelperText}>
+                  {t('noBillsToDisplay', 'There are currently no bills to display.')}
+                </p>
+              </div>
+            </Tile>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveSize, t }) {
+  return (
+    <>
+      <div className={styles.headerContainer}>
+        <div
+          className={classNames({
+            [styles.tabletHeading]: !isDesktop(layout),
+            [styles.desktopHeading]: isDesktop(layout),
+          })}>
+          <h4>{t('billList', 'Bill list')}</h4>
+        </div>
+        <div className={styles.backgroundDataFetchingIndicator}>
+          <span>{isValidating ? <InlineLoading /> : null}</span>
+        </div>
+      </div>
+      <Search
+        labelText=""
+        placeholder={t('filterTable', 'Filter table')}
+        onChange={handleSearch}
+        size={responsiveSize}
+      />
+    </>
+  );
+}
+
+export default BillsTable;