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

package/src/transaction/etims-transaction-details.workspace.scss

@@ -0,0 +1,76 @@
+@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;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-01');
+  margin: 0;
+}
+
+.detailList {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.detailRow {
+  display: grid;
+  grid-template-columns: 12rem 1fr;
+  gap: layout.$spacing-03;
+  align-items: start;
+}
+
+.detailLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.detailValue {
+  @include type.type-style('body-compact-01');
+  overflow-wrap: anywhere;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+
+  & button {
+    max-width: 50% !important;
+  }
+}
+
+.desktop {
+  padding: 0;
+
+  & button {
+    max-width: 50% !important;
+  }
+}
+
+.buttonContainer {
+  max-width: 50%;
+}
+
+.qrLink {
+  word-break: break-all;
+}

package/src/transaction/etims-transaction-details.workspace.tsx

@@ -0,0 +1,201 @@
+import React, { useMemo } from 'react';
+import { Button, ButtonSet, InlineLoading, Tag } from '@carbon/react';
+import {
+  ErrorCard,
+  formatDatetime,
+  parseDate,
+  useLayoutType,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { useEtimsReconciliationOverrides, useEtimsTransaction } from './etims-transaction.resource';
+import type { EtimsTransaction } from './etims-transaction.types';
+import styles from './etims-transaction-details.workspace.scss';
+
+type EtimsTransactionDetailsWorkspaceProps = {
+  transaction?: EtimsTransaction | null;
+};
+
+const displayValue = (value?: string | number | boolean | null) => {
+  if (value === null || value === undefined || value === '') {
+    return '--';
+  }
+
+  return String(value);
+};
+
+const formatNullableDatetime = (value?: string | null) => {
+  if (!value) {
+    return '--';
+  }
+
+  try {
+    return formatDatetime(parseDate(value), { mode: 'standard', noToday: true });
+  } catch {
+    return value;
+  }
+};
+
+const statusTagType = (status?: string | null): 'green' | 'red' | 'blue' | 'cyan' | 'magenta' | 'purple' | 'gray' => {
+  if (status === 'CONFIRMED') {
+    return 'green';
+  }
+  if (status === 'PERMANENTLY_FAILED' || status === 'ACTION_REQUIRED') {
+    return 'red';
+  }
+  if (status === 'RECONCILIATION_REQUIRED') {
+    return 'magenta';
+  }
+  if (status === 'RETRY') {
+    return 'purple';
+  }
+  if (status === 'SUBMITTED' || status === 'PROCESSING') {
+    return 'cyan';
+  }
+  if (status === 'PENDING') {
+    return 'blue';
+  }
+  return 'gray';
+};
+
+const DetailRow: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => (
+  <div className={styles.detailRow}>
+    <span className={styles.detailLabel}>{label}</span>
+    <span className={styles.detailValue}>{value}</span>
+  </div>
+);
+
+const EtimsTransactionDetailsWorkspace: React.FC<
+  Workspace2DefinitionProps<EtimsTransactionDetailsWorkspaceProps, {}, {}>
+> = ({ closeWorkspace, workspaceProps }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const listedTransaction = workspaceProps?.transaction;
+  const { transaction, error, isLoading } = useEtimsTransaction(listedTransaction?.uuid);
+  const { overrides, isLoading: isLoadingOverrides } = useEtimsReconciliationOverrides(listedTransaction?.uuid);
+  const details = transaction ?? listedTransaction ?? null;
+
+  const title = t('transactionDetails', 'Transaction details');
+
+  const rows = useMemo(() => {
+    if (!details) {
+      return [];
+    }
+
+    return [
+      { label: t('billId', 'Bill ID'), value: displayValue(details.billId) },
+      { label: t('transactionType', 'Type'), value: displayValue(details.transactionType) },
+      {
+        label: t('status', 'Status'),
+        value: (
+          <Tag type={statusTagType(details.status)} size="sm">
+            {displayValue(details.status)}
+          </Tag>
+        ),
+      },
+      { label: t('revisionNumber', 'Revision'), value: displayValue(details.revisionNumber) },
+      { label: t('traderInvoiceNumber', 'Trader invoice'), value: displayValue(details.traderInvoiceNumber) },
+      { label: t('kraInvoiceNumber', 'KRA invoice'), value: displayValue(details.kraInvoiceNumber) },
+      { label: t('cuInvoiceNumber', 'CU invoice'), value: displayValue(details.cuInvoiceNumber) },
+      { label: t('kraReceiptNumber', 'KRA receipt'), value: displayValue(details.kraReceiptNumber) },
+      { label: t('resultCode', 'Result code'), value: displayValue(details.resultCode) },
+      { label: t('resultMessage', 'Last result'), value: displayValue(details.resultMessage) },
+      { label: t('failureCategory', 'Failure category'), value: displayValue(details.failureCategory) },
+      { label: t('attemptCount', 'Attempts'), value: displayValue(details.attemptCount) },
+      { label: t('sdcId', 'SDC ID'), value: displayValue(details.sdcId) },
+      { label: t('mrcNumber', 'MRC number'), value: displayValue(details.mrcNumber) },
+      {
+        label: t('qrUrl', 'QR URL'),
+        value: details.qrUrl ? (
+          <a className={styles.qrLink} href={details.qrUrl} rel="noreferrer" target="_blank">
+            {details.qrUrl}
+          </a>
+        ) : (
+          '--'
+        ),
+      },
+      { label: t('receiptSignature', 'Receipt signature'), value: displayValue(details.receiptSignature) },
+      { label: t('publicationDate', 'Publication date'), value: formatNullableDatetime(details.publicationDate) },
+      { label: t('originalTransactionId', 'Original transaction'), value: displayValue(details.originalTransactionId) },
+      { label: t('dateCreated', 'Date created'), value: formatNullableDatetime(details.dateCreated) },
+      { label: t('confirmedAt', 'Confirmed at'), value: formatNullableDatetime(details.confirmedAt) },
+      { label: t('nextAttemptAt', 'Next attempt'), value: formatNullableDatetime(details.nextAttemptAt) },
+    ];
+  }, [details, t]);
+
+  if (isLoading && !details) {
+    return (
+      <Workspace2 title={title}>
+        <div className={styles.formContainer}>
+          <InlineLoading description={t('loadingTransaction', 'Loading transaction...')} />
+        </div>
+      </Workspace2>
+    );
+  }
+
+  if (error && !details) {
+    return (
+      <Workspace2 title={title}>
+        <div className={styles.formContainer}>
+          <ErrorCard error={error} headerTitle={t('transactionDetailsError', 'Transaction details')} />
+        </div>
+      </Workspace2>
+    );
+  }
+
+  return (
+    <Workspace2 title={title}>
+      <div className={styles.form}>
+        <div className={styles.formContainer}>
+          <section className={styles.section}>
+            <h3 className={styles.sectionTitle}>{t('fiscalOutbox', 'Fiscal outbox')}</h3>
+            <div className={styles.detailList}>
+              {rows.map((row) => (
+                <DetailRow key={row.label} label={row.label} value={row.value} />
+              ))}
+            </div>
+          </section>
+
+          <section className={styles.section}>
+            <h3 className={styles.sectionTitle}>{t('reconciliationOverrides', 'Reconciliation overrides')}</h3>
+            {isLoadingOverrides ? (
+              <InlineLoading description={t('loadingOverrides', 'Loading overrides...')} />
+            ) : overrides.length === 0 ? (
+              <p className={styles.detailValue}>{t('noReconciliationOverrides', 'No reconciliation overrides')}</p>
+            ) : (
+              overrides.map((override) => (
+                <div className={styles.detailList} key={override.uuid}>
+                  <DetailRow label={t('overrideAction', 'Action')} value={displayValue(override.action)} />
+                  <DetailRow
+                    label={t('previousStatus', 'Previous status')}
+                    value={displayValue(override.previousStatus)}
+                  />
+                  <DetailRow label={t('newStatus', 'New status')} value={displayValue(override.newStatus)} />
+                  <DetailRow label={t('reason', 'Reason')} value={displayValue(override.reason)} />
+                  <DetailRow
+                    label={t('evidenceReference', 'Evidence')}
+                    value={displayValue(override.evidenceReference)}
+                  />
+                  <DetailRow
+                    label={t('dateCreated', 'Date created')}
+                    value={formatNullableDatetime(override.dateCreated)}
+                  />
+                </div>
+              ))
+            )}
+          </section>
+        </div>
+
+        <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+          <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('close', 'Close')}
+          </Button>
+        </ButtonSet>
+      </div>
+    </Workspace2>
+  );
+};
+
+export default EtimsTransactionDetailsWorkspace;