links to the monitoring section in home page, fix formatting issues

Author: ABulda

gui/src/components/footer/Footer.vue

@@ -19,7 +19,7 @@ import ExactproLogo from './ExactproLogo.vue'
 
         <span class="text-xs text-balance max-w-sm">
           This is a solution prototype developed exclusively for the purposes of the Swift Hackathon 2025 and the
-          corresponding demo. Copyright © 2009 - 2025 Exactpro. All Rights Reserved.
+          corresponding demo. Copyright © 2009 - 2025 Exactpro. All rights reserved.
         </span>
       </div>
       <FooterLinks class="py-2" />

gui/src/pages/RootNav.vue

@@ -97,10 +97,9 @@ useHead({
     <h2>Additional Monitoring Solutions</h2>
     <ul>
       <li>
-        <strong>Infrastructure Monitoring:</strong>
         <ul>
-          <li>Kafka: <em>linkTBD</em></li>
-          <li>Block Explorer: <em>linkTBD</em></li>
+          <li><RouterLink to="/kafka/">Kafka - Swift Messages</RouterLink></li>
+          <li><RouterLink to="/explorer/">Blockchain Explorer</RouterLink></li>
         </ul>
       </li>
     </ul>

gui/src/services/backend/api.ts

@@ -1,12 +1,7 @@
 import { ofetch, FetchError } from 'ofetch'
 import { joinURL } from 'ufo'
 import { z } from 'zod'
-import type {
-  getTransactions,
-  getTransactionDetails,
-  getClientTransactions,
-  getClientData,
-} from '../mock-backend/api'
+import type { getTransactions, getTransactionDetails, getClientTransactions, getClientData } from '../mock-backend/api'
 import { useToasts } from '../../composables/useToasts'
 import type { BankName } from '../../../config'
 import type { Client, Account as FrontendAccount, Transaction } from '../mock-backend/types'
@@ -29,7 +24,7 @@ import config from '../../../config'
 import * as hardcoded from '../hardcoded'
 
 function bankBaseRoute(bank: BankName): string {
-//   return `http://localhost:8083/${bank.toLowerCase().replace(/ /g, '-')}/api`
+  //   return `http://localhost:8083/${bank.toLowerCase().replace(/ /g, '-')}/api`
   return `/${bank.toLowerCase().replace(/ /g, '-')}/api`
 }
 
@@ -147,24 +142,26 @@ export async function getClientTransfers(
 }
 
 function mapTransfers(transfers: any[]): Transfer[] {
-  return transfers.map(transfer => {return {
-    transferId: transfer.transferId,
-    clientId: transfer.clientId,
-    status: transfer.status,
-    messageId: "SHOULD BE REMOVED FROM GUI",
-    transferTimestamp: transfer.transferTimestamp,
-    endToEndId: transfer.endToEndId,
-    currency: transfer.currencyCode,
-    amount: transfer.amount,
-    settlementDate: transfer.settlementDate,
-    debtorFullName: transfer.debtorFullName,
-    debtorIban: transfer.debtorIban,
-    debtorBic: transfer.debtorBic,
-    creditorFullName: transfer.creditorFullName,
-    creditorIban: transfer.creditorIban,
-    creditorBic: transfer.creditorBic,
-    remittanceInfo: transfer.remittanceInfo,
-  }});
+  return transfers.map((transfer) => {
+    return {
+      transferId: transfer.transferId,
+      clientId: transfer.clientId,
+      status: transfer.status,
+      messageId: 'SHOULD BE REMOVED FROM GUI',
+      transferTimestamp: transfer.transferTimestamp,
+      endToEndId: transfer.endToEndId,
+      currency: transfer.currencyCode,
+      amount: transfer.amount,
+      settlementDate: transfer.settlementDate,
+      debtorFullName: transfer.debtorFullName,
+      debtorIban: transfer.debtorIban,
+      debtorBic: transfer.debtorBic,
+      creditorFullName: transfer.creditorFullName,
+      creditorIban: transfer.creditorIban,
+      creditorBic: transfer.creditorBic,
+      remittanceInfo: transfer.remittanceInfo
+    }
+  })
 }
 
 export async function makeTransfer(
@@ -200,12 +197,12 @@ async function getAvailableCurrencies(bank: BankName): Promise<string[]> {
 
 async function getExchangeValues(bank: BankName): Promise<Record<string, number>> {
   try {
-//     const response = await ofetch<Record<string, number>>(joinURL(bankBaseRoute(bank), 'helpers', 'exchangeValues'), {
-//       method: 'GET'
-//     })
-    const response = { 'EUR': 0.88, 'USDC': 1 }
+    //     const response = await ofetch<Record<string, number>>(joinURL(bankBaseRoute(bank), 'helpers', 'exchangeValues'), {
+    //       method: 'GET'
+    //     })
+    const response = { EUR: 0.88, USDC: 1 }
     return z.record(z.string(), z.number()).parse(response)
-    } catch (error) {
+  } catch (error) {
     handleError(`fetching exchange values for ${bank}`, error)
     return {}
   }
@@ -217,7 +214,7 @@ async function getIbans(bank: BankName): Promise<string[]> {
     const response = await ofetch<string[]>(joinURL(bankBaseRoute(contraBank), 'bank', 'iban'), {
       method: 'GET'
     })
-//     const response = ["GB33BUKB20201555555555"];
+    //     const response = ["GB33BUKB20201555555555"];
     return z.string().array().parse(response)
   } catch (error) {
     handleError(`fetching IBANs for ${bank}`, error)

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

@@ -60,9 +60,7 @@ export function getTransactionFormData(senderBank: BankName) {
   }
 }
 
-export function newTransaction(
-  transaction: Omit<Transaction, 'uetr' | 'createdAt' | 'updatedAt' | 'status'>
-): void {
+export function newTransaction(transaction: Omit<Transaction, 'uetr' | 'createdAt' | 'updatedAt' | 'status'>): void {
   const newTransaction: Transaction = {
     ...transaction,
     uetr: faker.string.uuid(),