From 297b6e95b66f98cc0067612211c83338e1167d82 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 06:49:51 -0800
Subject: [PATCH 01/12] 30799 / 30800 refund approval updates squash

---
 .../components/refund/RefundRequestsTable.vue |  443 +++++++
 .../transactions/TransactionsDataTable.vue    | 1111 +++++++++++++++++
 .../app/composables/common/useBaseTable.ts    |  201 +++
 .../app/composables/common/useStatusList.ts   |   20 +
 .../refund/useRefundRequestTable.ts           |   36 +
 .../transactions/useTransactionView.ts        |   75 ++
 .../transactions/useTransactionsTable.ts      |  385 ++++++
 web/pay-ui/app/enums/fas-roles.ts             |   11 +-
 web/pay-ui/app/enums/payment-types.ts         |   31 +
 web/pay-ui/app/interfaces/invoice.ts          |    5 +
 web/pay-ui/app/interfaces/refund-requests.ts  |   84 ++
 web/pay-ui/app/interfaces/transaction-view.ts |  109 ++
 web/pay-ui/app/interfaces/transactions.ts     |   89 ++
 .../[id]/InvoiceRefundHistory.vue             |  119 ++
 .../transaction-view/[id]/PaymentDetails.vue  |   70 ++
 .../[id]/RefundDecisionForm.vue               |  316 +++++
 .../[id]/RefundRequestForm.vue                |  436 +++++++
 .../[id]/RefundReviewForm.vue                 |  145 +++
 .../[id]/TransactionDetails.vue               |  137 ++
 .../transaction-view/[id]/[...details].vue    |  444 +++++++
 web/pay-ui/app/pages/transactions/index.vue   |  155 +++
 .../plugins/fas-search-body-class.client.ts   |    2 +-
 .../app/stores/refund-requests-store.ts       |   40 +
 web/pay-ui/app/stores/transactions-store.ts   |   50 +
 web/pay-ui/app/utils/common-util.ts           |   14 +-
 web/pay-ui/app/utils/constants.ts             |   18 +
 web/pay-ui/app/utils/invoice-status-util.ts   |   27 +
 web/pay-ui/app/utils/product-util.ts          |   17 +
 web/pay-ui/i18n/locales/en-CA.ts              |   26 +
 .../InvoiceRefundHistory.spec.ts              |  110 ++
 .../TransactionView/PaymentDetails.spec.ts    |   61 +
 .../RefundDecisionForm.spec.ts                |  176 +++
 .../TransactionView/RefundRequestForm.spec.ts |   93 ++
 .../RefundRequestsTable.spec.ts               |  176 +++
 .../TransactionView/RefundReviewForm.spec.ts  |  104 ++
 .../TransactionDetails.spec.ts                |   91 ++
 36 files changed, 5424 insertions(+), 3 deletions(-)
 create mode 100644 web/pay-ui/app/components/refund/RefundRequestsTable.vue
 create mode 100644 web/pay-ui/app/components/transactions/TransactionsDataTable.vue
 create mode 100644 web/pay-ui/app/composables/common/useBaseTable.ts
 create mode 100644 web/pay-ui/app/composables/refund/useRefundRequestTable.ts
 create mode 100644 web/pay-ui/app/composables/transactions/useTransactionView.ts
 create mode 100644 web/pay-ui/app/composables/transactions/useTransactionsTable.ts
 create mode 100644 web/pay-ui/app/interfaces/refund-requests.ts
 create mode 100644 web/pay-ui/app/interfaces/transaction-view.ts
 create mode 100644 web/pay-ui/app/interfaces/transactions.ts
 create mode 100644 web/pay-ui/app/pages/transaction-view/[id]/InvoiceRefundHistory.vue
 create mode 100644 web/pay-ui/app/pages/transaction-view/[id]/PaymentDetails.vue
 create mode 100644 web/pay-ui/app/pages/transaction-view/[id]/RefundDecisionForm.vue
 create mode 100644 web/pay-ui/app/pages/transaction-view/[id]/RefundRequestForm.vue
 create mode 100644 web/pay-ui/app/pages/transaction-view/[id]/RefundReviewForm.vue
 create mode 100644 web/pay-ui/app/pages/transaction-view/[id]/TransactionDetails.vue
 create mode 100644 web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
 create mode 100644 web/pay-ui/app/pages/transactions/index.vue
 create mode 100644 web/pay-ui/app/stores/refund-requests-store.ts
 create mode 100644 web/pay-ui/app/stores/transactions-store.ts
 create mode 100644 web/pay-ui/app/utils/invoice-status-util.ts
 create mode 100644 web/pay-ui/app/utils/product-util.ts
 create mode 100644 web/pay-ui/tests/unit/components/TransactionView/InvoiceRefundHistory.spec.ts
 create mode 100644 web/pay-ui/tests/unit/components/TransactionView/PaymentDetails.spec.ts
 create mode 100644 web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts
 create mode 100644 web/pay-ui/tests/unit/components/TransactionView/RefundRequestForm.spec.ts
 create mode 100644 web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts
 create mode 100644 web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts
 create mode 100644 web/pay-ui/tests/unit/components/TransactionView/TransactionDetails.spec.ts

diff --git a/web/pay-ui/app/components/refund/RefundRequestsTable.vue b/web/pay-ui/app/components/refund/RefundRequestsTable.vue
new file mode 100644
index 00000000..cdc35bd3
--- /dev/null
+++ b/web/pay-ui/app/components/refund/RefundRequestsTable.vue
@@ -0,0 +1,443 @@
+<script setup lang="ts">
+import { RefundApprovalStatus, UI_CONSTANTS } from '@/utils/constants'
+import CommonUtils from '@/utils/common-util'
+import type { TableColumn } from '@nuxt/ui'
+import { useDebounceFn, useInfiniteScroll } from '@vueuse/core'
+import { useStickyHeader } from '@/composables/common/useStickyHeader'
+import { useRefundRequestTable } from '~/composables/refund/useRefundRequestTable'
+import { useRefundRequestsStore } from '~/stores/refund-requests-store'
+import { PaymentMethodSelectItems } from '~/enums'
+import { usePaymentMethodsList } from '~/composables/common/useStatusList'
+
+interface Props {
+  tableTitle?: string
+  currentTab?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tableTitle: undefined,
+  currentTab: 0
+})
+
+const dateDisplayFormat = 'MMMM dd, yyyy'
+const state = reactive<RefundRequestState>({
+  results: [],
+  stateTotal: 0,
+  total: 0,
+  filters: {
+    pageNumber: 1,
+    pageLimit: 5,
+    filterPayload: defaultFilterPayload()
+  },
+  loading: false,
+  actionDropdown: [],
+  options: {},
+  clearFiltersTrigger: 0,
+  dateRangeReset: 0,
+  showDatePicker: false,
+  dateRangeSelected: false,
+  dateRangeText: '',
+  startDate: '',
+  endDate: ''
+})
+
+const {
+  loadTableData,
+  updateFilter,
+  getNext,
+  resetReachedEnd,
+  loadState
+} = useRefundRequestTable(state)
+
+const refundRequestsStore = useRefundRequestsStore()
+
+const { list: PaymentMethodSelectItems, mapFn: paymentMethodMapFn } = usePaymentMethodsList()
+
+const debouncedUpdateFilter = useDebounceFn((col: string, val: string | number) => {
+  updateFilter(col, val)
+}, UI_CONSTANTS.DEBOUNCE_DELAY_MS)
+
+const paymentMethodModel = computed({
+  get: () => {
+    return state.filters.filterPayload.paymentMethod
+  },
+  set: (value: string) => {
+    onPaymentMethodChange(value)
+  }
+})
+
+function onPaymentMethodChange(value: string) {
+  const stringValue = value || ''
+  state.filters.filterPayload.paymentMethod = value as PaymentTypes
+  updateFilter('paymentMethod', stringValue)
+}
+
+function defaultFilterPayload() {
+  return { refundStatus: RefundApprovalStatus.PENDING_APPROVAL, paymentMethod: null }
+}
+
+async function onDateRangeChange() {
+  refundRequestsStore.setFilter({ ...state.filters.filterPayload })
+  await loadTableData('page', 1)
+}
+
+async function clearFilters() {
+  state.clearFiltersTrigger++
+  state.filters.filterPayload = defaultFilterPayload()
+  state.filters.isActive = false
+  refundRequestsStore.clearFilter()
+  refundRequestsStore.setTableSettings(null)
+  resetReachedEnd()
+  await loadTableData()
+}
+
+function saveTableSettings() {
+  refundRequestsStore.setTableSettings({
+    filterPayload: { ...state.filters.filterPayload },
+    pageNumber: state.filters.pageNumber
+  })
+}
+
+function navigateToDetails(invoiceId: number, refundId: number) {
+  saveTableSettings()
+  navigateTo(`/transaction-view/${invoiceId}/refund-request/${refundId}`)
+}
+
+watch(() => props.currentTab, () => {
+  loadData()
+})
+
+const scrollEl = useTemplateRef<HTMLElement>('scrollEl')
+const table = useTemplateRef<HTMLElement>('table')
+
+const { updateStickyHeaderHeight } = useStickyHeader(scrollEl)
+
+useInfiniteScroll(
+  table,
+  async () => {
+    await getNext(loadState.isInitialLoad)
+  },
+  { distance: 200 }
+)
+
+onMounted(async () => {
+  await loadData()
+  await nextTick()
+  updateStickyHeaderHeight()
+})
+
+async function loadData() {
+  const savedSettings = refundRequestsStore.tableSettings
+  if (savedSettings) {
+    const payload = { ...savedSettings.filterPayload } as typeof state.filters.filterPayload
+    state.filters.filterPayload = { ...state.filters.filterPayload, ...payload }
+    state.filters.pageNumber = savedSettings.pageNumber
+    refundRequestsStore.setTableSettings(null)
+  } else {
+    const savedFilter = refundRequestsStore.refundRequestsFilter
+    if (savedFilter) {
+      const payload = { ...savedFilter }
+      state.filters.filterPayload = { ...state.filters.filterPayload, ...payload }
+    }
+  }
+  await loadTableData()
+}
+
+watch(() => state.filters.filterPayload, (filterPayload) => {
+  refundRequestsStore.setFilter({ ...filterPayload })
+}, { deep: true })
+
+const dateRangeModel = computed({
+  get: () => ({
+    startDate: state.filters.filterPayload.requestedStartDate || null,
+    endDate: state.filters.filterPayload.requestedEndDate || null
+  }),
+  set: (value: { startDate: string | null, endDate: string | null }) => {
+    state.filters.filterPayload.requestedStartDate = value.startDate || ''
+    state.filters.filterPayload.requestedEndDate = value.endDate || ''
+  }
+})
+
+function formatAmount(amount: number) {
+  return amount !== undefined ? CommonUtils.formatAmount(amount) : ''
+}
+
+function formatDate(date: string | undefined) {
+  return date ? CommonUtils.formatDisplayDate(date, dateDisplayFormat) : ''
+}
+
+const columns = computed<TableColumn<RefundRequestResult>[]>(() => {
+  return [
+    {
+      accessorKey: 'invoiceId',
+      header: 'Transaction ID',
+      meta: {
+        class: {
+          th: 'header-transaction-id',
+          td: 'header-transaction-id'
+        }
+      }
+    },
+    {
+      accessorKey: 'requestedBy',
+      header: 'Requested By',
+      meta: {
+        class: {
+          th: 'header-requested-by',
+          td: 'header-requested-by'
+        }
+      }
+    },
+    {
+      accessorKey: 'requestedDate',
+      header: 'Requested Date',
+      meta: {
+        class: {
+          th: 'header-requested-date',
+          td: 'header-requested-date'
+        }
+      }
+    },
+    {
+      accessorKey: 'refundReason',
+      header: 'Reason for Refund',
+      meta: {
+        class: {
+          th: 'header-refund-reason',
+          td: 'header-refund-reason'
+        }
+      }
+    },
+    {
+      accessorKey: 'transactionAmount',
+      header: 'Transaction Amount ',
+      meta: {
+        class: {
+          th: 'header-transaction-amount',
+          td: 'header-transaction-amount'
+        }
+      }
+    },
+    {
+      accessorKey: 'refundAmount',
+      header: 'Refund Amount',
+      meta: {
+        class: {
+          th: 'header-refund-amount',
+          td: 'header-refund-amount'
+        }
+      }
+    },
+    {
+      accessorKey: 'paymentMethod',
+      header: 'Payment Method',
+      meta: {
+        class: {
+          th: 'header-payment-method',
+          td: 'header-payment-method'
+        }
+      }
+    },
+    {
+      accessorKey: 'actions',
+      header: 'Actions',
+      meta: {
+        class: {
+          th: 'header-action',
+          td: 'header-action'
+        }
+      }
+    }
+  ]
+})
+</script>
+
+<template>
+  <div>
+    <div class="bg-white rounded shadow-sm border border-[var(--color-divider)] overflow-hidden">
+      <div
+        ref="scrollEl"
+        class="w-full overflow-x-auto overflow-y-auto"
+        style="max-height: calc(100vh - 300px);"
+      >
+        <UTable
+          ref="table"
+          :data="state.results"
+          :columns="columns"
+          :loading="state.loading"
+          sticky
+          class="sticky-table"
+        >
+          <template #body-top>
+            <tr class="sticky-row header-row-2 bg-[var(--color-white)]" role="row">
+              <th class="text-left table-filter-input" scope="col">
+                <UInput
+                  id="transaction-id-filter"
+                  v-model="state.filters.filterPayload.invoiceId"
+                  name="transaction-id-filter"
+                  placeholder="Transaction ID"
+                  aria-label="Filter by Transaction ID"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedUpdateFilter('invoiceId', $event)"
+                />
+              </th>
+              <th class="text-left table-filter-input" scope="col">
+                <UInput
+                  id="requested-by-filter"
+                  v-model="state.filters.filterPayload.requestedBy"
+                  name="requested-by-filter"
+                  placeholder="Requested By"
+                  aria-label="Filter by Requested By"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedUpdateFilter('requestedBy', $event)"
+                />
+              </th>
+              <th class="text-left table-filter-input" scope="col">
+                <DateRangeFilter
+                  v-model="dateRangeModel"
+                  placeholder="Request Date"
+                  aria-label="Filter by request date range"
+                  class="w-full"
+                  @change="onDateRangeChange"
+                />
+              </th>
+              <th class="text-left table-filter-input" scope="col">
+                <UInput
+                  id="refund-reason-filter"
+                  v-model="state.filters.filterPayload.refundReason"
+                  name="refund-reason-filter"
+                  placeholder="Reason for Refund"
+                  aria-label="Filter by refund reason"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedUpdateFilter('refundReason', $event)"
+                />
+              </th>
+              <th class="text-left table-filter-input" scope="col">
+                <UInput
+                  id="transaction-amount-filter"
+                  v-model="state.filters.filterPayload.transactionAmount"
+                  name="transaction-amount-filter"
+                  placeholder="Transaction Amount"
+                  aria-label="Filter by transaction amount"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedUpdateFilter('transactionAmount', $event)"
+                />
+              </th>
+              <th class="text-left table-filter-input" scope="col">
+                <UInput
+                  id="refund-amount-filter"
+                  v-model="state.filters.filterPayload.refundAmount"
+                  name="refund-amount-filter"
+                  placeholder="Refund Amount"
+                  aria-label="Filter by refund amount"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedUpdateFilter('refundAmount', $event)"
+                />
+              </th>
+              <th class="text-left table-filter-input" scope="col">
+                <StatusList
+                  v-model="paymentMethodModel"
+                  :list="PaymentMethodSelectItems"
+                  :map-fn="paymentMethodMapFn"
+                  placeholder="Type"
+                  aria-label="Filter by short name type"
+                  class="w-full"
+                />
+              </th>
+              <th class="clear-filters-th" scope="col">
+                <UButton
+                  v-if="state.filters.isActive"
+                  label="Clear Filters"
+                  aria-label="Clear all filters"
+                  variant="outline"
+                  color="primary"
+                  trailing-icon="i-mdi-close"
+                  size="md"
+                  class="clear-filters-btn"
+                  @click="clearFilters"
+                />
+              </th>
+            </tr>
+          </template>
+
+          <template #requestedDate-cell="{ row }">
+            <span>{{ formatDate(row.original.requestedDate) }}</span>
+          </template>
+
+          <template #transactionAmount-cell="{ row }">
+            <div class="flex items-center justify-start gap-2">
+              <span>{{ formatAmount(row.original.transactionAmount) }}</span>
+            </div>
+          </template>
+
+          <template #refundAmount-cell="{ row }">
+            <div class="flex items-center justify-start gap-2">
+              <span>{{ formatAmount(row.original.transactionAmount) }}</span>
+            </div>
+          </template>
+
+          <template #paymentMethod-cell="{ row }">
+            <span>{{ getPaymentTypeDisplayName(row.original.paymentMethod) }} </span>
+          </template>
+
+          <template #actions-cell="{ row }">
+            <div class="flex items-center justify-end gap-2">
+              <UButton
+                label="View Details"
+                color="primary"
+                class="btn-table font-normal"
+                @click="navigateToDetails(row.original.invoiceId, row.original.refundId)"
+              />
+            </div>
+          </template>
+
+          <template #loading>
+            <div class="text-center py-8">
+              Loading Short names...
+            </div>
+          </template>
+
+          <template #empty>
+            <div class="text-center py-8 text-gray-600">
+              No records to show.
+            </div>
+          </template>
+        </UTable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @use '~/assets/scss/search-table.scss';
+  @use '~/assets/scss/colors.scss' as *;
+
+  :deep(table) {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  :deep(table th),
+  :deep(table td) {
+    width: 16.666% !important;
+  }
+
+  :deep(.sticky-row th .w-full),
+  :deep(.sticky-row th > div),
+  :deep(.sticky-row th input),
+  :deep(.sticky-row th .ui-input),
+  :deep(.sticky-row th [class*="UInput"]) {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+.search-header-bg {
+  background-color: var(--color-bg-light-blue) !important;
+  opacity: 1 !important;
+}
+</style>
diff --git a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
new file mode 100644
index 00000000..88c5da3d
--- /dev/null
+++ b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
@@ -0,0 +1,1111 @@
+<script setup lang="ts">
+import CommonUtils from '@/utils/common-util'
+import {
+  InvoiceStatus, RefundApprovalStatus, UI_CONSTANTS
+} from '@/utils/constants'
+import {
+  invoiceStatusDisplay,
+  getInvoiceStatusDisplayName
+} from '@/utils/invoice-status-util'
+import { getProductDisplayName } from '@/utils/product-util'
+import { PaymentTypes, paymentTypeDisplay } from '@/enums/payment-types'
+import { RolePattern } from '@/enums/fas-roles'
+import { useTransactionsTable } from '@/composables/transactions/useTransactionsTable'
+import { useTransactionsStore } from '@/stores/transactions-store'
+import { useStickyHeader } from '@/composables/common/useStickyHeader'
+import { usePaymentMethodsList } from '@/composables/common/useStatusList'
+import { useDebounceFn, useInfiniteScroll } from '@vueuse/core'
+import type {
+  Transaction,
+  AppliedCredit,
+  PartialRefund
+} from '@/interfaces/transactions'
+
+interface Props {
+  extended?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  extended: false
+})
+
+const emit = defineEmits<{
+  isDownloadingReceipt: [value: boolean]
+}>()
+
+const {
+  searchTransactionsTableHeaders,
+  columnPinning,
+  columnVisibility,
+  setViewAll,
+  loadTransactionList,
+  clearAllFilters,
+  getNext,
+  transactions
+} = await useTransactionsTable()
+
+const transactionsStore = useTransactionsStore()
+const {
+  list: paymentMethodList,
+  mapFn: paymentMethodMapFn
+} = usePaymentMethodsList()
+
+setViewAll(props.extended)
+
+const expandedRows = ref(new Set<number>())
+
+type TableRow = Transaction | DropdownItem
+
+const tableData = computed<TableRow[]>(() => {
+  const rows: TableRow[] = []
+  for (const item of transactions.results) {
+    rows.push(item)
+    if (expandedRows.value.has(item.id)) {
+      rows.push(...getDropdownItems(item))
+    }
+  }
+  return rows
+})
+
+function isDropdownRow(row: { original: Record<string, unknown> }): boolean {
+  return !!(row.original as Record<string, unknown>)._isDropdown
+}
+
+function asDropdownItem(row: { original: Record<string, unknown> }): DropdownItem {
+  return row.original as unknown as DropdownItem
+}
+
+const debouncedLoadList = useDebounceFn(
+  (field: string, value: string | number) => {
+    loadTransactionList(field, value)
+  },
+  UI_CONSTANTS.DEBOUNCE_DELAY_MS
+)
+
+const fp = computed(() => transactions.filters.filterPayload)
+
+const dateRangeModel = computed({
+  get: () => ({
+    startDate: fp.value.dateFilter?.startDate || null,
+    endDate: fp.value.dateFilter?.endDate || null
+  }),
+  set: (val: { startDate: string | null, endDate: string | null }) => {
+    if (!fp.value.dateFilter) {
+      fp.value.dateFilter = {
+        startDate: '', endDate: '', isDefault: false
+      }
+    }
+    fp.value.dateFilter.startDate = val.startDate || ''
+    fp.value.dateFilter.endDate = val.endDate || ''
+  }
+})
+
+const paymentMethodModel = computed({
+  get: () => fp.value.paymentMethod || '',
+  set: (value: string) => {
+    fp.value.paymentMethod = value || null
+    loadTransactionList('paymentMethod', value || '')
+  }
+})
+
+const visibleColumns = computed(() => {
+  return searchTransactionsTableHeaders.value.filter(
+    (f: { hideInSearchColumnFilter?: boolean }) => {
+      return !f.hideInSearchColumnFilter
+    }
+  )
+})
+
+function asTransaction(
+  row: { original: Record<string, unknown> }
+): Transaction {
+  return row.original as unknown as Transaction
+}
+
+function getInvoiceStatus(item: Transaction): string {
+  if (
+    item.paymentMethod === PaymentTypes.ONLINE_BANKING
+    && item.statusCode === InvoiceStatus.SETTLEMENT_SCHEDULED
+  ) {
+    return invoiceStatusDisplay[InvoiceStatus.PENDING]
+  }
+  if (item.partialRefunds && item.partialRefunds.length > 0) {
+    if (
+      [PaymentTypes.ONLINE_BANKING, PaymentTypes.PAD]
+        .includes(item.paymentMethod)
+    ) {
+      return invoiceStatusDisplay[InvoiceStatus.PARTIALLY_CREDITED]
+    }
+    return invoiceStatusDisplay[InvoiceStatus.PARTIALLY_REFUNDED]
+  }
+  return getInvoiceStatusDisplayName(item.statusCode)
+}
+
+function hasDropdownContent(item: Transaction): boolean {
+  const hasPartialRefunds = (item.partialRefunds?.length ?? 0) > 0
+  let hasAppliedCreditsWithRemaining = false
+  if (item.appliedCredits && item.appliedCredits.length > 0) {
+    const totalAppliedCredits = item.appliedCredits.reduce(
+      (sum: number, c: AppliedCredit) => sum + c.amountApplied, 0
+    )
+    hasAppliedCreditsWithRemaining = item.total - totalAppliedCredits > 0
+  }
+  const hasRefundStatus = item.statusCode === InvoiceStatus.CREDITED
+    || item.statusCode === InvoiceStatus.REFUNDED
+  return hasPartialRefunds
+    || hasAppliedCreditsWithRemaining
+    || hasRefundStatus
+}
+
+function isExpanded(item: Transaction): boolean {
+  return expandedRows.value.has(item.id)
+}
+
+function toggleExpanded(item: Transaction) {
+  if (expandedRows.value.has(item.id)) {
+    expandedRows.value.delete(item.id)
+  } else {
+    expandedRows.value.add(item.id)
+  }
+}
+
+function isRefundAsCredits(item: Transaction): boolean {
+  if (item.partialRefunds && item.partialRefunds.length > 0) {
+    return item.partialRefunds.some(
+      (r: PartialRefund) => r.isCredit
+    )
+  }
+  return item.statusCode === InvoiceStatus.CREDITED
+}
+
+function isRefundable(item: Transaction): boolean {
+  if (
+    !item.latestRefundStatus
+    || RefundApprovalStatus.DECLINED === item.latestRefundStatus
+  ) {
+    const productRole = (item.product?.toLowerCase() ?? '')
+      + RolePattern.ProductRefundRequester
+    return (!!item.partialRefundable || !!item.fullRefundable)
+      && item.total > 0
+      && CommonUtils.canInitiateProductRefund(productRole)
+  }
+  return false
+}
+
+function getDropdownPaymentMethodDisplay(
+  paymentMethod: PaymentTypes,
+  item?: Transaction
+): string {
+  if (item?.appliedCredits && item.appliedCredits.length > 0) {
+    const totalCredits = item.appliedCredits.reduce(
+      (s: number, c: AppliedCredit) => s + c.amountApplied, 0
+    )
+    const remaining = item.total - totalCredits
+    if (remaining > 0) {
+      if (item.paymentMethod === PaymentTypes.PAD) {
+        const credit = paymentTypeDisplay[PaymentTypes.CREDIT]
+        const pad = paymentTypeDisplay[PaymentTypes.PAD]
+        return `${credit} and ${pad}`
+      } else if (
+        item.paymentMethod === PaymentTypes.ONLINE_BANKING
+      ) {
+        const credit = paymentTypeDisplay[PaymentTypes.CREDIT]
+        const ob = paymentTypeDisplay[PaymentTypes.ONLINE_BANKING]
+        return `${credit} and ${ob}`
+      }
+    } else {
+      return paymentTypeDisplay[PaymentTypes.CREDIT]
+    }
+  }
+  const displayMap = paymentTypeDisplay as Record<string, string>
+  return displayMap[paymentMethod] || paymentMethod
+}
+
+interface DropdownItem {
+  id: string
+  type: string
+  folioNumber: string
+  createdName: string
+  invoiceNumber: string
+  date: string | Date
+  time: boolean
+  amount: string
+  paymentMethod: string
+  isRefund: boolean
+  status: string
+  transactionId: string | number
+  _isDropdown: true
+}
+
+function createDropdownItem(
+  item: Transaction,
+  overrides: Partial<DropdownItem> = {}
+): DropdownItem {
+  return {
+    _isDropdown: true as const,
+    id: '',
+    type: '',
+    folioNumber: item.folioNumber,
+    createdName: item.createdName,
+    invoiceNumber: item.invoiceNumber,
+    date: '',
+    time: false,
+    amount: '',
+    paymentMethod: '',
+    isRefund: false,
+    status: '',
+    transactionId: '',
+    ...overrides
+  }
+}
+
+function getAppliedCreditsItems(item: Transaction): DropdownItem[] {
+  const credits = item.appliedCredits
+  if (!credits?.length) { return [] }
+
+  const items: DropdownItem[] = []
+  const totalApplied = credits.reduce(
+    (s: number, c: AppliedCredit) => s + c.amountApplied, 0
+  )
+  const remaining = item.total - totalApplied
+
+  credits.forEach((credit: AppliedCredit) => {
+    items.push(createDropdownItem(item, {
+      id: `credit-${credit.id}`,
+      type: '',
+      date: credit.createdOn,
+      time: true,
+      amount: `$${credit.amountApplied.toFixed(2)}`,
+      paymentMethod: paymentTypeDisplay[PaymentTypes.CREDIT],
+      isRefund: false,
+      status: invoiceStatusDisplay[InvoiceStatus.COMPLETED],
+      transactionId: credit.id
+    }))
+  })
+
+  if (remaining > 0) {
+    items.push(createDropdownItem(item, {
+      id: `remaining-${item.id}`,
+      type: '',
+      date: credits[0]!.createdOn,
+      time: true,
+      amount: `$${remaining.toFixed(2)}`,
+      paymentMethod: item.paymentMethod,
+      isRefund: false,
+      status: invoiceStatusDisplay[InvoiceStatus.COMPLETED],
+      transactionId: item.id
+    }))
+  }
+
+  return items
+}
+
+function getPartialRefundsItems(
+  item: Transaction
+): DropdownItem[] {
+  const refunds = item.partialRefunds
+  if (!refunds?.length) { return [] }
+
+  const totalRefundAmount = refunds.reduce(
+    (s: number, r: PartialRefund) => s + r.refundAmount, 0
+  )
+  const refundAsCredits = isRefundAsCredits(item)
+  const refundIds = refunds.map(
+    (r: PartialRefund) => r.paymentLineItemId
+  ).join(', ')
+
+  return [createDropdownItem(item, {
+    id: `refund-${item.id}`,
+    type: refundAsCredits ? 'Refund as credits' : 'Refund',
+    date: refunds[0]!.createdOn,
+    time: false,
+    amount: `-$${totalRefundAmount.toFixed(2)}`,
+    paymentMethod: refundAsCredits
+      ? paymentTypeDisplay[PaymentTypes.CREDIT]
+      : item.paymentMethod,
+    isRefund: true,
+    status: refundAsCredits
+      ? invoiceStatusDisplay[InvoiceStatus.PARTIALLY_CREDITED]
+      : invoiceStatusDisplay[InvoiceStatus.PARTIALLY_REFUNDED],
+    createdName: refunds[0]!.createdName,
+    transactionId: refundIds
+  })]
+}
+
+function getFullRefundItems(item: Transaction): DropdownItem[] {
+  const validStatuses = [
+    InvoiceStatus.REFUNDED, InvoiceStatus.CREDITED
+  ]
+  if (!validStatuses.includes(item.statusCode)) {
+    return []
+  }
+
+  const refundAsCredits = isRefundAsCredits(item)
+  const isCredited = item.statusCode === InvoiceStatus.CREDITED
+
+  return [createDropdownItem(item, {
+    id: `full-${item.id}`,
+    type: isCredited ? 'Refund as credits' : 'Refund',
+    date: item.refundDate || item.createdOn,
+    time: true,
+    amount: `-$${item.total.toFixed(2)}`,
+    paymentMethod: refundAsCredits
+      ? paymentTypeDisplay[PaymentTypes.CREDIT]
+      : item.paymentMethod,
+    isRefund: true,
+    status: refundAsCredits
+      ? invoiceStatusDisplay[InvoiceStatus.CREDITED]
+      : invoiceStatusDisplay[InvoiceStatus.REFUNDED],
+    transactionId: item.id
+  })]
+}
+
+function getDropdownItems(item: Transaction): DropdownItem[] {
+  return [
+    ...getAppliedCreditsItems(item),
+    ...getPartialRefundsItems(item),
+    ...getFullRefundItems(item)
+  ]
+}
+
+function displayDate(val: string | Date): string {
+  return CommonUtils.formatDisplayDate(val, 'MMMM dd, yyyy')
+}
+
+function isCompletedOrPaid(statusCode: InvoiceStatus): boolean {
+  return [
+    InvoiceStatus.COMPLETED,
+    InvoiceStatus.PAID,
+    InvoiceStatus.REFUNDED,
+    InvoiceStatus.CREDITED
+  ].includes(statusCode)
+}
+
+function getHelpText(item: Transaction): string {
+  switch (item?.statusCode) {
+    case InvoiceStatus.REFUND_REQUESTED:
+      return 'We are processing your refund request. '
+        + 'It may take up to 7 business days to refund your total amount.'
+    case InvoiceStatus.OVERDUE:
+      return 'Your monthly statement is overdue. '
+        + 'Please make your payment as soon as possible.'
+    default:
+      return ''
+  }
+}
+
+function saveTableSettings() {
+  transactionsStore.setTableSettings({
+    filterPayload: { ...transactions.filters.filterPayload },
+    pageNumber: transactions.filters.pageNumber ?? 1
+  })
+}
+
+function viewDetails(item: Transaction) {
+  saveTableSettings()
+  navigateTo(`/transaction-view/${item.id}`)
+}
+
+function initiateRefund(item: Transaction) {
+  saveTableSettings()
+  navigateTo(
+    `/transaction-view/${item.id}/initiateRefund`
+  )
+}
+
+async function downloadReceipt(item: Transaction) {
+  emit('isDownloadingReceipt', true)
+  try {
+    const nuxtApp = useNuxtApp()
+    const $payApi = nuxtApp.$payApi as typeof nuxtApp.$payApi
+    const response = await $payApi<Blob>(
+      `/payment-requests/${item.id}/receipts`,
+      {
+        method: 'POST',
+        body: {
+          filingDateTime: CommonUtils.formatDisplayDate(
+            item.createdOn
+          )
+        },
+        responseType: 'blob'
+      }
+    )
+    const filename = `bcregistry-receipts-${item.id}.pdf`
+    CommonUtils.fileDownload(
+      response, filename, 'application/pdf'
+    )
+  } catch (error) {
+    console.error('Failed to download receipt', error)
+  } finally {
+    emit('isDownloadingReceipt', false)
+  }
+}
+
+async function clearFilters() {
+  clearAllFilters()
+  transactionsStore.clearFilter()
+  transactionsStore.clearTableSettings()
+  await loadTransactionList()
+}
+
+async function onDateRangeChange() {
+  transactionsStore.setFilter({
+    ...transactions.filters.filterPayload
+  })
+  await loadTransactionList()
+}
+
+const scrollEl = useTemplateRef<HTMLElement>('scrollEl')
+const table = useTemplateRef<HTMLElement>('table')
+
+const { updateStickyHeaderHeight } = useStickyHeader(scrollEl)
+
+useInfiniteScroll(
+  table,
+  async () => {
+    await getNext()
+  },
+  { distance: UI_CONSTANTS.INFINITE_SCROLL_DISTANCE }
+)
+
+onMounted(async () => {
+  const savedSettings = transactionsStore.tableSettings
+  if (savedSettings) {
+    Object.assign(
+      transactions.filters.filterPayload,
+      savedSettings.filterPayload
+    )
+    transactions.filters.pageNumber = savedSettings.pageNumber
+    transactionsStore.clearTableSettings()
+  } else {
+    const savedFilter = transactionsStore.transactionFilter
+    if (savedFilter) {
+      Object.assign(
+        transactions.filters.filterPayload, savedFilter
+      )
+    }
+  }
+
+  await loadTransactionList()
+  await nextTick()
+  updateStickyHeaderHeight()
+})
+
+watch(() => transactions.filters.filterPayload, (payload) => {
+  transactionsStore.setFilter({ ...payload })
+}, { deep: true })
+
+watch(columnVisibility, () => {
+  nextTick(() => { updateStickyHeaderHeight() })
+})
+
+watch(() => transactions.results, () => {
+  nextTick(() => { updateStickyHeaderHeight() })
+}, { immediate: true })
+</script>
+
+<template>
+  <div>
+    <div
+      class="bg-white rounded shadow-sm border border-[var(--color-divider)] overflow-hidden"
+    >
+      <div
+        class="relative rounded-t-lg px-2 py-3.5 flex-shrink-0 search-header-bg"
+      >
+        <div class="flex flex-wrap justify-between">
+          <div class="flex">
+            <UIcon
+              name="i-mdi-view-list"
+              class="mr-2 size-6 text-primary"
+              style="margin-top: 5px;"
+            />
+            <h2 class="table-header-text font-bold">
+              Transactions
+            </h2>
+          </div>
+          <div>
+            <UPopover>
+              <UButton
+                label="Columns to Show"
+                color="neutral"
+                variant="subtle"
+                trailing-icon="i-mdi-menu-down"
+                class="columns-to-show-btn"
+              />
+              <template #content>
+                <div class="py-2">
+                  <UCheckbox
+                    v-for="col in visibleColumns"
+                    :key="(col as any).accessorKey"
+                    :model-value="!!(col as any).display"
+                    :label="String((col as any).header || '')"
+                    class="px-2 py-2"
+                    @update:model-value="(col as any).display = !!$event"
+                  />
+                </div>
+              </template>
+            </UPopover>
+          </div>
+        </div>
+      </div>
+
+      <div
+        ref="scrollEl"
+        class="w-full overflow-x-auto overflow-y-auto table-scroll"
+        style="max-height: calc(100vh - 300px);"
+      >
+        <UTable
+          ref="table"
+          v-model:column-visibility="columnVisibility"
+          v-model:column-pinning="columnPinning"
+          :data="(tableData as any)"
+          :columns="searchTransactionsTableHeaders"
+          :loading="transactions.loading"
+          sticky
+          class="sticky-table search-table"
+        >
+          <template #body-top>
+            <tr
+              class="sticky-row header-row-2 bg-[var(--color-white)]"
+              role="row"
+            >
+              <th
+                v-if="columnVisibility.accountName"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <UInput
+                  v-model="fp.accountName"
+                  placeholder="Account Name"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedLoadList('accountName', $event ?? '')"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.product"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <UInput
+                  v-model="fp.product"
+                  placeholder="Application Type"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedLoadList('product', $event ?? '')"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.lineItems"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <UInput
+                  v-model="fp.lineItems"
+                  placeholder="Transaction Type"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedLoadList('lineItems', $event ?? '')"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.details"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <UInput
+                  v-model="fp.details"
+                  placeholder="Details"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedLoadList('details', $event ?? '')"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.businessIdentifier"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <UInput
+                  v-model="fp.businessIdentifier"
+                  placeholder="Number"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedLoadList('businessIdentifier', $event ?? '')"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.folioNumber"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <UInput
+                  v-model="fp.folioNumber"
+                  placeholder="Folio #"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedLoadList('folioNumber', $event ?? '')"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.createdName"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <UInput
+                  v-model="fp.createdName"
+                  placeholder="Initiated By"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedLoadList('createdName', $event ?? '')"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.createdOn"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <DateRangeFilter
+                  v-model="dateRangeModel"
+                  placeholder="Date"
+                  class="w-full"
+                  @change="onDateRangeChange"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.total"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+              </th>
+              <th
+                v-if="columnVisibility.id"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <UInput
+                  v-model="fp.id"
+                  placeholder="Transaction ID"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedLoadList('id', $event ?? '')"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.invoiceNumber"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <UInput
+                  v-model="fp.invoiceNumber"
+                  placeholder="Invoice #"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedLoadList('invoiceNumber', $event ?? '')"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.paymentMethod"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <StatusList
+                  v-model="paymentMethodModel"
+                  :list="paymentMethodList"
+                  :map-fn="(paymentMethodMapFn as any)"
+                  placeholder="Payment Method"
+                  class="w-full"
+                />
+              </th>
+              <th
+                v-if="columnVisibility.statusCode"
+                class="text-left table-filter-input"
+                scope="col"
+              >
+                <UInput
+                  v-model="fp.statusCode"
+                  placeholder="Status"
+                  size="md"
+                  class="w-full"
+                  @update:model-value="debouncedLoadList('statusCode', $event ?? '')"
+                />
+              </th>
+              <th
+                v-if="columnVisibility['downloads']"
+                class="table-filter-input"
+                scope="col"
+              />
+              <th class="clear-filters-th" scope="col">
+                <UButton
+                  v-if="transactions.filters.isActive"
+                  label="Clear Filters"
+                  variant="outline"
+                  color="primary"
+                  trailing-icon="i-mdi-close"
+                  size="md"
+                  class="clear-filters-btn"
+                  @click="clearFilters"
+                />
+              </th>
+            </tr>
+          </template>
+
+          <template #accountName-cell="{ row }">
+            <template v-if="isDropdownRow(row)">
+            </template>
+            <span v-else>
+              {{ asTransaction(row).paymentAccount?.accountName || '-' }}
+            </span>
+          </template>
+
+          <template #product-cell="{ row }">
+            <template v-if="isDropdownRow(row)" />
+            <span v-else>
+              {{ getProductDisplayName(String(asTransaction(row).product)) }}
+            </span>
+          </template>
+
+          <template #lineItems-cell="{ row }">
+            <span v-if="isDropdownRow(row)" class="dropdown-child-cell font-medium">
+              {{ asDropdownItem(row).type }}
+            </span>
+            <div v-else class="flex items-start">
+              <div
+                v-if="hasDropdownContent(asTransaction(row))"
+                class="expand-icon-container mr-2 cursor-pointer"
+                @click.stop="toggleExpanded(asTransaction(row))"
+              >
+                <UIcon
+                  :name="isExpanded(asTransaction(row))
+                    ? 'i-mdi-chevron-up'
+                    : 'i-mdi-chevron-down'"
+                  class="expansion-icon"
+                />
+              </div>
+              <div>
+                <b
+                  v-for="(lineItem, i) in asTransaction(row).lineItems"
+                  :key="String(lineItem.description) + i"
+                  class="block"
+                >
+                  {{ lineItem.description }}
+                </b>
+                <span
+                  v-for="(detail, i) in (asTransaction(row).details || [])"
+                  :key="(detail.label || '') + i"
+                  class="block text-sm"
+                >
+                  {{ detail.label }} {{ detail.value }}
+                </span>
+                <div
+                  v-if="hasDropdownContent(asTransaction(row))"
+                  class="mt-1"
+                >
+                  <a
+                    class="detail-link cursor-pointer"
+                    @click.stop="toggleExpanded(asTransaction(row))"
+                  >
+                    {{
+                      isExpanded(asTransaction(row))
+                        ? 'Hide Detail'
+                        : 'View Detail'
+                    }}
+                  </a>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <template #businessIdentifier-cell="{ row }">
+            <template v-if="isDropdownRow(row)" />
+            <span v-else>{{ asTransaction(row).businessIdentifier }}</span>
+          </template>
+
+          <template #folioNumber-cell="{ row }">
+            <span v-if="isDropdownRow(row)">{{ asDropdownItem(row).folioNumber }}</span>
+            <span v-else>{{ asTransaction(row).folioNumber }}</span>
+          </template>
+
+          <template #createdName-cell="{ row }">
+            <span v-if="isDropdownRow(row)">{{ asDropdownItem(row).createdName }}</span>
+            <span v-else>{{ asTransaction(row).createdName }}</span>
+          </template>
+
+          <template #id-cell="{ row }">
+            <span v-if="isDropdownRow(row)">{{ asDropdownItem(row).transactionId }}</span>
+            <span v-else>{{ asTransaction(row).id }}</span>
+          </template>
+
+          <template #invoiceNumber-cell="{ row }">
+            <span v-if="isDropdownRow(row)">{{ asDropdownItem(row).invoiceNumber }}</span>
+            <span v-else>{{ asTransaction(row).invoiceNumber }}</span>
+          </template>
+
+          <template #details-cell="{ row }">
+            <template v-if="isDropdownRow(row)" />
+            <template v-else>
+              <span
+                v-for="(detail, i) in (asTransaction(row).details || [])"
+                :key="(detail.label || '') + i"
+                class="block text-sm"
+              >
+                {{ detail.label }} {{ detail.value }}
+              </span>
+            </template>
+          </template>
+
+          <template #createdOn-cell="{ row }">
+            <span v-if="isDropdownRow(row)" class="dropdown-child-cell">
+              {{ asDropdownItem(row).date ? displayDate(String(asDropdownItem(row).date)) : '' }}
+            </span>
+            <span v-else>
+              {{ displayDate(asTransaction(row).createdOn) }}
+            </span>
+          </template>
+
+          <template #total-cell="{ row }">
+            <span
+              v-if="isDropdownRow(row)"
+              :class="[
+                'dropdown-child-cell',
+                { 'refund-amount': asDropdownItem(row).isRefund }
+              ]"
+            >
+              {{ asDropdownItem(row).amount }}
+            </span>
+            <span
+              v-else-if="asTransaction(row).statusCode === InvoiceStatus.CANCELLED"
+              class="total-amount-cell"
+            >
+              $0.00
+            </span>
+            <span v-else class="total-amount-cell">
+              {{ CommonUtils.formatAmount(asTransaction(row).total) }}
+            </span>
+          </template>
+
+          <template #paymentMethod-cell="{ row }">
+            <span v-if="isDropdownRow(row)" class="dropdown-child-cell">
+              {{ asDropdownItem(row).paymentMethod }}
+            </span>
+            <span v-else>
+              {{
+                getDropdownPaymentMethodDisplay(
+                  asTransaction(row).paymentMethod,
+                  asTransaction(row)
+                )
+              }}
+            </span>
+          </template>
+
+          <template #statusCode-cell="{ row }">
+            <span v-if="isDropdownRow(row)" class="dropdown-child-cell">
+              {{ asDropdownItem(row).status }}
+            </span>
+            <div v-else class="flex items-start gap-1">
+              <div>
+                <div class="flex items-center gap-1">
+                  <UIcon
+                    v-if="isCompletedOrPaid(asTransaction(row).statusCode)"
+                    name="i-mdi-check"
+                    class="text-green-600"
+                  />
+                  <UIcon
+                    v-if="asTransaction(row).statusCode === InvoiceStatus.OVERDUE"
+                    name="i-mdi-alert"
+                    class="text-red-600"
+                  />
+                  <b>{{ getInvoiceStatus(asTransaction(row)) }}</b>
+                </div>
+                <span
+                  v-if="asTransaction(row).updatedOn"
+                  class="text-sm"
+                >
+                  {{ displayDate(asTransaction(row).updatedOn) }}
+                </span>
+                <UBadge
+                  v-if="asTransaction(row).latestRefundStatus === RefundApprovalStatus.PENDING_APPROVAL"
+                  color="primary"
+                  size="sm"
+                  class="mt-1"
+                >
+                  REFUND REQUEST
+                </UBadge>
+                <UBadge
+                  v-if="asTransaction(row).latestRefundStatus === RefundApprovalStatus.DECLINED"
+                  color="primary"
+                  size="sm"
+                  class="mt-1"
+                >
+                  REFUND DECLINED
+                </UBadge>
+              </div>
+              <IconTooltip
+                v-if="([
+                  InvoiceStatus.OVERDUE,
+                  InvoiceStatus.REFUND_REQUESTED
+                ] as InvoiceStatus[]).includes(asTransaction(row).statusCode)"
+                :text="getHelpText(asTransaction(row))"
+              />
+            </div>
+          </template>
+
+          <template #downloads-cell="{ row }">
+            <template v-if="isDropdownRow(row)" />
+            <span
+              v-else
+              class="receipt-link"
+              @click="downloadReceipt(asTransaction(row))"
+            >
+              <UIcon name="i-mdi-file-download-outline" />
+              Receipt
+            </span>
+          </template>
+
+          <template #actions-cell="{ row }">
+            <template v-if="isDropdownRow(row)" />
+            <div v-else class="flex items-center justify-end gap-2">
+              <UButton
+                label="View Details"
+                color="primary"
+                class="btn-table font-normal"
+                @click="viewDetails(asTransaction(row))"
+              />
+              <UDropdownMenu
+                v-if="isRefundable(asTransaction(row))"
+                :items="[
+                  [
+                    {
+                      label: 'Initiate Refund',
+                      icon: 'i-mdi-cash-refund',
+                      onSelect: () => initiateRefund(asTransaction(row))
+                    }
+                  ]
+                ]"
+              >
+                <UButton
+                  color="primary"
+                  class="btn-table"
+                  trailing-icon="i-mdi-arrow-down"
+                />
+              </UDropdownMenu>
+            </div>
+          </template>
+
+          <template #loading>
+            <div class="text-center py-8">
+              Loading Transaction Records...
+            </div>
+          </template>
+
+          <template #empty>
+            <div class="text-center py-8 text-gray-600">
+              No Transaction Records
+            </div>
+          </template>
+        </UTable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '~/assets/scss/search-table.scss';
+@use '~/assets/scss/colors.scss' as *;
+
+.search-header-bg {
+  background-color: var(--color-bg-light-blue) !important;
+  opacity: 1 !important;
+}
+
+:deep(table) {
+  table-layout: auto;
+  width: 100%;
+}
+
+:deep(table thead),
+:deep(table tbody) {
+  width: 100%;
+}
+
+:deep(.sticky-row),
+:deep(table thead tr) {
+  width: 100%;
+}
+
+:deep(table thead tr:first-child th),
+:deep(.sticky-row th) {
+  min-width: 120px;
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important;
+}
+
+:deep(.sticky-row th.clear-filters-th) {
+  text-align: right !important;
+}
+
+:deep(.clear-filters-btn) {
+  max-width: 150px !important;
+}
+
+:deep(.sticky-row th .w-full),
+:deep(.sticky-row th > div),
+:deep(.sticky-row th input),
+:deep(.sticky-row th .ui-input),
+:deep(.sticky-row th [class*="UInput"]) {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+.total-amount-cell {
+  text-align: right;
+  display: block;
+}
+
+:deep(.header-total) {
+  text-align: right !important;
+}
+
+.expand-icon-container {
+  display: flex;
+  align-items: flex-start;
+}
+
+.expansion-icon {
+  background-color: var(--color-primary);
+  border-radius: 50%;
+  color: white;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.detail-link {
+  color: var(--color-primary);
+  text-decoration: underline;
+  font-size: 0.875rem;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.dropdown-child-cell {
+  font-weight: normal;
+  padding-left: 28px;
+}
+
+.refund-amount {
+  color: var(--color-error, #d32f2f);
+}
+
+.receipt-link {
+  cursor: pointer;
+  color: var(--color-primary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+</style>
diff --git a/web/pay-ui/app/composables/common/useBaseTable.ts b/web/pay-ui/app/composables/common/useBaseTable.ts
new file mode 100644
index 00000000..e31347fc
--- /dev/null
+++ b/web/pay-ui/app/composables/common/useBaseTable.ts
@@ -0,0 +1,201 @@
+import CommonUtils from '@/utils/common-util'
+
+const hasValue = (value: unknown): boolean =>
+  value !== '' && value !== null && value !== undefined
+
+export interface UseInfiniteScrollOptions<T> {
+  fetchPage: (page: number, appendResults: boolean) => Promise<{ items: T[], hasMore: boolean }>
+  onLoadStart?: () => void
+  onLoadEnd?: () => void
+}
+
+export function useInfiniteScroll<T>(options: UseInfiniteScrollOptions<T>) {
+  const { fetchPage, onLoadStart, onLoadEnd } = options
+
+  const loadState = reactive({
+    reachedEnd: false,
+    isLoading: false,
+    isInitialLoad: true
+  })
+
+  const currentPage = ref(1)
+
+  async function loadPage(page: number, appendResults = false) {
+    if (loadState.isLoading) { return }
+
+    loadState.isLoading = true
+    onLoadStart?.()
+
+    try {
+      currentPage.value = page
+      const { hasMore } = await fetchPage(page, appendResults)
+      loadState.reachedEnd = !hasMore
+    } catch (error) {
+      console.error('Error loading data:', error)
+      loadState.reachedEnd = true
+    } finally {
+      loadState.isLoading = false
+      onLoadEnd?.()
+    }
+  }
+
+  async function getNext(isInitialLoadParam = false) {
+    if (loadState.isLoading) { return }
+
+    if (isInitialLoadParam) {
+      loadState.isInitialLoad = false
+      await loadPage(1, false)
+    } else if (!loadState.reachedEnd) {
+      await loadPage(currentPage.value + 1, true)
+    }
+  }
+
+  function reset() {
+    loadState.reachedEnd = false
+    loadState.isInitialLoad = true
+    currentPage.value = 1
+  }
+
+  return {
+    loadState,
+    currentPage,
+    getNext,
+    reset,
+    loadPage
+  }
+}
+
+export interface BaseTableState<T, F extends Record<string, string> = Record<string, string>> {
+  results: T[]
+  totalResults: number
+  stateTotal: number
+  filters: {
+    isActive: boolean
+    pageNumber: number
+    pageLimit: number
+    filterPayload: F
+  }
+  loading: boolean
+}
+
+export interface UseBaseTableOptions<
+  T,
+  R,
+  S extends BaseTableState<T, Record<string, string>>
+> {
+  state: S
+  buildPayload: (filters: S['filters']) => Record<string, unknown>
+  fetchData: (payload: Record<string, unknown>) => Promise<R>
+  extractItems: (response: R) => T[]
+  extractTotal: (response: R) => number
+  extractStateTotal: (response: R) => number
+  onLoadStart?: () => void
+  onLoadEnd?: () => void
+}
+
+export function useBaseTable<
+  T,
+  R,
+  S extends BaseTableState<T, Record<string, string>> = BaseTableState<T>
+>(options: UseBaseTableOptions<T, R, S>) {
+  const { state, buildPayload, fetchData, extractItems, extractTotal, extractStateTotal, onLoadStart, 
+    onLoadEnd } = options
+
+  const { loadState, getNext, reset: resetReachedEnd, currentPage } = useInfiniteScroll<T>({
+    fetchPage: async (page, appendResults) => {
+      state.filters.pageNumber = page
+      state.filters.isActive = Object.values(state.filters.filterPayload).some(hasValue)
+
+      const payload = buildPayload(state.filters)
+      const cleanedPayload = CommonUtils.cleanObject(payload as Record<string, unknown>)
+      const response = await fetchData(cleanedPayload)
+
+      if (response) {
+        const items = extractItems(response)
+        state.results = appendResults ? [...state.results, ...items] : items
+        state.totalResults = extractTotal(response)
+        state.stateTotal = extractStateTotal(response)
+        return { items, hasMore: state.results.length < state.totalResults }
+      }
+      return { items: [], hasMore: false }
+    },
+    onLoadStart: () => {
+      state.loading = true
+      onLoadStart?.()
+    },
+    onLoadEnd: () => {
+      state.loading = false
+      onLoadEnd?.()
+    }
+  })
+
+  async function loadTableData(col?: string, val?: string | number, appendResults = false) {
+    if (loadState.isLoading) { return }
+
+    const isFilterUpdate = col && col !== 'page' && hasValue(val)
+
+    if (isFilterUpdate) {
+      state.filters.filterPayload = { ...state.filters.filterPayload, [col]: val as string }
+      state.filters.pageNumber = 1
+      appendResults = false
+      resetReachedEnd()
+    }
+
+    state.loading = true
+    onLoadStart?.()
+    loadState.isLoading = true
+
+    try {
+      state.filters.isActive = Object.values(state.filters.filterPayload).some(hasValue)
+      const payload = buildPayload(state.filters)
+      const cleanedPayload = CommonUtils.cleanObject(payload as Record<string, unknown>)
+      const response = await fetchData(cleanedPayload)
+
+      if (response) {
+        const items = extractItems(response)
+        state.results = appendResults ? [...state.results, ...items] : items
+        state.totalResults = extractTotal(response)
+        loadState.reachedEnd = state.results.length >= state.totalResults
+      }
+    } catch (error) {
+      console.error('Error loading table data:', error)
+    } finally {
+      state.loading = false
+      loadState.isLoading = false
+      onLoadEnd?.()
+    }
+  }
+
+  function updateFilter(col: string, val: string | number) {
+    state.filters.pageNumber = 1
+    resetReachedEnd()
+    loadTableData(col, val)
+  }
+
+  return {
+    loadTableData,
+    updateFilter,
+    loadState,
+    getNext,
+    resetReachedEnd,
+    currentPage
+  }
+}
+
+export function createTableApiFetcher<R>(endpoint: string) {
+  return async (payload: Record<string, unknown>): Promise<R> => {
+    const nuxtApp = useNuxtApp()
+    const $payApi = (nuxtApp.$payApiWithErrorHandling || nuxtApp.$payApi) as typeof nuxtApp.$payApi
+
+    const filteredParams = Object.fromEntries(
+      Object.entries(payload).filter(([, value]) => hasValue(value))
+    ) as Record<string, string>
+
+    const queryString = CommonUtils.createQueryParams(filteredParams)
+
+    return $payApi<R>(
+      `${endpoint}${queryString ? `?${queryString}` : ''}`,
+      { method: 'GET' }
+    )
+  }
+}
diff --git a/web/pay-ui/app/composables/common/useStatusList.ts b/web/pay-ui/app/composables/common/useStatusList.ts
index 6e55758c..18205feb 100644
--- a/web/pay-ui/app/composables/common/useStatusList.ts
+++ b/web/pay-ui/app/composables/common/useStatusList.ts
@@ -2,6 +2,7 @@ import type { Code } from '~/interfaces/code'
 import type { SelectItem } from '@nuxt/ui'
 import { ChequeRefundStatus } from '~/utils/constants'
 import ShortNameUtils from '~/utils/short-name-util'
+import { PaymentMethodSelectItems } from '~/enums'
 
 interface StatusListProps {
   value?: string
@@ -113,3 +114,22 @@ export function useShortNameTypeList() {
     mapFn
   }
 }
+
+interface PaymentMethodSelectItem {
+  text: string
+  value: string
+}
+
+// Helper to get payment methods list
+export function usePaymentMethodsList() {
+  const list = computed(() => PaymentMethodSelectItems)
+  const mapFn = (item: PaymentMethodSelectItem): SelectItem => ({
+    label: item.text,
+    value: item.value
+  })
+
+  return {
+    list,
+    mapFn
+  }
+}
diff --git a/web/pay-ui/app/composables/refund/useRefundRequestTable.ts b/web/pay-ui/app/composables/refund/useRefundRequestTable.ts
new file mode 100644
index 00000000..c7443a86
--- /dev/null
+++ b/web/pay-ui/app/composables/refund/useRefundRequestTable.ts
@@ -0,0 +1,36 @@
+import type { RefundRequestResult, RefundRequestState } from '@/interfaces/refund-requests'
+import { useLoader } from '@/composables/common/useLoader'
+import { useBaseTable, createTableApiFetcher } from '@/composables/common/useBaseTable'
+
+export function useRefundRequestTable(state: RefundRequestState) {
+  const { toggleLoading } = useLoader()
+
+  const {
+    loadTableData,
+    updateFilter,
+    loadState,
+    getNext,
+    resetReachedEnd
+  } = useBaseTable<RefundRequestResult, RefundRequestListResponse, RefundRequestState>({
+    state,
+    buildPayload: filters => ({
+      page: filters.pageNumber,
+      limit: filters.pageLimit,
+      ...filters.filterPayload
+    }),
+    fetchData: createTableApiFetcher('/refunds'),
+    extractItems: response => response.items || [],
+    extractTotal: response => response.total || 0,
+    extractStateTotal: response => response.statusTotal || 0,
+    onLoadStart: () => toggleLoading(true),
+    onLoadEnd: () => toggleLoading(false)
+  })
+
+  return {
+    loadTableData,
+    updateFilter,
+    loadState,
+    getNext,
+    resetReachedEnd
+  }
+}
diff --git a/web/pay-ui/app/composables/transactions/useTransactionView.ts b/web/pay-ui/app/composables/transactions/useTransactionView.ts
new file mode 100644
index 00000000..0bb830bc
--- /dev/null
+++ b/web/pay-ui/app/composables/transactions/useTransactionView.ts
@@ -0,0 +1,75 @@
+import CommonUtils from '@/utils/common-util'
+import { EFTRefundStatus } from '~/utils'
+
+export function useTransactionView() {
+  const nuxtApp = useNuxtApp()
+  const $payApi = (nuxtApp.$payApiWithErrorHandling || nuxtApp.$payApi) as typeof nuxtApp.$payApi
+
+  async function getInvoiceComposite(invoiceId: number): Promise<Invoice | null> {
+    const response = await $payApi<Invoice>(
+      `/payment-requests/${invoiceId}/composite`,
+      { method: 'GET' }
+    )
+    return response || null
+  }
+
+  async function getInvoiceRefundHistory(invoiceId: number): Promise<RefundRequestListResponse> {
+    const response = await $payApi<RefundRequestListResponse>(
+      `/refunds?invoiceId=${invoiceId}`,
+      { method: 'GET' }
+    )
+    return response || null
+  }
+
+  async function getRefundRequest(refundId: number): Promise<RefundRequestResult> {
+    const response = await $payApi<RefundRequestResult>(
+      `/refunds/${refundId}`,
+      { method: 'GET' }
+    )
+    return response || null
+  }
+
+  async function patchRefundRequest(invoiceId: number, refundId: number, body: never): Promise<void> {
+    await $payApi(`/payment-requests/shortname-refund/${refundId}`, {
+      method: 'PATCH',
+      body: body
+    })
+  }
+
+  async function refundInvoice(invoiceId: number, body: never): Promise<void> {
+    await $payApi(`/payment-requests/${invoiceId}/refunds`, {
+      method: 'POST',
+      body: body
+    })
+  }
+
+  async function downloadReceipt(transactionData: TransactionData): Promise<void> {
+    if (!transactionData.invoiceId) {
+      console.error('Cannot download receipt: invoiceId is missing')
+      return
+    }
+
+    const response = await $payApi<Blob>(
+      `/payment-requests/${transactionData.invoiceId}/receipts`,
+      {
+        method: 'POST',
+        body: {
+          filingDateTime: CommonUtils.formatDisplayDate(transactionData.invoiceCreatedOn)
+        },
+        responseType: 'blob'
+      }
+    )
+
+    const filename = `bcregistry-receipts-${transactionData.invoiceId}.pdf`
+    CommonUtils.fileDownload(response, filename, 'application/pdf')
+  }
+
+  return {
+    getInvoiceComposite,
+    getInvoiceRefundHistory,
+    getRefundRequest,
+    patchRefundRequest,
+    refundInvoice,
+    downloadReceipt
+  }
+}
diff --git a/web/pay-ui/app/composables/transactions/useTransactionsTable.ts b/web/pay-ui/app/composables/transactions/useTransactionsTable.ts
new file mode 100644
index 00000000..fde37ee7
--- /dev/null
+++ b/web/pay-ui/app/composables/transactions/useTransactionsTable.ts
@@ -0,0 +1,385 @@
+import type { TableColumn } from '@nuxt/ui'
+import CommonUtils from '@/utils/common-util'
+import type { TransactionFilterParams, Transaction, TransactionState } from '@/interfaces/transactions'
+import debounce from 'lodash/throttle'
+
+type ExtendedTableColumn = TableColumn<Record<string, unknown>> & {
+  display?: boolean
+  hideInSearchColumnFilter?: boolean
+  accessorKey?: string
+}
+
+export async function useTransactionsTable() {
+  const nuxtApp = useNuxtApp()
+  const $payApi = (nuxtApp.$payApiWithErrorHandling || nuxtApp.$payApi) as typeof nuxtApp.$payApi
+  const { t } = useI18n()
+  const { store } = useTransactionsStore()
+  const currentUser = CommonUtils.getUserInfo()
+  const viewAll = ref(false)
+  const transactions = (reactive({
+    filters: {
+      isActive: false,
+      filterPayload: {
+        dateFilter: {
+          startDate: '',
+          endDate: '',
+          isDefault: false
+        }
+      },
+      pageLimit: 20,
+      pageNumber: 1
+    } as TransactionFilterParams,
+    loading: false,
+    results: [] as Transaction[],
+    totalResults: 0
+  }) as unknown) as TransactionState
+
+  const loadState = reactive({
+    reachedEnd: false,
+    isLoading: false,
+    isInitialLoad: true
+  })
+
+  let requestCounter = 0
+
+  const setViewAll = (val: boolean) => {
+    if (val) {
+      // check authorized
+      if (!currentUser.roles.includes(Role.ViewAllTransactions)
+        && !currentUser.roles.includes(Role.ProductRefundViewer)) {
+        console.error('User is not authorized to view all transactions.')
+        return
+      }
+    }
+    viewAll.value = val
+  }
+
+  const loadTransactionList = debounce(async (filterField?: keyof TransactionFilter, value?: unknown) => {
+    requestCounter++
+    const currentRequestNumber = requestCounter
+    const payload = transactions.filters.filterPayload as unknown as Record<string, unknown>
+    const isPageOne = filterField || (transactions.filters.pageNumber ?? 1) <= 1
+    transactions.loading = true
+    loadState.isLoading = true
+    if (filterField) {
+      // new filter so set page number back to 1
+      transactions.filters.pageNumber = 1
+      loadState.reachedEnd = false
+      payload[filterField] = value
+    }
+    let filtersActive = false
+    for (const key in transactions.filters.filterPayload) {
+      if (key === 'dateFilter') {
+        if (transactions.filters.filterPayload[key].endDate) { filtersActive = true }
+      } else if (payload[key]) { filtersActive = true }
+      if (filtersActive) { break }
+    }
+    transactions.filters.isActive = filtersActive
+
+    try {
+      const response = await getTransactions(
+        undefined, transactions.filters, viewAll.value)
+      // Only process response if this is still the latest request
+      if (currentRequestNumber === requestCounter) {
+        if (response) {
+          const items = response.items || []
+          // Append results for pagination, replace for filter changes / initial load
+          transactions.results = isPageOne ? items : [...transactions.results, ...items]
+          loadState.reachedEnd = !response.hasMore
+          loadState.isInitialLoad = false
+        } else {
+          console.error('No response from getTransactions')
+          loadState.reachedEnd = true
+        }
+      }
+    } catch (error) {
+      if (currentRequestNumber === requestCounter) {
+        console.error('Failed to get transaction list.', error)
+        loadState.reachedEnd = true
+      }
+    }
+    transactions.loading = false
+    loadState.isLoading = false
+  }, 2000, { leading: true, trailing: true }) as (filterField?: string, value?: unknown) => Promise<void>
+
+  async function getTransactions(
+    accountId: number | undefined,
+    filterParams: TransactionFilterParams,
+    viewAll = false
+  ): Promise<TransactionListResponse> {
+    const query: Record<string, string> = {}
+    if (filterParams.pageNumber) {
+      query.page = filterParams.pageNumber.toString()
+    }
+    if (filterParams.pageLimit) {
+      query.limit = filterParams.pageLimit.toString()
+    }
+    if (viewAll) {
+      query.viewAll = `${viewAll}`
+    }
+
+    return $payApi<TransactionListResponse>(
+      `/accounts/${accountId}/payments/queries`,
+      {
+        method: 'POST',
+        body: { ...filterParams.filterPayload, excludeCounts: true },
+        query
+      }
+    )
+  }
+
+  const searchTransactionsTableHeaders = ref(
+    (store.searchTransactionsTableHeaders?.length
+      ? store.searchTransactionsTableHeaders
+      : getTransactionsTableHeaders(t))
+      .map((header) => {
+        const extHeader = header as ExtendedTableColumn
+        const savedVisibility = store.searchColumnVisibility[extHeader.accessorKey as string]
+        return {
+          ...header,
+          display: savedVisibility !== undefined ? savedVisibility : (extHeader.display ?? true)
+        }
+      }) as ExtendedTableColumn[]
+  )
+
+  const columnPinning = ref({
+    right: ['actions']
+  })
+
+  const columnVisibility = computed<Record<string, boolean>>({
+    get() {
+      const visibility: Record<string, boolean> = {}
+      ;(searchTransactionsTableHeaders.value as ExtendedTableColumn[]).forEach((item) => {
+        if (item.accessorKey) {
+          visibility[item.accessorKey] = item.display ?? true
+        }
+      })
+      return visibility
+    },
+    set(newVisibility: Record<string, boolean>) {
+      ;(searchTransactionsTableHeaders.value as ExtendedTableColumn[]).forEach((item) => {
+        if (item.accessorKey && newVisibility[item.accessorKey] !== undefined) {
+          item.display = newVisibility[item.accessorKey]
+        }
+      })
+      Object.assign(store.searchColumnVisibility, newVisibility)
+    }
+  })
+
+  async function getNext() {
+    if (loadState.isLoading || loadState.reachedEnd) { return }
+    transactions.filters.pageNumber = (transactions.filters.pageNumber ?? 1) + 1
+    await loadTransactionList()
+  }
+
+  function clearAllFilters() {
+    transactions.filters.filterPayload = {
+      dateFilter: { startDate: '', endDate: '', isDefault: false }
+    } as TransactionFilterParams['filterPayload']
+    transactions.filters.isActive = false
+    transactions.filters.pageNumber = 1
+    loadState.reachedEnd = false
+    loadState.isInitialLoad = true
+  }
+
+  return {
+    searchTransactionsTableHeaders,
+    columnPinning,
+    columnVisibility,
+    setViewAll,
+    loadTransactionList,
+    clearAllFilters,
+    getNext,
+    loadState,
+    transactions
+  }
+}
+
+export function getTransactionsTableHeaders(t: (key: string) => string) {
+  return [
+    {
+      header: t('page.transactions.search.label.accountName'),
+      align: 'start' as const,
+      accessorKey: 'accountName',
+      display: true,
+      meta: {
+        class: {
+          th: 'header-account-name'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.applicationType'),
+      align: 'start' as const,
+      sortable: false,
+      accessorKey: 'product',
+      display: false,
+      meta: {
+        class: {
+          th: 'header-application-type'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.transactionType'),
+      align: 'start' as const,
+      accessorKey: 'lineItems',
+      sortable: false,
+      display: true,
+      meta: {
+        class: {
+          th: 'header-transaction-type'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.transactionDetails'),
+      align: 'start' as const,
+      accessorKey: 'details',
+      sortable: false,
+      display: false,
+      meta: {
+        class: {
+          th: 'header-transaction-details'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.businessIdentifier'),
+      align: 'start' as const,
+      sortable: false,
+      accessorKey: 'businessIdentifier',
+      display: false,
+      meta: {
+        class: {
+          th: 'header-business-identifier'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.folioNumber'),
+      align: 'start' as const,
+      sortable: false,
+      accessorKey: 'folioNumber',
+      display: false,
+      meta: {
+        class: {
+          th: 'header-folio-number'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.createdName'),
+      align: 'start' as const,
+      sortable: false,
+      accessorKey: 'createdName',
+      display: false,
+      meta: {
+        class: {
+          th: 'header-created-name'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.createdOn'),
+      align: 'start' as const,
+      accessorKey: 'createdOn',
+      sortable: false,
+      display: true,
+      meta: {
+        class: {
+          th: 'header-created-on'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.total'),
+      align: 'start' as const,
+      accessorKey: 'total',
+      sortable: false,
+      display: true,
+      meta: {
+        class: {
+          th: 'header-total'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.transactionId'),
+      align: 'right' as const,
+      accessorKey: 'id',
+      sortable: false,
+      display: false,
+      meta: {
+        class: {
+          th: 'header-transaction-id'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.invoiceNumber'),
+      align: 'start' as const,
+      accessorKey: 'invoiceNumber',
+      sortable: false,
+      display: false,
+      hideInSearchColumnFilter: false,
+      meta: {
+        class: {
+          th: 'header-invoice-number'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.paymentMethod'),
+      align: 'start' as const,
+      accessorKey: 'paymentMethod',
+      sortable: false,
+      display: true,
+      hideInSearchColumnFilter: false,
+      meta: {
+        class: {
+          th: 'header-payment-method'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.paymentStatus'),
+      align: 'start' as const,
+      accessorKey: 'statusCode',
+      sortable: false,
+      display: true,
+      hideInSearchColumnFilter: false,
+      meta: {
+        class: {
+          th: 'header-payment-status'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.downloads'),
+      align: 'start' as const,
+      accessorKey: 'downloads',
+      sortable: false,
+      display: true,
+      hideInSearchColumnFilter: false,
+      meta: {
+        class: {
+          th: 'header-downloads'
+        }
+      }
+    },
+    {
+      header: t('page.transactions.search.label.actions'),
+      align: 'start' as const,
+      accessorKey: 'actions',
+      sortable: false,
+      display: true,
+      hideInSearchColumnFilter: true,
+      meta: {
+        class: {
+          th: 'header-action'
+        }
+      }
+    }
+  ]
+}
diff --git a/web/pay-ui/app/enums/fas-roles.ts b/web/pay-ui/app/enums/fas-roles.ts
index 9e348831..73985709 100644
--- a/web/pay-ui/app/enums/fas-roles.ts
+++ b/web/pay-ui/app/enums/fas-roles.ts
@@ -15,5 +15,14 @@ export enum Role {
   EftRefund = 'eft_refund',
   EftRefundApprover = 'eft_refund_approver',
   CreateCredits = 'create_credits',
-  ViewAllTransactions = 'view_all_transactions'
+  ViewAllTransactions = 'view_all_transactions',
+  ProductRefundViewer = 'product_refund_viewer',
+  ProductRefundRequester = 'product_refund_requester',
+  ProductRefundApprover = 'product_refund_approver'
+}
+
+export enum RolePattern {
+  ProductViewTransaction = '_view_transactions',
+  ProductRefundRequester = '_refund_requester',
+  ProductRefundApprover = '_refund_approver'
 }
diff --git a/web/pay-ui/app/enums/payment-types.ts b/web/pay-ui/app/enums/payment-types.ts
index 7eb5c0ee..fe583805 100644
--- a/web/pay-ui/app/enums/payment-types.ts
+++ b/web/pay-ui/app/enums/payment-types.ts
@@ -13,3 +13,34 @@ export enum PaymentTypes {
   WIRE = 'WIRE',
   CREDIT = 'CREDIT'
 }
+
+export const paymentTypeDisplay = {
+  [PaymentTypes.BCOL]: 'BC OnLine',
+  [PaymentTypes.CASH]: 'Cash',
+  [PaymentTypes.CHEQUE]: 'Cheque',
+  [PaymentTypes.CREDIT_CARD]: 'Credit Card',
+  [PaymentTypes.DIRECT_PAY]: 'Credit Card',
+  [PaymentTypes.EFT]: 'Electronic Funds Transfer',
+  [PaymentTypes.EJV]: 'Electronic Journal Voucher',
+  [PaymentTypes.INTERNAL]: 'Routing Slip',
+  [PaymentTypes.NO_FEE]: 'No Fee',
+  [PaymentTypes.ONLINE_BANKING]: 'Online Banking',
+  [PaymentTypes.PAD]: 'Pre-Authorized Debit',
+  [PaymentTypes.CREDIT]: 'Account Credit'
+}
+
+export const getPaymentTypeDisplayName = (paymentType: string): string => {
+  return paymentTypeDisplay[paymentType as PaymentTypes] || paymentType
+}
+
+export const PaymentMethodSelectItems = [
+  { text: paymentTypeDisplay[PaymentTypes.BCOL], value: PaymentTypes.BCOL },
+  { text: paymentTypeDisplay[PaymentTypes.CREDIT_CARD], value: PaymentTypes.CREDIT_CARD },
+  { text: paymentTypeDisplay[PaymentTypes.EFT], value: PaymentTypes.EFT },
+  { text: paymentTypeDisplay[PaymentTypes.EJV], value: PaymentTypes.EJV },
+  { text: paymentTypeDisplay[PaymentTypes.ONLINE_BANKING], value: PaymentTypes.ONLINE_BANKING },
+  { text: paymentTypeDisplay[PaymentTypes.PAD], value: PaymentTypes.PAD },
+  { text: paymentTypeDisplay[PaymentTypes.CREDIT], value: PaymentTypes.CREDIT },
+  { text: paymentTypeDisplay[PaymentTypes.INTERNAL], value: PaymentTypes.INTERNAL },
+  { text: paymentTypeDisplay[PaymentTypes.NO_FEE], value: PaymentTypes.NO_FEE }
+]
diff --git a/web/pay-ui/app/interfaces/invoice.ts b/web/pay-ui/app/interfaces/invoice.ts
index 6acd3150..100725af 100644
--- a/web/pay-ui/app/interfaces/invoice.ts
+++ b/web/pay-ui/app/interfaces/invoice.ts
@@ -36,6 +36,11 @@ export interface Invoice {
   statusCode?: string
   total?: number
   details?: Detail[]
+  latestRefundId?: number
+  latestRefundStatus?: string
+  partialRefundable?: boolean
+  fullRefundable?: boolean
+  product?: string
 }
 
 // For displaying transaction data table
diff --git a/web/pay-ui/app/interfaces/refund-requests.ts b/web/pay-ui/app/interfaces/refund-requests.ts
new file mode 100644
index 00000000..735827b8
--- /dev/null
+++ b/web/pay-ui/app/interfaces/refund-requests.ts
@@ -0,0 +1,84 @@
+export interface RefundRequestFilterPayload {
+  invoiceId: string
+  refundStatus: string
+  requestedBy: string
+  requestedStartDate: string
+  requestedEndDate: string
+  refundReason: string
+  transactionAmount: string
+  refundAmount: string
+  paymentMethod: string
+  refundMethod: string
+}
+
+export interface RefundRequestFilterParams {
+  isActive: boolean
+  pageNumber: number
+  pageLimit: number
+  filterPayload: RefundRequestFilterPayload
+}
+
+export interface PartialRefundLine {
+  paymentLineItemId: number
+  description?: string
+  statutoryFeeAmount: number
+  futureEffectiveFeeAmount: number
+  priorityFeeAmount: number
+  serviceFeeAmount: number
+}
+
+export interface RefundRequestResult {
+  invoiceId: number | null
+  refundId: number | null
+  refundStatus: string | null
+  refundType: string | null
+  refundMethod: string | null
+  notificationEmail: string | null
+  refundReason: string | null
+  staffComment: string | null
+  requestedBy: string | null
+  requestedDate: string | null
+  declineReason: string | null
+  decisionBy: string | null
+  decisionDate: string | null
+  refundAmount: number | null
+  transactionAmount: number | null
+  paymentMethod: string | null
+  partialRefundLines: PartialRefundLine[]
+}
+
+export interface RefundRequestListResponse {
+  items: RefundRequestResult[]
+  limit: number
+  page: number
+  total: number
+  statusTotal: number
+}
+
+export interface RefundRequestState {
+  results: RefundRequestResult[]
+  totalResults: number
+  stateTotal: number
+  loading: boolean
+  filters: RefundRequestFilterParams
+  actionDropdown: boolean[]
+  options: Record<string, unknown>
+  clearFiltersTrigger: number
+  showDatePicker: boolean
+  dateRangeSelected: boolean
+  dateRangeText: string
+  dateRangeReset: number
+  startDate: string
+  endDate: string
+}
+
+export interface RefundRequestsTableSettings {
+  filterPayload: RefundRequestFilterPayload | null
+  pageNumber: number
+}
+
+export interface RefundRevenueType {
+  paymentLineItemId: number
+  refundAmount: number
+  refundType: string
+}
diff --git a/web/pay-ui/app/interfaces/transaction-view.ts b/web/pay-ui/app/interfaces/transaction-view.ts
new file mode 100644
index 00000000..4ffa8309
--- /dev/null
+++ b/web/pay-ui/app/interfaces/transaction-view.ts
@@ -0,0 +1,109 @@
+export interface PaymentData {
+  accountName?: string | null
+  folioNumber?: string | null
+  initiatedBy?: string | null
+  paymentMethod?: string | null
+  paymentStatus?: string | null
+  totalTransactionAmount: number
+}
+
+export interface TransactionData {
+  invoiceId: number | null | undefined
+  transactionDate: string | null | undefined
+  invoiceReferenceId: string | null | undefined
+  invoiceStatusCode: string | null | undefined
+  invoiceCreatedOn: string | null | undefined
+  transactionAmount: number
+  applicationName: string | null | undefined
+  applicationType: string | null | undefined
+  businessIdentifier: string | null | undefined
+  applicationDetails: Detail[] | null | undefined
+  routingSlip: string | null | undefined
+  latestRefundId: number | null | undefined
+  latestRefundStatus: string | null | undefined
+  partialRefundable: boolean | undefined
+  fullRefundable: boolean | undefined
+}
+
+export interface NormalizedPartialRefundLine {
+  paymentLineItemId: number | null
+  statutoryFeeAmount: number | null
+  futureEffectiveFeeAmount: number | null
+  priorityFeeAmount: number | null
+  serviceFeeAmount: number | null
+}
+
+export interface RefundRequest {
+  invoiceId: number | null
+  refundId: number | null
+  refundStatus: string | null
+  refundType: string | null
+  refundMethod: string | null
+  notificationEmail: string | null
+  refundReason: string | null
+  staffComment: string | null
+  requestedBy: string | null
+  requestedDate: string | null
+  declineReason: string | null
+  decisionBy: string | null
+  decisionDate: string | null
+  refundAmount: number | null
+  transactionAmount: number | null
+  paymentMethod: string | null
+  partialRefundLines: NormalizedPartialRefundLine[] | null
+}
+
+export enum RefundType {
+  FULL_REFUND = 'Full Refund',
+  PARTIAL_REFUND = 'Partial Refund'
+}
+
+export interface RefundLineItem {
+  id: number | null
+  description: string | null
+  filingFees?: number | null
+  serviceFees?: number | null
+  priorityFees?: number | null
+  total?: number | null
+  futureEffectiveFees?: number | null
+  filingFeesRequested?: number | string | null
+  serviceFeesRequested?: number | string | null
+  priorityFeesRequested?: number | string | null
+  futureEffectiveFeesRequested?: number | string | null
+  refundEntireItemRequested?: boolean | null
+}
+
+export interface RefundFormData {
+  refundType: RefundType | null
+  refundLineItems: RefundLineItem[] | null
+  totalRefundAmount: number | null
+  refundMethod: string | null
+  notificationEmail: string | null
+  reasonsForRefund: string | null
+  staffComment: string | null
+  requestedBy: string | null
+  requestedTime: string | null
+  decisionBy: string | null
+  decisionTime: string | null
+}
+
+export enum RefundRequestStage {
+  REQUEST_FORM = 'Request Form',
+  DATA_VALIDATED = 'DATA Validated'
+}
+
+export interface TransactionViewState {
+  dataLoading: number
+  paymentData: PaymentData
+  transactionData: TransactionData
+  refundHistoryData: []
+  refundRequestData: RefundRequestResult
+  refundFormData: RefundFormData
+  refundLineItems: RefundLineItem[]
+  refundFormStage: RefundRequestStage
+  refundMethods: []
+  previousRefundedAmount: number
+  isProcessing: boolean
+  invoicePaymentMethod: string | null
+  invoiceProduct: string | null
+}
diff --git a/web/pay-ui/app/interfaces/transactions.ts b/web/pay-ui/app/interfaces/transactions.ts
new file mode 100644
index 00000000..02e0e06a
--- /dev/null
+++ b/web/pay-ui/app/interfaces/transactions.ts
@@ -0,0 +1,89 @@
+export interface TransactionFilter {
+  accountName: string | null
+  businessIdentifier: string | null
+  createdBy: string | null
+  createdName: string | null
+  dateFilter: { startDate: string | null, endDate: string | null, isDefault: boolean }
+  details: string | null
+  folioNumber: string | null
+  id: string | null
+  invoiceNumber: string | null
+  lineItems: string | null
+  lineItemsAndDetails: string | null
+  paymentMethod: string | null
+  product: string | null
+  statusCode: string | null
+  excludeCount: boolean | null
+}
+
+export interface AppliedCredit {
+  id: number
+  amountApplied: number
+  cfsIdentifier: string
+  createdOn: Date
+  creditId: number
+  invoiceAmount: number
+  invoiceNumber: string
+}
+
+export interface PartialRefund {
+  id: number
+  createdName: string
+  createdBy: string
+  paymentLineItemId: number
+  refundType: string
+  refundAmount: number
+  createdOn: Date
+  isCredit: boolean
+}
+
+export interface Transaction {
+  businessIdentifier: string
+  createdName: string
+  createdOn: string
+  details: { label: string, value: string }[] | null
+  folioNumber: string
+  id: number
+  invoiceNumber: string
+  lineItems: LineItem[]
+  paid: number
+  paymentAccount: {
+    accountId: string
+    accountName: string
+    billable: boolean
+  }
+  paymentMethod: PaymentTypes
+  product: Product
+  refund: number
+  statusCode: InvoiceStatus
+  total: number
+  updatedOn: string
+  refundDate: string | null
+  appliedCredits: AppliedCredit[] | null
+  partialRefunds: PartialRefund[] | null
+  partialRefundable: boolean | null
+  fullRefundable: boolean | null
+  latestRefundId: number | null
+  latestRefundStatus: string | null
+}
+
+export interface TransactionFilterParams {
+  isActive: boolean
+  filterPayload: TransactionFilter
+  pageNumber: number | null
+  pageLimit: number | null
+}
+
+export interface TransactionListResponse {
+  items: Transaction[]
+  limit: number
+  page: number
+  hasMore: boolean
+}
+
+export interface TransactionState {
+  filters: TransactionFilterParams
+  loading: boolean
+  results: Transaction[]
+  totalResults: number
+}
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/InvoiceRefundHistory.vue b/web/pay-ui/app/pages/transaction-view/[id]/InvoiceRefundHistory.vue
new file mode 100644
index 00000000..64f507c4
--- /dev/null
+++ b/web/pay-ui/app/pages/transaction-view/[id]/InvoiceRefundHistory.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import CommonUtils from '@/utils/common-util'
+import { RefundApprovalStatus } from '@/utils/constants'
+
+// Define the interface for refund history items
+interface RefundHistoryItem {
+  codeRefundId: number
+  invoiceId: number
+  refundId: number
+  requestedDate: string
+  refundMethod: string
+  refundStatus: string
+  refundAmount: number
+  partialRefundLines: unknown[]
+}
+
+interface Props {
+  refundHistoryData: RefundHistoryItem[]
+}
+
+const props = defineProps<Props>()
+const router = useRouter()
+
+const headers = [
+  { accessorKey: 'requestedDate', header: 'Date' },
+  { accessorKey: 'refundMethod', header: 'Refund Method' },
+  { accessorKey: 'refundAmount', header: 'Refund Amount' },
+  { accessorKey: 'actions', header: 'Actions' }
+]
+
+function viewDetails(index: number) {
+  const item = props.refundHistoryData[index]
+  if (item?.invoiceId && item?.refundId) {
+    router.push({
+      path: `/transaction-view/${item.invoiceId}/refund-request/${item.refundId}`
+    })
+  }
+}
+
+function getStatusConfig(item: RefundHistoryItem) {
+  if (item.refundStatus === RefundApprovalStatus.PENDING_APPROVAL) {
+    return { label: 'REFUND REQUESTED', color: 'neutral' as const,
+      classes: '!bg-gray-200 !text-gray-700' }
+  }
+  if (item.refundStatus === RefundApprovalStatus.APPROVED && item.partialRefundLines?.length > 0) {
+    return { label: 'PARTIALLY REFUNDED', color: 'primary' as const }
+  }
+  if (item.refundStatus === RefundApprovalStatus.APPROVED) {
+    return { label: 'FULL REFUND APPROVED', color: 'primary' as const }
+  }
+  if (item.refundStatus === RefundApprovalStatus.DECLINED) {
+    return { label: 'REFUND DECLINED', color: 'red' as const }
+  }
+  return null
+}
+</script>
+
+<template>
+  <div class="bg-white rounded shadow-sm border border-gray-200">
+    <div class="flex items-center h-[75px] px-6 bg-blue-50">
+      <UIcon name="i-mdi-format-list-bulleted" class="text-primary text-3xl mr-3" />
+      <span class="font-bold text-lg">Refund History</span>
+    </div>
+
+    <div class="mt-2">
+      <UTable
+        :data="refundHistoryData"
+        :columns="headers"
+      >
+        <template #requestedDate-cell="{ row }">
+          {{ CommonUtils.formatDisplayDate(row.original.requestedDate, 'MMMM dd, yyyy h:mm a') }}
+        </template>
+
+        <template #refundMethod-cell="{ row }">
+          <div class="space-y-2">
+            <div>{{ row.original.refundMethod }}</div>
+            <UBadge
+              v-if="getStatusConfig(row.original)"
+              :color="getStatusConfig(row.original)?.color"
+              :class="getStatusConfig(row.original)?.classes"
+              variant="solid"
+              size="md"
+            >
+              {{ getStatusConfig(row.original)?.label }}
+            </UBadge>
+          </div>
+        </template>
+
+        <!-- Refund Amount Column -->
+        <template #refundAmount-cell="{ row }">
+          {{ CommonUtils.formatAmount(row.original.refundAmount) }}
+        </template>
+
+        <!-- Actions Column -->
+        <template #actions-cell="{ row }">
+          <UButton
+            label="View Details"
+            color="primary"
+            size="sm"
+            class="min-w-[150px]"
+            @click="viewDetails(refundHistoryData.indexOf(row.original))"
+          />
+        </template>
+      </UTable>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@use '~/assets/scss/basic-table.scss';
+
+.text-primary {
+  color: var(--color-primary);
+}
+
+:deep(td) {
+  color: var(--color-text-secondary);
+}
+</style>
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/PaymentDetails.vue b/web/pay-ui/app/pages/transaction-view/[id]/PaymentDetails.vue
new file mode 100644
index 00000000..305d9452
--- /dev/null
+++ b/web/pay-ui/app/pages/transaction-view/[id]/PaymentDetails.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import CommonUtils from '@/utils/common-util'
+import type { PaymentData } from '@/interfaces/transaction-view'
+import { getPaymentTypeDisplayName } from '@/enums/payment-types'
+
+interface Props {
+  paymentData: PaymentData
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="bg-white rounded shadow-sm border border-gray-200">
+    <div class="flex items-center h-[75px] px-6 bg-blue-50">
+      <UIcon name="i-mdi-file-document" class="text-primary text-3xl mr-3" />
+      <span class="font-bold text-lg">Payment Details</span>
+    </div>
+
+    <div class="p-6 space-y-4">
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Account Name</span>
+        <span class="sm:col-span-3">{{ props.paymentData.accountName }}</span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Folio Number</span>
+        <span class="sm:col-span-3">{{ props.paymentData.folioNumber }}</span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Initiated By</span>
+        <span class="sm:col-span-3">{{ props.paymentData.initiatedBy }}</span>
+      </div>
+
+      <hr class="my-6 border-gray-200">
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Payment Info</span>
+        <div class="sm:col-span-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div>
+            <div class="font-bold text-gray-900">
+              Payment Method
+            </div>
+            <div class="mt-2 mb-3">
+              {{ getPaymentTypeDisplayName(props.paymentData.paymentMethod ?? '') }}
+            </div>
+          </div>
+          <div>
+            <div class="font-bold text-gray-900">
+              Status
+            </div>
+            <div class="mt-2 mb-3">
+              {{ getInvoiceStatusDisplayName(props.paymentData.paymentStatus ?? '') }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <hr class="my-6 border-gray-200">
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Total Amount</span>
+        <span class="sm:col-span-3">
+          {{ CommonUtils.formatAmount(Number(props.paymentData.totalTransactionAmount)) }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/RefundDecisionForm.vue b/web/pay-ui/app/pages/transaction-view/[id]/RefundDecisionForm.vue
new file mode 100644
index 00000000..00a9589f
--- /dev/null
+++ b/web/pay-ui/app/pages/transaction-view/[id]/RefundDecisionForm.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import CommonUtils from '@/utils/common-util'
+import { RefundApprovalStatus } from '@/utils/constants'
+import { RolePattern } from '@/enums/fas-roles'
+
+interface Props {
+  refundRequestData: RefundRequestResult
+  invoiceProduct?: string | null
+  isProcessing: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  invoiceProduct: null
+})
+
+const emit = defineEmits<{
+  onCancel: []
+  onApproveRefund: []
+  onDeclineRefund: [reason: string]
+}>()
+
+const declineReason = ref('')
+const showDeclineDialog = ref(false)
+
+const isDeclineReasonValid = computed(() => {
+  return declineReason.value.trim().length > 0
+})
+
+function canApproveOrDeclineRefund(): boolean {
+  if (props.invoiceProduct) {
+    return CommonUtils.canApproveDeclineProductRefund(props.invoiceProduct.toLowerCase() +
+      RolePattern.ProductRefundApprover)
+  }
+  return false
+}
+
+function showDecisionActions(): boolean {
+  const currentUser = CommonUtils.getUserInfo()
+  const sameUser = props.refundRequestData.requestedBy?.toUpperCase() === currentUser?.userName?.toUpperCase()
+  return props.refundRequestData.refundStatus === RefundApprovalStatus.PENDING_APPROVAL && !sameUser
+}
+
+function getRefundStatusText(): string {
+  switch (props.refundRequestData.refundStatus) {
+    case RefundApprovalStatus.APPROVED:
+      return props.refundRequestData.partialRefundLines?.length > 0
+        ? 'PARTIALLY REFUNDED'
+        : 'FULL REFUND'
+    case RefundApprovalStatus.DECLINED:
+      return 'REQUEST DECLINED'
+    case RefundApprovalStatus.PENDING_APPROVAL:
+      return 'PENDING APPROVAL'
+    case RefundApprovalStatus.APPROVAL_NOT_REQUIRED:
+      return 'APPROVAL NOT REQUIRED'
+    default:
+      return ''
+  }
+}
+
+function getLineItemDisplayText(lineItem: PartialRefundLine): string {
+  const totalAmount = lineItem.statutoryFeeAmount + lineItem.serviceFeeAmount
+    + lineItem.priorityFeeAmount + lineItem.futureEffectiveFeeAmount
+  return `${lineItem.description ?? ''} (${CommonUtils.formatAmount(totalAmount)})`
+}
+
+function openDeclineDialog() {
+  declineReason.value = ''
+  showDeclineDialog.value = true
+}
+
+function declineConfirm() {
+  emit('onDeclineRefund', declineReason.value)
+  showDeclineDialog.value = false
+}
+</script>
+
+<template>
+  <div class="bg-white rounded shadow-sm border border-gray-200">
+    <div class="flex items-center h-[75px] px-6 bg-blue-50">
+      <UIcon name="i-mdi-file-document" class="text-primary text-3xl mr-3" />
+      <span class="font-bold text-lg">Refund Request</span>
+    </div>
+
+    <div class="p-6 space-y-4">
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Request Date</span>
+        <span class="sm:col-span-3">
+          {{ CommonUtils.formatDisplayDate(refundRequestData.requestedDate, 'MMMM dd, yyyy h:mm a') }}
+        </span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Refund Type</span>
+        <span class="sm:col-span-3">
+          {{ refundRequestData.partialRefundLines?.length > 0 ? 'Partial Refund' : 'Full Refund' }}
+        </span>
+      </div>
+
+      <div
+        v-if="refundRequestData.partialRefundLines?.length > 0"
+        class="grid grid-cols-1 sm:grid-cols-4 gap-2"
+      >
+        <span class="font-bold text-gray-900">Refund Details</span>
+        <div class="sm:col-span-3">
+          <ol class="list-decimal pl-5">
+            <li
+              v-for="(lineItem, index) in refundRequestData.partialRefundLines"
+              :key="index"
+              class="pb-4"
+            >
+              <div>{{ getLineItemDisplayText(lineItem) }}</div>
+              <div>
+                <div
+                  v-for="fee in [
+                    { label: 'Filing Fees', value: Number(lineItem.statutoryFeeAmount) || 0 },
+                    { label: 'Service Fees', value: Number(lineItem.serviceFeeAmount) || 0 },
+                    { label: 'Priority Fees', value: Number(lineItem.priorityFeeAmount) || 0 },
+                    { label: 'Future Effective Fees', value: Number(lineItem.futureEffectiveFeeAmount) || 0 }
+                  ].filter(f => f.value > 0)"
+                  :key="fee.label"
+                  class="pt-3"
+                >
+                  {{ fee.label }}: {{ CommonUtils.formatAmount(fee.value) }}
+                </div>
+              </div>
+            </li>
+          </ol>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Total Refund Amount</span>
+        <span class="sm:col-span-3">
+          {{ CommonUtils.formatAmount(Number(refundRequestData.refundAmount)) }}
+        </span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Refund Method</span>
+        <span class="sm:col-span-3">{{ refundRequestData.refundMethod }}</span>
+      </div>
+
+      <hr class="my-6 border-gray-200">
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Notification Email</span>
+        <span class="sm:col-span-3">{{ refundRequestData.notificationEmail }}</span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Reason for Refund</span>
+        <span class="sm:col-span-3">{{ refundRequestData.refundReason }}</span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Staff Comment</span>
+        <span class="sm:col-span-3">{{ refundRequestData.staffComment }}</span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Requested By</span>
+        <span class="sm:col-span-3">
+          {{ refundRequestData.requestedBy }},
+          {{ CommonUtils.formatDisplayDate(
+            refundRequestData.requestedDate, 'MMMM dd, yyyy h:mm a'
+          ) }} Pacific Time
+        </span>
+      </div>
+
+      <div
+        v-if="refundRequestData.refundStatus === RefundApprovalStatus.APPROVED
+          || refundRequestData.refundStatus === RefundApprovalStatus.DECLINED"
+        class="grid grid-cols-1 sm:grid-cols-4 gap-2"
+      >
+        <span class="font-bold text-gray-900">
+          {{
+            refundRequestData.refundStatus === RefundApprovalStatus.APPROVED
+              ? 'Approved By' : 'Declined By'
+          }}
+        </span>
+        <span class="sm:col-span-3">
+          {{ refundRequestData.decisionBy }},
+          {{ CommonUtils.formatDisplayDate(
+            refundRequestData.decisionDate, 'MMMM dd, yyyy h:mm a'
+          ) }} Pacific Time
+        </span>
+      </div>
+
+      <div
+        v-if="refundRequestData.refundStatus === RefundApprovalStatus.DECLINED"
+        class="grid grid-cols-1 sm:grid-cols-4 gap-2"
+      >
+        <span class="font-bold text-gray-900">Reasons for Declining</span>
+        <span class="sm:col-span-3">{{ refundRequestData.declineReason }}</span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Refund Status</span>
+        <div class="sm:col-span-3">
+          <UBadge
+            color="primary"
+            variant="solid"
+            size="md"
+          >
+            {{ getRefundStatusText() }}
+          </UBadge>
+        </div>
+      </div>
+
+      <template v-if="canApproveOrDeclineRefund() && showDecisionActions()">
+        <hr class="my-6 border-gray-200">
+        <div class="flex justify-between flex-wrap gap-2">
+          <UButton
+            label="Cancel"
+            variant="outline"
+            color="primary"
+            size="lg"
+            @click="emit('onCancel')"
+          />
+          <div class="flex gap-2">
+            <UButton
+              variant="outline"
+              color="primary"
+              size="lg"
+              :disabled="isProcessing"
+              @click="openDeclineDialog()"
+            >
+              <template #leading>
+                <UIcon name="i-mdi-close" />
+              </template>
+              <span v-if="!isProcessing">Decline</span>
+              <UIcon
+                v-else
+                name="i-mdi-loading"
+                class="animate-spin"
+              />
+            </UButton>
+            <UButton
+              color="primary"
+              size="lg"
+              :disabled="isProcessing"
+              @click="emit('onApproveRefund')"
+            >
+              <template #leading>
+                <UIcon name="i-mdi-check" />
+              </template>
+              <span v-if="!isProcessing">Approve</span>
+              <UIcon
+                v-else
+                name="i-mdi-loading"
+                class="animate-spin"
+              />
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <UModal
+      v-model:open="showDeclineDialog"
+      :ui="{ content: 'sm:max-w-[720px] sm:w-[720px]' }"
+    >
+      <template #header>
+        <div class="flex items-center justify-between w-full pr-2">
+          <h2 class="text-xl font-bold text-gray-900">
+            Decline Refund Request?
+          </h2>
+          <UButton
+            icon="i-mdi-close"
+            color="neutral"
+            variant="ghost"
+            size="lg"
+            @click.stop="showDeclineDialog = false"
+          />
+        </div>
+      </template>
+
+      <template #body>
+        <p class="pt-4 pb-4">
+          By declining the request, an email will be sent to the requestor including the reason entered below:
+        </p>
+        <UInput
+          v-model="declineReason"
+          placeholder="Reasons for declining"
+          size="lg"
+          class="w-full"
+        />
+      </template>
+
+      <template #footer>
+        <div class="flex items-center justify-center gap-3 w-full py-2">
+          <UButton
+            label="Cancel"
+            variant="outline"
+            color="primary"
+            size="lg"
+            @click.stop="showDeclineDialog = false"
+          />
+          <UButton
+            label="Decline"
+            color="primary"
+            size="lg"
+            :disabled="!isDeclineReasonValid"
+            @click="declineConfirm"
+          />
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<style scoped>
+.text-primary {
+  color: var(--color-primary);
+}
+</style>
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/RefundRequestForm.vue b/web/pay-ui/app/pages/transaction-view/[id]/RefundRequestForm.vue
new file mode 100644
index 00000000..99663bc9
--- /dev/null
+++ b/web/pay-ui/app/pages/transaction-view/[id]/RefundRequestForm.vue
@@ -0,0 +1,436 @@
+<script setup lang="ts">
+import CommonUtils from '@/utils/common-util'
+import { RefundType } from '@/interfaces/transaction-view'
+import type { RefundFormData, RefundLineItem } from '@/interfaces/transaction-view'
+import { DateTime } from 'luxon'
+import { PaymentTypeToRefundMethodMap } from '~/utils'
+
+interface Props {
+  totalTransactionAmount: number
+  refundLineItems: RefundLineItem[]
+  previousRefundedAmount: number
+  isPartialRefundAllowed?: boolean
+  isFullRefundAllowed?: boolean
+  invoicePaymentMethod?: string | null
+  refundMethod?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isPartialRefundAllowed: false,
+  isFullRefundAllowed: false,
+  invoicePaymentMethod: null,
+  refundMethod: null
+})
+
+const emit = defineEmits<{
+  onCancel: []
+  onProceedToReview: [data: RefundFormData]
+}>()
+
+const refundFormData = reactive<RefundFormData>({
+  refundType: null,
+  refundLineItems: [],
+  totalRefundAmount: 0,
+  refundMethod: null,
+  notificationEmail: null,
+  reasonsForRefund: null,
+  staffComment: null,
+  requestedBy: null,
+  requestedTime: null,
+  decisionBy: null,
+  decisionTime: null
+})
+
+const isFormValid = ref(false)
+const refundTypeError = ref('')
+const notificationEmailError = ref('')
+const reasonsForRefundError = ref('')
+
+const formDisabled = computed(() => {
+  return props.previousRefundedAmount > 0 || (!props.isFullRefundAllowed && !props.isPartialRefundAllowed)
+})
+
+const refundTypeHint = computed(() => {
+  return props.isPartialRefundAllowed
+    ? ''
+    : `Partial Refunds not supported for payment method ${props.invoicePaymentMethod} invoices or is not paid.`
+})
+
+function getRequestedAmountRules(max?: number | null) {
+  return [
+    (v: number | string | null | undefined) => {
+      return v == null || v === '' || !isNaN(Number(v)) ? true : 'Enter a valid number'
+    },
+    (v: number | string | null | undefined) => {
+      return v == null || v === '' || Number(v) >= 0 ? true : 'Refund amount cannot be negative'
+    },
+    (v: number | string | null | undefined) => v == null || v === '' || max == null || Number(v) <= Number(max)
+      ? true
+      : `Refund amount exceeds ${CommonUtils.formatAmount(Number(max))}`
+  ]
+}
+
+function getValidNumber(amount: number, maxAmount: number | null | undefined): number {
+  return amount < 0 || (maxAmount != null && amount > maxAmount) ? 0 : amount
+}
+
+function calculateTotalRequestedAmount() {
+  let total = 0
+  if (refundFormData.refundType === RefundType.FULL_REFUND) {
+    total = props.totalTransactionAmount
+  } else {
+    refundFormData.refundLineItems?.forEach((item) => {
+      total += getValidNumber(Number(item.filingFeesRequested) || 0, item.filingFees ?? null)
+      total += getValidNumber(Number(item.serviceFeesRequested) || 0, item.serviceFees ?? null)
+      total += getValidNumber(Number(item.priorityFeesRequested) || 0, item.priorityFees ?? null)
+      total += getValidNumber(Number(item.futureEffectiveFeesRequested) || 0, item.futureEffectiveFees ?? null)
+    })
+  }
+  refundFormData.totalRefundAmount = total
+}
+
+watch(() => props.refundLineItems, (newData) => {
+  refundFormData.refundLineItems = JSON.parse(JSON.stringify(newData))
+}, { immediate: true, deep: true })
+
+watch(() => props.invoicePaymentMethod, (newData) => {
+  if (newData) {
+    refundFormData.refundMethod = PaymentTypeToRefundMethodMap[newData as keyof typeof PaymentTypeToRefundMethodMap]
+  }
+}, { immediate: true })
+
+function onRefundEntireItemRequestedChange(value: boolean, index: number) {
+  if (value && refundFormData.refundLineItems) {
+    const lineItem = refundFormData.refundLineItems[index]
+    if (lineItem) {
+      lineItem.filingFeesRequested = CommonUtils.formatToTwoDecimals(Number(lineItem.filingFees))
+      lineItem.serviceFeesRequested = null
+      lineItem.priorityFeesRequested = CommonUtils.formatToTwoDecimals(Number(lineItem.priorityFees))
+      lineItem.futureEffectiveFeesRequested = CommonUtils.formatToTwoDecimals(Number(lineItem.futureEffectiveFees))  
+    }
+  }
+  calculateTotalRequestedAmount()
+}
+
+async function onRefundTypeChange() {
+  await nextTick()
+  calculateTotalRequestedAmount()
+}
+
+function validateForm(): boolean {
+  let valid = true
+
+  if (!refundFormData.refundType) {
+    refundTypeError.value = 'Refund Type is required'
+    valid = false
+  } else {
+    refundTypeError.value = ''
+  }
+
+  const emailRules = CommonUtils.emailRules(true)
+  for (const rule of emailRules) {
+    const result = rule(refundFormData.notificationEmail)
+    if (result !== true) {
+      notificationEmailError.value = result as string
+      valid = false
+      break
+    } else {
+      notificationEmailError.value = ''
+    }
+  }
+
+  if (!refundFormData.reasonsForRefund) {
+    reasonsForRefundError.value = 'Reasons for Refund is required'
+    valid = false
+  } else {
+    reasonsForRefundError.value = ''
+  }
+
+  isFormValid.value = valid
+  return valid
+}
+
+function getAmountValidationError(value: number | string | null | undefined, max?: number | null): string {
+  const rules = getRequestedAmountRules(max)
+  for (const rule of rules) {
+    const result = rule(value)
+    if (result !== true) {
+      return result as string
+    }
+  }
+  return ''
+}
+
+function onReviewBtnClick() {
+  if (!validateForm()) {
+    return
+  }
+  calculateTotalRequestedAmount()
+
+  const currentUser = CommonUtils.getUserInfo()
+  refundFormData.requestedBy = currentUser?.fullName ?? null
+  refundFormData.requestedTime = DateTime.now().toISO()
+  emit('onProceedToReview', { ...refundFormData })
+}
+
+// Sync refundLineItems prop
+watch(() => props.refundLineItems, (newData) => {
+  refundFormData.refundLineItems = JSON.parse(JSON.stringify(newData))
+}, { immediate: true, deep: true })
+
+// Sync refund method prop
+watch(() => props.refundMethod, (newData) => {
+  if (newData) {
+    refundFormData.refundMethod = newData
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div>
+    <div class="bg-white rounded shadow-sm border border-gray-200">
+      <div class="flex items-center h-[75px] px-6 bg-blue-50">
+        <UIcon name="i-mdi-file-document" class="text-primary text-3xl mr-3" />
+        <span class="font-bold text-lg">Refund Request</span>
+      </div>
+
+      <div class="p-6 space-y-4">
+        <!-- Previous refund alert -->
+        <UAlert
+          v-if="previousRefundedAmount > 0"
+          color="error"
+          variant="outline"
+          icon="i-mdi-alert-circle"
+          :description="`This invoice has already been refunded for an amount of ${CommonUtils.formatAmount(previousRefundedAmount)} previously.`"
+        />
+
+        <form @submit.prevent="onReviewBtnClick">
+          <!-- Refund Type -->
+          <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 mb-4">
+            <span class="font-bold text-gray-900">Refund Type</span>
+            <div class="sm:col-span-3">
+              <div class="flex flex-col gap-2">
+                <URadioGroup
+                  v-model="refundFormData.refundType"
+                  :items="[
+                    { label: 'Full Refund', value: RefundType.FULL_REFUND, disabled: formDisabled || !isFullRefundAllowed },
+                    { label: 'Partial Refund', value: RefundType.PARTIAL_REFUND, disabled: formDisabled || !isPartialRefundAllowed }
+                  ]"
+                  @update:model-value="onRefundTypeChange"
+                />
+                <p v-if="refundTypeHint" class="text-sm text-gray-500">
+                  {{ refundTypeHint }}
+                </p>
+                <p v-if="refundTypeError" class="text-sm text-red-500">
+                  {{ refundTypeError }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Partial Refund Line Items -->
+          <div
+            v-if="refundFormData.refundType === RefundType.PARTIAL_REFUND"
+            class="grid grid-cols-1 sm:grid-cols-4 gap-2 mb-4"
+          >
+            <span class="font-bold text-gray-900">Specify Refund Amount</span>
+            <div class="sm:col-span-3">
+              <div
+                v-for="(lineItem, index) in refundFormData.refundLineItems"
+                :key="lineItem.id"
+                class="mb-6"
+              >
+                <div class="mb-2 font-medium">
+                  {{ lineItem.description }} ({{ CommonUtils.formatAmount(Number(lineItem.total)) }})
+                </div>
+                <UCheckbox
+                  v-model="lineItem.refundEntireItemRequested"
+                  label="Refund entire item"
+                  class="mb-3"
+                  @update:model-value="(value: boolean) => onRefundEntireItemRequestedChange(value, index)"
+                />
+                <div v-if="lineItem.filingFees" class="flex flex-wrap gap-4">
+                  <div class="w-[212px]">
+                    <UInput
+                      v-model.number="lineItem.filingFeesRequested"
+                      type="number"
+                      placeholder="Filing Fees"
+                      :disabled="lineItem.refundEntireItemRequested ?? false"
+                      size="lg"
+                      @update:model-value="calculateTotalRequestedAmount"
+                    />
+                    <p class="text-xs text-gray-500 mt-1">
+                      Filing Fees / {{ CommonUtils.formatAmount(Number(lineItem.filingFees)) }}
+                    </p>
+                    <p
+                      v-if="getAmountValidationError(lineItem.filingFeesRequested, lineItem.filingFees)"
+                      class="text-xs text-red-500 mt-1"
+                    >
+                      {{ getAmountValidationError(lineItem.filingFeesRequested, lineItem.filingFees) }}
+                    </p>
+                  </div>
+                  <div v-if="lineItem.serviceFees" class="w-[212px]">
+                    <UInput
+                      v-model.number="lineItem.serviceFeesRequested"
+                      type="number"
+                      placeholder="Service Fees"
+                      disabled
+                      size="lg"
+                      @update:model-value="calculateTotalRequestedAmount"
+                    />
+                    <p class="text-xs text-gray-500 mt-1">
+                      Service Fees / {{ CommonUtils.formatAmount(Number(lineItem.serviceFees)) }}
+                    </p>
+                    <p
+                      v-if="getAmountValidationError(lineItem.serviceFeesRequested, lineItem.serviceFees)"
+                      class="text-xs text-red-500 mt-1"
+                    >
+                      {{ getAmountValidationError(lineItem.serviceFeesRequested, lineItem.serviceFees) }}
+                    </p>
+                  </div>
+                  <div v-if="lineItem.priorityFees" class="w-[212px]">
+                    <UInput
+                      v-model.number="lineItem.priorityFeesRequested"
+                      type="number"
+                      placeholder="Priority Fees"
+                      :disabled="lineItem.refundEntireItemRequested ?? false"
+                      size="lg"
+                      @update:model-value="calculateTotalRequestedAmount"
+                    />
+                    <p class="text-xs text-gray-500 mt-1">
+                      Priority Fees / {{ CommonUtils.formatAmount(Number(lineItem.priorityFees)) }}
+                    </p>
+                    <p
+                      v-if="getAmountValidationError(lineItem.priorityFeesRequested, lineItem.priorityFees)"
+                      class="text-xs text-red-500 mt-1"
+                    >
+                      {{ getAmountValidationError(lineItem.priorityFeesRequested, lineItem.priorityFees) }}
+                    </p>
+                  </div>
+                  <div v-if="lineItem.futureEffectiveFees" class="w-[212px]">
+                    <UInput
+                      v-model.number="lineItem.futureEffectiveFeesRequested"
+                      type="number"
+                      placeholder="Future Effective Fees"
+                      :disabled="lineItem.refundEntireItemRequested ?? false"
+                      size="lg"
+                      @update:model-value="calculateTotalRequestedAmount"
+                    />
+                    <p class="text-xs text-gray-500 mt-1">
+                      Future Effective Fees / {{ CommonUtils.formatAmount(Number(lineItem.futureEffectiveFees)) }}
+                    </p>
+                    <p
+                      v-if="getAmountValidationError(lineItem.futureEffectiveFeesRequested, lineItem.futureEffectiveFees)"
+                      class="text-xs text-red-500 mt-1"
+                    >
+                      {{ getAmountValidationError(lineItem.futureEffectiveFeesRequested, lineItem.futureEffectiveFees) }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Total Refund Amount -->
+          <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 mb-4">
+            <span class="font-bold text-gray-900">Total Refund Amount</span>
+            <span class="sm:col-span-3">
+              {{ CommonUtils.formatAmount(Number(refundFormData.totalRefundAmount)) }}
+            </span>
+          </div>
+
+          <!-- Refund Method -->
+          <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 mb-4">
+            <span class="font-bold text-gray-900">Refund Method</span>
+            <span class="sm:col-span-3">{{ refundFormData.refundMethod }}</span>
+          </div>
+
+          <!-- Notification Email -->
+          <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 mb-4">
+            <span class="font-bold text-gray-900">Notification Email</span>
+            <div class="sm:col-span-3">
+              <UInput
+                v-model="refundFormData.notificationEmail"
+                type="email"
+                :disabled="formDisabled"
+                :maxlength="100"
+                placeholder="Enter email address"
+                size="lg"
+                class="w-full"
+              />
+              <p class="text-xs text-gray-500 mt-1">
+                Defaults to account email. Enter an email if missing, or to use a different address
+              </p>
+              <p v-if="notificationEmailError" class="text-xs text-red-500 mt-1">
+                {{ notificationEmailError }}
+              </p>
+            </div>
+          </div>
+
+          <!-- Reasons for Refund -->
+          <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 mb-4">
+            <span class="font-bold text-gray-900">Reasons for Refund</span>
+            <div class="sm:col-span-3">
+              <UInput
+                v-model="refundFormData.reasonsForRefund"
+                :disabled="formDisabled"
+                :maxlength="250"
+                placeholder="Enter Reasons for Refund"
+                size="lg"
+                class="w-full"
+              />
+              <p class="text-xs text-gray-500 mt-1">
+                The reason will be displayed in client's notification email when refund is approved
+              </p>
+              <p v-if="reasonsForRefundError" class="text-xs text-red-500 mt-1">
+                {{ reasonsForRefundError }}
+              </p>
+            </div>
+          </div>
+
+          <!-- Staff Comment -->
+          <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 mb-4">
+            <span class="font-bold text-gray-900">Staff Comment</span>
+            <div class="sm:col-span-3">
+              <UInput
+                v-model="refundFormData.staffComment"
+                :disabled="formDisabled"
+                :maxlength="250"
+                placeholder="Enter Staff Comment (Optional)"
+                size="lg"
+                class="w-full"
+              />
+              <p class="text-xs text-gray-500 mt-1">
+                Only viewable by staff
+              </p>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="flex justify-between flex-wrap gap-2 mt-10">
+      <UButton
+        label="Cancel"
+        variant="outline"
+        color="primary"
+        size="lg"
+        @click="emit('onCancel')"
+      />
+      <UButton
+        label="Review and Confirm"
+        color="primary"
+        size="lg"
+        :disabled="formDisabled || (refundFormData.totalRefundAmount ?? 0) <= 0"
+        @click="onReviewBtnClick"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text-primary {
+  color: var(--color-primary);
+}
+</style>
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/RefundReviewForm.vue b/web/pay-ui/app/pages/transaction-view/[id]/RefundReviewForm.vue
new file mode 100644
index 00000000..cbe2c45b
--- /dev/null
+++ b/web/pay-ui/app/pages/transaction-view/[id]/RefundReviewForm.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import CommonUtils from '@/utils/common-util'
+import { RefundType } from '@/interfaces/transaction-view'
+import type { RefundFormData } from '@/interfaces/transaction-view'
+
+interface Props {
+  refundFormData: RefundFormData
+  isProcessing: boolean
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  onProceedToConfirm: []
+  onProceedToRequestForm: []
+}>()
+</script>
+
+<template>
+  <div>
+    <div class="bg-white rounded shadow-sm border border-gray-200">
+      <div class="flex items-center h-[75px] px-6 bg-blue-50">
+        <UIcon name="i-mdi-file-document" class="text-primary text-3xl mr-3" />
+        <span class="font-bold text-lg">Refund Request</span>
+      </div>
+
+      <div class="p-6 space-y-4">
+        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+          <span class="font-bold text-gray-900">Request Date</span>
+          <span class="sm:col-span-3">
+            {{ CommonUtils.formatDisplayDate(refundFormData.requestedTime, 'MMMM dd, yyyy h:mm a') }}
+          </span>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+          <span class="font-bold text-gray-900">Refund Type</span>
+          <span class="sm:col-span-3">{{ refundFormData.refundType }}</span>
+        </div>
+
+        <div
+          v-if="refundFormData.refundType === RefundType.PARTIAL_REFUND"
+          class="grid grid-cols-1 sm:grid-cols-4 gap-2"
+        >
+          <span class="font-bold text-gray-900">Refund Details</span>
+          <div class="sm:col-span-3">
+            <ol class="list-decimal pl-5">
+              <li
+                v-for="(lineItem, index) in refundFormData.refundLineItems"
+                :key="index"
+                class="pb-4"
+              >
+                <div>
+                  {{ lineItem.description }} ({{ CommonUtils.formatAmount(Number(lineItem.total)) }})
+                </div>
+                <div v-if="lineItem.refundEntireItemRequested" class="pt-3">
+                  Entire Item: {{ CommonUtils.formatAmount(Number(lineItem.total)) }}
+                </div>
+                <div v-else>
+                  <div
+                    v-for="fee in [
+                      { label: 'Filing Fees', value: Number(lineItem.filingFeesRequested) || 0 },
+                      { label: 'Service Fees', value: Number(lineItem.serviceFeesRequested) || 0 },
+                      { label: 'Priority Fees', value: Number(lineItem.priorityFeesRequested) || 0 },
+                      { label: 'Future Effective Fees', value: Number(lineItem.futureEffectiveFeesRequested) || 0 }
+                    ].filter(f => f.value > 0)"
+                    :key="fee.label"
+                    class="pt-3"
+                  >
+                    {{ fee.label }}: {{ CommonUtils.formatAmount(fee.value) }}
+                  </div>
+                </div>
+              </li>
+            </ol>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+          <span class="font-bold text-gray-900">Total Refund Amount</span>
+          <span class="sm:col-span-3">
+            {{ CommonUtils.formatAmount(Number(refundFormData.totalRefundAmount)) }}
+          </span>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+          <span class="font-bold text-gray-900">Refund Method</span>
+          <span class="sm:col-span-3">{{ refundFormData.refundMethod }}</span>
+        </div>
+
+        <hr class="my-6 border-gray-200">
+
+        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+          <span class="font-bold text-gray-900">Notification Email</span>
+          <span class="sm:col-span-3">{{ refundFormData.notificationEmail }}</span>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+          <span class="font-bold text-gray-900">Reason for Refund</span>
+          <span class="sm:col-span-3">{{ refundFormData.reasonsForRefund }}</span>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+          <span class="font-bold text-gray-900">Staff Comment</span>
+          <span class="sm:col-span-3">{{ refundFormData.staffComment }}</span>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+          <span class="font-bold text-gray-900">Requested By</span>
+          <span class="sm:col-span-3">
+            {{ refundFormData.requestedBy }},
+            {{ CommonUtils.formatDisplayDate(refundFormData.requestedTime, 'MMMM dd, yyyy h:mm a') }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex justify-between flex-wrap gap-2 mt-10">
+      <UButton
+        label="Back"
+        variant="outline"
+        color="primary"
+        size="lg"
+        @click="emit('onProceedToRequestForm')"
+      />
+      <UButton
+        color="primary"
+        size="lg"
+        :disabled="isProcessing"
+        @click="emit('onProceedToConfirm')"
+      >
+        <span v-if="!isProcessing">Submit Refund Request</span>
+        <UIcon
+          v-else
+          name="i-mdi-loading"
+          class="animate-spin"
+        />
+      </UButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text-primary {
+  color: var(--color-primary);
+}
+</style>
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/TransactionDetails.vue b/web/pay-ui/app/pages/transaction-view/[id]/TransactionDetails.vue
new file mode 100644
index 00000000..8c5e4d3e
--- /dev/null
+++ b/web/pay-ui/app/pages/transaction-view/[id]/TransactionDetails.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import CommonUtils from '@/utils/common-util'
+import { InvoiceStatus } from '@/utils/constants'
+import type { TransactionData } from '@/interfaces/transaction-view'
+import { useTransactionView } from '~/composables/transactions/useTransactionView'
+
+const props = defineProps<{
+  transactionData: TransactionData
+}>()
+const { downloadReceipt } = useTransactionView()
+
+const canDownloadReceipt = computed(() =>
+  props.transactionData.invoiceStatusCode === InvoiceStatus.COMPLETED
+  || props.transactionData.invoiceStatusCode === InvoiceStatus.PAID
+)
+
+function handleDownloadReceipt() {
+  downloadReceipt(props.transactionData)
+}
+</script>
+
+<template>
+  <div class="bg-white rounded shadow-sm border border-gray-200">
+    <div class="flex items-center h-[75px] px-6 bg-blue-50">
+      <UIcon name="i-mdi-file-document" class="text-primary text-3xl mr-3" />
+      <span class="font-bold text-lg">Transaction Details</span>
+    </div>
+
+    <div class="p-6 space-y-6">
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Transaction Date</span>
+        <span class="sm:col-span-3">
+          {{ CommonUtils.formatDisplayDate(transactionData.invoiceCreatedOn, 'MMMM dd, yyyy h:mm a') }}
+        </span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+        <span class="font-bold text-gray-900">Receipt</span>
+        <div class="sm:col-span-3">
+          <button
+            v-if="canDownloadReceipt"
+            class="flex items-center gap-1 text-primary cursor-pointer hover:underline"
+            @click="handleDownloadReceipt()"
+          >
+            <UIcon name="i-mdi-file-pdf-outline" class="size-5" />
+            <span>Receipt</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="w-full border-collapse">
+          <thead>
+            <tr class="border-b border-gray-200">
+              <th class="text-left py-3 pr-4 font-semibold text-gray-700">
+                Application
+              </th>
+              <th class="text-left py-3 px-4 font-semibold text-gray-700 border-l border-gray-200">
+                Type
+              </th>
+              <th class="text-left py-3 px-4 font-semibold text-gray-700 border-l border-gray-200">
+                Number
+              </th>
+              <th class="text-left py-3 pl-4 font-semibold text-gray-700 border-l border-gray-200">
+                Detail
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="py-4 pr-4 align-top">
+                {{ transactionData.applicationName }}
+              </td>
+              <td class="py-4 px-4 align-top">
+                {{ transactionData.applicationType }}
+              </td>
+              <td class="py-4 px-4 align-top">
+                {{ transactionData.businessIdentifier }}
+              </td>
+              <td class="py-4 pl-4 align-top">
+                <template v-if="transactionData.applicationDetails">
+                  <div
+                    v-for="(detail, index) in transactionData.applicationDetails"
+                    :key="index"
+                  >
+                    {{ detail.label }} {{ detail.value }}
+                  </div>
+                </template>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="font-bold text-gray-900">
+        Identifier
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="w-full border-collapse">
+          <thead>
+            <tr class="border-b border-gray-200">
+              <th class="text-left py-3 pr-4 font-semibold text-gray-700">
+                Transaction ID
+              </th>
+              <th class="text-left py-3 px-4 font-semibold text-gray-700 border-l border-gray-200">
+                Invoice Reference ID
+              </th>
+              <th
+                v-if="transactionData.routingSlip"
+                class="text-left py-3 pl-4 font-semibold text-gray-700 border-l border-gray-200"
+              >
+                Routing Slip Number
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="py-4 pr-4 align-top">
+                {{ transactionData.invoiceId }}
+              </td>
+              <td class="py-4 px-4 align-top">
+                {{ transactionData.invoiceReferenceId }}
+              </td>
+              <td
+                v-if="transactionData.routingSlip"
+                class="py-4 pl-4 align-top"
+              >
+                {{ transactionData.routingSlip }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue b/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
new file mode 100644
index 00000000..2214cc94
--- /dev/null
+++ b/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
@@ -0,0 +1,444 @@
+<script setup lang="ts">
+import { useTransactionView } from '~/composables/transactions/useTransactionView'
+import PaymentDetails from '~/pages/transaction-view/[id]/PaymentDetails.vue'
+import TransactionDetails from '~/pages/transaction-view/[id]/TransactionDetails.vue'
+import InvoiceRefundHistory from '~/pages/transaction-view/[id]/InvoiceRefundHistory.vue'
+import RefundDecisionForm from '~/pages/transaction-view/[id]/RefundDecisionForm.vue'
+import RefundRequestForm from '~/pages/transaction-view/[id]/RefundRequestForm.vue'
+import RefundReviewForm from '~/pages/transaction-view/[id]/RefundReviewForm.vue'
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+const toast = useToast()
+
+const invoiceId = computed(() => Number(route.params.id))
+
+// Get additional path params - mode and refundId
+const details = computed(() => {
+  const raw = route.params.details
+  return Array.isArray(raw) ? raw : (raw ? [raw] : [])
+})
+
+const mode = computed(() => details.value[0] || null)
+const refundId = computed(() => details.value[1] ? Number(details.value[1]) : null)
+
+definePageMeta({
+  layout: 'connect-auth',
+  middleware: ['pay-auth'],
+  allowedRoles: [Role.ProductRefundViewer],
+  hideBreadcrumbs: false
+})
+
+useHead({
+  title: t('page.transactions.title')
+})
+
+enum RefundLineTypes {
+  BASE_FEES = 'BASE_FEES',
+  FUTURE_EFFECTIVE_FEES = 'FUTURE_EFFECTIVE_FEES',
+  PRIORITY_FEES = 'PRIORITY_FEES',
+  SERVICE_FEES = 'SERVICE_FEES'
+}
+
+const state = reactive({
+  dataLoading: 0,
+  paymentData: {
+    accountName: null,
+    folioNumber: null,
+    initiatedBy: null,
+    paymentMethod: null,
+    paymentStatus: null,
+    totalTransactionAmount: 0
+  } as PaymentData,
+  transactionData: {
+    invoiceId: null,
+    transactionDate: null,
+    invoiceReferenceId: null,
+    invoiceStatusCode: null,
+    invoiceCreatedOn: null,
+    transactionAmount: 0,
+    applicationName: null,
+    applicationType: null,
+    businessIdentifier: null,
+    applicationDetails: null,
+    routingSlip: null,
+    partialRefundable: false,
+    fullRefundable: false
+  } as TransactionData,
+  refundHistoryData: [],
+  refundRequestData: {
+    invoiceId: null,
+    refundId: null,
+    refundStatus: null,
+    refundType: null,
+    refundMethod: null,
+    notificationEmail: null,
+    refundReason: null,
+    staffComment: null,
+    requestedBy: null,
+    requestedDate: null,
+    declineReason: null,
+    decisionBy: null,
+    decisionDate: null,
+    refundAmount: 0,
+    transactionAmount: 0,
+    paymentMethod: null,
+    partialRefundLines: []
+  } as RefundRequestResult,
+  refundFormData: {
+    refundType: null,
+    refundLineItems: [],
+    totalRefundAmount: 0,
+    refundMethod: null,
+    notificationEmail: null,
+    reasonsForRefund: null,
+    staffComment: null,
+    requestedBy: null,
+    requestedTime: null,
+    decisionBy: null,
+    decisionTime: null
+  } as RefundFormData,
+  refundLineItems: [] as RefundLineItem[],
+  refundFormStage: RefundRequestStage.REQUEST_FORM as RefundRequestStage,
+  refundMethods: [
+    { value: 'refund-as-account-credits', text: 'Refund as Account Credits' }
+  ],
+  previousRefundedAmount: 0,
+  isProcessing: false,
+  invoicePaymentMethod: null as null | string,
+  invoiceProduct: null as null | string
+})
+
+const { getInvoiceComposite, getInvoiceRefundHistory, getRefundRequest, patchRefundRequest,
+  refundInvoice } = useTransactionView()
+
+function getTransactionPageTitle() {
+  const result = ['initiateRefund', 'refund-request'].includes(mode.value ?? '')
+    ? 'page.transactionView.transactionRefundTitle'
+    : 'page.transactionView.transactionInformationTitle'
+  return result
+}
+
+function setPaymentData(invoice: Invoice) {
+  state.paymentData = {
+    accountName: invoice.paymentAccount?.accountName,
+    folioNumber: invoice.folioNumber,
+    initiatedBy: invoice.createdBy,
+    paymentMethod: invoice.paymentMethod,
+    paymentStatus: invoice.statusCode,
+    totalTransactionAmount: invoice.total || 0
+  }
+}
+
+function setTransactionData(invoice: Invoice) {
+  state.transactionData = {
+    invoiceId: invoice.id,
+    transactionDate: invoice.createdOn,
+    invoiceReferenceId: invoice.references?.find(f => f.statusCode === 'COMPLETED')?.invoiceNumber,
+    transactionAmount: invoice.total || 0,
+    applicationName: getProductDisplayName(invoice.corpTypeCode ?? ''),
+    applicationType: invoice.lineItems?.[0]?.description,
+    businessIdentifier: invoice.businessIdentifier,
+    applicationDetails: invoice.details,
+    invoiceStatusCode: invoice.statusCode,
+    invoiceCreatedOn: invoice.createdOn,
+    routingSlip: invoice.routingSlip,
+    latestRefundId: invoice.latestRefundId,
+    latestRefundStatus: invoice.latestRefundStatus,
+    partialRefundable: invoice.partialRefundable,
+    fullRefundable: invoice.fullRefundable
+  }
+}
+
+function setRefundLineItems(lineItems: LineItem[]) {
+  state.refundLineItems = lineItems.map(lineItem => ({
+    id: lineItem.id,
+    description: lineItem.description,
+    filingFees: lineItem.filingFees,
+    serviceFees: lineItem.serviceFees,
+    priorityFees: lineItem.priorityFees,
+    futureEffectiveFees: lineItem.futureEffectiveFees,
+    total: lineItem.total
+  }))
+}
+
+async function fetchInvoice(invoiceId: number) {
+  try {
+    state.dataLoading += 1
+    const invoice = await getInvoiceComposite(invoiceId)
+    if (invoice) {
+      setPaymentData(invoice)
+      setTransactionData(invoice)
+      setRefundLineItems(invoice.lineItems)
+      state.previousRefundedAmount = invoice.refund || 0
+      state.invoicePaymentMethod = invoice.paymentMethod ?? null
+      state.invoiceProduct = invoice.product ?? null
+    }
+  } catch (error: unknown) {
+    console.error('Failed to fetch invoice:', error)
+  } finally {
+    state.dataLoading -= 1
+  }
+}
+
+async function fetchRefundHistory(invoiceId: number) {
+  try {
+    state.dataLoading += 1
+    const refundData: RefundRequestListResponse = await getInvoiceRefundHistory(invoiceId)
+    state.refundHistoryData = refundData.items || []
+  } catch (error: unknown) {
+    console.error('Failed to fetch refund history', error)
+  } finally {
+    state.dataLoading -= 1
+  }
+}
+
+async function fetchRefundRequest(refundId: number) {
+  try {
+    state.dataLoading += 1
+    const refundData: RefundRequestResult = await getRefundRequest(refundId)
+    state.refundRequestData = refundData
+  } catch (error: unknown) {
+    console.error('Failed to fetch refund request', error)
+  } finally {
+    state.dataLoading -= 1
+  }
+}
+
+const showRefundHistory = computed(() =>
+  state.refundHistoryData.length > 0 && mode.value === 'view'
+)
+
+const showRefundRequestForm = computed(() => {
+  const excludedStatuses = [RefundApprovalStatus.APPROVED, RefundApprovalStatus.APPROVAL_NOT_REQUIRED,
+    RefundApprovalStatus.PENDING_APPROVAL]
+  return mode.value === 'initiateRefund' && !excludedStatuses.includes(state.transactionData.latestRefundStatus)
+})
+
+const showRefundDecisionForm = computed(() =>
+  mode.value === 'refund-request' && refundId.value
+)
+
+function onProceedToReview(formData: RefundFormData) {
+  state.refundFormData = formData
+  state.refundFormStage = RefundRequestStage.DATA_VALIDATED
+}
+
+function onProceedToRequestForm() {
+  state.refundFormStage = RefundRequestStage.REQUEST_FORM
+}
+
+async function onProceedToConfirm() {
+  try {
+    state.isProcessing = true
+    await refundInvoice(invoiceId.value, getRefundPayload())
+    toast.add({
+      description: 'Refund request submitted.',
+      icon: 'i-mdi-check-circle',
+      color: 'success'
+    })
+    if (state.refundFormStage === RefundRequestStage.DATA_VALIDATED) {
+      goToTransactionList()
+    }
+  } catch (error) {
+    console.error(`Refund request failed: ${error}`)
+    toast.add({
+      description: 'Refund failed.',
+      icon: 'i-mdi-alert-circle',
+      color: 'error'
+    })
+  } finally {
+    state.isProcessing = false
+  }
+}
+
+function getRefundPayload() {
+  const refundRevenues: RefundRevenueType[] = []
+  if (state.refundFormData.refundType === RefundType.PARTIAL_REFUND) {
+    const refundLineItems = state.refundFormData.refundLineItems
+    refundLineItems?.forEach(refundLineItem => {
+      const feeTypes = [
+        { key: 'filingFeesRequested', type: RefundLineTypes.BASE_FEES },
+        { key: 'priorityFeesRequested', type: RefundLineTypes.PRIORITY_FEES },
+        { key: 'futureEffectiveFeesRequested', type: RefundLineTypes.FUTURE_EFFECTIVE_FEES },
+        { key: 'serviceFeesRequested', type: RefundLineTypes.SERVICE_FEES }
+      ]
+
+      feeTypes.forEach((fee) => {
+        if (refundLineItem[fee.key] > 0 && fee.type !== RefundLineTypes.SERVICE_FEES) {
+          refundRevenues.push({
+            paymentLineItemId: refundLineItem.id,
+            refundAmount: parseFloat(refundLineItem[fee.key]),
+            refundType: fee.type
+          })
+        }
+      })
+    })
+  }
+  return {
+    reason: state.refundFormData.reasonsForRefund,
+    staffComment: state.refundFormData.staffComment,
+    notificationEmail: state.refundFormData.notificationEmail,
+    refundMethod: state.refundFormData.refundMethod,
+    refundRevenue: refundRevenues
+  }
+}
+
+async function onDeclineRefund(declineReason: string) {
+  try {
+    if (!invoiceId.value || !refundId.value) {
+      return
+    }
+
+    state.isProcessing = true
+    const refundPayload = {
+      status: RefundApprovalStatus.DECLINED,
+      declineReason: declineReason
+    }
+    await patchRefundRequest(invoiceId.value, refundId.value, refundPayload)
+    toast.add({
+      description: 'Refund request declined successfully.',
+      icon: 'i-mdi-check-circle',
+      color: 'success'
+    })
+    goToViewTransaction()
+    await fetchInvoice(invoiceId.value)
+    await fetchRefundHistory(invoiceId.value)
+  } catch (error) {
+    console.error(`Refund request decline failed: ${error}`)
+    toast.add({
+      description: 'Failed to decline refund request.',
+      icon: 'i-mdi-alert-circle',
+      color: 'error'
+    })
+  } finally {
+    state.isProcessing = false
+  }
+}
+
+async function onApproveRefund() {
+  try {
+    if (!invoiceId.value || !refundId.value) {
+      return
+    }
+    state.isProcessing = true
+    const refundPayload = {
+      status: RefundApprovalStatus.APPROVED
+    }
+    await patchRefundRequest(invoiceId.value, refundId.value, refundPayload)
+    toast.add({
+      description: 'Refund request approved.',
+      icon: 'i-mdi-check-circle',
+      color: 'success'
+    })
+    await fetchInvoice(invoiceId.value)
+    await fetchRefundHistory(invoiceId.value)
+    goToViewTransaction()
+  } catch (error) {
+    console.error(`Refund request approve failed: ${error}`)
+    toast.add({
+      description: 'Failed to approve refund request.',
+      icon: 'i-mdi-alert-circle',
+      color: 'error'
+    })
+  } finally {
+    state.isProcessing = false
+  }
+}
+
+function goToViewTransaction() {
+  router.push({
+    path: `/transaction-view/${invoiceId.value}/view`
+  })
+}
+
+function goToTransactionList() {
+  router.push({
+    path: '/transactions'
+  })
+}
+
+function onCancel() {
+  goToTransactionList()
+}
+
+onMounted(async () => {
+  await fetchInvoice(invoiceId.value)
+  await fetchRefundHistory(invoiceId.value)
+  if (refundId.value) {
+    await fetchRefundRequest(refundId.value)
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex-shrink-0 mb-2 mt-4">
+      <h1 class="text-gray-900 mb-4">
+        {{ $t(getTransactionPageTitle()) }}
+      </h1>
+      <div
+        v-if="state.dataLoading"
+        class="absolute inset-0 z-50 flex items-center justify-center bg-white/60"
+      >
+        <UIcon
+          name="i-mdi-loading"
+          class="animate-spin text-4xl text-primary"
+        />
+      </div>
+      <div v-if="!state.dataLoading">
+        <PaymentDetails
+          :payment-data="state.paymentData"
+          class="mb-12"
+        />
+
+        <TransactionDetails
+          :transaction-data="state.transactionData"
+          class="mb-12"
+        />
+
+        <InvoiceRefundHistory
+          v-if="showRefundHistory"
+          :refund-history-data="state.refundHistoryData"
+          class="mb-12"
+        />
+        <template v-if="showRefundRequestForm">
+          <RefundRequestForm
+            v-show="state.refundFormStage === RefundRequestStage.REQUEST_FORM"
+            class="mb-12"
+            :total-transaction-amount="state.paymentData.totalTransactionAmount"
+            :refund-line-items="state.refundLineItems"
+            :refund-methods="state.refundMethods"
+            :previous-refunded-amount="state.previousRefundedAmount"
+            :is-partial-refund-allowed="state.transactionData.partialRefundable"
+            :is-full-refund-allowed="state.transactionData.fullRefundable"
+            :invoice-payment-method="state.invoicePaymentMethod"
+            @on-cancel="onCancel"
+            @on-proceed-to-review="onProceedToReview"
+          />
+          <RefundReviewForm
+            v-show="state.refundFormStage === RefundRequestStage.DATA_VALIDATED"
+            class="mb-12"
+            :refund-form-data="state.refundFormData"
+            :refund-methods="state.refundMethods"
+            :is-processing="state.isProcessing"
+            @on-proceed-to-confirm="onProceedToConfirm"
+            @on-proceed-to-request-form="onProceedToRequestForm"
+          />
+        </template>
+        <template v-if="showRefundDecisionForm">
+          <RefundDecisionForm
+            class="mb-12"
+            :refund-request-data="state.refundRequestData"
+            :invoice-product="state.invoiceProduct"
+            :is-processing="state.isProcessing"
+            @on-decline-refund="onDeclineRefund"
+            @on-approve-refund="onApproveRefund"
+            @on-cancel="onCancel"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/pay-ui/app/pages/transactions/index.vue b/web/pay-ui/app/pages/transactions/index.vue
new file mode 100644
index 00000000..d5a1c830
--- /dev/null
+++ b/web/pay-ui/app/pages/transactions/index.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+const { t } = useI18n()
+import { useTransactionsStore } from '@/stores/transactions-store'
+
+const config = useRuntimeConfig()
+const authWebUrl = (config.public as { authWebUrl?: string }).authWebUrl || ''
+const transactionStore = useTransactionsStore()
+
+definePageMeta({
+  layout: 'connect-auth',
+  middleware: ['pay-auth'],
+  allowedRoles: [Role.ViewAllTransactions, Role.ProductRefundViewer],
+  hideBreadcrumbs: false
+})
+
+useHead({
+  title: t('page.transactions.title')
+})
+
+setBreadcrumbs([
+  {
+    label: 'Staff Dashboard',
+    to: `${authWebUrl}/staff/dashboard`
+  },
+  {
+    label: 'Transaction Records'
+  }
+])
+const pendingRefundsCount = ref(0)
+const tab = computed({
+  get: () => transactionStore.tabIndex,
+  set: (value: number) => transactionStore.setTabIndex(value)
+})
+
+function onTabChange() {
+  transactionStore.setTabIndex(tab.value)
+}
+
+async function fetchRefundCount() {
+  const nuxtApp = useNuxtApp()
+  const $payApi = nuxtApp.$payApi as typeof nuxtApp.$payApi
+
+  const [refundRes] = await Promise.all([
+    $payApi<{ statusTotal: number }>('/refunds?refundStatus=PENDING_APPROVAL&limit=1')
+  ])
+
+  pendingRefundsCount.value = refundRes?.statusTotal ?? 0
+}
+
+onMounted(() => {
+  fetchRefundCount()
+})
+</script>
+
+<template>
+  <div class="w-full bg-white">
+    <div class="bg-[var(--color-bg-shade)]">
+      <div class="pt-7 pb-4">
+        <h1 class="text-gray-900">
+          Transaction Records
+        </h1>
+      </div>
+
+      <div class="tab-container">
+        <button
+          :class="['tab-button', { active: tab === 0 }]"
+          @click="tab = 0; onTabChange()"
+        >
+          All
+        </button>
+        <button
+          :class="['tab-button', { active: tab === 1 }]"
+          @click="tab = 1; onTabChange()"
+        >
+          Pending Requests
+          <span class="tab-count">
+            ({{ pendingRefundsCount }})
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div class="tab-content">
+      <div v-show="tab === 0">
+        <TransactionsDataTable
+          :extended="true"
+        />
+      </div>
+      <div v-show="tab === 1">
+        <RefundRequestsTable />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.shortname-summary) {
+  overflow: visible;
+}
+
+.tab-container {
+  display: inline-flex;
+  background-color: #003366;
+  border-radius: 12px;
+}
+
+.tab-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 14px 24px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  border: none;
+  border-radius: 0;
+
+  // Inactive state - solid dark blue
+  background-color: #003366;
+  color: white;
+
+  // Round outer corners for first and last tabs
+  &:first-child {
+    border-radius: 12px 0 0 12px;
+  }
+
+  &:last-child {
+    border-radius: 0 12px 12px 0;
+  }
+
+  &:hover:not(.active) {
+    background-color: #002244;
+  }
+
+  // Active state - white background with thin border, fully rounded
+  &.active {
+    background-color: white;
+    color: #212529;
+    border: 2px solid #1a1a1a;
+    border-radius: 12px;
+    margin: 4px;
+  }
+
+  .tab-count {
+    font-weight: 400;
+  }
+}
+
+.tab-content {
+  background-color: white;
+  padding-bottom: 1.5rem;
+}
+</style>
diff --git a/web/pay-ui/app/plugins/fas-search-body-class.client.ts b/web/pay-ui/app/plugins/fas-search-body-class.client.ts
index a076bf99..afcbd1b8 100644
--- a/web/pay-ui/app/plugins/fas-search-body-class.client.ts
+++ b/web/pay-ui/app/plugins/fas-search-body-class.client.ts
@@ -6,7 +6,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('vue:setup', () => {
     const route = useRoute()
 
-    const wideTablePaths = ['/home', '/eft']
+    const wideTablePaths = ['/home', '/eft', '/transactions']
     const excludedPaths = ['/eft/shortname-details']
 
     watch(() => route.path, (newPath) => {
diff --git a/web/pay-ui/app/stores/refund-requests-store.ts b/web/pay-ui/app/stores/refund-requests-store.ts
new file mode 100644
index 00000000..241f6a36
--- /dev/null
+++ b/web/pay-ui/app/stores/refund-requests-store.ts
@@ -0,0 +1,40 @@
+import type { RefundRequestFilterPayload } from '~/interfaces/refund-requests'
+
+export const useRefundRequestsStore = defineStore('refund-requests-store', () => {
+  const tabIndex = ref(0)
+  const refundRequestsFilter = ref<RefundRequestFilterPayload | null>(null)
+
+  // Table settings for restoring state after navigation
+  const tableSettings = ref<RefundRequestsTableSettings | null>(null)
+
+  function setTabIndex(index: number) {
+    tabIndex.value = index
+  }
+
+  function setFilter(filter: RefundRequestFilterPayload | null) {
+    refundRequestsFilter.value = filter
+  }
+
+  function clearFilter() {
+    refundRequestsFilter.value = null
+  }
+
+  function setTableSettings(settings: RefundRequestsTableSettings | null) {
+    tableSettings.value = settings
+  }
+
+  function clearTableSettings() {
+    tableSettings.value = null
+  }
+
+  return {
+    tabIndex,
+    refundRequestsFilter,
+    tableSettings,
+    setTabIndex,
+    setFilter,
+    clearFilter,
+    setTableSettings,
+    clearTableSettings
+  }
+})
diff --git a/web/pay-ui/app/stores/transactions-store.ts b/web/pay-ui/app/stores/transactions-store.ts
new file mode 100644
index 00000000..998d12ea
--- /dev/null
+++ b/web/pay-ui/app/stores/transactions-store.ts
@@ -0,0 +1,50 @@
+import type { getTransactionsTableHeaders } from '~/composables/transactions/useTransactionsTable'
+import type { TransactionFilter } from '~/interfaces/transactions'
+
+export interface TransactionTableSettings {
+  filterPayload: Partial<TransactionFilter>
+  pageNumber: number
+}
+
+export const useTransactionsStore = defineStore('transactions-store', () => {
+  const tabIndex = ref(0)
+  const store = reactive({
+    searchTransactionsTableHeaders: [] as ReturnType<typeof getTransactionsTableHeaders>,
+    searchColumnVisibility: {} as Record<string, boolean>
+  })
+
+  const transactionFilter = ref<Partial<TransactionFilter> | null>(null)
+  const tableSettings = ref<TransactionTableSettings | null>(null)
+
+  function setTabIndex(index: number) {
+    tabIndex.value = index
+  }
+
+  function setFilter(filter: Partial<TransactionFilter> | null) {
+    transactionFilter.value = filter
+  }
+
+  function clearFilter() {
+    transactionFilter.value = null
+  }
+
+  function setTableSettings(settings: TransactionTableSettings | null) {
+    tableSettings.value = settings
+  }
+
+  function clearTableSettings() {
+    tableSettings.value = null
+  }
+
+  return {
+    store,
+    tabIndex,
+    transactionFilter,
+    tableSettings,
+    setTabIndex,
+    setFilter,
+    clearFilter,
+    setTableSettings,
+    clearTableSettings
+  }
+})
diff --git a/web/pay-ui/app/utils/common-util.ts b/web/pay-ui/app/utils/common-util.ts
index e39bcf88..7f9e618d 100644
--- a/web/pay-ui/app/utils/common-util.ts
+++ b/web/pay-ui/app/utils/common-util.ts
@@ -178,6 +178,16 @@ function getUserInfo() {
   return auth.authUser.value
 }
 
+function canInitiateProductRefund (productRole: string) {
+  const validRoles = [Role.ProductRefundRequester, productRole]
+  return verifyRoles(validRoles)
+}
+
+function canApproveDeclineProductRefund (productRole: string) {
+  const validRoles = [Role.ProductRefundApprover, productRole]
+  return verifyRoles(validRoles)
+}
+
 /**
  * check its in refunc process
  * @param  {string} status
@@ -330,5 +340,7 @@ export default {
   isEditEnabledBystatus,
   requiredFieldRule,
   getIndexedTag,
-  isReversable
+  isReversable,
+  canInitiateProductRefund,
+  canApproveDeclineProductRefund
 }
diff --git a/web/pay-ui/app/utils/constants.ts b/web/pay-ui/app/utils/constants.ts
index 8e4386b1..b9b31265 100644
--- a/web/pay-ui/app/utils/constants.ts
+++ b/web/pay-ui/app/utils/constants.ts
@@ -441,3 +441,21 @@ export const UI_CONSTANTS = {
   DEFAULT_PAGE_LIMIT: 50,
   INFINITE_SCROLL_DISTANCE: 200
 } as const
+
+export enum RefundApprovalStatus {
+  APPROVED = 'APPROVED',
+  PENDING_APPROVAL = 'PENDING_APPROVAL',
+  DECLINED = 'DECLINED',
+  APPROVAL_NOT_REQUIRED = 'APPROVAL_NOT_REQUIRED'
+}
+
+export enum PaymentTypeToRefundMethodMap {
+  DRAWDOWN = 'Refund back to BCOL Account',
+  DIRECT_PAY = 'Refund back to Credit Card',
+  EFT = 'Refund back to Short Name',
+  INTERNAL = 'Refund back to Routing Slip',
+  ONLINE_BANKING = 'Refund as Account Credits',
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+  PAD = 'Refund as Account Credits',
+  EJV = 'EJV Refund'
+}
diff --git a/web/pay-ui/app/utils/invoice-status-util.ts b/web/pay-ui/app/utils/invoice-status-util.ts
new file mode 100644
index 00000000..15e53cf1
--- /dev/null
+++ b/web/pay-ui/app/utils/invoice-status-util.ts
@@ -0,0 +1,27 @@
+export const invoiceStatusDisplay = {
+  [InvoiceStatus.APPROVED]: 'Processing',
+  [InvoiceStatus.CANCELLED]: 'Cancelled',
+  [InvoiceStatus.COMPLETED]: 'Completed',
+  [InvoiceStatus.CREATED]: 'Created',
+  [InvoiceStatus.CREDITED]: 'Credited',
+  [InvoiceStatus.DELETED]: 'Deleted',
+  [InvoiceStatus.DELETE_ACCEPTED]: 'Deleted',
+  [InvoiceStatus.OVERDUE]: 'Overdue',
+  [InvoiceStatus.PAID]: 'Completed',
+  [InvoiceStatus.PARTIAL]: 'Partial Paid',
+  // Frontend only
+  [InvoiceStatus.PENDING]: 'Pending',
+  [InvoiceStatus.REFUNDED]: 'Refunded',
+  [InvoiceStatus.REFUND_REQUESTED]: 'Refund Requested',
+  [InvoiceStatus.SETTLEMENT_SCHEDULED]: 'Non-sufficient Funds',
+  // Update Revenue rarely happens and are intermediate states
+  [InvoiceStatus.UPDATE_REVENUE_ACCOUNT]: 'Processing',
+  [InvoiceStatus.UPDATE_REVENUE_ACCOUNT_REFUND]: 'Refunded',
+  // Frontend only
+  [InvoiceStatus.PARTIALLY_CREDITED]: 'Partially Credited',
+  [InvoiceStatus.PARTIALLY_REFUNDED]: 'Partially Refunded'
+}
+
+export const getInvoiceStatusDisplayName = (status: string): string => {
+  return invoiceStatusDisplay[status as InvoiceStatus] || status
+}
diff --git a/web/pay-ui/app/utils/product-util.ts b/web/pay-ui/app/utils/product-util.ts
new file mode 100644
index 00000000..29d41621
--- /dev/null
+++ b/web/pay-ui/app/utils/product-util.ts
@@ -0,0 +1,17 @@
+export const productDisplay = {
+  [Product.BCA]: 'BC Assessment',
+  [Product.BUSINESS]: 'Business Registry & Name Request',
+  [Product.BUSINESS_SEARCH]: 'Business and Person Search',
+  [Product.CSO]: 'Court Services Online',
+  [Product.ESRA]: 'Site Registry',
+  [Product.MHR]: 'Manufactured Home Registry',
+  [Product.PPR]: 'Personal Property Registry',
+  [Product.RPPR]: 'Restricted Personal Property Registry',
+  [Product.RPT]: 'Rural Property Tax',
+  [Product.STRR]: 'Short-Term Rental Registry',
+  [Product.VS]: 'Wills Registry',
+  [Product.NRO]: 'Name Requests Online'
+}
+export const getProductDisplayName = (productCode: string): string => {
+  return productDisplay[productCode as Product] || productCode
+}
diff --git a/web/pay-ui/i18n/locales/en-CA.ts b/web/pay-ui/i18n/locales/en-CA.ts
index c0e2ec07..cb203a5e 100644
--- a/web/pay-ui/i18n/locales/en-CA.ts
+++ b/web/pay-ui/i18n/locales/en-CA.ts
@@ -202,6 +202,32 @@ export default {
         }
       }
     },
+    transactions: {
+      title: 'BC Business Registry Transactions',
+      search: {
+        label: {
+          accountName: 'Account Name',
+          applicationType: 'Application Type',
+          transactionType: 'Transaction Type',
+          transactionDetails: 'Transaction Details',
+          businessIdentifier: 'Number',
+          folioNumber: 'Folio #',
+          createdName: 'Initiated By',
+          createdOn: 'Date (Pacific Time)',
+          total: 'Total Amount',
+          transactionId: 'Transaction ID',
+          invoiceNumber: 'Invoice Reference Number',
+          paymentMethod: 'Payment method',
+          paymentStatus: 'Payment Status',
+          downloads: 'Downloads',
+          actions: 'Actions'
+        }
+      }
+    },
+    transactionView: {
+      transactionRefundTitle: 'Transaction Refund',
+      transactionInformationTitle: 'Transaction Information'
+    },
     createRoutingSlip: {
       title: 'Add Routing Slip - BC Business Registry FAS',
       h1: 'Add Routing Slip'
diff --git a/web/pay-ui/tests/unit/components/TransactionView/InvoiceRefundHistory.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/InvoiceRefundHistory.spec.ts
new file mode 100644
index 00000000..5a218fe0
--- /dev/null
+++ b/web/pay-ui/tests/unit/components/TransactionView/InvoiceRefundHistory.spec.ts
@@ -0,0 +1,110 @@
+import { mount } from '@vue/test-utils'
+import { mockNuxtImport } from '@nuxt/test-utils/runtime'
+import InvoiceRefundHistory from '~/pages/transaction-view/[id]/InvoiceRefundHistory.vue'
+import { RefundApprovalStatus } from '~/utils/constants'
+
+const mockPush = vi.fn()
+
+mockNuxtImport('useRouter', () => () => ({
+  push: mockPush
+}))
+
+vi.mock('~/utils/common-util', () => ({
+  default: {
+    formatDisplayDate: vi.fn(() => 'January 01, 2025 12:00 AM'),
+    formatAmount: vi.fn((amount: number) => `$${Number(amount).toFixed(2)}`)
+  }
+}))
+
+describe('InvoiceRefundHistory', () => {
+  const refundHistoryItem = {
+    codeRefundId: 1,
+    invoiceId: 1001,
+    refundId: 201,
+    requestedDate: '2025-01-01T00:00:00Z',
+    refundMethod: 'CHEQUE',
+    refundStatus: RefundApprovalStatus.APPROVED,
+    refundAmount: 150,
+    partialRefundLines: [] as unknown[]
+  }
+
+  const createWrapper = (refundHistoryData = [refundHistoryItem]) => {
+    const mockRow = refundHistoryData[0]
+    return mount(InvoiceRefundHistory, {
+      props: { refundHistoryData },
+      global: {
+        stubs: {
+          UIcon: true,
+          UButton: {
+            template: '<button @click="$emit(\'click\')">{{ label }}</button>',
+            props: ['label', 'color', 'size']
+          },
+          UBadge: {
+            template: '<span class="badge"><slot /></span>',
+            props: ['color', 'variant', 'size']
+          },
+          UTable: {
+            template: `
+              <div class="table">
+                <slot name="requestedDate-cell" :row="{ original: mockRow }" />
+                <slot name="refundMethod-cell" :row="{ original: mockRow }" />
+                <slot name="refundAmount-cell" :row="{ original: mockRow }" />
+                <slot name="actions-cell" :row="{ original: mockRow }" />
+              </div>
+            `,
+            props: ['data', 'columns', 'sticky'],
+            data: () => ({ mockRow })
+          }
+        }
+      }
+    })
+  }
+
+  it('should render component with header', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Refund History')
+  })
+
+  it('should render formatted date, method and amount', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('January 01, 2025 12:00 AM')
+    expect(wrapper.text()).toContain('CHEQUE')
+    expect(wrapper.text()).toContain('$150.00')
+  })
+
+  it.each([
+    [RefundApprovalStatus.PENDING_APPROVAL, [], 'REFUND REQUESTED'],
+    [RefundApprovalStatus.APPROVED, [{ id: 1 }], 'PARTIALLY REFUNDED'],
+    [RefundApprovalStatus.APPROVED, [], 'FULL REFUND APPROVED'],
+    [RefundApprovalStatus.DECLINED, [], 'REFUND DECLINED']
+  ])('should show correct badge label for status %s', (refundStatus, partialRefundLines, expectedLabel) => {
+    const item = { ...refundHistoryItem, refundStatus, partialRefundLines }
+    const wrapper = createWrapper([item])
+    expect(wrapper.text()).toContain(expectedLabel)
+  })
+
+  it.each([
+    ['CHEQUE', RefundApprovalStatus.APPROVED, [], 'FULL REFUND APPROVED'],
+    ['CHEQUE', RefundApprovalStatus.PENDING_APPROVAL, [], 'REFUND REQUESTED'],
+    ['EFT', RefundApprovalStatus.APPROVED, [], 'FULL REFUND APPROVED'],
+    ['EFT', RefundApprovalStatus.APPROVED, [{ id: 1 }], 'PARTIALLY REFUNDED'],
+    ['EFT', RefundApprovalStatus.DECLINED, [], 'REFUND DECLINED'],
+    ['ONLINE_BANKING', RefundApprovalStatus.PENDING_APPROVAL, [], 'REFUND REQUESTED'],
+    ['PAD', RefundApprovalStatus.APPROVED, [], 'FULL REFUND APPROVED']
+  ])('should display method %s with badge label %s', (refundMethod, refundStatus,
+    partialRefundLines, expectedBadge) => {
+    const item = { ...refundHistoryItem, refundMethod, refundStatus, partialRefundLines }
+    const wrapper = createWrapper([item])
+    expect(wrapper.text()).toContain(refundMethod)
+    expect(wrapper.text()).toContain(expectedBadge)
+  })
+
+  it('should navigate to refund detail when View Details is clicked', async () => {
+    const wrapper = createWrapper()
+    await wrapper.find('button').trigger('click')
+    expect(mockPush).toHaveBeenCalledWith({
+      path: `/transaction-view/${refundHistoryItem.invoiceId}/refund-request/${refundHistoryItem.refundId}`
+    })
+  })
+})
diff --git a/web/pay-ui/tests/unit/components/TransactionView/PaymentDetails.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/PaymentDetails.spec.ts
new file mode 100644
index 00000000..74b926bd
--- /dev/null
+++ b/web/pay-ui/tests/unit/components/TransactionView/PaymentDetails.spec.ts
@@ -0,0 +1,61 @@
+import { mount } from '@vue/test-utils'
+import PaymentDetails from '~/pages/transaction-view/[id]/PaymentDetails.vue'
+import CommonUtils from '~/utils/common-util'
+import type { PaymentData } from '~/interfaces/transaction-view'
+
+vi.mock('~/utils/common-util', () => ({
+  default: {
+    formatAmount: vi.fn((amount: number) => `$${Number(amount).toFixed(2)}`)
+  }
+}))
+
+describe('PaymentDetails', () => {
+  const sampleData: PaymentData = {
+    accountName: 'Acme Corp',
+    folioNumber: 'FOLIO-123',
+    initiatedBy: 'user@idir',
+    paymentMethod: 'CHEQUE',
+    paymentStatus: 'COMPLETED',
+    totalTransactionAmount: 2000
+  }
+
+  const createWrapper = (propsOverride: Partial<PaymentData> = {}) => {
+    return mount(PaymentDetails, {
+      props: {
+        paymentData: { ...sampleData, ...propsOverride }
+      },
+      global: {
+        stubs: {
+          UIcon: true
+        }
+      }
+    })
+  }
+
+  it('should render component with header', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Payment Details')
+  })
+
+  it('should render all field labels', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('Account Name')
+    expect(wrapper.text()).toContain('Folio Number')
+    expect(wrapper.text()).toContain('Initiated By')
+    expect(wrapper.text()).toContain('Payment Info')
+    expect(wrapper.text()).toContain('Payment Method')
+    expect(wrapper.text()).toContain('Status')
+    expect(wrapper.text()).toContain('Total Amount')
+  })
+
+  it('should display payment data values', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain(sampleData.accountName as string)
+    expect(wrapper.text()).toContain(sampleData.folioNumber as string)
+    expect(wrapper.text()).toContain(sampleData.initiatedBy as string)
+    expect(wrapper.text()).toContain('Cheque')
+    expect(wrapper.text()).toContain('Completed')
+    expect(CommonUtils.formatAmount).toHaveBeenCalledWith(sampleData.totalTransactionAmount)
+  })
+})
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts
new file mode 100644
index 00000000..d0d19358
--- /dev/null
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts
@@ -0,0 +1,176 @@
+import { mount } from '@vue/test-utils'
+import { mockNuxtImport } from '@nuxt/test-utils/runtime'
+import RefundDecisionForm from '~/pages/transaction-view/[id]/RefundDecisionForm.vue'
+import { RefundApprovalStatus } from '~/utils/constants'
+
+const {
+  mockCanApprove,
+  mockGetUserInfo,
+  mockFormatDisplayDate,
+  mockFormatAmount
+} = vi.hoisted(() => ({
+  mockCanApprove: vi.fn(() => false),
+  mockGetUserInfo: vi.fn(() => ({ userName: 'APPROVER' })),
+  mockFormatDisplayDate: vi.fn(() => 'January 01, 2025 12:00 AM'),
+  mockFormatAmount: vi.fn((amount: number) => `$${Number(amount).toFixed(2)}`)
+}))
+
+const mockAuthUser = ref({
+  userName: 'APPROVER',
+  roles: ['business_refund_approver']
+})
+
+mockNuxtImport('useConnectAuth', () => () => ({
+  authUser: mockAuthUser
+}))
+
+vi.mock('~/utils/common-util', () => ({
+  default: {
+    formatDisplayDate: mockFormatDisplayDate,
+    formatAmount: mockFormatAmount,
+    getUserInfo: mockGetUserInfo,
+    canApproveDeclineProductRefund: mockCanApprove
+  }
+}))
+
+describe('RefundDecisionForm', () => {
+  const sampleData: RefundRequestResult = {
+    invoiceId: 52305,
+    refundId: 1009,
+    refundStatus: RefundApprovalStatus.PENDING_APPROVAL,
+    refundType: 'INVOICE',
+    refundMethod: 'Refund back to Credit Card',
+    notificationEmail: 'test@example.com',
+    refundReason: 'test reason',
+    staffComment: 'staff comment',
+    requestedBy: 'requester',
+    requestedDate: '2025-12-16T23:58:23.872481',
+    declineReason: null,
+    decisionBy: null,
+    decisionDate: null,
+    refundAmount: 31.5,
+    transactionAmount: 31.5,
+    paymentMethod: 'DIRECT_PAY',
+    partialRefundLines: []
+  }
+
+  const createWrapper = (propsOverride: Partial<{
+    refundRequestData: RefundRequestResult
+    invoiceProduct: string | null
+    isProcessing: boolean
+  }> = {}) => {
+    return mount(RefundDecisionForm, {
+      props: {
+        refundRequestData: sampleData,
+        invoiceProduct: 'BUSINESS',
+        isProcessing: false,
+        ...propsOverride
+      },
+      global: {
+        stubs: {
+          UIcon: true,
+          UBadge: {
+            template: '<span class="badge"><slot /></span>',
+            props: ['color', 'variant', 'size']
+          },
+          UModal: {
+            template: '<div v-if="open" class="modal"><slot name="header" /><slot name="body" /><slot name="footer" /></div>',
+            props: ['open']
+          },
+          UInput: true
+        }
+      }
+    })
+  }
+
+  it('should render component with header', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Refund Request')
+  })
+
+  it('should render all field labels', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('Request Date')
+    expect(wrapper.text()).toContain('Refund Type')
+    expect(wrapper.text()).toContain('Total Refund Amount')
+    expect(wrapper.text()).toContain('Refund Method')
+    expect(wrapper.text()).toContain('Notification Email')
+    expect(wrapper.text()).toContain('Reason for Refund')
+    expect(wrapper.text()).toContain('Staff Comment')
+    expect(wrapper.text()).toContain('Requested By')
+    expect(wrapper.text()).toContain('Refund Status')
+  })
+
+  it('should display refund request data values', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('Full Refund')
+    expect(wrapper.text()).toContain('$31.50')
+    expect(wrapper.text()).toContain('Refund back to Credit Card')
+    expect(wrapper.text()).toContain('test@example.com')
+    expect(wrapper.text()).toContain('test reason')
+    expect(wrapper.text()).toContain('staff comment')
+    expect(wrapper.text()).toContain('requester')
+  })
+
+  it('should show decision actions when user has permission and is not requester', () => {
+    mockCanApprove.mockReturnValue(true)
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('Decline')
+    expect(wrapper.text()).toContain('Approve')
+    expect(wrapper.text()).toContain('Cancel')
+  })
+
+  it('should hide decision actions when user lacks permission', () => {
+    mockCanApprove.mockReturnValue(false)
+    const wrapper = createWrapper()
+    expect(wrapper.text()).not.toContain('Decline')
+    expect(wrapper.text()).not.toContain('Approve')
+  })
+
+  it('should show Approved By when status is APPROVED', () => {
+    const wrapper = createWrapper({
+      refundRequestData: {
+        ...sampleData,
+        refundStatus: RefundApprovalStatus.APPROVED,
+        decisionBy: 'admin@idir',
+        decisionDate: '2025-12-17T10:00:00Z'
+      }
+    })
+    expect(wrapper.text()).toContain('Approved By')
+    expect(wrapper.text()).toContain('admin@idir')
+  })
+
+  it('should show Declined By and decline reason when status is DECLINED', () => {
+    const wrapper = createWrapper({
+      refundRequestData: {
+        ...sampleData,
+        refundStatus: RefundApprovalStatus.DECLINED,
+        decisionBy: 'admin@idir',
+        decisionDate: '2025-12-17T10:00:00Z',
+        declineReason: 'Invalid request'
+      }
+    })
+    expect(wrapper.text()).toContain('Declined By')
+    expect(wrapper.text()).toContain('Reasons for Declining')
+    expect(wrapper.text()).toContain('Invalid request')
+  })
+
+  it('should emit onApproveRefund when approve button is clicked', async () => {
+    mockCanApprove.mockReturnValue(true)
+    const wrapper = createWrapper()
+    const buttons = wrapper.findAll('button')
+    const approveBtn = buttons.find(b => b.text().includes('Approve'))
+    await approveBtn?.trigger('click')
+    expect(wrapper.emitted('onApproveRefund')).toBeTruthy()
+  })
+
+  it('should emit onCancel when cancel button is clicked', async () => {
+    mockCanApprove.mockReturnValue(true)
+    const wrapper = createWrapper()
+    const buttons = wrapper.findAll('button')
+    const cancelBtn = buttons.find(b => b.text() === 'Cancel')
+    await cancelBtn?.trigger('click')
+    expect(wrapper.emitted('onCancel')).toBeTruthy()
+  })
+})
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundRequestForm.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundRequestForm.spec.ts
new file mode 100644
index 00000000..0f0cd233
--- /dev/null
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundRequestForm.spec.ts
@@ -0,0 +1,93 @@
+import { mount } from '@vue/test-utils'
+import RefundRequestForm from '~/pages/transaction-view/[id]/RefundRequestForm.vue'
+import type { RefundLineItem } from '~/interfaces/transaction-view'
+
+vi.mock('~/utils/common-util', () => ({
+  default: {
+    formatAmount: vi.fn((amount: number) => `$${Number(amount).toFixed(2)}`),
+    formatToTwoDecimals: vi.fn((amount: number) => amount.toFixed(2)),
+    emailRules: vi.fn(() => [
+      (v: string | null) => !!v || 'Email is required',
+      (v: string | null) => !v || /.+@.+\..+/.test(v) || 'Invalid email'
+    ]),
+    getUserInfo: vi.fn(() => ({ fullName: 'Test User' }))
+  }
+}))
+
+describe('RefundRequestForm', () => {
+  const defaultProps = {
+    totalTransactionAmount: 2000,
+    refundLineItems: [] as RefundLineItem[],
+    previousRefundedAmount: 0,
+    isPartialRefundAllowed: true,
+    isFullRefundAllowed: true,
+    invoicePaymentMethod: 'DIRECT_PAY',
+    refundMethod: null
+  }
+
+  const createWrapper = (propsOverride: Partial<typeof defaultProps> = {}) => {
+    return mount(RefundRequestForm, {
+      props: { ...defaultProps, ...propsOverride },
+      global: {
+        stubs: {
+          UIcon: true,
+          UAlert: {
+            template: '<div class="alert"><slot />{{ description }}</div>',
+            props: ['color', 'variant', 'icon', 'description']
+          },
+          URadioGroup: {
+            template: '<div class="radio-group"><slot /></div>',
+            props: ['modelValue', 'items'],
+            emits: ['update:modelValue']
+          },
+          UCheckbox: true
+        }
+      }
+    })
+  }
+
+  it('should render component with header', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Refund Request')
+  })
+
+  it('should render all field labels', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('Refund Type')
+    expect(wrapper.text()).toContain('Total Refund Amount')
+    expect(wrapper.text()).toContain('Refund Method')
+    expect(wrapper.text()).toContain('Notification Email')
+    expect(wrapper.text()).toContain('Reasons for Refund')
+    expect(wrapper.text()).toContain('Staff Comment')
+  })
+
+  it('should show previous refund alert when previousRefundedAmount > 0', () => {
+    const wrapper = createWrapper({ previousRefundedAmount: 500 })
+    expect(wrapper.text()).toContain('already been refunded')
+  })
+
+  it('should not show previous refund alert when previousRefundedAmount is 0', () => {
+    const wrapper = createWrapper({ previousRefundedAmount: 0 })
+    expect(wrapper.text()).not.toContain('already been refunded')
+  })
+
+  it('should show Cancel and Review buttons', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('Cancel')
+    expect(wrapper.text()).toContain('Review and Confirm')
+  })
+
+  it('should emit onCancel when Cancel is clicked', async () => {
+    const wrapper = createWrapper()
+    const buttons = wrapper.findAll('button')
+    const cancelBtn = buttons.find(b => b.text().includes('Cancel'))
+    await cancelBtn?.trigger('click')
+    expect(wrapper.emitted('onCancel')).toBeTruthy()
+  })
+
+  it('should set refund method from invoicePaymentMethod', () => {
+    const wrapper = createWrapper({ invoicePaymentMethod: 'DIRECT_PAY' })
+    expect(wrapper.text()).toContain('Refund back to Credit Card')
+  })
+})
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts
new file mode 100644
index 00000000..c970aa0d
--- /dev/null
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts
@@ -0,0 +1,176 @@
+import { mount } from '@vue/test-utils'
+import { mockNuxtImport } from '@nuxt/test-utils/runtime'
+import RefundRequestsTable from '~/components/refund/RefundRequestsTable.vue'
+
+const mockGetNext = vi.fn()
+const mockLoadTableData = vi.fn()
+
+const { mockNavigateTo } = vi.hoisted(() => ({
+  mockNavigateTo: vi.fn()
+}))
+
+mockNuxtImport('navigateTo', () => mockNavigateTo)
+
+vi.mock('~/composables/refund/useRefundRequestTable', () => ({
+  useRefundRequestTable: () => ({
+    loadTableData: mockLoadTableData,
+    updateFilter: vi.fn(),
+    getNext: mockGetNext,
+    resetReachedEnd: vi.fn(),
+    loadState: {
+      reachedEnd: false,
+      isLoading: false,
+      isInitialLoad: true,
+      currentPage: 1
+    }
+  })
+}))
+
+vi.mock('~/composables/common/useStickyHeader', () => ({
+  useStickyHeader: () => ({
+    updateStickyHeaderHeight: vi.fn()
+  })
+}))
+
+vi.mock('~/composables/common/useStatusList', () => ({
+  usePaymentMethodsList: () => ({
+    list: [],
+    mapFn: vi.fn()
+  })
+}))
+
+vi.mock('~/stores/refund-requests-store', () => ({
+  useRefundRequestsStore: () => ({
+    tableSettings: null,
+    refundRequestsFilter: null,
+    setFilter: vi.fn(),
+    clearFilter: vi.fn(),
+    setTableSettings: vi.fn()
+  })
+}))
+
+vi.mock('@vueuse/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@vueuse/core')>()
+  return {
+    ...actual,
+    useDebounceFn: (fn: () => void) => fn,
+    useInfiniteScroll: vi.fn(),
+    createSharedComposable: (fn: () => unknown) => fn
+  }
+})
+
+vi.mock('~/utils/common-util', () => ({
+  default: {
+    formatDisplayDate: vi.fn((date: string) => date ? 'January 01, 2025' : ''),
+    formatAmount: vi.fn((amount: number | undefined) =>
+      amount !== undefined && amount !== null ? `$${amount.toFixed(2)}` : '$0.00'
+    )
+  }
+}))
+
+describe('RefundRequestsTable', () => {
+  const sampleItem: RefundRequestResult = {
+    invoiceId: 52305,
+    refundId: 1009,
+    refundStatus: 'PENDING_APPROVAL',
+    refundType: 'INVOICE',
+    refundMethod: 'Refund back to Credit Card',
+    notificationEmail: 'test@example.com',
+    refundReason: 'test reason',
+    staffComment: null,
+    requestedBy: 'requester',
+    requestedDate: '2025-12-16T23:58:23.872481',
+    declineReason: null,
+    decisionBy: null,
+    decisionDate: null,
+    refundAmount: 31.5,
+    transactionAmount: 31.5,
+    paymentMethod: 'DIRECT_PAY',
+    partialRefundLines: []
+  }
+
+  const createWrapper = (props = {}) => {
+    return mount(RefundRequestsTable, {
+      props: { ...props },
+      global: {
+        stubs: {
+          UTable: {
+            template: `
+              <div class="table">
+                <slot name="requestedDate-cell" :row="{ original: mockRow }" />
+                <slot name="transactionAmount-cell" :row="{ original: mockRow }" />
+                <slot name="refundAmount-cell" :row="{ original: mockRow }" />
+                <slot name="paymentMethod-cell" :row="{ original: mockRow }" />
+                <slot name="actions-cell" :row="{ original: mockRow }" />
+                <slot name="loading" />
+                <slot name="empty" />
+              </div>
+            `,
+            props: ['data', 'columns', 'loading', 'sticky'],
+            data: () => ({
+              mockRow: sampleItem
+            })
+          },
+          UButton: {
+            template: '<button @click="$emit(\'click\')"><slot />{{ label }}</button>',
+            props: ['label']
+          },
+          UInput: true,
+          UIcon: true,
+          DateRangeFilter: true,
+          StatusList: true
+        }
+      }
+    })
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetNext.mockResolvedValue(undefined)
+    mockLoadTableData.mockResolvedValue(undefined)
+  })
+
+  it('should render component and call loadTableData on mount', async () => {
+    const wrapper = createWrapper()
+    await flushPromises()
+    expect(wrapper.exists()).toBe(true)
+    expect(mockLoadTableData).toHaveBeenCalled()
+  })
+
+  it('should render formatted date in requestedDate cell', async () => {
+    const wrapper = createWrapper()
+    await flushPromises()
+    expect(wrapper.text()).toContain('January 01, 2025')
+  })
+
+  it('should render formatted amounts in amount cells', async () => {
+    const wrapper = createWrapper()
+    await flushPromises()
+    expect(wrapper.text()).toContain('$31.50')
+  })
+
+  it('should render payment method display name', async () => {
+    const wrapper = createWrapper()
+    await flushPromises()
+    expect(wrapper.text()).toContain('Credit Card')
+  })
+
+  it('should render View Details button', async () => {
+    const wrapper = createWrapper()
+    await flushPromises()
+    expect(wrapper.text()).toContain('View Details')
+  })
+
+  it('should navigate to details when View Details is clicked', async () => {
+    const wrapper = createWrapper()
+    await flushPromises()
+    await wrapper.find('button').trigger('click')
+    expect(mockNavigateTo).toHaveBeenCalledWith(
+      `/transaction-view/${sampleItem.invoiceId}/refund-request/${sampleItem.refundId}`
+    )
+  })
+})
+
+async function flushPromises() {
+  return new Promise(resolve => setTimeout(resolve, 0))
+}
\ No newline at end of file
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts
new file mode 100644
index 00000000..8c96dab4
--- /dev/null
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts
@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils'
+import RefundReviewForm from '~/pages/transaction-view/[id]/RefundReviewForm.vue'
+import CommonUtils from '~/utils/common-util'
+import type { RefundFormData } from '~/interfaces/transaction-view'
+
+vi.mock('~/utils/common-util', () => ({
+  default: {
+    formatDisplayDate: vi.fn(() => 'January 02, 2025 3:04 AM'),
+    formatAmount: vi.fn((amount: number) => `$${Number(amount).toFixed(2)}`)
+  }
+}))
+
+describe('RefundReviewForm', () => {
+  const sampleData: RefundFormData = {
+    refundType: 'Full Refund',
+    refundLineItems: [],
+    totalRefundAmount: 250,
+    refundMethod: 'Refund back to Credit Card',
+    notificationEmail: 'user@example.com',
+    reasonsForRefund: 'Reason',
+    staffComment: 'Comment',
+    requestedBy: 'Jane',
+    requestedTime: '2025-01-02T03:04:05Z',
+    decisionBy: null,
+    decisionTime: null
+  }
+
+  const createWrapper = (propsOverride: Partial<{
+    refundFormData: RefundFormData
+    isProcessing: boolean
+  }> = {}) => {
+    return mount(RefundReviewForm, {
+      props: {
+        refundFormData: sampleData,
+        isProcessing: false,
+        ...propsOverride
+      },
+      global: {
+        stubs: {
+          UIcon: true
+        }
+      }
+    })
+  }
+
+  it('should render component with header', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Refund Request')
+  })
+
+  it('should render all field labels', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('Request Date')
+    expect(wrapper.text()).toContain('Refund Type')
+    expect(wrapper.text()).toContain('Total Refund Amount')
+    expect(wrapper.text()).toContain('Refund Method')
+    expect(wrapper.text()).toContain('Notification Email')
+    expect(wrapper.text()).toContain('Reason for Refund')
+    expect(wrapper.text()).toContain('Staff Comment')
+    expect(wrapper.text()).toContain('Requested By')
+  })
+
+  it('should display refund form data values', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('Full Refund')
+    expect(wrapper.text()).toContain('$250.00')
+    expect(wrapper.text()).toContain('Refund back to Credit Card')
+    expect(wrapper.text()).toContain('user@example.com')
+    expect(wrapper.text()).toContain('Reason')
+    expect(wrapper.text()).toContain('Comment')
+    expect(wrapper.text()).toContain('Jane')
+    expect(wrapper.text()).toContain('January 02, 2025 3:04 AM')
+  })
+
+  it('should show Back and Submit buttons', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('Back')
+    expect(wrapper.text()).toContain('Submit Refund Request')
+  })
+
+  it('should emit onProceedToRequestForm when Back is clicked', async () => {
+    const wrapper = createWrapper()
+    const buttons = wrapper.findAll('button')
+    const backBtn = buttons.find(b => b.text().includes('Back'))
+    await backBtn?.trigger('click')
+    expect(wrapper.emitted('onProceedToRequestForm')).toBeTruthy()
+  })
+
+  it('should emit onProceedToConfirm when Submit is clicked', async () => {
+    const wrapper = createWrapper()
+    const buttons = wrapper.findAll('button')
+    const submitBtn = buttons.find(b => b.text().includes('Submit Refund Request'))
+    await submitBtn?.trigger('click')
+    expect(wrapper.emitted('onProceedToConfirm')).toBeTruthy()
+  })
+
+  it('should disable submit button when isProcessing is true', () => {
+    const wrapper = createWrapper({ isProcessing: true })
+    const buttons = wrapper.findAll('button')
+    const submitBtn = buttons.find(b => b.attributes('disabled') !== undefined)
+    expect(submitBtn?.exists()).toBe(true)
+  })
+})
\ No newline at end of file
diff --git a/web/pay-ui/tests/unit/components/TransactionView/TransactionDetails.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/TransactionDetails.spec.ts
new file mode 100644
index 00000000..e6bfa449
--- /dev/null
+++ b/web/pay-ui/tests/unit/components/TransactionView/TransactionDetails.spec.ts
@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils'
+import TransactionDetails from '~/pages/transaction-view/[id]/TransactionDetails.vue'
+import type { TransactionData } from '~/interfaces/transaction-view'
+import { InvoiceStatus } from '~/utils/constants'
+
+const mockDownloadReceipt = vi.fn()
+
+vi.mock('~/composables/transactions/useTransactionView', () => ({
+  useTransactionView: () => ({
+    downloadReceipt: mockDownloadReceipt
+  })
+}))
+
+vi.mock('~/utils/common-util', () => ({
+  default: {
+    formatDisplayDate: vi.fn(() => 'January 03, 2025 12:00 AM')
+  }
+}))
+
+describe('TransactionDetails', () => {
+  const sampleData: TransactionData = {
+    invoiceId: 1234,
+    transactionDate: '2025-01-02T00:00:00Z',
+    invoiceStatusCode: InvoiceStatus.PAID,
+    invoiceCreatedOn: '2025-01-03T00:00:00Z',
+    invoiceReferenceId: 'INV-123',
+    transactionAmount: 100,
+    applicationName: 'Name Request',
+    applicationType: 'NR',
+    businessIdentifier: 'NR 1234567',
+    applicationDetails: [
+      { label: 'NR Number:', value: 'NR_NUMBER' },
+      { label: 'Name Choices:', value: '' }
+    ],
+    routingSlip: null,
+    latestRefundId: null,
+    latestRefundStatus: null,
+    partialRefundable: undefined,
+    fullRefundable: undefined
+  }
+
+  const createWrapper = (propsOverride: Partial<TransactionData> = {}) => {
+    return mount(TransactionDetails, {
+      props: {
+        transactionData: { ...sampleData, ...propsOverride }
+      },
+      global: {
+        stubs: {
+          UIcon: true
+        }
+      }
+    })
+  }
+
+  it('should render component with header', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Transaction Details')
+  })
+
+  it('should display transaction data values', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).toContain('Name Request')
+    expect(wrapper.text()).toContain('NR')
+    expect(wrapper.text()).toContain('NR 1234567')
+    expect(wrapper.text()).toContain('1234')
+    expect(wrapper.text()).toContain('INV-123')
+    expect(wrapper.text()).toContain('January 03, 2025 12:00 AM')
+    expect(wrapper.text()).toContain('NR Number:')
+    expect(wrapper.text()).toContain('NR_NUMBER')
+  })
+
+  it('should call downloadReceipt when receipt button is clicked', async () => {
+    const wrapper = createWrapper({ invoiceStatusCode: InvoiceStatus.PAID })
+    await wrapper.find('button').trigger('click')
+    expect(mockDownloadReceipt).toHaveBeenCalledWith(
+      expect.objectContaining({ invoiceId: sampleData.invoiceId })
+    )
+  })
+
+  it('should show routing slip column when present', () => {
+    const wrapper = createWrapper({ routingSlip: 'RS-9876' })
+    expect(wrapper.text()).toContain('Routing Slip Number')
+    expect(wrapper.text()).toContain('RS-9876')
+  })
+
+  it('should not show routing slip column when absent', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.text()).not.toContain('Routing Slip Number')
+  })
+})

From a499b20b2dbc7f027c51278a0752889da8de0c41 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 07:06:55 -0800
Subject: [PATCH 02/12] lint

---
 .../transactions/TransactionsDataTable.vue    |  6 ++---
 .../app/composables/common/useBaseTable.ts    |  2 +-
 .../transactions/useTransactionView.ts        |  1 -
 .../[id]/RefundDecisionForm.vue               |  4 ++--
 .../[id]/RefundRequestForm.vue                | 22 ++++++++++++++-----
 .../transaction-view/[id]/[...details].vue    |  2 +-
 web/pay-ui/app/pages/transactions/index.vue   |  3 ++-
 web/pay-ui/app/utils/common-util.ts           |  4 ++--
 .../RefundDecisionForm.spec.ts                |  3 ++-
 .../RefundRequestsTable.spec.ts               |  2 +-
 .../TransactionView/RefundReviewForm.spec.ts  |  3 +--
 11 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
index 88c5da3d..fde94471 100644
--- a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
+++ b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
@@ -676,8 +676,7 @@ watch(() => transactions.results, () => {
                 v-if="columnVisibility.total"
                 class="text-left table-filter-input"
                 scope="col"
-              >
-              </th>
+              />
               <th
                 v-if="columnVisibility.id"
                 class="text-left table-filter-input"
@@ -751,8 +750,7 @@ watch(() => transactions.results, () => {
           </template>
 
           <template #accountName-cell="{ row }">
-            <template v-if="isDropdownRow(row)">
-            </template>
+            <template v-if="isDropdownRow(row)" />
             <span v-else>
               {{ asTransaction(row).paymentAccount?.accountName || '-' }}
             </span>
diff --git a/web/pay-ui/app/composables/common/useBaseTable.ts b/web/pay-ui/app/composables/common/useBaseTable.ts
index e31347fc..6fb466ab 100644
--- a/web/pay-ui/app/composables/common/useBaseTable.ts
+++ b/web/pay-ui/app/composables/common/useBaseTable.ts
@@ -98,7 +98,7 @@ export function useBaseTable<
   R,
   S extends BaseTableState<T, Record<string, string>> = BaseTableState<T>
 >(options: UseBaseTableOptions<T, R, S>) {
-  const { state, buildPayload, fetchData, extractItems, extractTotal, extractStateTotal, onLoadStart, 
+  const { state, buildPayload, fetchData, extractItems, extractTotal, extractStateTotal, onLoadStart,
     onLoadEnd } = options
 
   const { loadState, getNext, reset: resetReachedEnd, currentPage } = useInfiniteScroll<T>({
diff --git a/web/pay-ui/app/composables/transactions/useTransactionView.ts b/web/pay-ui/app/composables/transactions/useTransactionView.ts
index 0bb830bc..08776891 100644
--- a/web/pay-ui/app/composables/transactions/useTransactionView.ts
+++ b/web/pay-ui/app/composables/transactions/useTransactionView.ts
@@ -1,5 +1,4 @@
 import CommonUtils from '@/utils/common-util'
-import { EFTRefundStatus } from '~/utils'
 
 export function useTransactionView() {
   const nuxtApp = useNuxtApp()
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/RefundDecisionForm.vue b/web/pay-ui/app/pages/transaction-view/[id]/RefundDecisionForm.vue
index 00a9589f..da7a8e6d 100644
--- a/web/pay-ui/app/pages/transaction-view/[id]/RefundDecisionForm.vue
+++ b/web/pay-ui/app/pages/transaction-view/[id]/RefundDecisionForm.vue
@@ -28,8 +28,8 @@ const isDeclineReasonValid = computed(() => {
 
 function canApproveOrDeclineRefund(): boolean {
   if (props.invoiceProduct) {
-    return CommonUtils.canApproveDeclineProductRefund(props.invoiceProduct.toLowerCase() +
-      RolePattern.ProductRefundApprover)
+    return CommonUtils.canApproveDeclineProductRefund(props.invoiceProduct.toLowerCase()
+      + RolePattern.ProductRefundApprover)
   }
   return false
 }
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/RefundRequestForm.vue b/web/pay-ui/app/pages/transaction-view/[id]/RefundRequestForm.vue
index 99663bc9..89d59a99 100644
--- a/web/pay-ui/app/pages/transaction-view/[id]/RefundRequestForm.vue
+++ b/web/pay-ui/app/pages/transaction-view/[id]/RefundRequestForm.vue
@@ -106,7 +106,7 @@ function onRefundEntireItemRequestedChange(value: boolean, index: number) {
       lineItem.filingFeesRequested = CommonUtils.formatToTwoDecimals(Number(lineItem.filingFees))
       lineItem.serviceFeesRequested = null
       lineItem.priorityFeesRequested = CommonUtils.formatToTwoDecimals(Number(lineItem.priorityFees))
-      lineItem.futureEffectiveFeesRequested = CommonUtils.formatToTwoDecimals(Number(lineItem.futureEffectiveFees))  
+      lineItem.futureEffectiveFeesRequested = CommonUtils.formatToTwoDecimals(Number(lineItem.futureEffectiveFees))
     }
   }
   calculateTotalRequestedAmount()
@@ -201,7 +201,9 @@ watch(() => props.refundMethod, (newData) => {
           color="error"
           variant="outline"
           icon="i-mdi-alert-circle"
-          :description="`This invoice has already been refunded for an amount of ${CommonUtils.formatAmount(previousRefundedAmount)} previously.`"
+          :description="`This invoice has already been refunded for an amount of ${
+            CommonUtils.formatAmount(previousRefundedAmount)
+          } previously.`"
         />
 
         <form @submit.prevent="onReviewBtnClick">
@@ -213,8 +215,12 @@ watch(() => props.refundMethod, (newData) => {
                 <URadioGroup
                   v-model="refundFormData.refundType"
                   :items="[
-                    { label: 'Full Refund', value: RefundType.FULL_REFUND, disabled: formDisabled || !isFullRefundAllowed },
-                    { label: 'Partial Refund', value: RefundType.PARTIAL_REFUND, disabled: formDisabled || !isPartialRefundAllowed }
+                    { label: 'Full Refund',
+                      value: RefundType.FULL_REFUND,
+                      disabled: formDisabled || !isFullRefundAllowed },
+                    { label: 'Partial Refund',
+                      value: RefundType.PARTIAL_REFUND,
+                      disabled: formDisabled || !isPartialRefundAllowed }
                   ]"
                   @update:model-value="onRefundTypeChange"
                 />
@@ -320,10 +326,14 @@ watch(() => props.refundMethod, (newData) => {
                       Future Effective Fees / {{ CommonUtils.formatAmount(Number(lineItem.futureEffectiveFees)) }}
                     </p>
                     <p
-                      v-if="getAmountValidationError(lineItem.futureEffectiveFeesRequested, lineItem.futureEffectiveFees)"
+                      v-if="getAmountValidationError(
+                        lineItem.futureEffectiveFeesRequested,
+                        lineItem.futureEffectiveFees
+                      )"
                       class="text-xs text-red-500 mt-1"
                     >
-                      {{ getAmountValidationError(lineItem.futureEffectiveFeesRequested, lineItem.futureEffectiveFees) }}
+                      {{ getAmountValidationError(lineItem.futureEffectiveFeesRequested,
+                                                  lineItem.futureEffectiveFees) }}
                     </p>
                   </div>
                 </div>
diff --git a/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue b/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
index 2214cc94..c1172858 100644
--- a/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
+++ b/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
@@ -257,7 +257,7 @@ function getRefundPayload() {
   const refundRevenues: RefundRevenueType[] = []
   if (state.refundFormData.refundType === RefundType.PARTIAL_REFUND) {
     const refundLineItems = state.refundFormData.refundLineItems
-    refundLineItems?.forEach(refundLineItem => {
+    refundLineItems?.forEach((refundLineItem) => {
       const feeTypes = [
         { key: 'filingFeesRequested', type: RefundLineTypes.BASE_FEES },
         { key: 'priorityFeesRequested', type: RefundLineTypes.PRIORITY_FEES },
diff --git a/web/pay-ui/app/pages/transactions/index.vue b/web/pay-ui/app/pages/transactions/index.vue
index d5a1c830..e9cebb39 100644
--- a/web/pay-ui/app/pages/transactions/index.vue
+++ b/web/pay-ui/app/pages/transactions/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-const { t } = useI18n()
 import { useTransactionsStore } from '@/stores/transactions-store'
 
+const { t } = useI18n()
+
 const config = useRuntimeConfig()
 const authWebUrl = (config.public as { authWebUrl?: string }).authWebUrl || ''
 const transactionStore = useTransactionsStore()
diff --git a/web/pay-ui/app/utils/common-util.ts b/web/pay-ui/app/utils/common-util.ts
index 7f9e618d..a53ecd69 100644
--- a/web/pay-ui/app/utils/common-util.ts
+++ b/web/pay-ui/app/utils/common-util.ts
@@ -178,12 +178,12 @@ function getUserInfo() {
   return auth.authUser.value
 }
 
-function canInitiateProductRefund (productRole: string) {
+function canInitiateProductRefund(productRole: string) {
   const validRoles = [Role.ProductRefundRequester, productRole]
   return verifyRoles(validRoles)
 }
 
-function canApproveDeclineProductRefund (productRole: string) {
+function canApproveDeclineProductRefund(productRole: string) {
   const validRoles = [Role.ProductRefundApprover, productRole]
   return verifyRoles(validRoles)
 }
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts
index d0d19358..e1552c74 100644
--- a/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts
@@ -74,7 +74,8 @@ describe('RefundDecisionForm', () => {
             props: ['color', 'variant', 'size']
           },
           UModal: {
-            template: '<div v-if="open" class="modal"><slot name="header" /><slot name="body" /><slot name="footer" /></div>',
+            template: '<div v-if="open" class="modal">'
+              + '<slot name="header" /><slot name="body" /><slot name="footer" /></div>',
             props: ['open']
           },
           UInput: true
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts
index c970aa0d..d0dc7156 100644
--- a/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts
@@ -173,4 +173,4 @@ describe('RefundRequestsTable', () => {
 
 async function flushPromises() {
   return new Promise(resolve => setTimeout(resolve, 0))
-}
\ No newline at end of file
+}
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts
index 8c96dab4..d63baebb 100644
--- a/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts
@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils'
 import RefundReviewForm from '~/pages/transaction-view/[id]/RefundReviewForm.vue'
-import CommonUtils from '~/utils/common-util'
 import type { RefundFormData } from '~/interfaces/transaction-view'
 
 vi.mock('~/utils/common-util', () => ({
@@ -101,4 +100,4 @@ describe('RefundReviewForm', () => {
     const submitBtn = buttons.find(b => b.attributes('disabled') !== undefined)
     expect(submitBtn?.exists()).toBe(true)
   })
-})
\ No newline at end of file
+})

From f9a6756f90af68f5343263a0435176c40b51dc7e Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 07:53:33 -0800
Subject: [PATCH 03/12] fix breadcrumb

---
 .../app/pages/transaction-view/[id]/[...details].vue   | 10 ++++++++++
 web/pay-ui/i18n/locales/en-CA.ts                       |  5 ++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue b/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
index c1172858..9a2019b3 100644
--- a/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
+++ b/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
@@ -369,6 +369,16 @@ onMounted(async () => {
   if (refundId.value) {
     await fetchRefundRequest(refundId.value)
   }
+
+  setBreadcrumbs([
+    {
+      label: t('page.transactionView.breadcrumb.transactions'),
+      to: '/transactions'
+    },
+    {
+      label: t(getTransactionPageTitle())
+    }
+  ])
 })
 </script>
 
diff --git a/web/pay-ui/i18n/locales/en-CA.ts b/web/pay-ui/i18n/locales/en-CA.ts
index 75014383..0a03a60e 100644
--- a/web/pay-ui/i18n/locales/en-CA.ts
+++ b/web/pay-ui/i18n/locales/en-CA.ts
@@ -227,7 +227,10 @@ export default {
     },
     transactionView: {
       transactionRefundTitle: 'Transaction Refund',
-      transactionInformationTitle: 'Transaction Information'
+      transactionInformationTitle: 'Transaction Information',
+      breadcrumb: {
+        transactions: 'Transaction Records'
+      }
     },
     createRoutingSlip: {
       title: 'Add Routing Slip - BC Business Registry FAS',

From 509591145898d259d108f0f9cf6790fb92ba9b79 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 08:17:30 -0800
Subject: [PATCH 04/12] role check fixes, revert tab logic change that is no
 longer needed

---
 .../app/pages/transaction-view/[id]/[...details].vue      | 2 +-
 web/pay-ui/app/pages/transactions/index.vue               | 6 ++++--
 web/pay-ui/app/utils/common-util.ts                       | 8 +++++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue b/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
index 9a2019b3..2f644cc4 100644
--- a/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
+++ b/web/pay-ui/app/pages/transaction-view/[id]/[...details].vue
@@ -26,7 +26,7 @@ const refundId = computed(() => details.value[1] ? Number(details.value[1]) : nu
 definePageMeta({
   layout: 'connect-auth',
   middleware: ['pay-auth'],
-  allowedRoles: [Role.ProductRefundViewer],
+  allowedRoles: [Role.ViewAllTransactions, Role.ProductRefundViewer],
   hideBreadcrumbs: false
 })
 
diff --git a/web/pay-ui/app/pages/transactions/index.vue b/web/pay-ui/app/pages/transactions/index.vue
index e9cebb39..2f5b7da0 100644
--- a/web/pay-ui/app/pages/transactions/index.vue
+++ b/web/pay-ui/app/pages/transactions/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useTransactionsStore } from '@/stores/transactions-store'
+import CommonUtil from '~/utils/common-util'
 
 const { t } = useI18n()
 
@@ -70,6 +71,7 @@ onMounted(() => {
           All
         </button>
         <button
+          v-if="CommonUtil.isProductRefundViewer()"
           :class="['tab-button', { active: tab === 1 }]"
           @click="tab = 1; onTabChange()"
         >
@@ -82,12 +84,12 @@ onMounted(() => {
     </div>
 
     <div class="tab-content">
-      <div v-show="tab === 0">
+      <div v-if="tab === 0">
         <TransactionsDataTable
           :extended="true"
         />
       </div>
-      <div v-show="tab === 1">
+      <div v-else>
         <RefundRequestsTable />
       </div>
     </div>
diff --git a/web/pay-ui/app/utils/common-util.ts b/web/pay-ui/app/utils/common-util.ts
index a53ecd69..2ac34860 100644
--- a/web/pay-ui/app/utils/common-util.ts
+++ b/web/pay-ui/app/utils/common-util.ts
@@ -178,6 +178,11 @@ function getUserInfo() {
   return auth.authUser.value
 }
 
+function isProductRefundViewer() {
+  const productRefundViewerRole: Role[] = [Role.ProductRefundViewer]
+  return verifyRoles(productRefundViewerRole)
+}
+
 function canInitiateProductRefund(productRole: string) {
   const validRoles = [Role.ProductRefundRequester, productRole]
   return verifyRoles(validRoles)
@@ -342,5 +347,6 @@ export default {
   getIndexedTag,
   isReversable,
   canInitiateProductRefund,
-  canApproveDeclineProductRefund
+  canApproveDeclineProductRefund,
+  isProductRefundViewer
 }

From 8aea5faac48dc4be0cb6f454172bb0c74cbae888 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 10:08:24 -0800
Subject: [PATCH 05/12] date format fix

---
 .../app/components/transactions/TransactionsDataTable.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
index fde94471..8b20a58c 100644
--- a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
+++ b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
@@ -369,7 +369,7 @@ function getDropdownItems(item: Transaction): DropdownItem[] {
 }
 
 function displayDate(val: string | Date): string {
-  return CommonUtils.formatDisplayDate(val, 'MMMM dd, yyyy')
+  return CommonUtils.formatDisplayDate(val, 'MMM dd, yyyy h:mm a')
 }
 
 function isCompletedOrPaid(statusCode: InvoiceStatus): boolean {

From f36641654545dfc15279648a27a88ef153545fd9 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 10:26:36 -0800
Subject: [PATCH 06/12] fix test router warnings - stub

---
 .../unit/components/TransactionView/InvoiceRefundHistory.spec.ts | 1 +
 .../tests/unit/components/TransactionView/PaymentDetails.spec.ts | 1 +
 .../unit/components/TransactionView/RefundDecisionForm.spec.ts   | 1 +
 .../unit/components/TransactionView/RefundRequestForm.spec.ts    | 1 +
 .../unit/components/TransactionView/RefundRequestsTable.spec.ts  | 1 +
 .../unit/components/TransactionView/RefundReviewForm.spec.ts     | 1 +
 .../unit/components/TransactionView/TransactionDetails.spec.ts   | 1 +
 7 files changed, 7 insertions(+)

diff --git a/web/pay-ui/tests/unit/components/TransactionView/InvoiceRefundHistory.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/InvoiceRefundHistory.spec.ts
index 5a218fe0..ca966d98 100644
--- a/web/pay-ui/tests/unit/components/TransactionView/InvoiceRefundHistory.spec.ts
+++ b/web/pay-ui/tests/unit/components/TransactionView/InvoiceRefundHistory.spec.ts
@@ -34,6 +34,7 @@ describe('InvoiceRefundHistory', () => {
       props: { refundHistoryData },
       global: {
         stubs: {
+          NuxtLink: { template: '<a><slot /></a>' },
           UIcon: true,
           UButton: {
             template: '<button @click="$emit(\'click\')">{{ label }}</button>',
diff --git a/web/pay-ui/tests/unit/components/TransactionView/PaymentDetails.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/PaymentDetails.spec.ts
index 74b926bd..cdadc645 100644
--- a/web/pay-ui/tests/unit/components/TransactionView/PaymentDetails.spec.ts
+++ b/web/pay-ui/tests/unit/components/TransactionView/PaymentDetails.spec.ts
@@ -26,6 +26,7 @@ describe('PaymentDetails', () => {
       },
       global: {
         stubs: {
+          NuxtLink: { template: '<a><slot /></a>' },
           UIcon: true
         }
       }
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts
index e1552c74..6a59023e 100644
--- a/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundDecisionForm.spec.ts
@@ -68,6 +68,7 @@ describe('RefundDecisionForm', () => {
       },
       global: {
         stubs: {
+          NuxtLink: { template: '<a><slot /></a>' },
           UIcon: true,
           UBadge: {
             template: '<span class="badge"><slot /></span>',
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundRequestForm.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundRequestForm.spec.ts
index 0f0cd233..c7d4ad13 100644
--- a/web/pay-ui/tests/unit/components/TransactionView/RefundRequestForm.spec.ts
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundRequestForm.spec.ts
@@ -30,6 +30,7 @@ describe('RefundRequestForm', () => {
       props: { ...defaultProps, ...propsOverride },
       global: {
         stubs: {
+          NuxtLink: { template: '<a><slot /></a>' },
           UIcon: true,
           UAlert: {
             template: '<div class="alert"><slot />{{ description }}</div>',
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts
index d0dc7156..9e6e4593 100644
--- a/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundRequestsTable.spec.ts
@@ -94,6 +94,7 @@ describe('RefundRequestsTable', () => {
       props: { ...props },
       global: {
         stubs: {
+          NuxtLink: { template: '<a><slot /></a>' },
           UTable: {
             template: `
               <div class="table">
diff --git a/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts
index d63baebb..e2ebd98e 100644
--- a/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts
+++ b/web/pay-ui/tests/unit/components/TransactionView/RefundReviewForm.spec.ts
@@ -36,6 +36,7 @@ describe('RefundReviewForm', () => {
       },
       global: {
         stubs: {
+          NuxtLink: { template: '<a><slot /></a>' },
           UIcon: true
         }
       }
diff --git a/web/pay-ui/tests/unit/components/TransactionView/TransactionDetails.spec.ts b/web/pay-ui/tests/unit/components/TransactionView/TransactionDetails.spec.ts
index e6bfa449..2ff6105b 100644
--- a/web/pay-ui/tests/unit/components/TransactionView/TransactionDetails.spec.ts
+++ b/web/pay-ui/tests/unit/components/TransactionView/TransactionDetails.spec.ts
@@ -46,6 +46,7 @@ describe('TransactionDetails', () => {
       },
       global: {
         stubs: {
+          NuxtLink: { template: '<a><slot /></a>' },
           UIcon: true
         }
       }

From 8704522a27ec4fa3c13d1f1ea8532649740d65e0 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 10:44:09 -0800
Subject: [PATCH 07/12] fix shortnamelookup test

---
 web/pay-ui/app/components/eft/ShortNameLookup.vue         | 2 +-
 .../tests/unit/components/eft/ShortNameLookup.spec.ts     | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/pay-ui/app/components/eft/ShortNameLookup.vue b/web/pay-ui/app/components/eft/ShortNameLookup.vue
index 35593bd3..5b1d9f0e 100644
--- a/web/pay-ui/app/components/eft/ShortNameLookup.vue
+++ b/web/pay-ui/app/components/eft/ShortNameLookup.vue
@@ -101,7 +101,7 @@ function isShortNameLinkedOrPending(account: EftAccount): boolean {
   return account.statusCode === ShortNameStatus.LINKED || account.statusCode === ShortNameStatus.PENDING
 }
 
-defineExpose({ clearSelection: clearSelectionSilent })
+defineExpose({ clearSelection: clearSelectionSilent, isShortNameLinkedOrPending })
 </script>
 
 <template>
diff --git a/web/pay-ui/tests/unit/components/eft/ShortNameLookup.spec.ts b/web/pay-ui/tests/unit/components/eft/ShortNameLookup.spec.ts
index 5e2bc2e2..d7a370a7 100644
--- a/web/pay-ui/tests/unit/components/eft/ShortNameLookup.spec.ts
+++ b/web/pay-ui/tests/unit/components/eft/ShortNameLookup.spec.ts
@@ -147,12 +147,12 @@ describe('ShortNameLookup', () => {
     })
 
     const vm = wrapper.vm as unknown as {
-      isAccountDisabled: (account: { statusCode?: string }) => boolean
+      isShortNameLinkedOrPending: (account: { statusCode?: string }) => boolean
     }
 
-    expect(vm.isAccountDisabled({ statusCode: ShortNameStatus.LINKED })).toBe(true)
-    expect(vm.isAccountDisabled({ statusCode: ShortNameStatus.PENDING })).toBe(true)
-    expect(vm.isAccountDisabled({ statusCode: undefined })).toBe(false)
+    expect(vm.isShortNameLinkedOrPending({ statusCode: ShortNameStatus.LINKED })).toBe(true)
+    expect(vm.isShortNameLinkedOrPending({ statusCode: ShortNameStatus.PENDING })).toBe(true)
+    expect(vm.isShortNameLinkedOrPending({ statusCode: undefined })).toBe(false)
   })
 
   it('should not allow selecting linked accounts', () => {

From 4d3c8b09a5844e5f91613dbbe7f4820552049698 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 10:59:56 -0800
Subject: [PATCH 08/12] ShortNamePaymentHistory test fixes

---
 .../eft/ShortNamePaymentHistory.vue           |  2 +-
 .../eft/ShortNamePaymentHistory.spec.ts       | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/web/pay-ui/app/components/eft/ShortNamePaymentHistory.vue b/web/pay-ui/app/components/eft/ShortNamePaymentHistory.vue
index 386ab52e..3e4e174c 100644
--- a/web/pay-ui/app/components/eft/ShortNamePaymentHistory.vue
+++ b/web/pay-ui/app/components/eft/ShortNamePaymentHistory.vue
@@ -200,7 +200,7 @@ function navigateToRefundDetail(item: ShortNameHistoryItem) {
   if (!refundId) {
     return
   }
-  navigateTo(`/eft/shortname-details/${props.shortNameId}/refund?eftRefundId=${refundId}`)
+  navigateTo({ path: `/eft/shortname-details/${props.shortNameId}/refund`, query: { eftRefundId: String(refundId) } })
 }
 
 function canShowReverseButton(item: ShortNameHistoryItem): boolean {
diff --git a/web/pay-ui/tests/unit/components/eft/ShortNamePaymentHistory.spec.ts b/web/pay-ui/tests/unit/components/eft/ShortNamePaymentHistory.spec.ts
index b93c6136..3d9c7626 100644
--- a/web/pay-ui/tests/unit/components/eft/ShortNamePaymentHistory.spec.ts
+++ b/web/pay-ui/tests/unit/components/eft/ShortNamePaymentHistory.spec.ts
@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 import ShortNamePaymentHistory from '~/components/eft/ShortNamePaymentHistory.vue'
+import CommonUtils from '~/utils/common-util'
 import {
   ShortNameHistoryType,
   EFTRefundMethod,
@@ -52,7 +53,8 @@ vi.mock('~/utils/common-util', () => ({
     formatAmount: vi.fn((amount: number | undefined) =>
       amount !== undefined && amount !== null ? `$${amount.toFixed(2)}` : '$0.00'
     ),
-    formatAccountDisplayName: vi.fn(() => 'Test Account')
+    formatAccountDisplayName: vi.fn(() => 'Test Account'),
+    isEftRefundApprover: vi.fn(() => false)
   }
 }))
 
@@ -208,12 +210,15 @@ describe('ShortNamePaymentHistory', () => {
     })
 
     it.each([
-      [ShortNameHistoryType.SN_REFUND_APPROVED, { eftRefundId: 123 }, true],
-      [ShortNameHistoryType.FUNDS_RECEIVED, { eftRefundId: 123 }, false],
-      [ShortNameHistoryType.SN_REFUND_APPROVED, {}, false]
-    ])('canShowRefundDetail should handle %s', (transactionType, extraProps, expected) => {
-      expect(vm.canShowRefundDetail({ transactionType, ...extraProps })).toBe(expected)
-    })
+      [ShortNameHistoryType.SN_REFUND_APPROVED, { eftRefundId: 123 }, true, true],
+      [ShortNameHistoryType.SN_REFUND_APPROVED, { eftRefundId: 123 }, false, false],
+      [ShortNameHistoryType.FUNDS_RECEIVED, { eftRefundId: 123 }, true, false],
+      [ShortNameHistoryType.SN_REFUND_APPROVED, {}, true, false]
+    ])('canShowRefundDetail(%s) with isApprover=%s should return %s',
+      (transactionType, extraProps, isApprover, expected) => {
+        vi.mocked(CommonUtils.isEftRefundApprover).mockReturnValue(isApprover)
+        expect(vm.canShowRefundDetail({ transactionType, ...extraProps })).toBe(expected)
+      })
 
     it.each([
       [

From c36f3a725b265d4e93c48e8cc3fb389ac2660338 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 13:38:53 -0800
Subject: [PATCH 09/12] fix transactions filters, update filter dropdown list
 to expand to fit contents

---
 .../app/components/common/StatusList.vue      |  2 +-
 .../transactions/TransactionsDataTable.vue    | 44 +++++++++++++++----
 .../app/composables/common/useStatusList.ts   | 28 ++++++++++++
 web/pay-ui/app/utils/invoice-status-util.ts   | 14 ++++++
 web/pay-ui/i18n/locales/en-CA.ts              |  2 +-
 5 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/web/pay-ui/app/components/common/StatusList.vue b/web/pay-ui/app/components/common/StatusList.vue
index 7dab1337..597b9154 100644
--- a/web/pay-ui/app/components/common/StatusList.vue
+++ b/web/pay-ui/app/components/common/StatusList.vue
@@ -42,7 +42,7 @@ function clearSelection() {
       :class="{ '!pr-14': model }"
       :ui="{
         placeholder: 'placeholder',
-        content: 'wide-dropdown',
+        content: 'wide-dropdown min-w-max',
         trailing: model ? '!pr-8' : ''
       }"
     />
diff --git a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
index 8b20a58c..ab784cf5 100644
--- a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
+++ b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
@@ -13,7 +13,7 @@ import { RolePattern } from '@/enums/fas-roles'
 import { useTransactionsTable } from '@/composables/transactions/useTransactionsTable'
 import { useTransactionsStore } from '@/stores/transactions-store'
 import { useStickyHeader } from '@/composables/common/useStickyHeader'
-import { usePaymentMethodsList } from '@/composables/common/useStatusList'
+import { usePaymentMethodsList, useProductList, useInvoiceStatusList } from '@/composables/common/useStatusList'
 import { useDebounceFn, useInfiniteScroll } from '@vueuse/core'
 import type {
   Transaction,
@@ -50,6 +50,16 @@ const {
   mapFn: paymentMethodMapFn
 } = usePaymentMethodsList()
 
+const {
+  list: productList,
+  mapFn: productMapFn
+} = useProductList()
+
+const {
+  list: invoiceStatusList,
+  mapFn: invoiceStatusMapFn
+} = useInvoiceStatusList()
+
 setViewAll(props.extended)
 
 const expandedRows = ref(new Set<number>())
@@ -108,6 +118,22 @@ const paymentMethodModel = computed({
   }
 })
 
+const productModel = computed({
+  get: () => fp.value.product || '',
+  set: (value: string) => {
+    fp.value.product = value || null
+    loadTransactionList('product', value || '')
+  }
+})
+
+const statusCodeModel = computed({
+  get: () => fp.value.statusCode || '',
+  set: (value: string) => {
+    fp.value.statusCode = value || null
+    loadTransactionList('statusCode', value || '')
+  }
+})
+
 const visibleColumns = computed(() => {
   return searchTransactionsTableHeaders.value.filter(
     (f: { hideInSearchColumnFilter?: boolean }) => {
@@ -587,12 +613,12 @@ watch(() => transactions.results, () => {
                 class="text-left table-filter-input"
                 scope="col"
               >
-                <UInput
-                  v-model="fp.product"
+                <StatusList
+                  v-model="productModel"
+                  :list="productList"
+                  :map-fn="(productMapFn as any)"
                   placeholder="Application Type"
-                  size="md"
                   class="w-full"
-                  @update:model-value="debouncedLoadList('product', $event ?? '')"
                 />
               </th>
               <th
@@ -721,12 +747,12 @@ watch(() => transactions.results, () => {
                 class="text-left table-filter-input"
                 scope="col"
               >
-                <UInput
-                  v-model="fp.statusCode"
+                <StatusList
+                  v-model="statusCodeModel"
+                  :list="invoiceStatusList"
+                  :map-fn="(invoiceStatusMapFn as any)"
                   placeholder="Status"
-                  size="md"
                   class="w-full"
-                  @update:model-value="debouncedLoadList('statusCode', $event ?? '')"
                 />
               </th>
               <th
diff --git a/web/pay-ui/app/composables/common/useStatusList.ts b/web/pay-ui/app/composables/common/useStatusList.ts
index 18205feb..25ce0745 100644
--- a/web/pay-ui/app/composables/common/useStatusList.ts
+++ b/web/pay-ui/app/composables/common/useStatusList.ts
@@ -3,6 +3,8 @@ import type { SelectItem } from '@nuxt/ui'
 import { ChequeRefundStatus } from '~/utils/constants'
 import ShortNameUtils from '~/utils/short-name-util'
 import { PaymentMethodSelectItems } from '~/enums'
+import { productDisplay } from '~/utils/product-util'
+import { PaymentStatusList } from '~/utils/invoice-status-util'
 
 interface StatusListProps {
   value?: string
@@ -133,3 +135,29 @@ export function usePaymentMethodsList() {
     mapFn
   }
 }
+
+// Helper to get invoice status list
+export function useInvoiceStatusList() {
+  const list = computed(() => PaymentStatusList)
+
+  const mapFn = (item: SelectItem): SelectItem => item
+
+  return {
+    list,
+    mapFn
+  }
+}
+
+// Helper to get product (Application Type) list
+export function useProductList() {
+  const list = computed(() =>
+    Object.entries(productDisplay).map(([value, label]) => ({ label, value }))
+  )
+
+  const mapFn = (item: SelectItem): SelectItem => item
+
+  return {
+    list,
+    mapFn
+  }
+}
diff --git a/web/pay-ui/app/utils/invoice-status-util.ts b/web/pay-ui/app/utils/invoice-status-util.ts
index 15e53cf1..afa069e1 100644
--- a/web/pay-ui/app/utils/invoice-status-util.ts
+++ b/web/pay-ui/app/utils/invoice-status-util.ts
@@ -22,6 +22,20 @@ export const invoiceStatusDisplay = {
   [InvoiceStatus.PARTIALLY_REFUNDED]: 'Partially Refunded'
 }
 
+export const PaymentStatusList = [
+  { label: invoiceStatusDisplay[InvoiceStatus.CANCELLED], value: InvoiceStatus.CANCELLED },
+  { label: invoiceStatusDisplay[InvoiceStatus.PAID], value: InvoiceStatus.PAID },
+  { label: invoiceStatusDisplay[InvoiceStatus.CREATED], value: InvoiceStatus.CREATED },
+  { label: invoiceStatusDisplay[InvoiceStatus.CREDITED], value: InvoiceStatus.CREDITED },
+  { label: invoiceStatusDisplay[InvoiceStatus.PENDING], value: InvoiceStatus.PENDING },
+  { label: invoiceStatusDisplay[InvoiceStatus.APPROVED], value: InvoiceStatus.APPROVED },
+  { label: invoiceStatusDisplay[InvoiceStatus.REFUNDED], value: InvoiceStatus.REFUNDED },
+  { label: invoiceStatusDisplay[InvoiceStatus.REFUND_REQUESTED], value: InvoiceStatus.REFUND_REQUESTED },
+  // These are FE only on the backend they are PAID
+  { label: invoiceStatusDisplay[InvoiceStatus.PARTIALLY_CREDITED], value: InvoiceStatus.PARTIALLY_CREDITED },
+  { label: invoiceStatusDisplay[InvoiceStatus.PARTIALLY_REFUNDED], value: InvoiceStatus.PARTIALLY_REFUNDED }
+]
+
 export const getInvoiceStatusDisplayName = (status: string): string => {
   return invoiceStatusDisplay[status as InvoiceStatus] || status
 }
diff --git a/web/pay-ui/i18n/locales/en-CA.ts b/web/pay-ui/i18n/locales/en-CA.ts
index 0a03a60e..8145fb4a 100644
--- a/web/pay-ui/i18n/locales/en-CA.ts
+++ b/web/pay-ui/i18n/locales/en-CA.ts
@@ -218,7 +218,7 @@ export default {
           total: 'Total Amount',
           transactionId: 'Transaction ID',
           invoiceNumber: 'Invoice Reference Number',
-          paymentMethod: 'Payment method',
+          paymentMethod: 'Payment Method',
           paymentStatus: 'Payment Status',
           downloads: 'Downloads',
           actions: 'Actions'

From 3496605b5236fdac35e59c98ff14bccda9a45e68 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 14:11:00 -0800
Subject: [PATCH 10/12] fix transactions / refund request header bars

---
 .../app/components/refund/RefundRequestsTable.vue    | 12 ++++++++++++
 .../transactions/TransactionsDataTable.vue           |  4 ++--
 web/pay-ui/app/pages/transactions/index.vue          |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/pay-ui/app/components/refund/RefundRequestsTable.vue b/web/pay-ui/app/components/refund/RefundRequestsTable.vue
index cdc35bd3..8f030401 100644
--- a/web/pay-ui/app/components/refund/RefundRequestsTable.vue
+++ b/web/pay-ui/app/components/refund/RefundRequestsTable.vue
@@ -255,6 +255,18 @@ const columns = computed<TableColumn<RefundRequestResult>[]>(() => {
 <template>
   <div>
     <div class="bg-white rounded shadow-sm border border-[var(--color-divider)] overflow-hidden">
+      <div class="relative rounded-t-lg px-2 py-3.5 flex-shrink-0 search-header-bg">
+        <div class="flex">
+          <UIcon
+            name="i-mdi-format-list-bulleted"
+            class="text-primary text-3xl mr-3"
+            style="margin-top: 5px;"
+          />
+          <h2 class="table-header-text font-bold">
+            {{ tableTitle }} ({{ state.totalResults }})
+          </h2>
+        </div>
+      </div>
       <div
         ref="scrollEl"
         class="w-full overflow-x-auto overflow-y-auto"
diff --git a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
index ab784cf5..f2828433 100644
--- a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
+++ b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
@@ -541,8 +541,8 @@ watch(() => transactions.results, () => {
         <div class="flex flex-wrap justify-between">
           <div class="flex">
             <UIcon
-              name="i-mdi-view-list"
-              class="mr-2 size-6 text-primary"
+              name="i-mdi-format-list-bulleted"
+              class="text-primary text-3xl mr-3"
               style="margin-top: 5px;"
             />
             <h2 class="table-header-text font-bold">
diff --git a/web/pay-ui/app/pages/transactions/index.vue b/web/pay-ui/app/pages/transactions/index.vue
index 2f5b7da0..cc14694e 100644
--- a/web/pay-ui/app/pages/transactions/index.vue
+++ b/web/pay-ui/app/pages/transactions/index.vue
@@ -90,7 +90,7 @@ onMounted(() => {
         />
       </div>
       <div v-else>
-        <RefundRequestsTable />
+        <RefundRequestsTable table-title="Pending Requests" />
       </div>
     </div>
   </div>

From 574b830a3ace0b658468cc609a2d15cbceaddcf7 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 20 Feb 2026 14:31:33 -0800
Subject: [PATCH 11/12] transaction expansion / drop down row clean up

---
 .../transactions/TransactionsDataTable.vue    | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
index f2828433..d60b44b0 100644
--- a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
+++ b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
@@ -258,7 +258,7 @@ interface DropdownItem {
   amount: string
   paymentMethod: string
   isRefund: boolean
-  status: string
+  statusCode: InvoiceStatus
   transactionId: string | number
   _isDropdown: true
 }
@@ -279,7 +279,7 @@ function createDropdownItem(
     amount: '',
     paymentMethod: '',
     isRefund: false,
-    status: '',
+    statusCode: InvoiceStatus.COMPLETED,
     transactionId: '',
     ...overrides
   }
@@ -304,7 +304,7 @@ function getAppliedCreditsItems(item: Transaction): DropdownItem[] {
       amount: `$${credit.amountApplied.toFixed(2)}`,
       paymentMethod: paymentTypeDisplay[PaymentTypes.CREDIT],
       isRefund: false,
-      status: invoiceStatusDisplay[InvoiceStatus.COMPLETED],
+      statusCode: InvoiceStatus.COMPLETED,
       transactionId: credit.id
     }))
   })
@@ -316,9 +316,9 @@ function getAppliedCreditsItems(item: Transaction): DropdownItem[] {
       date: credits[0]!.createdOn,
       time: true,
       amount: `$${remaining.toFixed(2)}`,
-      paymentMethod: item.paymentMethod,
+      paymentMethod: paymentTypeDisplay[item.paymentMethod] || item.paymentMethod,
       isRefund: false,
-      status: invoiceStatusDisplay[InvoiceStatus.COMPLETED],
+      statusCode: InvoiceStatus.COMPLETED,
       transactionId: item.id
     }))
   }
@@ -348,11 +348,11 @@ function getPartialRefundsItems(
     amount: `-$${totalRefundAmount.toFixed(2)}`,
     paymentMethod: refundAsCredits
       ? paymentTypeDisplay[PaymentTypes.CREDIT]
-      : item.paymentMethod,
+      : paymentTypeDisplay[item.paymentMethod] || item.paymentMethod,
     isRefund: true,
-    status: refundAsCredits
-      ? invoiceStatusDisplay[InvoiceStatus.PARTIALLY_CREDITED]
-      : invoiceStatusDisplay[InvoiceStatus.PARTIALLY_REFUNDED],
+    statusCode: refundAsCredits
+      ? InvoiceStatus.PARTIALLY_CREDITED
+      : InvoiceStatus.PARTIALLY_REFUNDED,
     createdName: refunds[0]!.createdName,
     transactionId: refundIds
   })]
@@ -377,11 +377,11 @@ function getFullRefundItems(item: Transaction): DropdownItem[] {
     amount: `-$${item.total.toFixed(2)}`,
     paymentMethod: refundAsCredits
       ? paymentTypeDisplay[PaymentTypes.CREDIT]
-      : item.paymentMethod,
+      : paymentTypeDisplay[item.paymentMethod] || item.paymentMethod,
     isRefund: true,
-    status: refundAsCredits
-      ? invoiceStatusDisplay[InvoiceStatus.CREDITED]
-      : invoiceStatusDisplay[InvoiceStatus.REFUNDED],
+    statusCode: refundAsCredits
+      ? InvoiceStatus.CREDITED
+      : InvoiceStatus.REFUNDED,
     transactionId: item.id
   })]
 }
@@ -879,7 +879,7 @@ watch(() => transactions.results, () => {
           </template>
 
           <template #createdOn-cell="{ row }">
-            <span v-if="isDropdownRow(row)" class="dropdown-child-cell">
+            <span v-if="isDropdownRow(row)">
               {{ asDropdownItem(row).date ? displayDate(String(asDropdownItem(row).date)) : '' }}
             </span>
             <span v-else>
@@ -891,7 +891,7 @@ watch(() => transactions.results, () => {
             <span
               v-if="isDropdownRow(row)"
               :class="[
-                'dropdown-child-cell',
+                'total-amount-cell',
                 { 'refund-amount': asDropdownItem(row).isRefund }
               ]"
             >
@@ -909,7 +909,7 @@ watch(() => transactions.results, () => {
           </template>
 
           <template #paymentMethod-cell="{ row }">
-            <span v-if="isDropdownRow(row)" class="dropdown-child-cell">
+            <span v-if="isDropdownRow(row)">
               {{ asDropdownItem(row).paymentMethod }}
             </span>
             <span v-else>
@@ -923,9 +923,16 @@ watch(() => transactions.results, () => {
           </template>
 
           <template #statusCode-cell="{ row }">
-            <span v-if="isDropdownRow(row)" class="dropdown-child-cell">
-              {{ asDropdownItem(row).status }}
-            </span>
+            <div v-if="isDropdownRow(row)" class="flex items-start gap-1">
+              <div class="flex items-center gap-1">
+                <UIcon
+                  v-if="isCompletedOrPaid(asDropdownItem(row).statusCode)"
+                  name="i-mdi-check"
+                  class="text-green-600"
+                />
+                <b>{{ getInvoiceStatusDisplayName(asDropdownItem(row).statusCode) }}</b>
+              </div>
+            </div>
             <div v-else class="flex items-start gap-1">
               <div>
                 <div class="flex items-center gap-1">

From b8609c5c009055cacffaf9acd2be823f878f25ad Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Mon, 23 Feb 2026 08:21:17 -0800
Subject: [PATCH 12/12] mode fixes / patch url fix

---
 .../app/components/transactions/TransactionsDataTable.vue       | 2 +-
 web/pay-ui/app/composables/transactions/useTransactionView.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
index d60b44b0..650741bf 100644
--- a/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
+++ b/web/pay-ui/app/components/transactions/TransactionsDataTable.vue
@@ -429,7 +429,7 @@ function saveTableSettings() {
 
 function viewDetails(item: Transaction) {
   saveTableSettings()
-  navigateTo(`/transaction-view/${item.id}`)
+  navigateTo(`/transaction-view/${item.id}/view`)
 }
 
 function initiateRefund(item: Transaction) {
diff --git a/web/pay-ui/app/composables/transactions/useTransactionView.ts b/web/pay-ui/app/composables/transactions/useTransactionView.ts
index 08776891..44eff306 100644
--- a/web/pay-ui/app/composables/transactions/useTransactionView.ts
+++ b/web/pay-ui/app/composables/transactions/useTransactionView.ts
@@ -29,7 +29,7 @@ export function useTransactionView() {
   }
 
   async function patchRefundRequest(invoiceId: number, refundId: number, body: never): Promise<void> {
-    await $payApi(`/payment-requests/shortname-refund/${refundId}`, {
+    await $payApi(`/payment-requests/${invoiceId}/refunds/${refundId}`, {
       method: 'PATCH',
       body: body
     })