Expand frontend

2026-01-10 12:24:50 +00:00 · 2020-07-12 17:30:24 +02:00
parent 72a2718a93
commit e24c2491a6
53 changed files with 1197 additions and 862 deletions
--- a/frontend/src/components/accounts/Edit.vue
+++ b/frontend/src/components/accounts/Edit.vue
@@ -0,0 +1,33 @@
+<!--
+  - Edit.vue
+  - Copyright (c) 2020 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "Edit"
+    }
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/components/accounts/Index.vue
+++ b/frontend/src/components/accounts/Index.vue
@@ -0,0 +1,35 @@
+<!--
+  - Index.vue
+  - Copyright (c) 2020 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+    <div>
+        <router-view></router-view>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Index"
+    }
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/components/accounts/List.vue
+++ b/frontend/src/components/accounts/List.vue
@@ -0,0 +1,143 @@
+<!--
+  - List.vue
+  - Copyright (c) 2020 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Title thing</h3>
+                    <div class="card-tools">
+                        <div class="input-group input-group-sm" style="width: 150px;">
+                            <input type="text" name="table_search" class="form-control float-right" placeholder="Search">
+
+                            <div class="input-group-append">
+                                <button type="submit" class="btn btn-default">
+                                    <i class="fas fa-search"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- TODO -->
+                    <!--
+                    <div class="card-tools">
+                        <ul class="pagination pagination-sm float-right">
+                            <li class="page-item"><a class="page-link" href="#">«</a></li>
+                            <li class="page-item"><a class="page-link" href="#">1</a></li>
+                            <li class="page-item"><a class="page-link" href="#">2</a></li>
+                            <li class="page-item"><a class="page-link" href="#">3</a></li>
+                            <li class="page-item"><a class="page-link" href="#">»</a></li>
+                        </ul>
+                    </div>
+                    -->
+                </div>
+                <div class="card-body p-0">
+                    <table class="table table-sm table-striped">
+                        <thead>
+                        <tr>
+                            <th>&nbsp;</th>
+                            <th>{{ $t('list.name') }}</th>
+                            <th v-if="'asset' === $props.accountTypes">{{ $t('list.role') }}</th>
+                            <th>{{ $t('list.iban') }}</th>
+                            <th style="text-align: right;">{{ $t('list.currentBalance') }}</th>
+                            <th>{{ $t('list.balanceDiff') }}</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr v-for="account in accounts">
+                            <td>
+                                <div class="btn-group btn-group-xs">
+                                    <a href="edit" class="btn btn-xs btn-default"><i class="fa fas fa-pencil-alt"></i></a>
+                                    <a href="del" class="btn btn-xs btn-danger"><i class="fa far fa-trash"></i></a>
+                                </div>
+                            </td>
+                            <td>
+                                <router-link :to="{ name: 'accounts.show', params: { id: account.id }}"
+                                             :title="account.attributes.name">{{ account.attributes.name }}
+                                </router-link>
+                            </td>
+                            <td v-if="'asset' === $props.accountTypes">
+                                {{ account.attributes.account_role }}
+                            </td>
+                            <td>
+                                {{ account.attributes.iban }}
+                            </td>
+                            <td style="text-align: right;">
+                                {{ Intl.NumberFormat('en-US', {style: 'currency', currency:
+                                account.attributes.currency_code}).format(account.attributes.current_balance)}}
+                            </td>
+                            <td>diff</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="card-footer">
+                    Footer stuff.
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "List",
+        props: {
+            accountTypes: String
+        },
+        data() {
+            return {
+                accounts: []
+            }
+        },
+        mounted() {
+            axios.get('./api/v1/accounts?type=' + this.$props.accountTypes)
+                .then(response => {
+                          this.loadAccounts(response.data.data);
+                      }
+                );
+        },
+        methods: {
+            loadAccounts(data) {
+                for (let key in data) {
+                    if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
+                        let acct = data[key];
+
+                        // some conversions here.
+                        if ('asset' === acct.attributes.type && null !== acct.attributes.account_role) {
+                            acct.attributes.account_role = this.$t('firefly.account_role_' + acct.attributes.account_role);
+                        }
+                        if ('asset' === acct.attributes.type && null === acct.attributes.account_role) {
+                            acct.attributes.account_role = this.$t('firefly.Default asset account');
+                        }
+                        if (null === acct.attributes.iban) {
+                            acct.attributes.iban = acct.attributes.account_number;
+                        }
+                        this.accounts.push(acct);
+                    }
+                }
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/components/accounts/Show.vue
+++ b/frontend/src/components/accounts/Show.vue
@@ -0,0 +1,35 @@
+<!--
+  - Show.vue
+  - Copyright (c) 2020 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+    <div>
+        I am a show
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Show"
+    }
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/components/transactions/TransactionListLarge.vue
+++ b/frontend/src/components/transactions/TransactionListLarge.vue
@@ -19,7 +19,7 @@
  -->

 <template>
-    <table class="table table-striped">
+    <table class="table table-striped table-sm">
        <caption style="display:none;">{{ $t('firefly.transaction_table_description') }}</caption>
        <thead>
        <tr>
--- a/frontend/src/components/transactions/TransactionListMedium.vue
+++ b/frontend/src/components/transactions/TransactionListMedium.vue
@@ -19,7 +19,7 @@
  -->

 <template>
-    <table class="table table-striped">
+    <table class="table table-striped table-sm">
        <caption style="display:none;">{{ $t('firefly.transaction_table_description') }}</caption>
        <thead>
        <tr>
--- a/frontend/src/components/transactions/TransactionListSmall.vue
+++ b/frontend/src/components/transactions/TransactionListSmall.vue
@@ -19,7 +19,7 @@
  -->

 <template>
-    <table class="table table-striped">
+    <table class="table table-striped table-sm">
        <caption style="display:none;">{{ $t('firefly.transaction_table_description') }}</caption>
        <thead>
        <tr>
--- a/frontend/src/locales/cs.json
+++ b/frontend/src/locales/cs.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Pokladni\u010dky",
        "piggy_bank": "Pokladni\u010dka",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "V\u00fdchoz\u00ed \u00fa\u010det s aktivy",
+        "account_role_defaultAsset": "V\u00fdchoz\u00ed \u00fa\u010det aktiv",
+        "account_role_savingAsset": "Spo\u0159ic\u00ed \u00fa\u010det",
+        "account_role_sharedAsset": "Sd\u00edlen\u00fd \u00fa\u010det aktiv",
+        "account_role_ccAsset": "Kreditn\u00ed karta",
+        "account_role_cashWalletAsset": "Pen\u011b\u017eenka"
    },
    "list": {
        "piggy_bank": "Pokladni\u010dka",
        "percentage": "pct.",
        "amount": "\u010c\u00e1stka",
        "name": "Jm\u00e9no",
+        "role": "Role",
+        "iban": "IBAN",
+        "lastActivity": "Posledn\u00ed aktivita",
+        "currentBalance": "Aktu\u00e1ln\u00ed z\u016fstatek",
+        "balanceDiff": "Rozd\u00edl z\u016fstatku",
        "next_expected_match": "Dal\u0161\u00ed o\u010dek\u00e1van\u00e1 shoda"
    },
    "config": {
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Sparschweine",
        "piggy_bank": "Sparschwein",
-        "amounts": "Betr\u00e4ge"
+        "amounts": "Betr\u00e4ge",
+        "Default asset account": "Standard-Bestandskonto",
+        "account_role_defaultAsset": "Standard-Bestandskonto",
+        "account_role_savingAsset": "Sparkonto",
+        "account_role_sharedAsset": "Gemeinsames Bestandskonto",
+        "account_role_ccAsset": "Kreditkarte",
+        "account_role_cashWalletAsset": "Geldb\u00f6rse"
    },
    "list": {
        "piggy_bank": "Sparschwein",
        "percentage": "%",
        "amount": "Betrag",
        "name": "Name",
+        "role": "Rolle",
+        "iban": "IBAN",
+        "lastActivity": "Letzte Aktivit\u00e4t",
+        "currentBalance": "Aktueller Kontostand",
+        "balanceDiff": "Saldendifferenz",
        "next_expected_match": "N\u00e4chste erwartete \u00dcbereinstimmung"
    },
    "config": {
--- a/frontend/src/locales/el.json
+++ b/frontend/src/locales/el.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "\u039a\u03bf\u03c5\u03bc\u03c0\u03b1\u03c1\u03ac\u03b4\u03b5\u03c2",
        "piggy_bank": "\u039a\u03bf\u03c5\u03bc\u03c0\u03b1\u03c1\u03ac\u03c2",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "\u0392\u03b1\u03c3\u03b9\u03ba\u03cc\u03c2 \u03bb\u03bf\u03b3\u03b1\u03c1\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03ba\u03b5\u03c6\u03b1\u03bb\u03b1\u03af\u03bf\u03c5",
+        "account_role_defaultAsset": "\u0392\u03b1\u03c3\u03b9\u03ba\u03cc\u03c2 \u03bb\u03bf\u03b3\u03b1\u03c1\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03ba\u03b5\u03c6\u03b1\u03bb\u03b1\u03af\u03bf\u03c5",
+        "account_role_savingAsset": "\u039b\u03bf\u03b3\u03b1\u03c1\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03b1\u03c0\u03bf\u03c4\u03b1\u03bc\u03af\u03b5\u03c5\u03c3\u03b7\u03c2",
+        "account_role_sharedAsset": "\u039a\u03bf\u03b9\u03bd\u03cc\u03c2 \u03bb\u03bf\u03b3\u03b1\u03c1\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03ba\u03b5\u03c6\u03b1\u03bb\u03b1\u03af\u03bf\u03c5",
+        "account_role_ccAsset": "\u03a0\u03b9\u03c3\u03c4\u03c9\u03c4\u03b9\u03ba\u03ae \u03ba\u03ac\u03c1\u03c4\u03b1",
+        "account_role_cashWalletAsset": "\u03a0\u03bf\u03c1\u03c4\u03bf\u03c6\u03cc\u03bb\u03b9 \u03bc\u03b5\u03c4\u03c1\u03b7\u03c4\u03ce\u03bd"
    },
    "list": {
        "piggy_bank": "\u039a\u03bf\u03c5\u03bc\u03c0\u03b1\u03c1\u03ac\u03c2",
        "percentage": "pct.",
        "amount": "\u03a0\u03bf\u03c3\u03cc",
        "name": "\u038c\u03bd\u03bf\u03bc\u03b1",
+        "role": "\u03a1\u03cc\u03bb\u03bf\u03c2",
+        "iban": "IBAN",
+        "lastActivity": "\u03a4\u03b5\u03bb\u03b5\u03c5\u03c4\u03b1\u03af\u03b1 \u03b4\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1",
+        "currentBalance": "\u03a4\u03c1\u03ad\u03c7\u03bf\u03bd \u03c5\u03c0\u03cc\u03bb\u03bf\u03b9\u03c0\u03bf",
+        "balanceDiff": "\u0394\u03b9\u03b1\u03c6\u03bf\u03c1\u03ac \u03c5\u03c0\u03bf\u03bb\u03bf\u03af\u03c0\u03bf\u03c5",
        "next_expected_match": "\u0395\u03c0\u03cc\u03bc\u03b5\u03bd\u03b7 \u03b1\u03bd\u03b1\u03bc\u03b5\u03bd\u03cc\u03bc\u03b5\u03bd\u03b7 \u03b1\u03bd\u03c4\u03b9\u03c3\u03c4\u03bf\u03af\u03c7\u03b9\u03c3\u03b7"
    },
    "config": {
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Piggy banks",
        "piggy_bank": "Piggy bank",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "Default asset account",
+        "account_role_defaultAsset": "Default asset account",
+        "account_role_savingAsset": "Savings account",
+        "account_role_sharedAsset": "Shared asset account",
+        "account_role_ccAsset": "Credit card",
+        "account_role_cashWalletAsset": "Cash wallet"
    },
    "list": {
        "piggy_bank": "Piggy bank",
        "percentage": "pct.",
        "amount": "Amount",
        "name": "Name",
+        "role": "Role",
+        "iban": "IBAN",
+        "lastActivity": "Last activity",
+        "currentBalance": "Current balance",
+        "balanceDiff": "Balance difference",
        "next_expected_match": "Next expected match"
    },
    "config": {
--- a/frontend/src/locales/es.json
+++ b/frontend/src/locales/es.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Alcanc\u00edas",
        "piggy_bank": "Alcanc\u00eda",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "Cuenta de ingresos por defecto",
+        "account_role_defaultAsset": "Cuentas de ingresos por defecto",
+        "account_role_savingAsset": "Cuentas de ahorros",
+        "account_role_sharedAsset": "Cuenta de ingresos compartida",
+        "account_role_ccAsset": "Tarjeta de Cr\u00e9dito",
+        "account_role_cashWalletAsset": "Billetera de efectivo"
    },
    "list": {
        "piggy_bank": "Alcancilla",
        "percentage": "pct.",
        "amount": "Monto",
        "name": "Nombre",
+        "role": "Rol",
+        "iban": "IBAN",
+        "lastActivity": "Actividad m\u00e1s reciente",
+        "currentBalance": "Balance actual",
+        "balanceDiff": "Diferencia de saldo",
        "next_expected_match": "Pr\u00f3xima coincidencia esperada"
    },
    "config": {
--- a/frontend/src/locales/fi.json
+++ b/frontend/src/locales/fi.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "S\u00e4\u00e4st\u00f6possut",
        "piggy_bank": "S\u00e4\u00e4st\u00f6possu",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "Oletusomaisuustili",
+        "account_role_defaultAsset": "Oletusk\u00e4ytt\u00f6tili",
+        "account_role_savingAsset": "S\u00e4\u00e4st\u00f6tili",
+        "account_role_sharedAsset": "Jaettu k\u00e4ytt\u00f6tili",
+        "account_role_ccAsset": "Luottokortti",
+        "account_role_cashWalletAsset": "K\u00e4teinen"
    },
    "list": {
        "piggy_bank": "S\u00e4\u00e4st\u00f6possu",
        "percentage": "pros.",
        "amount": "Summa",
        "name": "Nimi",
+        "role": "Rooli",
+        "iban": "IBAN",
+        "lastActivity": "Viimeisin tapahtuma",
+        "currentBalance": "T\u00e4m\u00e4nhetkinen saldo",
+        "balanceDiff": "Saldomuutos",
        "next_expected_match": "Seuraava lasku odotettavissa"
    },
    "config": {
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Tirelires",
        "piggy_bank": "Tirelire",
-        "amounts": "Montants"
+        "amounts": "Montants",
+        "Default asset account": "Compte d\u2019actif par d\u00e9faut",
+        "account_role_defaultAsset": "Compte d'actif par d\u00e9faut",
+        "account_role_savingAsset": "Compte d\u2019\u00e9pargne",
+        "account_role_sharedAsset": "Compte d'actif partag\u00e9",
+        "account_role_ccAsset": "Carte de cr\u00e9dit",
+        "account_role_cashWalletAsset": "Porte-monnaie"
    },
    "list": {
        "piggy_bank": "Tirelire",
        "percentage": "pct.",
        "amount": "Montant",
        "name": "Nom",
+        "role": "R\u00f4le",
+        "iban": "Num\u00e9ro IBAN",
+        "lastActivity": "Activit\u00e9 r\u00e9cente",
+        "currentBalance": "Solde courant",
+        "balanceDiff": "Diff\u00e9rence de solde",
        "next_expected_match": "Prochaine association attendue"
    },
    "config": {
--- a/frontend/src/locales/hu.json
+++ b/frontend/src/locales/hu.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Malacperselyek",
        "piggy_bank": "Malacpersely",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "Alap\u00e9rtelmezett eszk\u00f6zsz\u00e1mla",
+        "account_role_defaultAsset": "Alap\u00e9rtelmezett eszk\u00f6zsz\u00e1mla",
+        "account_role_savingAsset": "Megtakar\u00edt\u00e1si sz\u00e1mla",
+        "account_role_sharedAsset": "Megosztott eszk\u00f6zsz\u00e1mla",
+        "account_role_ccAsset": "Hitelk\u00e1rtya",
+        "account_role_cashWalletAsset": "K\u00e9szp\u00e9nz"
    },
    "list": {
        "piggy_bank": "Malacpersely",
        "percentage": "%",
        "amount": "\u00d6sszeg",
        "name": "N\u00e9v",
+        "role": "Szerepk\u00f6r",
+        "iban": "IBAN",
+        "lastActivity": "Utols\u00f3 aktivit\u00e1s",
+        "currentBalance": "Aktu\u00e1lis egyenleg",
+        "balanceDiff": "Egyenleg k\u00fcl\u00f6nbs\u00e9g",
        "next_expected_match": "K\u00f6vetkez\u0151 v\u00e1rhat\u00f3 egyez\u00e9s"
    },
    "config": {
--- a/frontend/src/locales/id.json
+++ b/frontend/src/locales/id.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Piggy banks",
        "piggy_bank": "Celengan",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "Akun aset standar",
+        "account_role_defaultAsset": "Akun aset standar",
+        "account_role_savingAsset": "Rekening tabungan",
+        "account_role_sharedAsset": "Akun aset bersama",
+        "account_role_ccAsset": "Kartu kredit",
+        "account_role_cashWalletAsset": "Cash wallet"
    },
    "list": {
        "piggy_bank": "Celengan",
        "percentage": "pct.",
        "amount": "Jumlah",
        "name": "Nama",
+        "role": "Peran",
+        "iban": "IBAN",
+        "lastActivity": "Aktifitas terakhir",
+        "currentBalance": "Saldo saat ini",
+        "balanceDiff": "Perbedaan saldo",
        "next_expected_match": "Transaksi yang diharapkan berikutnya"
    },
    "config": {
--- a/frontend/src/locales/it.json
+++ b/frontend/src/locales/it.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Salvadanai",
        "piggy_bank": "Salvadanaio",
-        "amounts": "Importi"
+        "amounts": "Importi",
+        "Default asset account": "Conto attivit\u00e0 predefinito",
+        "account_role_defaultAsset": "Conto attivit\u00e0 predefinito",
+        "account_role_savingAsset": "Conto risparmio",
+        "account_role_sharedAsset": "Conto attivit\u00e0 condiviso",
+        "account_role_ccAsset": "Carta di credito",
+        "account_role_cashWalletAsset": "Portafoglio"
    },
    "list": {
        "piggy_bank": "Salvadanaio",
        "percentage": "perc.",
        "amount": "Importo",
        "name": "Nome",
+        "role": "Ruolo",
+        "iban": "IBAN",
+        "lastActivity": "Ultima attivit\u00e0",
+        "currentBalance": "Saldo corrente",
+        "balanceDiff": "Differenze saldi",
        "next_expected_match": "Prossimo abbinamento previsto"
    },
    "config": {
--- a/frontend/src/locales/nb.json
+++ b/frontend/src/locales/nb.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Sparegriser",
        "piggy_bank": "Sparegris",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "Standard aktivakonto",
+        "account_role_defaultAsset": "Standard aktivakonto",
+        "account_role_savingAsset": "Sparekonto",
+        "account_role_sharedAsset": "Delt aktivakonto",
+        "account_role_ccAsset": "Kredittkort",
+        "account_role_cashWalletAsset": "Kontant lommebok"
    },
    "list": {
        "piggy_bank": "Sparegris",
        "percentage": "pct.",
        "amount": "Bel\u00f8p",
        "name": "Navn",
+        "role": "Rolle",
+        "iban": "IBAN",
+        "lastActivity": "Siste aktivitet",
+        "currentBalance": "N\u00e5v\u00e6rende saldo",
+        "balanceDiff": "Saldodifferanse",
        "next_expected_match": "Neste forventede treff"
    },
    "config": {
--- a/frontend/src/locales/nl.json
+++ b/frontend/src/locales/nl.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Spaarpotjes",
        "piggy_bank": "Spaarpotje",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "Standaard betaalrekening",
+        "account_role_defaultAsset": "Standaard betaalrekening",
+        "account_role_savingAsset": "Spaarrekening",
+        "account_role_sharedAsset": "Gedeelde betaalrekening",
+        "account_role_ccAsset": "Credit card",
+        "account_role_cashWalletAsset": "Cash"
    },
    "list": {
        "piggy_bank": "Spaarpotje",
        "percentage": "pct",
        "amount": "Bedrag",
        "name": "Naam",
+        "role": "Rol",
+        "iban": "IBAN",
+        "lastActivity": "Laatste activiteit",
+        "currentBalance": "Huidig saldo",
+        "balanceDiff": "Saldoverschil",
        "next_expected_match": "Volgende verwachte match"
    },
    "config": {
--- a/frontend/src/locales/pl.json
+++ b/frontend/src/locales/pl.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Skarbonki",
        "piggy_bank": "Skarbonka",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "Domy\u015blne konto aktyw\u00f3w",
+        "account_role_defaultAsset": "Domy\u015blne konto aktyw\u00f3w",
+        "account_role_savingAsset": "Konto oszcz\u0119dno\u015bciowe",
+        "account_role_sharedAsset": "Wsp\u00f3\u0142dzielone konto aktyw\u00f3w",
+        "account_role_ccAsset": "Karta kredytowa",
+        "account_role_cashWalletAsset": "Portfel got\u00f3wkowy"
    },
    "list": {
        "piggy_bank": "Skarbonka",
        "percentage": "%",
        "amount": "Kwota",
        "name": "Nazwa",
+        "role": "Rola",
+        "iban": "IBAN",
+        "lastActivity": "Ostatnia aktywno\u015b\u0107",
+        "currentBalance": "Bie\u017c\u0105ce saldo",
+        "balanceDiff": "R\u00f3\u017cnica sald",
        "next_expected_match": "Nast\u0119pne oczekiwane dopasowanie"
    },
    "config": {
--- a/frontend/src/locales/pt-br.json
+++ b/frontend/src/locales/pt-br.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Cofrinhos",
        "piggy_bank": "Cofrinho",
-        "amounts": "Quantias"
+        "amounts": "Quantias",
+        "Default asset account": "Conta padr\u00e3o",
+        "account_role_defaultAsset": "Conta padr\u00e3o",
+        "account_role_savingAsset": "Conta poupan\u00e7a",
+        "account_role_sharedAsset": "Contas de ativos compartilhadas",
+        "account_role_ccAsset": "Cart\u00e3o de cr\u00e9dito",
+        "account_role_cashWalletAsset": "Carteira de dinheiro"
    },
    "list": {
        "piggy_bank": "Cofrinho",
        "percentage": "pct.",
        "amount": "Total",
        "name": "Nome",
+        "role": "Papel",
+        "iban": "IBAN",
+        "lastActivity": "\u00daltima atividade",
+        "currentBalance": "Saldo atual",
+        "balanceDiff": "Diferen\u00e7a de saldo",
        "next_expected_match": "Pr\u00f3ximo correspondente esperado"
    },
    "config": {
--- a/frontend/src/locales/ro.json
+++ b/frontend/src/locales/ro.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Pu\u0219culi\u021b\u0103",
        "piggy_bank": "Pu\u0219culi\u021b\u0103",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "Ccont de active implicit",
+        "account_role_defaultAsset": "Contul implicit activ",
+        "account_role_savingAsset": "Cont de economii",
+        "account_role_sharedAsset": "Contul de active partajat",
+        "account_role_ccAsset": "Card de credit",
+        "account_role_cashWalletAsset": "Cash - Numerar"
    },
    "list": {
        "piggy_bank": "Pu\u0219culi\u021b\u0103",
        "percentage": "procent %",
        "amount": "Sum\u0103",
        "name": "Nume",
+        "role": "Rol",
+        "iban": "IBAN",
+        "lastActivity": "Ultima activitate",
+        "currentBalance": "Sold curent",
+        "balanceDiff": "Diferen\u021ba de sold",
        "next_expected_match": "Urm\u0103toarea potrivire a\u0219teptat\u0103"
    },
    "config": {
--- a/frontend/src/locales/ru.json
+++ b/frontend/src/locales/ru.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "\u041a\u043e\u043f\u0438\u043b\u043a\u0438",
        "piggy_bank": "\u041a\u043e\u043f\u0438\u043b\u043a\u0430",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "\u0421\u0447\u0451\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e",
+        "account_role_defaultAsset": "\u0421\u0447\u0451\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e",
+        "account_role_savingAsset": "\u0421\u0431\u0435\u0440\u0435\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0447\u0435\u0442",
+        "account_role_sharedAsset": "\u041e\u0431\u0449\u0438\u0439 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0447\u0451\u0442",
+        "account_role_ccAsset": "\u041a\u0440\u0435\u0434\u0438\u0442\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430",
+        "account_role_cashWalletAsset": "\u041a\u043e\u0448\u0435\u043b\u0451\u043a \u0441 \u043d\u0430\u043b\u0438\u0447\u043d\u044b\u043c\u0438"
    },
    "list": {
        "piggy_bank": "\u041a\u043e\u043f\u0438\u043b\u043a\u0430",
        "percentage": "\u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u0432",
        "amount": "\u0421\u0443\u043c\u043c\u0430",
        "name": "\u0418\u043c\u044f",
+        "role": "\u0420\u043e\u043b\u044c",
+        "iban": "IBAN",
+        "lastActivity": "\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c",
+        "currentBalance": "\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0431\u0430\u043b\u0430\u043d\u0441",
+        "balanceDiff": "\u0420\u0430\u0437\u043d\u043e\u0441\u0442\u044c \u0431\u0430\u043b\u0430\u043d\u0441\u0430",
        "next_expected_match": "\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442"
    },
    "config": {
--- a/frontend/src/locales/sv.json
+++ b/frontend/src/locales/sv.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Spargrisar",
        "piggy_bank": "Piggy bank",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "F\u00f6rvalt tillg\u00e5ngskonto",
+        "account_role_defaultAsset": "F\u00f6rvalt tillg\u00e5ngskonto",
+        "account_role_savingAsset": "Sparkonto",
+        "account_role_sharedAsset": "Delat tillg\u00e5ngskonto",
+        "account_role_ccAsset": "Kreditkort",
+        "account_role_cashWalletAsset": "Pl\u00e5nbok"
    },
    "list": {
        "piggy_bank": "Spargris",
        "percentage": "procent",
        "amount": "Belopp",
        "name": "Namn",
+        "role": "Roll",
+        "iban": "IBAN",
+        "lastActivity": "Senaste aktivitet",
+        "currentBalance": "Nuvarande saldo",
+        "balanceDiff": "Saldodifferens",
        "next_expected_match": "N\u00e4sta f\u00f6rv\u00e4ntade tr\u00e4ff"
    },
    "config": {
--- a/frontend/src/locales/tr.json
+++ b/frontend/src/locales/tr.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Piggy banks",
        "piggy_bank": "Kumbara",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "Varsay\u0131lan varl\u0131k hesab\u0131",
+        "account_role_defaultAsset": "Varsay\u0131lan varl\u0131k hesab\u0131",
+        "account_role_savingAsset": "Birikim hesab\u0131",
+        "account_role_sharedAsset": "Payla\u015f\u0131lan varl\u0131k hesab\u0131",
+        "account_role_ccAsset": "Kredi Kart\u0131",
+        "account_role_cashWalletAsset": "Nakit c\u00fczdan"
    },
    "list": {
        "piggy_bank": "Kumbara",
        "percentage": "yzd.",
        "amount": "Miktar",
        "name": "\u0130sim",
+        "role": "Rol",
+        "iban": "IBAN numaras\u0131",
+        "lastActivity": "Son Etkinlik",
+        "currentBalance": "Cari bakiye",
+        "balanceDiff": "Bakiye fark\u0131",
        "next_expected_match": "Beklenen sonraki e\u015fle\u015fme"
    },
    "config": {
--- a/frontend/src/locales/vi.json
+++ b/frontend/src/locales/vi.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "Heo \u0111\u1ea5t",
        "piggy_bank": "Heo \u0111\u1ea5t",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "M\u1eb7c \u0111\u1ecbnh t\u00e0i kho\u1ea3n",
+        "account_role_defaultAsset": "t\u00e0i kho\u1ea3n m\u1eb7c \u0111\u1ecbnh",
+        "account_role_savingAsset": "T\u00e0i kho\u1ea3n ti\u1ebft ki\u1ec7m",
+        "account_role_sharedAsset": "t\u00e0i kho\u1ea3n d\u00f9ng chung",
+        "account_role_ccAsset": "Th\u1ebb t\u00edn d\u1ee5ng",
+        "account_role_cashWalletAsset": "V\u00ed ti\u1ec1n m\u1eb7t"
    },
    "list": {
        "piggy_bank": "\u1ed0ng heo con",
        "percentage": "ph\u1ea7n tr\u0103m.",
        "amount": "S\u1ed1 ti\u1ec1n",
        "name": "T\u00ean",
+        "role": "Quy t\u1eafc",
+        "iban": "IBAN",
+        "lastActivity": "Ho\u1ea1t \u0111\u1ed9ng cu\u1ed1i c\u00f9ng",
+        "currentBalance": "S\u1ed1 d\u01b0 hi\u1ec7n t\u1ea1i",
+        "balanceDiff": "S\u1ed1 d\u01b0 ch\u00eanh l\u1ec7ch",
        "next_expected_match": "Tr\u1eadn \u0111\u1ea5u d\u1ef1 ki\u1ebfn ti\u1ebfp theo"
    },
    "config": {
--- a/frontend/src/locales/zh-cn.json
+++ b/frontend/src/locales/zh-cn.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "\u5b58\u94b1\u7f50",
        "piggy_bank": "\u5b58\u94b1\u7f50",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "\u9884\u8bbe\u8d44\u4ea7\u5e10\u6237",
+        "account_role_defaultAsset": "\u9884\u8bbe\u8d44\u4ea7\u5e10\u6237",
+        "account_role_savingAsset": "\u50a8\u84c4\u5e10\u6237",
+        "account_role_sharedAsset": "\u5171\u7528\u8d44\u4ea7\u5e10\u6237",
+        "account_role_ccAsset": "\u4fe1\u7528\u5361",
+        "account_role_cashWalletAsset": "\u73b0\u91d1\u94b1\u5305"
    },
    "list": {
        "piggy_bank": "\u5b58\u94b1\u7f50",
        "percentage": "%",
        "amount": "\u91d1\u989d",
        "name": "\u540d\u79f0",
+        "role": "\u89d2\u8272",
+        "iban": "\u56fd\u9645\u94f6\u884c\u5e10\u6237\u53f7\u7801 (IBAN)",
+        "lastActivity": "\u4e0a\u6b21\u6d3b\u52a8",
+        "currentBalance": "\u76ee\u524d\u9980\u989d",
+        "balanceDiff": "\u9980\u989d\u5dee",
        "next_expected_match": "\u4e0b\u4e00\u4e2a\u9884\u671f\u7684\u914d\u5bf9"
    },
    "config": {
--- a/frontend/src/locales/zh-tw.json
+++ b/frontend/src/locales/zh-tw.json
@@ -28,13 +28,24 @@
        "saved": "Saved",
        "piggy_banks": "\u5c0f\u8c6c\u64b2\u6eff",
        "piggy_bank": "\u5c0f\u8c6c\u64b2\u6eff",
-        "amounts": "Amounts"
+        "amounts": "Amounts",
+        "Default asset account": "\u9810\u8a2d\u8cc7\u7522\u5e33\u6236",
+        "account_role_defaultAsset": "\u9810\u8a2d\u8cc7\u7522\u5e33\u6236",
+        "account_role_savingAsset": "\u5132\u84c4\u5e33\u6236",
+        "account_role_sharedAsset": "\u5171\u7528\u8cc7\u7522\u5e33\u6236",
+        "account_role_ccAsset": "\u4fe1\u7528\u5361",
+        "account_role_cashWalletAsset": "\u73fe\u91d1\u9322\u5305"
    },
    "list": {
        "piggy_bank": "\u5c0f\u8c6c\u64b2\u6eff",
        "percentage": "pct.",
        "amount": "\u91d1\u984d",
        "name": "\u540d\u7a31",
+        "role": "\u89d2\u8272",
+        "iban": "\u570b\u969b\u9280\u884c\u5e33\u6236\u865f\u78bc (IBAN)",
+        "lastActivity": "\u4e0a\u6b21\u6d3b\u52d5",
+        "currentBalance": "\u76ee\u524d\u9918\u984d",
+        "balanceDiff": "\u9918\u984d\u5dee",
        "next_expected_match": "\u4e0b\u4e00\u500b\u9810\u671f\u7684\u914d\u5c0d"
    },
    "config": {
--- a/frontend/src/pages/accounts.js
+++ b/frontend/src/pages/accounts.js
@@ -0,0 +1,64 @@
+/*
+ * accounts.js
+ * Copyright (c) 2020 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+require('../bootstrap');
+
+import VueRouter from 'vue-router';
+import Index from "../components/accounts/Index";
+import List from "../components/accounts/List";
+import Show from "../components/accounts/Show";
+
+
+const routes = [
+    {path: '/', component: Index},
+    {path: '/accounts/asset', name: 'accounts.index.asset', component: List, props: {accountTypes: 'asset'}},
+    {path: '/accounts/expense', component: List, props: {accountTypes: 'expense'}},
+    {path: '/accounts/revenue', component: List, props: {accountTypes: 'revenue'}},
+    {path: '/accounts/liabilities', component: List, props: {accountTypes: 'liabilities'}},
+    {path: '/accounts/show/:id', name: 'accounts.show', component: Show}
+]
+
+// 3. Create the router instance and pass the `routes` option
+// You can pass in additional options here, but let's
+// keep it simple for now.
+const router = new VueRouter({
+                                 mode: 'history',
+                                 routes // short for `routes: routes`
+                             })
+
+// i18n
+let i18n = require('../i18n');
+
+let props = {};
+// new Vue({router,
+//             i18n,
+//             el: "#accounts",
+//             render: (createElement) => {
+//                 return createElement(List, { props: props });
+//             },
+//         });
+Vue.use(VueRouter);          // <== very important
+new Vue({
+            router,
+            i18n,
+            render(createElement) {
+                return createElement(Index, {props: props});
+            }
+        }).$mount('#accounts');