@kenyaemr/esm-etims-app 5.4.5-pre.1109

package/src/credit-note/etims-credit-note.workspace.tsx

@@ -0,0 +1,267 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Button,
+  ButtonSet,
+  ComboBox,
+  Form,
+  InlineLoading,
+  InlineNotification,
+  RadioButton,
+  RadioButtonGroup,
+  Tag,
+  TextArea,
+} from '@carbon/react';
+import {
+  showSnackbar,
+  useDebounce,
+  useLayoutType,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { createEtimsAmendment, hasConfirmedSale, parseLineItemName, useBillSearch } from './etims-credit-note.resource';
+import type { BillLineItem, BillSearchResult, EtimsAmendmentType } from './etims-credit-note.types';
+import styles from './etims-credit-note.workspace.scss';
+
+type EtimsCreditNoteWorkspaceProps = {
+  bill?: BillSearchResult | null;
+  mutateCreditNotes?: () => void;
+};
+
+const billToString = (bill?: BillSearchResult | null) => {
+  if (!bill) {
+    return '';
+  }
+
+  const parts = [bill.receiptNumber ?? `#${bill.id ?? ''}`, bill.patient?.display].filter(Boolean);
+  return parts.join(' · ');
+};
+
+const lineItemToString = (lineItem?: BillLineItem | null) => {
+  if (!lineItem) {
+    return '';
+  }
+
+  const name = parseLineItemName(lineItem.billableService || lineItem.item) || lineItem.display || lineItem.uuid;
+  const quantity = lineItem.quantity ?? 1;
+  const price = lineItem.price ?? 0;
+  const suffix = `${quantity} × ${price}`;
+  return `${name} (${suffix})`;
+};
+
+const EtimsCreditNoteWorkspace: React.FC<Workspace2DefinitionProps<EtimsCreditNoteWorkspaceProps, {}, {}>> = ({
+  closeWorkspace,
+  workspaceProps,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  const { bills, isLoading: isSearching } = useBillSearch(debouncedSearchTerm);
+
+  const [selectedBill, setSelectedBill] = useState<BillSearchResult | null>(workspaceProps?.bill ?? null);
+  const [creditType, setCreditType] = useState<EtimsAmendmentType>('FULL_CREDIT');
+  const [selectedLineItem, setSelectedLineItem] = useState<BillLineItem | null>(null);
+  const [reason, setReason] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const mutateCreditNotes = workspaceProps?.mutateCreditNotes;
+  const lineItems = useMemo(() => selectedBill?.lineItems ?? [], [selectedBill]);
+  const isConfirmedSale = hasConfirmedSale(selectedBill);
+  const isPartial = creditType === 'PARTIAL_CREDIT';
+
+  const mergedBills = useMemo(() => {
+    if (!selectedBill || bills.some((bill) => bill.uuid === selectedBill.uuid)) {
+      return bills;
+    }
+    return [selectedBill, ...bills];
+  }, [bills, selectedBill]);
+
+  const canSubmit =
+    Boolean(selectedBill) &&
+    isConfirmedSale &&
+    reason.trim().length > 0 &&
+    (!isPartial || Boolean(selectedLineItem)) &&
+    !isSubmitting;
+
+  const handleBillSelect = (bill: BillSearchResult | null) => {
+    setSelectedBill(bill);
+    setSelectedLineItem(null);
+  };
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!selectedBill || !canSubmit) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const result = await createEtimsAmendment({
+        type: creditType,
+        billUuid: selectedBill.uuid,
+        reason: reason.trim(),
+        billLineItemUuid: isPartial ? selectedLineItem?.uuid : undefined,
+      });
+
+      showSnackbar({
+        kind: 'success',
+        title: t('creditNoteEnqueued', 'Credit note enqueued'),
+        subtitle: t('creditNoteEnqueuedMessage', 'Credit note for bill {{billId}} is now {{status}}.', {
+          billId: result?.billId ?? selectedBill.id ?? '',
+          status: result?.status ?? 'PENDING',
+        }),
+      });
+      mutateCreditNotes?.();
+      closeWorkspace({ discardUnsavedChanges: true });
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('creditNoteError', 'Unable to create credit note'),
+        subtitle: (error as Error)?.message,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const hasUnsavedChanges = Boolean(selectedBill) || reason.trim().length > 0;
+
+  return (
+    <Workspace2 title={t('createCreditNote', 'Create credit note')} hasUnsavedChanges={hasUnsavedChanges}>
+      <Form onSubmit={onSubmit} className={styles.form}>
+        <div className={styles.formContainer}>
+          <InlineNotification
+            kind="info"
+            lowContrast
+            hideCloseButton
+            title={t('creditNoteInfo', 'Credit note')}
+            subtitle={t(
+              'creditNoteInfoMessage',
+              'Search for the patient whose confirmed eTIMS invoice you want to credit. The scheduler submits the credit note to KRA once it is enqueued.',
+            )}
+          />
+
+          <div className={styles.searchField}>
+            <ComboBox<BillSearchResult>
+              id="creditNoteBill"
+              titleText={t('bill', 'Bill')}
+              placeholder={t('searchBillsByPatient', 'Search by patient name or identifier')}
+              items={mergedBills}
+              itemToString={billToString}
+              selectedItem={selectedBill}
+              shouldFilterItem={() => true}
+              onInputChange={(value) => {
+                if (value !== billToString(selectedBill)) {
+                  setSearchTerm(value);
+                }
+              }}
+              onChange={({ selectedItem }) => handleBillSelect(selectedItem ?? null)}
+            />
+            <div className={styles.searchStatus}>
+              {isSearching ? <InlineLoading description={t('searching', 'Searching...')} /> : null}
+            </div>
+          </div>
+
+          {selectedBill ? (
+            <div className={styles.billSummary}>
+              <div className={styles.summaryRow}>
+                <span className={styles.summaryLabel}>{t('patient', 'Patient')}</span>
+                <span>{selectedBill.patient?.display ?? '--'}</span>
+              </div>
+              <div className={styles.summaryRow}>
+                <span className={styles.summaryLabel}>{t('receiptNumber', 'Receipt number')}</span>
+                <span>{selectedBill.receiptNumber ?? '--'}</span>
+              </div>
+              <div className={styles.summaryRow}>
+                <span className={styles.summaryLabel}>{t('etimsStatus', 'eTIMS status')}</span>
+                <Tag type={isConfirmedSale ? 'green' : 'red'} size="sm">
+                  {selectedBill.etims?.status ?? t('noEtimsSale', 'No eTIMS sale')}
+                </Tag>
+              </div>
+            </div>
+          ) : null}
+
+          {selectedBill && !isConfirmedSale ? (
+            <InlineNotification
+              kind="warning"
+              lowContrast
+              hideCloseButton
+              title={t('noConfirmedSale', 'No confirmed sale')}
+              subtitle={t(
+                'noConfirmedSaleMessage',
+                'A credit note can only be raised against a bill whose eTIMS sale is CONFIRMED.',
+              )}
+            />
+          ) : null}
+
+          <RadioButtonGroup
+            legendText={t('creditType', 'Credit type')}
+            name="creditType"
+            valueSelected={creditType}
+            onChange={(value) => {
+              setCreditType(value as EtimsAmendmentType);
+              setSelectedLineItem(null);
+            }}>
+            <RadioButton id="credit-full" labelText={t('fullCredit', 'Full credit')} value="FULL_CREDIT" />
+            <RadioButton id="credit-partial" labelText={t('partialCredit', 'Partial credit')} value="PARTIAL_CREDIT" />
+          </RadioButtonGroup>
+
+          {isPartial ? (
+            <>
+              <ComboBox<BillLineItem>
+                id="creditNoteLineItem"
+                titleText={t('lineItem', 'Line item')}
+                placeholder={t('selectLineItem', 'Select the credited line')}
+                items={lineItems}
+                itemToString={lineItemToString}
+                selectedItem={selectedLineItem}
+                onChange={({ selectedItem }) => setSelectedLineItem(selectedItem ?? null)}
+                disabled={!selectedBill}
+              />
+              <InlineNotification
+                kind="info"
+                lowContrast
+                hideCloseButton
+                title={t('partialCredit', 'Partial credit')}
+                subtitle={t(
+                  'partialCreditHint',
+                  'Partial credit applies to a single line that was voided after the sale was confirmed. No replacement sale follows.',
+                )}
+              />
+            </>
+          ) : null}
+
+          <TextArea
+            id="creditNoteReason"
+            labelText={t('reason', 'Reason')}
+            placeholder={t('creditNoteReasonPlaceholder', 'Why is this credit note being raised?')}
+            value={reason}
+            onChange={(event) => setReason(event.target.value)}
+            rows={3}
+          />
+        </div>
+
+        <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+          <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.buttonContainer} disabled={!canSubmit} kind="primary" type="submit">
+            {isSubmitting ? (
+              <span className={styles.inlineLoading}>
+                {t('submitting', 'Submitting...')}
+                <InlineLoading status="active" />
+              </span>
+            ) : (
+              t('createCreditNote', 'Create credit note')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default EtimsCreditNoteWorkspace;

package/src/declarations.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';

package/src/global-properties/etims-global-properties-dashboard.component.tsx

@@ -0,0 +1,141 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+} from '@carbon/react';
+import { Edit } from '@carbon/react/icons';
+import { ErrorState, launchWorkspace2, useDebounce, UserHasAccess } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import Header from '../components/header/header.component';
+import { etimsPropertyKeys, useEtimsGlobalProperties } from './etims-global-properties.resource';
+import styles from './etims-global-properties-dashboard.scss';
+
+const labels: Record<keyof typeof etimsPropertyKeys, string> = {
+  enabled: 'eTIMS enabled',
+  environment: 'Environment',
+  baseUrl: 'Base URL',
+  businessPin: 'Business PIN',
+  branchId: 'Branch ID',
+  connectTimeout: 'Connect timeout',
+  readTimeout: 'Read timeout',
+  maxAttempts: 'Maximum attempts',
+  retryInterval: 'Retry interval',
+  invoiceNumberSource: 'Invoice number source',
+  localInvoiceNumberStart: 'Local invoice number start',
+  paymentModeMappingFile: 'Payment mode mapping file',
+  apiKey: 'API key',
+  sandboxValidatedContractVersion: 'Sandbox validated contract version',
+};
+
+const EtimsGlobalPropertiesDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { properties, error, isLoading, mutate } = useEtimsGlobalProperties();
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 400);
+  const rows = useMemo(() => {
+    const configs = Object.entries(etimsPropertyKeys).map(([name, property]) => {
+      const recordedValue = properties.find((candidate) => candidate.property === property)?.value;
+      return {
+        id: name,
+        name: labels[name as keyof typeof etimsPropertyKeys],
+        property,
+        value: name === 'apiKey' && recordedValue ? '••••••••' : recordedValue || '—',
+      };
+    });
+
+    if (debouncedSearchTerm === '') {
+      return configs;
+    }
+
+    return configs.filter((config) => config.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()));
+  }, [properties, debouncedSearchTerm]);
+  const headers = [
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'property', header: t('property', 'Property') },
+    { key: 'value', header: t('recordedValue', 'Recorded value') },
+  ];
+
+  const openConfiguration = () =>
+    launchWorkspace2('etims-global-properties-form', {
+      mutateProperties: mutate,
+    });
+
+  const renderContent = () => {
+    if (isLoading) {
+      return <DataTableSkeleton headers={headers} rowCount={14} showHeader showToolbar />;
+    }
+
+    if (error) {
+      return <ErrorState error={error} headerTitle={t('etimsGlobalProperties', 'eTIMS global properties')} />;
+    }
+
+    return (
+      <div className={styles.container}>
+        <DataTable rows={rows} headers={headers} size="sm" useZebraStyles>
+          {({ rows: tableRows, headers: tableHeaders, getHeaderProps, getRowProps, getTableProps }) => (
+            <TableContainer
+              title={t('etimsGlobalProperties', 'eTIMS global properties')}
+              description={t(
+                'etimsGlobalPropertiesDescription',
+                'Review the global properties used by the eTIMS integration.',
+              )}>
+              <TableToolbar>
+                <TableToolbarContent>
+                  <TableToolbarSearch
+                    onChange={(event) => setSearchTerm(typeof event === 'string' ? event : event.target.value)}
+                    size="sm"
+                    persistent
+                    placeholder={t('searchForGlobalProperties', 'Search for global properties')}
+                  />
+                  <Button size="sm" renderIcon={Edit} onClick={openConfiguration}>
+                    {t('configure', 'Configure')}
+                  </Button>
+                </TableToolbarContent>
+              </TableToolbar>
+              <Table {...getTableProps()} aria-label={t('etimsGlobalProperties', 'eTIMS global properties')}>
+                <TableHead>
+                  <TableRow>
+                    {tableHeaders.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {tableRows.map((row) => (
+                    <TableRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <Header title={t('etimsGlobalProperties', 'eTIMS global properties')} />
+      <UserHasAccess privilege="Manage eTIMS Configuration">
+        <div className={styles.dashboard}>{renderContent()}</div>
+      </UserHasAccess>
+    </>
+  );
+};
+
+export default EtimsGlobalPropertiesDashboard;

package/src/global-properties/etims-global-properties-dashboard.scss

@@ -0,0 +1,62 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  margin: layout.$layout-01;
+  border: 1px solid colors.$gray-20;
+
+  :global(.cds--table-toolbar) {
+    position: relative !important;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  max-width: 64rem;
+}
+
+.intro {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  margin: 0;
+}
+
+.section {
+  background: colors.$white;
+  border: 1px solid colors.$gray-20;
+  padding: layout.$spacing-05;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  margin: 0 0 layout.$spacing-05;
+}
+
+.fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: layout.$spacing-05;
+}
+
+.fullWidth {
+  grid-column: 1 / -1;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+
+  button {
+    width: 50%;
+    max-width: none;
+  }
+}
+
+:global(.omrs-breakpoint-lt-tablet) {
+  .fields {
+    grid-template-columns: 1fr;
+  }
+}

package/src/global-properties/etims-global-properties-form.workspace.scss

@@ -0,0 +1,74 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  overflow-y: auto;
+}
+
+.intro {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  margin: 0;
+}
+
+.section {
+  background: colors.$white;
+  border: 1px solid colors.$gray-20;
+  padding: layout.$spacing-05;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  margin: 0 0 layout.$spacing-05;
+}
+
+.fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: layout.$spacing-05;
+}
+
+.fullWidth {
+  grid-column: 1 / -1;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+
+  & button {
+    max-width: 50% !important;
+  }
+}
+
+.buttonContainer {
+  max-width: 50%;
+}
+
+.inlineLoading {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}
+
+:global(.omrs-breakpoint-lt-tablet) {
+  .fields {
+    grid-template-columns: 1fr;
+  }
+}