yourpart3/frontend/src/views/falukant/BankView.vue

<template>
  <div class="contenthidden">
    <StatusBar />
    <div class="contentscroll">

      <h2>{{ $t('falukant.bank.title') }}</h2>
      <SimpleTabs v-model="activeTab" :tabs="tabs" />

      <!-- OVERVIEW -->
      <div v-if="activeTab === 'account'">
        <div class="account-section">
          <table>
            <tr>
              <td>{{ $t('falukant.bank.account.balance') }}</td>
              <td>{{ formatCost(bankOverview.money) }}</td>
            </tr>
            <tr>
              <td>{{ $t('falukant.bank.account.totalDebt') }}</td>
              <td>{{ formatCost(bankOverview.totalDebt) }}</td>
            </tr>
            <tr>
              <td>{{ $t('falukant.bank.account.maxCredit') }}</td>
              <td>{{ formatCost(bankOverview.maxCredit) }}</td>
            </tr>
            <tr>
              <td>{{ $t('falukant.bank.account.availableCredit') }}</td>
              <td>{{ formatCost(bankOverview.availableCredit) }}</td>
            </tr>
          </table>
        </div>
      </div>

      <!-- ACTIVE CREDITS -->
      <div v-else-if="activeTab === 'credits'">
        <div class="credits-section">
          <div v-if="bankOverview.activeCredits?.length">
            <table class="credits-table">
              <thead>
                <tr>
                  <th>{{ $t('falukant.bank.credits.amount') }}</th>
                  <th>{{ $t('falukant.bank.credits.remaining') }}</th>
                  <th>{{ $t('falukant.bank.credits.interestRate') }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="credit in bankOverview.activeCredits" :key="credit.id">
                  <td>{{ formatCost(credit.amount) }}</td>
                  <td>{{ formatCost(credit.remainingAmount) }}</td>
                  <td>{{ credit.interestRate }}%</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else>
            <p>{{ $t('falukant.bank.credits.none') }}</p>
          </div>
        </div>
      </div>

      <!-- PAYOFF INLINE -->
      <div v-else-if="activeTab === 'payoff'">
        <div class="payoff-section">
          <label>
            {{ $t('falukant.bank.credits.payoff.height') }}:
            <input
              type="number"
              v-model="selectedCredit"
              :min="0"
              :max="bankOverview.availableCredit"
              value="0"
            />
          </label>
          <div v-if="selectedCredit">
            <p>{{ $t('falukant.bank.credits.payoff.remaining') }}: {{ formatCost(bankOverview.availableCredit - selectedCredit) }}</p>
            <p>{{ $t('falukant.bank.credits.payoff.fee') }}: {{ formatCost(bankOverview.fee) }}</p>
            <p>{{ $t('falukant.bank.credits.payoff.feeHeight') }}: {{ formatCost(feeRate()) }}</p>
            <p>
              <strong>{{ $t('falukant.bank.credits.payoff.total') }}: {{ formatCost(creditCost()) }}</strong>
            </p>
            <button @click="confirmPayoff" class="button" :disabled="!selectedCredit">
              {{ $t('falukant.bank.credits.payoff.confirm') }}
            </button>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import StatusBar from '@/components/falukant/StatusBar.vue';
import SimpleTabs from '@/components/SimpleTabs.vue';
import apiClient from '@/utils/axios.js';
import { mapState } from 'vuex';

export default {
  name: 'BankView',
  components: { StatusBar, SimpleTabs },
  data() {
    return {
      activeTab: 'account',
      tabs: [
        { value: 'account', label: 'falukant.bank.account.title' },
        { value: 'credits', label: 'falukant.bank.credits.title' },
        { value: 'payoff', label: 'falukant.bank.credits.payoff.title' }
      ],
      bankOverview: {
        money: 0,
        totalDebt: 0,
        maxCredit: 0,
        availableCredit: 0,
        activeCredits: []
      },
      selectedCreditId: null,
      selectedCredit: null,
      earlyPayoffFee: 0
    };
  },
  computed: {
    ...mapState(['socket'])
  },
  async mounted() {
    await this.loadBankOverview();
    this.setupSocketEvents();
  },
  beforeUnmount() {
    if (this.socket) {
      this.socket.off('falukantUpdateStatus', this.loadBankOverview);
    }
  },
  methods: {
    setupSocketEvents() {
      if (this.socket) {
        this.socket.on('falukantUpdateStatus', (data) => {
          this.handleEvent({ event: 'falukantUpdateStatus', ...data });
        });
      } else {
        setTimeout(() => this.setupSocketEvents(), 1000);
      }
    },
    handleEvent(eventData) {
      switch (eventData.event) {
        case 'falukantUpdateStatus':
          this.loadBankOverview();
          break;
      }
    },
    async loadBankOverview() {
      try {
        const { data } = await apiClient.get('/api/falukant/bank/overview');
        this.bankOverview = data;
      } catch (err) {
        console.error(err);
      }
    },
    async confirmPayoff() {
      try {
        await apiClient.post('/api/falukant/bank/credits', { 
          height: this.selectedCredit
         });
        await this.loadBankOverview();
        this.selectedCredit = null;
        this.activeTab = 'credits';
      } catch (err) {
        console.error(err);
      }
    },
    handleDaemonMessage(msg) {
      try {
        if (['falukantUpdateStatus', 'moneyChange', 'creditChange'].includes(msg.event)) {
          this.loadBankOverview();
        }
      } catch (err) {
        console.error(evt, err);
      }
    },
    feeRate() {
      return this.bankOverview.fee * this.selectedCredit / 100 + this.selectedCredit / 10;
    },
    creditCost() {
      return this.selectedCredit + (this.bankOverview.fee * 10 * this.selectedCredit / 100);
    },  
    formatCost(val) {
      return new Intl.NumberFormat(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(val);
    }
  }
};
</script>

<style scoped lang="scss">
h2 { padding-top: 20px; }
</style>