@digihmis/esm-billing-app 1.0.0

package/src/billing-checkin-form/visit-attributes/visit-attributes-form.component.tsx

@@ -0,0 +1,244 @@
+import {
+  ComboBox,
+  InlineLoading,
+  RadioButton,
+  RadioButtonGroup,
+  TextInput,
+  StructuredListSkeleton,
+} from '@carbon/react';
+import { useConfig, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import { BillingConfig } from '../../config-schema';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import styles from './visit-attributes-form.scss';
+import { VisitAttributesFormValue } from '../billing-checkin-form-schema';
+import { usePaymentModes } from './visit-attributes-form.resource';
+
+type VisitAttributesFormProps = {
+  setAttributes: (state) => void;
+};
+
+const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { insuranceSchemes } = useConfig<BillingConfig>();
+  const { visitAttributeTypes, patientExemptionCategories, insurancePaymentMethod } = useConfig<BillingConfig>();
+  const { setValue, watch, control, getValues } = useFormContext<VisitAttributesFormValue>();
+  const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentModes();
+  const [isPatientExempted, paymentMethods] = watch(['isPatientExempted', 'paymentMethods']);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const patientExemptionOptions = useMemo(
+    () => [
+      { uuid: 'false', display: t('payingPatient', 'Yes, paying patient'), name: 'yes' },
+      { uuid: 'true', display: t('nonPayingPatient', 'No, non-paying patient (exempt)'), name: 'no' },
+    ],
+    [t],
+  );
+
+  const filteredOptions = useMemo(() => {
+    if (!searchTerm) {
+      return patientExemptionOptions;
+    }
+    return patientExemptionOptions.filter((option) => option.display.toLowerCase().includes(searchTerm.toLowerCase()));
+  }, [patientExemptionOptions, searchTerm]);
+
+  const { results, currentPage, goTo } = usePagination(filteredOptions, 5);
+  const hasNoMatchingSearchResults = filteredOptions.length === 0;
+
+  const resetFormFieldsForNonExemptedPatients = useCallback(() => {
+    setValue('insuranceScheme', '');
+    setValue('policyNumber', '');
+    setValue('exemptionCategory', '');
+    setValue('paymentMethods', '');
+  }, [setValue]);
+
+  useEffect(() => {
+    resetFormFieldsForNonExemptedPatients();
+  }, [isPatientExempted, resetFormFieldsForNonExemptedPatients]);
+
+  const createVisitAttributesPayload = useCallback(() => {
+    const values = getValues();
+    const formPayload = [
+      { uuid: visitAttributeTypes.isPatientExempted, value: values.isPatientExempted },
+      { uuid: visitAttributeTypes.paymentMethods, value: values.paymentMethods },
+      { uuid: visitAttributeTypes.policyNumber, value: values.policyNumber },
+      { uuid: visitAttributeTypes.insuranceScheme, value: values.insuranceScheme },
+      { uuid: visitAttributeTypes.exemptionCategory, value: values.exemptionCategory },
+    ];
+    const visitAttributesPayload = formPayload.filter(
+      (item) => item.value !== undefined && item.value !== null && item.value !== '',
+    );
+    return visitAttributesPayload.map(({ uuid, value }) => ({
+      attributeType: uuid,
+      value,
+    }));
+  }, [visitAttributeTypes, getValues]);
+
+  const [policyNumber, exemptionCategory, insuranceScheme] = watch([
+    'policyNumber',
+    'exemptionCategory',
+    'insuranceScheme',
+  ]);
+
+  useEffect(() => {
+    setAttributes(createVisitAttributesPayload());
+  }, [
+    isPatientExempted,
+    paymentMethods,
+    setAttributes,
+    createVisitAttributesPayload,
+    policyNumber,
+    exemptionCategory,
+    insuranceScheme,
+  ]);
+
+  if (isLoadingPaymentModes) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loadingDescription', 'Loading')}
+        description={t('loading', 'Loading data...')}
+      />
+    );
+  }
+
+  return (
+    <>
+      <section>
+        <div className={styles.sectionTitle}>{t('patientCategory', 'Payment Category')}</div>
+        <span className={styles.labelOption}>{t('isPatientExemptedLegend', 'Will the patient pay for services?')}</span>
+        <div className={styles.sectionField}>
+          <div className={classNames(styles.visitTypeOverviewWrapper, isTablet ? styles.tablet : styles.desktop)}>
+            {filteredOptions.length ? (
+              <>
+                <Controller
+                  name="isPatientExempted"
+                  control={control}
+                  defaultValue=""
+                  render={({ field: { onChange, value } }) => (
+                    <RadioButtonGroup
+                      className={styles.radioButtonGroup}
+                      name="patient-exemption"
+                      onChange={onChange}
+                      orientation="vertical"
+                      valueSelected={value}>
+                      {results.map(({ uuid, display, name }) => (
+                        <RadioButton
+                          className={styles.radioButton}
+                          id={`patient-exemption-${uuid}`}
+                          key={uuid}
+                          labelText={display}
+                          value={uuid}
+                        />
+                      ))}
+                    </RadioButtonGroup>
+                  )}
+                />
+
+                {!hasNoMatchingSearchResults && filteredOptions.length > 5 && (
+                  <div className={styles.paginationContainer}>
+                    <PatientChartPagination
+                      currentItems={results.length}
+                      onPageNumberChange={({ page }) => goTo(page)}
+                      pageNumber={currentPage}
+                      pageSize={5}
+                      totalItems={filteredOptions?.length}
+                    />
+                  </div>
+                )}
+              </>
+            ) : (
+              <StructuredListSkeleton className={styles.skeleton} />
+            )}
+          </div>
+
+          {isPatientExempted === 'true' && (
+            <div className={styles.sectionFieldLayer}>
+              <Controller
+                control={control}
+                name="exemptionCategory"
+                render={({ field }) => (
+                  <ComboBox
+                    className={styles.sectionField}
+                    onChange={({ selectedItem }) => field.onChange(selectedItem?.value)}
+                    id="exemptionCategory"
+                    items={patientExemptionCategories}
+                    itemToString={(item) => (item ? item.label : '')}
+                    titleText={t('exemptionCategory', 'Exemption category')}
+                    placeholder={t('selectExemptionCategory', 'Select exemption category')}
+                  />
+                )}
+              />
+            </div>
+          )}
+
+          {isPatientExempted === 'false' && (
+            <div className={styles.sectionFieldLayer}>
+              <Controller
+                control={control}
+                name="paymentMethods"
+                render={({ field }) => (
+                  <ComboBox
+                    className={styles.sectionField}
+                    onChange={({ selectedItem }) => field.onChange(selectedItem)}
+                    initialSelectedItem={field.value}
+                    id="paymentMethods"
+                    items={paymentModes?.map((method) => method.uuid)}
+                    itemToString={(item) => paymentModes.find((mode) => mode.uuid === item)?.name ?? ''}
+                    titleText={t('paymentMethodsTitle', 'Payment method')}
+                    placeholder={t('selectPaymentMethod', 'Select payment method')}
+                  />
+                )}
+              />
+            </div>
+          )}
+
+          {paymentMethods === insurancePaymentMethod && isPatientExempted === 'false' && (
+            <>
+              <div className={styles.sectionFieldLayer}>
+                <Controller
+                  control={control}
+                  name="insuranceScheme"
+                  render={({ field }) => (
+                    <ComboBox
+                      className={styles.sectionField}
+                      onChange={({ selectedItem }) => field.onChange(selectedItem)}
+                      id="insurance-scheme"
+                      items={insuranceSchemes}
+                      itemToString={(item) => (item ? item : '')}
+                      titleText={t('insuranceScheme', 'Insurance scheme')}
+                      placeholder={t('selectInsuranceScheme', 'Select insurance scheme')}
+                    />
+                  )}
+                />
+              </div>
+              <div className={styles.sectionFieldLayer}>
+                <Controller
+                  control={control}
+                  name="policyNumber"
+                  render={({ field }) => (
+                    <TextInput
+                      {...field}
+                      className={styles.sectionField}
+                      onChange={(e) => field.onChange(e.target.value)}
+                      id="policy-number"
+                      type="text"
+                      labelText={t('policyNumber', 'Policy number')}
+                      placeholder={t('enterPolicyNumber', 'Enter policy number')}
+                    />
+                  )}
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default VisitAttributesForm;

package/src/billing-checkin-form/visit-attributes/visit-attributes-form.resource.ts

@@ -0,0 +1,23 @@
+import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { BillingConfig } from '../../config-schema';
+import { PaymentMethod } from '../type';
+import useSWR from 'swr';
+
+export const usePaymentModes = (excludeWaiver: boolean = true) => {
+  const { excludedPaymentMode } = useConfig<BillingConfig>();
+  const url = `${restBaseUrl}/cashier/paymentMode?v=full`;
+  const { data, isLoading, error, mutate } = useSWR<{ data: { results: Array<PaymentMethod> } }>(url, openmrsFetch, {
+    errorRetryCount: 2,
+  });
+  const allowedPaymentModes =
+    excludedPaymentMode?.length > 0
+      ? (data?.data?.results.filter((mode) => !excludedPaymentMode.some((excluded) => excluded.uuid === mode.uuid)) ??
+        [])
+      : (data?.data?.results ?? []);
+  return {
+    paymentModes: excludeWaiver ? allowedPaymentModes : data?.data?.results,
+    isLoading,
+    mutate,
+    error,
+  };
+};

package/src/billing-checkin-form/visit-attributes/visit-attributes-form.scss

@@ -0,0 +1,186 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+  flex-basis: 30%;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-basis: 100%;
+    margin-bottom: layout.$spacing-05;
+  }
+}
+
+.desktop {
+  background-color: $ui-01;
+
+  .paginationContainer div {
+    background-color: $ui-01;
+  }
+}
+
+.sectionField {
+  flex-basis: 70%;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-basis: 100%;
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    flex-basis: 100%;
+  }
+}
+
+.sectionFieldLayer {
+  margin-bottom: 0.5rem;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    margin-bottom: layout.$spacing-05;
+  }
+}
+
+.visitTypeOverviewWrapper {
+  margin: layout.$spacing-03 0;
+  border: 0.0625rem solid $grey-2;
+
+  &:has(.skeleton) {
+    border-bottom: none !important;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    margin: layout.$spacing-05 0;
+    border: none;
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    margin: layout.$spacing-04 0;
+  }
+}
+
+.visitTypeOverviewWrapper div:nth-child(3) > div:nth-child(2) {
+  position: relative;
+}
+
+.visitTypeOverviewWrapper div:nth-child(3) span * {
+  display: none;
+}
+
+.radioButtonGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: layout.$spacing-03;
+  min-height: layout.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-compact-01');
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    margin-top: layout.$spacing-02;
+    min-height: auto;
+  }
+}
+
+.radioButton {
+  padding: layout.$spacing-02 layout.$spacing-05;
+  margin: layout.$spacing-03 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03 layout.$spacing-04;
+    margin: layout.$spacing-02 0;
+    width: 100%;
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    padding: layout.$spacing-03 layout.$spacing-04;
+  }
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  padding: layout.$spacing-09 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-06 layout.$spacing-03;
+  }
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    width: 100%;
+  }
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: 0 layout.$spacing-03;
+  }
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    @include type.type-style('heading-compact-01');
+    text-align: center;
+  }
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    @include type.type-style('body-compact-02');
+    text-align: center;
+  }
+}
+
+.labelOption {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  color: var(--cds-text-secondary, #525252);
+  vertical-align: baseline;
+  margin-bottom: 0.5rem;
+  font-weight: 400;
+  line-height: 1rem;
+  display: inline-block;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 0.875rem;
+    margin-bottom: layout.$spacing-04;
+    display: block;
+  }
+}
+
+.paginationContainer {
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+
+    div {
+      flex-direction: column;
+      align-items: stretch;
+      gap: layout.$spacing-03;
+    }
+  }
+}
+
+.skeleton {
+  :global(.omrs-breakpoint-lt-tablet) & {
+    min-height: 10rem;
+  }
+}

package/src/billing-dashboard/billing-dashboard.component.tsx

@@ -0,0 +1,224 @@
+import React, { useMemo, useState } from 'react';
+import { PageHeader } from '../billing-header/page-header/page-header.component';
+import styles from './billing-dashboard.scss';
+import { InlineLoading, Tile, Button } from '@carbon/react';
+import { useBillMetrics, useBills } from './metrics/metrics.resource';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import { Alarm, ConnectionTwoWay, Login, Logout } from '@carbon/react/icons';
+import { useCurrentTimesheet } from './billing-dashboard.resource';
+import { showModal, showSnackbar, useSession } from '@openmrs/esm-framework';
+import { clockOut } from '../billing-timesheet-modal/billing-timesheet-resource-modal';
+import BillsTable from '../bills-table/bills-table.component';
+
+function BillingDashboard() {
+  const { t } = useTranslation();
+  const session = useSession();
+  const { activeTimesheet, isClockedIn, mutate: mutateTimesheet } = useCurrentTimesheet();
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const startDate =
+    isClockedIn && activeTimesheet?.clockIn ? new Date(activeTimesheet.clockIn) : dayjs().startOf('day').toDate();
+
+  const endDate = dayjs().endOf('day').toDate();
+
+  const { bills, isLoading, error } = useBills('', '', startDate, endDate);
+
+  const filteredBills = useMemo(() => {
+    if (!isClockedIn || !activeTimesheet?.cashPoint?.uuid) {
+      return bills;
+    }
+    return bills.filter((bill) => bill.cashPointUuid === activeTimesheet.cashPoint.uuid);
+  }, [bills, isClockedIn, activeTimesheet]);
+
+  const { totalBills, pendingBills, paidBills, exemptedBills } = useBillMetrics(filteredBills);
+
+  const handleClockIn = () => {
+    const dispose = showModal('billing-timesheet-modal', {
+      closeModal: () => dispose(),
+      onClockInSuccess: (sessionData) => {
+        mutateTimesheet();
+        showSnackbar({
+          title: t('clockInSuccess', 'Clock In Successful'),
+          kind: 'success',
+          subtitle: t('clockInSuccessMessage', 'You have been clocked in successfully'),
+        });
+      },
+    });
+  };
+
+  const handleClockOut = async () => {
+    if (!activeTimesheet?.uuid) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('noActiveSession', 'No active session found'),
+        kind: 'error',
+      });
+      return;
+    }
+
+    setIsProcessing(true);
+
+    try {
+      await clockOut(activeTimesheet.uuid);
+      await mutateTimesheet();
+
+      showSnackbar({
+        title: t('clockOutSuccess', 'Clock Out Successful'),
+        subtitle: t('clockOutSuccessMessage', 'You have been clocked out successfully'),
+        kind: 'success',
+        timeoutInMs: 3000,
+      });
+    } catch (error) {
+      console.error('Clock out error:', error);
+
+      const errorMessage = error?.responseBody?.error?.message || t('clockOutFailed', 'Failed to clock out');
+
+      showSnackbar({
+        title: t('clockOutError', 'Clock Out Failed'),
+        subtitle: errorMessage,
+        kind: 'error',
+        timeoutInMs: 5000,
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleSwitchCashPoint = () => {
+    if (!activeTimesheet?.uuid) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('noActiveSession', 'No active session found'),
+        kind: 'error',
+      });
+      return;
+    }
+
+    // Open modal in switch mode (modal will detect existing session)
+    const dispose = showModal('billing-timesheet-modal', {
+      closeModal: () => dispose(),
+      onClockInSuccess: (sessionData) => {
+        mutateTimesheet();
+        showSnackbar({
+          title: t('switchSuccess', 'Cash Point Switched'),
+          kind: 'success',
+          subtitle: t('switchSuccessMessage', 'You have successfully switched cash points'),
+        });
+      },
+      onClockOutSuccess: () => {
+        mutateTimesheet();
+      },
+    });
+  };
+
+  return (
+    <main>
+      <PageHeader />
+      <div className={styles.dashboardContainer}>
+        {/* Metrics Tile */}
+        <Tile className={styles.tileContainer}>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>
+              {isClockedIn ? t('totalBilledShift', 'Total Billed (This Shift)') : t('totalBilled', 'Total Billed')}
+            </div>
+            <div className={styles.displayData}>{isLoading ? <InlineLoading description="" /> : totalBills}</div>
+          </div>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>
+              {isClockedIn
+                ? t('amountCollectedShift', 'Cash Collected (This Shift)')
+                : t('amountCollected', 'Amount Collected')}
+            </div>
+            <div className={styles.displayData}>{isLoading ? <InlineLoading description="" /> : paidBills}</div>
+          </div>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>{t('outstandingBills', 'Outstanding Bills')}</div>
+            <div className={styles.displayData}>{isLoading ? <InlineLoading description="" /> : pendingBills}</div>
+          </div>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>{t('totalInvoices', 'Total Invoices')}</div>
+            <div className={styles.displayData}>
+              {isLoading ? <InlineLoading description="" /> : filteredBills.length}
+            </div>
+          </div>
+        </Tile>
+        {isClockedIn && activeTimesheet && (
+          <Tile className={styles.clockInBanner}>
+            <div className={styles.clockInInfo}>
+              <Alarm size={20} className={styles.alarmIcon} />
+              <div className={styles.clockInText}>
+                <strong>{t('clockedInTo', 'Clocked in to')}: </strong>
+                {activeTimesheet.cashPoint.name}
+                <span className={styles.clockInTime}>
+                  {' '}
+                  {t('since', 'since')} {new Date(activeTimesheet.clockIn).toLocaleTimeString()}
+                </span>
+              </div>
+            </div>
+          </Tile>
+        )}
+        <div className={styles.cardHeaderContainer}>
+          <CardHeader title={t('billingQueue', 'Billing Queue')}>
+            <div className={styles.headerActions}>
+              <Button
+                kind={isClockedIn ? 'danger' : 'primary'}
+                size="sm"
+                renderIcon={(props) => (isClockedIn ? <Logout size={16} {...props} /> : <Login size={16} {...props} />)}
+                onClick={isClockedIn ? handleClockOut : handleClockIn}
+                disabled={isProcessing}>
+                {isProcessing ? (
+                  <InlineLoading
+                    description={isClockedIn ? t('clockingOut', 'Clocking out') : t('clockingIn', 'Clocking in')}
+                  />
+                ) : isClockedIn ? (
+                  t('clockOut', 'Clock Out')
+                ) : (
+                  t('clockIn', 'Clock In')
+                )}
+              </Button>
+
+              {isClockedIn && (
+                <Button
+                  kind="secondary"
+                  size="sm"
+                  renderIcon={(props) => <ConnectionTwoWay size={16} {...props} />}
+                  onClick={handleSwitchCashPoint}
+                  disabled={isProcessing}>
+                  {t('changeStation', 'Change Station')}
+                </Button>
+              )}
+            </div>
+          </CardHeader>
+        </div>
+
+        {/* Bills Table or Empty State */}
+        {isClockedIn && activeTimesheet ? (
+          <div className={styles.queueContainer}>
+            <BillsTable />
+          </div>
+        ) : (
+          <div className={styles.emptyStateContainer}>
+            <Tile className={styles.tile}>
+              <div className={styles.tileContent}>
+                <div className={styles.emptyStateIcon}>
+                  <Login size={48} />
+                </div>
+                <p className={styles.content}>{t('pleaseClockIn', 'Please clock in to start billing')}</p>
+                <p className={styles.emptyStateHelperText}>
+                  {t(
+                    'clockInPrompt',
+                    'Click the "Clock In" button above to select a cash point and start processing bills',
+                  )}
+                </p>
+              </div>
+            </Tile>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
+
+export default BillingDashboard;