From c6e3692b224eeebcf7e52d7dc11fd0633cf21327 Mon Sep 17 00:00:00 2001
From: Rodrigo Barraza <rodrigo.barraza@gov.bc.ca>
Date: Mon, 21 Oct 2024 09:05:57 -0700
Subject: [PATCH] 21536 - Approval/rejection review (#3079)

---
 auth-web/package-lock.json                    |   4 +-
 auth-web/package.json                         |   2 +-
 .../components/pay/ShortNameSummaryTable.vue  |  10 +-
 .../pay/eft/ShortNamePaymentHistory.vue       |  19 +-
 .../components/pay/eft/ShortNameRefund.vue    | 277 +++++++++++++++++-
 auth-web/src/models/eft-transaction.ts        |   2 +
 auth-web/src/routes/router.ts                 |   4 +-
 auth-web/src/services/payment.services.ts     |  18 +-
 auth-web/src/util/constants.ts                |   8 +-
 .../views/pay/eft/ShortNameDetailsView.vue    |  16 +-
 .../src/views/pay/eft/ShortNameRefundView.vue |  46 ++-
 .../ShortNamePaymentHistory.spec.ts           |   7 +
 .../unit/components/ShortNameRefund.spec.ts   |  97 +++++-
 .../unit/views/ShortNameRefundView.spec.ts    |   2 +-
 14 files changed, 451 insertions(+), 61 deletions(-)

diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
index 542e533dd3..829a0ee742 100644
--- a/auth-web/package-lock.json
+++ b/auth-web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "auth-web",
-  "version": "2.6.98",
+  "version": "2.6.99",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "auth-web",
-      "version": "2.6.98",
+      "version": "2.6.99",
       "dependencies": {
         "@bcrs-shared-components/base-address": "2.0.3",
         "@bcrs-shared-components/bread-crumb": "1.0.8",
diff --git a/auth-web/package.json b/auth-web/package.json
index 5274fa3ef0..db56998f46 100644
--- a/auth-web/package.json
+++ b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.98",
+  "version": "2.6.99",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,
diff --git a/auth-web/src/components/pay/ShortNameSummaryTable.vue b/auth-web/src/components/pay/ShortNameSummaryTable.vue
index f328299b0c..91686cf4bc 100644
--- a/auth-web/src/components/pay/ShortNameSummaryTable.vue
+++ b/auth-web/src/components/pay/ShortNameSummaryTable.vue
@@ -94,11 +94,11 @@
       <template #item-slot-creditsRemaining="{ item }">
         <span class="pr-2">{{ formatAmount(item.creditsRemaining) }}</span>
         <v-chip
-            v-if="item.refundStatus === ShortNameRefundStatus.PENDING_APPROVAL"
-            small
-            label
-            text-color="white"
-            class="primary pl-2 pr-2"
+          v-if="item.refundStatus === ShortNameRefundStatus.PENDING_APPROVAL"
+          small
+          label
+          text-color="white"
+          class="primary pl-2 pr-2"
         >
           {{ ShortNameRefundLabel.PENDING_APPROVAL }}
         </v-chip>
diff --git a/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue b/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue
index f9e566b88c..868dd881e2 100644
--- a/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue
+++ b/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue
@@ -133,6 +133,7 @@
           </template>
           <template v-if="showRefundDetailAction(item)">
             <v-btn
+              v-if="isEftRefundApprover"
               small
               color="primary"
               min-width="5rem"
@@ -151,8 +152,9 @@
   </div>
 </template>
 <script lang="ts">
-import { Ref, defineComponent, nextTick, reactive, ref, toRefs, watch } from '@vue/composition-api'
+import { Ref, computed, defineComponent, nextTick, reactive, ref, toRefs, watch } from '@vue/composition-api'
 import {
+  Role,
   ShortNameHistoryType,
   ShortNameHistoryTypeDescription,
   ShortNamePaymentActions,
@@ -161,10 +163,10 @@ import {
 import { BaseVDataTable } from '@/components'
 import CommonUtils from '@/util/common-util'
 import { DEFAULT_DATA_OPTIONS } from '../../datatable/resources'
-import { EFTTransactionState } from '@/models/eft-transaction'
 import ModalDialog from '@/components/auth/common/ModalDialog.vue'
 import PaymentService from '@/services/payment.services'
 import _ from 'lodash'
+import { useUserStore } from '@/stores/user'
 
 export default defineComponent({
   name: 'ShortNamePaymentHistory',
@@ -175,9 +177,14 @@ export default defineComponent({
       default: () => ({
         shortName: null
       })
+    },
+    lastRefundId: {
+      type: Number,
+      default: null
     }
   },
   setup (props, { emit, root }) {
+    const userStore = useUserStore()
     const dateDisplayFormat = 'MMMM D, YYYY'
     const enum ConfirmationType {
       REVERSE_PAYMENT = 'reversePayment',
@@ -222,7 +229,8 @@ export default defineComponent({
       }
     ]
 
-    const state = reactive<EFTTransactionState>({
+    const state = reactive({
+      isEftRefundApprover: computed(() => userStore.currentUser.roles.includes(Role.EftRefundApprover)),
       errorDialogTitle: '',
       errorDialogText: '',
       confirmDialogTitle: '',
@@ -243,6 +251,11 @@ export default defineComponent({
       return loadTransactions(props.shortNameDetails.id, false)
     }, { deep: true })
 
+    watch(() => props.lastRefundId, () => {
+      state.filters.pageNumber = 1
+      return loadTransactions(props.shortNameDetails.id, false)
+    }, { deep: true })
+
     async function loadTransactions (shortnameId: string, appendToResults: boolean = false): Promise<void> {
       try {
         state.loading = true
diff --git a/auth-web/src/components/pay/eft/ShortNameRefund.vue b/auth-web/src/components/pay/eft/ShortNameRefund.vue
index 1ff298084c..2a51c58194 100644
--- a/auth-web/src/components/pay/eft/ShortNameRefund.vue
+++ b/auth-web/src/components/pay/eft/ShortNameRefund.vue
@@ -10,7 +10,10 @@
       </v-icon>
       Short Name Refund
     </v-card-title>
-    <v-card-text class="d-flex justify-space-between align-center card-content mt-4">
+    <v-card-text
+      v-if="!state.totalResults"
+      class="d-flex justify-space-between align-center card-content mt-4"
+    >
       <span>No refund initiated. SBC Finance can initiate refund if a CAS supplier number is created for the short name.</span>
       <v-btn
         class="mt-0 font-weight-regular"
@@ -25,29 +28,147 @@
         Initiate Refund
       </v-btn>
     </v-card-text>
+    <v-card-text
+      v-if="state.totalResults"
+      class="pa-0 linked-text"
+    >
+      <BaseVDataTable
+        id="eft-transactions-table"
+        ref="historyTable"
+        class="transaction-list"
+        itemKey="id"
+        :setItems="state.results"
+        :totalItems="state.totalResults"
+        :setHeaders="headers"
+        :pageHide="true"
+        :hideFilters="true"
+      >
+        <template #item-slot-refundAmount="{ item }">
+          <span>{{ formatCurrency(Number(item.refundAmount)) }}</span>
+          <span
+            class="view-refund-details"
+            @click="viewRefundDetails(item.id)"
+          >View Refund Detail</span>
+        </template>
+        <template #item-slot-actions="{ item, index }">
+          <div
+            :id="`action-menu-${index}`"
+            class="mx-auto"
+          >
+            <v-btn
+              v-if="isEftRefundApprover"
+              small
+              outlined
+              color="primary"
+              class="open-action-btn pr-4 pl-4 mr-3"
+              :loading="loading"
+              @click="declineRefund(item)"
+            >
+              <v-icon
+                class="mr-2"
+              >
+                mdi-close
+              </v-icon>
+              Decline
+            </v-btn>
+            <v-btn
+              v-if="isEftRefundApprover"
+              small
+              color="primary"
+              class="open-action-btn pr-4 pl-4"
+              :loading="loading"
+              @click="approveRefund(item)"
+            >
+              <v-icon
+                class="mr-2"
+              >
+                mdi-check
+              </v-icon>
+              Approve
+            </v-btn>
+          </div>
+        </template>
+      </BaseVDataTable>
+    </v-card-text>
+    <ModalDialog
+      ref="confirmationDialog"
+      max-width="720"
+      :show-icon="false"
+      :showCloseIcon="true"
+      dialog-class="confirmation-dialog"
+      title="Decline Refund Request?"
+    >
+      <template #text>
+        <p class="pt-4">
+          By declining the request, the amount will remain unsettled in the short name.
+        </p>
+        <v-text-field
+          v-model="declineReason"
+          filled
+          label="Reasons for declining (Optional)"
+          persistent-hint
+        />
+      </template>
+      <template #actions>
+        <div class="d-flex align-center justify-center w-100 h-100 ga-3">
+          <v-btn
+            outlined
+            large
+            depressed
+            class="mr-3"
+            color="primary"
+            data-test="btn-cancel-confirmation-dialog"
+            @click="dialogCancel"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            large
+            depressed
+            class="font-weight-bold btn-dialog"
+            data-test="btn-confirm-confirmation-dialog"
+            color="primary"
+            @click="dialogDecline"
+          >
+            Decline
+          </v-btn>
+        </div>
+      </template>
+    </ModalDialog>
   </v-card>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
+import { EFTRefundType, Role } from '@/util/constants'
+import { Ref, computed, defineComponent, reactive, ref, toRefs, watch } from '@vue/composition-api'
+import { BaseVDataTable } from '@/components'
 import CommonUtils from '@/util/common-util'
 import { DEFAULT_DATA_OPTIONS } from '@/components/datatable/resources'
+import ModalDialog from '@/components/auth/common/ModalDialog.vue'
+import PaymentService from '@/services/payment.services'
 import _ from 'lodash'
+import { useUserStore } from '@/stores/user'
 
 export default defineComponent({
   name: 'ShortNameRefund',
+  components: { BaseVDataTable, ModalDialog },
   props: {
     shortNameDetails: {
       type: Object,
-      default: () => ({})
+      default: () => ({
+        shortName: null
+      })
     },
     unsettledAmount: {
       type: String,
       default: ''
     }
   },
-  setup (props, { root }) {
+  emits: ['on-short-name-refund'],
+  setup (props, { emit, root }) {
+    const userStore = useUserStore()
     const state = reactive({
+      declineReason: '',
       actionDropdown: [],
       isShortNameLinkingDialogOpen: false,
       eftShortNameSummary: {},
@@ -55,16 +176,118 @@ export default defineComponent({
       totalResults: 0,
       filters: {
         pageNumber: 1,
-        pageLimit: 5
+        pageLimit: 5,
+        statuses: [],
+        shortNameId: null
       },
       loading: false,
       options: _.cloneDeep(DEFAULT_DATA_OPTIONS),
-      expanded: []
+      expanded: [],
+      currentEftRefund: null,
+      isEftRefundApprover: computed(() => userStore.currentUser.roles.includes(Role.EftRefundApprover))
     })
+    const confirmationDialog: Ref<InstanceType<typeof ModalDialog>> = ref(null)
+    const headers = [
+      {
+        col: 'createdName',
+        hasFilter: false,
+        width: '300px',
+        value: 'Initiated By'
+      },
+      {
+        col: 'comment',
+        hasFilter: false,
+        width: '300px',
+        value: 'Comment'
+      },
+      {
+        col: 'casSupplierNumber',
+        hasFilter: false,
+        width: '240px',
+        value: 'CAS Supplier Number'
+      },
+      {
+        col: 'refundAmount',
+        hasFilter: false,
+        width: '260px',
+        value: 'Refund Amount'
+      },
+      {
+        col: 'actions',
+        hasFilter: false,
+        value: 'Actions',
+        width: '300px'
+      }
+    ]
 
-    const isLinked = computed<boolean>(() => {
-      return state.totalResults > 0 || state.loading
-    })
+    async function approveRefund (item) {
+      const shortNameRefund = {
+        status: EFTRefundType.APPROVED
+      }
+      try {
+        await PaymentService.patchEFTRefund(item.id, shortNameRefund)
+        await loadTransactions(props.shortNameDetails.id)
+        emit('on-short-name-refund', item.id)
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to approve refund.', error)
+      }
+    }
+
+    function declineRefund (item) {
+      state.currentEftRefund = item
+      confirmationDialog.value.open()
+    }
+
+    async function dialogDecline () {
+      const shortNameRefund = {
+        status: EFTRefundType.DECLINED,
+        declineReason: state.declineReason
+      }
+      try {
+        await PaymentService.patchEFTRefund(state.currentEftRefund.id, shortNameRefund)
+        await loadTransactions(props.shortNameDetails.id)
+        emit('on-short-name-refund', state.currentEftRefund)
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to decline refund.', error)
+      }
+      confirmationDialog.value.close()
+      state.currentEftRefund = null
+    }
+
+    watch(() => props.shortNameDetails, () => {
+      return loadTransactions(props.shortNameDetails.id)
+    }, { immediate: true, deep: true })
+
+    async function loadTransactions (shortnameId: string): Promise<void> {
+      try {
+        state.loading = true
+        state.filters.statuses = [EFTRefundType.PENDING_APPROVAL]
+        state.filters.shortNameId = shortnameId
+        const eftRefunds = await PaymentService.getEFTRefunds(state.filters)
+        state.results = eftRefunds.data
+        state.totalResults = eftRefunds.data?.length || 0
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to getEFTTransactions list.', error)
+      }
+      state.loading = false
+    }
+
+    function dialogCancel () {
+      confirmationDialog.value.close()
+    }
+
+    function viewRefundDetails (id: string) {
+      if (!id) return
+      root.$router?.push({
+        name: 'shortnamerefund',
+        params: {
+          eftRefundId: id
+        }
+      })
+    }
 
     function initiateRefund () {
       root.$router?.push({
@@ -78,8 +301,14 @@ export default defineComponent({
     return {
       ...toRefs(state),
       state,
-      isLinked,
+      headers,
+      confirmationDialog,
+      approveRefund,
+      declineRefund,
+      dialogDecline,
+      dialogCancel,
       initiateRefund,
+      viewRefundDetails,
       formatCurrency: CommonUtils.formatAmount,
       formatAccountDisplayName: CommonUtils.formatAccountDisplayName
     }
@@ -109,10 +338,6 @@ export default defineComponent({
 }
 
 ::v-deep {
-  .base-table__item-cell {
-    padding: 16px 0 16px 0
-  }
-
   // Remove border for rows that are expanded with additional information
   tr:has(+ tr.expanded-item-row) td {
     border-bottom: none !important;
@@ -123,6 +348,30 @@ export default defineComponent({
   border-radius: 4px !important;
 }
 
+.view-refund-details {
+  color: var(--v-primary-base);
+  text-decoration: underline;
+  font-weight: 100;
+  display: block;
+  cursor: pointer;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.ga-3 {
+  gap: 12px;
+}
+
+.open-action-btn {
+  box-shadow: none;
+}
+
 .expanded-item-row {
   td {
     .expanded-item {
diff --git a/auth-web/src/models/eft-transaction.ts b/auth-web/src/models/eft-transaction.ts
index b5d1202e6d..ba3c39a809 100644
--- a/auth-web/src/models/eft-transaction.ts
+++ b/auth-web/src/models/eft-transaction.ts
@@ -6,6 +6,8 @@ export interface EFTTransaction {
   depositAmount: number
   depositDate: string
   transactionDate: string
+  transactionType: string
+  eftRefundId: number
 }
 
 export interface EFTTransactionFilterParams {
diff --git a/auth-web/src/routes/router.ts b/auth-web/src/routes/router.ts
index 25d43071b1..ff7244ef10 100644
--- a/auth-web/src/routes/router.ts
+++ b/auth-web/src/routes/router.ts
@@ -880,7 +880,7 @@ export function getRoutes (): RouteConfig[] {
         ],
         showNavBar: true
       },
-      props: (route) => ({ shortNameId: route.params.shortNameId })
+      props: (route) => ({ shortNameId: Number(route.params.shortNameId) })
     },
     {
       path: '/pay/shortname-details/:shortNameId/refund/:eftRefundId?',
@@ -899,7 +899,7 @@ export function getRoutes (): RouteConfig[] {
       },
       props: route => ({
         shortNameId: Number(route.params.shortNameId),
-        eftRefundId: route.params.eftRefundId ? Number(route.params.shortNameId) : undefined
+        eftRefundId: route.params.eftRefundId ? Number(route.params.eftRefundId) : undefined
       })
     },
     {
diff --git a/auth-web/src/services/payment.services.ts b/auth-web/src/services/payment.services.ts
index 9b74668814..21a3caafe7 100644
--- a/auth-web/src/services/payment.services.ts
+++ b/auth-web/src/services/payment.services.ts
@@ -1,4 +1,3 @@
-
 import { EFTShortnameResponse, EFTTransactionFilterParams, EFTTransactionListResponse } from '@/models/eft-transaction'
 import { EftRefundRequest, RefundRequest } from '@/models/refund'
 import { FilingTypeResponse, GLCode, GLCodeResponse } from '@/models/Staff'
@@ -58,6 +57,18 @@ export default class PaymentService {
     return axios.post(url, refundPayload)
   }
 
+  static getEFTRefunds (filterParams): AxiosPromise<any> {
+    const params = new URLSearchParams()
+    if (filterParams.statuses) {
+      params.append('statuses', filterParams.statuses.toString())
+    }
+    if (filterParams.shortNameId) {
+      params.append('shortNameId', filterParams.shortNameId.toString())
+    }
+    const url = `${ConfigHelper.getPayAPIURL()}/eft-shortnames/shortname-refund`
+    return axios.get(url, { params })
+  }
+
   static downloadOBInvoice (paymentId: string): AxiosPromise<any> {
     const url = `${ConfigHelper.getPayAPIURL()}/payment-requests/${paymentId}/reports`
     const headers = {
@@ -311,6 +322,11 @@ export default class PaymentService {
     return axios.get(url)
   }
 
+  static patchEFTRefund (eftRefundId: number, body: any): AxiosPromise<EFTShortnameResponse> {
+    const url = `${ConfigHelper.getPayAPIURL()}/eft-shortnames/shortname-refund/${eftRefundId}`
+    return axios.patch(url, body)
+  }
+
   static postShortNameLink (shortNameId: string, accountId: string): AxiosPromise<EFTShortnameResponse> {
     const url = `${ConfigHelper.getPayAPIURL()}/eft-shortnames/${shortNameId}/links`
     const body = {
diff --git a/auth-web/src/util/constants.ts b/auth-web/src/util/constants.ts
index 30f5dbafa8..86fb1f20ed 100644
--- a/auth-web/src/util/constants.ts
+++ b/auth-web/src/util/constants.ts
@@ -59,6 +59,7 @@ export enum Role {
     ViewAllTransactions = 'view_all_transactions',
     ManageEft = 'manage_eft',
     EftRefund = 'eft_refund',
+    EftRefundApprover = 'eft_refund_approver',
     CreateCredits = 'create_credits',
     FasRefund = 'fas_refund',
     BcolStaffAdmin = 'bcol_staff_admin'
@@ -694,13 +695,16 @@ export enum ShortNameResponseStatus {
 export enum EFTRefundType {
     APPROVED = 'APPROVED',
     PENDING_APPROVAL = 'PENDING_APPROVAL',
-    REJECTED = 'REJECTED'
+    DECLINED = 'DECLINED',
+    COMPLETED = 'COMPLETED',
+    ERRORED = 'ERRORED'
 }
 
 export enum EFTRefundTypeDescription {
     APPROVED = 'Approved',
     PENDING_APPROVAL = 'Requested',
-    REJECTED = 'Declined'
+    DECLINED = 'Declined',
+    PENDING_REFUND = 'Pending Refund',
 }
 
 export enum ShortNameType {
diff --git a/auth-web/src/views/pay/eft/ShortNameDetailsView.vue b/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
index 282ec7ff72..f7b4dabca0 100644
--- a/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
+++ b/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
@@ -89,9 +89,10 @@
 
     <ShortNameRefund
       v-if="displayRefundAlert && canEFTRefund"
+      class="mb-12"
       :shortNameDetails="shortNameDetails"
       :unsettledAmount="unsettledAmount"
-      class="mb-12"
+      @on-short-name-refund="onRefund"
     />
 
     <ShortNameAccountLink
@@ -104,6 +105,7 @@
 
     <ShortNamePaymentHistory
       :shortNameDetails="shortNameDetails"
+      :lastRefundId="lastRefundId"
       @on-payment-action="onPaymentAction"
     />
   </v-container>
@@ -127,7 +129,7 @@ export default defineComponent({
   components: { ShortNameAccountLink, ShortNameFinancialDialog, ShortNamePaymentHistory, ShortNameRefund },
   props: {
     shortNameId: {
-      type: String as PropType<string>,
+      type: Number as PropType<number>,
       default: null
     }
   },
@@ -144,7 +146,8 @@ export default defineComponent({
       displayRefundAlert: false,
       canEFTRefund: computed((): boolean => currentUser.value?.roles?.includes(Role.EftRefund)),
       displayShortNameFinancialDialog: false,
-      shortNameFinancialDialogType: ''
+      shortNameFinancialDialogType: '',
+      lastRefundId: null
     })
 
     onMounted(async () => {
@@ -174,6 +177,10 @@ export default defineComponent({
       state.displayShortNameFinancialDialog = false
     }
 
+    async function onRefund (refund: any) {
+      state.lastRefundId = Number(refund.id)
+    }
+
     async function onLinkAccount (account: any, results: Array<any>) {
       const indexOf = results.findIndex((result) => result.id === account.id)
       await loadShortname(props.shortNameId)
@@ -206,7 +213,7 @@ export default defineComponent({
       state.shortName = eftShortNameResponse.data
     }
 
-    async function loadShortname (shortnameId: string): Promise<void> {
+    async function loadShortname (shortnameId: number): Promise<void> {
       try {
         const response = await PaymentService.getEFTShortnameSummary(shortnameId)
         if (response?.data) {
@@ -224,6 +231,7 @@ export default defineComponent({
 
     return {
       ...toRefs(state),
+      onRefund,
       onLinkAccount,
       onPaymentAction,
       onShortNamePatch,
diff --git a/auth-web/src/views/pay/eft/ShortNameRefundView.vue b/auth-web/src/views/pay/eft/ShortNameRefundView.vue
index 5450b94520..a42643aba4 100644
--- a/auth-web/src/views/pay/eft/ShortNameRefundView.vue
+++ b/auth-web/src/views/pay/eft/ShortNameRefundView.vue
@@ -39,7 +39,7 @@
                   Unsettled Amount on Short Name
                 </v-col>
                 <v-col class="pl-0">
-                  {{ formatAmount(shortNameDetails.creditsRemaining) }}
+                  {{ formatCurrency(Number(shortNameDetails.creditsRemaining)) }}
                 </v-col>
               </v-row>
 
@@ -51,7 +51,7 @@
                   v-if="readOnly"
                   class="pl-0"
                 >
-                  {{ formatAmount(refundDetails.refundAmount) }}
+                  {{ formatCurrency(Number(refundDetails.refundAmount)) }}
                 </v-col>
                 <v-text-field
                   v-else
@@ -158,6 +158,22 @@
               {{ refundDetails.updatedBy }} {{ formatDate(refundDetails.updatedOn, dateDisplayFormat) }}
             </v-col>
           </v-row>
+          <v-row v-if="readOnly && isDeclined()">
+            <v-col class="col-6 col-sm-3 font-weight-bold">
+              Declined By Expense Authority
+            </v-col>
+            <v-col class="pl-0">
+              {{ refundDetails.updatedBy }} {{ formatDate(refundDetails.updatedOn, dateDisplayFormat) }}
+            </v-col>
+          </v-row>
+          <v-row v-if="readOnly && isDeclined()">
+            <v-col class="col-6 col-sm-3 font-weight-bold">
+              Reason for Declining
+            </v-col>
+            <v-col class="pl-0">
+              {{ refundDetails.declineReason }}
+            </v-col>
+          </v-row>
           <v-row v-if="readOnly">
             <v-col class="col-6 col-sm-3 font-weight-bold">
               Refund Status
@@ -265,18 +281,21 @@ export default defineComponent({
       return state.refundDetails?.status === EFTRefundType.APPROVED
     }
 
-    onMounted(async () => {
-      await loadShortnameDetails(props.shortNameId)
+    function isDeclined () {
+      return state.refundDetails?.status === EFTRefundType.DECLINED
+    }
 
-      if (props.eftRefundId) {
+    onMounted(async () => {
+      await loadShortnameDetails()
+      if (props.shortNameId && props.eftRefundId) {
         state.readOnly = true
-        await loadShortnameRefund(props.eftRefundId)
+        await loadShortnameRefund()
       }
     })
 
-    async function loadShortnameDetails (shortnameId: number): Promise<void> {
+    async function loadShortnameDetails (): Promise<void> {
       try {
-        const response = await PaymentService.getEFTShortnameSummary(shortnameId)
+        const response = await PaymentService.getEFTShortnameSummary(props.shortNameId)
         if (response?.data) {
           state.shortNameDetails = response.data['items'][0]
         } else {
@@ -288,9 +307,9 @@ export default defineComponent({
       }
     }
 
-    async function loadShortnameRefund (eftRefundId: number): Promise<void> {
+    async function loadShortnameRefund (): Promise<void> {
       try {
-        const response = await PaymentService.getEFTRefund(eftRefundId)
+        const response = await PaymentService.getEFTRefund(props.eftRefundId)
         if (response?.data) {
           state.refundDetails = response.data
         } else {
@@ -302,10 +321,6 @@ export default defineComponent({
       }
     }
 
-    function formatAmount (amount: number) {
-      return amount !== undefined ? CommonUtils.formatAmount(amount) : ''
-    }
-
     const refundForm = ref(null)
     const isFormValid = ref(false)
     const buttonText = ref('Submit Refund Request')
@@ -365,6 +380,7 @@ export default defineComponent({
     return {
       ...toRefs(state),
       isApproved,
+      isDeclined,
       refundForm,
       isFormDisabled,
       isFormValid,
@@ -372,9 +388,9 @@ export default defineComponent({
       buttonText,
       buttonColor,
       handleCancelButton,
-      formatAmount,
       getShortNameTypeDescription: ShortNameUtils.getShortNameTypeDescription,
       getEFTRefundTypeDescription: ShortNameUtils.getEFTRefundTypeDescription,
+      formatCurrency: CommonUtils.formatAmount,
       formatDate: CommonUtils.formatUtcToPacificDate,
       dateDisplayFormat
     }
diff --git a/auth-web/tests/unit/components/ShortNamePaymentHistory.spec.ts b/auth-web/tests/unit/components/ShortNamePaymentHistory.spec.ts
index c2676f3317..6b75aa975e 100644
--- a/auth-web/tests/unit/components/ShortNamePaymentHistory.spec.ts
+++ b/auth-web/tests/unit/components/ShortNamePaymentHistory.spec.ts
@@ -1,6 +1,7 @@
 import { Wrapper, createLocalVue, mount } from '@vue/test-utils'
 import { BaseVDataTable } from '@/components'
 import CommonUtils from '@/util/common-util'
+import { Role } from '@/util/constants'
 import ShortNameTransactions from '@/components/pay/eft/ShortNamePaymentHistory.vue'
 import { VueConstructor } from 'vue'
 import Vuetify from 'vuetify'
@@ -8,6 +9,7 @@ import { axios } from '@/util/http-util'
 import { baseVdataTable } from './../test-utils/test-data/baseVdata'
 import { setupIntersectionObserverMock } from '../util/helper-functions'
 import sinon from 'sinon'
+import { useUserStore } from '@/stores'
 
 sessionStorage.setItem('AUTH_API_CONFIG', JSON.stringify({
   AUTH_API_URL: 'https://localhost:8080/api/v1',
@@ -97,6 +99,11 @@ describe('ShortNamePaymentHistory.vue', () => {
     const get = sandbox.stub(axios, 'get')
     get.returns(Promise.resolve({ data: historyResponse }))
 
+    const userStore = useUserStore()
+    userStore.currentUser = {
+      roles: [Role.EftRefundApprover]
+    } as any
+
     wrapper = mount(ShortNameTransactions, {
       propsData: {
         shortNameDetails: { shortName: null, id: null }
diff --git a/auth-web/tests/unit/components/ShortNameRefund.spec.ts b/auth-web/tests/unit/components/ShortNameRefund.spec.ts
index 0713dffe99..64605c7b8c 100644
--- a/auth-web/tests/unit/components/ShortNameRefund.spec.ts
+++ b/auth-web/tests/unit/components/ShortNameRefund.spec.ts
@@ -1,29 +1,46 @@
 import { createLocalVue, mount } from '@vue/test-utils'
+import { BaseVDataTable } from '@/components'
+import { Role } from '@/util/constants'
 import ShortNameRefund from '@/components/pay/eft/ShortNameRefund.vue'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Vuetify from 'vuetify'
+import { axios } from '@/util/http-util'
+import { baseVdataTable } from './../test-utils/test-data/baseVdata'
 import sinon from 'sinon'
+import { useUserStore } from '@/stores'
 
 Vue.use(Vuetify)
 Vue.use(VueRouter)
+// Selectors
+const { header, headerTitles, itemRow, itemCell } = baseVdataTable
+const headers = ['Initiated By', 'Comment', 'CAS Supplier Number', 'Refund Amount', 'Actions']
 
 describe('ShortNameRefund.vue', () => {
   let wrapper
   const localVue = createLocalVue()
   const vuetify = new Vuetify({})
   let sandbox
+  let shortNameRefundResponse: any
+
+  beforeEach(async () => {
+    sandbox = sinon.createSandbox()
+    shortNameRefundResponse = [
+      {
+        'casSupplierNumber': '123456789',
+        'comment': 'A test',
+        'createdName': 'John Doe',
+        'createdOn': '2024-10-17 14:51:27.553425',
+        'disbursementDate': '2024-10-17',
+        'id': '1',
+        'refundAmount': '10',
+        'refundEmail': 'john.doe@gov.bc.ca',
+        'shortNameId': '243',
+        'status': 'PENDING_APPROVAL'
+      }
+    ]
 
-  beforeEach(() => {
     sandbox = sinon.createSandbox()
-    wrapper = mount(ShortNameRefund, {
-      propsData: {
-        shortNameDetails: { shortName: 'SHORTNAME', id: 1 },
-        unsettledAmount: '100.0'
-      },
-      localVue,
-      vuetify
-    })
   })
 
   afterEach(() => {
@@ -31,13 +48,71 @@ describe('ShortNameRefund.vue', () => {
     sandbox.restore()
   })
 
-  it('is a Vue instance', () => {
+  const mountComponent = (role) => {
+    const userStore = useUserStore()
+    userStore.currentUser = {
+      roles: role
+    } as any
+
+    return mount(ShortNameRefund, {
+      propsData: {
+        shortNameDetails: { shortName: null, id: null },
+        unsettledAmount: '100.0'
+      },
+      localVue,
+      vuetify
+    })
+  }
+
+  it('is a Vue instance', async () => {
+    wrapper = mountComponent([Role.EftRefundApprover])
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm).toBeTruthy()
   })
 
-  it('renders the component correctly', () => {
+  it('renders the component correctly without data', async () => {
+    wrapper = mountComponent([Role.EftRefundApprover])
+    await wrapper.vm.$nextTick()
     expect(wrapper.find('.card-title').text()).toContain('Short Name Refund')
     expect(wrapper.find('.card-content span').text())
       .toContain('No refund initiated. SBC Finance can initiate refund if a CAS supplier number is created for the short name.')
   })
+
+  it('renders the component correctly with data', async () => {
+    wrapper = mountComponent([Role.EftRefundApprover])
+    await wrapper.vm.$nextTick()
+    const get = sandbox.stub(axios, 'get')
+    get.returns(Promise.resolve({ data: shortNameRefundResponse }))
+    await wrapper.setProps({ shortNameDetails: { id: 1, shortName: 'SHORTNAME' }, unsettledAmount: '100.0' })
+    await wrapper.vm.$nextTick()
+    // table
+    expect(wrapper.findComponent(BaseVDataTable).exists()).toBe(true)
+    expect(wrapper.findComponent(BaseVDataTable).find(header).exists()).toBe(true)
+    // header titles
+    const titles = wrapper.findComponent(BaseVDataTable).findAll(headerTitles)
+    expect(titles.length).toBe(headers.length)
+    expect(titles.at(0).text()).toBe('Initiated By')
+    expect(titles.at(1).text()).toBe('Comment')
+    expect(titles.at(2).text()).toBe('CAS Supplier Number')
+    expect(titles.at(3).text()).toBe('Refund Amount')
+    expect(titles.at(4).text()).toBe('Actions')
+    // table items
+    const itemRows = wrapper.findComponent(BaseVDataTable).findAll(itemRow)
+    expect(itemRows.length).toBe(shortNameRefundResponse.length)
+    // cells
+    const row1Cells = itemRows.at(0).findAll(itemCell)
+    expect(row1Cells.at(0).text()).toBe('John Doe')
+    expect(row1Cells.at(1).text()).toBe('A test')
+    expect(row1Cells.at(2).text()).toBe('123456789')
+    expect(row1Cells.at(3).findAll('span').at(0).text()).toBe('$10.00')
+    expect(row1Cells.at(3).findAll('span').at(1).text()).toBe('View Refund Detail')
+    expect(row1Cells.at(4).findAll('button').exists()).toBe(true)
+    expect(row1Cells.at(4).findAll('button').at(0).text()).toBe('Decline')
+    expect(row1Cells.at(4).findAll('button').at(1).text()).toBe('Approve')
+    // without roles
+    wrapper.destroy()
+    wrapper = mountComponent([])
+    await wrapper.vm.$nextTick()
+    expect(row1Cells.at(3).findAll('button').exists()).toBe(false)
+  })
 })
diff --git a/auth-web/tests/unit/views/ShortNameRefundView.spec.ts b/auth-web/tests/unit/views/ShortNameRefundView.spec.ts
index 0d384109d3..4d21ba7f2b 100644
--- a/auth-web/tests/unit/views/ShortNameRefundView.spec.ts
+++ b/auth-web/tests/unit/views/ShortNameRefundView.spec.ts
@@ -24,7 +24,7 @@ describe('ShortNameRefundView.vue', () => {
           'id': 2,
           'lastPaymentReceivedDate': '2023-11-24T13:47:47',
           'linkedAccountsCount': 0,
-          'refundStatus': 'PENDING_REFUND',
+          'refundStatus': 'PENDING_APPROVAL',
           'shortName': 'SNAME100',
           'shortNameType': 'EFT'
         }