Use transferId for internal transfer handling and UETR for display

Author: d0rich

gui/src/components/TransactionActions.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   transaction: JSONify<Transaction>
 }>()
 
-const transactionStatusLink = useBankRoute('admin', 'transfers', props.transaction.uetr)
+const transactionStatusLink = useBankRoute('admin', 'transfers', String(props.transaction.id))
 
 defineEmits<{
   (e: 'transactionAccepted', acceptedTransaction: JSONify<Transaction>): void

gui/src/components/TransactionsTable.vue

@@ -29,7 +29,6 @@ type TransformedTransaction = JSONify<Transaction> & {
   updatedAtDate: Date
 }
 
-import UUID from './UUID.vue'
 import TransactionActions from './TransactionActions.vue'
 
 const props = defineProps<{
@@ -324,9 +323,9 @@ const clearFilter = () => {
       </Column>
 
       <!-- UETR Column -->
-      <Column field="uetr" header="ID" sortable>
+      <Column field="uetr" header="UETR" sortable>
         <template #body="{ data }: { data: TransformedTransaction }">
-          <UUID :uuid="data.uetr" />
+          {{ data.uetr }}
         </template>
         <template #filter="{ filterModel }">
           <InputText v-model="filterModel.value" type="text" placeholder="Search by UETR" />

gui/src/pages/admin/TransactionStatusPage.vue

@@ -13,10 +13,10 @@ useHead({
   title: 'Transaction Status'
 })
 const route = useRoute()
-const uetr = route.params.uetr as string
+const transferId = route.params.transferId as string
 
 const { state: transactionDetails, isLoading } = useAsyncState(
-  () => fetchTransactionDetails(useCurrentBank(), uetr),
+  () => fetchTransactionDetails(useCurrentBank(), transferId),
   null
 )
 
@@ -45,7 +45,7 @@ function isExpanded(messageId: string) {
 
 async function refresh() {
   isLoading.value = true
-  transactionDetails.value = await fetchTransactionDetails(useCurrentBank(), uetr)
+  transactionDetails.value = await fetchTransactionDetails(useCurrentBank(), transferId)
   isLoading.value = false
 }
 
@@ -59,8 +59,12 @@ useFakeSocket(refresh)
       <div class="mb-4">
         <h1 class="text-3xl font-bold">Transaction Status</h1>
       </div>
-      <p class="text-base-content/70" v-if="uetr">
-        Tracking transaction: <code class="badge badge-neutral font-mono">{{ uetr }}</code>
+      <p class="text-base-content/70">
+        Tracking transaction:
+        <code class="badge badge-neutral font-mono">
+          <template v-if="transactionDetails">{{ transactionDetails?.transaction.uetr }}</template>
+          <template v-else>{{ transferId }} (Internal ID)</template>
+        </code>
       </p>
     </div>
 

gui/src/router.ts

@@ -16,7 +16,7 @@ const adminRoutes: RouteRecordRaw[] = [
         component: () => import('./pages/admin/TransactionsHistoryPage.vue')
       },
       {
-        path: 'transfers/:uetr',
+        path: 'transfers/:transferId',
         component: () => import('./pages/admin/TransactionStatusPage.vue')
       }
     ]

gui/src/services/backend/api.ts

@@ -186,7 +186,7 @@ function mapTransfers(transfers: any[]): Transfer[] {
 
 export async function makeTransfer(
   bank: BankName,
-  transferDetails: Omit<Transaction, 'uetr' | 'createdAt' | 'updatedAt' | 'status'> & { comment: string | null }
+  transferDetails: Omit<Transaction, 'id' | 'uetr' | 'createdAt' | 'updatedAt' | 'status'> & { comment: string | null }
 ): Promise<void> {
   try {
     const convertedDetails = convertFrontendTransactionToBackendTransferDetails(transferDetails)

gui/src/services/backend/converters.ts

@@ -72,14 +72,15 @@ export function convertBackendTransferToFrontend(backendTransfer: BackendTransfe
   }
 
   return {
-    uetr:
-      backendTransfer.transferId?.toString() || backendTransfer.endToEndId || backendTransfer.messageId || 'unknown',
+    uetr: backendTransfer.endToEndId || backendTransfer.messageId || 'unknown',
+    id: backendTransfer.transferId,
     status: convertBackendTransferStatusToFrontend(backendTransfer.status),
     type: 'transfer',
     debtor,
     creditor,
     createdAt: backendTransfer.transferTimestamp ? new Date(backendTransfer.transferTimestamp) : new Date(),
-    updatedAt: backendTransfer.transferTimestamp ? new Date(backendTransfer.transferTimestamp) : new Date()
+    updatedAt: backendTransfer.transferTimestamp ? new Date(backendTransfer.transferTimestamp) : new Date(),
+    comment: backendTransfer.remittanceInfo || null
   }
 }
 
@@ -110,7 +111,7 @@ export function convertBackendTransfersToFrontendJSON(backendTransfers: BackendT
  * Convert frontend transaction to backend transfer details for creation
  */
 export function convertFrontendTransactionToBackendTransferDetails(
-  transaction: Omit<Transaction, 'uetr' | 'createdAt' | 'updatedAt' | 'status'> & { comment: string | null }
+  transaction: Omit<Transaction, 'id' | 'uetr' | 'createdAt' | 'updatedAt' | 'status'> & { comment: string | null }
 ): BackendTransferDetails {
   return {
     debtorIban: transaction.debtor.accountId,

gui/src/services/backend/models.ts

@@ -35,7 +35,7 @@ export type TransferDetails = z.infer<typeof TransferDetailsSchema>
  * Transfer entity schema (full transfer object)
  */
 export const TransferSchema = z.object({
-  transferId: z.number().int().optional(),
+  transferId: z.number().int(),
   clientId: z.number().int().nullable(),
   status: TransferStatusSchema,
   messageId: z.string().optional(),

gui/src/services/mock-backend/api.ts

@@ -1,7 +1,7 @@
 import type { BankName } from '../../../config'
 import config from '../../../config'
 import { bankAIbans, bankBIbans, currencies, exchangeValues } from '../hardcoded'
-import { simulate } from './simulation'
+import { newTransactionId, simulate } from './simulation'
 import type { Transaction, JSONify, Currency, TransactionMessageStatus } from './types'
 import { BackendUpdates, deepCopy } from './utils'
 import { faker } from '@faker-js/faker'
@@ -60,9 +60,12 @@ export function getTransactionFormData(senderBank: BankName) {
   }
 }
 
-export function newTransaction(transaction: Omit<Transaction, 'uetr' | 'createdAt' | 'updatedAt' | 'status'>): void {
+export function newTransaction(
+  transaction: Omit<Transaction, 'id' | 'uetr' | 'createdAt' | 'updatedAt' | 'status'>
+): void {
   const newTransaction: Transaction = {
     ...transaction,
+    id: newTransactionId(),
     uetr: faker.string.uuid(),
     status: 'pending',
     createdAt: new Date(),
@@ -132,11 +135,11 @@ export function exchange(props: ExchangeProps): boolean {
   return true
 }
 
-export function getTransactionDetails(uetr: string): JSONify<{
+export function getTransactionDetails(transferId: string): JSONify<{
   transaction: Transaction
   messages: TransactionMessageStatus[]
 }> | null {
-  const transaction = state.transactions.find((t) => t.uetr === uetr)
+  const transaction = state.transactions.find((t) => t.id === Number(transferId))
   if (!transaction) {
     return null
   }

gui/src/services/mock-backend/simulation.ts

@@ -4,6 +4,12 @@ import { faker } from '@faker-js/faker'
 import type { BackendUpdates } from './utils.js'
 import config from '../../../config.js'
 
+let lastTransactionId = 0
+
+export function newTransactionId(): number {
+  return ++lastTransactionId
+}
+
 /**
  * Initializes start data in state and cron jobs for changing state from the other end.
  * @param ownBIC - BIC of the own bank
@@ -38,6 +44,8 @@ export function simulate(emitter: BackendUpdates) {
       for (let j = 0; j < 5; j++) {
         const transaction: Transaction = {
           uetr: faker.string.uuid(),
+          id: newTransactionId(),
+          comment: null,
           status: faker.helpers.arrayElement(statuses),
           type: 'transfer',
           debtor: {
@@ -110,6 +118,8 @@ export function simulate(emitter: BackendUpdates) {
     }
     const incomingTransaction: Transaction = {
       uetr: faker.string.uuid(),
+      id: newTransactionId(),
+      comment: null,
       status: 'pending',
       type: 'transfer',
       debtor: {

gui/src/services/mock-backend/types.ts

@@ -10,13 +10,15 @@ export type TransactionParty = {
 }
 
 export type Transaction = {
+  id: number
   uetr: string
   status: TransactionStatus
   type: TransactionType
   debtor: TransactionParty
   creditor: TransactionParty
   createdAt: Date
   updatedAt: Date
+  comment: string | null
 }
 
 export type Account = {