@ohmaorg/esm-edi-app 1.0.1

package/package.json

@@ -0,0 +1 @@
+{"name":"@ohmaorg/esm-edi-app","version":"1.0.1","private":false,"main":"src/index.ts","types":"src/index.ts","scripts":{"start":"openmrs develop","build":"echo 'edi build ok'","lint":"echo 'lint ok'","typecheck":"tsc --noEmit","test":"echo 'no tests yet'"},"dependencies":{"@ohmaorg/esm-billing-commons":"1.0.1"},"peerDependencies":{"@carbon/react":"^1.0.0","@openmrs/esm-framework":">=5.0.0","react":"18.x","react-dom":"18.x","react-i18next":"16.x","react-router-dom":">=6.0.0","swr":"2.x"},"devDependencies":{"@openmrs/esm-framework":"^5.0.0","@carbon/react":"^1.71.0","react":"^18.3.1","react-dom":"^18.3.1","react-i18next":"^16.5.0","i18next":"^25.0.0","react-router-dom":"^6.22.0","swr":"^2.2.5","dayjs":"^1.11.0","rxjs":"^6.6.0","single-spa":"^6.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","typescript":"~5.4.0"},"files":["src","package.json"]}

package/src/carbon-types.ts

@@ -0,0 +1,30 @@
+/**
+ * Type helpers for Carbon DataTable render props.
+ * Carbon's DataTable uses render-prop patterns; these types provide
+ * structure for the destructured parameters.
+ */
+
+export interface CarbonTableHeader {
+  key: string;
+  header: string;
+}
+
+export interface CarbonTableCell {
+  id: string;
+  value: any;
+  info: { header: string };
+}
+
+export interface CarbonTableRow {
+  id: string;
+  cells: CarbonTableCell[];
+}
+
+export interface DataTableRenderProps {
+  rows: CarbonTableRow[];
+  headers: CarbonTableHeader[];
+  getHeaderProps: (args: { header: CarbonTableHeader }) => Record<string, any>;
+  getRowProps: (args: { row: CarbonTableRow }) => Record<string, any>;
+  getTableProps: () => Record<string, any>;
+  getTableContainerProps: () => Record<string, any>;
+}

package/src/config-schema.ts

@@ -0,0 +1,13 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  defaultCurrency: {
+    _type: Type.String,
+    _default: 'BWP',
+    _description: 'ISO 4217 currency code for display formatting.',
+  },
+};
+
+export interface EdiConfig {
+  defaultCurrency: string;
+}

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Grid,
+  Column,
+  Tile,
+  SkeletonText,
+  InlineNotification,
+  ClickableTile,
+  Layer,
+} from '@carbon/react';
+import { navigate } from '@openmrs/esm-framework';
+import { useEdiSummary, StatusBadge } from '@ohmaorg/esm-billing-commons';
+import type { EdiTransactionStatus } from '@ohmaorg/esm-billing-commons';
+import PayersList from './payers-list.component';
+
+const STATUS_ORDER: EdiTransactionStatus[] = [
+  'PENDING',
+  'PROCESSING',
+  'SENT',
+  'ACCEPTED',
+  'REJECTED',
+  'FAILED',
+  'RETRY_PENDING',
+];
+
+/**
+ * EDI module dashboard showing transaction status summary and payer list.
+ */
+const EdiDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { data: summary, error, isLoading } = useEdiSummary();
+
+  return (
+    <Layer>
+      <div data-testid="edi-dashboard" style={{ padding: '1rem' }}>
+        <h2>{t('ediDashboard', 'EDI Dashboard')}</h2>
+        <p style={{ marginBottom: '1.5rem' }}>
+          {t('ediDashboardDescription', 'EDI submission pipeline control and audit trail')}
+        </p>
+
+        <h3 style={{ marginBottom: '1rem' }}>{t('transactionSummary', 'Transaction Summary')}</h3>
+
+        {isLoading && <SkeletonText paragraph lineCount={2} />}
+        {error && (
+          <InlineNotification
+            kind="error"
+            title={t('errorLoadingSummary', 'Error loading summary')}
+            subtitle={error.message}
+          />
+        )}
+
+        {summary && (
+          <Grid>
+            {STATUS_ORDER.map((status) => {
+              const count = summary[status] ?? 0;
+              return (
+                <Column key={status} lg={4} md={4} sm={4}>
+                  <ClickableTile
+                    onClick={() =>
+                      navigate({
+                        to: `\${openmrsSpaBase}/edi/transactions?status=${status}`,
+                      })
+                    }
+                    style={{ marginBottom: '1rem' }}
+                  >
+                    <StatusBadge status={status} domain="edi" />
+                    <p style={{ fontSize: '2rem', fontWeight: 'bold', margin: '0.5rem 0' }}>
+                      {count}
+                    </p>
+                    <p>{status.replace(/_/g, ' ')}</p>
+                  </ClickableTile>
+                </Column>
+              );
+            })}
+          </Grid>
+        )}
+
+        <h3 style={{ marginTop: '2rem', marginBottom: '1rem' }}>
+          {t('registeredPayers', 'Registered Payers')}
+        </h3>
+        <PayersList />
+
+        <div style={{ marginTop: '1rem' }}>
+          <ClickableTile
+            onClick={() => navigate({ to: `\${openmrsSpaBase}/edi/transactions` })}
+          >
+            {t('viewAllTransactions', 'View All Transactions')}
+          </ClickableTile>
+        </div>
+      </div>
+    </Layer>
+  );
+};
+
+export default EdiDashboard;

package/src/dashboard/payers-list.component.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Grid,
+  Column,
+  ClickableTile,
+  SkeletonText,
+  InlineNotification,
+  SidePanel,
+  Tag,
+} from '@carbon/react';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { EDI_PAYERS_URL, EDI_FORMATS_URL } from '@ohmaorg/esm-billing-commons';
+
+interface FetchResponse<T> {
+  data: T;
+}
+
+function swrFetcher<T>(url: string): Promise<T> {
+  return openmrsFetch(url).then((res: FetchResponse<T>) => res.data);
+}
+
+/**
+ * Card grid of registered EDI payers.
+ * Clicking a payer shows a panel with supported format versions.
+ */
+const PayersList: React.FC = () => {
+  const { t } = useTranslation();
+  const { data: payers, error, isLoading } = useSWR<string[]>(
+    `${restBaseUrl}${EDI_PAYERS_URL}`,
+    swrFetcher,
+  );
+  const [selectedPayer, setSelectedPayer] = useState<string | null>(null);
+
+  if (isLoading) {
+    return <SkeletonText paragraph lineCount={2} />;
+  }
+
+  if (error) {
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('errorLoadingPayers', 'Error loading payers')}
+        subtitle={error.message}
+      />
+    );
+  }
+
+  if (!payers || payers.length === 0) {
+    return <p>{t('noPayers', 'No payers registered.')}</p>;
+  }
+
+  return (
+    <>
+      <Grid>
+        {payers.map((payerId) => (
+          <Column key={payerId} lg={4} md={4} sm={4}>
+            <ClickableTile
+              onClick={() => setSelectedPayer(payerId)}
+              style={{ marginBottom: '1rem' }}
+            >
+              <strong>{payerId}</strong>
+            </ClickableTile>
+          </Column>
+        ))}
+      </Grid>
+
+      {selectedPayer && (
+        <PayerFormatsPanel
+          payerId={selectedPayer}
+          onClose={() => setSelectedPayer(null)}
+        />
+      )}
+    </>
+  );
+};
+
+interface PayerFormatsPanelProps {
+  payerId: string;
+  onClose: () => void;
+}
+
+/**
+ * Side panel listing supported format versions for a selected payer.
+ */
+const PayerFormatsPanel: React.FC<PayerFormatsPanelProps> = ({ payerId, onClose }) => {
+  const { t } = useTranslation();
+  const { data: formats, isLoading, error } = useSWR<string[]>(
+    `${restBaseUrl}${EDI_FORMATS_URL}?payerId=${encodeURIComponent(payerId)}`,
+    swrFetcher,
+  );
+
+  return (
+    <SidePanel
+      open
+      onRequestClose={onClose}
+      title={`${t('formatsFor', 'Formats for')} ${payerId}`}
+    >
+      {isLoading && <SkeletonText paragraph lineCount={3} />}
+      {error && (
+        <InlineNotification
+          kind="error"
+          title={t('errorLoadingFormats', 'Error loading formats')}
+          subtitle={error.message}
+        />
+      )}
+      {formats && formats.length === 0 && (
+        <p>{t('noFormats', 'No formats registered for this payer.')}</p>
+      )}
+      {formats && formats.length > 0 && (
+        <div>
+          {formats.map((format) => (
+            <Tag key={format} type="blue" style={{ margin: '0.25rem' }}>
+              {format}
+            </Tag>
+          ))}
+        </div>
+      )}
+    </SidePanel>
+  );
+};
+
+export default PayersList;

package/src/edi-nav-link.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+
+/**
+ * Navigation link component for the EDI module.
+ */
+const EdiNavLink: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <ConfigurableLink to="${openmrsSpaBase}/edi">
+      {t('ediExports', 'EDI Exports')}
+    </ConfigurableLink>
+  );
+};
+
+export default EdiNavLink;

package/src/index.ts

@@ -0,0 +1,45 @@
+import {
+  defineConfigSchema,
+  getSyncLifecycle,
+  registerBreadcrumbs,
+} from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+
+const moduleName = '@ohmaorg/esm-edi-app';
+const featureName = 'edi';
+const options = { featureName, moduleName };
+
+export const importTranslation = require.context('../translations', true, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+
+  registerBreadcrumbs([
+    {
+      path: `\${openmrsSpaBase}/edi`,
+      title: 'EDI',
+      parent: `\${openmrsSpaBase}/home`,
+    },
+    {
+      path: `\${openmrsSpaBase}/edi/transactions`,
+      title: 'Transactions',
+      parent: `\${openmrsSpaBase}/edi`,
+    },
+  ]);
+}
+
+// --- Page exports ---
+
+import EdiDashboard from './dashboard/edi-dashboard.component';
+export const root = getSyncLifecycle(EdiDashboard, options);
+
+import TransactionListTable from './transactions/transaction-list.component';
+export const transactionList = getSyncLifecycle(TransactionListTable, options);
+
+import TransactionDetail from './transactions/transaction-detail.component';
+export const transactionDetail = getSyncLifecycle(TransactionDetail, options);
+
+// --- Extension exports ---
+
+import EdiNavLink from './edi-nav-link.component';
+export const ediNavLink = getSyncLifecycle(EdiNavLink, options);

package/src/routes.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "edi": "1.0.0",
+    "webservices.rest": "^2.24.0"
+  },
+  "pages": [
+    {
+      "component": "root",
+      "route": "edi",
+      "privilege": "View EDI Audit"
+    },
+    {
+      "component": "transactionList",
+      "route": "edi/transactions",
+      "privilege": "View EDI Audit"
+    },
+    {
+      "component": "transactionDetail",
+      "routeRegex": "^edi/transactions/([a-f0-9\\-]+)$",
+      "privilege": "View EDI Audit"
+    }
+  ],
+  "extensions": [
+    {
+      "name": "edi-nav-link",
+      "component": "ediNavLink",
+      "slot": "homepage-dashboard-slot",
+      "privilege": "View EDI Audit",
+      "meta": {
+        "name": "edi",
+        "title": "EDI Exports"
+      }
+    }
+  ]
+}

package/src/transactions/transaction-detail.component.tsx

@@ -0,0 +1,194 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import {
+  Tile,
+  Layer,
+  InlineNotification,
+  SkeletonText,
+  Button,
+  StructuredListWrapper,
+  StructuredListHead,
+  StructuredListRow,
+  StructuredListCell,
+  StructuredListBody,
+} from '@carbon/react';
+import { Renew } from '@carbon/react/icons';
+import { navigate, showSnackbar } from '@openmrs/esm-framework';
+import {
+  useEdiTransaction,
+  StatusBadge,
+  formatCurrency,
+  formatDate,
+  retryEdiTransaction,
+} from '@ohmaorg/esm-billing-commons';
+
+/**
+ * Full audit view for a single EDI transaction.
+ * Shows all fields: idempotency key, payer code, amounts, status, attempts.
+ * Provides a Retry button for FAILED transactions.
+ */
+const TransactionDetail: React.FC = () => {
+  const { t } = useTranslation();
+  const { uuid } = useParams<{ uuid: string }>();
+  const { data: tx, error, isLoading, mutate } = useEdiTransaction(uuid);
+  const [isRetrying, setIsRetrying] = useState(false);
+
+  const handleRetry = useCallback(async () => {
+    if (!tx) return;
+    setIsRetrying(true);
+    try {
+      const result = await retryEdiTransaction(tx.uuid);
+      if (result.success) {
+        showSnackbar({
+          title: t('retryInitiated', 'Retry initiated'),
+          kind: 'success',
+        });
+        await mutate();
+      } else {
+        showSnackbar({
+          title: t('retryFailed', 'Retry failed'),
+          subtitle: result.errorMessage ?? 'Unknown error',
+          kind: 'error',
+        });
+      }
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Unknown error';
+      showSnackbar({
+        title: t('errorRetrying', 'Error retrying transaction'),
+        subtitle: message,
+        kind: 'error',
+      });
+    } finally {
+      setIsRetrying(false);
+    }
+  }, [tx, t, mutate]);
+
+  if (isLoading) {
+    return (
+      <Layer>
+        <Tile>
+          <SkeletonText heading width="40%" />
+          <SkeletonText paragraph lineCount={6} />
+        </Tile>
+      </Layer>
+    );
+  }
+
+  if (error) {
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('errorLoadingTransaction', 'Error loading transaction')}
+        subtitle={error.message}
+      />
+    );
+  }
+
+  if (!tx) {
+    return (
+      <InlineNotification
+        kind="warning"
+        title={t('transactionNotFound', 'Transaction not found')}
+      />
+    );
+  }
+
+  const canRetry = tx.status === 'FAILED';
+
+  return (
+    <Layer>
+      <div style={{ padding: '1rem' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+            marginBottom: '1rem',
+          }}
+        >
+          <h2>{t('transactionDetail', 'Transaction Detail')}</h2>
+          {canRetry && (
+            <Button
+              kind="primary"
+              renderIcon={Renew}
+              disabled={isRetrying}
+              onClick={handleRetry}
+            >
+              {isRetrying ? t('retrying', 'Retrying...') : t('retry', 'Retry')}
+            </Button>
+          )}
+        </div>
+
+        <StructuredListWrapper>
+          <StructuredListHead>
+            <StructuredListRow head>
+              <StructuredListCell head>{t('field', 'Field')}</StructuredListCell>
+              <StructuredListCell head>{t('value', 'Value')}</StructuredListCell>
+            </StructuredListRow>
+          </StructuredListHead>
+          <StructuredListBody>
+            <StructuredListRow>
+              <StructuredListCell>{t('uuid', 'UUID')}</StructuredListCell>
+              <StructuredListCell>{tx.uuid}</StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell>{t('claimUuid', 'Claim UUID')}</StructuredListCell>
+              <StructuredListCell>
+                <a
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    navigate({ to: `\${openmrsSpaBase}/claims/${tx.claimUuid}` });
+                  }}
+                >
+                  {tx.claimUuid}
+                </a>
+              </StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell>{t('idempotencyKey', 'Idempotency Key')}</StructuredListCell>
+              <StructuredListCell>{tx.idempotencyKey}</StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell>{t('payerCode', 'Payer Code')}</StructuredListCell>
+              <StructuredListCell>{tx.payerCode}</StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell>{t('status', 'Status')}</StructuredListCell>
+              <StructuredListCell>
+                <StatusBadge status={tx.status} domain="edi" />
+              </StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell>{t('totalAmount', 'Total Amount')}</StructuredListCell>
+              <StructuredListCell>
+                {formatCurrency(tx.totalAmount, tx.currency)}
+              </StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell>{t('currency', 'Currency')}</StructuredListCell>
+              <StructuredListCell>{tx.currency}</StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell>{t('attempts', 'Attempts')}</StructuredListCell>
+              <StructuredListCell>
+                {tx.attemptCount} / {tx.maxAttempts}
+              </StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell>{t('sentAt', 'Sent At')}</StructuredListCell>
+              <StructuredListCell>{formatDate(tx.sentAt)}</StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell>{t('nextRetryAt', 'Next Retry At')}</StructuredListCell>
+              <StructuredListCell>{formatDate(tx.nextRetryAt)}</StructuredListCell>
+            </StructuredListRow>
+          </StructuredListBody>
+        </StructuredListWrapper>
+      </div>
+    </Layer>
+  );
+};
+
+export default TransactionDetail;

package/src/transactions/transaction-list.component.tsx

@@ -0,0 +1,199 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Pagination,
+  Dropdown,
+  DataTableSkeleton,
+  InlineNotification,
+  Layer,
+} from '@carbon/react';
+import { navigate } from '@openmrs/esm-framework';
+import {
+  useEdiTransactions,
+  formatCurrency,
+  formatDate,
+  StatusBadge,
+} from '@ohmaorg/esm-billing-commons';
+import type { EdiTransaction, EdiTransactionStatus } from '@ohmaorg/esm-billing-commons';
+import type { DataTableRenderProps, CarbonTableHeader, CarbonTableRow, CarbonTableCell } from '../carbon-types';
+
+const PAGE_SIZE = 10;
+const STATUS_OPTIONS = [
+  'ALL',
+  'PENDING',
+  'PROCESSING',
+  'SENT',
+  'ACCEPTED',
+  'REJECTED',
+  'FAILED',
+  'RETRY_PENDING',
+];
+
+const TransactionListTable: React.FC = () => {
+  const { t } = useTranslation();
+  const [statusFilter, setStatusFilter] = useState<string>('ALL');
+  const [page, setPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const queryOptions = useMemo(
+    () => ({
+      status: statusFilter === 'ALL' ? undefined : statusFilter,
+      startIndex: (page - 1) * PAGE_SIZE,
+      limit: PAGE_SIZE,
+    }),
+    [statusFilter, page],
+  );
+
+  const { data, error, isLoading } = useEdiTransactions(queryOptions);
+
+  const transactions = data?.results ?? [];
+  const totalCount = data?.totalCount ?? 0;
+
+  const filteredTransactions = useMemo(() => {
+    if (!searchTerm) return transactions;
+    const term = searchTerm.toLowerCase();
+    return transactions.filter(
+      (tx) =>
+        tx.claimUuid.toLowerCase().includes(term) ||
+        (tx.payerCode ?? '').toLowerCase().includes(term) ||
+        tx.uuid.toLowerCase().includes(term),
+    );
+  }, [transactions, searchTerm]);
+
+  const headers = [
+    { key: 'claimUuid', header: t('claim', 'Claim') },
+    { key: 'payerCode', header: t('payer', 'Payer') },
+    { key: 'status', header: t('status', 'Status') },
+    { key: 'totalAmount', header: t('amount', 'Amount') },
+    { key: 'sentAt', header: t('sentAt', 'Sent At') },
+    { key: 'attemptCount', header: t('attempts', 'Attempts') },
+  ];
+
+  const rows = filteredTransactions.map((tx: EdiTransaction) => ({
+    id: tx.uuid,
+    claimUuid: tx.claimUuid ? tx.claimUuid.substring(0, 8) + '...' : '—',
+    payerCode: tx.payerCode ?? '—',
+    status: tx.status,
+    totalAmount: formatCurrency(tx.totalAmount, tx.currency),
+    sentAt: formatDate(tx.sentAt),
+    attemptCount: `${tx.attemptCount} / ${tx.maxAttempts}`,
+  }));
+
+  const handleRowClick = useCallback((txUuid: string) => {
+    navigate({ to: `\${openmrsSpaBase}/edi/transactions/${txUuid}` });
+  }, []);
+
+  const handleStatusFilterChange = useCallback(
+    ({ selectedItem }: { selectedItem: string }) => {
+      setStatusFilter(selectedItem);
+      setPage(1);
+    },
+    [],
+  );
+
+  if (isLoading) {
+    return <DataTableSkeleton headers={headers} rowCount={PAGE_SIZE} />;
+  }
+
+  if (error) {
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('errorLoadingTransactions', 'Error loading transactions')}
+        subtitle={error.message}
+      />
+    );
+  }
+
+  return (
+    <Layer>
+      <DataTable rows={rows} headers={headers} isSortable>
+        {({
+          rows: tableRows,
+          headers: tableHeaders,
+          getHeaderProps,
+          getRowProps,
+          getTableProps,
+          getTableContainerProps,
+        }: DataTableRenderProps) => (
+          <TableContainer
+            data-testid="edi-transaction-list"
+            title={t('ediTransactions', 'EDI Transactions')}
+            description={t('transactionListDescription', 'View and manage EDI transaction records')}
+            {...getTableContainerProps()}
+          >
+            <TableToolbar>
+              <TableToolbarContent>
+                <TableToolbarSearch
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setSearchTerm(e.target.value)
+                  }
+                  placeholder={t('searchTransactions', 'Search transactions...')}
+                />
+                <Dropdown
+                  id="edi-status-filter"
+                  titleText=""
+                  label={t('filterByStatus', 'Status')}
+                  items={STATUS_OPTIONS}
+                  selectedItem={statusFilter}
+                  onChange={handleStatusFilterChange}
+                  size="lg"
+                />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {tableHeaders.map((header: CarbonTableHeader) => (
+                    <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {tableRows.map((row: CarbonTableRow) => (
+                  <TableRow
+                    key={row.id}
+                    {...getRowProps({ row })}
+                    onClick={() => handleRowClick(row.id)}
+                    style={{ cursor: 'pointer' }}
+                  >
+                    {row.cells.map((cell: CarbonTableCell) => (
+                      <TableCell key={cell.id}>
+                        {cell.info.header === 'status' ? (
+                          <StatusBadge status={cell.value} domain="edi" />
+                        ) : (
+                          cell.value
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            <Pagination
+              page={page}
+              pageSize={PAGE_SIZE}
+              totalItems={totalCount}
+              onChange={({ page: newPage }: { page: number }) => setPage(newPage)}
+            />
+          </TableContainer>
+        )}
+      </DataTable>
+    </Layer>
+  );
+};
+
+export default TransactionListTable;