Feat/redesign roadmap2

src/components/Settings/SettingsBank.vue

@@ -27,22 +27,38 @@
         </form>
         <hr>
         <div class="form-group mb-0">
-            <label class="d-block">Betalingshistorikk</label>
-            <div class="border border-gray-500 bg-gray-200 p-3 text-center font-size-sm">Du har ikke foretatt noen betaling.</div>
+            <label class="d-block">Saldo oversikt</label>
+            <div class="border border-gray-500 bg-gray-200 p-3 text-center font-size-sm">
+              <div class="row">
+                <div class="col-sm-6">
+                  <div class="card-box tilebox-one"><i class="icon-rocket float-right text-muted"></i>
+                    <h6 class="text-muted text-uppercase mt-0">Brukskonto</h6>
+                    <h2 class="">{{spendingAccountBalance}} Kr</h2></div>
+                </div>
+                <div class="col-sm-6">
+                  <div class="card-box tilebox-one"><i class="icon-rocket float-right text-muted"></i>
+                    <h6 class="text-muted text-uppercase mt-0">Sparekonto</h6>
+                    <h2 class="">{{savingsAccountBalance}} Kr</h2></div>
+                </div>
+              </div>
+            </div>
         </div>
     </div>
 </template>
 
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue';
 import type { BankAccountDTO } from '@/api';
 import { UserService } from '@/api';
+import  handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
 
 
 const spendingAccount = ref()
 const savingsAccount = ref()
+const spendingAccountBalance = ref()
+const savingsAccountBalance = ref()
 
 
 const handleSpendingInputEvent = (newValue: any) => {
@@ -66,7 +82,7 @@ const handleSavingSubmit = async () => {
     try {
         UserService.selectBankAccount({ requestBody: updateSaving })
     } catch (err) {
-        console.error(err)
+      handleUnknownError(err)
     }
 }
 
@@ -80,7 +96,18 @@ const handleSpendingSubmit = async () => {
     try {
         UserService.selectBankAccount({ requestBody: updateSaving })
     } catch (err) {
-        console.error(err)
+      handleUnknownError(err)
     }
 }
+
+onMounted(getAccountInfo)
+async function getAccountInfo() {
+  try {
+    let response = await UserService.getUser()
+    savingsAccountBalance.value = response.savingsAccount?.balance
+    spendingAccountBalance.value = response.checkingAccount?.balance
+  } catch (err) {
+    handleUnknownError(err)
+  }
+}
 </script>
\ No newline at end of file